/* ============================================================
   MANUAL — la única pantalla larga de la app.
   Va encima de css/app.css y usa SUS variables (--green, --ink,
   --line, --paper…): el manual tiene que sentirse parte del
   producto, no una cosa pegada de otro lado.

   Hasta abajo está el bloque @media print, que es de donde sale
   el PDF (node _manual/pdf.mjs).
   ============================================================ */

/* ---------- armazón ---------- */
.manual { padding-bottom: 90px; }
.dos { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1040px) {
  .dos { grid-template-columns: 232px minmax(0, 1fr); gap: 48px; align-items: start; }
}
.manual main { min-width: 0; }
.col { max-width: 880px; }

/* ---------- portada ---------- */
.portada { padding: 40px 0 30px; border-bottom: 1px solid var(--line); }
.portada .marca { display: none; }          /* en pantalla ya está la barra de arriba */
.portada h1 {
  font-size: clamp(30px, 5.4vw, 46px); font-weight: 900;
  line-height: 1.04; margin: 0 0 14px; text-wrap: balance;
}
.portada .bajada { font-size: 18px; color: var(--muted); margin: 0 0 24px; max-width: 56ch; }
.pie-portada {
  display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 16px;
}
.pie-portada b { color: var(--ink); font-weight: 700; }

/* ---------- índice ---------- */
.indice { position: sticky; top: 78px; padding: 30px 0 40px; display: none; }
@media (min-width: 1040px) { .indice { display: block; } }
.indice .tit {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px;
}
.indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.indice a {
  display: block; font-size: 14px; font-weight: 600; color: var(--muted);
  text-decoration: none; padding: 7px 12px; border-radius: 9px; line-height: 1.35;
}
.indice a:hover { color: var(--ink); background: var(--soft); }
.indice a.on { color: var(--green-dark); background: var(--white); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.indice a.parte {
  font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green-dark); margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line);
}
.indice a.parte:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.indice a.parte.on { background: transparent; box-shadow: none; border: 0; border-top: 1px solid var(--line); }

/* índice de bolsillo, para el celular */
.indice-movil { margin: 0 0 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
@media (min-width: 1040px) { .indice-movil { display: none; } }
.indice-movil summary { font-weight: 800; font-size: 15px; padding: 14px 18px; cursor: pointer; }
.indice-movil ol { list-style: none; margin: 0; padding: 0 10px 12px; columns: 2; column-gap: 14px; }
@media (max-width: 520px) { .indice-movil ol { columns: 1; } }
.indice-movil a { display: block; font-size: 14px; color: var(--muted); text-decoration: none; padding: 6px 8px; break-inside: avoid; }
.indice-movil a.parte { font-weight: 800; color: var(--green-dark); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; margin-top: 8px; }

/* ---------- partes y secciones ---------- */
.parte { margin: 64px 0 0; padding-top: 26px; border-top: 2px solid var(--ink); }
.parte .num {
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--clay); display: block; margin-bottom: 6px;
}
.parte h2 { font-size: clamp(24px, 4vw, 34px); font-weight: 900; line-height: 1.06; margin: 0 0 10px; text-wrap: balance; }
.parte p { color: var(--muted); margin: 0; max-width: 62ch; font-size: 16px; }

.manual section { scroll-margin-top: 88px; }
.manual section h3 {
  font-size: 23px; font-weight: 800; line-height: 1.18; margin: 48px 0 6px;
  display: flex; align-items: center; gap: 11px; text-wrap: balance;
}
.manual section h3 .ic {
  font-size: 19px; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px;
  background: var(--white); border: 1px solid var(--line); display: grid; place-items: center;
  box-shadow: var(--shadow-sm); letter-spacing: 0;
}
.manual section h4 {
  font-size: 11.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--green-dark); margin: 34px 0 10px;
}
.entradilla { color: var(--muted); font-size: 17px; margin: 0 0 8px; max-width: 62ch; }
.manual p { margin: 0 0 14px; max-width: 68ch; font-size: 16px; line-height: 1.6; }

/* ---------- pasos ---------- */
ol.pasos { list-style: none; counter-reset: paso; margin: 20px 0 28px; padding: 0; display: grid; gap: 18px; }
ol.pasos > li {
  counter-increment: paso; display: grid; grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 15px; row-gap: 0;
}
/* Todo el contenido del paso va en la columna ancha. Sin esto la rejilla
   acomoda sola y el párrafo cae en la columna del círculo, de 34 px:
   sale una palabra por renglón. */
ol.pasos > li > * { grid-column: 2; }
ol.pasos > li::before {
  grid-column: 1; grid-row: 1; content: counter(paso);
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 14px;
  width: 34px; height: 34px; border-radius: 50%; color: var(--white);
  background: linear-gradient(145deg, var(--green-2), var(--green));
  display: grid; place-items: center; margin-top: 1px;
  box-shadow: 0 8px 20px rgba(28, 122, 75, .26);
}
ol.pasos > li > b { font-weight: 800; font-size: 16.5px; display: block; margin-bottom: 3px; }
ol.pasos p { margin: 0 0 9px; }
ol.pasos > li > :last-child { margin-bottom: 0; }

/* ---------- listas de campos ---------- */
dl.campos { margin: 12px 0 22px; padding: 0; }
dl.campos > div {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 20px;
  padding: 11px 0; border-top: 1px solid var(--line);
}
dl.campos > div:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 620px) { dl.campos > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
dl.campos dt { font-weight: 800; font-size: 14.5px; }
dl.campos dd { margin: 0; font-size: 15.5px; color: var(--muted); }
dl.campos dd b { color: var(--ink); font-weight: 700; }

ul.puntos { margin: 12px 0 20px; padding: 0 0 0 1.15em; display: grid; gap: 8px; }
ul.puntos li { max-width: 66ch; font-size: 16px; }
ul.puntos li::marker { color: var(--green-2); }

/* ---------- botones citados: se ven como los de la app ---------- */
.b, .bf, .c {
  font-size: .84em; font-weight: 800; white-space: nowrap;
  display: inline-block; vertical-align: .05em; letter-spacing: -.005em;
}
.b { background: linear-gradient(145deg, var(--green-2), var(--green)); color: var(--white); padding: .18em .68em; border-radius: 999px; }
.bf { background: var(--white); color: var(--ink); border: 1px solid var(--line); padding: .16em .64em; border-radius: 999px; }
.c { background: rgba(63, 168, 110, .16); color: var(--green-dark); padding: .12em .5em; border-radius: 6px; font-weight: 700; }

/* ---------- avisos ---------- */
.nota, .ojo {
  margin: 20px 0; padding: 14px 20px 14px 17px; border-radius: 0 var(--radius) var(--radius) 0;
  border-left: 3px solid var(--green); background: var(--white); box-shadow: var(--shadow-sm);
  font-size: 15.5px; line-height: 1.55;
}
.ojo { border-left-color: var(--clay); background: rgba(192, 86, 33, .05); }
.nota .et, .ojo .et {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-dark); display: block; margin-bottom: 4px;
}
.ojo .et { color: var(--clay); }
.nota p, .ojo p { max-width: 64ch; font-size: 15.5px; }
.nota p:last-child, .ojo p:last-child { margin-bottom: 0; }

/* ---------- figuras ---------- */
.manual figure { margin: 24px 0 28px; }
.manual figure img {
  display: block; width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow);
}
.manual figure.tel { display: grid; justify-items: start; }
.manual figure.tel img { max-width: 320px; border-radius: 20px; }
.manual figcaption { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin-top: 10px; max-width: 64ch; }
.manual figcaption b { color: var(--ink); font-weight: 700; }
.tira { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin: 24px 0 28px; }
.tira figure { margin: 0; }

/* ---------- el mapa de las tres pantallas ---------- */
.mapa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 24px 0 30px; }
@media (min-width: 660px) { .mapa { grid-template-columns: repeat(3, 1fr); } }
.mapa article { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.mapa .arch { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--clay); text-transform: uppercase; display: block; margin-bottom: 7px; }
.mapa h4 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.mapa p { margin: 0; font-size: 15px; color: var(--muted); }

/* ---------- tabla ---------- */
.tabla-caja { overflow-x: auto; margin: 20px 0 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.manual table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
.manual th, .manual td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.manual thead th { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--soft); }
.manual tbody tr:last-child td { border-bottom: 0; }
.manual td:first-child { font-weight: 700; }
.si { color: var(--green-dark); font-weight: 700; }
.no { color: var(--muted); }

/* ---------- preguntas ---------- */
.pregunta { border-top: 1px solid var(--line); padding: 16px 0; }
.pregunta:last-of-type { border-bottom: 1px solid var(--line); }
.pregunta b { font-size: 16px; font-weight: 800; display: block; margin-bottom: 4px; }
.pregunta p { margin: 0; color: var(--muted); font-size: 15.5px; }

.cierre { margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* El índice impreso sólo existe en papel. La regla base va ANTES del
   @media print: con la misma especificidad gana la última del archivo. */
.impreso { display: none; }
.impreso h2 { font-size: 24px; font-weight: 900; margin: 0 0 12px; }
.impreso ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 34px; }
.impreso li { break-inside: avoid; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.impreso li.parte { font-weight: 800; font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--green-dark); border-bottom: 0; padding: 15px 0 3px; break-after: avoid; }
.impreso li.parte:first-child { padding-top: 0; }

/* ============================================================
   PAPEL — de aquí sale el PDF que se manda por WhatsApp.
   ============================================================ */
@media print {
  @page { size: Letter; margin: 15mm 14mm 16mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: var(--white); font-size: 11pt; line-height: 1.5; }
  .topbar, .indice, .indice-movil, .barra-inferior { display: none !important; }
  .impreso { display: block; }
  .wrap.manual { width: 100%; max-width: none; padding: 0; }
  .dos { display: block; }
  .manual main { padding-bottom: 0; }

  .portada { padding: 0 0 26px; border-bottom: 0; }
  .portada .marca { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
  .portada h1 { font-size: 46pt; }
  .portada .bajada { font-size: 13pt; }

  /* cada parte arranca hoja nueva */
  .parte { break-before: page; margin-top: 0; padding-top: 0; }
  .manual section h3, .manual section h4, .parte h2,
  dl.campos dt, ol.pasos > li > b, .impreso li.parte { break-after: avoid; }
  .manual section h3 { margin-top: 28px; }

  /* nada se parte a la mitad */
  figure, .nota, .ojo, .pregunta, .mapa article,
  ol.pasos > li, dl.campos > div, .tira figure, tr { break-inside: avoid; }
  thead { display: table-header-group; }

  /* Las capturas de pantalla completa son más altas que una hoja: sin
     tope la figura no cabe, `break-inside: avoid` se ignora y el pie de
     foto se va a la página siguiente dejando la imagen sola. */
  .manual figure { text-align: center; }
  .manual figure img {
    box-shadow: none; width: auto; max-width: 100%; max-height: 18cm; margin: 0 auto;
  }
  .manual figure.tel img { max-width: 250px; }
  .manual figcaption { text-align: left; }
  .tira { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* en papel no hay scroll lateral: la tabla se encoge */
  .tabla-caja { overflow: visible; box-shadow: none; }
  .manual table { min-width: 0; font-size: 9.5pt; }
  .manual th, .manual td { padding: 7px 9px; }

  .manual p, .entradilla, ul.puntos li, .nota p, .ojo p, .parte p { max-width: none; }
  .col { max-width: none; }
  a { text-decoration: none; }
}