/* ===========================================================================
   LOS DIÁLOGOS DEL SISTEMA — el aspecto.        raíz: .gs-dlg-velo
   ===========================================================================
   El último cartel que ve alguien antes de destruir algo no puede ser del
   sistema operativo. `confirm()` y `alert()` salen con la tipografía de
   Windows, encabezados con «gestorstockmoyco.web.app dice:» —lo primero que se
   lee y lo único que no significa nada— y no admiten jerarquía: «¿Eliminar?» y
   «¿Eliminar la provincia Tucumán, de la que cuelgan 812 localidades?» salen
   idénticos, con los mismos «Aceptar / Cancelar».

   ── POR QUÉ ESTÁ ACÁ Y NO EN UN MÓDULO ──────────────────────────────────────
   Nació en el ABM (`abm-dialogos.js`, etapa 6) y se quedó ahí mientras fue el
   único que lo usaba. Configuración es el segundo, y venían otros 29 llamados
   detrás: veintinueve `import { abmConfirmar }` desde un módulo que no es el
   ABM es la misma copia que ya pagamos con la paleta y con el toast. Un
   diálogo no es del ABM: es del sistema, igual que el aviso flotante.

   ── POR QUÉ CLASES PROPIAS Y NO LAS DEL ABM ─────────────────────────────────
   La versión vieja se apoyaba en `.abm-panel`, `.abm-btn`, `.abm-in`… o sea
   que para usar un diálogo había que arrastrar la identidad entera del ABM.
   Acá todo lo que el diálogo necesita está escrito con prefijo `gs-dlg-`, sin
   depender de ningún módulo: el único vínculo con el resto es la paleta de
   `tokens.css`, que vive en `:root` y alcanza a todo el documento.

   Un efecto secundario bienvenido: el diálogo ya NO hereda los apartamientos
   del módulo que lo llama. Adentro de `.abm-ui` tomaba el `--r-card: 12px` y
   el `--canvas` oscuro del ABM; ahora un cartel del sistema se ve igual salga
   de donde salga, que es lo que corresponde.
   =========================================================================== */

.gs-dlg-velo {
    position: fixed; inset: 0; z-index: 240;
    display: flex; align-items: center; justify-content: center; padding: 22px;
    background: rgba(10, 20, 42, .5); backdrop-filter: blur(2px);
    font-family: 'Segoe UI', -apple-system, system-ui, Roboto, Arial, sans-serif;
    font-size: 13.5px; line-height: 1.5; color: var(--ink);
    animation: gsDlgVelo .16s ease;
}
@keyframes gsDlgVelo { from { opacity: 0; } to { opacity: 1; } }
@keyframes gsDlgSube { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* Más angosto que un modal de formulario a propósito: un cartel de 580 px con
   dos renglones adentro parece un formulario al que se le perdieron los campos. */
.gs-dlg-panel {
    width: 100%; max-width: 464px; max-height: 88vh;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border-radius: 14px; box-shadow: var(--e3);
    animation: gsDlgSube .2s var(--curva);
}

.gs-dlg-velo :focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; border-radius: 5px; }
.gs-dlg-velo .hidden { display: none !important; }

/* ── Cabeza: ícono + título + cuerpo + consecuencias ─────────────────────── */
.gs-dlg { display: flex; gap: 14px; padding: 22px 22px 6px; }
.gs-dlg-i {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--navy-050); color: var(--navy-500);
}
.gs-dlg-i .material-symbols-outlined { font-size: 20px; line-height: 1; }
.gs-dlg.alerta  .gs-dlg-i { background: var(--warn-050); color: var(--warn); }
.gs-dlg.critico .gs-dlg-i { background: var(--crit-050); color: var(--crit); }
.gs-dlg-t { margin: 0 0 5px; font-size: .95rem; font-weight: 800; color: var(--navy); line-height: 1.35; }
/* pre-line: los saltos del mensaje son párrafos escritos a propósito. */
.gs-dlg-c { font-size: .82rem; color: var(--ink); white-space: pre-line; }

/* Las consecuencias, una por renglón. Es exactamente lo que `confirm()` no
   tenía dónde poner: o iban apretadas adentro de la pregunta, o no se decían. */
.gs-dlg-d { margin: 11px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.gs-dlg-d li { position: relative; padding-left: 15px; font-size: .775rem; color: var(--muted); }
.gs-dlg-d li::before {
    content: ''; position: absolute; left: 3px; top: 8px;
    width: 4px; height: 4px; border-radius: 50%; background: var(--hair-strong);
}

/* Comando para pegar en la consola. Antes iba adentro del texto del `alert` y
   había que retipearlo a mano mirando el cartel. */
.gs-dlg-cmd {
    margin: 13px 0 2px; display: flex; align-items: center; gap: 6px;
    background: var(--navy-700); border-radius: 9px; padding: 7px 7px 7px 12px;
}
.gs-dlg-cmd code {
    flex: 1; min-width: 0; overflow-x: auto; white-space: pre;
    font-family: Consolas, 'SF Mono', 'Roboto Mono', monospace; font-size: .735rem; color: #cfe0f7;
}
.gs-dlg-cmd .gs-dlg-x { color: #8fb3e0; flex: 0 0 auto; }
.gs-dlg-cmd .gs-dlg-x:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ── Cabecera con título (los que piden datos) ───────────────────────────── */
.gs-dlg-h {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    padding: 15px 22px; border-bottom: 1px solid var(--hair);
}
.gs-dlg-h h3 { margin: 0; font-size: .96rem; font-weight: 800; color: var(--navy); }
.gs-dlg-h .s { font-size: .71rem; font-weight: 600; color: var(--faint); }
.gs-dlg-h .gs-dlg-x { margin-left: auto; }

.gs-dlg-b { padding: 20px 22px; overflow-y: auto; flex: 1; min-height: 0; }
.gs-dlg-f {
    display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; flex-shrink: 0;
    padding: 13px 22px; border-top: 1px solid var(--hair); background: #f7f9fc;
}

/* ── Controles ───────────────────────────────────────────────────────────── */
.gs-dlg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 16px; border-radius: 9px;
    background: var(--navy); border: 1px solid var(--navy); color: #fff;
    font: inherit; font-size: .78rem; font-weight: 700; white-space: nowrap; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 43, 107, .22);
    transition: background .14s var(--curva), border-color .14s var(--curva),
                transform .18s var(--curva), box-shadow .18s var(--curva);
}
.gs-dlg-btn:hover { background: var(--navy-700); border-color: var(--navy-700);
                    transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 43, 107, .26); }
.gs-dlg-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0, 43, 107, .22); }
.gs-dlg-btn.sec { background: var(--surface); color: var(--muted);
                  border-color: var(--hair-strong); box-shadow: none; }
.gs-dlg-btn.sec:hover { background: var(--navy-050); border-color: var(--navy-300);
                        color: var(--navy); box-shadow: none; }
/* El botón que destruye algo se ve peligroso, y su etiqueta dice el VERBO
   («Eliminar el artículo»), nunca «Aceptar». */
.gs-dlg-btn.danger { background: var(--crit); border-color: var(--crit);
                     box-shadow: 0 2px 8px rgba(198, 40, 40, .24); }
.gs-dlg-btn.danger:hover { background: #a71f1f; border-color: #a71f1f; }

.gs-dlg-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: 0; border-radius: 7px;
    background: none; color: var(--faint); cursor: pointer;
    transition: background .14s var(--curva), color .14s var(--curva), transform .18s var(--curva);
}
.gs-dlg-x .material-symbols-outlined { font-size: 18px; line-height: 1; }
.gs-dlg-x:hover { background: var(--navy-050); color: var(--navy); transform: scale(1.18); }
.gs-dlg-x:active { transform: scale(.94); }

.gs-dlg-in {
    width: 100%; padding: 7px 11px; border-radius: 8px;
    border: 1px solid var(--hair-strong); background: var(--surface);
    font: inherit; font-size: .8rem; color: var(--ink); outline: 0;
    transition: border-color .14s var(--curva), box-shadow .14s var(--curva);
}
.gs-dlg-in:focus { border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(21, 74, 148, .13); }
/* Un campo de `pedir()` con `opciones` se dibuja como `<select>` (etapa 8 de
   Ventas). Comparte la clase con el `<input>`, así que sólo le falta el
   cursor y el alto: un `<select>` no hereda el `padding` igual en todos los
   navegadores, y sin `height` queda dos píxeles más bajo que un input al
   lado. */
select.gs-dlg-in { cursor: pointer; height: 34px; }
.gs-dlg-lbl {
    display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .08em;
    font-weight: 800; color: var(--faint); margin-bottom: 5px;
}
.gs-dlg-lbl .req { color: var(--crit); }
.gs-dlg-ayuda { display: block; margin-top: 5px; font-size: .715rem; color: var(--faint); }
/* El error se muestra ADENTRO y el diálogo queda abierto con lo tipeado:
   `prompt()` te hacía volver a empezar de cero. */
.gs-dlg-err { display: block; margin-top: 12px; font-size: .755rem; font-weight: 700; color: var(--crit); }

@media (prefers-reduced-motion: reduce) {
    .gs-dlg-velo, .gs-dlg-panel { animation: none; }
    .gs-dlg-btn, .gs-dlg-x { transition-duration: .01ms; }
    .gs-dlg-btn:hover, .gs-dlg-x:hover { transform: none; }
}