/* Estilos del sitio de manuales (manuales.anaquelia.com). Mismas marcas de color y tipografía que
   anaquelia.com (landing/legal.css), pero autocontenido: el sitio se publica por separado. */
:root{
  --tinta:#12362A; --tinta-2:#1C4A39; --papel:#F5EDDA; --papel-2:#FBF6E9;
  --estraza:#E6D3AB; --estraza-2:#D7BF8D; --rotulo:#F4B823; --chile:#C4381F;
  --texto:#1B1A16; --texto-2:#4F4A3D; --linea:#D9C9A5;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --cuerpo:'Instrument Sans',system-ui,sans-serif;
  --mono:'Courier Prime','Courier New',monospace;
  --emoji:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji";
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:1.5rem}
body{background:var(--papel);color:var(--texto);font:400 1.0625rem/1.65 var(--cuerpo),var(--emoji);-webkit-font-smoothing:antialiased}
a{color:var(--tinta);text-underline-offset:3px}
a:hover{color:var(--tinta-2)}
:focus-visible{outline:3px solid var(--rotulo);outline-offset:3px;border-radius:4px}
.wrap{width:min(1320px,100% - 2rem);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:0;background:var(--rotulo);color:var(--tinta);padding:.6rem 1rem;z-index:20;font-weight:600}
.saltar:focus{left:0}

/* Encabezado */
.top{border-bottom:1px solid var(--linea);background:var(--papel);position:sticky;top:0;z-index:10}
.top .fila{display:flex;align-items:center;gap:1.2rem;padding-block:.8rem}
.top .marca img{height:2rem;width:auto;display:block}
.top .sitio{font:700 1.05rem var(--display);color:var(--tinta);text-decoration:none;padding-left:1.2rem;border-left:2px solid var(--linea)}
.buscador{position:relative;margin-left:auto;width:min(26rem,100%)}
.buscador input{width:100%;font:500 1rem var(--cuerpo);padding:.6rem .9rem;border:2px solid var(--tinta);border-radius:999px;background:var(--papel-2);color:var(--texto)}
.buscador input::placeholder{color:var(--texto-2)}
#resultados{position:absolute;top:calc(100% + .4rem);left:0;right:0;list-style:none;padding:.3rem;background:#fff;border:2px solid var(--tinta);border-radius:12px;box-shadow:6px 6px 0 var(--estraza-2);max-height:70vh;overflow:auto}
#resultados li{padding:0}
#resultados a{display:block;padding:.6rem .8rem;border-radius:8px;text-decoration:none;color:var(--texto)}
#resultados a:hover,#resultados a[aria-selected="true"]{background:var(--estraza)}
#resultados .donde{display:block;font:600 .85rem var(--cuerpo);color:var(--texto-2)}
#resultados .seccion{display:block;font:700 1rem var(--display);color:var(--tinta)}
#resultados .fragmento{display:block;font-size:.9rem;color:var(--texto-2);line-height:1.4}
#resultados mark{background:var(--rotulo);color:var(--tinta);border-radius:2px}
#resultados .vacio{padding:.8rem;color:var(--texto-2)}
.menu-btn{font:600 .95rem var(--cuerpo);background:var(--tinta);color:var(--papel);border:0;border-radius:999px;padding:.55rem 1rem;cursor:pointer;margin-left:auto}

/* Diseño de tres columnas */
.diseno{display:grid;grid-template-columns:240px minmax(0,1fr) 210px;gap:clamp(1.2rem,3vw,3rem);padding-block:2rem 5rem;align-items:start}
.lateral{position:sticky;top:5rem;max-height:calc(100vh - 6rem);overflow:auto;font-size:.95rem;padding-right:.5rem}
.lateral .grupo{margin-bottom:1.2rem}
.grupo-nombre{font:800 .8rem var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-2);margin-bottom:.35rem}
.lateral ul{list-style:none;padding:0;display:grid;gap:.1rem}
.lateral a{display:block;padding:.3rem .6rem;border-radius:6px;text-decoration:none;color:var(--texto)}
.lateral a:hover{background:var(--estraza)}
.lateral a[aria-current]{background:var(--tinta);color:var(--papel);font-weight:600}
.indice{position:sticky;top:5rem;max-height:calc(100vh - 6rem);overflow:auto;font-size:.88rem;border-left:3px solid var(--tinta);padding-left:1rem}
.indice p{font:700 .95rem var(--display);color:var(--tinta);margin-bottom:.5rem}
.indice ul{list-style:none;padding:0;display:grid;gap:.3rem}
.indice a{text-decoration:none;color:var(--texto-2)}
.indice a:hover{color:var(--tinta);text-decoration:underline}
.indice .n3{padding-left:.8rem;font-size:.84rem}

#contenido{min-width:0}

/* Artículo */
article{max-width:46rem;min-width:0}
.migas{font-size:.92rem;color:var(--texto-2);margin-bottom:1rem}
.migas a{color:var(--texto-2)}
h1{font:800 clamp(2rem,4.4vw,3rem)/1.05 var(--display);letter-spacing:-.035em;color:var(--tinta);text-wrap:balance}
.meta{margin:.7rem 0 1.8rem;color:var(--texto-2);font-size:.93rem}
h2{font:800 clamp(1.4rem,2.4vw,1.8rem)/1.15 var(--display);letter-spacing:-.025em;color:var(--tinta);margin:3rem 0 1rem;padding-top:1.6rem;border-top:1.5px solid var(--tinta)}
h3{font:700 1.2rem/1.3 var(--display);letter-spacing:-.015em;color:var(--tinta);margin:2rem 0 .5rem}
h4{font:700 1.05rem/1.3 var(--display);color:var(--tinta);margin:1.4rem 0 .4rem}
h2,h3,h4{position:relative}
.ancla{margin-left:.4rem;text-decoration:none;color:var(--estraza-2);font-weight:400;opacity:0}
h2:hover .ancla,h3:hover .ancla,h4:hover .ancla,.ancla:focus{opacity:1}
article p{margin-top:.8rem}
article ul,article ol{margin:.8rem 0 0;padding-left:1.5rem;display:grid;gap:.45rem}
article li ul,article li ol{margin-top:.45rem}
article li::marker{color:var(--tinta);font-weight:600}
strong{font-weight:600}
article hr{border:0;border-top:1px solid var(--linea);margin:2rem 0}
code{font:700 .9em var(--mono);background:var(--papel-2);padding:.05em .35em;border-radius:3px;overflow-wrap:anywhere}
pre{margin-top:1rem;background:var(--tinta);color:var(--papel);padding:1rem 1.2rem;border-radius:8px;overflow-x:auto;font-size:.92rem;line-height:1.5}
pre code{background:none;padding:0;color:inherit;font-weight:400}
blockquote{margin-top:1.2rem;padding:.9rem 1.2rem;border-left:4px solid var(--rotulo);background:var(--papel-2);color:var(--texto-2);font-size:.98rem;border-radius:0 6px 6px 0}
blockquote p:first-child{margin-top:0}
img{max-width:100%;height:auto;border-radius:6px;border:1px solid var(--linea);margin-top:1rem}
.tabla{overflow-x:auto;margin-top:1rem;border:1px solid var(--linea);border-radius:6px;background:var(--papel-2)}
table{border-collapse:collapse;width:100%;font-size:.94rem;min-width:30rem}
th,td{text-align:left;vertical-align:top;padding:.6rem .8rem;border-bottom:1px solid var(--linea)}
tr:last-child td{border-bottom:0}
th{font:700 .9rem var(--display);color:var(--tinta);background:var(--estraza);border-bottom:2px solid var(--tinta)}

/* Recuadro de "Paso a paso" */
.paso-a-paso{background:var(--estraza);border-radius:10px;padding:1.2rem 1.5rem 1.6rem;margin-top:2.4rem;box-shadow:6px 6px 0 var(--estraza-2)}
.paso-a-paso h2{margin-top:0;padding-top:0;border:0}
.paso-a-paso h3{margin-top:1.6rem}
.paso-a-paso code{background:rgba(255,255,255,.55)}

/* Anterior / siguiente */
.prev-sig{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3.5rem;padding-top:1.5rem;border-top:1.5px solid var(--tinta)}
.prev-sig a{display:block;padding:.9rem 1.1rem;border:2px solid var(--tinta);border-radius:10px;text-decoration:none;font:700 1.05rem var(--display);color:var(--tinta)}
.prev-sig a:hover{background:var(--estraza)}
.prev-sig span{display:block;font:600 .8rem var(--cuerpo);color:var(--texto-2);letter-spacing:.04em;text-transform:uppercase}
.prev-sig .sig{text-align:right;grid-column:2}
.prev-sig .prev{grid-column:1}

/* Pie */
footer{background:var(--tinta);color:#9FB5A8;padding:1.6rem 0 2.2rem;font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem}
footer a{color:#CFD9CC}

/* Pantallas medianas: el índice de la página se va */
@media(max-width:1100px){
  .diseno{grid-template-columns:230px minmax(0,1fr)}
  .indice{display:none}
}
/* Móvil: el menú de manuales se despliega con un botón (sin JS se ve completo, arriba) */
@media(max-width:860px){
  .diseno{grid-template-columns:minmax(0,1fr);padding-block:1.2rem 4rem}
  .lateral{position:static;max-height:none;border-bottom:1px solid var(--linea);padding-bottom:1rem}
  .js .lateral.cerrado{display:none}
  .js .menu-btn{display:inline-block}
  .top .fila{flex-wrap:wrap;gap:.6rem 1rem}
  .top .sitio{padding-left:0;border-left:0}
  .buscador{order:5;width:100%;margin-left:0}
  .prev-sig{grid-template-columns:1fr}
  .prev-sig .sig,.prev-sig .prev{grid-column:auto;text-align:left}
}

@media print{
  .top,.lateral,.indice,.prev-sig,.saltar,.ancla{display:none}
  body{background:#fff;font-size:11pt}
  .diseno{display:block;padding:0}
  .paso-a-paso{box-shadow:none;background:#fff;border:1px solid #000}
  footer{display:none}
  a{color:#000}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}