/* =========================================================
   Taller de Geometría v2 · base común (congelada)
   Identidad: mesa de dibujo técnico. Fondo frío milimetrado,
   tinta azul noche, paleta semántica como único color fuerte.
   ========================================================= */

:root{
  /* superficies y tinta */
  --fondo:#eef2f7;
  --papel:#ffffff;
  --papel-2:#f5f8fc;
  --papel-3:#e8eef6;
  --tinta:#13213c;
  --tinta-2:#34435f;
  --tenue:#56627a;
  --linea:#cfd8e4;
  --linea-fuerte:#94a2b8;
  --grid-min:rgba(19,33,60,.035);
  --grid-may:rgba(19,33,60,.075);

  /* paleta semántica (fija en todo el sitio) */
  --c-base:#1f5fd6;        /* base, cateto horizontal, Δx          */
  --c-altura:#e2600b;      /* altura, cateto vertical, Δy          */
  --c-hip:#c01a8c;         /* hipotenusa, diagonal, vector, distancia */
  --c-radio:#0a8fa6;       /* radio y diámetro                      */
  --c-area:#1d9656;        /* borde de áreas                        */
  --c-area-suave:rgba(29,150,86,.17);
  --c-vol:#7244d6;         /* borde de volúmenes                    */
  --c-vol-suave:rgba(114,68,214,.16);
  --c-imagen:#a15c07;      /* imagen de una transformación (ocre)   */
  --c-imagen-suave:rgba(161,92,7,.14);
  --c-aux:#7d8aa3;         /* líneas auxiliares                     */

  /* estados */
  --ok:#17784a;
  --ok-suave:#e3f4ea;
  --mal:#b3261e;
  --mal-suave:#fbe9e7;
  --aviso:#8a5a00;
  --aviso-suave:#fff4d6;

  /* tipografía */
  --f-texto:"Space Grotesk","Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono","JetBrains Mono",Consolas,"Cascadia Mono",monospace;
  --t-cuerpo:18px;
  --t-enunciado:21px;
  --t-chico:15px;          /* mínimo absoluto del sitio: 14px */

  /* medidas */
  --radio-borde:10px;
  --sombra:0 1px 2px rgba(19,33,60,.06),0 6px 20px rgba(19,33,60,.06);
  --alto-nav:58px;
  --ancho-max:1320px;
  --boton:46px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:var(--f-texto);
  font-size:var(--t-cuerpo);
  line-height:1.55;
  color:var(--tinta);
  background-color:var(--fondo);
  background-image:
    linear-gradient(var(--grid-may) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-may) 1px,transparent 1px),
    linear-gradient(var(--grid-min) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-min) 1px,transparent 1px);
  background-size:50px 50px,50px 50px,10px 10px,10px 10px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
  display:flex;flex-direction:column;
}
main,.tg-main{flex:1}
h1,h2,h3,h4{font-family:var(--f-texto);line-height:1.2;margin:0 0 .4em;letter-spacing:-.01em}
h1{font-size:34px;font-weight:700}
h2{font-size:27px;font-weight:700}
h3{font-size:22px;font-weight:650}
h4{font-size:19px;font-weight:650}
p{margin:0 0 .75em}
a{color:var(--c-base)}
b,strong{font-weight:650}
.mono,.num{font-family:var(--f-mono);font-feature-settings:"tnum" 1}
small,.chico{font-size:var(--t-chico)}
.tenue{color:var(--tenue)}
.oculto{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--c-base);outline-offset:2px}

/* ---------- colores semánticos ----------
   c-X : color de texto (HTML) y relleno de <text> en SVG
   l-X : trazo de líneas en SVG
   r-X : región rellena en SVG (relleno suave + borde)          */
.c-base{color:var(--c-base);fill:var(--c-base)}
.c-altura{color:var(--c-altura);fill:var(--c-altura)}
.c-hip{color:var(--c-hip);fill:var(--c-hip)}
.c-radio{color:var(--c-radio);fill:var(--c-radio)}
.c-area{color:var(--c-area);fill:var(--c-area)}
.c-vol{color:var(--c-vol);fill:var(--c-vol)}
.c-imagen{color:var(--c-imagen);fill:var(--c-imagen)}
.c-tinta{color:var(--tinta);fill:var(--tinta)}
.c-tenue{color:var(--tenue);fill:var(--tenue)}
.c-ok{color:var(--ok);fill:var(--ok)}
.c-mal{color:var(--mal);fill:var(--mal)}
span.c-base,span.c-altura,span.c-hip,span.c-radio,span.c-area,span.c-vol,span.c-imagen{font-weight:650}

.tg-fig .l-base{stroke:var(--c-base)}
.tg-fig .l-altura{stroke:var(--c-altura)}
.tg-fig .l-hip{stroke:var(--c-hip)}
.tg-fig .l-radio{stroke:var(--c-radio)}
.tg-fig .l-area{stroke:var(--c-area)}
.tg-fig .l-vol{stroke:var(--c-vol)}
.tg-fig .l-imagen{stroke:var(--c-imagen)}
.tg-fig .l-tinta{stroke:var(--tinta)}
.tg-fig .l-aux{stroke:var(--c-aux);stroke-dasharray:6 5}
.tg-fig .l-ok{stroke:var(--ok)}
.tg-fig .l-mal{stroke:var(--mal)}
.tg-fig [class*="l-"]{stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tg-fig .fino{stroke-width:1.6}
.tg-fig .grueso{stroke-width:4.5}
.tg-fig .punteado{stroke-dasharray:6 5}

.tg-fig .r-area{fill:var(--c-area-suave);stroke:var(--c-area)}
.tg-fig .r-vol{fill:var(--c-vol-suave);stroke:var(--c-vol)}
.tg-fig .r-imagen{fill:var(--c-imagen-suave);stroke:var(--c-imagen)}
.tg-fig .r-tinta{fill:rgba(19,33,60,.08);stroke:var(--tinta)}
.tg-fig .r-base{fill:rgba(31,95,214,.14);stroke:var(--c-base)}
.tg-fig .r-altura{fill:rgba(226,96,11,.14);stroke:var(--c-altura)}
.tg-fig .r-hip{fill:rgba(192,26,140,.13);stroke:var(--c-hip)}
.tg-fig .r-radio{fill:rgba(10,143,166,.14);stroke:var(--c-radio)}
.tg-fig .r-agua{fill:rgba(10,143,166,.28);stroke:var(--c-radio)}
.tg-fig .r-papel{fill:#fff;stroke:var(--linea-fuerte)}
.tg-fig [class*="r-"]{stroke-width:2}

/* ---------- figuras SVG ---------- */
.tg-fig{display:block;width:100%;height:auto;overflow:visible;font-family:var(--f-mono)}
.tg-fig text{font-family:var(--f-mono);font-size:16px;fill:var(--tinta);dominant-baseline:middle}
.tg-fig text.titulo{font-family:var(--f-texto);font-weight:650;font-size:18px}
.tg-fig text.grande{font-size:22px;font-weight:600}
.tg-fig text.halo,.tg-fig .halo text{paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.tg-fig .grilla line{stroke:rgba(19,33,60,.09);stroke-width:1}
.tg-fig .grilla line.eje{stroke:var(--tinta);stroke-width:1.8}
.tg-fig .grilla text{fill:var(--tenue);font-size:14px}
.tg-fig .asa{cursor:grab;fill:#fff;stroke:var(--tinta);stroke-width:2.5}
.tg-fig .asa:hover,.tg-fig .asa.activa{fill:var(--c-base);stroke:var(--c-base)}
.tg-fig .asa-zona{fill:transparent;stroke:none;cursor:grab}
.tg-fig .arrastrando,.tg-fig .arrastrando *{cursor:grabbing}
.tg-fig [data-paso]{opacity:0;transition:opacity .45s ease}
.tg-fig [data-paso].tg-visible{opacity:1}
.tg-fig .tg-resalta{animation:tg-resalta 1.1s ease-in-out 2}
@keyframes tg-resalta{50%{opacity:.35}}

/* ---------- barra de navegación ---------- */
.tg-nav{
  position:sticky;top:0;z-index:50;
  height:var(--alto-nav);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linea);
}
.tg-nav-in{
  max-width:1400px;margin:0 auto;height:100%;
  display:flex;align-items:center;gap:14px;padding:0 18px;
}
.tg-marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta);font-weight:700;font-size:17px;white-space:nowrap}
.tg-marca svg{width:30px;height:30px}
.tg-links{display:flex;gap:2px;flex:1;justify-content:center;min-width:0}
.tg-link{
  display:flex;align-items:center;gap:6px;
  height:40px;padding:0 11px;border-radius:8px;
  text-decoration:none;color:var(--tinta-2);font-size:15px;font-weight:550;white-space:nowrap;
}
.tg-link:hover{background:var(--papel-3);color:var(--tinta)}
.tg-link.activa{background:var(--tinta);color:#fff}
.tg-link .n{font-family:var(--f-mono);font-size:14px;opacity:.75}
.tg-progreso-chip{
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:15px;color:var(--tinta-2);text-decoration:none;
  border:1px solid var(--linea);border-radius:999px;padding:5px 12px 5px 6px;background:#fff;
}
.tg-progreso-chip svg{width:28px;height:28px}
.tg-pie{
  margin-top:40px;background:#fff;border-top:1px solid var(--linea);
}
.tg-pie .tg-nav-in{height:auto;padding:14px 18px;flex-wrap:wrap}
.tg-pie-pasos{display:flex;justify-content:space-between;gap:16px;max-width:1400px;margin:0 auto;padding:16px 18px 4px}
.tg-pie-pasos a{flex:0 1 auto}
.tg-sello{font-size:15px;color:var(--tenue);text-align:center;padding:8px 0 18px}

/* ---------- botones y controles ---------- */
.tg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--boton);padding:0 18px;
  border:1.5px solid var(--tinta);border-radius:9px;background:#fff;color:var(--tinta);
  font-size:17px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:background .15s,color .15s,transform .1s,box-shadow .15s;
}
.tg-btn:hover{background:var(--papel-3)}
.tg-btn:active{transform:translateY(1px)}
.tg-btn.primario{background:var(--tinta);color:#fff}
.tg-btn.primario:hover{background:#22345a}
.tg-btn.suave{border-color:var(--linea);background:var(--papel-2)}
.tg-btn.chico{min-height:44px;padding:0 14px;font-size:16px}
.tg-btn:disabled,.tg-btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.tg-btn .ico{font-family:var(--f-mono)}
.tg-fila{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tg-fila.entre{justify-content:space-between}

.tg-segmentado{display:inline-flex;border:1.5px solid var(--tinta);border-radius:10px;overflow:hidden;background:#fff;flex-wrap:wrap}
.tg-segmentado button{
  min-height:44px;padding:0 14px;border:0;border-right:1px solid var(--linea);background:transparent;
  font-size:16px;font-weight:550;cursor:pointer;color:var(--tinta-2)
}
.tg-segmentado button:last-child{border-right:0}
.tg-segmentado button:hover{background:var(--papel-3)}
.tg-segmentado button.activo,.tg-segmentado button[aria-pressed="true"]{background:var(--tinta);color:#fff}

.tg-control{margin:0 0 16px}
.tg-control-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px;font-size:17px}
.tg-control-cab .valor{font-family:var(--f-mono);font-weight:600;font-size:18px;background:var(--papel-3);border-radius:6px;padding:1px 10px}
input[type=range].tg-slider{width:100%;height:36px;cursor:pointer;accent-color:var(--tinta)}
.tg-check{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-size:17px}
.tg-check input{width:22px;height:22px;accent-color:var(--tinta)}
.tg-lectura{
  font-family:var(--f-mono);font-size:18px;background:var(--papel-2);border:1px solid var(--linea);
  border-radius:9px;padding:10px 14px;line-height:1.7
}
.tg-formula{font-family:var(--f-mono);font-size:22px;font-weight:500;line-height:1.5}
.tg-formula.grande{font-size:28px}

/* ---------- cabecera de página ---------- */
.tg-contenedor{max-width:var(--ancho-max);margin:0 auto;padding:0 22px;width:100%}
.tg-cabecera{padding:20px 0 6px}
.tg-eyebrow{font-family:var(--f-mono);font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue);margin:0 0 4px}
.tg-cabecera h1{margin:0 0 4px}
.tg-bajada{font-size:19px;color:var(--tinta-2);max-width:880px;margin:0}

/* ---------- pestañas ---------- */
.tg-tabs{
  position:sticky;top:var(--alto-nav);z-index:40;
  background:rgba(238,242,247,.96);backdrop-filter:blur(4px);
  border-bottom:1px solid var(--linea);margin:10px 0 18px;
}
.tg-tabs-in{max-width:var(--ancho-max);margin:0 auto;padding:0 22px;display:flex;gap:4px;overflow-x:auto}
.tg-tab{
  min-height:48px;padding:0 16px;border:0;background:transparent;cursor:pointer;
  font-size:17px;font-weight:600;color:var(--tenue);border-bottom:3px solid transparent;white-space:nowrap
}
.tg-tab:hover{color:var(--tinta)}
.tg-tab.activa{color:var(--tinta);border-bottom-color:var(--tinta)}
.tg-tab .n{font-family:var(--f-mono);font-size:14px;margin-right:6px;opacity:.7}
.tg-panel{display:none}
.tg-panel.activo{display:block;animation:tg-entra .3s ease}
@keyframes tg-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- tarjetas genéricas ---------- */
.tg-card{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio-borde);box-shadow:var(--sombra);padding:20px 22px}
.tg-card.plano{box-shadow:none}
.tg-card h3{margin-top:0}
.tg-grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.tg-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tg-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:15px;font-weight:600;border-radius:999px;padding:3px 12px;
  background:var(--papel-3);color:var(--tinta-2);white-space:nowrap
}
.tg-chip.hab-Resolver{background:#e5edfb;color:#1b4fb0}
.tg-chip.hab-Modelar{background:#fdeee2;color:#9c4508}
.tg-chip.hab-Representar{background:#e2f4f6;color:#08707f}
.tg-chip.hab-Argumentar{background:#f6e6f1;color:#8e1466}
.tg-nota{border-left:4px solid var(--c-base);background:var(--papel-2);padding:12px 16px;border-radius:0 8px 8px 0;font-size:17px}
.tg-nota.aviso{border-color:var(--aviso);background:var(--aviso-suave)}
.tg-frase{
  font-size:24px;font-weight:650;line-height:1.3;
  border-left:6px solid var(--tinta);padding:6px 0 6px 18px;margin:0 0 14px
}

/* ---------- laboratorio (escenario + controles) ---------- */
.tg-lab{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,1fr);gap:18px;align-items:start}
.tg-escenario{background:#fff;border:1px solid var(--linea);border-radius:var(--radio-borde);padding:10px;position:relative}
.tg-escenario .tg-fig{max-height:calc(100vh - 250px);min-height:300px}
.tg-controles{display:flex;flex-direction:column;gap:14px}
.tg-controles .tg-card{padding:16px 18px}
.tg-modos{margin-bottom:14px}

/* ---------- La idea ---------- */
.tg-idea{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(360px,1fr);gap:18px;align-items:stretch}
.tg-idea-escena{background:#fff;border:1px solid var(--linea);border-radius:var(--radio-borde);padding:10px;display:flex;align-items:center;justify-content:center;min-height:330px}
.tg-idea-escena .tg-fig{max-height:calc(100vh - 250px)}
.tg-idea-texto{display:flex;flex-direction:column;gap:10px}
.tg-idea-num{font-family:var(--f-mono);font-size:15px;color:var(--tenue);margin:0}
.tg-idea-texto h3{font-size:25px;margin:0}
.tg-idea-cuerpo{font-size:20px;line-height:1.55;flex:1}
.tg-idea-cuerpo p{margin:0 0 .6em}
.tg-idea-formula{font-family:var(--f-mono);font-size:24px;background:var(--papel-2);border:1px solid var(--linea);border-radius:9px;padding:10px 14px}
.tg-idea-formula:empty{display:none}
.tg-idea.compacta{grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr)}
.tg-idea.compacta .tg-idea-escena{min-height:260px}
.tg-idea.compacta .tg-idea-cuerpo{font-size:18px}
.tg-idea.compacta h3{font-size:21px}
.tg-controles-pasos{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tg-puntos{display:flex;gap:6px;margin-left:auto}
.tg-puntos button{width:14px;height:14px;border-radius:50%;border:2px solid var(--tinta);background:#fff;padding:0;cursor:pointer}
.tg-puntos button.hecho{background:var(--linea-fuerte);border-color:var(--linea-fuerte)}
.tg-puntos button.actual{background:var(--tinta)}
.tg-idea-texto .tg-btn.auto[aria-pressed="true"]{background:var(--tinta);color:#fff}

/* ---------- práctica ---------- */
.tg-practica{display:grid;grid-template-columns:270px minmax(0,1fr);gap:18px;align-items:start}
.tg-tipos{display:flex;flex-direction:column;gap:8px;position:sticky;top:calc(var(--alto-nav) + 64px)}
.tg-tipos h4{margin:0 0 2px;font-size:16px;font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--tenue)}
.tg-tipo{
  display:flex;flex-direction:column;gap:4px;text-align:left;
  min-height:56px;padding:9px 12px;border:1.5px solid var(--linea);border-radius:10px;background:#fff;cursor:pointer
}
.tg-tipo:hover{border-color:var(--linea-fuerte)}
.tg-tipo.activo{border-color:var(--tinta);box-shadow:inset 4px 0 0 var(--tinta)}
.tg-tipo-nombre{font-size:17px;font-weight:600;line-height:1.25}
.tg-tipo-pie{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tg-medidor{display:inline-flex;gap:5px;align-items:center}
.tg-medidor i{width:14px;height:14px;border-radius:50%;border:2px solid var(--linea-fuerte);display:inline-block;transition:background .3s,border-color .3s,transform .3s}
.tg-medidor i.lleno{background:var(--ok);border-color:var(--ok)}
.tg-medidor.dominado i{background:var(--ok);border-color:var(--ok)}
.tg-medidor .txt{font-size:14px;font-weight:600;color:var(--ok);margin-left:4px}
.tg-medidor i.pop{transform:scale(1.35)}

/* ---------- ítem (práctica, reto, ensayo) ---------- */
.tg-item{background:#fff;border:1px solid var(--linea);border-radius:var(--radio-borde);box-shadow:var(--sombra);padding:18px 22px 20px}
.tg-item-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;font-size:15px;color:var(--tenue)}
.tg-item-meta .derecha{margin-left:auto}
.tg-item-cuerpo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;align-items:start}
.tg-item-cuerpo.sin-fig{grid-template-columns:minmax(0,1fr)}
.tg-enunciado{font-size:var(--t-enunciado);line-height:1.5;margin:0 0 14px}
.tg-enunciado p{margin:0 0 .55em}
.tg-item-fig{margin:0;background:var(--papel-2);border:1px solid var(--linea);border-radius:9px;padding:10px}
.tg-item-fig .tg-fig{max-height:calc(100vh - 290px);min-height:200px}
.tg-item-fig figcaption{font-size:15px;color:var(--tenue);margin-top:6px}
.tg-alts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.tg-alt{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  min-height:52px;padding:8px 14px;border:1.5px solid var(--linea-fuerte);border-radius:10px;background:#fff;cursor:pointer;
  font-size:19px;transition:border-color .15s,background .15s,transform .15s
}
.tg-alt:hover:not(:disabled){border-color:var(--tinta);background:var(--papel-2)}
.tg-alt:disabled{cursor:default}
.tg-alt-letra{
  flex:0 0 34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-weight:700;font-size:17px;border:1.5px solid var(--tinta);
}
.tg-alt-txt{font-family:var(--f-mono);font-size:19px}
.tg-alt-txt.texto{font-family:var(--f-texto)}
.tg-alt.elegida{border-color:var(--tinta);background:var(--papel-3)}
.tg-alt.elegida .tg-alt-letra{background:var(--tinta);color:#fff}
.tg-alt.correcta{border-color:var(--ok);background:var(--ok-suave)}
.tg-alt.correcta .tg-alt-letra{background:var(--ok);border-color:var(--ok);color:#fff}
.tg-alt.incorrecta{border-color:var(--mal);background:var(--mal-suave)}
.tg-alt.incorrecta .tg-alt-letra{background:var(--mal);border-color:var(--mal);color:#fff}
.tg-alt.acierto{animation:tg-acierto .6s ease}
@keyframes tg-acierto{30%{transform:scale(1.025);box-shadow:0 0 0 6px rgba(23,120,74,.18)}100%{transform:none;box-shadow:none}}
.tg-pistas{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.tg-pista{border-left:4px solid var(--c-altura);background:#fff8f1;padding:10px 14px;border-radius:0 8px 8px 0;font-size:18px}
.tg-pista b{font-family:var(--f-mono);font-size:15px;text-transform:uppercase;letter-spacing:.05em;display:block;color:#9c4508}
.tg-feedback{margin-top:14px;font-size:18px;border-radius:9px;padding:0}
.tg-feedback:not(:empty){padding:12px 16px}
.tg-feedback.ok{background:var(--ok-suave);border:1px solid #b7dfc6}
.tg-feedback.mal{background:var(--mal-suave);border:1px solid #f0c3be}
.tg-feedback .etq{display:inline-block;font-weight:700}
.tg-solucion{margin-top:16px;border-top:1px dashed var(--linea-fuerte);padding-top:14px}
.tg-solucion h4{margin:0 0 8px}
.tg-sol-pasos{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:paso}
.tg-sol-pasos li{
  counter-increment:paso;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;
  font-size:18px;opacity:.38;transition:opacity .3s
}
.tg-sol-pasos li::before{
  content:counter(paso);font-family:var(--f-mono);font-weight:700;font-size:15px;
  width:30px;height:30px;border-radius:50%;border:1.5px solid var(--tinta);display:flex;align-items:center;justify-content:center
}
.tg-sol-pasos li.visto{opacity:1}
.tg-sol-pasos li.actual::before{background:var(--tinta);color:#fff}
.tg-sol-pasos li:not(.visto){display:none}
.tg-sol-pasos .f{font-family:var(--f-mono);font-size:19px;display:block;margin-top:2px}
.tg-item-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* ---------- reto PAES ---------- */
.tg-reto-nav{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.tg-reto-nav button{
  min-width:48px;min-height:44px;border-radius:9px;border:1.5px solid var(--linea-fuerte);background:#fff;
  font-family:var(--f-mono);font-size:17px;font-weight:600;cursor:pointer
}
.tg-reto-nav button.activo{border-color:var(--tinta);background:var(--tinta);color:#fff}
.tg-reto-nav button.ok{border-color:var(--ok);color:var(--ok)}
.tg-reto-nav button.mal{border-color:var(--mal);color:var(--mal)}
.tg-reto-nav button.activo.ok,.tg-reto-nav button.activo.mal{color:#fff}

/* ---------- trampas ---------- */
.tg-trampas{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}
.tg-trampa-lista{display:flex;flex-direction:column;gap:8px}
.tg-trampa-btn{
  text-align:left;min-height:52px;padding:10px 14px;border:1.5px solid var(--linea);border-radius:10px;background:#fff;cursor:pointer;
  font-size:17px;font-weight:600
}
.tg-trampa-btn.activo{border-color:var(--mal);box-shadow:inset 4px 0 0 var(--mal)}
.tg-trampa-cab{margin-bottom:12px}
.tg-trampa-cab .etq{font-family:var(--f-mono);font-size:15px;text-transform:uppercase;letter-spacing:.05em;color:var(--mal)}
.tg-comparar{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
.tg-comparar>div{border-radius:9px;padding:10px 14px;font-size:18px}
.tg-comparar .mal{background:var(--mal-suave);border:1px solid #f0c3be}
.tg-comparar .bien{background:var(--ok-suave);border:1px solid #b7dfc6}
.tg-comparar b{display:block;font-size:15px;text-transform:uppercase;letter-spacing:.05em;font-family:var(--f-mono)}

/* ---------- ficha ---------- */
.tg-ficha{display:flex;flex-direction:column;gap:18px}
.tg-formulas{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.tg-formula-card{background:#fff;border:1px solid var(--linea);border-radius:var(--radio-borde);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.tg-formula-card h4{margin:0;font-size:18px}
.tg-formula-card .tg-fig{max-height:190px}
.tg-formula-card .frase{font-size:16px;color:var(--tinta-2);font-style:italic;margin:0}
.tg-recordar{margin:0;padding-left:1.2em;font-size:19px}
.tg-recordar li{margin-bottom:6px}

/* ---------- portada ---------- */
.tg-mapa{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.tg-lab-card{
  display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--tinta);
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio-borde);padding:14px 16px;box-shadow:var(--sombra);
  transition:transform .15s,border-color .15s
}
.tg-lab-card:hover{transform:translateY(-3px);border-color:var(--tinta)}
.tg-lab-card .n{font-family:var(--f-mono);font-size:15px;color:var(--tenue)}
.tg-lab-card h3{font-size:20px;margin:0}
.tg-lab-card .tg-fig{height:110px}
.tg-barra{height:10px;border-radius:99px;background:var(--papel-3);overflow:hidden}
.tg-barra i{display:block;height:100%;background:var(--ok);border-radius:99px;transition:width .5s}

/* ---------- glosario, avisos ---------- */
dfn,.tg-g{font-style:normal;border-bottom:2px dotted var(--c-base);cursor:help}
.tg-tooltip{
  position:fixed;z-index:100;max-width:340px;pointer-events:none;
  background:var(--tinta);color:#fff;font-size:16px;line-height:1.45;border-radius:9px;padding:10px 14px;
  box-shadow:0 8px 24px rgba(0,0,0,.2);opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s
}
.tg-tooltip.visible{opacity:1;transform:none}
.tg-tooltip b{display:block;font-size:15px;opacity:.8;margin-bottom:2px}
.tg-aviso{
  position:fixed;right:22px;bottom:22px;z-index:120;background:var(--tinta);color:#fff;
  padding:12px 18px;border-radius:10px;font-size:17px;box-shadow:0 10px 30px rgba(0,0,0,.25);
  opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s
}
.tg-aviso.visible{opacity:1;transform:none}
.tg-aviso.ok{background:var(--ok)}

/* ---------- tablas ---------- */
.tg-tabla{border-collapse:collapse;width:100%;font-size:17px}
.tg-tabla th,.tg-tabla td{border-bottom:1px solid var(--linea);padding:7px 10px;text-align:left}
.tg-tabla th{font-size:15px;text-transform:uppercase;letter-spacing:.04em;color:var(--tenue);font-weight:600}
.tg-tabla td.num,.tg-tabla th.num{text-align:right;font-family:var(--f-mono)}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- pantallas más bajas (notebook 1366×768) ---------- */
@media (max-height:800px){
  :root{--alto-nav:54px}
  h1{font-size:30px}
  .tg-cabecera{padding:14px 0 2px}
  .tg-bajada{font-size:18px}
  .tg-tabs{margin:8px 0 14px}
}
@media (max-width:1480px){
  .tg-marca span{display:none}
}
@media (max-width:1250px){
  .tg-link{padding:0 7px}
}

@media print{
  .tg-nav,.tg-pie,.tg-tabs,.tg-controles-pasos,.tg-item-acciones{display:none!important}
  body{background:#fff}
  .tg-panel{display:block!important}
}