/* La hoja de pasos (public/hoja-pasos.js). Solo tokens de Cuarto Oscuro; todo vive bajo .hp-hoja o con prefijo .hp-.
   Forma: pildora = se toca (los pasos ya hechos, la caja); 4 px = contenido (las opciones son filas, sin cajas ni rayas). */
.hp-barra{display:flex;align-items:center;gap:var(--e-2);overflow-x:auto;white-space:nowrap;padding:0 0 var(--e-4);scrollbar-width:none}
.hp-barra::-webkit-scrollbar{display:none}
.hp-paso{display:inline-flex;align-items:center;gap:var(--e-1);flex:none;min-height:32px;padding:0 var(--e-3);border:0;border-radius:var(--r-pildora);background:transparent;color:var(--medio);font:inherit;font-size:var(--t-texto)}
.hp-paso.hp-actual{background:var(--boton);color:var(--boton-t);font-weight:500}
.hp-paso.hp-hecho{background:var(--piedra-on);color:var(--tinta);max-width:240px}
button.hp-paso.hp-hecho{cursor:pointer}
.hp-paso.hp-hecho span{overflow:hidden;text-overflow:ellipsis}
.hp-mas{margin:var(--e-5) 0 0}
.hp-mas:first-child{margin:0}
.hp-cuerpo{min-height:320px}
.hp-t{margin:0 0 var(--e-1);font-size:var(--t-titulo);font-weight:500;color:var(--tinta)}
.hp-sub{margin:0 0 var(--e-4);font-size:var(--t-texto);color:var(--medio)}
.hp-buscar{width:100%;margin:0 0 var(--e-2)}
.hp-ops{display:flex;flex-direction:column}
.hp-op{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:52px;padding:var(--e-2);margin:0 calc(var(--e-2) * -1);border:0;border-radius:var(--r);background:transparent;color:var(--tinta);font:inherit;text-align:left;cursor:pointer}
.hp-op:hover{background:var(--tinte-toque)}
.hp-op b{font-size:var(--t-campo);font-weight:500}
.hp-op span{font-size:var(--t-meta);color:var(--medio)}
.hp-op.hp-quieta b{font-size:var(--t-texto);font-weight:400;color:var(--medio)}
.hp-pie{display:flex;align-items:center;gap:var(--e-2);min-height:44px;margin:var(--e-4) 0 0;padding:0 var(--e-4);border-radius:var(--r-pildora);background:var(--piedra-on)}
.hp-pie[hidden]{display:none}
.hp-pie:focus-within{outline:2px solid var(--tinta);outline-offset:2px}
.hp-punto{flex:none;width:8px;height:8px;border-radius:var(--r-pildora);background:var(--marca-punto)}
.hp-caja{flex:1;min-width:0;min-height:44px;border:0;background:transparent;color:var(--tinta);font:inherit;font-size:var(--t-campo)}
:root[data-theme] .hp-caja:focus-visible{outline:0}
.hp-nota{min-height:var(--e-4);margin:var(--e-2) 0 0;font-size:var(--t-meta);color:var(--medio)}
.hp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* El papel a la vista: solo cuando cabe al lado (en telefono y en una ventana angosta la hoja es de una columna y el papel no sale). */
.hp-dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:var(--e-5);align-items:start}
.hp-izq{min-width:0}
.hp-papel-eti{margin:0 0 var(--e-2);font-size:var(--t-meta);color:var(--medio)}
.hp-papel{display:flex;flex-direction:column;gap:var(--e-3);padding:var(--e-5);border-radius:var(--r);background:var(--pag);color:var(--tinta);font-size:var(--t-texto);line-height:1.6}
.hp-papel p{margin:0}
.hp-papel b{font-weight:600}
.hp-papel-t{font-size:var(--t-campo);font-weight:600}
.hp-papel-n{font-size:var(--t-meta);color:var(--medio)}
.hp-papel-fila{display:flex;justify-content:space-between;gap:var(--e-3)}
.hp-falta{color:var(--urge)}
.hp-barra-g{display:block;height:8px;width:86%;border-radius:var(--r);background:var(--piedra-on)}
.hp-barra-g.hp-corta{width:60%}
@media (max-width:900px){ .hp-dos{grid-template-columns:minmax(0,1fr)} .hp-lado{display:none} }
.hp-barra[inert]{opacity:.5}