/* Taller de modelado, parte 2. Universidad de Cartagena - MinTIC
   ----------------------------------------------------------------------
   Hereda la hoja del taller 1 sin retocar los colores ni las medidas: quien
   estuvo en la primera jornada tiene que reconocer la casa al entrar.

   Lo que cambia es lo que significa cada color. Aqui conviven dos familias
   que no se mezclan nunca:

   - Caso A, agrupar (azul):      no hay respuesta correcta, se construyen grupos.
   - Caso B, anticipar (naranja): hay una columna con la respuesta y se predice.

   Y un tercer color, el verde, marca los cuatro momentos en que decide una
   persona y no el metodo. Son los unicos puntos del taller donde la pantalla
   no tiene nada que sugerir.

   La mitad de la sala entra desde el celular. Todo se disena 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); }

/* ----------------------------------------------------------- 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;
}

/* --------------------------------------------------------------- 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; }

/* ---------------------------------------------------------------- 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;
}

/* -------------------------------------------------------- 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; }
}

/* ------------------------------------------------- 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;
}


/* ==================================================================
   Piezas propias de la parte 2
   ================================================================== */

/* --------------------------------------------------------- familias */
/* El rotulo dice de que caso es cada hoja antes de leer una sola linea. */
.rotulo-caso {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px;
  margin-bottom: .5rem;
}
.rotulo-caso.agrupar { background: var(--azul-suave); color: var(--azul); }
.rotulo-caso.anticipar { background: var(--naranja-suave); color: #9a4300; }
.rotulo-caso.decidir { background: var(--verde-suave); color: var(--verde); }

/* ----------------------------------------------------------- prompts */
.prompt-caja {
  border: 1px solid var(--linea); border-radius: 10px; overflow: hidden;
  margin-bottom: .9rem; background: var(--papel);
}
.prompt-caja .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);
}
.prompt-caja .titulo .num {
  background: var(--azul); color: #fff; border-radius: 999px;
  padding: .05rem .5rem; font-size: .72rem; flex: 0 0 auto;
}
.prompt-caja pre {
  margin: 0; padding: .85rem; font-size: .86rem; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  background: #FBFCFD; color: var(--tinta);
}
.prompt-caja .explica {
  padding: .55rem .8rem; font-size: .82rem; color: var(--tinta-media);
  border-top: 1px solid var(--linea);
}
.prompt-caja .pie { padding: .6rem .8rem; border-top: 1px solid var(--linea); }
.prompt-caja.codigo .titulo { background: var(--ambar-suave); color: #8a5a00; }
.prompt-caja.codigo .titulo .num { background: var(--ambar); }

/* ------------------------------------------------------- reportes */
.campos-reporte { display: grid; gap: .7rem; grid-template-columns: 1fr; }
.campo-reporte label {
  display: block; font-size: .82rem; font-weight: 600; margin-bottom: .25rem;
}
.campo-reporte .unidad { color: var(--tinta-suave); font-weight: 400; }
.campo-reporte input, .campo-reporte select {
  width: 100%; min-height: 46px; padding: .55rem .7rem;
  border: 1px solid var(--linea); border-radius: 10px;
  font-family: inherit; font-size: 1.05rem; color: var(--tinta);
  background: var(--papel); font-variant-numeric: tabular-nums;
}
.campo-reporte input:focus, .campo-reporte select:focus {
  outline: 2px solid var(--azul-claro); outline-offset: 1px; border-color: transparent;
}
.campo-reporte.correcto input, .campo-reporte.correcto select {
  border-color: var(--verde); background: var(--verde-suave);
}
.campo-reporte.formato input, .campo-reporte.formato select {
  border-color: var(--ambar); background: var(--ambar-suave);
}
.campo-reporte .nota { font-size: .78rem; margin-top: .2rem; color: var(--ambar); }
.intentos-restantes { font-size: .78rem; color: var(--tinta-suave); text-align: right; }

.veredicto {
  display: inline-block; font-size: .7rem; font-weight: 700;
  padding: .15rem .55rem; border-radius: 999px; letter-spacing: .3px;
}
.veredicto.correcto { background: var(--verde-suave); color: var(--verde); }
.veredicto.parcial { background: var(--ambar-suave); color: var(--ambar); }

/* ------------------------------------------------------ decisiones */
.opciones-decision { display: grid; gap: .6rem; }
.opcion-decision {
  border: 1px solid var(--linea); border-radius: 10px; background: var(--papel);
  padding: .8rem .9rem; cursor: pointer; text-align: left; width: 100%;
  font-family: inherit; color: var(--tinta); display: block;
  transition: border-color .15s, background .15s;
}
.opcion-decision:hover { background: var(--fondo); }
.opcion-decision[aria-pressed="true"] {
  border-color: var(--verde); background: var(--verde-suave);
  box-shadow: inset 0 0 0 1px var(--verde);
}
.opcion-decision .rotulo {
  display: flex; align-items: center; gap: .5rem; font-weight: 650; font-size: 1rem;
}
.opcion-decision .marca {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid #C3D0DC; display: flex; align-items: center; justify-content: center;
}
.opcion-decision[aria-pressed="true"] .marca { border-color: var(--verde); }
.opcion-decision[aria-pressed="true"] .marca::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--verde);
}
.opcion-decision .nota {
  font-size: .84rem; color: var(--tinta-media); margin-top: .3rem;
  padding-left: 1.7rem;
}
.opcion-decision .consecuencia {
  font-size: .82rem; color: var(--tinta-suave); margin-top: .25rem;
  padding-left: 1.7rem; font-style: italic;
}

.nombres-grupos { display: grid; gap: .7rem; }
.nombre-grupo label {
  display: block; font-size: .8rem; font-weight: 600; margin-bottom: .25rem;
  color: var(--azul);
}
.nombre-grupo input {
  width: 100%; min-height: 46px; padding: .55rem .7rem;
  border: 1px solid var(--linea); border-radius: 10px;
  font-family: inherit; font-size: 1rem; background: var(--papel);
}

/* ---------------------------------------------------- deslizadores */
.deslizador { margin: 1rem 0 .6rem; }
.deslizador .marcador {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; margin-bottom: .4rem;
}
.deslizador .marcador b {
  font-size: 2rem; line-height: 1; color: var(--naranja);
  font-variant-numeric: tabular-nums;
}
.deslizador .marcador span { font-size: .82rem; color: var(--tinta-media); }
.deslizador input[type=range] {
  width: 100%; height: 40px; -webkit-appearance: none; appearance: none;
  background: transparent; cursor: pointer;
}
.deslizador input[type=range]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 5px; background: var(--linea);
}
.deslizador input[type=range]::-moz-range-track {
  height: 8px; border-radius: 5px; background: var(--linea);
}
.deslizador input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; border-radius: 50%; margin-top: -11px;
  background: var(--naranja); border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(34, 48, 60, .3);
}
.deslizador input[type=range]::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--naranja); border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(34, 48, 60, .3);
}
.escala-deslizador {
  display: flex; justify-content: space-between;
  font-size: .72rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums;
}
.probados { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.probados .marca {
  font-size: .74rem; padding: .15rem .5rem; border-radius: 999px;
  background: var(--linea); color: var(--tinta-media);
  font-variant-numeric: tabular-nums;
}
.probados .marca.hecha { background: var(--verde-suave); color: var(--verde); font-weight: 650; }

/* ------------------------------------------------------ laboratorios */
.lienzo-lab {
  width: 100%; height: auto; aspect-ratio: 3 / 2; display: block;
  border: 1px solid var(--linea); border-radius: 10px; background: var(--papel);
  touch-action: manipulation;
}
.lectura-lab {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-top: .6rem;
}
.lectura-lab div {
  background: var(--fondo); border-radius: 8px; padding: .5rem .6rem;
}
.lectura-lab b {
  display: block; font-size: 1.2rem; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.lectura-lab span { font-size: .72rem; color: var(--tinta-media); }

/* ---------------------------------------------------------- graficos */
.grafico { width: 100%; height: auto; aspect-ratio: 5 / 3; display: block; }
.par-graficos { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.leyenda-grafico {
  display: flex; flex-wrap: wrap; gap: .8rem; font-size: .78rem;
  color: var(--tinta-media); margin-top: .3rem;
}
.leyenda-grafico i {
  width: 12px; height: 12px; border-radius: 3px; display: inline-block;
  margin-right: .3rem; vertical-align: -2px;
}

/* -------------------------------------------------- tabla de perfiles */
table.perfiles { border-collapse: collapse; font-size: .8rem; min-width: 100%; }
table.perfiles th, table.perfiles td {
  border: 1px solid var(--linea); padding: .4rem .55rem; text-align: right;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
table.perfiles th:first-child, table.perfiles td:first-child {
  text-align: left; font-weight: 650;
}
table.perfiles thead th { background: var(--azul-suave); color: var(--azul); font-weight: 650; }
table.perfiles td.alto { background: var(--verde-suave); color: var(--verde); font-weight: 650; }
table.perfiles td.bajo { background: var(--rojo-suave); color: var(--rojo); font-weight: 650; }

/* ------------------------------------------------------------ circulos */
.circulos { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.vinetas { list-style: none; margin: 0; padding: 0; }
.vinetas li {
  padding: .65rem 0; border-bottom: 1px solid var(--linea);
}
.vinetas li:last-child { border-bottom: 0; }
.vinetas li b { display: block; font-size: .95rem; margin-bottom: .1rem; }
.vinetas li span { font-size: .86rem; color: var(--tinta-media); }

/* --------------------------------------------------- tarjeta personal */
.tarjeta-personal {
  background: linear-gradient(135deg, #173d5e, #1F4E79 60%, #2E75B6);
  color: #fff; border-radius: 14px; padding: 1.2rem; margin-bottom: 1rem;
}
.tarjeta-personal .alias { font-size: 1.3rem; font-weight: 700; }
.tarjeta-personal .lugar { font-size: .84rem; opacity: .8; margin-bottom: .8rem; }
.tarjeta-personal .marcador { display: flex; gap: 1.2rem; align-items: baseline; }
.tarjeta-personal .marcador .puntos {
  font-size: 2.6rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tarjeta-personal .marcador .de { font-size: .9rem; opacity: .75; }
.tarjeta-personal .marcador .puesto {
  margin-left: auto; text-align: right; font-size: .8rem; opacity: .85;
}
.tarjeta-personal .marcador .puesto b { display: block; font-size: 1.7rem; }
.desglose { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; margin-top: .9rem; }
.desglose div {
  background: rgba(255, 255, 255, .12); border-radius: 8px; padding: .4rem .6rem;
}
.desglose b { display: block; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.desglose span { font-size: .7rem; opacity: .8; }

/* ------------------------------------------------------- descargas */
.descargas { display: grid; gap: .5rem; }
.descarga {
  display: flex; align-items: center; gap: .8rem; text-decoration: none;
  border: 1px solid var(--linea); border-radius: 10px; padding: .7rem .85rem;
  color: var(--tinta); background: var(--papel); min-height: 56px;
}
.descarga:hover { background: var(--fondo); }
.descarga .flecha {
  margin-left: auto; color: var(--azul); font-weight: 700; flex: 0 0 auto;
}
.descarga b { display: block; font-size: .93rem; }
.descarga span { font-size: .78rem; color: var(--tinta-media); }

/* --------------------------------------------------------- el umbral */
.medidor-umbral { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.medidor-umbral div {
  background: var(--fondo); border-radius: 8px; padding: .55rem .6rem; text-align: center;
}
.medidor-umbral b {
  display: block; font-size: 1.35rem; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.medidor-umbral span { font-size: .7rem; color: var(--tinta-media); }
.medidor-umbral .cabe { background: var(--verde-suave); }
.medidor-umbral .cabe b { color: var(--verde); }
.medidor-umbral .no-cabe { background: var(--rojo-suave); }
.medidor-umbral .no-cabe b { color: var(--rojo); }

/* ------------------------------------------------------- resultados */
.barra-resultado { margin-bottom: .8rem; }
.barra-resultado .fila {
  display: flex; justify-content: space-between; gap: .6rem;
  font-size: .88rem; margin-bottom: .25rem;
}
.barra-resultado .fila .valor { font-weight: 650; font-variant-numeric: tabular-nums; }
.barra-resultado .canal { height: 12px; background: var(--linea); border-radius: 6px; overflow: hidden; }
.barra-resultado .canal span { display: block; height: 100%; border-radius: 6px; background: var(--azul-claro); }
.barra-resultado.mia .fila { font-weight: 700; }
.barra-resultado.defendible .canal span { background: var(--verde); }

.cita {
  border-left: 3px solid var(--linea); padding: .2rem 0 .2rem .8rem;
  font-size: .88rem; color: var(--tinta-media); margin-bottom: .5rem;
}

/* ------------------------------------------------ pantallas grandes */
@media (min-width: 720px) {
  .campos-reporte { grid-template-columns: repeat(2, 1fr); }
  .par-graficos { grid-template-columns: repeat(2, 1fr); }
  .nombres-grupos { grid-template-columns: repeat(2, 1fr); }
  .lectura-lab { grid-template-columns: repeat(4, 1fr); }
  .desglose { grid-template-columns: repeat(5, 1fr); }
}