/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   DIÁLOGOS PROPIOS — la hoja de los tres componentes que reemplazan confirm() y alert() nativos.
   Los arma src/dialogos.js con createElement (esta hoja no depende de ningún markup de index.html).

   ⚠️ NO ESTÁ ENLAZADA TODAVÍA. El <link> en index.html y la ruta en el SHELL de public/sw.js los
   pone el integrador al cablear (Frente B, 05/09/2026). Sin ese enlace el diálogo igual funciona:
   src/dialogos.js pone en línea la geometría mínima y las dos superficies.

   TOKENS: se reusan los --bv-* de public/base-visual.css, PERO con el mismo valor literal de
   respaldo en cada var(). Motivo: los --bv-* solo existen bajo el interruptor de la capa, y la
   capa se puede apagar con ?base-visual=0. Un diálogo destructivo que se quede sin colores porque
   alguien apagó una capa visual sería exactamente el modo de falla que no podemos permitirnos.
   No hay un solo color nuevo acá: todos salen de la paleta ya aprobada.

   TEMA: CLARO, como el resto de la app (public/styles.css, --bg: #ffffff).
   ⚠️ ESTA HOJA NO CUELGA DEL INTERRUPTOR DE LA CAPA, a propósito: un diálogo destructivo tiene que
   verse bien también con la capa apagada. Por eso no figura en el registro de hojas de la capa
   (tests/_lib-hojas-capa.mjs): ahí van las que SÍ usan el interruptor. Sí se suelta con el opt-out
   (src/base-visual.js), y cuando se suelta el módulo aplica su respaldo mínimo en línea.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · EL FONDO ───────────────────────────────────────────────────────────────────────────────
   `--fc-dlg-hoja: 1` es la SEÑA de que esta hoja está cargada. src/dialogos.js la lee con
   getComputedStyle y, si la encuentra, no pone un solo estilo en línea. Sin esta seña volvería el
   defecto del 05/09: el respaldo en línea le ganaba a las reglas de acá y el bloque de anchos (§10)
   era letra muerta. No borrar. */
.fc-dlg-fondo {
  --fc-dlg-hoja: 1;
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bv-esp-4, 16px);
  background: rgba(13, 31, 25, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  font-family: var(--bv-fuente, 'Exo 2', system-ui, sans-serif);
  animation: fc-dlg-entra 140ms ease;
}

/* ── 2 · EL PANEL ─────────────────────────────────────────────────────────────────────────────── */
.fc-dlg-panel {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  max-height: 92vh;
  overflow-y: auto;
  padding: var(--bv-esp-5, 24px) var(--bv-esp-5, 24px) var(--bv-esp-4, 16px);
  border-radius: var(--bv-radio-lg, 16px);
  background: var(--bv-superficie, #ffffff);
  box-shadow: var(--bv-sombra-3, 0 12px 32px rgba(13, 31, 25, 0.16));
  color: var(--bv-texto, #0d1f19);
  line-height: var(--bv-interlinea, 1.45);
  animation: fc-dlg-sube 160ms ease;
}

/* Cerrar — el piso táctil de 44px, igual que el resto de la app. */
.fc-dlg-cerrar {
  position: absolute;
  top: var(--bv-esp-2, 8px);
  right: var(--bv-esp-2, 8px);
  min-width: var(--bv-tap, 44px);
  min-height: var(--bv-tap, 44px);
  padding: 0;
  border: 0;
  border-radius: var(--bv-radio, 12px);
  background: transparent;
  color: var(--bv-texto-3, #55786c);
  font-family: inherit;
  font-size: var(--bv-txt-xl, 1.375rem);
  line-height: 1;
  cursor: pointer;
}
.fc-dlg-cerrar:hover {
  background: var(--bv-superficie-2, #f4f8f6);
  color: var(--bv-texto, #0d1f19);
}

/* ── 3 · CABECERA DE ETAPA ────────────────────────────────────────────────────────────────────
   Decir en qué etapa se está es la mitad del componente: sin esto, «dos etapas» es un clic de más. */
.fc-dlg-cabecera {
  display: inline-block;
  margin: 0 var(--bv-esp-6, 32px) var(--bv-esp-3, 12px) 0;
  padding: var(--bv-esp-1, 4px) var(--bv-esp-3, 12px);
  border-radius: var(--bv-radio-pildora, 999px);
  background: var(--bv-superficie-2, #f4f8f6);
  color: var(--bv-texto-2, #3d5c52);
  font-size: var(--bv-txt-xs, 0.75rem);
  font-weight: var(--bv-peso-fuerte, 700);
  letter-spacing: 0.06em;
}
/* La etapa irreversible se marca con color Y con un borde grueso a la izquierda: la señal nunca
   puede ser solo el color (contrato de accesibilidad de la base visual). */
.fc-dlg-cabecera-grave {
  border-left: 4px solid var(--bv-error, #b3261e);
  border-radius: var(--bv-radio-sm, 8px);
  background: var(--bv-error-fondo, #fdeceb);
  color: var(--bv-error, #b3261e);
}

/* ── 4 · TEXTO ────────────────────────────────────────────────────────────────────────────────── */
.fc-dlg-titulo {
  margin: 0 0 var(--bv-esp-3, 12px);
  padding-right: var(--bv-esp-6, 32px);
  font-size: var(--bv-txt-lg, 1.125rem);
  font-weight: var(--bv-peso-fuerte, 700);
  line-height: 1.3;
}
.fc-dlg-texto {
  margin: 0 0 var(--bv-esp-3, 12px);
  color: var(--bv-texto-2, #3d5c52);
  font-size: var(--bv-txt-sm, 0.875rem);
}
.fc-dlg-parrafo {
  margin: 0 0 var(--bv-esp-2, 8px);
}
.fc-dlg-parrafo:last-child {
  margin-bottom: 0;
}
/* Las líneas vacías del texto original son separaciones de verdad: se pintan vacías (para que el
   texto reconstruido sea idéntico al que había) y se les da alto acá. */
.fc-dlg-parrafo:empty {
  height: var(--bv-esp-2, 8px);
}

/* «Qué NO pasó» — la línea que baja la pulsación. Verde de éxito, símbolo propio. */
.fc-dlg-destacado {
  display: flex;
  gap: var(--bv-esp-2, 8px);
  align-items: flex-start;
  margin: 0 0 var(--bv-esp-3, 12px);
  padding: var(--bv-esp-3, 12px);
  border-left: 4px solid var(--bv-exito, #0f7a55);
  border-radius: var(--bv-radio-sm, 8px);
  background: var(--bv-exito-fondo, #e6f7ef);
  color: var(--bv-exito, #0f7a55);
  font-size: var(--bv-txt-sm, 0.875rem);
  font-weight: var(--bv-peso-medio, 600);
}
.fc-dlg-destacado-icono {
  flex: none;
  font-weight: var(--bv-peso-fuerte, 700);
}

/* El código para Soporte: seleccionable, en monoespaciada, con aire para copiarlo de un toque. */
.fc-dlg-codigo {
  display: inline-block;
  margin: 0 0 var(--bv-esp-3, 12px);
  padding: var(--bv-esp-2, 8px) var(--bv-esp-3, 12px);
  border: 1px dashed var(--bv-borde-fuerte, #a9c8bd);
  border-radius: var(--bv-radio-sm, 8px);
  background: var(--bv-superficie-2, #f4f8f6);
  color: var(--bv-texto, #0d1f19);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--bv-txt-md, 1rem);
  font-weight: var(--bv-peso-fuerte, 700);
  letter-spacing: 0.05em;
  user-select: all;
}

/* ── 5 · «SE VA A BORRAR:» ────────────────────────────────────────────────────────────────────── */
.fc-dlg-items {
  margin: 0 0 var(--bv-esp-4, 16px);
  padding: var(--bv-esp-3, 12px);
  border: 1px solid var(--bv-borde, #d5e5df);
  border-radius: var(--bv-radio, 12px);
  background: var(--bv-superficie-2, #f4f8f6);
}
.fc-dlg-items-titulo {
  margin-bottom: var(--bv-esp-2, 8px);
  color: var(--bv-texto, #0d1f19);
  font-size: var(--bv-txt-xs, 0.75rem);
  font-weight: var(--bv-peso-fuerte, 700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fc-dlg-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fc-dlg-item {
  position: relative;
  padding-left: var(--bv-esp-4, 16px);
  color: var(--bv-texto-2, #3d5c52);
  font-size: var(--bv-txt-sm, 0.875rem);
}
.fc-dlg-item + .fc-dlg-item {
  margin-top: var(--bv-esp-1, 4px);
}
.fc-dlg-item::before {
  position: absolute;
  left: 0;
  color: var(--bv-error, #b3261e);
  content: '−';
  font-weight: var(--bv-peso-fuerte, 700);
}

/* ── 6 · LA CASILLA (el candado) ──────────────────────────────────────────────────────────────── */
.fc-dlg-casilla {
  display: flex;
  gap: var(--bv-esp-3, 12px);
  align-items: flex-start;
  box-sizing: border-box;
  min-height: var(--bv-tap, 44px);
  margin: 0 0 var(--bv-esp-2, 8px);
  padding: var(--bv-esp-2, 8px) var(--bv-esp-3, 12px);
  border: 1px solid var(--bv-borde-fuerte, #a9c8bd);
  border-radius: var(--bv-radio, 12px);
  color: var(--bv-texto, #0d1f19);
  font-size: var(--bv-txt-sm, 0.875rem);
  font-weight: var(--bv-peso-medio, 600);
  cursor: pointer;
}
.fc-dlg-casilla:hover {
  background: var(--bv-superficie-2, #f4f8f6);
}
.fc-dlg-casilla-input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  accent-color: var(--bv-error, #b3261e);
  cursor: pointer;
}
/* La leyenda que dice POR QUÉ el botón está apagado. Cambia de texto no: cambia de estado con
   símbolo + color cuando la casilla se tilda. */
.fc-dlg-leyenda {
  margin: 0 0 var(--bv-esp-4, 16px);
  padding-left: var(--bv-esp-3, 12px);
  color: var(--bv-aviso, #8a5200);
  font-size: var(--bv-txt-xs, 0.75rem);
  font-weight: var(--bv-peso-medio, 600);
}
.fc-dlg-leyenda::before {
  content: '↑ ';
}
.fc-dlg-leyenda-ok {
  color: var(--bv-exito, #0f7a55);
}
.fc-dlg-leyenda-ok::before {
  content: '✓ ';
}

/* ── 7 · BOTONERA ─────────────────────────────────────────────────────────────────────────────
   El destructivo SIEMPRE a la derecha: lo decide el orden del DOM, y esta hoja no lo invierte.
   Nada de row-reverse acá — sería una forma silenciosa de mover el botón rojo bajo el pulgar. */
.fc-dlg-pie {
  display: flex;
  gap: var(--bv-esp-2, 8px);
  align-items: stretch;
  margin-top: var(--bv-esp-4, 16px);
}
.fc-dlg-btn {
  flex: 1 1 0;
  box-sizing: border-box;
  min-height: var(--bv-tap, 44px);
  padding: var(--bv-esp-3, 12px) var(--bv-esp-3, 12px);
  border: 1px solid transparent;
  border-radius: var(--bv-radio, 12px);
  font-family: inherit;
  font-size: var(--bv-txt-sm, 0.875rem);
  font-weight: var(--bv-peso-fuerte, 700);
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--bv-transicion, 140ms ease);
}
.fc-dlg-btn-cancelar {
  border-color: var(--bv-borde-fuerte, #a9c8bd);
  background: var(--bv-superficie, #ffffff);
  color: var(--bv-texto, #0d1f19);
}
.fc-dlg-btn-cancelar:hover {
  background: var(--bv-superficie-2, #f4f8f6);
}
.fc-dlg-btn-principal {
  border-color: var(--bv-marca-fuerte, #00694a);
  background: var(--bv-marca-fuerte, #00694a);
  color: #ffffff;
}
.fc-dlg-btn-destructivo {
  border-color: var(--bv-error, #b3261e);
  background: var(--bv-error, #b3261e);
  color: #ffffff;
}
/* APAGADO: no alcanza con bajarle la opacidad —eso es solo color—. Va también el borde punteado y
   el cursor de «no se puede», que se leen sin distinguir tonos.
   El texto va en --bv-texto-2 y no en --bv-texto-3: medido el 05/09, el gris claro sobre esta
   superficie daba 4.57:1 — pasa AA por dos centésimas y sin margen, para una palabra («Eliminar»)
   que la persona necesita leer justo cuando el botón no responde. Con --bv-texto-2 son 6.9:1. */
.fc-dlg-btn:disabled {
  border-style: dashed;
  border-color: var(--bv-borde-fuerte, #a9c8bd);
  background: var(--bv-superficie-2, #f4f8f6);
  color: var(--bv-texto-2, #3d5c52);
  cursor: not-allowed;
}

/* ── 8 · FOCO ─────────────────────────────────────────────────────────────────────────────────
   Anillo visible en TODO lo que se puede enfocar. Ni un outline:none en toda la hoja: el foco
   atrapado del componente no sirve de nada si no se ve dónde está.

   ⚠️ VA CON `:focus`, NO SOLO CON `:focus-visible`. Medido el 05/09/2026 en WebKit 26.4 (el motor de
   iPhone/iPad, donde trabajan los operarios): con `:focus-visible` el anillo NO aparecía —
   `outline-style: none` tras seis tabulaciones reales. La causa es propia de este componente: el
   foco lo mueve el CÓDIGO (`elemento.focus()` del foco atrapado), y WebKit no considera «visible»
   un foco movido por código aunque la última interacción haya sido el teclado. Chromium sí lo
   considera, así que el defecto solo se vio corriendo los dos motores.
   El precio de usar `:focus`: quien toca un botón con el dedo o el mouse también ve el anillo.
   Dentro de un diálogo modal eso es aceptable; un foco invisible, no. */
.fc-dlg-cerrar:focus,
.fc-dlg-btn:focus,
.fc-dlg-casilla-input:focus,
.fc-dlg-cerrar:focus-visible,
.fc-dlg-btn:focus-visible,
.fc-dlg-casilla-input:focus-visible {
  outline: var(--bv-foco-ancho, 3px) solid var(--bv-foco, #0b5fa5);
  outline-offset: var(--bv-foco-sep, 2px);
}

/* ── 9 · MOVIMIENTO ───────────────────────────────────────────────────────────────────────────── */
@keyframes fc-dlg-entra {
  from {
    opacity: 0;
  }
}
@keyframes fc-dlg-sube {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fc-dlg-fondo,
  .fc-dlg-panel {
    animation: none;
  }
  .fc-dlg-btn {
    transition: none;
  }
}

/* ── 10 · ANCHOS ──────────────────────────────────────────────────────────────────────────────
   Móvil chico (≤360px): el panel se pega al pie. LA BOTONERA SIGUE EN FILA, a propósito.
   La primera versión la pasaba a columna «con el destructivo abajo, la posición que cuesta apretar
   sin querer» — y era al revés: en un teléfono, abajo es justo donde cae el pulgar. Además rompía
   la única regla que el diseño fija sin excepciones (el destructivo a la derecha) en el ancho donde
   más importa. A 360 px, con 8 px de separación, cada botón queda en ~156 px: entra de sobra. */
@media (max-width: 360px) {
  .fc-dlg-fondo {
    align-items: flex-end;
    padding: 0;
  }
  .fc-dlg-panel {
    max-width: none;
    max-height: 88vh;
    border-radius: var(--bv-radio-lg, 16px) var(--bv-radio-lg, 16px) 0 0;
  }
}
/* Tablet y escritorio: el panel no se estira — una línea de texto muy larga se lee peor. */
@media (min-width: 768px) {
  .fc-dlg-panel {
    max-width: 460px;
    padding: var(--bv-esp-6, 32px);
  }
  .fc-dlg-titulo {
    font-size: var(--bv-txt-xl, 1.375rem);
  }
  .fc-dlg-texto,
  .fc-dlg-item {
    font-size: var(--bv-txt-md, 1rem);
  }
}