/* STeacher - interfaz de pase de lista. Disenada primero para el celular: objetivos tactiles grandes, una mano, y contraste suficiente para leerse en un aula con luz. --- Paletas --------------------------------------------------------------- Hay dos, y se eligen en Ajustes: indigo (por omision) la de siempre azul azul institucional, mas cercano a lo escolar Solo cambian los tres tonos de marca y el de la cabecera. Los colores de asistencia —verde, rojo, ambar, azul— NO dependen de la paleta: son un codigo que el maestro ya tiene aprendido en la mano y que significa lo mismo en cualquier tema. Por eso ningun tono de marca se acerca a ellos. Cada paleta se declara dos veces, en claro y en oscuro, y el modo lo pone el sistema (`prefers-color-scheme`). El tema se marca con `data-tema` en el ; sin atributo, indigo. */ :root { color-scheme: light dark; --tinta: #0f172a; --tinta-suave: #475569; /* El gris de los textos de apoyo. Estaba en #94a3b8, que da 2.34:1 sobre el fondo: la mitad del minimo legible. Este da 4.54:1 y sigue distinguiendose de --tinta-suave, que es lo que mantiene los tres niveles de jerarquia. */ --tinta-tenue: #617188; /* Para lo que no es texto —flechas, iconos de adorno—, donde un gris claro no estorba a nadie porque no hay nada que leer. */ --tinta-adorno: #94a3b8; --fondo: #f1f5f9; --superficie: #ffffff; --superficie-2: #f8fafc; --borde: #e2e8f0; /* Paleta indigo, modo claro. */ --marca: #4f46e5; --marca-fuerte: #4338ca; --marca-tenue: #eef2ff; /* Fondo de la cabecera de identidad: oscuro, para que el texto vaya en blanco con holgura (9:1) y la pantalla tenga un ancla visual. */ --marca-honda: #312e81; --marca-honda2: #4338ca; --sobre-marca: #ffffff; --presente: #059669; --presente-bg: #d1fae5; --falta: #dc2626; --falta-bg: #fee2e2; --retardo: #d97706; --retardo-bg: #fef3c7; --justif: #2563eb; --justif-bg: #dbeafe; --radio: 14px; --radio-chico: 9px; --sombra: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .05); --sombra-alta: 0 8px 32px rgba(15, 23, 42, .16); --seguro-abajo: env(safe-area-inset-bottom, 0px); --seguro-arriba: env(safe-area-inset-top, 0px); --teclado: 0px; /* lo que tapa el teclado donde no achica la pantalla (#057) */ /* El texto sobre los pastel de las materias (#058). */ --tinta-materia: #1e2433; } /* Paleta azul institucional, modo claro. */ :root[data-tema="azul"] { --marca: #1d4ed8; --marca-fuerte: #1e40af; --marca-tenue: #e8f0ff; --marca-honda: #172554; --marca-honda2: #1e40af; } @media (prefers-color-scheme: dark) { :root { --tinta: #f1f5f9; --tinta-suave: #cbd5e1; /* En oscuro este gris ya cumple de sobra (5.7:1 a 7.3:1): no se toca. */ --tinta-tenue: #94a3b8; --tinta-adorno: #64748b; --fondo: #0b1120; --superficie: #172033; --superficie-2: #1e293b; --borde: #2c3a52; --marca: #818cf8; --marca-fuerte: #a5b4fc; --marca-tenue: #232e4d; /* En oscuro la cabecera no puede ser mas oscura que el fondo o desaparece: sube en vez de bajar, y el texto sigue en blanco. */ --marca-honda: #312e81; --marca-honda2: #3730a3; --presente: #34d399; --presente-bg: #06342a; --falta: #f87171; --falta-bg: #401414; --retardo: #fbbf24; --retardo-bg: #3d2a06; --justif: #60a5fa; --justif-bg: #10284c; --tinta-materia: #f1f5f9; --sombra: 0 1px 2px rgba(0, 0, 0, .4); --sombra-alta: 0 8px 32px rgba(0, 0, 0, .6); } :root[data-tema="azul"] { --marca: #60a5fa; --marca-fuerte: #93c5fd; --marca-tenue: #10284c; --marca-honda: #172554; --marca-honda2: #1e3a8a; } } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; overscroll-behavior-y: none; } body { background: var(--fondo); color: var(--tinta); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } [hidden] { display: none !important; } /* --- Estructura de vistas ------------------------------------------------ */ .vista { display: none; flex-direction: column; min-height: 100dvh; } .vista.activa { display: flex; } /* Pasar lista es la unica pantalla que no se desplaza entera. La cabecera, los contadores del grupo y la tarjeta del alumno tienen que estar SIEMPRE a la vista --son lo que se consulta mientras se captura--, asi que la altura se fija y el unico que se desplaza es el listado de abajo. Antes avanzar con las flechas subia la pagina completa y tapaba los numeros (#039). */ #vista-lista.activa { height: 100dvh; overflow: hidden; } #vista-lista .contenido { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .barra { position: sticky; top: 0; z-index: 20; padding: calc(var(--seguro-arriba) + 12px) 16px 12px; background: var(--superficie); border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 12px; } .barra h1 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.01em; } .barra .sub { margin: 2px 0 0; font-size: 12.5px; color: var(--tinta-tenue); } .barra .crece { flex: 1; min-width: 0; } .barra .crece h1, .barra .crece .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .icono-btn { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center; color: var(--tinta-suave); transition: background .15s; } .icono-btn:active { background: var(--superficie-2); } .icono-btn svg { width: 22px; height: 22px; } .contenido { flex: 1; padding: 16px; padding-bottom: calc(24px + var(--seguro-abajo)); } .contenido.sin-aire { padding: 0 0 calc(120px + var(--seguro-abajo)); } /* --- Login --------------------------------------------------------------- */ #vista-login { justify-content: center; padding: 24px; background: var(--fondo); } .tarjeta-login { width: 100%; max-width: 380px; margin: 0 auto; background: var(--superficie); border-radius: 20px; padding: 32px 24px; box-shadow: var(--sombra); } .logo { width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 18px; background: linear-gradient(135deg, var(--marca), #7c3aed); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 26px; box-shadow: 0 8px 20px rgba(79, 70, 229, .3); } .tarjeta-login h1 { margin: 0 0 4px; font-size: 22px; text-align: center; letter-spacing: -.02em; } .tarjeta-login p.lema { margin: 0 0 26px; text-align: center; color: var(--tinta-tenue); font-size: 13.5px; } .campo { margin-bottom: 14px; } .campo label { display: block; font-size: 12.5px; font-weight: 600; color: var(--tinta-suave); margin-bottom: 6px; } .campo input, .campo select, .campo textarea { width: 100%; padding: 13px 14px; border: 1.5px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie-2); outline: none; transition: border-color .15s, box-shadow .15s; } .campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-tenue); } .campo textarea { resize: vertical; min-height: 96px; } .btn { width: 100%; padding: 14px; border-radius: var(--radio-chico); background: var(--marca); color: #fff; font-weight: 620; transition: transform .1s, background .15s; } .btn:active { transform: scale(.98); background: var(--marca-fuerte); } .btn:disabled { opacity: .55; } .btn.secundario { background: var(--superficie-2); color: var(--tinta); border: 1.5px solid var(--borde); } .btn.peligro { background: var(--falta); } .btn.compacto { width: auto; padding: 10px 16px; font-size: 14px; } .aviso { padding: 11px 14px; border-radius: var(--radio-chico); font-size: 13.5px; margin-bottom: 14px; background: var(--falta-bg); color: var(--falta); } /* --- Menu de materias ---------------------------------------------------- */ /* "PASAR LISTA" y demas encabezados. En mayusculas, pequeno y espaciado es la combinacion que menos perdona un gris flojo: encabeza lo que mas se usa y pasaba desapercibido. Va con el gris de texto normal, no con el tenue. */ .seccion-titulo { font-size: 12.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); margin: 4px 0 12px; } /* Siempre en una sola columna, tambien en la laptop: los nombres de materia son largos ("ADMINISTRACION DE RECURSOS HUMANOS") y en dos columnas se parten o se recortan. Una lista vertical se recorre de un vistazo. */ .materias { display: grid; grid-template-columns: 1fr; gap: 12px; } .materia { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px; background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); transition: transform .1s; } .materia:active { transform: scale(.985); } .materia .marca-color { width: 4px; align-self: stretch; min-height: 44px; border-radius: 4px; background: var(--marca); } .materia .info { flex: 1; min-width: 0; } .materia .nombre { font-weight: 640; font-size: 15.5px; margin-bottom: 3px; } .materia .nombre { font-size: 16px; font-weight: 680; line-height: 1.25; } /* El grupo y su carrera: lo segundo que se busca al elegir donde pasar lista, asi que va justo debajo del nombre y con mas peso que el resto del detalle. */ .materia .grupo-linea { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--tinta-suave); } .materia .detalle { display: block; margin-top: 3px; font-size: 12px; color: var(--tinta-tenue); } .materia .flecha { color: var(--tinta-adorno); } .vacio { text-align: center; padding: 48px 24px; color: var(--tinta-tenue); } .vacio svg { width: 52px; height: 52px; opacity: .35; margin-bottom: 14px; } .vacio p { margin: 0 0 18px; font-size: 14px; } /* --- Cabecera del pase de lista ------------------------------------------ */ .panel-fecha { background: var(--superficie); border-bottom: 1px solid var(--borde); padding: 10px 16px 11px; } .fila-fecha { display: flex; align-items: center; gap: 8px; } .fila-fecha input[type="date"] { /* `width: 0` ademas del `min-width: 0`: en el celular, el input de fecha impone un ancho propio que ni flex-shrink baja, y empujaba el control de horas fuera de la pantalla --JMA lo vio cortado, sin el signo «+»--. Con la base en cero, el que reparte el sobrante es flex-grow. */ flex: 1 1 0; width: 0; text-align: center; min-width: 0; padding: 7px 10px; border: 1.5px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie-2); outline: none; } .fila-fecha input[type="date"]:focus { border-color: var(--marca); } /* El total corriendo. Son lo que JMA dijo que no se debe ocultar, asi que no se ocultan: se adelgazan. El numero y la palabra en la misma linea en vez de uno encima del otro son 15 px menos, y los cuatro datos siguen ahi. */ .chips-conteo { display: flex; gap: 6px; margin-top: 9px; } .chip { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: 4px; padding: 6px 4px; border-radius: 9px; text-align: center; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; overflow: hidden; } .chip b { font-size: 15px; line-height: 1.1; font-weight: 700; } .chip.p { background: var(--presente-bg); color: var(--presente); } .chip.f { background: var(--falta-bg); color: var(--falta); } .chip.r { background: var(--retardo-bg); color: var(--retardo); } .chip.j { background: var(--justif-bg); color: var(--justif); } /* --- La tarjeta del alumno actual (#032) --------------------------------- */ /* Un alumno al frente y la lista corriendo por debajo, las dos a la vez: la tarjeta dice con quien vas, la lista donde estas parado. No necesita `sticky` ni medir la cabecera: la pantalla ya no se desplaza, solo la lista, asi que la tarjeta se queda quieta por construccion. */ .tarjeta-actual { flex: 0 0 auto; z-index: 16; background: var(--superficie); border-bottom: 1px solid var(--borde); /* Con color, no solo con un borde: sobre fondo claro un recuadro blanco encima de una lista blanca no se distingue de la lista. El tinte de la marca la separa de un vistazo y deja legible todo lo que lleva dentro. */ background: var(--marca-tenue); border: 1.5px solid var(--marca); border-radius: var(--radio); box-shadow: var(--sombra); margin: 8px 12px 6px; padding: 9px 12px 10px; } .tarjeta-actual .ta-nom { color: var(--marca); } .tarjeta-actual .ta-nl { color: var(--marca); opacity: .75; } /* Los botones vuelven a fondo blanco: dentro de la tarjeta teñida, el gris de siempre se confundia con ella y dejaba de leerse como boton. */ .tarjeta-actual .ta-marca, .tarjeta-actual .ta-mover { background: var(--superficie); } /* Mientras no se ha decidido por este alumno, la tarjeta lo dice sin gritarlo: ningun boton resaltado y una linea al canto. */ .tarjeta-actual.sin-revisar { box-shadow: var(--sombra), inset 3px 0 0 var(--tinta-adorno); } .ta-cabeza { display: flex; align-items: center; gap: 10px; } .ta-nl { flex: 0 0 26px; font-size: 13px; font-weight: 700; color: var(--tinta-tenue); text-align: right; font-variant-numeric: tabular-nums; } /* El nombre completo, en dos renglones si hace falta. Recortarlo a uno dejaba «GARCIA HERNANDEZ MARIA F…» justo en la tarjeta del alumno al que le vas a hablar, que es donde mas falta hace leerlo entero. */ .ta-nom { flex: 1; min-width: 0; font-size: 17px; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .ta-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 3px 0 0 30px; min-height: 15px; font-size: 11.5px; color: var(--tinta-tenue); } .ta-meta #ta-alerta { display: contents; } /* Sin faltas tambien se dice, en tono bajo: la ausencia de etiqueta se lee igual que «no lo he mirado». */ .ta-meta .etiqueta.suave { color: var(--tinta-adorno); background: transparent; padding-left: 0; } .ta-meta .etiqueta.conducta { background: var(--retardo-bg); color: var(--retardo); font-weight: 600; } .ta-meta .etiqueta { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 5px; background: var(--superficie-2); } .ta-meta .etiqueta.alerta { background: var(--falta-bg); color: var(--falta); font-weight: 600; } .ta-meta .etiqueta svg { width: 11px; height: 11px; } .ta-progreso { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; } .ta-acciones { display: flex; align-items: center; gap: 7px; margin-top: 7px; } .ta-mover { flex: 0 0 36px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--tinta-suave); background: var(--superficie-2); } .ta-mover svg { width: 20px; height: 20px; } .ta-mover:disabled { opacity: .3; } .ta-mover:not(:disabled):active { background: var(--borde); } /* Tres botones explicitos en vez del que cicla: con un alumno a la vez hay espacio, y se acaba el «me pase de vuelta a presente». Los colores son el codigo que el maestro ya tiene aprendido en los botones de la lista. */ .ta-marcas { flex: 1; display: flex; gap: 7px; } /* Una letra y no la palabra. «Asistió / Falta / Retardo» ocupaban tres renglones iguales y largos, que de reojo se leen igual; la inicial en grande se distingue sin leerla. El color sigue siendo el codigo de siempre. */ .ta-marca { flex: 1; height: 42px; border-radius: 12px; font-size: 20px; font-weight: 750; letter-spacing: .02em; border: 2px solid transparent; background: var(--superficie-2); color: var(--tinta-suave); transition: transform .12s, background .12s; } .ta-marca:active { transform: scale(.96); } .ta-marca.P.activa { background: var(--presente-bg); color: var(--presente); border-color: var(--presente); } .ta-marca.F.activa { background: var(--falta-bg); color: var(--falta); border-color: var(--falta); } .ta-marca.R.activa { background: var(--retardo-bg); color: var(--retardo); border-color: var(--retardo); } /* Quien arrastra reportes, dicho en el renglon (#046). Rojo y redondo: es lo unico de la fila que tiene que saltar sin buscarlo. */ .alumno .con-reporte { flex: 0 0 auto; min-width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; padding: 0 5px; border-radius: 10px; background: var(--falta); color: #fff; font-size: 11px; font-weight: 750; line-height: 1; } /* El triangulo distingue el reporte de la nota de un vistazo (#078): antes era un «!» y al lado un icono de cuaderno, y los dos se leian igual de sueltos. */ .alumno .con-reporte svg { width: 12px; height: 12px; } .ta-meta .etiqueta.reporte { background: var(--falta); color: #fff; font-weight: 650; } /* --- Lista de alumnos ---------------------------------------------------- */ .lista-alumnos { list-style: none; margin: 0; padding: 0; } .alumno { display: flex; align-items: center; gap: 10px; padding: 7px 14px; background: var(--superficie); border-bottom: 1px solid var(--borde); transition: background .12s; } .alumno.oculto { display: none; } .alumno:active { background: var(--superficie-2); } /* El renglon del alumno que trae la tarjeta. La lista dice donde estas parado sin que haya que buscarlo, y se desplaza sola para mantenerlo a la vista. */ .alumno.actual { background: var(--marca-tenue); box-shadow: inset 3px 0 0 var(--marca); } .alumno .nl { flex: 0 0 24px; font-size: 12px; font-weight: 650; color: var(--tinta-tenue); text-align: right; font-variant-numeric: tabular-nums; } .avatar { flex: 0 0 28px; height: 28px; font-size: 11px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 680; color: #fff; background: var(--marca); letter-spacing: .02em; } .avatar.m { background: #db2777; } .avatar.h { background: #2563eb; } /* Genero desconocido: gris. No es un tercer valor, es la ausencia de valor, y tiene que verse como tal. Varias listas de la escuela llegan sin la columna de sexo (#017) y sus grupos aparecian enteros del color de los hombres. */ .avatar.sin { background: var(--tinta-tenue); } /* Todo en un renglon. Eran dos --nombre arriba, etiquetas abajo-- y con el avatar de 38 px la fila medía 69: cuatro alumnos llenaban la pantalla. `display: block` no es decoracion: `.nom` es un , y en un elemento inline el `overflow: hidden` y el `text-overflow` no hacen nada. El nombre largo se salia de la fila, ensanchaba la pagina entera y dejaba el contenido a tres cuartos de la pantalla con los botones encimados (#037). */ .alumno .nom { flex: 1; min-width: 0; display: block; font-size: 14px; font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Las faltas acumuladas: un numero y la letra, sin caja. A partir de tres es cuando hay que hacer algo, y ahi si se pinta. */ .alumno .faltas { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--tinta-tenue); font-variant-numeric: tabular-nums; } .alumno .faltas.alta { color: var(--falta); background: var(--falta-bg); padding: 1px 6px; border-radius: 5px; } /* Manda el alto del renglon, asi que su medida es la de la lista entera. A 40 px sigue por encima del minimo comodo para el dedo --44 con el padding del renglon-- y deja ver dos alumnos mas. */ .estado { flex: 0 0 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-weight: 750; font-size: 17px; border: 2px solid transparent; transition: transform .12s, background .12s; } .estado:active { transform: scale(.9); } .estado.P { background: var(--presente-bg); color: var(--presente); } .estado.F { background: var(--falta-bg); color: var(--falta); } .estado.R { background: var(--retardo-bg); color: var(--retardo); } .estado.J { background: var(--justif-bg); color: var(--justif); } /* Nadie ha pasado por este alumno todavia: su «P» es la de nacimiento, no una decision del maestro. Atenuada —sin relleno y con el borde cortado— para que la omision se vea de un vistazo (#032). Es el cambio visual mas grande de la lista y el que hace que el descuido se note. */ .estado.sin-revisar { background: transparent; color: var(--tinta-adorno); border-color: var(--borde); border-style: dashed; font-weight: 600; } .nota-btn { flex: 0 0 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--tinta-tenue); } .nota-btn.con-notas { color: var(--marca); background: var(--marca-tenue); } .nota-btn svg { width: 18px; height: 18px; } /* --- Barra de accion fija ------------------------------------------------ */ .barra-accion { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 8px 14px calc(8px + var(--seguro-abajo)); background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--borde); display: flex; gap: 10px; align-items: center; } .barra-accion .btn { flex: 1; } /* #077: «Opciones» no compite con «Guardar lista»: va al ancho de su texto y con el icono delante, para que se lea de qué es. */ .barra-accion #btn-opciones-lista { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; } .barra-accion #btn-opciones-lista svg { width: 17px; height: 17px; } .barra-accion .btn { white-space: nowrap; } /* En el celular los tres elementos van justos: el estado se adelgaza para que «Guardar lista» no se parta en dos renglones (#077). */ @media (max-width: 400px) { .barra-accion { gap: 7px; padding-left: 10px; padding-right: 10px; } .barra-accion .btn .largo { display: none; } .barra-accion .estado-sync { font-size: 11.5px; padding: 7px 9px; } .barra-accion #btn-opciones-lista { padding-left: 11px; padding-right: 11px; } } /* Se lee de pie, con el telefono en una mano y a un brazo de distancia. */ .estado-sync { font-size: 12.5px; font-weight: 650; padding: 8px 12px; border-radius: 9px; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .estado-sync.pendiente { background: var(--retardo-bg); color: var(--retardo); } .estado-sync.listo { background: var(--presente-bg); color: var(--presente); } .estado-sync.sin-red { background: var(--superficie-2); color: var(--tinta-tenue); } /* Sin terminar: la lista está en el teléfono y no ha subido (#084). Es el estado que el maestro tiene que poder distinguir de un vistazo. */ .estado-sync.borrador { background: var(--marca-tenue); color: var(--marca); } .estado-sync:active { transform: scale(.97); } .estado-sync .punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } /* --- Hoja inferior (notas) ----------------------------------------------- */ /* Cual lista del dia se esta viendo y cuantas horas clase cubre (#031). Vive en la barra de fecha porque es tan parte de "que estoy capturando" como el dia mismo, y se toca para corregir la duracion sin salir de la pantalla. */ /* Cuando la sesion no es la de todos los dias --la segunda lista, o dos horas clase-- el subtitulo lo dice y se marca: ahi cada falta cuenta doble, y enterarse despues es enterarse tarde. */ #lista-subtitulo.sesion-rara { color: var(--retardo); font-weight: 650; } /* La etiqueta que distingue una lista de otra en el historial. */ .etiqueta-lista { margin-left: 6px; padding: 1px 6px; border-radius: 5px; background: var(--fondo); color: var(--marca); font-size: 11px; font-weight: 660; } /* Elegir cual de las listas del dia se corrige. */ /* Los nombres de quienes quedaron sin revisar. Se dicen porque «faltan 3» no sirve para ir a buscarlos (#032). */ .nombres-sin-revisar { list-style: none; margin: 0; padding: 0; } .nombres-sin-revisar li { display: flex; align-items: center; gap: 10px; padding: 9px 2px; font-size: 14px; border-bottom: 1px solid var(--borde); } .nombres-sin-revisar li:last-child { border-bottom: none; } .nombres-sin-revisar .nl { flex: 0 0 26px; text-align: right; font-size: 12px; font-weight: 650; color: var(--tinta-tenue); font-variant-numeric: tabular-nums; } .opcion-lista { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 9px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); color: inherit; font: inherit; cursor: pointer; text-align: left; } .opcion-lista:hover { border-color: var(--marca); } .opcion-lista .orden { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--fondo); color: var(--marca); font-size: 15px; font-weight: 720; } .opcion-lista .detalle { flex: 1; min-width: 0; } .opcion-lista .titulo { display: block; font-weight: 620; font-size: 14px; margin-bottom: 4px; } .opcion-lista .mini { display: flex; gap: 6px; font-size: 11.5px; } .opcion-lista .mini span { padding: 1px 7px; border-radius: 5px; font-weight: 620; } .opcion-lista .mini .p { background: var(--presente-bg); color: var(--presente); } .opcion-lista .mini .f { background: var(--falta-bg); color: var(--falta); } .opcion-lista .mini .r { background: var(--retardo-bg); color: var(--retardo); } .opcion-lista .flecha { flex: none; color: var(--tinta-tenue); } /* De cuantas horas clase es la sesion (#065). Antes era una hoja de cuatro botones que habia que ir a abrir desde el menu de la barra; ahora es este control, en la misma fila de la fecha y siempre visible. La sesion de mas de una hora se ve de reojo, que es lo que importa: ahi cada falta cuenta doble. */ .control-horas { /* No se encoge: es el elemento que se estaba cortando. */ flex: 0 0 auto; display: flex; align-items: center; border: 1.5px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie-2); overflow: hidden; } .control-horas button { width: 30px; align-self: stretch; color: var(--marca); background: none; font-size: 19px; font-weight: 800; line-height: 1; } .control-horas button:disabled { color: var(--tinta-adorno); } .control-horas button:active:not(:disabled) { background: var(--marca-tenue); } .control-horas #horas-texto { min-width: 52px; padding: 7px 2px; text-align: center; font-size: 12.5px; font-weight: 700; white-space: nowrap; } /* Celular angosto: el control se queda en «− 2 h +», que es lo que hay que leer, y le devuelve el ancho a la fecha. */ @media (max-width: 400px) { .fila-fecha { gap: 6px; } .control-horas #horas-texto { min-width: 30px; } .control-horas #horas-texto .unidad { display: none; } .control-horas button { width: 28px; } } /* Dos horas o mas no es el caso de todos los dias: se marca. */ .control-horas.varias { border-color: var(--marca); } .control-horas.varias #horas-texto { color: var(--marca); } /* En el menu de la barra, «que lista del dia es» ya no se toca: es un dato. */ .opcion.dato { box-shadow: none; background: var(--superficie-2); } .opcion.dato .ico { background: var(--borde); color: var(--tinta-tenue); } .velo { position: fixed; inset: 0; z-index: 40; background: rgba(15, 23, 42, .5); opacity: 0; pointer-events: none; transition: opacity .2s; } .velo.abierto { opacity: 1; pointer-events: auto; } .hoja { position: fixed; left: 0; right: 0; bottom: var(--teclado); z-index: 41; max-height: calc(88dvh - var(--teclado)); display: flex; flex-direction: column; background: var(--superficie); border-radius: 22px 22px 0 0; box-shadow: var(--sombra-alta); /* Cerrada baja tambien lo que mide el teclado: si no, con el teclado abierto las hojas cerradas asomaban por encima de el (#057). */ transform: translateY(calc(100% + var(--teclado))); transition: transform .26s cubic-bezier(.32, .72, 0, 1); padding-bottom: var(--seguro-abajo); } .hoja.abierta { transform: translateY(0); } .hoja .asa { width: 38px; height: 4px; border-radius: 2px; background: var(--borde); margin: 10px auto 4px; } .hoja header { padding: 8px 20px 14px; border-bottom: 1px solid var(--borde); } .hoja header h2 { margin: 0; font-size: 17px; letter-spacing: -.01em; } .hoja header p { margin: 3px 0 0; font-size: 12.5px; color: var(--tinta-tenue); } .hoja .cuerpo { overflow-y: auto; padding: 16px 20px; flex: 1; -webkit-overflow-scrolling: touch; } .hoja .pie { padding: 12px 20px 16px; border-top: 1px solid var(--borde); display: flex; gap: 10px; } .categorias { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; } .categoria { padding: 7px 13px; border-radius: 20px; font-size: 12.5px; font-weight: 600; background: var(--superficie-2); border: 1.5px solid var(--borde); color: var(--tinta-suave); } .categoria.activa { background: var(--marca-tenue); border-color: var(--marca); color: var(--marca); } .nota { padding: 13px 14px; border-radius: var(--radio-chico); background: var(--superficie-2); border-left: 3px solid var(--marca); margin-bottom: 10px; } .nota .cab { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--tinta-tenue); margin-bottom: 6px; } .nota .cab .cat { padding: 1px 7px; border-radius: 5px; background: var(--marca-tenue); color: var(--marca); font-weight: 650; } .nota .cab .borrar { margin-left: auto; color: var(--tinta-tenue); } .nota .texto { font-size: 14px; white-space: pre-wrap; word-break: break-word; } /* La hoja de notas, en el celular y con el teclado abierto (#057). Antes el textarea iba en medio del cuerpo y «Agregar nota» debajo: el teclado tapaba los dos y solo quedaban a la vista el nombre y el numero de control. Ahora la cabecera es un renglon, lo que se escribe va en el pie --siempre visible, justo encima del teclado-- y lo unico que se encoge es el historial. */ .hoja-nota .cab-nota { display: flex; align-items: center; gap: 8px; padding: 4px 10px 10px 20px; } .hoja-nota .quien { flex: 1; min-width: 0; } .hoja-nota .quien h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hoja-nota .cuerpo { min-height: 0; } .hoja-nota .redactar { flex-direction: column; gap: 8px; padding: 10px 12px 12px; } .hoja-nota .categorias { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px; scrollbar-width: none; } .hoja-nota .categorias::-webkit-scrollbar { display: none; } .hoja-nota .categoria { flex: 0 0 auto; } /* La ficha del alumno (#078): dos bloques rotulados, y cada uno dice de quien es lo que guarda. La separacion es la que ya funciono en la cedula (#069). */ .bloque-ficha + .bloque-ficha { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borde); } .bloque-ficha .seccion-titulo { margin-bottom: 2px; } .bloque-ficha .de-quien { font-size: 12.5px; color: var(--tinta-tenue); margin: 0 0 10px; } .resumen-ficha { font-size: 14px; color: var(--tinta-tenue); margin: 0 0 10px; } .resumen-ficha.hay { color: var(--falta); font-weight: 650; } .btn.bloque { width: 100%; } /* El pie escribe notas, y solo notas: sin el rotulo era el unico sitio de la hoja sin dueno, justo debajo del bloque de reportes. */ .hoja-nota .pie-rotulo { font-size: 12.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); margin: 0; } /* Desde una nota de conducta se puede levantar el reporte, pero se dice que es otra cosa: por eso el pie va separado y en letra chica, no como un boton mas. */ .nota-pie { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--borde); font-size: 12.5px; color: var(--tinta-tenue); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; } .nota-pie .enlace { color: var(--falta); font-weight: 650; font-size: 12.5px; text-decoration: underline; padding: 2px 0; } .fila-redactar { display: flex; gap: 8px; align-items: flex-end; } .fila-redactar textarea { flex: 1; min-width: 0; min-height: 48px; max-height: 30dvh; resize: none; padding: 11px 12px; border: 1.5px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie-2); outline: none; font-size: 16px; /* con menos, iOS hace zoom al enfocar */ } .fila-redactar textarea:focus { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-tenue); } .fila-redactar .btn { width: auto; flex: 0 0 auto; padding: 13px 16px; } /* Lo que se leyo del horario, antes de guardarlo (#058). Es una revision, no la vista del horario: una lista por dia, sin cuadricula. */ /* `.aviso` es rojo de fabrica. Aqui un aviso no impide guardar, y en rojo se leia como error: va en ambar, y el rojo queda para lo que si lo impide. */ .lectura-mensajes .aviso { margin-bottom: 8px; background: var(--retardo-bg); color: #7c2d12; } .lectura-mensajes .aviso.lectura-error { background: var(--falta-bg); color: var(--falta); border-color: var(--falta); } .lectura-resumen { margin: 4px 0 14px; font-size: 13px; font-weight: 600; color: var(--tinta-suave); } .lectura-dia { margin-bottom: 14px; } .lectura-dia-nombre { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-tenue); } .lectura-bloque { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 9px 12px; margin-bottom: 6px; border-radius: var(--radio-chico); background: var(--superficie-2); } .lectura-hora { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--tinta-suave); min-width: 86px; } .lectura-grupo { font-weight: 800; font-size: 14px; } .lectura-materia { flex: 1 1 160px; min-width: 0; font-size: 13px; } .lectura-materia i { display: block; font-style: normal; font-size: 11.5px; color: var(--tinta-tenue); } /* Grupos y materias desde el horario (#058, fase 2). */ .concilia-fila { padding: 12px 14px; margin-bottom: 10px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); } .concilia-cab { display: flex; align-items: center; gap: 10px; } .concilia-grupo { font-weight: 800; font-size: 16px; } .concilia-estado { margin-left: auto; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 700; background: var(--superficie-2); color: var(--tinta-suave); } .concilia-estado.concilia-ok { background: var(--presente-bg); color: var(--presente); } .concilia-estado.concilia-parecida { background: var(--justif-bg); color: var(--justif); } .concilia-estado.concilia-falta { background: var(--retardo-bg); color: var(--retardo); } .concilia-grupo { white-space: nowrap; } .concilia-titulo { margin: 6px 0 2px; font-size: 14px; font-weight: 600; } .concilia-detalle { margin: 0 0 8px; font-size: 12px; color: var(--tinta-tenue); } .concilia-ligada { margin: 0; font-size: 13px; color: var(--presente); } .concilia-accion, .concilia-nombre { width: 100%; padding: 10px 12px; margin-top: 6px; border: 1.5px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie-2); font-size: 16px; } .concilia-sobra { padding: 8px 12px; margin-bottom: 6px; border-radius: var(--radio-chico); background: var(--superficie-2); font-size: 13px; } .marca-sala { padding: 2px 8px; border-radius: 20px; font-size: 11.5px; font-weight: 700; background: var(--retardo-bg); color: var(--retardo); } /* --- Historial ----------------------------------------------------------- */ .sesion { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); margin-bottom: 10px; } .sesion .dia { flex: 0 0 50px; text-align: center; padding: 7px 0; border-radius: 10px; background: var(--marca-tenue); color: var(--marca); } .sesion .dia b { display: block; font-size: 19px; line-height: 1.1; } .sesion .dia span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; } .sesion .resumen { flex: 1; } .sesion .resumen .linea1 { font-weight: 600; font-size: 14px; margin-bottom: 4px; } .sesion .mini { display: flex; gap: 6px; font-size: 11.5px; } .sesion .mini span { padding: 1px 7px; border-radius: 5px; font-weight: 620; } .sesion .mini .p { background: var(--presente-bg); color: var(--presente); } .sesion .mini .f { background: var(--falta-bg); color: var(--falta); } .sesion .mini .r { background: var(--retardo-bg); color: var(--retardo); } .sesion .mini .j { background: var(--justif-bg); color: var(--justif); } /* --- Avisos flotantes ---------------------------------------------------- */ #brindis { position: fixed; left: 50%; bottom: calc(96px + var(--seguro-abajo)); transform: translate(-50%, 20px); z-index: 60; max-width: calc(100vw - 40px); padding: 12px 18px; border-radius: 30px; background: var(--tinta); color: var(--fondo); font-size: 13.5px; font-weight: 560; box-shadow: var(--sombra-alta); opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s; } #brindis.visible { opacity: 1; transform: translate(-50%, 0); } #brindis.error { background: var(--falta); color: #fff; } .cargando { display: grid; place-items: center; padding: 60px 0; } .giro { width: 30px; height: 30px; border: 3px solid var(--borde); border-top-color: var(--marca); border-radius: 50%; animation: gira .7s linear infinite; } @keyframes gira { to { transform: rotate(360deg); } } /* --- Pantallas anchas: la misma app se ve bien en la laptop -------------- */ @media (min-width: 760px) { .vista.activa { max-width: 720px; margin: 0 auto; box-shadow: var(--sombra); background: var(--fondo); } .barra-accion { max-width: 720px; left: 50%; transform: translateX(-50%); border-radius: 16px 16px 0 0; } .hoja { max-width: 620px; left: 50%; transform: translate(-50%, calc(100% + var(--teclado))); border-radius: 22px 22px 0 0; } .hoja.abierta { transform: translate(-50%, 0); } } /* --- La primera pantalla, direccion B «Mosaicos de color» (#053) ---------- */ /* [JMA+Claude 2026-09-12] JMA la encontraba sosa y monotona. Eligio la direccion B de la maqueta: cada grupo es un bloque de su color, el avance del dia en un anillo y la navegacion al alcance del pulgar. - La letra es Nunito, guardada dentro de la aplicacion: una fuente de Google no carga en el aula sin senal. Solo la usa esta pantalla por ahora; las demas se revisan despues, por partes. - Los colores de los bloques salen de una paleta cerrada (app.js, PALETA_MATERIAS) que no se acerca al verde, rojo, ambar ni azul de la asistencia. - La barra y el anillo siguen la paleta elegida en Ajustes (indigo o azul). Los estilos de .portada, .chip-horario y .tarjeta-materia de abajo quedan sin uso en esta pantalla y se conservan tal cual. */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("../fonts/nunito-latin.woff2") format("woff2"); } #vista-menu { font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } #vista-menu button { font-family: inherit; } /* Deja libre lo que tapa la barra de abajo. */ #vista-menu .contenido { padding-bottom: calc(100px + var(--seguro-abajo)); } .portada-b { padding: calc(var(--seguro-arriba) + 20px) 16px 4px; display: flex; flex-direction: column; gap: 14px; } .saludo-fila { display: flex; align-items: center; gap: 12px; } .saludo-fila .crece { flex: 1; min-width: 0; } .avatar-b { flex: 0 0 46px; height: 46px; border-radius: 16px; background: var(--marca-honda); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 16px; } .portada-b .hoy { margin: 0; font-size: 13px; font-weight: 700; color: var(--tinta-tenue); } .portada-b h1 { margin: 0; font-size: 21px; font-weight: 900; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; } .portada-b .correo { margin: 1px 0 0; font-size: 13px; font-weight: 600; color: var(--tinta-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .resumen-hoy { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 22px; background: var(--superficie); box-shadow: var(--sombra); } .resumen-hoy .crece { flex: 1; min-width: 0; } .resumen-hoy .titulo { margin: 0; font-size: 16px; font-weight: 900; } .resumen-hoy .detalle { margin: 1px 0 0; font-size: 13.5px; font-weight: 600; color: var(--tinta-suave); } .anillo { flex: 0 0 56px; height: 56px; border-radius: 50%; background: conic-gradient(var(--marca) calc(var(--avance) * 1%), var(--borde) 0); display: grid; place-items: center; } .anillo span { width: 42px; height: 42px; border-radius: 50%; background: var(--superficie); display: grid; place-items: center; font-size: 14px; font-weight: 900; } /* La barra de navegacion. Flota abajo en el celular, que es donde llega el pulgar; en la laptop sube a la cabecera (ver el bloque de pantallas anchas). */ .nav-principal { position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--seguro-abajo)); z-index: 30; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 64px; border-radius: 22px; background: var(--marca-honda); box-shadow: var(--sombra-alta); } .nav-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 64px; color: rgba(255, 255, 255, .62); font-size: 11.5px; font-weight: 800; } .nav-btn svg { width: 22px; height: 22px; } .nav-btn.activo { color: #fff; } .nav-btn:active { color: #fff; } /* Los bloques. Con pocos grupos, dos columnas; con mas de cuatro, una sola columna de renglones bajos: dos columnas de ocho colores ya no se leen. */ .mosaico { display: grid; grid-template-columns: 1fr; gap: 12px; } .mosaico.pocos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .bloque { display: flex; flex-direction: column; border-radius: 24px; /* #058: pastel con texto oscuro; antes, tonos hondos con texto blanco. */ background: var(--color-materia); color: var(--tinta-materia); overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-materia-fuerte) 18%, transparent), var(--sombra); } /* Lo hecho se apaga un poco: lo que falta tiene que destacar (#006). */ .bloque.hecha { filter: saturate(.55); } /* Sin clase hoy segun el horario (#058): no reclama nada. */ .bloque.sin-clase { filter: saturate(.7); } .bloque-principal { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 180px; padding: 16px; color: inherit; text-align: left; } .bloque-principal::before { content: ""; position: absolute; right: -26px; top: -26px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255, 255, 255, .4); pointer-events: none; } .bloque-principal > * { position: relative; } .bloque-principal:active, .bloque-accion:active { background: rgba(0, 0, 0, .06); } /* #064: el grupo era 42px y se comia la tarjeta. Sigue siendo lo primero que se ve, pero deja sitio al nombre de la materia y a lo que venga despues. */ .bloque .grupo { font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--color-materia-fuerte); } /* #076: el sello y la última lista bajaron al pie de la ficha, en vez de ir al lado del nombre. En el renglón del celular le robaban la mitad del ancho al nombre de la materia, que es lo que hay que leer. */ .bloque .info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .bloque .pie { margin-top: auto; display: flex; align-items: center; gap: 8px; min-width: 0; } .bloque .nombre { font-size: 15.5px; font-weight: 800; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /* Sin `anywhere`: partía «Administració/n» a media palabra (#076). */ overflow: hidden; } /* #064: aqui iba «28 alumnos». Ese dato no dice nada al abrir el grupo y le quitaba el renglon al nombre de la materia. La clase queda para lo que se ponga en su lugar (la hora de hoy, la sala). */ .bloque .detalle { font-size: 13px; font-weight: 600; opacity: .88; } /* Los sellos van en tonos claros fijos, no en los de la paleta: sobre un bloque de color tienen que leerse igual en modo claro y en oscuro. */ .bloque .sello { flex: 0 0 auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; } .bloque .sello svg { width: 13px; height: 13px; } /* #064: en el renglon estrecho del celular la tarjeta se dice mas corta, para que el nombre de la materia se quede con el ancho. Vale para el sello y para el renglon de la ultima lista (#073). */ .bloque .corto { display: none; } .bloque .sello.pendiente { background: #fef3c7; color: #b45309; } .bloque .sello.hecho { background: #d1fae5; color: #047857; } .bloque .sello.libre { background: rgba(255, 255, 255, .7); color: #475569; } /* La lista que quedó a medias (#085). Es la hoja a medio llenar encima del escritorio: se ve, y no se le dice nada más al maestro. */ .bloque .sello.a-medias { background: var(--marca); color: #fff; } .bloque.sin-terminar { box-shadow: inset 0 0 0 2px var(--marca), var(--sombra); filter: none; } /* Con clase hoy, antes de la hora: dice a que hora, sin reclamar (#058). */ .bloque .sello.proxima { background: rgba(255, 255, 255, .8); color: #1e293b; } .bloque-acciones { display: flex; flex-direction: column; background: rgba(255, 255, 255, .5); } .bloque-accion { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; color: inherit; text-align: left; font-size: 13px; font-weight: 800; } .bloque-accion + .bloque-accion { border-top: 1px solid color-mix(in srgb, var(--color-materia-fuerte) 20%, transparent); } .bloque-accion svg { width: 16px; height: 16px; flex: 0 0 16px; } .bloque-accion .etiqueta { flex: 1; } .bloque-accion .cuenta { padding: 1px 7px; border-radius: 999px; background: #fee2e2; color: #dc2626; font-size: 12px; font-weight: 900; } /* Muchos grupos en el celular: renglones de una columna, con las dos consultas como iconos a la derecha. */ @media (max-width: 759px) { .mosaico:not(.pocos) .bloque { flex-direction: row; border-radius: 20px; } .mosaico:not(.pocos) .bloque-principal { flex: 1; min-width: 0; min-height: 84px; flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; } .mosaico:not(.pocos) .bloque-principal::before { width: 80px; height: 80px; right: -30px; top: -30px; } /* #064: el grupo mas chico y sin columna ancha; el nombre de la materia a dos renglones, que era lo que se cortaba a la mitad en el celular. */ /* #076: el grupo era 22px y seguía siendo lo más grande del renglón; JMA: «el número y letra del grupo está muy grande». */ .mosaico:not(.pocos) .grupo { flex: 0 0 auto; min-width: 40px; font-size: 18.5px; } .mosaico:not(.pocos) .info { flex: 1; gap: 3px; } /* El sello y la última lista no se pelean por el mismo renglón: si están los dos, la fecha baja a su línea. Solo pasa los días sin clase, que es cuando no hay prisa (#076). */ .mosaico:not(.pocos) .pie { margin-top: 0; flex-wrap: wrap; row-gap: 3px; } .mosaico:not(.pocos) .pie .detalle { flex: 1 0 100%; } .mosaico:not(.pocos) .nombre { -webkit-line-clamp: 2; font-size: 14.5px; } /* #073, corregido en #076: el renglón de «última lista» solo sale los días sin clase. Se decía «Últ.: jue 17» y JMA no lo alcanzaba a leer: el problema no era el largo, era la abreviatura. Ahora va entero y un punto más grande; el nombre conserva sus dos renglones. */ .mosaico:not(.pocos) .detalle { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mosaico:not(.pocos) .sello { align-self: center; } .mosaico:not(.pocos) .bloque .largo { display: none; } .mosaico:not(.pocos) .bloque .corto { display: inline; } .mosaico:not(.pocos) .sello { font-size: 11.5px; padding: 4px 8px; } .mosaico:not(.pocos) .bloque-acciones { flex: 0 0 52px; } .mosaico:not(.pocos) .bloque-accion { flex: 1; justify-content: center; padding: 0; min-height: 42px; position: relative; } .mosaico:not(.pocos) .bloque-accion + .bloque-accion { border-top: 1px solid color-mix(in srgb, var(--color-materia-fuerte) 20%, transparent); } .mosaico:not(.pocos) .bloque-accion svg { width: 19px; height: 19px; flex-basis: 19px; } .mosaico:not(.pocos) .bloque-accion .etiqueta { display: none; } .mosaico:not(.pocos) .bloque-accion .cuenta { position: absolute; top: 3px; right: 4px; padding: 0 5px; font-size: 10.5px; } } /* En «Editar materia» el color se elige de la misma paleta. */ .muestras-color { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .muestra-color { height: 44px; border-radius: 12px; background: var(--c); border: 3px solid transparent; box-shadow: inset 0 -6px 0 var(--c-fuerte, transparent); } .muestra-color[aria-checked="true"] { border-color: var(--tinta); box-shadow: inset 0 0 0 2px var(--superficie); } @media (min-width: 760px) { #vista-menu.activa { max-width: 1040px; } .nav-principal { position: sticky; top: 0; left: auto; right: auto; bottom: auto; order: -1; display: flex; gap: 4px; min-height: 60px; padding: calc(var(--seguro-arriba) + 0px) 24px 0; border-radius: 0; box-shadow: none; } .nav-btn { flex-direction: row; gap: 8px; min-height: 60px; padding: 0 16px; font-size: 14.5px; } .nav-btn svg { width: 19px; height: 19px; } .nav-btn.activo { box-shadow: inset 0 -3px 0 #fff; } .portada-b { padding: 28px 24px 4px; } .portada-b h1 { font-size: 28px; } #vista-menu .contenido { padding: 16px 24px calc(32px + var(--seguro-abajo)); } .resumen-hoy { max-width: 420px; } .mosaico, .mosaico.pocos { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; } .bloque-principal { min-height: 200px; padding: 20px; } .bloque .grupo { font-size: 52px; } } /* --- Portada: quien eres y que toca hoy ---------------------------------- */ /* La pantalla que mas se ve era la mas pobre: un nombre a secas sobre blanco. Ahora ancla la aplicacion —color de marca, jerarquia clara— y responde de un vistazo a las dos preguntas de cada manana: de quien es esta sesion y que horario tengo. */ .portada { padding: calc(var(--seguro-arriba) + 18px) 16px 16px; background: linear-gradient(160deg, var(--marca-honda), var(--marca-honda2)); color: var(--sobre-marca); } .fila-portada { display: flex; align-items: flex-start; gap: 12px; } .portada .crece { flex: 1; min-width: 0; } .portada .hoy { margin: 0 0 4px; font-size: 12.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--sobre-marca) 78%, transparent); } .portada h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; } .portada .correo { margin: 4px 0 0; font-size: 13px; color: color-mix(in srgb, var(--sobre-marca) 82%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .icono-btn.claro { color: var(--sobre-marca); } .icono-btn.claro:active { background: rgba(255, 255, 255, .18); } /* El horario, a un toque. Va dentro de la portada y no en la lista de materias: no es un grupo donde pasar lista, es una consulta. */ .chip-horario { margin-top: 16px; display: flex; align-items: center; gap: 9px; padding: 11px 14px; width: 100%; border: 0; border-radius: var(--radio-chico); background: rgba(255, 255, 255, .16); color: var(--sobre-marca); font: inherit; font-size: 14px; font-weight: 620; cursor: pointer; } .chip-horario:active { background: rgba(255, 255, 255, .26); } .chip-horario svg { width: 18px; height: 18px; flex: 0 0 18px; } /* --- El horario a pantalla completa -------------------------------------- */ #horario-pantalla.modo-pdf { min-height: 60vh; display: grid; place-items: center; } #horario-pantalla img { max-width: 100%; height: auto; display: block; /* Un horario escolar es una tabla ancha: dejar acercar con los dedos es la diferencia entre leerlo y adivinarlo. */ touch-action: pinch-zoom; } #horario-pantalla iframe { width: 100%; height: 78vh; border: 0; } #horario-pantalla .vacio { padding: 40px 24px; } /* --- El horario a colores (#058, fase 3) --------------------------------- Cada clase es un bloque del color de su materia, con el grupo en grande. Las horas en laboratorio o sala llevan una franja y una etiqueta amarillas: no se confunden con ningun color de materia ni con los de asistencia. */ #horario-pantalla:not(.modo-pdf) { padding: 12px 16px 28px; } .hc-volver { margin: 0 0 10px; } .hc-dias { display: flex; gap: 6px; margin-bottom: 14px; } .hc-dia { flex: 1; padding: 10px 0; border-radius: 12px; font-weight: 800; font-size: 14px; background: var(--superficie); color: var(--tinta-suave); box-shadow: var(--sombra); } .hc-dia.hoy { color: var(--marca); } .hc-dia.activo { background: var(--marca); color: var(--sobre-marca); } /* #058: el dia es una cuadricula de horas --numero y hora a la izquierda, cada hora en su renglon--, para que la primera clase no parezca la primera hora. */ .hc-cuerpo { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; row-gap: 8px; } .hc-cuerpo > :not(.hc-hl) { grid-column: 2; } .hc-cuerpo > .vacio { grid-column: 1 / -1; } .hc-hl { grid-column: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; font-size: 15px; font-weight: 900; line-height: 1.1; color: var(--tinta-suave); font-variant-numeric: tabular-nums; } .hc-hl small { font-size: 10.5px; font-weight: 600; color: var(--tinta-tenue); } .hc-celda { display: grid; } .hc-cuerpo .hc-bloque { min-height: 0; } .hc-bloque { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-content: center; min-height: calc(62px * var(--horas, 1) + 8px * (var(--horas, 1) - 1)); padding: 12px 14px 12px 18px; border-radius: var(--radio); background-color: var(--color-materia, var(--superficie-2)); color: var(--tinta-materia); background-image: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 62%); box-shadow: inset 5px 0 0 var(--color-materia-fuerte, var(--borde)), var(--sombra); overflow: hidden; } .hc-bloque > :not(.hc-grupo):not(.hc-franjas) { grid-column: 2; } /* El texto va encima de las franjas, que son solo fondo. */ .hc-bloque > :not(.hc-franjas) { position: relative; z-index: 1; } .hc-grupo { grid-row: 1 / span 5; align-self: center; min-width: 58px; font-size: 28px; font-weight: 900; letter-spacing: -.02em; line-height: 1; color: var(--color-materia-fuerte); } .hc-sub, .concilia-sub { justify-self: start; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--color-materia-fuerte, var(--marca)); } .concilia-sub { display: block; } .hc-materia { font-weight: 700; font-size: 14px; line-height: 1.25; padding-right: 54px; } .hc-hora { margin-top: 3px; font-size: 12px; opacity: .8; font-variant-numeric: tabular-nums; } /* [JMA+Claude 2026-09-18] Una sesion de dos horas se pintaba como un solo cuadro rayado de punta a punta: el centro de computo parecia dos horas de laboratorio cuando era una de laboratorio y una de aula. Ahora el cuadro lleva marco, una division por hora, y el amarillo va solo en la hora que de verdad esta en sala. */ .hc-franjas { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; border-radius: inherit; overflow: hidden; pointer-events: none; } .hc-franja { flex: 1 1 0; min-height: 0; } /* La division entre horas: punteada, porque parte una sesion, no la corta. */ .hc-franja + .hc-franja { border-top: 1.5px dashed rgba(0, 0, 0, .22); } .hc-franja.lab { background-image: linear-gradient(90deg, rgba(234, 179, 8, .34), rgba(234, 179, 8, .06) 58%, transparent); box-shadow: inset 7px 0 0 #eab308; } /* El marco dice «esto es una sola sesion» pese a las divisiones de adentro. */ .hc-bloque.multi { box-shadow: inset 5px 0 0 var(--color-materia-fuerte, var(--borde)), inset 0 0 0 2px var(--color-materia-fuerte, var(--borde)), var(--sombra); /* El texto vive en la primera hora de la sesion: centrado en todo el cuadro le caia encima la division. */ align-content: start; } .hc-lab { justify-self: start; margin-top: 6px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 800; background: #fde047; color: #422006; box-shadow: inset 0 0 0 1px #ca8a04; } .hc-lab::before { content: 'LAB · '; letter-spacing: .04em; } .hc-bloque.ahora { outline: 3px solid var(--tinta); outline-offset: 2px; } .hc-bloque.ahora::after, .hc-bloque.sigue::after { position: absolute; z-index: 2; top: 9px; right: 10px; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: #1e293b; color: #fff; } .hc-bloque.ahora::after { content: 'Ahora'; } .hc-bloque.sigue::after { content: 'Sigue'; } .hc-receso { padding: 7px 12px; border-radius: var(--radio-chico); text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-tenue); border: 1px dashed var(--borde); background-image: linear-gradient(180deg, var(--superficie-2), transparent); } .hc-libre, .hc-vacia { display: flex; align-items: center; padding: 9px 14px; border-radius: var(--radio-chico); font-size: 12px; font-weight: 600; color: var(--tinta-tenue); border: 1.5px dashed var(--borde); } .hc-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; font-size: 12px; color: var(--tinta-suave); } .hc-leyenda { display: inline-flex; align-items: center; gap: 6px; } .hc-muestra { display: inline-block; width: 16px; height: 16px; border-radius: 4px; } /* Aula no es un color: las clases en aula van del color de su materia. La muestra solo dice «sin franja amarilla». */ .hc-muestra.aula { background: var(--tinta-suave); } .hc-muestra.lab { background: #fde047; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); } .hc-pie .btn-enlace { margin: 0 0 0 auto; } .hc-avisos { margin-top: 12px; font-size: 12.5px; color: var(--tinta-suave); } .hc-avisos summary { cursor: pointer; font-weight: 700; } .hc-avisos p { margin: 6px 0 0; } .hc-semana { display: none; } /* En la laptop, la semana entera. */ @media (min-width: 760px) { .hc-dias, .hc-cuerpo { display: none; } .hc-semana { display: block; overflow-x: auto; } .hc-grid { display: grid; gap: 6px; grid-template-columns: 70px repeat(var(--dias), minmax(112px, 1fr)); grid-auto-rows: minmax(62px, auto); } .hc-cab { padding: 6px 0; text-align: center; font-weight: 800; color: var(--tinta-suave); } .hc-cab.hoy { color: var(--marca); } .hc-horacol { display: flex; flex-direction: column; justify-content: center; font-weight: 800; font-size: 14px; color: var(--tinta-suave); } .hc-horacol small { font-weight: 500; font-size: 10.5px; color: var(--tinta-tenue); } .hc-celda { display: grid; } .hc-grid .hc-bloque { min-height: 0; grid-template-columns: 1fr; padding: 9px 10px 9px 14px; } .hc-grid .hc-bloque > :not(.hc-franjas) { grid-column: 1; } .hc-grid .hc-grupo { grid-row: auto; min-width: 0; font-size: 20px; } .hc-grid .hc-vacia { justify-content: center; font-size: 11px; } .hc-grid .hc-materia { font-size: 12px; padding-right: 0; } .hc-grid .hc-receso { display: grid; place-items: center; } } /* La semana no cabe en los 720 px de las demas vistas: los nombres largos se amontonaban. Solo esta vista crece. */ @media (min-width: 1000px) { #vista-horario.activa { max-width: 1100px; } } /* --- Las clases de hoy en la primera pantalla (#058, fase 4) -------------- */ .hoy-clases { margin-bottom: 24px; } .hoy-clases .seccion-titulo { margin-bottom: 2px; } .hoy-detalle { margin: 0 0 12px; font-size: 13.5px; font-weight: 600; color: var(--tinta-suave); } .hoy-detalle .btn-enlace { display: block; margin: 4px 0 0; padding: 0; } .hoy-lista { display: grid; gap: 8px; } .hoy-clase { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 11px 12px 11px 0; border-radius: 18px; text-align: left; background: var(--color-materia); color: var(--tinta-materia); box-shadow: inset 5px 0 0 var(--color-materia-fuerte), var(--sombra); font-family: inherit; } .hoy-clase:active { filter: brightness(.96); } .hoy-clase.ahora { outline: 3px solid var(--tinta); outline-offset: 2px; } .hoy-clase.hecha { filter: saturate(.55); } .hoy-hora { display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; } .hoy-hora small { font-size: 11px; font-weight: 600; opacity: .7; } .hoy-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .hoy-grupo { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 900; line-height: 1.05; color: var(--color-materia-fuerte); } .hoy-marca { padding: 2px 7px; border-radius: 20px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: #1e293b; color: #fff; } .hoy-materia { font-size: 13.5px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hoy-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; opacity: .85; } .hoy-extra .hc-lab { margin: 0; padding: 1px 8px; font-size: 11px; opacity: 1; } .hoy-sello { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; } .hoy-sello svg { width: 12px; height: 12px; } .hoy-sello.pendiente { background: #fef3c7; color: #b45309; } .hoy-sello.hecho { background: #d1fae5; color: #047857; } .hoy-sello.neutro { background: rgba(255, 255, 255, .7); color: #475569; } /* #058 fase 5: el sello y «No hubo» a la derecha de la tarjeta. */ .hoy-clase { cursor: pointer; } .hoy-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .hoy-no-hubo { padding: 4px 10px; border-radius: 999px; font: inherit; font-size: 11.5px; font-weight: 800; white-space: nowrap; background: rgba(255, 255, 255, .55); color: var(--tinta-materia); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-materia-fuerte) 35%, transparent); } .hoy-no-hubo:active { background: rgba(255, 255, 255, .85); } /* Clases sin registro de dias anteriores (#058 fase 5). */ .pendientes { margin: -8px 0 24px; } .pendientes details { border-radius: 16px; background: var(--superficie); box-shadow: var(--sombra); border: 1px solid var(--borde); } .pendientes summary { display: flex; flex-direction: column; gap: 1px; padding: 12px 14px; cursor: pointer; list-style: none; } .pendientes summary::-webkit-details-marker { display: none; } .pend-titulo { font-size: 14px; font-weight: 900; color: var(--retardo); } .pend-titulo::before { content: '▸ '; } .pendientes details[open] .pend-titulo::before { content: '▾ '; } .pend-pista { font-size: 12.5px; font-weight: 600; color: var(--tinta-tenue); } .pend-lista { display: grid; gap: 6px; padding: 0 10px 12px; } .pend-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 8px 10px 8px 14px; border-radius: 12px; background: color-mix(in srgb, var(--color-materia) 55%, var(--superficie)); box-shadow: inset 4px 0 0 var(--color-materia-fuerte); color: var(--tinta); } .pend-info { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; } .pend-info small { font-size: 12px; color: var(--tinta-suave); } .pend-acciones { display: flex; gap: 14px; } .pend-acciones .btn-enlace { margin: 0; padding: 4px 0; font-size: 13px; } .sin-clase-contexto { font-weight: 800; color: var(--tinta); } /* #060: si salio la invitacion por correo. */ .aviso-correo { margin: 4px 0 10px; padding: 10px 12px; border-radius: var(--radio-chico); font-size: 13.5px; font-weight: 600; background: var(--retardo-bg); color: var(--tinta); } .aviso-correo.ok { background: var(--presente-bg); } /* En Números: las clases que tocaban segun el horario. */ .tarjeta-clases { margin-top: 14px; padding: 14px 16px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); } .tarjeta-clases .seccion-titulo { margin: 0 0 10px; } .tarjeta-clases .rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; } .tarjeta-clases .rejilla b { display: block; font-size: 22px; font-weight: 800; } .tarjeta-clases .rejilla span { font-size: 11.5px; color: var(--tinta-suave); } .tarjeta-clases .rejilla .alerta b { color: var(--retardo); } .tarjeta-clases .motivos { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--tinta-suave); } .tarjeta-clases .pista, .tarjeta-clases .periodo { margin: 8px 0 0; font-size: 12px; color: var(--tinta-tenue); } @media (min-width: 760px) { .hoy-lista { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } } /* En oscuro los pastel deslumbran: se funden con la superficie y el texto va claro (--tinta-materia cambia arriba). */ @media (prefers-color-scheme: dark) { .bloque, .hc-bloque, .hoy-clase { background-color: color-mix(in srgb, var(--color-materia-fuerte) 34%, var(--superficie)); } .bloque .grupo, .hc-grupo, .hoy-grupo, .hc-sub { color: color-mix(in srgb, var(--color-materia) 75%, #fff); } .bloque-acciones { background: rgba(0, 0, 0, .2); } .bloque .sello.libre, .hoy-sello.neutro { background: rgba(255, 255, 255, .14); color: #e2e8f0; } } /* --- Elegir la paleta ---------------------------------------------------- */ .temas { display: flex; gap: 10px; } .tema { flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--superficie); border: 2px solid var(--borde); border-radius: var(--radio-chico); color: var(--tinta); font: inherit; font-size: 13.5px; font-weight: 620; cursor: pointer; } .tema[aria-pressed="true"] { border-color: var(--marca); } .tema .muestra { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); } /* --- La tarjeta de materia (#006) ---------------------------------------- */ /* Es el elemento central de la aplicacion —donde se elige adonde se va a pasar lista— y era una caja blanca con una franja de 4px. Ahora: - un distintivo con la abreviatura en el color de la materia, que es lo que permite reconocer la tarjeta sin leerla; - el estado de hoy con peso propio, porque es la pregunta que se hace al abrir la aplicacion; - y lo ya hecho, apagado: lo que falta tiene que destacar sobre lo hecho. */ .materia { gap: 13px; padding: 14px; border: 1px solid var(--borde); align-items: center; } .materia.hecha { background: var(--superficie-2); } .materia.hecha .nombre { color: var(--tinta-suave); } .materia .distintivo { flex: 0 0 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--color-materia, var(--marca)) 14%, var(--superficie)); color: var(--color-materia, var(--marca)); font-size: 13px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; } .materia.hecha .distintivo { opacity: .55; } /* El estado de hoy, con cuerpo suficiente para leerlo de pie y a un brazo. */ .materia .sello { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 12px; font-weight: 680; } .materia .sello svg { width: 13px; height: 13px; } .materia .sello.pendiente { background: var(--retardo-bg); color: var(--retardo); } .materia .sello.hecho { background: var(--presente-bg); color: var(--presente); } /* Los estados vacios eran un icono y una frase sueltos en medio de la nada. Se les da una caja, para que parezcan una respuesta y no un error. */ .vacio { text-align: center; padding: 36px 24px; color: var(--tinta-tenue); background: var(--superficie); border: 1px dashed var(--borde); border-radius: var(--radio); } .vacio svg { width: 44px; height: 44px; opacity: .4; margin-bottom: 12px; color: var(--tinta-adorno); } .vacio p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; } /* --- Aviso de version nueva (#028) --------------------------------------- */ /* Va abajo, donde esta el pulgar, y con el color de marca: no es un error ni una alerta, es una cosa que se puede tocar cuando se quiera. Solo aparece si recargar solo interrumpiria algo; el resto del tiempo la aplicacion se actualiza sin decir nada. */ #hay-version { position: fixed; left: 50%; bottom: calc(96px + var(--seguro-abajo)); transform: translateX(-50%); z-index: 61; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 11px 18px; border: 0; border-radius: 30px; background: var(--marca); color: var(--sobre-marca); font: inherit; font-size: 13.5px; font-weight: 620; box-shadow: var(--sombra-alta); cursor: pointer; } #hay-version:active { background: var(--marca-fuerte); } #hay-version svg { flex: 0 0 16px; }