/* ============================================================
   COTA · Soportes de mesa (panel/soportes.html)
   Cada soporte es una tira de 105 × 297 mm: dos caras A6 que se
   doblan por la mitad en tienda. La cara de arriba va girada 180°
   para que, doblada, las dos se lean derechas. Dos tiras por A4.
   Todo se mide en --u: 1 mm al imprimir y en pantalla grande;
   en móvil, 1/210 del ancho disponible (la hoja entra entera).
   ============================================================ */

/* ----- Tipografías autoalojadas ----- */
@font-face{font-family:'Bricolage Grotesque';src:url('fonts/bricolage-grotesque-v9-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('fonts/bricolage-grotesque-v9-latin-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-v26-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-v26-latin-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Martian Mono';src:url('fonts/martian-mono-v6-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Martian Mono';src:url('fonts/martian-mono-v6-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ----- Tokens (los de styles.css) ----- */
:root{
  --canvas:       #E3E7E5;
  --canvas-deep:  #D0D7D5;
  --panel:        #F1F3F1;
  --ink:          #131817;
  --ink-soft:     #2C3534;
  --ink-mute:     #5D6660;
  --accent:       #A31E33;
  --accent-hover: #7E1527;
  --altitude:     #3E574A;
  --line:         rgba(19,24,23,.14);
  --ease:cubic-bezier(.33,.02,.2,1);
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Newsreader',Georgia,serif;
  --mono:'Martian Mono',ui-monospace,monospace;
}

/* ----- Base ----- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-print-color-adjust:exact;print-color-adjust:exact}
body{
  background:var(--canvas-deep);color:var(--ink);
  font-family:var(--body);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding:clamp(28px,6vw,64px) 16px clamp(48px,8vw,96px);
}
img{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* ============================================================
   PANTALLA: la barra y la vista previa
   ============================================================ */
.barra{
  width:min(210mm,100%);margin:0 auto clamp(28px,5vw,48px);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px;
}
.barra-texto{flex:1 1 30rem;min-width:0}
.barra-kicker{font-family:var(--mono);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-soft)}
.barra h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,6vw,2.9rem);line-height:1.04;letter-spacing:-.015em;margin:10px 0 12px}
.barra-instruccion{font-size:1.15rem;color:var(--ink);max-width:46ch}
.barra-nota{margin-top:10px;font-size:.98rem;font-style:italic;color:var(--ink-soft);max-width:58ch}

.btn-imprimir{
  flex:none;min-height:44px;min-width:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--accent);color:var(--panel);border:none;border-radius:999px;
  font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.01em;
  padding:12px 30px;cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.btn-imprimir svg{width:18px;height:18px;flex:none}
.btn-imprimir:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn-imprimir:active{transform:translateY(0)}
.btn-imprimir:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn-imprimir[hidden]{display:none}

/* Las hojas: contenedor de consulta para que --u siga el ancho */
.hojas{
  container-type:inline-size;
  width:min(210mm,100%);margin-inline:auto;
  display:flex;flex-direction:column;gap:clamp(28px,5vw,48px);
}
.pliego{display:block}
.hoja-etiqueta{
  font-family:var(--mono);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-soft);margin-bottom:10px;font-variant-numeric:tabular-nums;
}

/* ============================================================
   LA HOJA A4 (210 × 297 mm)
   ============================================================ */
.hoja{
  --u:calc(100cqw / 210);
  position:relative;display:flex;overflow:hidden;
  width:calc(var(--u) * 210);height:calc(var(--u) * 297);
  background:var(--canvas);color:var(--ink);
  box-shadow:0 1px 2px rgba(19,24,23,.08),0 14px 44px rgba(19,24,23,.14);
}
.tira{position:relative;width:calc(var(--u) * 105);height:100%;display:flex;flex-direction:column}
/* Navegadores sin unidades de contenedor: la hoja a tamaño real, con desplazamiento lateral */
@supports not (width:1cqw){
  .hoja{--u:1mm}
  .hojas{overflow-x:auto}
}

/* Marcas de corte (sólidas) y de doblez (discontinuas). El trazo va en
   atributos dentro del <symbol>: el CSS no llega a los clones de <use>. */
.marcas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ============================================================
   LA CARA A6 (105 × 148,5 mm). Margen de seguridad: 10 mm o más.
   ============================================================ */
.cara{
  position:relative;overflow:hidden;
  width:100%;height:calc(var(--u) * 148.5);
  padding:calc(var(--u) * 11) calc(var(--u) * 11) calc(var(--u) * 10);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.cara-arriba{transform:rotate(180deg)}

/* Curvas de nivel: verde de altitud, trazo y opacidad en el <symbol id="curvas"> */
.cara-curvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tira-par .cara-curvas{transform:scaleX(-1)}

.cara-cabecera{
  position:relative;width:100%;height:calc(var(--u) * 8);
  display:flex;align-items:center;justify-content:space-between;
}
.cara-marca{display:flex;align-items:center;gap:calc(var(--u) * 2.2)}
.cara-marca svg{width:calc(var(--u) * 8);height:calc(var(--u) * 8);flex:none}
.cara-cota{
  font-family:var(--display);font-weight:800;font-size:calc(var(--u) * 4.6);line-height:1;
  letter-spacing:.14em;margin-right:-.14em;
}
.cara-kicker{
  font-family:var(--mono);font-weight:600;font-size:calc(var(--u) * 2.1);line-height:1;
  text-transform:uppercase;letter-spacing:.2em;margin-right:-.2em;color:var(--ink-soft);
}

.cara-mesa{
  position:relative;margin-top:calc(var(--u) * 11.5);
  font-family:var(--display);font-weight:800;font-size:calc(var(--u) * 18);line-height:.95;
  letter-spacing:-.02em;white-space:nowrap;
}
.cara-escanea{
  position:relative;margin-top:calc(var(--u) * 4.8);
  font-family:var(--body);font-weight:400;font-size:calc(var(--u) * 6.2);line-height:1.2;
  color:var(--ink-soft);
}
.cara-qr{
  position:relative;margin-top:auto;
  width:calc(var(--u) * 60);height:calc(var(--u) * 60);
}
.cara-url{
  position:relative;margin-top:calc(var(--u) * 3.4);
  font-family:var(--mono);font-weight:400;font-size:calc(var(--u) * 2.5);line-height:1.4;
  letter-spacing:.06em;margin-right:-.06em;color:var(--ink-soft);
}

/* ============================================================
   IMPRESIÓN: A4 sin márgenes, una hoja por página
   ============================================================ */
@page{size:A4;margin:0}
@media print{
  html,body{background:var(--canvas)}
  body{padding:0}
  .no-imprimir{display:none!important}
  .hojas{width:210mm;gap:0;margin:0}
  .hoja{--u:1mm;box-shadow:none;break-inside:avoid;page-break-inside:avoid}
  .pliego{break-after:page;page-break-after:always}
  .pliego:last-child{break-after:auto;page-break-after:auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
}