/* print.css — la hoja de catálogo y de requisición, en papel y en pantalla.
 *
 * Las medidas son milimétricas porque la página es A4 de verdad: 210×297 mm.
 * En pantalla la hoja se reduce con `zoom` desde pdf.js; al imprimir vuelve a 1.
 */

@import url('tokens.css');

/* ================= VISTA PREVIA EN PANTALLA ================= */
.vista{
  position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;
  background:var(--v-900);
}
.vista[hidden]{display:none}

.vista-barra{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  border-bottom:1px solid var(--linea-oscura);color:var(--texto-claro);
}
.vista-barra h4{font-family:var(--f-titular);font-weight:400;font-size:14px;margin:0}
.vista-barra small{font-size:10.5px;color:var(--texto-claro-suave)}
.vista-barra button{color:var(--texto-claro);display:flex;padding:4px}
.vista-barra button svg{width:20px;height:20px}

.vista-cuerpo{flex:1;overflow:auto;padding:10px;background:var(--grafito)}
.vista-pie{
  display:flex;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linea-oscura);
}
.vista-pie .btn{flex:1}

/* ================= LA HOJA ================= */
.hoja{
  width:210mm;margin:0 auto;
  font-family:var(--f-texto);color:var(--grafito);
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.spage{
  position:relative;box-sizing:border-box;
  width:210mm;height:297mm;
  padding:19mm 14mm 14mm;
  background:var(--papel);
  overflow:hidden;
}
.hoja .spage + .spage{margin-top:8mm}
@media screen{.spage{box-shadow:0 2px 14px rgba(0,0,0,.35)}}

.scuerpo{height:100%}

/* ---------- Membrete ---------- */
.memb{
  position:absolute;top:0;left:14mm;right:14mm;height:19mm;
  display:flex;align-items:center;gap:3mm;
  border-bottom:.4mm solid var(--v-700);
}
.memb-iso{display:flex;flex:none}
.memb-n{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.memb-n b{font-family:var(--f-titular);font-weight:400;font-size:3.1mm;letter-spacing:.01em}
.memb-n span{font-size:2.3mm;color:var(--texto-suave)}
.memb-d{
  flex:none;text-align:right;display:flex;flex-direction:column;
  font-size:2.2mm;line-height:1.35;color:var(--texto-suave);
}
.memb-d b{font-size:2.6mm;font-weight:700;color:var(--v-700);letter-spacing:.02em}

/* ---------- Pie ---------- */
.pfoot{
  position:absolute;bottom:0;left:14mm;right:14mm;height:14mm;
  display:flex;align-items:center;justify-content:space-between;gap:4mm;
  border-top:.3mm solid var(--linea);
  font-size:2.2mm;color:var(--texto-tenue);letter-spacing:.02em;
}
.pfoot .mono{font-size:2mm;letter-spacing:.09em}

/* ---------- Portada ---------- */
.cover{
  height:calc(100% - 26mm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding-bottom:6mm;
}
.cover-logo{width:46mm;height:auto;margin-bottom:6mm}
.cover-co{
  font-size:2.6mm;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--v-700);margin-bottom:3mm;
}
.cover h1{
  font-family:var(--f-titular);font-weight:400;font-size:11mm;line-height:1.1;
  margin:0 0 3mm;max-width:150mm;letter-spacing:-.01em;
}
.cover-grupo{
  font-size:3mm;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sobre-color);background:var(--v-500);
  padding:1.6mm 4mm;border-radius:.8mm;margin-bottom:8mm;
}
.cover-datos{font-size:2.9mm;line-height:1.65;color:var(--texto-suave);max-width:130mm}

.cover-banda{
  position:absolute;left:14mm;right:14mm;bottom:18mm;height:14mm;
  display:flex;border:.3mm solid var(--linea);background:var(--v-100);
}
.cover-banda div{
  flex:1;padding:2mm 3mm;border-right:.3mm solid var(--linea);
  display:flex;flex-direction:column;justify-content:center;gap:.8mm;
}
.cover-banda div:last-child{border-right:0}
.cover-banda span{
  font-size:1.9mm;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-tenue);
}
.cover-banda b{font-size:3.1mm;font-weight:700;color:var(--v-900)}

/* ---------- Título de sección ---------- */
.stitulo{
  display:flex;align-items:baseline;justify-content:space-between;gap:4mm;
  border-bottom:.3mm solid var(--linea);padding-bottom:2mm;margin-bottom:4mm;
}
.stitulo h5{
  font-family:var(--f-titular);font-weight:400;font-size:4.6mm;margin:0;
  letter-spacing:-.01em;
}
.stitulo em{
  font-style:normal;font-size:2.4mm;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-tenue);
}

/* ---------- Grilla 3×3 de fichas ---------- */
.fgrid{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:78mm;gap:3.4mm;
}
.ficha{
  border:.3mm solid var(--linea);border-radius:1mm;overflow:hidden;
  display:flex;flex-direction:column;background:var(--papel);
}
/* La foto se queda con el alto sobrante de la fila, no el texto. Va en
   `contain` sobre el tinte: las fotos son 4:3 y la caja es más alta, así que
   recortarlas cortaría producto. Letra igual en las nueve fichas. */
.ficha-f{
  position:relative;flex:1;min-height:0;background:var(--v-100);
  display:grid;place-items:center;overflow:hidden;
}
.ficha-f .silueta{width:30%;height:auto;color:var(--v-500);opacity:.42}
.ficha-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ficha-nota{
  position:absolute;left:0;right:0;bottom:1.4mm;text-align:center;
  font-size:1.7mm;letter-spacing:.13em;text-transform:uppercase;
  color:var(--v-700);opacity:.5;
}
.ficha .sello{
  position:absolute;top:1.4mm;left:1.4mm;z-index:2;
  font-family:var(--f-mono);font-size:1.8mm;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.7mm 1.3mm;border-radius:.5mm;color:var(--sobre-color);
}
.ficha-b{padding:2.2mm 2.4mm 2.6mm;flex:none;display:flex;flex-direction:column}
.ficha-b .impa{font-size:2.1mm;font-weight:500;color:var(--texto-tenue);letter-spacing:.02em}
.ficha-es{font-size:2.9mm;font-weight:700;line-height:1.25;margin:.6mm 0 .3mm}
.ficha-en{font-size:2.5mm;font-style:italic;line-height:1.25;color:var(--texto-suave)}
.ficha-p{margin-top:1.4mm;font-size:2.3mm;color:var(--texto-suave)}

.sello--disponible{background:var(--estado-disponible)}
.sello--pedido{background:var(--estado-pedido)}
.sello--agotado{background:var(--estado-agotado)}

/* ---------- Requisición ---------- */
.req-datos-pdf{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2mm 4mm;
  background:var(--v-100);border:.3mm solid var(--linea);
  padding:3mm;margin-bottom:4mm;
}
.req-datos-pdf span{
  display:block;font-size:1.9mm;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texto-tenue);
}
.req-datos-pdf b{font-size:3mm}

.stabla{width:100%;border-collapse:collapse;font-size:2.7mm}
.stabla th{
  text-align:left;padding:2mm 2mm;border-bottom:.4mm solid var(--v-700);
  font-size:2.1mm;letter-spacing:.11em;text-transform:uppercase;color:var(--v-700);
}
.stabla td{padding:2mm;border-bottom:.25mm solid var(--linea);vertical-align:top}
.stabla .der{text-align:right}
.stabla .nom{font-weight:600}
.stabla .nom i{display:block;font-weight:400;font-size:2.3mm;color:var(--texto-suave)}

/* ---------- Cómo contratar ---------- */
.ctr-lead{font-size:3mm;line-height:1.6;color:var(--texto-suave);margin:0 0 5mm;max-width:150mm}

.ctr-pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm;margin-bottom:6mm}
.ctr-paso{border-top:.6mm solid var(--v-500);padding-top:2.2mm}
.ctr-paso span{
  display:block;font-size:2.2mm;font-weight:700;color:var(--v-500);margin-bottom:1mm;
}
.ctr-paso b{display:block;font-size:2.9mm;margin-bottom:1mm}
.ctr-paso p{margin:0;font-size:2.3mm;line-height:1.45;color:var(--texto-suave)}

.ctr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3.4mm;margin-bottom:7mm}
.ctr-b{border:.3mm solid var(--linea);background:var(--v-100);padding:3mm}
.ctr-b b{
  display:block;font-size:2.3mm;letter-spacing:.11em;text-transform:uppercase;
  color:var(--v-700);margin-bottom:1.6mm;
}
.ctr-b p{margin:0;font-size:2.6mm;line-height:1.5}
.ctr-b em{font-style:normal;font-weight:700}

.ctr-firma{display:grid;grid-template-columns:repeat(2,1fr);gap:8mm;margin-top:auto}
.ctr-firma div{
  border-top:.3mm solid var(--grafito);padding-top:2mm;
  font-size:2.4mm;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-suave);
}

/* ================= IMPRESIÓN ================= */
@page{size:A4;margin:0}

@media print{
  html,body{background:var(--papel)}
  /* Solo se imprime la hoja. */
  body > *{display:none !important}
  body > .vista{display:block !important;position:static;background:none}
  .vista-barra,.vista-pie{display:none !important}
  .vista-cuerpo{overflow:visible;padding:0;background:none}

  .hoja{zoom:1 !important;width:auto;margin:0}
  .spage{
    /* 296.5 y no 297: una caja de exactamente el alto de la página se desborda
       por redondeo y el navegador cuela una hoja en blanco entre cada dos. */
    height:296.5mm;
    box-shadow:none;margin:0 !important;
    break-after:page;page-break-after:always;
    break-inside:avoid;page-break-inside:avoid;
  }
  .hoja .spage:last-child{break-after:auto;page-break-after:auto}
  .ficha{break-inside:avoid;page-break-inside:avoid}
}