/* /assets/css/theme.css ═══════════════════════════════════════════════════════════════════════════════════════════════ EL TEMA — la ÚNICA fuente de colores y tipografías de toda la app. ═══════════════════════════════════════════════════════════════════════════════════════════════ ★★ ESTE ARCHIVO ES EL MODELO QUE VA A LEER EL CONSTRUCTOR DE ESTILOS. El constructor no se construye todavía, pero lo que se define acá determina QUÉ VA A PODER PEDIR: si un color queda escrito a mano en una regla, el constructor no lo alcanza nunca. ── LO QUE HABÍA (medido el 24/08/2026) ────────────────────────────────────────────────────── 2.094 colores hex a mano · 264 únicos · 790 usos de var() · 3 `:root` que NO coincidían (`--text-dark` era #2c3e50 en admin y #2d3748 en los otros dos; lo mismo `--border`). El mismo nombre daba un color distinto según el portal. ═══════════════════════════════════════════════════════════════════════════════════════════════ */ :root { /* ═══════════════════════════════════════════════════════════════════════════════════════════ 1 · LA PALETA — 13 items, 16 valores ═══════════════════════════════════════════════════════════════════════════════════════════ Son 13 los que el constructor pregunta; 16 los valores, porque los tres items de TEXTO van en par (claro y oscuro) y cuentan como uno cada uno. ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* ── 1-3 · LOS TRES DE MARCA ───────────────────────────────────────────────────────────── */ --principal: #667eea; --secundario: #764ba2; --terciario: #3182ce; /* ── 4-7 · LOS CUATRO FONDOS ───────────────────────────────────────────────────────────── */ --fondo-claro-1: #f4f7f6; /* el fondo de página */ --fondo-claro-2: #ffffff; /* tarjetas, modales, tablas */ --fondo-oscuro-1: #2d3748; --fondo-oscuro-2: #1a202c; /* ── 8-10 · EL TEXTO, SIEMPRE EN PAR ───────────────────────────────────────────────────── */ /* ⚠️ CLARO = para escribir SOBRE fondo oscuro. OSCURO = para escribir SOBRE fondo claro. El nombre dice CÓMO ES EL COLOR, no dónde va. Ver la sección 2: quién elige es el fondo. */ --titulo-claro: #ffffff; --titulo-oscuro: #2d3748; --subtitulo-claro: #e2e8f0; --subtitulo-oscuro: #4a5568; --texto-claro: #cbd5e0; --texto-oscuro: #718096; /* ── 11-13 · LOS TRES ESPECIALES ───────────────────────────────────────────────────────── */ /* ★ Existen para que cada empresa los use como quiera. NO se les pone un significado acá. Los valores de abajo son sólo un default razonable para que nada se vea roto sin configurar. */ --especial-1: #28a745; --especial-2: #dc3545; --especial-3: #e67e22; /* ═══════════════════════════════════════════════════════════════════════════════════════════ ★ EL MODO DE MARCA — degradé o sólido. NO ES UN COLOR: ES UN MODO. ═══════════════════════════════════════════════════════════════════════════════════════════ Si es DEGRADÉ usa dos colores (principal → secundario). Si es SÓLIDO usa uno (principal). Está declarado como modo y no como un color más para que **el constructor sepa cuántos colores pedir** en vez de adivinarlo. Se cambia poniendo la clase `.marca-solida` en el o el . El default es degradé. */ --relleno-marca: linear-gradient(135deg, var(--principal) 0%, var(--secundario) 100%); /* ═══════════════════════════════════════════════════════════════════════════════════════════ 2 · LA TIPOGRAFÍA — dos familias y SIETE ROLES ═══════════════════════════════════════════════════════════════════════════════════════════ Cada rol declara sus TRES propiedades: tamaño, grosor (400-900) y decoración. Las familias van aparte: son el otro eje que el constructor toca. ═══════════════════════════════════════════════════════════════════════════════════════════ */ --fuente-titulos: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --fuente-cuerpo: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* 1 · TÍTULOS */ --tipo-titulo-size: 1.9rem; --tipo-titulo-weight: 800; --tipo-titulo-decoration: none; /* 2 · SUBTÍTULOS */ --tipo-subtitulo-size: 1.05rem; --tipo-subtitulo-weight: 700; --tipo-subtitulo-decoration: none; /* 3 · CUERPO */ --tipo-cuerpo-size: 0.95rem; --tipo-cuerpo-weight: 400; --tipo-cuerpo-decoration: none; /* 4 · CUERPO 2 */ --tipo-cuerpo2-size: 0.85rem; --tipo-cuerpo2-weight: 400; --tipo-cuerpo2-decoration: none; /* 5-7 · LOS TRES ESPECIALES ★ Van con un default y SIN significado asignado, igual que los colores especiales: existen para que cada empresa los use como quiera. Ponerles un nombre acá sería decidir por ella. */ --tipo-esp1-size: 1rem; --tipo-esp1-weight: 600; --tipo-esp1-decoration: none; --tipo-esp2-size: 1rem; --tipo-esp2-weight: 600; --tipo-esp2-decoration: none; --tipo-esp3-size: 1rem; --tipo-esp3-weight: 600; --tipo-esp3-decoration: none; /* ═══════════════════════════════════════════════════════════════════════════════════════════ 3 · LO DERIVADO — no lo toca el constructor, sale de la paleta ═══════════════════════════════════════════════════════════════════════════════════════════ */ --borde: #e2e8f0; --borde-suave: #edf2f7; --sombra-sm: 0 1px 3px rgba(0, 0, 0, .06); --sombra-md: 0 4px 12px rgba(0, 0, 0, .08); --sombra-lg: 0 8px 25px rgba(0, 0, 0, .12); --sombra-focus: 0 0 0 4px rgba(102, 126, 234, .15); /* ★★ EL VELO DE UN MODAL (tanda 2v). Estaba escrito a mano en CINCO hojas y con DOS valores distintos —`.45` en `modulo.css`, `admin.css` y `gestionar_profesor.css`; `.5` en `alumnos.css`, `calendario_alumno.css`, `gestionar_alumno.css` y `estilos.css`—. O sea que el mismo modal se veía distinto según qué pantalla lo abriera. ⚠️ Gana `.45`, que es el de `modulo.css`: la cáscara del módulo es la que define cómo se ve un modal en este sistema. Las otras hojas se convierten en su tanda — `PENDIENTES 165`. */ --velo-modal: rgba(0, 0, 0, .45); --radio-sm: 8px; --radio-md: 12px; --radio-lg: 16px; --radio-xl: 20px; --transicion: all .3s ease; /* ★★ LA ESCALA DE ESPACIADO (G1-A, 29/08/2026) — múltiplos de 4, y nada en el medio. ⛔ Nace porque el repo NO TENÍA UNA: `finanzas.css` mezcla `padding: 9px` con `padding: 1.25rem` en la misma hoja, y hay cuatro radios distintos sin regla. Una escala no es prolijidad — es lo que hace que dos pantallas hechas en meses distintos se vean de la misma familia sin que nadie compare. ⚠️ Y NO es tema: el constructor no la pregunta. Va acá porque es donde miran las hojas, al lado de los radios y las sombras, que tampoco los pregunta. */ --esp-1: 4px; --esp-2: 8px; --esp-3: 16px; --esp-4: 20px; --esp-5: 28px; --sidebar-width: 260px; /* geometría del sidebar admin, no es tema */ --header-height: 64px; } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ ★★ LA REGLA DEL PAR: EL FONDO ELIGE, NO LA PANTALLA ═══════════════════════════════════════════════════════════════════════════════════════════════ Todo lo que es texto tiene su par claro/oscuro. **Cuál se usa lo decide el CONTENEDOR**, poniendo `.fondo-claro` o `.fondo-oscuro`. Adentro, las reglas escriben `var(--titulo)` a secas y no se enteran de en qué fondo están. ⛔ POR QUÉ ES UNA REGLA Y NO UNA DECISIÓN POR PANTALLA: si cada hoja eligiera el color del texto a mano, cambiar un fondo en el constructor dejaría texto ilegible en las pantallas que nadie se acordó de revisar — y no falla, se ve mal. Con el par, cambiar el fondo cambia el texto. ⚠️ El default de `:root` es FONDO CLARO, porque es lo que usa hoy toda la app. ═══════════════════════════════════════════════════════════════════════════════════════════════ */ :root, .fondo-claro { --fondo: var(--fondo-claro-1); --superficie: var(--fondo-claro-2); --titulo: var(--titulo-oscuro); --subtitulo: var(--subtitulo-oscuro); --texto: var(--texto-oscuro); } .fondo-oscuro { --fondo: var(--fondo-oscuro-1); --superficie: var(--fondo-oscuro-2); --titulo: var(--titulo-claro); --subtitulo: var(--subtitulo-claro); --texto: var(--texto-claro); } /* ── El modo de marca. Default degradé; `.marca-solida` lo pasa a un color ────────────────────── */ .marca-solida { --relleno-marca: var(--principal); } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 4 · LAS CLASES DE TIPOGRAFÍA ═══════════════════════════════════════════════════════════════════════════════════════════════ */ .t-titulo { font-family: var(--fuente-titulos); font-size: var(--tipo-titulo-size); font-weight: var(--tipo-titulo-weight); text-decoration: var(--tipo-titulo-decoration); color: var(--titulo); } .t-subtitulo { font-family: var(--fuente-titulos); font-size: var(--tipo-subtitulo-size); font-weight: var(--tipo-subtitulo-weight); text-decoration: var(--tipo-subtitulo-decoration); color: var(--subtitulo); } .t-cuerpo { font-family: var(--fuente-cuerpo); font-size: var(--tipo-cuerpo-size); font-weight: var(--tipo-cuerpo-weight); text-decoration: var(--tipo-cuerpo-decoration); color: var(--texto); } .t-cuerpo2 { font-family: var(--fuente-cuerpo); font-size: var(--tipo-cuerpo2-size); font-weight: var(--tipo-cuerpo2-weight); text-decoration: var(--tipo-cuerpo2-decoration); color: var(--texto); } .t-esp1 { font-family: var(--fuente-cuerpo); font-size: var(--tipo-esp1-size); font-weight: var(--tipo-esp1-weight); text-decoration: var(--tipo-esp1-decoration); } .t-esp2 { font-family: var(--fuente-cuerpo); font-size: var(--tipo-esp2-size); font-weight: var(--tipo-esp2-weight); text-decoration: var(--tipo-esp2-decoration); } .t-esp3 { font-family: var(--fuente-cuerpo); font-size: var(--tipo-esp3-size); font-weight: var(--tipo-esp3-weight); text-decoration: var(--tipo-esp3-decoration); } /* ── UNA utilidad, y no es un rol tipográfico ───────────────────────────────────────────────── ★ `tabular-nums` hace que todos los dígitos midan lo mismo. Sin eso, una columna de plata NO SE ALINEA verticalmente: el 1 es más angosto que el 8 y los montos quedan corridos entre sí. Es legibilidad de una tabla financiera, no estética — por eso es una utilidad que cualquier rol puede llevar, y NO un rol que le ocupe el lugar a un Especial. */ .num { font-variant-numeric: tabular-nums; } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ 5 · COMPATIBLE — los nombres viejos, apuntando a los nuevos ═══════════════════════════════════════════════════════════════════════════════════════════════ ★★ ES LO QUE PERMITE QUE EL RECORRIDO SEA POR TANDAS Y NO UNA PASADA MASIVA. Hay ~790 usos de `var(--primary-start)` y compañía repartidos en 25 hojas. Sin estos alias habría que reescribirlas todas de una sentada — la pasada masiva que este recorrido evita. ⛔ NO SE ESCRIBEN NOMBRES VIEJOS EN CÓDIGO NUEVO. Es una rampa de salida, no un catálogo: cuando la última hoja se convierta, este bloque se borra entero. ═══════════════════════════════════════════════════════════════════════════════════════════════ */ :root, .fondo-claro, .fondo-oscuro { --primary-start: var(--principal); --primary-end: var(--secundario); --primary-gradient: var(--relleno-marca); --green-gradient: linear-gradient(135deg, var(--especial-1) 0%, #20c997 100%); --text-dark: var(--titulo); --text-mid: var(--subtitulo); --text-muted: var(--texto); --text-light: #a0aec0; --bg-page: var(--fondo); --bg-card: var(--superficie); --border: var(--borde); --border-light: var(--borde-suave); --green: var(--especial-1); --red: var(--especial-2); --orange: var(--especial-3); --blue: var(--terciario); --green-light: rgba(40, 167, 69, .1); --red-light: rgba(220, 53, 69, .1); --orange-light: rgba(230, 126, 34, .1); --blue-light: rgba(49, 130, 206, .1); --shadow-sm: var(--sombra-sm); --shadow-md: var(--sombra-md); --shadow-lg: var(--sombra-lg); --shadow-focus: var(--sombra-focus); --radius-sm: var(--radio-sm); --radius-md: var(--radio-md); --radius-lg: var(--radio-lg); --radius-xl: var(--radio-xl); --transition: var(--transicion); }