/* Aula UEM · tablón de la materia, su portada y la «Presentación».
   Publicaciones y comentarios (vistas/tablon.js); portada como franja detrás del título, «Presentación» y franja de
   «Ver como alumno» (vistas/materia.js); miniatura de portada en la tarjeta de materia (vistas/piezas.js) y en el
   recorrido (vistas/cuatrimestres.js); la portada en «Editar materia» (vistas/gestion-materia.js).
   Se carga después de constancia.css y solo usa sus variables (y `--tono`, el color de la materia), así que el modo
   oscuro sale solo. Única excepción: el texto blanco sobre la foto de portada, que siempre lleva un velo azul marino
   encima (como el blanco de la portada de la entrada en constancia.css). Sin estilos en línea (CSP). */

/* ───── Portada de la materia: franja detrás del título ───── */

.materia-cabeza-con-portada > .materia-franja {
  flex: 1 1 100%;
}

.materia-franja {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 190px;
  padding: 22px 24px;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--marino);
  border-bottom: 4px solid var(--tono, var(--primario));
  box-shadow: var(--sombra);
}

.materia-portada {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo para que el título se lea sobre cualquier foto. */
.materia-franja::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--marino) 92%, transparent) 0%,
    color-mix(in srgb, var(--marino) 55%, transparent) 50%,
    color-mix(in srgb, var(--marino) 8%, transparent) 100%
  );
}

.materia-franja .materia-cabeza-titulo {
  color: #fff;
}

.materia-franja h1 {
  color: #fff;
  text-shadow: 0 1px 3px color-mix(in srgb, var(--marino) 70%, transparent);
}

.materia-franja .lema {
  color: #fff;
  opacity: 0.86;
}

.materia-franja .materia-pastilla {
  background: var(--superficie);
  border-color: var(--superficie);
}

@media (prefers-color-scheme: dark) {
  .materia-portada,
  .materia-tarjeta-foto,
  .ruta-portada {
    filter: brightness(0.88);
  }
}

/* ───── Miniatura de portada: tarjeta de materia ───── */

/* La foto ocupa todo el ancho de arriba de la tarjeta; su borde de arriba repite la franja de color. */
.materia-tarjeta-portada {
  height: 118px;
  margin: -22px -20px 0;
  overflow: hidden;
  background: var(--superficie-2);
  border-top: 5px solid var(--tono, var(--primario));
  border-bottom: 1px solid var(--borde);
}

/* Si la foto no carga, piezas.js la quita y el marco vacío no se ve. */
.materia-tarjeta-portada:empty {
  display: none;
}

.materia-tarjeta-foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s;
}

.materia-tarjeta:hover .materia-tarjeta-foto {
  transform: scale(1.03);
}

/* ───── Miniatura de portada: recorrido de «Mis cuatrimestres» ───── */

.ruta-portada {
  flex: none;
  width: 92px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde);
  background: var(--superficie-2);
}

/* ───── «Ver como alumno» ───── */

.vista-previa-franja {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--ambar-suave);
  color: var(--texto);
  border: 1px solid var(--ambar);
  border-left-width: 4px;
  border-radius: var(--radio-chico);
}

.vista-previa-franja > .icono {
  flex: none;
  color: var(--ambar);
}

.vista-previa-franja p {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  font-size: 0.92rem;
}

.vista-previa-franja p span {
  color: var(--texto-2);
}

.vista-previa-franja .boton {
  flex: none;
}

/* En escritorio se queda a la vista al bajar; en el celular no, porque arriba ya va la barra fija. */
@media (min-width: 900px) {
  .vista-previa-franja {
    position: sticky;
    top: 10px;
    z-index: 6;
    box-shadow: var(--sombra);
  }
}

/* ───── «Presentación» de la materia ───── */

/* Sin overflow: hidden, por si el editor de bloques abre algo que sale de la tarjeta. */
.materia-presentacion {
  padding: 0;
  margin-bottom: 20px;
}

.materia-presentacion-cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: var(--radio);
  cursor: pointer;
  list-style: none;
}

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

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

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

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

.materia-presentacion-cabeza:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: -2px;
}

.materia-presentacion[open] > .materia-presentacion-cabeza {
  border-bottom: 1px solid var(--borde);
  border-radius: var(--radio) var(--radio) 0 0;
}

.materia-presentacion-cabeza > .icono {
  color: var(--tono, var(--primario));
}

.materia-presentacion-titulo {
  flex: 1;
  min-width: 0;
  font-family: var(--letra-titulo);
  font-size: 1.08rem;
  font-weight: 700;
}

.materia-presentacion-cabeza .nota {
  font-family: var(--letra-folio);
  font-size: 0.76rem;
}

.materia-presentacion-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 18px 20px 20px;
}

/* ───── Tablón ───── */

.tablon {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 900px;
}

.tablon-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tablon-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primario);
  color: var(--primario-texto);
  font-family: var(--letra-folio);
  font-size: 0.8rem;
  font-weight: 700;
}

.tablon-avatar-chico {
  width: 30px;
  height: 30px;
  font-size: 0.68rem;
  background: var(--primario-suave);
  color: var(--primario);
}

.tablon-fecha {
  font-family: var(--letra-folio);
  font-size: 0.76rem;
  letter-spacing: 0.01em;
}

/* La caja de arriba del docente: «Comparte algo con tu grupo…». */
.tablon-nueva {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: var(--tenue);
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.tablon-nueva:hover {
  border-color: var(--tono, var(--primario));
  color: var(--texto-2);
}

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

.tablon-nueva-texto {
  flex: 1;
  min-width: 0;
}

.tablon-nueva > .icono {
  flex: none;
  color: var(--tono, var(--primario));
}

/* ───── Una publicación ───── */

/* Sin overflow: hidden, para que el menú «Opciones» pueda salir de la tarjeta. */
.publicacion {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.publicacion-fijada {
  border-left: 4px solid var(--tono, var(--primario));
}

.publicacion-cabeza {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 0;
}

.publicacion-autor {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.publicacion-autor strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.publicacion-autor small {
  color: var(--tenue);
  font-size: 0.8rem;
}

.publicacion-marca {
  flex: none;
  gap: 4px;
  background: var(--tono-suave, var(--primario-suave));
  color: var(--tono, var(--primario));
}

.publicacion-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 14px 20px 18px;
}

.publicacion-texto {
  max-width: 72ch;
  overflow-wrap: anywhere;
}

.publicacion-texto > :first-child,
.publicacion-texto > .formato > :first-child {
  margin-top: 0;
}

.publicacion-texto > :last-child,
.publicacion-texto > .formato > :last-child {
  margin-bottom: 0;
}

.publicacion-video,
.publicacion-fotos,
.publicacion-galeria,
.publicacion-archivos,
.publicacion-enlace {
  max-width: 720px;
}

.publicacion-video {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* El enlace, como una tarjeta que abre en otra pestaña. */
.publicacion-enlace {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s;
}

.publicacion-enlace:hover {
  border-color: var(--tono, var(--primario));
}

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

.publicacion-enlace-icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radio-chico);
  background: var(--tono-suave, var(--primario-suave));
  color: var(--tono, var(--primario));
}

.publicacion-enlace-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.publicacion-enlace-texto strong,
.publicacion-enlace-texto small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.publicacion-enlace-texto small {
  color: var(--tenue);
  font-family: var(--letra-folio);
  font-size: 0.76rem;
}

.publicacion-enlace > .icono:last-child {
  flex: none;
  color: var(--tenue);
}

/* Fotos sin el módulo de bloques: cuadrícula propia (con bloques.js se usa su galería). */
.publicacion-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.publicacion-galeria-una {
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
}

.publicacion-foto {
  display: block;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie-2);
  cursor: zoom-in;
}

.publicacion-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}

.publicacion-foto:hover img {
  transform: scale(1.03);
}

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

/* Una sola foto se ve completa, sin recortar. */
.publicacion-galeria-una .publicacion-foto {
  aspect-ratio: auto;
}

.publicacion-galeria-una .publicacion-foto img {
  height: auto;
  max-height: 480px;
  object-fit: contain;
}

/* ───── Menú «Opciones» del docente ───── */

.publicacion-menu {
  position: relative;
  flex: none;
}

.publicacion-menu > summary {
  list-style: none;
}

.publicacion-menu > summary::-webkit-details-marker {
  display: none;
}

.publicacion-menu[open] > summary {
  background: var(--superficie-2);
}

.publicacion-menu > summary:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
}

.publicacion-menu-lista {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 230px;
  padding: 6px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}

.publicacion-menu-opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radio-chico);
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.publicacion-menu-opcion .icono {
  color: var(--tenue);
}

.publicacion-menu-opcion:hover,
.publicacion-menu-opcion:focus-visible {
  background: var(--superficie-2);
  outline: none;
}

.publicacion-menu-peligro,
.publicacion-menu-peligro .icono {
  color: var(--rojo);
}

.publicacion-menu-peligro:hover,
.publicacion-menu-peligro:focus-visible {
  background: var(--rojo-suave);
}

/* ───── Comentarios ───── */

.publicacion-pie {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 20px 16px;
  background: var(--superficie-2);
  border-top: 1px solid var(--borde);
  border-radius: 0 0 var(--radio) var(--radio);
}

.publicacion-pie-titulo,
.publicacion-sin-comentarios {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.publicacion-pie-titulo {
  color: var(--texto-2);
  font-size: 0.84rem;
  font-weight: 600;
}

.publicacion-ver-todos {
  align-self: flex-start;
  font-size: 0.86rem;
}

.tablon-comentarios {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tablon-comentario {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.tablon-comentario-mio .tablon-avatar {
  background: var(--primario);
  color: var(--primario-texto);
}

.tablon-comentario-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.tablon-comentario-cabeza {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 0;
  color: var(--tenue);
  font-size: 0.86rem;
}

.tablon-comentario-cabeza strong {
  color: var(--texto);
}

/* «Profesor» o «Administración» junto al nombre. */
.tablon-comentario-cabeza .nota {
  color: var(--tono, var(--primario));
  font-family: var(--letra-folio);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tablon-comentario-texto {
  margin: 0;
  color: var(--texto-2);
  font-size: 0.92rem;
  line-height: 1.5;
}

.tablon-comentario .boton-icono {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--tenue);
}

.tablon-comentario .boton-icono:hover {
  background: var(--rojo-suave);
  color: var(--rojo);
}

.tablon-comentar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.tablon-comentar textarea {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  max-height: 220px;
  padding: 9px 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
  resize: vertical;
  field-sizing: content;
}

.tablon-comentar textarea:focus {
  outline: 2px solid var(--primario);
  outline-offset: 1px;
  border-color: var(--primario);
}

.tablon-comentar textarea:disabled {
  background: var(--superficie-2);
  cursor: not-allowed;
}

.tablon-comentar .boton {
  flex: none;
}

/* ───── Avisos anteriores (solo lectura) ───── */

.tablon-anteriores {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px dashed var(--borde-fuerte);
}

.tablon > .tablon-anteriores:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.tablon-anteriores-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--texto-2);
  font-family: var(--letra-titulo);
  font-size: 1.02rem;
}

.tablon-anteriores-titulo .contador {
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--superficie-2);
  color: var(--tenue);
  font-size: 0.78rem;
  font-weight: 600;
}

/* ───── Portada en «Editar materia» ───── */

.portada-editor {
  gap: 8px;
}

.portada-editor-vista {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 3 / 1;
  min-height: 96px;
  overflow: hidden;
  border: 1.5px dashed var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie-2);
  color: var(--tenue);
  font-size: 0.88rem;
}

.portada-editor-con-foto {
  border-style: solid;
  border-color: var(--borde);
}

.portada-editor-vista img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portada-editor-quitada img {
  opacity: 0.35;
  filter: grayscale(1);
}

.portada-editor-aviso {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--superficie);
  color: var(--texto);
  font-size: 0.76rem;
  font-weight: 600;
  box-shadow: var(--sombra);
}

.portada-editor-quitada .portada-editor-aviso {
  color: var(--rojo);
}

.portada-editor-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portada-editor-elegir {
  position: relative;
  cursor: pointer;
}

.portada-editor-elegir:focus-within {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
}

/* El campo de archivo va escondido dentro del botón: que no herede el ancho ni el relleno de `.campo input`. */
.portada-editor .portada-editor-elegir input {
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
}

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

@media (max-width: 640px) {
  .ruta-portada {
    width: 64px;
    height: 48px;
  }
}

@media (max-width: 599px) {
  .materia-franja {
    min-height: 150px;
    padding: 16px;
  }

  .materia-presentacion-cabeza {
    padding: 12px 14px;
  }

  .materia-presentacion-cuerpo {
    padding: 14px;
  }

  .tablon-nueva {
    padding: 12px 14px;
  }

  .publicacion-cabeza {
    gap: 10px;
    padding: 14px 14px 0;
  }

  .publicacion-cuerpo {
    padding: 12px 14px 16px;
  }

  .publicacion-pie {
    padding: 12px 14px 14px;
  }

  /* En el celular el menú es solo los tres puntos (el texto queda para los lectores de pantalla). */
  .publicacion-menu > summary {
    padding: 6px 8px;
  }

  .publicacion-menu > summary span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .publicacion-galeria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .publicacion-galeria-una {
    grid-template-columns: minmax(0, 1fr);
  }

  .tablon-comentar > .tablon-avatar {
    display: none;
  }
}