/* ARCHIVO GENERADO por sitio/armar_tablero_sg.py a partir de css/so-gerencial.css: no lo edite a mano.
   El tablero gerencial de la portada de SO Gerencial, para el inicio. Todo va dentro de .tablero-sg. */
/* ---------- Ventana del tablero (portada) ---------- */
.tablero-sg .ventana{position:relative;background:#fff;border:1px solid var(--linea);border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(42,47,57,.18)}
.tablero-sg .ventana-barra{display:flex;align-items:center;gap:12px;padding:9px 14px;background:#f6f7f9;border-bottom:1px solid var(--linea);font-size:12.5px;color:var(--tenue)}
.tablero-sg .ventana-barra .luces{display:flex;gap:6px}
.tablero-sg .ventana-barra .luces i{width:10px;height:10px;border-radius:50%;background:#e2e5ea}
.tablero-sg .ventana-barra .luces i:first-child{background:#ff5f57}.tablero-sg .ventana-barra .luces i:nth-child(2){background:#febc2e}.tablero-sg .ventana-barra .luces i:nth-child(3){background:#28c840}

/* ---------- Escenas: base común ---------- */
.tablero-sg .esc{position:relative;container-type:inline-size}
.tablero-sg .esc-in{font-size:clamp(7.5px,2.3cqw,13px);line-height:1.35;transition:opacity .45s ease}
.tablero-sg .esc.reinicia .esc-in{opacity:0}
.tablero-sg .esc.sin-trans *,.tablero-sg .esc.sin-trans{transition:none!important;animation:none!important}
.tablero-sg .esc svg{width:1.2em;height:1.2em;flex:none}
.tablero-sg .esc-cab{display:flex;justify-content:space-between;align-items:baseline;gap:1em;margin-bottom:1.1em}
.tablero-sg .esc-cab > b{font-family:var(--titulos);font-size:1.3em;font-weight:700}
.tablero-sg .esc-cab > span{color:var(--tenue);font-size:.95em;font-weight:600}
.tablero-sg .esc dl{margin:.6em 0 0}
.tablero-sg .esc dl div{display:flex;justify-content:space-between;gap:1em;padding:.4em .5em;border-radius:.45em;transition:background-color .3s ease}
.tablero-sg .esc dt{color:var(--tenue);font-size:.9em}
.tablero-sg .esc dd{margin:0;font-weight:600;font-size:.93em;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Tablero gerencial de la portada ---------- */
.tablero-sg .tb{display:grid;grid-template-columns:10em 1fr;background:#f6f7f9;font-size:clamp(7px,1.95cqw,12.5px)}
.tablero-sg .tb-lado{background:#2a2f39;color:#b8bdc8;padding:1.1em .7em;display:flex;flex-direction:column;gap:.3em}
.tablero-sg .tb-marca{font-family:var(--titulos);font-weight:700;color:#fff;background:var(--violeta);width:2.5em;height:2.5em;border-radius:.65em;display:grid;place-items:center;margin:0 0 .9em .3em}
.tablero-sg .tb-lado span:not(.tb-marca){display:flex;align-items:center;gap:.55em;padding:.55em .6em;border-radius:.6em;white-space:nowrap}
.tablero-sg .tb-lado .activo{background:rgba(107,70,252,.28);color:#fff}
.tablero-sg .tb-cuerpo{padding:1em;display:grid;gap:.8em;min-width:0}
.tablero-sg .tb-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.7em}
.tablero-sg .kpi{background:#fff;border:1px solid var(--linea);border-radius:.8em;padding:.75em .85em;min-width:0}
.tablero-sg .kpi span{display:block;font-size:.88em;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tablero-sg .kpi b{display:block;font-family:var(--titulos);font-size:1.75em;font-weight:700;margin-top:.1em;font-variant-numeric:tabular-nums;white-space:nowrap}
.tablero-sg .kpi em{font-style:normal;font-size:.84em;font-weight:600;white-space:nowrap}
.tablero-sg .kpi .sube{color:var(--verde)}
.tablero-sg .kpi .neutro{color:var(--tenue)}
.tablero-sg .kpi.destacado{background:var(--violeta);border-color:var(--violeta);color:#fff}
.tablero-sg .kpi.destacado span,.tablero-sg .kpi.destacado em{color:#e6e0ff}
.tablero-sg .tb-fila{display:grid;grid-template-columns:1.3fr 1fr;gap:.8em}
.tablero-sg .tb-panel{background:#fff;border:1px solid var(--linea);border-radius:.8em;padding:.85em .95em;min-width:0}
.tablero-sg .tb-tit{display:flex;align-items:center;justify-content:space-between;gap:.5em;font-weight:600;font-size:.98em}
.tablero-sg .ley{display:flex;align-items:center;gap:.4em;font-weight:500;color:var(--tenue);font-size:.85em}
.tablero-sg .ley i{display:inline-block;width:.7em;height:.7em;border-radius:.2em}
.tablero-sg .ley i.egr{margin-left:.5em}
.tablero-sg .tb .ing{background:var(--violeta)}
.tablero-sg .tb .egr{background:#c9cdd6}
.tablero-sg .barras{display:flex;align-items:flex-end;gap:.7em;height:9.5em;margin:.8em 0 1.5em;border-bottom:1px solid var(--linea)}
.tablero-sg .mes{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:.22em}
.tablero-sg .mes i{width:36%;height:var(--h);border-radius:.3em .3em 0 0;transform:scaleY(0);transform-origin:bottom;
  transition:transform .8s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .08s)}
.tablero-sg .mes span{position:absolute;top:100%;margin-top:.35em;font-size:.82em;color:var(--tenue)}
.tablero-sg .p2 .mes i{transform:none}
.tablero-sg .tb-total{display:block;font-family:var(--titulos);font-size:1.6em;font-weight:700;margin-top:.2em}
.tablero-sg .edades{display:flex;height:.95em;border-radius:.5em;overflow:hidden;margin:.55em 0 .7em;background:#eef0f4;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.3,.7,.2,1)}
.tablero-sg .edades i{width:var(--w)}
.tablero-sg .p3 .edades{clip-path:inset(0)}
.tablero-sg .e1{background:#33a875}.tablero-sg .e2{background:#9b82ff}.tablero-sg .e3{background:#e3a43c}.tablero-sg .e4{background:#d4574d}
.tablero-sg .edades-ley{list-style:none;margin:0;padding:0}
.tablero-sg .edades-ley li{display:flex;align-items:center;gap:.5em;font-size:.88em;padding:.16em 0;opacity:0;transition:opacity .4s ease}
.tablero-sg .edades-ley li:nth-child(2){transition-delay:.12s}.tablero-sg .edades-ley li:nth-child(3){transition-delay:.24s}.tablero-sg .edades-ley li:nth-child(4){transition-delay:.36s}
.tablero-sg .edades-ley i{width:.65em;height:.65em;border-radius:50%}
.tablero-sg .edades-ley b{margin-left:auto;font-variant-numeric:tabular-nums}
.tablero-sg .p3 .edades-ley li{opacity:1}
.tablero-sg .tb-vivo .tb-tit{justify-content:flex-start}
.tablero-sg .punto-vivo{width:.6em;height:.6em;border-radius:50%;background:#22c55e;animation:sgLatido 1.6s ease-out infinite}
@keyframes sgLatido{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}100%{box-shadow:0 0 0 .7em rgba(34,197,94,0)}}
.tablero-sg .feed{list-style:none;margin:.6em 0 0;padding:0;display:grid;gap:.4em;height:calc(3 * 2.9em + 2 * .4em);overflow:hidden}
.tablero-sg .feed li{min-width:0;display:flex;align-items:center;gap:.65em;height:2.9em;padding:0 .65em;border-radius:.6em;background:#f6f7f9;font-size:.9em;box-sizing:border-box}
.tablero-sg .feed.baja li{animation:sgFeedBaja .55s cubic-bezier(.2,.8,.2,1)}
.tablero-sg .feed.baja li:first-child{animation:sgFeedEntra .55s ease-out}
@keyframes sgFeedBaja{from{transform:translateY(-3.3em)}}
@keyframes sgFeedEntra{from{opacity:0;transform:translateY(-1em)}}
.tablero-sg .fi{width:1.95em;height:1.95em;border-radius:.5em;display:grid;place-items:center;flex:none}
.tablero-sg .fi svg{width:1.1em;height:1.1em}
.tablero-sg .t-ok{background:var(--verde-cl);color:var(--verde)}
.tablero-sg .t-doc,.tablero-sg .t-correo{background:var(--violeta-cl);color:var(--violeta-2)}
.tablero-sg .t-alerta{background:var(--ambar-cl);color:var(--ambar)}
.tablero-sg .t-banco{background:#e6f0fb;color:#2563a8}
.tablero-sg .t-tel{overflow:hidden;background:#f1edff}
.tablero-sg .t-tel svg{width:100%;height:100%}
.tablero-sg .ft{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--carbon-2)}
.tablero-sg .ft b{color:var(--carbon);font-weight:600;margin-right:.4em}
.tablero-sg .feed time{margin-left:auto;flex:none;color:var(--tenue);font-size:.86em}

/* en pantallas angostas el tablero se reacomoda: sin menú lateral, cifras de a dos y paneles uno debajo del otro */
@container (max-width:560px){
  .tablero-sg .tb{grid-template-columns:1fr;font-size:clamp(8.5px,2.9cqw,12px)}
  .tablero-sg .tb-lado{display:none}
  .tablero-sg .tb-kpis{grid-template-columns:1fr 1fr}
  .tablero-sg .tb-fila{grid-template-columns:1fr}
}


@media (prefers-reduced-motion: reduce){
  .tablero-sg .punto-vivo{animation:none}
}