/* Acabado compartido de los manuales de B3TA — manual_acabado_una_hoja_v1_2026-09-10
   ---------------------------------------------------------------------------------
   Una sola hoja para los tres manuales (general, Drop y Conecta Guate). Antes cada
   uno traía su propio bloque y los arreglos se aplicaban a uno solo: el 10-sep el
   manual general se corrigió y el de Drop seguía saliéndose 14 px con el zoom al 200 %.
   Un dato, una fuente; un acabado, una hoja.

   Lo que resuelve, todo medido:
     1. Con el zoom al 200 % (viewport de 195 px CSS) la página se salía a la derecha.
        Dos causas: ninguna palabra larga podía partirse, y la sangría no encogía.
     2. El botón «Crear mi cuenta» se montaba encima del logotipo. No desbordaba,
        por eso el chequeo numérico no lo veía: se vio mirando la captura.
     3. Las superficies que pinta el navegador —selección, cursor, barra de scroll,
        subrayado— venían con el gris de fábrica, que no es de ninguna marca.
     4. Sin landmark `main`, el «Saltar al contenido» dejaba al lector en un título
        cualquiera y el lector de pantalla no tenía región principal.
   ------------------------------------------------------------------------------- */

/* 1 · el navegador tiene que saber en qué tema está: sin esto, en oscuro la barra de
   scroll y los controles nativos se siguen pintando claros sobre el fondo oscuro */
:root{color-scheme:light dark}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* 2 · nada corre la página de lado: la palabra parte antes que el layout.
   Sin `hyphens:auto` a propósito — partía «What-sApp» por la mitad, y un nombre de
   marca no se corta. `overflow-wrap` solo actúa cuando la palabra NO cabe entera. */
h1,h2,h3,p,li,summary,.lede,.nov-txt,.faq .a,.step .d,.note,.path{overflow-wrap:break-word}

/* 3 · con el zoom alto ceden los márgenes, no la línea de texto */
@media (max-width:430px){
  .site-in{flex-wrap:wrap;row-gap:10px}
  .site-logo{flex:none}
  .site-cta{font-size:13.5px;padding:0 16px}
}
@media (max-width:420px){
  .wrap{padding-left:16px;padding-right:16px}
  .site-in{padding-left:16px;padding-right:16px}
  .card,.toc{padding-left:16px;padding-right:16px}
  .note{padding-left:14px;padding-right:14px}
  .faq .a{padding-left:22px}
  .faq.nov > ul.clean{padding-left:22px}
  ul.clean li{padding-left:18px}
  .step{gap:12px}
}
/* cuando ya no caben en una línea, se apilan y el botón toma el ancho completo:
   así el blanco de toque crece en vez de encogerse */
@media (max-width:360px){
  .site-in{flex-direction:column;align-items:stretch}
  .site-cta{justify-content:center}
}
@media (max-width:320px){
  .wrap{padding-left:12px;padding-right:12px}
  .card,.toc{padding-left:12px;padding-right:12px}
  .faq .a,.faq.nov > ul.clean{padding-left:16px}
  ul.clean li{padding-left:16px}
  h1{font-size:25px}
}

/* 4 · las superficies del navegador, en la paleta de la casa */
::selection{background:var(--volt);color:var(--volt-ink)}
::-moz-selection{background:var(--volt);color:var(--volt-ink)}
html{caret-color:var(--ok-strong);scrollbar-color:var(--line-strong) transparent}
:root[data-theme="dark"]{caret-color:var(--volt)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){caret-color:var(--volt)}}
p a,li a,.faq .a a,.note a{text-underline-offset:.18em;text-decoration-thickness:.08em}
p a:hover,li a:hover,.faq .a a:hover,.note a:hover{text-decoration-thickness:.14em}
/* las cifras de la bitácora y los números de sección, alineados como cifras */
h2 .num,.nov-t em,.pie,.toc ol{font-variant-numeric:tabular-nums}

/* 5 · el foco se ve también sobre el acento, no solo sobre el papel */
.site-cta:focus-visible,.btn-guia:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#contenido:focus{outline:none}
#contenido:focus-visible{outline:2px solid var(--focus);outline-offset:6px;border-radius:6px}

/* 6 · movimiento reducido: se apaga la transición que EXISTE, no todo por si acaso.
   Un `*{transition:none}` es una red que tapa lo que nadie midió. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .faq summary::before{transition:none}
}

/* 7 · el índice de las guías de integración usa `ul.clean`, y ahí la flecha se pintaba
   arriba (`top:4px`) mientras el enlace —que mide 44 px por el blanco de toque— centra
   su texto: 22 px de desfase, medidos, visibles en la captura. Y cada fila sumaba 52 px
   de alto por un relleno que el enlace ya aportaba. Se alinea y se aprieta, sin bajar
   el blanco de toque de 44 px. */
.toc ul.clean li{padding-top:0;padding-bottom:0}
.toc ul.clean li::before{top:50%;transform:translateY(-50%)}