/* Portal de desarrolladores de Revísame. Estilo "cuaderno de laboratorio": papel, tinta, reglas
   finas, etiquetas en monoespaciada y un solo acento lima. Sin fuentes ni recursos externos. */
:root {
  --fondo: #f6f5ef;
  --superficie: #fbfaf5;
  --superficie-2: #eeede5;
  --texto: #111110;
  --tenue: #5a5a53;
  --regla: #111110;
  --borde: #cfcec4;
  --acento: #d6f24a;           /* lima: resaltado, nunca texto sobre papel */
  --acento-tinta: #111110;     /* texto que va SOBRE la lima */
  --acento-suave: #f0fbc4;
  --rosa: #ffd6ec;
  --aviso: #6b2a4c;
  --codigo-fondo: #ebeae1;
  --pre-fondo: #fbfaf5;
  --pre-texto: #111110;
  --ancho-lateral: 248px;
  --fuente: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --titular: "Helvetica Neue", "Arial Black", Arial, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #121210; --superficie: #191917; --superficie-2: #22221f; --texto: #f1f0e8; --tenue: #a6a59b;
    --regla: #f1f0e8; --borde: #3a3a35; --acento-suave: #2a3110; --rosa: #3d2230; --aviso: #ffc2e2;
    --codigo-fondo: #262622; --pre-fondo: #191917; --pre-texto: #f1f0e8; color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --fondo: #121210; --superficie: #191917; --superficie-2: #22221f; --texto: #f1f0e8; --tenue: #a6a59b;
  --regla: #f1f0e8; --borde: #3a3a35; --acento-suave: #2a3110; --rosa: #3d2230; --aviso: #ffc2e2;
  --codigo-fondo: #262622; --pre-fondo: #191917; --pre-texto: #f1f0e8; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.6 var(--fuente); }
a { color: var(--texto); text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 3px; text-underline-offset: 3px; }
a:hover { background: var(--acento); color: var(--acento-tinta); text-decoration: none; }
:focus-visible { outline: 2px solid var(--regla); outline-offset: 2px; }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 12px; top: 12px; z-index: 50; background: var(--acento); color: var(--acento-tinta); padding: 8px 12px; }
.tenue { color: var(--tenue); }
.mono, .ceja, .nav-grupo, .aviso-sup, th, .etiqueta, .metodo, .tarjeta h3, .paginacion a, .pie, .boton-tema, .boton-menu, .copiar {
  font-family: var(--mono); }

/* Franja superior */
.aviso-sup { margin: 12px 20px 0; padding: 6px 10px; border: 1px solid var(--regla); font-size: 11px; letter-spacing: .04em; }
.aviso-sup strong { font-weight: 700; }

/* Barra */
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; height: 60px; margin: 0 20px;
  background: var(--fondo); border-bottom: 1px solid var(--regla); }
.marca { display: flex; align-items: baseline; gap: 10px; font: 700 17px var(--mono); letter-spacing: .02em; text-transform: uppercase;
  color: var(--texto); text-decoration: none; white-space: nowrap; }
.marca:hover { background: none; color: var(--texto); }
.marca .tenue { font-weight: 400; font-size: 13px; }
.logo { display: none; }
.barra-enlaces { margin-left: auto; display: flex; gap: 4px; }
.barra-enlaces a { font: 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 5px 8px; text-decoration: none; }
.boton-tema, .boton-menu { font-size: 12px; text-transform: uppercase; background: var(--fondo); color: var(--texto); border: 1px solid var(--regla);
  border-radius: 0; padding: 6px 10px; cursor: pointer; min-height: 34px; }
.boton-tema:hover, .boton-menu:hover { background: var(--acento); color: var(--acento-tinta); }
.boton-menu { display: none; }

/* Estructura */
.marco { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.lateral { position: sticky; top: 60px; align-self: start; height: calc(100vh - 60px); overflow-y: auto; padding: 28px 18px 40px 0; border-right: 1px solid var(--borde); }
.lateral ul { list-style: none; margin: 0 0 14px; padding: 0; }
.lateral a { display: block; padding: 4px 8px; color: var(--texto); text-decoration: none; font-size: 14.5px; border-left: 3px solid transparent; }
.lateral a:hover { background: var(--superficie-2); color: var(--texto); }
.lateral a[aria-current="page"] { background: var(--acento); color: var(--acento-tinta); font-weight: 700; border-left-color: var(--regla); }
.nav-grupo { margin: 16px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }

main { padding: 36px 0 48px 48px; min-width: 0; }
article { max-width: 840px; counter-reset: seccion; }

/* Tipografía */
.ceja { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
h1 { font: 800 clamp(2.1rem, 4.2vw, 3.1rem)/1.05 var(--titular); letter-spacing: -0.035em; margin: 0 0 20px; }
h1 mark, .heroe mark { background: var(--acento); color: var(--acento-tinta); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
article > h2 { counter-increment: seccion; font: 800 1.55rem/1.15 var(--titular); letter-spacing: -0.02em; margin: 48px 0 14px; padding-top: 14px; border-top: 1px solid var(--regla); }
article > h2::before { content: "§ " counter(seccion, decimal-leading-zero); display: block; margin-bottom: 6px; font: 700 11px var(--mono); letter-spacing: .1em; color: var(--tenue); }
h2 { font: 800 1.4rem/1.2 var(--titular); letter-spacing: -0.02em; margin: 40px 0 12px; }
h3 { font: 700 1.08rem/1.3 var(--titular); letter-spacing: -0.01em; margin: 26px 0 8px; }
p, ul, ol { margin: 0 0 14px; }
li { margin: 4px 0; }
strong { font-weight: 700; }

/* Código */
code { font-family: var(--mono); font-size: .86em; background: var(--codigo-fondo); padding: 1px 5px; overflow-wrap: anywhere; }
pre { position: relative; background: var(--pre-fondo); color: var(--pre-texto); padding: 34px 16px 16px; border: 1px solid var(--regla);
  overflow-x: auto; font-size: 13.5px; line-height: 1.55; margin: 0 0 18px; }
pre::before { content: "SHELL / JSON"; position: absolute; top: 8px; left: 12px; font: 700 10px var(--mono); letter-spacing: .1em; color: var(--tenue); }
pre code { background: none; padding: 0; color: inherit; font-size: inherit; overflow-wrap: normal; }
.copiar { position: absolute; top: 6px; right: 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  background: var(--fondo); color: var(--texto); border: 1px solid var(--regla); padding: 3px 8px; cursor: pointer; }
.copiar:hover { background: var(--acento); color: var(--acento-tinta); }

/* Tablas */
.tabla-scroll { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--regla); }
table { border-collapse: collapse; width: 100%; font-size: 14px; background: var(--superficie); }
th, td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--borde); }
th { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--regla); white-space: nowrap; }
td + td, th + th { border-left: 1px solid var(--borde); }
tr:last-child td { border-bottom: 0; }
tr:target td { background: var(--acento); color: var(--acento-tinta); }

/* Bloques */
.nota, .aviso, .clave { padding: 12px 16px; margin: 0 0 18px; border: 1px solid var(--regla); background: var(--superficie); }
.nota { border-left: 6px solid var(--acento); }
.aviso { background: var(--rosa); color: var(--texto); }
.clave { background: var(--acento-suave); border-left: 6px solid var(--regla); font-size: 15.5px; }
.etiqueta { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px;
  border: 1px solid var(--regla); vertical-align: middle; white-space: nowrap; }
.etiqueta.req { background: var(--acento); color: var(--acento-tinta); border-color: var(--acento); }
.etiqueta.prox { background: var(--rosa); color: var(--texto); }
.metodo { display: inline-block; min-width: 48px; text-align: center; font-size: 11px; font-weight: 700; padding: 3px 6px; vertical-align: middle; border: 1px solid var(--regla); }
.m-get { background: var(--fondo); color: var(--texto); }
.m-post { background: var(--acento); color: var(--acento-tinta); }
.operacion { margin-bottom: 28px; }
.operacion h2 { border-top: 1px solid var(--regla); padding-top: 14px; }
.operacion h2 code { background: none; font-size: 1.05rem; }
.resumen { font-weight: 700; }
.indice-ops { list-style: none; padding: 0; border: 1px solid var(--regla); }
.indice-ops li { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--borde); }
.indice-ops li:last-child { border-bottom: 0; }
.indice-ops a { text-decoration: none; }
.lista-errores { columns: 2 220px; }

.pasos { counter-reset: paso; list-style: none; padding: 0; }
.pasos > li { counter-increment: paso; position: relative; padding: 0 0 0 56px; margin-bottom: 28px; }
.pasos > li::before { content: counter(paso, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 40px; height: 40px;
  display: grid; place-items: center; border: 1px solid var(--regla); background: var(--acento); color: var(--acento-tinta); font: 700 14px var(--mono); }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; margin: 0 0 24px; border: 1px solid var(--regla); background: var(--borde); }
.tarjeta { padding: 14px 16px; background: var(--superficie); }
.tarjeta h3 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tarjeta p { margin: 0; font-size: 14.5px; }

.diagrama { margin: 8px 0 22px; padding: 12px; border: 1px solid var(--regla); background: var(--superficie); overflow-x: auto; }
.diagrama svg { display: block; width: 100%; min-width: 560px; height: auto; }
.diagrama text { font: 12.5px var(--mono); fill: var(--texto); }
.diagrama rect { rx: 0; ry: 0; }
.diagrama .caja { fill: var(--superficie); stroke: var(--regla); }
.diagrama .caja-ok { fill: var(--acento-suave); stroke: var(--regla); stroke-width: 1.5; }
.diagrama .caja-no { fill: var(--rosa); stroke: var(--regla); }
.diagrama .flecha { stroke: var(--regla); fill: none; stroke-width: 1.3; }
.diagrama .punta { fill: var(--regla); }
.diagrama .rotulo { fill: var(--tenue); font-size: 11px; }

dl.glosario dt { font-weight: 700; margin-top: 16px; }
dl.glosario dd { margin: 2px 0 0; }

/* Portada */
.heroe { margin: 0 0 28px; }
.heroe h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); margin-bottom: 18px; }
.heroe .bajada { font-size: 18px; max-width: 620px; margin: 0 0 22px; }
.fila-datos { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--regla); border-bottom: 1px solid var(--regla); margin: 0 0 20px; }
.fila-datos span { font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 9px 22px 9px 0; }
.boton-lima { display: inline-block; font: 700 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 10px 14px;
  background: var(--acento); color: var(--acento-tinta); border: 1px solid var(--regla); text-decoration: none; margin: 0 8px 8px 0; }
.boton-lima.hueco { background: var(--fondo); color: var(--texto); }
.boton-lima:hover { background: var(--regla); color: var(--fondo); }

.paginacion { display: flex; justify-content: space-between; gap: 0; max-width: 840px; margin-top: 44px; border: 1px solid var(--regla); }
.paginacion a { flex: 1; padding: 14px 16px; text-decoration: none; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.paginacion a + a { border-left: 1px solid var(--regla); }
.paginacion .sig { text-align: right; }
.pie { max-width: 840px; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--regla); color: var(--tenue); font-size: 12px; }

@media (max-width: 900px) {
  .aviso-sup { margin: 10px 16px 0; }
  .barra { margin: 0 16px; gap: 10px; }
  .barra-enlaces { display: none; }
  .boton-menu { display: inline-block; }
  .boton-tema { margin-left: auto; }
  .marca .tenue { display: none; }
  .marco { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
  .lateral { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--regla); padding: 12px 0; }
  html.js .lateral:not(.abierta) { display: none; }
  main { padding: 26px 0 40px; }
  .paginacion { flex-direction: column; }
  .paginacion a + a { border-left: 0; border-top: 1px solid var(--regla); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
@media print { .aviso-sup, .barra, .lateral, .paginacion, .copiar { display: none !important; } .marco { display: block; } }

/* Probador en vivo */
.probador { border: 1px solid var(--regla); padding: 18px; margin: 0 0 24px; background: var(--superficie); }
.prob-modos { display: flex; gap: 0; margin: 0 0 16px; border: 1px solid var(--regla); width: fit-content; }
.prob-tab { font: 700 11.5px var(--mono); text-transform: uppercase; letter-spacing: .05em; padding: 8px 12px; background: var(--fondo); color: var(--texto); border: 0; cursor: pointer; }
.prob-tab + .prob-tab { border-left: 1px solid var(--regla); }
.prob-tab[aria-selected="true"] { background: var(--regla); color: var(--fondo); }
.prob-tab:disabled { opacity: .45; cursor: not-allowed; }
.prob-llave { margin: 0 0 16px; }
.prob-llave label { display: block; font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.prob-llave input { width: 100%; max-width: 460px; font: 14px var(--mono); padding: 9px 10px; border: 1px solid var(--regla); background: var(--fondo); color: var(--texto); }
.prob-escenarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 0 0 16px; }
.prob-escenario { text-align: left; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--regla); background: var(--fondo); color: var(--texto); cursor: pointer; font: inherit; }
.prob-escenario strong { font: 700 13px var(--mono); }
.prob-escenario span { font-size: 13.5px; }
.prob-escenario code { font-size: 10.5px; background: none; padding: 0; color: var(--tenue); }
.prob-escenario:hover { background: var(--superficie-2); }
.prob-escenario[aria-pressed="true"] { background: var(--acento); color: var(--acento-tinta); }
.prob-escenario[aria-pressed="true"] code { color: var(--acento-tinta); }
.prob-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; }
.prob-acciones .boton-lima { margin: 0; cursor: pointer; }
.prob-acciones .boton-lima:disabled { opacity: .5; cursor: not-allowed; background: var(--superficie-2); color: var(--tenue); }
.prob-linea { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--regla); margin: 0 0 18px; }
.prob-linea li { margin: 0; padding: 10px 12px; font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); }
.prob-linea li + li { border-left: 1px solid var(--borde); }
.prob-linea li.activo { color: var(--texto); background: var(--superficie-2); }
.prob-linea li.activo::before { content: "● "; }
.prob-linea li.hecho { background: var(--acento); color: var(--acento-tinta); }
.prob-linea li.hecho::before { content: "✓ "; }
.prob-linea li.sin-cobro { background: var(--rosa); color: var(--texto); }
.prob-linea li.error { background: var(--rosa); color: var(--texto); }
.prob-paneles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.probador pre { max-height: 360px; }
@media (max-width: 900px) { .prob-paneles, .prob-linea { grid-template-columns: 1fr; } .prob-linea li + li { border-left: 0; border-top: 1px solid var(--borde); } }
.prob-paneles > section, .probador section { min-width: 0; }