/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ Selah · Profesor (14 oct · DISENO-SELAH §1 y §2 «Respiro»), sobre la base de selah.css. Inventario: docs/selah-profesor.md. Mis clases: la clase que toca es una tarjeta héroe ancha con .halo (el nombre grande en Darker Grotesque, las caras en píldoras, lo que falta y la acción en píldora azul); las demás, compactas, en la columna «Después»; en iPhone se apila. Grupo, modo clase, Mis alumnos y Factura: vidrio sobre el cielo, la letra de marca solo en títulos y cifras. Asistencia (manda sobre todo lo demás): presente = tinte y marca azules · ausente = tinte, marca y palabra grises (17 oct) · sin marcar / sin tomar = blanco neutro con contorno punteado. Cada selector empieza por :root[data-diseno="selah"]. Sin backdrop-filter en tarjetas (rendimiento, comentario 23): el vidrio de aquí es color translúcido sobre el cielo, que ya es liso. ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */ /* ═════ 0 · marcas de asistencia: la ✕ del ausente en el gris de ausente (17 oct; antes rojo) y la ✓ en azul (profesor.css) ═════ */ :root[data-diseno="selah"] { --marca-ausente: var(--ausente) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 62% no-repeat; --heroe-radio: 36px; } /* ═════════════ 1 · Mis clases · «Respiro» ═════════════ */ :root[data-diseno="selah"] .mc-respiro { gap: 6px; } /* el título por encima de la luz del halo (que se derrama hacia arriba) */ :root[data-diseno="selah"] .mc-respiro > .mc-cab { position: relative; z-index: 1; } :root[data-diseno="selah"] .mc-respiro .titulo-fila .sub::first-letter { text-transform: uppercase; } :root[data-diseno="selah"] .mc-escena { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: minmax(0, 1fr); align-items: center; gap: 44px; padding: 22px 0 8px; } :root[data-diseno="selah"] .mc-escena.sola { grid-template-columns: minmax(0, 860px); } /* el héroe: la tarjeta (botón que abre el grupo) es el vidrio; la píldora de acción va encima, abajo a la izquierda. El halo vive en el envoltorio (sin fondo) y se ve a través del vidrio. */ :root[data-diseno="selah"] .mc-heroe { position: relative; min-width: 0; border-radius: var(--heroe-radio); } :root[data-diseno="selah"] .mc-heroe.halo::before { inset: -10px; filter: blur(46px); } :root[data-diseno="selah"] .tarjeta-grupo.tg-heroe { container-type: inline-size; width: 100%; gap: 0; padding: 34px 40px 38px; background: var(--vidrio); border: 1px solid var(--vidrio-borde); border-radius: var(--heroe-radio); box-shadow: var(--vidrio-sombra); } :root[data-diseno="selah"] .mc-heroe.con-accion .tg-heroe { padding-bottom: 126px; } :root[data-diseno="selah"]:not(.puntero-quieto) .tarjeta-grupo.tg-heroe:hover { background: var(--vidrio-hover); box-shadow: var(--vidrio-sombra), var(--s-2); } :root[data-diseno="selah"] .tarjeta-grupo.tg-heroe:focus-visible { outline: none; box-shadow: var(--vidrio-sombra), 0 0 0 3px var(--acento-anillo); } :root[data-diseno="selah"] .mc-linea { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 20px; } :root[data-diseno="selah"] .mc-linea .voz { font-size: 21px; } :root[data-diseno="selah"] .mc-fecha { font: 500 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-2); } /* la frase de hoy (la misma de Clásica), bajo el título */ :root[data-diseno="selah"] .mc-respiro .mc-hoy { color: var(--tinta-2); } :root[data-diseno="selah"] .mc-respiro .mc-hoy .ic { color: var(--acento-texto); } /* lo de la clase del héroe (hoy) y, aparte, las clases anteriores del grupo por completar, con su rótulo */ :root[data-diseno="selah"] .tg-heroe .mc-estado-hoy { margin-top: 0; } :root[data-diseno="selah"] .mc-anteriores { display: grid; gap: 6px; max-width: 580px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--linea-2); } :root[data-diseno="selah"] .mc-estado-hoy + .mc-anteriores { margin-top: 16px; } :root[data-diseno="selah"] .mc-anteriores-titulo { font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); } :root[data-diseno="selah"] .tg-heroe .tg-cab { align-items: flex-start; } :root[data-diseno="selah"] .tg-heroe .tg-titulo { gap: 14px; } /* el nombre, tan grande como quepa en una línea (largo = número de letras; 100cqi = el ancho de la tarjeta) */ :root[data-diseno="selah"] .tg-heroe .tg-instrumento { font-family: var(--f-titulo); font-weight: 800; letter-spacing: -.025em; color: var(--tinta); white-space: nowrap; font-size: clamp(54px, calc(100cqi * 2.1 / var(--largo, 12)), 132px); line-height: .8; padding-top: .06em; } :root[data-diseno="selah"] .tg-heroe .tg-dia { font: 500 17px/24px var(--f-ui); color: var(--tinta-2); } :root[data-diseno="selah"] .tg-heroe .tg-pie { position: absolute; top: 26px; right: 26px; width: 40px; height: 40px; margin: 0; color: var(--tinta-3); } :root[data-diseno="selah"] .tarjeta-grupo.tg-heroe { position: relative; } :root[data-diseno="selah"]:not(.puntero-quieto) .tg-heroe:hover .tg-pie { color: var(--acento-texto); background: var(--acento-suave); } /* las caras en píldoras de vidrio, con el nombre de pila */ :root[data-diseno="selah"] .tg-alumnos.pildoras { gap: 10px; margin: 28px 0 26px; } :root[data-diseno="selah"] .tg-alumnos.pildoras .tg-alumno { display: inline-flex; align-items: center; gap: 10px; width: auto; padding: 5px 18px 5px 5px; border-radius: var(--r-pildora); background: var(--vidrio-control); border: 1px solid var(--vidrio-borde); box-shadow: 0 1px 2px rgba(35, 50, 104, .05); font: 600 15px/20px var(--f-ui); color: var(--tinta); text-align: left; } /* lo que falta: filas con línea fina, punto del tono, frase y fecha a la derecha */ :root[data-diseno="selah"] .tg-heroe .tg-estado { gap: 0; margin: 0; max-width: 580px; } :root[data-diseno="selah"] .tg-heroe .tg-falta { align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea); font-size: 15px; line-height: 21px; } :root[data-diseno="selah"] .tg-heroe .tg-falta:first-child { border-top: 0; padding-top: 2px; } :root[data-diseno="selah"] .tg-heroe .tg-falta::before { width: 10px; height: 10px; align-self: center; margin-top: 0; } :root[data-diseno="selah"] .tg-heroe .tg-falta-fecha { margin-left: auto; font-size: var(--t-s); } :root[data-diseno="selah"] .tg-heroe .tg-mas { padding: 8px 0 0 22px; } /* la acción: píldora azul grande; a su lado, de qué clase se trata si no es la de hoy */ :root[data-diseno="selah"] .mc-accion { position: absolute; left: 40px; right: 40px; bottom: 38px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; } :root[data-diseno="selah"] .mc-accion .boton.primario { height: 60px; padding: 0 36px; font: 700 17px/1 var(--f-ui); box-shadow: 0 14px 30px -12px rgba(11, 103, 207, .65), inset 0 1px 0 rgba(255, 255, 255, .25); } :root[data-diseno="selah"] .mc-accion .boton:not(.primario) { height: 60px; padding: 0 32px; font: 700 17px/1 var(--f-ui); } /* «Después»: el título en la letra de marca y las demás clases, compactas, en una columna que se desliza */ :root[data-diseno="selah"] .mc-despues { min-height: 0; max-height: 100%; display: flex; flex-direction: column; } :root[data-diseno="selah"] .mc-despues-titulo { flex: none; margin: 2px 4px 14px; font: 800 30px/1 var(--f-titulo); letter-spacing: -.01em; color: var(--tinta); } :root[data-diseno="selah"] .mc-despues-lista { flex: 0 1 auto; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 12px; margin: 0 -6px; padding: 2px 6px 96px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); } /* ═════ tarjetas de grupo (Después y Supervisión): vidrio claro; la sombra en reposo es la misma que la del héroe ═════ */ :root[data-diseno="selah"] .tarjeta-grupo { background: var(--vidrio); border: 1px solid var(--vidrio-borde); border-radius: 22px; box-shadow: var(--vidrio-sombra); transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); } :root[data-diseno="selah"]:not(.puntero-quieto) .tarjeta-grupo:hover { background: var(--vidrio-hover); border-color: var(--vidrio-borde); box-shadow: var(--vidrio-sombra), var(--s-2); } :root[data-diseno="selah"] .tarjeta-grupo:focus-visible { outline: none; box-shadow: var(--vidrio-sombra), 0 0 0 3px var(--acento-anillo); } :root[data-diseno="selah"] .mc-despues .tarjeta-grupo { gap: 10px; padding: 18px 20px 14px; border-radius: 24px; } :root[data-diseno="selah"] .mc-despues .tg-instrumento { font: 800 30px/.95 var(--f-titulo); letter-spacing: -.015em; overflow-wrap: anywhere; } :root[data-diseno="selah"] .mc-despues .tg-titulo { gap: 6px; } :root[data-diseno="selah"] .mc-despues .tg-dia { font-size: var(--t-s); line-height: var(--lh-s); } :root[data-diseno="selah"] .mc-despues .tg-pie { margin-top: 0; } :root[data-diseno="selah"] .mc-despues .tg-estado { margin-top: 0; } :root[data-diseno="selah"] .mc-despues .tg-falta { font-size: var(--t-s); line-height: var(--lh-s); } :root[data-diseno="selah"] .mc-despues .tg-falta::before { margin-top: 5px; } :root[data-diseno="selah"] .mc-despues .tg-falta-fecha { margin-left: auto; } /* caras pequeñas con el nombre de pila debajo (como en Clásica) */ :root[data-diseno="selah"] .mc-despues .tg-alumnos { gap: 8px 4px; } :root[data-diseno="selah"] .mc-despues .tg-alumno { width: 54px; gap: 4px; font: 500 var(--t-xs)/var(--lh-xs) var(--f-ui); color: var(--tinta-2); } :root[data-diseno="selah"] .mc-despues .tg-proxima { padding-top: 10px; } :root[data-diseno="selah"] .tg-proxima { border-top-color: var(--linea); } /* pendientes: el rótulo junto al disco, de vidrio */ :root[data-diseno="selah"] .pend-rotulo { background: var(--vidrio-control); border-color: var(--vidrio-borde); box-shadow: var(--vidrio-sombra); } @media (hover: hover) { :root[data-diseno="selah"]:not(.puntero-quieto) .pend-item:hover { background: var(--acento-suave); } } :root[data-diseno="selah"] .pend-item:focus-visible { background: var(--acento-suave); } :root[data-diseno="selah"] .pend-titulo { font: 800 24px/1.1 var(--f-titulo); padding-top: 16px; } /* la lista abierta es una capa: casi opaca, separada del disco y con sombra de capa (tapa lo de debajo sin confundirse) */ @media (min-width: 761px) { :root[data-diseno="selah"] .pendientes { gap: 14px; } :root[data-diseno="selah"] .pend-lista { background: var(--vidrio-panel); border-color: var(--vidrio-borde); border-radius: 22px; box-shadow: var(--s-3), 0 0 0 1px var(--linea); } } /* ═════════════ 2 · Grupo y fichas de clase ═════════════ */ :root[data-diseno="selah"] .gc-titulo h1 { font-size: 44px; line-height: 44px; font-weight: 800; } /* las fichas, blancas sobre el cielo (un documento por clase; la validada, «cerrada sobre blanco») con el borde de luz */ :root[data-diseno="selah"] .ficha { background: var(--sup); border-color: var(--vidrio-borde); border-radius: 18px; box-shadow: var(--vidrio-sombra); } :root[data-diseno="selah"]:not(.puntero-quieto) .ficha.plegada:hover { border-color: var(--vidrio-borde); box-shadow: var(--vidrio-sombra), var(--s-2); } :root[data-diseno="selah"] .ficha.cancelada { background: var(--vidrio-2); box-shadow: none; } :root[data-diseno="selah"] .ficha.futura { background: var(--vidrio-2); } :root[data-diseno="selah"] .ficha-cab .boton.primario.accion-clase { border-color: var(--borde-control); } :root[data-diseno="selah"] .momento { background: var(--pista); } :root[data-diseno="selah"] .momento:is(.vacio, .neutro).editable { background: var(--campo-fondo); border-color: var(--borde-campo); } :root[data-diseno="selah"] .momento.editando { background: var(--sup); } :root[data-diseno="selah"] .ficha.validada .momento { background: transparent; } :root[data-diseno="selah"]:not(.puntero-quieto) .og-grupo:hover:not(:disabled) { background: var(--fila-hover); } :root[data-diseno="selah"] .notas-grupo { background: var(--campo-fondo); border-color: var(--borde-campo); } /* lista desplazada: la ficha que queda bajo el borde de arriba se funde (no se ve un título partido a media altura) */ :root[data-diseno="selah"] .registros.desplazada { border-top-color: transparent; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 20px), transparent); } /* asistencia: leyenda, caras pequeñas y las de la ficha abierta, con los colores que mandan */ :root[data-diseno="selah"] .ley-cara { background: var(--presente-tinte); box-shadow: inset 0 0 0 1px var(--presente-borde); } :root[data-diseno="selah"] .ley-cara.ausente { background: var(--ausente-tinte); box-shadow: inset 0 0 0 1px var(--ausente-borde); } :root[data-diseno="selah"] .ley-cara.sin-tomar { background: transparent; box-shadow: none; } :root[data-diseno="selah"] .ley-cara:is(.presente, .ausente)::after { box-shadow: 0 0 0 1.5px var(--cielo-1); } :root[data-diseno="selah"] :is(.cara, .asis-alumno, .ca-comp):is(.presente, .ausente)::after { box-shadow: 0 0 0 2px var(--ficha-base); } /* la ficha abierta: cada alumno en su tinte (17 oct: azul presente, gris ausente) con el nombre debajo */ :root[data-diseno="selah"] .asis-alumnos { gap: 10px; } /* 72 px de alto como mucho: con más, el menú de asistencia se ancla al punto del clic y no a la tarjeta (rectAncla) */ :root[data-diseno="selah"] .asis-alumno { width: 70px; gap: 4px; padding: 4px 4px 4px; border-radius: 16px; line-height: 16px; } :root[data-diseno="selah"] .asis-alumno.presente { background: var(--presente-tinte); box-shadow: inset 0 0 0 1px var(--presente-borde); } :root[data-diseno="selah"] .asis-alumno.ausente { background: var(--ausente-tinte); box-shadow: inset 0 0 0 1px var(--ausente-borde); } :root[data-diseno="selah"] .asis-alumno.ausente .asis-nombre { color: var(--ausente-texto); font-weight: 600; } :root[data-diseno="selah"] .asis-alumno:is(.presente, .ausente)::after { top: 34px; left: calc(50% + 10px); } :root[data-diseno="selah"] .asis-par { gap: 4px; padding: 4px; margin: -5px -1px; border-radius: 20px; } :root[data-diseno="selah"] :is(.cara, .asis-alumno, .ca-comp).ausente .avatar { filter: grayscale(.7); opacity: .72; } /* ═════════════ 3 · Modo clase: sobre el cielo, el centro de vidrio; los colores de asistencia intactos ═════════════ */ :root[data-diseno="selah"] .modo { background: radial-gradient(900px 520px at 12% -8%, var(--luz-a), transparent 70%), radial-gradient(800px 600px at 96% 18%, var(--luz-b), transparent 70%), radial-gradient(1000px 500px at 50% 112%, var(--luz-c), transparent 70%), linear-gradient(180deg, var(--cielo-1), var(--cielo-2)); background-color: var(--cielo-2); } :root[data-diseno="selah"] .modo-titulo h1 { font-weight: 800; font-size: 46px; line-height: 44px; letter-spacing: -.015em; } :root[data-diseno="selah"] .modo-titulo p { color: var(--tinta-2); } :root[data-diseno="selah"] .modo-cab .etiqueta.validado { background: var(--vidrio-control); border: 1px solid var(--vidrio-borde); } :root[data-diseno="selah"] .cerrar-modo { background: var(--vidrio-control); border-color: var(--borde-control); box-shadow: var(--vidrio-sombra); } :root[data-diseno="selah"]:not(.puntero-quieto) .cerrar-modo:hover { background: var(--control-hover); } /* los pasos: el actual en píldora blanca; hecho, check verde */ :root[data-diseno="selah"] .paso { border-radius: var(--r-pildora); } :root[data-diseno="selah"]:not(.puntero-quieto) .paso:hover:not(.actual) { background: var(--fila-hover); } :root[data-diseno="selah"] .paso.actual { background: var(--elegido-fondo); box-shadow: var(--vidrio-sombra), 0 0 0 1px var(--vidrio-borde); } :root[data-diseno="selah"] .paso:not(.hecho, .actual) .paso-n { background: var(--pista); } :root[data-diseno="selah"] .bloque-registro { border-color: var(--linea-2); } /* el centro: vidrio con radio de panel */ :root[data-diseno="selah"] .paso-centro { background: var(--vidrio); border-color: var(--vidrio-borde); border-radius: 28px; box-shadow: var(--vidrio-sombra); } :root[data-diseno="selah"] .paso-titulo h2 { font: 800 34px/36px var(--f-titulo); letter-spacing: -.01em; } :root[data-diseno="selah"] .paso-titulo .cuenta, :root[data-diseno="selah"] .paso-titulo .pista { color: var(--tinta-2); } /* tarjetas de asistencia: sin marcar = blanco neutro punteado · presente = tinte y chip azules · ausente = tinte gris y la palabra «Ausente» en gris (17 oct · asistencias · colores; antes verde y rojo) */ :root[data-diseno="selah"] :is(.tile, .tile-espera) { background: var(--sup); border-color: var(--linea-2); border-radius: 24px; box-shadow: var(--s-1); } :root[data-diseno="selah"] .tile-nombre { font-weight: 700; color: var(--tinta); } :root[data-diseno="selah"] .tile-estado { height: 28px; padding: 0 12px; background: var(--pista); color: var(--tinta-2); } :root[data-diseno="selah"] :is(.tile, .tile-espera).presente { background: var(--presente-tinte); border-color: var(--presente-borde); } :root[data-diseno="selah"]:not(.puntero-quieto) :is(.tile, .tile-espera).presente:hover:not(:disabled) { border-color: var(--presente); } :root[data-diseno="selah"] :is(.tile, .tile-espera).presente .tile-estado { background: var(--presente); color: #fff; } :root[data-diseno="selah"] .tile.ausente:not(.sin-marcar) { background: var(--ausente-tinte); border-color: var(--ausente-borde); } :root[data-diseno="selah"]:not(.puntero-quieto) .tile.ausente:not(.sin-marcar):hover:not(:disabled) { border-color: var(--ausente); } :root[data-diseno="selah"] .tile.ausente:not(.sin-marcar) .tile-nombre { color: var(--tinta); } :root[data-diseno="selah"] .tile.ausente:not(.sin-marcar) .tile-estado { background: var(--sup); color: var(--ausente-texto); box-shadow: inset 0 0 0 1px var(--ausente-borde); } :root[data-diseno="selah"] .tile.ausente:not(.sin-marcar) .avatar { filter: grayscale(.5); opacity: .85; } :root[data-diseno="selah"] :is(.tile, .tile-espera).sin-marcar { background: var(--sup); border-color: var(--tinta-4); box-shadow: none; } :root[data-diseno="selah"] :is(.tile, .tile-espera).sin-marcar .tile-nombre { color: var(--tinta-2); } :root[data-diseno="selah"] :is(.tile, .tile-espera).sin-marcar .tile-estado { background: transparent; } /* no se guardó: el borde rojo entero (más grueso que el del ausente) y el aviso dentro */ :root[data-diseno="selah"] .tiles .tile.sin-guardar, :root[data-diseno="selah"]:not(.puntero-quieto) .tiles .tile.sin-guardar:hover { border: 2px solid var(--peligro); } :root[data-diseno="selah"] .tile-fallo { border-radius: 0 0 22px 22px; } :root[data-diseno="selah"] .tile-par { border-radius: 30px; padding: 8px 10px 10px; } :root[data-diseno="selah"]:not(.puntero-quieto) .tile-mas:hover { background: var(--fila-hover); } /* notas por alumno, pasos de texto y terminar */ :root[data-diseno="selah"] .presentes { background: var(--vidrio); border-color: var(--vidrio-borde); border-radius: 28px; box-shadow: var(--vidrio-sombra); } :root[data-diseno="selah"] .presentes h2 { font: 800 26px/1.1 var(--f-titulo); } :root[data-diseno="selah"] .texto-paso { background: var(--campo-fondo); border-color: var(--borde-campo); border-radius: 20px; } :root[data-diseno="selah"] .texto-paso[readonly] { background: var(--vidrio-2); } /* lo de la clase anterior: una referencia hundida con borde fino (sobre el vidrio del centro se veía sin contorno) */ :root[data-diseno="selah"] .paso-anterior { background: var(--pista); border: 1px solid var(--linea-2); border-radius: var(--r-l); } /* salir sin guardar descarta lo escrito: rojo, como en Clásica (selah.css pinta .boton.suave en azul) */ :root[data-diseno="selah"] .dialogo-salir .boton.suave.salir-sin-guardar { color: var(--peligro-texto); } :root[data-diseno="selah"]:not(.puntero-quieto) .dialogo-salir .boton.suave.salir-sin-guardar:hover:not(:disabled) { background: var(--peligro-fondo); } :root[data-diseno="selah"] .terminar .paso-titulo h2 { font-size: 44px; line-height: 44px; } :root[data-diseno="selah"] .resumen-pasos { background: var(--sup); border-color: var(--vidrio-borde); border-radius: 22px; box-shadow: var(--vidrio-sombra); } :root[data-diseno="selah"] .resumen-paso:not(.hecho) .rp-disco { background: var(--pista); } :root[data-diseno="selah"]:not(.puntero-quieto) .resumen-paso:hover { background: var(--fila-hover); } /* ═════════════ 4 · Mis alumnos y ficha del alumno ═════════════ */ :root[data-diseno="selah"] .mini-titulo > span { font: 800 26px/1 var(--f-titulo); letter-spacing: -.01em; } :root[data-diseno="selah"] .vista-alumnos.amplio .mini-titulo > span { font-size: 30px; } :root[data-diseno="selah"] .mini-titulo { align-items: baseline; padding-bottom: 2px; } :root[data-diseno="selah"] :is(.col-lista, .clases-alumno, .fa-perfil) { background: var(--vidrio); border-color: var(--vidrio-borde); border-radius: 22px; box-shadow: var(--vidrio-sombra); } :root[data-diseno="selah"]:not(.puntero-quieto) .alumno-fila:hover { background: var(--vidrio-hover); } :root[data-diseno="selah"] .fa-perfil h1 { font-size: 36px; line-height: 34px; font-weight: 800; } :root[data-diseno="selah"] .fa-clases-cab h2 { font: 800 30px/1 var(--f-titulo); letter-spacing: -.01em; } :root[data-diseno="selah"] .contadores { border-radius: var(--r-pildora); background: var(--pista); } :root[data-diseno="selah"] .contador { border-radius: var(--r-pildora); } :root[data-diseno="selah"] .contador.activo { background: var(--elegido-fondo); box-shadow: 0 1px 2px rgba(35, 50, 104, .1), 0 4px 10px -6px rgba(35, 50, 104, .25); } :root[data-diseno="selah"] .ca-tramo { background: var(--vidrio-2); } :root[data-diseno="selah"]:not(.puntero-quieto) .ca-cab:hover { background: var(--fila-hover); } /* el estado de cada clase: presente azul, «Ausente» en gris, sin tomar punteado (17 oct) */ :root[data-diseno="selah"] .ca-estado.presente { color: var(--presente-texto); background: var(--presente-tinte); border-color: var(--presente-borde); } :root[data-diseno="selah"] .ca-estado.ausente { color: var(--ausente-texto); background: var(--ausente-tinte); border-color: var(--ausente-borde); } :root[data-diseno="selah"] .ca-nota-entera { background: var(--vidrio-2); border-color: var(--vidrio-borde); } :root[data-diseno="selah"] .ca-momento { background: var(--pista); } :root[data-diseno="selah"] .ca-momento.vacio { background: transparent; } /* compañeros de la clase abierta: como la ficha del grupo (tinte azul o gris) */ :root[data-diseno="selah"] .ca-companeros { gap: 10px; } :root[data-diseno="selah"] .ca-comp { width: 68px; gap: 4px; padding: 5px 4px 5px; border-radius: 16px; line-height: 16px; } /* ≤ 72 px de alto (rectAncla) */ :root[data-diseno="selah"] .ca-comp.presente { background: var(--presente-tinte); } :root[data-diseno="selah"] .ca-comp.ausente { background: var(--ausente-tinte); color: var(--ausente-texto); } :root[data-diseno="selah"] .ca-comp:is(.presente, .ausente)::after { top: 33px; left: calc(50% + 9px); } :root[data-diseno="selah"] .ca-comp.yo { box-shadow: inset 0 0 0 1.5px var(--tinta-4); } :root[data-diseno="selah"] .notas-alumno { background: var(--campo-fondo); } /* ═════════════ 5 · Factura: meses de vidrio; las horas del mes abierto como cifra ═════════════ */ :root[data-diseno="selah"] .mes { background: var(--vidrio); border-color: var(--vidrio-borde); border-radius: 22px; box-shadow: var(--vidrio-sombra); } :root[data-diseno="selah"] .mes.compacto { border-radius: 18px; } :root[data-diseno="selah"] .mes.compacto.est-futuro { background: transparent; border-color: transparent; box-shadow: none; } :root[data-diseno="selah"] .mes.foco { gap: 16px; padding: 24px 20px; } :root[data-diseno="selah"] .mes.foco .mes-nombre h2 { font: 800 34px/1 var(--f-titulo); letter-spacing: -.01em; } :root[data-diseno="selah"] .mes.foco .mes-horas { color: var(--tinta-2); line-height: 60px; } :root[data-diseno="selah"] .mes.foco .mes-horas b { display: inline-block; margin-right: 8px; font: 800 72px/.8 var(--f-titulo); letter-spacing: -.02em; } :root[data-diseno="selah"] .mes.compacto .mes-nombre h2 { font: 800 24px/1 var(--f-titulo); } :root[data-diseno="selah"] .mes-archivos li { background: var(--vidrio-2); border-color: var(--vidrio-borde); border-radius: var(--r-pildora); padding: 0 12px; } /* ═════════════ 6 · ventana estrecha (1100×720) ═════════════ */ @media (max-width: 1240px) { :root[data-diseno="selah"] .mc-escena { grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; padding-top: 16px; } :root[data-diseno="selah"] .tarjeta-grupo.tg-heroe { padding: 28px 32px 30px; } :root[data-diseno="selah"] .mc-heroe.con-accion .tg-heroe { padding-bottom: 112px; } :root[data-diseno="selah"] .mc-accion { left: 32px; right: 32px; bottom: 30px; } :root[data-diseno="selah"] .mc-accion .boton { height: 56px; } :root[data-diseno="selah"] .tg-alumnos.pildoras { margin: 22px 0 20px; } :root[data-diseno="selah"] .modo-titulo h1 { font-size: 40px; line-height: 40px; } } @media (max-height: 760px) and (min-width: 761px) { :root[data-diseno="selah"] .tarjeta-grupo.tg-heroe .tg-instrumento { font-size: clamp(50px, calc(100cqi * 2 / var(--largo, 12)), 108px); } :root[data-diseno="selah"] .mc-linea { margin-bottom: 14px; } } /* ═════════════ 7 · iPhone (≤ 760 px): el héroe arriba, «Después» debajo; todo a lo ancho ═════════════ */ @media (max-width: 760px) { :root[data-diseno="selah"] { --heroe-radio: 30px; } :root[data-diseno="selah"] .mc-respiro { height: auto; } :root[data-diseno="selah"] .mc-escena { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 26px; padding-top: 12px; } :root[data-diseno="selah"] .mc-heroe.halo::before { filter: blur(26px); inset: -4px; } :root[data-diseno="selah"] .tarjeta-grupo.tg-heroe { padding: 22px 20px 24px; } :root[data-diseno="selah"] .mc-heroe.con-accion .tg-heroe { padding-bottom: 108px; } :root[data-diseno="selah"] .tg-heroe .tg-instrumento { font-size: clamp(40px, calc(100cqi * 2.1 / var(--largo, 12)), 80px); line-height: .86; white-space: normal; text-wrap: balance; } :root[data-diseno="selah"] .tg-heroe .tg-pie { display: none; } :root[data-diseno="selah"] .mc-linea { margin-bottom: 14px; } :root[data-diseno="selah"] .tg-alumnos.pildoras { margin: 16px 0 14px; gap: 6px; } :root[data-diseno="selah"] .tg-alumnos.pildoras .tg-alumno { gap: 8px; padding: 3px 12px 3px 3px; font-size: 14px; } :root[data-diseno="selah"] .tg-alumnos.pildoras .avatar { width: 30px !important; height: 30px !important; font-size: 11px !important; } :root[data-diseno="selah"] .tg-heroe .tg-falta { font-size: var(--t-m); line-height: var(--lh-m); } :root[data-diseno="selah"] .mc-accion { left: 20px; right: 20px; bottom: 22px; flex-direction: column-reverse; align-items: stretch; gap: 6px; } :root[data-diseno="selah"] .mc-accion .boton { width: 100%; height: 56px; justify-content: center; } :root[data-diseno="selah"] .mc-despues-lista { overflow: visible; margin: 0; padding: 0 0 72px; -webkit-mask-image: none; mask-image: none; } :root[data-diseno="selah"] .mc-despues-titulo { font-size: 28px; margin: 0 2px 12px; } /* Supervisión › Clases: en el teléfono, filas de una lista agrupada (movil.css); el vidrio va en la lista, no en cada fila */ :root[data-diseno="selah"] .vista-clases-todos .rejilla-grupos { background: var(--vidrio); border-color: var(--vidrio-borde); border-radius: 22px; box-shadow: var(--vidrio-sombra); } :root[data-diseno="selah"] .vista-clases-todos .tarjeta-grupo { background: transparent; border: 0; border-radius: 0; box-shadow: none; } :root[data-diseno="selah"] .vista-clases-todos .tarjeta-grupo + .tarjeta-grupo { box-shadow: inset 0 1px 0 var(--linea); } :root[data-diseno="selah"] .modo-titulo h1 { font-size: 30px; line-height: 30px; } :root[data-diseno="selah"] .paso-centro { border-radius: 24px; } :root[data-diseno="selah"] .paso-titulo h2 { font-size: 30px; line-height: 32px; } :root[data-diseno="selah"] .paso.actual { box-shadow: var(--s-1), 0 0 0 1px var(--vidrio-borde); } :root[data-diseno="selah"] .mes.foco .mes-horas b { font-size: 60px; } /* historial del alumno: la fecha (con el grupo debajo) a la izquierda y el estado a la derecha, en la misma línea. movil.css colocaba .ca-fecha, que ahora va dentro de .ca-cuando, y la fila se partía en dos. */ :root[data-diseno="selah"] .vista-ficha .ca-cab > .ca-cuando { grid-column: 1; grid-row: 1; min-width: 0; } :root[data-diseno="selah"] .vista-ficha .ca-cab > .ca-nota { grid-row: 2; } :root[data-diseno="selah"] .vista-ficha .ca-cab > .ca-nota.vacia { display: none; } } /* ═════ 15 oct · RONDA-FINAL §2 · lo que falta, en casillas; la tarjeta entera con el tono de su clase ═════ Las casillas (.cf-*) vienen de profesor.css (solo tokens: valen aquí). Sobre el vidrio, la tarjeta marcada lleva el borde y un tinte suave de su tono: rojo si la clase ya pasó, ámbar si es de hoy. */ :root[data-diseno="selah"] .cf-casilla { height: 24px; border-radius: 8px; font-size: 12.5px; } :root[data-diseno="selah"] :is(.tarjeta-grupo, .tarjeta-grupo.tg-heroe)[data-falta="vencida"], :root[data-diseno="selah"] .ficha[data-falta="vencida"]:not(.validada) { border-color: color-mix(in srgb, var(--peligro) 55%, transparent); background: color-mix(in srgb, var(--peligro-fondo) 50%, var(--sup)); } :root[data-diseno="selah"] :is(.tarjeta-grupo, .tarjeta-grupo.tg-heroe)[data-falta="hoy"], :root[data-diseno="selah"] .ficha[data-falta="hoy"]:not(.validada) { border-color: color-mix(in srgb, var(--aviso) 65%, transparent); background: color-mix(in srgb, var(--aviso-fondo) 50%, var(--sup)); } :root[data-diseno="selah"] .ficha[data-falta]:not(.validada) .momento.vacio.editable { border-color: color-mix(in srgb, var(--aviso) 70%, transparent); } :root[data-diseno="selah"] .ficha[data-falta="vencida"]:not(.validada) .momento.vacio.editable { border-color: color-mix(in srgb, var(--peligro) 60%, transparent); } :root[data-diseno="selah"] .tg-heroe .tg-falta.cf-fila { gap: 14px; } :root[data-diseno="selah"] .tg-heroe .cf-casilla { height: 26px; padding: 0 10px 0 8px; font-size: 13px; } /* ═════ 15 oct B · zona A · rojos de alerta más fuertes (las variables --alerta-* están en horario.css) ═════ La tarjeta vencida de Mis clases (también el héroe, antes un rosa muy pálido) y la ficha vencida del grupo: tinte del 14 % y borde rojo entero. En oscuro, la casilla roja baja al 13 % para que su texto siga sobre 4,5:1. */ :root[data-diseno="selah"] :is(.tarjeta-grupo, .tarjeta-grupo.tg-heroe)[data-falta="vencida"], :root[data-diseno="selah"] .ficha[data-falta="vencida"]:not(.validada) { border-color: var(--alerta-borde); background: var(--alerta-tinte); } :root[data-diseno="selah"] .tarjeta-grupo.tg-heroe[data-falta="vencida"] { box-shadow: var(--vidrio-sombra), 0 0 0 1px color-mix(in srgb, var(--peligro) 30%, transparent); } @media (prefers-color-scheme: dark) { :root[data-diseno="selah"] { --alerta-casilla: color-mix(in srgb, var(--peligro) 13%, var(--sup)); } } /* 15 oct · iPhone: títulos un punto más chicos (Mis clases, la clase, Después) */ @media (max-width: 760px) { :root[data-diseno="selah"] .tg-heroe .tg-instrumento { font-size: clamp(30px, calc(100cqi * 1.7 / var(--largo, 12)), 56px); line-height: .92; } :root[data-diseno="selah"] .mc-despues-titulo { font-size: 22px; } :root[data-diseno="selah"] .modo-titulo h1 { font-size: 24px; line-height: 26px; } :root[data-diseno="selah"] .paso-titulo h2 { font-size: 24px; line-height: 28px; } :root[data-diseno="selah"] .modo { background-color: var(--cielo-2); } }