/* Taller de modelado. Universidad de Cartagena - MinTIC
   ----------------------------------------------------------------------
   Dos identidades visuales conviven a proposito y no se mezclan nunca:

   - Calidad (naranja): un dato mal escrito. Se ve mirando una columna.
   - Aptitud (azul):    una estructura que impide usar el archivo, aunque
                        cada dato sea correcto.

   Son dos preguntas distintas y el taller entero depende de que el
   participante no las confunda. El color hace ese trabajo sin explicaciones.

   La mitad de la sala entra desde el celular. Todo se diseña primero para esa
   pantalla: una sola columna, objetivos tactiles de 44 px y sin desplazamiento
   horizontal en ninguna vista. */

:root {
  --naranja: #FC6E01;
  --naranja-suave: #FFF1E4;
  --naranja-borde: #FFD5B0;

  --azul: #1F4E79;
  --azul-claro: #2E75B6;
  --azul-suave: #EDF3F9;
  --azul-borde: #C7DBEE;

  --tinta: #22303C;
  --tinta-media: #55677A;
  --tinta-suave: #8296A8;
  --linea: #DDE5EC;
  --fondo: #F6F8FA;
  --papel: #FFFFFF;

  --verde: #1E7F4F;
  --verde-suave: #E4F4EB;
  --rojo: #C0392B;
  --rojo-suave: #FCEDEB;
  --ambar: #B7791F;
  --ambar-suave: #FFF6E3;

  --radio: 12px;
  --sombra: 0 1px 2px rgba(34, 48, 60, .06), 0 8px 24px rgba(34, 48, 60, .06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 650; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
a { color: var(--azul); }

.sutil { color: var(--tinta-media); font-size: .875rem; }
.diminuto { color: var(--tinta-suave); font-size: .78rem; }
.centrado { text-align: center; }
.oculto { display: none !important; }
.numero { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- encabezado */
.marca {
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  padding: .55rem 1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  position: sticky;
  top: 0;
  z-index: 40;
}
.marca .escudo {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--azul); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .72rem; letter-spacing: .3px; flex: 0 0 auto;
}
.marca .titulos { min-width: 0; flex: 1; }
.marca .titulos b { display: block; font-size: .92rem; line-height: 1.2; }
.marca .titulos span { display: block; font-size: .7rem; color: var(--tinta-suave); }
.marca .credencial {
  font-size: .7rem; text-align: right; color: var(--tinta-media);
  flex: 0 0 auto; line-height: 1.3;
}
.marca .credencial b {
  display: block; font-size: .95rem; letter-spacing: 1px;
  color: var(--azul); font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ contenido */
.lienzo {
  max-width: 700px;
  margin: 0 auto;
  padding: 1rem 1rem 6.5rem;
}
.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.1rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra);
}
.tarjeta.sin-relleno { padding: 0; overflow: hidden; }

.paso-cabeza { margin-bottom: 1rem; }
.paso-cabeza .indice {
  display: inline-block;
  background: var(--azul-suave); color: var(--azul);
  border-radius: 999px; padding: .12rem .6rem;
  font-size: .72rem; font-weight: 650; letter-spacing: .3px;
  margin-bottom: .4rem;
}
.paso-cabeza h1 { margin-bottom: .2rem; }

/* ---------------------------------------------------------------- botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .45rem;
  min-height: 46px; padding: .6rem 1.1rem;
  border: 1px solid var(--linea); border-radius: 10px;
  background: var(--papel); color: var(--tinta);
  font-family: inherit; font-size: .95rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.boton:hover { background: var(--fondo); }
.boton:disabled { opacity: .5; cursor: default; }
.boton.principal { background: var(--azul); border-color: var(--azul); color: #fff; }
.boton.principal:hover { background: #17405f; }
.boton.acento { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.boton.acento:hover { background: #e26200; }
.boton.ancho { width: 100%; }
.boton.grande { min-height: 58px; font-size: 1.05rem; }
.boton.peligro { border-color: var(--rojo); color: var(--rojo); }
.boton.peligro:hover { background: var(--rojo-suave); }

.botonera { display: flex; flex-wrap: wrap; gap: .5rem; }
.botonera .boton { flex: 1 1 auto; }

/* ---------------------------------------------------------------- campos */
.campo { margin-bottom: .9rem; }
.campo label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.campo input, .campo textarea, .campo select {
  width: 100%; min-height: 46px;
  padding: .6rem .75rem;
  border: 1px solid var(--linea); border-radius: 10px;
  font-family: inherit; font-size: 1rem; color: var(--tinta);
  background: var(--papel);
}
.campo textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: 2px solid var(--azul-claro); outline-offset: 1px; border-color: transparent;
}
.contador-texto { text-align: right; font-size: .78rem; color: var(--tinta-suave); }

/* -------------------------------------------------------------- catalogo */
/* Cada lista de verificacion lleva su color y no lo cambia en toda la app. */
.lista-items { list-style: none; margin: 0; padding: 0; }
.item {
  border: 1px solid var(--linea); border-radius: 10px;
  margin-bottom: .55rem; overflow: hidden; background: var(--papel);
}
.item .cabeza {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .75rem .85rem; cursor: pointer; min-height: 46px;
}
.item .cabeza input[type=checkbox] {
  width: 22px; height: 22px; margin: .15rem 0 0; flex: 0 0 auto; cursor: pointer;
  accent-color: var(--naranja);
}
.item .cabeza .texto { flex: 1; min-width: 0; }
.item .cabeza .texto b { display: block; font-weight: 600; font-size: .95rem; }
.item .cabeza .texto .ejemplo {
  display: block; font-size: .82rem; color: var(--tinta-media); margin-top: .15rem;
}
.item.marcado { border-color: var(--naranja-borde); background: var(--naranja-suave); }

.calidad .item.marcado { border-color: var(--naranja-borde); background: var(--naranja-suave); }
.calidad .item .cabeza input[type=checkbox] { accent-color: var(--naranja); }
.aptitud .item.marcado { border-color: var(--azul-borde); background: var(--azul-suave); }
.aptitud .item .cabeza input[type=checkbox] { accent-color: var(--azul-claro); }

.confianza {
  display: flex; gap: .4rem; padding: 0 .85rem .75rem 2.9rem; flex-wrap: wrap;
}
.confianza button {
  flex: 1 1 auto; min-height: 40px; padding: .35rem .5rem;
  border: 1px solid var(--linea); border-radius: 8px;
  background: var(--papel); font-family: inherit; font-size: .82rem;
  cursor: pointer; color: var(--tinta-media);
}
.confianza button[aria-pressed="true"] {
  background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600;
}

.rotulo-catalogo {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px;
  margin-bottom: .5rem;
}
.rotulo-catalogo.calidad { background: var(--naranja-suave); color: #9a4300; }
.rotulo-catalogo.aptitud { background: var(--azul-suave); color: var(--azul); }

/* ----------------------------------------------------------- resultados */
.barra-item { margin-bottom: .7rem; }
.barra-item .fila {
  display: flex; justify-content: space-between; gap: .6rem;
  font-size: .86rem; margin-bottom: .25rem;
}
.barra-item .fila .valor { font-weight: 650; font-variant-numeric: tabular-nums; }
.canal { height: 10px; background: var(--linea); border-radius: 6px; overflow: hidden; }
.canal span { display: block; height: 100%; border-radius: 6px; background: var(--azul-claro); }
.barra-item.real .canal span { background: var(--verde); }
.barra-item.senuelo .canal span { background: var(--rojo); }
.etiqueta-senuelo {
  font-size: .68rem; font-weight: 700; color: var(--rojo);
  text-transform: uppercase; letter-spacing: .4px;
}

.estado-regla {
  display: inline-block; font-size: .7rem; font-weight: 700;
  padding: .12rem .5rem; border-radius: 999px; letter-spacing: .3px;
}
.estado-CORREGIDO { background: var(--verde-suave); color: var(--verde); }
.estado-SIN_CORREGIR { background: var(--ambar-suave); color: var(--ambar); }
.estado-DANADO { background: var(--rojo-suave); color: var(--rojo); }

.regla { border-bottom: 1px solid var(--linea); padding: .7rem 0; }
.regla:last-child { border-bottom: 0; }
.regla .fila { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.regla .fila b { font-size: .92rem; }
.regla .detalle { font-size: .82rem; color: var(--tinta-media); margin-top: .2rem; }

/* --------------------------------------------------------------- cifras */
.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.cifra {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 10px; padding: .7rem .8rem;
}
.cifra .valor { font-size: 1.55rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifra .etiqueta { font-size: .74rem; color: var(--tinta-media); }
.cifra.naranja .valor { color: var(--naranja); }
.cifra.azul .valor { color: var(--azul); }
.cifra.verde .valor { color: var(--verde); }
.cifra.rojo .valor { color: var(--rojo); }

/* --------------------------------------------------------------- avisos */
.aviso {
  border-left: 3px solid var(--azul-claro); background: var(--azul-suave);
  padding: .7rem .85rem; border-radius: 0 8px 8px 0; margin-bottom: 1rem;
  font-size: .9rem;
}
.aviso.error { border-color: var(--rojo); background: var(--rojo-suave); color: #8d2417; }
.aviso.bien { border-color: var(--verde); background: var(--verde-suave); color: #14603a; }
.aviso.atencion { border-color: var(--ambar); background: var(--ambar-suave); color: #8a5a00; }

.espera {
  text-align: center; padding: 2.5rem 1rem; color: var(--tinta-media);
}
.espera .punto {
  width: 10px; height: 10px; border-radius: 50%; background: var(--naranja);
  display: inline-block; margin: 0 3px; animation: latir 1.4s infinite;
}
.espera .punto:nth-child(2) { animation-delay: .2s; }
.espera .punto:nth-child(3) { animation-delay: .4s; }
@keyframes latir { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ------------------------------------------------------------ barra pie */
.barra-pie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--papel); border-top: 1px solid var(--linea);
  padding: .5rem .7rem calc(.5rem + env(safe-area-inset-bottom));
  display: flex; gap: .4rem;
}
.barra-pie button {
  flex: 1; min-height: 46px; border-radius: 10px;
  border: 1px solid var(--linea); background: var(--papel);
  font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--tinta-media);
  cursor: pointer; padding: .3rem;
}
.barra-pie button.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.barra-pie button.ayuda.activo { background: var(--naranja); border-color: var(--naranja); }

/* --------------------------------------------------------------- panel */
.panel-lateral {
  position: fixed; inset: 0; z-index: 60; background: rgba(34, 48, 60, .45);
  display: flex; justify-content: flex-end;
}
.panel-lateral .hoja {
  width: min(420px, 92vw); background: var(--papel); height: 100%;
  overflow-y: auto; padding: 1rem 1rem 2rem;
}
.ruta-paso {
  display: flex; gap: .7rem; padding: .5rem 0;
  border-bottom: 1px solid var(--linea); font-size: .88rem;
}
.ruta-paso .n {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--linea); color: var(--tinta-media);
  display: flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 700;
}
.ruta-paso.cumplido { color: var(--tinta-suave); }
.ruta-paso.cumplido .n { background: var(--verde-suave); color: var(--verde); }
.ruta-paso.actual { font-weight: 650; }
.ruta-paso.actual .n { background: var(--naranja); color: #fff; }

/* --------------------------------------------------------------- tablas */
.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.datos { border-collapse: collapse; font-size: .8rem; min-width: 100%; }
table.datos th, table.datos td {
  border: 1px solid var(--linea); padding: .35rem .5rem;
  text-align: left; white-space: nowrap;
}
table.datos thead th { background: var(--azul-suave); position: sticky; top: 0; font-weight: 650; }
table.datos tbody tr:nth-child(even) { background: #FAFCFE; }
table.datos td.preambulo { background: var(--ambar-suave); font-style: italic; color: #8a5a00; }

/* -------------------------------------------------------------- bloques */
.bloque {
  border: 1px solid var(--linea); border-radius: 10px;
  margin-bottom: .7rem; overflow: hidden;
}
.bloque .titulo {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  background: var(--azul-suave); padding: .55rem .8rem;
  font-size: .86rem; font-weight: 650; color: var(--azul);
}
.bloque .adopcion { font-size: .74rem; font-weight: 600; color: var(--tinta-media); }
.bloque pre {
  margin: 0; padding: .8rem; font-size: .82rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  background: #FBFCFD;
}
.bloque .explica {
  padding: .55rem .8rem; font-size: .8rem; color: var(--tinta-media);
  border-top: 1px solid var(--linea); background: var(--papel);
}
.bloque .pie { padding: .5rem .8rem; border-top: 1px solid var(--linea); }

/* ---------------------------------------------------------------- podio */
.podio { list-style: none; margin: 0; padding: 0; }
.podio li {
  display: flex; align-items: center; gap: .7rem;
  padding: .45rem 0; border-bottom: 1px solid var(--linea); font-size: .92rem;
}
.podio li:last-child { border-bottom: 0; }
.podio .puesto {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--azul-suave); color: var(--azul);
  display: flex; align-items: center; justify-content: center;
  font-size: .76rem; font-weight: 700;
}
.podio li:nth-child(1) .puesto { background: var(--naranja); color: #fff; }
.podio .nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podio .puntos { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------- pantallas grandes */
@media (min-width: 720px) {
  h1 { font-size: 1.6rem; }
  .cifras { grid-template-columns: repeat(4, 1fr); }
  .lienzo { padding: 1.5rem 1.5rem 6.5rem; }
}

/* ------------------------------------------------------------- ingreso */
.cuerpo-acceso {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1.2rem;
  background: linear-gradient(135deg, #173d5e, #1F4E79 55%, #2E75B6);
}
.acceso {
  background: var(--papel); border-radius: 16px; max-width: 420px; width: 100%;
  padding: 1.8rem 1.5rem; box-shadow: 0 26px 70px rgba(0, 0, 0, .35);
}
.acceso .escudo {
  width: 54px; height: 54px; border-radius: 12px; background: var(--azul);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; margin-bottom: 1rem; font-size: .85rem;
}

/* ------------------------------------------------------ sala de espera */
.nubes-nombres { display: flex; flex-wrap: wrap; gap: .4rem; }
.pastilla {
  background: var(--azul-suave); color: var(--azul);
  border-radius: 999px; padding: .25rem .7rem; font-size: .85rem;
}
.pastilla.propia { background: var(--naranja); color: #fff; font-weight: 650; }

/* Acceso discreto para quien conduce el taller. No compite con el registro,
   pero evita tener que conocer la direccion de memoria. */
.acceso-docente {
  text-align: center; margin: 1.5rem 0 .5rem;
  padding-top: 1.2rem; border-top: 1px solid var(--linea);
}
.acceso-docente a {
  color: var(--tinta-suave); font-size: .82rem; text-decoration: none;
  display: inline-block; min-height: 44px; line-height: 44px; padding: 0 1rem;
}
.acceso-docente a:hover { color: var(--azul); text-decoration: underline; }

/* ------------------------------------------------- listas mas legibles
   La sala tiene poca familiaridad con datos. Las listas se disenan para que
   cada decision quede a la vista: que hay que hacer, cuanto llevo, y que me
   cuesta cada opcion. */

.progreso-taller {
  height: 4px; background: var(--linea); border-radius: 3px;
  margin-bottom: .7rem; overflow: hidden;
}
.progreso-taller span {
  display: block; height: 100%; background: var(--naranja); border-radius: 3px;
  transition: width .4s ease;
}

.que-hacer {
  display: flex; flex-direction: column; gap: .15rem;
  background: var(--azul-suave); border-left: 3px solid var(--azul-claro);
  padding: .6rem .8rem; border-radius: 0 8px 8px 0; margin-top: .7rem;
  font-size: .92rem;
}
.etiqueta-hacer {
  font-size: .68rem; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--azul);
}

.marcador-lista {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem;
}
.marcador-lista .cuenta { font-size: .8rem; color: var(--tinta-media); }
.marcador-lista .cuenta b { color: var(--tinta); font-variant-numeric: tabular-nums; }

.aviso-suave {
  background: var(--ambar-suave); color: #7a5000; border-radius: 8px;
  padding: .55rem .75rem; font-size: .85rem; margin-bottom: .8rem;
}

/* La casilla real queda oculta y se dibuja una grande y visible: en un movil,
   un cuadro de 22 px es dificil de acertar con el pulgar. */
.item .cabeza .casilla-real {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.item .cabeza .casilla {
  width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto;
  border: 2px solid #C3D0DC; background: var(--papel); margin-top: .1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.item.marcado .cabeza .casilla { background: var(--naranja); border-color: var(--naranja); }
.item.marcado .cabeza .casilla::after {
  content: ""; width: 7px; height: 12px; margin-top: -3px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

.confianza { flex-direction: column; align-items: stretch; gap: .35rem; }
.pregunta-seguridad {
  font-size: .8rem; font-weight: 600; color: var(--tinta-media); margin-bottom: .1rem;
}
.confianza button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  text-align: left; min-height: 44px; padding: .35rem .7rem;
}
.confianza button b { font-size: .88rem; font-weight: 600; }
.confianza button span { font-size: .72rem; opacity: .75; }
.confianza button[aria-pressed="true"] span { opacity: .9; }

/* ---------------------------------------------------------- requisitos */
.lista-requisitos { list-style: none; margin: 0; padding: 0; }
.requisito {
  border: 1px solid var(--linea); border-radius: 10px;
  margin-bottom: .55rem; padding: .75rem .85rem; background: var(--papel);
}
.requisito.respondido { border-color: var(--azul-borde); background: var(--azul-suave); }
.req-texto { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .55rem; }
.req-numero {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  background: var(--azul); color: #fff; font-size: .74rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.req-texto b { display: block; font-size: .95rem; font-weight: 600; }
.req-texto .ejemplo {
  display: block; font-size: .82rem; color: var(--tinta-media); margin-top: .15rem;
}
.req-opciones { display: flex; gap: .4rem; padding-left: 2.4rem; }
.req-opciones.ancha { padding-left: 0; }
.req-opciones button {
  flex: 1; min-height: 44px; border: 1px solid var(--linea); border-radius: 8px;
  background: var(--papel); font-family: inherit; font-size: .88rem;
  font-weight: 600; color: var(--tinta-media); cursor: pointer;
}
.req-opciones button[aria-pressed="true"] {
  background: var(--azul); border-color: var(--azul); color: #fff;
}

.indice-caja {
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--linea);
  display: flex; gap: .9rem; align-items: center;
}
.indice-valor {
  flex: 0 0 auto; text-align: center; background: var(--azul-suave);
  border-radius: 10px; padding: .5rem .8rem; min-width: 80px;
}
.indice-valor b {
  display: block; font-size: 1.7rem; line-height: 1; color: var(--azul);
  font-variant-numeric: tabular-nums;
}
.indice-valor span { font-size: .7rem; color: var(--tinta-media); }
.indice-texto b { display: block; font-size: .92rem; }
.indice-texto .sutil { display: block; font-size: .8rem; margin-top: .15rem; }

/* -------------------------------------------------------- pasos guiados */
.paso-guia { display: flex; gap: .9rem; align-items: flex-start; }
.paso-guia > div:last-child { flex: 1; min-width: 0; }
.numero-paso {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  background: var(--naranja); color: #fff; font-weight: 700; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.paso-guia h3 { margin-bottom: .2rem; }

.detalle-alterno summary {
  cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--tinta-media);
  min-height: 44px; display: flex; align-items: center;
}
.detalle-alterno[open] summary { margin-bottom: .5rem; }

/* El boton de envio queda al alcance sin tener que buscarlo al final. */
.barra-envio { position: sticky; bottom: 4.2rem; z-index: 20; }
.barra-envio .boton { box-shadow: 0 6px 20px rgba(31, 78, 121, .22); }

@media (min-width: 720px) {
  .confianza { flex-direction: row; align-items: stretch; }
  .confianza button { flex: 1; }
  .pregunta-seguridad { display: none; }
}

/* ------------------------------------------------------------- repaso
   Cada error con su ejemplo y su explicacion, y cuanta gente lo vio. */
.repaso {
  background: var(--papel); border: 1px solid var(--linea);
  border-left: 4px solid var(--naranja); border-radius: 10px;
  padding: .9rem 1rem; margin-bottom: .8rem;
}
.repaso.es-senuelo { border-left-color: var(--tinta-suave); }
.repaso-cabeza {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem;
}
.repaso-cabeza b { font-size: .98rem; flex: 1; min-width: 60%; }
.marca-mia {
  font-size: .7rem; font-weight: 700; padding: .15rem .55rem;
  border-radius: 999px; white-space: nowrap;
}
.marca-mia.bien { background: var(--verde-suave); color: var(--verde); }
.marca-mia.mal { background: var(--ambar-suave); color: var(--ambar); }
.repaso-bloque { margin-bottom: .55rem; }
.repaso-bloque p { margin: 0; font-size: .88rem; }
.rotulo-bloque {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--tinta-suave); margin-bottom: .1rem;
}
.repaso-sala { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--linea); }
.repaso-sala .fila {
  display: flex; justify-content: space-between; font-size: .82rem;
  color: var(--tinta-media); margin-bottom: .25rem;
}
.repaso-sala .valor { font-weight: 700; color: var(--tinta); }

/* ------------------------------------------------- palabras muy largas
   Los nombres de columna del archivo llegan a 49 caracteres sin un solo
   espacio, y en una pantalla de 375 px no caben ni parten solos. Sin esto
   el texto se sale de su tarjeta. */
.ejemplo, .repaso-bloque p, .req-texto .ejemplo, .bloque pre, .prompt-caja pre,
.regla .detalle, .item .cabeza .texto, .indice-texto .sutil {
  overflow-wrap: anywhere;
  word-break: normal;
}