/* print.css — hoja de impresion del estudio del Lab.
 *
 * El PDF del estudio se genera desde esta misma pagina, no desde un documento
 * aparte. La version anterior salio de LibreOffice Writer y en tres meses ya
 * discrepaba de la pagina en el numero de controles y en la fecha de campo:
 * eran dos documentos mantenidos a mano y se separaron sin que nadie lo notara.
 * Con una sola fuente eso no puede volver a pasar.
 *
 * Se carga con media="print", asi que no pesa en la vista de pantalla.
 * El generador es gen-pdf.mjs.
 */

/* ---------- pagina ---------- */
/* Carta y no A4: el estudio es de mercado mexicano y se imprime en Mexico.
   Los margenes dejan sitio al encabezado y al pie que dibuja Chrome. */
@page {
  size: letter;
  margin: 17mm 16mm 18mm;
}

/* Chrome dibuja el encabezado y el pie dentro del margen de la pagina. Anulando
   el margen de la primera, la portada queda limpia: sin titulo repetido arriba y
   sin numero de pagina abajo. El hueco lo repone el propio hero con su padding. */
@page :first {
  margin: 0;
}

/* ---------- lo que no viaja al PDF ---------- */
/* Regla: si el elemento solo sirve para navegar o para convertir, fuera. Un PDF
   no tiene a donde navegar y el formulario de descarga dentro del propio
   documento descargado no tiene ningun sentido. */
@media print {
  .nav,
  .nav-mobile,
  .footer,
  .skip-link,
  .est-bc,
  .est-ctas,
  .est-pdf,
  .est-cta,
  .est-bg,
  .est-glow,
  .est-grid,
  .ck-prefs,
  .rp-overlay,
  [data-ck-open],
  [data-clutch-open],
  [data-estudio-flot],
  .est-flot,
  #citaCopiar,
  [data-cita],
  .post-back,
  .btn {
    display: none !important;
  }
  /* Los .btn se van todos: en un PDF no hay nada que pulsar, y los que quedaban
     sueltos ("Escanea mi tienda", "Volver al Lab") se leian como texto huerfano
     al final de un parrafo. El texto editorial que los acompana si se queda,
     porque explica el escaner y ahi si aporta. */

  /* ---------- animaciones de entrada ---------- */
  /* .reveal nace con opacity:0 y app.js le pone .in cuando entra en pantalla,
     con un IntersectionObserver. Al imprimir no hay scroll: el observador solo
     dispara para lo que cae en la primera pantalla y todo lo demas se queda
     invisible. No es un defecto de estilo, es contenido que desaparece del PDF:
     en la pagina del estudio son 21 bloques, varios de ellos figuras completas.
     Se anulan aqui y no en app.js porque en pantalla la animacion se queda. */
  .reveal,
  .reveal.in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* ---------- color ---------- */
  /* Las ocho figuras son HTML y CSS, no imagenes: sin esto Chrome descarta los
     rellenos al imprimir y las barras salen huecas. */
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html,
  body {
    background: #fff !important;
    color: #1F1F1F;
    font-size: 10.5pt;
  }

  /* El sitio ya sirve esta pagina en claro. Se fija de todos modos por si
     alguien imprime con el tema oscuro activo. */
  body {
    --bg: #FFFFFF;
    --surface: #F6F6F4;
    --card: #FFFFFF;
    --line: #E8E8E6;
    --line2: #DADAD6;
    --t1: #1F1F1F;
    --t2: #54545C;
    --t3: #8A8A92;
  }

  /* ---------- portada ---------- */
  /* La portada no es una lamina aparte: es el propio hero de la pagina, con el
     mismo titulo, la misma entrada y los mismos cuatro datos. Asi no hay un
     segundo texto de portada que pueda quedarse viejo. */
  /* La primera pagina va sin margen para que no le caiga encima el encabezado
     corrido, asi que el margen de la portada lo pone el hero. */
  .est-hero {
    break-after: page;
    padding: 34mm 22mm 18mm !important;
    min-height: 0;
    border-bottom: 0 !important;   /* en pantalla separa del contenido; en la portada es un filete suelto */
  }

  /* Columna en flex unicamente para poder mandar la marca al final con order,
     sin reordenar el HTML. Sin min-height: al paginar no se comporta como en
     pantalla y acaba limitando la caja en vez de estirarla, asi que la posicion
     de la marca se fija con un margen explicito y medido sobre el PDF. */
  .est-hero .est-in {
    max-width: none;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    /* Altura util de la portada, para que margin-top:auto empuje la marca al pie.
       Ojo con la unidad: gen-pdf.mjs imprime con scale 0.9, asi que un milimetro
       de CSS mide 0.9 mm en el papel. Estos 252 mm caen en 227 mm reales y el
       logo cierra cerca de 257 mm, con aire hasta el pie de pagina. Si cambia
       ESCALA en el generador, hay que rehacer esta cuenta. */
    height: 252mm;
  }

  /* Marca en la portada. Es un <img> y no un fondo de pseudo-elemento porque el
     fondo no llego a pintarse en el PDF, y ademas asi lleva texto alternativo. */
  /* La marca cierra la portada, centrada al pie. Va al final con order, no
     reordenando el HTML, para que en el marcado siga siendo lo primero del hero
     y no se cuele en medio del titular.
     La separacion es un margen explicito y no un margin-top:auto porque el
     min-height del contenedor no se aplica al paginar: sin altura que repartir,
     el auto se queda en cero y la marca sube. Medido sobre el PDF, con estos
     valores el logo cierra alrededor de 258 mm y deja aire hasta el pie. */
  .est-print-mark {
    display: block !important;
    order: 99;
    margin: auto auto 0;   /* el auto superior la empuja al pie de la columna */
    width: 20mm;
    height: auto;
  }

  /* El wordmark abre la portada, discreto: identifica quien firma sin competir
     con el titular, que es lo que tiene que leerse primero. */
  .est-print-mark-top {
    display: block !important;
    width: 34mm;
    height: auto;
    margin: 0 0 16mm;
  }

  .est-hero .est-kicker {
    font-family: var(--mono, monospace);
    font-size: 8.5pt;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #5046E5;
    margin: 0 0 6mm;
  }

  .est-hero .est-kicker .dot {
    display: none;
  }

  .est-h1 {
    font-size: 30pt;
    line-height: 1.1;
    letter-spacing: -.015em;
    margin: 0 0 7mm;
    max-width: 150mm;
  }

  .est-hero .est-dek {
    font-size: 12.5pt;
    line-height: 1.55;
    color: #41414A;
    max-width: 140mm;
    margin: 0 0 12mm;
  }

  /* Los cuatro datos duros de la portada, en fila. En pantalla van dentro de una
     tarjeta con borde redondeado; en la portada esa caja sobra y se sustituye
     por dos filetes, que es como se pauta el resto del documento. */
  .est-hero .est-facts {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: none !important;
    border: 0 !important;
    border-top: 1.5pt solid #1F1F1F !important;
    border-bottom: .5pt solid #DADAD6 !important;
    border-radius: 0 !important;
    padding: 6mm 0;
    margin: 0 0 12mm;
  }

  .est-hero .est-fact {
    border: 0 !important;
    padding: 0 6mm 0 0;
  }

  .est-hero .est-fact b {
    display: block;
    font-family: var(--mono, monospace);
    font-size: 20pt;
    line-height: 1;
    color: #5046E5;
    margin-bottom: 2mm;
  }

  .est-hero .est-fact span {
    font-size: 8.5pt;
    line-height: 1.35;
    color: #54545C;
  }

  .est-hero .est-meta {
    display: block !important;
    font-size: 9.5pt;
    color: #54545C;
  }

  .est-hero .est-meta a {
    color: #1F1F1F;
    font-weight: 600;
  }

  .est-hero .est-meta .dot {
    display: inline;
    margin: 0 2mm;
    color: #A9A9B0;
  }

  /* ---------- indice ---------- */
  /* Se conserva porque en el PDF los anclas siguen siendo enlaces vivos: queda
     como indice navegable, que es justo lo que el PDF anterior no tenia. */
  /* El indice va en pagina propia y en lista, una entrada por renglon. En
     pantalla es una columna flotante que acompana la lectura, con las entradas
     fluyendo en linea; impreso eso se lee como un parrafo de titulos sueltos.
     Hay que anular el display:flex del ol, que es lo que las encadena. */
  .est-toc {
    break-after: page;
    position: static !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0;
  }

  .est-toc ol {
    display: block !important;
    columns: 1 !important;
    gap: 0 !important;
  }

  .est-toc li {
    margin: 0 0 3mm;
    padding-bottom: 1.6mm;
    border-bottom: .4pt solid #E8E8E6;
    font-size: 11pt;
    line-height: 1.3;
    break-inside: avoid;
  }

  .est-toc p {
    font-family: var(--mono, monospace);
    font-size: 8.5pt;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #5046E5;
    margin: 0 0 5mm;
  }

  .est-toc ol {
    columns: 2;
    column-gap: 12mm;
    font-size: 10pt;
    line-height: 1.9;
  }

  .est-toc a {
    color: #1F1F1F;
    text-decoration: none;
  }

  /* ---------- texto ---------- */
  .post,
  .est-in,
  .est-muestra,
  .est-stats,
  .est-datos {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Las secciones con fondo propio necesitan su aire interior de vuelta: sin el,
     el texto y las barras quedan pegados al filo de la caja oscura. La regla de
     arriba quita el padding a .est-in para ganar ancho de columna, y eso vale
     para el texto corrido pero no para un bloque que se pinta. */
  .est-stats .est-in,
  .est-muestra .est-in,
  .est-datos .est-in,
  .est-cite .est-in {
    padding: 0 12mm !important;
  }

  .est-stats {
    padding: 14mm 0 !important;
  }

  h2 {
    font-size: 17pt;
    line-height: 1.2;
    margin: 9mm 0 4mm;
    break-after: avoid;
    break-inside: avoid;
  }

  h3 {
    font-size: 12.5pt;
    margin: 6mm 0 2.5mm;
    break-after: avoid;
  }

  p,
  li {
    orphans: 3;
    widows: 3;
  }

  /* Los parrafos del cuerpo no se parten entre paginas. orphans y widows deberian
     bastar, pero Chrome los aplica de forma irregular al paginar y dejaba
     renglones sueltos al principio de la pagina siguiente, huerfanos de su
     parrafo. Son parrafos cortos: ninguno se acerca al alto de una pagina, asi
     que mantenerlos enteros no arriesga desbordes. */
  .post p,
  .post li {
    break-inside: avoid;
  }

  p {
    font-size: 10.5pt;
    line-height: 1.6;
  }

  /* ---------- figuras y tarjetas ---------- */
  /* Una figura partida a la mitad pierde el sentido: la barra queda en una
     pagina y su cifra en la siguiente. */
  /* Ojo con la diferencia entre la pieza y el contenedor que la agrupa: marcar
     solo .est-card deja que .est-cards se parta entre sus hijas, que es como se
     colaba una lista de hallazgos a caballo entre dos paginas con la caja
     cortada a la mitad. Van los dos niveles. */
  /* Ningun bloque del estudio se parte entre paginas. Se hace por patron de
     clase y no enumerando una por una: el estudio tiene decenas de contenedores
     est-* y listarlos a mano garantiza olvidar alguno, que es justo lo que fue
     pasando (est-cards, est-kpis, est-dist, una tras otra). Si un bloque
     resultara mas alto que la pagina, Chrome ignora la regla y lo parte igual,
     asi que la regla amplia no arriesga desbordes.
     .est-in queda fuera porque envuelve secciones enteras, no piezas. */
  [class^="est-"]:not(.est-in):not(.est-toc):not(.est-refs):not(.est-more-in),
  [class*=" est-"]:not(.est-in):not(.est-toc):not(.est-refs):not(.est-more-in),
  .stats-grid,
  .stat,
  table,
  figure,
  blockquote,
  pre {
    break-inside: avoid;
  }

  .est-fig {
    margin: 6mm 0;
  }

  .est-fig figcaption {
    font-size: 8.5pt;
    color: #54545C;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* La lista de agregados mide 953 px y en una pagina caben 1027, asi que entra
     entera pero sin margen para sus dos encabezados. Chrome ademas no respeta
     break-inside:avoid sobre contenedores grid, que es lo que es. Se aprieta el
     interlineado para ganar el alto que falta y que titulares y lista viajen
     juntos en la misma pagina. */
  .est-kpi {
    padding-top: 2.6mm !important;
    padding-bottom: 2.6mm !important;
  }

  .est-kpi-c {
    margin-top: 1mm !important;
    font-size: 8.5pt;
  }

  .est-kpi-t {
    font-size: 10pt;
  }

  /* ---------- plegados ---------- */
  /* El metodo completo y las preguntas frecuentes viven en <details>. En
     pantalla se pliegan para no abrumar; en el PDF tienen que estar abiertos,
     porque son exactamente lo que revisa quien verifica el estudio. */
  details {
    break-inside: auto;
  }

  details > summary {
    list-style: none;
    font-weight: 600;
    margin-bottom: 2.5mm;
    break-after: avoid;
  }

  details > summary::-webkit-details-marker,
  details > summary::marker {
    display: none;
    content: "";
  }

  details > summary small {
    display: block;
    font-weight: 400;
    font-size: 9pt;
    color: #54545C;
  }

  /* ---------- datos abiertos ---------- */
  /* Los dos botones de descarga se salvan del ocultado general de .btn y se
     imprimen como enlaces con su URL a la vista. En pantalla el boton basta
     porque se pulsa; en papel un boton no hace nada, y quien lea el PDF impreso
     necesita poder teclear la direccion. La URL sale completa porque para
     entonces el generador ya la reescribio al dominio real. */
  .est-datos-links a.btn {
    display: block !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 3mm;
    color: #5046E5;
    font-weight: 600;
    font-size: 9.5pt;
  }

  .est-datos-links a.btn::after {
    content: attr(href);
    display: block;
    font-family: var(--mono, monospace);
    font-size: 8pt;
    font-weight: 400;
    color: #54545C;
    word-break: break-all;
    margin-top: .6mm;
  }

  /* ---------- dos columnas ---------- */
  /* Solo donde el contenido es una lista de piezas cortas e independientes: las
     preguntas frecuentes y las fuentes. Ahi las dos columnas hacen lo que se
     espera de un informe, acortan la linea de lectura y aprovechan el pliego.
     No se aplican al cuerpo del estudio a proposito: ocho de sus quince
     secciones llevan figuras de ancho completo, y una figura no cabe en media
     columna sin dejar de leerse. */
  .post-faq,
  .est-refs,
  .est-more-in {
    columns: 2;
    column-gap: 10mm;
    column-rule: .5pt solid #E8E8E6;
  }

  /* El metodo completo es el bloque mas largo del documento y es prosa seguida:
     a una sola columna ocupa paginas enteras de renglon muy ancho.
     Arranca en pagina nueva porque la tabla que lleva dentro cruza las dos
     columnas, y despues de un elemento que las cruza el texto tiene que empezar
     un juego de columnas nuevo. Si el bloque empieza a media pagina, ese reinicio
     no cabe y deja el resto de la hoja vacia. */
  .est-more {
    break-before: page;
  }

  .est-more-in {
    font-size: 9pt;
    line-height: 1.5;
  }

  .est-more-in h3 {
    font-size: 10pt;
    margin: 4mm 0 1.5mm;
    break-after: avoid;
  }

  .est-more-in h3:first-child {
    margin-top: 0;
  }

  /* La tabla de areas no cabe en media columna: se salia por la derecha y perdia
     la segunda mitad de cada celda. Cruza las dos columnas y recupera su ancho. */
  /* column-span solo obedece en el hijo directo del contenedor multicolumna, y
     aqui la tabla viene envuelta en .post-tablewrap: apuntar a <table> no servia
     de nada. Ese envoltorio ademas lleva scroll horizontal para el movil, que al
     imprimir no desplaza nada, solo recorta lo que sobra. */
  .est-more-in .post-tablewrap,
  .est-more-in table,
  .est-more-in figure,
  .est-more-in .est-fig {
    column-span: all;
    width: 100%;
    margin: 3mm 0 4mm;
    overflow: visible !important;
  }

  .post-tablewrap {
    overflow: visible !important;
  }

  .est-more-in table {
    table-layout: fixed;
    border-collapse: collapse;
  }

  .est-more-in td,
  .est-more-in th {
    font-size: 8.5pt;
    line-height: 1.4;
    padding: 1.6mm 2.4mm;
  }

  /* Una pregunta partida entre columnas se lee como dos preguntas distintas. */
  .post-faq > details,
  .est-refs > li {
    break-inside: avoid;
    margin-bottom: 4mm;
  }

  /* En pantalla cada pregunta es una tarjeta plegable con su signo de mas o
     menos. En papel no hay nada que plegar: el signo es un control muerto y la
     caja solo roba ancho. Se quedan pregunta y respuesta, separadas por la
     jerarquia tipografica, que es como se pauta un cuestionario impreso. */
  .post-faq details {
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    margin-bottom: 5mm;
    overflow: visible;
  }

  .post-faq summary {
    display: block !important;
    padding: 0 !important;
    font-size: 9.5pt;
    line-height: 1.35;
    margin-bottom: 1.5mm;
  }

  .post-faq summary::after,
  .post-faq details[open] summary::after {
    content: none !important;
    display: none !important;
  }

  .post-faq details > p {
    padding: 0 !important;
    font-size: 9pt;
    line-height: 1.5;
  }

  /* ---------- enlaces ---------- */
  /* Se quedan azules y vivos: el PDF circula por correo y el camino de vuelta
     al sitio es el unico que tiene. No se imprime la URL entre parentesis
     porque ensucia un texto que ya esta lleno de comandos y cifras. */
  a {
    color: #5046E5;
    text-decoration: none;
  }

  /* Los comandos de verificacion son para copiarlos a mano desde el papel. */
  code,
  kbd,
  samp,
  pre {
    font-family: var(--mono, monospace);
    font-size: 8.5pt;
    background: #F6F6F4;
    color: #1F1F1F;
  }

  pre {
    padding: 3mm;
    border: .5pt solid #E8E8E6;
    white-space: pre-wrap;
    word-break: break-word;
  }
}