- `
de un `
` cerrado, y un `display` explícito **anula el ocultamiento
que hace el navegador**. O sea que los enlaces de los cinco grupos estaban
ahí, con ancho, aunque no se vieran.
Nunca se notó porque ninguna etiqueta había sido lo bastante larga: el día
que apareció «Planes de evaluación» desbordó 9 px las TRECE pantallas del
director a la vez. */
.sidebar-grupo:not([open]) > .sidebar-nav { display: none; }
/* ⚠️ El NOMBRE tiene que poder encogerse, y un `` dentro de un flex NO
lo hace solo: `min-width: auto` es el valor inicial de un ítem flex, o sea
«nunca más angosto que mi contenido». Con `flex-direction: column` de
arriba, el nombre es un ítem — y «Planes de evaluación», veinte caracteres,
desbordaba 9 px **las trece pantallas del director a la vez**.
Se arregla la causa y no el nombre: el próximo enlace largo no rompe nada.
Es la misma trampa de `.cabecera-de-lista` en MOR-194, un nivel más adentro. */
.sidebar-grupo[open] > .sidebar-nav .sidebar-nav-link > span {
min-width: 0;
overflow-wrap: anywhere;
}
.sidebar-grupo[open] > .sidebar-nav .sidebar-nav-link.active {
border-color: var(--brand-primary);
border-bottom-width: 1px;
}
/* ── los enlaces sueltos de la barra (el Panel) ─────────────────────── */
/* La marca de "estás acá" pasa del borde izquierdo al de abajo: en una barra
horizontal, un borde a la izquierda de cada enlace parece un separador. */
.sidebar-nav-link {
padding: var(--space-xs) var(--space-sm);
min-height: 36px;
white-space: nowrap;
border-left: none;
border-bottom: 2px solid transparent;
border-radius: var(--radius-sm);
}
.sidebar-nav-link:hover {
border-left-color: transparent;
}
.sidebar-nav-link.active {
border-left-color: transparent;
border-bottom-color: var(--brand-primary);
}
}
/* ---- Escala de un listado: cuántos son ---- */
/*
El número que le faltaba a las dieciséis pantallas iguales (MOR-134).
Va grande a propósito: es lo único de la pantalla que dice de qué tamaño es
lo que sigue, y es lo que hace que un listado de 200 alumnos NO se vea igual
que uno de 3 departamentos. Sin esto, ninguna tabla pesa más que otra y el
ojo no encuentra dónde mirar.
*/
.listado-escala {
display: flex;
align-items: baseline;
gap: var(--space-xs);
margin-bottom: var(--space-md);
color: var(--text-secondary);
font-size: 14px;
}
.listado-escala-numero {
font-family: var(--font-serif);
font-size: 28px;
font-weight: 600;
line-height: 1;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.listado-escala-sustantivo {
font-size: 15px;
color: var(--text-secondary);
}
/* Lo que explica el número cuando no se explica solo: una búsqueda filtrando,
una tabla topada. Va apagado — es la nota al pie del número, no el número. */
.listado-escala-detalle {
color: var(--text-tertiary);
font-size: 13px;
}
/* «142 alumnos DE PRIMARIA»: el nivel sobre el que se está contando.
En índigo, el mismo tono del selector de la barra — es la misma información
dicha dos veces en la pantalla, y que se reconozcan es el punto. */
.listado-escala-nivel {
color: var(--accion-primary);
font-weight: 600;
}
/* ---- Action Buttons Group ---- */
.actions-group {
display: flex;
gap: var(--space-xs);
align-items: center;
}
/* ---- Empty State ---- */
.empty-state {
text-align: center;
padding: var(--space-2xl) var(--space-lg);
color: var(--text-tertiary);
}
.empty-state h3 {
color: var(--text-secondary);
font-size: 16px;
}
/* ⚠️ Los botones de un estado vacío no tenían NINGÚN estilo: el `div` existía en
las vistas y en la hoja no había regla, así que salían pegados uno contra
otro. `.acciones-de-cabecera` sí lo tenía — es el mismo problema resuelto en
un solo lado. */
.empty-state-acciones {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: center;
margin-top: var(--space-lg);
}
/* ---- Barra de contexto: en qué colegio y en qué año escolar estás ---- */
/*
Antes esta franja decía "Período Académico Activo" —una etiqueta anunciando
un dato que nunca traía— y repetía el nombre del producto debajo del logo.
Cero información en el lugar más visible de la app.
Ahora carga la identidad del inquilino: el colegio manda visualmente, el año
escolar acompaña. Es lo que reemplaza a la columna "Escuela" que se quitó de
los listados en MOR-90 — el dato iba una vez arriba, no en cada fila.
*/
/* ⚠️ `.academic-context` y `.academic-context-inner` SE BORRARON (MOR-194).
Eran de la franja que MOR-184 fusionó dentro de la barra: su parcial dejó de
rendirse y nadie borró ni el parcial ni sus reglas. La de teléfono seguía
ahí, apuntando a una clase que ya no existía, así que la barra nueva se
quedó sin reglas de teléfono — ver el `@media` de más abajo. Las clases de
adentro —`.contexto-colegio`, `.contexto-periodo`— sí siguen vivas. */
.contexto-colegio {
/* ⚠️ NO cede el ancho, y hubo que decírselo. Es la identidad de lo que se
está mirando: con el aviso de «acá el nivel no aplica» puesto, «COLEGIO A
7328013» se recortaba a «C».
Era el único elemento encogible de la barra —`.contexto-periodo` y
`.contexto-nivel` traen `flex-shrink: 0`— así que cualquier cosa nueva
salía de su ancho. El `max-width: 34ch` de abajo ya lo acota; no hace falta
además que se achique. */
flex: 0 0 auto;
display: flex;
/* ⚠️ `center` y no `baseline`: con un `![]()
` adentro, `baseline` alinea el
borde inferior de la imagen con la línea del texto y empuja la fila hacia
abajo. En la franja propia que había antes no se notaba; en una barra de
52 px, descuadra todo. */
align-items: center;
gap: var(--space-sm);
min-width: 0;
/* El nombre de un colegio largo se recorta en vez de empujar al año escolar
fuera de la pantalla. */
max-width: 34ch;
}
/* El nombre del colegio es la identidad de la pantalla: va en la serif del
sistema y con más peso que todo lo demás de la franja. */
.contexto-colegio-nombre {
font-family: var(--font-serif);
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.contexto-colegio-lugar {
color: var(--text-tertiary);
white-space: nowrap;
}
/* ⚠️ `.contexto-periodo*` SE BORRÓ con MOR-223: era el contenedor del año
cuando vivía suelto en la barra, y ahora el año vive dentro de la pastilla de
contexto (`.contexto-valor-anio`). Se borra en vez de dejarse «por si acaso»:
una regla huérfana no falla, simplemente deja de aplicar — y es exactamente
así como esta barra se quedó sin reglas de teléfono en MOR-194. */
/* La barra en un teléfono (MOR-194).
─────────────────────────────────
Daniel, abriendo /secciones a 493 px: «mira cómo se ve desde el teléfono:
BOOM, EXPLOTÓ TODO». Y explotaba: la página entera se corría 189 px de lado,
IDÉNTICOS en todas las pantallas y a cualquier ancho — la pista de que el
culpable no era el contenido sino la barra, que es lo único común.
⚠️ Es la MISMA falla de `.nav-institutional` que está documentada treinta
líneas más arriba, y por eso duele: al fusionar las dos barras (MOR-184), la
única regla de teléfono que existía quedó apuntando a
`.academic-context-inner` —clase del parcial que dejó de rendirse—, así que
la barra nueva se quedó SIN reglas de teléfono y nadie se enteró. Una regla
huérfana no falla: simplemente deja de aplicar.
Lo que se cae a este ancho, en orden de qué se puede perder primero:
el lugar del colegio Caracas, Distrito Capital ← ya estaba
la palabra «SIGA» el logo alcanza
la etiqueta «Año escolar» el selector se explica solo
el nombre del colegio se recorta, no se envuelve
«Cerrar sesión» queda el nombre, que enlaza al perfil
El nombre del colegio se RECORTA en vez de desaparecer: es lo que dice en
cuál de los dos colegios está parada la secretaria que tiene los dos. */
@media (max-width: 640px) {
.barra-superior-inner {
/* ⚠️ El aire de la barra, al mínimo. Cinco elementos separados por 12 px
son 48 px; a 4 px son 16. En una pantalla de 390 px esa diferencia es la
que decide si «Cerrar sesión» cabe o hay que esconderlo — y esconderlo
fue lo que Daniel encontró mal. */
gap: var(--space-micro);
/* 16 px de cada lado son 32 px de una pantalla de 390: el 8 % gastado en
margen antes de dibujar nada. */
padding: 0 var(--space-sm);
/* ⚠️ `min-width: 0` en el contenedor Y en el hijo que se encoge: un ítem
flex no baja de su tamaño de contenido si no se le dice, y ES esa
negativa la que empuja la fila entera más allá del viewport. */
min-width: 0;
}
.contexto-colegio {
min-width: 0;
overflow: hidden;
}
.contexto-colegio-nombre {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contexto-colegio-lugar,
.navbar-brand-text {
display: none;
}
/* ⚠️ «Cerrar sesión» se queda, como ICONO.
Estuvo escondido, con el argumento de que el nombre enlaza al perfil y ahí
adentro está el botón. Daniel lo probó en un iPhone XR: *«en el mobile
display no se visualiza el cerrar sesión»*. Y tenía razón — nadie va a
buscar la salida dentro de su propia ficha.
Lo que lo hace posible ahora es que la barra adelgazó: la pastilla de
contexto reemplazó a cinco controles (MOR-223), así que hay lugar para un
objetivo táctil de 36 px.
⚠️ Se esconde el TEXTO, no el botón, y con `.sr-only` en vez de
`display: none`: el nombre sigue existiendo para el lector de pantalla, que
es justo quien lo necesita cuando lo único visible es un dibujo. */
.barra-superior .session-menu .btn {
padding: 0;
width: 36px;
min-height: 36px;
justify-content: center;
}
/* El nombre entero se va y queda la inicial: son ~50 px para decirle a
alguien quién es él mismo, y ese lugar lo necesita la salida. */
.barra-superior .session-menu .user-info-nombre { display: none; }
.barra-superior .session-menu .user-info-inicial { display: inline; }
.barra-superior .session-menu .btn .salir-texto {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ⚠️ El buscador global se encoge a su icono, y su `min-width: 220px` TIENE
que levantarse explícitamente: es un mínimo, así que ningún `flex-shrink`
lo baja. Eran 220 px de los 390 que hay — más de la mitad de la pantalla
para un control que en el teléfono se toca, no se lee. */
.buscador-disparador {
min-width: 0;
margin-right: var(--space-xs);
}
/* El texto de adentro («Buscar…», el atajo ⌘K) se va: en un teléfono no hay
teclado que muestre un atajo, y el icono de lupa ya dice qué hace. */
.buscador-disparador > :not(svg) { display: none; }
/* ⚠️ EL culpable de los 90 px, y el que costó encontrar: `.contexto-periodo`
medía 283 de los 390 px de la pantalla y tiene `flex-shrink: 0`, así que no
cedía ni uno. Son el selector de año MÁS la frase de situación
—«finalizado el 15 de julio»— una al lado de la otra.
La situación se va: en el teléfono importa CUÁL año se está mirando, y si
está cerrado se ve al entrar a cualquier listado. El selector se queda,
porque es lo que decide todo lo demás. */
.contexto-periodo {
flex-shrink: 1;
min-width: 0;
}
/* ⚠️ El gap de la barra se achica: cinco elementos × 12 px son 48 px, que a
390 px es el 12 % de la pantalla gastado en aire. */
.barra-superior-inner { gap: var(--space-xs); }
/* Las reglas de teléfono del control de contexto NO viven acá: están junto a
`.contexto`, cinco mil líneas más abajo, porque a igual especificidad gana
la última regla del archivo. Ver la nota de ahí. */
}
/* ---- Pagination ---- */
/* Wrapper div que usamos en las vistas */
.pagy-nav {
margin-top: var(--space-lg);
padding-top: var(--space-lg);
border-top: 1px solid var(--border-standard);
}
/* nav generado por pagy_nav: nav.pagy.nav */
nav.pagy {
display: flex;
gap: var(--space-xs);
justify-content: center;
list-style: none;
flex-wrap: wrap;
}
/* Todos los enlaces de paginación */
nav.pagy a,
nav.pagy a[role="link"] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 var(--space-sm);
font-size: 14px;
color: var(--text-secondary);
background: var(--surface-elevated);
border: 1px solid var(--border-standard);
border-radius: var(--radius-sm);
text-decoration: none;
transition: all var(--transition-fast);
}
/* Hover en enlaces activos */
nav.pagy a:hover:not([aria-disabled="true"]) {
background: var(--surface-hover);
border-color: var(--border-emphasis);
color: var(--text-primary);
}
/* Página actual */
nav.pagy a.current,
nav.pagy a[aria-current="page"] {
background: var(--brand-primary);
border-color: var(--brand-primary);
color: white;
font-weight: 500;
cursor: default;
}
/* Prev/Next deshabilitados y gap */
nav.pagy a[aria-disabled="true"]:not(.current) {
opacity: 0.4;
cursor: not-allowed;
}
nav.pagy a.gap {
background: transparent;
border-color: transparent;
cursor: default;
opacity: 0.5;
}
/* ---- Utility Classes ---- */
.d-flex {
display: flex;
}
.align-items-center {
align-items: center;
}
.justify-content-center {
justify-content: center;
}
.justify-content-between {
justify-content: space-between;
}
.gap-1 {
gap: var(--space-xs);
}
.gap-2 {
gap: var(--space-md);
}
.gap-3 {
gap: var(--space-lg);
}
.text-center {
text-align: center;
}
/* ---- Form Select (for consistency with form-control) ---- */
.form-select {
width: 100%;
padding: var(--space-sm) var(--space-md);
font-family: var(--font-sans);
font-size: 14px;
color: var(--text-primary);
background: var(--control-bg);
border: 1px solid var(--control-border);
border-radius: var(--radius-sm);
transition: all var(--transition-base);
cursor: pointer;
}
.form-select:focus {
outline: none;
border-color: var(--control-focus-border);
box-shadow: 0 0 0 3px var(--control-focus-ring);
background: var(--surface-elevated);
}
/* ---- Dashboard Styles ---- */
.dashboard-administrador {
/* Container ya definido */
}
/* Stats Grid */
/* `auto-fit` con 200 px deja tres columnas en un contenedor de ~900 px, y con
cuatro tarjetas eso da 3 + 1, con la última sola en una fila vacía. Con
`min(160px, 100%)` entran las cuatro en una línea en escritorio y caen a dos
en el teléfono — nunca una huérfana.
El `min(…, 100%)` es lo que impide que la tarjeta imponga 160 px en una
pantalla más angosta que eso. */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
gap: var(--space-md);
margin-top: var(--space-lg);
}
.stat-card {
background: var(--brand-subtle);
border: 1px solid var(--border-standard);
border-radius: var(--radius-md);
padding: var(--space-lg);
text-align: center;
transition: all var(--transition-fast);
}
.stat-card:hover {
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px var(--control-focus-ring);
}
.stat-card h3 {
font-family: var(--font-serif);
font-size: 36px;
color: var(--brand-primary);
margin: 0 0 var(--space-xs) 0;
font-weight: 600;
}
.stat-card p {
font-size: 14px;
color: var(--text-secondary);
margin: 0;
}
/* Quick Access Grid */
.quick-access-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-md);
margin-top: var(--space-lg);
}
.quick-access-card {
display: block;
background: var(--surface-elevated);
border: 1px solid var(--border-standard);
border-radius: var(--radius-md);
padding: var(--space-lg);
text-decoration: none;
transition: all var(--transition-fast);
}
.quick-access-card:hover {
border-color: var(--brand-primary);
background: var(--brand-subtle);
transform: translateY(-2px);
}
.quick-access-icon {
font-size: 32px;
margin-bottom: var(--space-sm);
}
.quick-access-card h3 {
font-family: var(--font-serif);
font-size: 18px;
color: var(--brand-primary);
margin: 0 0 var(--space-xs) 0;
}
.quick-access-card p {
font-size: 14px;
color: var(--text-secondary);
margin: 0;
}
/* Admin Info Badge */
.admin-info-badge {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--surface-canvas);
border: 1px solid var(--border-standard);
border-radius: var(--radius-sm);
font-size: 14px;
}
.role-badge {
background: var(--brand-primary);
color: white;
padding: 4px var(--space-sm);
border-radius: var(--radius-sm);
font-size: 12px;
font-weight: 500;
/* Sin `text-transform: capitalize`: capitaliza CADA palabra, y en español eso
produce Title Case inglés. Acá lo hacía sobre una fecha —"15 De Agosto De
2026", en la pantalla de asistencia— y sobre "3 Registros". El único caso
que quería arreglar era `admin.role.humanize`, y `humanize` ya pone la
mayúscula inicial él solo. */
}
.section-title {
font-family: var(--font-serif);
font-size: 40px;
text-align: center;
color: var(--brand-primary);
margin: 0 0 var(--space-2xl) 0;
font-weight: 600;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-xl);
}
.feature-card {
background: var(--surface-canvas);
padding: var(--space-xl);
border-radius: var(--radius-lg);
border: 1px solid var(--border-standard);
transition: all var(--transition-base);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(30, 74, 122, 0.1);
border-color: var(--brand-primary);
}
.feature-icon {
font-size: 48px;
margin-bottom: var(--space-md);
display: block;
}
.feature-card h3 {
font-family: var(--font-serif);
font-size: 22px;
color: var(--brand-primary);
margin: 0 0 var(--space-sm) 0;
font-weight: 600;
}
.feature-card p {
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
font-size: 15px;
}
/* ---- Animations ---- */
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ---- Responsive ---- */
@media (max-width: 768px) {
.hero-section-bg-logo {
background-position: center 12%;
background-size: min(500px, 95vw);
}
.hero-section-bg-logo .hero-content {
padding-top: clamp(110px, 24vw, 170px);
}
.hero-section-fullwidth {
width: calc(100% + (var(--space-lg) * 2));
margin-left: calc(var(--space-lg) * -1);
margin-right: calc(var(--space-lg) * -1);
}
.features-section,
.benefits-section,
.stats-section,
.cta-section,
.landing-footer {
width: calc(100% + (var(--space-lg) * 2));
margin-left: calc(var(--space-lg) * -1);
margin-right: calc(var(--space-lg) * -1);
}
.hero-title {
font-size: clamp(38px, 10vw, 60px);
}
.hero-subtitle {
font-size: clamp(24px, 7vw, 34px);
}
.hero-logo {
width: 200px;
}
.section-title {
font-size: 32px;
}
.benefit-content {
flex-direction: column;
text-align: center;
}
.benefit-image-placeholder {
width: 150px;
height: 150px;
}
.placeholder-icon {
font-size: 60px;
}
.cta-title {
font-size: 32px;
}
.stat-number {
font-size: 42px;
}
.footer-content {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
}
/* ---- No Role State ---- */
.no-role-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
}
.no-role-card {
text-align: center;
max-width: 420px;
padding: var(--space-2xl);
background: var(--surface-elevated);
border: 1px solid var(--border-standard);
border-radius: var(--radius-lg);
}
.no-role-icon {
font-size: 56px;
margin-bottom: var(--space-lg);
}
.no-role-card h2 {
font-family: var(--font-serif);
color: var(--text-primary);
margin: 0 0 var(--space-md) 0;
}
.no-role-card p {
color: var(--text-secondary);
line-height: 1.6;
margin: 0 0 var(--space-xl) 0;
}
/* ---- Section Block (Profesor & Estudiante Dashboards) ---- */
.section-block {
border: 1px solid var(--border-standard);
border-radius: var(--radius-md);
padding: var(--space-lg);
margin-bottom: var(--space-md);
transition: border-color var(--transition-fast);
}
.section-block:hover {
border-color: var(--brand-primary);
}
.section-block-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.section-block-title h3 {
font-family: var(--font-serif);
font-size: 18px;
color: var(--brand-primary);
margin: 0 0 var(--space-xs) 0;
font-weight: 600;
}
.section-period {
font-size: 12px;
color: var(--text-tertiary);
background: var(--surface-hover);
padding: 2px 8px;
border-radius: var(--radius-sm);
}
.section-block-meta {
flex-shrink: 0;
text-align: right;
}
.section-student-count {
font-size: 13px;
color: var(--text-secondary);
white-space: nowrap;
}
.section-subjects {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
margin-bottom: var(--space-md);
}
.subject-tag {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--brand-subtle);
border: 1px solid rgba(30, 74, 122, 0.15);
border-radius: var(--radius-sm);
padding: 4px 10px;
font-size: 13px;
}
.subject-name {
color: var(--brand-primary);
font-weight: 500;
}
.subject-teacher {
color: var(--text-tertiary);
}
.section-actions {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--space-sm);
border-top: 1px solid var(--border-subtle);
}
/* ---- Detail Row (ficha de detalles) ---- */
.detail-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-xl);
margin-top: var(--space-lg);
}
.detail-item {
flex: 1;
min-width: 160px;
}
.detail-label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-xs);
}
.detail-value {
font-size: 16px;
color: var(--text-primary);
margin: 0;
font-weight: 500;
}
/* ---- Form Row (formulario en línea) ---- */
/* ⚠️ `flex-start`, no `flex-end`.
Con `flex-end` las dos columnas se alinean por ABAJO, y basta que una lleve
una nota de ayuda debajo del campo para que su rótulo suba y el de al lado se
quede: los dos «Grado» e «Identificador» quedaban a distinta altura. Alineados
arriba se alinean los RÓTULOS, que es lo que el ojo usa para leer una fila.
El botón «Limpiar» del buscador de listas —que sí necesita ir abajo, porque no
tiene rótulo— se alinea solo, con su propio estilo en el parcial. */
.form-row {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
align-items: flex-start;
/* Sin esto, el campo que sigue a la fila se le pega encima: los
`.form-group` de adentro tienen el margen en cero. El mismo valor que un
`.form-group` normal, o la fila rompe el ritmo vertical del formulario. */
margin-bottom: var(--space-lg);
}
.form-row .form-group {
flex: 1;
min-width: 200px;
margin-bottom: 0;
}
/* ---- Activity Log Badges ---- */
.activity-badge {
display: inline-block;
padding: 3px 10px;
border-radius: var(--radius-sm);
font-size: 12px;
font-weight: 500;
white-space: nowrap;
background: var(--brand-subtle);
color: var(--brand-primary);
border: 1px solid var(--border-standard);
}
.activity-badge--login,
.activity-badge--logout {
background: #e8f5e9;
color: #2e7d32;
border-color: #a5d6a7;
}
.activity-badge--created {
background: #e3f2fd;
color: #1565c0;
border-color: #90caf9;
}
.activity-badge--updated {
background: #fff8e1;
color: #f57f17;
border-color: #ffe082;
}
.activity-badge--destroyed {
background: #fce4ec;
color: #b71c1c;
border-color: #f48fb1;
}
.activity-badge--assigned,
.activity-badge--removed {
background: #f3e5f5;
color: #6a1b9a;
border-color: #ce93d8;
}
/* ---- Search Input with spinner ---- */
.search-input-wrap {
position: relative;
}
.search-input-wrap .form-select {
width: 100%;
padding-right: 36px;
}
.search-spinner {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
border: 2px solid var(--border-standard);
border-top-color: var(--brand-primary);
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
.search-spinner.hidden {
display: none;
}
@keyframes spin {
to { transform: translateY(-50%) rotate(360deg); }
}
/* ---- Filter Pills ---- */
.filter-pills {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
margin-top: var(--space-sm);
}
.filter-pill {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--brand-subtle);
border: 1px solid var(--brand-primary);
color: var(--brand-primary);
padding: 3px 10px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
}
.filter-pill:hover {
background: var(--brand-primary);
color: #fff;
}
.filter-pill.active {
background: var(--brand-primary);
color: #fff;
}
.filter-pill small {
opacity: 0.75;
font-weight: 400;
}
/* ============================================
Medidor de ponderación
--------------------------------------------
Cuánto del 100 % de un lapso está comprometido. Se usa en el listado (una
barra por grupo sección–materia–lapso) y dentro del formulario, donde además
muestra en otro tono lo que sumaría la evaluación que se está escribiendo.
============================================ */
.weight-meter-intro {
color: var(--text-secondary);
font-size: 14px;
margin: 0 0 var(--space-md);
}
.weight-meter {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-micro);
margin-bottom: var(--space-md);
/* ⚠️ Separado del deslizador, que ahora está justo encima. Son dos barras
horizontales y a dos píxeles se leen como una sola cosa partida: el
deslizador es el CONTROL —cuánto vale esta— y el medidor es el ESTADO del
lapso entero. */
margin-top: var(--space-sm);
}
.weight-meter-label {
font-size: 14px;
color: var(--text-secondary);
}
.weight-meter-label strong {
color: var(--text-primary);
}
.weight-meter-bar {
display: flex;
height: 10px;
border-radius: 999px;
background: var(--surface-input);
border: 1px solid var(--border-subtle);
overflow: hidden;
}
.weight-meter-fill {
background: var(--brand-primary);
transition: width 120ms ease-out;
}
.weight-meter-fill--completo {
background: var(--success-text);
}
.weight-meter-fill--nuevo {
background: var(--success-text);
opacity: 0.55;
}
.weight-meter-fill--excedido {
background: var(--danger-text);
opacity: 1;
}
.weight-meter-value {
font-size: 13px;
color: var(--text-tertiary);
}
.weight-meter-value--excedido {
color: var(--danger-text);
font-weight: 600;
}
.weight-meter-falta {
color: var(--warning-text);
}
/* ============================================
Planilla de carga de notas
--------------------------------------------
Móvil primero: una fila por alumno, en vertical. Una grilla de 30 × N en un
teléfono no se arregla con overflow-x — se arregla no siendo una grilla.
============================================ */
.carga-contexto {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-xs);
color: var(--text-secondary);
font-size: 14px;
margin: 0 0 var(--space-md);
}
/* El peso de la evaluación dentro del lapso.
⚠️ Es un CHIP, no negrita: cambia lo que estas notas significan —el mismo 15
vale distinto en una evaluación del 30 % que en una del 70 %— y en negrita se
perdía dentro de la misma frase que el grado, la sección y el lapso.
Sin color semántico: es un dato de la evaluación, no una alerta (MOR-135). */
.carga-peso {
display: inline-flex;
align-items: center;
padding: 2px var(--space-sm);
border-radius: 999px;
background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
color: var(--brand-primary);
font-size: 13px;
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.carga-progreso {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.carga-progreso-barra {
flex: 1;
height: 8px;
border-radius: 999px;
background: var(--surface-input);
border: 1px solid var(--border-subtle);
overflow: hidden;
}
.carga-progreso-fill {
height: 100%;
background: var(--success-text);
transition: width 160ms ease-out;
}
.carga-progreso-texto {
font-size: 13px;
color: var(--text-tertiary);
white-space: nowrap;
}
.carga-aviso {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
flex-wrap: wrap;
background: var(--warning-bg);
border: 1px solid var(--warning-border);
color: var(--warning-text);
border-radius: var(--radius-sm);
padding: var(--space-sm) var(--space-md);
margin-bottom: var(--space-md);
font-size: 14px;
}
.carga-lista {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--border-subtle);
}
.carga-fila {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-sm) 0;
border-bottom: 1px solid var(--border-subtle);
}
/* ⚠️ `flex: 1` para que el nombre se coma TODO el espacio sobrante.
Sin esto, `space-between` lo reparte entre los cinco hijos de la fila y el
campo de la nota queda en una x distinta en cada renglón — se nota apenas la
marca de estado sale del mismo grupo que el campo. La columna de notas tiene
que caer a plomo: es la que se recorre de arriba abajo. */
.carga-alumno {
min-width: 0;
flex: 1;
}
.carga-alumno-nombre {
font-size: 15px;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.carga-alumno-carnet {
font-size: 12px;
color: var(--text-tertiary);
}
.carga-campo {
display: flex;
align-items: center;
gap: var(--space-xs);
flex-shrink: 0;
}
/* 64 px de ancho y 44 de alto: el mínimo cómodo para un pulgar. */
.carga-input {
width: 64px;
height: 44px;
text-align: center;
font-size: 18px;
font-variant-numeric: tabular-nums;
background: var(--control-bg);
border: 1px solid var(--control-border);
border-radius: var(--radius-sm);
color: var(--text-primary);
}
.carga-input:focus {
outline: none;
border-color: var(--control-focus-border);
box-shadow: 0 0 0 3px var(--control-focus-ring);
}
/* Sin nota se ve DISTINTO de una nota baja: el guion está donde iría el número. */
.carga-input::placeholder {
color: var(--text-muted);
}
/* ── la marca de qué pasó con una fila ─────────────────────────────────────
UNA para las cuatro planillas —notas, reparaciones, informes descriptivos y
Educación Inicial—. Antes eran tres: un símbolo en notas, una palabra en
informes y un destello verde en Inicial, para la misma pregunta —¿quedó
guardado?— que el mismo profesor se hace en la misma tarde.
⚠️ El estado va en el ELEMENTO, no en la fila. Lo pinta el servidor por
Turbo Stream reemplazando este ``, así que la fila de arriba ni se
entera — y es justo eso lo que conserva el foco del campo siguiente. */
.planilla-estado {
flex: 0 0 auto;
width: 18px;
text-align: center;
font-size: 15px;
color: var(--text-muted);
user-select: none;
}
.planilla-estado[data-estado="guardando"] { color: var(--text-tertiary); }
.planilla-estado[data-estado="guardado"] { color: var(--success-text); }
.planilla-estado[data-estado="vacio"] { color: var(--text-muted); }
.planilla-estado[data-estado="sin_red"] { color: var(--warning-text); }
.planilla-estado[data-estado="rechazado"] { color: var(--danger-text); font-weight: 700; }
/* Y el campo se tiñe con él: la marca sola, de 18 px, se pierde en una lista de
treinta. Es el DATO el que está en problemas, no un control.
⚠️ Desde la FILA y no desde el formulario: la marca vive fuera del `