/* ═══════════════════════════════════════════════════════════════════════
   Informes · estilos
   Todo cuelga de `.inf`, el contenedor donde vive el informe dentro del
   panel. No es manía: el panel y los informes nacieron como dos aplicaciones
   y usan los mismos nombres —.card, .kpi, .kpis, .card-h— para cosas
   distintas, más reglas sueltas sobre `table`, `input` o `h2`. Sin
   encerrarlas, cada una deformaba a la otra.
   Las variables de color sí van sueltas: los dos ficheros las nombran en
   idiomas distintos —`--tinta` aquí, `--ink` allá— y solo compartían una,
   `--hover`, que aquí pasa a llamarse `--inf-hover`.
   ═══════════════════════════════════════════════════════════════════════ */

:root:not([data-theme="light"]) .jplogo{filter:invert(1)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .jplogo{filter:none}}
:root[data-theme="dark"] .jplogo{filter:invert(1)}
:root[data-theme="light"] .jplogo{filter:none}


:root{
  --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#F7F9FB; --inf-hover:#F2F5F8;
  --ink:#0C0D0F; --ink-2:#3A3F47; --muted:#5B626D; --faint:#6E7681;
  --border:#E4E8ED; --border-2:#EFF2F5;
  --accent:#A93B2B; --accent-2:#C25441; --accent-soft:#A93B2B0F; --accent-bar:#A93B2B17;
  --sales:#1E6E57; --sales-soft:#1E6E570F;
  --dlv:#8A4F6D; --dlv-soft:#8A4F6D0F;
  --warn:#9C7318; --warn-soft:#9C73180F; --crit:#A3392C;
  --shadow:0 1px 2px rgba(26,25,23,.035);
  --shadow-pop:0 14px 38px -10px rgba(26,25,23,.16);
  --r:12px; --r-sm:9px;
}
/* Modo oscuro por sistema: APAGADO mientras el panel no tenga el suyo.
   Fusionados en una pagina, quien tenga el Mac en oscuro veria el informe en
   negro y el menu en blanco. Las variables siguen bajo [data-theme="dark"].
*/

:root[data-theme="dark"]{
  --ground:#0C0C0D; --surface:#141416; --surface-2:#1A1A1D; --inf-hover:#202024;
  --ink:#EDEDEF; --ink-2:#AFAFB6; --muted:#81818A; --faint:#5B5B63;
  --border:#26262B; --border-2:#1D1D21;
  --accent:#E4907F; --accent-2:#EDA292; --accent-soft:#E4907F14; --accent-bar:#E4907F20;
  --sales:#4FC79F; --sales-soft:#4FC79F14;
  --dlv:#D79BB8; --dlv-soft:#D79BB814;
  --warn:#D2A24A; --warn-soft:#D2A24A14; --crit:#E1786B;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-pop:0 20px 54px -14px rgba(0,0,0,.7);
}

/* ── Lo que el panel pinta sobre elementos sueltos y aquí estorba ─────────
   El panel define `table`, `th`, `td`, `input` y `h1,h2,h3` sin clase, así
   que alcanzan también a los informes: las tablas heredaban 620 px de ancho
   mínimo y desbordaban el cajón lateral, las cabeceras se volvían
   monoespaciadas, las casillas de 15 px del selector de PDF crecían a 34, y
   los títulos de tarjeta pasaban a serifa. Se devuelven a su sitio.        */
.inf table{min-width:0}
.inf th{font-family:inherit;background:transparent;white-space:normal}
.inf td{background:transparent}
.inf tbody tr:hover td{background:transparent}
.inf input,.inf select,.inf textarea{width:auto;min-height:0}
.inf .search input{padding:0}
/* El anillo de foco sobrevivía de milagro, por número de clases. Se declara
   a las claras para que no dependa de que nadie escriba `.algo input:focus`. */
.inf input:focus,.inf select:focus,.inf textarea:focus{box-shadow:none}
/* Y el anillo propio por encima del del panel, declarado a las claras. Con
   `outline:revert` se retrocedia al del navegador —azul en Safari— saltandose
   justo el que queriamos. Aqui gana por numero de clases, no por casualidad. */
.inf input:focus-visible,.inf select:focus-visible,.inf textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
.inf h1,.inf h2,.inf h3{font-family:"IBM Plex Sans",system-ui,sans-serif}
/* El panel separa sus tarjetas con margen y subraya sus cabeceras; el informe
   las separa con `gap` y no lleva raya. Sin esto, todas las cabeceras del
   informe salían con una línea que su diseño no tiene, y el ritmo vertical
   quedaba desigual: 10 px entre unas tarjetas y 24 entre otras.            */
.inf .card{margin-bottom:0}
.inf .card-h{padding-bottom:0;border-bottom:none}

.inf .tabs{display:flex;gap:4px;margin:0 0 18px;border-bottom:1px solid var(--border);}

.inf .tab{padding:9px 16px;font-size:13.5px;font-weight:500;color:var(--muted);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:inherit;margin-bottom:-1px;}

.inf .tab:hover{color:var(--ink-2);}

.inf .tab.on{color:var(--ink);border-bottom-color:var(--accent);}

.inf .tab .dt{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;vertical-align:middle;}

.inf .srow{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:12px;padding:7px 0;}

.inf .srow .sn{font-size:12.8px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.inf .srow .st{height:7px;background:var(--border-2,rgba(255,255,255,.07));border-radius:4px;overflow:hidden;}

.inf .srow .st i{display:block;height:100%;border-radius:4px;background:var(--sales);}

.inf .srow.clik{cursor:pointer;border-radius:8px;padding:7px 8px;margin:0 -8px;transition:.12s}

.inf .srow.clik:hover{background:var(--border-2,rgba(255,255,255,.05))}

.inf .srow .cv{opacity:0;margin-left:6px;vertical-align:-1px;transition:.12s}

.inf .srow.clik:hover .cv{opacity:.5}

.inf .srow .sv{font-size:12.8px;font-variant-numeric:tabular-nums;color:var(--ink);min-width:78px;text-align:right;}

.inf .mtab{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px;}

.inf .mtab th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--border);}

.inf .mtab td{padding:10px;border-bottom:1px solid var(--border-2);font-variant-numeric:tabular-nums;}

.inf .mtab th.r,.inf .mtab td.r{text-align:right;}

.inf .pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;font-variant-numeric:tabular-nums;}

.inf .popt{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:9px;margin-bottom:7px;cursor:pointer;font-size:13.5px;color:var(--ink-2);transition:.12s}

.inf .popt:hover{border-color:var(--accent)}

.inf .popt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--ink)}

.inf .popt i{width:9px;height:9px;border-radius:50%;border:2px solid var(--muted);flex:none}

.inf .popt.on i{border-color:var(--accent);background:var(--accent)}
/* Mientras hay un diálogo delante, el fondo no se mueve. Deslizarlo con la
   ventana abierta hace perder el sitio y da sensación de descontrol. */

body.sin-scroll{overflow:hidden}
@media print{
  
  
  
.inf .wrap{max-width:none!important;padding:0!important}
  
body[data-print] #viewOcupacion,body[data-print] #viewCompras,body[data-print] #viewVentas,body[data-print] #viewDelivery,body[data-print] #viewSinelab,body[data-print] #viewLocales,body[data-print] #viewMargen,body[data-print] #viewProduccion,body[data-print] #viewTraspasos{display:none!important}
  /* Si se está mirando una tienda concreta, el PDF es el de esa tienda: la
     pantalla enseña solo eso y el papel tiene que decir lo mismo. */
  
body[data-print] #viewVentas.modo-tienda > *:not(#vStoreCard){display:none!important}
  
body[data-print="ocupacion"] #viewOcupacion,body[data-print="compras"] #viewCompras,body[data-print="ventas"] #viewVentas,body[data-print="delivery"] #viewDelivery,body[data-print="sinelab"] #viewSinelab,body[data-print="locales"] #viewLocales,body[data-print="margen"] #viewMargen,body[data-print="produccion"] #viewProduccion,body[data-print="traspasos"] #viewTraspasos{display:block!important}
  
body[data-print="todo"] #viewOcupacion,body[data-print="todo"] #viewCompras,body[data-print="todo"] #viewVentas,body[data-print="todo"] #viewDelivery,body[data-print="todo"] #viewSinelab,body[data-print="todo"] #viewLocales,body[data-print="todo"] #viewMargen,body[data-print="todo"] #viewProduccion,body[data-print="todo"] #viewTraspasos{display:block!important;break-before:page}
  /* Una tarjeta con una tabla dentro TIENE que poder partirse entre hojas.
     Con `break-inside:avoid` en .card, la tabla de tiendas no cabía en lo que
     quedaba de la primera hoja y saltaba entera a la segunda: el PDF salía con
     los indicadores arriba, media página en blanco, y la tabla detrás.
     Lo que no se debe partir es una fila; y la cabecera se repite en cada hoja
     para que las columnas se sigan entendiendo en la segunda. */
  
.inf .kpi{break-inside:avoid}
  
.inf .card{break-inside:auto}
  
.inf .card-h{break-after:avoid}
  
.inf table{break-inside:auto}
  
.inf thead{display:table-header-group}
  
.inf tr{break-inside:avoid;break-after:auto}
  
.inf .note{break-inside:avoid}
  
.inf .plist,.inf .pwrap{max-height:none!important;overflow:visible!important}
}
/* titulos y subtitulos en negro, no en gris */



.inf .kpi .lab{font-weight:600}

.inf .mtab th{font-weight:600}

.inf .mtab td{color:var(--ink)}

.inf .mtab td.nw,.inf .mtab th{white-space:nowrap}

.inf .mtab{font-variant-numeric:tabular-nums}

.inf .mtab th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);font-weight:600;padding-bottom:9px;border-bottom:1px solid var(--border)}

.inf .mtab td{padding:9px 10px;border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent)}

.inf .mtab th{padding:0 10px 9px}

.inf .mtab tbody tr:hover td{background:color-mix(in srgb,var(--ink) 3%,transparent)}

.inf .mtab td:nth-child(2){max-width:290px;white-space:normal;line-height:1.32}

.inf .dd{position:relative;display:inline-block}

.inf .dd-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:270px;background:var(--surface);color:var(--ink);
  border:1px solid var(--border);border-radius:9px;padding:9px 13px;font-size:13.5px;font-family:inherit;font-weight:500;cursor:pointer;transition:.14s}

.inf .dd-btn:hover{border-color:var(--accent)}

.inf .dd.open .dd-btn{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}

.inf .dd.open .dd-btn svg{transform:rotate(180deg)}

.inf .dd-btn svg{transition:transform .16s;color:var(--ink-2);flex:none}

.inf .dd-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:9000;background-color:var(--surface);min-width:100%;max-height:340px;overflow:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:5px;
  box-shadow:0 16px 44px rgba(0,0,0,.28);display:none}

.inf .dd.open .dd-pop{display:block}

.inf .dd-item{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 11px;border-radius:7px;
  font-size:13px;color:var(--ink-2);cursor:pointer;white-space:nowrap}

.inf .dd-item:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}

.inf .dd-item.on{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--ink);font-weight:600}

.inf .dd-item b{font-weight:500}

.inf .dd-item span{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--faint)}

.inf .dd-sep{height:1px;background:var(--border);margin:5px 3px}

.inf .jplogo{height:30px;width:auto;display:block;flex:none}



@media(max-width:700px){
.inf .jplogo{height:24px}}

.inf .sl{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);font-weight:600}

.inf .selwrap{position:relative;display:inline-flex;align-items:center}

.inf .selwrap svg{position:absolute;right:11px;pointer-events:none;color:var(--ink-2)}

.inf .selwrap select{appearance:none;-webkit-appearance:none;background:var(--surface);color:var(--ink);border:1px solid var(--border);
  border-radius:9px;padding:9px 34px 9px 13px;font-size:13.5px;font-family:inherit;font-weight:500;cursor:pointer;min-width:250px;outline:none}

.inf .selwrap select:hover{border-color:var(--accent)}

.inf .selwrap select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}

.inf .note{margin-top:14px;padding:11px 14px;border-radius:9px;background:color-mix(in srgb,var(--warn,#d08700) 11%,transparent);border:1px solid color-mix(in srgb,var(--warn,#d08700) 26%,transparent);font-size:12.3px;color:var(--ink-2);line-height:1.5;}



body.locked{overflow:hidden}


.inf .num{font-variant-numeric:tabular-nums}

.inf h1,.inf h2,.inf h3{margin:0; font-weight:500; letter-spacing:-.02em; text-wrap:balance}

.inf .serif{font-family:"Fraunces",Georgia,serif}

.inf .mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

.inf button{font:inherit; color:inherit; cursor:pointer; border:none; background:none}

.inf input{font:inherit}

.inf ::selection{background:var(--accent-soft)}

.inf :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}





.inf .mark{width:34px; height:34px; border-radius:9px; background:var(--accent); color:#fff; display:grid; place-items:center; flex:none; box-shadow:0 2px 10px -3px var(--accent)}




.inf .spacer{flex:1}


.inf .tbtn{display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); font-size:12.5px; font-weight:500; transition:.15s; color:var(--ink-2)}

.inf .tbtn:hover{border-color:var(--accent); color:var(--accent)}

.inf .tbtn svg{color:var(--muted)} 
.inf .tbtn:hover svg{color:var(--accent)}

.inf .icon-btn{width:38px; height:38px; padding:0; justify-content:center}


.inf .wrap{max-width:1200px; margin:0 auto; padding:24px 26px 90px}




/* filtro */

.inf .filterbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:8px 10px; margin-bottom:18px; box-shadow:var(--shadow)}
/* El peso sobre el total, debajo del importe. En mono y tabular para que la
   columna se lea en vertical, y en gris para que el euro siga mandando. */

.inf .srow .sv .pc{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;
  font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;
  margin-top:1px;letter-spacing:.01em}
/* ── Ampliar una tarjeta ────────────────────────────────────────────────── */

.inf .ch-der{display:flex;align-items:center;gap:10px}

.inf .ampl{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;
  padding:0 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface);
  cursor:pointer;color:var(--ink-2);transition:.13s;flex:none;font-family:inherit;
  font-size:12.5px;font-weight:600;white-space:nowrap}

.inf .ampl:hover{color:var(--accent);border-color:var(--accent)}
/* Mismo aspecto que «Ampliar», clase distinta a propósito: llevaba `.ampl` y el
   manejador de ampliar se lo quedaba, le cambiaba el texto a «Reducir» y el
   botón de volver acababa diciendo otra cosa. */

.inf .volver{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;
  padding:0 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface);
  cursor:pointer;color:var(--ink-2);transition:.13s;flex:none;font-family:inherit;
  font-size:12.5px;font-weight:600;white-space:nowrap}

.inf .volver:hover{color:var(--accent);border-color:var(--accent)}

.inf .volver svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

.inf .ampl.on{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}

.inf .ampl svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .16s}

.inf .ampl.on svg{transform:rotate(180deg)}
/* Ocupa las dos columnas de la rejilla y deja respirar las filas: a ancho
   completo hay sitio de sobra y apretarlas no tendría sentido. */
/* Bloque abierto a pantalla completa: es lo único que se ve, ocupa todo el
   ancho y sus tablas dejan de tener tope de altura, porque el sentido de
   ampliar es ver la lista entera sin una ventanita con barra dentro. */

/* El aire de arriba, que antes ponía `#inf-raiz`. Va aquí para que lo que
   desplaza no tenga relleno superior y las cabeceras pegajosas se agarren
   al borde de verdad. Ampliada o no, el hueco es el mismo. */
.inf .view,.inf [id^="view"]{padding-top:22px}

.inf .card.solo{grid-column:1 / -1;margin:0!important;border:none;box-shadow:none;
  padding:0 0 40px;background:transparent}

/* La cabecera de la tarjeta ampliada NO se queda pegada arriba.
   Lo estuvo, y el efecto era el contrario del buscado: en una tabla de
   ochocientas filas el título aparecía flotando en mitad de la lista, con una
   fila asomando por encima y otra escondida detrás. Parecía la pantalla rota.
   Ampliada, el título es un encabezado: se lee una vez, se va con el resto y
   la tabla queda entera. Quien quiera volver arriba, sube. */
.inf .card.solo > .card-h{position:static;padding:0 0 14px;margin-bottom:0;
  border-bottom:1px solid var(--border)}

.inf .card.solo > .card-h h2{font-size:24px;letter-spacing:-.02em}

.inf .card.solo .pwrap,.inf .card.solo .plist,.inf .card.solo .tabla-stock{max-height:none!important;
  overflow:visible!important}

.inf .card.solo .srow{padding:13px 0}

.inf .card.solo .sn{font-size:14.5px}

.inf .card.solo .sv{font-size:15.5px;min-width:118px}

.inf .card.solo .sv .pc{font-size:12.5px}

.inf .card.solo .st i{height:9px}

.inf .card.solo .kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important}


.inf .card.ancha{grid-column:1 / -1}
/* Muchas tablas tienen scroll propio para no estirar la página. Al ampliar,
   ese tope es justo lo que estorba: se quiere ver la tabla entera. */

.inf .card.ancha .pwrap,.inf .card.ancha .plist,.inf .card.ancha .tabla-stock{max-height:none!important;overflow:visible}
/* El detalle de tienda, marcado: se ha abierto a propósito y conviene que se
   distinga del resto de tarjetas de la página. */
/* La pantalla de una tienda: solo su tarjeta, nada de la cadena. */

.inf #viewVentas.modo-tienda > *:not(#vStoreCard){display:none!important}

.inf #viewVentas.modo-tienda #vStoreCard{margin-top:0}

.inf #viewVentas.modo-tienda #vStoreCard .kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important}

.inf #viewVentas.modo-tienda #vStoreCard .card-h h2{font-size:24px}
/* Sin altura máxima: es la pantalla entera, no una tarjeta apretada. */

.inf #viewVentas.modo-tienda #vStoreCard .pwrap{max-height:none}

.inf .card.ancha .srow{padding:13px 0}

.inf .card.ancha .sn{font-size:14.5px}

.inf .card.ancha .sv{font-size:15.5px;min-width:118px}

.inf .card.ancha .sv .pc{font-size:12.5px}

.inf .card.ancha .st i{height:9px}
/* ── Elegir qué entra en el PDF ──────────────────────────────────────────
   Un desplegable colgado del botón, no una ventana que tapa la pantalla: se
   elige y se descarga sin perder de vista lo que se está mirando. La lista se
   construye sola con los bloques que tenga la pantalla en ese momento, así que
   vale para cualquier informe, también los que se añadan después. */

.inf .pdfwrap{position:relative;display:inline-block}

.inf .pdfpop{position:absolute;top:calc(100% + 7px);right:0;z-index:9000;width:290px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-pop);padding:6px;display:none}

.inf .pdfpop.open{display:block}
/* Incrustado en el panel, el selector se saca de la barra oculta y se enseña
   centrado sobre la pantalla. `fixed` dentro de un marco se ancla al marco,
   que aquí es justo el área que se está mirando. */

.inf .pdf-fondo{position:fixed;inset:0;z-index:8990;background:#0c0c0d5c;
  opacity:0;pointer-events:none;transition:opacity .15s}

.inf .pdf-fondo.on{opacity:1;pointer-events:auto}

.inf .pdfpop.pdf-centro{position:fixed;top:50%;left:50%;right:auto;
  transform:translate(-50%,-50%);width:340px;max-width:calc(100vw - 32px);
  max-height:calc(100vh - 60px);overflow:auto}

.inf .pdfpop-t{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);font-weight:500;padding:9px 11px 7px}

.inf .pdfop{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:8px;
  cursor:pointer;font-size:13px;color:var(--ink-2);user-select:none}

.inf .pdfop:hover{background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink)}

.inf .pdfop input{appearance:none;width:15px;height:15px;border:1.5px solid var(--border-2);
  border-radius:4px;flex:none;cursor:pointer;position:relative;margin:0}

.inf .pdfop input:checked{background:var(--accent);border-color:var(--accent)}

.inf .pdfop input:checked::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

.inf .pdfpop-pie{display:flex;gap:7px;padding:9px 8px 7px;margin-top:4px;
  border-top:1px solid var(--border)}

.inf .pdf-todo{flex:none;padding:0 12px;height:34px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface);color:var(--ink-2);font-family:inherit;font-size:12.5px;
  font-weight:600;cursor:pointer}

.inf .pdf-todo:hover{border-color:var(--accent);color:var(--accent)}

.inf .pdf-go{flex:1;height:34px;border:none;border-radius:8px;background:var(--accent);color:#fff;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}

.inf .pdf-go:hover{filter:brightness(1.07)}
/* Lo que se desmarca no se imprime. */
@media print{ 
.inf .no-pdf{display:none!important} }

/* ── La pestana de impresion (?pdf=1) ─────────────────────────────────────
   Abrir el panel ejecutivo completo solo para sacar un PDF desconcierta: es
   otra aplicacion, con su menu y su cabecera, y quien venia del panel de
   gestion no reconoce donde esta. Aqui se esconde todo el armazon y se deja
   la hoja: lo que se ve en pantalla es ya lo que va a salir impreso.        */

body[data-pdfsolo] .bar,body[data-pdfsolo] .side,body[data-pdfsolo] .crumb,body[data-pdfsolo] .badge,body[data-pdfsolo] .drawer,body[data-pdfsolo] .scrim,body[data-pdfsolo] #amplia,body[data-pdfsolo] .ampl,body[data-pdfsolo] .filterbar{display:none!important}

body[data-pdfsolo] .main{margin:0!important;padding:0!important}

body[data-pdfsolo] .main .wrap{max-width:900px!important;margin:0 auto!important;padding:26px 22px!important}

body[data-pdfsolo]{background:#fff!important}



.inf .fchip{padding:8px 14px; border-radius:8px; font-size:13px; font-weight:500; color:var(--ink-2); transition:.12s; white-space:nowrap}

.inf .fchip:hover{background:var(--inf-hover)}

.inf .fchip.on{background:var(--accent); color:#fff; box-shadow:0 2px 8px -3px var(--accent)}

.inf .range{display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap}

.inf .range .rl{font-size:12px; color:var(--muted); font-weight:500}

.inf .mpick{position:relative}

.inf .mpick-btn{display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); font-size:13px; font-weight:500; min-width:118px; justify-content:space-between; transition:.13s}

.inf .mpick-btn:hover{border-color:var(--accent)}

.inf .mpick-btn svg{color:var(--muted)}

.inf .mpop{position:absolute; top:calc(100% + 6px); right:0; width:248px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-pop); padding:12px; z-index:60; opacity:0; transform:translateY(-6px); pointer-events:none; transition:.15s}

.inf .mpop.open{opacity:1; transform:none; pointer-events:auto}
/* Este va colgado de un chip que esta en medio de la barra, no en el borde
   derecho: se abre hacia abajo-izquierda para no salirse de la pantalla. */

.inf #mesUnoPop{left:0; right:auto}

.inf .mpop-yr{display:flex; gap:6px; margin-bottom:10px}

.inf .yb{flex:1; padding:7px; border-radius:8px; font-size:12.5px; font-weight:600; border:1px solid var(--border); color:var(--ink-2); transition:.12s}

.inf .yb:hover{border-color:var(--accent)} 
.inf .yb.on{background:var(--accent); color:#fff; border-color:var(--accent)}

.inf .mgrid2{display:grid; grid-template-columns:repeat(3,1fr); gap:5px}

.inf .mcell2{padding:10px 0; text-align:center; font-size:12.5px; border-radius:8px; border:1px solid transparent; transition:.1s}

.inf .mcell2:hover:not(.off){background:var(--accent-soft)}

.inf .mcell2.off{color:var(--faint); cursor:not-allowed}

.inf .mcell2.on{background:var(--accent); color:#fff; font-weight:600}


.inf .kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:14px}

.inf .kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:16px 18px; box-shadow:var(--shadow); position:relative; overflow:hidden}

.inf .kpi .lab{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); display:flex; align-items:center; gap:7px}

.inf .kpi .val{font-family:"Fraunces",serif; font-weight:500; font-size:28px; letter-spacing:-.02em; margin-top:8px; line-height:1}

.inf .kpi .sub{font-size:12px; color:var(--muted); margin-top:5px}

.inf .kpi .spark{position:absolute; right:14px; bottom:12px; width:72px; height:24px}


.inf .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); padding:20px 22px}

.inf .card-h{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:2px}

.inf .card-h h2{font-size:15px; font-weight:600}

.inf .card-h .hint{font-size:12px; color:var(--muted)}

.inf .legend{display:flex; gap:14px; align-items:center; font-size:12px; color:var(--muted)}
 

.inf .grid2{display:grid; grid-template-columns:1.3fr 1fr; gap:14px; margin-top:14px}

.inf .grid2b{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px}


.inf .chart{width:100%; margin-top:12px; display:block; overflow:visible}

.inf .axis{font-size:11px; fill:var(--muted); font-family:"IBM Plex Mono"}

/* ── Producción ─────────────────────────────────────────────────────────────
   Sin componentes nuevos: los chips son los .fchip de la casa, el selector de
   sede es el desplegable propio .dd y el buscador es .search. Lo único de aquí
   son la maqueta de la barra y la etiqueta de estado. */

.inf #pChips{background:var(--surface-2);border:1px solid var(--border-2);border-radius:11px;
  padding:3px;display:flex;gap:2px;flex:none}

.inf #pBarra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}

.inf #pBarra .search{margin:0;flex:1;min-width:200px;max-width:320px}

.inf .jpbarra{display:flex;align-items:center;gap:10px;margin:2px 0 14px}

.inf .jpbarra .dd-btn{min-width:260px}

.inf #pRank td.n,.inf #pDet td.n{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}

/* ── Bebidas · mínimos ────────────────────────────────────────────────────
   Misma maqueta que Producción: #bBarra con el .dd de tienda y el .search de
   producto. La fila de familia agrupa dentro de la misma tabla en vez de
   partirla en varias, y el detalle día a día se abre como fila propia debajo
   de la fila del producto, no como modal. */
.inf #bBarra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.inf #bBarra .search{margin:0;flex:1;min-width:200px;max-width:320px}
.inf tr.bfam td{background:var(--surface-2);font-weight:600;font-size:12px;padding:8px 10px;border-bottom:1px solid var(--border)}
.inf tr.bfila{cursor:pointer}
.inf tr.bdet td{padding:0;border-bottom:1px solid var(--border-2)}
.inf .bdetwrap{padding:10px 14px;background:var(--surface-2)}
.inf .bdd{display:flex;justify-content:space-between;gap:14px;padding:5px 0;font-size:12.6px;color:var(--ink-2);border-bottom:1px solid var(--border-2)}
.inf .bdd:last-child{border-bottom:none}
.inf .bdd span:first-child{font-weight:600;color:var(--ink);min-width:80px}

/* ── Panadería y cocina · mínimos ───────────────────────────────────────────
   Mismo patrón que Bebidas (misma maqueta #xBarra, mismas clases .bfam/
   .bfila/.bdet para la tabla y el detalle), solo cambia el id de la barra. */
.inf #cBarra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.inf #cBarra .search{margin:0;flex:1;min-width:200px;max-width:320px}

.inf .pest{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--surface-2);
  color:var(--muted);white-space:nowrap}
/* La barra en verde pleno pesaba demasiado para un dato que se lee de un
   vistazo. Se rebaja el relleno y se reserva el color entero para el hover,
   que es cuando de verdad se está mirando esa columna. */

.inf .pbar rect{fill:color-mix(in srgb,var(--sales) 62%,transparent);transition:fill .12s}

.inf .pbar:hover rect{fill:var(--sales)}
/* Barra de ventas: color pleno pero rebajado, y el mes que se mira se enciende.
   Los meses aún abiertos van con trama para que no se comparen con los cerrados. */

.inf .vbar rect{fill:color-mix(in srgb,var(--sales) 70%,transparent);transition:fill .12s}

.inf .vbar:hover rect{fill:var(--sales)}

.inf .vbar rect.parcial{fill:color-mix(in srgb,var(--sales) 30%,transparent)}
/* Compras va en el terracota de marca, mismo tratamiento que ventas. */

.inf .cbar rect{fill:color-mix(in srgb,var(--accent) 62%,transparent);transition:fill .12s}

.inf .cbar:hover rect{fill:var(--accent)}
/* Comparativa: las dos series con el mismo criterio, y el mes en curso más
   claro para que no se compare con los cerrados. */

.inf .mbar rect{transition:fill .12s}

.inf .mbar rect.v{fill:color-mix(in srgb,var(--sales) 78%,transparent)}

.inf .mbar rect.c{fill:color-mix(in srgb,var(--accent) 78%,transparent)}

.inf .mbar rect.v.parcial{fill:color-mix(in srgb,var(--sales) 32%,transparent)}

.inf .mbar rect.c.parcial{fill:color-mix(in srgb,var(--accent) 32%,transparent)}

.inf .mbar:hover rect.v{fill:var(--sales)}

.inf .mbar:hover rect.c{fill:var(--accent)}

.inf .pval{font-family:"IBM Plex Mono",monospace;font-size:10.5px;fill:var(--muted);
  font-variant-numeric:tabular-nums}
/* minmax(0,…) y no 1fr a secas: con 1fr la columna nunca baja del ancho
   mínimo de su contenido, así que la tarjeta de la derecha empujaba a la de
   la izquierda hasta partirle el título letra a letra. */
/* Barras horizontales: la etiqueta se lee sin girar la cabeza y el valor
   queda alineado a la derecha, que es donde se buscan las cifras. */

.inf .jpbars{display:flex;flex-direction:column;gap:9px;margin-top:4px}

.inf .jpbar{display:grid;grid-template-columns:82px minmax(0,1fr) auto;align-items:center;gap:11px;min-width:0}

.inf .jpbar .jpbl{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}

.inf .jpbar .jpbt{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden}

.inf .jpbar .jpbt i{display:block;height:100%;background:var(--sales);opacity:.75;border-radius:99px}

.inf .jpbar:hover .jpbt i{opacity:1}

.inf .jpbar .jpbv{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

.inf .jpbar .jpbv em{font-style:normal;color:var(--faint);font-size:11px}

.inf .pest.abierta{background:color-mix(in srgb,#b45309 12%,transparent);color:#b45309}

.inf .tip{position:fixed; pointer-events:none; background:var(--ink); color:var(--ground); padding:8px 11px; border-radius:8px; font-size:12px; box-shadow:var(--shadow-pop); opacity:0; transition:opacity .1s; z-index:120; white-space:nowrap}

.inf .tip .t2{opacity:.65; font-size:11px}


.inf .plist{max-height:430px; overflow-y:auto; margin:0 -6px; padding:0 2px}

.inf .plist,.inf .pwrap,.inf .dr-body{scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--muted) 50%,transparent) transparent}

.inf .plist::-webkit-scrollbar,.inf .pwrap::-webkit-scrollbar,.inf .dr-body::-webkit-scrollbar{width:12px;height:12px}

.inf .plist::-webkit-scrollbar-track,.inf .pwrap::-webkit-scrollbar-track,.inf .dr-body::-webkit-scrollbar-track{background:transparent}

.inf .plist::-webkit-scrollbar-thumb,.inf .pwrap::-webkit-scrollbar-thumb,.inf .dr-body::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 42%,transparent); border-radius:8px; border:3px solid var(--surface); background-clip:padding-box}

.inf .plist::-webkit-scrollbar-thumb:hover,.inf .pwrap::-webkit-scrollbar-thumb:hover,.inf .dr-body::-webkit-scrollbar-thumb:hover{background:var(--muted)}

.inf .search{display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); margin:12px 0 6px}

.inf .search input{border:none; background:none; outline:none; flex:1; color:var(--ink); font-size:13px}

.inf .search svg{color:var(--muted); flex:none}

.inf .prow{display:grid; grid-template-columns:24px 1fr auto 15px; align-items:center; gap:13px; padding:11px 12px; border-radius:10px; cursor:pointer; transition:.12s; border-bottom:1px solid var(--border-2)}

.inf .prow:last-child{border-bottom:none} 
.inf .prow:hover{background:var(--inf-hover)} 
.inf .prow:active{transform:scale(.995)}

.inf .prow .rk{font-size:11.5px; color:var(--faint); font-family:"IBM Plex Mono"; text-align:right}

.inf .prow .nm{font-size:13.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:450}

.inf .prow .amtw{text-align:right; line-height:1.2}

.inf .prow .amt{font-size:14px; font-weight:600; white-space:nowrap}

.inf .prow .shr{font-size:10.5px; color:var(--muted)}

.inf .prow .go{color:var(--faint); display:flex; transition:transform .12s}

.inf .prow:hover .go{color:var(--accent); transform:translateX(2px)}


.inf .fam{display:flex; flex-direction:column; gap:10px; margin-top:16px}

.inf .fbar{display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:12px}

.inf .fbar .fn{font-size:12.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.inf .fbar .ft{height:10px; background:var(--border-2); border-radius:6px; overflow:hidden}

.inf .fbar .ft i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:6px; transition:width .5s cubic-bezier(.4,0,.2,1)}

.inf .fbar .fv{font-size:12.5px; font-weight:600; white-space:nowrap}


.inf .pwrap{max-height:380px; overflow-y:auto; margin-top:4px}

.inf .ptable{width:100%; border-collapse:collapse; font-size:12.5px}

.inf .ptable th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:500; padding:8px 10px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface)}

.inf .ptable th.r,.inf .ptable td.r{text-align:right}

.inf .ptable td{padding:9px 10px; border-bottom:1px solid var(--border-2)}

.inf .ptable tbody tr:hover{background:var(--inf-hover)}

.inf .ptable .pn{font-weight:450; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.inf .ptable .amt{font-weight:600}

.inf .ptable .famtag{font-size:10.5px; color:var(--muted); background:var(--surface-2); padding:2px 8px; border-radius:20px; border:1px solid var(--border-2)}


.inf .wh{display:flex; align-items:center; gap:22px; margin-top:14px}

.inf .wh-list{flex:1; display:flex; flex-direction:column; gap:9px}

.inf .whr{display:flex; align-items:center; gap:10px; font-size:12.5px}

.inf .whr i{width:9px; height:9px; border-radius:3px; flex:none}

.inf .whr .n{flex:1; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.inf .whr .v{font-weight:600}


.inf .insight{border:1px solid var(--warn-soft); background:var(--warn-soft); border-radius:var(--r); padding:17px 20px; display:flex; gap:15px; align-items:flex-start; margin-top:14px}

.inf .insight .ic{width:34px; height:34px; border-radius:9px; background:var(--warn); color:#fff; display:grid; place-items:center; flex:none}

.inf .insight h3{font-size:14px; font-weight:600; color:var(--warn)}

.inf .insight p{margin:5px 0 0; font-size:13px; color:var(--ink-2); max-width:66ch}

.inf .insight .fig{font-weight:600; color:var(--ink)}


.inf .pending{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:500; color:var(--sales); background:var(--sales-soft); padding:3px 9px; border-radius:20px}

.inf .pending i{width:6px; height:6px; border-radius:50%; background:var(--sales); animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.inf .mstats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px}

.inf .mstat{padding:14px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface-2)}

.inf .mstat .l{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}

.inf .mstat .v{font-family:"Fraunces",serif; font-size:23px; font-weight:500; margin-top:6px; line-height:1}

.inf .mstat.ghost .v{color:var(--faint)}

/* Sin desenfoque: dejaba la lista de detrás en un gris sucio que se veía peor
   que un simple oscurecido, y encima cuesta de pintar en pantallas lentas. */

.inf .scrim{position:fixed; inset:0; background:rgba(12,13,15,.34); z-index:100; opacity:0; pointer-events:none; transition:opacity .2s}

.inf .scrim.open{opacity:1; pointer-events:auto}

.inf .drawer{position:fixed; top:0; right:0; height:100%; width:min(580px,94vw); background:var(--surface); z-index:110; box-shadow:var(--shadow-pop); transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; border-left:1px solid var(--border); border-radius:14px 0 0 14px; overflow:hidden}

.inf .drawer.open{transform:none}

.inf .drawer.full{width:100vw; max-width:100vw; border-left:none}

.inf .drawer.full .dr-h,.inf .drawer.full .dr-body{max-width:940px; margin-inline:auto; width:100%}

.inf .dr-vacio{padding:16px 18px;border:1px dashed var(--border);border-radius:10px;
  color:var(--muted);font-size:13px;line-height:1.5;background:var(--surface-2)}

.inf .dr-h{padding:20px 24px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:12px}

.inf .dr-h .dt{flex:1; min-width:0}

.inf .dr-h h3{font-family:"Fraunces",serif; font-weight:500; font-size:19px}

.inf .dr-h .cif{font-size:12px; color:var(--muted); font-family:"IBM Plex Mono"; margin-top:3px}

.inf .dr-close{width:34px; height:34px; border-radius:9px; border:1px solid var(--border); display:grid; place-items:center; color:var(--muted); flex:none}

.inf .dr-close:hover{border-color:var(--accent); color:var(--accent)}

.inf .dr-body{flex:1; overflow-y:auto; padding:22px 24px}

.inf .dr-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px}

.inf .dr-k{padding:13px 14px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface-2)}

.inf .dr-k .l{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}

.inf .dr-k .v{font-family:"Fraunces",serif; font-size:21px; font-weight:500; margin-top:5px; line-height:1}

.inf .dr-sec{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:18px 0 10px; font-weight:600}

.inf .dr-doc{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:8px 10px; border-radius:8px; font-size:12.5px}

.inf .dr-doc:hover{background:var(--inf-hover)}

.inf .dr-doc .dd{font-family:"IBM Plex Mono"; font-size:11.5px; color:var(--muted)}

.inf .dr-doc .dw{color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.inf .dr-doc .di{font-weight:600; white-space:nowrap; text-align:right}

.inf .pchip{display:flex; justify-content:space-between; gap:10px; width:100%; padding:8px 12px; border:1px solid var(--border-2); border-radius:9px; margin-bottom:6px; font-size:12.5px; background:var(--surface-2)}

.inf .pchip .pv{font-weight:600}

.inf .mgrp{border:1px solid var(--border-2); border-radius:10px; margin-bottom:8px; overflow:hidden}

.inf .mgrp summary{display:flex; align-items:center; gap:10px; padding:11px 13px; cursor:pointer; list-style:none; background:var(--surface-2); font-size:12.5px; transition:.1s}

.inf .mgrp summary::-webkit-details-marker{display:none}

.inf .mgrp summary:hover{background:var(--inf-hover)}

.inf .mgrp summary .mc{font-weight:600} 
.inf .mgrp summary .mm{flex:1; text-align:right; color:var(--muted); font-size:12px}

.inf .mgrp summary .chev{color:var(--faint); transition:transform .18s} 
.inf .mgrp[open] summary .chev{transform:rotate(180deg)}

.inf .mgrp[open] summary{border-bottom:1px solid var(--border-2)}


.inf .foot{margin-top:30px; padding-top:18px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:11.5px; color:var(--muted)}

.inf .foot .mono{font-size:11px}
@media(prefers-reduced-motion:reduce){}
@media(max-width:900px){
.inf .kpis{grid-template-columns:repeat(2,1fr)} 
.inf .grid2,.inf .grid2b{grid-template-columns:1fr} 
.inf .wrap{padding:20px 16px 60px}    
.inf .range{margin-left:0; width:100%}}
@media(max-width:560px){
.inf .kpis{grid-template-columns:1fr} 
.inf .mstats{grid-template-columns:1fr}}
@media print{
  /* En pantalla habla el color; en papel, el número. Los navegadores no
     imprimen fondos salvo que se marque una casilla, así que una rejilla que
     solo usa color sale en blanco. */
  
.inf table.ocgrid td{border:1px solid #ccc!important;background:#fff!important;
    font-size:9px;text-align:center;color:#111}
  
.inf table.ocgrid td::after{content:attr(data-t)}
  
.inf table.ocgrid td.v0::after{content:"·"}
  
.inf table.ocgrid td.pico{outline:none!important;font-weight:700;border-color:#1E6E57!important}
  
.inf .occurva .oca{fill:#1E6E57!important;opacity:.16}
  
.inf .occurva .ocl{stroke:#1E6E57!important}
  
.inf .ocfila{break-inside:avoid}
  
.inf .octip{display:none!important}
}
@media print{  
.inf .card,.inf .kpi{box-shadow:none;border:1px solid #ddd} 
.inf .kpi{break-inside:avoid} 
.inf .card{break-inside:auto} 
.inf thead{display:table-header-group} 
.inf tr{break-inside:avoid} 
.inf .plist,.inf .pwrap{max-height:none;overflow:visible} 
.inf .wrap{max-width:100%;padding:0}}

/* ═══════════════════════════════════════════════════════════════
   REFINAMIENTO VISUAL · blanco, aire y cero ruido
   Regla de fondo: el dato manda. Todo lo demás se aparta.
   ═══════════════════════════════════════════════════════════════ */

/* — tipografía: las cifras en palo seco, no en serifa.
     La serifa se reserva al título de página, que es la voz de marca. — */

.inf .kpi .val,.inf .mstat .v,.inf .dr-k .v{font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:600;letter-spacing:-.03em}

.inf .kpi .val{font-size:29px;margin-top:9px}

.inf .mstat .v{font-size:22px}

.inf .dr-k .v{font-size:20px}

.inf .dr-h h3{font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:600;font-size:17px;letter-spacing:-.02em}




/* — barra superior: hairline, sin transparencias raras — */



.inf .tbtn{border-radius:9px;padding:8px 13px;background:var(--surface);color:var(--ink-2);font-weight:500;
  border-color:var(--border);transition:background .12s,border-color .12s,color .12s}

.inf .tbtn:hover{background:var(--surface-2);border-color:var(--border);color:var(--ink)}

.inf .tbtn:hover svg{color:var(--ink-2)}

.inf .icon-btn{width:36px;height:36px}

/* — pestañas: fuera los puntos de colores. La activa se marca sola. — */

.inf .tab .dt{display:none}

.inf .tabs{gap:2px;margin:0 0 20px}

.inf .tab{padding:10px 14px;font-size:13.5px;font-weight:500;letter-spacing:-.01em}

.inf .tab.on{font-weight:600;border-bottom-width:2px}

/* — filtro de fechas: control segmentado sobre carril gris, como los de producto — */

.inf .filterbar{background:transparent;border:none;box-shadow:none;padding:0;margin-bottom:20px;gap:12px}

.inf #fchips{background:var(--surface-2);border:1px solid var(--border-2);border-radius:11px;padding:3px;gap:2px!important}

.inf .fchip{padding:7px 13px;border-radius:8px;font-size:12.8px;font-weight:500;color:var(--muted);box-shadow:none}

.inf .fchip:hover{background:transparent;color:var(--ink-2)}

.inf .fchip.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(26,25,23,.06);border:1px solid var(--border-2)}

.inf .range .rl{font-size:11.5px;color:var(--faint);font-weight:500}

.inf .mpick-btn{background:var(--surface);border-radius:9px;font-weight:500;font-size:12.8px}

.inf .mpick-btn:hover{border-color:var(--muted)}

.inf .mpop{border-radius:12px;box-shadow:var(--shadow-pop)}

.inf .yb{border-radius:7px;font-weight:500}

.inf .yb.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}

.inf .mcell2.on{background:var(--ink);color:var(--surface);font-weight:600}

.inf .mcell2:hover:not(.off){background:var(--inf-hover)}

/* — tarjetas: blanco sobre casi blanco, separadas por una línea, sin sombra — */

.inf .card,.inf .kpi{box-shadow:none;border:1px solid var(--border);background:var(--surface)}

.inf .card{border-radius:var(--r);padding:20px 22px}

.inf .kpi{border-radius:var(--r);padding:17px 19px}

.inf .kpis{gap:12px;margin-bottom:16px}

.inf .kpi .lab{font-size:10px;letter-spacing:.08em;color:var(--muted);font-weight:600}

.inf .kpi .sub{font-size:11.8px;color:var(--muted);margin-top:6px}

.inf .card-h h2{font-size:14.5px;font-weight:600;letter-spacing:-.015em}

.inf .card-h .hint{font-size:11.8px;color:var(--muted)}

.inf .grid2,.inf .grid2b{gap:12px;margin-top:12px}

/* — avisos: informan, no gritan — */

.inf .note{background:var(--surface-2);border:1px solid var(--border-2);color:var(--ink-2);
  border-radius:var(--r-sm);padding:13px 16px;font-size:12.4px;line-height:1.6}

.inf .note b{color:var(--ink);font-weight:600}

.inf .insight{background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r);padding:16px 18px}

.inf .insight .ic{background:transparent;color:var(--warn);width:auto;height:auto}

.inf .insight h3{color:var(--ink);font-size:13.5px}

.inf .insight p{font-size:12.6px}

/* — tablas: más aire entre filas, líneas casi invisibles — */

.inf .mtab{font-size:12.8px}

.inf .mtab th{font-size:10px;letter-spacing:.07em;color:var(--muted);font-weight:600;padding:0 12px 10px;border-bottom:1px solid var(--border)}

.inf .mtab td{padding:11px 12px;border-bottom:1px solid var(--border-2)}

.inf .mtab tbody tr:last-child td{border-bottom:none}

.inf .mtab tbody tr:hover td{background:var(--surface-2)}

.inf .ptable th{font-size:10px;letter-spacing:.07em;font-weight:600;padding:0 10px 10px}

.inf .ptable td{padding:10px}

.inf .ptable tbody tr:hover{background:var(--surface-2)}

.inf .famtag{background:var(--surface-2);border-color:var(--border-2);color:var(--muted)}

/* — barras de ranking: finas y discretas — */

.inf .srow{padding:8px 0}

.inf .srow .st{height:6px;background:var(--border-2);border-radius:3px}

.inf .srow .st i{border-radius:3px}

.inf .srow .sn{font-size:12.5px;color:var(--ink-2)}

.inf .srow .sv{font-size:12.5px;font-weight:600}

.inf .srow.clik:hover{background:var(--surface-2)}

.inf .fbar .ft{height:6px;background:var(--border-2);border-radius:3px}

.inf .fbar .ft i{background:var(--accent);border-radius:3px}

.inf .prow{border-bottom:1px solid var(--border-2);border-radius:0;padding:11px 8px}

.inf .prow:hover{background:var(--surface-2)}

/* — desplegables y buscador — */

.inf .dd-btn,.inf .search{background:var(--surface);border-radius:9px}

.inf .dd-btn{font-weight:500;font-size:12.8px}

.inf .dd-btn:hover{border-color:var(--muted)}

.inf .dd.open .dd-btn{border-color:var(--ink);box-shadow:none}

.inf .dd-pop{border-radius:11px;box-shadow:var(--shadow-pop);padding:4px}

.inf .dd-item{border-radius:7px;font-size:12.6px}

.inf .dd-item:hover{background:var(--inf-hover)}

.inf .dd-item.on{background:var(--inf-hover);color:var(--ink);font-weight:600}

.inf .selwrap select{background:var(--surface);border-radius:9px;font-size:12.8px}

.inf .pchip,.inf .mgrp{border-color:var(--border-2);border-radius:9px}

.inf .mgrp summary{background:var(--surface-2)}

.inf .popt{border-radius:9px;border-color:var(--border-2)}

.inf .popt.on{background:var(--surface-2);border-color:var(--ink);color:var(--ink)}

.inf .popt.on i{border-color:var(--ink);background:var(--ink)}

/* — detalles — */

.inf .tip{border-radius:8px;padding:9px 12px;box-shadow:var(--shadow-pop)}

.inf .foot{border-top:1px solid var(--border);font-size:11px;color:var(--faint);margin-top:36px}

.inf .pending{background:var(--surface-2);color:var(--muted);font-weight:500}

.inf .pending i{background:var(--muted)}

.inf .mstat{background:var(--surface);border-color:var(--border)}

.inf .dr-k{background:var(--surface);border-color:var(--border)}

.inf .wrap{padding:26px 26px 90px}

/* — acceso: la misma limpieza — */







/* ═══════════════════════════════════════════════════════════════
   ARMAZÓN DE APLICACIÓN · barra superior + navegación lateral
   ═══════════════════════════════════════════════════════════════ */








.inf .app{display:flex;align-items:flex-start}


.inf .nav{display:flex;flex-direction:column;gap:1px;flex:1}

.inf .navg{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);
  font-weight:600;padding:17px 11px 7px}

.inf .navg:first-child{padding-top:2px}
/* los botones de sección ahora viven en el lateral, no en pestañas */

.inf .tab{display:flex;align-items:center;gap:11px;width:100%;text-align:left;margin:0;
  padding:9px 11px;border:none;border-bottom:none;border-radius:8px;
  font-size:13.2px;font-weight:500;color:var(--ink-2);background:none;
  transition:background .12s,color .12s}

.inf .tab svg{color:var(--faint);flex:none;transition:color .12s}

.inf .tab:hover{background:var(--inf-hover);color:var(--ink)}

.inf .tab:hover svg{color:var(--ink-2)}

.inf .tab.on{background:var(--accent-bar);color:var(--accent);font-weight:600;border-bottom:none}

.inf .tab.on svg{color:var(--accent)}










.inf .main{flex:1;min-width:0}

.inf .main .wrap{max-width:1140px;margin:0 auto;padding:26px 30px 80px}

@media(max-width:960px){
  
.inf .app{display:block}
  
  
.inf .nav{flex-direction:row;gap:3px}
  
  
.inf .tab{white-space:nowrap;padding:8px 12px}
  
.inf .main .wrap{padding:20px 16px 60px}
  
}
@media print{ 
.inf .main .wrap{max-width:none;padding:0}}


/* ── Ocupación por hora ─────────────────────────────────────────────────── */

.inf .ocsw{display:inline-grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:9px}

.inf .ocsw button{min-height:28px;padding:5px 12px;border:1px solid transparent;border-radius:6px;
  background:transparent;color:var(--muted);font-family:inherit;font-size:12px;
  white-space:nowrap;cursor:pointer;transition:.12s}

.inf .ocsw button:hover{color:var(--ink)}

.inf .ocsw button.on{background:var(--surface);color:var(--accent);font-weight:500;
  border-color:var(--border);box-shadow:0 1px 2px #0000000d}

.inf .ochint{margin:2px 0 0;font-size:12px;color:var(--muted);max-width:76ch;line-height:1.5}
/* La lectura del cuadrante: tres frases, no un párrafo. Va debajo del gráfico
   porque primero se mira y después se lee. */

.inf .oclee{margin-top:18px;padding-top:16px;border-top:1px solid var(--border-2)}

.inf .oclee-t{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  margin-bottom:11px}

.inf .oclee-como{margin:0 0 13px;font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:82ch}
.inf .oclee-como b{color:var(--ink);font-weight:600}
.inf .oclee-i{display:grid;grid-template-columns:8px 1fr;gap:12px;align-items:start;margin-bottom:9px}

.inf .oclee-i:last-child{margin-bottom:0}

.inf .oclee-i span{width:8px;height:8px;border-radius:50%;margin-top:6px}

.inf .oclee-i.punta span,.inf .oclee-i.finde span{background:var(--sales)}

.inf .oclee-i.flojo span{background:var(--warn,#d08700)}

.inf .oclee-i.dia span,.inf .oclee-i.plano span{background:var(--accent)}

.inf .oclee-i p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2);max-width:82ch}

.inf .oclee-i b{color:var(--ink);font-weight:600}

.inf .ocfila{display:grid;grid-template-columns:190px minmax(0,1fr) 150px;gap:16px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--border-2)}

.inf .ocfila:last-child{border-bottom:none}

.inf .ocnom{font-size:13.5px;font-weight:500;letter-spacing:-.008em;min-width:0}

.inf .ocnom i{display:block;font-style:normal;font-size:10.5px;color:var(--muted);margin-top:2px}
/* La curva entera: una barra por hora. Es lo que distingue una tienda que
   concentra la mañana de otra que va plana doce horas, y con «pico y valle»
   las dos parecían lo mismo. */

.inf .occurva{position:relative}

.inf .occurva svg{display:block;width:100%;height:40px;overflow:visible}

.inf .occurva .oca{fill:color-mix(in srgb,var(--sales) 9%,transparent);stroke:none}

.inf .occurva .ocl{fill:none;stroke:var(--sales);stroke-width:1.5;stroke-linejoin:round;
  stroke-linecap:round;vector-effect:non-scaling-stroke}

.inf .occurva .ocp{fill:var(--sales);stroke:var(--ground);stroke-width:1.5;vector-effect:non-scaling-stroke}

.inf .occurva .ocv{fill:var(--warn,#d08700);stroke:var(--ground);stroke-width:1.5;vector-effect:non-scaling-stroke}
/* Ampliada, la curva ocupa lo que merece: de sparkline a gráfico. */

.inf .card.solo .occurva svg{height:96px}

.inf .card.solo .ocfila{padding:13px 0}

.inf .card.solo .ocnom b{font-size:15px}

.inf .card.solo .ocdato b{font-size:15px}

.inf .occurva .ocz{fill:transparent;cursor:crosshair}

.inf .occurva .ocz:hover{fill:color-mix(in srgb,var(--ink) 4%,transparent)}

.inf .oceje{position:relative;height:12px}

.inf .oceje span{position:absolute;transform:translateX(-50%);font-size:9.5px;color:var(--faint);
  white-space:nowrap}

.inf .octip{position:fixed;z-index:9999;transform:translate(-50%,-100%);pointer-events:none;
  padding:7px 11px;border-radius:8px;background:var(--ink);color:var(--ground);
  font-size:12px;line-height:1.4;white-space:nowrap;
  box-shadow:0 6px 18px #0c0d0f2e}

.inf .octip[hidden]{display:none}

.inf .octip b{font-size:14px;font-weight:600}

.inf .octip span{opacity:.72;font-size:11px}

.inf .ocdato{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:right}

.inf .ocdato b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}

.inf .ocdato .pico b{color:var(--sales)}

.inf .ocdato .valle b{color:var(--warn,#d08700)}

.inf .ocdato span{display:block;font-size:9.5px;color:var(--faint);
  font-variant-numeric:tabular-nums;margin-top:1px}

.inf .ocejes{display:grid;grid-template-columns:190px minmax(0,1fr) 150px;gap:16px;margin-top:2px}

.inf .ocejes .h{display:flex;justify-content:space-between;font-size:9.5px;color:var(--faint)}

.inf .occhip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;
  letter-spacing:.02em;background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}

.inf .occhip.mediodia{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);border-color:transparent}

.inf .occhip.tarde{background:color-mix(in srgb,var(--sales) 12%,transparent);color:var(--sales);border-color:transparent}
@media(max-width:760px){
  
.inf .ocfila,.inf .ocejes{grid-template-columns:1fr;gap:8px}
  
.inf .ocdato{justify-content:flex-start}
}



.inf .octdas{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}

.inf .octda{min-height:30px;padding:5px 12px;border:1px solid var(--border);border-radius:999px;
  background:var(--surface);color:var(--muted);font-family:inherit;font-size:12px;
  white-space:nowrap;cursor:pointer;transition:.12s}

.inf .octda:hover{border-color:var(--ink-2);color:var(--ink)}

.inf .octda.on{background:color-mix(in srgb,var(--accent) 9%,transparent);border-color:var(--accent);
  color:var(--accent);font-weight:500}

.inf .ocgridwrap{overflow-x:auto;margin-top:12px}

.inf table.ocgrid{border-collapse:separate;border-spacing:3px;font-size:11.5px;
  font-variant-numeric:tabular-nums}

.inf table.ocgrid th{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:500;padding:2px 4px;white-space:nowrap}

.inf table.ocgrid th.d{text-align:left;padding-right:10px}

.inf table.ocgrid td{width:30px;height:26px;border-radius:5px;background:var(--surface-2);
  cursor:crosshair;transition:transform .08s}

.inf table.ocgrid td:hover{transform:scale(1.18)}
/* A pantalla completa la casilla cabe el número: se deja de depender solo del
   color y se puede leer la cifra sin pasar el ratón, que es lo que hace falta
   cuando alguien está montando un cuadrante de verdad. */

.inf .card.solo table.ocgrid{border-spacing:5px}

.inf .card.solo table.ocgrid td{width:auto;min-width:62px;height:48px;font-size:14px;
  font-weight:600;text-align:center;color:var(--ink);
  font-variant-numeric:tabular-nums}

.inf .card.solo table.ocgrid td::after{content:attr(data-t)}

.inf .card.solo table.ocgrid td.v0::after{content:"\00b7";color:var(--faint)}

.inf .card.solo table.ocgrid td:hover{transform:none;outline:2px solid var(--accent);outline-offset:-2px}

.inf .card.solo table.ocgrid th{font-size:11px}

.inf .card.solo table.ocgrid th.d{font-size:13px;color:var(--ink)}

.inf .card.solo .octda{min-height:36px;padding:7px 15px;font-size:13.5px}

.inf table.ocgrid td.pico{outline:2px solid var(--sales);outline-offset:-2px}

.inf table.ocgrid tr:hover td{outline-color:var(--accent)}

.inf .ocleg{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11px;color:var(--muted)}

.inf .ocleg i{display:inline-block;width:24px;height:12px;border-radius:3px}
@media(max-width:760px){ 
.inf table.ocgrid td{width:32px;height:26px} }

/* ── Incrustado dentro del panel de gestión ──────────────────────────────
   El panel ya pone la marca, las migas y el menú. Repetirlos aquí daba dos
   cabeceras y dos laterales, uno debajo del otro. Se apagan los propios y
   la página se queda solo con su contenido. */

/* Y también su titular: el panel ya pone el título y las migas arriba. Este
   se quedaba con el rótulo de la sección anterior y se leía "Ventas de las
   tiendas" estando en Producción. Dos títulos para una pantalla, sobra uno. */

/* ── El informe dentro del panel ──────────────────────────────────────────
   `.wrap` traía el ancho máximo y el relleno que necesitaba cuando era una
   página suelta. Aquí el margen lo pone `.cuerpo` del panel, así que sin
   anularlo queda un informe estrecho con doble margen.                     */
.inf .wrap{max-width:none;padding:0;margin:0}
.inf .app{display:block}

/* Con un diálogo delante, el fondo no se mueve. La regla original apuntaba a
   `body`, que es quien se desplazaba cuando el informe era una página suelta.
   Aquí el que se desplaza es `.cuerpo`, así que había que apuntarle a él: sin
   esto, al abrir el detalle de un proveedor la lista de detrás seguía
   rodando con la rueda del ratón. */
body.locked .cuerpo,body.sin-scroll .cuerpo{overflow:hidden}

/* ── Imprimir ─────────────────────────────────────────────────────────────
   El panel no tenía reglas de impresión: cuando el informe vivía en un marco
   nunca llegaba a imprimirse desde aquí. Sin esto saldrían en el papel la
   barra superior, el menú lateral y la cabecera de pantalla. Y hay que
   soltar el scroll: el panel congela la página y desplaza por dentro de
   `.cuerpo`, así que solo se imprimía lo que cabía en una pantalla.        */
@media print{
  .top,.lat,.miga,.aviso-toast{display:none!important}
  /* `.hoja` es la pantalla completa del panel: el editor de un escandallo o
     de un plato. Escondiéndola, imprimir con el editor abierto sacaba la
     pantalla de detrás sin avisar. Si está abierta, es lo que se imprime; y
     entonces el velo sobra y lo de debajo también. */
  .velo{display:none!important}
  .hoja.on{position:static!important;max-width:none!important;box-shadow:none!important;border:0!important}
  body:has(.hoja.on) .marco{display:none!important}
  /* `#tope` NO se esconde: es el unico titulo que queda en la pagina desde que
     el informe dejo de traer el suyo, y sin el la hoja impresa empezaba
     directamente por los indicadores, sin decir de que informe es ni de que
     periodo. Estos PDF se llevan al comite. Lo que sobra en papel son sus
     botones, no el titulo. */
  #tope{display:block!important;border-bottom:1px solid #ddd;padding:0 0 12px;margin-bottom:18px}
  #tope .der{display:none!important}
  .marco{display:block!important;height:auto!important;overflow:visible!important}
  .vista{overflow:visible!important}
  .cuerpo{overflow:visible!important;height:auto!important;padding:0!important}
  html,body{height:auto!important;overflow:visible!important;background:#fff!important}
  /* `:not([hidden])` y no `.inf` a secas: el informe se esconde con el
     atributo `hidden`, y un `display:block!important` lo resucitaba. Quien
     imprimiera Carta o Stock se llevaba detrás el panel ejecutivo entero. */
  .inf:not([hidden]){display:block!important}
}


/* ── Lo que el prefijador se llevó por delante ────────────────────────────
   Descartaba el grupo ENTERO cuando una sola parte estaba en la lista del
   armazón. `.lg` iba en el mismo grupo que `.lede p` y `.lgsub`, así que
   cayó con ellas: la leyenda de los gráficos se quedaba sin los cuadraditos
   de color y ponía «Compras Ventas pendiente» a secas.                     */
.inf .lg{display:inline-flex;align-items:center;gap:6px}
.inf .lg i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* Y lo mismo con las tres reglas de impresión que escondían los controles:
   las tres llevaban `.bar` o `.side` dentro del grupo. Sin ellas el PDF salía
   con la barra de filtros, el buscador y un botón «Ampliar» en cada tarjeta,
   que es justo el documento que acaba en el comité.                        */
@media print{
  .inf .filterbar,.inf .search,.inf .ampl,.inf #vParcial,.inf .tools,
  .inf .drawer,.inf .scrim,.inf .tip,.inf .dr-close,.inf .fchip,
  .inf #expPick,.inf .ocsw,.inf .octdas{display:none!important}
}


/* ── Imprimir Ocupación: la rejilla en apaisado ────────────────────────────
   El CEO quiere el PDF de cada tienda para leer la rejilla hora a hora. Son
   diecisiete columnas por siete días, y en A4 vertical no caben: la hoja se
   cortaba por la mitad y llegaba un documento que no se podía usar.

   `@page` en apaisado solo cuando se imprime este informe. Y el lienzo del
   gráfico, que es una imagen de tamaño fijo, se escala al ancho de la hoja
   en vez de recortarse.                                                    */
@media print{
  /* El salto de página dentro de la rejilla la parte en dos y se pierde la
     lectura de la semana entera, que es justo para lo que sirve. */
  /* La rejilla se imprime como tabla, no como gráfico. */
  .inf #ocGrid{display:none!important}
  .inf .solo-papel{display:block!important}
  .inf #ocLista{break-inside:avoid;page-break-inside:avoid}
  .inf .ocplot{height:auto!important;max-height:none!important;overflow:visible!important}
  .inf .ocplot canvas{max-width:100%;display:block}
  /* Los botones de tienda no se imprimen: en el papel ya se sabe de cuál es,
     lo dice el título, y ocupan tres líneas. */
  .inf .octdas{display:none!important}
  /* La rejilla y su lectura ocupan la primera hoja enteras, y lo que venga
     después empieza en la siguiente. Es lo que el CEO va a mirar: si se
     parte, se pierde justo la comparación entre días. */
  .inf .card{break-inside:avoid}
  .inf #ocGrid{min-height:0!important}
  .inf .oclee{break-inside:avoid;margin-top:12px;padding-top:11px}
  /* En papel la explicación va más apretada: con el cuadro ocupando media
     hoja apaisada, el texto a 13,5 px se llevaba la página siguiente. */
  .inf .oclee-como{font-size:10.5px;line-height:1.45;margin-bottom:9px;max-width:none}
  .inf .oclee-i{margin-bottom:5px;gap:9px}
  .inf .oclee-i p{font-size:10.5px;line-height:1.4;max-width:none}
  /* Los indicadores de arriba y los dos avisos no valen una hoja entera. */
  .inf .kpis{break-after:avoid}
}

/* Apaisado para todo lo que se imprima.
   Lo intenté primero solo para Ocupación, con una página con nombre
   (`@page ancha` + `page:ancha`). **Safari lo ignora**: el diálogo seguía
   ofreciendo vertical y la rejilla se cortaba igual. Y como todos nuestros
   informes son tablas anchas —diecisiete columnas la rejilla, seis o siete
   las demás—, el apaisado les viene bien a todos. Una regla, sin
   condiciones y sin depender de qué navegador la lea. */
@page{size:A4 landscape;margin:11mm 9mm}


/* ── La rejilla en tabla, solo para el papel ──────────────────────────────
   En pantalla manda el gráfico, que es interactivo. En papel manda esto:
   texto nítido, que el navegador reparte él y que se lee aunque venga con la
   impresión de fondos desactivada.                                         */
.solo-papel{display:none}

.ocpapel{width:100%;border-collapse:separate;border-spacing:2px;
  font-variant-numeric:tabular-nums;table-layout:auto;margin-top:6px}
.ocpapel th{font-size:8.5px;font-weight:600;color:#3A3F47;
  text-transform:none;letter-spacing:0;background:transparent;
  border:0;padding:2px 1px;white-space:nowrap}
.ocpapel thead th{text-align:center}
.ocpapel tbody th{text-align:right;padding-right:9px;width:78px;font-size:9.5px;
  white-space:nowrap;overflow:visible}
.ocpapel td{text-align:center;font-size:9px;font-weight:600;
  padding:4px 1px;border-radius:3px;border:0;
  background:#F2F4F6;color:#0C0D0F}


/* ── Imprimir Ocupación: solo el cuadro de la tienda elegida ──────────────
   Lo que se lleva a una reunión de personal es la rejilla de UNA tienda y lo
   que dice. Los indicadores de cabecera son de la cadena entera, la curva es
   otra lectura, y los avisos ya se han leído en pantalla. En el papel sobran
   los tres y hacían que un documento de una hoja ocupara tres.             */
@media print{
  body[data-print="ocupacion"] .inf #ocKpis,
  body[data-print="ocupacion"] .inf #ocAviso,
  body[data-print="ocupacion"] .inf #ocCurva,
  body[data-print="ocupacion"] .inf .foot{display:none!important}
  body[data-print="ocupacion"] .inf #ocCuadro{border:0;box-shadow:none;padding:0}
}

/* ── La cabecera de la tabla se queda arriba ──────────────────────────────
   En Ventas la lista completa son 786 productos. A partir de la fila treinta
   los títulos se han ido y quedan seis columnas de números sin nombre: no hay
   forma de saber cuál es la cantidad, cuál el precio medio y cuál el importe
   sin volver a subir del todo.

   `top:0` se agarra al contenedor que desplaza, que es siempre `#inf-raiz`:
   `.marco` mide exactamente el alto de la ventana y recorta, así que la única
   barra de desplazamiento de la página es esa. La cabecera queda pegada justo
   debajo del título del informe.

   **`border-collapse:separate` no es un capricho.** Con `collapse`, Safari
   dibuja la cabecera pegajosa con retraso: mientras se arrastra el dedo, la
   fila queda flotando por detrás del desplazamiento y asoma media fila de
   datos por encima. Parece que la cabecera se ha soltado de la tabla. Con
   `separate` y espaciado cero el aspecto es idéntico —los bordes ya estaban
   en las celdas, no en la tabla— y el defecto desaparece.

   Por lo mismo el borde inferior va en `box-shadow` y no en `border-bottom`:
   pertenecería a la tabla y se quedaría atrás con las filas.               */
.inf .mtab,
.inf .ptable{border-collapse:separate;border-spacing:0}

.inf .mtab thead th,
.inf .ptable thead th{position:sticky;top:0;z-index:5;
  background:var(--surface);background-clip:padding-box;border-bottom:0;
  /* La línea de abajo, y una sombra corta que la despega de la lista: sin
     ella la cabecera y la primera fila son dos rayas iguales y no se
     entiende cuál manda. */
  /* Tres sombras. La de arriba es un rectángulo macizo del color de la
     tarjeta: tapa cualquier tira de fila que asome por encima de la cabecera
     mientras se desplaza, que es lo que la hacía parecer despegada. No se ve
     cuando la tabla está arriba del todo, porque pinta blanco sobre blanco. */
  box-shadow:0 -26px 0 var(--surface),
             inset 0 -1px 0 var(--border),
             0 7px 12px -10px rgba(12,13,15,.34)}
/* Pegada a la fila siguiente no se lee: necesita aire por arriba, que antes
   no hacía falta porque la separaba el hueco de la tarjeta. */
.inf .mtab thead th{padding:10px}

@media print{
  /* En papel no hay nada a lo que pegarse, y `thead` ya se repite solo en
     cada hoja por `display:table-header-group`. */
  .inf .mtab thead th,
  .inf .ptable thead th{position:static;box-shadow:none;
    border-bottom:1px solid var(--border)}
}


/* ── Ordenar por la columna que haga falta ────────────────────────────────
   La flecha solo aparece en la columna por la que se está ordenando. Poner
   una flecha gris en todas, como hacen muchas tablas, llena la cabecera de
   símbolos y no dice nada: lo que hay que ver de un vistazo es cuál manda. */
.inf .mtab th.ord{cursor:pointer;user-select:none;-webkit-user-select:none;
  transition:color .12s}

.inf .mtab th.ord:hover{color:var(--accent)}

.inf .mtab th.ord.on{color:var(--ink)}

.inf .mtab th.ord.on::after{content:"▼";font-size:8px;margin-left:5px;
  vertical-align:1px;color:var(--accent)}

.inf .mtab th.ord.on.asc::after{content:"▲"}

/* ── El aviso que no se puede pasar por alto ──────────────────────────────
   `.note` ya va en ámbar suave y sirve para matizar: «esto es un mes en
   curso», «esta cifra son tickets, no personas». Cuando lo que hay que decir
   es «no actives esto todavía», ese tono se lee como un matiz más y se pasa
   de largo. Esta variante es la misma nota con el ámbar subido y una banda a
   la izquierda: se distingue de un vistazo sin inventar un componente nuevo. */
.inf .note.aviso{background:color-mix(in srgb,var(--warn,#d08700) 20%,transparent);
  border-color:color-mix(in srgb,var(--warn,#d08700) 52%,transparent);
  border-left:4px solid var(--warn,#d08700);color:var(--ink)}

.inf .note.aviso b{color:var(--ink);font-weight:700}

/* ── Menús facturados ─────────────────────────────────────────────────────
   Sin componentes nuevos: KPIs, tarjetas, tabla .mtab e interruptor .ocsw de
   la casa. Solo lo propio: la barra bajo el total de cada tienda (translúcida
   y sólida al pasar el ratón, como las barras del resto de informes), la fila
   de total y el gris de lo que se enseña aparte. */
.inf #mnTabla td.mnt{min-width:150px}
.inf #mnTabla th.aparte,.inf #mnTabla td.aparte{color:var(--ink-2)}
.inf #mnTabla td.cero{color:var(--muted)}
.inf .mnbar{height:4px;border-radius:2px;background:var(--border-2);margin-top:7px;overflow:hidden}
.inf .mnbar i{display:block;height:100%;border-radius:2px;
  background:color-mix(in srgb,var(--accent) 55%,transparent);transition:background .12s;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.inf #mnTabla tbody tr:hover .mnbar i{background:var(--accent)}
.inf tr.mntot td{font-weight:600;border-top:2px solid var(--ink);border-bottom:none;padding-top:13px}
.inf .mnantes{color:var(--muted);font-size:12px;margin-top:2px}
.inf #mnNotas{line-height:1.7}