/* ══════════════════════════════════════════════════════════════
   admin-theme.css
   Tema institucional Colegio Aragón para las pantallas construidas
   sobre AdminLTE 4 / Bootstrap 5 (login, recuperar clave y panel
   de administración). Se carga después de adminlte.min.css y
   retoma la paleta ya usada en el sitio público (styles.css,
   navbar.css, home.css) para que ambos mundos se sientan como
   una sola marca.

   Modo claro/oscuro: AdminLTE 4 ya trae su propio color-mode manager
   (localStorage['lte-theme'] + [data-bs-theme] en <html>), que sigue
   la preferencia del sistema apenas carga adminlte.min.js. Este
   archivo define, para cada variable institucional, un valor para
   modo claro (:root) y uno para modo oscuro ([data-bs-theme=dark]),
   así todo lo que reference esas variables se adapta solo. Las
   variables --bs-* que Bootstrap ya adapta por su cuenta (--bs-body-bg,
   --bs-card-bg, --bs-border-color, etc.) no se tocan: solo se
   redefinen acá las que este archivo introduce o sobrescribe.
══════════════════════════════════════════════════════════════ */

:root {
    /* Paleta institucional (fija, no cambia con el tema) */
    --aragon-navy-900: #07193d;
    --aragon-navy-800: #09142c;
    --aragon-navy-700: #0a1f45;
    --aragon-navy-600: #0c2b66;
    --aragon-navy-500: #1a3d7c;
    --aragon-navy-300: #9db4e8;
    --aragon-gold-600: #c49340;
    --aragon-gold-500: #dca84d;
    --aragon-gold-300: #ffd76d;

    /* Tokens semánticos — valores de modo CLARO */
    --aragon-bg: #f5f7fc;
    --aragon-bg-soft: #eef2f8;
    --aragon-border: #e2e8f5;
    --aragon-text: var(--aragon-navy-900);
    --aragon-text-muted: #5a6a85;
    --aragon-link: var(--aragon-navy-600);
    --aragon-link-rgb: 12, 43, 102;
    --aragon-shadow-rgb: 7, 25, 61;

    /* Bootstrap: color "primary" del sistema -> azul institucional.
       Estas variables ya son usadas con var() por las utilidades
       .text-bg-primary / .bg-primary / .border-primary / enlaces,
       así que un solo cambio aquí retiñe todo lo que las use. */
    --bs-primary: var(--aragon-navy-600);
    --bs-primary-rgb: 12, 43, 102;
    --bs-primary-text-emphasis: var(--aragon-navy-900);
    --bs-primary-bg-subtle: var(--aragon-bg-soft);
    --bs-primary-border-subtle: #b9c6e0;

    --bs-link-color: var(--aragon-link);
    --bs-link-color-rgb: var(--aragon-link-rgb);
    --bs-link-hover-color: var(--aragon-gold-600);
    --bs-link-hover-color-rgb: 196, 147, 64;

    --bs-focus-ring-color: rgba(220, 168, 77, .35);

    --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Un puntito más de redondeo en toda la app: botones, badges,
       cards, inputs, paginación... todos referencian esta variable. */
    --bs-border-radius-sm: .45rem;
    --bs-border-radius: .6rem;
    --bs-border-radius-lg: .85rem;
    --bs-border-radius-xl: 1rem;
}

/* Tokens semánticos — valores de modo OSCURO.
   El propio adminlte.min.js pone data-bs-theme="dark" en <html> según
   localStorage o la preferencia del sistema; acá solo redefinimos los
   tokens institucionales para que todo lo que los usa quede legible. */
[data-bs-theme=dark] {
    --aragon-bg: #0a1324;
    --aragon-bg-soft: #111b32;
    --aragon-border: #263151;
    --aragon-text: #eef2fb;
    --aragon-text-muted: #93a0c2;
    --aragon-link: var(--aragon-navy-300);
    --aragon-link-rgb: 157, 180, 232;
    --aragon-shadow-rgb: 0, 0, 0;

    --bs-primary-text-emphasis: var(--aragon-navy-300);
    --bs-primary-border-subtle: #2c3c66;
}

/* !important en el <body>: la utilidad .bg-body-tertiary de Bootstrap
   define su background-color con !important, así que sin esto el body
   se queda con el gris "tertiary" de Bootstrap en vez del navy/aragon-bg
   institucional — dejando .app-content-header (transparente, entre el
   navbar y .app-content) con un color de fondo distinto al del resto
   del panel. */
body.bg-body-tertiary {
    background-color: var(--aragon-bg) !important;
}

.app-content {
    background-color: var(--aragon-bg);
}

/* ══════════════════════════════════════
   Enlaces y foco
══════════════════════════════════════ */

.form-control:focus,
.form-select:focus {
    border-color: var(--aragon-navy-500);
    box-shadow: 0 0 0 .2rem rgba(220, 168, 77, .25);
}

.form-check-input:checked {
    background-color: var(--aragon-navy-600);
    border-color: var(--aragon-navy-600);
}

.form-check-input:focus {
    border-color: var(--aragon-navy-500);
    box-shadow: 0 0 0 .2rem rgba(220, 168, 77, .25);
}

.form-switch .form-check-input:checked {
    background-color: var(--aragon-navy-600);
    border-color: var(--aragon-navy-600);
}

/* ══════════════════════════════════════
   Botones
══════════════════════════════════════ */

.btn {
    font-weight: 600;
    letter-spacing: .1px;
}

.btn-primary {
    --bs-btn-color: var(--aragon-navy-900);
    --bs-btn-bg: var(--aragon-gold-500);
    --bs-btn-border-color: var(--aragon-gold-500);
    --bs-btn-hover-color: var(--aragon-navy-900);
    --bs-btn-hover-bg: var(--aragon-gold-300);
    --bs-btn-hover-border-color: var(--aragon-gold-300);
    --bs-btn-active-color: var(--aragon-navy-900);
    --bs-btn-active-bg: var(--aragon-gold-600);
    --bs-btn-active-border-color: var(--aragon-gold-600);
    --bs-btn-disabled-color: var(--aragon-navy-900);
    --bs-btn-disabled-bg: var(--aragon-gold-500);
    --bs-btn-disabled-border-color: var(--aragon-gold-500);
    --bs-btn-focus-shadow-rgb: 220, 168, 77;
    background-image: linear-gradient(135deg, var(--aragon-gold-500), var(--aragon-gold-300));
    border: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(220, 168, 77, .4);
}

.btn-outline-primary {
    --bs-btn-color: var(--aragon-link);
    --bs-btn-border-color: var(--aragon-link);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--aragon-navy-600);
    --bs-btn-hover-border-color: var(--aragon-navy-600);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--aragon-navy-700);
    --bs-btn-active-border-color: var(--aragon-navy-700);
    --bs-btn-focus-shadow-rgb: var(--aragon-link-rgb);
}

.btn-outline-secondary {
    --bs-btn-color: var(--aragon-link);
    --bs-btn-border-color: var(--aragon-border);
    --bs-btn-hover-color: var(--aragon-text);
    --bs-btn-hover-bg: var(--aragon-bg-soft);
    --bs-btn-hover-border-color: var(--aragon-link);
    --bs-btn-active-color: var(--aragon-text);
    --bs-btn-active-bg: var(--aragon-bg-soft);
    --bs-btn-active-border-color: var(--aragon-link);
}

.btn-outline-danger,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-info {
    --bs-btn-focus-shadow-rgb: 220, 168, 77;
}

/* ══════════════════════════════════════
   Badges, chips de estado y utilidades
   "primary" (rebautizadas al azul marca)
══════════════════════════════════════ */

.badge {
    --bs-badge-border-radius: 50rem;
    font-weight: 600;
    letter-spacing: .2px;
}

.text-bg-primary,
.bg-primary {
    --lte-card-variant-bg: var(--aragon-navy-600);
    --lte-card-variant-bg-rgb: 12, 43, 102;
    --lte-card-variant-color: #fff;
}

/* ══════════════════════════════════════
   Tablas
══════════════════════════════════════ */

.table > thead {
    --bs-table-color: var(--aragon-text);
    --bs-table-bg: var(--aragon-bg-soft);
}

.table > thead th {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--aragon-text-muted);
    border-bottom-width: 1px;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgba(220, 168, 77, .08);
}

/* ══════════════════════════════════════
   Paginación y dropdowns
══════════════════════════════════════ */

.page-item.active .page-link {
    background-color: var(--aragon-navy-600);
    border-color: var(--aragon-navy-600);
}

.page-link:focus {
    box-shadow: 0 0 0 .2rem rgba(220, 168, 77, .25);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--aragon-navy-600);
    --bs-dropdown-link-hover-bg: var(--aragon-bg-soft);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 12px 28px rgba(var(--aragon-shadow-rgb), .12);
}

/* ══════════════════════════════════════
   Alertas
══════════════════════════════════════ */

.alert {
    border-width: 0 0 0 4px;
    box-shadow: 0 2px 10px rgba(var(--aragon-shadow-rgb), .05);
}

/* ══════════════════════════════════════
   Cards
══════════════════════════════════════ */

.card {
    border: 1px solid var(--aragon-border);
    box-shadow: 0 2px 14px rgba(var(--aragon-shadow-rgb), .06);
}

.card-header {
    background-color: var(--aragon-bg-soft);
    font-weight: 600;
    color: var(--aragon-text);
}

.card-title {
    color: var(--aragon-text);
}

/* info-box / small-box (paneles del dashboard) */
.info-box,
.small-box {
    border: 1px solid var(--aragon-border);
    transition: transform .2s ease, box-shadow .2s ease;
}

.info-box:hover,
.small-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(var(--aragon-shadow-rgb), .12);
}

.info-box-text {
    color: var(--aragon-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .5px;
}

.info-box-number {
    color: var(--aragon-text);
    font-weight: 700;
}

/* ══════════════════════════════════════
   Encabezado de página (app-content-header)
══════════════════════════════════════ */

.app-content-header h1 {
    position: relative;
    color: var(--aragon-text);
    font-weight: 700;
    padding-left: 14px;
    border-left: 4px solid var(--aragon-gold-500);
}

/* ══════════════════════════════════════
   Topbar (app-header)
══════════════════════════════════════ */

.app-header {
    border-bottom: 3px solid var(--aragon-gold-500);
    box-shadow: 0 2px 10px rgba(var(--aragon-shadow-rgb), .06);
}

.app-header .nav-link {
    color: var(--aragon-text);
}

.app-header .nav-link:hover,
.app-header .nav-link:focus {
    color: var(--aragon-gold-600);
}

.app-header .user-menu .nav-link span {
    font-weight: 600;
    color: var(--aragon-text);
}

/* ══════════════════════════════════════
   Botón de tema claro/oscuro
══════════════════════════════════════ */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 1px solid var(--aragon-border);
    border-radius: 50%;
    background-color: var(--aragon-bg-soft);
    color: var(--aragon-text);
    font-size: 1.05rem;
    line-height: 1;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: var(--aragon-gold-600);
    border-color: var(--aragon-gold-500);
    transform: translateY(-1px);
}

.theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(220, 168, 77, .35);
}

.theme-toggle__icon {
    pointer-events: none;
}

html[data-bs-theme="dark"] .theme-toggle__icon--dark,
html:not([data-bs-theme="dark"]) .theme-toggle__icon--light {
    display: none;
}

/* En el layout de auth no hay topbar: el botón queda flotando en la
   esquina superior derecha sobre el fondo navy de .login-page. */
.theme-toggle--floating {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1050;
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
    backdrop-filter: blur(4px);
}

.theme-toggle--floating:hover,
.theme-toggle--floating:focus-visible {
    background-color: rgba(255, 255, 255, .18);
    color: var(--aragon-gold-300);
    border-color: rgba(255, 255, 255, .4);
}

/* ══════════════════════════════════════
   Sidebar
══════════════════════════════════════ */

.app-sidebar {
    --lte-sidebar-hover-bg: rgba(255, 255, 255, .08);
    --lte-sidebar-color: rgba(255, 255, 255, .75);
    --lte-sidebar-hover-color: #fff;
    --lte-sidebar-active-color: var(--aragon-navy-900);
    --lte-sidebar-menu-active-bg: var(--aragon-gold-500);
    --lte-sidebar-menu-active-color: var(--aragon-navy-900);
    --lte-sidebar-submenu-bg: transparent;
    --lte-sidebar-submenu-color: rgba(255, 255, 255, .65);
    --lte-sidebar-submenu-hover-color: #fff;
    --lte-sidebar-submenu-hover-bg: rgba(255, 255, 255, .08);
    --lte-sidebar-submenu-active-color: var(--aragon-gold-300);
    --lte-sidebar-submenu-active-bg: rgba(255, 255, 255, .06);
    --lte-sidebar-header-color: rgba(255, 255, 255, .45);
    background: linear-gradient(180deg, var(--aragon-navy-900) 0%, var(--aragon-navy-500) 100%);
}

/* Modo oscuro: el degradado de modo claro sube hasta navy-500 (más
   brillante) para destacar sobre un fondo claro; contra el fondo casi
   negro (--aragon-bg oscuro) del resto del panel se ve desubicado, así
   que acá se oscurece a navy-900/800 para integrarse. El <aside> trae
   data-bs-theme="dark" fijo (texto claro en ambos modos), por eso esta
   variante se activa por el tema real de la página (<html>), no por ese
   atributo del propio sidebar. */
html[data-bs-theme=dark] .app-sidebar {
    background: linear-gradient(180deg, var(--aragon-navy-900) 0%, var(--aragon-navy-800) 100%);
}

.app-sidebar .sidebar-brand {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.app-sidebar .brand-image {
    box-shadow: 0 0 0 2px rgba(220, 168, 77, .6);
}

.app-sidebar .brand-text {
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .2px;
}

#sidebar-search-input {
    background-color: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .15) !important;
    color: #fff !important;
}

#sidebar-search-input::placeholder {
    color: rgba(255, 255, 255, .5) !important;
}

#sidebar-search-input:focus {
    border-color: var(--aragon-gold-500) !important;
    box-shadow: 0 0 0 .2rem rgba(220, 168, 77, .25) !important;
}

.sidebar-menu .nav-header {
    color: var(--aragon-gold-300);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: .85;
    padding-top: 1.1rem;
}

.sidebar-menu .nav-link.active {
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--aragon-navy-900);
}

.sidebar-menu .nav-treeview .nav-link.active {
    color: var(--aragon-gold-300);
    font-weight: 600;
}

.app-sidebar .nav-badge {
    box-shadow: 0 0 0 2px rgba(7, 25, 61, .4);
}

/* ══════════════════════════════════════
   Footer del panel
══════════════════════════════════════ */

.app-footer {
    color: var(--aragon-text-muted);
    font-size: .85rem;
}

/* ══════════════════════════════════════
   Login / recuperar / restablecer clave
══════════════════════════════════════ */

.login-page {
    background: radial-gradient(circle at 15% 20%, rgba(220, 168, 77, .08), transparent 45%),
                linear-gradient(150deg, var(--aragon-navy-900) 0%, var(--aragon-navy-600) 55%, var(--aragon-navy-800) 100%);
    padding: 24px 16px;
}

.login-logo a {
    color: #fff !important;
}

.login-logo img {
    box-shadow: 0 0 0 3px rgba(220, 168, 77, .7);
}

.login-logo span {
    color: #fff !important;
}

.login-box .card {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(var(--aragon-shadow-rgb), .35);
}

.login-box .card::before {
    content: '';
    display: block;
    height: 5px;
    background: linear-gradient(90deg, var(--aragon-gold-600), var(--aragon-gold-300));
}

.login-card-body {
    padding: 2.25rem 2rem;
}

.login-card-body h1 {
    color: var(--aragon-text);
    font-weight: 700;
}

.login-box-msg {
    color: var(--aragon-text-muted);
    padding-bottom: 1.25rem;
}

.login-card-body a {
    color: var(--aragon-link);
    font-weight: 600;
}

.login-card-body a:hover {
    color: var(--aragon-gold-600);
}

.login-card-body .btn-primary {
    padding: .65rem 1rem;
    font-size: 1rem;
}