/* ══════════════════════════════════════════════════════════════════
   manual.html — Manual rápido de operación

   Se apoya en estilo.css: de ahí salen los tokens, la base tipográfica,
   la navegación, los botones y el pie. Aquí sólo vive lo propio del
   manual, que es un DOCUMENTO y no una página de venta: columna de
   lectura estrecha, índice fijo al costado y tablas.

   La disciplina de la landing sigue mandando:

     · El color clasifica. Cianotipo = la estructura y el dato del plan;
       faena = lo que exige atención, y nada más; verde y rojo sólo
       dentro de una lectura de estado.
     · Nada de JavaScript para leer. El índice es CSS puro y el
       contenido está entero en el HTML.

   Es la misma retícula de tokens del producto, así que quien pasa del
   manual a la aplicación reconoce lo mismo.
   ══════════════════════════════════════════════════════════════════ */

/* ── Composición ─────────────────────────────────────────────── */

/* La navegación es fija: el documento arranca por debajo de ella, igual que
   el hero de la landing. */
.manual {
    padding-top: var(--nav);
    padding-bottom: clamp(64px, 8vw, 104px);
}

.manual-cuerpo {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}

.lectura { min-width: 0; max-width: 72ch; }

/* ── Portada del documento ───────────────────────────────────── */

.manual-portada {
    padding: clamp(34px, 5vw, 56px) 0 clamp(24px, 3vw, 34px);
    border-bottom: 2px solid var(--grafito-900);
}

.manual-portada h1 {
    font-size: clamp(2.6rem, 7vw, 4.5rem);
    line-height: .92;
}
.manual-portada h1 span { color: var(--cianotipo-600); }

.manual-entrada {
    max-width: 58ch;
    margin-top: 20px;
    font-size: 1.0625rem;
    color: var(--grafito-500);
}
.manual-entrada b { color: var(--grafito-900); font-weight: 600; }

/* La regla del producto, aquí como recorrido de la obra */
.regla-manual { margin-top: 30px; }
.regla-manual .pista {
    position: relative;
    height: 14px;
    background: var(--hormigon-2);
    border: 1px solid var(--linea-2);
}
.regla-manual .relleno {
    position: absolute;
    inset: 0 auto 0 0;
    width: 62%;
    background: var(--cianotipo-600);
    opacity: .22;
}
.regla-manual .marca {
    position: absolute;
    top: -5px;
    bottom: -5px;
    width: 2px;
    background: var(--cianotipo-600);
}
.regla-manual .leyenda {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-family: var(--mono);
    font-size: .625rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--grafito-400);
}

/* ── Índice lateral ──────────────────────────────────────────── */

.manual-indice {
    position: sticky;
    top: calc(var(--nav) + 16px);
    padding-top: 38px;
}
.manual-indice p {
    margin: 0 0 12px;
    font-family: var(--mono);
    font-size: .625rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--grafito-400);
}
.manual-indice ol { margin: 0; padding: 0; list-style: none; }
.manual-indice a {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid var(--linea);
    color: var(--grafito-500);
    text-decoration: none;
    font-size: .8125rem;
    line-height: 1.35;
}
.manual-indice li:last-child a { border-bottom: 1px solid var(--linea); }
.manual-indice a:hover { color: var(--cianotipo-600); }
.manual-indice b {
    font-family: var(--mono);
    font-size: .6875rem;
    font-weight: 500;
    color: var(--grafito-400);
}

/* ── Etapas ──────────────────────────────────────────────────── */

.etapa { padding-top: clamp(38px, 5vw, 58px); scroll-margin-top: calc(var(--nav) + 16px); }

.etapa-cabecera {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--grafito-900);
}

.etapa-num {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    background: var(--cianotipo-600);
    color: #fff;
    font-family: var(--mono);
    font-size: 1.0625rem;
    font-weight: 500;
}
/* La jornada es lo único que se repite todos los días: se distingue. */
.etapa-num.diaria { background: var(--grafito-900); }

.etapa h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.375rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.005em;
}
.etapa-quien {
    margin: 6px 0 0;
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .04em;
    color: var(--grafito-400);
}
.etapa-quien span { color: var(--cianotipo-600); }

.lectura h3 { margin: 28px 0 10px; }
.lectura p { margin: 14px 0; }
.lectura b, .lectura strong { color: var(--grafito-900); font-weight: 600; }

/* Sin itálica auto-hospedada, el navegador la sintetiza y se ve torcida.
   Los nombres de pantalla se destacan con peso, que además es lo que se
   ve en la aplicación. */
.lectura em { font-style: normal; font-weight: 500; color: var(--grafito-800); }

.lectura ul, .lectura ol { padding-left: 20px; margin: 14px 0; }
.lectura li { margin: 7px 0; }
.lectura li::marker { color: var(--grafito-400); }

.lectura code {
    font-family: var(--mono);
    font-size: .8125em;
    padding: 1px 5px;
    background: var(--hormigon-2);
    border: 1px solid var(--linea);
    color: var(--grafito-700);
    white-space: nowrap;
}

/* ── Tablas ──────────────────────────────────────────────────── */

.tabla-marco {
    margin: 22px 0;
    overflow-x: auto;
    border: 1px solid var(--linea-2);
    background: #fff;
}
.tabla-manual { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabla-manual thead th {
    padding: 9px 14px;
    background: var(--hormigon-2);
    border-bottom: 1px solid var(--linea-2);
    font-family: var(--mono);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: left;
    color: var(--grafito-500);
    white-space: nowrap;
}
.tabla-manual tbody td {
    padding: 10px 14px;
    border-top: 1px solid var(--linea);
    vertical-align: top;
    color: var(--grafito-500);
}
.tabla-manual tbody tr:first-child td { border-top: 0; }
.tabla-manual tbody td:first-child { color: var(--grafito-900); font-weight: 500; }

/* ── Avisos ──────────────────────────────────────────────────── */

.nota {
    display: grid;
    grid-template-columns: 3px minmax(0, 1fr);
    gap: 14px;
    margin: 22px 0;
    padding: 14px 16px 14px 0;
    background: var(--faena-50);
    border: 1px solid var(--faena-100);
    font-size: .9375rem;
    color: var(--grafito-600);
}
.nota::before { content: ""; background: var(--faena-500); }
.nota p { margin: 0; }
.nota p + p { margin-top: 8px; }

.nota-plan { background: var(--cianotipo-50); border-color: var(--cianotipo-100); }
.nota-plan::before { background: var(--cianotipo-600); }

.nota-titulo {
    display: block;
    margin-bottom: 4px;
    font-family: var(--mono);
    font-size: .625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    /* El faena-700 sobre su propio fondo se queda en 4,4:1, bajo el mínimo
       legible. Quien clasifica la nota es el filete de color; el rótulo se
       lee en tinta. */
    color: var(--grafito-800);
}
.nota-plan .nota-titulo { color: var(--cianotipo-700); }

/* ── Pasos ───────────────────────────────────────────────────── */

.pasos-manual { margin: 22px 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos-manual > li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 16px;
    margin: 0;
    padding: 16px 0;
    border-top: 1px solid var(--linea);
}
.pasos-manual > li:last-child { border-bottom: 1px solid var(--linea); }
.pasos-manual > li::before {
    counter-increment: paso;
    content: counter(paso);
    font-family: var(--mono);
    font-size: .8125rem;
    color: var(--cianotipo-600);
}
.pasos-manual h4 {
    margin: 0 0 4px;
    font-family: var(--display);
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--grafito-900);
}
.pasos-manual p { margin: 0; font-size: .9375rem; }
.pasos-manual ul { margin: 8px 0 0; font-size: .9375rem; }

/* ── Estados ─────────────────────────────────────────────────── */

.marca-estado {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid;
    font-family: var(--mono);
    font-size: .625rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.estado-bien   { color: var(--nivel-700);     border-color: var(--nivel-100);     background: var(--nivel-50); }
.estado-plan   { color: var(--cianotipo-700); border-color: var(--cianotipo-100); background: var(--cianotipo-50); }
.estado-mal    { color: var(--alerta-600);    border-color: var(--alerta-100);    background: var(--alerta-50); }
.estado-neutro { color: var(--grafito-500);   border-color: var(--linea-2);       background: var(--hormigon-2); }

/* ── Cierre y vuelta a la landing ────────────────────────────── */

.manual-cierre {
    margin-top: 56px;
    padding-top: 26px;
    border-top: 2px solid var(--grafito-900);
}
.manual-cierre p { font-size: .9375rem; color: var(--grafito-500); }
.manual-cierre .acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

@media (max-width: 900px) {
    .manual-cuerpo { grid-template-columns: minmax(0, 1fr); }
    .manual-indice { position: static; padding-top: 26px; }
    .manual-indice ol {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 0 18px;
    }
}

@media (max-width: 560px) {
    .etapa-cabecera { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
    .etapa-num { width: 34px; height: 34px; font-size: .875rem; }
    .manual-cierre .acciones .btn { width: 100%; }
}

@media print {
    .nav, .nav-movil, .manual-indice, .manual-cierre .acciones, .pie { display: none; }
    .manual-cuerpo { grid-template-columns: minmax(0, 1fr); }
    .etapa { page-break-inside: avoid; }
}