/* Diálogos — lo que TE DETIENE (T-09b, 05/08/2026)
   ═══════════════════════════════════════════════════════════════════════

   Dos familias distintas a propósito, porque son dos cosas distintas:

     · Un AVISO (css/avisos.css) te informa mientras sigues trabajando.
       Esquina, pequeño, se va solo, color plano que se reconoce sin leer.
     · Un DIÁLOGO te detiene porque tiene que detenerte: la sesión expiró,
       o vas a borrar algo que no vuelve. Centro de la pantalla, fondo
       velado, y no sigue hasta que respondes.

   Si se parecieran, el usuario aprendería a descartar los dos igual — y el
   que importa es justo el que no se debe descartar sin leer.

   El cuadro gris del navegador (`alert`, `confirm`) hacía este trabajo y se
   ve como un error del sistema, no como parte del producto. */

.dlg-velo {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: dlg-vela .16s ease-out;
}

.dlg {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
    width: min(440px, 100%);
    padding: 28px 28px 22px;
    text-align: center;
    animation: dlg-entra .2s cubic-bezier(.2, .9, .3, 1);
}

@keyframes dlg-vela { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlg-entra {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .dlg-velo, .dlg { animation: none; }
}

/* El emblema redondo es lo que hace que se lea como diálogo y no como
   aviso, incluso antes de leer una palabra. */
.dlg__emblema {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.dlg__titulo {
    font-size: 19px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.3;
}

.dlg__detalle {
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.55;
    color: #475569;
}

/* ── Campo de texto (pedirTexto / pedirNumero, 25/08/2026) ───────────────
   El diálogo dejó de ser solo «avisar y confirmar»: hay dos sitios que piden
   un dato que entra a la contabilidad —el precio de compra y el motivo del
   cierre de caja— y lo pedían con un `prompt()` del navegador. */
.dlg__campo {
    width: 100%;
    margin-top: 18px;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid #CBD5E1;
    background: #fff;
    color: #0F172A;
    font-family: inherit;
    font-size: 15px;
    text-align: center;
}

.dlg__campo:focus {
    outline: none;
    border-color: var(--primary-color, #4E73DF);
    box-shadow: 0 0 0 3px rgba(78, 115, 223, .18);
}

/* El error va DEBAJO del campo y no en un aviso de esquina: se corrige aquí
   mismo, con el valor malo todavía a la vista. Vacío no ocupa sitio, así que
   el diálogo no da un salto al aparecer. */
.dlg__error {
    color: #B91C1C;
    font-size: 13px;
    line-height: 1.4;
    margin-top: 8px;
    text-align: left;
    min-height: 0;
}
.dlg__error:empty { display: none; }

.dlg__botones {
    margin-top: 24px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.dlg__boton {
    flex: 1 1 0;
    max-width: 190px;
    padding: 11px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
}

.dlg__boton:focus-visible { outline: 3px solid #0284C7; outline-offset: 2px; }

.dlg__boton--secundario {
    background: #F1F5F9;
    border-color: #CBD5E1;
    color: #334155;
}
.dlg__boton--secundario:hover { background: #E2E8F0; }

/* El principal SÍ usa el color de marca: un diálogo se LEE, no se reconoce
   de un vistazo, así que aquí el color no carga significado. */
.dlg__boton--principal {
    background: var(--primary-color, #4E73DF);
    color: #fff;
}
.dlg__boton--principal:hover { filter: brightness(.94); }

/* El destructivo NO. Ese rojo sí significa algo y no se negocia con la
   marca: es lo último que se ve antes de borrar algo que no vuelve. */
.dlg__boton--peligro { background: #DC2626; color: #fff; }
.dlg__boton--peligro:hover { background: #B91C1C; }

.dlg--info    .dlg__emblema { background: #EFF6FF; color: #0369A1; }
.dlg--peligro .dlg__emblema { background: #FEF2F2; color: #B91C1C; }
.dlg--sesion  .dlg__emblema { background: #F1F5F9; color: #475569; }

@media (max-width: 480px) {
    .dlg { padding: 24px 20px 18px; }
    .dlg__botones { flex-direction: column-reverse; }
    .dlg__boton { max-width: none; }
}