/* ═══════════════════════════════════════════════════════════════════════════
   PRISMA · LA HOJA (Luis, 2026-10-07). La «Vista cliente» de SELVA y de GOLFO con el formato de
   Envíos en CEIBA (comisiones-hoja.css): la hoja a pantalla completa y, flotando encima, cerrar,
   la barra de formato, Parámetros (un globo) y las acciones. Las piezas las arma prisma-hoja.js; la
   barra y el panel son los de la app, acomodados desde acá. La hoja (#print-view) es papel: ningún
   tema la toca. Tiene el ancho fijo de su papel (816 px) y el zoom (--h-zoom) sólo la agranda o la
   achica entera; el PDF la fotografía a tamaño real (`.ph-exportando`, exportarPDF) y la impresión
   no ve nada de esto (todo va en @media screen). Los tres temas viven acá, en variables.
   El mismo archivo vive en app-cotigrupos y en app-golfito: se cambia en los dos a la vez.
   ═══════════════════════════════════════════════════════════════════════════ */
#print-view-overlay.ph-hoja{
  --h-lienzo:#2B3642; --h-flota:rgba(34,46,58,.95); --h-panel:#1D2833; --h-campo:rgba(234,223,206,.05);
  --h-borde:rgba(234,223,206,.18); --h-borde-s:rgba(234,223,206,.08); --h-tx:#EADFCE; --h-tx70:rgba(234,223,206,.72); --h-tx55:rgba(234,223,206,.55);
  --h-hover:rgba(234,223,206,.08); --h-activo:#005565; --h-activo-tx:#FFFFFF; --h-activo-hover:#006D82;
  --h-sombra:0 14px 34px -12px rgba(8,14,20,.65); --h-esquema:dark; }
html[data-tema="teal"] #print-view-overlay.ph-hoja{
  --h-lienzo:#034E5D; --h-flota:rgba(0,85,101,.97); --h-panel:#005565; --h-campo:rgba(255,255,255,.08);
  --h-borde:rgba(234,223,206,.26); --h-borde-s:rgba(234,223,206,.14); --h-tx70:rgba(255,255,255,.80); --h-tx55:rgba(255,255,255,.66);
  --h-hover:rgba(255,255,255,.10); --h-activo:#EADFCE; --h-activo-tx:#1A2633; --h-activo-hover:#FFFFFF;
  --h-sombra:0 14px 34px -12px rgba(2,30,36,.6); }
html[data-tema="claro"] #print-view-overlay.ph-hoja{
  --h-error:#B4473A;
  --h-lienzo:#E6E0D5; --h-flota:rgba(255,255,255,.97); --h-panel:#FFFFFF; --h-campo:#F6F3ED;
  --h-borde:rgba(26,38,51,.14); --h-borde-s:rgba(26,38,51,.08); --h-tx:#1A2633; --h-tx70:rgba(26,38,51,.70); --h-tx55:rgba(26,38,51,.58);
  --h-hover:rgba(26,38,51,.06); --h-sombra:0 14px 34px -14px rgba(26,38,51,.35); --h-esquema:light; }

@media screen{
/* ── 1 · La pantalla entera es la hoja: la barra de arriba de la app la reemplazan las piezas ── */
html:not(#_):not(#_) #print-view-overlay.ph-hoja{ background:var(--h-lienzo) !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja > div:first-child,
html:not(#_):not(#_) #print-view-overlay.ph-hoja #pv-panel-reopen-btn{ display:none !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja > div:nth-child(2),
html:not(#_):not(#_) #print-view-overlay.ph-hoja div:has(> div > #print-view){ background:transparent !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja div:has(> #print-view){ padding:calc(var(--h-barra, 56px) + 20px) 1.5rem 6rem !important;
  background:transparent !important; touch-action:pan-x pan-y; }
/* la hoja: papel de ancho fijo con esquinas rectas; el zoom lo pone prisma-hoja.js */
html:not(#_):not(#_) #print-view-overlay.ph-hoja #print-view{ width:816px !important; min-width:816px !important; max-width:none !important;
  border-radius:0 !important; transition:none !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja:not(.ph-exportando) #print-view{ zoom:var(--h-zoom, .88); }

/* ── 2 · Las piezas que flotan. Las dos pastillas de abajo miden lo mismo siempre: el ancho justo de
       la más larga (--ph-pastilla, prisma-hoja.js «igualarPastillas») ── */
.ph__param, .ph__acciones{ position:fixed; z-index:5; display:flex; align-items:center; gap:.35rem; padding:4px; width:var(--ph-pastilla, auto); box-sizing:border-box;
  border-radius:99px; background:var(--h-flota); border:1px solid var(--h-borde); box-shadow:var(--h-sombra); color:var(--h-tx); }
.ph__param{ bottom:16px; left:16px; }
.ph__acciones{ bottom:16px; right:16px; justify-content:center; }
/* cerrar: un círculo como los de las cabeceras, vestido como las demás piezas (cambia con el tema) */
html:not(#_) .ph__cerrar{ position:fixed; z-index:5; top:14px; left:14px; width:2.6rem; height:2.6rem; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border-radius:99px; border:1px solid var(--h-borde); background:var(--h-flota); color:var(--h-tx); cursor:pointer; box-shadow:var(--h-sombra);
  transition:border-color 120ms linear; }
html:not(#_) .ph__cerrar:hover{ border-color:var(--h-tx70); }
html:not(#_) .ph__cerrar .material-icons-outlined{ font-size:18px; }
html:not(#_) :is(.ph__boton, .ph__abrir){ display:inline-flex; align-items:center; justify-content:center; gap:.45rem; height:2.25rem; min-width:2.25rem;
  padding:0; border:0; border-radius:99px; background:transparent; color:var(--h-tx); cursor:pointer; font-size:.9rem; font-weight:400; letter-spacing:.02em; white-space:nowrap;
  transition:background-color 120ms linear, color 120ms linear; }
html:not(#_) :is(.ph__boton, .ph__abrir):hover{ background:var(--h-hover); }
html:not(#_) .ph__boton:disabled{ cursor:default; opacity:.7; }
html:not(#_) :is(.ph__boton, .ph__abrir) .material-icons-outlined{ font-size:18px; }
.ph__boton[hidden]{ display:none !important; }
html:not(#_) .ph__abrir{ flex:1; min-width:0; padding:0 1rem 0 .75rem; }
.ph__resumen{ min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--h-tx70); font-size:.84rem; }
.ph__resumen:not(:empty)::before{ content:"·"; margin-right:.45rem; }
html:not(#_) .ph__abrir[aria-pressed="true"]{ background:var(--h-activo); color:var(--h-activo-tx); }
html:not(#_) .ph__abrir[aria-pressed="true"] .ph__resumen{ color:inherit; opacity:.8; }
/* Descargar PDF, la acción principal, en relleno */
html:not(#_) .ph__boton--principal{ padding:0 1rem 0 .8rem; background:var(--h-activo); color:var(--h-activo-tx); }
html:not(#_) .ph__boton--principal:hover{ background:var(--h-activo-hover); }

/* ── 3 · La barra de formato de la app: una pieza arriba al centro, con todos los botones del mismo
       tamaño. Si no cabe, los íconos bajan de a uno a los renglones que hagan falta; el ancho de la
       caja lo pone prisma-hoja.js («ajustarBarra») y la hoja baja lo que la barra crece ── */
html:not(#_):not(#_) #print-view-overlay.ph-hoja :is(#pv-editor-toolbar, #pv-toolbar){ position:fixed !important; top:14px !important; left:50% !important; right:auto !important;
  transform:translateX(-50%) !important; z-index:5 !important; width:max-content; max-width:calc(100vw - 2 * (2.6rem + 28px)) !important; height:auto !important; min-height:0 !important;
  display:flex !important; flex-wrap:wrap !important; justify-content:center !important; align-items:center !important; gap:4px 3px !important; margin:0 !important;
  padding:5px 8px !important; border-radius:22px !important; border:1px solid var(--h-borde) !important; overflow:visible !important;
  background:var(--h-flota) !important; box-shadow:var(--h-sombra) !important; color-scheme:var(--h-esquema); --tb:30px; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja :is(#pv-editor-toolbar, #pv-toolbar) > *{ flex:none !important; margin-top:0 !important; margin-bottom:0 !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja :is(.toolbar-btn, .pv-tb-btn, .toolbar-color-wrap, .pv-tb-color){ position:relative; display:inline-flex !important; align-items:center !important;
  justify-content:center !important; width:var(--tb) !important; height:var(--tb) !important; min-width:0 !important; padding:0 !important; margin:0 !important;
  border-radius:99px !important; border:1px solid transparent !important; background:transparent !important; color:var(--h-tx) !important; box-shadow:none !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja :is(.toolbar-btn, .pv-tb-btn, .toolbar-color-wrap, .pv-tb-color) .material-icons-outlined{ font-size:16px !important; width:16px; height:16px; line-height:16px; color:inherit !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja :is(.toolbar-select, .pv-tb-select){ width:7rem !important; max-width:7rem !important; height:var(--tb) !important; padding:0 .5rem 0 .65rem !important;
  border-radius:99px !important; border:1px solid var(--h-borde) !important; background:transparent !important; color:var(--h-tx) !important; font-size:.75rem !important; box-shadow:none !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja :is(#pv-toolbar-font-size, .pv-tb-num input){ width:2.6rem !important; height:var(--tb) !important; padding:0 .2rem !important; text-align:center;
  border-radius:99px !important; border:1px solid var(--h-borde) !important; background:transparent !important; color:var(--h-tx) !important; font-size:.75rem !important; box-shadow:none !important; }
/* el tamaño de letra sin las flechitas del número: se escribe y Enter */
#print-view-overlay.ph-hoja :is(#pv-toolbar-font-size, .pv-tb-num input){ appearance:textfield; -moz-appearance:textfield; }
#print-view-overlay.ph-hoja :is(#pv-toolbar-font-size, .pv-tb-num input)::-webkit-inner-spin-button,
#print-view-overlay.ph-hoja :is(#pv-toolbar-font-size, .pv-tb-num input)::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja .pv-tb-num{ display:inline-flex !important; align-items:center; gap:3px; padding:0 !important; border:0 !important; background:transparent !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja .pv-tb-num i{ font-style:normal; font-size:.72rem; color:var(--h-tx70) !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja :is(.toolbar-btn, .pv-tb-btn, .toolbar-color-wrap, .pv-tb-color, .toolbar-select, .pv-tb-select, #pv-toolbar-font-size, .pv-tb-num input):hover{ background:var(--h-hover) !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja :is(.toolbar-btn.toolbar-btn-active, .pv-tb-btn.pv-tb-btn--on){ background:var(--h-activo) !important; color:var(--h-activo-tx) !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja :is(.pv-tb-sep, :is(#pv-editor-toolbar, #pv-toolbar) > span.w-px){ width:1px !important; height:16px !important; margin:0 3px !important; background:var(--h-borde) !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja .ph-raya-corte{ display:none !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja .pv-tb-estado{ padding:0 .45rem !important; color:var(--h-tx70) !important; font-size:.72rem !important; background:transparent !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja .pv-tb-estado:empty{ display:none !important; }
#print-view-overlay.ph-hoja :is(.toolbar-select, .pv-tb-select) option{ background:var(--h-panel); color:var(--h-tx); }

/* ── 4 · Los parámetros: el panel de la app, en un globo encima de la hoja. Sin tarjetas: los campos
       compactos y las notas con filetes ── */
html:not(#_):not(#_) #print-view-overlay.ph-hoja #pv-filtros-panel{ position:fixed !important; left:16px !important; right:auto !important; top:auto !important; bottom:68px !important;
  width:360px !important; max-width:calc(100vw - 32px) !important; height:auto !important; max-height:calc(100vh - 150px) !important; overflow-y:auto !important;
  background:var(--h-panel) !important; border:1px solid var(--h-borde) !important; border-radius:20px !important; box-shadow:var(--h-sombra) !important;
  z-index:6 !important; transform:none !important; color:var(--h-tx); animation:ph-globo 180ms cubic-bezier(.2,.7,.2,1); }
@keyframes ph-globo{ from{ opacity:0; transform:translateY(8px); } }
html:not(#_):not(#_) #print-view-overlay.ph-hoja #pv-filtros-panel.hidden{ display:none !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja #pv-filtros-panel > div:first-child{ position:static !important; padding:1.25rem 1.5rem .35rem !important;
  background:transparent !important; border:0 !important; box-shadow:none !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja #pv-filtros-panel > div:first-child :is(h3, p){ font-family:Marcellus, Georgia, serif !important; font-size:1.25rem !important;
  font-weight:400 !important; letter-spacing:.01em !important; text-transform:none !important; color:var(--h-tx) !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja #pv-filtros-panel > div:first-child :is(.material-icons-outlined, button){ display:none !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja #pv-filtros-panel > div + div{ padding:.5rem 1.5rem 1.25rem !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja #pv-filtros-panel label{ margin-bottom:.35rem !important; font-size:.62rem !important; letter-spacing:.18em !important; color:var(--h-tx55) !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja #pv-filtros-panel :is(select, input){ height:2.4rem !important; padding:0 .75rem !important; border-radius:12px !important;
  background:var(--h-campo) !important; border:1px solid var(--h-borde-s) !important; color:var(--h-tx) !important; font-size:.82rem !important; box-shadow:none !important; color-scheme:var(--h-esquema); }
html:not(#_):not(#_) #print-view-overlay.ph-hoja #pv-filtros-panel select option{ background:var(--h-panel); color:var(--h-tx); }
html:not(#_):not(#_) #print-view-overlay.ph-hoja #pv-filtros-panel :is(p, h4){ color:var(--h-tx55) !important; }
html:not(#_):not(#_) #print-view-overlay.ph-hoja #pv-filtros-panel [class*="border-"]{ border-color:var(--h-borde-s) !important; }

/* ── 5 · Celular: la barra de lado a lado (6 px de margen), más compacta y sin rayitas; cerrar baja
       junto a los parámetros; la hoja arranca al ancho de la pantalla ── */
@media (width < 768px){
  html:not(#_):not(#_) #print-view-overlay.ph-hoja :is(#pv-editor-toolbar, #pv-toolbar){ top:8px !important; max-width:calc(100vw - 12px) !important; gap:3px 1px !important;
    padding:4px 5px !important; --tb:26px; }
  html:not(#_):not(#_) #print-view-overlay.ph-hoja :is(.pv-tb-sep, :is(#pv-editor-toolbar, #pv-toolbar) > span.w-px){ display:none !important; }
  html:not(#_):not(#_) #print-view-overlay.ph-hoja :is(.toolbar-select, .pv-tb-select){ width:4.4rem !important; max-width:4.4rem !important; padding:0 .2rem 0 .45rem !important; }
  html:not(#_):not(#_) #print-view-overlay.ph-hoja :is(#pv-toolbar-font-size, .pv-tb-num input){ width:2rem !important; }
  html:not(#_):not(#_) #print-view-overlay.ph-hoja :is(.toolbar-btn, .pv-tb-btn, .toolbar-color-wrap, .pv-tb-color) .material-icons-outlined{ font-size:15px !important; width:15px; height:15px; line-height:15px; }
  html:not(#_):not(#_) #print-view-overlay.ph-hoja div:has(> #print-view){ padding:calc(var(--h-barra, 64px) + 12px) .5rem 5.2rem !important; }
  html:not(#_) .ph__cerrar{ top:auto; bottom:12px; left:10px; width:2.5rem; height:2.5rem; }
  .ph__param, .ph__acciones{ width:auto; }
  .ph__param{ bottom:12px; left:calc(2.5rem + 16px); }
  .ph__acciones{ bottom:12px; right:10px; }
  html:not(#_) .ph__boton{ height:2.1rem; min-width:2.1rem; }
  .ph__resumen{ display:none; }
  html:not(#_) .ph__boton--principal{ padding:0; width:2.1rem; }
  .ph__boton--principal .ph__rot{ display:none; }
  html:not(#_):not(#_) #print-view-overlay.ph-hoja #pv-filtros-panel{ left:10px !important; right:10px !important; width:auto !important; bottom:62px !important; max-height:70vh !important; }
}
/* pantallas muy angostas: «Parámetros» queda en su ícono para que las tres piezas de abajo no se monten */
@media (width < 401px){
  html:not(#_) .ph__abrir{ flex:none; width:2.1rem; height:2.1rem; padding:0; justify-content:center; }
  .ph__abrir .ph__rot{ display:none; }
}
}
/* la impresión no ve las piezas (también van con .no-print) */
@media print{ .ph{ display:none !important; } }
@media (prefers-reduced-motion:reduce){ :is(.ph__cerrar, .ph__boton, .ph__abrir), #pv-filtros-panel{ transition:none !important; animation:none !important; } }