/* Beumer · Auth (Bootstrap 5.3) · paleta y tipografía de beumergroup.com */
:root,
.chula-auth {
    --chula-ink: #00303E;
    --chula-ink-2: #0B4A5C;
    --chula-muted: #4E6872;
    --chula-sage: #EBEFF0;
    --chula-sage-line: #DDE3E5;
    --chula-panel: #F1F3F4;
    --chula-pink: #C2410C;
    --chula-blue: #009FE3;
    --chula-yellow: #FF5500;
    --chula-green: #66C72F;
    --chula-surface: #fff;
    --chula-field: #fff;
    --chula-on-ink: #fff;
    --chula-soft-line: rgba(0, 48, 62, .1);
    --chula-wave: rgba(0, 48, 62, .16);

    --bs-body-font-family: 'KlavikaBasic', 'Klavika', 'Titillium Web', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-color: var(--chula-ink);
    --bs-body-color-rgb: 0, 48, 62;
    --bs-secondary-color: var(--chula-muted);
    --bs-tertiary-color: #84979D;
    --bs-border-color: var(--chula-sage-line);
    --bs-border-radius: .75rem;
    --bs-border-radius-lg: .75rem;
    --bs-primary: var(--chula-ink);
    --bs-primary-rgb: 0, 48, 62;
    --bs-link-color: var(--chula-ink);
    --bs-link-color-rgb: 0, 48, 62;
    --bs-link-hover-color: var(--chula-muted);
    --bs-link-hover-color-rgb: 78, 104, 114;
    --bs-focus-ring-color: rgba(78, 104, 114, .18);
}

.chula-auth { -webkit-font-smoothing: antialiased; background: var(--chula-surface); }
.chula-auth a { text-decoration: none; }
.fw-bolder { font-weight: 800 !important; letter-spacing: -.02em; }

/* Formulario */
.auth-form-wrap { max-width: 380px; }
/* Logo: 86 px de alto en escritorio; en celular se reduce con el ancho de pantalla (≈ 48 px en un teléfono de 390 px) */
.auth-logo { height: clamp(40px, 12vw, 86px); width: auto; max-width: 100%; object-fit: contain; }
.form-label { display: block; font-size: .8125rem; font-weight: 700; margin-bottom: .375rem; }
.form-check-label { font-size: .875rem; }
.form-control-lg { font-size: .9375rem; min-height: 48px; border-radius: .75rem; background-color: var(--chula-field); }
.form-control:focus { border-color: var(--chula-muted); box-shadow: 0 0 0 .25rem var(--chula-sage); }
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--chula-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--chula-field) inset;
    transition: background-color 9999s ease-in-out 0s;
}
.form-control:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--chula-field) inset, 0 0 0 .25rem var(--chula-sage); }
.form-check-input:checked { background-color: var(--chula-ink); border-color: var(--chula-ink); }
.form-check-input:focus { border-color: var(--chula-muted); box-shadow: 0 0 0 .25rem var(--chula-sage); }

.auth-toggle-pw {
    position: absolute; top: 6px; right: 6px; height: 36px;
    color: var(--chula-muted); font-size: .75rem; font-weight: 700; border: 0; border-radius: .5rem;
}
.auth-toggle-pw:hover { background: var(--chula-panel); color: var(--chula-ink); }
.is-invalid ~ .auth-toggle-pw { right: 34px; }

.btn-primary {
    --bs-btn-bg: var(--chula-ink);
    --bs-btn-border-color: var(--chula-ink);
    --bs-btn-hover-bg: var(--chula-ink-2);
    --bs-btn-hover-border-color: var(--chula-ink-2);
    --bs-btn-active-bg: #00242F;
    --bs-btn-active-border-color: #00242F;
    --bs-btn-disabled-bg: var(--chula-ink);
    --bs-btn-disabled-border-color: var(--chula-ink);
    --bs-btn-color: var(--chula-on-ink);
    --bs-btn-hover-color: var(--chula-on-ink);
    --bs-btn-active-color: var(--chula-on-ink);
    --bs-btn-disabled-color: var(--chula-on-ink);
    --bs-btn-focus-shadow-rgb: 78, 104, 114;
    --bs-btn-font-weight: 700;
}
.btn-lg { --bs-btn-padding-y: .8rem; --bs-btn-font-size: .9375rem; --bs-btn-border-radius: .75rem; }

.alert-chula {
    --bs-alert-bg: #FFF1EA;
    --bs-alert-color: #A33A0B;
    --bs-alert-border-color: #FFD3BD;
    font-size: .8125rem; font-weight: 600; border-radius: .75rem;
}

/* Panel izquierdo */
.auth-aside { background: var(--chula-panel); border-radius: 1.5rem; overflow: hidden; }
.auth-dots { display: flex; gap: 6px; }
.auth-dots span { width: 8px; height: 8px; border-radius: 50%; }
.bg-pink { background: var(--chula-pink); }
.bg-blue { background: var(--chula-blue); }
.bg-yellow { background: var(--chula-yellow); }
.bg-green { background: var(--chula-green); }

.auth-badge {
    display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px;
    border-radius: 999px; background: rgba(255,255,255,.7); font-size: .75rem; font-weight: 700; color: #2B4F5B; white-space: nowrap;
}
.auth-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--chula-green); box-shadow: 0 0 0 3px rgba(102,199,47,.2); }

.auth-copy { max-width: 520px; }
.auth-title { font-size: clamp(2.125rem, 3.4vw, 3rem); line-height: 1.04; font-weight: 800; letter-spacing: -.035em; text-wrap: pretty; margin-bottom: .875rem; }
.auth-lead { font-size: .9375rem; line-height: 1.55; color: var(--chula-muted); }
.auth-overline { font-size: .6875rem; font-weight: 700; color: #6F868D; letter-spacing: .06em; text-transform: uppercase; }

.auth-waves { position: relative; min-height: 220px; border-top: 1px solid var(--chula-soft-line); border-bottom: 1px solid var(--chula-soft-line); overflow: hidden; }
.auth-waves svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.auth-waves path { fill: none; stroke: var(--chula-wave); stroke-width: 1; vector-effect: non-scaling-stroke; }
.auth-waves path.is-main { stroke: var(--chula-ink); stroke-width: 1.6; }
.auth-waves g { animation: chula-wave 26s linear infinite; }
.auth-waves g:nth-child(1) { animation-duration: 26s; animation-delay: -0s; }
.auth-waves g:nth-child(2) { animation-duration: 29s; animation-delay: -4s; }
.auth-waves g:nth-child(3) { animation-duration: 32s; animation-delay: -8s; }
.auth-waves g:nth-child(4) { animation-duration: 35s; animation-delay: -12s; }
.auth-waves g:nth-child(5) { animation-duration: 38s; animation-delay: -16s; }
.auth-waves g:nth-child(6) { animation-duration: 41s; animation-delay: -20s; }
.auth-waves g:nth-child(7) { animation-duration: 44s; animation-delay: -24s; }
.auth-waves g:nth-child(8) { animation-duration: 47s; animation-delay: -28s; }
.auth-waves g:nth-child(9) { animation-duration: 50s; animation-delay: -32s; }
@keyframes chula-wave { to { transform: translateX(-400px); } }
@media (prefers-reduced-motion: reduce) { .auth-waves g { animation: none; } }

.auth-stats { background: var(--chula-soft-line); border-radius: .875rem; overflow: hidden; gap: 1px; flex-wrap: nowrap; }
.auth-stats > div { background: var(--chula-panel); padding: 1rem 1.125rem; flex: 1 1 0; width: auto; }
.auth-stats strong { display: block; font-size: 1.25rem; font-weight: 800; }
.auth-stats span { display: block; font-size: .75rem; color: var(--chula-muted); margin-top: 2px; }

/* Switch de tema */
.theme-switch {
    position: fixed; top: 20px; right: 20px; z-index: 1030;
    width: 68px; height: 34px; padding: 0; border: 1px solid var(--chula-sage-line); border-radius: 999px;
    background: var(--chula-panel); display: flex; align-items: center; justify-content: space-around;
    color: var(--chula-muted); font-size: .875rem; cursor: pointer;
}
.theme-switch i { position: relative; z-index: 1; width: 26px; text-align: center; line-height: 1; transition: color .2s ease; }
.theme-switch-knob {
    position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
    background: var(--chula-surface); box-shadow: 0 1px 3px rgba(0, 48, 62, .18); transition: transform .2s ease;
}
.theme-switch[aria-checked="false"] .bi-sun-fill { color: var(--chula-yellow); }
.theme-switch[aria-checked="true"] .bi-moon-stars-fill { color: var(--chula-ink); }
.theme-switch[aria-checked="true"] .theme-switch-knob { transform: translateX(34px); }
.theme-switch:focus-visible { outline: 0; box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
@media (prefers-reduced-motion: reduce) { .theme-switch-knob, .theme-switch i { transition: none; } }

/* El switch queda oculto en las pantallas de acceso, pero se conserva en el HTML:
   el tema guardado (chula.theme) se sigue aplicando y chula-theme.js lo mantiene sincronizado.
   El cambio de modo está disponible en el menú del usuario dentro del panel. */
.theme-switch { display: none !important; }

/* Barra de desplazamiento del sitio: página, modales, tablas, menús y calendario */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background-color: #C8D2D5; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: #A9B7BB; }
*::-webkit-scrollbar-corner { background: transparent; }
[data-bs-theme="dark"]::-webkit-scrollbar-thumb, [data-bs-theme="dark"] *::-webkit-scrollbar-thumb { background-color: #2B4F5B; }
[data-bs-theme="dark"]::-webkit-scrollbar-thumb:hover, [data-bs-theme="dark"] *::-webkit-scrollbar-thumb:hover { background-color: #4E6872; }
/* Firefox: scrollbar-width no se hereda, por eso se aplica a cada elemento */
@supports (-moz-appearance: none) {
    * { scrollbar-width: thin; scrollbar-color: #C8D2D5 transparent; }
    [data-bs-theme="dark"], [data-bs-theme="dark"] * { scrollbar-color: #2B4F5B transparent; }
}

/* Modo oscuro */
:root[data-bs-theme="dark"],
[data-bs-theme="dark"] .chula-auth {
    --chula-ink: #EDF1F2;
    --chula-ink-2: #D3DBDE;
    --chula-muted: #95A6AB;
    --chula-sage: #00303E;
    --chula-sage-line: #083F4E;
    --chula-panel: #00242F;
    --chula-surface: #001B24;
    --chula-field: #00242F;
    --chula-on-ink: #001B24;
    --chula-soft-line: rgba(237, 241, 242, .1);
    --chula-wave: rgba(237, 241, 242, .14);

    --bs-body-bg: #001B24;
    --bs-body-color-rgb: 237, 241, 242;
    --bs-emphasis-color: var(--chula-ink);
    --bs-tertiary-color: #5F7880;
    --bs-secondary-bg: #00303E;
    --bs-tertiary-bg: #00242F;
    --bs-primary-rgb: 237, 241, 242;
    --bs-link-color-rgb: 237, 241, 242;
    --bs-link-hover-color-rgb: 169, 159, 149;
    --bs-focus-ring-color: rgba(237, 241, 242, .14);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-active-bg: #BFC9CC; --bs-btn-active-border-color: #BFC9CC; }
[data-bs-theme="dark"] .form-check-input:checked[type=checkbox] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23161412' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
[data-bs-theme="dark"] .alert-chula { --bs-alert-bg: rgba(255, 85, 0, .12); --bs-alert-color: #FF9F70; --bs-alert-border-color: rgba(255, 85, 0, .35); }
[data-bs-theme="dark"] .auth-badge { background: rgba(237, 241, 242, .06); color: var(--chula-muted); }
[data-bs-theme="dark"] .auth-overline { color: #6F868D; }
[data-bs-theme="dark"] .theme-switch-knob { background: #0A4456; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }

/* ─── Estilo Beumer (beumergroup.com): títulos en mayúsculas, peso medio ─── */
.auth-title { text-transform: uppercase; letter-spacing: .01em; font-weight: 700; }
/* ─── Botones estilo Beumer (beumergroup.com): esquinas rectas, naranja relleno → petróleo al pasar el cursor ─── */
.chula-auth .btn { --bs-btn-border-radius: 0; --bs-btn-font-weight: 600; letter-spacing: .01em; }
.chula-auth .btn-lg { --bs-btn-border-radius: 0; }
.chula-auth .btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: #FF5500; --bs-btn-border-color: #FF5500;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #00303E; --bs-btn-hover-border-color: #00303E;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #00242F; --bs-btn-active-border-color: #00242F;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #FF5500; --bs-btn-disabled-border-color: #FF5500;
    --bs-btn-focus-shadow-rgb: 255, 85, 0;
}