/* ===================================================================== AULA VIRTUAL · ESCUELA RENACER — Sistema visual Alineado con assets/escuela.css del sitio público (sep 2026). ===================================================================== POR QUÉ SE REHIZO. La primera versión del rediseño se veía «de plantilla»: radios de 14 y 20px, sombras azules de catálogo, degradados en el héroe, un segundo acento ámbar decorativo y todos los titulares en grotesca. Nada de eso está en la casa. El sitio público —que se hizo después— fijó el lenguaje de verdad, y el aula tiene que hablarlo: es la misma escuela, un clic más adentro. QUÉ SE HEREDA DEL SITIO, tal cual y sin discutir: · La escala de azul medianoche y las superficies. Si allá cambia, acá cambia. · Los radios DISCRETOS (7 y 10px). «Una tarjeta es una superficie, no un globo.» · La sombra de 1px. La elevación grande se reserva para lo que de verdad se levanta. · --mut #666c78, que es el gris accesible del sitio (4,88:1 sobre el fondo). El anterior, #6b7482, no llegaba a AA. · La serif Fraunces en los títulos de despliegue, con sus ejes declarados a mano. · Cuerpo 17px con interlínea 1,65. El aula se lee a distancia de brazo y casi siempre en el teléfono, igual que el sitio. QUÉ ES PROPIO DEL AULA, y por qué: · La barra tiene identidad de alumno (nombre, avatar, salir) y una barra inferior fija en el teléfono. El sitio público no las tiene porque no hay sesión. · Hay componentes que el sitio no necesita: progreso, asistencia, índice de clases, reproductor. Se dibujan con los MISMOS tokens. ⚠️ CONTRATO CON EL PHP. Las pantallas usan tokens en estilos en línea (var(--brand), var(--sh-card), var(--r), …). Todos los nombres que existían siguen existiendo acá, aunque su VALOR se haya recalibrado. Borrar un nombre rompe una pantalla en silencio. Orden del archivo: 1 Tokens · 2 Base y accesibilidad · 3 Tipografía · 4 Armazón 5 Componentes · 6 Tarjeta de curso · 7 Visor de clase 8 Formularios y acceso · 9 Panel · 10 Utilidades y responsivo ===================================================================== */ /* ---------------------------- 1 · TOKENS ---------------------------- */ :root{ /* ── Color. Copiado de escuela.css. Una sola escala de azul medianoche derivada del azul institucional #003399. ──────────────────────── */ --renacer:#003399; --renacer-dark:#002266; --renacer-hover:#173a80; --acc:#0e2a63; --acc-ink:#ffffff; --acc-sf:#eef1f8; --acc-bd:#c6cee0; --acc-nav:#7fa6ff; --nav:#071129; /* chrome oscuro: barra, héroe, pie */ --nav-ink:rgba(255,255,255,.66); --nav-on:#ffffff; --nav-ln:rgba(255,255,255,.10); --nav-hov:rgba(255,255,255,.07); /* Alias del aula sobre esa escala. Existen porque el PHP los nombra; apuntan a la paleta del sitio para que no haya dos azules. --brand el acento de interfaz (enlaces, botón lleno, activo) --brand-900 el medianoche del chrome (barra, héroe, pie) ⚠️ --brand era #003399 saturado y pintaba la barra entera. Ese azul es la MARCA, no el chrome: en el sitio la barra es medianoche y el institucional queda para la Escritura y las marcas. Se corrigió. */ --brand:var(--acc); --brand-700:var(--renacer-hover); --brand-900:var(--nav); --brand-sf:var(--acc-sf); --brand-bd:var(--acc-bd); --brand-ink:#ffffff; /* Superficies y tinta */ --bg:#f5f6f8; --sf:#ffffff; --sf2:#fafafb; --sf3:#f2f3f6; --ln:#e4e7ec; --ln2:#edeff3; --ink:#14161b; --ink2:#3d424d; /* Gris de apoyo accesible: 4,88:1 sobre --bg, 5,27:1 sobre --sf. */ --mut:#666c78; /* Estados. Semánticos, nunca decorativos: si algo lleva estos colores, algo está pasando. Un curso «Iniciado» no es verde porque sí. */ --ok:#067a55; --ok-sf:#e9f7f1; --ok-bd:#b7e2d1; --warn:#b45309; --warn-sf:#fdf5e7; --warn-bd:#f0d9a8; --danger:#c11b45; --dan-sf:#fdeef1; --dan-bd:#f4c2ce; --info:#0e2a63; --info-sf:#eef1f8; --info-bd:#c6cee0; /* La Escritura y las marcas: el azul institucional literal. Igual que en el sitio, se reserva y no se usa para decorar. */ --escritura:#003399; --escritura-sf:#e7ecfb; --escritura-bd:#aec3ee; /* ⚠️ --amber se conserva SÓLO por contrato (lo nombra algún estilo en línea) y apunta al acento: el ámbar era un SEGUNDO acento decorativo y el sistema tiene uno solo. Si algo necesita llamar la atención sin ser estado, se resuelve con forma, no con un color nuevo. */ --amber:var(--acc); --amber-sf:var(--acc-sf); --amber-bd:var(--acc-bd); /* Marca de video. Única excepción, con el mismo criterio con que Ekklesia se permite el verde de WhatsApp: se reconoce sin leerlo. */ --yt:#ff0000; --yt-hover:#cc0000; --yt-sf:rgba(255,0,0,.08); /* ── Tipografía ── Fraunces entra en DOS lugares y en ninguno más: títulos de despliegue y Escritura. Si aparece en un tercero deja de ser voz y es adorno. Los ejes SOFT y WONK van en 0: se usa su estructura, no su chiste. */ --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Schibsted Grotesk','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* Escala tipográfica del sitio. `clamp` y no media queries: son cuatro tamaños que crecen con la ventana y repetirlos se desincroniza. */ --t-display:clamp(1.9rem, 1.3rem + 2.6vw, 3rem); --t-h2:clamp(1.35rem, 1.15rem + .9vw, 1.75rem); --t-h3:1.125rem; --t-body:1.0625rem; /* 17px */ --t-sm:.9375rem; /* 15px */ --t-xs:.8125rem; /* 13px */ /* Radios y sombras: los del sitio. Discretos a propósito. */ --r-sm:7px; --r:10px; --r-lg:10px; --r-full:999px; --sh:0 1px 2px rgba(16,24,40,.06); --sh-card:var(--sh); /* Sombra TEÑIDA con el acento, para lo que se eleva de verdad: el botón lleno y la tarjeta en hover. El negro puro es lo que la hace ver barata. --sh-lift y --sh-brand quedan como alias por contrato. */ --sh-acc:0 1px 2px rgba(14,42,99,.10), 0 6px 16px -6px rgba(14,42,99,.28); --sh-lift:var(--sh-acc); --sh-brand:var(--sh-acc); --sh-lg:0 12px 34px -10px rgba(16,24,40,.28); /* Movimiento */ --ease:cubic-bezier(.22,1,.36,1); --t-fast:120ms; --t:220ms; /* Armazón. --wrap y --pad son los --medida y --sangria del sitio, para que el contenido del aula caiga en la misma columna que el público. */ --wrap:1180px; --lectura:68ch; --pad:clamp(1.15rem, 4vw, 2.5rem); --gap:1.25rem; --top-h:74px; /* igual que la barra del sitio */ /* Tamaño del sello del héroe. Se mide contra la VENTANA y no contra el alto del héroe: si se ata al alto, al crecer el contenido el sello crece con él y queda desproporcionado (pasó en el sitio). */ --sello:clamp(150px, 20vw, 280px); --nav-bot-h:60px; /* barra inferior fija, sólo teléfono */ --ico:44px; } /* -------------------- 2 · BASE Y ACCESIBILIDAD ---------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } /* La barra es fija: sin esto, todo salto a un ancla deja el título tapado. Se descuenta una vez acá y no en cada destino. */ html{ scroll-padding-top:calc(var(--top-h) + 1.5rem); } /* ⚠️ PIE ANCLADO ABAJO. Sin esto, en una pantalla con poco contenido —«Mis cursos» con tres tarjetas, un estado vacío, un formulario corto— el pie quedaba flotando a media página con un vacío blanco debajo. Se veía como un error de carga. La columna flexible empuja el pie al fondo cuando sobra alto, y se comporta normal cuando el contenido es largo. */ body{ margin:0; background:var(--bg); color:var(--ink2); font-family:var(--sans); font-size:var(--t-body); line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100dvh; display:flex; flex-direction:column; } /* El contenido se estira para ocupar el alto sobrante. */ body > main{ flex:1 0 auto; } body > footer{ flex:none; margin-top:auto; } /* La pantalla de acceso ocupa el alto completo y no lleva pie. */ body.is-auth{ display:block; } img{ max-width:100%; height:auto; display:block; } a{ color:var(--acc); text-decoration:none; } a:hover{ text-decoration:underline; text-underline-offset:3px; } /* Foco visible SIEMPRE: quien navega con teclado tiene que saber dónde está parado. Sobre el chrome oscuro el azul no se ve, así que ahí el foco es claro. */ :focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:3px; } .av-top :focus-visible, .hero :focus-visible, .auth-aside :focus-visible, footer :focus-visible, .av-botnav :focus-visible{ outline-color:var(--acc-nav); } /* Salto al contenido: primer elemento tabulable de cada página, visible sólo al enfocarlo. Es lo que le falta a casi todo sitio con menú. */ .av-saltar{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--sf); color:var(--acc); padding:.7rem 1.1rem; border:1px solid var(--acc); border-radius:0 0 var(--r-sm) 0; font-weight:600; } .av-saltar:focus{ left:0; } /* Área táctil mínima cómoda en lo que se toca con el pulgar. */ .btn, .av-nav a, .av-botnav a, .av-logout{ touch-action:manipulation; } /* --------------------------- 3 · TIPOGRAFÍA ------------------------- */ /* ⚠️ QUIÉN MANDA ACÁ, Y POR QUÉ CAMBIÓ. La primera versión ponía TODOS los títulos en Fraunces, copiando al sitio público. Fue un calco mal entendido: el sitio es una pieza de presentación —se lee una vez, de corrido— y ahí la serif es la voz. El aula es una APLICACIÓN: se usa todos los días, con muchos títulos cortos y utilitarios («Mis datos», «Inscripciones», «Contenido del curso»). Puestos en serif de despliegue, con tracking negativo, se ven apretados y pesados: exactamente lo que se sentía como «descuadrado». Entonces: · La GROTESCA es la tipografía de la aplicación, títulos incluidos. · La SERIF se reserva para los dos momentos con voz: el titular del héroe y el panel de marca del acceso. Ahí sí es presentación. Es la misma disciplina del sitio —«la serif entra en dos lugares y en ninguno más»—, aplicada a lo que este producto sí es. */ h1,h2,h3,h4{ color:var(--ink); margin:0; font-family:var(--sans); font-weight:600; letter-spacing:-.018em; line-height:1.25; } /* Título de pantalla. Tamaño de aplicación, no de portada: contenido a una medida en la que un título de dos palabras no ocupa media pantalla. */ h1{ font-size:clamp(1.5rem, 1.3rem + .7vw, 1.9rem); line-height:1.2; letter-spacing:-.022em; } h2{ font-size:clamp(1.15rem, 1.05rem + .45vw, 1.35rem); letter-spacing:-.016em; } h3{ font-size:var(--t-h3); letter-spacing:-.008em; } h4{ font-size:var(--t-sm); letter-spacing:-.004em; } /* La serif, sólo donde hay voz. `opsz` a mano: sin declararlo el navegador usa el valor por defecto del eje y el titular sale con el grosor de remate de un párrafo. SOFT y WONK en 0: se usa su estructura, no su chiste. */ .display, .hero h1, .hero h2, .auth-aside-mid h2{ font-family:var(--serif); font-weight:600; letter-spacing:-.024em; line-height:1.08; font-variation-settings:'opsz' 96, 'SOFT' 0, 'WONK' 0; } /* Rótulo de sección: gris tranquilo con un filete corto que lo ancla sin gritar. Es el `.ee-rotulo` del sitio. */ .kicker{ display:flex; align-items:center; gap:.55rem; font-family:var(--sans); font-style:normal; font-size:var(--t-xs); font-weight:500; color:var(--mut); margin:0 0 .4rem; letter-spacing:.005em; } .kicker::before{ content:""; width:20px; height:1px; background:var(--acc-bd); flex:none; } /* Con un chip adentro el filete sobra: el chip ya es el ancla. */ .kicker:has(.chip)::before{ display:none; } .kicker:has(.chip){ margin-bottom:.7rem; } /* Sobre chrome oscuro se aclara. */ .hero .kicker, .auth-aside .kicker{ color:rgba(255,255,255,.72); } .hero .kicker::before, .auth-aside .kicker::before{ background:var(--acc-nav); } .micro{ font-size:var(--t-xs); color:var(--mut); line-height:1.5; } .lead{ font-size:var(--t-body); color:var(--ink2); max-width:var(--lectura); } .mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; letter-spacing:-.01em; } .muted{ color:var(--mut); } /* ⚠️ LA MEDIDA DE LECTURA VALE TAMBIÉN DENTRO DE UNA TARJETA. `.card p{max-width:none}` estaba puesto para que un párrafo suelto no quedara angosto dentro de una caja ancha, y el efecto fue el contrario: el texto del objetivo del Ministerio corría a 110 caracteres por línea, que es donde el ojo empieza a perder el renglón siguiente. Sólo pierden la medida los sitios donde el ancho lo manda el contenedor: una celda, un estado vacío, un aviso de una línea. */ p{ max-width:var(--lectura); } td p, .empty p, .note p, .note span{ max-width:none; } .hero p{ max-width:58ch; } .content-html{ max-width:var(--lectura); } .content-html p{ max-width:none; } /* --------------------------- 4 · ARMAZÓN ---------------------------- */ /* La barra: el mismo medianoche del sitio y del menú de Ekklesia. */ .av-top{ position:sticky; top:0; z-index:40; height:var(--top-h); background:var(--nav); border-bottom:1px solid var(--nav-ln); display:flex; align-items:center; gap:1.25rem; padding:0 var(--pad); } .av-top a{ color:var(--nav-on); } .av-top-brand{ display:flex; align-items:center; gap:.85rem; color:var(--nav-on); text-decoration:none; min-width:0; } .av-top-brand:hover{ text-decoration:none; } /* El logo va sobre el medianoche sin caja blanca: la placa blanca de la versión anterior lo convertía en una pegatina. */ .av-top-brand img{ height:38px; width:auto; border-radius:0; background:none; padding:0; flex:none; } .av-top-brand span{ font-weight:600; font-size:.95rem; letter-spacing:-.01em; white-space:nowrap; } .av-top-sp{ flex:1; } .av-nav{ display:flex; align-items:center; gap:.15rem; } .av-nav a{ color:var(--nav-ink); font-size:.9rem; font-weight:500; padding:.5rem .75rem; border-radius:var(--r-sm); white-space:nowrap; transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .av-nav a:hover{ color:var(--nav-on); background:var(--nav-hov); text-decoration:none; } /* El activo: tinta plena Y filete de acento. Sólo con el color el cambio es demasiado sutil sobre este azul. */ .av-nav a.on, .av-nav a[aria-current="page"]{ color:var(--nav-on); background:var(--nav-hov); box-shadow:inset 0 -2px 0 var(--acc-nav); } /* Identidad del alumno */ .av-user{ display:flex; align-items:center; gap:.7rem; } .av-user-av{ width:38px; height:38px; border-radius:var(--r-full); flex:none; background:rgba(255,255,255,.12); color:#fff; border:1px solid var(--nav-ln); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.8rem; letter-spacing:.02em; } .av-user-nm{ font-size:.875rem; font-weight:500; line-height:1.2; color:var(--nav-on); } .av-user-rl{ font-size:.72rem; color:var(--nav-ink); line-height:1.2; } .av-logout{ display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .85rem; color:var(--nav-on); border:1px solid var(--nav-ln); border-radius:var(--r-full); font-size:.82rem; font-weight:500; transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .av-logout:hover{ background:var(--nav-hov); border-color:var(--acc-nav); text-decoration:none; } /* Contenido */ /* ⚠️ TRES MEDIDAS Y NINGUNA MÁS. Había doce anchos distintos escritos a mano —720, 760, 800, 820, 860, 880, 900 px— uno por pantalla, decididos a ojo. Por eso dos pantallas hermanas nunca empezaban en la misma columna y el sitio se sentía descuadrado al navegar. Ahora la medida es una decisión de tipo de contenido, no de pantalla: estrecho formularios y lectura seguida (normal) listados y contenido general wide tablas anchas y el panel */ .av-main{ width:100%; max-width:var(--wrap); margin-inline:auto; padding:clamp(1.6rem, 3.5vw, 2.5rem) var(--pad); } .av-main.estrecho{ max-width:48rem; } /* 768px */ .av-main.medio{ max-width:60rem; } /* 960px */ .av-main.wide{ max-width:82.5rem; } /* 1320px */ /* Barra inferior fija — sólo teléfono. */ .av-botnav{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:45; height:var(--nav-bot-h); background:var(--sf); border-top:1px solid var(--ln); padding-bottom:env(safe-area-inset-bottom,0); } .av-botnav a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; color:var(--mut); font-size:.6875rem; font-weight:500; } .av-botnav a.on{ color:var(--acc); } .av-botnav a.on svg{ opacity:1; } .av-botnav a:hover{ text-decoration:none; } .av-botnav svg{ width:21px; height:21px; opacity:.8; } /* Pie: mismo medianoche del sitio. */ footer{ background:var(--nav); color:rgba(255,255,255,.68); font-size:var(--t-sm); margin-top:var(--e5); } footer a{ color:rgba(255,255,255,.82); } footer a:hover{ color:#fff; } /* ---------------- 4b · RITMO, CABECERA Y COLUMNAS ------------------- */ /* ⚠️ ESTE BLOQUE EXISTE PARA MATAR LOS ESTILOS EN LÍNEA. La versión anterior resolvía cada pantalla a mano: `style="margin-top: 26px"`, `min-width:min(100%,420px)`, `width:320px`. Eran 1.400 reglas sueltas, y por eso dos pantallas hermanas nunca tenían el mismo aire ni las mismas columnas: cada una había sido ajustada a ojo. Acá el ritmo y la grilla se declaran UNA vez. */ /* Escala de espaciado. Cuatro pasos, no diecisiete valores inventados. */ :root{ --e1:.5rem; --e2:.9rem; --e3:1.4rem; --e4:2.1rem; --e5:3rem; } /* Ritmo vertical del contenido: los bloques directos de
se separan solos y siempre igual. Nadie tiene que acordarse de un margen. */ .av-main > * + *{ margin-top:var(--e4); } .av-main > .av-cursonav + *{ margin-top:var(--e3); } /* ── Cabecera de pantalla ── Rótulo + título + (opcional) dato a la derecha. El problema que resuelve: con `.sec-hd` en `align-items:baseline`, el dato de la derecha se alineaba con el RÓTULO —la primera línea del bloque izquierdo— y quedaba flotando arriba, lejos del título. Ahora el dato se alinea con la base del TÍTULO, que es con lo que se lee en pareja. */ .pg-cab{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; column-gap:var(--e4); row-gap:.45rem; margin-bottom:var(--e3); } .pg-cab-tx{ grid-column:1; min-width:0; } .pg-cab h1{ margin:0; } /* La acción se alinea con la BASE DEL TÍTULO (por eso `baseline` en la grilla y no `flex-end`): con flex-end quedaba pegada al fondo del bloque izquierdo —es decir, junto a la bajada— y se leía como si perteneciera al párrafo en vez de al título. */ .pg-cab-ac{ grid-column:2; justify-self:end; align-self:baseline; display:flex; align-items:center; gap:var(--e1); flex-wrap:wrap; } /* La bajada ocupa su propia fila, a todo el ancho y con medida de lectura. */ .pg-cab .sub{ grid-column:1 / -1; color:var(--mut); font-size:var(--t-sm); margin:0; max-width:var(--lectura); } @media (max-width: 640px){ .pg-cab{ grid-template-columns:minmax(0,1fr); } .pg-cab-ac{ grid-column:1; justify-self:start; } } /* `.sec-hd` se conserva (lo usan las secciones internas) pero alineado igual que la cabecera: por la base, no por la primera línea. */ .sec-hd{ display:flex; align-items:flex-end; justify-content:space-between; gap:.75rem var(--e3); margin:0 0 var(--e2); flex-wrap:wrap; } .sec-hd h2{ margin:0; } .sec-hd .micro{ flex:none; padding-bottom:.1rem; } /* ── Columnas ── Grilla de verdad en vez de flex con anchos mágicos. `.av-cols` es contenido + panel lateral; el panel tiene un ancho ideal y cede antes que el contenido. Bajo 900px se apila sin media queries sueltas. */ .av-cols{ display:grid; gap:var(--e4); align-items:start; grid-template-columns:minmax(0,1fr) minmax(0, 21rem); } .av-cols.iguales{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); } @media (max-width: 980px){ .av-cols{ grid-template-columns:minmax(0,1fr); } } /* Pila con ritmo propio, para el interior de una tarjeta o un panel. */ .pila > * + *{ margin-top:var(--e2); } .pila-sm > * + *{ margin-top:var(--e1); } /* Miga de pan. Una clase en vez de repetir el mismo estilo en línea en ocho pantallas (y con la flecha ya girada, que era el otro pegote). */ .av-volver{ display:inline-flex; align-items:center; gap:.4rem; font-size:var(--t-xs); color:var(--mut); font-weight:500; } .av-volver:hover{ color:var(--acc); text-decoration:none; } .av-volver svg{ transform:rotate(180deg); flex:none; } /* Barra de acciones */ .acciones{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; } /* ------------------------- 5 · COMPONENTES -------------------------- */ .card{ background:var(--sf); border:1px solid var(--ln); border-radius:var(--r); box-shadow:var(--sh); } .card-pad{ padding:clamp(1.1rem, 2.5vw, 1.5rem); } /* ── El héroe ── Campo medianoche con el SELLO DE LA ESCUELA de marca de agua, calcado del banner del sitio público. El degradado diagonal de la versión anterior y su sombra azul eran lo que más lo hacía ver «de plantilla». Va en tres capas, y el orden importa: fondo → el medianoche y un halo frío del azul institucional ::before→ el sello, a la derecha y centrado ::after → un velo que se cierra sobre el sello para que el texto que pasa por encima no pierda contraste Es el mismo gesto que `.ee-heroe` en escuela.css. */ .hero{ position:relative; overflow:hidden; background: radial-gradient(120% 140% at 88% 50%, color-mix(in srgb, var(--renacer) 42%, transparent) 0%, color-mix(in srgb, var(--renacer) 10%, transparent) 40%, transparent 64%), var(--nav); color:#fff; border-radius:var(--r); padding:clamp(1.5rem, 3.2vw, 2.25rem); border:1px solid var(--nav-ln); } /* Capa 1 · el sello. `inset` + `margin-block:auto` para centrarlo en vertical y NO `translateY`, que es lo que rompe si algún día se le pone una transición. Va ENTERO y dentro del borde: recortarlo contra el canto deja un arco que ya no es el sello de nadie. */ .hero-emblem{ /* Sangra por el borde derecho para no quedar justo debajo del badge de progreso, que vive en esa misma esquina. El sitio hace lo mismo en su punto de quiebre (`inset:0 -28% 0 auto`). */ position:absolute; inset:0 -4% 0 auto; margin-block:auto; height:var(--sello); aspect-ratio:1; width:auto; object-fit:contain; /* .72, el MISMO valor del sello del sitio. No se ve «al 72%» porque el velo de la capa siguiente va encima: el sello sube y el fondo detrás del texto se oscurece a la vez, así que el contraste no baja. Si se mueve este número, hay que volver a mirar el velo. */ opacity:.72; z-index:0; pointer-events:none; user-select:none; } /* Capa 2 · el velo. Se cierra desde la izquierda —donde está el titular— y se abre hacia la derecha, donde el sello puede respirar. Sin esto, el texto sobre el emblema pierde legibilidad. */ .hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, var(--nav) 0%, color-mix(in srgb, var(--nav) 94%, transparent) 40%, color-mix(in srgb, var(--nav) 74%, transparent) 72%, color-mix(in srgb, var(--nav) 62%, transparent) 100%); } /* El contenido, por encima de las dos capas. */ .hero > *:not(.hero-emblem){ position:relative; z-index:2; } .hero h1{ color:#fff; font-size:clamp(1.5rem, 1.1rem + 1.7vw, 2.15rem); } /* Distribución del héroe: el texto a la izquierda con su medida, y el dato de progreso a la derecha como pieza propia. Antes el porcentaje flotaba suelto encima del sello y no se leía como nada. */ .hero-fila{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e3) var(--e4); flex-wrap:wrap; } .hero-tx{ min-width:0; max-width:56ch; flex:1 1 22rem; } /* ⚠️ Fondo con CUERPO, no un velo del 10%. Este bloque cae justo encima del sello, que es la zona más clara del héroe: con un fondo translúcido al 10% el porcentaje parecía texto suelto flotando sobre el emblema. Se le da un fondo derivado del propio medianoche —así nunca desentona— con opacidad suficiente para que el sello quede DETRÁS y el dato se lea como una pieza. */ .hero-dato{ flex:none; text-align:center; border-radius:var(--r); background:color-mix(in srgb, var(--nav) 78%, transparent); border:1px solid rgba(255,255,255,.18); padding:.9rem 1.35rem; min-width:7.5rem; backdrop-filter:blur(3px); } .hero-dato .n{ font-family:var(--mono); font-size:1.75rem; font-weight:600; line-height:1; color:#fff; letter-spacing:-.02em; } .hero-dato .t{ font-size:var(--t-xs); color:rgba(255,255,255,.78); margin-top:.3rem; white-space:nowrap; } .hero h2{ color:#fff; } .hero p{ color:rgba(255,255,255,.84); margin:.55em 0 0; max-width:60ch; } /* ⚠️ `:not(.btn)`. Sin esto, esta regla —clase + elemento, más específica que `.btn-onbrand`— pintaba de blanco el texto del botón claro y el «Continuar el curso» quedaba invisible sobre su propio fondo. */ .hero a:not(.btn){ color:#fff; } /* ── Botones ── UN botón lleno por pantalla. El resto se distingue por tinte y borde: veinte botones azules compiten entre sí y no destaca ninguno. */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--sans); font-size:var(--t-sm); font-weight:600; min-height:42px; padding:.6rem 1.15rem; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .btn:hover{ text-decoration:none; } .btn-primary{ background:var(--acc); color:var(--acc-ink); box-shadow:var(--sh-acc); } .btn-primary:hover{ background:var(--renacer-hover); color:#fff; } .btn-ghost{ background:var(--sf); border-color:var(--acc-bd); color:var(--acc); } .btn-ghost:hover{ background:var(--acc-sf); border-color:var(--acc); } /* Sobre el chrome oscuro el botón de contorno se invierte. */ .hero .btn-ghost, footer .btn-ghost, .auth-aside .btn-ghost{ background:transparent; border-color:rgba(255,255,255,.28); color:#fff; } .hero .btn-ghost:hover, footer .btn-ghost:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.5); } /* El botón claro sobre el héroe: es la acción principal de esa tarjeta. */ .btn-onbrand{ background:#fff; color:var(--acc); } .btn-onbrand:hover{ background:var(--acc-sf); color:var(--acc); } .btn-sm{ min-height:34px; padding:.4rem .8rem; font-size:var(--t-xs); } .btn-block{ width:100%; } .btn[disabled], .btn.is-disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; } /* ── Chip de estado ── El color aparece sólo cuando comunica. El chip neutro es gris. */ .chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.2rem .6rem; border-radius:var(--r-full); font-size:var(--t-xs); font-weight:600; line-height:1.5; background:var(--sf3); color:var(--ink2); border:1px solid transparent; white-space:nowrap; } .chip .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; } .chip.ok{ background:var(--ok-sf); color:var(--ok); border-color:var(--ok-bd); } .chip.warn{ background:var(--warn-sf); color:var(--warn); border-color:var(--warn-bd); } .chip.danger{ background:var(--dan-sf); color:var(--danger); border-color:var(--dan-bd); } .chip.info, .chip.brand{ background:var(--acc-sf); color:var(--acc); border-color:var(--acc-bd); } .chip.done{ background:var(--sf3); color:var(--mut); } .chip.bad{ background:#fdecec; color:#b42318; border-color:#f6c9c4; } /* ── Barra de progreso ── En el acento, no en ámbar: el sistema tiene un acento. */ .prog{ height:6px; border-radius:var(--r-full); background:var(--sf3); overflow:hidden; } .prog > i{ display:block; height:100%; border-radius:inherit; background:var(--acc); transition:width var(--t) var(--ease); } .prog.brand > i{ background:var(--acc); } /* Sobre el héroe la pista se aclara para que la barra se lea. */ .hero .prog{ background:rgba(255,255,255,.20); } .hero .prog > i{ background:var(--acc-nav); } /* Avatar de iniciales */ .av{ width:38px; height:38px; border-radius:var(--r-full); flex:none; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.8rem; letter-spacing:.01em; background:var(--acc-sf); color:var(--acc); border:1px solid var(--acc-bd); } .av-sm{ width:30px; height:30px; font-size:.7rem; } .av-lg{ width:3.25rem; height:3.25rem; font-size:1.05rem; } /* Ficha de identidad de «Mis Datos». */ .ficha-yo{ display:flex; align-items:center; justify-content:space-between; gap:var(--e3); flex-wrap:wrap; } .ficha-yo-id{ display:flex; align-items:center; gap:.9rem; } .ficha-yo-nm{ font-weight:650; color:var(--ink); font-size:1.0625rem; line-height:1.3; } /* Estado vacío */ .empty{ text-align:center; padding:clamp(2rem, 5vw, 3.5rem) 1.25rem; } .empty svg, .empty img{ width:64px; height:64px; margin:0 auto 1rem; color:var(--acc-bd); opacity:1; } .empty h3{ font-size:var(--t-h3); margin-bottom:.4rem; color:var(--ink); } .empty p{ color:var(--mut); max-width:44ch; margin:0 auto; font-size:var(--t-sm); } /* Rejilla */ .grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); } /* Todas las tarjetas de una fila miden lo mismo: es lo que hace que una grilla se vea ordenada y no como piezas sueltas. */ .grid > *{ height:100%; } /* ── Grillas de conteo fijo ── `auto-fill` reparte según quepa, y con seis elementos en un ancho que admite cinco deja uno HUÉRFANO en la segunda fila: se ve como un error de maquetación. Cuando el número de elementos se conoce, la grilla se declara y el reparto queda parejo. */ .grid-3{ display:grid; gap:var(--gap); grid-template-columns:repeat(3, minmax(0,1fr)); } .grid-4{ display:grid; gap:var(--gap); grid-template-columns:repeat(4, minmax(0,1fr)); } .grid-5{ display:grid; gap:var(--gap); grid-template-columns:repeat(5, minmax(0,1fr)); } .grid-3 > *, .grid-4 > *, .grid-5 > *{ height:100%; } @media (max-width: 1100px){ .grid-5{ grid-template-columns:repeat(3, minmax(0,1fr)); } } @media (max-width: 900px){ .grid-3, .grid-4, .grid-5{ grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width: 560px){ .grid-3, .grid-4, .grid-5{ grid-template-columns:minmax(0,1fr); } } /* Ficha de cifra del panel: la cifra manda, el rótulo acompaña. */ .kpi{ display:flex; flex-direction:column; } .kpi-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; } .kpi-n{ font-family:var(--mono); font-size:1.85rem; font-weight:600; color:var(--ink); line-height:1.1; letter-spacing:-.03em; margin-top:.35rem; } .kpi-nota{ margin-top:auto; padding-top:.25rem; } /* Aviso / nota */ .note{ display:flex; gap:.7rem; padding:.85rem 1rem; border-radius:var(--r); background:var(--acc-sf); border:1px solid var(--acc-bd); color:var(--ink2); font-size:var(--t-sm); } .note.warn{ background:var(--warn-sf); border-color:var(--warn-bd); } .note .ic{ flex:none; color:var(--acc); display:inline-flex; } .note.warn .ic{ color:var(--warn); } .note.ok{ background:var(--ok-sf); border-color:var(--ok-bd); } .note.ok .ic{ color:var(--ok); } .note p{ max-width:none; margin:0; } /* Aro de icono, para los accesos en tarjeta. */ .kpi-ico{ width:var(--ico); height:var(--ico); border-radius:var(--r-sm); background:var(--acc-sf); color:var(--acc); border:1px solid var(--acc-bd); display:flex; align-items:center; justify-content:center; flex:none; } /* ------------------ 5b · MENÚ DEL CURSO Y TABLAS -------------------- */ /* La barra de siete pestañas de adentro de un curso (ver includes/aula_curso_nav.php). Es la navegación que el aula original tenía y que hay que conservar: desde cualquier pantalla del curso se llega a cualquier otra en un clic. */ /* El contenedor lleva un degradado a la derecha que avisa «hay más» cuando la barra se desborda: antes la última pestaña se cortaba en seco contra el borde y parecía un defecto, no un scroll. */ .av-cursonav-caja{ position:relative; } .av-cursonav-caja::after{ content:""; position:absolute; right:0; top:0; bottom:1px; width:2.5rem; pointer-events:none; background:linear-gradient(90deg, transparent, var(--bg) 70%); } /* ⚠️ Sin media query por ventana. El desborde de esta barra depende del ANCHO DEL CONTENEDOR (que cambia con .estrecho/.medio/.wide), no del de la ventana: en una pantalla de 1440px con contenedor estrecho la barra igual se desborda. El degradado se queda siempre; sobre el fondo de la página, cuando no hay desborde, es invisible. */ .av-cursonav{ display:flex; gap:.15rem; margin:0; border-bottom:1px solid var(--ln); /* En el teléfono se desplaza en horizontal en vez de apretujarse o partirse en tres filas. El original se partía. */ overflow-x:auto; scrollbar-width:thin; -webkit-overflow-scrolling:touch; } .av-cursonav::-webkit-scrollbar{ height:3px; } .av-cursonav::-webkit-scrollbar-thumb{ background:var(--ln); border-radius:99px; } .av-cursonav a{ display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap; padding:.65rem .85rem; font-size:var(--t-sm); font-weight:500; color:var(--mut); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .av-cursonav a svg{ flex:none; opacity:.8; } .av-cursonav a:hover{ color:var(--ink); text-decoration:none; border-bottom-color:var(--acc-bd); } /* La activa: tinta plena y filete de acento. El menú original no marcaba dónde estabas; en cualquier pantalla se veía igual. */ .av-cursonav a.on{ color:var(--acc); font-weight:600; border-bottom-color:var(--acc); } .av-cursonav a.on svg{ opacity:1; } /* ── Tabla de datos ── La portada del aula original era una tabla con TODOS los datos del curso a la vista, y eso era una virtud: el alumno veía de una las fechas, el equipo y el libro sin entrar a nada. Se conserva la tabla y se arregla lo que estaba mal —tipografía, aire, alineación— y lo que faltaba: en el teléfono se convierte en fichas apiladas en vez de comprimirse a ocho columnas ilegibles. */ /* ⚠️ `table-layout:auto` era el problema: el navegador repartía el ancho según el CONTENIDO, así que la columna «Equipo asignado» —la que más texto tiene— se llevaba el espacio y el nombre del curso se partía en dos líneas. Se fija el reparto: el nombre manda, los datos cortos ocupan lo justo. */ .av-tabla{ width:100%; border-collapse:collapse; font-size:var(--t-sm); table-layout:fixed; } /* Alineación por la primera línea de texto, no por el alto de la celda: con `top` a secas, un chip y una fecha en la misma fila arrancaban a distinta altura y la fila se veía torcida. */ .av-tabla td{ vertical-align:top; } .av-tabla td > *:first-child{ margin-top:0; } .av-tabla th{ background:var(--sf2); color:var(--mut); font-weight:600; font-size:var(--t-xs); text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--ln); white-space:nowrap; } .av-tabla td{ padding:.9rem .8rem; border-top:1px solid var(--ln2); } .av-tabla tbody tr:hover{ background:var(--sf2); } .av-tabla .nom{ color:var(--ink); font-weight:600; font-size:var(--t-body); line-height:1.35; } .av-tabla .fechas{ white-space:nowrap; font-family:var(--mono); font-size:var(--t-xs); color:var(--ink2); } /* ⚠️ UNA LÍNEA POR PERSONA, y recorta si no cabe. Sin esto, «Profesor(a) Marcelo Ziem Cortés» se partía en dos o tres líneas y la fila crecía con él: dos cursos con distinto número de integrantes daban filas de alturas muy distintas y la tabla se veía como un peine. Ahora la diferencia entre filas es de una línea por persona, que es información, no ruido de maquetación. */ .av-tabla .equipo{ font-size:var(--t-xs); line-height:1.45; } .av-tabla .equipo b{ display:block; color:var(--ink); font-weight:600; font-size:var(--t-sm); margin-bottom:.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .av-tabla .equipo > div{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* El cargo va antes del nombre, en gris: se lee la jerarquía sin leer toda la línea. */ .av-tabla .equipo .muted{ font-weight:500; } .av-tabla-caja{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* Reparto de la tabla de cursos de la portada. Suma 100%. El nombre se lleva el tercio que necesita para no partirse; el equipo, que es el que más texto trae, queda acotado y recorta con elegancia. */ .av-tabla.t-cursos col.c-nom{ width:26%; } .av-tabla.t-cursos col.c-est{ width:10%; } .av-tabla.t-cursos col.c-fec{ width:12%; } .av-tabla.t-cursos col.c-ins{ width:10%; } .av-tabla.t-cursos col.c-equ{ width:21%; } .av-tabla.t-cursos col.c-mod{ width:8%; } .av-tabla.t-cursos col.c-lib{ width:8%; } .av-tabla.t-cursos col.c-opc{ width:11%; } /* «Mis Cursos» es la misma tabla sin la columna del libro: siete columnas en vez de ocho. */ .av-tabla.t-miscursos col.c-nom{ width:29%; } .av-tabla.t-miscursos col.c-est{ width:11%; } .av-tabla.t-miscursos col.c-fec{ width:13%; } .av-tabla.t-miscursos col.c-ins{ width:11%; } .av-tabla.t-miscursos col.c-equ{ width:22%; } .av-tabla.t-miscursos col.c-mod{ width:9%; } .av-tabla.t-miscursos col.c-opc{ width:11%; } @media (max-width: 860px){ .av-tabla colgroup{ display:none; } } /* El progreso vive PEGADO al nombre, no colgando con un ancho arbitrario: ocupa el ancho de su columna y respeta el ritmo de la celda. */ /* Acotada: cruzando toda la columna se leía como un separador y no como un dato. A 11rem sigue siendo comparable entre filas. */ .av-tabla .prog{ margin-top:.55rem; max-width:11rem; } .av-tabla .prog + .micro{ margin-top:.3rem; } /* En el teléfono la tabla se vuelve fichas. Cada celda muestra su rótulo con `data-rot`, así no hace falta duplicar el marcado. */ @media (max-width: 860px){ .av-tabla, .av-tabla thead, .av-tabla tbody, .av-tabla tr, .av-tabla th, .av-tabla td{ display:block; } .av-tabla thead{ position:absolute; left:-9999px; } .av-tabla tr{ background:var(--sf); border:1px solid var(--ln); border-radius:var(--r); box-shadow:var(--sh); margin-bottom:var(--gap); padding:.35rem .25rem; } .av-tabla tr:hover{ background:var(--sf); } /* ⚠️ El rótulo va ARRIBA del valor, no al lado. Con `display:flex` la celda ponía en fila TODOS sus hijos, y la celda del equipo —que trae el nombre del equipo y una línea por persona— se desplegaba en horizontal y cada línea salía recortada: «A Prof… Colabor…». Apilando, cada dato se lee entero. */ .av-tabla td{ border:0; padding:.45rem .9rem; display:block; } .av-tabla td::before{ content:attr(data-rot); display:block; margin-bottom:.1rem; color:var(--mut); font-size:var(--t-xs); font-weight:600; } .av-tabla td:empty{ display:none; } /* En la ficha hay ancho de sobra: el equipo no necesita recortarse. */ .av-tabla .equipo b, .av-tabla .equipo > div{ white-space:normal; overflow:visible; text-overflow:clip; } .av-tabla .prog{ max-width:none; } /* El nombre del curso encabeza la ficha: sin rótulo y a todo el ancho. */ .av-tabla td.td-nom{ display:block; padding-top:.8rem; } .av-tabla td.td-nom::before{ display:none; } /* La acción, abajo y a todo el ancho. */ .av-tabla td.td-accion{ display:block; padding-bottom:.85rem; } .av-tabla td.td-accion::before{ display:none; } .av-tabla-caja{ overflow-x:visible; } } /* --------------------- 6 · TARJETA DE CURSO ------------------------- */ .course{ display:flex; flex-direction:column; overflow:hidden; transition:border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); } .course:hover{ border-color:var(--acc-bd); box-shadow:var(--sh-acc); transform:translateY(-3px); } .course-top{ padding:1.1rem 1.2rem 0; display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; } .course-body{ padding:.75rem 1.2rem 1.2rem; display:flex; flex-direction:column; gap:.85rem; flex:1; } .course h3{ font-size:1.05rem; line-height:1.3; color:var(--ink); } .course-meta{ display:flex; flex-wrap:wrap; gap:.3rem .9rem; font-size:var(--t-xs); color:var(--mut); } .course-meta span{ display:inline-flex; align-items:center; gap:.35rem; } .course-meta svg{ flex:none; opacity:.85; } .course-meta b{ color:var(--ink2); font-weight:600; } .course-team{ display:flex; align-items:center; gap:.6rem; padding-top:.85rem; border-top:1px solid var(--ln2); } .course-team .nm{ font-size:var(--t-xs); line-height:1.35; min-width:0; } .course-team .nm b{ color:var(--ink); font-weight:600; display:block; font-size:var(--t-sm); } .course-foot{ margin-top:auto; padding-top:.15rem; } /* ---------------------- 7 · VISOR DE CLASE -------------------------- */ .player{ position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; background:#000; border:1px solid var(--ln); } .player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .ytmin{ position:relative; display:block; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; background:#000; border:1px solid var(--ln); } .ytmin img{ width:100%; height:100%; object-fit:cover; opacity:.85; transition:opacity var(--t-fast); } .ytmin:hover img{ opacity:.68; } .ytmin .play{ position:absolute; inset:0; margin:auto; width:62px; height:44px; background:var(--yt); border-radius:10px; display:flex; align-items:center; justify-content:center; } .ytmin .play::after{ content:''; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent #fff; margin-left:3px; } /* Índice de clases */ .classlist{ display:flex; flex-direction:column; } /* `min-height` para que todas las filas midan lo mismo lleven o no un chip al final: sin esto la lista se veía como un peine. */ .classrow{ display:flex; align-items:center; gap:.8rem; min-height:3.4rem; padding:.55rem .5rem; border-bottom:1px solid var(--ln2); color:inherit; border-radius:var(--r-sm); transition:background var(--t-fast) var(--ease); } .classrow > .chip{ flex:none; } .classrow:last-child{ border-bottom:0; } a.classrow:hover{ background:var(--sf3); text-decoration:none; } .classrow-n{ width:30px; height:30px; border-radius:var(--r-full); flex:none; display:flex; align-items:center; justify-content:center; font-size:var(--t-xs); font-weight:600; font-family:var(--mono); background:var(--sf3); color:var(--mut); } .classrow.done .classrow-n{ background:var(--ok-sf); color:var(--ok); } .classrow.now .classrow-n{ background:var(--acc); color:#fff; } .classrow-tx{ flex:1 1 auto; min-width:0; } .classrow > svg:last-child{ flex:none; color:var(--mut); } .classrow-tx b{ display:block; font-size:var(--t-sm); color:var(--ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .classrow-tx .micro{ margin-top:.05rem; } /* Contenido de clase: normaliza el HTML que llega del CKEditor. */ /* ⚠️ `overflow-wrap:anywhere` — ESTO NO ES COSMÉTICO. Acá adentro va HTML que ESCRIBEN LOS PROFESORES, y lo que escriben son, entre otras cosas, enlaces pegados en crudo: Dropbox, Zoom, WhatsApp. Una URL no tiene espacios, así que para el navegador es UNA palabra de 500px, y una palabra que no cabe no se corta: sobresale. En el teléfono eso no desbordaba sólo la tarjeta, desbordaba la PÁGINA —169px medidos a 390px de ancho— y toda la pantalla se podía arrastrar de lado. `anywhere` la deja partir donde sea, que para una dirección es lo correcto: nadie lee una URL, se pincha. */ .content-html{ font-size:var(--t-body); color:var(--ink2); line-height:1.7; max-width:var(--lectura); overflow-wrap:anywhere; } .content-html > *:first-child{ margin-top:0; } .content-html h1,.content-html h2{ font-family:var(--serif); } .content-html h1,.content-html h2,.content-html h3{ margin:1.5em 0 .5em; color:var(--ink); } .content-html h2{ font-size:1.35rem; } .content-html h3{ font-size:1.1rem; } .content-html p{ margin:0 0 1em; } .content-html img{ border-radius:var(--r-sm); margin:1.2em 0; } .content-html ul,.content-html ol{ margin:0 0 1em; padding-left:1.35em; } .content-html li{ margin:.35em 0; } .content-html a{ text-decoration:underline; text-underline-offset:2px; } /* Una tabla dentro del contenido se desplaza sola si no cabe, en vez de ensanchar la pantalla. Mismo criterio que la URL de arriba. */ .content-html table{ width:100%; border-collapse:collapse; margin:1.2em 0; font-size:var(--t-sm); display:block; overflow-x:auto; } .content-html th, .content-html td{ border:1px solid var(--ln); padding:.5rem .7rem; text-align:left; } .content-html th{ background:var(--sf2); } /* La cita en serif: es la Escritura, y se distingue por tipografía. */ .content-html blockquote{ margin:1.4em 0; padding:.2em 0 .2em 1.15em; border-left:2px solid var(--escritura-bd); font-family:var(--serif); font-style:italic; font-size:1.2rem; line-height:1.45; color:var(--escritura); font-variation-settings:'opsz' 24, 'SOFT' 0, 'WONK' 0; } .content-html blockquote p{ margin:0; } /* ------------------ 8 · FORMULARIOS Y ACCESO ------------------------ */ .field{ margin-bottom:1rem; } .field label{ display:block; font-size:var(--t-sm); font-weight:600; color:var(--ink2); margin-bottom:.35rem; } .input, input[type=text].input, input[type=email].input, input[type=password].input, input[type=search].input, input[type=date].input, input[type=time].input, input[type=number].input{ width:100%; min-height:44px; padding:.6rem .8rem; font-family:var(--sans); font-size:var(--t-body); color:var(--ink); background:var(--sf); border:1px solid var(--ln); border-radius:var(--r-sm); transition:border-color var(--t-fast), box-shadow var(--t-fast); } textarea.input{ min-height:auto; line-height:1.6; } select.input{ appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666c78' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .7rem center; padding-right:2.1rem; } .input:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 15%, transparent); } .input::placeholder{ color:var(--mut); opacity:.75; } .input:disabled{ background:var(--sf2); color:var(--mut); } .input-ic{ position:relative; } /* ⚠️ Se repiten los selectores de atributo del bloque de arriba, y no es redundancia: `input[type=text].input` tiene MÁS especificidad que `.input-ic .input`, así que su `padding` en taquigrafía volvía a pisar este `padding-left` y el ícono quedaba encima del texto. Se vio en el acceso: «(icono)correo@ejemplo.cl». */ .input-ic .input, .input-ic input[type=text].input, .input-ic input[type=email].input, .input-ic input[type=password].input, .input-ic input[type=search].input{ padding-left:2.6rem; } .input-ic > svg{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--mut); pointer-events:none; } /* Pantalla de acceso: dos panes en escritorio, uno en teléfono. */ .auth{ min-height:100dvh; display:grid; grid-template-columns:1.05fr .95fr; } .auth-aside{ position:relative; overflow:hidden; color:#fff; padding:clamp(2rem, 5vw, 3.5rem); background:var(--nav); display:flex; flex-direction:column; justify-content:space-between; } .auth-aside::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(75% 110% at 78% 8%, rgba(127,166,255,.16), transparent 62%); } .auth-aside > *{ position:relative; } .auth-aside .emblem{ position:absolute; right:-80px; bottom:-80px; width:clamp(260px, 40vw, 400px); opacity:.09; z-index:0; } .auth-aside-logo{ display:flex; align-items:center; gap:.85rem; } .auth-aside-logo img{ height:46px; width:auto; background:none; border-radius:0; padding:0; } .auth-aside-mid{ max-width:34ch; } .auth-aside-mid h2{ color:#fff; font-size:clamp(1.75rem, 1.2rem + 2vw, 2.6rem); line-height:1.08; } .auth-aside-mid p{ color:rgba(255,255,255,.82); margin-top:.75rem; } .auth-aside-foot{ font-size:var(--t-xs); color:rgba(255,255,255,.62); } .auth-form{ display:flex; align-items:center; justify-content:center; padding:clamp(2rem, 5vw, 3rem) var(--pad); background:var(--bg); } .auth-form-in{ width:100%; max-width:380px; } .auth-form-in h1{ font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); } .auth-form-in .sub{ color:var(--mut); margin:.4rem 0 1.6rem; font-size:var(--t-sm); } .auth-alert{ display:flex; gap:.6rem; align-items:flex-start; padding:.75rem .9rem; border-radius:var(--r-sm); font-size:var(--t-sm); margin-bottom:1.1rem; } .auth-alert svg{ flex:none; margin-top:.15rem; } .auth-alert.err{ background:var(--dan-sf); border:1px solid var(--dan-bd); color:var(--danger); } .auth-alert.ok{ background:var(--ok-sf); border:1px solid var(--ok-bd); color:var(--ok); } .auth-alert.info{ background:var(--acc-sf); border:1px solid var(--acc-bd); color:var(--acc); } /* Ayudas del ingreso (oct 2026): la indicación bajo la etiqueta, el estado en vivo del RUN / de la clave nueva y el ojo de la contraseña. */ .field-ayuda{ font-size:var(--t-xs); color:var(--mut); margin:-.15rem 0 .45rem; } .field-pie{ text-align:right; margin-top:.45rem; font-size:var(--t-sm); } .run-estado{ min-height:1.2em; margin-top:.35rem; font-size:var(--t-xs); line-height:1.45; color:var(--mut); } .run-estado:empty{ margin-top:0; min-height:0; } .run-estado.ok{ color:var(--ok); } .run-estado.warn{ color:var(--warn); } .con-ojo .input, .con-ojo input[type=password].input, .con-ojo input[type=text].input{ padding-right:3rem; } .ojo{ position:absolute; right:.3rem; top:50%; transform:translateY(-50%); width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; border-radius:var(--r-sm); color:var(--mut); cursor:pointer; } .ojo:hover{ color:var(--acc); background:var(--acc-sf); } .ojo:focus-visible{ outline:2px solid var(--acc); outline-offset:1px; } .ojo span{ display:inline-flex; } .ojo .i-ocultar, .ojo[aria-pressed=true] .i-ver{ display:none; } .ojo[aria-pressed=true] .i-ocultar{ display:inline-flex; } /* «¿Cómo ingreso?»: un botón bajo el formulario que abre la ayuda en una ventana modal. Desplegada en la página alargaba el ingreso a varias pantallas de alto. */ .ayuda-boton{ display:flex; align-items:center; gap:.6rem; width:100%; min-height:50px; margin-top:1.6rem; padding:.75rem 1rem; text-align:left; cursor:pointer; font-family:var(--sans); font-size:var(--t-sm); font-weight:600; color:var(--ink); background:var(--sf); border:1px solid var(--ln); border-radius:var(--r); transition:border-color var(--t-fast), background var(--t-fast); } .ayuda-boton:hover{ border-color:var(--acc-bd); background:var(--acc-sf); } .ayuda-boton:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; } .ayuda-boton > svg{ color:var(--acc); flex:none; } .ayuda-boton .muted{ font-weight:400; } .ayuda-boton .ir{ margin-left:auto; display:inline-flex; color:var(--mut); } /* Tras un intento fallido: que se note dónde está la ayuda. */ .ayuda-boton.destacar{ border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 14%, transparent); } /* El enlace «Ver cómo escribirlos» dentro del aviso de error. */ .auth-alert-enlace{ display:inline; padding:0; margin-left:.2rem; background:none; border:0; font:inherit; font-weight:600; color:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer; } /* La ventana. El no lleva relleno: todo va en .ayuda-modal-in, y así un clic sobre el mismo sólo puede ser el fondo (cierra). */ .ayuda-modal{ padding:0; border:0; margin:auto; width:min(1080px, calc(100vw - 2rem)); max-height:min(88dvh, 860px); border-radius:14px; background:var(--sf); color:var(--ink); box-shadow:var(--sh-lg); overflow:hidden; } .ayuda-modal::backdrop{ background:rgba(7,17,41,.55); } .ayuda-modal-in{ display:flex; flex-direction:column; max-height:inherit; } .ayuda-modal[open]{ display:block; animation:ayuda-entra var(--t) var(--ease); } @keyframes ayuda-entra{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } body:has(.ayuda-modal[open]){ overflow:hidden; } /* que no se mueva el ingreso detrás */ .ayuda-modal-cab{ display:flex; align-items:flex-start; gap:1rem; flex:none; padding:1.1rem 1.25rem .95rem; border-bottom:1px solid var(--ln2); } .ayuda-modal-cab h2{ font-size:clamp(1.2rem, 1.05rem + .6vw, 1.45rem); margin-top:.2rem; } .ayuda-bajada{ margin:.3rem 0 0; font-size:var(--t-sm); color:var(--mut); max-width:60ch; } .ayuda-cerrar{ margin-left:auto; flex:none; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; border-radius:var(--r-sm); color:var(--mut); } .ayuda-cerrar:hover{ background:var(--sf3); color:var(--ink); } .ayuda-cerrar:focus-visible{ outline:2px solid var(--acc); outline-offset:1px; } /* El pie: las salidas («Olvidé mi contraseña», «Escríbenos», el video) siempre a la vista, y «Entendido» para volver. */ .ayuda-modal-pie{ flex:none; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1rem; padding:.85rem 1.25rem; border-top:1px solid var(--ln2); background:var(--sf2); } .ayuda-cuerpo{ flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:1rem 1.25rem 1.25rem; font-size:var(--t-sm); color:var(--ink2); } /* :where() deja estos párrafos con la especificidad mínima, para que el espaciado entre bloques (`> * + *`) de abajo sea el que mande. */ .ayuda-cuerpo :where(p){ margin:0; font-size:inherit; } .ayuda-cuerpo :where(p.micro){ font-size:var(--t-xs); } .ayuda-cuerpo > * + *, .ayuda-cols > div > * + *{ margin-top:.8rem; } .ayuda-cuerpo h3{ font-size:1rem; color:var(--ink); } /* Tres bloques —los pasos; el ejemplo y lo que NO funciona; el aviso de la contraseña y «¿No puedes entrar?»— en tres columnas en escritorio: es lo que hace que la ayuda quepa entera en una pantalla de laptop (768 px de alto) sin desplazarse. En dos columnas el bloque de la izquierda medía 555 px y sólo había 377. */ .ayuda-cols{ display:grid; align-items:start; gap:1.25rem 1.5rem; grid-template-columns:repeat(3, minmax(0,1fr)); grid-template-areas:"pasos ejemplo mas"; } .ayuda-col-pasos{ grid-area:pasos; } .ayuda-col-ejemplo{ grid-area:ejemplo; } .ayuda-col-mas{ grid-area:mas; } @media (max-width: 1000px){ .ayuda-cols{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-areas:"pasos ejemplo" "mas ejemplo"; } } .ayuda-noentra{ background:var(--sf2); border:1px solid var(--ln); border-radius:var(--r-sm); padding:.75rem .9rem; } .ayuda-noentra h3 + p{ margin-top:.3rem; } /* Teléfono: hoja que sube desde abajo, una columna. */ @media (max-width: 640px){ .ayuda-cols{ grid-template-columns:minmax(0,1fr); gap:1rem; grid-template-areas:"pasos" "ejemplo" "mas"; } .ayuda-modal-pie{ padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); } .ayuda-modal{ width:100%; max-width:100%; max-height:92dvh; margin:auto 0 0; border-radius:16px 16px 0 0; } /* En el teléfono las salidas van como enlaces compactos en una fila y sólo «Entendido» es botón grande: cuatro botones apilados se comían un cuarto de la pantalla. */ .ayuda-modal-pie > .btn{ width:100%; justify-content:center; } .ayuda-modal-pie .ayuda-acciones{ width:100%; justify-content:center; gap:.15rem .9rem; } .ayuda-modal-pie .ayuda-acciones .btn{ min-height:36px; padding:.3rem .2rem; border:0; background:none; box-shadow:none; } @keyframes ayuda-entra{ from{ transform:translateY(24px); opacity:.6; } to{ transform:none; opacity:1; } } } @media (prefers-reduced-motion: reduce){ .ayuda-modal[open]{ animation:none; } } /* Sin JavaScript (o sin , iOS < 15.4) no hay modal: la ayuda va en la página, bajo el formulario. Sin JS siempre visible; sin , la abre y cierra el mismo botón. */ .no-js .ayuda-boton{ display:none; } .no-js .ayuda-modal, .sin-dialog .ayuda-modal[open]{ display:block; position:static; width:auto; max-height:none; margin-top:1.6rem; box-shadow:none; border:1px solid var(--ln); } .no-js .ayuda-modal-pie > .btn, .no-js .ayuda-cerrar{ display:none; } .sin-dialog .ayuda-modal:not([open]){ display:none; } .ayuda-cuerpo code, .auth-form-in code{ font-family:var(--mono); font-size:.92em; color:var(--ink); background:var(--sf3); border:1px solid var(--ln); border-radius:5px; padding:.05rem .35rem; white-space:nowrap; } .ayuda-pasos{ list-style:none; padding:0; counter-reset:paso; display:grid; gap:.6rem; } .ayuda-pasos li{ counter-increment:paso; position:relative; padding-left:2.3rem; } .ayuda-pasos li::before{ content:counter(paso); position:absolute; left:0; top:.05rem; width:1.65rem; height:1.65rem; border-radius:50%; background:var(--acc); color:#fff; font-weight:600; font-size:var(--t-xs); display:flex; align-items:center; justify-content:center; } .ayuda-pasos b{ display:block; color:var(--ink); } .ayuda-pasos span{ color:var(--mut); } .ayuda-aviso{ background:var(--acc-sf); border:1px solid var(--acc-bd); border-radius:var(--r-sm); padding:.6rem .75rem; color:var(--acc); } .ayuda-aviso svg{ vertical-align:-3px; } .ayuda-ejemplo{ background:var(--sf2); border:1px dashed var(--acc-bd); border-radius:var(--r-sm); padding:.75rem .85rem; } .ayuda-ejemplo > * + *{ margin-top:.5rem; } .ayuda-reglas{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; } .ayuda-reglas li{ font-size:var(--t-xs); font-weight:600; color:var(--ok); background:var(--ok-sf); border:1px solid var(--ok-bd); border-radius:var(--r-full); padding:.15rem .6rem; } .ayuda-rot{ font-size:var(--t-xs); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); margin-top:1.1rem !important; } .ayuda-no{ list-style:none; padding:0; display:grid; gap:.35rem; margin-top:.4rem !important; } .ayuda-no li{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; } .ayuda-no code{ text-decoration:line-through; text-decoration-color:var(--danger); background:var(--dan-sf); border-color:var(--dan-bd); } .ayuda-no em{ font-style:normal; color:var(--danger); font-size:var(--t-xs); } .ayuda-acciones{ display:flex; flex-wrap:wrap; gap:.5rem; } .ayuda-acciones .btn{ display:inline-flex; align-items:center; gap:.4rem; } /* Pantallas de clave (recuperar, restablecer, cambiar): una sola columna centrada, con el mismo fondo y la misma tarjeta que el ingreso. */ .clave-wrap{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:clamp(1.5rem, 5vw, 3rem) var(--pad); background:var(--bg); } .clave-wrap .auth-form-in{ max-width:420px; } .clave-marca{ display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem; } .clave-marca img{ height:52px; width:52px; } .clave-marca b{ display:block; color:var(--ink); } .clave-marca span{ font-size:var(--t-xs); color:var(--mut); } .clave-volver{ display:inline-flex; align-items:center; gap:.35rem; margin-top:1.4rem; font-size:var(--t-sm); } .clave-volver svg{ transform:rotate(180deg); } .hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; } /* «¿Olvidaste tu contraseña?» en ventana sobre el ingreso: reutiliza la ventana de la ayuda, angosta como la pantalla propia (una columna). */ .recuperar-modal{ width:min(460px, calc(100vw - 2rem)); } .recuperar-modal .ayuda-modal-cab{ align-items:center; } .recuperar-modal .clave-marca{ margin:0; } .recuperar-modal .clave-marca img{ height:40px; width:40px; } .recuperar-cuerpo{ padding:1.15rem 1.35rem 1.4rem; font-size:var(--t-base, 1rem); color:var(--ink); } .recuperar-cuerpo h2{ font-size:clamp(1.35rem, 1.2rem + .6vw, 1.6rem); } .recuperar-cuerpo .sub{ color:var(--mut); margin:.4rem 0 1.3rem; font-size:var(--t-sm); } .recuperar-cuerpo .ayuda-pasos{ font-size:var(--t-sm); } .recuperar-cuerpo .note{ font-size:var(--t-sm); } .recuperar-cuerpo :where(p){ margin:0; } .recuperar-cuerpo > * + *{ margin-top:0; } button.clave-volver{ background:none; border:0; padding:0; cursor:pointer; font-family:inherit; color:var(--acc); } .recuperar-cuerpo button[aria-busy=true]{ opacity:.7; cursor:progress; } @media (max-width: 640px){ .recuperar-modal{ width:100%; } } /* «Elige tu contraseña» (cambio obligatorio) en ventana sobre el ingreso: la misma ventana de «¿Olvidaste tu contraseña?». Sin JavaScript o sin , la ventana abierta se fija igual al centro sobre un velo. */ .clave-kicker{ margin:0 0 .35rem; font-size:var(--t-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); } .clave-modal .ayuda-modal-cab{ padding-block:.8rem; } .clave-modal .recuperar-cuerpo{ padding-block:1rem 1.15rem; } .clave-modal .sub{ margin:.35rem 0 1rem; } .clave-modal .field{ margin-bottom:.7rem; } .clave-modal.clave-modal .input-ic .input{ height:48px; } .clave-modal .run-estado:empty{ display:none; } .clave-modal .clave-nota{ margin:.2rem 0 .9rem; padding:.6rem .75rem; font-size:var(--t-xs); } .clave-modal .av-entrada-btn{ margin-top:0; height:50px; } .clave-modal .clave-volver{ margin-top:.85rem; } .no-js .clave-modal[open], .sin-dialog .clave-modal[open]{ position:fixed; inset:0; z-index:60; margin:auto; width:min(460px, calc(100vw - 2rem)); height:max-content; max-height:92dvh; overflow:auto; border:0; box-shadow:0 0 0 100vmax rgba(7,17,41,.55), var(--sh-lg); } /* ----------------------------- 9 · PANEL ---------------------------- */ /* El acceso del panel: mismo lenguaje, campo medianoche a pantalla completa para que se note que es la intranet y no el aula. */ .adm-wrap{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:1.5rem; } .adm-card{ width:100%; max-width:400px; } .adm-brand{ text-align:center; margin-bottom:1.6rem; color:#fff; } .adm-brand img{ height:56px; width:auto; margin:0 auto .9rem; } .adm-brand h1{ color:#fff; font-size:1.5rem; } .adm-brand .kicker{ justify-content:center; color:rgba(255,255,255,.7); } .adm-brand .kicker::before{ background:var(--acc-nav); } /* Tablas del panel. Se estilan por elemento —el PHP las escribe con estilos en línea— pero esto pone la base para que se vean parejas. */ .card table{ width:100%; border-collapse:collapse; font-size:var(--t-sm); } .card thead th{ background:var(--sf2); color:var(--mut); font-weight:600; text-align:left; font-size:var(--t-xs); border-bottom:1px solid var(--ln); } .card tbody tr{ border-top:1px solid var(--ln2); } .card tbody tr:hover{ background:var(--sf2); } /* ------------------ 10 · UTILIDADES Y RESPONSIVO -------------------- */ .row{ display:flex; gap:var(--gap); } .col{ display:flex; flex-direction:column; gap:var(--gap); } .between{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; } .wrap-gap{ display:flex; flex-wrap:wrap; gap:.6rem; } .stack > * + *{ margin-top:var(--gap); } .only-mobile{ display:none; } /* Cualquier tabla ancha se desplaza dentro de su caja, nunca la página. */ .card > div[style*="overflow-x"]{ -webkit-overflow-scrolling:touch; } @media (max-width: 900px){ .auth{ grid-template-columns:1fr; } .auth-aside{ display:none; } } @media (max-width: 780px){ /* Deja sitio a la barra inferior fija. */ body{ padding-bottom:var(--nav-bot-h); } .av-nav{ display:none; } .av-botnav{ display:flex; } .hide-mobile{ display:none !important; } .only-mobile{ display:flex; } .av-user-nm, .av-user-rl{ display:none; } .grid{ grid-template-columns:1fr; } /* En el teléfono el titular ocupa todo el ancho y pasa POR ENCIMA del sello: el velo lateral ya no alcanza, así que baja la opacidad. Es el mismo .2 que usa el sitio en su punto de quiebre. */ .hero-emblem{ opacity:.2; inset:0 -18% 0 auto; } .row{ flex-wrap:wrap; } /* En el teléfono el pie no necesita el margen grande de escritorio. */ footer{ margin-top:1.5rem; } } /* Respeta a quien pide menos movimiento. */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .course:hover{ transform:none; } } /* Impresión: que un certificado o una lista salgan legibles. */ /* ===================================================================== PORTADA DEL ALUMNO (principal.php) «Inicio» y «Mis cursos» eran la misma tabla con dos títulos. La tabla completa se quedó en «Mis cursos» y la portada pasó a contestar las tres preguntas con las que el alumno abre el aula: dónde iba, qué sigue, y si se perdió algún aviso. Estas son las piezas de eso. ===================================================================== */ /* ── Dónde ibas ── La tarjeta grande. Texto a la izquierda, acción a la derecha, y en el teléfono una sobre otra con el botón a todo el ancho: en pantalla angosta un botón de «entrar» que no ocupa la línea entera se falla al tocarlo. */ .av-continuar{ display:flex; flex-wrap:wrap; gap:clamp(1rem, 3vw, 1.75rem); align-items:center; justify-content:space-between; border-left:3px solid var(--brand); } .av-continuar-tx{ flex:1 1 20rem; min-width:0; } .av-continuar-tx h2{ margin:.15rem 0 0; font-size:1.22rem; letter-spacing:-.015em; } .av-continuar-ac{ flex:0 1 15rem; } @media (max-width:640px){ .av-continuar-ac{ flex:1 1 100%; } } /* ── Qué sigue ── Misma figura que los bloques de aviso que ya usa el aula: aro con icono, texto al medio, acción al final. */ .av-proxima{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; } /* ── Bloque con cabecera y enlace a la lista completa ── */ .av-bloque-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; margin:0 0 .75rem; } .av-bloque-cab h2{ margin:0; font-size:1.06rem; letter-spacing:-.01em; } .av-bloque + .av-bloque, .av-bloque{ margin-top:var(--gap); } /* Un aviso en la portada es un resumen, no la noticia: título, dos líneas y la fecha. La noticia entera está en su pantalla. */ .av-aviso{ padding:.9rem 1.05rem; } .av-aviso p{ max-width:none; } /* ===================================================================== NOTICIAS Y ANUNCIOS ===================================================================== */ /* Cabecera del aviso: la etiqueta del curso y la fecha. En pantalla ancha van en la misma línea, la fecha al final; cuando el nombre del curso no cabe, la fecha baja sola en vez de empujar al chip a recortarse. */ .av-noti-cab{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.35rem .75rem; margin-bottom:.55rem; } /* El chip envuelve en dos líneas si hace falta: un nombre de curso a medias no identifica el curso, que es para lo único que está. */ .av-noti-curso{ white-space:normal; text-align:left; line-height:1.3; } .av-noti-fecha{ flex:none; white-space:nowrap; } .av-noti-tit{ margin:0 0 .5rem; font-size:1.14rem; letter-spacing:-.015em; } /* ===================================================================== MIS DATOS Era una columna de ocho campos seguidos, todos iguales, más un recuadro angosto de contraseña al costado. Ahora son cuatro fichas —identidad, contacto, cobertura y contraseña— que se leen por lo que agrupan. ===================================================================== */ /* Dos columnas en escritorio, una en teléfono. `minmax(0, …)` en las dos pistas: sin el piso de cero, un