@charset "UTF-8";
/* =====================================================================
   COMPLIANCE21 — REBRAND GLASSMORPHISM · Área PLUGINS
   ---------------------------------------------------------------------
   Re-skin SOLO por CSS. Sobrescribe los estilos de los plugins de la
   plantilla UBold (sweetalert2, toastr, select2 v3, bootstrap-datepicker
   y switchery). Se carga DESPUÉS de los CSS de los plugins para ganar la
   cascada. La funcionalidad (jQuery, callbacks, toggles) se conserva:
   aquí solo cambia la piel.

   NOTA de versiones reales detectadas en el proyecto:
     · SweetAlert  -> es SweetAlert2 v5.3.5  (prefijo de clases "swal2-")
     · select2     -> v3.5.2                 (.select2-choice / .select2-drop)
     · datepicker  -> bootstrap-datepicker v1
     · switchery   -> el color ON va inline por JS -> requiere !important
                      puntual sobre input:checked + .switchery
   ===================================================================== */

/* ===== SISTEMA DE TOKENS GLASSMORPHISM (compartido, NO cambiar los valores) ===== */
:root{
  --bg1:#eef2f8; --bg2:#f6f8fc; --bg3:#eef3f9;
  --ink:#1b2434; --ink-2:#3d475b; --muted:#6b7488;
  --glass:rgba(255,255,255,.88); --glass-2:rgba(255,255,255,.94); --glass-hi:#ffffff;
  --border:rgba(23,32,49,.10); --border-in:rgba(23,32,49,.07); --line:rgba(23,32,49,.08);
  --accent:#2f5fc7; --accent-2:#4d7ce0; --accent-soft:rgba(47,95,199,.10);
  --low:#2fa860; --mid:#dca11f; --high:#e07b2b; --crit:#d23b3b;
  --low-s:rgba(47,168,96,.13); --mid-s:rgba(220,161,31,.15); --high-s:rgba(224,123,43,.14); --crit-s:rgba(210,59,59,.13);
  --shadow:0 1px 2px rgba(23,40,80,.06), 0 10px 26px -14px rgba(23,40,80,.20);
  --shadow-sm:0 1px 2px rgba(23,40,80,.08);
  --blur:9px; --radius:14px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  --blob-a:rgba(59,111,212,.42); --blob-b:rgba(53,184,201,.32); --blob-c:rgba(240,168,90,.28); --blob-d:rgba(120,90,220,.24);
}
/* --- Tokens DARK (auto por preferencia del sistema) --- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg1:#0c1120; --bg2:#0f1626; --bg3:#111a2e;
  --ink:#e9edf5; --ink-2:#bcc4d4; --muted:#7d879c;
  --glass:rgba(28,38,58,.52); --glass-2:rgba(32,44,68,.66); --glass-hi:rgba(44,58,86,.7);
  --border:rgba(255,255,255,.09); --border-in:rgba(255,255,255,.05); --line:rgba(255,255,255,.07);
  --accent:#6f9bef; --accent-2:#8db1f5; --accent-soft:rgba(111,155,239,.16);
  --low:#4bc57e; --mid:#e6bd52; --high:#ec9256; --crit:#e56a6a;
  --low-s:rgba(75,197,126,.14); --mid-s:rgba(230,189,82,.14); --high-s:rgba(236,146,86,.14); --crit-s:rgba(229,106,106,.15);
  --shadow:0 4px 16px -6px rgba(0,0,0,.5), 0 22px 50px -24px rgba(0,0,0,.75);
  --shadow-sm:0 2px 10px -4px rgba(0,0,0,.5);
  --blob-a:rgba(59,111,212,.36); --blob-b:rgba(53,184,201,.20); --blob-c:rgba(240,168,90,.16); --blob-d:rgba(140,110,240,.30);
}}
/* --- Tokens DARK (forzado por el toggle data-theme="dark") --- */
:root[data-theme="dark"]{
  --bg1:#0c1120; --bg2:#0f1626; --bg3:#111a2e;
  --ink:#e9edf5; --ink-2:#bcc4d4; --muted:#7d879c;
  --glass:rgba(28,38,58,.52); --glass-2:rgba(32,44,68,.66); --glass-hi:rgba(44,58,86,.7);
  --border:rgba(255,255,255,.09); --border-in:rgba(255,255,255,.05); --line:rgba(255,255,255,.07);
  --accent:#6f9bef; --accent-2:#8db1f5; --accent-soft:rgba(111,155,239,.16);
  --low:#4bc57e; --mid:#e6bd52; --high:#ec9256; --crit:#e56a6a;
  --low-s:rgba(75,197,126,.14); --mid-s:rgba(230,189,82,.14); --high-s:rgba(236,146,86,.14); --crit-s:rgba(229,106,106,.15);
  --shadow:0 4px 16px -6px rgba(0,0,0,.5), 0 22px 50px -24px rgba(0,0,0,.75);
  --shadow-sm:0 2px 10px -4px rgba(0,0,0,.5);
  --blob-a:rgba(59,111,212,.36); --blob-b:rgba(53,184,201,.20); --blob-c:rgba(240,168,90,.16); --blob-d:rgba(140,110,240,.30);
}

/* Respeta la preferencia de movimiento reducido en las transiciones nuevas */
@media (prefers-reduced-motion:reduce){
  .swal2-modal,.select2-drop,.datepicker,#toast-container>div{transition:none!important;}
}


/* =====================================================================
   1) SWEETALERT2  (runtime real: prefijo .swal2-*)
   Tarjeta de vidrio con blur; botones del rebrand; iconos con color
   semántico. Se estilan también las clases legacy .sweet-alert por si
   alguna vista antigua las usa.
   ===================================================================== */

/* Overlay: velo oscuro translúcido con un ligero desenfoque del fondo */
.swal2-container.swal2-in,
.swal2-overlay{
  background-color:rgba(15,22,38,.45)!important;
}

/* Tarjeta modal de vidrio */
.swal2-modal,
.sweet-alert{
  background:var(--glass-hi)!important;
  border:1px solid var(--border);
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow)!important;
  font-family:var(--sans)!important;
  color:var(--ink);
  padding:26px 24px 22px!important;
}

/* Títulos y textos dentro del modal */
.swal2-modal h2,
.sweet-alert h2{
  color:var(--ink)!important;
  font-weight:700!important;
  letter-spacing:-.02em;
  font-size:24px!important;
  line-height:1.3!important;
}
.swal2-modal .swal2-content,
.sweet-alert p,
.sweet-alert .lead{
  color:var(--ink-2)!important;
  font-size:14.5px!important;
}

/* Botón "aceptar/confirmar": degradado azul del rebrand.
   SweetAlert2 fija el color de fondo INLINE (confirmButtonColor) -> !important */
.swal2-modal .swal2-confirm.swal2-styled,
.sweet-alert button.confirm{
  background-image:linear-gradient(120deg,var(--accent),var(--accent-2))!important;
  background-color:var(--accent)!important;
  color:#fff!important;
  border:none!important;
  border-radius:12px!important;
  font-family:var(--sans)!important;
  font-weight:600!important;
  padding:10px 26px!important;
  box-shadow:0 8px 18px -8px var(--accent)!important;
  transition:transform .16s ease, box-shadow .16s ease;
}
.swal2-modal .swal2-confirm.swal2-styled:hover,
.sweet-alert button.confirm:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px -8px var(--accent)!important;
}
.swal2-modal .swal2-confirm.swal2-styled:focus,
.sweet-alert button:focus{
  outline:none!important;
  box-shadow:0 0 0 3px var(--accent-soft), 0 8px 18px -8px var(--accent)!important;
}

/* Botón "cancelar": vidrio secundario (ghost) */
.swal2-modal .swal2-cancel.swal2-styled,
.sweet-alert button.cancel{
  background:var(--glass-2)!important;
  background-image:none!important;
  color:var(--ink-2)!important;
  border:1px solid var(--border-in)!important;
  border-radius:12px!important;
  font-family:var(--sans)!important;
  font-weight:600!important;
  padding:10px 26px!important;
  box-shadow:none!important;
}
.swal2-modal .swal2-cancel.swal2-styled:hover,
.sweet-alert button.cancel:hover{
  background:var(--glass-hi)!important;
  color:var(--ink)!important;
}

/* Botón de cierre (aspa) */
.swal2-modal .swal2-close,
.sweet-alert .sa-close{ color:var(--muted)!important; }
.swal2-modal .swal2-close:hover{ color:var(--ink)!important; }

/* Iconos semánticos: recoloreados con la paleta del rebrand.
   Los iconos de swal2 se dibujan con borders/backgrounds de color fijo. */
.swal2-icon.swal2-success,
.sweet-alert .sa-icon.sa-success{
  border-color:var(--low)!important;
}
.swal2-icon.swal2-success .swal2-success-line,
.swal2-icon.swal2-success [class^='swal2-success-line'],
.sweet-alert .sa-icon.sa-success .sa-line{
  background-color:var(--low)!important;
}
.swal2-icon.swal2-success .swal2-success-ring,
.sweet-alert .sa-icon.sa-success .sa-placeholder{
  border-color:var(--low-s)!important;
}
.swal2-icon.swal2-error,
.sweet-alert .sa-icon.sa-error{ border-color:var(--crit)!important; }
.swal2-icon.swal2-error .swal2-x-mark [class^='swal2-x-mark-line'],
.swal2-icon.swal2-error [class^='swal2-x-mark-line'],
.sweet-alert .sa-icon.sa-error .sa-line{ background-color:var(--crit)!important; }
.swal2-icon.swal2-warning,
.sweet-alert .sa-icon.sa-warning{ color:var(--mid)!important; border-color:var(--mid)!important; }
.swal2-icon.swal2-info,
.swal2-icon.swal2-question,
.sweet-alert .sa-icon.sa-info,
.sweet-alert .sa-icon.sa-question{ color:var(--accent)!important; border-color:var(--accent)!important; }

/* Inputs internos de swal2 (prompt) coherentes con .form-control del rebrand */
.swal2-modal .swal2-input,
.swal2-modal .swal2-textarea,
.swal2-modal .swal2-select,
.sweet-alert input{
  background:var(--glass-2)!important;
  border:1px solid var(--border-in)!important;
  border-radius:11px!important;
  color:var(--ink)!important;
  box-shadow:none!important;
}
.swal2-modal .swal2-input:focus,
.swal2-modal .swal2-textarea:focus,
.sweet-alert input:focus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px var(--accent-soft)!important;
}


/* =====================================================================
   2) TOASTR  (#toast-container .toast + variantes semánticas)
   Notificaciones de vidrio con blur, borde lateral de color semántico
   y texto en tinta. Se oculta el icono PNG blanco original (invisible
   sobre vidrio claro) y se usa el color del borde como señal.
   ===================================================================== */

#toast-container>div,
#toast-container>.toast{
  background:var(--glass-hi)!important;
  border:1px solid var(--border);
  border-left-width:4px;
  border-radius:14px!important;
  box-shadow:var(--shadow)!important;
  color:var(--ink)!important;
  opacity:1!important;
  filter:none!important;
  padding:14px 16px 14px 18px!important;
  background-image:none!important;   /* quita el icono PNG blanco por defecto */
}
#toast-container>div:hover{
  box-shadow:var(--shadow)!important;
  transform:translateY(-1px);
  transition:transform .16s ease;
}
/* Título y cuerpo del toast */
#toast-container .toast-title{ color:var(--ink)!important; font-weight:700!important; }
#toast-container .toast-message{ color:var(--ink-2)!important; }
#toast-container .toast-close-button{
  color:var(--muted)!important; text-shadow:none!important; opacity:.8!important;
}
#toast-container .toast-close-button:hover{ color:var(--ink)!important; opacity:1!important; }

/* Variantes semánticas: color del borde lateral + tinte de fondo */
#toast-container>.toast-success{ border-left-color:var(--low)!important;  background-color:var(--glass-hi)!important; }
#toast-container>.toast-error{   border-left-color:var(--crit)!important; }
#toast-container>.toast-warning{ border-left-color:var(--mid)!important; }
#toast-container>.toast-info{    border-left-color:var(--accent)!important; }
/* El título hereda el color semántico para reforzar el mensaje */
#toast-container>.toast-success .toast-title{ color:var(--low)!important; }
#toast-container>.toast-error   .toast-title{ color:var(--crit)!important; }
#toast-container>.toast-warning .toast-title{ color:var(--mid)!important; }
#toast-container>.toast-info    .toast-title{ color:var(--accent)!important; }

/* Barra de progreso con el acento */
#toast-container .toast-progress{ background-color:var(--accent)!important; opacity:.35!important; }


/* =====================================================================
   3) SELECT2  (v3.5.2 -> .select2-choice / .select2-choices / .select2-drop)
   Input y desplegable de vidrio, coherentes con .form-control del rebrand.
   ===================================================================== */

/* --- Selección simple: la caja (.select2-choice es un <a>) --- */
.select2-container .select2-choice{
  background:var(--glass-2)!important;
  background-image:none!important;       /* elimina el degradado gris por defecto */
  border:1px solid var(--border-in)!important;
  border-radius:11px!important;
  color:var(--ink)!important;
  height:auto!important;
  min-height:38px;
  line-height:36px!important;
  padding:0 12px!important;
  box-shadow:none!important;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.select2-container .select2-choice>.select2-chosen{ color:var(--ink)!important; }
.select2-container .select2-choice .select2-arrow{
  background:transparent!important;
  background-image:none!important;
  border-left:1px solid var(--line)!important;
  border-radius:0 11px 11px 0!important;
  width:30px!important;
}
/* Flecha dibujada por CSS (oculta el sprite select2.png) */
.select2-container .select2-choice .select2-arrow b{
  background:none!important;
  position:relative;
}
.select2-container .select2-choice .select2-arrow b:after{
  content:"";
  position:absolute; top:50%; left:50%;
  width:7px; height:7px;
  margin:-5px 0 0 -4px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:rotate(45deg);
}
/* Estado activo/foco: anillo de acento */
.select2-container-active .select2-choice,
.select2-container-active .select2-choices,
.select2-dropdown-open .select2-choice{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px var(--accent-soft)!important;
}
.select2-container .select2-choice abbr{ /* aspa "limpiar" */
  color:var(--muted)!important;
}

/* Placeholder */
.select2-container .select2-choice>.select2-chosen.select2-default,
.select2-default .select2-chosen{ color:var(--muted)!important; }

/* --- Selección múltiple: contenedor + tags --- */
.select2-container-multi .select2-choices{
  background:var(--glass-2)!important;
  background-image:none!important;
  border:1px solid var(--border-in)!important;
  border-radius:11px!important;
  min-height:38px;
}
.select2-container-multi.select2-container-active .select2-choices{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px var(--accent-soft)!important;
}
.select2-container-multi .select2-choices .select2-search-choice{
  background:var(--accent-soft)!important;
  background-image:none!important;
  border:1px solid var(--border-in)!important;
  border-radius:99px!important;
  color:var(--accent)!important;
  box-shadow:none!important;
  padding:4px 8px 4px 20px!important;
  font-weight:600;
}
.select2-container-multi .select2-choices .select2-search-choice-close{
  color:var(--accent)!important;
}

/* --- Desplegable de vidrio (.select2-drop se inyecta en <body>) --- */
.select2-drop,
.select2-drop.select2-drop-active{
  background:var(--glass-hi)!important;
  border:1px solid var(--border)!important;
  border-top:none!important;
  border-radius:0 0 14px 14px!important;
  box-shadow:var(--shadow)!important;
  color:var(--ink)!important;
}
.select2-drop.select2-drop-above{
  border-top:1px solid var(--border)!important;
  border-bottom:none!important;
  border-radius:14px 14px 0 0!important;
}
/* Cuando el desplegable está abierto, unificar bordes con la caja */
.select2-dropdown-open .select2-choice{ border-radius:11px 11px 0 0!important; }
.select2-dropdown-open.select2-drop-above .select2-choice{ border-radius:0 0 11px 11px!important; }

/* Caja de búsqueda dentro del desplegable */
.select2-search{ padding:8px 8px 4px!important; }
.select2-search input{
  background:var(--glass-2)!important;
  border:1px solid var(--border-in)!important;
  border-radius:9px!important;
  color:var(--ink)!important;
  box-shadow:none!important;
}
.select2-search input:focus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px var(--accent-soft)!important;
}

/* Lista de resultados */
.select2-results{ margin:4px!important; padding:0!important; }
.select2-results .select2-result-label{
  color:var(--ink-2)!important;
  border-radius:9px!important;
  padding:8px 10px!important;
}
.select2-results .select2-highlighted{
  background:linear-gradient(120deg,var(--accent),var(--accent-2))!important;
  border-radius:9px!important;
}
.select2-results .select2-highlighted .select2-result-label{ color:#fff!important; }
.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-selection-limit{
  background:transparent!important;
  color:var(--muted)!important;
}

/* --- BLINDAJE contra el "input/caja detrás del select" -----------------------
   1) select2 v3 puede propagar la clase .form-control al .select2-container; sin
      esto el rebrand pinta el CONTENEDOR como un input (fondo/borde/alto 38px)
      ADEMÁS del .select2-choice interno -> se ve una caja dentro de otra o un
      input "detrás" del select. Se neutraliza el form-control en el contenedor.
   2) El <select> original que select2 mantiene oculto (.select2-offscreen) no
      debe reaparecer aunque tenga .form-control.
   3) Soporte select2 v4 (.select2-selection / .select2-search__field) por si
      algún módulo lo usa. -------------------------------------------------- */
.select2-container.form-control{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  border-radius:0!important;
}
select.select2-offscreen,
.select2-offscreen{
  position:absolute!important;
  clip:rect(0 0 0 0)!important;
  width:1px!important; height:1px!important; min-height:0!important;
  padding:0!important; margin:-1px!important; border:0!important;
  overflow:hidden!important; opacity:0!important; background:transparent!important;
}
/* select2 v4 (por si algún módulo lo carga) */
.select2-container--default .select2-selection--single{
  background:var(--glass-2)!important;
  border:1px solid var(--border-in)!important;
  border-radius:11px!important;
  height:38px!important;
  padding:0 12px!important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:36px!important; color:var(--ink)!important; padding:0!important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:36px!important; }
.select2-container--default .select2-selection--single .select2-search__field{ display:none!important; }


/* =====================================================================
   4) BOOTSTRAP-DATEPICKER  (.datepicker)
   Calendario de vidrio; día activo (seleccionado) en azul; hoy con
   tinte de acento; hover de vidrio.
   ===================================================================== */

.datepicker{
  background:var(--glass-hi)!important;
  border:1px solid var(--border)!important;
  border-radius:14px!important;
  box-shadow:var(--shadow)!important;
  color:var(--ink)!important;
  padding:10px!important;
  font-family:var(--sans)!important;
}
.datepicker.dropdown-menu{ margin-top:4px; }
/* Cabecera (mes/año, flechas) */
.datepicker table tr th{
  color:var(--ink)!important;
  border-radius:9px!important;
  font-weight:600;
}
.datepicker table tr th.dow{
  color:var(--muted)!important;
  font-family:var(--mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.datepicker table tr th.datepicker-switch:hover,
.datepicker table tr th.prev:hover,
.datepicker table tr th.next:hover{
  background:var(--glass-2)!important;
}
/* Celdas de día */
.datepicker table tr td{
  color:var(--ink-2)!important;
  border-radius:9px!important;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused,
.datepicker table tr td span:hover{
  background:var(--glass-2)!important;
  color:var(--ink)!important;
}
.datepicker table tr td.old,
.datepicker table tr td.new{ color:var(--muted)!important; }
/* Hoy: tinte de acento suave */
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover{
  background:var(--accent-soft)!important;
  background-image:none!important;
  color:var(--accent)!important;
  border:1px solid var(--border-in)!important;
  font-weight:700;
}
/* Día activo / seleccionado / rango: azul del rebrand */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.selected,
.datepicker table tr td span.active{
  background:linear-gradient(120deg,var(--accent),var(--accent-2))!important;
  background-image:linear-gradient(120deg,var(--accent),var(--accent-2))!important;
  color:#fff!important;
  border:none!important;
  text-shadow:none!important;
  box-shadow:0 6px 14px -8px var(--accent)!important;
}
/* Rango entre fechas */
.datepicker table tr td.range,
.datepicker table tr td.range:hover{
  background:var(--accent-soft)!important;
  color:var(--accent)!important;
}
/* Selectores de mes / año (vista months/years) */
.datepicker table tr td span{
  border-radius:9px!important;
  color:var(--ink-2)!important;
}
.datepicker table tr td span.old,
.datepicker table tr td span.new{ color:var(--muted)!important; }
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover{ color:var(--muted)!important; opacity:.5; }


/* =====================================================================
   5) SWITCHERY  (.switchery)
   El interruptor pinta su color ON/OFF INLINE por JS. Para que el ON
   use la paleta del rebrand se sobrescribe con !important solo el estado
   marcado. Switchery inserta el <span.switchery> justo tras el checkbox,
   así que input:checked + .switchery es un selector fiable.
   ===================================================================== */

/* Aro (knob) blanco con sombra suave, en cualquier estado */
.switchery>small{
  background:#fff!important;
  box-shadow:0 1px 3px rgba(23,40,80,.35)!important;
}

/* Estado OFF: pista de vidrio gris (el inline pone blanco/gris) */
input:not(:checked)+.switchery{
  background-color:var(--glass-2)!important;
  border-color:var(--border-in)!important;
  box-shadow:inset 0 0 0 0 var(--glass-2)!important;
}

/* Estado ON: verde --low (coincide con el toggle del mockup).
   Switchery rellena la pista con un box-shadow inset inline -> !important */
input:checked+.switchery{
  background-color:var(--low)!important;
  border-color:var(--low)!important;
  box-shadow:inset 0 0 0 20px var(--low)!important;
}

/* Variante azul: interruptores marcados con clase .switchery-accent
   (por si en alguna vista se quiere el acento en vez del verde) */
input:checked+.switchery.switchery-accent{
  background-color:var(--accent)!important;
  border-color:var(--accent)!important;
  box-shadow:inset 0 0 0 20px var(--accent)!important;
}