/* Team-Based Learning · hoja de estilos de la web · v1.0 (octubre 2026)
   Misma estructura que la de Aprendizaje con IA, con prefijo tbl- y el azul tinta como color principal.
   Líneas de contenido: tbl-linea--metodo (azul, círculo) y tbl-linea--herramienta (coral, cuadrado). */

@font-face { font-family: "Newsreader"; src: url("../fuentes/newsreader.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fuentes/newsreader-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fuentes/ibm-plex-sans.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fuentes/ibm-plex-sans-italic.woff2") format("woff2"); font-weight: 100 700; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fuentes/ibm-plex-mono-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fuentes/ibm-plex-mono-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #F5EFE4; --bg-alt: #EEE6D7; --surface: #FFFCF6; --line: #DDD3C1;
  --ink: #1B2023; --ink-muted: #52595D;
  --azul: #24406A; --azul-texto: #24406A; --azul-tinte: #E0E4EA;
  --coral: #E8604C; --coral-texto: #A93E2B; --coral-tinte: #F6DDD3;
  --cruce: #A93E2B; --sobre-petroleo: #FFFCF6; --sobre-coral: #1B2023;
  --subrayado: rgba(232, 96, 76, 0.30);
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius-sm: 6px; --radius-md: 14px; --radius-tarea: 22px; --radius-pill: 999px;
  --ancho: 1160px; --medida: 66ch;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1220; --bg-alt: #182034; --surface: #141A2A; --line: #2C3446;
    --ink: #F5EFE4; --ink-muted: #BCC3CF;
    --azul: #3F67A6; --azul-texto: #9DB6DC; --azul-tinte: #16233C;
    --coral-texto: #F28C79; --coral-tinte: #3A1F1A; --cruce: #0E1220;
    --subrayado: rgba(232, 96, 76, 0.38); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1220; --bg-alt: #182034; --surface: #141A2A; --line: #2C3446;
  --ink: #F5EFE4; --ink-muted: #BCC3CF;
  --azul: #3F67A6; --azul-texto: #9DB6DC; --azul-tinte: #16233C;
  --coral-texto: #F28C79; --coral-tinte: #3A1F1A; --cruce: #0E1220;
  --subrayado: rgba(232, 96, 76, 0.38); color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 19px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.1; margin: 0 0 var(--space-4); text-wrap: balance; }
h1 { font-size: clamp(38px, 5vw, 56px); letter-spacing: -0.015em; }
h2 { font-size: clamp(28px, 3.4vw, 36px); }
h3 { font-size: 26px; line-height: 1.2; }
h4 { font-size: 21px; }
p { margin: 0 0 var(--space-4); max-width: var(--medida); }
a { color: var(--azul-texto); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
code, kbd, pre { font-family: var(--font-mono); font-size: 0.86em; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-7) 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Utilidades ---------- */
.tbl-contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding-inline: var(--space-5); }
.tbl-seccion { padding-block: var(--space-8); }
.tbl-seccion--alt { background: var(--bg-alt); }
.tbl-display { font-family: var(--font-serif); font-weight: 600; font-size: clamp(44px, 6.4vw, 78px); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 var(--space-5); text-wrap: balance; }
.tbl-display em, h1 em, h2 em { font-style: italic; color: var(--azul-texto); }
.tbl-entradilla { font-size: 21px; line-height: 1.6; color: var(--ink-muted); }
.tbl-secundario { color: var(--ink-muted); }
.tbl-subrayado { background: linear-gradient(transparent 58%, var(--subrayado) 58%, var(--subrayado) 92%, transparent 92%); padding: 0 0.06em; }
.tbl-mono { font-family: var(--font-mono); }
.tbl-visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Etiquetas de línea ---------- */
.tbl-linea { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; }
.tbl-linea::before { content: ""; width: 0.95em; height: 0.95em; flex: none; }
.tbl-linea--metodo { color: var(--azul-texto); }
.tbl-linea--metodo::before { background: var(--azul); border-radius: 50%; }
.tbl-linea--herramienta { color: var(--coral-texto); }
.tbl-linea--herramienta::before { background: var(--coral); border-radius: 22%; }

/* ---------- Cabecera y pie ---------- */
.tbl-cabecera { border-bottom: 1px solid var(--line); }
.tbl-cabecera .tbl-contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); }
.tbl-logo img { height: 44px; width: auto; }
.tbl-logo .tbl-logo--oscuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tbl-logo .tbl-logo--claro { display: none; } :root:not([data-theme="light"]) .tbl-logo .tbl-logo--oscuro { display: block; } }
:root[data-theme="dark"] .tbl-logo .tbl-logo--claro { display: none; }
:root[data-theme="dark"] .tbl-logo .tbl-logo--oscuro { display: block; }
.tbl-nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.tbl-nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 16px; padding-block: var(--space-2); }
.tbl-nav a:hover, .tbl-nav a[aria-current="page"] { color: var(--azul-texto); box-shadow: inset 0 -2px 0 var(--azul); }
.tbl-pie { border-top: 1px solid var(--line); padding-block: var(--space-7); font-size: 15px; color: var(--ink-muted); }
.tbl-pie .tbl-contenedor { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: space-between; align-items: center; }
.tbl-pie a { color: var(--ink-muted); }

/* ---------- Botones ---------- */
.tbl-boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-md); border: 0; font: 600 17px/1 var(--font-sans); text-decoration: none; cursor: pointer; transition: transform .08s ease, background-color .15s ease; }
.tbl-boton:active { transform: translateY(1px); }
.tbl-boton--primario { background: var(--azul); color: var(--sobre-petroleo); }
.tbl-boton--primario:hover { background: var(--cruce); color: #FFFCF6; }
.tbl-boton--secundario { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-muted); }
.tbl-boton--secundario:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.tbl-boton--herramienta { background: var(--coral); color: var(--sobre-coral); }
.tbl-boton--herramienta:hover { filter: brightness(0.95); }

/* ---------- Rejilla y tarjetas ---------- */
.tbl-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-5); }
.tbl-tarjeta { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; min-width: 0; }
.tbl-tarjeta--metodo { background: var(--azul-tinte); box-shadow: none; }
.tbl-tarjeta--herramienta { background: var(--coral-tinte); box-shadow: none; }
.tbl-tarjeta__marca { flex: none; width: 32px; height: 32px; }
.tbl-tarjeta--metodo .tbl-tarjeta__marca { background: var(--azul); border-radius: 50%; }
.tbl-tarjeta--herramienta .tbl-tarjeta__marca { background: var(--coral); border-radius: 8px; }
.tbl-tarjeta__titulo { display: block; font-family: var(--font-serif); font-size: 24px; font-weight: 600; line-height: 1.2; margin-top: var(--space-2); }
.tbl-tarjeta__meta { display: block; margin-top: var(--space-2); font-size: 15px; color: var(--ink-muted); }
a.tbl-tarjeta:hover .tbl-tarjeta__titulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* ---------- Bloques de contenido (guías y artículos) ---------- */
.tbl-bloque { position: relative; margin: var(--space-7) 0 var(--space-6); padding: var(--space-6) var(--space-5) var(--space-5); border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); max-width: 760px; }
.tbl-bloque > :last-child { margin-bottom: 0; }
.tbl-bloque__tipo { position: absolute; top: -14px; left: var(--space-5); font: 500 12px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 10px; border-radius: var(--radius-sm); }
.tbl-bloque--idea .tbl-bloque__tipo { background: var(--azul); color: var(--sobre-petroleo); }
.tbl-bloque--idea { box-shadow: inset 0 0 0 1.5px var(--azul); }
.tbl-bloque--ejemplo { background: var(--azul-tinte); box-shadow: none; }
.tbl-bloque--ejemplo .tbl-bloque__tipo { background: var(--surface); color: var(--azul-texto); box-shadow: inset 0 0 0 1px var(--azul); }
.tbl-bloque--prompt { border-radius: var(--radius-tarea); box-shadow: inset 0 0 0 2px var(--coral); font-family: var(--font-mono); font-size: 16px; line-height: 1.6; }
.tbl-bloque--prompt .tbl-bloque__tipo { background: var(--coral); color: var(--sobre-coral); }
.tbl-bloque--respuesta { border-radius: var(--radius-tarea); }
.tbl-bloque--respuesta .tbl-bloque__tipo { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.tbl-bloque--limite { border-radius: 0 var(--radius-md) var(--radius-md) 0; box-shadow: inset 6px 0 0 var(--coral); padding-left: calc(var(--space-5) + 6px); }
.tbl-bloque--limite .tbl-bloque__tipo { background: var(--bg); color: var(--coral-texto); box-shadow: inset 0 0 0 1.5px var(--coral); left: calc(var(--space-5) + 6px); }
.tbl-bloque--actividad { background: var(--coral-tinte); box-shadow: none; }
.tbl-bloque--actividad .tbl-bloque__tipo { background: var(--surface); color: var(--coral-texto); box-shadow: inset 0 0 0 1px var(--coral); }

/* Fuente y nota */
.tbl-fuente { font-size: 15px; color: var(--ink-muted); padding-left: var(--space-4); border-left: 2px solid var(--line); }
.tbl-fuente::before { content: "FUENTE"; display: block; font: 500 11px/1.6 var(--font-mono); letter-spacing: 0.14em; color: var(--ink-muted); }
.tbl-nota { font-size: 15px; color: var(--ink-muted); font-style: italic; }

/* Pasos numerados (Herramientas) */
.tbl-pasos { list-style: none; padding: 0; margin: var(--space-5) 0; counter-reset: paso; display: grid; gap: var(--space-4); max-width: 760px; }
.tbl-pasos li { counter-increment: paso; display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4); align-items: start; }
.tbl-pasos li::before { content: counter(paso); width: 44px; height: 44px; display: grid; place-items: center; background: var(--coral); color: var(--sobre-coral); border-radius: 22%; font: 500 18px/1 var(--font-mono); }

/* Insignias */
.tbl-insignia { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-sm); font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; background: var(--bg-alt); color: var(--ink-muted); }
.tbl-insignia--metodo { background: var(--azul-tinte); color: var(--azul-texto); }
.tbl-insignia--herramienta { background: var(--coral-tinte); color: var(--coral-texto); }

/* Persona: foto o vídeo */
.tbl-persona { border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 5px var(--azul); aspect-ratio: 1; }
.tbl-persona--rect { border-radius: var(--radius-tarea); aspect-ratio: auto; }
.tbl-persona img { width: 100%; height: 100%; object-fit: cover; }
.tbl-video { border-radius: var(--radius-tarea); overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- Formulario de suscripción ---------- */
.tbl-suscripcion { display: flex; flex-wrap: wrap; gap: var(--space-3); max-width: 560px; }
.tbl-suscripcion input { flex: 1 1 240px; min-height: 52px; padding: 0 22px; border: 1.5px solid var(--ink-muted); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: 17px; }
.tbl-suscripcion input::placeholder { color: var(--ink-muted); }
.tbl-campo { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.tbl-campo label { font-weight: 500; font-size: 16px; }
.tbl-campo input, .tbl-campo textarea, .tbl-campo select { min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--ink-muted); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; font-size: 17px; }

/* ---------- Portada ---------- */
.tbl-portada { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; padding-block: var(--space-8); }
@media (max-width: 820px) { .tbl-portada { grid-template-columns: 1fr; } }
.tbl-tarjeta--metodo .tbl-insignia, .tbl-tarjeta--herramienta .tbl-insignia { background: none; padding-left: 0; }