/* ============================================================================
   Capítulos web del track "Dirigir la IA".

   Hereda la paleta del estilo `naranja` del skill pdf (misma casa: el alumno que
   ya tiene el PDF viejo reconoce el material). Mobile-first a propósito: los
   alumnos dijeron que "les costaba leer el PDF en el celular" — ese fue el
   motivo por el que se eligió la web, así que el teléfono es el caso base y el
   escritorio es el ensanche.
   ============================================================================ */

:root {
  --acento: #d35400;
  --acento-vivo: #e8730c;
  --acento-oscuro: #b8470a;
  --texto: #1a1a1a;
  --texto-suave: #5a5148;
  --fondo: #ffffff;
  --fondo-tenue: #f6f4f2;
  --fondo-marcado: #f4f1ee;
  --borde: #e0d8d0;
  --borde-fuerte: #c9c0b8;
  --ancho: 40rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --acento: #f08a3c;
    --acento-vivo: #f5a35f;
    --acento-oscuro: #f5a35f;
    --texto: #ece7e1;
    --texto-suave: #b3a99e;
    --fondo: #17140f;
    --fondo-tenue: #211c16;
    --fondo-marcado: #262019;
    --borde: #3a322a;
    --borde-fuerte: #4d4238;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--acento); }

/* --- Barra de arriba: siempre a la vista el módulo y la descarga del .md ---- */

.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .6rem 1rem;
  background: var(--fondo-marcado);
  border-bottom: 1px solid var(--borde);
}

.barra .modulo {
  flex: 1;
  min-width: 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

.descargar {
  flex: none;
  display: inline-block;
  padding: .35rem .7rem;
  border: 1px solid var(--acento);
  border-radius: 4px;
  color: var(--acento);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.descargar:hover { background: var(--acento); color: #fff; }

.progreso {
  height: 3px;
  background: var(--borde);
}

.progreso > span {
  display: block;
  height: 100%;
  background: var(--acento-vivo);
}

/* --- Contenido ------------------------------------------------------------ */

main {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 1.5rem 1.1rem 3rem;
}

.posicion {
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.grupo-actual {
  font-size: .8rem;
  font-weight: 600;
  color: var(--acento);
}

/* Los capítulos que no cuelgan de un grupo dejan el renglón vacío: se saca */
.grupo-actual:empty { display: none; }

h1 {
  font-size: 1.55rem;
  line-height: 1.25;
  margin: .3rem 0 1.2rem;
  padding-bottom: .5rem;
  border-bottom: 3px solid var(--acento);
}

h2 {
  font-size: 1.2rem;
  color: var(--acento-oscuro);
  background: var(--fondo-marcado);
  border-left: 5px solid var(--acento-vivo);
  padding: .35rem .6rem;
  margin: 2rem 0 .8rem;
}

h3 {
  font-size: 1.05rem;
  color: var(--acento);
  border-bottom: 1px dotted var(--borde-fuerte);
  padding-bottom: .15rem;
  margin: 1.6rem 0 .6rem;
}

h4 { font-size: .98rem; margin: 1.2rem 0 .4rem; }

p, li { overflow-wrap: break-word; }

ul, ol { padding-left: 1.3rem; }
li { margin: .3rem 0; }

blockquote {
  margin: 1rem 0;
  padding: .7rem .9rem;
  background: var(--fondo-tenue);
  border-left: 4px solid var(--acento-vivo);
}

blockquote > :first-child { margin-top: 0; }
blockquote > :last-child { margin-bottom: 0; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--fondo-marcado);
  color: var(--acento-oscuro);
  padding: .1em .3em;
  border-radius: 3px;
}

pre {
  background: var(--fondo-tenue);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--acento-vivo);
  padding: .8rem;
  overflow-x: auto;
  font-size: .85rem;
  line-height: 1.45;
}

pre code { background: none; color: var(--texto); padding: 0; }

/* --- Bloques de código: copiar de una, sin seleccionar a mano ------------- */

.bloque-codigo { position: relative; }
.bloque-codigo pre { margin: 1rem 0; padding-top: 2.1rem; }

.copiar {
  position: absolute;
  top: .45rem;
  right: .45rem;
  padding: .2rem .55rem;
  background: var(--fondo-marcado);
  color: var(--acento);
  border: 1px solid var(--borde-fuerte);
  border-radius: 4px;
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
}

.copiar:hover { background: var(--acento); color: #fff; border-color: var(--acento); }
.copiar[data-copiado="si"] { background: var(--acento); color: #fff; border-color: var(--acento); }

/* Las tablas son lo primero que rompe el ancho en un teléfono: scrollean solas */
table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .9rem;
}

th, td {
  border: 1px solid var(--borde);
  padding: .4rem .6rem;
  text-align: left;
  vertical-align: top;
}

th { background: var(--fondo-marcado); color: var(--acento-oscuro); }

hr { border: none; border-top: 1px solid var(--borde); margin: 2rem 0; }

img { max-width: 100%; height: auto; }

/* --- Marcadores del vocabulario cerrado ----------------------------------- */

.marcador {
  display: inline-block;
  background: var(--acento);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .1rem .4rem;
  border-radius: 3px;
  vertical-align: .08em;
}

@media (prefers-color-scheme: dark) {
  .marcador { color: #17140f; }
  .descargar:hover { color: #17140f; }
}

/* --- Cierre del capítulo y navegación ------------------------------------- */

.listo {
  display: block;
  width: 100%;
  margin: 2.5rem 0 1.5rem;
  padding: .85rem 1rem;
  background: var(--acento);
  color: #fff;
  border: 2px solid var(--acento);
  border-radius: 5px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.listo[data-hecho="si"] {
  background: transparent;
  color: var(--acento);
}

nav.pasos {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--borde);
  font-size: .88rem;
}

nav.pasos a { flex: 1; text-decoration: none; }
nav.pasos .nav-next { text-align: right; }

/* --- Índice de capítulos --------------------------------------------------- */

.indice { margin: 1.5rem 0; }

.indice ul { list-style: none; margin: 0; padding: 0; }

.indice li.grupo {
  margin: 1.1rem 0 .3rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.indice li.capitulo a {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  padding: .45rem .5rem;
  border-radius: 4px;
  color: var(--texto);
  text-decoration: none;
}

.indice li.capitulo a:hover { background: var(--fondo-tenue); }
.indice li.capitulo.actual a { background: var(--fondo-marcado); font-weight: 600; }

.indice .numero {
  flex: none;
  width: 1.4rem;
  font-size: .8rem;
  color: var(--texto-suave);
  text-align: right;
}

.indice .tilde {
  flex: none;
  width: .95rem;
  height: .95rem;
  margin-top: .3rem;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: 3px;
  align-self: flex-start;
}

.indice li.capitulo[data-hecho="si"] .tilde {
  background: var(--acento);
  border-color: var(--acento);
}

.indice li.capitulo[data-hecho="si"] .tilde::after {
  content: "";
  display: block;
  width: .28rem;
  height: .5rem;
  margin: .04rem auto 0;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.indice li.capitulo[data-hecho="si"] .titulo { color: var(--texto-suave); }

details.mapa summary {
  cursor: pointer;
  padding: .5rem 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--acento);
}

/* --- Portada -------------------------------------------------------------- */

.portada h1 { border-bottom-width: 4px; }
.portada h3 { border: none; color: var(--texto-suave); font-weight: 600; }
.portada em { color: var(--texto-suave); }

.arranque {
  display: inline-block;
  margin: .5rem 0 1rem;
  padding: .8rem 1.4rem;
  background: var(--acento);
  color: #fff;
  border-radius: 5px;
  font-weight: 600;
  text-decoration: none;
}

.cuantos { font-size: .88rem; color: var(--texto-suave); }

.copia-md {
  margin: 2rem 0 0;
  padding: .9rem 1rem;
  background: var(--fondo-tenue);
  border-left: 4px solid var(--acento-vivo);
  font-size: .92rem;
}

.copia-md p { margin: 0 0 .6rem; }
.copia-md p:last-child { margin-bottom: 0; }

/* --- Índice de la guía: la puerta de entrada a los módulos ----------------- */

.guia .entrada { color: var(--texto-suave); }

.tarjetas { list-style: none; margin: 1.2rem 0 2rem; padding: 0; }

.tarjeta {
  margin: 0 0 1rem;
  padding: .9rem 1rem;
  background: var(--fondo-tenue);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--acento-vivo);
  border-radius: 4px;
}

.tarjeta-via {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--acento);
}

.tarjeta-titulo {
  display: block;
  margin: .2rem 0 .35rem;
  color: var(--texto);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.tarjeta-titulo:hover { color: var(--acento); }

.tarjeta-bajada { margin: 0 0 .5rem; font-size: .92rem; color: var(--texto-suave); }
.tarjeta-pie { margin: 0; font-size: .82rem; color: var(--texto-suave); }

.ver-mapa { margin: 0 0 1.5rem; font-size: .95rem; font-weight: 600; }

/* --- Mapa de lo que sigue: las piezas nombradas sin el paso a paso -------- */

.mapa-modulos .tarjeta-mapa { margin: 0 0 1.8rem; }
.mapa-modulos .tarjeta-mapa h2 { margin-top: 2rem; }
.mapa-modulos .tarjeta-mapa > :last-child { margin-bottom: 0; }

@media (min-width: 46rem) {
  body { font-size: 1.08rem; }
  h1 { font-size: 1.9rem; }
  main { padding: 2rem 1.5rem 4rem; }
}