/**
 * Marca VARESO — azul navy, blanco, naranja
 * Diferencia el Aula Virtual del look DiagnoLav (índigo/violeta).
 */

:root {
    --vareso-navy: #0b2447;
    --vareso-navy-mid: #143a6b;
    --vareso-navy-soft: #1a4a82;
    --vareso-orange: #e87722;
    --vareso-orange-deep: #c45f12;
    --vareso-orange-soft: #fff4eb;
    --vareso-white: #ffffff;
    --vareso-surface: #f3f6fb;
    --vareso-ink: #0b2447;
    --vareso-muted: #5a6b82;
    --vareso-border: #c9d4e4;
    --vareso-radius: 8px;
    --vareso-radius-lg: 12px;
    --vareso-font: 'Outfit', 'Segoe UI', sans-serif;
    /* Media pantalla + barra de versión diminuta + safe-area */
    --vareso-scroll-end: calc(50dvh + 2.25rem + env(safe-area-inset-bottom, 0px));
    --vareso-scroll-end-fallback: calc(50vh + 2.25rem + env(safe-area-inset-bottom, 0px));
}

html, body, #app {
    font-family: var(--vareso-font);
    color: var(--vareso-ink);
    background-color: var(--vareso-surface);
}

/* Header app */
.app-header {
    background: linear-gradient(120deg, var(--vareso-navy) 0%, var(--vareso-navy-mid) 55%, #0e2f58 100%) !important;
    border-bottom: 3px solid var(--vareso-orange);
}

.app-header h1,
.app-brand-title {
    font-family: var(--vareso-font);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 1rem !important;
}

@media (min-width: 640px) {
    .app-brand-title {
        font-size: 1.35rem !important;
    }
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.app-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    display: block;
    object-fit: cover;
    background: #0b2447;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Solo el inset real del sistema (sin mínimo de 28px que dejaba hueco vacío) */
.app-chrome-sticky {
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--vareso-navy);
}
@media (min-width: 769px) {
    .app-chrome-sticky {
        padding-top: 0;
    }
}

.app-brand-sub {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-top: 2px;
}

/* Nav tabs */
nav.bg-white {
    border-bottom: 1px solid var(--vareso-border) !important;
}

nav button.border-b-2 {
    border-radius: 0;
}

/* Menú usuario */
.user-menu-container .bg-gradient-to-r {
    background-image: linear-gradient(120deg, var(--vareso-navy), var(--vareso-navy-mid)) !important;
}

/* Footer versión (tamaño/opacidad en index-modular.html) */
.app-version-bar {
    background: var(--vareso-navy) !important;
    border-top: 1px solid rgba(232, 119, 34, 0.35) !important;
}

/* Spinner */
.loading-spinner {
    border-top-color: var(--vareso-orange) !important;
}

/* Compra / badge tienda */
@keyframes vareso-buy-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232, 119, 34, 0.45); }
    50% { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(232, 119, 34, 0); }
}
.vareso-buy-pulse {
    background: var(--vareso-orange) !important;
    animation: vareso-buy-pulse 1.6s ease-in-out infinite;
}
.vareso-buy-pulse:hover {
    background: var(--vareso-orange-deep) !important;
}
.vareso-discount-badge {
    color: var(--vareso-orange-deep) !important;
}
.vareso-discount-badge .fa-arrow-right {
    color: var(--vareso-orange-deep) !important;
}

/* Utilidades de marca (pantallas Tailwind) */
.vareso-btn-primary {
    background: var(--vareso-orange);
    color: #fff;
    border-radius: var(--vareso-radius);
    font-weight: 700;
}
.vareso-btn-primary:hover {
    background: var(--vareso-orange-deep);
}
.vareso-btn-navy {
    background: var(--vareso-navy);
    color: #fff;
    border-radius: var(--vareso-radius);
    font-weight: 700;
}
.vareso-link {
    color: var(--vareso-navy);
    font-weight: 600;
}
.vareso-link:hover {
    color: var(--vareso-orange);
}
.vareso-soft-panel {
    background: var(--vareso-orange-soft);
    border: 1px solid #f0d2b8;
    border-radius: var(--vareso-radius-lg);
}
.vareso-info-panel {
    background: #e8eef6;
    border: 1px solid var(--vareso-border);
    border-radius: var(--vareso-radius-lg);
    color: var(--vareso-navy);
}

/* ------------------------------------------------------------------
   Remap legado DiagnoLav (indigo / purple / blue de acento) → Vareso
   Así Login, Admin, Cursos y modales quedan congruentes sin reescribir
   cada clase Tailwind a mano.
   ------------------------------------------------------------------ */
.bg-indigo-600,
.bg-indigo-700,
.bg-purple-600,
.bg-purple-700,
.bg-blue-600,
.bg-blue-700 {
    background-color: var(--vareso-orange) !important;
}
.hover\:bg-indigo-600:hover,
.hover\:bg-indigo-700:hover,
.hover\:bg-purple-600:hover,
.hover\:bg-purple-700:hover,
.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover {
    background-color: var(--vareso-orange-deep) !important;
}

.text-indigo-500,
.text-indigo-600,
.text-indigo-700,
.text-indigo-800,
.text-purple-600,
.text-purple-700,
.text-purple-800,
.text-blue-600,
.text-blue-700,
.text-blue-800 {
    color: var(--vareso-navy) !important;
}
.hover\:text-indigo-800:hover,
.hover\:text-blue-800:hover,
.hover\:text-purple-800:hover {
    color: var(--vareso-orange) !important;
}

.border-indigo-300,
.border-indigo-400,
.border-indigo-500,
.border-indigo-600,
.border-purple-300,
.border-purple-500,
.border-blue-300,
.border-blue-400,
.border-blue-500 {
    border-color: var(--vareso-orange) !important;
}

.bg-indigo-50,
.bg-indigo-50\/40,
.bg-indigo-100,
.bg-purple-50,
.bg-purple-100,
.bg-blue-50,
.bg-blue-100 {
    background-color: var(--vareso-orange-soft) !important;
}

.border-indigo-100,
.border-indigo-200,
.border-blue-200,
.border-purple-200 {
    border-color: #f0d2b8 !important;
}

.ring-indigo-500,
.ring-blue-500,
.ring-purple-500,
.focus\:ring-indigo-500:focus,
.focus\:ring-blue-500:focus,
.focus\:ring-purple-500:focus {
    --tw-ring-color: var(--vareso-orange) !important;
}
.focus\:border-blue-500:focus,
.focus\:border-indigo-500:focus {
    border-color: var(--vareso-orange) !important;
}

.from-indigo-500,
.from-indigo-600,
.from-blue-500,
.from-blue-600,
.from-purple-500 {
    --tw-gradient-from: #0b2447 var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(11 36 71 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-purple-600,
.to-purple-700,
.to-indigo-600,
.to-blue-600,
.to-blue-700 {
    --tw-gradient-to: #143a6b var(--tw-gradient-to-position) !important;
}

/* ------------------------------------------------------------------
   Margen inferior de scroll (todas las pantallas viven dentro de <main>)
   ~media pantalla + barra de versión fija + safe-area.
   ------------------------------------------------------------------ */
main,
main.container {
    padding-bottom: var(--vareso-scroll-end-fallback) !important;
    padding-bottom: var(--vareso-scroll-end) !important;
    box-sizing: border-box;
}

/* Por si alguna pantalla scrollea en contenedor propio */
.student-dashboard,
.notes-screen-container,
.material-modal-content {
    scroll-padding-bottom: var(--vareso-scroll-end);
}

/* Perfil / modales con scroll interno */
.fixed .overflow-y-auto,
.fixed [class*="overflow-y-auto"] {
    padding-bottom: 30dvh;
    padding-bottom: 30vh;
}

/* Login */
.login-screen {
    background: linear-gradient(145deg, #0b2447 0%, #143a6b 48%, #0e2f58 100%) !important;
    font-family: var(--vareso-font);
}
.login-screen .login-brand-title {
    font-family: var(--vareso-font);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vareso-navy);
}
.login-screen .login-card {
    border-top: 4px solid var(--vareso-orange);
}

/* Tabs / pills activos genéricos en admin */
button.bg-indigo-600,
a.bg-indigo-600 {
    background-color: var(--vareso-orange) !important;
}