/* ============================================================
   claut-dialog — frames del sistema en lugar de alert/confirm/prompt del navegador · 23-oct-2026
   Modal (confirmar / avisar / pedir dato) + avisos efímeros (toast).
   Paleta propia con variables + variante html[data-theme="light"] (tokens --cts-* del tema claro).
   Movimiento: entrada ease-out fuerte 220 ms, salida 150 ms (más rápida), escala desde .96 (nunca 0);
   en teléfono el modal es hoja inferior (curva de cajón). prefers-reduced-motion: solo opacidad.
   ============================================================ */
:root {
  --cd-surface: rgba(20, 20, 24, 0.9);
  --cd-surface-2: rgba(255, 255, 255, 0.06);
  --cd-line: rgba(255, 255, 255, 0.09);
  --cd-ink: #f4f4f5;
  --cd-mid: #a1a1aa;
  --cd-veil: rgba(9, 9, 11, 0.5);
  --cd-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  --cd-input: rgba(255, 255, 255, 0.05);
  /* Tonos apagados: el color vive en la burbuja del ícono y en el botón principal, nunca en el fondo */
  --cd-info: #93a8c9;     --cd-info-soft: rgba(147, 168, 201, 0.14);
  --cd-ok: #7fbf9a;       --cd-ok-soft: rgba(127, 191, 154, 0.14);
  --cd-warn: #d6b26e;     --cd-warn-soft: rgba(214, 178, 110, 0.14);
  --cd-danger: #e08a8d;   --cd-danger-soft: rgba(199, 37, 43, 0.16);
  --cd-primary-bg: #C7252B; --cd-primary-ink: #ffffff;
  --cd-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --cd-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
html[data-theme="light"] {
  --cd-surface: rgba(255, 255, 255, 0.9);
  --cd-surface-2: rgba(22, 24, 31, 0.045);
  --cd-line: var(--cts-line, rgba(22, 24, 31, 0.09));
  --cd-ink: var(--cts-ink, #16181f);
  --cd-mid: var(--cts-mid, #4b5160);
  --cd-veil: rgba(22, 24, 31, 0.22);
  --cd-shadow: 0 30px 70px -28px rgba(58, 66, 110, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  --cd-input: #ffffff;
  --cd-info: #3f5a85;     --cd-info-soft: rgba(63, 90, 133, 0.1);
  --cd-ok: #2f7a55;       --cd-ok-soft: rgba(47, 122, 85, 0.1);
  --cd-warn: #8a6216;     --cd-warn-soft: rgba(202, 138, 4, 0.12);
  --cd-danger: #a61d22;   --cd-danger-soft: rgba(199, 37, 43, 0.09);
}

/* ---------------- Modal ---------------- */
.cd-capa {
  position: fixed; inset: 0; z-index: 100600; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: transparent; transition: background-color 200ms ease, backdrop-filter 200ms ease;
}
.cd-capa[hidden] { display: none; }
.cd-capa.cd-visible { background: var(--cd-veil); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cd-caja {
  position: relative; width: min(420px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--cd-surface); color: var(--cd-ink); border-radius: 24px; box-shadow: var(--cd-shadow);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  padding: 24px 24px 20px; font-family: Inter, system-ui, sans-serif; outline: none;
  opacity: 0; transform: translateY(8px) scale(0.96);
  transition: opacity 150ms ease, transform 150ms var(--cd-ease-out);   /* salida: rápida */
}
.cd-visible .cd-caja {
  opacity: 1; transform: none;
  transition: opacity 200ms ease, transform 220ms var(--cd-ease-out);   /* entrada */
}
/* `.claut-dark :focus-visible` del sistema pondría contorno rojo y radio de 4 px */
.cd-capa .cd-caja:focus, .cd-capa .cd-caja:focus-visible { outline: none !important; border-radius: 24px; box-shadow: var(--cd-shadow) !important; }

.cd-cab { display: flex; gap: 14px; align-items: flex-start; }
.cd-ico {
  width: 44px; height: 44px; flex: none; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; background: var(--cd-info-soft); color: var(--cd-info); position: relative;
}
.cd-tono-ok .cd-ico { background: var(--cd-ok-soft); color: var(--cd-ok); }
.cd-tono-warn .cd-ico { background: var(--cd-warn-soft); color: var(--cd-warn); }
.cd-tono-danger .cd-ico { background: var(--cd-danger-soft); color: var(--cd-danger); }
.cd-txt { min-width: 0; flex: 1; padding-top: 2px; }
.cd-titulo { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--cd-ink); }
.cd-msg { margin: 6px 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--cd-mid); white-space: pre-line; overflow-wrap: anywhere; }
.cd-campo { margin-top: 16px; }
.cd-campo input, .cd-campo textarea {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--cd-line); background: var(--cd-input); color: var(--cd-ink); font: inherit; font-size: 0.92rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.cd-campo input:focus, .cd-campo textarea:focus { outline: none; border-color: rgba(199, 37, 43, 0.55); box-shadow: 0 0 0 4px rgba(199, 37, 43, 0.12); }
.cd-pie { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.cd-capa .cd-btn {
  min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--cd-line); cursor: pointer;
  font: inherit; font-size: 0.875rem; font-weight: 600; background: var(--cd-surface-2); color: var(--cd-ink);
  transition: transform 160ms var(--cd-ease-out), background-color 160ms ease, opacity 160ms ease;
}
.cd-capa .cd-btn:active { transform: scale(0.97); }
/* `.claut-dark :focus-visible` del sistema (radio 4 px) también se anula aquí */
.cd-capa .cd-pie .cd-btn:focus-visible { outline: 2px solid rgba(199, 37, 43, 0.55); outline-offset: 3px; border-radius: 999px; }
.cd-capa .cd-btn--pri { background: var(--cd-primary-bg); border-color: transparent; color: var(--cd-primary-ink); }
.cd-capa.cd-tono-ok .cd-btn--pri { background: #2f7a55; }
.cd-capa.cd-tono-info .cd-btn--pri, .cd-capa.cd-tono-warn .cd-btn--pri { background: #2b2d36; }
html[data-theme="light"] .cd-capa.cd-tono-info .cd-btn--pri, html[data-theme="light"] .cd-capa.cd-tono-warn .cd-btn--pri { background: #16181f; }
/* Un aviso (alert) no es una acción destructiva: «Entendido» va neutro aunque el aviso sea un error */
.cd-capa.cd-tipo-alert:not(.cd-tono-ok) .cd-btn--pri { background: #2b2d36; }
html[data-theme="light"] .cd-capa.cd-tipo-alert:not(.cd-tono-ok) .cd-btn--pri { background: #16181f; }
@media (hover: hover) and (pointer: fine) {
  .cd-capa .cd-btn:hover { background: var(--cd-line); }
  .cd-capa .cd-btn--pri:hover { opacity: 0.9; background: var(--cd-primary-bg); }
  .cd-capa.cd-tono-ok .cd-btn--pri:hover { background: #2f7a55; }
  .cd-capa.cd-tono-info .cd-btn--pri:hover, .cd-capa.cd-tono-warn .cd-btn--pri:hover { background: #2b2d36; }
  html[data-theme="light"] .cd-capa.cd-tono-info .cd-btn--pri:hover, html[data-theme="light"] .cd-capa.cd-tono-warn .cd-btn--pri:hover { background: #16181f; }
}

/* Efectos según lo que hace el frame (una sola vez, al abrir) */
/* Peligro (eliminar, cerrar sesión): un pulso suave alrededor del ícono — «mira esto antes de seguir» */
.cd-visible.cd-tono-danger .cd-ico::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(199, 37, 43, 0.35);
  animation: cd-pulso 900ms 120ms var(--cd-ease-out) 1;
}
@keyframes cd-pulso { to { box-shadow: 0 0 0 12px rgba(199, 37, 43, 0); } }
/* Éxito: la palomita se dibuja */
.cd-check { width: 22px; height: 22px; }
.cd-check path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.cd-visible .cd-check path { animation: cd-trazo 360ms 140ms var(--cd-ease-out) forwards; }
@keyframes cd-trazo { to { stroke-dashoffset: 0; } }
/* Error: el ícono «niega» con un movimiento corto */
.cd-visible.cd-error .cd-ico { animation: cd-niega 320ms 120ms ease-out 1; }
@keyframes cd-niega { 20% { transform: translateX(-4px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } 100% { transform: none; } }
/* Pedir un dato: el campo entra un instante después que el texto */
.cd-visible .cd-campo { animation: cd-sube 240ms 80ms var(--cd-ease-out) both; }
@keyframes cd-sube { from { opacity: 0; transform: translateY(6px); } }

/* Teléfono: hoja inferior */
@media (max-width: 640px) {
  .cd-capa { align-items: flex-end; padding: 0; }
  .cd-caja {
    width: 100%; max-width: none; border-radius: 24px 24px 0 0; padding: 26px 20px calc(18px + env(safe-area-inset-bottom));
    transform: translateY(100%); opacity: 1; transition: transform 200ms var(--cd-ease-drawer);
  }
  .cd-visible .cd-caja { transform: none; transition: transform 320ms var(--cd-ease-drawer); }
  .cd-capa .cd-caja:focus, .cd-capa .cd-caja:focus-visible { border-radius: 24px 24px 0 0; }
  .cd-caja::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 99px; background: var(--cd-line); }
  .cd-pie { flex-direction: column-reverse; }
  .cd-capa .cd-btn { width: 100%; }
}

/* ---------------- Avisos efímeros (toast) ---------------- */
.cd-avisos {
  position: fixed; z-index: 100700; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px;
  width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.cd-aviso {
  pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px;
  background: var(--cd-surface); color: var(--cd-ink); box-shadow: var(--cd-shadow); font-family: Inter, system-ui, sans-serif;
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  opacity: 0; transform: translateY(12px) scale(0.98);
  transition: opacity 200ms ease, transform 260ms var(--cd-ease-out);
}
.cd-aviso.cd-dentro { opacity: 1; transform: none; }
.cd-aviso.cd-fuera { opacity: 0; transform: translateX(16px); transition: opacity 150ms ease, transform 150ms ease; }
.cd-aviso .cd-ico { width: 32px; height: 32px; border-radius: 10px; font-size: 0.9rem; }
.cd-aviso .cd-check { width: 18px; height: 18px; }
.cd-dentro .cd-check path { animation: cd-trazo 360ms 140ms var(--cd-ease-out) forwards; }
.cd-aviso-txt { flex: 1; min-width: 0; font-size: 0.86rem; line-height: 1.45; padding-top: 5px; overflow-wrap: anywhere; white-space: pre-line; }
.cd-aviso-txt strong { display: block; font-weight: 700; margin-bottom: 1px; }
.cd-avisos .cd-aviso-x {
  flex: none; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--cd-mid); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background-color 160ms ease, transform 160ms ease;
}
.cd-avisos .cd-aviso-x:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .cd-avisos .cd-aviso-x:hover { background: var(--cd-surface-2); } }
/* Barra de tiempo restante: lineal, se pausa al pasar el cursor */
.cd-aviso { position: relative; overflow: hidden; }
.cd-aviso-t { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; opacity: 0.18; transform-origin: left; }
@media (max-width: 640px) {
  .cd-avisos { right: 16px; left: 16px; bottom: auto; top: calc(12px + env(safe-area-inset-top)); width: auto; }
  .cd-aviso { transform: translateY(-12px) scale(0.98); }
  .cd-aviso.cd-fuera { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  .cd-caja, .cd-visible .cd-caja, .cd-aviso, .cd-aviso.cd-dentro, .cd-aviso.cd-fuera { transform: none !important; transition: opacity 160ms ease !important; }
  .cd-visible.cd-tono-danger .cd-ico::after, .cd-visible.cd-error .cd-ico, .cd-visible .cd-campo { animation: none !important; }
  .cd-check path { stroke-dashoffset: 0 !important; animation: none !important; }
}