/* ================================
   Loading global
   ================================ */
.cb-loading{
  position: fixed;
  inset: 0;
  z-index: 2000;                 /* por encima de modals Bootstrap */
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(3px);
}
.cb-loading.active{ display: flex; }

.loading-content{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 20px 26px;
  min-width: 260px;
  text-align: center;
  box-shadow: 0 30px 70px rgba(2,8,23,.35), inset 0 1px 0 rgba(255,255,255,.6);
}
.loading-spinner{
  width: 36px; height: 36px; border-radius: 50%;
  border: 4px solid rgba(54,168,235,.25); border-top-color: var(--cb-blue,#2563EB);
  margin: 0 auto 12px; animation: spin .85s linear infinite;
}
.loading-text{ font-weight: 700; color: #0f172a; letter-spacing: .2px; }
@keyframes spin{ to { transform: rotate(360deg); } }


/* ================================
   Login rediseño (Opción A ampliada: hero + checklist + stats + modo claro/oscuro)
   Compacto: entra en 100vh sin scroll de pagina.
   ================================ */
.cbui-login{
  --lg-ground: #C6DAEC; /* celeste del logo, apagado/suave */
  --lg-card: #FFFFFF;
  --lg-text: #0F1B2D;
  --lg-muted: #64728B;
  --lg-field-bg: #FFFFFF;
  --lg-field-border: #C4D0E0;
  --lg-border: #E4EAF3;
  --lg-accent: #2563EB;
  --lg-accent-strong: #1D4FD8;
  --lg-green: #16A34A;

  position: fixed; inset: 0; overflow: hidden; display: flex;
  background: var(--lg-ground);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}
.cbui-login[data-theme="dark"]{
  --lg-ground: #0A101C;
  --lg-card: #131D30;
  --lg-text: #E8EEF9;
  --lg-muted: #8593AC;
  --lg-field-bg: #0E1626;
  --lg-field-border: #3A4A66;
  --lg-border: #27344E;
}
.cbui-login *{ box-sizing: border-box; }
/* reset del body/wrappers del tema (esta hoja solo se carga en el layout de login) -> sin scroll ni espacio blanco */
html, body { margin: 0; padding: 0; height: 100%; }
body { overflow: hidden; }
.dt-root, .dt-main, .dt-content-wrapper{ margin: 0 !important; padding: 0 !important; width: 100%; height: 100%; }

/* ---------- Panel de marca (izquierda) ---------- */
.cbui-login__brand{
  flex: 1 1 54%; max-width: 54%;
  background: linear-gradient(150deg, #14337A 0%, #1D4ED8 55%, #2563EB 100%);
  color: #fff; position: relative; overflow: hidden;
  padding: 26px 44px 20px; display: flex; flex-direction: column; justify-content: center;
}
.cbui-login__brand::before,
.cbui-login__brand::after{ content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.cbui-login__brand::before{ left: -110px; top: -110px; width: 300px; height: 300px; background: rgba(255,255,255,.06); }
.cbui-login__brand::after{ right: -150px; bottom: -140px; width: 420px; height: 420px; background: rgba(255,255,255,.05); }
.cbui-login__brand > *{ position: relative; z-index: 2; }

.cbui-login__hero{
  position: absolute; z-index: 1; right: 3%; top: 50%; transform: translateY(-50%);
  width: 44%; max-width: 415px; height: auto; pointer-events: none;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.30));
}

.cbui-login__brandlogo{ display: flex; align-items: center; gap: 14px; }
.cbui-login__brandlogo img{ height: 44px; width: auto; }
.cbui-login__brandsub{ font-size: 11px; letter-spacing: 2.5px; color: #A9C6F5; margin: 8px 0 0; font-weight: 600; }

.cbui-login__title{ font-size: 25px; font-weight: 700; line-height: 1.15; margin: 18px 0 0; color: #fff; max-width: 380px; }
.cbui-login__title .hl{ color: #4ADE80; }
.cbui-login__lead{ font-size: 13px; line-height: 1.5; color: #C9DCF7; margin: 10px 0 0; max-width: 350px; }

.cbui-login__list{ list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: 1fr; gap: 8px; max-width: 330px; }
.cbui-login__list li{ display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #EAF1FE; }
.cbui-login__list .ck{ flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: rgba(74,222,128,.18); color: #4ADE80; display: inline-flex; align-items: center; justify-content: center; }

.cbui-login__stats{ display: flex; gap: 10px; margin-top: 20px; max-width: 360px; }
.cbui-login__stat{ flex: 1; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); border-radius: 11px; padding: 9px 8px; text-align: center; }
.cbui-login__stat .ic{ color: #A9C6F5; margin-bottom: 3px; display: inline-block; }
.cbui-login__stat b{ display: block; font-size: 15px; font-weight: 700; color: #fff; }
.cbui-login__stat span{ display: block; font-size: 11px; color: #B9CEF0; margin-top: 1px; }

.cbui-login__brandfoot{ margin-top: 14px; font-size: 11.5px; color: #9DB8E8; }

/* ---------- Panel del formulario (derecha) ---------- */
.cbui-login__panel{
  flex: 1 1 46%; background: var(--lg-ground);
  display: flex; align-items: center; justify-content: center;
  padding: 22px 26px; position: relative; overflow-y: auto;
}
.cbui-login__themebar{
  position: absolute; top: 18px; right: 24px; z-index: 5;
  display: inline-flex; background: var(--lg-card); border: 1px solid var(--lg-border);
  border-radius: 999px; padding: 4px; box-shadow: 0 6px 18px rgba(16,27,45,.10);
}
.cbui-login__themebar button{
  border: none; background: transparent; color: var(--lg-muted);
  font-size: 12px; font-weight: 600; padding: 5px 13px; border-radius: 999px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.cbui-login__themebar button.active{ background: var(--lg-accent); color: #fff; }
.cbui-login[data-theme="dark"] .cbui-login__themebar button.active{ background: #24345A; color: #fff; }

.cbui-login__card{
  width: 100%; max-width: 400px; background: var(--lg-card);
  border-radius: 20px; padding: 26px 30px 20px;
  box-shadow: 0 22px 60px rgba(16,27,45,.14);
  border: 1px solid var(--lg-border);
}
.cbui-login__avatar{
  width: 88px; height: 88px; border-radius: 18px; margin: 0 auto 12px;
  background: transparent; border: 0;
  display: flex; align-items: center; justify-content: center;
}
.cbui-login__avatar img{ width: 72px; height: 72px; object-fit: contain; }
.cbui-login__card h1{ font-size: 22px; font-weight: 700; color: var(--lg-text); margin: 0; text-align: center; }
.cbui-login__sub{ font-size: 13.5px; color: var(--lg-muted); margin: 3px 0 20px; text-align: center; }

.cbui-field{ margin-bottom: 13px; }
.cbui-field > label{ display: block; font-size: 12.5px; font-weight: 600; color: var(--lg-text); margin-bottom: 6px; }
.cbui-login__inputwrap{ position: relative; }
.cbui-login__inputwrap > svg.ic{ position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--lg-muted); pointer-events: none; }
.cbui-login .form-control{
  height: 46px; border-radius: 11px; border: 1px solid var(--lg-field-border); background: var(--lg-field-bg);
  padding: 0 14px 0 42px; font-size: 14px; color: var(--lg-text); width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.cbui-login .form-control::placeholder{ color: var(--lg-muted); opacity: .8; }
.cbui-login .form-control:focus{ outline: none; border-color: var(--lg-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.cbui-login .password-field-wrap .form-control{ padding-right: 46px; }

.cbui-login__row{ display: flex; align-items: center; justify-content: space-between; margin: 2px 0 16px; }
.cbui-login__row label{ display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--lg-muted); cursor: pointer; margin: 0; user-select: none; }
.cbui-login__row input[type="checkbox"]{ width: 16px; height: 16px; accent-color: var(--lg-accent); cursor: pointer; }
.cbui-login__link{ font-size: 13px; color: var(--lg-accent); font-weight: 600; text-decoration: none; cursor: pointer; background: none; border: none; padding: 0; }
.cbui-login__link:hover{ text-decoration: underline; }

.cbui-login__btn{
  width: 100%; height: 47px; border: none; border-radius: 12px;
  background: var(--lg-accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .15s, transform .05s;
}
.cbui-login__btn:hover{ background: var(--lg-accent-strong); }
.cbui-login__btn:active{ transform: scale(.99); }
.cbui-login__btn .spin{ width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: spin .8s linear infinite; display: none; }
.cbui-login__btn.is-loading .spin{ display: inline-block; }
.cbui-login__btn.is-loading .arw{ display: none; }
.cbui-login__btn.is-loading{ opacity: .9; cursor: default; }

.cbui-login__err{ margin: 0 0 14px; }
.cbui-login__err ul{ margin: 0; padding: 9px 14px; list-style: none; border-radius: 10px; background: #FBE7E6; border: 1px solid #F3C0BE; color: #A3231F; font-size: 13px; }
.cbui-login__err li{ line-height: 1.5; }
.cbui-login__err.validation-summary-valid{ display: none; }

.cbui-login__cardfoot{ text-align: center; font-size: 11.5px; color: var(--lg-muted); margin-top: 16px; }

@media (max-width: 1050px){
  .cbui-login__brand{ flex-basis: 48%; max-width: 48%; }
  .cbui-login__hero{ opacity: .3; }
}
@media (max-width: 820px){
  .cbui-login{ height: 100vh; flex-direction: column; }
  .cbui-login__brand{ display: none; }
  .cbui-login__panel{ flex-basis: 100%; max-width: 100%; }
}
/* Pantallas de poca altura: permitir scroll interno de cada panel en vez de recortar (sin scroll de pagina) */
@media (max-height: 640px){
  .cbui-login__brand{ overflow-y: auto; justify-content: flex-start; }
}

/* ---------- Toggle de contraseña (icono ojo) ---------- */
.password-field-wrap { position: relative; }
.password-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer; padding: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lg-muted); border-radius: 8px; transition: color .15s, background .15s;
}
.password-toggle:hover { color: var(--lg-accent); background: rgba(37,99,235,.10); }
.password-toggle svg { display: block; }
.password-toggle .eye-off { display: none; }
.password-toggle.is-visible .eye-open { display: none; }
.password-toggle.is-visible .eye-off { display: block; }
#contrasena::-ms-reveal { display: none; }