/* ==========================================================================
   Saber 11 Pro · ajustes responsivos del aula completa (29/10/2026)
   Se carga al final: corrige el desborde horizontal a 320 px y con la letra al 130 %
   («Mi plan», «Clases sincrónicas», «Diario», cabecera, tarjetas, botones y chips).
   Causa común: elementos de rejilla con min-width:auto, chips y botones sin salto de
   línea y contenidos anchos (tablas, selectores). No oculta contenido: reorganiza,
   permite saltos y da desplazamiento horizontal LOCAL a las tablas anchas.
   No modifica premium.js ni premium.css.
   ========================================================================== */

/* 1. Los hijos de rejillas y filas pueden encogerse hasta el ancho disponible */
.rejilla > *, .items > *, .form-plan > *, .barras-prueba > *, .sem-cols > *, .bp > *, .item > *,
.bienvenida > *, .proxima > *, .titulo-vista > *, .acciones-item > * { min-width: 0; }
.items, .form-plan, .barras-prueba { grid-template-columns: minmax(0, 1fr); }
.item { grid-template-columns: auto minmax(0, 1fr) auto; }
@media (max-width: 1080px) { .r-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .r-2, .r-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .r-4 { grid-template-columns: minmax(0, 1fr); } }

/* 2. Texto largo: salta de línea en vez de empujar el ancho */
.vista h1, .vista h2, .vista h3, .vista h4, .vista p, .vista li, .vista dd, .vista td, .vista th, .vista summary,
.vista label, .vista small, .tarjeta, .item, .aviso { overflow-wrap: anywhere; }
select, input, textarea, .vista img, .vista video { max-width: 100%; }
.vista fieldset { min-width: 0; }

/* 3. Chips y botones: pueden ocupar dos líneas en pantallas estrechas */
.chips-sem, .meta, .acciones, .acciones-item { flex-wrap: wrap; }
.tarjeta .chip, .item .chip { white-space: normal; max-width: 100%; }
@media (max-width: 640px) {
  .chip { white-space: normal; max-width: 100%; }
  .btn { max-width: 100%; white-space: normal; text-align: center; }
  .bp-dato { white-space: normal; }
}

/* 4. Tablas dentro de formularios y tarjetas: desplazamiento horizontal local, nunca de la página */
.form-plan .tabla, .tarjeta > .tabla, .diario-e .tabla { display: block; max-width: 100%; overflow-x: auto; }
.form-plan .tabla select { min-width: 9rem; }

/* 5. Cabecera del aula: a 320 px y con letra grande, la ruta (miga) pasa a una segunda línea */
@media (max-width: 480px) {
  .app-top { flex-wrap: wrap; gap: .4rem .5rem; padding-inline: 10px; }
  .app-top .miga { order: 3; flex: 1 0 100%; font-size: .8rem; }
  .app-top .derecha { gap: .35rem; min-width: 0; }
  .letra button { min-width: 34px; padding: .2rem .35rem; }
  .usuario { gap: .2rem; padding: 2px; }
}

/* 6. Tarjetas de clase, diario y grabaciones: columnas que se apilan */
@media (max-width: 640px) {
  .clase-t, .diario-e, .grab-card { padding: 14px; }
  .tarjeta.proxima { flex-wrap: wrap; }
}

/* 7. Seguimiento docente: primera columna fija al desplazarse en la tabla */
.tabla-seguimiento th[scope="row"] { position: sticky; left: 0; background: var(--superficie); }

/* 8. Estado guardado de las experiencias */
.ova-guardado { margin: .4rem 0 0; }