/* ============================================================================
   estilos-ger-asistencias.css — Tablero Gerencial · Analítica de Asistencias
   ----------------------------------------------------------------------------
   Estética calcada del archivo que entregó MD
   ("dashboard_entel_asistencias_junio2026_corregido_v4_matriz.html"),
   ENCAPSULADA bajo #gasisRoot para que no se filtre al resto del sistema.
   Todo selector empieza con #gasisRoot a propósito: así estas reglas no pisan
   las tablas/tipografías de la app ni al revés.

   Va DESPUÉS de estilos.css (igual que estilos-gerencial.css del tablero
   Calidad Comercial), para ganar por especificidad dentro de su contenedor.
   ============================================================================ */

#gasisRoot{
  --navy:#08193a; --gold:#e8b41a; --red:#e3382b; --green:#28a745;
  --orange:#f59e0b; --purple:#6f42c1; --blue:#1d4ed8;
  --bg:#eef2f7; --card:#ffffff; --line:#d9e2ef; --text:#0f172a;
  background:var(--bg); color:var(--text);
  font-family:Inter,-apple-system,'Segoe UI',Arial,sans-serif;
  border-radius:14px; overflow:hidden; margin-top:4px;
}
#gasisRoot *{box-sizing:border-box}

/* ── Barra de control (mes + acciones) — propia del sistema, no del archivo ── */
#gasisRoot .gasis-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;background:#fff;border-bottom:1px solid var(--line)}
#gasisRoot .gasis-bar label{font-size:.82rem;font-weight:800;color:#24344e;text-transform:uppercase;letter-spacing:.02em}
#gasisRoot .gasis-bar select{padding:8px 12px;border:1px solid #ccd6e4;border-radius:9px;font-family:inherit;font-weight:700;color:#171717;background:#f7f9fc;cursor:pointer}
#gasisRoot .gasis-bar .sp{margin-left:auto;display:flex;gap:8px}
#gasisRoot .gasis-btn{background:#0f223f;color:#fff;border:1px solid #ffffff22;padding:8px 13px;border-radius:10px;cursor:pointer;font-weight:700;font-family:inherit;font-size:.85rem}
#gasisRoot .gasis-btn:hover{background:#16305a}
#gasisRoot .gasis-nota{padding:9px 18px;background:#fff8e6;border-bottom:1px solid #f0e0b0;color:#5c4708;font-size:.8rem;line-height:1.45}

/* ── Cabecera negra con filo dorado ── */
#gasisRoot .header{background:#000;color:#fff;border-bottom:6px solid var(--gold)}
#gasisRoot .header-inner{padding:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
#gasisRoot .brand{display:flex;align-items:center;gap:20px}
#gasisRoot .logo-box{display:flex;align-items:center;gap:10px}
#gasisRoot .logo-mark{width:64px;height:64px;border-radius:14px;background:linear-gradient(135deg,#0b1730,#132d60);display:grid;place-items:center;color:#fff;font-weight:900;font-family:Manrope,Inter,sans-serif;border:2px solid #ffffff22}
#gasisRoot .logo-mark:before{content:"MD";font-size:24px;letter-spacing:-.06em}
#gasisRoot .logo-text{font-weight:800;line-height:1;color:#f2c430;font-size:12px;text-transform:uppercase}
#gasisRoot .headlines h1{margin:0;font-family:Manrope,Inter,sans-serif;font-size:clamp(22px,2.6vw,34px);line-height:1.02;letter-spacing:-.03em;color:#fff}
#gasisRoot .headlines .sub{margin-top:4px;font-size:clamp(14px,1.6vw,20px);font-weight:800;letter-spacing:.02em}
#gasisRoot .badge{background:#1d2740;border:1px solid #ffffff1f;color:#fff;padding:10px 14px;border-radius:16px;font-weight:700}

#gasisRoot .container{padding:0 18px 24px}
#gasisRoot .section{margin-top:16px}
#gasisRoot .grid-top{display:grid;grid-template-columns:1.6fr 1fr;gap:14px}
#gasisRoot .card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 22px rgba(10,26,54,.08)}
#gasisRoot .summary-card{padding:18px 18px 14px;border-left:4px solid var(--gold)}
#gasisRoot .summary-card h2{margin:0 0 8px;font-family:Manrope,Inter,sans-serif;font-size:20px}
#gasisRoot .summary-card p{margin:0;color:#273449;font-size:15px;line-height:1.5}

/* ── Tarjeta central con la dona del % que no aplica ── */
#gasisRoot .central-card{padding:16px;background:linear-gradient(180deg,#0a2048,#081734);color:#fff;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(120px,.8fr);align-items:center;gap:12px}
#gasisRoot .central-card .label{font-size:12px;font-weight:800;text-transform:uppercase;color:#dbe6fb}
#gasisRoot .central-card .big{font-family:Manrope,Inter,sans-serif;font-size:52px;line-height:.96;font-weight:700;letter-spacing:-.04em;margin:6px 0 8px}
#gasisRoot .central-card .desc{font-size:13px;line-height:1.28;color:#e5ecfa;max-width:340px}
#gasisRoot .legend-list{margin-top:10px;font-size:11px;line-height:1.45}
#gasisRoot .legend-item{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#fff}
#gasisRoot .sw{width:10px;height:10px;border-radius:2px;display:inline-block;flex:0 0 auto}
#gasisRoot .small-donut{position:relative;width:116px;height:116px;margin-left:auto;margin-right:8px}
#gasisRoot .small-donut .center{position:absolute;inset:0;display:grid;place-items:center;font-family:Manrope,Inter,sans-serif;font-size:16px;font-weight:700;line-height:1;text-align:center;pointer-events:none}
#gasisRoot .central-card canvas{max-width:100%;max-height:100%}

/* ── KPIs e Impacto ── */
#gasisRoot .kpi-row,#gasisRoot .impact-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
#gasisRoot .kpi,#gasisRoot .impact{padding:16px 14px 12px;border-radius:16px;border:1px solid #dbe4f1;background:#fff;position:relative;overflow:hidden}
#gasisRoot .kpi:after,#gasisRoot .impact:after{content:"";position:absolute;right:-12px;top:-12px;width:74px;height:74px;border-radius:50%;background:rgba(245,180,11,.12)}
#gasisRoot .kpi .icon,#gasisRoot .impact .icon{font-size:28px;position:absolute;left:14px;top:14px}
#gasisRoot .kpi .label,#gasisRoot .impact .label{margin-left:50px;color:#24344e;font-size:12px;font-weight:800;text-transform:uppercase;line-height:1.2}
#gasisRoot .kpi .value,#gasisRoot .impact .value{margin-top:6px;margin-left:50px;font-family:Manrope,Inter,sans-serif;font-size:28px;font-weight:800;letter-spacing:-.04em}
#gasisRoot .kpi .sub,#gasisRoot .impact .sub{margin-top:4px;color:#52637a;font-size:13px;line-height:1.3}
#gasisRoot .kpi.blue,#gasisRoot .impact.blue{border-bottom:4px solid #1d4ed8}
#gasisRoot .kpi.red,#gasisRoot .impact.red{border-bottom:4px solid #ef4444}
#gasisRoot .kpi.purple,#gasisRoot .impact.purple{border-bottom:4px solid #7c3aed}
#gasisRoot .kpi.green,#gasisRoot .impact.green{border-bottom:4px solid #16a34a}
#gasisRoot .kpi.orange,#gasisRoot .impact.orange{border-bottom:4px solid #f59e0b}

#gasisRoot .section-title{margin:6px 0 4px;font-family:Manrope,Inter,sans-serif;font-size:13px;font-weight:800;color:#12213f;text-transform:uppercase;letter-spacing:.02em}
#gasisRoot .note{font-size:13px;color:#42556f;line-height:1.45}
#gasisRoot .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#gasisRoot .panel{padding:0;overflow:hidden}
#gasisRoot .panel-head{background:var(--navy);color:#fff;padding:10px 14px;font-family:Manrope,Inter,sans-serif;font-size:13px;font-weight:800;text-transform:uppercase;border-bottom:4px solid var(--gold)}
#gasisRoot .panel-body{padding:10px 14px 14px}
#gasisRoot .chart-wrap{height:270px;position:relative}
#gasisRoot .chart-wrap.sm{height:220px}
#gasisRoot .chart-wrap.md{height:300px}
#gasisRoot .chart-wrap.lg{height:340px}
#gasisRoot .impact-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
#gasisRoot .impact-mini-title{margin:0 0 4px;text-align:center;font-family:Manrope,Inter,sans-serif;font-size:12px;font-weight:800;color:#24344e;text-transform:uppercase;letter-spacing:.03em}

/* ── Tabla Top 10 ── */
#gasisRoot .table-wrap{overflow-x:auto}
#gasisRoot table.data{width:100%;border-collapse:collapse;font-size:12px}
#gasisRoot table.data thead th{background:#0b1730;color:#fff;padding:8px;border-bottom:3px solid var(--gold);text-align:left;white-space:nowrap}
#gasisRoot table.data tbody td{padding:8px;border-bottom:1px solid #e4ebf4;vertical-align:middle}
#gasisRoot table.data tbody tr:nth-child(even){background:#fafcff}
#gasisRoot .pill{padding:2px 8px;border-radius:999px;font-weight:800;font-size:11px;display:inline-block;min-width:20px;text-align:center}
#gasisRoot .pill.red{background:#fde2df;color:#b42318}
#gasisRoot .pill.green{background:#def7e5;color:#176a3a}
#gasisRoot .subsection{margin:8px 0 6px;font-family:Manrope,Inter,sans-serif;font-size:15px;font-weight:800}
#gasisRoot .subsection .redtxt{color:var(--red)}

/* ── Matriz de calor: síntoma declarado vs causa real ── */
#gasisRoot .quality-title{font-family:Manrope,Inter,sans-serif;font-size:18px;font-weight:800;margin:0 0 4px}
#gasisRoot .quality-sub{margin:0 0 10px;color:#364962;line-height:1.45}
#gasisRoot .quality-sub .redtxt{color:var(--red);font-weight:800}
#gasisRoot .quality-sub .greentxt{color:#1e8a4d;font-weight:800}
#gasisRoot .heat-container{overflow-x:auto}
#gasisRoot table.heat{width:100%;table-layout:fixed;border-collapse:collapse;font-size:12px;min-width:720px}
#gasisRoot table.heat th,#gasisRoot table.heat td{border:1px solid #e4ebf4;padding:8px 6px;text-align:center;word-break:break-word}
#gasisRoot table.heat th{background:#f6f9fc;color:#304157;font-size:10.5px;line-height:1.2}
#gasisRoot table.heat .lefthead{background:#07173a;color:#fff;text-align:left;width:180px}
#gasisRoot table.heat .redhead{background:#fbe3e0;color:#8d2b21}
#gasisRoot table.heat .rowlabel{background:#f8fafc;text-align:left;font-weight:700;width:180px;line-height:1.2}
#gasisRoot .heatcell{font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:16px}
#gasisRoot .totalcell{background:#eef3f9;font-weight:800;color:#1f2f47}
#gasisRoot .totalcol{background:#dce5f2 !important;color:#24364e !important}
#gasisRoot .grandleft{background:#07173a;color:#fff;font-weight:800;text-align:left}
#gasisRoot .grandnum{background:#eef3f9;font-weight:800;color:#1d2d44}
#gasisRoot .grandtotal{background:#cbd7e8;font-weight:900;color:#081224}

#gasisRoot .footer-note{margin-top:14px;font-size:12px;color:#5a6c83;text-align:right}
#gasisRoot .gasis-vacio{padding:26px 14px;text-align:center;color:#7b8798;font-size:13px;line-height:1.5}

@media (max-width:1100px){
  #gasisRoot .grid-top,#gasisRoot .grid-2,#gasisRoot .kpi-row,#gasisRoot .impact-row{grid-template-columns:1fr}
  #gasisRoot .central-card{grid-template-columns:1fr}
  #gasisRoot .central-card .big{font-size:44px}
  #gasisRoot .small-donut{margin:6px auto 0}
}
@media (max-width:760px){
  #gasisRoot .impact-pair{grid-template-columns:1fr}
}