/* =============================================================================
   ARCHIVO DUPLICADO A PROPÓSITO — mantener las dos copias IDÉNTICAS.

     energicforum-backoffice/public/css/ui-dialogos.css
     energicforum-web/public/css/ui-dialogos.css

   Los dos repos son procesos separados, sin paquete compartido ni build step, así
   que un componente de UI que necesitan los dos no tiene dónde vivir una sola vez.
   Ver la cabecera de ui-dialogos.js para el razonamiento completo.

   SI TOCÁS ESTE ARCHIVO, TOCÁ EL OTRO. Se comprueba con:
     diff energicforum-backoffice/public/css/ui-dialogos.css \
          energicforum-web/public/css/ui-dialogos.css

   DEUDA ANOTADA: unificar en un paquete compartido o con un paso de build.
   ============================================================================= */

/* =============================================================================
   DIÁLOGOS DE LA APLICACIÓN — confirmar() y avisar()

   Reemplazan a confirm() y alert() nativos, que se veían como diálogos del
   sistema (con el "localhost dice" arriba), no respetaban la identidad visual y
   bloqueaban el hilo del navegador.

   Es un componente ÚNICO para todo el back-office: la hoja se carga desde
   partials/head.ejs y el script desde partials/scripts.ejs, así que está
   disponible en cualquier página sin tocar los pageStyles/pageScripts de cada
   controlador.

   El markup lo genera ui-dialogos.js; acá sólo vive la presentación. Sigue el
   patrón de los modales de mesas (.mesa-modal): overlay oscuro, tarjeta blanca
   con cabecera, cuerpo y pie de acciones.

   TONOS (los define el llamador, ver ui-dialogos.js):
     destructiva -> rojo   #FF0000  revocar una credencial, descartar un archivo
     normal      -> marino #004A6D  cerrar una mesa, confirmar algo reversible
     exito       -> verde  #7FB539
   ============================================================================= */

.dlg {
    position: fixed;
    inset: 0;
    /* Por encima de los modales de página (.mesa-modal usa 1000, el visor 1200):
       un diálogo puede abrirse SOBRE uno de ellos y tiene que quedar arriba. */
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.dlg[hidden] { display: none; }

.dlg__fondo {
    position: absolute;
    inset: 0;
    background: rgba(0, 30, 45, 0.72);
}

.dlg__caja {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    max-height: 100%;
    overflow-y: auto;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
    animation: dlgEntra 0.14s ease-out;
}

@keyframes dlgEntra {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dlg__caja { animation: none; }
}

/* --- Cabecera ------------------------------------------------------------ */

.dlg__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 0;
}

.dlg__icono {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.dlg__titulo {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: #004A6D;
}

/* --- Cuerpo -------------------------------------------------------------- */

.dlg__cuerpo {
    padding: 14px 20px 4px;
    /* pre-line: los mensajes vienen con \n del código que antes armaba el texto
       del confirm() nativo, y ese formato es información — el de reenviar mail
       pone la dirección en su propio renglón para que se pueda leer y verificar
       antes de mandar. Sin esto se aplastaría todo en un párrafo. */
    white-space: pre-line;
    font-size: 14.5px;
    line-height: 1.55;
    color: #48606D;
    /* Un nombre o un email largo no puede ensanchar el diálogo. */
    overflow-wrap: break-word;
}

/* --- Acciones ------------------------------------------------------------ */

/* El orden del DOM es [Cancelar, Confirmar]. En escritorio eso da la disposición
   convencional —Cancelar a la izquierda, la acción a la derecha— sin necesidad de
   invertir nada. El foco inicial NO depende de este orden: lo pone el script
   explícitamente en Cancelar (ver ui-dialogos.js). */
.dlg__acciones {
    display: flex;
    gap: 10px;
    padding: 18px 20px 20px;
}

.dlg__btn {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 46px: objetivo táctil cómodo. Esta pantalla se usa desde el celular. */
    min-height: 46px;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s, background 0.15s;
}

.dlg__btn:hover { filter: brightness(0.94); }

.dlg__btn:focus-visible {
    /* El foco tiene que verse: se navega con teclado y el foco arranca en
       Cancelar, así que si no se ve nadie sabe qué va a hacer Enter. */
    outline: 3px solid rgba(29, 192, 214, 0.55);
    outline-offset: 2px;
}

.dlg__btn--cancelar {
    background: #FFFFFF;
    color: #48606D;
    border: 1px solid #DEE2E6;
}

.dlg__btn--cancelar:hover { background: #F8F9FA; }

/* --- Tonos --------------------------------------------------------------- */

.dlg--normal .dlg__icono      { background: rgba(0, 74, 109, 0.10);  color: #004A6D; }
.dlg--destructiva .dlg__icono { background: rgba(255, 0, 0, 0.10);   color: #FF0000; }
.dlg--exito .dlg__icono       { background: rgba(127, 181, 57, 0.14); color: #5F8A26; }

.dlg--normal .dlg__btn--principal      { background: #004A6D; color: #FFFFFF; }
.dlg--destructiva .dlg__btn--principal { background: #FF0000; color: #FFFFFF; }
.dlg--exito .dlg__btn--principal       { background: #7FB539; color: #FFFFFF; }

/* --- Teléfonos ----------------------------------------------------------- */

@media (max-width: 480px) {
    .dlg { padding: 12px; align-items: flex-end; }

    .dlg__caja { border-radius: 16px 16px 12px 12px; }

    /* Apilados, y el PRINCIPAL ARRIBA (column-reverse sobre el orden del DOM,
       que es [Cancelar, Confirmar]). En un teléfono el pulgar llega primero a la
       parte baja de la pantalla, y no queremos que lo primero que alcance sea
       "Revocar": Cancelar queda abajo, más a mano. */
    .dlg__acciones { flex-direction: column-reverse; }
    .dlg__btn { width: 100%; }
}