/* Diseño «Tablero» de COMPUDIAZ — tarjetas con cambio vs periodo anterior, gráfica de área con degradado, medidor, tablas con casillas; todas las pantallas y ventanas, menos PDF, menú lateral y barra superior. <html data-diseno="tablero"> */
html[data-diseno="tablero"]{ --papel:color-mix(in srgb,var(--ink) 3%,var(--panel)) }
/* Diseño «Tablero» — inspirado en la referencia que eligió el usuario: tarjetas blancas con cifra grande, comparación con el periodo
   anterior y enlace «Detalle», gráfica de área con degradado y globo, medidor circular, tablas con casillas y menú «⋯».
   El menú lateral, la barra superior y los PDF no se tocan. */
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) { font-size:13.5px }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .page-head h1,
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .hello h2{ font-size:26px; font-weight:700; letter-spacing:-.02em }

/* Tarjetas */
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) :is(.card,.dcard,.cal-card,.vz-card,.dg-wrap,.kpi,.mini-kpi,.ticket-form){ background:var(--panel); border:0; border-radius:14px; box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent), 0 10px 28px -16px color-mix(in srgb,var(--ink) 22%,transparent) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .card{ padding:20px }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .card+.card{ margin-top:16px }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .card h2{ font-size:15px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .panel-fila{ gap:16px }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpis{ gap:16px }

/* Cifras: etiqueta arriba, flecha a la derecha, número grande, cambio y «Detalle» abajo */
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi{ position:relative; padding:16px 18px 46px; min-height:134px }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi.hero{ background:var(--panel); color:var(--ink) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi.hero .l,
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi.hero .s{ color:inherit }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi .l{ font-size:13px; font-weight:500; text-transform:none; letter-spacing:0; color:var(--ink) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi .v{ font-family:var(--mono); font-weight:600; font-size:clamp(20px,2.1vw,27px); letter-spacing:-.02em; margin-top:12px; font-feature-settings:"tnum" }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi .s{ font-size:11.5px; color:var(--muted); margin-top:3px }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi-link::before{ content:"↗"; position:absolute; right:16px; top:12px; font-size:15px; color:var(--muted) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi-link::after{ content:"Detalle ↙"; position:absolute; right:16px; bottom:12px; margin:0; font-size:11.5px; font-weight:500; color:var(--vz-2); opacity:1; transform:none }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi-link[data-ver]::after{ content:"Detalle ↙" }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi.hero.kpi-link::after{ color:var(--vz-2) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi-link:hover{ transform:translateY(-2px); box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 6%,transparent), 0 16px 30px -16px color-mix(in srgb,var(--ink) 30%,transparent) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi .delta{ position:absolute; left:18px; bottom:12px; font-size:11.5px; font-weight:600; color:var(--ok) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi .delta.dn{ color:var(--danger) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi .delta small{ font-weight:400; color:var(--muted) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi .delta.ej{ cursor:help; text-decoration:underline dotted; text-underline-offset:3px }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi .mini-barras{ display:flex; gap:3px; align-items:flex-end; height:22px; position:absolute; right:18px; top:46px }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi .mini-barras i{ display:block; width:6px; border-radius:2px 2px 0 0; background:var(--vz-4) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi .mini-barras i:last-child{ background:var(--vz-2) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi.medidor{ padding-bottom:16px }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi.medidor svg{ display:block; margin:6px auto 0; width:100%; max-width:190px }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi.medidor .s{ text-align:center }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi.medidor::after,
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .kpi.medidor::before{ display:none }

/* Gráfica de área con degradado y globo */
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-cifra{ display:flex; align-items:baseline; gap:12px; margin:-2px 0 6px }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-cifra b{ font-family:var(--mono); font-size:24px; font-weight:600; letter-spacing:-.02em }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-cifra span{ font-size:12px; font-weight:600; color:var(--ok) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-cifra span.dn{ color:var(--danger) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-area{ position:relative }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-area svg{ display:block; width:100%; height:auto; overflow:visible }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-area .eje{ stroke:var(--line); stroke-width:1 }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-area .tx{ font:11px var(--body); fill:var(--muted) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-area .guia{ stroke:var(--vz-2); stroke-width:1.2; opacity:0 }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-area .punto{ opacity:0; stroke:var(--panel); stroke-width:2 }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-area:hover .guia,
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-area:hover .punto{ opacity:1 }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-globo-viejo{ position:absolute; pointer-events:none; z-index:5; transform:translate(-50%,calc(-100% - 12px)); background:var(--vz-2); color:#fff; font-size:12px; font-weight:600; padding:7px 11px; border-radius:9px; white-space:nowrap; box-shadow:0 8px 20px -8px rgba(60,50,200,.55) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-globo small{ display:block; font-weight:400; opacity:.85; margin-bottom:2px }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-globo .f{ display:flex; gap:8px; align-items:center }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-globo i{ width:8px; height:8px; border-radius:50%; background:var(--panel); display:inline-block }

/* Tablas: casilla por fila y menú «⋯» */
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) table.dg th.tb-sel,
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) table.dg td.tb-sel{ width:40px; padding-right:0; text-align:center }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) table.dg th.tb-mas,
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) table.dg td.tb-mas{ width:44px; text-align:right }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-mas button{ width:28px; height:28px; border:0; border-radius:8px; background:none; color:var(--muted); cursor:pointer; font-size:18px; line-height:1; letter-spacing:1px }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-mas button:hover{ background:var(--panel-2); color:var(--ink) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) tr.tb-marcada td{ background:color-mix(in srgb,var(--vz-2) 6%,var(--panel)) }
.tb-menu{ position:fixed; z-index:400; min-width:170px; background:var(--panel); border-radius:12px; padding:6px; box-shadow:0 18px 40px -14px color-mix(in srgb,var(--ink) 40%,transparent), 0 0 0 1px color-mix(in srgb,var(--ink) 6%,transparent); font:13px var(--body) }
.tb-menu button{ display:block; width:100%; text-align:left; border:0; background:none; padding:8px 12px; border-radius:8px; cursor:pointer; font:inherit; color:var(--ink) }
.tb-menu button:hover{ background:var(--panel-2) }
.tb-barra{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:300; background:var(--tip); color:var(--tip-ink); border-radius:12px; padding:10px 16px; display:flex; gap:16px; align-items:center; font:600 13px var(--body); box-shadow:0 18px 40px -14px color-mix(in srgb,var(--ink) 50%,transparent) }
.tb-barra button{ border:0; background:color-mix(in srgb,var(--tip-ink) 14%,transparent); color:var(--tip-ink); border-radius:8px; padding:5px 12px; cursor:pointer; font:600 12px var(--body) }

/* ---- Casillas (chulos) y opciones: pequeñas, redondeadas, con el chulo dibujado (antes eran cuadros grandes del navegador) ---- */
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) input[type=checkbox]{ -webkit-appearance:none; appearance:none; width:16px; height:16px; min-width:16px; padding:0; margin:0; border:1.5px solid var(--line-strong); border-radius:4px; background:var(--panel); display:inline-grid; place-content:center; cursor:pointer; vertical-align:middle; flex:none; box-shadow:none; transition:background .12s, border-color .12s }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) input[type=checkbox]::before{ content:""; width:10px; height:10px; transform:scale(0); transition:transform .1s; background:var(--panel); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.4 2.4 4.6-5' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.4 2.4 4.6-5' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) input[type=checkbox]:hover{ border-color:var(--ink) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) input[type=checkbox]:checked{ background:var(--ink); border-color:var(--ink) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) input[type=checkbox]:checked::before{ transform:scale(1) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) input[type=checkbox]:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) input[type=checkbox]:disabled{ opacity:.4; cursor:default }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) input[type=radio]{ -webkit-appearance:none; appearance:none; width:16px; height:16px; min-width:16px; padding:0; margin:0; border:1.5px solid var(--line-strong); border-radius:50%; background:var(--panel); display:inline-grid; place-content:center; cursor:pointer; vertical-align:middle; flex:none; box-shadow:none }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) input[type=radio]::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ink); transform:scale(0); transition:transform .1s }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) input[type=radio]:hover{ border-color:var(--ink) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) input[type=radio]:checked{ border-color:var(--ink) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) input[type=radio]:checked::before{ transform:scale(1) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) input[type=radio]:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }

/* ---- Gráficos: área con degradado, globo, barras con degradado (mesa de ayuda, Panel, Finanzas gerencial, portal) ---- */
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .vz-svg .vz-ln{ stroke-width:2.4 }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .vz-svg .vz-cross{ stroke:var(--vz-2); stroke-width:1.2; stroke-dasharray:3 3 }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .vz-svg .vz-dot,
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .vz-svg .vz-hdot{ stroke:var(--panel); stroke-width:2 }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .vz-key i.vz-sq{ border-radius:50% }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .vz-tip{ background:var(--tip); color:var(--tip-ink); border:0; border-radius:10px; box-shadow:0 14px 30px -12px color-mix(in srgb,var(--ink) 50%,transparent); padding:9px 12px }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .vz-tip-t{ color:color-mix(in srgb,var(--tip-ink) 70%,transparent) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .vz-tip-r span{ color:color-mix(in srgb,var(--tip-ink) 80%,transparent) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .vz-tip-k{ width:8px; height:8px; border-radius:50% }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .vz-hbar i{ height:14px; border-radius:0 7px 7px 0; background:linear-gradient(90deg,color-mix(in srgb,var(--vz-1) 30%,var(--panel)),var(--vz-1)) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .vz-hbar{ border-left-color:var(--line) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .vz-card .meter i{ position:relative; overflow:hidden }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .vz-card .meter i::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,color-mix(in srgb,var(--panel) 70%,transparent),transparent) }

/* Panel */
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tchart-hit .tg-guia{ stroke:var(--vz-2); stroke-width:1.2; stroke-dasharray:3 3; opacity:0 }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tchart-hit .tg-pt{ opacity:0; stroke:var(--panel); stroke-width:2 }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tchart-hit:hover .tg-guia,
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tchart-hit:hover .tg-pt{ opacity:1 }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tg-ln{ fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tchart-hit.tchart-hit:hover rect:first-child{ fill:transparent }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .chart-tip{ border-radius:10px }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-cifra{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:-2px 0 6px }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-cifra b{ font-family:var(--mono); font-size:24px; font-weight:600; letter-spacing:-.02em; font-feature-settings:"tnum" }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-cifra span{ font-size:12px; font-weight:600; color:var(--ok) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-cifra span.dn{ color:var(--danger) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .tb-cifra small{ font-size:12px; color:var(--muted) }

/* Finanzas gerencial (P&G y flujo de caja) */
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .chart .gl-ln{ fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .chart .gl-ut{ stroke-width:2.8 }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .chart .gl-hit{ fill:transparent }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .chart .gl-guia{ stroke:var(--line-strong); stroke-dasharray:3 3; opacity:0 }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .chart .gl-pt{ opacity:0; stroke:var(--panel); stroke-width:2 }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .chart .gl-tip{ opacity:0; pointer-events:none }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .chart .gl-tip rect{ fill:var(--tip) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .chart .gl-tip text{ fill:var(--tip-ink); font-size:11px }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .chart .gl-tip .gl-t{ font-weight:700; fill:color-mix(in srgb,var(--tip-ink) 70%,transparent) }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .chart .gl-col:hover .gl-guia,
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .chart .gl-col:hover .gl-pt,
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .chart .gl-col:hover .gl-tip{ opacity:1 }
html[data-diseno="tablero"] :is(#view,#modal,.wrap,dialog.dlg) .leyenda i{ border-radius:50% }