/* =====================================================================
   SEMILLERO DE INVESTIGACIÓN SAMI
   Hoja completa y aparte: reemplaza a styles.css, no se apila encima.

   Las caras del sitio, y de dónde sale esta:

     Expo Multimedia   — editorial, serif, papel.
     Virtual Champions — negro, condensada, esports.
     Jam de Altura     — píxel, verde consola sobre violeta.
     Music Fest        — afiche, Anton, mayúsculas.
     INKreible         — marcador y cuaderno.
     Salidas           — papel crema con pauta: un formato institucional.
     SAMI              — esto: CUADERNO DE INVESTIGACIÓN.

   Es primo de la hoja de salidas —las dos son documentos y no afiches— pero
   no es la misma, y eso importa: quien está mirando el semillero tiene que
   saber en el primer vistazo que no está en la salida a SOFA.

   La diferencia es el papel. Salidas usa pauta de renglones, la del formato
   que se llena a mano. Aquí es CUADRÍCULA, la del cuaderno de laboratorio:
   lo que se lleva encima es un registro de avances semana a semana, no un
   permiso que se firma una vez. Y la tinta es fría —azul de bolígrafo en vez
   de crema y verde monte—, que es como se ve una libreta de trabajo.

   Lo demás se hereda a propósito: los mismos nombres de clase que el resto
   del sitio (.tarjeta, .btn, .chip, .campo, .datos, .aviso, .reg) y los
   mismos tres colores semánticos —verde lo aprobado, ámbar lo que falta,
   ladrillo lo que salió mal—, porque un docente que ya usó el panel de
   salidas no tiene por qué reaprender qué significa un chip ámbar.

   LA PIEZA CLAVE es .escalera: los doce peldaños del trámite dibujados como
   una barra. Es lo único que esta hoja tiene y las otras no, y responde a la
   pregunta que todo el mundo hace primero —"¿en qué va este proyecto?"— sin
   que nadie tenga que leer una tabla.
   ===================================================================== */

:root {
  --papel: #f2f5fa;
  --papel-hondo: #e7ecf5;
  --papel-alto: #ffffff;
  --linea: #d7dee9;
  --linea-fuerte: #b3bfd2;

  --tinta: #151b28;
  --tinta-dim: #46536a;
  --tinta-mute: #7c879a;

  /* El azul de la casa: el mismo del favicon del sitio. Es el color de la
     marca y de los enlaces, y NO significa nada por sí solo —lo que está bien
     y lo que falta se dicen con los tres de abajo—. */
  --tinte: #2b47b4;
  --tinte-hondo: #21389a;
  --tinte-claro: #e6ebfa;

  --monte: #17795a;      /* aprobado, cerrado, lo que ya está */
  --monte-claro: #e3f1eb;
  --ambar: #a86a0c;      /* en curso, pendiente, lo que falta */
  --ambar-claro: #fbf1de;
  --ladrillo: #a3271c;   /* rechazado, retirado, lo que salió mal */
  --ladrillo-claro: #fbe9e7;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Space Mono para códigos, notas y rótulos de dato. Es la que le da a la
     página el aire de libreta de trabajo sin pedir una fuente nueva: ya venía
     descargada para la jam. */
  --mono: "Space Mono", "SFMono-Regular", Consolas, monospace;

  --sombra: 0 2px 0 rgba(21, 27, 40, .05), 0 1px 3px rgba(21, 27, 40, .07);
  --radio: 5px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.65;
  /* La cuadrícula del cuaderno: 26 px, tan tenue que solo se nota como
     textura. Dos gradientes cruzados y no una imagen, para no pedir un
     archivo por una trama de dos líneas. */
  background-image:
    linear-gradient(rgba(179, 191, 210, .20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(179, 191, 210, .20) 1px, transparent 1px);
  background-size: 100% 26px, 26px 100%;
  background-attachment: fixed;
}

a { color: var(--tinte); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(29px, 5.4vw, 46px); }
h2 { font-size: clamp(21px, 3.2vw, 30px); }
h3 { font-size: 17px; }
h4 { font-size: 14px; }

p { margin: 0 0 1em; }
img { max-width: 100%; }

/* ---------------------------------------------------------------------
   Piezas base
   --------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte);
  margin: 0 0 10px;
}

.sec-lead {
  color: var(--tinta-dim);
  max-width: 64ch;
  margin: 12px 0 0;
}

.mini { font-size: 12.5px; color: var(--tinta-mute); }
.cod { font-family: var(--mono); letter-spacing: .06em; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--linea-fuerte);
  background: var(--papel-alto);
  color: var(--tinta-dim);
  white-space: nowrap;
}

.chip.ok     { color: var(--monte);    border-color: var(--monte);    background: var(--monte-claro); }
.chip.pend   { color: var(--tinte);    border-color: var(--tinte);    background: var(--tinte-claro); }
.chip.alerta { color: var(--ambar);    border-color: var(--ambar);    background: var(--ambar-claro); }
.chip.malo   { color: var(--ladrillo); border-color: var(--ladrillo); background: var(--ladrillo-claro); }
.chip.no     { color: var(--tinta-mute); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.acciones { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  padding: 13px 22px;
  border: 1px solid var(--tinte);
  border-radius: var(--radio);
  background: var(--tinte);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}

.btn:hover { background: var(--tinte-hondo); border-color: var(--tinte-hondo); }
.btn:active { transform: translateY(1px); }

.btn.ghost {
  background: var(--papel-alto);
  color: var(--tinta);
  border-color: var(--linea-fuerte);
}

.btn.ghost:hover { background: var(--papel-hondo); border-color: var(--tinta-mute); }

.btn.ambar { background: var(--ambar); border-color: var(--ambar); }
.btn.ambar:hover { background: #8d5809; border-color: #8d5809; }

.btn.peligro { background: var(--papel-alto); color: var(--ladrillo); border-color: #e0bdb8; }
.btn.peligro:hover { background: var(--ladrillo-claro); border-color: var(--ladrillo); }

.btn.chico { font-size: 12.5px; padding: 8px 13px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------------------------------------------------------------------
   Estructura
   --------------------------------------------------------------------- */
.sam {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 22px 80px;
}

.sam.angosto { max-width: 780px; }

.sam-sec { padding: 44px 0 0; }

.sec-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  margin-top: 20px;
}

.grid.dos { grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); }

.tarjeta {
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 20px;
  box-shadow: var(--sombra);
}

a.tarjeta { text-decoration: none; color: inherit; display: block; }
a.tarjeta:hover { border-color: var(--tinte); }

.vacio {
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio);
  padding: 26px 20px;
  text-align: center;
  color: var(--tinta-mute);
  background: var(--papel-alto);
}

.vacio code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--papel-hondo);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--tinta-dim);
}

/* ---------------------------------------------------------------------
   Cabecera
   --------------------------------------------------------------------- */
.sam-top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--papel-alto);
  border-bottom: 1px solid var(--linea-fuerte);
}

/* Un renglón y punto: una barra pegajosa que envuelve se come media pantalla
   en cada scroll. Lo que cede cuando no cabe se decide en el media query. */
.sam-top-in {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 62px;
  flex-wrap: nowrap;
}

.sam-marca {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--tinta);
  white-space: nowrap;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
}

.sam-marca em { font-style: normal; color: var(--tinte); }

/* El sello: un círculo con un punto dentro, que es como se marca una muestra
   en una libreta de campo. */
.sam-marca::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 3px solid var(--tinte);
  flex: 0 0 auto;
}

.sam-nav {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-left: auto;
  min-width: 0;
}

.sam-nav a {
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tinta-dim);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--radio);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
}

.sam-nav a:hover { background: var(--papel-hondo); color: var(--tinta); }
.sam-nav a.on { background: var(--tinte-claro); color: var(--tinte); }
.sam-nav .ic { display: none; }

.panel-top { background: var(--papel-hondo); }

.panel-quien {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  min-width: 0;
}

.panel-quien .mini { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-quien form { margin: 0; flex: 0 0 auto; }
.panel-quien select { font-size: 12.5px; padding: 7px 9px; }

/* ---------------------------------------------------------------------
   Portada
   --------------------------------------------------------------------- */
.hero {
  padding: 52px 0 8px;
  border-bottom: 1px dotted var(--linea-fuerte);
}

/* La sigla es el h1: pisa el tamaño de h1 porque aquí el título no es un
   renglón de texto sino la marca del semillero. */
.hero h1.sigla {
  font-family: var(--display);
  font-size: clamp(56px, 14vw, 128px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--tinte);
  margin: 0 0 6px;
}

.hero .largo {
  color: var(--tinta-dim);
  max-width: 60ch;
  font-size: 17px;
  margin: 14px 0 0;
}

/* ---------------------------------------------------------------------
   Datos: la rejilla de rótulo + valor
   --------------------------------------------------------------------- */
.datos {
  display: grid;
  gap: 18px 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

.dato .k {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-mute);
  margin-bottom: 5px;
}

.dato .v { font-size: 15.5px; line-height: 1.45; }
.dato .v strong { font-weight: 700; }
.dato .v.grande { font-family: var(--display); font-size: 22px; font-weight: 700; }

.dato .v.ok     { color: var(--monte); }
.dato .v.alerta { color: var(--ambar); }
.dato .v.malo   { color: var(--ladrillo); }
.dato .v.apagado { color: var(--tinta-mute); }

/* Las cifras de una tarjeta de resumen: los rótulos miden dos renglones
   siempre, quepan en uno o en dos. Si no, "Pasados de los tres semestres"
   empuja su número medio renglón abajo y la fila de cifras queda en
   escalera. Dos renglones de 10.5 px son 27 px. */
.datos.cifras .k {
  min-height: 27px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.datos.cifras .v.grande { height: 32px; overflow: hidden; }

/* ---------------------------------------------------------------------
   La tarjeta de un proyecto: TODAS DEL MISMO ALTO

   No es capricho de simetría. La portada del panel es una rejilla que se
   barre con el ojo, y para barrerla las cifras tienen que caer siempre en
   el mismo renglón: el semestre de la tarjeta de la izquierda a la misma
   altura que el de la derecha. Un título de una línea al lado de uno de
   tres, o un codirector que en unas tarjetas está y en otras no, rompe eso
   y obliga a leer cada tarjeta entera para encontrar el dato.

   Así que aquí NADA mide según lo que le tocó de contenido. Cada casilla
   tiene su alto en píxeles y lo que no cabe se recorta con puntos
   suspensivos; el texto completo queda en el title, a un segundo de
   distancia. Los nombres de las personas se llevan un renglón entero cada
   uno —son lo más largo que hay— y por eso van abajo y no en la rejilla de
   cifras, donde a tres columnas no cabría ni un apellido compuesto.
   --------------------------------------------------------------------- */
.tp-cab {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}

/* Tres renglones de 20 px, ni uno más. Tres y no dos porque los títulos de
   este semillero son de cien caracteres —"Aplicativo móvil con realidad
   aumentada para la comprensión de las métricas…"— y en dos renglones se
   cortan todos por la mitad; en tres, casi ninguno. */
.tp-titulo {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  height: 60px;
  line-height: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* El chip no se encoge —una etiqueta de estado a medias no dice nada— pero
   tampoco pasa de la mitad del ancho: de "Sustentación de anteproyecto"
   para arriba, el que cede es el título, que tiene el suyo en el title. */
.tp-cab .chip {
  flex: 0 0 auto;
  display: block;
  max-width: 52%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tp-gente {
  margin: 0 0 12px;
  height: 18px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dos columnas y fijas: con auto-fit, una tarjeta angosta bajaría la
   segunda cifra a un renglón nuevo y ya serían dos altos distintos. */
.tp-cifras {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 26px;
  margin-top: 14px;
}

.tp-cifras .k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-cifras .v.grande { height: 32px; overflow: hidden; }

/* Director y codirector: un renglón entero para cada uno, siempre los dos,
   esté o no el codirector. El rótulo con ancho fijo para que los dos
   nombres arranquen en la misma columna. */
.tp-persona {
  display: flex;
  align-items: baseline;
  gap: 10px;
  height: 20px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dotted var(--linea);
  box-sizing: content-box;
}

.tp-persona .k {
  flex: 0 0 90px;   /* lo que mide "CODIRECTOR" en mono a 10.5 px */
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-mute);
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
}

.tp-persona .v {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tp-persona .v.apagado { color: var(--tinta-mute); }

/* Una lista de rótulo y valor en columna, para las fichas angostas. */
.ficha { margin: 0; }

.ficha .f {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px dotted var(--linea-fuerte);
}

.ficha .f:last-child { border-bottom: 0; }

.ficha .f .k {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-mute);
  flex: 0 0 34%;
  max-width: 190px;
}

.ficha .f .v { flex: 1; min-width: 0; word-break: break-word; }

/* ---------------------------------------------------------------------
   La escalera del trámite
   Los doce peldaños dibujados como una barra segmentada. Responde de un
   vistazo la única pregunta que todo el mundo hace primero: ¿en qué va?

   Los tramos van con un hueco entre sí porque son fases distintas —la
   vinculación y el proyecto— y verlas pegadas haría pensar que radicar
   una carta y sustentar un anteproyecto pesan lo mismo.
   --------------------------------------------------------------------- */
.escalera {
  display: flex;
  gap: 3px;
  margin: 16px 0 10px;
  list-style: none;
  padding: 0;
}

.escalera li {
  flex: 1;
  height: 7px;
  border-radius: 2px;
  background: var(--papel-hondo);
  border: 1px solid var(--linea);
  min-width: 0;
}

.escalera li.pasado { background: var(--tinte-claro); border-color: #b9c5ee; }
.escalera li.aqui   { background: var(--tinte); border-color: var(--tinte-hondo); }
.escalera li.corte  { margin-right: 10px; }

.escalera.cerrada li.pasado { background: var(--monte-claro); border-color: #b6dcca; }
.escalera.cerrada li.aqui   { background: var(--monte); border-color: var(--monte); }
.escalera.malo li.pasado { background: var(--ladrillo-claro); border-color: #e8c4c0; }
.escalera.malo li.aqui   { background: var(--ladrillo); border-color: var(--ladrillo); }

/* ---------------------------------------------------------------------
   Los pasos del trámite
   Cuatro casillas en fila. Es el mapa de la vinculación y va arriba del
   todo: quien llega tiene que ver antes que nada que esto son cuatro
   trámites y no un botón.
   --------------------------------------------------------------------- */
.pasos {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, 1fr);
  counter-reset: p;
}

.pasos.tres { grid-template-columns: repeat(3, 1fr); }

.paso {
  counter-increment: p;
  position: relative;
  padding: 18px 15px 15px;
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.paso::before {
  content: counter(p);
  position: absolute;
  top: -12px;
  left: 14px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  background: var(--papel-alto);
  border: 1px solid var(--linea-fuerte);
  color: var(--tinta-dim);
}

.paso .t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  margin: 6px 0 6px;
  line-height: 1.25;
}

.paso .d { font-size: 13px; color: var(--tinta-dim); line-height: 1.5; }

.paso.hecho { border-color: var(--monte); background: var(--monte-claro); }
.paso.hecho::before { content: "✓"; background: var(--monte); border-color: var(--monte); color: #fff; }
.paso.ahora { border-color: var(--tinte); background: var(--tinte-claro); }
.paso.ahora::before { background: var(--tinte); border-color: var(--tinte); color: #fff; }

/* ---------------------------------------------------------------------
   El calendario de la resolución

   Doce renglones con una actividad, una fecha y —cuando dice algo— una
   etiqueta. NO es una tabla, y es a propósito: los nombres de las
   actividades vienen de la resolución y miden hasta doce palabras, así que
   una tabla de tres columnas en un celular se va de lado o se parte en una
   palabra por renglón. Aquí en pantalla ancha son tres columnas de una
   rejilla y en angosta se apilan solas, sin scroll horizontal.

   LO TACHADO es la pieza. Un plazo vencido se marca de las dos maneras
   —tachado y con etiqueta— porque cada una falla por su lado: el tachado
   solo se puede confundir con un estilo, y una etiqueta suelta al final del
   renglón se pierde en una lista de doce. Juntas no se leen mal.
   --------------------------------------------------------------------- */
/* Lo que sigue: la actividad en un renglón y la fecha en el de abajo. Las
   dos cosas son el titular de este bloque y compartir renglón las esconde a
   las dos —el nombre de una actividad de la resolución mide doce palabras y
   la fecha termina cayendo donde ya nadie mira—. */
.cal-sigue .q {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta);
  margin: 0 0 5px;
}

.cal-sigue .c {
  margin: 0;
  display: flex;
  gap: 4px 10px;
  align-items: baseline;
  flex-wrap: wrap;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: var(--tinte);
}

.cal-sigue .c .mini { font-family: var(--body); font-weight: 400; }

/* LAS TRES COLUMNAS SE MIDEN UNA VEZ, PARA LOS DOCE RENGLONES. La rejilla
   vive en la lista y cada renglón se cuelga de ella con `subgrid`; con la
   rejilla en cada <li>, las columnas `auto` se medían renglón por renglón y
   las fechas terminaban empezando en doce sitios distintos —que es
   exactamente lo que un calendario no puede hacer: se lee bajando por la
   columna de las fechas, no leyendo doce renglones enteros—.

   La línea de `subgrid` va DESPUÉS de la misma declaración con anchos
   propios: un navegador que no la entienda descarta esa línea y se queda con
   la de arriba, que alinea igual de bien mientras haya una fecha larga en la
   lista. */
.cal {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel-alto);
  box-shadow: var(--sombra);
  overflow: hidden;

  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
}

.cal-hito {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  grid-template-columns: subgrid;
  gap: 0 18px;
  align-items: baseline;
  border-top: 1px solid var(--linea);
}

.cal-hito:first-child { border-top: 0; }

/* El aire del renglón lo ponen las CELDAS y no el renglón. Con el relleno en
   el <li>, la rejilla tendría que descontarlo en las dos puntas y el ancho de
   cada columna dejaría de ser exactamente el de su contenido. Puesto en las
   celdas, la rejilla mide lo que se ve. */
.cal-hito > * { padding-block: 13px; }

.cal-que {
  padding-left: 16px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--tinta);
}

.cal-cuando {
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tinta-dim);
  white-space: nowrap;
}

/* Los chips terminan todos en el mismo filo derecho. Alineados a la
   izquierda, "en curso" y "lo que sigue" dejarían el borde de la lista
   dentado. */
.cal-marca { padding-right: 16px; text-align: right; }
.cal-marca .chip { margin: 0; }

/* Lo que ya pasó. El renglón entero baja de tono y se tacha: es lo que uno
   hace con lápiz encima de un calendario impreso. */
.cal-hito.pasado { background: var(--papel-hondo); }
.cal-hito.pasado .cal-que,
.cal-hito.pasado .cal-cuando {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--tinta-mute);
}

/* Los tres que sí piden atención, marcados en el filo izquierdo para que se
   encuentren bajando la lista con el ojo y no leyéndola entera. */
.cal-hito.sigue  { box-shadow: inset 3px 0 0 var(--tinte); }
.cal-hito.curso  { box-shadow: inset 3px 0 0 var(--ambar); background: var(--ambar-claro); }
.cal-hito.hoy    { box-shadow: inset 3px 0 0 var(--ladrillo); background: var(--ladrillo-claro); }
.cal-hito.sin .cal-cuando { color: var(--tinta-mute); font-weight: 400; }

@media (max-width: 760px) {
  /* La fecha baja debajo de la actividad y la etiqueta se va a la izquierda
     con ella: "Hasta el 21 de septiembre de 2026" no cabe al lado de un
     nombre de doce palabras sin partir los dos. Aquí no hay columnas que
     compartir, así que la rejilla se deshace en las dos puntas: la lista
     vuelve a ser una lista y cada renglón apila lo suyo. */
  .cal { display: block; }
  .cal-hito { display: block; padding: 13px 16px; }
  .cal-hito > * { padding: 0; }
  .cal-que { margin-bottom: 5px; }
  .cal-cuando { white-space: normal; }
  .cal-marca { text-align: left; }
  .cal-marca .chip { margin-top: 7px; }
}

/* ---------------------------------------------------------------------
   Avisos
   --------------------------------------------------------------------- */
.aviso {
  border: 1px solid var(--linea-fuerte);
  border-left: 4px solid var(--tinta-mute);
  border-radius: var(--radio);
  background: var(--papel-alto);
  padding: 14px 16px;
  margin: 0 0 18px;
}

.aviso p:last-child { margin-bottom: 0; }
.aviso ul { margin: 8px 0 0; padding-left: 20px; }
.aviso li { margin-bottom: 4px; }
.aviso.bueno { border-left-color: var(--monte); background: var(--monte-claro); border-color: #b6dcca; }
.aviso.malo  { border-left-color: var(--ladrillo); background: var(--ladrillo-claro); border-color: #e8c4c0; }
.aviso.ojo   { border-left-color: var(--ambar); background: var(--ambar-claro); border-color: #e8d3a8; }

.aviso .t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */
fieldset { border: 0; margin: 0; padding: 0; }

label {
  display: block;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-dim);
  margin-bottom: 7px;
}

input, select, textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 15.5px;
  color: var(--tinta);
  background: var(--papel-alto);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  padding: 11px 13px;
  line-height: 1.4;
}

textarea { min-height: 84px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--tinte);
  box-shadow: 0 0 0 3px var(--tinte-claro);
}

input::placeholder, textarea::placeholder { color: var(--tinta-mute); }

input[type="checkbox"], input[type="radio"] { width: auto; }

.campo { margin-bottom: 20px; }
.campo .ayuda { font-size: 12.5px; color: var(--tinta-mute); margin: 7px 0 0; }

.fila {
  display: grid;
  gap: 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.fila.tres { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }

/* El correo institucional con el dominio pegado al lado: se teclea el usuario
   y no veinte caracteres que siempre son los mismos. */
.correo { display: flex; align-items: stretch; min-width: 0; }

.correo input {
  border-radius: var(--radio) 0 0 var(--radio);
  border-right: 0;
  min-width: 0;
}

.correo .dominio {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--tinta-mute);
  background: var(--papel-hondo);
  border: 1px solid var(--linea-fuerte);
  border-radius: 0 var(--radio) var(--radio) 0;
  white-space: nowrap;
}

.correo:focus-within input,
.correo:focus-within .dominio { border-color: var(--tinte); }

/* Un integrante del formulario: su propio bloque, para que se vea que son
   dos personas y no diez campos sueltos. */
.integrante {
  border: 1px solid var(--linea);
  border-left: 3px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--papel-alto);
  padding: 18px 18px 2px;
  margin-bottom: 16px;
}

.integrante > .quien {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-mute);
  margin: 0 0 14px;
}

/* ---------------------------------------------------------------------
   La última revisada
   Un <dialog> del navegador, sin librería: son treinta líneas de CSS y
   showModal() ya trae el foco atrapado, el Escape y el fondo inerte, que
   es justamente lo que se paga al traer una.

   La usa el formulario público antes de enviar. No es una advertencia
   —no hay nada peligroso que hacer aquí— sino la última pantalla donde
   se puede repetir lo que este formulario NO hace, con el título y los
   nombres recién escritos delante. La ficha de adentro es la misma
   .ficha del resto del sitio: lo que se confirma se lee como se lee
   cualquier otro dato del semillero.
   --------------------------------------------------------------------- */
.dlg {
  width: min(470px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--papel-alto);
  color: var(--tinta);
  box-shadow: 0 18px 46px rgba(21, 27, 40, .24);
}

.dlg::backdrop { background: rgba(21, 27, 40, .52); }

.dlg-cuerpo { padding: 22px 22px 4px; }
.dlg h2 { font-size: 21px; margin: 0 0 14px; }
.dlg p { font-size: 14.5px; color: var(--tinta-dim); }
.dlg .ficha .f:first-child { padding-top: 0; }

/* Los dos botones a lo ancho y del mismo tamaño: ni el de seguir es más
   grande ni el de volver es un enlace de letra chica. */
.dlg-pie {
  display: flex;
  gap: 10px;
  padding: 18px 22px 22px;
}

.dlg-pie .btn { flex: 1; }

/* La página de atrás no se desplaza mientras el diálogo está abierto: el
   <dialog> bloquea el foco, no la rueda del ratón. */
body:has(dialog[open]) { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .dlg[open] { animation: dlg-entra .16s ease-out; }
  .dlg[open]::backdrop { animation: dlg-fondo .16s ease-out; }
}

@keyframes dlg-entra { from { opacity: 0; transform: translateY(10px); } }
@keyframes dlg-fondo { from { opacity: 0; } }

/* ---------------------------------------------------------------------
   El código de seis caracteres
   --------------------------------------------------------------------- */
.codigo-grande {
  font-family: var(--mono);
  font-size: clamp(30px, 8vw, 46px);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--tinte);
  background: var(--papel-alto);
  border: 2px dashed var(--tinte);
  border-radius: var(--radio);
  padding: 16px 20px;
  text-align: center;
  margin: 0 0 8px;
}

/* ---------------------------------------------------------------------
   Filas desplegables (proyectos en el panel, reuniones en la ficha)
   Dieciséis reuniones abiertas no se leen: se abre la que se va a tocar.
   --------------------------------------------------------------------- */
.regs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

.reg {
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.reg:hover { border-color: var(--linea-fuerte); }
.reg.abierta { border-color: var(--tinta-mute); }
.reg:target { border-color: var(--tinte); box-shadow: 0 0 0 3px var(--tinte-claro); }

.reg-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  flex-wrap: wrap;
}

.reg-quien { flex: 1 1 auto; min-width: 0; }

.reg .nom {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  margin: 0;
}

.reg-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--tinta-mute);
  margin-top: 3px;
}

.reg-meta .m { flex: 0 0 auto; }
.reg-meta .m b { color: var(--tinta-dim); font-weight: 600; }

.reg-marcas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.reg-marcas .chip { flex: 0 0 auto; }

.reg-abrir {
  flex: 0 0 auto;
  border: 1px solid var(--linea-fuerte);
  background: var(--papel-alto);
  color: var(--tinta-mute);
  border-radius: var(--radio);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease;
}

.reg-abrir:hover { background: var(--papel-hondo); color: var(--tinta); }
.reg.abierta .reg-abrir { transform: rotate(180deg); }

.reg-mas {
  display: none;
  padding: 4px 16px 16px;
  border-top: 1px dotted var(--linea-fuerte);
}

.reg.abierta .reg-mas { display: block; }
.reg-mas form { margin: 0 0 14px; }
.reg-mas .campo { margin-bottom: 14px; }

.reg-acciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dotted var(--linea-fuerte);
}

.reg-acciones > form { margin: 0; }

/* ---------------------------------------------------------------------
   La rejilla de una reunión: adelantos y compromisos arriba, una fila
   por estudiante abajo. Es el reemplazo directo de la hoja semanal.
   --------------------------------------------------------------------- */
.marcas { display: grid; gap: 10px; margin: 4px 0 0; }

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 13px;
  background: var(--papel-hondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.marca .quien { flex: 1 1 180px; min-width: 0; font-weight: 600; font-size: 14.5px; }
.marca .campo { margin: 0; flex: 0 0 auto; }
.marca label { margin-bottom: 4px; }
.marca input[type="number"] { width: 90px; }

/* Los tres botones de asistencia: asistió / no vino / sin marcar. Van juntos
   como un solo control porque son un solo dato de tres valores.

   El radio de verdad sigue ahí, solo que corrido fuera de la vista: se pinta
   con :has(:checked) y no con una clase del servidor, para que el botón
   responda al dedo en el momento en que se toca y no después de guardar. Con
   el input a display:none el teclado no llegaría nunca al control. */
.pasa {
  position: relative;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 12px;
  border: 1px solid var(--linea-fuerte);
  background: var(--papel-alto);
  color: var(--tinta-mute);
  cursor: pointer;
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.pasa input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.pasa:first-child { border-radius: var(--radio) 0 0 var(--radio); }
.pasa:last-child { border-radius: 0 var(--radio) var(--radio) 0; }
.pasa:not(:first-child) { border-left: 0; }
.pasa:hover { background: var(--papel-hondo); color: var(--tinta); }
.pasa:focus-within { box-shadow: 0 0 0 3px var(--tinte-claro); z-index: 1; }

.pasa.vino:has(input:checked)   { background: var(--monte);    border-color: var(--monte);    color: #fff; }
.pasa.falto:has(input:checked)  { background: var(--ladrillo); border-color: var(--ladrillo); color: #fff; }
.pasa.limpio:has(input:checked) { background: var(--papel-hondo); color: var(--tinta); }

.lista { display: flex; margin: 0; }

/* ---------------------------------------------------------------------
   El calendario del semestre
   Dieciséis casillas, una por semana, calculadas de la fecha de inicio.
   Las que ya tienen reunión se llenan; las demás son el trabajo que falta.
   --------------------------------------------------------------------- */
.semanas {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(min(112px, 100%), 1fr));
  margin-top: 14px;
}

.sem {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel-hondo);
  color: var(--tinta-mute);
  min-width: 0;
}

.sem b { font-family: var(--display); font-size: 13px; }
.sem .cuando { font-size: 10.5px; line-height: 1.3; }

.sem.hecha {
  background: var(--monte-claro);
  border-color: #b6dcca;
  color: var(--monte);
}

/* ---------------------------------------------------------------------
   El bloque de la nota del semestre
   El promedio va AL LADO de las casillas y en gris, nunca dentro: es un
   insumo para el docente, no la nota. Precargarlo sería ponerla solo.
   --------------------------------------------------------------------- */
.nota-sem {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel-alto);
  padding: 18px;
  margin-bottom: 14px;
}

.nota-sem > h4 { margin-bottom: 4px; }

.rendimiento {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--tinta-dim);
  background: var(--papel-hondo);
  border-radius: var(--radio);
  padding: 10px 13px;
  margin: 10px 0 16px;
}

.rendimiento b { color: var(--tinta); font-size: 14px; }

/* La segunda fila de un estudiante: la nota que el panel sugiere.

   Va debajo del rendimiento y se distingue de él a propósito. Arriba se
   cuentan HECHOS —cuántas reuniones hubo, a cuántas fue—; aquí se propone un
   número que nadie ha decidido todavía. Mismo formato para que se lean
   seguidas, pero sin fondo y con el borde de trazos, que es como se dibuja lo
   que está a medio hacer. Un fondo sólido las igualaría, y una sugerencia con
   el mismo peso visual que un hecho termina copiándose sin pensarla. */
.rendimiento.sugerencia {
  background: transparent;
  border: 1px dashed var(--linea-fuerte);
  margin-top: -8px;
  gap: 14px;
}

.rendimiento.sugerencia > span:first-child {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 10.5px;
}

/* El número que se propone, al final de la fila y separado del resto: es la
   conclusión, no un dato más de la lista. */
.rendimiento .mandan { margin-left: auto; color: var(--tinta); }
.rendimiento .mandan b { font-size: 17px; color: var(--tinte); margin-left: 6px; }
.rendimiento .btn { padding: 5px 11px; font-size: 11.5px; }

@media (max-width: 620px) {
  .rendimiento .mandan { margin-left: 0; }
}

/* ---------------------------------------------------------------------
   La nota acumulada, arriba en el resumen del proyecto

   Una fila por estudiante: el nombre y el promedio que lleva. Va separada de la
   ficha de arriba con un filete, porque es de otra naturaleza: la ficha son
   datos del proyecto y esto es cómo va cada persona.
   --------------------------------------------------------------------- */
.acumulados {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dotted var(--linea-fuerte);
  display: grid;
  gap: 8px;
}

.acum {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
}

.acum.ido { opacity: 0.55; }
.acum .quien { flex: 1 1 200px; min-width: 0; }
.acum .total { display: flex; gap: 8px; align-items: baseline; }

.acum .total b {
  font-family: var(--display);
  font-size: 20px;
  line-height: 1;
  color: var(--tinte);
}

@media (max-width: 620px) {
  .acum .quien { flex-basis: 100%; }
}

.nota-final {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  color: var(--tinte);
  line-height: 1;
}

/* ---------------------------------------------------------------------
   Tabla del semillero (la vista de lectura de todo el programa)
   --------------------------------------------------------------------- */
.tabla-envoltura { overflow-x: auto; margin-top: 18px; }

table.tabla {
  width: 100%;
  border-collapse: collapse;
  background: var(--papel-alto);
  font-size: 13.5px;
  min-width: 720px;
}

table.tabla th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-mute);
  text-align: left;
  padding: 11px 12px;
  border-bottom: 2px solid var(--linea-fuerte);
  white-space: nowrap;
}

table.tabla td {
  padding: 11px 12px;
  border-bottom: 1px dotted var(--linea-fuerte);
  vertical-align: top;
}

/* ── Una línea por celda, y lo que no quepa con puntos suspensivos ──

   Las columnas se reparten con `fixed` y no según lo que traiga cada fila.
   Así la tabla se ve igual con un proyecto que con veinte, y cambiar de
   semestre no la reordena entera: sin esto, un título largo se lleva media
   pantalla y empuja al director contra el borde.

   Nada envuelve. Una fila que crece a tres renglones porque un nombre es
   largo desalinea todo lo que tiene al lado, y estas tablas son para barrer
   con la vista —"¿de quién es este proyecto?"—, no para leerlas despacio.

   Lo truncado no se pierde: cada celda lleva el texto completo en su
   `title`, que es lo que sale al dejar el puntero encima. */
table.tabla { table-layout: fixed; }

table.tabla td,
table.tabla td > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dos integrantes en una celda van uno debajo del otro, cada uno en su
   renglón y de alto fijo: así una fila de dos mide exactamente el doble que
   una de uno, y las columnas de al lado siguen cuadrando en vez de quedar
   flotando a media altura. */
table.tabla td > div { line-height: 1.6; }

/* Los chips no se truncan por dentro: o cabe entero o no cabe. Un
   "Sustentación de anteproyect…" no se lee mejor que el chip completo, y con
   `inline-block` dentro de una celda que ya trunca no hace falta. */
table.tabla td .chip { max-width: 100%; }

/* La celda que lleva un campo no recorta: el borde de foco se dibuja por fuera
   del control, y recortarlo dejaría el campo activo sin señal de estarlo. */
table.tabla td:has(input, select, textarea, button) { overflow: visible; }

/* La excepción: las tablas de referencia que enseñan las columnas de la hoja
   —quince rótulos, uno por columna— no se reparten a partes iguales, porque a
   cuarenta píxeles cada una no se lee ninguna. Esas van al ancho de su
   contenido y se arrastran de lado, que es para lo que están en un desplegable. */
table.tabla.auto { table-layout: auto; }
table.tabla.auto td { white-space: normal; overflow: visible; }

/* Una tabla de dos o tres columnas no necesita los 720 px de ancho mínimo
   que pide la del panel: cabe en cualquier pantalla y así se lee sin
   arrastrarla de lado. */
table.tabla.llana { min-width: 0; }
table.tabla.llana td:last-child, table.tabla.llana th:last-child { width: 34%; }

table.tabla tr:last-child td { border-bottom: 0; }
table.tabla tbody tr:hover { background: var(--papel-hondo); }
table.tabla a { text-decoration: none; font-weight: 600; }
table.tabla a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   Pie
   --------------------------------------------------------------------- */
body:has(> .sam-foot) { display: flex; flex-direction: column; min-height: 100vh; }
/* El width:100% no sobra. Sin él, el main —como hijo de un flex en columna—
   se estira hasta el max-content de lo que lleve dentro, y una tabla con
   min-width de 720 px se lleva la página entera de lado en el celular: la
   envoltura con overflow-x deja de contener nada porque el ancho que tiene
   que respetar es el que ella misma acaba de inflar. Con un ancho definido
   la tabla vuelve a desplazarse dentro de su caja y la página no. */
body:has(> .sam-foot) > main { flex: 1 0 auto; min-width: 0; width: 100%; }

.sam-foot {
  border-top: 1px solid var(--linea-fuerte);
  background: var(--papel-alto);
  padding: 26px 0;
  margin-top: auto;
  font-size: 13px;
}

.sam-foot-in {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}

.sam-foot strong { display: block; font-family: var(--display); color: var(--tinta); }
.sam-foot span { display: block; color: var(--tinta-mute); }
.sam-foot a { color: var(--tinta-dim); }
.sam-foot .der { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }

.foot-acceso { color: var(--tinta-mute); text-decoration: none; font-size: 12.5px; }
.foot-acceso:hover { color: var(--tinte); }

/* ---------------------------------------------------------------------
   Celular
   La barra de arriba se queda con la marca sola y el menú baja al pie de
   la pantalla, al alcance del pulgar. Mismo marcado, otro sitio: no hay
   dos menús que mantener sincronizados.
   --------------------------------------------------------------------- */
@media (max-width: 720px) {
  .pasos, .pasos.tres { grid-template-columns: 1fr; }
  .hero { padding-top: 34px; }

  .sam-nav.tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    z-index: 30;
    background: var(--papel-alto);
    border-top: 1px solid var(--linea-fuerte);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    gap: 2px;
  }

  .sam-nav.tabs a {
    flex: 1;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
    font-size: 11px;
    padding: 7px 4px;
  }

  .sam-nav.tabs .ic { display: block; width: 18px; height: 18px; }

  /* Sitio para la barra de abajo, para que no tape el último botón. */
  body:has(.sam-nav.tabs) .sam { padding-bottom: 96px; }

  .marca { align-items: flex-start; }
  .ficha .f { flex-direction: column; gap: 3px; }
  .ficha .f .k { flex: none; max-width: none; }

  /* En una tarjeta de 290 px el chip y el título no caben en el mismo
     renglón sin dejar al título en cuatro palabras. Se bajan a renglones
     propios —de alto fijo los dos, que es de lo que se trata— en vez de
     seguir apretando. */
  .tp-cab { flex-direction: column; gap: 8px; }
  .tp-cab .chip { max-width: 100%; }
}

@media print {
  .sam-top, .sam-nav, .sam-foot, .btn, .reg-abrir { display: none !important; }
  body { background: #fff; }
  .reg-mas { display: block !important; }
}