/* Ui::ConfirmComponent — diálogo de confirmação do design system (substitui o window.confirm do
   Turbo). <dialog> nativo (showModal) + backdrop; geometria sharp e tokens da casa. */

.c-ui-confirm{
  padding: 0; border: 0; background: transparent; color: var(--ink);
  max-width: 440px; width: calc(100vw - 40px);
}
.c-ui-confirm::backdrop{
  background: color-mix(in srgb, var(--ink) 46%, transparent);
  backdrop-filter: blur(2px);
}
.c-ui-confirm[open]{ animation: c-ui-confirm-in 160ms var(--ease) both; }
.c-ui-confirm[open]::backdrop{ animation: c-ui-confirm-fade 160ms var(--ease) both; }

.c-ui-confirm__box{
  margin: 0; background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px -28px rgba(17, 17, 17, .55);
  padding: 22px 24px 18px;
}
.c-ui-confirm__kicker{
  margin: 0 0 9px; font: 600 var(--fs-label)/1 var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.c-ui-confirm__message{ margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--ink); }

.c-ui-confirm__actions{ display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.c-ui-confirm__cancel{
  font: 600 var(--fs-ui)/1 var(--font-ui); padding: 10px 16px; cursor: pointer;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink-2);
  transition: border-color var(--t1) var(--ease), color var(--t1) var(--ease), background var(--t1) var(--ease);
}
.c-ui-confirm__cancel:hover{ border-color: var(--ink-3); color: var(--ink); background: #fcfcfb; }
.c-ui-confirm__ok{
  font: 600 var(--fs-ui)/1 var(--font-ui); padding: 10px 18px; cursor: pointer;
  border: 1px solid var(--danger); background: var(--danger); color: #fff;
  transition: background var(--t1) var(--ease), transform var(--t1) var(--ease);
}
.c-ui-confirm__ok:hover{ background: color-mix(in srgb, var(--danger) 84%, #000); }
.c-ui-confirm__ok:active{ transform: translateY(1px); }
.c-ui-confirm__cancel:focus-visible, .c-ui-confirm__ok:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }

@keyframes c-ui-confirm-in{ from{ opacity: 0; transform: translateY(-8px) scale(.98); } to{ opacity: 1; transform: none; } }
@keyframes c-ui-confirm-fade{ from{ opacity: 0; } to{ opacity: 1; } }

@media (prefers-reduced-motion: reduce){
  .c-ui-confirm[open], .c-ui-confirm[open]::backdrop{ animation: none; }
  .c-ui-confirm__cancel, .c-ui-confirm__ok{ transition: none; }
}