@charset "UTF-8";
/* ==========================================================================
   HEBB · MOCKUP 02 — «CONSOLA»
   Estilos propios de cada pantalla.

   Aquí solo vive lo que no es reutilizable: composiciones concretas (el visor
   de lección, el árbol del temario, el muestrario de la portada). Todo lo que
   se repite está en mockup.css. Ni un solo literal de color: todo sale de los
   tokens de :root.

   1. Portada y muestrario
   2. Acceso
   3. Alumnado: inicio, cursos, portal, lección, evaluación, comunicación
   4. Administración: panel, usuarios, seguimiento, configuración
   5. Perfil
   ========================================================================== */

/* ==========================================================================
   1. PORTADA Y MUESTRARIO (index.html)
   ========================================================================== */

.portada { max-width: 1180px; margin: 0 auto; padding: var(--e-16) var(--e-8) var(--e-32); }

.portada__cab {
  display: grid;
  gap: var(--e-8);
  padding-bottom: var(--e-16);
  border-bottom: 1px solid var(--c-linea-fuerte);
  margin-bottom: var(--e-16);
}
.portada__eyebrow {
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: var(--ls-versalita);
  text-transform: uppercase;
  color: var(--c-acento);
}
.portada__h1 { font-size: var(--t-40); letter-spacing: var(--ls-titular-xl); max-width: 22ch; }
.portada__lead { max-width: 62ch; font-size: var(--t-16); line-height: var(--lh-texto); color: var(--c-txt-2); }

.seccion { margin-top: var(--e-24); }
.seccion__cab { display: flex; align-items: baseline; gap: var(--e-6); padding-bottom: var(--e-5); border-bottom: 1px solid var(--c-linea); margin-bottom: var(--e-10); }
.seccion__n { font-family: var(--f-dato); font-size: var(--t-12); color: var(--c-acento); }
.seccion__t { font-size: var(--t-18); letter-spacing: var(--ls-titular); }
.seccion__d { margin-left: auto; font-size: var(--t-12); color: var(--c-txt-3); max-width: 46ch; text-align: right; }

/* Muestra de color: el valor y el ratio se leen encima de la propia muestra,
   que es la única forma honesta de enseñar un contraste. */
.paleta { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--e-5); }
.swatch {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-6);
  min-height: 96px;
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-6);
  align-content: end;
}
.swatch__n { font-size: var(--t-12); font-weight: var(--p-600); }
.swatch__v { font-family: var(--f-dato); font-size: var(--t-11); }
.swatch__r { font-family: var(--f-dato); font-size: var(--t-10); letter-spacing: var(--ls-versalita); text-transform: uppercase; }

.sw-lienzo { background: var(--c-lienzo); }
.sw-panel  { background: var(--c-panel); }
.sw-elev1  { background: var(--c-elev-1); }
.sw-elev2  { background: var(--c-elev-2); }
.sw-elev3  { background: var(--c-elev-3); }
.sw-acento { background: var(--c-acento); color: var(--c-sobre-acento); border-color: var(--c-acento); }
.sw-exito  { background: var(--c-exito);  color: var(--c-sobre-exito);  border-color: var(--c-exito); }
.sw-aviso  { background: var(--c-aviso);  color: var(--c-sobre-aviso);  border-color: var(--c-aviso); }
.sw-riesgo { background: var(--c-riesgo); color: var(--c-sobre-riesgo); border-color: var(--c-riesgo); }
.sw-malva  { background: var(--c-malva);  color: var(--c-lienzo);       border-color: var(--c-malva); }

/* Escala tipográfica */
.escala { display: grid; gap: 0; }
.escala__fila { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--e-8); align-items: baseline; padding: var(--e-5) 0; border-bottom: 1px solid var(--c-linea); }
.escala__meta { font-family: var(--f-dato); font-size: var(--t-11); color: var(--c-txt-3); }

/* Índice de pantallas de la portada */
.indice { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--e-5); }
.indice__item {
  display: grid;
  gap: var(--e-4);
  padding: var(--e-8);
  background: var(--c-panel);
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-6);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--mov) var(--curva), background var(--mov) var(--curva);
}
.indice__item:hover { border-color: var(--c-acento); background: var(--c-elev-1); }
.indice__n { font-family: var(--f-dato); font-size: var(--t-11); color: var(--c-acento); letter-spacing: var(--ls-versalita); }
.indice__t { font-size: var(--t-14); font-weight: var(--p-600); letter-spacing: var(--ls-titular); }
.indice__d { font-size: var(--t-12); color: var(--c-txt-2); line-height: var(--lh-ui); }
.indice__f { font-family: var(--f-dato); font-size: var(--t-10); color: var(--c-txt-3); }

/* Bloque de demostración con su fondo de trabajo */
.demo {
  padding: var(--e-10);
  background: var(--c-lienzo);
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-6);
  align-items: flex-start;
}
.demo--rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.demo--bloque { display: block; }

/* ==========================================================================
   2. ACCESO (acceso.html)
   Dos columnas: identidad del centro a la izquierda, trabajo a la derecha.
   En móvil la columna de marca se reduce a una tira.
   ========================================================================== */

.acceso {
  min-height: calc(100vh - var(--mkbar-h));
  margin-top: var(--mkbar-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
}

.acceso__marca {
  position: relative;
  padding: var(--e-24) var(--e-20);
  background:
    var(--trama) 0 0 / 22px 22px,
    var(--c-panel);
  border-right: 1px solid var(--c-linea-fuerte);
  display: grid;
  align-content: space-between;
  gap: var(--e-20);
}
.acceso__claim { max-width: 30ch; font-size: var(--t-30); letter-spacing: var(--ls-titular-xl); line-height: 1.15; }
.acceso__claim em { font-style: normal; color: var(--c-acento); }
.acceso__datos { display: grid; gap: var(--e-6); max-width: 46ch; }

.acceso__panel { padding: var(--e-20) var(--e-16); display: grid; align-content: center; background: var(--c-lienzo); }
.acceso__caja { width: 100%; max-width: 380px; margin: 0 auto; display: grid; gap: var(--e-10); }
.acceso__h1 { font-size: var(--t-24); letter-spacing: var(--ls-titular-xl); }
.acceso__sub { font-size: var(--t-13); color: var(--c-txt-2); margin-top: var(--e-3); }

.acceso__o { display: flex; align-items: center; gap: var(--e-6); font-size: var(--t-11); color: var(--c-txt-3); text-transform: uppercase; letter-spacing: var(--ls-versalita); }
.acceso__o::before, .acceso__o::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--c-linea-fuerte); }

.acceso__pie { font-size: var(--t-11); color: var(--c-txt-3); text-align: center; line-height: var(--lh-texto); }

/* Código 2FA: seis casillas monoespaciadas */
.codigo { display: flex; gap: var(--e-4); }
.codigo input {
  width: 44px; height: 52px;
  text-align: center;
  font-family: var(--f-dato);
  font-size: var(--t-20);
  font-weight: var(--p-500);
  background: var(--c-panel);
  color: var(--c-txt);
  border: 1px solid var(--c-borde-control);
  border-radius: var(--r-4);
}
.codigo input:not(:placeholder-shown) { border-color: var(--c-acento); }

/* ==========================================================================
   3. ALUMNADO
   ========================================================================== */

/* ------------------------------------------------ 3.1 Tarjeta de curso */

.curso {
  display: grid;
  gap: var(--e-8);
  padding: var(--e-10);
  background: var(--c-panel);
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-8);
}
.curso__cab { display: flex; align-items: flex-start; gap: var(--e-6); }
.curso__t { font-size: var(--t-18); letter-spacing: var(--ls-titular); }
.curso__conv { margin-top: var(--e-3); font-family: var(--f-dato); font-size: var(--t-12); color: var(--c-txt-3); }
.curso__meta { display: flex; flex-wrap: wrap; gap: var(--e-4) var(--e-10); font-size: var(--t-13); color: var(--c-txt-2); }
.curso__meta > span { display: inline-flex; align-items: center; gap: var(--e-4); }
.curso--fin { border-color: var(--c-exito); border-left-width: 3px; }

/* ---------------------------------- 3.2 Árbol de módulos y lecciones */

.arbol { display: grid; gap: var(--e-5); }

.modulo { background: var(--c-panel); border: 1px solid var(--c-linea-fuerte); border-radius: var(--r-6); overflow: hidden; }
.modulo > summary { list-style: none; cursor: pointer; }
.modulo > summary::-webkit-details-marker { display: none; }
.modulo__cab {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: var(--e-6);
  align-items: center;
  padding: var(--e-8) var(--e-10);
}
.modulo[open] .modulo__cab { border-bottom: 1px solid var(--c-linea); }
.modulo__n {
  display: grid; place-content: center;
  width: 26px; height: 26px;
  border-radius: var(--r-4);
  background: var(--c-elev-2);
  border: 1px solid var(--c-linea-fuerte);
  font-family: var(--f-dato);
  font-size: var(--t-12);
  color: var(--c-txt-2);
}
.modulo--hecho .modulo__n { background: var(--c-exito-sup); border-color: var(--c-exito); color: var(--c-exito); }
.modulo--curso .modulo__n { background: var(--c-acento-sup); border-color: var(--c-acento); color: var(--c-acento); }
.modulo--bloq .modulo__n { color: var(--c-txt-3); }
.modulo__t { font-size: var(--t-15); font-weight: var(--p-600); letter-spacing: var(--ls-titular); }
.modulo__meta { margin-top: var(--e-3); display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6); font-size: var(--t-12); color: var(--c-txt-3); }
.modulo__der { display: flex; align-items: center; gap: var(--e-6); }
.modulo__chev { color: var(--c-txt-3); transition: transform var(--mov) var(--curva); }
.modulo[open] .modulo__chev { transform: rotate(180deg); }

.leccion {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: var(--e-6);
  align-items: center;
  padding: var(--e-6) var(--e-10) var(--e-6) var(--e-12);
  border-bottom: 1px solid var(--c-linea);
  color: inherit;
  text-decoration: none;
  font-size: var(--t-14);
}
.leccion:last-child { border-bottom: 0; }
.leccion:hover { background: var(--c-elev-1); }
.leccion__ico { color: var(--c-txt-3); }
.leccion--hecha .leccion__ico { color: var(--c-exito); }
.leccion--curso { background: var(--c-acento-sup); box-shadow: inset 2px 0 0 var(--c-acento); }
.leccion--curso .leccion__ico { color: var(--c-acento); }
.leccion--bloq { color: var(--c-txt-3); cursor: not-allowed; }
.leccion--bloq:hover { background: transparent; }
.leccion__t { min-width: 0; }
.leccion__num { font-family: var(--f-dato); color: var(--c-txt-3); margin-right: var(--e-4); }
.leccion__meta { display: flex; align-items: center; gap: var(--e-6); font-size: var(--t-12); color: var(--c-txt-3); }

/* ------------------------------------------- 3.3 Visor de lección */

.visor {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  min-height: calc(100vh - var(--mkbar-h));
  margin-top: var(--mkbar-h);
}
.visor[data-temario='oculto'] { grid-template-columns: minmax(0, 1fr); }
.visor[data-temario='oculto'] .visor__aside { display: none; }

.visor__aside {
  position: sticky;
  top: var(--mkbar-h);
  height: calc(100vh - var(--mkbar-h));
  overflow-y: auto;
  background: var(--c-panel);
  border-right: 1px solid var(--c-linea-fuerte);
}
.visor__aside-cab { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--e-5); padding: var(--e-6) var(--e-8); background: var(--c-panel); border-bottom: 1px solid var(--c-linea); }

.temario { padding: var(--e-4) 0 var(--e-16); }
.temario__mod { padding: var(--e-6) var(--e-8) var(--e-3); font-size: var(--t-11); font-weight: var(--p-600); letter-spacing: var(--ls-versalita); text-transform: uppercase; color: var(--c-txt-3); }
.temario__lec {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: var(--e-5);
  align-items: center;
  padding: var(--e-4) var(--e-8);
  border-left: 2px solid transparent;
  font-size: var(--t-13);
  color: var(--c-txt-2);
  text-decoration: none;
}
.temario__lec:hover { background: var(--c-elev-1); color: var(--c-txt); }
.temario__lec[aria-current='page'] { background: var(--c-elev-2); border-left-color: var(--c-acento); color: var(--c-txt); font-weight: var(--p-500); }
.temario__lec--hecha svg { color: var(--c-exito); }
.temario__lec--bloq { color: var(--c-txt-3); }
.temario__min { font-family: var(--f-dato); font-size: var(--t-11); color: var(--c-txt-3); }

/* La columna explícita a minmax(0,1fr) es imprescindible: sin ella la columna
   implícita del grid vale `auto` y toma el max-content de la barra inferior,
   que es más ancha que el viewport en móvil. */
.visor__main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; }
.visor__top > *, .visor__pie > * { min-width: 0; }

.visor__top {
  position: sticky;
  top: var(--mkbar-h);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--e-6);
  padding: var(--e-4) var(--e-10);
  background: var(--c-panel);
  border-bottom: 1px solid var(--c-linea-fuerte);
  min-height: var(--top-h);
  flex-wrap: wrap;
}

.visor__cuerpo { padding: var(--e-16) var(--e-10) var(--e-24); background: var(--c-lienzo); }

.visor__pie {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--e-6);
  padding: var(--e-5) var(--e-10);
  background: var(--c-panel);
  border-top: 1px solid var(--c-linea-fuerte);
  flex-wrap: wrap;
}

/* Contenido rico de la lección: medida de lectura corta y ritmo vertical
   generoso. Es la única zona del sistema con tipografía de lectura. */
.leer { max-width: 68ch; margin: 0 auto; font-size: var(--t-16); line-height: var(--lh-texto); color: var(--c-txt-2); }
.leer > * + * { margin-top: var(--e-8); }
.leer h1 { font-size: var(--t-30); letter-spacing: var(--ls-titular-xl); color: var(--c-txt); }
.leer h2 { font-size: var(--t-20); letter-spacing: var(--ls-titular); color: var(--c-txt); margin-top: var(--e-16); }
.leer h3 { font-size: var(--t-16); color: var(--c-txt); margin-top: var(--e-12); }
.leer p { color: var(--c-txt-2); }
.leer strong { color: var(--c-txt); font-weight: var(--p-600); }
.leer ul, .leer ol { display: grid; gap: var(--e-4); padding-left: var(--e-10); }
.leer ul li { list-style: none; position: relative; }
.leer ul li::before { content: ''; position: absolute; left: calc(var(--e-10) * -1 + 4px); top: .62em; width: 5px; height: 5px; background: var(--c-acento); border-radius: var(--r-full); }
.leer ol { list-style: decimal; }
.leer ol li::marker { font-family: var(--f-dato); font-size: .85em; color: var(--c-txt-3); }
.leer figure { margin: 0; display: grid; gap: var(--e-5); }
.leer figcaption { font-size: var(--t-12); color: var(--c-txt-3); }
.leer blockquote {
  margin: 0;
  padding: var(--e-8) var(--e-10);
  border-left: 3px solid var(--c-acento);
  background: var(--c-panel);
  border-radius: 0 var(--r-6) var(--r-6) 0;
  font-size: var(--t-15);
}
.leer table { font-size: var(--t-14); border: 1px solid var(--c-linea-fuerte); border-radius: var(--r-6); overflow: hidden; }
.leer th { background: var(--c-elev-1); padding: var(--e-5) var(--e-6); text-align: left; font-size: var(--t-12); letter-spacing: var(--ls-versalita); text-transform: uppercase; color: var(--c-txt-2); border-bottom: 1px solid var(--c-linea-fuerte); }
.leer td { padding: var(--e-5) var(--e-6); border-bottom: 1px solid var(--c-linea); }
.leer tr:last-child td { border-bottom: 0; }

/* Ilustración vectorial de la lección: no hay imágenes remotas, se dibuja. */
.figura {
  background: var(--c-panel);
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-6);
  padding: var(--e-10);
}

/* Bloque interactivo dentro de la lección */
.interactivo {
  background: var(--c-panel);
  border: 1px solid var(--c-acento);
  border-radius: var(--r-6);
  overflow: hidden;
}
.interactivo__cab { display: flex; align-items: center; gap: var(--e-5); padding: var(--e-5) var(--e-8); background: var(--c-acento-sup); border-bottom: 1px solid var(--c-acento); font-size: var(--t-11); font-weight: var(--p-600); letter-spacing: var(--ls-versalita); text-transform: uppercase; color: var(--c-acento); }
.interactivo__cuerpo { padding: var(--e-10); display: grid; gap: var(--e-8); }

/* Reproductor de vídeo simulado (sin recurso externo) */
.video-marco {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-elev-1);
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-6);
  display: grid;
  place-content: center;
  gap: var(--e-6);
  justify-items: center;
  overflow: hidden;
}
.video-marco__barra { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--e-5); padding: var(--e-5) var(--e-6); background: var(--c-panel); border-top: 1px solid var(--c-linea-fuerte); }

/* ------------------------------------------------- 3.4 Evaluación */

.eval { max-width: 780px; margin: 0 auto; display: grid; gap: var(--e-10); }

.eval__barra {
  display: flex;
  align-items: center;
  gap: var(--e-8);
  padding: var(--e-6) var(--e-8);
  background: var(--c-panel);
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-6);
  flex-wrap: wrap;
  position: sticky;
  top: calc(var(--mkbar-h) + var(--top-h));
  z-index: 20;
}
.eval__crono { font-family: var(--f-dato); font-size: var(--t-18); font-weight: var(--p-500); font-variant-numeric: tabular-nums; }
.eval__crono--urgente { color: var(--c-riesgo); }

.navpreg { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.navpreg__b {
  width: 28px; height: 28px;
  display: grid; place-content: center;
  background: var(--c-elev-1);
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-4);
  font-family: var(--f-dato);
  font-size: var(--t-11);
  color: var(--c-txt-3);
  cursor: pointer;
}
.navpreg__b:hover { border-color: var(--c-borde-control); color: var(--c-txt); }
.navpreg__b[data-estado='respondida'] { background: var(--c-elev-3); border-color: var(--c-borde-control); color: var(--c-txt); }
.navpreg__b[aria-current='true'] { background: var(--c-acento); border-color: var(--c-acento); color: var(--c-sobre-acento); font-weight: var(--p-700); }

.pregunta { background: var(--c-panel); border: 1px solid var(--c-linea-fuerte); border-radius: var(--r-6); }
.pregunta__cab { display: flex; align-items: center; gap: var(--e-6); flex-wrap: wrap; padding: var(--e-5) var(--e-8); border-bottom: 1px solid var(--c-linea); }
.pregunta__n { font-family: var(--f-dato); font-size: var(--t-11); letter-spacing: var(--ls-versalita); text-transform: uppercase; color: var(--c-txt-3); }
.pregunta__cuerpo { padding: var(--e-10); display: grid; gap: var(--e-8); }
.pregunta__enunciado { font-size: var(--t-16); line-height: var(--lh-texto); color: var(--c-txt); }

.respuestas { display: grid; gap: var(--e-4); }
.respuesta {
  display: flex;
  align-items: flex-start;
  gap: var(--e-6);
  padding: var(--e-6) var(--e-8);
  background: var(--c-lienzo);
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-6);
  font-size: var(--t-15);
  cursor: pointer;
  line-height: var(--lh-ui);
}
.respuesta:hover { border-color: var(--c-borde-control); }
.respuesta:has(.marca:checked) { border-color: var(--c-acento); background: var(--c-acento-sup); }
.respuesta__letra { font-family: var(--f-dato); font-size: var(--t-12); color: var(--c-txt-3); }
.respuesta--acierto { border-color: var(--c-exito); background: var(--c-exito-sup); }
.respuesta--fallo { border-color: var(--c-riesgo); background: var(--c-riesgo-sup); }

.nota {
  display: grid;
  justify-items: center;
  gap: var(--e-4);
  padding: var(--e-12);
  border: 1px solid;
  border-radius: var(--r-8);
}
.nota--apto { border-color: var(--c-exito); background: var(--c-exito-sup); }
.nota--noapto { border-color: var(--c-riesgo); background: var(--c-riesgo-sup); }
.nota__valor { font-family: var(--f-dato); font-size: var(--t-40); font-weight: var(--p-700); letter-spacing: -.04em; line-height: 1; }
.nota--apto .nota__valor { color: var(--c-exito); }
.nota--noapto .nota__valor { color: var(--c-riesgo); }

/* --------------------------------------------- 3.5 Foros y mensajes */

.hilo { display: grid; gap: var(--e-6); padding: var(--e-8) var(--e-10); border-bottom: 1px solid var(--c-linea); }
.hilo:last-child { border-bottom: 0; }
.hilo__cab { display: flex; align-items: flex-start; gap: var(--e-6); }
.hilo__t { font-size: var(--t-15); font-weight: var(--p-600); letter-spacing: var(--ls-titular); color: var(--c-txt); text-decoration: none; }
.hilo__t:hover { text-decoration: underline; }
.hilo__meta { display: flex; align-items: center; gap: var(--e-3) var(--e-8); flex-wrap: wrap; font-size: var(--t-12); color: var(--c-txt-3); }

.msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--e-6); padding: var(--e-8) var(--e-10); border-bottom: 1px solid var(--c-linea); }
.msg--respuesta { padding-left: var(--e-24); background: var(--c-elev-1); }
.msg__cab { display: flex; align-items: baseline; gap: var(--e-5); flex-wrap: wrap; }
.msg__autor { font-size: var(--t-13); font-weight: var(--p-600); color: var(--c-txt); }
.msg__cuerpo { margin-top: var(--e-4); font-size: var(--t-14); line-height: var(--lh-texto); color: var(--c-txt-2); }
.msg__cuerpo p + p { margin-top: var(--e-5); }
.msg__acc { margin-top: var(--e-5); display: flex; gap: var(--e-5); }
.adjunto { display: inline-flex; align-items: center; gap: var(--e-4); margin-top: var(--e-5); padding: var(--e-4) var(--e-6); background: var(--c-elev-2); border: 1px solid var(--c-linea-fuerte); border-radius: var(--r-4); font-size: var(--t-12); color: var(--c-txt-2); text-decoration: none; }
.adjunto:hover { border-color: var(--c-borde-control); color: var(--c-txt); }

/* Conversación privada */
.conv { display: grid; gap: var(--e-8); padding: var(--e-10); }
.burbuja { max-width: 78%; padding: var(--e-6) var(--e-8); border-radius: var(--r-8); font-size: var(--t-14); line-height: var(--lh-texto); }
.burbuja__cab { display: flex; align-items: baseline; gap: var(--e-5); margin-bottom: var(--e-4); font-size: var(--t-11); }
.burbuja--recibida { background: var(--c-panel); border: 1px solid var(--c-linea-fuerte); color: var(--c-txt-2); justify-self: start; }
.burbuja--enviada { background: var(--c-acento-sup); border: 1px solid var(--c-acento); color: var(--c-txt); justify-self: end; }

/* ==========================================================================
   4. ADMINISTRACIÓN
   ========================================================================== */

/* Gráfico de barras dibujado con la propia rejilla, sin librería. */
.barras { display: grid; gap: var(--e-4); }
.barra-fila { display: grid; grid-template-columns: minmax(6rem, 30%) minmax(0, 1fr) 3.5rem; gap: var(--e-6); align-items: center; font-size: var(--t-12); }
.barra-fila__et { color: var(--c-txt-2); }
.barra-fila__pista { height: 14px; background: var(--c-elev-2); border-radius: var(--r-2); overflow: hidden; }
.barra-fila__valor { height: 100%; background: var(--c-acento); border-radius: var(--r-2); }
.barra-fila__n { font-family: var(--f-dato); text-align: right; color: var(--c-txt); }

/* Mapa de calor de conexión diaria (14 días) */
/* `grid-auto-columns: minmax(0, 1fr)` es imprescindible: sin ello cada columna
   vale `auto` y con treinta días la tira exige más ancho del que hay. */
.calor { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; min-width: 0; }
.calor__d { width: 100%; aspect-ratio: 1; border-radius: var(--r-2); background: var(--c-elev-2); border: 1px solid var(--c-linea); }
.calor__d[data-n='1'] { background: var(--c-acento-sup); border-color: var(--c-acento); }
.calor__d[data-n='2'] { background: var(--c-acento); border-color: var(--c-acento); opacity: .55; }
.calor__d[data-n='3'] { background: var(--c-acento); border-color: var(--c-acento); }

/* Distribución por tramos, en una sola línea de bloques */
.tramos { display: flex; gap: 2px; height: 34px; align-items: flex-end; }
.tramos__b { flex: 1 1 0; background: var(--c-acento); border-radius: var(--r-2) var(--r-2) 0 0; min-height: 3px; }
.tramos__b--riesgo { background: var(--c-riesgo); }
.tramos__b--aviso { background: var(--c-aviso); }

/* Vista dividida de gestión: tabla a la izquierda y expediente a la derecha.
   La ficha es una columna fija: la tabla se queda con todo lo que sobra, que
   es lo que hace falta cuando hay ocho columnas de dato. */
.gestion { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--e-8); align-items: start; }
.gestion__ficha { position: sticky; top: calc(var(--mkbar-h) + var(--top-h) + var(--e-8)); }

@media (max-width: 1400px) {
  .gestion { grid-template-columns: minmax(0, 1fr); }
  .gestion__ficha { position: static; }
}

/* Editor de identidad: control y previsualización lado a lado */
.identidad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--e-8); align-items: start; }
.previsual {
  position: sticky;
  top: calc(var(--mkbar-h) + var(--top-h) + var(--e-8));
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-6);
  overflow: hidden;
  background: var(--c-panel);
}
.previsual__barra { display: flex; align-items: center; gap: var(--e-5); padding: var(--e-4) var(--e-6); border-bottom: 1px solid var(--c-linea); background: var(--c-elev-1); }
.previsual__lienzo { padding: var(--e-8); display: grid; gap: var(--e-6); background: var(--c-lienzo); }

/* Selector de color: la muestra y el valor hexadecimal van juntos */
.color-campo { display: flex; align-items: center; gap: var(--e-4); }
.color-muestra { width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid var(--c-borde-control); border-radius: var(--r-4); }
.color-campo .entrada { font-family: var(--f-dato); text-transform: uppercase; }

/* Ajuste de configuración: etiqueta, clave técnica y control en una fila */
.ajuste {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: var(--e-8);
  align-items: center;
  padding: var(--e-8) var(--e-10);
  border-bottom: 1px solid var(--c-linea);
}
.ajuste:last-child { border-bottom: 0; }
.ajuste__t { font-size: var(--t-13); font-weight: var(--p-500); color: var(--c-txt); }
.ajuste__d { margin-top: var(--e-3); font-size: var(--t-12); color: var(--c-txt-2); max-width: 62ch; line-height: var(--lh-ui); }
.ajuste__clave { margin-top: var(--e-4); }
.ajuste__control { display: flex; align-items: center; gap: var(--e-4); }
.ajuste__control .entrada { text-align: right; font-family: var(--f-dato); }
.ajuste__unidad { font-size: var(--t-12); color: var(--c-txt-3); white-space: nowrap; }

/* Matriz de notificaciones por canal */
.matriz th:not(:first-child), .matriz td:not(:first-child) { text-align: center; width: 110px; }
.matriz td:first-child { color: var(--c-txt); }
.matriz .marca { margin: 0 auto; }

@media (max-width: 1280px) {
  .identidad { grid-template-columns: minmax(0, 1fr); }
  .previsual { position: static; }
}

@media (max-width: 1024px) {
  .acceso { grid-template-columns: minmax(0, 1fr); }
  .acceso__marca { padding: var(--e-12) var(--e-10); border-right: 0; border-bottom: 1px solid var(--c-linea-fuerte); gap: var(--e-10); }
  .acceso__claim { font-size: var(--t-24); }
  .visor { grid-template-columns: minmax(0, 1fr); }
  .visor__aside { display: none; }
  .visor[data-temario='visible'] .visor__aside { display: block; position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--c-linea-fuerte); }
}

@media (max-width: 768px) {
  .portada { padding: var(--e-10) var(--e-6) var(--e-24); }
  .portada__h1 { font-size: var(--t-30); }
  .seccion__d { display: none; }
  .ajuste { grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
  .visor__cuerpo { padding: var(--e-10) var(--e-6) var(--e-16); }
  .leer { font-size: var(--t-15); }
  .burbuja { max-width: 92%; }
  .msg--respuesta { padding-left: var(--e-12); }
  /* Con la barra superior a dos líneas, fijar la de la evaluación descuadra
     el cálculo: en móvil se deja fluir con la página. */
  .eval__barra { position: static; }
  .visor__top { position: static; }
}