/* ------------------------------------------------------------------
   PUA · hoja de estilos común
   Proyecto «Escuchar a las Plantas: Atlas Sonoro para (Re)Conocer
   Otras Inteligencias». Noviembre de 2026.

   La enlazan todas las páginas a través de /includes/header.html.
   Tres bloques: variables y base; piezas comunes (portada, índice,
   figuras, pie); y piezas que hoy solo usa alguna página (la regla de
   los cuatro canales, el balance, la cadena de proceso).

   Sin fuentes web ni dependencias externas. El tema oscuro sale de
   prefers-color-scheme y puede forzarse con data-theme en <html>.
   ------------------------------------------------------------------ */

:root {
  --papel: #eef1eb;
  --papel-2: #e2e7de;
  --tinta: #221a33;
  --tinta-suave: #4a4260;
  --enlace: #7a1f6b;
  --brasa: #a8481a;
  --linea: #c3cabd;
  --importante: #fbe3d3;
  --noche: #1a1030;
  --noche-texto: #f4effb;
  --noche-suave: #cdc3e3;
  --clic: #f08a4b;
  --luz: #fde8a6;
  --tono: #c77dce;
  --f-texto: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Noto Serif", serif;
  --f-titulos: Bahnschrift, "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", sans-serif-condensed, sans-serif;
  --f-ficha: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --medida: 38rem;
  --ancho: 54rem;
  --margen: clamp(1.25rem, 4vw, 3rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #150e22;
    --papel-2: #211833;
    --tinta: #ece7f5;
    --tinta-suave: #bfb5d3;
    --enlace: #f0a8d8;
    --brasa: #f4a472;
    --linea: #3b3052;
    --importante: #2e1b20;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #150e22;
  --papel-2: #211833;
  --tinta: #ece7f5;
  --tinta-suave: #bfb5d3;
  --enlace: #f0a8d8;
  --brasa: #f4a472;
  --linea: #3b3052;
  --importante: #2e1b20;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1.125rem;
  line-height: 1.65;
}
h1, h2, h3, summary, caption, .num, .marca, .boton, .indice, .ajustes dt, .saltar, .cifras dt, .rotulo { font-family: var(--f-titulos); font-stretch: condensed; }
h1, h2, h3 { text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem); line-height: 1.1; font-weight: 700; margin: 0 0 1rem; }
h3 { font-size: 1.3125rem; line-height: 1.25; font-weight: 700; margin: 2.25rem 0 .5rem; }
p { margin: 0 0 1rem; }
q { quotes: "«" "»" "“" "”"; }
a { color: var(--enlace); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; height: auto; display: block; }
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: 1rem; top: -10rem; z-index: 10;
  background: var(--luz); color: #1a1030; padding: .5rem 1rem; font-weight: 600;
}
.saltar:focus { top: 1rem; }

/* Portada: la misma banda de clics que el tutorial */
.portada { background: var(--noche); color: var(--noche-texto); overflow: hidden; }
.barra { padding: 1rem var(--margen); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; }
.marca { display: block; }
/* El logotipo y el menú crecen con el ancho de la ventana hasta el doble
   de su tamaño base. En pantallas estrechas se quedan en el mínimo, para
   que la barra no se coma la primera pantalla. */
.marca img { width: clamp(170px, 21vw, 400px); height: auto; }
.menu { margin-left: auto; }
.menu ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.menu a { color: var(--noche-suave); text-decoration: none; font-family: var(--f-titulos); font-stretch: condensed; font-size: clamp(1rem, 0.35rem + 1.35vw, 2rem); }
.menu a:hover { color: var(--luz); text-decoration: underline; }
.menu a[aria-current="page"] { color: var(--luz); }
.ultra {
  height: clamp(7rem, 18vw, 11rem);
  background: repeating-linear-gradient(90deg, rgba(205, 195, 227, .07) 0 1px, transparent 1px 9px);
}
.ultra svg { display: block; width: 100%; height: 100%; }
.ultra line { stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.c1 { stroke: var(--clic); }
.c2 { stroke: var(--luz); }
.umbral { position: relative; margin: 0; border-top: 1px dashed rgba(253, 232, 166, .75); }
.umbral span {
  position: absolute; right: var(--margen); top: -1.75rem;
  font-family: var(--f-titulos); font-stretch: condensed; font-size: .9375rem; color: var(--luz);
  background: var(--noche); padding: 0 .5rem;
}
.audible { padding: 2.25rem var(--margen) 3.25rem; max-width: 62rem; }
.portada h1 {
  font-size: clamp(2.625rem, 1.4rem + 5.5vw, 5rem); line-height: .95; font-weight: 700;
  letter-spacing: -.015em; margin: 0 0 1.25rem; max-width: 14ch;
}
.entradilla { font-size: 1.25rem; line-height: 1.55; color: var(--noche-texto); max-width: 36rem; }
.entradilla:last-child { color: var(--noche-suave); font-size: 1rem; margin: 0; }

/* Cifras del atlas */
.cifras { background: var(--papel-2); border-bottom: 1px solid var(--linea); }
.cifras > div { max-width: 72rem; margin: 0 auto; padding: 2rem var(--margen) 1.75rem; }
.cifras dl { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: 0; }
.cifras dt { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1; font-weight: 700; color: var(--enlace); }
.cifras dd { margin: .35rem 0 0; font-size: 1rem; line-height: 1.4; color: var(--tinta-suave); }
.cifras .corte { margin: 1.5rem 0 0; font-size: 1rem; color: var(--tinta-suave); }

/* Estructura: índice lateral fijo + columna de contenido */
.marco {
  max-width: 72rem; margin: 0 auto; padding: 0 var(--margen) 4rem;
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 3.5rem;
}
main { min-width: 0; }
main > section { max-width: var(--ancho); margin-bottom: 1rem; }
.marco.lectura main > section { max-width: var(--medida); }
.prosa { max-width: var(--medida); }
.indice { font-size: 1rem; line-height: 1.35; padding: 2rem 0 1.5rem; border-bottom: 1px solid var(--linea); }
.indice h2 { font-size: 1rem; font-weight: 600; color: var(--tinta-suave); margin: 0 0 .75rem; }
.indice ul, .indice ol { list-style: none; margin: 0 0 1rem; padding: 0; }
.indice ol { counter-reset: paso; }
.indice li { margin: .4rem 0; }
/* Solo las listas numeradas del índice llevan número; las <ul> van sueltas. */
.indice ol li { counter-increment: paso; display: grid; grid-template-columns: 1.8rem 1fr; }
.indice ol li::before { content: counter(paso, decimal-leading-zero); color: var(--enlace); }
.indice a { color: var(--tinta); text-decoration: none; }
.indice a:hover { color: var(--enlace); text-decoration: underline; }
@media (min-width: 62rem) {
  .marco { grid-template-columns: 13rem minmax(0, var(--ancho)); }
  /* Páginas sin índice lateral: el contenido ocupa una sola columna. */
  .marco.sin-indice { grid-template-columns: minmax(0, var(--ancho)); }
  /* Páginas de lectura seguida (el tutorial): columna estrecha. */
  .marco.lectura { grid-template-columns: 13rem minmax(0, var(--medida)); }
  .indice { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; padding-top: 3.75rem; border-bottom: 0; }
}

/* Pasos */
.num { display: block; font-size: clamp(3rem, 2rem + 4vw, 4.5rem); line-height: .9; font-weight: 300; color: var(--enlace); margin: 3.5rem 0 .35rem; }
main ul { padding-left: 1.25rem; }
main li { margin: .45rem 0; }
.dato { font-size: 1.1875rem; line-height: 1.55; margin: 2rem 0; }
.importante { background: var(--importante); border-left: 4px solid var(--brasa); padding: .9rem 1.1rem; margin: 1.5rem 0; }
.importante p { margin: 0; }
.importante .rotulo { display: block; font-weight: 700; margin-bottom: .3rem; color: var(--brasa); }
.nota { border-left: 2px solid var(--enlace); padding: .1rem 0 .1rem 1.1rem; margin: 1.75rem 0; color: var(--tinta-suave); font-style: italic; }
.nota p { margin: 0; }
.nota strong, .nota i, .nota em { font-style: normal; }
.nota strong { color: var(--tinta); }

/* Listas de dos columnas (mismo patrón que .ajustes del tutorial) */
.ajustes { margin: 1rem 0 1.5rem; border-top: 2px solid var(--tinta); }
.ajustes > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem; padding: .8rem 0; border-bottom: 1px solid var(--linea); }
.ajustes dt { font-weight: 600; }
.ajustes dd { margin: 0; color: var(--tinta-suave); font-size: 1rem; line-height: 1.5; }
@media (min-width: 40rem) {
  .ajustes > div { grid-template-columns: 10.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
  /* Variante de tres columnas: concepto, valor y explicación (tutorial). */
  .ajustes.ajustes-3 > div { grid-template-columns: 10.5rem 7.5rem minmax(0, 1fr); }
}

/* Figuras */
.figura { margin: 2rem 0; }
.figura svg, .figura img { display: block; width: 100%; height: auto; }
.figura a { display: block; text-decoration: none; }
.figura img { border: 1px solid var(--linea); background: #fff; }
figcaption { font-size: 1rem; line-height: 1.5; color: var(--tinta-suave); margin-top: .75rem; }
figcaption p { margin: 0 0 .5rem; }
.galeria { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 2rem 0; }
.galeria .figura { margin: 0; }

/* Dibujos sobre papel */
.s-linea { stroke: var(--tinta-suave); stroke-width: 1.5; }
.s-soporte { stroke: var(--tinta); stroke-width: 4; stroke-linecap: round; }
.s-maceta, .s-hoja { fill: var(--papel-2); stroke: var(--tinta); stroke-width: 1.5; }
.s-tallo { fill: none; stroke: var(--tinta); stroke-width: 3; stroke-linecap: round; }
.s-micro { fill: var(--brasa); }
.s-vista { stroke: var(--brasa); stroke-width: 1.5; stroke-dasharray: 4 4; }
.s-campo { fill: var(--brasa); opacity: .12; }
.s-aparato { fill: var(--papel); stroke: var(--tinta); stroke-width: 1.5; }
.s-texto, .s-texto-cota, .e-letra, .e-eje { font-family: var(--f-titulos); font-stretch: condensed; }
.s-texto { fill: var(--tinta); font-size: 20px; }
.s-texto-cota { fill: var(--enlace); font-size: 20px; font-weight: 700; }

/* Espectrogramas esquemáticos */
.e-fondo { fill: var(--noche); stroke: var(--linea); stroke-width: 1; }
.e-rejilla { stroke: rgba(205, 195, 227, .2); stroke-width: 1; }
.e-umbral { stroke: var(--luz); stroke-width: 1.5; stroke-dasharray: 5 4; }
.e-clic { stroke: var(--clic); stroke-width: 3.5; stroke-linecap: round; }
.e-tono { stroke: var(--tono); stroke-width: 2; }
.e-letra { fill: var(--noche-texto); font-size: 20px; font-weight: 700; }
.e-eje { fill: var(--tinta-suave); font-size: 16px; }

/* Regla de los cuatro canales */
.regla { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); margin: 2rem 0; }
@media (min-width: 46rem) { .regla { grid-template-columns: 1fr 1fr; } }
.regla > div { border-top: 2px solid var(--tinta); padding-top: .75rem; }
.regla h3 { margin: 0 0 .75rem; font-size: 1.125rem; }
.regla p { margin: .75rem 0 0; font-size: 1rem; line-height: 1.5; }
.veredicto { font-weight: 700; color: var(--tinta); }

/* Lo que afirmamos y lo que no */
.balance { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); margin: 1.5rem 0; }
@media (min-width: 46rem) { .balance { grid-template-columns: 1fr 1fr; } }
.balance > div { background: var(--papel-2); border: 1px solid var(--linea); padding: 1.25rem 1.4rem; }
.balance .si { border-top: 4px solid var(--brasa); }
.balance .no { border-top: 4px solid var(--enlace); }
.balance h3 { margin: 0 0 .75rem; font-size: 1.125rem; }
.balance ul { margin: 0; padding-left: 1.1rem; font-size: 1rem; line-height: 1.5; }

/* Cadena de proceso */
.cadena { counter-reset: eslabon; list-style: none; padding-left: 0; margin: 1.5rem 0; border-top: 1px solid var(--linea); }
.cadena > li {
  counter-increment: eslabon; position: relative; padding: .9rem 0 .9rem 2.6rem;
  border-bottom: 1px solid var(--linea); margin: 0;
}
.cadena > li::before {
  content: counter(eslabon); position: absolute; left: 0; top: 1rem;
  width: 1.65rem; height: 1.65rem; border: 1.5px solid var(--enlace); border-radius: 50%;
  display: grid; place-items: center; color: var(--enlace);
  font-family: var(--f-titulos); font-stretch: condensed; font-size: .95rem; line-height: 1;
}
.cadena b { font-weight: 700; }
.cadena span { display: block; font-size: 1rem; line-height: 1.5; color: var(--tinta-suave); }

/* Pie */
.pie { background: var(--noche); color: var(--noche-suave); padding: 2.5rem var(--margen) 3rem; font-size: 1rem; line-height: 1.55; }
.pie > div { max-width: 72rem; margin: 0 auto; }
.pie p { max-width: 48rem; margin: 0 0 .6rem; }
.pie a { color: var(--luz); }
.pie .proyecto { color: var(--noche-texto); font-family: var(--f-titulos); font-stretch: condensed; font-size: 1.125rem; font-weight: 600; }
.pie ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.financia { margin-top: 1.75rem; }
.financia img { width: 205px; background: #fff; padding: .7rem 1rem; border-radius: 4px; margin-top: 1rem; }
.licencia { margin-top: 2.25rem; font-size: .9375rem; }

/* ------------------------------------------------------------------
   Piezas del tutorial de grabación
   ------------------------------------------------------------------ */

.requisitos { font-size: 1rem; color: var(--noche-suave); max-width: 36rem; margin: 0; }
.claves { padding-left: 1.25rem; }
.claves li { margin: .75rem 0; }

/* Lista de acciones numeradas dentro de un paso */
.acciones { counter-reset: accion; list-style: none; padding-left: 0; }
.acciones > li { counter-increment: accion; position: relative; padding-left: 2.4rem; margin: 1rem 0; }
.acciones > li::before {
  content: counter(accion); position: absolute; left: 0; top: .1em;
  width: 1.65rem; height: 1.65rem; border: 1.5px solid var(--enlace); border-radius: 50%;
  display: grid; place-items: center; color: var(--enlace);
  font-family: var(--f-titulos); font-stretch: condensed; font-size: .95rem; line-height: 1;
}

.ajustes .valor { font-weight: 700; color: var(--enlace); }

/* Ficha de sesión: texto monoespaciado para copiar o descargar */
.ficha {
  font-family: var(--f-ficha); font-size: .875rem; line-height: 1.55;
  background: var(--papel-2); border: 1px solid var(--linea); padding: 1rem 1.25rem; margin: 1rem 0;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
@media (max-width: 30rem) { .ficha { font-size: .8125rem; padding: .9rem; } }
.boton {
  font-size: 1rem; font-weight: 600; background: var(--tinta); color: var(--papel);
  border: 0; border-radius: 3px; padding: .6rem 1.1rem; margin: 0 .5rem .5rem 0; cursor: pointer;
}
.boton:hover { background: var(--enlace); }
.estado { font-size: 1rem; color: var(--tinta-suave); min-height: 1.5em; }

/* Leyenda de los esquemas */
.leyenda { display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; margin: .5rem 0 0; }
.leyenda dt { font-family: var(--f-titulos); font-stretch: condensed; font-weight: 700; color: var(--tinta); }
.leyenda dd { margin: 0; }
.s-cota { stroke: var(--enlace); stroke-width: 1.5; }
.s-cable { fill: none; stroke: var(--tinta-suave); stroke-width: 2; }
.e-barrido { fill: none; stroke: var(--luz); stroke-width: 2.5; stroke-linecap: round; }

/* Problemas frecuentes y referencias */
#problemas details { border-bottom: 1px solid var(--linea); padding: .4rem 0; }
#problemas details:first-of-type { border-top: 1px solid var(--linea); }
#problemas summary { cursor: pointer; font-weight: 600; font-size: 1.125rem; line-height: 1.35; padding: .4rem 0; }
#problemas details[open] summary { color: var(--enlace); }
#problemas details p { margin: .5rem 0 1rem; }
.referencias li { margin: .75rem 0; }

@media print {
  .indice, .saltar, .ultra, .umbral, .barra, .acciones-ficha { display: none !important; }
  body, .portada, .pie { background: #fff; color: #000; }
  .portada h1, .entradilla, .pie .proyecto, .pie { color: #000; }
  body { font-size: 11pt; }
  .audible { padding: 0 0 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; overflow-wrap: anywhere; }
  figure, .ajustes > div, .balance > div, details { break-inside: avoid; }
}