/* Aula UEM · estilos propios de las vistas de lectura (inicio, cuatrimestres, materias, materia,
   actividades, actividad, calendario, calificaciones y perfil) y de vistas/piezas.js.
   Solo usa los tokens de base.css, así que el modo oscuro cambia solo. */

/* ───── Video incrustado ───── */

.marco-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radio-chico);
  overflow: hidden;
  background: #000;
}

.marco-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ───── Piezas: tarjetas de dato ───── */

.dato {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}

a.dato:hover {
  border-color: var(--primario);
  transform: translateY(-1px);
}

.dato-icono {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex: none;
}

.dato-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.dato-texto strong {
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
}

.dato-texto span {
  color: var(--texto-2);
  font-size: 0.86rem;
}

.dato-primario { background: var(--primario-suave); color: var(--primario); }
.dato-ambar { background: var(--ambar-suave); color: var(--ambar); }
.dato-verde { background: var(--verde-suave); color: var(--verde); }
.dato-violeta { background: var(--violeta-suave); color: var(--violeta); }
.dato-rojo { background: var(--rojo-suave); color: var(--rojo); }
.dato-cyan { background: var(--cyan-suave); color: var(--cyan); }
.dato-gris { background: var(--gris-suave); color: var(--gris); }

/* ───── Piezas: tarjeta de materia ───── */

.materia-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  padding-top: 22px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.materia-tarjeta::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--tono, var(--primario));
}

.materia-tarjeta:hover {
  border-color: var(--tono, var(--primario));
  transform: translateY(-2px);
  box-shadow: var(--sombra-alta);
}

.materia-tarjeta-cabeza {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.materia-tarjeta-titulo {
  min-width: 0;
}

.materia-tarjeta-titulo h3 {
  font-size: 1.02rem;
  overflow-wrap: anywhere;
}

.materia-tarjeta-profes {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--texto-2);
  font-size: 0.86rem;
}

.materia-tarjeta-profes span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.materia-tarjeta .progreso > span {
  background: var(--tono, var(--primario));
}

/* «Mis materias»: cada grupo con su color (`tonoDeGrupo`): raya junto al título, contador, borde y un tinte arriba. */
.seccion-grupo > h2::before {
  content: '';
  flex: none;
  width: 5px;
  height: 1.25em;
  border-radius: 3px;
  background: var(--tono);
}

.seccion-grupo > h2 .contador {
  background: var(--tono-suave);
  color: var(--tono);
}

.seccion-grupo .materia-tarjeta {
  border-color: color-mix(in srgb, var(--tono) 55%, var(--borde));
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--tono) 16%, transparent), transparent 75%);
}

.seccion-grupo .materia-tarjeta::before {
  height: 6px;
}

.seccion-grupo .materia-tarjeta:hover {
  border-color: var(--tono);
}

.materia-tarjeta-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: auto;
}

/* ───── Piezas: renglón de actividad ───── */

.act-renglon {
  border-left: 4px solid var(--tono, var(--primario));
  flex-wrap: wrap;
}

.act-renglon.act-por-vencer {
  border-color: var(--ambar);
  border-left-color: var(--ambar);
  background: color-mix(in srgb, var(--ambar-suave) 45%, var(--superficie));
}

.act-renglon.act-vencida {
  border-left-color: var(--rojo);
}

.act-marca {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--tono-suave, var(--primario-suave));
  color: var(--tono, var(--primario));
  flex: none;
}

.act-marca .icono {
  width: 18px;
  height: 18px;
}

.act-renglon .renglon-texto {
  min-width: 180px;
}

.act-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 4px;
  align-items: center;
}

.act-puntos {
  font-size: 0.84rem;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}

.act-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.act-chips:empty {
  display: none;
}

.act-extras {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.act-titulo-enlace {
  color: inherit;
  text-decoration: none;
}

.act-titulo-enlace:hover {
  color: var(--primario);
  text-decoration: underline;
}

/* En celular el título ocupa todo el ancho y se lee completo (antes se cortaba con «…» junto a la etiqueta de
   estado); la etiqueta baja a su propio renglón. */
@media (max-width: 640px) {
  .act-renglon .renglon-texto {
    flex-basis: 100%;
    min-width: 0;
  }

  .act-renglon .renglon-texto strong {
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .act-renglon .act-chips {
    justify-content: flex-start;
  }
}

.pieza-espera {
  display: contents;
}

/* ───── Piezas: eventos y avisos ───── */

.cuadro-fecha {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--violeta-suave);
  color: var(--violeta);
  line-height: 1;
  flex: none;
}

.cuadro-fecha strong {
  font-size: 1.1rem;
}

.cuadro-fecha small {
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 2px;
}

.evento-renglon {
  align-items: flex-start;
}

.evento-descripcion {
  font-size: 0.86rem;
  color: var(--texto-2);
  margin-top: 4px;
}

.aviso-renglon {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
}

.aviso-icono {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--ambar-suave);
  color: var(--ambar);
  flex: none;
}

.aviso-renglon .renglon-texto strong {
  white-space: normal;
}

.aviso-renglon small a {
  color: var(--texto-2);
}

.aviso-texto {
  margin-top: 6px;
  font-size: 0.92rem;
  color: var(--texto-2);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ───── Inicio ───── */

.inicio-resumen {
  margin-bottom: 26px;
}

.inicio-columnas {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  align-items: start;
}

.inicio-mas {
  margin-top: 10px;
  font-size: 0.9rem;
}

@media (max-width: 1099px) {
  .inicio-columnas {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ───── Cuatrimestres ───── */

.cuatris-barra {
  margin-bottom: 14px;
}

.cuatris-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cuatri {
  padding: 0;
  overflow: hidden;
}

.cuatri-actual {
  border-color: var(--primario);
}

.cuatri-cabeza {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  flex-wrap: wrap;
}

.cuatri-cabeza::-webkit-details-marker {
  display: none;
}

.cuatri-cabeza::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--tenue);
  border-bottom: 2px solid var(--tenue);
  transform: rotate(45deg);
  margin-left: 4px;
  transition: transform 0.2s;
}

.cuatri[open] > .cuatri-cabeza::after {
  transform: rotate(225deg);
}

.cuatri-cabeza:hover {
  background: var(--superficie-2);
}

.cuatri-numero {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primario-suave);
  color: var(--primario);
  font-weight: 800;
  flex: none;
}

.cuatri-actual .cuatri-numero {
  background: var(--primario);
  color: var(--primario-texto);
}

.cuatri-titulo {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 160px;
}

.cuatri-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cuatri-cuerpo {
  padding: 4px 20px 20px;
}

/* Recorrido: las materias del cuatrimestre una tras otra, unidas por una línea. */
.ruta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ruta-paso {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

/* La línea que une un punto con el siguiente. */
.ruta-paso:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 19px;
  top: calc(50% + 20px);
  height: calc(100% - 28px);
  border-left: 2px dashed var(--borde-fuerte);
}

.ruta-completa:not(:last-child)::before {
  border-left-style: solid;
  border-left-color: var(--tono, var(--primario));
}

.ruta-punto {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--superficie);
  border: 2px solid var(--tono, var(--primario));
  color: var(--tono, var(--primario));
  font-weight: 800;
  font-size: 0.9rem;
}

.ruta-completa .ruta-punto {
  background: var(--tono, var(--primario));
  color: var(--superficie);
}

.ruta-tarjeta {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--tono, var(--primario));
  border-radius: var(--radio-chico);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.ruta-tarjeta:hover {
  border-color: var(--tono, var(--primario));
  box-shadow: var(--sombra);
  transform: translateX(3px);
}

.ruta-tarjeta:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
}

.ruta-texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.ruta-orden {
  font-family: var(--letra-marca);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tono, var(--primario));
}

.ruta-nombre {
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.ruta-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  color: var(--texto-2);
  font-size: 0.86rem;
}

.ruta-datos .fila {
  gap: 6px;
}

.ruta-lado {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: none;
}

.ruta-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ruta-avance {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ruta-progreso {
  width: 110px;
  height: 6px;
  border-radius: 6px;
  background: var(--borde);
  overflow: hidden;
}

.ruta-progreso > span {
  display: block;
  height: 100%;
  background: var(--tono, var(--primario));
  border-radius: inherit;
}

.ruta-entrar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--tono, var(--primario));
}

@media (max-width: 640px) {
  .ruta-paso {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
  }

  .ruta-paso:not(:last-child)::before {
    left: 14px;
    top: calc(50% + 15px);
  }

  .ruta-punto {
    width: 30px;
    height: 30px;
    font-size: 0.78rem;
  }

  .ruta-tarjeta {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
  }

  .ruta-lado {
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-between;
  }

  .ruta-entrar {
    display: none;
  }
}

/* ───── Materias (buscador) ───── */

.buscador {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  margin-bottom: 22px;
  max-width: 460px;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  color: var(--tenue);
}

.buscador:focus-within {
  outline: 2px solid var(--primario);
  outline-offset: 1px;
  border-color: var(--primario);
}

.buscador input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 11px 0;
  outline: none;
  color: var(--texto);
}

/* ───── Materia ───── */

.materia-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.materia-cabeza-titulo {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.materia-cabeza h1 {
  font-size: 1.6rem;
  overflow-wrap: anywhere;
}

.materia-cabeza .lema {
  color: var(--texto-2);
  margin-top: 2px;
}

.materia-pastilla {
  width: 54px;
  height: 54px;
  font-size: 1.15rem;
  border-radius: 14px;
}

.materia-ficha {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  border-top: 4px solid var(--tono, var(--primario));
}

.materia-ficha .progreso > span {
  background: var(--tono, var(--primario));
}

.materia-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  color: var(--texto-2);
  font-size: 0.9rem;
}

.materia-datos .fila {
  gap: 6px;
}

.materia-cuenta {
  margin-left: 6px;
  font-size: 0.76rem;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--superficie-2);
  color: var(--tenue);
}

.pestana.activa .materia-cuenta {
  background: var(--primario-suave);
  color: var(--primario);
}

.materia-clases {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.materia-clase {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.materia-clase-borrador {
  border-style: dashed;
  border-color: var(--borde-fuerte);
}

.materia-clase-cabeza {
  align-items: flex-start;
  margin-bottom: 0;
}

.materia-clase-titulo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.materia-clase-titulo h3 {
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}

.materia-clase-numero {
  font-family: var(--letra-marca);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primario);
}

.materia-contenido {
  padding: 14px 16px;
  background: var(--superficie-2);
  border-radius: var(--radio-chico);
}

/* ───── Unidades de una materia: contexto, contenido y actividad a entregar ───── */

.unidades-barra {
  margin-bottom: -4px;
}

/* En celular: el texto «4 unidades · …» va completo arriba y los botones abajo (antes quedaba en una columnita),
   y las pestañas Tablón · Unidades · Actividades caben sin que la última se corte. */
@media (max-width: 640px) {
  .unidades-barra .nota {
    flex-basis: 100%;
  }

  .pestanas {
    gap: 0;
  }

  .pestana {
    padding: 10px 8px;
    font-size: 0.92rem;
  }
}

.unidad {
  padding: 0;
  overflow: hidden;
}

.unidad-borrador {
  border-style: dashed;
  border-color: var(--borde-fuerte);
}

.unidad-cabeza {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  flex-wrap: wrap;
}

.unidad-cabeza::-webkit-details-marker {
  display: none;
}

.unidad-cabeza::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--tenue);
  border-bottom: 2px solid var(--tenue);
  transform: rotate(45deg);
  margin-left: 4px;
  transition: transform 0.2s;
}

.unidad[open] > .unidad-cabeza::after {
  transform: rotate(225deg);
}

.unidad-cabeza:hover {
  background: var(--superficie-2);
}

.unidad[open] > .unidad-cabeza {
  border-bottom: 1px solid var(--borde);
}

.unidad-numero {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--tono-suave, var(--primario-suave));
  color: var(--tono, var(--primario));
  font-weight: 800;
  flex: none;
}

.unidad-titulo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 160px;
}

.unidad-titulo strong {
  font-size: 1.08rem;
  overflow-wrap: anywhere;
}

.unidad-etiqueta {
  font-family: var(--letra-marca);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tono, var(--primario));
}

.unidad-chips {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.unidad-cuerpo {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 8px;
}

.unidad-herramientas {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px dashed var(--borde);
}

/* Los tres pasos, con una línea que los une. */
.unidad-paso {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 22px;
}

.unidad-paso:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 4px;
  border-left: 2px solid var(--borde);
}

.unidad-paso-num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tono-suave, var(--primario-suave));
  color: var(--tono, var(--primario));
  font-weight: 800;
  font-size: 0.9rem;
}

.unidad-paso:last-child .unidad-paso-num {
  background: var(--tono, var(--primario));
  color: var(--superficie);
}

.unidad-paso-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding-top: 4px;
}

.unidad-paso-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
}

.unidad-paso-titulo .icono {
  color: var(--tono, var(--primario));
}

.unidad-por-llenar {
  margin: 0;
  padding: 14px 16px;
  border: 1.5px dashed var(--borde-fuerte);
  border-radius: var(--radio-chico);
  color: var(--tenue);
  font-size: 0.92rem;
}

/* La actividad que el alumno entrega. */
.entrega-caja {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
}

.entrega-caja-abierta {
  border-color: var(--tono, var(--primario));
  background: var(--tono-suave, var(--primario-suave));
}

.entrega-caja-texto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 200px;
}

.entrega-caja-texto a {
  color: inherit;
  text-decoration: none;
}

.entrega-caja-texto a:hover {
  text-decoration: underline;
}

.entrega-caja-lado {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .unidad-cabeza,
  .unidad-cuerpo {
    padding-left: 14px;
    padding-right: 14px;
  }

  .entrega-caja-lado {
    width: 100%;
    justify-content: space-between;
  }
}

.materia-recursos h4,
.materia-actividades h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tenue);
  margin: 0 0 8px;
}

.materia-video {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 760px;
}

.materia-video .fila {
  gap: 8px;
}

.materia-sueltas {
  margin-top: 12px;
}

/* ───── Actividades ───── */

.actividades-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.filtros {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  flex: 1;
  min-width: 0;
}

.filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  color: var(--texto-2);
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
  white-space: nowrap;
}

.filtro:hover {
  border-color: var(--primario);
}

.filtro.activo {
  background: var(--primario);
  border-color: var(--primario);
  color: var(--primario-texto);
}

.filtro-numero {
  font-size: 0.74rem;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--superficie-2);
  color: var(--texto-2);
}

.filtro.activo .filtro-numero {
  background: rgba(255, 255, 255, 0.25);
  color: inherit;
}

.filtro-rojo:not(.activo) .filtro-numero {
  background: var(--rojo-suave);
  color: var(--rojo);
}

/* Sin `min-width: 0` el selector medía lo que su materia más larga y en celular se salía de la pantalla. */
.actividades-materia {
  min-width: 0;
  max-width: 100%;
}

.actividades-materia select {
  padding: 8px 12px;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  max-width: 100%;
}

@media (max-width: 640px) {
  .actividades-materia,
  .actividades-materia select {
    width: 100%;
  }
}

.actividades-barra {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.actividades-cuenta {
  margin-bottom: 8px;
}

.actividades-enlace {
  font-weight: 600;
  color: var(--texto);
  text-decoration: none;
}

.actividades-enlace:hover {
  color: var(--primario);
  text-decoration: underline;
}

.actividades-sub,
.calif-sub {
  display: block;
}

.actividades-movil {
  display: none;
}

@media (max-width: 639px) {
  .actividades .tabla-envoltura {
    display: none;
  }

  .actividades-movil {
    display: flex;
  }
}

/* ───── Actividad ───── */

.actividad-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.actividad-cabeza-titulo {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-width: 0;
}

.actividad-cabeza h1 {
  font-size: 1.55rem;
  overflow-wrap: anywhere;
}

.actividad-chips {
  margin-top: 8px;
  gap: 6px;
}

.actividad-columnas {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}

.actividad-principal,
.actividad-lateral {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.actividad-lateral {
  position: sticky;
  top: 20px;
}

@media (max-width: 999px) {
  .actividad-columnas {
    grid-template-columns: minmax(0, 1fr);
  }

  .actividad-lateral {
    position: static;
    order: -1;
  }
}

.actividad-adjuntos {
  margin-top: 18px;
}

.actividad-adjuntos h3,
.actividad-formulario h3,
.entrega-detalle h3 {
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.actividad-datos h2 {
  font-size: 1.02rem;
  margin-bottom: 10px;
}

.actividad-datos dl,
.perfil-datos {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.actividad-dato dt,
.perfil-dato dt {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tenue);
  font-weight: 600;
}

.actividad-dato dd,
.perfil-dato dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.actividad-vence {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.actividad-resumen-cuadros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.actividad-resumen-cuadros .dato {
  padding: 10px;
  gap: 10px;
  box-shadow: none;
}

.actividad-resumen-cuadros .dato-icono {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.actividad-resumen-cuadros .dato-texto strong {
  font-size: 1.15rem;
}

.actividad-entrega {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 4px solid var(--primario);
}

.actividad-entrega > .tarjeta-cabeza {
  margin-bottom: 0;
}

.actividad-motivo {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radio-chico);
  background: var(--ambar-suave);
  color: var(--ambar);
  font-weight: 600;
  font-size: 0.92rem;
}

.actividad-formulario {
  padding-top: 14px;
  border-top: 1px solid var(--borde);
}

.entrega-detalle {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.entrega-texto {
  padding: 12px 14px;
  background: var(--superficie-2);
  border-radius: var(--radio-chico);
}

.entrega-comentario {
  font-size: 0.92rem;
  color: var(--texto-2);
}

.entrega-calificacion {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--radio-chico);
  background: var(--violeta-suave);
  border: 1px solid color-mix(in srgb, var(--violeta) 30%, transparent);
}

.entrega-devuelta {
  background: var(--rosa-suave);
  border-color: color-mix(in srgb, var(--rosa) 30%, transparent);
  color: var(--texto);
}

.entrega-devuelta .fila {
  color: var(--rosa);
}

.entrega-puntos {
  color: var(--violeta);
}

.entrega-puntos strong {
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
}

.comentarios {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.comentario {
  padding: 10px 14px;
  border-radius: var(--radio-chico);
  background: var(--superficie-2);
  max-width: 88%;
}

.comentario-mio {
  align-self: flex-end;
  background: var(--primario-suave);
}

.comentario-cabeza {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 2px;
  font-size: 0.88rem;
}

.comentario-formulario textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  resize: vertical;
}

.comentario-formulario textarea:focus {
  outline: 2px solid var(--primario);
  outline-offset: 1px;
}

.actividad-historial summary {
  cursor: pointer;
}

.actividad-historial[open] summary {
  margin-bottom: 14px;
}

.historial-version {
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.historial-vigente {
  border-color: var(--primario);
}

/* ───── Calendario ───── */

.cal-columnas {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}

@media (max-width: 1099px) {
  .cal-columnas {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cal-principal {
  padding: 16px;
  min-width: 0;
}

.cal-lateral {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.cal-panel h2 {
  font-size: 1.02rem;
}

.cal-panel > h2 {
  margin-bottom: 12px;
}

.cal-dia .tarjeta-cabeza h2::first-letter {
  text-transform: uppercase;
}

.cal-dia .lista + .lista {
  margin-top: 10px;
}

.cal-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.cal-titulo {
  font-size: 1.2rem;
  min-width: 9.5em;
  text-align: center;
}

.cal-rejilla {
  transition: opacity 0.15s;
}

.cal-rejilla.cal-cargando {
  opacity: 0.5;
}

.cal-semana,
.cal-dias {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-nombre-dia {
  padding: 6px 4px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tenue);
  text-align: center;
}

.cal-dia-corto {
  display: none;
}

.cal-dias {
  border-top: 1px solid var(--borde);
  border-left: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  overflow: hidden;
}

.cal-celda {
  min-height: 108px;
  padding: 4px;
  border-right: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  min-width: 0;
  background: var(--superficie);
}

.cal-celda:hover {
  background: var(--superficie-2);
}

.cal-fuera {
  background: var(--superficie-2);
}

.cal-fuera .cal-numero {
  color: var(--tenue);
  opacity: 0.7;
}

.cal-elegido {
  box-shadow: inset 0 0 0 2px var(--primario);
}

.cal-numero {
  align-self: flex-start;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
}

.cal-numero:hover {
  background: var(--primario-suave);
}

.cal-hoy .cal-numero {
  background: var(--primario);
  color: var(--primario-texto);
}

.cal-cosas {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cal-cosa {
  display: block;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  border-left: 3px solid currentColor;
}

a.cal-cosa:hover {
  filter: brightness(0.95);
  text-decoration: underline;
}

.cal-mas {
  border: 0;
  background: none;
  padding: 0 6px;
  font-size: 0.72rem;
  color: var(--texto-2);
  text-align: left;
  cursor: pointer;
  font-weight: 600;
}

.cal-mas:hover {
  color: var(--primario);
}

.cal-azul { background: var(--primario-suave); color: var(--primario); }
.cal-ambar { background: var(--ambar-suave); color: var(--ambar); }
.cal-rojo { background: var(--rojo-suave); color: var(--rojo); }
.cal-verde { background: var(--verde-suave); color: var(--verde); }
.cal-violeta { background: var(--violeta-suave); color: var(--violeta); }

.cal-puntos {
  display: none;
  gap: 3px;
  justify-content: center;
  flex-wrap: wrap;
}

.cal-punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.cal-punto.cal-azul { background: var(--primario); }
.cal-punto.cal-ambar { background: var(--ambar); }
.cal-punto.cal-rojo { background: var(--rojo); }
.cal-punto.cal-verde { background: var(--verde); }
.cal-punto.cal-violeta { background: var(--violeta); }

.cal-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--texto-2);
}

.cal-leyenda-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cal-proximos-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cal-proximo-dia h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tenue);
  margin-bottom: 6px;
}

.cal-lateral .act-renglon .renglon-texto {
  min-width: 140px;
}

@media (max-width: 699px) {
  .cal-principal {
    padding: 10px;
  }

  .cal-titulo {
    min-width: 0;
    font-size: 1.05rem;
  }

  .cal-dia-largo {
    display: none;
  }

  .cal-dia-corto {
    display: inline;
  }

  .cal-celda {
    min-height: 54px;
    align-items: center;
    padding: 4px 2px;
  }

  .cal-numero {
    align-self: center;
  }

  .cal-cosas {
    display: none;
  }

  .cal-puntos {
    display: flex;
  }
}

/* ───── Calificaciones ───── */

.calif-resumen {
  margin-bottom: 22px;
}

.calif-materias {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.calif-materia {
  padding: 0;
  overflow: hidden;
  border-left: 5px solid var(--tono, var(--primario));
}

.calif-cabeza {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}

.calif-cabeza::-webkit-details-marker {
  display: none;
}

.calif-cabeza:hover {
  background: var(--superficie-2);
}

.calif-titulo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.calif-promedio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 8px 10px;
  border-radius: 12px;
  line-height: 1.1;
  flex: none;
}

.calif-promedio strong {
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
}

.calif-promedio small {
  font-size: 0.7rem;
  font-weight: 600;
}

.calif-verde { background: var(--verde-suave); color: var(--verde); }
.calif-ambar { background: var(--ambar-suave); color: var(--ambar); }
.calif-rojo { background: var(--rojo-suave); color: var(--rojo); }
.calif-gris { background: var(--gris-suave); color: var(--gris); }

.calif-cuerpo {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.calif-retro {
  min-width: 200px;
  max-width: 420px;
  font-size: 0.86rem;
}

/* Calificaciones del alumno en celular: cada actividad es una tarjetita (nombre arriba; estado y puntos en un
   renglón; la retroalimentación debajo) en vez de una tabla de 4 columnas apretada que había que deslizar. */
@media (max-width: 640px) {
  .calif-materia .calif-cabeza {
    padding: 14px 14px;
  }

  .calif-materia .calif-cuerpo {
    padding: 0 12px 14px;
  }

  .calif-tabla-alumno,
  .calif-tabla-alumno tbody,
  .calif-tabla-alumno tr,
  .calif-tabla-alumno td {
    display: block;
  }

  .calif-tabla-alumno thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .calif-tabla-alumno tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--borde);
  }

  .calif-tabla-alumno tr:last-child {
    border-bottom: 0;
  }

  .calif-tabla-alumno td {
    padding: 0;
    border: 0;
  }

  .calif-tabla-alumno td:first-child,
  .calif-tabla-alumno td.calif-retro {
    grid-column: 1 / -1;
  }

  .calif-tabla-alumno td:first-child a {
    font-weight: 600;
  }

  .calif-tabla-alumno td.numero {
    white-space: nowrap;
    font-weight: 600;
  }

  .calif-tabla-alumno td.calif-retro {
    min-width: 0;
    max-width: none;
  }

  /* Sin retroalimentación no se muestra la raya sola. */
  .calif-tabla-alumno td.calif-retro:has(> .nota) {
    display: none;
  }
}

.calif-selector {
  margin-bottom: 18px;
  max-width: 560px;
}

.calif-acciones {
  margin-bottom: 14px;
}

.calif-pastilla {
  display: inline-block;
  min-width: 48px;
  text-align: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
}

/* ───── Perfil ───── */

.perfil-aviso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  margin-bottom: 20px;
  border-radius: var(--radio);
  background: var(--ambar-suave);
  color: var(--ambar);
  border: 1px solid color-mix(in srgb, var(--ambar) 35%, transparent);
}

.perfil-aviso p {
  color: var(--texto-2);
  margin-top: 2px;
}

.perfil-columnas {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
}

.perfil-ficha {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.perfil-cabeza {
  display: flex;
  gap: 14px;
  align-items: center;
}

.perfil-cabeza h2 {
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}

.perfil-avatar {
  width: 56px;
  height: 56px;
  font-size: 1.15rem;
}

.perfil-clave h2 {
  font-size: 1.05rem;
}

.perfil-clave-urgente {
  border-color: var(--ambar);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ambar) 25%, transparent);
}

/* ───── Celular ───── */

@media (max-width: 599px) {
  .materia-cabeza h1,
  .actividad-cabeza h1 {
    font-size: 1.3rem;
  }

  .materia-pastilla {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }

  .act-renglon {
    gap: 10px;
  }

  .act-renglon .act-marca {
    display: none;
  }

  .act-chips {
    justify-content: flex-start;
  }

  .calif-cabeza,
  .cuatri-cabeza {
    padding: 14px;
  }

  .calif-cuerpo,
  .cuatri-cuerpo {
    padding-left: 14px;
    padding-right: 14px;
  }

  .comentario {
    max-width: 100%;
  }
}