/* CaroSoft Ficha Productos · «🖨 Imprimir»: el icono de la ficha y la ventana de preparar la hoja (31/10/2026).
   Todo cuelga de .cspr-hoja-btn y de .cspr-hj, y la ventana es un <dialog> abierto con showModal(): así se pone por
   encima de la cabecera fija del tema Electro, igual que el visor de fotos de la ficha. Donde el tema pinta los
   botones con un selector muy fuerte, los míos llevan sus colores con !important, como en ficha.css. */

/* ── El icono junto a la referencia (decisión 1A) ── */
.cspr .cspr-hoja-btn{
  display:inline-flex!important;align-items:center;gap:5px;
  background:transparent!important;border:1.5px solid var(--g)!important;color:var(--g)!important;
  border-radius:7px!important;padding:4px 9px!important;min-height:0!important;height:auto;width:auto;
  font:700 12px/1 inherit!important;cursor:pointer;text-transform:none!important;letter-spacing:0!important
}
.cspr .cspr-hoja-btn:hover{background:var(--cr)!important;color:var(--rd)!important;border-color:var(--rd)!important}
.cspr .cspr-hoja-btn svg{display:block}
/* El mismo botón, solo el icono, en la barra de abajo del móvil (junto al precio) */
.cspr .cspr-hoja-btn.solo-ic{padding:11px!important;flex:0 0 auto}

/* ── La ventana ── */
.cspr-hj{
  --gr:#AD0000;--grd:#8E0000;--gx:#550101;--cr:#F6EFE9;--pap:#FCF8F1;--ink:#2A1A1A;--soft:#6B5B57;
  --line:#E3D3CB;--line2:#D9C9C3;--ok:#27500A;--warn:#8A5A00;
  width:min(1140px,96vw);max-width:none;height:min(92vh,980px);max-height:none;
  padding:0;border:0;border-radius:12px;background:#fff;color:var(--ink);overflow:hidden;
  font:400 14px/1.5 'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  box-shadow:0 18px 60px rgba(31,1,1,.4);color-scheme:light
}
.cspr-hj::backdrop{background:rgba(31,1,1,.55)}
.cspr-hj *,.cspr-hj *::before,.cspr-hj *::after{box-sizing:border-box}
.cspr-hj h2,.cspr-hj h3,.cspr-hj h4{margin:0;text-transform:none;letter-spacing:0;font-weight:800}
.cspr-hj p{margin:0}
.cspr-hj ul{margin:0;padding:0;list-style:none}
.cspr-hj button{font:inherit;cursor:pointer;text-transform:none;letter-spacing:0;line-height:1.2;margin:0;box-shadow:none}
.cspr-hj :focus-visible{outline:2px solid var(--gr);outline-offset:1px}
.cspr-hj .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
/* Lo oculto, oculto: si no, un display:flex de más abajo le gana al atributo hidden. */
.cspr-hj [hidden]{display:none!important}

.cspr-hj form{display:flex;flex-direction:column;height:100%;margin:0}

/* Barra de arriba */
.hj-top{background:var(--gx);color:#fff;display:flex;align-items:center;gap:12px;padding:9px 12px;flex-wrap:wrap}
.hj-top .ti{font-weight:800;font-size:15px;display:flex;align-items:center;gap:7px;margin-right:auto}
.hj-tabs{display:flex;gap:4px;background:rgba(255,255,255,.14);border-radius:8px;padding:3px}
.hj-tabs button{background:transparent;border:0;color:#fff;border-radius:6px;padding:6px 11px;font-size:12.5px;font-weight:700;opacity:.8}
.hj-tabs button[aria-pressed="true"]{background:#fff;color:var(--gx);opacity:1}
.hj-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.hj-btn{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:7px;padding:7px 10px;font-size:12.5px;font-weight:700}
.hj-btn:hover:not([disabled]){background:rgba(255,255,255,.15)}
.hj-btn[disabled]{opacity:.4;cursor:default}
.hj-btn.pri{background:#fff;color:var(--gx);border-color:#fff}
.hj-btn.pri:hover{background:var(--cr)}
.hj-x{background:transparent;border:0;color:#fff;font-size:17px;line-height:1;padding:6px 8px;border-radius:6px}
.hj-x:hover{background:rgba(255,255,255,.18)}

/* Cuerpo */
.hj-body{flex:1;min-height:0;display:grid;grid-template-columns:286px 1fr;position:relative}
.hj-body.solo-previa{grid-template-columns:1fr}
.hj-side{border-right:1px solid var(--line);background:var(--cr);padding:13px;overflow-y:auto;font-size:13px}
.hj-main{padding:13px 15px;overflow-y:auto;background:var(--pap)}
.hj-prev{grid-column:1/-1;overflow:auto;background:#EDE5DE;display:flex;justify-content:center}
.hj-prev iframe{width:210mm;min-height:297mm;border:0;background:#fff;flex:0 0 auto;transform-origin:top center}
/* Mientras preparas, la hoja sigue dibujada fuera de la vista: así se puede medir e imprimir sin esperas. */
.hj-prev.fuera{position:absolute;left:-250vw;top:0;width:210mm;height:297mm;overflow:hidden;pointer-events:none}
.hj-prev.fuera iframe{height:297mm}

/* Controles de la izquierda */
.hj-f{margin-bottom:13px}
.hj-f > label,.hj-h5{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-bottom:4px}
.hj-in{width:100%;border:1px solid var(--line2);border-radius:6px;background:#fff;padding:7px 9px;font:inherit;font-size:13px;color:var(--ink)}
.hj-in:focus{border-color:var(--gr);outline:none;box-shadow:0 0 0 2px rgba(173,0,0,.16)}
.hj-row{display:flex;gap:6px;align-items:center}
.hj-row .hj-in{flex:1;min-width:0}
.hj-mini{background:#fff;border:1px solid var(--line2);border-radius:6px;color:var(--soft);padding:6px 8px;font-size:11.5px;font-weight:700;flex:0 0 auto}
.hj-mini:hover{border-color:var(--gr);color:var(--gr)}
.hj-nota{font-size:11px;color:var(--soft);margin-top:4px;line-height:1.35}
.hj-pvp-in{font-size:17px!important;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}

/* Las fotos, como en la «Hoja de venta» de Fast: la miniatura elige la grande y la casilla «Extra» añade esa foto
   al final de la hoja. Todas las cajas miden lo mismo, lleven casilla, banda o nada. */
.hj-ths{display:flex;flex-wrap:wrap;gap:7px}
.hj-th{width:76px;height:88px;border:1px solid var(--line2);border-radius:8px;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.hj-th.es-principal{border:2px solid var(--gr)}
.hj-th.es-extra{border-color:var(--gr)}
.hj-ex{display:flex;align-items:center;gap:4px;padding:3px 5px;font:700 10px/1 inherit;color:var(--soft);cursor:pointer;border-bottom:1px solid var(--line);background:var(--cr)}
.hj-th.es-extra .hj-ex{color:var(--gr)}
.hj-ex input{width:13px;height:13px;margin:0;accent-color:var(--gr);flex:0 0 auto}
.hj-thb{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:4px;background:#fff!important;border:0!important;border-radius:0!important}
.hj-thb img{max-width:100%;max-height:100%;object-fit:contain}
.hj-et{display:block;background:var(--gr);color:#fff;font:700 8px/1.1 inherit;letter-spacing:.03em;text-align:center;padding:4px 1px;
  white-space:nowrap;overflow:hidden;text-overflow:clip}

.hj-chk{display:flex;gap:8px;align-items:flex-start;padding:4px 0;font-size:12.5px;cursor:pointer}
.hj-chk input{width:15px;height:15px;margin:2px 0 0;accent-color:var(--gr);flex:0 0 auto}
.hj-chk.off{color:var(--soft)}

/* Avisos */
.hj-av{border-left:3px solid var(--warn);background:#FDF4E0;color:#6b4b00;border-radius:0 6px 6px 0;padding:8px 10px;font-size:12px;margin-bottom:12px}
.hj-av.ok{border-color:var(--ok);background:#EDF4E4;color:#2b4a12}
.hj-av button{background:#fff;border:1px solid currentColor;border-radius:6px;padding:4px 8px;font-size:11.5px;font-weight:700;color:inherit;margin-top:6px}

/* Secciones y líneas de la derecha */
.hj-main > .hj-h5{margin-bottom:9px}
.hj-sec{border:1px solid var(--line);border-radius:9px;background:#fff;margin-bottom:10px;overflow:hidden}
.hj-sec.apagada{opacity:.55}
.hj-sh{background:var(--cr);display:flex;gap:8px;align-items:center;padding:6px 9px}
.hj-sh .hj-tit{flex:1;min-width:0;border:1px solid transparent;background:transparent;border-radius:5px;padding:3px 5px;font:inherit;font-weight:800;font-size:13px;color:var(--ink)}
.hj-sh .hj-tit:hover{border-color:var(--line2);background:#fff}
.hj-sh .hj-tit:focus{border-color:var(--gr);background:#fff;outline:none}
.hj-sh .zona{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);flex:0 0 auto}
.hj-ln{display:grid;grid-template-columns:18px 1fr 26px;gap:7px;align-items:center;padding:4px 9px;border-top:1px dashed var(--line)}
.hj-ln.fuera{opacity:.45}
.hj-ln.fuera .hj-k,.hj-ln.fuera .hj-v{text-decoration:line-through}
.hj-asa{color:var(--line2);cursor:grab;text-align:center;font-size:13px;user-select:none;background:none;border:0;padding:0}
.hj-asa:active{cursor:grabbing}
.hj-ln.arrastrando{background:var(--cr);outline:1px dashed var(--gr)}
.hj-ln.encima{border-top:2px solid var(--gr)}
.hj-par{display:grid;grid-template-columns:minmax(90px,34%) 1fr;gap:6px;min-width:0}
.hj-par.sola{grid-template-columns:1fr}
.hj-k,.hj-v{border:1px solid transparent;background:transparent;border-radius:5px;padding:3px 5px;font:inherit;font-size:12.5px;min-width:0;color:var(--ink);width:100%;
  resize:none;overflow:hidden;display:block;line-height:1.35;field-sizing:content}
.hj-k{color:var(--soft);font-weight:600}
.hj-v{font-weight:600}
.hj-k:hover,.hj-v:hover{border-color:var(--line2);background:#fff}
.hj-k:focus,.hj-v:focus{border-color:var(--gr);background:#fff;outline:none}
.hj-quita{background:transparent;border:0;color:var(--gr);font-size:13px;font-weight:700;padding:3px;border-radius:5px;line-height:1}
.hj-quita:hover{background:var(--cr)}
.hj-add{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px dashed var(--gr);color:var(--gr);border-radius:6px;padding:5px 9px;margin:7px 9px;font-size:11.5px;font-weight:700}
.hj-add:hover{background:var(--cr)}
.hj-add.ancho{margin:0 0 10px;width:100%;justify-content:center;padding:8px}

/* Pie de la ventana */
.hj-foot{border-top:1px solid var(--line);background:#fff;padding:8px 13px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--soft)}
.hj-paginas{font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px}
.hj-paginas.mal{color:var(--warn)}
.hj-foot .hj-link{background:transparent;border:0;color:var(--gr);font-weight:700;text-decoration:underline;padding:0;font-size:12px}
.hj-foot .der{margin-left:auto;text-align:right}

@media (max-width:860px){
  .cspr-hj{width:100vw;height:100vh;border-radius:0}
  .hj-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .hj-side{border-right:0;border-bottom:1px solid var(--line);max-height:46vh}
  .hj-top .ti{font-size:13.5px;width:100%;margin-right:0}
  .hj-prev iframe{transform:scale(.42)}
  .hj-prev{display:block}
}
@media print{
  /* La ventana no se imprime nunca: la hoja se imprime en su propio documento (decisión 6A). */
  .cspr-hj,.cspr-hoja-marco{display:none!important}
}

/* ── Segunda ronda (31/10/2026) ── */

/* El tamaño de letra a mano (7A): − 88 % + */
.hj-esc{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:7px;background:#fff;overflow:hidden;flex:0 0 auto}
.hj-esc button{background:transparent;border:0;color:var(--gr);font-size:15px;line-height:1;padding:5px 10px;font-weight:700}
.hj-esc button:hover:not([disabled]){background:var(--cr)}
.hj-esc button[disabled]{color:var(--line2);cursor:default}
.hj-esc .v{font-size:12.5px;font-weight:700;color:var(--ink);padding:5px 4px;min-width:50px;text-align:center;border-inline:1px solid var(--line2);font-variant-numeric:tabular-nums}
.hj-foot .hj-chk{font-size:12px;color:var(--soft);padding:0;flex:0 0 auto}
.hj-pista{color:var(--gx);background:var(--cr);border:1px solid var(--line2);border-radius:6px;padding:4px 8px;font-size:11.5px;font-weight:600;max-width:46ch}

/* Los tres bloques de textos tuyos (1A) */
.hj-sec.mia .hj-sh{background:#F3E8E8}
.hj-sec.mia .hj-tit{font-weight:800;color:var(--gx)}
.hj-serie{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--soft);flex:0 0 auto;padding-right:4px}
select.hj-in{appearance:auto;padding:6px 8px}

/* «Como la ve el cliente» (10A) */
.hj-cliente-av{position:sticky;top:0;z-index:2;background:var(--gx);color:#fff;font-size:12px;font-weight:600;padding:7px 12px;text-align:center}
.hj-prev.fuera .hj-cliente-av{display:none}

/* Las ayudas al pasar el ratón (9A), como en Fast: granate, encima y a los 0,6 s */
.hj-tip{
  position:fixed;z-index:2147483647;max-width:300px;background:#550101;color:#fff;
  font:400 12.5px/1.4 'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  padding:7px 10px;border-radius:7px;box-shadow:0 5px 18px rgba(31,1,1,.35);pointer-events:none
}

@media print{
  .hj-tip{display:none!important}
}