/* ============================================================================
   COMPLIANCE21 · REBRAND GLASSMORPHISM · AREA: LOGIN (index.php)
   ----------------------------------------------------------------------------
   Re-skin SOLO por CSS. Sobrescribe la plantilla UBold + Bootstrap 3.
   Se carga DESPUES de los CSS de UBold para ganar la cascada.
   No se toca HTML ni JS: se reutilizan las clases existentes del login
   (.account-pages, .wrapper-page, .card-box, .panel-heading, .panel-body,
    #form-login, .form-control, #use, #pas, #recordarme, #btnLogin.btn-pink).
   ========================================================================== */

/* ===== 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 en modo oscuro por preferencia del sistema (si no hay override manual) --- */
@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 en modo oscuro forzado manualmente (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);
}

/* ============================================================================
   1) FONDO GLOBAL — gradiente + centrado de la tarjeta de acceso
   ========================================================================== */
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:var(--sans);
  /* Gradiente diagonal identico al mockup */
  background:linear-gradient(135deg,var(--bg1),var(--bg2) 45%,var(--bg3)) !important;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Centrado del formulario: .account-pages es absolute (fuera de flujo),
     por lo que este flex solo alinea el .wrapper-page */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* Respeta la preferencia de movimiento reducido */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
}

/* ============================================================================
   2) BLOBS DE FONDO — le dan al vidrio algo que difuminar
   No se puede tocar el HTML, asi que se generan con pseudo-elementos:
   dos en <body> y dos en .account-pages (div vacio reaprovechado).
   ========================================================================== */

/* .account-pages: era un div con imagen de textura; se convierte en la capa
   de fondo a pantalla completa que aloja los blobs */
.account-pages{
  position:fixed !important;
  inset:0;
  width:100% !important;
  height:100% !important;
  background:none !important;   /* elimina la textura agsquare.png de UBold */
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

/* Blob comun — focos pequenos y suaves (baratos de repintar) */
body::before,
body::after,
.account-pages::before{
  content:"";
  position:fixed;
  border-radius:50%;
  filter:blur(60px);
  opacity:.5;
  z-index:0;
  pointer-events:none;
}
/* Blob A — azul, esquina superior izquierda */
body::before{
  width:320px; height:320px;
  background:var(--blob-a);
  top:-120px; left:-100px;
}
/* Blob B — turquesa, lateral derecho */
body::after{
  width:300px; height:300px;
  background:var(--blob-b);
  top:42%; right:-120px;
}
/* Blob C — ambar, inferior */
.account-pages::before{
  width:280px; height:280px;
  background:var(--blob-c);
  bottom:-120px; left:26%;
}

/* El .clearfix intermedio no debe romper el centrado flex */
.clearfix{display:none !important;}

/* ============================================================================
   3) CONTENEDOR DE LA TARJETA
   ========================================================================== */
.wrapper-page{
  position:relative;
  z-index:2;
  width:100%;
  max-width:410px;
  margin:0 !important;   /* anula el margin:5% auto de UBold; centra el flex */
}

/* ============================================================================
   4) TARJETA DE ACCESO DE VIDRIO
   ========================================================================== */
.wrapper-page .card-box{
  position:relative;
  background:var(--glass);
  border:1px solid var(--border) !important;   /* anula el borde gris de UBold */
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:0;
  overflow:hidden;
}
/* Filo de luz superior (highlight), como los .tile del mockup */
.wrapper-page .card-box::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--glass-hi),transparent);
  z-index:1;
}

/* ============================================================================
   5) CABECERA — logo + titulo "Acceso"
   ========================================================================== */
.wrapper-page .panel-heading{
  background:transparent !important;
  border:none !important;
  padding:34px 32px 8px !important;
  text-align:center;
}
/* Logo (assets/images/logo_dark.png). Ancho fijado inline en el HTML;
   se acota para que respire y se centra */
.wrapper-page .panel-heading img{
  display:inline-block;
  max-width:200px;
  width:auto !important;
  height:auto;
  margin:0 auto 6px;
}
/* Titulo "Acceso" */
.wrapper-page .panel-heading h3{
  margin:14px 0 0;
  color:var(--ink);
  font-family:var(--sans);
  font-size:20px;
  font-weight:700;
  letter-spacing:-.02em;
  text-transform:none;
}

/* ============================================================================
   6) CUERPO DEL FORMULARIO
   ========================================================================== */
.wrapper-page .panel-body{
  background:transparent !important;
  padding:20px 32px 34px !important;
}
/* El form-horizontal de Bootstrap mete gutters negativos: se neutralizan */
#form-login{margin-top:14px !important;}
#form-login .form-group{
  margin-left:0;
  margin-right:0;
  margin-bottom:16px;
}
#form-login .form-group > [class^="col-"],
#form-login .form-group > [class*=" col-"]{
  padding-left:0;
  padding-right:0;
}

/* ============================================================================
   7) INPUTS DE VIDRIO (#use, #pas)
   ========================================================================== */
.wrapper-page .form-control{
  height:auto;
  background:var(--glass-2) !important;
  border:1px solid var(--border-in) !important;
  border-radius:11px !important;
  box-shadow:none !important;
  padding:11px 14px;
  font-family:var(--sans);
  font-size:14px;
  color:var(--ink) !important;
  transition:border-color .16s, box-shadow .16s, background .16s;
}
.wrapper-page .form-control::placeholder{color:var(--muted); opacity:1;}
.wrapper-page .form-control:-ms-input-placeholder{color:var(--muted);}
.wrapper-page .form-control:focus{
  background:var(--glass-hi) !important;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px var(--accent-soft) !important;
  outline:none;
}
/* Autocompletado del navegador: evita el amarillo y mantiene el color de texto */
.wrapper-page .form-control:-webkit-autofill,
.wrapper-page .form-control:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  transition:background-color 9999s ease-out 0s;
}

/* ============================================================================
   8) CHECKBOX "Recuerdame"
   ========================================================================== */
#form-login #recordarme{
  accent-color:var(--accent);
  cursor:pointer;
  vertical-align:middle;
}
#form-login label[for="recordarme"]{
  color:var(--ink-2);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  vertical-align:middle;
}

/* ============================================================================
   9) BOTON PRINCIPAL — el .btn-pink de UBold pasa a ser el azul del rebrand
   ========================================================================== */
.wrapper-page #btnLogin,
.wrapper-page .btn-pink{
  background:linear-gradient(120deg,var(--accent),var(--accent-2)) !important;
  border:none !important;
  border-radius:12px !important;
  padding:12px 16px;
  color:#fff !important;
  font-family:var(--sans);
  font-weight:600;
  font-size:14px;
  letter-spacing:.02em;
  box-shadow:0 8px 18px -8px var(--accent);
  transition:transform .16s, box-shadow .16s, filter .16s;
}
.wrapper-page #btnLogin:hover,
.wrapper-page #btnLogin:focus,
.wrapper-page .btn-pink:hover,
.wrapper-page .btn-pink:focus{
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 12px 24px -8px var(--accent);
  filter:brightness(1.03);
}
.wrapper-page #btnLogin:active{transform:translateY(0);}
.wrapper-page #btnLogin[disabled],
.wrapper-page #btnLogin:disabled{
  opacity:.7;
  transform:none;
  cursor:default;
}
/* La onda "waves" del click hereda el color del boton (blanco translucido) */
.wrapper-page #btnLogin .waves-ripple{background:rgba(255,255,255,.35);}

/* ============================================================================
   10) MODO OSCURO — ajuste del logo
   logo_dark.png es un logotipo oscuro pensado para fondo claro; en modo
   oscuro se vuelve blanco monocromo para que siga siendo legible.
   ========================================================================== */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .wrapper-page .panel-heading img{
    filter:brightness(0) invert(1);
  }
}
:root[data-theme="dark"] .wrapper-page .panel-heading img{
  filter:brightness(0) invert(1);
}

/* ============================================================================
   11) SWEETALERT — el login muestra errores con swal(); se le da piel de vidrio
   ========================================================================== */
.sweet-alert{
  background:var(--glass-hi) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow) !important;
  color:var(--ink) !important;
}
.sweet-alert h2{color:var(--ink) !important; font-family:var(--sans); font-weight:700;}
.sweet-alert p{color:var(--ink-2) !important;}
.sweet-alert button.confirm{
  background:linear-gradient(120deg,var(--accent),var(--accent-2)) !important;
  border-radius:11px !important;
  box-shadow:0 8px 18px -8px var(--accent) !important;
}
.sweet-alert button.confirm:hover{filter:brightness(1.04);}

/* ============================================================================
   12) RESPONSIVE — moviles
   ========================================================================== */
@media (max-width:480px){
  body{padding:16px;}
  .wrapper-page{max-width:100%;}
  .wrapper-page .panel-heading{padding:26px 22px 6px !important;}
  .wrapper-page .panel-body{padding:16px 22px 26px !important;}
}