/* Tokens de la marca zentrix para el manual (azul #244DFF, negro #090D12). */
body.manual-zx {
  --fondo: #F5F7FA; --superficie: #FFFFFF; --superficie-2: #F5F7FA;
  --tinta: #090D12; --tinta-suave: #4A5363; --texto: #090D12; --texto-2: #4A5363;
  --acento: #244DFF; --sobre-acento: #FFFFFF; --acento-velo: rgba(36, 77, 255, .08); --velo-acento: rgba(36, 77, 255, .07);
  --borde: #8E95A3; --borde-suave: #DCE1E8;
  --exito: #147D48; --listo: #147D48; --alerta: #8A4B08; --por-caer: #8A4B08; --peligro: #B42318; --urgente: #B42318;
  --r-tarjeta: 16px; --r-chip: 999px; --radio: 16px; --grosor: 1.3px;
  --sombra: 0 1px 2px rgba(9, 13, 18, .05), 0 12px 32px rgba(9, 13, 18, .06);
  --cabecera: 72px;
}
body.manual-zx .seccion--manual { padding-top: 32px; }

/* Del sitio anterior de la app (vendoo_web/assets/css/estilo.css): el manual. */
(el navegador deriva `aspect-ratio: auto 1080 / 2400` de ahí), así que el
   hueco se reserva antes de que la imagen llegue y sin repetirlo acá. Un
   `aspect-ratio` explícito más `object-fit: cover` encima era redundante y es
   una cosa menos que WebKit pueda calcular distinto. */
.captura__marco img {
  display: block; width: 100%; height: auto;
  border-radius: 19px; background: var(--fondo);
}
blockquote.cita {
  margin: 0; padding: 0 0 0 22px; border-left: 3px solid var(--borde);
  color: var(--tinta-suave); font-size: 1.06rem;
}
blockquote.cita footer { margin-top: 10px; font-size: .86rem; color: var(--tinta-suave); }
/* ==========================================================================
   EL MANUAL DEL VENDEDOR — /docs/  (19-sep-2026)

   Maqueta de tres columnas, la del patrón clásico de un sitio de
   documentación (la referencia que dio el dueño es docs.flutter.dev):

       ┌────────┬──────────────────┬────────┐
       │ árbol  │  miga + título   │ en     │   ← `cabeza`
       │ del    ├──────────────────┤ esta   │
       │ manual │  el contenido    │ página │   ← `cuerpo`
       └────────┴──────────────────┴────────┘

   🔴 SIN UNA LÍNEA DE JAVASCRIPT, y eso no es una preferencia de estilo: la
   CSP del sitio es `script-src 'self'` más UN hash sha256, escrito a mano en
   las once páginas. Un `<script>` nuevo acá obliga a recalcular ese hash en
   todas. Lo que hace falta para una maqueta de documentación es CSS Grid y
   `position: sticky`, que son las sesenta líneas de abajo.

   ⚠️ EL ORDEN DEL HTML ES EL DEL TELÉFONO, y las áreas de la reja lo
   reacomodan en pantalla grande. En el HTML va: cabeza → «en esta página» →
   contenido → árbol. Leído en una columna eso es exactamente lo que uno
   quiere: de qué trata esto, qué partes tiene, el texto, y al final «todo el
   manual». No hay nada que plegar ni ningún botón que tocar — que es cómo se
   evita el script.
   ========================================================================== */

/* La reja del manual pide más ancho que `--ancho` (1120): con tres columnas,
   1120 le dejaba 496 px al texto. 1360 le deja ~740, y el texto se acota
   aparte más abajo. */
.envoltura--manual { max-width: 1360px; }

.manual {
  display: grid;
  gap: 0 clamp(26px, 3vw, 46px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "cabeza" "aqui" "cuerpo" "arbol";
}
.manual__cabeza { grid-area: cabeza; }
.manual__aqui   { grid-area: aqui; }
.manual__cuerpo { grid-area: cuerpo; min-width: 0; }
.manual__arbol  { grid-area: arbol; }

/* Dos columnas: entra el árbol. El «en esta página» se queda en el flujo,
   arriba del texto, que es donde sirve cuando no hay sitio al costado. */
@media (min-width: 1000px) {
  /* ⚠️ «En esta página» TIENE QUE TENER SU ÁREA TAMBIÉN ACÁ, aunque en este
     tramo viva dentro de la columna del texto. Un elemento con `grid-area`
     que la plantilla no nombra no se cae: la reja le inventa una columna
     implícita al final, y esa columna le come el ancho al `1fr` del
     contenido. Medido a 1024 px: el texto quedaba en ~250 px —menos que un
     teléfono, con media pantalla vacía al lado— y el título se partía en
     cuatro renglones. */
  .manual { grid-template-columns: 15rem minmax(0, 1fr); grid-template-areas: "arbol cabeza" "arbol aqui" "arbol cuerpo"; }
  /* `align-self: start` es lo que hace que el carril mida su contenido en vez
     de estirarse a las dos filas; `sticky` lo pasea dentro del área, que sí
     las abarca. El `top` es el alto de la cabecera pegajosa, el mismo número
     del `scroll-margin-top` de más arriba. */
  .manual__arbol { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 104px); overflow-y: auto; padding-inline: 4px; }
}
/* Tres columnas. El corte es 1260 y no 1080 por medición: a 1080 el texto
   quedaba en 360 px —menos que un teléfono— y las tres columnas dejaban de
   ayudar para empezar a estorbar. */
@media (min-width: 1260px) {
  .manual { grid-template-columns: 15rem minmax(0, 1fr) 14rem; grid-template-areas: "arbol cabeza aqui" "arbol cuerpo aqui"; }
  .manual__aqui { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 104px); overflow-y: auto; padding-inline: 4px; }
}

/* --- El árbol: las doce secciones del manual ---------------------------- */
/* ⚠️ El relleno lateral NO es aire: es lo que evita que la primera letra se
   corte. Los dos carriles son contenedores de desplazamiento
   (`overflow-y: auto` computa `overflow-x: auto`), así que recortan en su
   borde: con el rótulo pegado a cero, la «T» de «TODO EL MANUAL» salía
   partida. Medido a 1280 px. De paso alinea el rótulo con el texto de los
   enlaces de abajo. */
.carril__rotulo {
  display: block; font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-suave); margin: 0 0 10px; padding-inline: 12px;
}
.manual__aqui .carril__rotulo { padding-inline: 14px; }
/* ⚠️ Las doce secciones van AGRUPADAS en cuatro, y el grupo no es adorno:
   una lista plana de doce destinos obliga a leerlos todos para encontrar uno.
   El número sigue corriendo de 1 a 12 por encima de los grupos —el contador
   vive en el carril y no en la lista— porque es como se nombran entre
   compañeros: «mira la 6». */
.arbol { list-style: none; margin: 0; padding: 0; }
.manual__arbol { counter-reset: cap; }
.arbol li { margin: 0; }
.arbol li:not(.arbol__grupo) { counter-increment: cap; }
.arbol__grupo {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-suave);
  padding: 0 10px 5px 12px; margin-top: 16px;
}
.arbol li:first-child.arbol__grupo { margin-top: 0; }
.arbol a {
  display: grid; grid-template-columns: 1.7em 1fr; align-items: baseline;
  gap: 2px; padding: 7px 10px; border-radius: 9px;
  color: var(--tinta-suave); text-decoration: none;
  font-size: .92rem; line-height: 1.35;
  border-left: 2px solid transparent;
}
.arbol a::before { content: counter(cap); font-variant-numeric: tabular-nums; font-size: .8rem; opacity: .75; }
.arbol a:hover { color: var(--tinta); background: var(--velo-acento); text-decoration: none; }
/* La sección que se está leyendo. El color NO es la única señal: además va en
   600 y con la barra a la izquierda, que es lo que se ve de reojo. */
.arbol a[aria-current="page"] {
  color: var(--acento); font-weight: 600;
  background: var(--velo-acento); border-left-color: var(--acento);
}

/* --- «En esta página» --------------------------------------------------- */
.aqui { list-style: none; margin: 0; padding: 0; }
.aqui li { margin: 0; }
.aqui a {
  display: block; padding: 5px 0 5px 12px;
  border-left: 2px solid var(--borde-suave);
  color: var(--tinta-suave); text-decoration: none;
  font-size: .88rem; line-height: 1.4;
}
.aqui a:hover { color: var(--acento); border-left-color: var(--acento); text-decoration: none; }
.aqui .aqui--hijo { padding-left: 26px; font-size: .84rem; }
/* En una y en dos columnas el bloque vive dentro del texto, así que se le
   pone caja; en tres columnas es un carril y la caja sobra. */
.manual__aqui {
  border: var(--grosor) solid var(--borde-suave); border-radius: var(--r-tarjeta);
  background: var(--superficie); padding: 16px 18px; margin-bottom: 30px;
}
@media (min-width: 1260px) {
  .manual__aqui { border: 0; background: none; padding: 0; margin-bottom: 0; }
}
.manual__arbol {
  border: var(--grosor) solid var(--borde-suave); border-radius: var(--r-tarjeta);
  background: var(--superficie); padding: 16px 12px; margin-top: 40px;
}
@media (min-width: 1000px) {
  .manual__arbol { border: 0; background: none; padding: 0; margin-top: 0; }
}

/* --- La miga de pan ------------------------------------------------------ */
.miga { font-size: .85rem; color: var(--tinta-suave); margin: 0 0 14px; }
.miga ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.miga li + li::before { content: "›"; margin-right: 6px; color: var(--borde); }
.miga a { color: var(--tinta-suave); text-decoration: none; }
.miga a:hover { color: var(--acento); text-decoration: underline; }
.miga [aria-current="page"] { color: var(--tinta); }

/* --- El cuerpo ----------------------------------------------------------- */
/* El texto se acota aunque la columna sea más ancha: una línea de 90
   caracteres se lee peor que una de 70, y la reja ya reservó el sitio. */
.manual__cuerpo { max-width: 74ch; }
/* El aire entre el título y el texto lo pone la CABEZA y no un `row-gap` de
   la reja: en una columna la reja mete ese hueco también entre «En esta
   página» y el contenido, que ya trae el suyo. */
.manual__cabeza { max-width: 74ch; margin-bottom: 30px; }
.manual__cabeza h1 { font-size: clamp(1.85rem, 1.3rem + 2vw, 2.7rem); margin-bottom: .3em; }
.manual__entrada { color: var(--tinta-suave); font-size: 1.05rem; margin-bottom: 0; }
.manual__cuerpo h2 { font-size: 1.36rem; margin-top: 2.2em; }
.manual__cuerpo h3 { font-size: 1.02rem; margin-top: 1.8em; }
.manual__cuerpo > :first-child { margin-top: 0; }
.manual__cuerpo ul, .manual__cuerpo ol { padding-left: 1.25em; margin: 0 0 1.05em; }
.manual__cuerpo li { margin-bottom: .45em; }
.manual__cuerpo li::marker { color: var(--acento); }
/* ⚠️ La cabecera del sitio es PEGAJOSA: todo destino de ancla necesita
   reservarle sitio o el título aterriza debajo de la barra. Es la misma
   regla de `.seccion[id]` / `.tiendas[id]` de más arriba, y acá los destinos
   son los títulos del manual, que es lo que enlaza «En esta página». */
.manual__cuerpo :is(h2, h3)[id] { scroll-margin-top: 90px; }
@media (max-width: 1080px) { .manual__cuerpo :is(h2, h3)[id] { scroll-margin-top: 112px; } }

/* --- Una captura dentro del manual --------------------------------------- */
/* 264 px de ancho: es una pantalla de teléfono metida en una columna de
   texto. Más grande empuja el texto tres pantallas hacia abajo; más chica no
   deja leer los rótulos, que es justo para lo que está. */
.manual-fig { margin: 26px 0; max-width: 264px; }
.manual-fig img { border-radius: 14px; background: var(--fondo); }
.manual-fig .captura__marco { border-radius: 20px; padding: 6px; margin-bottom: 10px; }
.manual-fig figcaption { color: var(--tinta-suave); font-size: .86rem; line-height: 1.45; }
/* Dos de las capturas del manual NO son pantallas enteras: son RECORTES —el
   panel de sincronización y el Inicio sin la fila de la empresa—. Un marco de
   teléfono alrededor de medio Inicio dice una mentira chiquita: que eso es una
   pantalla completa. Van con borde a secas, y más anchas, porque lo que hay
   que poder leer son los rótulos de adentro. */
.manual-fig--ancha { max-width: 420px; }
.manual-fig--ancha .captura__marco { border-radius: 14px; padding: 0; border-color: var(--borde-suave); box-shadow: none; }
.manual-fig--ancha img { border-radius: 13px; }

/* El `.seccion--fina` de más arriba lo pisa el `.seccion` del bloque de
   «Aire» (misma especificidad, gana el último), así que el manual declara el
   suyo acá, que es después de los dos. Una página de documentación no quiere
   los 128 px de aire de una sección de portada: el título tiene que estar
   arriba. */
.seccion--manual { padding-block: clamp(30px, 4vw, 54px); }

/* --- La tabla del manual -------------------------------------------------- */
/* `display: block` + desplazamiento lateral: una tabla de tres columnas con
   frases adentro no entra en 360 px, y lo que hace un `table-layout` normal
   ahí es arrastrar la PÁGINA entera de lado. Así se desplaza sólo la tabla. */
.manual-tabla { overflow-x: auto; margin: 0 0 1.4em; }
.manual-tabla table { border-collapse: collapse; width: 100%; min-width: 380px; font-size: .92rem; }
.manual-tabla th, .manual-tabla td {
  text-align: left; vertical-align: top; padding: 9px 12px;
  border-bottom: 1px solid var(--borde-suave);
}
.manual-tabla th { font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-suave); }
.manual-tabla tbody tr:last-child td { border-bottom: 0; }
.manual-tabla td strong { white-space: nowrap; }

/* --- Los tres avisos ------------------------------------------------------ */
/* Son los mismos tres del manual impreso y significan cosas distintas:
   `.nota` (acento) explica, `.nota--aviso` (alerta) previene, y
   `.nota--clave` es lo que no se puede equivocar — de ahí que sea la única
   con el rótulo en la tinta de peligro. El rótulo va SIEMPRE, porque el
   color no puede ser la única señal. */
.manual__cuerpo .nota, .manual__cabeza .nota { margin: 22px 0; }
.nota__rotulo {
  display: block; font-size: .72rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--acento); margin-bottom: 6px;
}
.nota--aviso .nota__rotulo { color: var(--alerta); }
.nota--clave { border-left-color: var(--peligro); background: var(--superficie); border: var(--grosor) solid var(--borde-suave); border-left: 3px solid var(--peligro); }
.nota--clave .nota__rotulo { color: var(--peligro); }
.nota ul, .nota ol { padding-left: 1.2em; margin: .6em 0 0; }
.nota li { margin-bottom: .35em; }
.nota li:last-child { margin-bottom: 0; }

/* --- Los pasos numerados del manual -------------------------------------- */
.manual-pasos { list-style: none; margin: 0 0 1.4em; padding: 0; counter-reset: mpaso; }
.manual-pasos li {
  counter-increment: mpaso; position: relative;
  padding: 0 0 16px 40px; margin: 0;
}
.manual-pasos li::before {
  content: counter(mpaso);
  position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--velo-acento); color: var(--acento);
  font-size: .82rem; font-weight: 700;
}
.manual-pasos b { display: block; font-weight: 600; margin-bottom: 2px; }
.manual-pasos p { margin: 0; color: var(--tinta-suave); font-size: .95rem; }

/* --- Preguntas frecuentes ------------------------------------------------- */
.pregunta { border-top: 1px solid var(--borde-suave); padding: 18px 0; }
.pregunta:first-of-type { border-top: 0; padding-top: 0; }
.pregunta h2 { font-size: 1.04rem; margin: 0 0 .4em; }
.pregunta p { color: var(--tinta-suave); font-size: .95rem; margin: 0; }

/* --- Anterior / siguiente ------------------------------------------------- */
/* Es la navegación de verdad del teléfono: el árbol queda al final de la
   página y nadie lo baja a buscar para pasar a la sección de al lado. */
.saltos { display: grid; gap: 12px; margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--borde-suave); }
@media (min-width: 620px) { .saltos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.salto {
  display: block; padding: 14px 18px; text-decoration: none;
  border: var(--grosor) solid var(--borde-suave); border-radius: var(--r-tarjeta);
  background: var(--superficie); color: var(--tinta);
}
.salto:hover { border-color: var(--acento); text-decoration: none; }
.salto span { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 3px; }
.salto b { font-weight: 600; font-size: .98rem; }
.salto--sig { text-align: right; }
.salto--sig:only-child { grid-column: 2; }

/* --- La portada del manual ------------------------------------------------ */
.manual-indice { display: grid; gap: 12px; margin: 0 0 26px; padding: 0; list-style: none; }
.manual__cuerpo h3.manual-grupo { font-size: .76rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--tinta-suave); margin: 26px 0 10px; }
@media (min-width: 620px) { .manual-indice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.manual-indice a {
  display: block; height: 100%; padding: 15px 18px; text-decoration: none;
  border: var(--grosor) solid var(--borde-suave); border-radius: var(--r-tarjeta);
  background: var(--superficie); color: var(--tinta);
}
.manual-indice a:hover { border-color: var(--acento); text-decoration: none; }
.manual-indice b { display: block; font-weight: 600; font-size: .98rem; margin-bottom: 2px; }
.manual-indice span { color: var(--tinta-suave); font-size: .88rem; line-height: 1.45; }

/* La versión de la aplicación que describe el manual. Va a la vista y no en
   una nota al pie: un manual que no dice de qué versión es, miente en cuanto
   la aplicación cambia una pantalla. */
.version {
  display: inline-flex; align-items: center; gap: 7px;
  border: var(--grosor) solid var(--borde-suave); border-radius: var(--r-chip);
  background: var(--superficie); padding: 4px 13px;
  font-size: .8rem; font-weight: 500; color: var(--tinta-suave);
}
.version b { color: var(--tinta); font-weight: 600; }
.manual__cabeza .version { margin-bottom: 14px; }

/* En papel no hacen falta los carriles: el índice de un PDF es otra cosa. */
@media print {
  .manual__arbol, .manual__aqui, .saltos { display: none; }
  .manual { display: block; }
}