/* ============================================================
   Adiasoft · DK — kit de diseño de tableros (60.ª · 2026-08-25)
   Modelo: propuestas_externas/*.png — tarjetas con banda superior de
   color, icono en cuadro, cifra grande, subtexto coloreado y fórmula;
   resúmenes por estado en cajas de color; stepper del flujo comercial;
   tarjetas de acción; cabeceras de tabla oscuras; tiles de resumen.
   Todo con ámbito .dk-* para no pisar style.css.
   ============================================================ */
:root{--dk-navy:#1f2f56;--dk-azul:#2f6fd6;--dk-teal:#0a8f9c;--dk-verde:#178f4e;--dk-naranja:#e07b1a;--dk-rojo:#d03b3b;--dk-morado:#7c4dcc;--dk-ambar:#c98500;--dk-cielo:#1e9bd7}
.dk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:0 0 14px}
.dk-card{position:relative;display:block;padding:14px 16px 12px;border-radius:14px;background:var(--panel,#fff);border:1px solid var(--line,#e3e8ef);border-top:4px solid var(--dk,var(--dk-navy));box-shadow:0 6px 18px rgba(6,24,54,.06);text-decoration:none;color:inherit;min-height:104px}
a.dk-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(6,24,54,.12)}
.dk-card .dk-ico{position:absolute;top:12px;left:16px;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:1.05rem;background:var(--dk,var(--dk-navy));color:#fff}
.dk-card .dk-lbl{display:block;margin-left:44px;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5b6b7c);min-height:16px}
.dk-card .dk-num{display:block;margin-top:10px;font:800 1.45rem/1.1 var(--display,inherit);color:var(--navy,#12233d)}
.dk-card .dk-sub{display:block;margin-top:4px;font-size:.74rem;font-weight:700;color:var(--dk,var(--dk-navy))}
.dk-card .dk-formula{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line,#e3e8ef);font-size:.66rem;color:var(--dim,#708397)}
.dk-card .dk-ir{position:absolute;right:12px;bottom:8px;font-size:.62rem;font-weight:800;color:var(--dk);opacity:0;transition:.15s}
a.dk-card:hover .dk-ir{opacity:1}
[data-theme="dark"] .dk-card{background:#14213a;border-color:#27395a}
[data-theme="dark"] .dk-card .dk-num{color:#dbe6f7}
/* tonos */
.dk-navy{--dk:var(--dk-navy)}.dk-azul{--dk:var(--dk-azul)}.dk-teal{--dk:var(--dk-teal)}.dk-verde{--dk:var(--dk-verde)}.dk-naranja{--dk:var(--dk-naranja)}.dk-rojo{--dk:var(--dk-rojo)}.dk-morado{--dk:var(--dk-morado)}.dk-ambar{--dk:var(--dk-ambar)}.dk-cielo{--dk:var(--dk-cielo)}
.dk-card .dk-num.ok{color:var(--dk-verde)}.dk-card .dk-num.warn{color:var(--dk-naranja)}.dk-card .dk-num.err{color:var(--dk-rojo)}.dk-card .dk-num.morado{color:var(--dk-morado)}

/* ── Resumen por estado (pagadas · parciales · vencidas · pendientes) ── */
.dk-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 14px}
.dk-sum>div,.dk-sum>a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid;text-decoration:none;color:inherit}
.dk-sum .dk-n{font:800 1.4rem/1 var(--display,inherit)}
.dk-sum .dk-t{display:block;font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-top:3px}
.dk-sum .dk-ok{background:#ecf9f1;border-color:#bfe8cf;color:#178f4e}
.dk-sum .dk-warn{background:#fff4e8;border-color:#f7d5b0;color:#c2621a}
.dk-sum .dk-err{background:#fdeeee;border-color:#f5c4c4;color:#c0392b}
.dk-sum .dk-pend{background:#fff9e3;border-color:#f3e4a6;color:#a56b00}
.dk-sum .dk-info{background:#eaf3ff;border-color:#c5dbf7;color:#2f6fd6}
[data-theme="dark"] .dk-sum>div,[data-theme="dark"] .dk-sum>a{background:#14213a!important;border-color:#27395a!important}

/* ── Stepper del flujo comercial ── */
.dk-steps{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;padding:14px 8px 6px;overflow-x:auto}
.dk-step{flex:1;min-width:110px;text-align:center;position:relative;text-decoration:none;color:inherit}
.dk-step .dk-step-ico{width:54px;height:54px;margin:0 auto 6px;border-radius:50%;display:grid;place-items:center;font-size:1.25rem;background:#e6ebf2;color:#8b98ab;border:3px solid transparent;transition:.15s}
.dk-step b{display:block;font-size:.8rem}.dk-step small{display:block;font-size:.68rem;font-weight:700;color:var(--muted)}
.dk-step.done .dk-step-ico{background:#178f4e;color:#fff}.dk-step.done small{color:#178f4e}
.dk-step.now .dk-step-ico{background:#2f6fd6;color:#fff;box-shadow:0 0 0 5px rgba(47,111,214,.18)}.dk-step.now small{color:#2f6fd6}
.dk-step.lost .dk-step-ico{background:#d03b3b;color:#fff}.dk-step.lost small{color:#d03b3b}
.dk-step:not(:last-child)::after{content:"›";position:absolute;right:-8px;top:14px;font-size:1.4rem;color:#c3ccd8}
a.dk-step:hover .dk-step-ico{transform:scale(1.06)}
.dk-step.todo{opacity:.7}

/* ── Tarjetas de acción (resultado) ── */
.dk-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.dk-action{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2,#f6f8fb)}
.dk-action .dk-a-ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:1.2rem;color:#fff;background:var(--dk,var(--dk-azul))}
.dk-action b{font-size:.74rem;letter-spacing:.04em;text-transform:uppercase}
.dk-action small{font-size:.7rem;color:var(--muted);line-height:1.35}
.dk-action .btn{margin-top:auto;width:100%;justify-content:center;background:var(--dk,var(--dk-azul));border-color:var(--dk,var(--dk-azul));color:#fff}
.dk-action form{width:100%;margin-top:auto}

/* ── Tablas con cabecera oscura y tiles de resumen ── */
.dk-thead thead th{background:#1f3a63;color:#fff;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;border-color:#2d4d7c}
.dk-thead thead th:first-child{border-radius:10px 0 0 0}.dk-thead thead th:last-child{border-radius:0 10px 0 0}
.dk-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:12px}
.dk-tile{padding:16px;border-radius:12px;text-align:center;color:#fff;background:var(--dk,#1f2f56)}
.dk-tile span{display:block;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.dk-tile b{display:block;margin-top:4px;font:800 1.5rem/1.1 var(--display,inherit)}
.dk-2col{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
@media(max-width:900px){.dk-2col{grid-template-columns:1fr}}
.dk-side{padding:14px 16px;border-radius:14px;background:var(--panel,#fff);border:1px solid var(--line)}
.dk-side h4{margin:0 0 10px;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.dk-side .dk-kv{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px dashed var(--line);font-size:.82rem}
.dk-side .dk-kv:last-of-type{border-bottom:0}
.dk-side .dk-kv b.ok{color:#178f4e}.dk-side .dk-kv b.warn{color:#c2621a}.dk-side .dk-kv b.err{color:#c0392b}.dk-side .dk-kv b.morado{color:#7c4dcc}
.dk-side .dk-total{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:2px solid var(--line);font-weight:800}
.dk-side .dk-total b{color:#c0392b;font-size:1.1rem}
.dk-btns{display:grid;gap:8px;margin-top:10px}
.dk-btns .btn{justify-content:center;width:100%}
.dk-btn-verde{background:#178f4e!important;border-color:#178f4e!important;color:#fff!important}
.dk-btn-wa{background:#25d366!important;border-color:#25d366!important;color:#fff!important}

/* ── Tablero: las KPI existentes adoptan el modelo (icono en cuadro, banda arriba) ── */
.tab-kpis .kpi{border-left:1px solid var(--line)!important;border-top:4px solid var(--kpi-tono,var(--line));border-radius:14px;padding-top:14px}
.tab-kpis .kpi .kpi-ico{top:10px;right:auto;left:14px;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--kpi-tono,#5b6b85)!important;color:#fff;opacity:1}
.tab-kpis .kpi .lbl{margin-left:44px;min-height:16px;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase}
.tab-kpis .kpi .num{margin-top:8px}

/* ── Kanban CRM, minimalista ── */
.crm-board .crm-col{background:var(--bg-2,#f4f6fa)!important;border:0!important;box-shadow:none!important;border-radius:14px}
.crm-board .crm-col h3{font-size:.8rem!important;letter-spacing:.04em;text-transform:uppercase}
.crm-board .crm-card{box-shadow:0 2px 8px rgba(6,24,54,.06);border-color:transparent!important}
.crm-board .crm-card:hover{box-shadow:0 10px 24px rgba(6,24,54,.12)}
.crm-board .crm-card select{border:0;background:transparent;color:var(--muted);font-weight:700}
[data-theme="dark"] .crm-board .crm-col{background:#111c30!important}

/* ── 61.ª · Aire como en las propuestas: más padding y separación ── */
.dk-cards{gap:16px;margin-bottom:18px}
.dk-card{padding:18px 20px 16px;min-height:118px;border-radius:16px}
.dk-card .dk-ico{top:16px;left:20px;width:40px;height:40px;font-size:1.15rem}
.dk-card .dk-ico svg{width:20px;height:20px;stroke:#fff}
.dk-card .dk-lbl{margin-left:52px;padding-top:4px}
.dk-card .dk-num{margin-top:14px;font-size:1.55rem}
.dk-card .dk-formula{margin-top:10px;padding-top:8px}
.dk-sum{gap:14px;margin-bottom:18px}
.dk-sum>div,.dk-sum>a{padding:16px 18px;border-radius:14px;gap:14px}
.dk-sum .dk-n{font-size:1.6rem}
.dk-side{padding:18px 20px}
.dk-side .dk-kv{padding:8px 0}
.dk-2col{gap:18px}
.dk-steps{padding:18px 12px 10px;gap:10px}
.dk-actions{gap:14px}.dk-action{padding:18px 14px;gap:8px}
.dk-action .dk-a-ico svg,.dk-step .dk-step-ico svg{width:22px;height:22px;stroke:currentColor}
.dk-tiles{gap:14px;margin-top:16px}.dk-tile{padding:20px 16px}
.tab-kpis .kpi{padding:16px 18px 14px!important;min-height:112px}
.tab-kpis .kpi .kpi-ico{width:40px;height:40px;top:14px;left:18px}
.tab-kpis .kpi .kpi-ico svg{width:20px;height:20px;stroke:#fff}
.tab-kpis .kpi .lbl{margin-left:52px;padding-top:4px}
.tab-kpis .kpi .num{margin-top:12px}
.kpis.tab-kpis{gap:16px;margin-bottom:18px}
/* kanban con aire */
.crm-board{gap:16px!important}
.crm-board .crm-col{padding:16px!important}
.crm-board .crm-card{padding:14px 14px 12px!important;margin-bottom:12px!important;border-radius:12px!important}
.crm-board .crm-col .module-list-head{margin-bottom:12px!important}

/* ── 62.ª · Iconos con fondo suave (no sólido), más aire respecto al texto ── */
.dk-card .dk-ico{background:color-mix(in srgb,var(--dk,var(--dk-navy)) 13%,#fff);color:var(--dk,var(--dk-navy));top:18px;left:20px;width:42px;height:42px;border-radius:11px}
.dk-card .dk-ico svg{stroke:currentColor;width:21px;height:21px}
.dk-card .dk-lbl{margin-left:56px;padding-top:6px}
.dk-card .dk-num{margin-top:18px}
.tab-kpis .kpi .kpi-ico{background:color-mix(in srgb,var(--kpi-tono,#5b6b85) 13%,#fff)!important;color:var(--kpi-tono,#5b6b85)!important;width:42px;height:42px;top:16px;left:18px;border-radius:11px}
.tab-kpis .kpi .kpi-ico svg{stroke:currentColor;width:21px;height:21px}
.tab-kpis .kpi .lbl{margin-left:56px;padding-top:6px}
.tab-kpis .kpi .num{margin-top:16px}
.dk-action .dk-a-ico,.dk-step .dk-step-ico{background:color-mix(in srgb,var(--dk,var(--dk-azul)) 13%,#fff);color:var(--dk,var(--dk-azul))}
.dk-step.done .dk-step-ico{background:#178f4e;color:#fff}.dk-step.now .dk-step-ico{color:#fff}
[data-theme="dark"] .dk-card .dk-ico,[data-theme="dark"] .tab-kpis .kpi .kpi-ico{background:rgba(255,255,255,.08)!important}
@supports not (background:color-mix(in srgb,red 10%,blue)){.dk-card .dk-ico,.tab-kpis .kpi .kpi-ico{background:rgba(31,47,86,.12)!important}}

/* ── 62.ª · Barra de accesos rápidos: solo iconos + tooltip, sin rótulo ── */
.platform-quickbar{padding:6px 16px;gap:8px}
.platform-quickbar>span{display:none}
.platform-quickbar>a{position:relative;width:40px;height:40px;padding:0;justify-content:center;font-size:0;border-radius:11px}
.platform-quickbar>a .ui-line-icon{width:19px;height:19px}
.platform-quickbar>a.primary .ui-line-icon{stroke:#fff}
.platform-quickbar>a[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%) translateY(-4px);white-space:nowrap;background:#12233d;color:#fff;font-size:.7rem;font-weight:700;padding:5px 9px;border-radius:7px;opacity:0;pointer-events:none;transition:.15s;z-index:80}
.platform-quickbar>a[data-tip]:hover::after,.platform-quickbar>a[data-tip]:focus-visible::after{opacity:1;transform:translateX(-50%)}
.platform-quickbar>a.quick-home{background:var(--navy);color:#fff;border-color:transparent}.platform-quickbar>a.quick-home .ui-line-icon{stroke:#fff}
.platform-quickbar .quick-edit .quick-edit-txt{display:none}
.platform-quickbar .quick-edit{width:36px;height:36px;padding:0;justify-content:center;border-radius:10px}
/* selector de empresa: se conserva su desplegable; solo el botón pasa a icono «siguiente» */
.platform-user-switch label span{display:none}
.platform-company-switch button[type=submit]{width:34px;height:34px;padding:0;display:grid;place-items:center;border-radius:9px;font-size:0}
.platform-company-switch button[type=submit] .ui-line-icon{width:18px;height:18px}
.adm-yo-txt,.adm-yo-flecha{display:none!important}
.adm-yo-btn{padding:4px!important}
.adm-lupa{position:relative}
.adm-lupa kbd{position:absolute;right:-6px;bottom:-6px;font:700 .55rem var(--mono,monospace);background:#fff;border:1px solid var(--line);border-radius:4px;padding:0 3px;color:var(--muted)}
/* dos «volver» en la esquina: en un demo manda la franja del ejemplo, el flotante SPAG sobra */
/* en demo sobra el flotante de «modo SPAG en empresa»; el de SIMULACIÓN (Regresar al SPAG) se queda */
body:has(.demo-aviso) .ctx-fab.is-emp{display:none!important}
/* franjas de aviso con ✕ que se recuerda */
.franja-x{margin-left:auto;border:0;background:transparent;font-size:1.05rem;line-height:1;cursor:pointer;color:inherit;opacity:.6;padding:2px 6px}
.franja-x:hover{opacity:1}
/* inventario: las columnas largas (presentaciones, ubicaciones, código) van al modal «Detalles» */
@media(min-width:721px){.inventory-table td:nth-child(3),.inventory-table th:nth-child(3),.inventory-table td:nth-child(6),.inventory-table th:nth-child(6),.inventory-table td:nth-child(7),.inventory-table th:nth-child(7){display:none}}
.inv-det-modal{width:min(620px,calc(100vw - 32px))}
.inv-det-modal .inv-det-bloque{margin-bottom:14px}.inv-det-modal .inv-det-bloque h4{margin:0 0 6px;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.inv-det-modal details>summary{display:none}.inv-det-modal details>div{display:block;position:static;box-shadow:none;margin:0}

/* ── 63.ª · Iconos que no se montan sobre la cifra; accesos en la barra del título;
      inventario en una sola fila con color e icono; lupa con tooltip ── */
.tab-kpis .kpi .lbl,.dk-card .dk-lbl{min-height:42px;display:flex;align-items:center;padding-top:0}
.tab-kpis .kpi .num,.dk-card .dk-num{margin-top:10px}
.adm-top .platform-quickbar{border:0;background:transparent;padding:0 0 0 10px;min-height:0;flex:0 1 auto;overflow:visible;gap:6px}
.adm-top .platform-quickbar>a{width:36px;height:36px}
.adm-top-heading{min-width:0;flex:0 1 auto}
.adm-top-title{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.platform-quickbar>a[data-tip]::after{z-index:200}
.adm-lupa[data-tip]{position:relative}
.adm-lupa[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);white-space:nowrap;background:#12233d;color:#fff;font-size:.7rem;font-weight:700;padding:5px 9px;border-radius:7px;opacity:0;pointer-events:none;transition:.15s;z-index:200}
.adm-lupa[data-tip]:hover::after{opacity:1}
.adm-lupa kbd{display:none}
/* avisos: campana en la barra (las franjas se mueven ahí por JS) */
.adm-campana{position:relative;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--panel);display:grid;place-items:center;cursor:pointer;color:var(--navy)}
.adm-campana .ui-line-icon{width:19px;height:19px}
.adm-campana b{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#d03b3b;color:#fff;font-size:.62rem;font-weight:900;display:grid;place-items:center}
.adm-avisos-menu{position:absolute;right:0;top:calc(100% + 8px);width:min(520px,calc(100vw - 24px));max-height:70vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(10,25,60,.22);padding:10px;z-index:120}
.adm-avisos-menu [id^="franja-"]{margin:0 0 8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.8rem}
.adm-avisos-menu .adm-avisos-vacio{padding:12px;color:var(--muted);font-size:.82rem;text-align:center}
.adm-avisos-wrap{position:relative}
/* inventario: KPI en una fila, con icono y color */
.inventory-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.inventory-kpis article{min-height:96px;padding:14px 16px;border-top:4px solid var(--ik,#5b6b85)}
.inventory-kpis article span{display:flex;align-items:center;gap:8px;font-size:.62rem}
.inventory-kpis article .ik{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--ik,#5b6b85) 13%,#fff);color:var(--ik,#5b6b85);flex:none}
.inventory-kpis article .ik .ui-line-icon{width:16px;height:16px;stroke:currentColor}
.inventory-kpis b{font-size:1.3rem;margin:8px 0 2px}
.ik-azul{--ik:#2f6fd6}.ik-teal{--ik:#0a8f9c}.ik-verde{--ik:#178f4e}.ik-morado{--ik:#7c4dcc}.ik-naranja{--ik:#e07b1a}.ik-rojo{--ik:#d03b3b}
@media(max-width:980px){.inventory-kpis{grid-template-columns:repeat(3,1fr)}}

/* ── 64.ª · buscador: resultado resaltado con ↑ ↓ ── */
#admBuscarRes a.on{background:color-mix(in srgb,var(--acc,#0bb6c4) 14%,#fff);outline:2px solid var(--acc,#0bb6c4);outline-offset:-2px;border-radius:8px}
#admBuscarRes a .ui-line-icon{width:16px;height:16px;vertical-align:-3px}

/* ── 65.ª · Modales: un solo fade desde el centro (uxModalIn terminaba en
      transform:none y el diálogo saltaba de la esquina al centro) ── */
@keyframes dkModalIn{from{opacity:0;transform:translate(-50%,-50%) scale(.975)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
body:has(.adm-body) dialog.erp-modal[open],body:has(.adm-body) dialog.ctx-modal[open],body:has(.adm-body) dialog.franja-modal[open],body:has(.adm-body) dialog.quick-modal[open]{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;animation:dkModalIn .16s ease-out}
body:has(.adm-body) dialog::backdrop{animation:uxVeloIn .16s ease-out}
@media(prefers-reduced-motion:reduce){body:has(.adm-body) dialog[open]{animation:none!important}}

/* ── 65.ª · La franja del demo deja de ser una cinta de lado a lado: es un
      botón flotante compacto (esquina inferior derecha), con «Detalles» y «Volver». ── */
.demo-aviso{left:auto!important;right:16px!important;bottom:16px!important;width:auto!important;max-width:calc(100vw - 32px);border-radius:999px!important;padding:8px 8px 8px 14px!important;box-shadow:0 12px 30px rgba(10,25,60,.22);gap:8px!important;flex-wrap:nowrap!important;border:1px solid rgba(194,98,26,.35)}
.demo-aviso::before{display:none!important}
.demo-aviso>span{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-aviso small{white-space:nowrap}
.demo-aviso .demo-mas,.demo-aviso .demo-salir{border-radius:999px!important;padding:6px 11px!important;white-space:nowrap}
body:has(.demo-aviso) .toast-stack{bottom:auto}
body:has(.demo-aviso) .salon-globo{bottom:calc(70px + env(safe-area-inset-bottom,0px))}
@media(max-width:700px){.demo-aviso{right:10px!important;bottom:10px!important}.demo-aviso>span{display:none}}

/* ── 66.ª · sparkline KPI: mini estadística a la derecha, alineada abajo, con
      degradado suave (abajo transparente → arriba color del KPI). Si el texto es
      largo, la spark se encoge (max-width 40%) y nunca se monta sobre él. ── */
.tab-kpis .kpi,.tab-kpis a.kpi{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-auto-rows:min-content;column-gap:10px;align-items:end;align-content:start}
.tab-kpis .kpi>.kpi-ico{grid-column:1}
.tab-kpis .kpi>.lbl,.tab-kpis .kpi>.num,.tab-kpis .kpi>small,.tab-kpis .kpi>.kpi-ir{grid-column:1;min-width:0}
.tab-kpis .kpi>.kpi-spark{grid-column:2;grid-row:1/span 3;align-self:end;justify-self:end;width:90px;max-width:40%;min-width:0;line-height:0;pointer-events:none}
.tab-kpis .kpi:not(:has(.kpi-spark))>.lbl,.tab-kpis .kpi:not(:has(.kpi-spark))>.num,.tab-kpis .kpi:not(:has(.kpi-spark))>small{grid-column:1/-1}
.kpi-spark svg{width:100%;height:34px;display:block;overflow:visible}
.tab-kpis a.kpi>.kpi-spark{margin-bottom:6px}
/* 66.ª · el rótulo no se monta sobre el icono aunque la tarjeta sea grid */
.tab-kpis .kpi .lbl{padding-left:72px!important;margin-left:0!important;min-height:42px}

/* ============================================================
   QA71 · KPI de módulos genéricos (.kpis.module-kpis) con el aspecto del
   tablero (.dk-card): borde superior con tono, etiqueta en versalitas, cifra
   grande y subtexto. Sin tocar los 80+ archivos que las pintan: el tono va
   por posición (1.º navy, 2.º teal, 3.º naranja, 4.º morado…) y `.kpi.acc`
   conserva su acento. `?s=inventario` sigue con sus `.ik-*` (no se toca).
   ============================================================ */
.kpis.module-kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.kpis.module-kpis .kpi{position:relative;min-height:96px;padding:14px 16px 12px;border-radius:14px;border:1px solid var(--line,#e3e8ef);border-top:4px solid var(--kpi-tono,var(--dk-navy,#12233d));box-shadow:0 6px 18px rgba(6,24,54,.06);transition:transform .15s,box-shadow .15s}
.kpis.module-kpis .kpi:before{content:"";position:absolute;top:12px;right:14px;width:10px;height:10px;border-radius:50%;background:var(--kpi-tono,var(--dk-navy,#12233d));opacity:.35}
.kpis.module-kpis .kpi .lbl{font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5b6b7c);padding-right:18px;min-height:16px}
.kpis.module-kpis .kpi .num{margin-top:10px;font:800 1.45rem/1.1 var(--display,inherit);color:var(--navy,#12233d)}
.kpis.module-kpis .kpi small,.kpis.module-kpis .kpi .num+small{display:block;margin-top:4px;font-size:.72rem;font-weight:700;color:var(--kpi-tono,var(--dk-navy,#12233d))}
.kpis.module-kpis .kpi:nth-child(4n+1){--kpi-tono:var(--dk-navy,#12233d)}
.kpis.module-kpis .kpi:nth-child(4n+2){--kpi-tono:var(--dk-teal,#0e8a7a)}
.kpis.module-kpis .kpi:nth-child(4n+3){--kpi-tono:var(--dk-naranja,#c2621a)}
.kpis.module-kpis .kpi:nth-child(4n+4){--kpi-tono:var(--dk-morado,#5b48b5)}
.kpis.module-kpis .kpi.acc{--kpi-tono:var(--acc,#0a4d8c)}
.kpis.module-kpis .kpi.acc .num{color:var(--acc,#0a4d8c)}
a.kpi-link.kpi:hover,.kpis.module-kpis a.kpi:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(6,24,54,.12)}
@media(max-width:720px){.kpis.module-kpis{grid-template-columns:1fr 1fr;gap:10px}.kpis.module-kpis .kpi{min-height:84px;padding:12px 13px 10px}.kpis.module-kpis .kpi .num{font-size:1.2rem}}
@media(max-width:430px){.kpis.module-kpis{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════
   76.ª · 27/08 · TABLERO PERSONALIZABLE (carril K)
   ------------------------------------------------------------
   🔴 Ni una sola regla de aquí cambia el aspecto del tablero de siempre.
   Todo lo que pinta va detrás de `body.tab-edit` —el modo edición, que se
   entra a mano— o de clases que solo existen en las piezas nuevas. La
   rejilla de bloques reproduce a propósito la separación que ya había:
   16 px entre columnas y NADA entre filas, porque la separación vertical
   la sigue poniendo el margen inferior del .panel-box (22 px), igual que
   cuando esto era una secuencia de cajas sueltas.
   ════════════════════════════════════════════════════════════ */

/* ── La barra de personalización, dentro de la caja de filtros ── */
.tab-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line,#e3e8ef)}
.tab-tools .tab-badge{display:inline-block;min-width:17px;padding:0 5px;border-radius:999px;background:var(--acc,#0a4d8c);color:#fff;font-size:.62rem;font-weight:800;line-height:17px;text-align:center}
.tab-pers-chip{font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--acc,#0a4d8c);background:color-mix(in srgb,var(--acc,#0a4d8c) 12%,transparent);padding:3px 9px;border-radius:999px}
@supports not (background:color-mix(in srgb,red 10%,blue)){.tab-pers-chip{background:rgba(10,77,140,.12)}}

.tab-anadir{position:relative}
.tab-anadir>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tab-anadir>summary::-webkit-details-marker{display:none}
.tab-anadir-caja{margin-top:10px;padding:14px;border:1px solid var(--line,#e3e8ef);border-radius:14px;background:var(--bg-2,#f7f9fc);max-height:420px;overflow:auto}
.tab-anadir-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line,#e3e8ef)}
.tab-anadir-fila:last-of-type{border-bottom:0}
.tab-anadir-fila b{display:block;font-size:.85rem;color:var(--navy,#12233d)}
.tab-anadir-fila small{display:block;color:var(--muted,#5b6b7c);font-size:.74rem;line-height:1.35}
.tab-anadir-fila button{flex:0 0 auto}
.tab-anadir-pie{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line,#e3e8ef)}

/* ── La rejilla de bloques ──
   Misma forma que tenia la .tab-dos del ranking y el mapa, pero con TODOS los bloques
   dentro: los de página entera ocupan las dos columnas y los de media,
   una. `row-gap:0` no es un descuido: ver arriba. */
.tab-zona-bloques{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;row-gap:0;align-items:start}
.tab-zona-bloques>.tab-w-full{grid-column:1/-1}
.tab-zona-bloques>.tab-pieza{min-width:0}
.tab-zona-bloques>.tab-pieza>.panel-box{height:100%}
@media(max-width:1000px){.tab-zona-bloques{grid-template-columns:1fr}.tab-zona-bloques>.tab-w-full{grid-column:auto}}

/* ── La barra de cada pieza: invisible salvo en modo edición ── */
.tab-barra{display:none}
.tab-barra-f{display:inline}
.tab-solo-sinjs{display:inline-block}
body.tab-js .tab-solo-sinjs{display:none}
body.tab-edit .tab-barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-8px 0 14px;padding:8px 10px;border:1px dashed var(--acc,#0a4d8c);border-radius:11px;background:color-mix(in srgb,var(--acc,#0a4d8c) 6%,transparent)}
@supports not (background:color-mix(in srgb,red 10%,blue)){body.tab-edit .tab-barra{background:rgba(10,77,140,.06)}}
.tab-barra-tit{flex:1;min-width:0;font-size:.74rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted,#5b6b7c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab-barra-lbl{font-size:.68rem;font-weight:700;color:var(--muted,#5b6b7c)}
.tab-forma{font-size:.76rem;padding:4px 8px;border:1px solid var(--line,#e3e8ef);border-radius:8px;background:var(--panel,#fff);color:var(--navy,#12233d)}
.tab-asa{cursor:grab;font-size:1rem;line-height:1;color:var(--muted,#5b6b7c);user-select:none;touch-action:none}
.tab-asa:active{cursor:grabbing}
.tab-mini{width:26px;height:26px;border:1px solid var(--line,#e3e8ef);border-radius:8px;background:var(--panel,#fff);color:var(--muted,#5b6b7c);font-size:.82rem;font-weight:800;line-height:1;cursor:pointer;padding:0}
.tab-mini:hover{color:var(--navy,#12233d);border-color:var(--acc,#0a4d8c)}
.tab-quitar:hover{color:#fff;background:var(--err,#c0392b);border-color:var(--err,#c0392b)}

/* ── Modo edición: la pieza se despega y se ve que se puede coger ── */
body.tab-edit .tab-pieza{position:relative;outline:1px dashed transparent;border-radius:14px;transition:outline-color .15s,transform .12s}
body.tab-edit .tab-pieza:hover{outline-color:var(--acc,#0a4d8c)}
body.tab-edit .tab-zona [data-pieza]{cursor:grab}
body.tab-edit .tab-arrastrando{opacity:.45;transform:scale(.98);cursor:grabbing}
body.tab-arrastre{user-select:none}
body.tab-arrastre .tab-zona{touch-action:none}
/* La «×» y el asa de una TARJETA: flotan sobre el envoltorio que crea el JS,
   fuera del <a>, que es donde tienen que estar para no romper el enlace. */
.tab-w-kpi{position:relative}
.tab-w-kpi>.kpi{height:100%}
.tab-quitar-flot{position:absolute;top:-8px;right:-8px;z-index:3;box-shadow:0 2px 8px rgba(6,24,54,.18);background:var(--panel,#fff)}
.tab-asa-flot{position:absolute;top:-6px;left:-6px;z-index:3;padding:2px 5px;border-radius:7px;background:var(--panel,#fff);border:1px solid var(--line,#e3e8ef);box-shadow:0 2px 8px rgba(6,24,54,.14)}

/* ── El aviso de «guardado» ── */
.tab-aviso{position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);z-index:9999;padding:9px 16px;border-radius:999px;background:var(--navy,#12233d);color:#fff;font-size:.8rem;font-weight:700;box-shadow:0 10px 30px rgba(6,24,54,.25);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.tab-aviso.visible{opacity:1;transform:translate(-50%,0)}
.tab-aviso.malo{background:var(--err,#c0392b)}

/* ── Los tres «top» del periodo (vendedores, productos, clientes) ──
   La misma barra relativa del ranking de empleados, para que las dos
   listas se lean igual y nadie tenga que aprender dos formas. */
.tab-top-fila{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line,#e3e8ef)}
.tab-top-fila:last-child{border-bottom:0}
.tab-top-pos{flex:0 0 28px;text-align:center;font-weight:900;font-size:1.05rem;color:var(--muted,#5b6b7c)}
.tab-top-cuerpo{flex:1;min-width:0}
.tab-top-nom{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:.85rem}
.tab-top-nom b{overflow:hidden;text-overflow:ellipsis}
.tab-top-barra{position:relative;display:block;width:100%;height:10px;border-radius:999px;background:var(--bg-2,#eef2f7);margin:5px 0 4px}
.tab-top-fill{position:absolute;left:0;top:0;bottom:0;max-width:100%;border-radius:999px;background:linear-gradient(90deg,#0a8f9c,#2f6fd6)}
.tab-top-cuerpo small{color:var(--muted,#5b6b7c);font-size:.74rem}
.tab-top-cuerpo small b{color:var(--navy,#12233d)}

/* ════════════════════════════════════════════════════════════
   76.ª · 27/08 · TABLERO EN 1, 2 O 4 COLUMNAS (carril K2)
   ------------------------------------------------------------
   El dueño: «Drag and drop debe incluir opción de salir en una sola
   columna, o en dos columnas, o 4 columnas, y ahí en cada uno arrastrar
   o adecuarse.»

   🔴 NADA DE AQUÍ SE APLICA AL TABLERO DE SIEMPRE. Todas las reglas
   cuelgan de una clase que el PHP solo emite cuando el usuario ha
   elegido una rejilla (`tab-cols-N`, `tab-kcols-N`) o ha cambiado el
   ancho de alguna pieza (`tab-span`). Con la preferencia «auto» —la de
   quien no ha tocado nada— el HTML no lleva ninguna de esas clases y
   este bloque entero es como si no existiera.

   El ancho de cada pieza viaja en `--tab-span`, que PHP calcula con
   tabper_span(): la misma cuenta para el servidor y para el navegador,
   en un solo sitio.
   ════════════════════════════════════════════════════════════ */

/* La rejilla de BLOQUES */
.tab-zona-bloques.tab-cols-1{grid-template-columns:minmax(0,1fr)}
.tab-zona-bloques.tab-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tab-zona-bloques.tab-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Con rejilla elegida (o con algún ancho a mano) manda `--tab-span` y deja de
   mandar `.tab-w-full`: si no, un gráfico seguiría cruzando las cuatro
   columnas y el «Normal» del selector no haría nada. */
.tab-zona-bloques.tab-span>.tab-pieza,
.tab-zona-bloques.tab-cols-1>.tab-pieza,
.tab-zona-bloques.tab-cols-2>.tab-pieza,
.tab-zona-bloques.tab-cols-4>.tab-pieza{grid-column:span var(--tab-span,1)}

/* Las filas de TARJETAS. Siguen siendo filas (el reparto se rehace al
   arrastrar), solo cambia cuántas caben en cada una. */
.kpis.tab-kcols-1{grid-template-columns:minmax(0,1fr)}
.kpis.tab-kcols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpis.tab-kcols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* 🔴 EN MÓVIL TODO CAE A UNA COLUMNA, diga lo que diga la preferencia. Cuatro
   columnas en 380 px no son cuatro columnas: son cuatro cifras ilegibles. Y
   hace falta repetir los selectores con su clase porque `.kpis.tab-kcols-4`
   pesa más que el `.kpis` de las medias de style.css y, sin esto, ganaría. */
@media(max-width:1000px){
  .tab-zona-bloques.tab-cols-1,.tab-zona-bloques.tab-cols-2,.tab-zona-bloques.tab-cols-4{grid-template-columns:1fr}
  .tab-zona-bloques.tab-span>.tab-pieza,
  .tab-zona-bloques.tab-cols-1>.tab-pieza,
  .tab-zona-bloques.tab-cols-2>.tab-pieza,
  .tab-zona-bloques.tab-cols-4>.tab-pieza{grid-column:auto}
  .kpis.tab-kcols-4{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .kpis.tab-kcols-2,.kpis.tab-kcols-4{grid-template-columns:1fr}
}

/* El selector de columnas: en la barra de personalización, y solo a la vista
   cuando se está personalizando. Sin JavaScript no hay modo edición, así que
   allí se enseña siempre: es la única manera de cambiarlo. */
.tab-cols-form{display:none;align-items:center;gap:7px}
body:not(.tab-js) .tab-cols-form,body.tab-edit .tab-cols-form{display:flex}
/* Y por lo mismo, sin JavaScript la barra de cada pieza (▲▼, ×, forma, ancho)
   se enseña siempre: si dependiera de `body.tab-edit` no se vería jamás y
   quitar una pieza sería imposible sin JS, que era el agujero que quedaba. */
body:not(.tab-js) .tab-barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-8px 0 14px;padding:8px 10px;border:1px dashed var(--line,#e3e8ef);border-radius:11px}

/* ── Las piezas de CABECERA (filtros, eventos, ruta de inicio, aviso de
      grupo, cartera financiera) ──
   No están en ninguna rejilla: viven en su sitio de la cabecera. Lo único
   que necesitan es poder llevar encima su «×», y para eso el envoltorio que
   les pone assets/tablero.js en modo edición (`.tab-cab-marco`). Fuera de
   modo edición no existe. */
body.tab-edit .tab-cab-marco{position:relative;display:block;outline:1px dashed var(--acc,#0a4d8c);border-radius:14px;padding:6px;margin-bottom:10px}
body.tab-edit .tab-cab-marco>.tab-cab-eti{position:absolute;top:-9px;left:12px;z-index:2;padding:1px 8px;border-radius:999px;background:var(--panel,#fff);border:1px solid var(--line,#e3e8ef);font-size:.66rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted,#5b6b7c)}

/* ════════════════════════════════════════════════════════════
   76.ª · 27/08 · LA PARTE DE ABAJO DEL INICIO SPAG (carril K2)
   ------------------------------------------------------------
   «Del mismo modo para SPAG, parte de abajo también.»

   🔴 ONCE COLUMNAS NO ES UN NÚMERO BONITO: ES EL QUE REPRODUCE LA
   PANTALLA DE HOY. «Empresa seleccionada» y «actividad de hoy» se
   reparten hoy con `.spag-grid-main`, que es
   `minmax(0,2fr) minmax(260px,.75fr)`. 2 / 0,75 = 8 / 3, y 8 + 3 = 11.
   Con la misma separación de 18 px entre columnas y la vertical puesta,
   como antes, por el margen inferior de cada caja (row-gap:0), el inicio
   de quien no ha tocado nada queda donde estaba —con un 1 % de
   diferencia medido: una pieza de ocho columnas se queda además con los
   siete huecos de dentro. El porqué de no cuadrarlo al píxel está en
   includes/admin/inicio_piezas.php.

   Los anchos por pieza los calcula spag_piezas_span() en PHP y llegan en
   `--sp-span`: la cuenta está en un sitio, no en dos.
   ════════════════════════════════════════════════════════════ */
.spag-piezas{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));column-gap:18px;row-gap:0;align-items:stretch}
.spag-piezas>.sp-pieza{grid-column:span var(--sp-span,11);min-width:0;display:flex;flex-direction:column}
/* `flex:1` es lo que reproduce el «estirar» de la rejilla de antes: las dos
   cajas de una misma fila acaban a la misma altura, como hoy. */
.spag-piezas>.sp-pieza>.panel-box{flex:1 1 auto;margin-bottom:18px}
.spag-piezas>.sp-pieza>.adm-blk{flex:1 1 auto}

/* Rejilla elegida a mano */
.spag-piezas.sp-cols-1{grid-template-columns:minmax(0,1fr)}
.spag-piezas.sp-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.spag-piezas.sp-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.spag-piezas.sp-cols-1>.sp-pieza,
.spag-piezas.sp-cols-2>.sp-pieza,
.spag-piezas.sp-cols-4>.sp-pieza{grid-column:span var(--sp-span,1)}

/* 🔴 En móvil, una columna diga lo que diga la preferencia. Mismo corte que
   `.spag-grid-main` (760 px), para no inventar un segundo punto de quiebre. */
@media(max-width:760px){
  .spag-piezas,.spag-piezas.sp-cols-1,.spag-piezas.sp-cols-2,.spag-piezas.sp-cols-4{grid-template-columns:1fr}
  .spag-piezas>.sp-pieza,
  .spag-piezas.sp-cols-1>.sp-pieza,
  .spag-piezas.sp-cols-2>.sp-pieza,
  .spag-piezas.sp-cols-4>.sp-pieza{grid-column:auto}
  .spag-piezas>.sp-pieza>.panel-box{margin-bottom:16px}
}

/* La barra de mandos de cada pieza: sólo en modo edición, que se enciende a
   mano. Fuera de él, el inicio de todos los días no tiene un adorno de más.
   Los mandos los pinta assets/adm-kpis.js sobre lo ya pintado, igual que hace
   con los recuadros de arriba y por el mismo motivo: si el script no llega, se
   ve el inicio de siempre en vez de botones que no harían nada. */
.sp-barra{display:none}
body.sp-edit .sp-barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px;padding:7px 10px;
  border:1px dashed var(--acc-2,#2f7ff0);border-radius:11px;background:var(--bg-2,#eef2f9)}
.sp-barra .sp-tit{flex:1;min-width:0;font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted,#5b6b85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-barra select{font-size:.74rem;padding:3px 7px;border:1px solid var(--line-2,#d3def0);border-radius:8px;
  background:var(--panel,#fff);color:var(--text,#10203a)}
.sp-barra .sp-asa{cursor:grab;font-size:1rem;line-height:1;color:var(--muted,#5b6b85);user-select:none;touch-action:none}
.sp-mini{width:25px;height:25px;border:1px solid var(--line-2,#d3def0);border-radius:8px;background:var(--panel,#fff);
  color:var(--muted,#5b6b85);font-size:.8rem;font-weight:800;line-height:1;cursor:pointer;padding:0}
.sp-mini:hover{color:#fff;background:var(--navy,#002863);border-color:var(--navy,#002863)}
body.sp-edit .sp-pieza{outline:1px dashed transparent;border-radius:12px;transition:outline-color .15s}
body.sp-edit .sp-pieza:hover{outline-color:var(--acc-2,#2f7ff0)}
.sp-arrastrando{opacity:.45}
body.sp-arrastre{user-select:none}

/* La barra de herramientas del inicio (personalizar · columnas · crear campo) */
.sp-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.sp-tools .sp-aviso-lento{flex:1 1 260px;min-width:0;font-size:.72rem;line-height:1.35;color:var(--muted,#5b6b85)}
.sp-btn{padding:6px 12px;border:1px solid var(--line-2,#d3def0);border-radius:9px;background:var(--panel,#fff);
  color:var(--navy,#002863);font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}
.sp-btn:hover{border-color:var(--acc-2,#2f7ff0)}
.sp-btn.on{background:var(--navy,#002863);color:#fff;border-color:var(--navy,#002863)}

/* El formulario de «crear campo» */
.kpix-modal{border:0;padding:0;border-radius:15px;max-width:min(560px,94vw);width:100%;
  box-shadow:0 24px 70px rgba(0,40,99,.28);background:var(--panel,#fff);color:var(--text,#10203a)}
.kpix-modal::backdrop{background:rgba(6,24,54,.42)}
.kpix-modal .kx-cuerpo{padding:18px 20px 20px}
.kpix-modal h3{margin:0 0 4px;font-size:1.02rem}
.kpix-modal .kx-sub{margin:0 0 14px;font-size:.78rem;color:var(--muted,#5b6b85);line-height:1.4}
.kpix-modal label{display:block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted,#5b6b85);margin:11px 0 4px}
.kpix-modal select,.kpix-modal input[type=text]{width:100%;padding:8px 10px;border:1px solid var(--line-2,#d3def0);
  border-radius:9px;background:var(--panel,#fff);color:var(--text,#10203a);font:inherit;font-size:.86rem}
.kx-fila{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kx-lento{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--bg-2,#eef2f9);
  border-left:3px solid var(--acc-2,#2f7ff0);font-size:.76rem;line-height:1.4;color:var(--muted,#5b6b85)}
.kx-acciones{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.kx-err{margin:12px 0 0;padding:9px 12px;border-radius:9px;background:rgba(192,57,43,.09);
  color:var(--err,#c0392b);font-size:.78rem;line-height:1.4}
@media(max-width:520px){.kx-fila{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════════════
   76.ª (27/08) · carril K3 — EL ENGRANAJE, LAS FILAS Y LA APARIENCIA
   ---------------------------------------------------------------------------
   Va en dash.css y no en tablero-editor.css porque esto lo necesita TODO EL
   MUNDO: la cajera no carga el editor, pero sí ve el tablero por filas y la
   apariencia que dejó puesta su gerente. tablero-editor.css es solo el modal.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 77.ª (27/08) · EL PIE, donde antes estaba el engranaje de la esquina ──
   El dueño: «el editor de KPIs debe activarse desde la PARTE INFERIOR; la
   parte de arriba dejarla lo más limpia posible, compacta.» Arriba ya no hay
   nada: sólo el título. Esto va al final de la pantalla, alineado a la
   derecha, en gris y pequeño; se ve cuando se busca y no antes. */
.tab-cabecera{position:relative}
/* 🔴 El margen de abajo es GRANDE a propósito. Esta esquina la comparten la
   burbuja del chat, el chip del plan y —en una empresa de ejemplo— la píldora
   de «Regresar al SPAG», todas `position:fixed`. Con el margen de 26 px que
   tenía, al llegar al final de la página el botón quedaba justo debajo de la
   píldora y no se podía pulsar. Se vio en Chrome, en el demo de odontología.
   Con este aire, el final del desplazamiento lo deja siempre por encima. */
/* 🔴 RELLENO, NO MARGEN. Esta esquina la comparten la burbuja del chat, el chip
   del plan y —en una empresa de ejemplo— la píldora de «Regresar al SPAG»,
   todas `position:fixed`. Con margen no bastaba: el margen inferior del último
   hijo COLAPSA fuera del contenedor, así que no alargaba la página y al llegar
   al final el botón quedaba justo debajo de la píldora, sin poder pulsarse. El
   relleno no colapsa. Se vio en Chrome, en el demo de odontología. */
.tab-pie{display:flex;justify-content:flex-end;margin:10px 0 0;padding-bottom:88px}
/* Y por encima del cromo flotante. La píldora del demo se pinta con z-index 79
   y ocupa esa misma esquina: si al final del desplazamiento se cruzan, el clic
   tiene que llegar al botón igualmente. El relleno de arriba hace que casi
   nunca se crucen; esto se ocupa del «casi». */
.tab-pie-btn{position:relative;z-index:90;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;border:1px solid var(--line,#e3e8ef);background:transparent;color:var(--muted,#5b6b7c);font-size:.76rem;font-weight:700;text-decoration:none;transition:color .15s,border-color .15s,background .15s}
.tab-pie-btn:hover{color:var(--acc,#0a4d8c);border-color:var(--acc,#0a4d8c);background:var(--panel,#fff)}
.tab-pie-btn .tab-pie-ico{width:15px;height:15px;stroke:currentColor;flex:0 0 auto}
/* En móvil, el ancho completo y algo más de alto: es un objetivo de pulgar. */
@media(max-width:560px){
  .tab-pie{justify-content:stretch;margin:8px 0 20px}
  .tab-pie-btn{flex:1;justify-content:center;padding:9px 12px}
}

/* ── 77.ª · El lápiz del menú, APAGADO POR DEFECTO ──
   «el icono de editar (lápiz) eso se active solo desde el panel de
   configuración de empresa, que no esté visible siempre para accesos
   rápidos.» Así que sólo existe si la empresa lo enciende, y lo inyecta
   assets/tablero-editor.js, que únicamente se carga para quien puede editar:
   no puede aparecerle a nadie más ni por un despiste de plantilla. */
.tab-lapiz{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-left:8px;border-radius:9px;border:1px solid var(--line,#e3e8ef);background:var(--panel,#fff);color:var(--muted,#5b6b7c);vertical-align:middle;text-decoration:none;transition:color .15s,border-color .15s}
.tab-lapiz:hover{color:var(--acc,#0a4d8c);border-color:var(--acc,#0a4d8c)}

/* ── El aviso de «estás viendo tu propia versión» ──
   No es un control de edición: es la salida para quien personalizó su tablero
   antes de que existiera el de la empresa. Ver includes/panel/tablero.php. */
.tab-tuya{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line,#e3e8ef)}

/* ── EL TABLERO POR FILAS ──
   Cada fila es su propia rejilla. `row-gap:0` igual que en .tab-zona-bloques y
   por el mismo motivo: la separación vertical la pone el margen del .panel-box
   y de .kpis, y sumarle un hueco de rejilla dejaría el doble de aire. */
.tab-filas{display:block}
.tab-fila{display:grid;grid-template-columns:repeat(var(--tab-fc,2),minmax(0,1fr));column-gap:16px;row-gap:0;align-items:start}
.tab-fila>.tab-pieza{grid-column:span var(--tab-span,1);min-width:0}
.tab-fila>.tab-pieza>.panel-box{height:100%}
.tab-fc-1{--tab-fc:1}.tab-fc-2{--tab-fc:2}.tab-fc-3{--tab-fc:3}.tab-fc-4{--tab-fc:4}.tab-fc-6{--tab-fc:6}
/* Una tarjeta dentro de una fila: su envoltorio .kpis le da el aspecto (el
   icono en su cuadro, el tono, la mini estadística), y el margen de abajo es
   el mismo que tiene en el tablero de siempre. */
.tab-fila>.tab-p-kpi>.kpis{margin-bottom:16px}
/* 🔴 EN MÓVIL, UNA COLUMNA, diga lo que diga la preferencia. Seis columnas en
   380 px no son seis columnas: son seis cifras ilegibles. Mismo criterio que
   la rejilla del carril de esta mañana. */
@media(max-width:1000px){
  .tab-fila{grid-template-columns:1fr}
  .tab-fila>.tab-pieza{grid-column:auto}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA APARIENCIA DE LAS TARJETAS
   ---------------------------------------------------------------------------
   «si tendrá fondo degradé suave o solo bordes, y cómo se anima cuando pasa el
   mouse, mini-zoom de estadística, etc.»

   🔴 `display:contents` en el envoltorio: sus hijos caen exactamente donde
   caían, así que meter esta capa no mueve ni un píxel de la maquetación. Y sin
   preferencia guardada el envoltorio NI SE EMITE (ver tablero.php), así que
   nada de esto llega a aplicarse.

   Todas las reglas cuelgan de `.tab-apar`, o sea que ninguna puede afectar a
   otra pantalla del panel por accidente.
   ═══════════════════════════════════════════════════════════════════════════ */
.tab-apar{display:contents}
/* La transición se pone SIEMPRE que hay apariencia elegida, aunque la animación
   sea «ninguna»: sin ella, «elevar» y «mini-zoom» darían un salto seco. */
.tab-apar .tab-kpis .kpi,.tab-apar .tab-kpis a.kpi{transition:transform .16s,box-shadow .16s,border-color .16s,filter .16s,background .16s}

/* ── Estilo de tarjeta ── */
.tab-ap-t-degrade .tab-kpis .kpi{background:linear-gradient(158deg,color-mix(in srgb,var(--kpi-tono,#5b6b85) 14%,var(--panel,#fff)) 0%,var(--panel,#fff) 68%)}
.tab-ap-t-borde .tab-kpis .kpi{background:transparent;box-shadow:none;border:1px solid var(--line,#e3e8ef);border-top-width:1px;border-left:3px solid var(--kpi-tono,var(--line,#e3e8ef))!important}
.tab-ap-t-plano .tab-kpis .kpi{box-shadow:none}
.tab-ap-t-sombra .tab-kpis .kpi{box-shadow:0 14px 32px rgba(6,24,54,.16)}
/* El degradado necesita color-mix. Donde no exista, un tinte plano del acento:
   es menos bonito y se ve igual de bien, que es lo que importa. */
@supports not (background:color-mix(in srgb,red 10%,blue)){
  .tab-ap-t-degrade .tab-kpis .kpi{background:var(--panel,#fff)}
}

/* ── Al pasar el mouse ── */
.tab-ap-h-nada .tab-kpis .kpi:hover,.tab-ap-h-nada .tab-kpis a.kpi:hover{transform:none;box-shadow:0 6px 18px rgba(6,24,54,.06)}
.tab-ap-h-elevar .tab-kpis .kpi:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(6,24,54,.17)}
.tab-ap-h-borde .tab-kpis .kpi:hover{border-color:var(--tab-ap-acento,var(--acc,#0a4d8c))!important;box-shadow:0 0 0 2px var(--tab-ap-acento,var(--acc,#0a4d8c))}
.tab-ap-h-zoom .tab-kpis .kpi:hover{transform:scale(1.035);z-index:2;position:relative}
.tab-ap-h-brillo .tab-kpis .kpi:hover{filter:brightness(1.05) saturate(1.06)}
/* 🔴 Quien pide «no me animes nada» también lo pide para el sistema: si el
   navegador viene con el movimiento reducido, mandan sus ajustes. */
@media(prefers-reduced-motion:reduce){
  .tab-apar .tab-kpis .kpi:hover{transform:none!important;transition:none!important}
}

/* ── Esquinas ── */
.tab-ap-r-recto .tab-kpis .kpi,.tab-ap-r-recto .tab-pieza>.panel-box{border-radius:3px}
.tab-ap-r-suave .tab-kpis .kpi,.tab-ap-r-suave .tab-pieza>.panel-box{border-radius:10px}
.tab-ap-r-redondo .tab-kpis .kpi,.tab-ap-r-redondo .tab-pieza>.panel-box{border-radius:22px}

/* ── Densidad ── */
.tab-ap-d-compacta .tab-kpis .kpi{padding:10px 12px 9px!important;min-height:84px}
.tab-ap-d-compacta .tab-kpis .kpi .num{margin-top:8px;font-size:1.2rem}
.tab-ap-d-compacta .tab-kpis{gap:10px;margin-bottom:12px}
.tab-ap-d-normal .tab-kpis .kpi{padding:14px 16px 12px!important;min-height:100px}
.tab-ap-d-amplia .tab-kpis .kpi{padding:22px 24px 20px!important;min-height:132px}
.tab-ap-d-amplia .tab-kpis{gap:20px;margin-bottom:22px}

/* ── La mini estadística de dentro de la tarjeta ── */
.tab-ap-s-no .tab-kpis .kpi>.kpi-spark{display:none}
/* Sin la spark, el texto recupera las dos columnas: si no, quedaría un hueco
   a la derecha del ancho exacto que ocupaba el dibujo. */
.tab-ap-s-no .tab-kpis .kpi>.lbl,.tab-ap-s-no .tab-kpis .kpi>.num,.tab-ap-s-no .tab-kpis .kpi>small{grid-column:1/-1}


/* ═══════════════════════════════════════════════════════════════════════════
   77.ª (27/08) · carril K3 — LO QUE PIDIÓ EL DUEÑO AL VER LA ENTREGA
   ---------------------------------------------------------------------------
     «Sobre la interfaz para GA: fondo degradado, fuente gruesa, icono, gráfico
      de fondo tipo zoom animado.»

   El degradado ya estaba (`tab-ap-t-degrade`). Aquí van los otros tres. Todo
   sigue colgando de `.tab-apar`, así que nada de esto puede tocar otra
   pantalla del panel; y sin preferencia guardada el envoltorio no se emite y
   ninguna de estas reglas llega a aplicarse.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FUENTE GRUESA ── */
.tab-ap-f-normal .tab-kpis .kpi .num{font-weight:600}
.tab-ap-f-gruesa .tab-kpis .kpi .num{font-weight:700;letter-spacing:-.01em}
.tab-ap-f-extra  .tab-kpis .kpi .num{font-weight:800;font-size:1.62rem;line-height:1.12;letter-spacing:-.02em}
/* El rótulo acompaña, o una cifra de 800 encima de un rótulo de 600 se lee
   como dos tarjetas pegadas. */
.tab-ap-f-extra  .tab-kpis .kpi .lbl{font-weight:800}

/* ── EL ICONO: tamaño ──
   `.kpi-ico` es un cuadro con el SVG centrado dentro, así que cambian los dos:
   el cuadro y el dibujo. Y el rótulo lleva un `margin-left` calculado para el
   cuadro de siempre; si sólo creciera el cuadro, se solaparían. */
.tab-ap-i-no    .tab-kpis .kpi .kpi-ico{display:none}
.tab-ap-i-no    .tab-kpis .kpi .lbl{margin-left:0}
.tab-ap-i-chico  .tab-kpis .kpi .kpi-ico{width:28px;height:28px;border-radius:8px}
.tab-ap-i-chico  .tab-kpis .kpi .kpi-ico svg{width:16px;height:16px}
.tab-ap-i-chico  .tab-kpis .kpi .lbl{margin-left:38px}
.tab-ap-i-normal .tab-kpis .kpi .kpi-ico{width:38px;height:38px}
.tab-ap-i-normal .tab-kpis .kpi .kpi-ico svg{width:20px;height:20px}
.tab-ap-i-normal .tab-kpis .kpi .lbl{margin-left:50px}
.tab-ap-i-grande .tab-kpis .kpi .kpi-ico{width:50px;height:50px;border-radius:14px}
.tab-ap-i-grande .tab-kpis .kpi .kpi-ico svg{width:27px;height:27px}
.tab-ap-i-grande .tab-kpis .kpi .lbl{margin-left:62px;padding-top:8px}

/* ── EL ICONO: dónde ──
   Hoy va arriba a la IZQUIERDA con el rótulo indentado a su derecha. Las dos
   opciones cambian eso, y las dos tienen que soltar el `margin-left` del
   rótulo o dejarían un hueco delante. */
.tab-ap-ip-derecha .tab-kpis .kpi .kpi-ico{left:auto;right:16px}
.tab-ap-ip-derecha .tab-kpis .kpi .lbl{margin-left:0;padding-right:52px}
/* Marca de agua: el icono sale del cuadro, se va a la esquina de abajo, crece
   y se queda casi transparente. `overflow:hidden` de `.tab-kpis .kpi` lo
   recorta contra la tarjeta, que es lo que le da el aire de sello. */
.tab-ap-ip-fondo .tab-kpis .kpi .kpi-ico{position:absolute;top:auto;left:auto;right:-14px;bottom:-18px;width:104px;height:104px;border-radius:0;background:transparent!important;box-shadow:none;color:var(--kpi-tono,#5b6b85)!important;opacity:.10;pointer-events:none;z-index:0}
.tab-ap-ip-fondo .tab-kpis .kpi .kpi-ico svg{width:100%;height:100%;stroke:currentColor}
.tab-ap-ip-fondo .tab-kpis .kpi .lbl{margin-left:0}
.tab-ap-ip-fondo .tab-kpis .kpi .lbl,.tab-ap-ip-fondo .tab-kpis .kpi .num,.tab-ap-ip-fondo .tab-kpis .kpi small{position:relative;z-index:1}
[data-theme="dark"] .tab-ap-ip-fondo .tab-kpis .kpi .kpi-ico{opacity:.16}

/* ═══════════════════════════════════════════════════════════════════════════
   EL GRÁFICO DE FONDO, «TIPO ZOOM ANIMADO»
   ---------------------------------------------------------------------------
   🔴 NO SE DIBUJA NADA NUEVO. Es el MISMO SVG de la mini estadística que la
   tarjeta ya trae (`tab_spark_svg`), sacado de su celda de la rejilla y
   estirado por el fondo. Se resuelve entero aquí: cero JavaScript y cero
   marcado añadido. Pedir otra serie habría costado una consulta más por
   tarjeta en la pantalla que más se abre del ERP, para dibujar exactamente lo
   mismo un poco más grande.

   El SVG lleva `preserveAspectRatio="none"` y `vector-effect="non-scaling-
   stroke"`, así que estirarlo lo rellena de lado a lado sin engordar el trazo.

   Y el texto tiene que reclamar las dos columnas: la spark ocupaba la segunda
   y, al salirse del flujo, dejaría el hueco vacío.
   ═══════════════════════════════════════════════════════════════════════════ */
.tab-ap-g-suave .tab-kpis .kpi>.kpi-spark,
.tab-ap-g-zoom  .tab-kpis .kpi>.kpi-spark{position:absolute;left:0;right:0;bottom:0;top:auto;width:100%;max-width:none;height:62%;margin:0;opacity:.26;pointer-events:none;z-index:0;transform-origin:50% 100%}
.tab-ap-g-suave .tab-kpis .kpi>.kpi-spark svg,
.tab-ap-g-zoom  .tab-kpis .kpi>.kpi-spark svg{width:100%;height:100%}
.tab-ap-g-suave .tab-kpis .kpi>.lbl,.tab-ap-g-suave .tab-kpis .kpi>.num,.tab-ap-g-suave .tab-kpis .kpi>small,
.tab-ap-g-zoom  .tab-kpis .kpi>.lbl,.tab-ap-g-zoom  .tab-kpis .kpi>.num,.tab-ap-g-zoom  .tab-kpis .kpi>small{grid-column:1/-1;position:relative;z-index:1}
.tab-ap-g-zoom  .tab-kpis .kpi>.kpi-spark{transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .55s}
.tab-ap-g-zoom  .tab-kpis .kpi:hover>.kpi-spark{transform:scale(1.35) translateY(7%);opacity:.44}
[data-theme="dark"] .tab-ap-g-suave .tab-kpis .kpi>.kpi-spark,
[data-theme="dark"] .tab-ap-g-zoom  .tab-kpis .kpi>.kpi-spark{opacity:.34}
.tab-ap-g-no .tab-kpis .kpi>.kpi-spark{display:none}
.tab-ap-g-no .tab-kpis .kpi>.lbl,.tab-ap-g-no .tab-kpis .kpi>.num,.tab-ap-g-no .tab-kpis .kpi>small{grid-column:1/-1}
/* 🔴 Quien viene con el movimiento reducido en el sistema lo pidió antes que
   nadie: el fondo se queda, la animación no. */
@media(prefers-reduced-motion:reduce){
  .tab-ap-g-zoom .tab-kpis .kpi>.kpi-spark{transition:none}
  .tab-ap-g-zoom .tab-kpis .kpi:hover>.kpi-spark{transform:none;opacity:.34}
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL MINI-ZOOM DE ESTADÍSTICA
   ---------------------------------------------------------------------------
   «al pasar el mouse sobre un gráfico o KPI, ampliación en globo/popover con
   el gráfico más grande y sus cifras.»

   El globo es `position:fixed` y vive colgado del <body>, no de la tarjeta:
   dentro de la tarjeta lo recortaría el `overflow:hidden` que le da la forma,
   y en la última fila se saldría por debajo del panel. Lo coloca el JS.
   `pointer-events:none` para que el globo no se robe el propio hover que lo
   abrió —ese es el clásico de los popover: aparece, tapa el ratón, se cierra,
   vuelve a aparecer— y parpadee.
   ═══════════════════════════════════════════════════════════════════════════ */
.tab-lupa{position:fixed;z-index:9998;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .14s,transform .14s;min-width:230px;max-width:min(420px,92vw);padding:14px 16px;border-radius:14px;background:var(--panel,#fff);border:1px solid var(--line,#e3e8ef);box-shadow:0 22px 54px rgba(6,24,54,.26)}
.tab-lupa.visible{opacity:1;transform:translateY(0)}
.tab-lupa .tab-lupa-rot{font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5b6b7c)}
.tab-lupa .tab-lupa-num{margin-top:4px;font:800 1.6rem/1.1 var(--display,inherit);color:var(--tab-ap-acento,var(--navy,#12233d))}
.tab-lupa .tab-lupa-sub{margin-top:3px;font-size:.76rem;color:var(--muted,#5b6b7c)}
.tab-lupa .tab-lupa-graf{margin-top:10px;line-height:0}
.tab-lupa .tab-lupa-graf svg{width:100%;height:110px;display:block;overflow:visible}
@media(prefers-reduced-motion:reduce){.tab-lupa{transition:none}}
/* En una pantalla sin ratón el globo no tiene sentido: no hay «pasar por
   encima», y al tocar la tarjeta lo que se quiere es abrir su detalle. */
@media(hover:none){.tab-lupa{display:none}}