/* ═══════════════════════════════════════════════════════════════════════ CAPA RESPONSIVA GLOBAL — Aristóteles Digital Se carga la ÚLTIMA (tras main.css → aula-juegos.css → aula-sistema.css), así que gana por orden de cascada sin necesidad de !important. POR QUÉ EXISTE El sistema se escribió "desktop-first": rejillas con número FIJO de columnas (repeat(4,1fr)…), anchos fijos (sidebars de 260/340px) y un topnav flex sin wrap ni shrink. Solo había un corte en 768px, de modo que entre 769px y ~1530px (TODAS las laptops reales) no existía adaptación: el admin necesitaba 1531px y desbordaba incluso a 1440px. En móvil el desborde no se corregía, se TAPABA con overflow-x:hidden (contenido recortado e inalcanzable). ESTRATEGIA 1) Dejar que las cosas ENCOJAN. Es el arreglo de fondo y casi todo lo demás se deriva de aquí: · flex: un hijo con min-width:auto (el valor por defecto) nunca baja de su ancho de contenido → min-width:0. Esta era la causa exacta del topnav roto. · grid: '1fr' es minmax(AUTO,1fr) y tampoco baja del contenido → minmax(0,1fr). 2) Se CONSERVA el número de columnas de cada rejilla (es diseño, no accidente) y se reduce por breakpoints. auto-fit solo se usa en listas de longitud variable: auto-fit MAXIMIZA columnas y no equivale al diseño original cuando nº de ítems ≠ nº de columnas (p. ej. .obj-grid, 2 col con 4 ítems, pasaba a 4 columnas). 3) Breakpoints (1100 / 900 / 768 / 480) solo para cambios ESTRUCTURALES: apilar un sidebar, mandar la nav a su propia fila. 4) Lo que no cabe se hace ALCANZABLE (scroll propio en píldoras y tablas), nunca se recorta. ══════════════════════════════════════════════════════════════════════ */ /* ── 1. Guardas globales ───────────────────────────────────────────────── */ :root{ /* Alto real del bottom-nav del maestro (.mobile-nav, medido: 55px). Lo usan el padding inferior de la hoja y los botones flotantes, para que no haya que repetir el número en tres sitios. */ --mn-h:58px; /* Sombra dura de "Volver al panel" (misma pauta que .enter-btn del marco) */ --v8close-sh:#4A3480; } html[data-theme="dark"]{ --v8close-sh:#3A2A66; } html{ -webkit-text-size-adjust:100%; } /* Red de seguridad: si algo se escapa, que no rompa el layout de la página. El objetivo es que NUNCA se active — las reglas de abajo hacen que quepa. Dos detalles medidos, y los dos importan: 1) TIENE que ser `clip`, no `hidden`. Con hidden el otro eje pasa de `visible` a `auto` y el elemento se vuelve CONTENEDOR DE SCROLL; el header sticky se ancla entonces a él en vez de al viewport y deja de pegarse (se iba a top:-500 al bajar). `clip` recorta SIN crear ese contenedor. 2) TIENE que ir en , no en . En html la guarda propaga al viewport y el sticky se rompe igual, aunque sea `clip` (comprobado: contiene pero no se pega). En body recorta sin tocar el scroll del viewport → ambas cosas. `hidden` queda de respaldo para Safari < 16, que no entiende `clip`: allí se conserva la contención y se sacrifica el sticky, no al revés. */ body{ overflow-x:hidden; overflow-x:clip; } img,svg,video,canvas,iframe{ max-width:100%; } /* Texto largo (nombres de escuela, correos, URLs) no debe empujar su caja */ h1,h2,h3,h4,p,li,td,th,label,span,button{ overflow-wrap:break-word; } /* ── 2. TOPNAV — el desborde reportado ───────────────────────────────────── Antes: flex-wrap:nowrap + min-width:auto en los hijos ⇒ nada podía encoger y la barra exigía su ancho de contenido (1531px) a cualquier viewport. Ahora: las píldoras de sección absorben el ajuste con scroll horizontal propio; el logo y los controles de la derecha se mantienen siempre visibles porque son los accesos críticos (tema, idioma, perfil). OJO — se mantiene nowrap a propósito en escritorio: en flexbox el WRAP tiene prioridad sobre el SHRINK, así que permitir wrap aquí manda .nr a una tercera fila (header de 138px) en vez de encoger las píldoras. El wrap se activa solo en ≤768px (§5), donde sí queremos la fila propia de píldoras. */ .topnav{ flex-wrap:nowrap; row-gap:8px; } body.app-aula .topnav, body.role-maestro .topnav{ padding:10px clamp(12px,2vw,24px); } .topnav > *{ min-width:0; } .logo{ min-width:0; } /* Las píldoras (#roleTabs = otros roles · #secTabs = maestro) encogen y scrollean en lugar de empujar la barra. En pantallas anchas caben enteras y el scroll ni aparece. */ .topnav .sec-tabs{ flex:0 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; } /* La píldora activa lleva sombra dura (0 3px 0) y las píldoras se mueven en :hover (-1px) y :active (+2px). Con overflow-x:auto el eje Y NO puede ser visible (el CSS lo fuerza a auto/hidden), así que esos 3px se recortaban por abajo. Se reserva el hueco por dentro y se compensa por fuera con margen negativo, para que el alto del header no cambie. Se listan también los #id: aula-sistema.css §84 fija `body.app-aula #roleTabs{padding-bottom:2px}` y, al llevar id, gana a `.topnav .sec-tabs` dentro del bloque ≤768 (allí recortaba 1px). */ .topnav .sec-tabs, body.app-aula #roleTabs, body.app-aula #secTabs{ padding:2px 0 6px; margin:-2px 0 -6px; } .topnav .sec-tabs::-webkit-scrollbar{ display:none; } .topnav .sec-tab{ flex-shrink:0; } /* Título de la sección actual (solo móvil, junto a la hamburguesa). En escritorio sobra: ahí se ven las píldoras y el breadcrumb. */ .nav-section{ display:none; } @media (max-width:768px){ .nav-section:not([hidden]){ display:block; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:'Fredoka',sans-serif; font-weight:600; font-size:15px; color:#fff; line-height:1; } } /* El breadcrumb es contexto secundario: cede espacio antes que nadie */ .bc{ min-width:0; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Controles de la derecha: nunca se comprimen ni se recortan */ .nr{ flex:0 0 auto; min-width:0; } /* ── 3. Rejillas ─────────────────────────────────────────────────────────── LA CAUSA REAL: en Grid, '1fr' equivale a minmax(AUTO,1fr) — la pista nunca baja del ancho de su contenido, así que repeat(4,1fr) desborda en cuanto no caben 4 contenidos. minmax(0,1fr) sí encoge. Ese es el arreglo de fondo. Se CONSERVA a propósito el número de columnas de cada rejilla (era una decisión de diseño) y se reduce por breakpoints. auto-fit se reserva para listas de longitud variable (§ siguiente): auto-fit MAXIMIZA columnas, así que en .obj-grid (2 col por diseño, 4 ítems) daba 4 columnas en escritorio — no es equivalente al diseño original. */ .stats { grid-template-columns:repeat(4,minmax(0,1fr)); } .dash-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .class-preset-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .tmpl-preview-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .gg,.cg,.obj-grid, .ex-options { grid-template-columns:repeat(2,minmax(0,1fr)); } .gcs, .parent-progress { grid-template-columns:repeat(3,minmax(0,1fr)); } .role-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } /* Listas de tarjetas de longitud variable: aquí auto-fit SÍ es lo adecuado, porque no hay un número de columnas "de diseño" que preservar. */ .tmpl-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); } .tipo-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr)); } .mas-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,90px),1fr)); } /* Un hijo de grid/flex tampoco baja de su contenido sin esto */ .stats > *,.dash-grid > *,.gg > *,.cg > *,.obj-grid > *,.role-grid > *, .tmpl-grid > *,.tipo-grid > *,.class-preset-grid > *,.parent-progress > *, .tmpl-preview-grid > *,.gcs > *,.ex-options > *{ min-width:0; } /* Reducción por tamaño. El rango 769–1530px no tenía NINGÚN corte: es donde vive la laptop del usuario (la captura reportada). */ @media (max-width:1100px){ .dash-grid,.class-preset-grid,.tmpl-preview-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .role-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:768px){ /* Mismos cortes que ya definía main.css §267, pero con minmax(0,1fr) para que las pistas puedan encoger de verdad. */ .stats,.obj-grid,.role-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .gg,.cg{ grid-template-columns:minmax(0,1fr); } } @media (max-width:480px){ .ex-options,.dash-grid,.class-preset-grid,.tmpl-preview-grid{ grid-template-columns:minmax(0,1fr); } .parent-progress{ grid-template-columns:repeat(3,minmax(0,1fr)); } /* 3 KPI chicos: caben */ } /* Utilidades para layouts que el JS traía con estilo EN LÍNEA. Un style="" en línea gana a cualquier hoja (salvo !important), así que esas rejillas fijas no se podían arreglar desde aquí: se cambiaron en el origen para usar estas clases. Ancho del panel lateral configurable por --rs-side-w para no multiplicar clases casi idénticas. */ .rs-side{ display:grid; grid-template-columns:1fr var(--rs-side-w,220px); gap:16px; } .rs-side > *{ min-width:0; } @media (max-width:768px){ .rs-side{ grid-template-columns:minmax(0,1fr); } } /* Fila de formulario "campo + campo estrecho" (p. ej. modelo + formato) */ .rs-row{ display:grid; grid-template-columns:1fr var(--rs-row-w,120px); gap:10px; } .rs-row > *{ min-width:0; } @media (max-width:560px){ .rs-row{ grid-template-columns:minmax(0,1fr); } } /* Rejilla de 3 columnas para listas de longitud VARIABLE (resumen NEE por tipo). No se usa auto-fit: el nº de ítems (hasta 6) supera al de columnas de diseño y auto-fit las pondría todas en una fila. */ .rs-grid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .rs-grid3 > *{ min-width:0; } @media (max-width:560px){ .rs-grid3{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Filas flex que debían envolver y no lo hacían (recorte en el mapa a 375px) */ .map-total{ flex-wrap:wrap; } .map-total-card{ flex:1 1 140px; min-width:0; } .gami-bar{ flex-wrap:wrap; } .gami-info{ min-width:180px; } .ph{ flex-wrap:wrap; } .lms-info-bar,.reddit-meta,.reddit-actions,.pbs{ flex-wrap:wrap; } /* ── 4. Cajas de alto/ancho fijo → fluidas ─────────────────────────────── */ #olMap { height:clamp(320px,50vh,520px); } .map-container { min-height:0; } .chat-box { height:clamp(320px,60vh,420px); } .acc-panel { width:min(280px,calc(100vw - 32px)); } .login-card { max-width:min(420px,100%); } .prof-menu { max-width:calc(100vw - 24px); } .lang-dropdown { max-width:calc(100vw - 24px); } /* Etiquetas de barras: en pantallas chicas su min-width empujaba la fila */ .slb { min-width:0; } .tn { min-width:0; } /* "Volver a Admin" flotaba SOBRE todo con z-index:1000 (aula-sistema.css §68): tapaba la hoja "Más" (z-index 120) y sus botones — en la captura se comía "Padres". Baja a 100: sigue sobre la hoja de contenido y sobre el bottom-nav (90), pero la hoja "Más" (110/120) y el drawer ya pasan por encima de él. */ #adminReturnBtn{ z-index:100; } @media (max-width:768px){ /* Compacto en móvil: es un atajo de vuelta, no la acción principal */ #adminReturnBtn{ font-size:13px; padding:9px 14px; } /* Es fijo y se queda encima del último contenido: se reserva su altura para que nada quede permanentemente debajo (body.ver-como lo pone adminVerComo). */ body.ver-como .ctn{ padding-bottom:76px; } body.ver-como.role-maestro .ctn{ padding-bottom:calc(var(--mn-h) + 76px); } } /* El FAB de accesibilidad estaba a 80px del borde (main.css §514). Ese hueco no protege nada: la esquina inferior derecha está libre — "Volver a Admin" y el indicador de idioma viven a la izquierda. Se pega al margen habitual. Solo >480: en móvil chico es una media pastilla a ras (right:0), a propósito. */ @media (min-width:481px){ .acc-fab{ right:20px; } } /* Tablas: scroll propio en vez de estirar la tarjeta. :has() evita tener que envolverlas en un
desde el JS. */ .card:has(> .stt), .card:has(> div > .stt){ overflow-x:auto; } .stt{ min-width:520px; } /* Contenedores: padding fluido (24px fijos se comen la pantalla en móvil) */ body.app-aula .ctn{ padding:clamp(12px,2vw,24px); } .v8-ctn{ padding:clamp(12px,2vw,24px); } /* ── 5. Breakpoints — solo cambios estructurales ───────────────────────── */ /* Laptop chica / tablet apaisada: los sidebars dejan de caber al lado */ @media (max-width:1100px){ .tutor-grid{ grid-template-columns:1fr; } .planning-workspace{ grid-template-columns:minmax(0,1fr); } } /* Tablet: el mapa y el LMS pasan a una sola columna */ @media (max-width:900px){ /* align-items:stretch es imprescindible, no cosmético: .map-wrap trae align-items:flex-start (main.css §234) y, al pasar a columna, eso encoge a los hijos a su ancho de contenido en vez de estirarlos — el mapa se quedaba en 241px dentro de 375. La barra lateral no lo sufría porque lleva width:100%. */ .map-wrap{ flex-direction:column; align-items:stretch; } .map-container{ width:100%; } .map-sidebar{ width:100%; flex-shrink:1; } .map-legend{ position:static; margin:8px 0 0; flex-wrap:wrap; } /* El LMS era una app de dos paneles a pantalla completa: en tablet/móvil el índice pasa arriba (scroll horizontal) y el contenido debajo. */ .lms-layout{ flex-direction:column; height:auto; overflow:visible; } .lms-sidebar{ width:100%; flex-direction:row; overflow-x:auto; overflow-y:hidden; border-right:none; border-bottom:1px solid var(--border); } .lms-sh{ flex:0 0 auto; min-width:200px; border-bottom:none; } .lms-section-title{ display:none; } .lms-si{ flex:0 0 auto; white-space:nowrap; } .lms-si.active::before{ top:auto; bottom:0; left:0; right:0; width:auto; height:3px; border-radius:2px 2px 0 0; } .lms-main{ overflow:visible; padding:clamp(12px,2vw,24px); } } /* Móvil */ @media (max-width:768px){ /* Se mantiene NOWRAP (y las píldoras, si el JS del drawer fallara, escrollan dentro de la barra como en §2). Permitir wrap aquí manda el título de sección a una 2.ª fila (header de 102px en vez de 60): en flexbox el WRAP gana al SHRINK, así que el título nunca llegaría a recortarse con puntos suspensivos. Misma trampa que con .nr en §2. Se calca el selector de aula-sistema.css §83 (`body.app-aula .topnav`, con wrap): con `.topnav` a secas perdía la especificidad y seguía envolviendo. */ .topnav, body.app-aula .topnav, body.role-maestro .topnav{ flex-wrap:nowrap; } /* El logo suelta su texto para que quepan los controles sin scroll */ .logo-sub{ display:none; } /* Controles a la DERECHA. main.css §416 los mandaba a la izquierda con margin-left:0 + flex:1 — tenía sentido cuando las píldoras ocupaban la fila y .nr necesitaba scroll propio; con el drawer sobra y dejaba 67px muertos. */ body > .topnav .nr{ margin-left:auto; flex:0 0 auto; overflow:visible; } /* El bottom-nav es del MAESTRO: main.css §908 lo enciende sin acotar por rol, así que salía también en admin/director/gobernante (que ya tienen su drawer). */ .mobile-nav{ display:none; } body.role-maestro .mobile-nav{ display:flex; } .ctn{ padding-bottom:16px; } /* el hueco solo hace falta… */ body.role-maestro .ctn{ padding-bottom:calc(var(--mn-h) + 12px); } /* …con bottom-nav */ /* Flotantes por encima del bottom-nav (lo tapaban). Solo se suben donde ese nav existe; en el resto de roles se quedan abajo del todo. */ body.role-maestro .acc-fab, body.role-maestro #adminReturnBtn{ bottom:calc(var(--mn-h) + 18px); } /* El logo del maestro trae una teja amarilla (aula-juegos.css §39) pensada para el logo con texto al lado; en móvil, con el texto oculto, queda un borrón amarillo suelto. Se iguala al del resto de roles. */ body.role-maestro .topnav .logo-icon{ background:none; box-shadow:none; border-radius:0; } /* Pantalla completa fuera en móvil: se ocultan los DOS (.fs-toggle cubre el #fsBtn de la barra y el #roleFsBtn del login, que son la misma función). De paso el navegador móvil ya va a pantalla casi completa por sí solo y en iOS la API de fullscreen apenas responde. */ .fs-toggle{ display:none; } /* Objetivo táctil mínimo (WCAG 2.5.5) */ .rbtn,.sec-tab,.role-card,.ex-opt,.acc-font-btn,.lms-si,.reddit-filter{ min-height:44px; } .chat-send,.ex-next,.mini-action{ min-height:40px; } .stt{ min-width:440px; } } @media (max-width:480px){ /* Solo el isotipo: libera ~90px y evita una tercera fila del header a 320px. El wordmark viene SIN clase en el markup (.logo > div sin .logo-icon), así que .logo-text por sí sola no lo alcanzaba. Se cubren ambas formas. */ .logo-text, .logo > div:not(.logo-icon){ display:none; } .ph{ gap:12px; } .pav{ width:48px; height:48px; font-size:20px; } .sv{ font-size:22px; } .gami-stats{ width:100%; justify-content:space-between; } .gami-badges{ width:100%; } } /* ── 6b. Pantallas del maestro: PLANEAR y EVALUAR ────────────────────────── Las dos rompían por lo mismo — algo que no puede encoger — y la guarda overflow-x:hidden lo TAPABA en vez de arreglarlo: la página no desbordaba, pero el contenido quedaba recortado e inalcanzable. (Auditar scrollWidth de la página no lo veía; hay que comparar scrollWidth vs clientWidth por nodo.) */ /* EVALUAR — la rejilla de medallas usa repeat(4,1fr) (aula-juegos.css §182). Con 1fr las pistas no bajan de su contenido: a 360px daban columnas DESIGUALES (70·67·64·72) y recortaban 33px del criterio. Se mantienen las 4 columnas (son una escala de 4 niveles: partirlas rompería la lectura). */ body.role-maestro .aj-medals{ grid-template-columns:repeat(4,minmax(0,1fr)); } body.role-maestro .aj-medal{ min-width:0; } body.role-maestro .aj-medal .aj-medal-lbl{ overflow-wrap:anywhere; } /* PLANEAR — el stepper es flex nowrap con .pw-step{flex:1} y min-width:auto: los 4 pasos pedían 477px en 394 y el paso 4 quedaba cortado. En móvil pasan a 2×2: se ven los 4 (un indicador de progreso oculto no sirve de nada). El wizard inyecta su