/* ============================================================
   swalTheme.css — Tema global SweetAlert2 para financiApp
   Clase del popup: app-swal  (alias compatible: horus-swal)
   Se aplica automáticamente vía swalTheme.js a TODO Swal.fire.
   Tipos: warning · error · success · question · info · delete
   ============================================================ */

/* ── Backdrop con desenfoque ────────────────────────────────── */
/* El desenfoque va en el propio overlay del Swal (backdrop-filter), NUNCA con
   `filter` sobre el contenido de la página: un elemento con `filter` pasa a ser
   el bloque contenedor de sus descendientes position:fixed. Al abrir un Swal,
   SweetAlert marca aria-hidden en los hijos del body — entre ellos
   <section class="content">, donde vive #window y con él los modales — y el
   .modal de Bootstrap, que estaba anclado al viewport, se re-anclaba a esa
   sección: saltaba de sitio y de tamaño. La transición de .25s lo convertía
   en una animación de descuadre al abrir y otra al cerrar. */
.swal2-container.swal2-backdrop-show {
    background: rgba(15, 23, 42, .45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* ── Popup / tarjeta ────────────────────────────────────────── */
.swal2-popup.app-swal,
.swal2-popup.horus-swal {
    position: relative;
    border-radius: 24px;
    padding: 3.2rem 2.4rem 2.7rem;
    box-shadow: 0 32px 72px rgba(0, 0, 0, .14), 0 6px 20px rgba(0, 0, 0, .07);
    border: 1px solid rgba(0, 0, 0, .06);
    max-width: 450px;
    width: 92%;
    font-family: inherit;
    font-size: 1.2rem !important; /* neutraliza .swal2-popup{font-size:1.6rem} global */
    overflow: hidden;
}

/* ── Modificadores opcionales del popup ─────────────────────── */
/* Un diálogo que además de preguntar MUESTRA algo (una lista, un desglose, un
   documento) no cabe en el ancho de una pregunta. Se pide con
   customClass:{popup:'app-swal--ancho'}; sin pedirlo, nada cambia. */
.swal2-popup.app-swal--ancho {
    max-width: 540px;
}

/* Cuando el popup ya trae contenido arriba, el bloque del textarea con su alto
   por defecto empuja los botones fuera de pantalla y hay que bajar para escribir
   justo en el campo que es obligatorio. Esto lo aprieta sin encogerlo de más. */
.swal2-popup.app-swal--compacto .swal2-input-label,
.swal2-popup.app-swal--compacto .swal2-textarea {
    /* Sin inset propio: el cuerpo del popup no lo lleva, así que el campo arranca
       donde arranca el contenido de arriba en vez de quedar metido hacia dentro. */
    margin-left: 0;
    margin-right: 0;
}

.swal2-popup.app-swal--compacto .swal2-input-label {
    margin-top: .7em;
    margin-bottom: .3rem;
}

.swal2-popup.app-swal--compacto .swal2-textarea {
    min-height: 74px;
}

/* ── Franja de acento superior por tipo ─────────────────────── */
.swal2-popup.app-swal::before,
.swal2-popup.horus-swal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: #cbd5e0;
}
.app-swal--warning::before,  .horus-swal--warning::before  { background: linear-gradient(90deg, #DD6B20, #F6AD55); }
.app-swal--error::before,    .horus-swal--error::before    { background: linear-gradient(90deg, #C53030, #FC8181); }
.app-swal--delete::before,   .horus-swal--delete::before   { background: linear-gradient(90deg, #DC2626, #F87171); }
.app-swal--success::before,  .horus-swal--success::before  { background: linear-gradient(90deg, #276749, #68D391); }
.app-swal--question::before, .horus-swal--question::before { background: linear-gradient(90deg, #2C5282, #63B3ED); }
.app-swal--info::before,     .horus-swal--info::before     { background: linear-gradient(90deg, #2C5282, #63B3ED); }

/* ── Ícono — círculo relleno con SVG propio ─────────────────── */
.app-swal .swal2-icon,
.horus-swal .swal2-icon {
    width: 80px !important;
    height: 80px !important;
    margin: .25rem auto 1.6rem !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    font-size: 0 !important;
    background: #f1f5f9;
    color: #475569;
}

/* Círculo relleno + halo exterior por tipo (sobre cualquier swal2-icon) */
.app-swal--warning  .swal2-icon, .horus-swal--warning  .swal2-icon { background: #FFF8F0; box-shadow: 0 0 0 8px rgba(221,107, 32,.10); color: #C05621; }
.app-swal--error    .swal2-icon, .horus-swal--error    .swal2-icon { background: #FFF5F5; box-shadow: 0 0 0 8px rgba(229, 62, 62,.10); color: #C53030; }
.app-swal--delete   .swal2-icon, .horus-swal--delete   .swal2-icon { background: #FEF2F2; box-shadow: 0 0 0 8px rgba(220, 38, 38,.10); color: #DC2626; }
.app-swal--success  .swal2-icon, .horus-swal--success  .swal2-icon { background: #F0FFF4; box-shadow: 0 0 0 8px rgba( 56,161,105,.10); color: #276749; }
.app-swal--question .swal2-icon, .horus-swal--question .swal2-icon { background: #EBF8FF; box-shadow: 0 0 0 8px rgba( 49,130,206,.10); color: #2C5282; }
.app-swal--info     .swal2-icon, .horus-swal--info     .swal2-icon { background: #EBF8FF; box-shadow: 0 0 0 8px rgba( 49,130,206,.10); color: #2C5282; }

/* Ocultar todos los elementos decorativos nativos de SweetAlert2 */
.app-swal .swal2-success-ring,        .horus-swal .swal2-success-ring,
.app-swal .swal2-success-fix,         .horus-swal .swal2-success-fix,
.app-swal .swal2-success-circular-line-left,  .horus-swal .swal2-success-circular-line-left,
.app-swal .swal2-success-circular-line-right, .horus-swal .swal2-success-circular-line-right,
.app-swal .swal2-success-line-tip,    .horus-swal .swal2-success-line-tip,
.app-swal .swal2-success-line-long,   .horus-swal .swal2-success-line-long,
.app-swal .swal2-x-mark,              .horus-swal .swal2-x-mark { display: none !important; }

/* Mostrar sólo nuestro SVG inyectado vía iconHtml */
.app-swal .swal2-icon-content,
.horus-swal .swal2-icon-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
.app-swal .swal2-icon svg,
.horus-swal .swal2-icon svg {
    width: 38px !important;
    height: 38px !important;
}

/* ── Título ─────────────────────────────────────────────────── */
.app-swal .swal2-title,
.horus-swal .swal2-title {
    font-size: 2.1rem;
    font-weight: 700;
    color: #1a202c;
    padding: 0;
    margin: 0 0 .5rem;
    line-height: 1.3;
}

/* ── Contenido ──────────────────────────────────────────────── */
.app-swal .swal2-html-container,
.horus-swal .swal2-html-container {
    margin: .6rem 0 1.8rem;
    padding: 0;
    font-size: 1.42rem;
    color: #4a5568;
    line-height: 1.6;
    overflow: visible;
}
.app-swal-text, .horus-swal-text { margin: 0; }
.app-swal-text strong, .horus-swal-text strong { color: #2d3748; font-weight: 600; }

/* ── Caja de detalle (chip con punto de color) ──────────────── */
.app-swal-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: .9rem 0 .2rem;
    padding: .7rem .95rem;
    background: #f8fafc;
    border: 1px solid #edf0f4;
    border-radius: 12px;
    text-align: left;
    font-size: 1.3rem;
    color: #334155;
}
.app-swal-box .app-swal-dot {
    flex: 0 0 auto;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #DC2626;
}
.app-swal-box b { color: #1e293b; font-weight: 600; }

/* ── Botones ─────────────────────────────────────────────────── */
.app-swal .swal2-actions,
.horus-swal .swal2-actions {
    gap: 10px;
    margin-top: .2rem;
    width: 100%;
    flex-wrap: wrap;
}
.app-swal .swal2-confirm, .app-swal .swal2-cancel, .app-swal .swal2-deny,
.horus-swal .swal2-confirm, .horus-swal .swal2-cancel, .horus-swal .swal2-deny {
    border-radius: 12px !important;
    font-size: 1.18rem !important;
    font-weight: 600 !important;
    padding: .85rem 2rem !important;
    letter-spacing: .01em;
    box-shadow: none !important;
    transition: filter .15s, transform .12s, box-shadow .15s, background .15s !important;
    outline: none !important;
    margin: 0 !important;
}
.app-swal .swal2-confirm:hover, .horus-swal .swal2-confirm:hover {
    filter: brightness(.93);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0,0,0,.14) !important;
}
.app-swal .swal2-confirm:active, .horus-swal .swal2-confirm:active {
    transform: none !important;
    filter: brightness(.86) !important;
}

/* Cancelar: blanco con borde (estilo de la imagen) */
.app-swal .swal2-cancel, .horus-swal .swal2-cancel {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}
.app-swal .swal2-cancel:hover, .horus-swal .swal2-cancel:hover {
    background: #f8fafc !important;
    border-color: #cbd5e0 !important;
    transform: translateY(-1px);
}
/* Confirmar: color por tipo (base azul si no hay variante) */
.app-swal .swal2-confirm, .horus-swal .swal2-confirm { border: none !important; color: #fff !important; background: #2563eb !important; }
.app-swal--delete  .swal2-confirm, .app-swal--error   .swal2-confirm { background: #DC2626 !important; }
.app-swal--warning .swal2-confirm { background: #DD6B20 !important; }
.app-swal--success .swal2-confirm { background: #16a34a !important; }
.app-swal--question .swal2-confirm, .app-swal--info .swal2-confirm { background: #2563eb !important; }

/* ── Animación de entrada/salida ────────────────────────────── */
@keyframes appSwalIn {
    from { opacity: 0; transform: scale(.93) translateY(-14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes appSwalOut {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: scale(.93) translateY(-8px); }
}
.swal2-popup.app-swal, .swal2-popup.horus-swal { animation: appSwalIn .24s cubic-bezier(.21,1.02,.73,1) both; }
.swal2-popup.app-swal.swal2-hide, .swal2-popup.horus-swal.swal2-hide { animation: appSwalOut .18s ease both; }

/* ── Variante sin ícono (compacta) ──────────────────────────── */
.swal2-popup.app-swal--plain .swal2-icon { display: none !important; margin: 0 !important; }
.swal2-popup.app-swal--plain { padding-top: 1.5rem !important; }

@media (max-width: 480px) {
    .app-swal .swal2-actions, .horus-swal .swal2-actions { flex-direction: column-reverse; }
    .app-swal .swal2-confirm, .app-swal .swal2-cancel,
    .horus-swal .swal2-confirm, .horus-swal .swal2-cancel { width: 100%; }
}

/* ── Inputs del prompt (textarea / input) ───────────────────── */
/* Etiqueta del input (inputLabel): SweetAlert la deja centrada y diminuta, del
   tamaño de un pie de foto, cuando es el rótulo del ÚNICO campo que el usuario
   tiene que llenar. Se alinea con el campo y se le da el mismo peso que a la
   etiqueta del campo extra, para que las dos se lean igual. */
.app-swal .swal2-input-label, .horus-swal .swal2-input-label {
    display: block;
    /* El inset horizontal es el del cuerpo del popup (.swal2-html-container):
       así la etiqueta arranca donde arrancan el texto y el campo. */
    margin: 1.1em 1.6em .4rem;
    padding: 0;
    text-align: left;
    font-size: 1.3rem;
    font-weight: 600;
    color: #475569;
}

.app-swal .swal2-textarea, .app-swal .swal2-input, .app-swal .swal2-select,
.horus-swal .swal2-textarea, .horus-swal .swal2-input, .horus-swal .swal2-select {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: none;
    font-size: 1.4rem;
    color: #1f2937;
    background: #fff;
    /* Mismo inset que la etiqueta y que el cuerpo del popup (SweetAlert los deja
       en 2em, descuadrados con el texto de arriba). */
    margin-left: 1.6em;
    margin-right: 1.6em;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.app-swal .swal2-textarea, .horus-swal .swal2-textarea {
    min-height: 118px;
    padding: .8rem .95rem;
    line-height: 1.5;
}
.app-swal .swal2-textarea:focus, .app-swal .swal2-input:focus,
.horus-swal .swal2-textarea:focus, .horus-swal .swal2-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
    outline: none;
}
/* Campo inválido: borde rojo (SweetAlert le añade .swal2-inputerror) */
.app-swal .swal2-inputerror, .horus-swal .swal2-inputerror {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important;
}

/* ── Campo extra del prompt (appSwal.prompt {extra:...}) ─────────
   SweetAlert solo admite UN input por popup; cuando la acción necesita un
   segundo dato (un N° de documento además del motivo) se dibuja aquí, dentro
   del html. Por eso no reusa .swal2-input: ese lo posiciona SweetAlert. */
.app-swal-extra { margin: .9rem 0 .2rem; text-align: left; }
.app-swal-extra label {
    display: block;
    margin: 0 0 .4rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: #475569;
}
.app-swal-extra input {
    width: 100%;
    padding: .8rem .95rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1.4rem;
    color: #1f2937;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.app-swal-extra input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
    outline: none;
}
.app-swal-extra input.app-swal-extra-error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}

/* ── Mensaje de validación: texto rojo sutil, SIN la barra gris ni el "!" ── */
.app-swal .swal2-validation-message, .horus-swal .swal2-validation-message {
    background: transparent !important;
    color: #dc2626 !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    padding: .6rem 0 0 !important;
    margin: 0 !important;
    justify-content: center;
}
.app-swal .swal2-validation-message::before, .horus-swal .swal2-validation-message::before {
    display: none !important;   /* elimina el círculo gris con el ícono "!" */
}

/* ── Anti-salto: SweetAlert sobre un modal Bootstrap abierto ─────────────
   Bootstrap deja el body en overflow:hidden + padding-right (compensa la
   barra que quitó). SweetAlert, al abrir, fuerza overflow-y:scroll y REPONE
   la barra → doble compensación → el modal "salta". Si hay un .modal-open
   detrás, mantenemos el body sin barra (como lo dejó Bootstrap). El popup
   del Swal sigue teniendo su propio scroll interno (.swal2-container). */
body.modal-open.swal2-shown:not(.swal2-no-backdrop, .swal2-toast-shown) {
    overflow-y: hidden !important;
}

/* ── Formulario dentro de un Swal ───────────────────────────
   Cuando un aviso necesita pedir un dato con opciones, SweetAlert no sirve: su
   único input propio es una caja suelta y centrada. El campo se dibuja a mano
   dentro del html y este bloque le pone la etiqueta, la ayuda y los aires; el
   <select> es el MISMO de todo el sistema (Select2 + la clase select2-tema de
   select2Theme.css), no una caja parecida hecha aparte.

   USO
     <div class="app-swal-form">
         <div>Texto de la explicación.</div>
         <div class="app-swal-campo select2-tema">
             <label for="miTipo">Qué sincronizar</label>
             <select id="miTipo" class="select2">…</select>
             <small>Aclaración de lo que hace la opción elegida.</small>
         </div>
     </div>
   El select se inicializa en didOpen y se destruye en willClose, como cualquier
   otro del sistema. La vista debe cargar select2Theme.css (es por opción, no
   global).
   ──────────────────────────────────────────────────── */
.app-swal-form {
    text-align: left;
    font-size: 1.35rem;
    color: #475569;
    line-height: 1.55;
}
.app-swal-form > * + * { margin-top: 1.4rem; }

.app-swal-campo { --s2t-height: 36px; }
.app-swal-campo label {
    display: block;
    margin: 0 0 .5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #334155;
}
.app-swal-campo small {
    display: block;
    margin-top: .5rem;
    font-size: 1.2rem;
    color: #64748b;
    line-height: 1.45;
}