/* print.css — vista de impresión / exportación a PDF (@media print).
   Modelo:
     - Una hoja "portada" por rango (banner grande con Rango + precios +
       resumen de puntos), antes del primer punto.
     - Una hoja por punto de precio (y otra por bloque de huérfanos).
     - Cada hoja incluye su propio encabezado contextual (.print-head) con
       sublínea, rango, estilo+arquitectura y valor del punto.
     - Tarjetas en grid de 3 columnas, foto grande y nombre que no se corta.
     - `break-inside: avoid` en .punto/.huerfanos para que el header y las
       tarjetas NUNCA queden en hojas distintas. */

@page {
  size: A4 landscape;
  margin: 10mm;
}

@media print {
  /* Respetar colores de fondo, headers de rango y badges. */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Ocultar navegación, controles de edición y modales. */
  .topbar,
  .selectores,
  .filtros,
  .modal-overlay,
  .fab-masiva,
  .barra-masiva,
  .rango__add-prod,
  .rango__add-punto,
  .punto-add,
  .punto__del,
  .rango__conteo,
  .rango__lapiz,
  .rango__editar,
  .tarjeta__ocultar {
    display: none !important;
  }

  /* Headers de bloques superiores ocultos: su info se repite en la portada
     del rango y en cada print-head. .rango__vacio ("Sin productos…") fuera. */
  .curva__head,
  .rango__head,
  .estilo-grupo__head,
  .arquitectura-grupo__head,
  .rango__vacio {
    display: none !important;
  }

  /* Wrappers transparentes: cada .rango-portada/.punto/.huerfanos toma la
     hoja directamente sin estilos heredados del layout en pantalla. */
  .contenido { display: block; }
  .main { padding: 0; }
  body { background: #fff; font-size: 12px; color: #111; }

  .curva,
  .rango,
  .rango__estilos,
  .estilo-grupo,
  .arquitectura-grupo,
  .rango__puntos {
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  /* ---- Hojas que rompen página ---- */
  /* Cada portada/punto/huérfanos arranca en su propia hoja. break-inside
     avoid mantiene el print-head y las tarjetas juntos: el navegador prefiere
     empujar todo a la siguiente hoja antes que partir el bloque. */
  .rango-portada,
  .punto,
  .huerfanos {
    display: block !important;
    break-before: page;
    page-break-before: always;
    break-inside: avoid;
    page-break-inside: avoid;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    border: none !important;
  }

  /* Nota: el primer break-before del documento el navegador lo descarta
     automáticamente (no inserta hoja en blanco antes del primer elemento),
     así que no hace falta una regla especial para la primera portada. */

  /* Ocultar el cabezal/conteo del punto en pantalla, su info va en print-head. */
  .punto__cab,
  .punto__conteo,
  .huerfanos__titulo {
    display: none !important;
  }

  /* ---- Portada del rango: hoja banner ---- */
  /* overflow:hidden actúa como red de seguridad: si el listado de puntos es
     muy largo (mucha combinatoria estilo × arquitectura × punto), nunca se
     monta sobre la hoja siguiente — los puntos extra simplemente no aparecen
     en la portada (cada uno tiene su propia hoja completa después). */
  .rango-portada {
    display: flex !important;
    flex-direction: column;
    height: 190mm;
    padding: 0 !important;
    overflow: hidden;
  }
  .rango-portada__sublinea {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    color: #444;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
  }
  .rango-portada__sublinea strong { color: #000; }
  .rango-portada__fecha { font-size: 10px; color: #777; font-weight: normal; }

  .rango-portada__banner {
    margin-top: 8mm;
    text-align: center;
    color: #fff;
    padding: 10mm 10mm;
    border-radius: 6px;
    flex-shrink: 0;
  }
  .rango-portada--bajo  .rango-portada__banner { background: var(--color-vino,   #7a1a2e); }
  .rango-portada--medio .rango-portada__banner { background: var(--color-morado, #5e3a87); }
  .rango-portada--alto  .rango-portada__banner { background: var(--color-verde,  #2e7d32); }

  .rango-portada__nombre { font-size: 36px; font-weight: 800; letter-spacing: 2px; }
  .rango-portada__precio { font-size: 22px; font-weight: 600; margin-top: 4px; opacity: 0.92; }

  .rango-portada__resumen {
    display: flex;
    justify-content: center;
    gap: 24mm;
    margin-top: 8mm;
    flex-shrink: 0;
  }
  .rango-portada__cifra { text-align: center; }
  .rango-portada__cifra-valor { display: block; font-size: 30px; font-weight: 800; color: #000; }
  .rango-portada__cifra-label { font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 1px; }

  /* Listado de puntos: 3 columnas para acomodar muchos puntos sin desbordar.
     flex-grow + min-height: 0 le permite ocupar el resto del alto disponible
     y, junto al overflow:hidden del padre, descartar puntos sobrantes en el
     peor caso (rangos con muchísimos estilos × arquitecturas × puntos). */
  .rango-portada__puntos {
    list-style: none;
    margin: 6mm auto 0;
    padding: 0;
    max-width: 240mm;
    width: 100%;
    columns: 3;
    column-gap: 6mm;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .rango-portada__punto {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 4mm;
    padding: 3px 0;
    border-bottom: 1px dashed #bbb;
    font-size: 10.5px;
    break-inside: avoid;
  }
  .rango-portada__punto-valor   { font-weight: 700; color: #000; min-width: 24mm; }
  .rango-portada__punto-sub     { color: #555; flex: 1; text-align: center; font-size: 9.5px; }
  .rango-portada__punto-conteo  { color: #444; min-width: 14mm; text-align: right; }
  .rango-portada__punto--huerfanos .rango-portada__punto-valor { color: #777; font-style: italic; }

  /* ---- print-head: el encabezado de cada hoja de punto ---- */
  .print-head {
    display: block !important;
    border-bottom: 2px solid #333;
    padding-bottom: 6px;
    margin-bottom: 10px;
  }
  .print-head__sublinea {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    color: #444;
    margin-bottom: 5px;
  }
  .print-head__sublinea strong { color: #000; }
  .print-head__fecha { font-size: 10px; color: #777; font-weight: normal; }
  .print-head__rango {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 6px;
  }
  .print-head__rango--bajo  { background: var(--color-vino,   #7a1a2e); }
  .print-head__rango--medio { background: var(--color-morado, #5e3a87); }
  .print-head__rango--alto  { background: var(--color-verde,  #2e7d32); }

  .print-head__fila {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .print-head__estilo {
    padding: 3px 10px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 12px;
  }
  .print-head__titulo { font-size: 22px; font-weight: 700; color: #000; }
  .print-head__detalle { font-size: 11px; color: #555; margin-left: auto; }

  /* ---- Tarjetas: grid de 3 columnas, foto grande ---- */
  .punto__tarjetas,
  .huerfanos__lista {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8mm !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .tarjeta {
    break-inside: avoid;
    box-shadow: none !important;
    cursor: default;
    transform: none !important;
    border: 1px solid #bbb !important;
    border-radius: 6px;
    background: #fff !important;
    width: auto !important;
    flex: initial !important;
    display: flex;
    flex-direction: column;
  }

  /* Foto: ocupa el ancho completo de la tarjeta y es bien grande para que se
     vea el producto con detalle. El contain evita que se recorte. 70mm es el
     punto dulce donde una fila de tarjetas pesa ~85mm y dos filas (170mm)
     todavía caben bajo el print-head (~30mm) en A4 landscape (alto útil 190mm). */
  .tarjeta__foto {
    width: 100%;
    height: 70mm;
    object-fit: contain;
    background: #f7f7f7;
    padding: 3mm;
    box-sizing: border-box;
    /* Fuerza interpolación de calidad al re-escalar la imagen al embeberla
       en el PDF. Importante para pendones / impresión a tamaño grande. */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
  }
  .tarjeta__foto--vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 13px;
  }

  .tarjeta__cuerpo {
    padding: 7px 10px 9px;
    gap: 4px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .tarjeta__nombre {
    font-size: 12px;
    line-height: 1.3;
    /* Hasta 3 líneas: cubre la mayoría de nombres sin desbordar la tarjeta. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #000;
    font-weight: 600;
  }
  .tarjeta__precio {
    font-size: 16px;
    font-weight: 700;
    color: #000;
  }
  .tarjeta__badge {
    display: inline-block;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 3px;
    color: #fff;
    align-self: flex-start;
  }

  .tarjeta__resumen {
    display: flex !important;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 2px;
  }
  .tarjeta__estilo  { font-size: 10px; padding: 1px 7px; border-radius: 3px; }
  .tarjeta__acabado { font-size: 11px; color: #444; }

  .tarjeta__manual { font-size: 10px; color: #555; }

  /* ======================================================================
     Modo "PDF completo": toda la curva en UNA sola hoja gigante.
     Activado dinámicamente por app.js añadiendo `body.print-resumen` y un
     <style> con un @page custom (tamaño calculado a partir del scrollWidth
     de cada fila de puntos + scrollHeight de la curva).

     Estrategia: cancelar los saltos de página y portadas del modo clásico
     (una hoja por punto), volver a mostrar los headers de contexto que
     viven en el DOM, y dejar el layout horizontal de los puntos tal como
     se ve en pantalla.

     La especificidad `body.print-resumen .x` (0,2,0) gana siempre sobre
     las reglas simples `.x !important` del modo clásico (0,1,0 +
     !important contra 0,2,0 + !important → gana la más específica). */

  body.print-resumen .rango-portada { display: none !important; }

  /* Cancelar saltos de página por punto/huérfanos: en este modo todo va
     en una sola hoja gigante. */
  body.print-resumen .punto,
  body.print-resumen .huerfanos {
    break-before: auto !important;
    page-break-before: auto !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    background: transparent !important;
  }

  /* El print-head (encabezado contextual del modo clásico) no aplica aquí:
     en el modo completo los headers del rango y del estilo siguen visibles. */
  body.print-resumen .print-head { display: none !important; }

  /* Volver a mostrar los headers del layout normal. */
  body.print-resumen .curva__head,
  body.print-resumen .rango__head,
  body.print-resumen .estilo-grupo__head,
  body.print-resumen .arquitectura-grupo__head {
    display: flex !important;
  }
  body.print-resumen .punto__cab,
  body.print-resumen .punto__conteo,
  body.print-resumen .huerfanos__titulo {
    display: flex !important;
  }
  body.print-resumen .huerfanos__titulo { display: block !important; }

  /* Todos los puntos del rango EN UNA SOLA FILA HORIZONTAL: sin wrap, sin
     scroll. La hoja se ajusta al ancho real del contenido. */
  body.print-resumen .rango__puntos {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow: visible !important;
    padding: 10px 12px !important;
    align-items: flex-start !important;
  }

  body.print-resumen .punto {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Las tarjetas dentro de cada punto van TAMBIÉN AL LADO (igual que en
     pantalla), no apiladas. Así "todo queda al lado": puntos en fila y
     dentro de cada punto, sus tarjetas en fila. */
  body.print-resumen .punto__tarjetas {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: flex-start !important;
  }

  body.print-resumen .punto__tarjetas .tarjeta,
  body.print-resumen .huerfanos__lista .tarjeta {
    width: 200px !important;
    flex: 0 0 200px !important;
    border: 1px solid #bbb !important;
    border-radius: 6px;
  }

  /* Foto un poco más grande que la pantalla (140 vs 120 px) para que se vea
     mejor en pendones grandes. image-rendering: high-quality fuerza al
     navegador a usar interpolación de calidad al embeber/escalar; sin esto
     algunos navegadores aplican un downscale más agresivo. La calidad final
     del raster en el PDF depende SOBRE TODO de la resolución de la imagen
     fuente que entrega la API — si ahí ya es baja, ningún CSS la mejora. */
  body.print-resumen .tarjeta__foto {
    width: 100% !important;
    height: 140px !important;
    object-fit: cover !important;
    padding: 0 !important;
    background: var(--color-arena, #f4f3f1) !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
  }
  body.print-resumen .tarjeta__cuerpo {
    padding: 8px 10px 10px !important;
    gap: 4px !important;
  }
  body.print-resumen .tarjeta__nombre {
    font-size: 12px !important;
    -webkit-line-clamp: 2 !important;
  }
  body.print-resumen .tarjeta__precio {
    font-size: 14px !important;
  }

  /* Huérfanos: también en una sola fila horizontal, igual que los puntos. */
  body.print-resumen .huerfanos {
    border-top: 1px dashed #ccc;
    padding: 10px 14px !important;
    background: #fcfbf9 !important;
  }
  body.print-resumen .huerfanos__lista {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    grid-template-columns: none !important;
  }

  /* Ocultar TODO control interactivo en modo resumen. */
  body.print-resumen .topbar,
  body.print-resumen .selectores,
  body.print-resumen .filtros,
  body.print-resumen .modal-overlay,
  body.print-resumen .rango__add-prod,
  body.print-resumen .rango__add-punto,
  body.print-resumen .punto-add,
  body.print-resumen .punto__add-inline,
  body.print-resumen .punto__del,
  body.print-resumen .rango__lapiz,
  body.print-resumen .rango__editar,
  body.print-resumen .tarjeta__ocultar {
    display: none !important;
  }

  /* El contenido principal toma toda la hoja sin sidebar. */
  body.print-resumen .contenido { display: block !important; }
  body.print-resumen .main { padding: 0 !important; }
  body.print-resumen .curva { gap: 10px !important; }

  /* ======================================================================
     Modo "PDF por producto": una hoja A4 landscape por cada tarjeta, con
     foto grande y el contexto (sublínea / rango / punto) en la cabecera.
     Pedido por el director para tener un "pendón" individual por SKU.

     Activado por `body.print-por-producto`. Antes de imprimir, app.js clona
     el `.print-head` del .punto/.huerfanos padre dentro de cada .tarjeta
     (con la clase extra `.print-head--por-tarjeta`) y los limpia al
     terminar. Aquí ocultamos el `.print-head` del .punto y dejamos visible
     solo el clon dentro de cada tarjeta.

     Estrategia de saltos:
       - Cancelamos `break-before: page` en .punto/.huerfanos (modo clásico).
       - Activamos `break-before: page` en cada .tarjeta.
       - Las listas (.punto__tarjetas, .huerfanos__lista) pasan de grid a
         block para que cada tarjeta sea su propia hoja en flujo lineal.
       - Portadas de rango ocultas. */
  body.print-por-producto .rango-portada { display: none !important; }

  body.print-por-producto .punto,
  body.print-por-producto .huerfanos {
    break-before: auto !important;
    page-break-before: auto !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
    background: transparent !important;
  }

  /* Ocultamos el print-head a nivel .punto/.huerfanos — el clon que va
     dentro de cada tarjeta es el que se ve en esta vista. */
  body.print-por-producto .punto > .print-head,
  body.print-por-producto .huerfanos > .print-head {
    display: none !important;
  }

  body.print-por-producto .punto__tarjetas,
  body.print-por-producto .huerfanos__lista {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Cada tarjeta = una hoja completa. break-inside avoid garantiza que la
     cabecera, la foto y el cuerpo no se partan en dos hojas si la primera
     mide algo más que el alto útil. El primer break-before del documento
     el navegador lo descarta solo. */
  body.print-por-producto .tarjeta {
    break-before: page !important;
    page-break-before: always !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    width: 100% !important;
    flex: initial !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  /* Reutiliza los estilos generales de .print-head; ajustamos márgenes para
     comprimir el alto y que la tarjeta entera quepa en una hoja A4 landscape
     (alto útil ~190mm). */
  body.print-por-producto .print-head--por-tarjeta {
    display: block !important;
    margin-bottom: 3mm !important;
    padding-bottom: 4px !important;
  }
  body.print-por-producto .print-head--por-tarjeta .print-head__sublinea {
    margin-bottom: 3px !important;
  }
  body.print-por-producto .print-head--por-tarjeta .print-head__rango {
    margin-bottom: 3px !important;
  }

  /* Foto: 90mm de alto y centrada al 70% del ancho con `align-self: center`,
     para que el cuadro gris de fondo NO ocupe todo el ancho de la hoja
     (antes se veía como una franja horizontal de borde a borde) y quede
     como un cuadro centrado con margen lateral. object-fit:contain para no
     recortar producto; el background arena rellena el espacio del cuadro
     cuando el producto no llena su área. */
  body.print-por-producto .tarjeta__foto {
    width: 82% !important;
    align-self: center !important;
    height: 120mm !important;
    object-fit: contain !important;
    padding: 7mm !important;
    /* Fondo más estético: degradado suave blanco→arena y una sombra ligera
       para que se vea como un cuadro de exhibición profesional, no como un
       bloque plano. El `*` del @media print de arriba activa
       print-color-adjust: exact, así que el gradiente sale en el PDF. */
    background: linear-gradient(135deg, #ffffff 0%, #efece6 100%) !important;
    border-radius: 10px;
    box-shadow:
      0 3px 14px rgba(0, 0, 0, 0.08),
      inset 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
  }
  body.print-por-producto .tarjeta__foto--vacia {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    color: #999 !important;
  }

  /* Cuerpo compacto: padding y gap reducidos para que nombre, precio y
     etiquetas quepan junto a foto + cabecera en la misma hoja. */
  body.print-por-producto .tarjeta__cuerpo {
    padding: 4mm 6mm 0 !important;
    gap: 2mm !important;
  }

  /* Nombre sin recortar — en el modo por punto va a 3 líneas; aquí lo dejamos
     entero porque hay espacio para 2-3 líneas en el cuerpo (~35mm). */
  body.print-por-producto .tarjeta__nombre {
    font-size: 18px !important;
    line-height: 1.2 !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
  }
  body.print-por-producto .tarjeta__precio {
    font-size: 24px !important;
  }
  body.print-por-producto .tarjeta__badge {
    font-size: 11px !important;
    padding: 2px 9px !important;
  }
  body.print-por-producto .tarjeta__estilo,
  body.print-por-producto .tarjeta__acabado {
    font-size: 12px !important;
    padding: 2px 9px !important;
  }
  body.print-por-producto .tarjeta__resumen {
    gap: 6px !important;
    margin-top: 1mm !important;
  }

  /* La × de ocultar producto no debe imprimirse aunque sobreviva al render. */
  body.print-por-producto .tarjeta__ocultar { display: none !important; }

  /* ======================================================================
     Modo "PDF por estilo de vida": el MISMO layout que "PDF completo" (toda la
     curva en una hoja grande: rangos apilados, puntos en fila horizontal),
     pero repetido por estilo de vida (Natural, Glam, Contemporáneo…), cada uno
     en su propia hoja.

     Activado por `body.print-resumen` (el layout del completo) +
     `body.print-por-estilo` (separa estilos y oculta el original). app.js
     construye fuera del <main> un #print-por-estilo-root con un clon de la curva
     por estilo (filtrado, sin portadas) y un <style> con el @page calculado. */

  /* Ocultar el render en pantalla (vive dentro de .main); lo que se imprime
     son los clones del root. */
  body.print-por-estilo .main { display: none !important; }

  /* Mostrar el root clonado (en pantalla está oculto por curva.css). */
  body.print-por-estilo #print-por-estilo-root { display: block !important; }

  /* Cada estilo debe quedar ENTERO en una sola hoja: break-inside avoid evita
     que se parta. El salto de página va SOLO entre estilos (selector de
     hermano adyacente), NO antes del primero — así no se genera una hoja en
     blanco al inicio. La altura de @page la calcula app.js para que el estilo
     más alto quepa completo. */
  body.print-por-estilo .pe-estilo {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  body.print-por-estilo .pe-estilo + .pe-estilo {
    break-before: page;
    page-break-before: always;
  }

  /* ======================================================================
     Puntos VACÍOS: en pantalla se muestran como destino de arrastre, pero al
     imprimir NUNCA deben salir (generarían hojas en blanco). Se listan los dos
     selectores para ganar en especificidad al `.punto` del modo completo
     (body.print-resumen .punto, 0-2-0). Va al final del @media print para
     imponerse por orden de cascada en los demás modos. */
  .punto--vacio,
  body.print-resumen .punto--vacio,
  body.print-por-estilo .punto--vacio {
    display: none !important;
  }
}