/* ============================================================================
   Demo interactiva de Farmapilot — hoja de estilo ESCRITA DE CERO para la web.
   No contiene nada del programa: solo copia su ASPECTO (la paleta del estilo
   «Saona», el menú de la izquierda con las hojas numeradas, la barra de arriba
   con el buscador y las tarjetas centradas) para que la demo se vea igual que
   lo que tendrá la farmacia.
   ========================================================================== */

:root[data-tema="claro"] {
  --fondo:#F5FAF8;
  --fondoGrad:linear-gradient(180deg,#EEF7F4 0%, #F5FAF8 240px);
  --papel:#FFFFFF; --panel:#FFFFFF; --tinta:#0D2B36; --tinta2:#33566A;
  --acento:#10796F; --acento2:#2AB4A7; --menta:#DDF3EE; --borde:#D8E8E4;
  --ambar:#946608; --ambarbg:#FCF3DC; --rojo:#B9423E; --rojobg:#FBE9E8;
  --okbg:#E2F6F1; --coral:#e85c50; --coralTx:#C23A23;
  --sombra:0 1px 2px rgba(13,43,54,.05), 0 8px 24px rgba(13,43,54,.07);
  --bordePanel:#C4DAD4; --sombraPanel:0 1px 2px rgba(13,43,54,.06), 0 10px 26px rgba(13,43,54,.11);
  --lateralBg:#FFFFFF; --lateralBorde:#D8E8E4;
  --topbarBg:#FFFFFF; --thead:#DDF3EE; --theadTx:#0D2B36; --zebra:#FAFDFC; --hoverRow:#DDF3EE;
  --bar1:#149A8D; --bar2:#2AB4A7; --bar3:#8ED4CB; --bar4:#BFE5DE; --gaugeTrack:#EAF4F1;
  --semMalo:#F6AE94; --semMedio:#F5DCA8; --semBueno:#BFE3C6;
  --axis:#E3EEEA; --valTx:#0D2B36; --chipBg:#FFFFFF; --chipOn:#DDF3EE;
  --cifraKpi:#10796F;          /* el número grande de las tarjetas */
  --rotuloKpi:#33566A;
  --tabOnBg:linear-gradient(135deg,#1F837A,#118479); --tabOnTx:#fff;
  --diagBg:linear-gradient(135deg,#0D2B36,#16465A); --diagTx:#EAF6F4; --diagLbl:#99E3DD;
  --warnTx:#946608; --badTx:#B9423E; --okTx:#2E7D32;
  --mostaza:#C98A0B;           /* cifras sobre las gráficas — norma de la casa */
  --gris:#9AA9AE;              /* año pasado */
  --paso1:#118479; --paso2:#9D6C09; --paso3:#D04633; --pasoTx:#FFFFFF;
}

:root[data-tema="oscuro"] {
  --fondo:#0E3140;
  --fondoGrad:linear-gradient(180deg,#0B2634 0%, #0E3140 420px);
  --papel:#15565E;
  --panel:linear-gradient(180deg, rgba(33,114,122,.85), rgba(21,86,94,.92));
  --tinta:#EAF6F4; --tinta2:#A3E6E0;
  --acento:#46D4C7; --acento2:#85F6D4; --menta:rgba(19,65,61,0.92); --borde:#46869A;
  --ambar:#F4D25A; --ambarbg:rgba(69,58,20,0.97); --rojo:#FB8281; --rojobg:rgba(109,33,32,0.92);
  --okbg:rgba(20,67,63,0.97); --coral:#ff6f61; --coralTx:#FF8F76;
  --sombra:0 10px 30px rgba(4,20,28,.45);
  --bordePanel:#3E7E8C; --sombraPanel:0 12px 30px rgba(4,20,28,.5);
  --lateralBg:linear-gradient(180deg, rgba(12,44,57,.96), rgba(11,38,50,.98));
  --lateralBorde:rgba(70,134,154,.45);
  --topbarBg:linear-gradient(90deg, rgba(10,37,48,.92), rgba(18,59,74,.85));
  --thead:linear-gradient(180deg,#1B4A5D,#16465A); --theadTx:#99E3DD;
  --zebra:transparent; --hoverRow:rgba(18,62,58,0.92);
  --bar1:#2AB4A7; --bar2:#2AB4A7; --bar3:#99E3DD; --bar4:#3A7288; --gaugeTrack:#24576B;
  --semMalo:#D98E76; --semMedio:#CFAE6E; --semBueno:#8FC49B;
  --axis:rgba(153,227,221,.22); --valTx:#85F6D4;
  --chipBg:rgba(17,69,76,0.95); --chipOn:rgba(26,105,98,0.95);
  --cifraKpi:#2AB4A7;
  --rotuloKpi:#A3E6E0;
  --tabOnBg:linear-gradient(180deg, rgba(42,180,167,.20), rgba(42,180,167,.08));
  --tabOnTx:#85F6D4;
  --diagBg:linear-gradient(180deg, rgba(43,99,121,.92), rgba(36,87,107,.88));
  --diagTx:#EAF6F4; --diagLbl:#99E3DD;
  --warnTx:#F4D25A; --badTx:#FB8281; --okTx:#6BCB77;
  --mostaza:#F4D25A;
  --gris:#7C98A4;
  --paso1:#2AB4A7; --paso2:#F4D25A; --paso3:#FF8F76; --pasoTx:#0E3140;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  background:var(--fondo); background-image:var(--fondoGrad); background-attachment:fixed;
  color:var(--tinta); min-height:100vh;
  font-family:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size:14px; line-height:1.45;
}

.marco { display:flex; align-items:stretch; min-height:100vh; }

/* ======================= columna de la izquierda ========================= */
.lateral {
  width:290px; flex:0 0 290px; background:var(--lateralBg);
  border-right:1px solid var(--lateralBorde); padding-bottom:20px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.pastilla-inicio {
  display:inline-block; border:1px solid var(--acento); color:var(--tinta);
  background:var(--chipBg); border-radius:999px; padding:5px 14px;
  font-weight:700; font-size:13px; letter-spacing:.3px;
}
.lat-rotulo {
  margin-top:10px; padding:8px 14px; font-size:10.5px; font-weight:800;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--tinta2);
  border-top:1px solid var(--lateralBorde); border-bottom:1px solid var(--lateralBorde);
}

/* UNA lista: el panel y, debajo, sus hojas. */
.menu { display:flex; flex-direction:column; }

.pieza {
  display:flex; align-items:center; gap:9px; text-align:left; width:100%;
  background:transparent; border:0; border-bottom:1px solid var(--lateralBorde);
  border-left:4px solid transparent; color:var(--tinta);
  padding:12px 14px; cursor:pointer; font-size:14px; font-weight:700;
}
.pieza .flecha { color:var(--tinta2); font-size:11px; width:10px; flex:0 0 auto; }
.pieza .cuantas {
  margin-left:auto; font-size:10.5px; font-weight:700; color:var(--tinta2);
  background:var(--chipBg); border:1px solid var(--borde); border-radius:999px; padding:0 7px;
}
.pieza:hover { background:var(--menta); }
.pieza[aria-selected="true"] {
  background:var(--tabOnBg); border-left-color:var(--acento2); color:var(--tabOnTx);
}
.pieza[aria-selected="true"] .flecha { color:var(--acento2); }

.hoja {
  display:flex; align-items:center; gap:10px; text-align:left; width:100%;
  background:transparent; border:0; border-bottom:1px solid var(--lateralBorde);
  border-left:4px solid transparent; color:var(--tinta);
  padding:10px 14px 10px 30px; cursor:pointer; font-size:13.5px; font-weight:600;
}
.hoja:hover { background:var(--menta); }
.hoja[aria-selected="true"] { background:var(--chipOn); border-left-color:var(--acento2); }
.hoja .num {
  flex:0 0 auto; width:23px; height:23px; border-radius:50%;
  background:var(--acento2); color:#08303A; font-weight:800; font-size:12px;
  display:flex; align-items:center; justify-content:center;
}

/* ============================ parte principal ============================= */
.principal { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

.topbar {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  background:var(--topbarBg); border-bottom:1px solid var(--borde);
  position:sticky; top:0; z-index:40;
}
.pastilla-inicio.grande { padding:6px 16px; font-size:13.5px; }
.bola-play, .bola-pieza {
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:800;
}
.bola-play { background:var(--acento2); color:#08303A; font-size:15px; }
.bola-pieza { background:var(--acento); color:#06282F; font-size:15px; }
.titulo-pieza { font-size:16px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; }
.chapa-demo {
  background:var(--ambarbg); color:var(--warnTx); border:1px solid var(--ambar);
  border-radius:999px; padding:2px 10px; font-size:10.5px; font-weight:800; letter-spacing:.5px;
  white-space:nowrap; cursor:help;
}
.buscador {
  flex:1 1 auto; min-width:90px; max-width:620px; background:var(--chipBg);
  border:1px solid var(--borde); border-radius:999px; padding:7px 16px;
  color:var(--tinta2); font-size:13px;
}
.btn-tema {
  background:var(--chipBg); color:var(--tinta); border:1px solid var(--borde);
  border-radius:999px; padding:5px 12px; cursor:pointer; font-size:12px; font-weight:600;
}
.btn-tema:hover { border-color:var(--acento2); }

/* barra de acciones: dos botones y nada más */
.barra-filtros { padding:10px 16px 0; }
.barra-botones { display:flex; gap:8px; flex-wrap:wrap; }
.barra-botones .bot { padding:7px 15px; font-size:12.5px; font-weight:700; }
.nota-filtros { color:var(--tinta2); font-size:11.5px; font-style:italic; }
.modal ul { margin:8px 0; padding-left:20px; }
.modal li { margin:5px 0; font-size:14px; line-height:1.5; }
.modal p { font-size:14px; line-height:1.55; }

.lienzo { padding:14px 16px 30px; flex:1 1 auto; }

/* ============================== rejillas ================================= */
.fila { display:grid; gap:12px; margin-bottom:14px; }
/* 🪤 Sin esto, una tabla ancha estira su celda de la rejilla y la página entera
   se desplaza de lado en el móvil: los hijos de un grid traen `min-width:auto`. */
.fila > *, .panel { min-width:0; }
.fila > div > .kpi { height:100%; }
.c1 { grid-template-columns:1fr; }
.c2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.c3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.c4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.c5 { grid-template-columns:repeat(5, minmax(0,1fr)); }
.c6 { grid-template-columns:repeat(6, minmax(0,1fr)); }
@media (max-width:1320px){ .c5,.c6 { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:1080px){ .c4 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:860px){ .c2,.c3,.c4,.c5,.c6 { grid-template-columns:1fr; } }

/* ============ tarjetas de cifra: centradas, como en el programa =========== */
.kpi {
  background:var(--panel); border:1px solid var(--bordePanel); border-radius:16px;
  padding:14px 12px; box-shadow:var(--sombraPanel); min-height:104px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  text-align:center;
}
.kpi .rot {
  font-size:11.5px; font-weight:800; letter-spacing:.8px; color:var(--rotuloKpi);
  text-transform:uppercase;
}
/* La cifra nunca se parte (el «€» saltaba solo a la línea de abajo) y encoge
   sola cuando la tarjeta es estrecha. */
.kpi .val {
  font-size:27px; font-weight:800; color:var(--cifraKpi);
  line-height:1.15; white-space:nowrap;
  display:block; width:100%; overflow:hidden;   /* FP.ajustarCifras la encoge hasta que cabe */
}
.kpi .pie { font-size:11px; color:var(--tinta2); }
/* Las tarjetas de TEXTO (veredictos, diagnósticos) sí parten línea: si no, la
   frase se cortaba («Demasiado Stock Obsol…»). */
.kpi.texto .val, .kpi.diag .val { font-size:18px; white-space:normal; }
.kpi.texto .val { color:var(--tinta); }
.kpi.bueno .val { color:var(--okTx); } .kpi.medio .val { color:var(--warnTx); } .kpi.malo .val { color:var(--badTx); }
.kpi.diag { background:var(--diagBg); border-color:var(--coral); }
.kpi.diag .rot { color:var(--diagLbl); } .kpi.diag .val { color:var(--diagTx); }

/* ================================ paneles ================================ */
.panel {
  background:var(--panel); border:1px solid var(--bordePanel); border-radius:16px;
  box-shadow:var(--sombraPanel); overflow:hidden;
}
.panel > .cab {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 13px 6px;
}
.panel > .cab h3 {
  margin:0; font-size:13px; font-weight:800; letter-spacing:.9px; text-transform:uppercase;
  text-align:center; color:var(--tinta);
}
.panel > .cuerpo { padding:4px 12px 13px; }
.info {
  border:1px solid var(--borde); background:var(--chipBg); color:var(--tinta2);
  width:19px; height:19px; border-radius:50%; font-size:11px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; cursor:help; flex:0 0 auto;
}
.info:hover { border-color:var(--acento2); color:var(--acento); }

/* ================================ gráficas =============================== */
.grafica { width:100%; height:280px; }
.grafica.alta { height:340px; }
.grafica.baja { height:215px; }

/* ================================= tablas ================================ */
.tabla-caja { overflow-x:auto; }
table.t { border-collapse:collapse; width:100%; font-size:12.5px; }
table.t thead th {
  background:var(--thead); color:var(--theadTx); text-align:left; padding:8px 9px;
  position:sticky; top:0; font-size:11px; letter-spacing:.4px; text-transform:uppercase;
  border-bottom:1px solid var(--borde); white-space:nowrap;
}
table.t tbody td { padding:6px 9px; border-bottom:1px solid var(--borde); white-space:nowrap; }
table.t tbody tr:nth-child(even) { background:var(--zebra); }
table.t tbody tr:hover { background:var(--hoverRow); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.sem { border-radius:6px; padding:1px 7px; font-weight:700; display:inline-block; }
.sem.bueno { background:var(--semBueno); color:#14532d; }
.sem.medio { background:var(--semMedio); color:#7a4f04; }
.sem.malo  { background:var(--semMalo);  color:#7f1d1d; }
.pill { border-radius:999px; padding:1px 9px; font-size:11px; font-weight:700; display:inline-block;
        background:var(--chipOn); color:var(--tinta); border:1px solid var(--borde); }
.pill.rojo { background:var(--rojobg); color:var(--badTx); border-color:var(--rojo); }
.pill.ambar { background:var(--ambarbg); color:var(--warnTx); border-color:var(--ambar); }
.tr-rojo td { background:var(--rojobg) !important; }
.tr-ambar td { background:var(--ambarbg) !important; }
.acciones { display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; justify-content:center; }
.bot {
  border:1px solid var(--borde); background:var(--chipBg); color:var(--tinta);
  border-radius:999px; padding:5px 13px; font-size:12px; font-weight:600; cursor:pointer;
}
.bot:hover { border-color:var(--acento2); }
.bot.cta { background:var(--acento2); color:#08303A; border-color:var(--acento2); font-weight:800; }

/* ========================== pasos / protocolos =========================== */
.pasos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
@media (max-width:860px){ .pasos { grid-template-columns:1fr; } }
.paso { border-radius:14px; padding:11px 12px; color:var(--pasoTx); }
.paso h4 { margin:0 0 6px; font-size:12.5px; text-transform:uppercase; letter-spacing:.5px; text-align:center; }
.paso.p1 { background:var(--paso1); } .paso.p2 { background:var(--paso2); } .paso.p3 { background:var(--paso3); }
.capsula {
  display:block; background:rgba(255,255,255,.92); color:#123; border-radius:999px;
  padding:4px 12px; font-size:11.5px; font-weight:700; margin:5px 0; text-align:center;
}

/* ================================= avisos ================================ */
.aviso {
  display:block; margin:0 0 12px; padding:.5em .9em; border-radius:10px;
  background:var(--ambarbg); color:var(--tinta); border-left:4px solid var(--ambar);
  font-weight:700; font-size:.95rem;
}

/* ============================ ventana emergente ========================== */
.modal-fondo {
  position:fixed; inset:0; background:rgba(4,20,28,.6); display:flex;
  align-items:center; justify-content:center; padding:20px; z-index:60;
}
.modal {
  background:var(--papel); color:var(--tinta); border:1px solid var(--bordePanel);
  border-radius:16px; box-shadow:var(--sombraPanel); max-width:880px; width:100%;
  max-height:86vh; overflow:auto;
}
.modal .cab { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 15px; border-bottom:1px solid var(--borde); }
.modal .cab h3 { margin:0; font-size:15px; }
.modal .cuerpo { padding:14px 16px; }
.cerrar { background:none; border:none; color:var(--tinta2); font-size:20px; cursor:pointer; line-height:1; }

/* =================================== pie ================================= */
.pie { border-top:1px solid var(--borde); padding:14px 16px 26px; color:var(--tinta2); font-size:12px; }
.pie p { max-width:1000px; }

/* ====================== barra del Copiloto (retrato) ===================== */
.barra-agente {
  display:flex; align-items:center; gap:12px; padding:9px 16px;
  background:var(--topbarBg); border-top:1px solid var(--borde);
  position:sticky; bottom:0; z-index:30;
}
.bola-agente {
  width:34px; height:34px; border-radius:50%; background:var(--acento2);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.agente-nombre { font-weight:700; font-size:13.5px; white-space:nowrap; }
.agente-caja {
  flex:1 1 auto; min-width:0; background:var(--chipBg); border:1px solid var(--borde);
  border-radius:999px; padding:7px 16px; color:var(--tinta2); font-size:12.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.agente-iconos { color:var(--tinta2); font-size:14px; letter-spacing:4px; white-space:nowrap; }
@media (max-width:900px) { .agente-nombre, .agente-iconos { display:none; } }

/* ============================ informes de IA ============================= */
/* El documento imita al «Crear informe» del programa: portada con banda de color y logo, tarjetas,
   hallazgos, semáforo, comparativa, impacto en euros y plan de acción por fases. */
.hoja-informe { max-width:940px; margin:0 auto; }
.crear-informe {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom:14px;
}
.crear-informe .nota-filtros { margin:0; }
.documento {
  background:var(--panel); border:1px solid var(--bordePanel); border-radius:16px;
  box-shadow:var(--sombraPanel); overflow:hidden; padding:0 30px 26px;
}
.doc-portada {
  margin:0 -30px 18px; padding:22px 30px 18px; color:#fff;
  background:linear-gradient(135deg,#118479,#10796F 60%,#0D5E57);
}
.doc-marca { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.6px; opacity:.95; }
.doc-portada h2 { margin:6px 0 10px; font-size:25px; line-height:1.2; color:#fff; }
.doc-portada p { margin:2px 0; font-size:13px; opacity:.92; }
.doc-subtitulo { margin:0 0 6px; font-size:15.5px; font-weight:700; color:var(--tinta2); }
.documento ul.resumen { margin:8px 0 4px; padding-left:20px; }
.documento ul.resumen li { margin:5px 0; font-size:14px; line-height:1.5; }
.doc-tarjetas { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:18px 0; }
.doc-tarjeta {
  display:flex; flex-direction:column; gap:4px; padding:11px 13px; border-radius:12px;
  background:var(--chipBg); border:1px solid var(--borde);
}
.doc-tarjeta .et { font-size:11px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--tinta2); }
.doc-tarjeta .va { font-size:20px; font-weight:800; line-height:1.2; color:var(--cifraKpi); white-space:nowrap; }
.doc-bloque { margin:22px 0 0; padding-top:14px; border-top:1px solid var(--borde); }
.doc-bloque h3 { margin:0 0 8px; font-size:15px; text-transform:uppercase; letter-spacing:.8px; }
.doc-bloque p { margin:6px 0; font-size:14px; line-height:1.55; }
.hallazgo { margin:12px 0; padding:11px 13px; border-radius:10px; border:1px solid var(--borde); background:var(--chipBg); }
.hallazgo h4 { margin:0 0 6px; font-size:14.5px; color:var(--acento); }
.hallazgo .impacto { font-size:17px; font-weight:800; margin:2px 0 6px; }
.hallazgo p { margin:4px 0; font-size:13.5px; line-height:1.5; }
.plan-fase { margin:12px 0; padding:11px 13px; border-radius:12px; border-left:5px solid var(--paso1); background:var(--chipBg); }
.plan-fase.f2 { border-left-color:var(--paso2); } .plan-fase.f3 { border-left-color:var(--paso3); }
.plan-fase h4 { margin:0 0 6px; font-size:13.5px; text-transform:uppercase; letter-spacing:.6px; }
.plan-fase ul { margin:4px 0 8px; padding-left:18px; font-size:13.5px; line-height:1.5; }
.plan-fase .capsula { display:inline-block; margin:3px 4px 0 0; background:var(--acento2); color:#08303A; }
.doc-pie { margin-top:24px; padding-top:12px; border-top:1px solid var(--borde); font-size:11.5px; color:var(--tinta2); }

/* ============== hojas en gris: se ven en la lista, pero con candado ============== */
.hoja.bloqueada { color:var(--tinta2); opacity:.62; }
.hoja.bloqueada .num { background:var(--gris); color:#fff; }
.hoja.bloqueada .candado { margin-left:auto; font-size:12px; }
.bloqueo { position:relative; max-width:940px; margin:0 auto; }
.bloqueo-fondo {
  filter:grayscale(1) blur(3px); opacity:.45; pointer-events:none; user-select:none;
  max-height:560px; overflow:hidden;
}
.bloqueo-aviso {
  position:absolute; left:50%; top:120px; transform:translateX(-50%);
  width:min(460px, calc(100% - 24px)); text-align:center;
  background:var(--papel); color:var(--tinta); border:1px solid var(--bordePanel);
  border-radius:16px; box-shadow:var(--sombraPanel); padding:20px 22px;
}
.bloqueo-aviso .icono { font-size:26px; }
.bloqueo-aviso h3 { margin:6px 0 8px; font-size:17px; }
.bloqueo-aviso p { margin:0 0 12px; font-size:13.5px; line-height:1.5; color:var(--tinta2); }
.bloqueo-aviso a { color:var(--acento); font-weight:700; text-decoration:none; font-size:13.5px; }
.bloqueo-aviso a:hover { text-decoration:underline; }

/* ================================= móvil ================================= */
@media (max-width:900px) {
  /* El menú de la izquierda pasa a ser una tira arriba, como en una tableta. */
  .marco { flex-direction:column; }
  .lateral { width:auto; flex:0 0 auto; height:auto; position:static; border-right:0;
             border-bottom:1px solid var(--lateralBorde); padding-bottom:0; }
  /* En pantalla estrecha la misma lista se tumba: los paneles y, seguidas, las hojas del abierto.
     Con tope de alto para que el contenido no empiece a media pantalla. */
  .menu {
    flex-direction:row; flex-wrap:wrap; gap:4px; padding:8px 12px;
    max-height:32vh; overflow-y:auto;
  }
  .hoja, .pieza {
    width:auto; border:1px solid var(--borde); border-radius:999px; white-space:nowrap;
    padding:6px 11px; font-size:12.5px;
  }
  .hoja { padding-left:8px; }
  .pieza .cuantas { margin-left:4px; }
  .pieza[aria-selected="true"], .hoja[aria-selected="true"] { border-color:var(--acento2); }
  .lat-rotulo { margin-top:0; }
  .topbar { flex-wrap:wrap; gap:8px; padding:8px 12px; }
  .buscador, .pastilla-inicio.grande, .bola-play { display:none; }
  .lienzo, .barra-filtros, .pie { padding-left:12px; padding-right:12px; }
  .kpi .val { font-size:23px; }
  .documento { padding:0 16px 20px; }
  .doc-portada { margin:0 -16px 16px; padding:18px 16px 14px; }
  .doc-portada h2 { font-size:21px; }
  .bloqueo-aviso { top:70px; }
}