/* Hoja para PAPEL · Soluciones Migura
 *
 * Por qué una vista imprimible y no una biblioteca de PDF: el hosting no tiene
 * Composer, así que habría que meter la biblioteca a mano, y las que funcionan
 * sin dependencias solo admiten las 14 fuentes base de PDF. Eso significa
 * perder Montserrat, los colores de marca y las barras de medida, que es
 * justamente lo que hace legible el informe. Esta vista conserva todo y el
 * navegador la guarda como PDF con un clic.
 */

@page{ size:A4; margin:16mm 14mm 18mm; }

@font-face { font-family:'Montserrat'; font-weight:400; font-display:swap; src:url('/assets/montserrat-400.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-weight:500; font-display:swap; src:url('/assets/montserrat-500.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-weight:600; font-display:swap; src:url('/assets/montserrat-600.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-weight:700; font-display:swap; src:url('/assets/montserrat-700.woff2') format('woff2'); }

:root{
  --navy:#0b3253; --cian:#42c8f4; --tinta:#0e1a26; --suave:#5d6b7a; --tenue:#647386; /* AA, igual que estilo.css */
  --linea:#e3e9f0; --lienzo:#f7f9fb;
  --ok:#0f7a3d; --aviso:#8a6100; --alerta:#b0350f;
}
*{ box-sizing:border-box; }
body{
  margin:0; font-family:'Montserrat',system-ui,sans-serif; color:var(--tinta);
  font-size:10.5pt; line-height:1.5; font-variant-numeric:tabular-nums;
  background:#fff;
}
.hoja{ max-width:186mm; margin:0 auto; padding:14mm 0; }

/* ── Cabecera del documento ─────────────────────────────────────────────── */
.doc-cabecera{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; padding-bottom:12px; border-bottom:2px solid var(--navy); margin-bottom:22px;
}
.doc-cabecera img{ height:34px; width:auto; }
.doc-titulo{ text-align:right; }
.doc-titulo h1{ font-size:14pt; font-weight:700; margin:0; letter-spacing:-.02em; color:var(--navy); }
.doc-titulo p{ margin:2px 0 0; font-size:8.5pt; color:var(--suave); }

/* ── Ficha de la persona ────────────────────────────────────────────────── */
.ficha{ margin-bottom:20px; }
.ficha h2{ font-size:16pt; font-weight:700; margin:0 0 4px; letter-spacing:-.025em; }
.ficha .sub{ color:var(--suave); font-size:9.5pt; margin:0 0 12px; }
.datos-ficha{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px 18px; }
.datos-ficha div span{ display:block; font-size:8pt; color:var(--tenue); }
.datos-ficha div b{ font-size:9.5pt; font-weight:600; }

/* ── Secciones ──────────────────────────────────────────────────────────── */
section{ margin-bottom:20px; break-inside:avoid; }
section > h3{
  font-size:11pt; font-weight:700; margin:0 0 4px; color:var(--navy);
  padding-bottom:5px; border-bottom:1px solid var(--linea);
}
section > p{ margin:8px 0; font-size:9.5pt; color:var(--suave); }

table{ width:100%; border-collapse:collapse; font-size:9.5pt; }
th{ text-align:left; font-size:8.5pt; font-weight:600; color:var(--suave); padding:6px 8px 5px; border-bottom:1px solid var(--linea); }
td{ padding:7px 8px; border-bottom:1px solid var(--linea); vertical-align:middle; }
tr:last-child td{ border-bottom:0; }
.num{ text-align:right; }

/* ── Línea de medida, también en papel ──────────────────────────────────── */
/* print-color-adjust: sin esto el navegador quita los fondos al imprimir y la
   barra desaparece, que es justo lo que hace legible el informe. */
.medida{ display:flex; align-items:center; gap:8px; }
.medida-pista{
  position:relative; flex:1; height:7px; min-width:70px; border-radius:99px;
  background:var(--lienzo); border:1px solid var(--linea);
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.medida-valor{
  position:absolute; min-width:6px; inset:0 auto 0 0; border-radius:99px; background:var(--cian);
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.medida.bajo .medida-valor{ background:#f0b9a6; }
.medida-corte{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--tinta); border-radius:2px;
  -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.medida-cifra{ font-weight:600; font-size:9pt; min-width:3.2em; text-align:right; }

.banda{ display:inline-block; font-size:8pt; font-weight:600; padding:1px 7px; border-radius:4px;
  -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.banda-alto{ background:#eaf7ef; color:var(--ok); }
.banda-medio{ background:#fdf7e6; color:var(--aviso); }
.banda-bajo{ background:#fdf0ec; color:var(--alerta); }

.aviso-legal{
  margin-top:24px; padding:10px 13px; background:var(--lienzo);
  border-left:3px solid var(--navy); font-size:8.5pt; color:var(--suave); line-height:1.5;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
  break-inside:avoid;
}
.pie-doc{
  margin-top:16px; padding-top:10px; border-top:1px solid var(--linea);
  font-size:8pt; color:var(--tenue); display:flex; justify-content:space-between; gap:16px;
}

.plan-papel{ border-left:3px solid var(--cian); padding-left:12px; margin-bottom:14px; break-inside:avoid;
  -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.plan-papel h4{ font-size:10pt; margin:0 0 3px; font-weight:600; }
.plan-papel p{ margin:0 0 4px; font-size:9pt; color:var(--suave); }

/* ── Barra de acciones, solo en pantalla ────────────────────────────────── */
.acciones-papel{
  position:sticky; top:0; background:var(--navy); color:#fff; padding:12px 18px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:10pt;
}
.acciones-papel a, .acciones-papel button{
  font:inherit; font-weight:600; font-size:9.5pt; padding:8px 16px; border-radius:8px;
  border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff;
  cursor:pointer; text-decoration:none;
}
.acciones-papel button{ background:#fff; color:var(--navy); border-color:#fff; }

@media print{
  .acciones-papel{ display:none; }
  .hoja{ padding:0; max-width:none; }
  body{ font-size:10pt; }
}

.tenue{ color:var(--tenue); }

/* Anchos y posiciones de la línea de medida. Tienen que estar TAMBIÉN aquí:
   esta hoja se carga sola en la vista de papel, y sin ellas las barras
   salían vacías (se veía el carril y no el dato, peor que no ponerlas). */
.a0{width:0%}.a1{width:1%}.a2{width:2%}.a3{width:3%}.a4{width:4%}.a5{width:5%}.a6{width:6%}.a7{width:7%}.a8{width:8%}.a9{width:9%}.a10{width:10%}.a11{width:11%}.a12{width:12%}.a13{width:13%}.a14{width:14%}.a15{width:15%}.a16{width:16%}.a17{width:17%}.a18{width:18%}.a19{width:19%}.a20{width:20%}.a21{width:21%}.a22{width:22%}.a23{width:23%}.a24{width:24%}.a25{width:25%}.a26{width:26%}.a27{width:27%}.a28{width:28%}.a29{width:29%}.a30{width:30%}.a31{width:31%}.a32{width:32%}.a33{width:33%}.a34{width:34%}.a35{width:35%}.a36{width:36%}.a37{width:37%}.a38{width:38%}.a39{width:39%}.a40{width:40%}.a41{width:41%}.a42{width:42%}.a43{width:43%}.a44{width:44%}.a45{width:45%}.a46{width:46%}.a47{width:47%}.a48{width:48%}.a49{width:49%}.a50{width:50%}.a51{width:51%}.a52{width:52%}.a53{width:53%}.a54{width:54%}.a55{width:55%}.a56{width:56%}.a57{width:57%}.a58{width:58%}.a59{width:59%}.a60{width:60%}.a61{width:61%}.a62{width:62%}.a63{width:63%}.a64{width:64%}.a65{width:65%}.a66{width:66%}.a67{width:67%}.a68{width:68%}.a69{width:69%}.a70{width:70%}.a71{width:71%}.a72{width:72%}.a73{width:73%}.a74{width:74%}.a75{width:75%}.a76{width:76%}.a77{width:77%}.a78{width:78%}.a79{width:79%}.a80{width:80%}.a81{width:81%}.a82{width:82%}.a83{width:83%}.a84{width:84%}.a85{width:85%}.a86{width:86%}.a87{width:87%}.a88{width:88%}.a89{width:89%}.a90{width:90%}.a91{width:91%}.a92{width:92%}.a93{width:93%}.a94{width:94%}.a95{width:95%}.a96{width:96%}.a97{width:97%}.a98{width:98%}.a99{width:99%}.a100{width:100%}

.x0{left:0%}.x1{left:1%}.x2{left:2%}.x3{left:3%}.x4{left:4%}.x5{left:5%}.x6{left:6%}.x7{left:7%}.x8{left:8%}.x9{left:9%}.x10{left:10%}.x11{left:11%}.x12{left:12%}.x13{left:13%}.x14{left:14%}.x15{left:15%}.x16{left:16%}.x17{left:17%}.x18{left:18%}.x19{left:19%}.x20{left:20%}.x21{left:21%}.x22{left:22%}.x23{left:23%}.x24{left:24%}.x25{left:25%}.x26{left:26%}.x27{left:27%}.x28{left:28%}.x29{left:29%}.x30{left:30%}.x31{left:31%}.x32{left:32%}.x33{left:33%}.x34{left:34%}.x35{left:35%}.x36{left:36%}.x37{left:37%}.x38{left:38%}.x39{left:39%}.x40{left:40%}.x41{left:41%}.x42{left:42%}.x43{left:43%}.x44{left:44%}.x45{left:45%}.x46{left:46%}.x47{left:47%}.x48{left:48%}.x49{left:49%}.x50{left:50%}.x51{left:51%}.x52{left:52%}.x53{left:53%}.x54{left:54%}.x55{left:55%}.x56{left:56%}.x57{left:57%}.x58{left:58%}.x59{left:59%}.x60{left:60%}.x61{left:61%}.x62{left:62%}.x63{left:63%}.x64{left:64%}.x65{left:65%}.x66{left:66%}.x67{left:67%}.x68{left:68%}.x69{left:69%}.x70{left:70%}.x71{left:71%}.x72{left:72%}.x73{left:73%}.x74{left:74%}.x75{left:75%}.x76{left:76%}.x77{left:77%}.x78{left:78%}.x79{left:79%}.x80{left:80%}.x81{left:81%}.x82{left:82%}.x83{left:83%}.x84{left:84%}.x85{left:85%}.x86{left:86%}.x87{left:87%}.x88{left:88%}.x89{left:89%}.x90{left:90%}.x91{left:91%}.x92{left:92%}.x93{left:93%}.x94{left:94%}.x95{left:95%}.x96{left:96%}.x97{left:97%}.x98{left:98%}.x99{left:99%}.x100{left:100%}

/* Escalera de niveles en papel. Los anchos van en clases porque la política de
   contenido prohíbe el atributo style, también aquí. */
.escalera-niveles{ display:block; margin:4px 0 0; }
.nivel-fila{ display:flex; align-items:center; gap:5px; font-size:8pt; line-height:1.5; }
.nivel-et{ width:58pt; color:#46556a; }
.nivel-pista{ position:relative; width:70pt; height:5pt; background:#e3e9f0; border-radius:3pt; overflow:hidden; display:inline-block; }
.nivel-valor{ position:absolute; left:0; top:0; bottom:0; background:#8695a5; }
.nivel-corte{ position:absolute; top:0; bottom:0; width:1pt; background:#0e1a26; }
.nivel-fila.supera .nivel-valor{ background:#0f7a3d; }
.nivel-fila.salto  .nivel-valor{ background:#8a6100; }
.nivel-cifra{ width:24pt; text-align:right; color:#5d6b7a; }
.nivel-marca{ width:10pt; text-align:center; }
.nivel-fila.supera .nivel-marca{ color:#0f7a3d; font-weight:700; }
.aviso-grupo{ background:#eaf7ef; border-left:2pt solid #0f7a3d; padding:5pt 8pt; margin:6pt 0; }
.bloque{ display:block; }

/* ── Glosario ───────────────────────────────────────────────────────────── */
/* Empieza en página nueva: el informe se lee de arriba abajo y el glosario es
   un anexo de consulta, no parte del hilo. Partirlo a la mitad de una tabla
   de factores obliga a pasar hojas adelante y atrás para leer una fila. */
.glosario{ page-break-before:always; }
.glosario-nota{ font-size:10.5pt; color:#3f4a56; border-left:3px solid #42C8F4;
                padding-left:10px; margin-bottom:14px; }
.glosario-item{ page-break-inside:avoid; margin-bottom:16px; padding-bottom:12px;
                border-bottom:1px solid #e6eaee; }
.glosario-item:last-child{ border-bottom:0; }
.glosario-item h4{ margin:0 0 4px; font-size:11.5pt; color:#0B3253; }
.glosario-item p{ margin:0 0 5px; font-size:10.5pt; line-height:1.45; }
.glosario-factores{ width:100%; margin:8px 0 6px; font-size:9.5pt; }
.glosario-factores th{ text-align:left; font-size:9pt; text-transform:none; }
.glosario-factores td{ vertical-align:top; line-height:1.4; }
.glosario-factores td:first-child{ width:23%; }
.glosario-cuidado{ background:#fbf7ef; border-left:3px solid #F04F23;
                   padding:6px 10px; font-size:10pt; }