/* El manual de Cookel.
 *
 * Sin fuentes ni hojas de estilo de fuera: hay cocinas con la wifi capada y
 * una tipografía que no carga deja la página en Times New Roman. Se usa la
 * pila del sistema, que siempre está.
 */
:root{
  --papel:#fbfaf8;
  --tarjeta:#ffffff;
  --tinta:#1c1a19;
  --tinta-suave:#57514d;
  --linea:#e7e2dc;
  --naranja:#e2571f;
  --naranja-suave:#fdf1ea;
  --azul:#173a5e;
  --aviso:#fff8e6;
  --aviso-linea:#e8c667;
  --aviso-tinta:#6b4e06;
  --ancho:47rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papel:#141312; --tarjeta:#1c1a19; --tinta:#f2efeb; --tinta-suave:#b3aca6;
    --linea:#322e2b; --naranja:#ff7a45; --naranja-suave:#2a1a12; --azul:#9dc4ea;
    --aviso:#2a2312; --aviso-linea:#6b5a22; --aviso-tinta:#e8d59a;
  }
}
:root[data-theme="dark"]{
  --papel:#141312; --tarjeta:#1c1a19; --tinta:#f2efeb; --tinta-suave:#b3aca6;
  --linea:#322e2b; --naranja:#ff7a45; --naranja-suave:#2a1a12; --azul:#9dc4ea;
  --aviso:#2a2312; --aviso-linea:#6b5a22; --aviso-tinta:#e8d59a;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:1.5rem;}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-text-size-adjust:100%;
}
.saltar{position:absolute;left:-999px;}
.saltar:focus{left:1rem;top:1rem;background:var(--naranja);color:#fff;padding:.5rem .9rem;border-radius:.4rem;z-index:10;}

/* Portada */
.portada{background:var(--azul);color:#fff;padding:3.5rem 1rem 3rem;}
:root:not([data-theme="light"]) .portada{background:#10283f;}
.portada-dentro{max-width:var(--ancho);margin:0 auto;}
.logo{display:block;margin-bottom:1rem;border-radius:.6rem;}
.portada h1{font-size:clamp(2rem,6vw,2.9rem);line-height:1.1;margin:0 0 .8rem;text-wrap:balance;}
.entradilla{font-size:1.12rem;margin:0 0 1rem;color:#dfe8f1;max-width:38rem;}
.portada .fino{color:#b9c9d8;}
.portada a{color:#fff;}

/* Maqueta: índice pegado a la izquierda en pantallas anchas */
.maqueta{max-width:76rem;margin:0 auto;padding:0 1rem;display:grid;gap:2.5rem;grid-template-columns:1fr;}
@media (min-width:64rem){
  .maqueta{grid-template-columns:16rem 1fr;align-items:start;padding-inline:2rem;}
  .indice{position:sticky;top:1.5rem;max-height:calc(100vh - 3rem);overflow:auto;}
}
.indice{padding-top:2rem;font-size:.95rem;}
.indice-titulo{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;color:var(--tinta-suave);margin:0 0 .6rem;}
.indice ol,.indice ul{list-style:none;margin:0;padding:0;}
.indice ul{margin:.25rem 0 .6rem .85rem;border-left:2px solid var(--linea);padding-left:.75rem;}
.indice li{margin:.28rem 0;}
.indice a{color:var(--tinta-suave);text-decoration:none;}
.indice a:hover,.indice a:focus{color:var(--naranja);text-decoration:underline;}

main{max-width:var(--ancho);padding:2rem 0 4rem;min-width:0;}
section{margin-bottom:3.5rem;scroll-margin-top:1.5rem;}
h2{font-size:1.9rem;line-height:1.15;margin:0 0 .9rem;padding-bottom:.5rem;border-bottom:3px solid var(--naranja);text-wrap:balance;}
h3{font-size:1.32rem;margin:2.2rem 0 .6rem;text-wrap:balance;}
h4{font-size:1.02rem;margin:1.4rem 0 .4rem;text-transform:uppercase;letter-spacing:.05em;color:var(--tinta-suave);}
p{margin:0 0 1rem;}
a{color:var(--naranja);}
ul,ol{margin:0 0 1.1rem;padding-left:1.35rem;}
li{margin:.4rem 0;}
ol.pasos{counter-reset:paso;list-style:none;padding-left:0;}
ol.pasos li{position:relative;padding-left:2.4rem;margin:.75rem 0;}
ol.pasos li::before{
  counter-increment:paso;content:counter(paso);
  position:absolute;left:0;top:.1rem;width:1.7rem;height:1.7rem;border-radius:50%;
  background:var(--naranja-suave);color:var(--naranja);font-weight:700;font-size:.85rem;
  display:grid;place-items:center;
}
figure{margin:1.4rem 0 1.6rem;}
figure img{width:100%;height:auto;display:block;border:1px solid var(--linea);border-radius:.7rem;background:var(--tarjeta);}
figcaption{font-size:.9rem;color:var(--tinta-suave);margin-top:.5rem;}
.ojo{background:var(--aviso);border-left:4px solid var(--aviso-linea);color:var(--aviso-tinta);padding:.85rem 1rem;border-radius:0 .5rem .5rem 0;}
.fino{font-size:.9rem;color:var(--tinta-suave);}
footer{border-top:1px solid var(--linea);padding:2rem 1rem 3rem;text-align:center;color:var(--tinta-suave);font-size:.92rem;}

/* Impreso: el índice sobra y las capturas no se parten por la mitad. */
@media print{
  .indice,.portada{display:none;}
  body{font-size:11pt;background:#fff;color:#000;}
  .maqueta{display:block;}
  figure{break-inside:avoid;}
  h2,h3{break-after:avoid;}
}