/*
 * LA HOJA PARA DIRECCIÓN de Colegios (T6c·4b del producto, `#837`; `paginas/colegios/hoja.jsx` y la pieza 5 del diseño):
 * la propuesta en un A4 (794 × 1123 px a 96 ppp). En px y no en vw: se imprime y se pinta en miniatura, y tiene que ser la
 * misma hoja. Aquí: la hoja (`web/colegios/hoja.blade.php`), su página para imprimir (`web/colegios-hoja.blade.php`) y su
 * miniatura con sus acciones en la pieza 5 (`web/colegios/pieza-5.blade.php`).
 */

/* ── La hoja ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.pj-hoja{position:relative;width:794px;height:1123px;box-sizing:border-box;padding:42px 52px 30px;display:flex;flex-direction:column;gap:12px;overflow:hidden;background:var(--snow);color:var(--text-body);font-family:var(--font-ui);text-align:left}
.pj-hoja [hidden]{display:none}
.pj-hoja__franja{position:absolute;top:0;left:0;right:0;display:flex;height:6px}
.pj-hoja__franja span{flex:1}
.pj-hoja__franja span:nth-child(1){background:var(--aqua-500)}
.pj-hoja__franja span:nth-child(2){background:var(--volt-500)}
.pj-hoja__franja span:nth-child(3){background:var(--sun-500)}
.pj-hoja__franja span:nth-child(4){background:var(--berry-500)}
.pj-hoja__cabecera{display:flex;align-items:center;justify-content:space-between;gap:20px}
.pj-hoja__logo{display:block;height:44px;width:auto}
.pj-hoja__sello{display:grid;justify-items:end;gap:3px}
.pj-hoja__etiqueta{font:var(--type-overline);letter-spacing:var(--tracking-overline);color:var(--ink-600)}
.pj-hoja__fecha{font-family:var(--font-mono);font-size:11px;color:var(--ink-500)}
.pj-hoja__que{display:grid;gap:6px}
.pj-hoja__titular{margin:0;font-family:var(--font-display);font-size:32px;font-weight:var(--fw-black);line-height:1.05;letter-spacing:-.03em;font-variation-settings:"wdth" 106;color:var(--ink-900)}
.pj-hoja__entradilla{margin:0;font-size:15px;line-height:1.45}
.pj-hoja__cifras{display:grid;gap:8px}
.pj-hoja__grupo{font-size:13.5px;font-weight:var(--fw-bold);color:var(--ink-900)}
.pj-hoja__banda{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:16px 22px;border-radius:var(--r-md);background:var(--bg-subtle)}
.pj-hoja__banda div{display:grid;gap:2px;min-width:0}
.pj-hoja__banda dt{font-family:var(--font-display);font-size:24px;font-weight:var(--fw-black);line-height:1.1;color:var(--ink-900);font-variant-numeric:tabular-nums}
.pj-hoja__banda dd{margin:0;font-size:12px;line-height:1.35}
.pj-hoja__sec{padding-top:12px;border-top:1px solid var(--border-subtle)}
.pj-hoja__h2{margin:0 0 10px;font-family:var(--font-ui);font-size:15px;font-weight:var(--fw-bold);line-height:1.2;color:var(--ink-900)}
.pj-hoja__h2 span{font-weight:var(--fw-medium);color:var(--ink-500)}
.pj-hoja__cuidados{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 26px}
.pj-hoja__cuidados li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:11px;align-items:start}
.pj-hoja__circulo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--bg-brand-soft);color:var(--aqua-700)}
.pj-hoja__circulo--sm{width:20px;height:20px}
.pj-hoja__cuidado{display:grid;gap:3px;padding-top:4px;font-size:12px;line-height:1.4}
.pj-hoja__cuidado b{color:var(--ink-900)}
.pj-hoja__cuidado>b{font-size:13.5px;line-height:1.25}
.pj-hoja__precio{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:28px;align-items:start}
.pj-hoja__incluye{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pj-hoja__incluye li{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.35;color:var(--ink-900);font-weight:var(--fw-medium)}
.pj-hoja__incluye li.pj-hoja__lead{font-weight:var(--fw-bold)}
.pj-hoja__tarifas{display:grid;gap:8px;min-width:0}
/* La tabla de tarifas, en pequeño (`RateTable size="sm"` del diseño) y en px, como el resto de la hoja: a su tamaño de
   página no cabía en el A4 y el pie se salía. */
.pj-hoja .pj-rt__cabeza{padding:0 10px 6px 0;font-size:11px}
.pj-hoja .pj-rt__celda{padding:7px 10px 7px 0}
.pj-hoja .pj-rt__rotulo{font-size:12.5px}
.pj-hoja .pj-rt__cifra{font-size:18px}
.pj-hoja .pj-rt__especial{font-size:12px}
.pj-hoja__nota{margin:0;font-size:12.5px;line-height:1.45}
.pj-hoja__reserva{display:grid;grid-template-columns:minmax(0,1fr) 284px;gap:24px;align-items:center}
.pj-hoja__pasos{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pj-hoja__pasos li{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.35;color:var(--ink-900)}
.pj-hoja__num{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--ink-900);color:var(--snow);font-family:var(--font-mono);font-size:11px;font-weight:var(--fw-semibold)}
.pj-hoja__qr{display:flex;align-items:center;gap:14px;padding:10px;border:1px solid var(--border-subtle);border-radius:var(--r-md)}
/* El QR, oscuro sobre claro y sin tematizar (para escanear): el SVG no trae color, lo pone esto. */
.pj-hoja__codigo{display:block;flex-shrink:0;width:96px;height:96px}
.pj-hoja__codigo svg{display:block;width:100%;height:100%}
.pj-hoja__codigo svg path{fill:var(--ink-900)}
.pj-hoja__qr-texto{display:grid;gap:4px;min-width:0;font-size:12px;line-height:1.4}
.pj-hoja__qr-texto b{font-size:14px;color:var(--ink-900)}
.pj-hoja__url{font-family:var(--font-mono);font-size:11.5px;color:var(--aqua-700);overflow-wrap:anywhere}
.pj-hoja__pie{margin-top:auto;padding-top:12px;border-top:1px solid var(--border-subtle);display:grid;gap:4px;font-size:11.5px;line-height:1.4;color:var(--ink-600)}
.pj-hoja__contacto{display:flex;flex-wrap:wrap;gap:4px 20px}
.pj-hoja__contacto>span{display:inline-flex;align-items:center;gap:6px}
.pj-hoja__contacto>span>span:first-child{color:var(--aqua-700)}
.pj-hoja__letra{color:var(--ink-500)}

/* ── Su página: la hoja sobre el fondo, con su botón; en un móvil, a escala (la hoja no cambia de forma) ─────────────── */
.pj-hoja-pagina{min-height:100vh;display:grid;justify-items:center;align-content:start;gap:20px;padding:24px 16px 48px;background:var(--bg-subtle)}
.pj-hoja-pagina__acciones{display:flex;justify-content:center;width:100%}
.pj-hoja-pagina .pj-hoja{box-shadow:0 0 0 1px var(--border-subtle),var(--shadow-md)}
@media (max-width:840px){.pj-hoja-pagina .pj-hoja{zoom:.8}}
@media (max-width:680px){.pj-hoja-pagina .pj-hoja{zoom:.6}}
@media (max-width:520px){.pj-hoja-pagina .pj-hoja{zoom:.45}}
@media (max-width:380px){.pj-hoja-pagina .pj-hoja{zoom:.42}}

/* ── Al imprimir (o guardar en PDF): solo la hoja, a sangre y con sus colores ──────────────────────────────────────── */
@page{size:A4;margin:0}
@media print{
    body{background:var(--snow)}
    .pj-hoja-pagina{display:block;min-height:0;padding:0;background:none}
    .pj-hoja-pagina__acciones{display:none}
    .pj-hoja-pagina .pj-hoja{zoom:1;box-shadow:none}
    .pj-hoja,.pj-hoja *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ── La propuesta en la pieza 5 (`DocPreview` del diseño): su miniatura de verdad —la misma hoja, a escala—, qué lleva y
      cómo se envía. Las acciones, secundarias: el único naranja de la pieza sigue siendo el de la calculadora ─────────── */
.pj-c5__arriba{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8);align-items:start}
/* La miniatura a la izquierda, a lo alto; a su lado, arriba lo que lleva y debajo cómo se envía. */
.pj-c5__propuesta{display:grid;grid-template-columns:168px minmax(0,1fr);gap:var(--space-4) var(--space-6);align-items:center;min-width:0;padding:var(--space-6);background:var(--surface-card);border:var(--border-card);border-radius:var(--r-xl)}
.pj-c5__mini{position:relative;display:block;grid-row:span 2;width:168px;height:238px;overflow:hidden;border-radius:var(--r-xs);background:var(--snow);box-shadow:0 0 0 1px var(--border-subtle),var(--shadow-sm);transition:var(--t-card)}
.pj-c5__mini:hover{box-shadow:0 0 0 1px var(--border-subtle),var(--shadow-md);transform:translateY(var(--lift-hover))}
.pj-c5__mini .pj-hoja{zoom:.2116;pointer-events:none}
.pj-c5__texto{display:grid;gap:var(--space-3);min-width:0;align-self:end}
.pj-c5__titulo{margin:0;font:var(--type-h3);font-size:var(--fs-h4);color:var(--text-strong)}
.pj-c5__frase{margin:0;font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-body)}
.pj-c5__acciones{grid-column:2;align-self:start;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pj-c5__accion{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--control-border);border-radius:var(--r-pill);background:var(--control-bg);color:var(--control-fg);font-family:var(--font-ui);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);text-decoration:none;transition:var(--t-hover)}
.pj-c5__accion:hover{border-color:var(--control-border-strong)}
.pj-c9__propuesta{justify-self:center;margin:0;font-family:var(--font-ui);font-size:var(--fs-body-sm)}
@media (max-width:880px){.pj-c5__arriba{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.pj-c5__propuesta{grid-template-columns:112px minmax(0,1fr);padding:var(--space-5)}.pj-c5__mini{grid-row:auto;width:112px;height:159px}.pj-c5__texto{align-self:center}.pj-c5__mini .pj-hoja{zoom:.1411}.pj-c5__acciones{grid-column:1/-1}}