/* ===========================================================================
   padvitals · tema "instrumento"
   ---------------------------------------------------------------------------
   Propuesta de rediseño completo. Reutiliza EXACTAMENTE los mismos nombres de
   clase y de variable que el tema actual, así que no hace falta tocar el HTML
   ni el JavaScript: `plots.js` y `mando.js` leen --fondo, --reja, --borde,
   --texto, --texto-tenue, --acento, --trazo, --bien, --regular y --mal, y esos
   nombres se conservan.

   Idea rectora: esto no es una web de gaming, es un instrumento de medida. Se
   parece más a un osciloscopio que a una landing.

   Decisión de color importante: el acento de MARCA deja de ser verde. Antes
   coincidía con el verde de "correcto", así que el mismo color significaba dos
   cosas distintas. Ahora el cian es identidad y el verde/ámbar/rojo quedan
   reservados en exclusiva a los veredictos.
   =========================================================================== */

/* La fuente NO entra por @import: eso encadena hoja -> fuente y se midio
   565 ms hasta el texto. Va por <link> con preconnect en el <head> de cada
   pagina, y ahi las dos descargas arrancan a la vez. */

:root {
  /* Superficies: tinta azulada, no gris neutro. Da sensación de pantalla. */
  --fondo:    #0a0e14;
  --fondo-2:  #111823;
  --fondo-3:  #18212e;
  --borde:    #24303f;
  --reja:     #1b2431;
  --texto:      #e7edf6;
  --texto-tenue:#8797ab;

  /* Marca */
  --acento:   #22d3ee;
  --acento-2: #0ea5b7;
  --trazo:    #60a5fa;

  /* Veredictos: NO se usan para nada decorativo. */
  --bien:     #34d399;
  --regular:  #fbbf24;
  --mal:      #f87171;

  --radio:     14px;
  --radio-sm:  10px;
  --ancho:     1120px;
  --ancho-texto: 740px;
  --texto-lectura: 19px;
  --sobresale: 50px;

  /* Símbolo de la marca, ver .marca::before */
  --simbolo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.25' fill='none' stroke='black' stroke-width='1.6' stroke-opacity='.55'/%3E%3Cpath d='M12 4.5v15M4.5 12h15' stroke='black' stroke-width='1' stroke-opacity='.22'/%3E%3Ccircle cx='15' cy='9' r='2.6'/%3E%3Ccircle cx='15' cy='9' r='4.35' fill='none' stroke='black' stroke-width='1.1' stroke-opacity='.42'/%3E%3C/svg%3E");

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --sombra:    0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -16px rgb(0 0 0 / .6);
  --sombra-sm: 0 1px 2px rgb(0 0 0 / .25);
  --brillo:    0 0 0 1px color-mix(in srgb, var(--acento) 30%, transparent),
               0 8px 30px -12px color-mix(in srgb, var(--acento) 45%, transparent);
}

@media (prefers-color-scheme: light) {
  :root {
    --fondo:    #f7f9fc;
    --fondo-2:  #ffffff;
    --fondo-3:  #eff3f9;
    --borde:    #dde5ef;
    --reja:     #e8eef6;
    --texto:      #0d1420;
    --texto-tenue:#5a6a7f;
    --acento:   #0891b2;
    --acento-2: #0e7490;
    --trazo:    #2563eb;
    --bien:     #059669;
    --regular:  #b45309;
    --mal:      #dc2626;
    --sombra:    0 1px 2px rgb(13 20 32 / .06), 0 14px 34px -20px rgb(13 20 32 / .25);
    --sombra-sm: 0 1px 2px rgb(13 20 32 / .05);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Retícula de fondo, muy tenue. Es lo que da el aire de panel de medida sin
   cargar ninguna imagen: son dos degradados repetidos. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--borde) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--borde) 55%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  /* La máscara antes se apagaba del todo a unos 500 px: bastaba bajar un poco
     para que la retícula desapareciera y quedara un plano liso. Ahora decae en
     dos tramos y nunca llega a cero, así que el fondo conserva textura a
     cualquier altura de la página. */
  mask-image: radial-gradient(1500px 1000px at 50% -80px,
    #000 0%, rgb(0 0 0 / .5) 55%, rgb(0 0 0 / .22) 100%);
  opacity: .5;
}
/* Ambiente de marca: tres focos muy tenues en sitios distintos. Es lo que evita
   que el fondo sea un único azul plano de arriba abajo. Solo intervienen
   --acento, --acento-2 y --trazo; el verde, el ámbar y el rojo siguen siendo
   exclusivos de los veredictos. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(760px 320px at 50% -120px,
      color-mix(in srgb, var(--acento) 14%, transparent), transparent 70%),
    radial-gradient(700px 520px at 106% 18%,
      color-mix(in srgb, var(--trazo) 8%, transparent), transparent 72%),
    radial-gradient(760px 600px at -6% 92%,
      color-mix(in srgb, var(--acento-2) 8%, transparent), transparent 72%);
}

a { color: var(--acento); text-underline-offset: 3px; }
a:hover { color: var(--acento); text-decoration: underline; }

h1, h2, h3, h4 {
  font-weight: 600; line-height: 1.15; margin: 0 0 .5em;
  letter-spacing: -.025em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.15rem); font-weight: 700; letter-spacing: -.035em; }
h2 { font-size: clamp(1.45rem, 3vw, 1.95rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1.05em; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
main { padding: 40px 24px 88px; }

/* --- Cabecera ------------------------------------------------------------ */
.cab {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--borde);
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
}
.cab .contenedor { display: flex; align-items: center; gap: 18px; height: 66px; }
.marca {
  font-weight: 700; font-size: 1.16rem; text-decoration: none; color: var(--texto);
  letter-spacing: -.03em; display: inline-flex; align-items: center; gap: 2px;
}
/* El símbolo de la marca. No es un adorno inventado: es el dibujo que ya
   estaba en assets/favicon.svg — la puerta circular del stick, la cruceta, y
   el punto FUERA del centro. Eso es el drift, dibujado. Vivía solo a 16 px en
   la pestaña del navegador.

   Va como máscara y no como imagen a propósito: así lo pinta var(--acento) y
   sigue al tema en claro y en oscuro sin duplicar el fichero, y no hace falta
   tocar el <head> de las 25 páginas. Las opacidades viajan dentro del SVG
   porque la máscara se compone por canal alfa: el aro y la cruceta quedan
   tenues y el punto a plena intensidad, que es donde tiene que ir el ojo. */
.marca::before {
  content: ''; flex: none; width: 22px; height: 22px; margin-right: 8px;
  background: var(--acento);
  -webkit-mask: var(--simbolo) center / contain no-repeat;
          mask: var(--simbolo) center / contain no-repeat;
}
.marca span { color: var(--acento); }
.cab nav { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.cab nav a {
  color: var(--texto-tenue); text-decoration: none; font-size: .93rem; font-weight: 500;
  padding: 8px 13px; border-radius: var(--radio-sm); transition: color .15s, background .15s;
}
/* Al pasar por encima, el enlace se enciende con el color de marca en vez de
   apagarse a texto plano. Vale para la cabecera, el pie y el cuerpo. */
.cab nav a:hover { color: var(--acento); background: var(--fondo-3); text-decoration: none; }
.cab nav a[aria-current] { color: var(--acento); background: color-mix(in srgb, var(--acento) 10%, transparent); }
select.idioma {
  background: var(--fondo-3); color: var(--texto); border: 1px solid var(--borde);
  border-radius: var(--radio-sm); padding: 7px 10px; font: 500 .85rem var(--mono);
  cursor: pointer;
}

/* --- Tipografía de lectura ----------------------------------------------- */
.plomo { color: var(--texto-tenue); font-size: 1.24rem; line-height: 1.55; max-width: 60ch; }
.ficha { color: var(--texto-tenue); font: 500 .86rem/1.55 var(--mono); }

/* --- Páginas de contenido ------------------------------------------------ */
body.doc .contenedor { max-width: var(--ancho-texto); }
body.doc .cab .contenedor, body.doc .pie .contenedor { max-width: var(--ancho); }
body.doc main { padding: 52px 20px 96px; }
body.doc main p, body.doc main ul, body.doc main ol, body.doc .plomo { max-width: none; }
body.doc main p, body.doc main li {
  font-size: var(--texto-lectura); line-height: 1.7; color: color-mix(in srgb, var(--texto) 92%, var(--texto-tenue));
}
body.doc .plomo { font-size: 1.3rem; color: var(--texto-tenue); margin-bottom: 1.2em; }
body.doc main li { margin-bottom: 12px; }
body.doc main ul, body.doc main ol { padding-left: 26px; }
body.doc main ::marker { color: var(--acento); font-weight: 600; }

/* Marcador de sección: etiqueta monoespaciada sobre cada H2. Es el gesto que
   más "instrumento" aporta y no necesita tocar el HTML: se genera con CSS y un
   contador. */
body.doc main { counter-reset: seccion; }
body.doc main h2 { counter-increment: seccion; margin-top: 68px; position: relative; padding-top: 26px; }
body.doc main h2::before {
  content: counter(seccion, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font: 600 .74rem/1 var(--mono); letter-spacing: .18em;
  color: var(--acento); opacity: .95;
}
body.doc main h2::after {
  content: ''; position: absolute; top: 5px; left: 30px; right: 0; height: 1px;
  background: linear-gradient(to right, var(--borde), transparent 60%);
}
body.doc main h3 { margin-top: 40px; color: var(--texto); }

/* Firma del autor */
body.doc main > .ficha:first-of-type {
  padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid var(--borde);
}

/* Secciones editoriales de la portada, misma medida de lectura y centradas */
body:not(.doc) main > .articulo,
body:not(.doc) main > .faq,
body:not(.doc) main > .privacidad { max-width: 700px; margin-inline: auto; }
body:not(.doc) main > .articulo p,
body:not(.doc) main > .articulo ul,
body:not(.doc) main > .faq p { max-width: none; font-size: var(--texto-lectura); line-height: 1.7; }
body:not(.doc) main > .articulo h2,
body:not(.doc) main > .faq h2 { margin-top: 64px; }

/* --- Tarjetas ------------------------------------------------------------ */
.tarjeta {
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 24px; margin: 0 0 22px;
  box-shadow: var(--sombra);
}
.cab-tarjeta {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--reja);
}
.cab-tarjeta h3 { margin: 0; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 22px; }

/* --- Botones ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: var(--radio-sm);
  border: 1px solid var(--borde); background: var(--fondo-3); color: var(--texto);
  font: 600 .95rem var(--sans); cursor: pointer; text-decoration: none;
  transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease, background .13s ease;
}
.btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--acento) 55%, var(--borde)); color: var(--texto); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primario {
  background: linear-gradient(180deg, var(--acento), var(--acento-2));
  border-color: transparent; color: #04141a; font-weight: 700;
  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--acento) 70%, transparent);
}
.btn.primario:hover {
  color: #04141a;
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--acento) 85%, transparent);
}
.btn.grande { padding: 16px 32px; font-size: 1.04rem; }
.acciones { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 22px; }

/* --- Puerta de entrada --------------------------------------------------- */
.puerta {
  position: relative; overflow: hidden; text-align: center;
  background:
    radial-gradient(600px 240px at 50% 0%, color-mix(in srgb, var(--acento) 9%, transparent), transparent 70%),
    var(--fondo-2);
  border: 1px solid var(--borde); border-radius: 20px;
  padding: 60px 28px; margin: 12px 0 24px; box-shadow: var(--sombra);
}
.puerta::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--acento), transparent);
  opacity: .7;
}
.puerta h2 { margin: 0 0 24px; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.puerta .ficha { max-width: 52ch; margin: 18px auto 0; }
.puerta-alt {
  margin: 30px auto 0; padding-top: 24px; max-width: 52ch;
  border-top: 1px solid var(--borde); color: var(--texto-tenue); font-size: .93rem;
}

/* --- Pestañas ------------------------------------------------------------ */
.cinta {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.cinta .ficha {
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: 999px; padding: 6px 14px; font-size: .8rem;
}
.pestanas {
  display: flex; gap: 3px; margin-bottom: 26px; overflow-x: auto;
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 5px;
}
.pestana {
  background: none; border: 0; border-radius: var(--radio-sm);
  color: var(--texto-tenue); font: 600 .93rem var(--sans);
  padding: 10px 18px; cursor: pointer; white-space: nowrap;
  transition: color .15s, background .15s;
}
.pestana:hover { color: var(--acento); }
.pestana.activa { color: #04141a; background: var(--acento); }

/* --- Panel del joystick: bisel de instrumento ---------------------------- */
.panel-js { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); box-shadow: var(--sombra); }
.panel-cab {
  display: flex; align-items: center; gap: 11px; padding: 13px 17px;
  background: var(--fondo-3); border: 0; border-bottom: 1px solid var(--borde);
  font: 600 .82rem var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-tenue); border-radius: 0;
}
.panel-cab svg { width: 15px; height: 15px; color: var(--acento); flex: none; }
.panel-lienzo {
  position: relative; padding: 22px 16px; border: 0;
  background:
    linear-gradient(color-mix(in srgb, var(--acento) 3%, transparent), transparent),
    var(--fondo);
}
.panel-lienzo .marco { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
.panel-lienzo .marco::before { content: ''; display: block; padding-top: 50%; }
.panel-lienzo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.panel-ejes { display: flex; border: 0; border-top: 1px solid var(--borde); background: var(--fondo-2); }
.panel-ejes > div { flex: 1; text-align: center; padding: 11px 4px; min-width: 0; }
.panel-ejes > div + div { border-left: 1px solid var(--reja); }
.panel-ejes span { display: block; font: 600 .7rem var(--mono); letter-spacing: .12em; color: var(--texto-tenue); }
.panel-ejes pre {
  margin: 4px 0 0; font: 500 .92rem var(--mono); color: var(--texto);
  font-variant-numeric: tabular-nums;
}

/* --- Modos --------------------------------------------------------------- */
.modos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 14px; border-top: 1px solid var(--borde); background: var(--fondo-2); margin: 0;
}
.modos .modo { border-radius: var(--radio-sm); padding: 10px 12px; font-size: .87rem; width: 100%; }
.modos .modo.ancho { grid-column: 1 / -1; }
.modos .modo.activa {
  background: linear-gradient(180deg, var(--acento), var(--acento-2));
  border-color: transparent; color: #04141a;
}

/* --- Sticks grandes ------------------------------------------------------ */
.grandes { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 640px) { .grandes { grid-template-columns: 1fr; } }
.vivo-caja { text-align: center; }
.vivo-caja h4 {
  margin: 0 0 12px; font: 600 .74rem var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--texto-tenue);
}
.grandes canvas, .vivo-caja canvas {
  width: 100%; max-width: 320px; aspect-ratio: 1; display: block; margin: 0 auto;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 50%;
}
.vivo-caja .estado { font: 600 .88rem var(--mono); margin-top: 12px; letter-spacing: .04em; }
.estado.bien { color: var(--bien); } .estado.regular { color: var(--regular); }
.estado.mal { color: var(--mal); }
.estado.moviendo, .estado.desconocido { color: var(--texto-tenue); }

/* --- Métricas y veredictos ----------------------------------------------- */
.metrica {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--reja); font-size: .94rem;
}
.metrica:last-child { border-bottom: 0; }
.metrica span { color: var(--texto-tenue); }
.metrica var {
  font: 500 .95rem var(--mono); font-style: normal; color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.sello {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px;
  border-radius: 999px; font: 600 .74rem var(--mono);
  text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
}
.sello::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.sello.bien    { color: var(--bien);    background: color-mix(in srgb, var(--bien) 13%, transparent); }
.sello.regular { color: var(--regular); background: color-mix(in srgb, var(--regular) 13%, transparent); }
.sello.mal     { color: var(--mal);     background: color-mix(in srgb, var(--mal) 13%, transparent); }
.sello.desconocido { color: var(--texto-tenue); background: var(--fondo-3); }
.dictamen {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--radio-sm);
  background: var(--fondo-3); font-size: .93rem; line-height: 1.6;
  border-left: 3px solid var(--borde);
}
.dictamen.bien { border-left-color: var(--bien); }
.dictamen.regular { border-left-color: var(--regular); }
.dictamen.mal { border-left-color: var(--mal); }
.dictamen.desconocido { border-left-color: var(--texto-tenue); }

/* --- Progreso y cuenta atrás --------------------------------------------- */
.progreso {
  height: 6px; background: var(--fondo-3); border-radius: 999px; overflow: hidden;
  border: 1px solid var(--borde);
}
.progreso i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--acento-2), var(--acento));
  transition: width .1s linear;
}
.cuenta { font: 700 3rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--acento); }
.instruccion { font-size: 1.05rem; line-height: 1.6; }
.instruccion strong { color: var(--acento); }

/* --- Tablas -------------------------------------------------------------- */
.contenedor table {
  display: table; width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden;
  margin: 0 0 30px; background: var(--fondo-2); box-shadow: var(--sombra);
  font-size: 1rem;
}
.contenedor table caption {
  text-align: left; padding: 0 0 11px; color: var(--texto-tenue);
  font: 600 .74rem var(--mono); letter-spacing: .13em; text-transform: uppercase;
}
.contenedor th {
  background: var(--fondo-3); color: var(--texto-tenue);
  font: 600 .74rem var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--borde);
}
.contenedor td { padding: 14px 18px; border-bottom: 1px solid var(--reja); vertical-align: top; }
.contenedor td:first-child { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.contenedor tbody tr:last-child td { border-bottom: 0; }
.contenedor tbody tr:hover { background: color-mix(in srgb, var(--acento) 5%, transparent); }
@media (min-width: 860px) {
  body.doc main table { width: calc(100% + var(--sobresale) * 2); margin-left: calc(var(--sobresale) * -1); }
  body.doc main > .tarjeta { width: calc(100% + var(--sobresale) * 2); margin-left: calc(var(--sobresale) * -1); }
}
@media (max-width: 660px) { .contenedor table { display: block; overflow-x: auto; } }

/* --- Pasos --------------------------------------------------------------- */
.pasos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px; margin: 28px 0 0; padding: 0; list-style: none;
}
.pasos li {
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra-sm);
  position: relative; transition: border-color .15s, transform .15s;
}
.pasos li:hover { border-color: color-mix(in srgb, var(--acento) 45%, var(--borde)); transform: translateY(-2px); }
.pasos b {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 9px; background: color-mix(in srgb, var(--acento) 15%, transparent);
  color: var(--acento); font: 600 .88rem var(--mono); margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--acento) 32%, transparent);
}
.pasos strong { display: block; margin-bottom: 7px; font-size: 1.02rem; }
.pasos p { margin: 0; font-size: .93rem; color: var(--texto-tenue); line-height: 1.6; }

/* --- Índice de guías -----------------------------------------------------
   Era una pila de cajas sueltas, y se veía mal por dos motivos que no eran de
   gusto sino de especificidad: `body.doc main h3` le colaba 40 px de margen
   superior a cada título (65 px de banda vacía dentro de la caja) y
   `body.doc main p` pintaba la descripción a 19 px casi blancos, el peso del
   cuerpo de un artículo. Las reglas de aquí abajo existían, pero perdían.

   El rediseño usa el idioma que el tema ya tiene en `.metrica` y
   `.panel-ejes`: un solo panel hundido en la hoja, con filas separadas por
   filete. Un índice de instrumento, no un escaparate de tarjetas.
   ------------------------------------------------------------------------- */
.lista-guias {
  display: block;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 38px;
  box-shadow: var(--sombra-sm);
}
.lista-guias .tarjeta {
  position: relative;
  margin: 0; padding: 18px 54px 18px 22px;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  transition: background .15s ease;
}
.lista-guias .tarjeta + .tarjeta { border-top: 1px solid var(--reja); }
.lista-guias .tarjeta:hover { background: color-mix(in srgb, var(--acento) 7%, transparent); }

/* Raíl que se enciende en la fila activa. */
.lista-guias .tarjeta::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--acento); opacity: 0; transition: opacity .15s ease;
}
.lista-guias .tarjeta:hover::before { opacity: 1; }

/* Flecha que avanza al pasar por encima. Va escapada, no como carácter, para
   no depender de con qué charset sirva el servidor esta hoja. */
.lista-guias .tarjeta::after {
  content: '\2192'; position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  color: var(--texto-tenue); font: 400 1.15rem/1 var(--mono);
  transition: transform .18s ease, color .18s ease;
}
.lista-guias .tarjeta:hover::after {
  color: var(--acento); transform: translateY(-50%) translateX(5px);
}

/* Los dos selectores llevan `body.doc main` a propósito: sin eso vuelven a
   perder contra las reglas de lectura y reaparece el hueco de 65 px. */
body.doc main .lista-guias h3 {
  margin: 0 0 4px; font-size: 1.04rem; line-height: 1.3;
}
body.doc main .lista-guias p {
  margin: 0; color: var(--texto-tenue); font-size: .95rem; line-height: 1.55;
  max-width: 62ch;
}
.lista-guias h3 a { text-decoration: none; color: var(--texto); }
.lista-guias .tarjeta:hover h3 a { color: var(--acento); }
/* Toda la fila es zona de clic, no solo el título. Dos líneas, y deja de ser
   una lista donde hay que apuntar a un texto de 1 rem. */
.lista-guias h3 a::after { content: ''; position: absolute; inset: 0; }
.lista-guias h3 a:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }

/* El mismo desajuste, en las tarjetas sueltas de las guías: el margen del
   último párrafo dejaba 44 px abajo contra 24 px arriba. */
body.doc main .tarjeta > :last-child { margin-bottom: 0; }

.guias { margin-top: 14px; padding-left: 26px; }
.guias li { margin-bottom: 10px; }

@media (max-width: 560px) {
  .lista-guias .tarjeta { padding: 16px 44px 16px 18px; }
  .lista-guias .tarjeta::after { right: 16px; }
}

/* --- Preguntas frecuentes ------------------------------------------------ */
.faq details {
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: var(--radio); margin-bottom: 11px; box-shadow: var(--sombra-sm);
  transition: border-color .15s;
}
.faq details[open] { border-color: color-mix(in srgb, var(--acento) 40%, var(--borde)); }
.faq summary {
  cursor: pointer; padding: 17px 20px; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 14px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; color: var(--acento); font: 400 1.45rem/1 var(--mono);
  flex: none; transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  margin: 0; padding: 0 20px 19px; color: var(--texto-tenue);
  font-size: 1rem !important; line-height: 1.65;
}

/* --- Aviso / 404 --------------------------------------------------------- */
.aviso {
  text-align: center; padding: 56px 24px; border: 1px dashed var(--borde);
  border-radius: var(--radio); background: var(--fondo-2);
}
.aviso strong, .aviso h1 { display: block; font-size: 1.3rem; margin-bottom: 10px; }
.aviso p { color: var(--texto-tenue); margin: 0 0 8px; }
.privacidad {
  font-size: .93rem; color: var(--texto-tenue);
  display: flex; gap: 10px; align-items: center; margin-top: 18px;
}
.parpadea { animation: lat 2s ease-in-out infinite; }
@keyframes lat { 50% { border-color: var(--acento); } }
.ok-txt { color: var(--bien) !important; }
.aviso-txt { color: var(--regular) !important; }
.anuncio {
  min-height: 250px; display: grid; place-items: center; margin: 28px 0;
  border: 1px dashed var(--borde); border-radius: var(--radio);
  color: var(--texto-tenue); font: 500 .78rem var(--mono); background: var(--fondo-2);
}

/* --- Gatillos y barras --------------------------------------------------- */
.gatillos label { display: flex; align-items: center; gap: 12px; font: 500 .82rem var(--mono); color: var(--texto-tenue); margin-bottom: 10px; }
.gatillos label span { width: 26px; }
.barra {
  flex: 1; height: 10px; background: var(--fondo-3); border-radius: 999px;
  border: 1px solid var(--borde); position: relative; overflow: hidden;
}
.barra::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: var(--v, 0%);
  background: linear-gradient(90deg, var(--acento-2), var(--acento)); transition: width .04s linear;
}

/* --- Mando dibujado ------------------------------------------------------ */
.pad { width: 100%; max-width: 460px; display: block; margin: 0 auto; }
.pv-g1 { stop-color: var(--fondo-3); } .pv-g2 { stop-color: var(--fondo-2); }
.pv-p1 { stop-color: var(--fondo); }   .pv-p2 { stop-color: var(--fondo-3); }
.pad-cuerpo { fill: url(#pv-cuerpo); stroke: var(--borde); stroke-width: 2.5; }
.pad-b, .pad-pista { fill: var(--fondo); stroke: var(--borde); stroke-width: 1.5; transition: fill .06s ease-out; }
.pad-b.on { fill: var(--acento); stroke: var(--acento); }
.pad-mini { fill: var(--fondo-3); }
.pad-gat { fill: var(--trazo); }
.pad-pozo { fill: url(#pv-pozo); stroke: var(--borde); stroke-width: 2; }
.pad-cana { transition: transform .03s linear; }
.pad-cana-base { fill: var(--fondo-3); stroke: var(--borde); stroke-width: 1; }
.pad-cana-tapa { fill: var(--fondo-2); }
.pad-etq { fill: var(--texto-tenue); font: 600 10px var(--mono); text-anchor: middle; user-select: none; }
.pad-ds { fill: var(--fondo-3); }
.pad-ds #Outline, .pad-ds #Controller { fill: var(--texto-tenue); }
.pad-ds #Controller_infills { fill: var(--fondo-3); }
.pad-ds #Speaker_grill { fill: var(--texto-tenue); }
.pad-ds #Button_outlines, .pad-ds #Button_outlines_behind, .pad-ds #Trackpad_outline,
.pad-ds #L3_outline, .pad-ds #R3_outline, .pad-ds #L3_surround, .pad-ds #R3_surround,
.pad-ds #L3_outline_, .pad-ds #R3_outline_ { fill: var(--texto); }
.pad-ds #Trackpad_infill, .pad-ds #L3_infill, .pad-ds #R3_infill { fill: var(--fondo); }
.pad-ds #Button_infills { fill: transparent; }
.pad-ds #Button_infills > g { transition: fill .06s ease-out; }
.pad-ds #Button_infills > g.on, .pad-ds #Trackpad_infill.on,
.pad-ds #L3_infill.on, .pad-ds #R3_infill.on { fill: var(--acento); }
.pad-ds #L3, .pad-ds #R3 { transition: transform .03s linear; }
.pad-ds #TriggerPercentages text { fill: var(--acento); font-family: var(--mono); font-weight: 600; }
.pad-toques circle { fill: var(--acento); fill-opacity: .85; }
.pad-toques circle[data-dedo="1"] { fill: var(--trazo); }
.pad-rejilla { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.pad-rejilla b, .pad-extra b {
  min-width: 34px; text-align: center; padding: 6px 9px; border-radius: 9px;
  background: var(--fondo-3); border: 1px solid var(--borde);
  color: var(--texto-tenue); font: 500 .8rem var(--mono);
}
.pad-rejilla b.on { background: var(--acento); border-color: var(--acento); color: #04141a; }
.pad-extra { display: flex; gap: 7px; justify-content: center; margin-top: 12px; }
.pad-extra b { background: var(--acento); border-color: var(--acento); color: #04141a; font-weight: 700; }

/* --- Operaciones de calibración ------------------------------------------
   dualshock-tools apila botones de colores: azul para actuar, verde para
   guardar, rojo para reiniciar. Aquí no se puede y no se debe:

   - El verde, el ámbar y el rojo son VEREDICTOS. Un "guardar" verde diría a la
     vez "guardado" y "tu stick está bien" — el mismo fallo que ya se corrigió
     cuando el acento de marca era el verde de "correcto".
   - Y su rojo está en el sitio equivocado: "reiniciar el mando" no es el
     peligro, es la red de seguridad. Es lo único que deshace una calibración
     mala, porque el botón físico del mando NO lo hace. En rojo empuja a no
     tocarlo justo cuando hace falta.

   En su lugar, una lista de operaciones: índice, qué hace, y su acción. Es el
   idioma que ya usan .metrica y .panel-ejes.                                */
.ops { counter-reset: op; border-top: 1px solid var(--reja); margin: 20px 0 0; }
.op {
  counter-increment: op;
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center; gap: 16px;
  padding: 16px 4px; border-bottom: 1px solid var(--reja);
}
.op::before {
  content: counter(op, decimal-leading-zero);
  font: 600 .82rem/1 var(--mono); letter-spacing: .1em; color: var(--texto-tenue);
  transition: color .15s ease;
}
.op:hover::before { color: var(--acento); }
.op h4 { margin: 0 0 4px; font-size: 1.04rem; font-weight: 600; }
.op p  { margin: 0; font-size: .94rem; line-height: 1.5; color: var(--texto-tenue); }
.op .btn { white-space: nowrap; }
@media (max-width: 620px) {
  .op { grid-template-columns: 26px minmax(0, 1fr); gap: 10px 12px; }
  .op .btn { grid-column: 2; justify-self: start; margin-top: 10px; }
}

/* El estado de la memoria del mando es informativo, no un veredicto: va en el
   color de marca. `quieto` apaga el punto cuando no hay nada pendiente. */
.sello.info {
  color: var(--acento);
  background: color-mix(in srgb, var(--acento) 13%, transparent);
}
.sello.quieto::before { box-shadow: none; opacity: .55; }

/* Nota funcional, sin tono de advertencia: dice en qué estado estás, no asusta. */
.nota-estado {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: .94rem; line-height: 1.55; color: var(--texto-tenue);
  margin: 0 0 16px;
}
.nota-estado::before {
  content: ''; flex: none; width: 3px; align-self: stretch;
  background: var(--acento); border-radius: 2px; opacity: .55;
}

/* --- Calibración --------------------------------------------------------- */
.calib-asistente {
  margin-top: 20px; padding: 20px; border: 1px solid var(--borde);
  border-radius: var(--radio); background: var(--fondo-3);
}
.calib-asistente h4 { margin: 0 0 12px; }
.calib-asistente .instruccion { margin: 0; min-height: 2.6em; }
.calib-asistente .progreso { margin: 16px 0; }
.calib-guardar { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--borde); }
.calib-datos { margin-top: 14px; text-align: left; }
.prueba { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
@media (max-width: 900px) { .prueba { grid-template-columns: 1fr; } }

/* --- Pie ----------------------------------------------------------------- */
.pie {
  border-top: 1px solid var(--borde); padding: 34px 0; margin-top: 60px;
  color: var(--texto-tenue); font-size: .9rem; background: var(--fondo-2);
}
.pie .contenedor { display: flex; gap: 22px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.pie nav { display: flex; gap: 22px; flex-wrap: wrap; }
.pie a { color: var(--texto-tenue); text-decoration: none; display: inline-block; padding: 8px 0; min-height: 24px; }
.pie a:hover { color: var(--acento); }
.creditos { font-size: .82rem; color: var(--texto-tenue); }

[hidden] { display: none !important; }

/* --- Móvil --------------------------------------------------------------- */
@media (max-width: 560px) {
  :root { --texto-lectura: 17px; }
  body { font-size: 16px; }
  main, body.doc main { padding: 28px 18px 64px; }
  .contenedor { padding: 0 18px; }
  .puerta { padding: 42px 20px; }
  .modos { grid-template-columns: 1fr; }
  body.doc main h2 { margin-top: 48px; }
  .pie .contenedor { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ===========================================================================
   RELIEVE DE LAS PÁGINAS DE CONTENIDO
   ---------------------------------------------------------------------------
   El problema medido: una guía es `h1 → p → h2 → ul → tabla → h2 → p`, sin una
   sola caja, imagen ni separador, y todo eso sobre un único plano de color. A
   partir del primer scroll no hay nada que indique avance.

   La paleta no cambia (el oscuro se queda). Lo que cambia es que ahora hay
   TRES planos en vez de uno:

     fondo de página   --fondo     retícula y ambiente, lo que rodea
     hoja de lectura   --fondo-2   el artículo, elevado sobre el fondo
     piezas embebidas  --fondo     tablas y listas, hundidas en la hoja
     piezas elevadas   --fondo-3   tarjetas, por encima de la hoja

   Es el recurso de un panel de instrumento: chasis, placa y pantallas
   embutidas. Todo sale de las variables que ya existían, así que el modo claro
   funciona sin escribir una sola regla más.

   Se hace entero por CSS a propósito: las guías las escupen `gen-guias.mjs` y
   `gen-modelos.mjs`, y cualquier marcado añadido a mano se perdería en la
   siguiente regeneración.
   =========================================================================== */

body.doc {
  /* El vuelo de las tablas fuera de la columna se reduce: antes sobresalían de
     un borde que no existía, ahora tienen que caber dentro de la hoja. */
  --sobresale: 30px;
}

body.doc main.contenedor {
  position: relative;
  max-width: calc(var(--ancho-texto) + 60px);
  padding: 52px 48px 72px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--acento) 6%, transparent), transparent 320px),
    var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: 20px;
  box-shadow: var(--sombra);
}
/* Filo iluminado en el canto superior, el mismo gesto que ya usa .puerta. */
body.doc main.contenedor::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(to right, transparent,
    color-mix(in srgb, var(--acento) 70%, transparent), transparent);
}

/* Piezas hundidas en la hoja: si la tabla siguiera en --fondo-2 se fundiría
   con ella, porque la hoja ya es ese color. */
body.doc main.contenedor table,
body.doc main.contenedor .anuncio { background: var(--fondo); }
body.doc main.contenedor th { background: var(--fondo-3); }

/* Piezas elevadas sobre la hoja. */
body.doc main.contenedor .tarjeta { background: var(--fondo-3); }

/* Las listas dejan de ser párrafos con viñetas y pasan a ser bloques con
   cuerpo propio. En una guía sin imágenes es lo único, aparte de las tablas,
   que corta el muro de texto. Se excluyen las listas con clase (.lista-guias,
   .pasos, .guias) porque ya tienen su propio tratamiento. */
body.doc main.contenedor > ul:not([class]),
body.doc main.contenedor > ol:not([class]),
body:not(.doc) main > .articulo > ul:not([class]),
body:not(.doc) main > .articulo > ol:not([class]),
body:not(.doc) main > .articulo > ul.explica {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-left: 3px solid color-mix(in srgb, var(--acento) 45%, var(--borde));
  border-radius: var(--radio-sm);
  padding: 20px 26px 20px 46px;
  margin: 0 0 28px;
}
body.doc main.contenedor > ul:not([class]) > li:last-child,
body.doc main.contenedor > ol:not([class]) > li:last-child,
body:not(.doc) main > .articulo > ul > li:last-child,
body:not(.doc) main > .articulo > ol > li:last-child { margin-bottom: 0; }

/* El hilo del H2 llegaba apagado al 60 % del ancho y se perdía; dentro de la
   hoja tiene que leerse como separador de sección de lado a lado. */
body.doc main.contenedor h2::after {
  background: linear-gradient(to right, var(--borde) 0,
    color-mix(in srgb, var(--borde) 25%, transparent) 100%);
}

/* La hoja necesita aire lateral cuando la ventana se estrecha, y deja de tener
   sentido como hoja cuando ya no cabe: en móvil se convierte en una banda de
   borde a borde, que es lo que hace cualquier lector decente. */
@media (max-width: 920px) {
  body.doc main.contenedor {
    max-width: none; margin: 0 22px; padding: 44px 34px 64px;
  }
}
@media (max-width: 560px) {
  body.doc main.contenedor {
    margin: 0; padding: 34px 20px 56px;
    border-radius: 0; border-left: 0; border-right: 0;
  }
  body.doc main.contenedor > ul:not([class]),
  body.doc main.contenedor > ol:not([class]) { padding: 16px 18px 16px 38px; }
}

/* --- La misma hoja fuera de las guías ------------------------------------
   La portada y /resultado/ terminan en secciones de texto largo que sufrían
   exactamente lo mismo que las guías: párrafos sueltos sobre el plano de
   fondo. Con esto no queda ninguna página de la web con texto desnudo, y el
   sistema de planos es el mismo en todas.

   La medida de lectura se mantiene: 796 px de hoja menos 96 px de márgenes
   internos = 700 px de columna, los mismos que en las guías.              */

body:not(.doc) main > .articulo,
body:not(.doc) main > .faq {
  position: relative;
  max-width: 796px;
  padding: 44px 48px 52px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--acento) 6%, transparent), transparent 260px),
    var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: 20px;
  box-shadow: var(--sombra);
}
/* La hoja necesita su propio aire por arriba. Antes la separación la daba de
   rebote el margin-top del primer H2, y al anularlo para que el título no
   bailara dentro del panel, .pasos quedó pegado al borde de la hoja (medido:
   0 px). Ahora el hueco lo pone la hoja, que es a quien le corresponde. */
body:not(.doc) main > .articulo,
body:not(.doc) main > .faq { margin-top: 44px; }
body:not(.doc) main > .articulo::before,
body:not(.doc) main > .faq::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(to right, transparent,
    color-mix(in srgb, var(--acento) 70%, transparent), transparent);
}
/* El primer título ya no necesita separarse de nada: lo hace el borde. */
body:not(.doc) main > .articulo > :first-child,
body:not(.doc) main > .faq > :first-child { margin-top: 0; }

/* Los desplegables de las preguntas estaban en --fondo-2, que ahora es el
   color de la propia hoja: se fundirían con ella. Suben un plano. */
body:not(.doc) main > .faq details { background: var(--fondo-3); }

@media (max-width: 700px) {
  body:not(.doc) main > .articulo,
  body:not(.doc) main > .faq {
    padding: 32px 22px 40px; border-radius: 16px; margin-top: 32px;
  }
}