/* ========================================================================== Tipografía — Inter (variable, autohospedada, cubre pesos 100-900) ========================================================================== */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('vendor/fonts/inter-var.woff2') format('woff2-variations'), url('vendor/fonts/inter-var.woff2') format('woff2'); } /* ========================================================================== Tokens de diseño ========================================================================== */ :root { /* Marca — escala secuencial azul validada (una sola familia de matiz) */ --sl-primary-900: #0d366b; --sl-primary-700: #184f95; --sl-primary-600: #1c5cab; --sl-primary-500: #256abf; --sl-primary-450: #2a78d6; --sl-primary-400: #3987e5; --sl-primary-300: #6da7ec; --sl-primary-200: #9ec5f4; --sl-primary-100: #cde2fb; --sl-primary-50: #eff6ff; /* Estado (fijo, no se reutiliza para series/categorías) */ --sl-good: #0ca30c; --sl-good-text: #006300; --sl-good-bg: #e6f7e6; --sl-warning: #fab219; --sl-warning-text: #92620a; --sl-warning-bg: #fef3d9; --sl-serious: #ec835a; --sl-critical: #d03b3b; --sl-critical-text: #a52424; --sl-critical-bg: #fbe8e8; /* Superficies y tinta */ --sl-page: #f4f6fb; --sl-surface: #ffffff; --sl-surface-alt: #fafbfd; --sl-ink: #16181d; --sl-ink-secondary: #565b66; --sl-ink-muted: #8b909c; --sl-border: #e6e9f0; --sl-border-strong: #d7dbe6; /* Geometría */ --sl-radius-sm: 8px; --sl-radius: 14px; --sl-radius-lg: 20px; --sl-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06); --sl-shadow: 0 2px 10px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04); --sl-shadow-lg: 0 12px 32px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06); } /* Tema oscuro — se activa con data-bs-theme="dark" en (mismo mecanismo nativo de Bootstrap 5.3, así sus propios componentes también cambian de color automáticamente). Los matices de marca/estado se mantienen; solo cambian las superficies y la tinta. */ [data-bs-theme="dark"] { --sl-page: #12151c; --sl-surface: #1b1f28; --sl-surface-alt: #212633; --sl-ink: #e8eaf0; --sl-ink-secondary: #a7adbb; --sl-ink-muted: #7d8492; --sl-border: #2b3040; --sl-border-strong: #3a4155; --sl-primary-50: #16233b; --sl-good-bg: #123420; --sl-good-text: #4ade80; --sl-warning-bg: #3a2c0d; --sl-warning-text: #fbbf24; --sl-critical-bg: #3a1a1a; --sl-critical-text: #f87171; --sl-shadow: 0 2px 10px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25); --sl-shadow-lg: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3); } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a5268; } * { scrollbar-width: thin; scrollbar-color: var(--sl-border-strong) transparent; } html, body { height: 100%; } body { background-color: var(--sl-page); color: var(--sl-ink); font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-feature-settings: "cv05", "cv11"; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { letter-spacing: -0.01em; } a { color: var(--sl-primary-500); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--sl-border-strong); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: #b7bdcc; } :focus-visible { outline: 2px solid var(--sl-primary-400); outline-offset: 2px; } /* ========================================================================== Botones ========================================================================== */ .btn-sl-primary { background: linear-gradient(135deg, var(--sl-primary-700) 0%, var(--sl-primary-450) 100%); color: #fff; border: none; box-shadow: 0 1px 2px rgba(13, 54, 107, .16); transition: filter .15s ease, transform .05s ease, box-shadow .15s ease; } .btn-sl-primary:hover, .btn-sl-primary:focus { filter: brightness(1.07); color: #fff; box-shadow: 0 4px 12px rgba(13, 54, 107, .22); } .btn-sl-primary:active { transform: translateY(1px); } .btn-sl-primary:disabled { filter: grayscale(.3); opacity: .65; } .btn-sl-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff; border: none; box-shadow: 0 1px 2px rgba(146, 98, 10, .18); transition: filter .15s ease, box-shadow .15s ease; } .btn-sl-warning:hover, .btn-sl-warning:focus { filter: brightness(1.05); color: #fff; box-shadow: 0 4px 12px rgba(146, 98, 10, .24); } .badge-warning-soft { background: var(--sl-warning-bg); color: var(--sl-warning-text); } .btn-outline-primary { --bs-btn-color: var(--sl-primary-600); --bs-btn-border-color: var(--sl-primary-300); --bs-btn-hover-bg: var(--sl-primary-450); --bs-btn-hover-border-color: var(--sl-primary-450); --bs-btn-active-bg: var(--sl-primary-500); --bs-btn-active-border-color: var(--sl-primary-500); } .btn, .form-control, .form-select { border-radius: var(--sl-radius-sm); } .btn-link { text-decoration: none; font-weight: 500; } .btn-link:hover { text-decoration: underline; } /* ========================================================================== Formularios ========================================================================== */ .form-control, .form-select { border-color: var(--sl-border-strong); } .form-control:focus, .form-select:focus { border-color: var(--sl-primary-400); box-shadow: 0 0 0 3px rgba(57, 135, 229, .15); } .form-label { color: var(--sl-ink-secondary); } /* ========================================================================== Tarjetas ========================================================================== */ .sl-card { background: var(--sl-surface); border-radius: var(--sl-radius); box-shadow: var(--sl-shadow); border: 1px solid var(--sl-border); } button.sl-card { transition: box-shadow .18s ease, transform .12s ease, border-color .18s ease; } button.sl-card:hover { box-shadow: var(--sl-shadow-lg); transform: translateY(-2px); border-color: var(--sl-primary-200); } button.sl-card:active { transform: translateY(0); } /* Íconos circulares para tarjetas de estadísticas (dashboard, saldos, etc.) */ .icon-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.05rem; } .icon-circle-lg { width: 56px; height: 56px; font-size: 1.5rem; } .icon-circle-blue { background: var(--sl-primary-50); color: var(--sl-primary-500); } .icon-circle-good { background: var(--sl-good-bg); color: var(--sl-good-text); } .icon-circle-warning { background: var(--sl-warning-bg); color: var(--sl-warning-text); } .icon-circle-critical { background: var(--sl-critical-bg); color: var(--sl-critical-text); } .icon-circle-violet { background: #ede9fe; color: #5b3ea7; } /* ========================================================================== Pantalla de login ========================================================================== */ #loginScreen { min-height: 100vh; position: relative; background: radial-gradient(1200px 600px at 15% -10%, #3987e5 0%, transparent 60%), radial-gradient(1000px 500px at 110% 110%, #0d366b 0%, transparent 55%), linear-gradient(160deg, var(--sl-primary-700) 0%, var(--sl-primary-900) 100%); overflow: hidden; } #loginScreen::before, #loginScreen::after { content: ''; position: absolute; border-radius: 50%; filter: blur(2px); background: rgba(255, 255, 255, .06); pointer-events: none; } #loginScreen::before { width: 420px; height: 420px; top: -140px; right: -120px; } #loginScreen::after { width: 280px; height: 280px; bottom: -100px; left: -80px; } #loginScreen .sl-card { position: relative; z-index: 1; box-shadow: var(--sl-shadow-lg); border: 1px solid rgba(255, 255, 255, .5); animation: sl-rise .35s ease both; } .sl-brand-icon { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--sl-primary-700) 0%, var(--sl-primary-450) 100%); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; box-shadow: 0 2px 8px rgba(13, 54, 107, .25); } @keyframes sl-rise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ========================================================================== Layout principal / Sidebar ========================================================================== */ #sidebar { width: 264px; min-height: 100vh; background: var(--sl-surface); border-right: 1px solid var(--sl-border); transition: transform .25s ease; } /* El sidebar es un flex-column (header / nav / pie con Cambiar Contraseña + Cerrar Sesión). El nav debe poder encogerse por debajo de su alto natural para que el pie nunca quede empujado fuera de la pantalla en celulares bajos — algunos navegadores móviles no infieren esto solos aunque el nav tenga overflow-auto, así que se fuerza explícito. */ #sidebar > nav { min-height: 0; flex-shrink: 1; } #sidebar > div:first-child, #sidebar > div:last-child { flex-shrink: 0; } .sidebar-item { display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem; border-radius: var(--sl-radius-sm); color: var(--sl-ink-secondary); text-decoration: none; border-left: 3px solid transparent; background: none; width: 100%; text-align: left; border-top: none; border-right: none; border-bottom: none; font-size: .925rem; font-weight: 500; transition: background .12s ease, color .12s ease; } .sidebar-item i { font-size: 1.05rem; width: 20px; text-align: center; color: var(--sl-ink-muted); transition: color .12s ease; } .sidebar-item:hover { background: var(--sl-primary-50); color: var(--sl-primary-700); } .sidebar-item:hover i { color: var(--sl-primary-500); } .sidebar-item.active { background: var(--sl-primary-50); border-left-color: var(--sl-primary-450); color: var(--sl-primary-700); font-weight: 600; } .sidebar-item.active i { color: var(--sl-primary-500); } main { background: var(--sl-page); } @media (max-width: 767.98px) { #sidebar { position: fixed; /* top:0 + bottom:0 (en vez de height:100vh) para que el alto se calcule contra el espacio real visible en pantalla, no contra el viewport "ideal" que usa 100vh en móvil (que mide como si la barra de direcciones estuviera oculta). Esta técnica funciona en cualquier navegador, viejo o nuevo, sin depender de que soporte la unidad dvh — con muchos ítems de menú, 100vh dejaba "Cerrar Sesión" literalmente fuera de la pantalla y sin forma de alcanzarlo (el elemento es fixed, no hace scroll con la página). */ top: 0; bottom: 0; left: 0; z-index: 1040; transform: translateX(-100%); box-shadow: var(--sl-shadow-lg); } #sidebar.show { transform: translateX(0); } } #mobileMenuBtn { border-radius: var(--sl-radius-sm); border: 1px solid var(--sl-border); } /* Bloquea el scroll del fondo mientras el sidebar móvil está abierto */ body.sl-sidebar-open { overflow: hidden; } /* El botón de hamburguesa vive fijo en la esquina superior izquierda, independiente del sidebar — con el sidebar abierto queda montado encima de su logo/encabezado. Se oculta mientras está abierto (para cerrar ya existe el fondo oscuro/overlay, que se cierra con un toque afuera). */ body.sl-sidebar-open #mobileMenuBtn { display: none; } /* Barras de Ingresos/Morosidad por grado en el Dashboard: ancho fijo en escritorio, se reduce en móvil para que la barra no quede aplastada. */ .sl-grade-label { width: 110px; flex-shrink: 0; } .sl-grade-value { width: 90px; flex-shrink: 0; } @media (max-width: 400px) { .sl-grade-label { width: 72px; } .sl-grade-value { width: 64px; } } /* ========================================================================== Tablas ========================================================================== */ .table { --bs-table-color: var(--sl-ink); --bs-table-bg: transparent; font-size: .925rem; } .table > thead > tr > th { text-transform: uppercase; font-size: .7rem; letter-spacing: .04em; font-weight: 700; color: var(--sl-ink-muted); border-bottom-width: 1px; border-color: var(--sl-border); background: var(--sl-surface-alt); } /* Botones de acción en filas de tabla (Editar/Anular/Ver...): texto solo con suficiente padding para un objetivo táctil decente en móvil, sin verse pesado en escritorio. */ .btn-table-action { padding: .3rem .55rem; font-size: .8125rem; border-radius: var(--sl-radius-sm); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; } .btn-table-action:hover { background: var(--sl-primary-50); } .btn-table-action.text-danger:hover { background: var(--sl-critical-bg); } /* Buscador de estudiante con autocompletar (Pagos, y cualquier otro campo que necesite elegir un estudiante entre cientos sin usar un