/* Avisos de formulario — Woker.

   Tratamiento único para todo lo que le decimos al usuario cuando algo salió mal:

   - .errorlist            los que renderiza Django con {{ campo.errors }}
   - .errorlist.nonfield   los de form.non_field_errors()
   - .campo-error          los que inyecta mostrarErrores() en modals.js (AJAX)
   - .modal-aviso-error    los que no cuelgan de un campo puntual
   - .swal2-toast          el toast de "revisá los datos" (formAlert.js)

   base.html lo carga para TODAS las pantallas, migradas o no: por eso cada token va con
   fallback, porque en las viejas no está cargado modern-ui-new.css. En oscuro los valores
   salen de los tokens que reasigna dark-mode.css. */

:root {
    /* Ícono de alerta como máscara: hereda el color del texto sin duplicar el SVG en cada
       template ni obligar a que el error se arme desde JS. */
    --woker-ico-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
}

/* ---------- Errores de campo ---------- */

.errorlist {
    list-style: none;
    margin: .35rem 0 0;
    padding: 0;
    color: var(--woker-danger, #dc2626);
    font-size: .8rem;
    line-height: 1.35;
}

.errorlist li {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
}

.errorlist li + li { margin-top: .2rem; }

.errorlist li::before {
    content: "";
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: .12em;
    background-color: currentColor;
    -webkit-mask: var(--woker-ico-error) center / contain no-repeat;
    mask: var(--woker-ico-error) center / contain no-repeat;
}

/* El mismo mensaje cuando lo inyecta el JS de los modales, donde el <li> suelto dejaba
   la viñeta colgando fuera del padding. */
.campo-error {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin-top: .35rem;
    font-size: .8rem;
    line-height: 1.35;
    color: var(--woker-danger, #dc2626);
}

.campo-error svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: .12em;
}

/* ---------- El control que falló queda marcado ---------- */

/* Con :has() alcanza el markup que ya existe en las pantallas ({{ campo }} + {{ campo.errors }}
   dentro del .form-group): no hace falta tocar template por template para marcar el control. */
.form-group:has(> .errorlist) > .form-control,
.form-group:has(> .errorlist) > .input-group > .form-control,
.form-group:has(> .errorlist) > .select2-container .select2-selection,
.campo-con-error.form-control,
.select2-container.campo-con-error .select2-selection {
    border-color: var(--woker-danger, #dc2626) !important;
    box-shadow: 0 0 0 3px var(--woker-danger-bg, rgba(220, 38, 38, .1));
}

/* ---------- Errores que no son de un campo ---------- */

.errorlist.nonfield,
.modal-aviso-error {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .6rem .75rem;
    margin: 0 0 1rem;
    border: 1px solid color-mix(in srgb, var(--woker-danger, #dc2626) 32%, transparent);
    border-radius: var(--woker-radius-control, 6px);
    background: var(--woker-danger-bg, rgba(220, 38, 38, .1));
    color: var(--woker-danger, #dc2626);
    font-size: .82rem;
    line-height: 1.4;
}

.modal-aviso-error {
    flex-direction: row;
    align-items: flex-start;
    gap: .55rem;
}

.modal-aviso-error svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: .15em;
}

/* ---------- Toast (SweetAlert2) ---------- */

/* El tema bootstrap-4 lo deja blanco fijo y con el ícono gigante: se reescribe con los
   tokens para que siga al tema de la app y entre en el sistema visual nuevo. */
.swal2-popup.swal2-toast {
    align-items: center;
    padding: .7rem .85rem;
    background: var(--woker-surface, #fff);
    border: 1px solid var(--woker-border, #e4e4e7);
    border-radius: var(--woker-radius, 12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.swal2-popup.swal2-toast .swal2-title {
    margin: 0;
    padding: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--woker-ink, #18181b);
    line-height: 1.3;
    text-align: initial;
}

.swal2-popup.swal2-toast .swal2-html-container {
    margin: .15rem 0 0;
    padding: 0;
    font-size: .8rem;
    color: var(--woker-muted, #52525b);
    line-height: 1.4;
    text-align: initial;
}

/* Chip cuadrado con el ícono adentro, como el header de los modales nuevos. Va sólo
   cuando el toast se arma con nuestro ícono (customClass.icon = 'aviso-ico'): los toasts
   que usan el ícono nativo de SweetAlert siguen renderizando como siempre. */
.swal2-popup.swal2-toast .swal2-icon.aviso-ico {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    margin: 0 .65rem 0 0;
    border: 0;
    border-radius: 8px;
}

/* El ícono propio entra por iconHtml; el x-mark / ring nativo sobra */
.swal2-popup.swal2-toast .swal2-icon.aviso-ico .swal2-x-mark,
.swal2-popup.swal2-toast .swal2-icon.aviso-ico .swal2-success-ring,
.swal2-popup.swal2-toast .swal2-icon.aviso-ico [class^="swal2-success-line"] { display: none; }

.swal2-popup.swal2-toast .swal2-icon.aviso-ico .swal2-icon-content {
    display: flex;
    font-size: 1rem;
    line-height: 0;
}

.swal2-popup.swal2-toast .swal2-icon.aviso-ico svg {
    width: 17px;
    height: 17px;
}

.swal2-popup.swal2-toast .swal2-icon.aviso-ico.swal2-error {
    background: var(--woker-danger-bg, rgba(220, 38, 38, .1));
    color: var(--woker-danger, #dc2626);
}

.swal2-popup.swal2-toast .swal2-icon.aviso-ico.swal2-success {
    background: var(--woker-ok-bg, rgba(22, 163, 74, .1));
    color: var(--woker-ok, #16a34a);
}

.swal2-popup.swal2-toast .swal2-timer-progress-bar {
    background: var(--woker-border, #e4e4e7);
}

.swal2-popup.swal2-toast .swal2-close {
    color: var(--woker-subtle, #a1a1aa);
    box-shadow: none;
}

.swal2-popup.swal2-toast .swal2-close:hover { color: var(--woker-ink, #18181b); }

/* ---------- Diálogo (SweetAlert2) ---------- */

/* Mismo criterio que el toast, para el popup grande: confirmaciones, avisos y prompts.
   El theme bootstrap-4 lo deja con la geometría de un modal de Bootstrap 4 (radio .3rem,
   borde negro al 20%, botones con radio .25em, Cancelar en #6c757d) y los colores fijos,
   así que al lado de un `.modal-woker` se lee de otra época.

   Va acá y no en `modern-ui-new.css` por dos razones. Una: el popup no existe en el HTML de
   ninguna pantalla —lo crea el JS al abrirse—, así que no lo alcanza el CSS de una vista ni
   lo ve ningún driver del pipeline. Dos: `avisos.css` lo carga `base.html` para TODAS las
   pantallas, migradas o no, y DESPUÉS del `{% block stylesheets %}` donde entra el theme;
   por eso gana por orden de fuente y por eso cada token va con fallback (en las pantallas
   viejas no está cargado `modern-ui-new.css`, pero los tokens de marca sí los inyecta
   `base.html` en el `:root`).

   Se alinean geometría, tipografía y color; NO el layout. La composición centrada de
   SweetAlert (ícono arriba, título, texto, botones) se conserva: un diálogo de confirmación
   no es un form como los `.modal-woker`, y el ícono es un gráfico animado que sólo funciona
   centrado. Por lo mismo se deja el orden de botones nativo (Confirmar y después Cancelar):
   invertirlo por CSS partiría el orden visual del orden de tabulación.

   El `:not(.swal2-toast)` es obligatorio: sin él estas reglas le pisarían el bloque de arriba. */

.swal2-popup:not(.swal2-toast) {
    padding: 1.5rem;
    border: 0;
    border-radius: var(--woker-radius, 12px);
    background: var(--woker-surface, #fff);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .10), 0 24px 64px rgba(0, 0, 0, .10);
    color: var(--woker-ink, #18181b);
}

.swal2-popup:not(.swal2-toast) .swal2-title {
    margin: 0;
    padding: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--woker-ink, #18181b);
}

.swal2-popup:not(.swal2-toast) .swal2-html-container {
    margin: .5rem 0 0;
    padding: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--woker-muted, #52525b);
}

/* Cuando el cuerpo viene por `html:` (y no por `text:`), el último bloque trae su propio
   margin-bottom y se sumaba al padding del popup: mismo desbalance que resuelve
   `.modal-woker .modal-body > :last-child` en los modales. */
.swal2-popup:not(.swal2-toast) .swal2-html-container > :last-child { margin-bottom: 0; }

/* ---- Ícono de estado ----
   El chip cuadrado con tinte del rol, como el del toast y el del header de los modales
   nuevos, en vez del círculo de 80px con anillo de color.

   Todo el interior del ícono (las dos líneas de la X, el tilde del success, el "!" y el "?")
   está dimensionado en `em` sobre el font-size del propio ícono, así que la escala se cambia
   con UNA declaración y las proporciones y las animaciones se mantienen: 5em a .7rem = 56px.
   Las coordenadas internas no se mueven al sacar el borde porque el absolute se resuelve
   contra el padding box, que el borde no integra. */
.swal2-popup:not(.swal2-toast) .swal2-icon {
    font-size: .7rem;
    margin: 0 auto 1rem;
    border: 0;
    border-radius: var(--woker-radius, 12px);
}

/* Las marcas se dibujan con divs de color fijo; que sigan la tinta del chip */
.swal2-popup:not(.swal2-toast) .swal2-icon [class^="swal2-x-mark-line"],
.swal2-popup:not(.swal2-toast) .swal2-icon [class^="swal2-success-line"] {
    background-color: currentColor;
}

/* El anillo translúcido existía para suavizar el borde del círculo: con el chip tintado sobra.
   Y con el anillo fuera sobran también las tres máscaras que lo tapaban mientras el tilde se
   dibuja: son bloques `background:#fff` de hasta 89px —más grandes que el propio ícono— que
   sin nada que enmascarar quedan pintando blanco encima del chip y fuera de él. En oscuro se
   veían como manchas blancas incluso antes de este cambio, porque el #fff está fijo en el
   theme y ninguna regla dark las alcanzaba. */
.swal2-popup:not(.swal2-toast) .swal2-icon .swal2-success-ring,
.swal2-popup:not(.swal2-toast) .swal2-icon .swal2-success-fix,
.swal2-popup:not(.swal2-toast) .swal2-icon [class^="swal2-success-circular-line"] { display: none; }

/* Tinta plena sobre su propio tinte, igual que el chip del toast. Es un gráfico, no texto
   corrido: el trazo va en 3-4px y le aplica el 3:1 de contraste no textual, no el 4,5:1. */
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error {
    background: var(--woker-danger-bg, rgba(220, 38, 38, .1));
    color: var(--woker-danger, #dc2626);
}

.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success {
    background: var(--woker-ok-bg, rgba(22, 163, 74, .1));
    color: var(--woker-ok, #16a34a);
}

.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-warning {
    background: var(--woker-warn-bg, #fef6d9);
    color: var(--woker-warn, #b45309);
}

.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-info {
    background: var(--woker-info-bg, #e6edff);
    color: var(--woker-info, #4338ca);
}

.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-question {
    background: var(--woker-neutral-bg, #f1f1f4);
    color: var(--woker-neutral, #52525b);
}

/* ---- Botones ----
   Mismo tratamiento que `.btn-minimal`: .875rem/600, radio de control y el hover que levanta
   1px. El `background-image: none` saca el degradado negro al 10% con el que el theme oscurece
   cualquier botón en hover, que sobre el violeta de marca lo ensuciaba. */
.swal2-popup:not(.swal2-toast) .swal2-actions {
    gap: .5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    border-radius: 0;
}

.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled {
    margin: 0;
    padding: .5rem 1rem;
    border: 0;
    border-radius: var(--woker-radius-control, 6px);
    box-shadow: none;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5;
    transition: var(--woker-transicion, all .2s cubic-bezier(.22, 1, .36, 1));
}

.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled:hover {
    background-image: none;
    transform: translateY(-1px);
}

.swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled:active {
    background-image: none;
    transform: translateY(1px);
}

.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-confirm {
    background-color: var(--woker-violet, #7551E4);
    color: #fff;
}

.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-confirm:hover {
    background-color: var(--woker-violet-hover, #6546c4);
}

.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--woker-violet-rgb, 117, 81, 228), .25);
}

/* Cancelar deja de ser un bloque gris sólido y pasa a outline, como `.btn-minimal.btn-outline`.
   El padding se descuenta el borde para que los dos botones midan lo mismo de alto: el
   confirmar no tiene borde y quedarían desparejos por 2px, con los dos en la misma fila. */
.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-cancel {
    padding: calc(.5rem - 1px) calc(1rem - 1px);
    border: 1px solid var(--woker-border-control, #e0e0e6);
    background-color: var(--woker-surface, #fff);
    color: var(--woker-muted, #52525b);
}

.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-cancel:hover {
    border-color: var(--woker-border-fuerte, #d1d5db);
    background-color: var(--woker-surface-2, #fbfbff);
    color: var(--woker-ink, #18181b);
}

.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-cancel:focus {
    box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .08);
}

/* Hoy ninguna pantalla usa `showDenyButton`, pero el theme lo trae con el rojo de Bootstrap:
   si mañana aparece, que salga con el rojo del tema y no con otro. */
.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-deny {
    background-color: var(--woker-danger, #dc2626);
    color: #fff;
}

/* ---- X de cierre ----
   Cuadrado de 32px con hover de marca, igual que el de los modales nuevos. El margen negativo
   es el del theme, traducido al alto nuevo: compensa la fila que el botón le agrega al grid
   del popup para que no empuje el contenido hacia abajo. */
.swal2-popup:not(.swal2-toast) .swal2-close {
    display: flex;
    width: 32px;
    height: 32px;
    margin: 0 0 -32px auto;
    padding: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--woker-subtle, #a1a1aa);
    box-shadow: none;
    transition: var(--woker-transicion, all .2s cubic-bezier(.22, 1, .36, 1));
}

.swal2-popup:not(.swal2-toast) .swal2-close:hover {
    background: var(--woker-violet-soft, #e9e3fb);
    color: var(--woker-violet, #7551E4);
}

/* ---- Campos de los prompts (`input:`) ----
   Los mismos valores que `.form-control` del sistema, incluido el foco en color de marca. */
.swal2-popup:not(.swal2-toast) .swal2-input,
.swal2-popup:not(.swal2-toast) .swal2-textarea,
.swal2-popup:not(.swal2-toast) .swal2-select {
    width: 100%;
    height: auto;
    margin: 1rem 0 0;
    padding: .5rem .75rem;
    border: 1px solid var(--woker-border-control, #e0e0e6);
    border-radius: var(--woker-radius-control, 6px);
    background-color: var(--woker-surface, #fff);
    box-shadow: none;
    color: var(--woker-ink, #18181b);
    font-size: .875rem;
    line-height: 1.5;
}

.swal2-popup:not(.swal2-toast) .swal2-input:focus,
.swal2-popup:not(.swal2-toast) .swal2-textarea:focus,
.swal2-popup:not(.swal2-toast) .swal2-select:focus {
    border-color: var(--woker-violet, #7551E4);
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(var(--woker-violet-rgb, 117, 81, 228), .15);
    color: var(--woker-ink, #18181b);
}

.swal2-popup:not(.swal2-toast) .swal2-input::placeholder,
.swal2-popup:not(.swal2-toast) .swal2-textarea::placeholder {
    color: var(--woker-subtle, #a1a1aa);
    opacity: 1;
}

/* El aviso de validación del prompt, al mismo tratamiento que `.modal-aviso-error` */
.swal2-popup:not(.swal2-toast) .swal2-validation-message {
    margin: .75rem 0 0;
    padding: .6rem .75rem;
    border-radius: var(--woker-radius-control, 6px);
    background: var(--woker-danger-bg, rgba(220, 38, 38, .1));
    color: var(--woker-danger, #dc2626);
    font-size: .82rem;
    line-height: 1.4;
}

.swal2-popup:not(.swal2-toast) .swal2-footer {
    margin: 1.5rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--woker-border, #e4e4e7);
    color: var(--woker-muted, #52525b);
    font-size: .8rem;
}