@charset "utf-8";
/* ============================================================
   modulos/profesorado.css

   Se carga después de base.css, panel.css y app.css. Solo lo que es de
   esta área: todo lo común (tarjetas, botones, campos, cifras, tablas,
   avisos, cabecera de pantalla) ya viene de ahí.

   Tres pantallas y un juego de ventanas, todas en el violeta de la academia
   (`t-claustro` y `t-docente` lo ponen en `--seccion`):

     1. El directorio del profesorado (`claustro.js`).
     2. La ficha completa de un profesor (`claustro.js`).
     3. El espacio del profesor (`docente.js`).
     4. Las herramientas que flotan: subir vídeo, programar clase, probar la
        cámara y los ingresos (`index.html` y `docente.js`).

   LA REGLA QUE ORDENA LA FICHA. Cada dato dice de dónde sale, con las tres
   etiquetas de la página del profesorado del sitio y sus mismos colores:
   turquesa lo declarado, azul lo medido, ámbar lo valorado. No es adorno: es
   lo que separa una academia de un mercadillo de estrellas.
   ============================================================ */

/* ============================================================
   0. Piezas del área
   ============================================================ */

/* El hueso del esqueleto de carga: ocupa el sitio del texto que va a llegar
   para que la pantalla no salte. El brillo lo pone `.cargando` de panel.css. */
.tk-hueso { display: block; height: .875rem; width: 45%; margin-top: var(--e-2); min-width: 0; }
.tk-hueso.largo { width: 65%; height: 1.25rem; margin-top: 0; }
.tk-hueso.entero { width: 100%; }

/* La cara del profesor. Foto recortada en círculo o, sin foto, las
   iniciales sobre el lavado de la sección: plano, sin degradado, y con el
   mismo filo de 2 px que la tarjeta que lo lleva. */
.tk-retrato {
  width: 3.5rem; height: 3.5rem; flex: none;
  border-radius: var(--r-full); border: 2px solid var(--linea);
  object-fit: cover; background: var(--papel-2);
}
.tk-retrato.sin-foto {
  display: grid; place-items: center;
  background: var(--seccion-lavado); color: var(--seccion-tinta);
  border-color: color-mix(in srgb, var(--seccion) 30%, var(--linea));
  font-family: var(--display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em;
}
.tk-retrato.grande {
  width: clamp(6rem, 4rem + 8vw, 9.5rem); height: clamp(6rem, 4rem + 8vw, 9.5rem);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
}
.tk-retrato.cargando { display: block; min-width: 0; }

/* Las estrellas. Solo aparecen cuando hay valoraciones reales detrás, y la
   media estrella es la mitad exacta del dibujo, no una estrella más clara. La
   forma es una máscara y el color, la tinta de XP: el ámbar vivo sobre papel
   blanco da 1,9:1 y la estrella vacía y la llena no se distinguían. */
.tk-estrellas { display: inline-flex; gap: 1px; vertical-align: -.125em; }
.tk-estrella,
.tk-valorar-e::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4 6.2 20.5l1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4 6.2 20.5l1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tk-estrella {
  display: inline-block; width: 1em; height: 1em;
  background: color-mix(in srgb, var(--tinta-3) 32%, transparent);
}
.tk-estrella.llena { background: var(--xp-tinta); }
/* El único degradado del área, y no es decorativo: parte la estrella en dos
   mitades exactas, llena y vacía. */
.tk-estrella.media {
  background: linear-gradient(90deg, var(--xp-tinta) 50%, color-mix(in srgb, var(--tinta-3) 32%, transparent) 50%);
}

/* La etiqueta de origen al lado del título de un bloque. */
.tk-origen { font-size: var(--p-xs); padding: .1875rem .5625rem; letter-spacing: .06em; }

/* Los chips de nivel toman el color de su escalón con `.n-a1`…`.n-c2`. */
.chip.tk-nivel { font-size: var(--t-xs); padding: .125rem .5rem; letter-spacing: .02em; }

/* Dentro de un control con `gap`, el margen que app.css pone detrás de cada
   icono sumaba el doble de aire entre el icono y su texto. */
:is(.tk-claustro, .tk-ficha, .tk-docente, .tk-herr) :is(.btn, .btn-panel, .btn-texto, .chip, .tk-cl-conmutador, li) > .tk-icono + * { margin-left: 0; }

/* ============================================================
   1. El directorio
   ============================================================ */

/* ---------- los filtros ----------
   Un bloque del panel con el buscador arriba, los cuatro desplegables en
   rejilla y los dos interruptores debajo. Son controles, no adornos: el
   rótulo pequeño encima de cada uno, como en cualquier formulario. */
.tk-cl-filtros {
  display: grid; gap: var(--e-3);
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--panel-radio);
  padding: var(--e-4); margin-bottom: var(--e-4);
}
.tk-cl-buscar { position: relative; }
.tk-cl-buscar > :is(i, svg) {
  position: absolute; left: .875rem; top: 50%; translate: 0 -50%;
  width: 1.125rem; height: 1.125rem; color: var(--tinta-3); pointer-events: none;
}
.tk-cl-buscar input { width: 100%; padding-left: 2.75rem; margin-left: 0; }

.tk-cl-selectores {
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}
.tk-cl-filtro { display: grid; gap: var(--e-1); min-width: 0; }
.tk-cl-filtro > span {
  font-size: var(--p-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-3);
}
.tk-cl-filtro select { width: 100%; min-width: 0; }

.tk-cl-conmutadores { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.tk-cl-conmutador {
  display: inline-flex; align-items: center; gap: .4375rem;
  min-height: 2.75rem; padding: 0 1rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2);
  background: var(--papel); border: 2px solid var(--linea); border-radius: var(--r-full);
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.tk-cl-conmutador svg { width: 1rem; height: 1rem; }
.tk-cl-conmutador:hover { border-color: var(--seccion); color: var(--seccion-tinta); }
/* Encendido: lavado, filo del color y la marca de verificación en lugar del
   icono. Tres señales, porque el color solo no basta para leer un estado. */
.tk-cl-conmutador[aria-pressed="true"] {
  background: var(--seccion-lavado); border-color: var(--seccion); color: var(--seccion-tinta);
}
.tk-cl-limpiar { margin-left: auto; min-height: 2.75rem; color: var(--seccion-tinta); }
.tk-cl-limpiar:hover { background: var(--seccion-lavado); }

.tk-cl-resumen {
  margin: 0 0 var(--e-3); font-size: var(--t-sm); color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}
.tk-cl-resumen:empty { display: none; }

.tk-cl-fallo { margin-top: var(--e-2); }
.tk-cl-fallo .btn-panel, .tk-docente .aviso .btn-panel { margin-top: var(--e-3); }

/* ---------- la rejilla y la tarjeta ---------- */
.tk-cl-rejilla {
  display: grid; gap: var(--e-4); align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.tk-cl-profe {
  display: flex; flex-direction: column; gap: var(--e-3);
  min-width: 0; padding: var(--e-5);
}
/* La tarjeta no es un enlace —lo que se pulsa es su botón—, así que al pasar
   por encima solo se tiñe el filo, como la tarjeta de sección de la
   plantilla. Dentro de `hover: hover` para que no se quede pegado al tocar. */
@media (hover: hover) {
  .tk-cl-profe:not(.tk-cl-esqueleto):hover { border-color: color-mix(in srgb, var(--seccion) 55%, var(--linea)); }
}
.tk-cl-cab { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.tk-cl-quien { flex: 1; min-width: 0; display: grid; gap: .1875rem; }
.tk-cl-quien h3 { font-size: var(--t-lg); line-height: 1.15; overflow-wrap: anywhere; }
.tk-cl-procede {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem;
  font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.35;
}
.tk-cl-pais { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.tk-cl-abierta { align-self: flex-start; }

.tk-cl-insignias, .tk-cl-chips { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); }
:is(.tk-cl-insignias, .tk-cl-chips) .chip { font-size: var(--t-xs); padding: .25rem .625rem; }
.tk-cl-insignias .chip svg { width: .875rem; height: .875rem; }
.tk-cl-mas { background: var(--papel-2); color: var(--tinta-2); }

.tk-cl-titular { color: var(--tinta-2); font-size: var(--t-base); line-height: 1.45; }
.tk-cl-sinficha { color: var(--tinta-3); font-size: var(--t-sm); }

/* Los datos que declara: rótulo corto a la izquierda, valor a la derecha. */
.tk-cl-datos { display: grid; gap: var(--e-2); margin: 0; }
.tk-cl-datos > div {
  display: grid; grid-template-columns: 6.75rem minmax(0, 1fr);
  gap: var(--e-3); align-items: baseline;
}
.tk-cl-datos dt {
  font-size: var(--p-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-3);
}
.tk-cl-datos dd {
  margin: 0; font-size: var(--t-sm); color: var(--tinta); line-height: 1.45;
  display: flex; flex-wrap: wrap; gap: .25rem;
}

/* Lo medido y lo valorado, al pie y tras un filete: es lo único de la
   tarjeta que no escribió el propio profesor. */
.tk-cl-medido {
  margin-top: auto; padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3);
  font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.45;
}
.tk-cl-medido .chip { font-size: var(--t-xs); padding: .1875rem .5625rem; }
.tk-cl-nota { display: inline-flex; align-items: center; gap: .375rem; }
.tk-cl-nota b { color: var(--tinta); font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-cl-nota small { color: var(--tinta-3); font-variant-numeric: tabular-nums; }

.tk-cl-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.tk-cl-acciones .btn { flex: 1 1 auto; }
.tk-cl-acciones .btn-texto { color: var(--seccion-tinta); }
.tk-cl-acciones .btn-texto:hover { background: var(--seccion-lavado); }

.tk-cl-esqueleto .tk-retrato { border: 0; }

@media (max-width: 26rem) {
  .tk-cl-profe { padding: var(--e-4); }
  .tk-cl-datos > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tk-cl-limpiar { margin-left: 0; }
}

/* ============================================================
   2. La ficha completa
   ============================================================ */
.tk-ficha-volver {
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: 2.75rem; margin-bottom: var(--e-3);
  color: var(--seccion-tinta);
}
.tk-ficha-volver:hover { background: var(--seccion-lavado); }

/* La cabecera: la cara grande a la izquierda y la cabecera de pantalla de
   siempre a su lado. El filete que separa la cabecera del cuerpo lo lleva la
   fila entera, no solo la columna del texto. */
.tk-ficha-cab {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-5); align-items: center;
  padding-bottom: var(--e-5); margin-bottom: var(--e-5);
  border-bottom: 1px solid var(--linea);
}
.tk-ficha-cab .app-cabeza { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--e-3); }
.tk-ficha-retrato { display: grid; justify-items: center; gap: var(--e-2); }
.tk-ficha-retrato small { font-size: var(--t-xs); color: var(--tinta-3); text-align: center; }
.tk-ficha-quien { min-width: 0; }
.tk-ficha-quien .tk-hueso.largo { height: 2.25rem; }
.tk-ficha-procede {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e-2) var(--e-4); margin-bottom: var(--e-3);
  font-size: var(--t-sm); color: var(--tinta-2);
}
.tk-ficha-procede li { display: inline-flex; align-items: center; gap: .375rem; }
.tk-ficha-procede svg { width: 1rem; height: 1rem; color: var(--tinta-3); }

@media (max-width: 34rem) {
  .tk-ficha-cab { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--e-4); }
  .tk-ficha-retrato { justify-items: start; }
}

.tk-ficha-video { max-width: 48rem; margin-bottom: var(--e-5); }

/* El cuerpo en dos columnas cuando hay sitio de verdad: lo que el profesor
   cuenta de sí mismo a la izquierda, lo que la plataforma ha medido a la
   derecha. Por debajo de 72rem de ventana (con la columna lateral de la
   aplicación quedan menos de 56rem de contenido) se apila. */
.tk-ficha-cuerpo { display: grid; gap: 0 var(--p-e-45); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 72rem) {
  .tk-ficha-cuerpo {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "principal lateral" "resenas lateral";
  }
  .tk-ficha-principal { grid-area: principal; }
  .tk-ficha-lateral { grid-area: lateral; }
  .tk-ficha-resenas { grid-area: resenas; }
}
.tk-ficha-principal, .tk-ficha-lateral, .tk-ficha-resenas { min-width: 0; }
.tk-cl-profe > p { margin: 0; }

.tk-ficha-bloque > header h2 { flex: 1 1 auto; }
.tk-ficha-bio { color: var(--tinta-2); line-height: 1.65; max-width: var(--medida); }

/* Filas de dato: rótulo y valor, con el filete suave del panel entre una y
   otra. En el móvil el rótulo se sube encima del valor. */
.tk-ficha-dl { margin: 0; }
.tk-ficha-dl > div {
  display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
  gap: var(--e-2) var(--e-4); align-items: baseline;
  padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linea-suave);
}
.tk-ficha-dl > div:last-child { border-bottom: 0; }
.tk-ficha-dl dt { font-weight: 600; font-size: var(--p-sm); color: var(--tinta-2); }
.tk-ficha-dl dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-2); min-width: 0; }
.tk-ficha-cifra {
  font-family: var(--display); font-size: var(--t-lg); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.tk-ficha-min { color: var(--tinta-2); font-size: var(--p-sm); }
.tk-ficha-nota { flex-basis: 100%; font-size: var(--p-sm); color: var(--tinta-3); line-height: 1.45; }
.tk-idioma small { font-size: .9em; font-weight: 500; }
@media (max-width: 34rem) {
  .tk-ficha-dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--e-1); }
}

/* Titulación: el icono dice si está comprobada, y la píldora lo dice con
   palabras. Comprobada lleva el verde de lo conseguido; declarada, la
   etiqueta neutra. */
.tk-ficha-titulos { list-style: none; }
.tk-ficha-titulos li {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: var(--e-2) var(--e-3); align-items: center;
  padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linea-suave);
}
.tk-ficha-titulos li:last-child { border-bottom: 0; }
.tk-ficha-titulo-ico {
  width: 2.25rem; height: 2.25rem; border-radius: var(--panel-radio);
  display: grid; place-items: center;
  background: var(--papel-2); color: var(--tinta-3);
}
.tk-ficha-titulo-ico.comprobada { background: var(--acierto-lavado); color: var(--acierto-tinta); }
.tk-ficha-titulo-texto { min-width: 0; }
.tk-ficha-titulo-texto b { display: block; font-weight: 600; }
.tk-ficha-titulo-texto small { display: block; font-size: var(--p-sm); color: var(--tinta-3); }
@media (max-width: 34rem) {
  .tk-ficha-titulos li { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .tk-ficha-titulos li > :is(.estado, .etiqueta) { grid-column: 2; justify-self: start; }
}

/* Lo medido: una fila por cifra, rótulo a la izquierda y número a la
   derecha. En fila horizontal los ceros de un profesor nuevo se leían como
   una tabla vacía; en columna se leen como lo que son, un recuento. */
.tk-ficha-nuevo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2);
  padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linea-suave);
  font-size: var(--p-sm); color: var(--tinta-2); line-height: 1.45;
}
.tk-ficha-nuevo .chip { font-size: var(--p-xs); padding: .125rem .5rem; }
.metricas.tk-ficha-metricas {
  display: block; margin: 0; border: 0; border-radius: 0; background: none;
}
/* Sin los filetes de sombra que panel.css pone a cada cifra de una rejilla:
   aquí van en columna y el filete suave de arriba ya las separa. Con los dos,
   entre fila y fila salía una raya doble. */
.tk-ficha-metricas .metrica {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); border: 0; border-top: 1px solid var(--linea-suave);
  box-shadow: none;
}
.tk-ficha-metricas .metrica:first-child { border-top: 0; }
.tk-ficha-metricas .metrica dd { margin: 0; color: var(--seccion-tinta); }

/* Próximas clases y cursos: filas pulsables de 56 px con su flecha. */
.tk-ficha-lista { list-style: none; }
.tk-ficha-fila {
  width: 100%; min-height: 3.5rem;
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--linea-suave); color: var(--tinta);
}
.tk-ficha-lista li:last-child .tk-ficha-fila { border-bottom: 0; }
.tk-ficha-fila:hover { background: var(--papel-2); }
.tk-ficha-fila-texto { flex: 1; min-width: 0; }
.tk-ficha-fila-texto b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.tk-ficha-fila-texto small { display: block; font-size: var(--p-sm); color: var(--tinta-3); }
.tk-ficha-fila > svg:last-child { color: var(--tinta-3); }

/* ---------- lo que dicen sus alumnos ---------- */
.tk-ficha-vacio { color: var(--tinta-2); font-size: var(--p-base); max-width: var(--medida); }
.tk-resumen-notas {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-5); align-items: center;
  padding-bottom: var(--e-4); border-bottom: 1px solid var(--linea-suave);
}
.tk-nota-grande { display: grid; justify-items: start; gap: var(--e-1); }
.tk-nota-grande b {
  font-family: var(--display); font-size: 3rem; font-weight: 600; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.tk-nota-grande .tk-estrellas { font-size: 1.125rem; }
.tk-nota-grande small { font-size: var(--p-sm); color: var(--tinta-3); }
.tk-reparto .barra-fila { grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; }
.tk-reparto .barra-fila > .nombre {
  grid-column: auto;
  display: inline-flex; align-items: center; gap: .25rem;
  font-variant-numeric: tabular-nums; color: var(--tinta-2);
}
.tk-reparto .barra-fila > .nombre .tk-estrella { width: .8125rem; height: .8125rem; }
.tk-reparto .barra-pista { --tono: var(--xp-tinta); }
@media (max-width: 30rem) {
  .tk-resumen-notas { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
}

.tk-resenas { list-style: none; }
.tk-resena { padding: var(--e-4) 0; border-bottom: 1px solid var(--linea-suave); }
.tk-resena-cab { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
.tk-resena-cab small { color: var(--tinta-3); font-size: var(--p-sm); }
.tk-resena p { margin-top: var(--e-2); color: var(--tinta-2); line-height: 1.6; }

/* El formulario de valorar: cinco estrellas de 44 px —la zona pulsable
   mínima, no el tamaño del dibujo—, la caja de texto y el botón. */
.tk-valorar {
  display: grid; gap: var(--e-3);
  margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--linea);
}
.tk-valorar-tit { font-family: var(--texto); font-size: var(--p-md); font-weight: 700; letter-spacing: 0; }
.tk-valorar-estrellas { display: flex; gap: .125rem; margin-left: -.375rem; }
.tk-valorar-e {
  width: 2.75rem; height: 2.75rem; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.tk-valorar-e::before {
  content: ""; width: 1.75rem; height: 1.75rem;
  background: color-mix(in srgb, var(--tinta-3) 35%, transparent);
  transition: background-color .12s ease;
}
.tk-valorar-e:hover::before { background: color-mix(in srgb, var(--xp-tinta) 55%, transparent); }
.tk-valorar-e.on::before { background: var(--xp-tinta); }
.tk-valorar-texto { width: 100%; min-height: 5.5rem; }
.tk-valorar-pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.tk-valorar-aviso { font-size: var(--p-sm); font-weight: 600; color: var(--acierto-tinta); }
.tk-valorar-aviso.es-fallo { color: var(--racha-tinta); }

/* ============================================================
   3. El espacio del profesor
   ============================================================ */
.tk-docente .pista { font-size: var(--p-sm); color: var(--tinta-3); line-height: 1.45; }
/* `align-content: start`: en una fila de tres campos donde uno lleva ayuda
   debajo y los otros no, la rejilla estiraba el desplegable de al lado hasta
   igualar la altura y lo dejaba diez píxeles más alto y más abajo. */
.tk-docente .campo, .tk-herr .campo { min-width: 0; align-content: start; }
/* Un desplegable se dibujaba siete píxeles más bajo que el campo de texto de
   al lado —el navegador no le da la altura de línea del texto—, y en una fila
   de dos se veía el escalón. Los dos a la misma altura. */
:is(.tk-docente, .tk-herr) .campo select { min-height: 3.375rem; }
/* El botón de «elegir archivo» venía con el biselado gris del sistema. */
:is(.tk-docente, .tk-herr) input[type="file"]::file-selector-button {
  font: inherit; font-size: var(--t-sm); font-weight: 600;
  margin-right: var(--e-3); padding: .375rem .75rem; cursor: pointer;
  color: var(--tinta); background: var(--papel-2);
  border: 1px solid var(--linea); border-radius: 6px;
}
.tk-docente .campo > label { color: var(--tinta); }

/* ---------- lo conseguido ----------
   La fila de cifras del panel dentro de su bloque: sin su propio marco, que
   ya lo pone el bloque. Cada cifra con la tinta de su familia (`.tono-*`). */
.tk-doc-impacto > header .chip { font-size: var(--p-xs); padding: .1875rem .5625rem; }
.metricas.tk-doc-metricas { margin: 0; border: 0; border-radius: 0; background: none; }
.tk-doc-metricas .metrica .pie { display: block; }
/* «Minutos vistos de tu material» parte en dos líneas y bajaba su número
   una línea respecto a los de al lado: cinco cifras que se comparan tienen
   que estar en la misma línea. Con subrejilla, el rótulo, la cifra y el pie
   de las cinco comparten las mismas tres filas. */
@supports (grid-template-rows: subgrid) {
  :is(.tk-doc-metricas, .tk-herr-metricas) .metrica { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}

/* ---------- el estado de la ficha ---------- */
.tk-doc-barra { height: .625rem; --tono: var(--seccion-tinta); }
.tk-doc-pasos { list-style: none; display: flex; flex-wrap: wrap; gap: .375rem; margin-top: var(--e-3); }

/* ---------- foto y vídeo ---------- */
.tk-doc-medio {
  display: grid; grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--e-4); align-items: center;
  padding: var(--e-4); border-bottom: 1px solid var(--linea-suave);
}
.tk-doc-medio:last-child { border-bottom: 0; }
/* El hueco vacío lleva filo discontinuo: se lee como «aquí va algo tuyo».
   Con la foto puesta el filo pasa a continuo y neutro. */
.tk-doc-medio-vista {
  width: 6rem; aspect-ratio: 1; overflow: hidden;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--seccion-lavado); color: var(--seccion-tinta);
  border: 2px dashed color-mix(in srgb, var(--seccion) 45%, var(--linea));
}
.tk-doc-medio.es-video .tk-doc-medio-vista { border-radius: var(--panel-radio); aspect-ratio: 4 / 3; }
.tk-doc-medio-vista:has(img, video) { border: 2px solid var(--linea); background: var(--papel-2); }
.tk-doc-medio-vista :is(img, video) { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-doc-medio-vista svg { width: 1.75rem; height: 1.75rem; }
.tk-doc-medio-datos { min-width: 0; }
.tk-doc-medio-datos > b { display: block; font-weight: 600; }
.tk-doc-medio-datos .pista { margin-top: .125rem; }
.tk-doc-medio-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
/* El campo de archivo va escondido dentro de su etiqueta; el anillo de foco
   lo enseña la etiqueta, que es lo que se ve. */
.tk-doc-medio-acciones label.btn-panel:focus-within { outline: 3px solid var(--marca); outline-offset: 2px; }
.tk-doc-medio-progreso { margin-top: var(--e-3); --tono: var(--seccion-tinta); }
@media (max-width: 26rem) {
  .tk-doc-medio { grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--e-3); padding: var(--e-3); }
  .tk-doc-medio-vista { width: 4.5rem; }
}

/* ---------- el formulario ---------- */
.tk-doc-rejilla {
  display: grid; gap: 0 var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

/* Casilla con su frase al lado, y la frase también se pulsa. */
.tk-doc-casilla-fila {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 2.75rem; cursor: pointer;
  font-size: var(--t-sm); font-weight: 600;
}
.tk-doc-casilla-fila input { width: 1.25rem; height: 1.25rem; flex: none; margin: 0; accent-color: var(--seccion-tinta); }

.tk-doc-grupo { border: 0; padding: 0; margin: 0 0 var(--e-5); min-width: 0; }
.tk-doc-grupo:last-child { margin-bottom: 0; }
.tk-doc-grupo legend { padding: 0; font-weight: 600; font-size: var(--t-sm); }
.tk-doc-grupo > .pista { margin-top: .125rem; }
.bloque-cuerpo > .tk-doc-casilla-fila + .tk-doc-grupo { margin-top: var(--e-4); }

/* Las opciones de un grupo, como fichas que se encienden. Por dentro son
   casillas de verdad, invisibles y a tamaño completo: se pulsan, se marcan
   con el teclado y el lector de pantalla las anuncia como casillas. */
.tk-doc-casillas { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }
.tk-doc-casilla {
  position: relative;
  display: inline-flex; align-items: center; gap: .4375rem;
  min-height: 2.75rem; padding: .375rem .9375rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2);
  background: var(--papel); border: 2px solid var(--linea); border-radius: var(--r-full);
  cursor: pointer; user-select: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.tk-doc-casilla input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.tk-doc-casilla:hover { border-color: var(--seccion); color: var(--seccion-tinta); }
.tk-doc-casilla:has(input:checked), .tk-doc-casilla.on {
  background: var(--seccion-lavado); border-color: var(--seccion); color: var(--seccion-tinta);
}
/* La marca de puesta, dibujada con dos bordes: sale de `currentColor` y se
   ve igual en los dos temas. */
.tk-doc-casilla:has(input:checked)::before, .tk-doc-casilla.on::before {
  content: ""; flex: none;
  width: .375rem; height: .6875rem; margin: -.1875rem .125rem 0 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.tk-doc-casilla:has(input:focus-visible) { outline: 3px solid var(--marca); outline-offset: 2px; }

.tk-doc-dinero { display: flex; align-items: stretch; min-width: 0; }
.tk-doc-dinero > span {
  display: grid; place-items: center; padding: 0 .75rem;
  font-size: var(--t-sm); font-weight: 700; color: var(--tinta-2);
  background: var(--papel-2); border: 2px solid var(--linea); border-right: 0;
  border-radius: var(--r-md) 0 0 var(--r-md);
}
.tk-doc-dinero input { flex: 1; min-width: 0; border-radius: 0 var(--r-md) var(--r-md) 0; }

/* Las listas que crecen: una fila por idioma, por titulación o por cosa que
   incluye el plan, con su aspa de quitar al final. */
.tk-doc-lista { display: grid; gap: var(--e-2); margin-bottom: var(--e-3); }
.tk-doc-lista:empty { display: none; }
.tk-doc-grupo .tk-doc-lista { margin-top: var(--e-2); }
.tk-doc-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-2); align-items: center; }
.tk-doc-fila :is(input, select) { width: 100%; min-width: 0; }
.tk-doc-fila-idioma { grid-template-columns: minmax(0, 1fr) minmax(5.5rem, 8.5rem) auto; }
/* Las filas de titulación miden lo mismo tengan sello o no: la píldora de
   «Comprobada» baja a su propia línea en vez de abrir una columna solo en su
   fila, que descuadraba los campos de las filas de debajo. */
.tk-doc-fila-titulo { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) 6.5rem auto; }
.tk-doc-verificada { grid-row: 2; grid-column: 1 / -1; justify-self: start; }
@media (max-width: 40rem) {
  .tk-doc-fila-titulo {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-bottom: var(--e-3); border-bottom: 1px solid var(--linea-suave);
  }
  .tk-doc-fila-titulo :is(.tk-doc-t-titulo, .tk-doc-t-entidad) { grid-column: 1 / -1; }
  .tk-doc-verificada { grid-row: 4; }
}
/* A 320 px el idioma se quedaba en «E» al lado del nivel: sube a su propia
   línea y el nivel comparte la de abajo con el aspa. */
@media (max-width: 26rem) {
  .tk-doc-fila-idioma {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-bottom: var(--e-3); border-bottom: 1px solid var(--linea-suave);
  }
  .tk-doc-i-codigo { grid-column: 1 / -1; }
}
.tk-doc-anadir svg { width: .9375rem; height: .9375rem; }
.tk-doc-reparto { margin-top: var(--e-4); }

/* ---------- guardar ---------- */
.tk-doc-guardar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4);
  margin: 0 0 var(--e-6); padding: var(--e-4);
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--panel-radio);
}
.tk-doc-aviso { font-size: var(--t-sm); font-weight: 600; color: var(--acierto-tinta); }
.tk-doc-aviso.es-fallo { color: var(--racha-tinta); }
@media (max-width: 30rem) {
  .tk-doc-guardar .btn { width: 100%; }
}

/* ---------- las herramientas ----------
   Cada acceso con el color de su sección. Los dos que CREAN algo llevan el
   icono relleno del color entero; el resto, el lavado. El filo es el mismo
   para todos: la jerarquía la marca el icono, no una sombra. */
.tk-doc-accesos {
  list-style: none; display: grid; gap: var(--e-3); padding: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.tk-doc-accesos li { min-width: 0; }
.tk-doc-acceso {
  width: 100%; height: 100%; min-height: 4.25rem;
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: var(--e-3); align-items: center;
  padding: var(--e-3); text-align: left; cursor: pointer; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--panel-radio);
  transition: background-color .15s ease, border-color .15s ease;
}
.tk-doc-acceso:hover { border-color: var(--seccion); background: color-mix(in srgb, var(--seccion) 4%, var(--papel)); }
.tk-doc-acceso-ico {
  width: 2.75rem; height: 2.75rem; border-radius: var(--panel-radio);
  display: grid; place-items: center;
  background: var(--seccion-lavado); color: var(--seccion-tinta);
}
.tk-doc-acceso.mayor { border-color: color-mix(in srgb, var(--seccion) 45%, var(--linea)); }
.tk-doc-acceso.mayor .tk-doc-acceso-ico { background: var(--seccion); color: var(--sobre-seccion); }
.tk-doc-acceso-texto { min-width: 0; }
.tk-doc-acceso-texto b { display: block; font-weight: 700; font-size: var(--t-sm); line-height: 1.3; }
.tk-doc-acceso-texto span { display: block; font-size: var(--p-sm); color: var(--tinta-3); line-height: 1.4; margin-top: .125rem; }
.tk-doc-acceso > svg:last-child { color: var(--tinta-3); }

/* ============================================================
   4. Las herramientas que flotan
   Van en `.modal .box` de app.css —lo único que lleva sombra, porque flota
   de verdad— y en violeta: la caja lleva `.s-premium`, porque cuelga del
   <body> y fuera de la vista no hereda el color de la sección.
   ============================================================ */
.modal .box.tk-herr { max-width: 36rem; }
.tk-herr-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-3); }
.tk-herr-cab .folio { margin-bottom: var(--e-1); }
.tk-herr-cab h3 { font-size: var(--t-xl); }
.tk-herr-texto { color: var(--tinta-2); font-size: var(--t-sm); margin-bottom: var(--e-4); }
.tk-herr .campo :is(input, select, textarea) { min-width: 0; }
.tk-herr-fila {
  display: grid; gap: 0 var(--e-3); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}
.tk-herr-casilla {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 2.75rem; margin-bottom: var(--e-4); cursor: pointer;
  font-size: var(--t-sm); font-weight: 600;
}
.tk-herr-casilla input { width: 1.25rem; height: 1.25rem; flex: none; margin: 0; accent-color: var(--seccion-tinta); }
.tk-herr-fila > .tk-herr-casilla { align-self: end; margin-bottom: var(--e-4); min-height: 3.125rem; }
.tk-herr-progreso {
  display: grid; gap: var(--e-2); margin-bottom: var(--e-4);
  font-size: var(--t-sm); color: var(--tinta-2); font-variant-numeric: tabular-nums;
}
.tk-herr-progreso .barra-pista { --tono: var(--seccion-tinta); }
.tk-herr .acciones { margin-top: var(--e-2); }
.tk-herr-video { margin-bottom: var(--e-3); }
.tk-herr-estado { margin-bottom: var(--e-4); font-size: var(--t-sm); font-weight: 600; color: var(--tinta-2); }
.tk-herr-estado.es-bien { color: var(--acierto-tinta); }
.tk-herr-estado.es-fallo { color: var(--racha-tinta); }
.metricas.tk-herr-metricas { margin-bottom: var(--e-4); }