/* ================================================================================
   TABLERO GERENCIAL · CALIDAD COMERCIAL  (Gráficos → Gerenciales → Calidad Comercial)
   Estilos COPIADOS TAL CUAL del archivo que entregó MD
   ("Datos de MD/Dashboard_CEO_FTTH_Gerencial_Ejecutivo_Comercial.html"),
   con una sola diferencia: cada regla va encapsulada bajo #gcomRoot para que la
   estética del tablero (fondo gris, tipografía Inter, tablas negras con línea
   dorada) NO se derrame al resto del sistema.
   Se carga DESPUÉS de estilos.css, así #gcomRoot table/th/td le gana a las reglas
   generales por especificidad. Para revertir: borrar este archivo y su <link>.
   ================================================================================ */

#gcomRoot{--black:#0a0a0a;--yellow:#f2c300;--green:#15a34a;--red:#e12727;--gray:#595959;--bg:#eceff3;--card:#fff;--line:#d4dbe3;--text:#111827;--muted:#5e6b7d;}
#gcomRoot *{box-sizing:border-box}
#gcomRoot{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.35}
#gcomRoot .gc-header{background:#0a0a0a;color:#fff;padding:22px 20px 92px;border-bottom:6px solid var(--yellow)}
#gcomRoot .topline{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
#gcomRoot .logo{display:flex;align-items:center;gap:10px}
#gcomRoot .logo-mark{width:46px;height:46px;border-radius:10px;background:var(--yellow);color:#000;font-weight:900;font-size:22px;display:flex;align-items:center;justify-content:center}
#gcomRoot .logo-text{font-weight:900;letter-spacing:.04em}
#gcomRoot .period{font-size:clamp(30px,3vw,48px);font-weight:900;color:var(--yellow);text-transform:uppercase;letter-spacing:.03em}
#gcomRoot .title{margin:18px 0 10px;font-size:clamp(42px,4.8vw,68px);font-weight:900;line-height:1.04;max-width:1350px}
#gcomRoot .subtitle{max-width:1120px;font-size:clamp(18px,1.7vw,24px);color:#f3f4f6}
#gcomRoot .container{max-width:1560px;margin:-60px auto 0;padding:0 14px 28px}
#gcomRoot .kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
#gcomRoot .kpi-card{background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:0 8px 20px rgba(15,23,42,.08);padding:22px;position:relative;overflow:hidden}
#gcomRoot .kpi-card:before{content:'';position:absolute;top:0;left:0;width:100%;height:7px;background:var(--yellow)}
#gcomRoot .kpi-card.green:before{background:var(--green)}
#gcomRoot .kpi-card.red:before{background:var(--red)}
#gcomRoot .kpi-card.gray:before{background:var(--gray)}
#gcomRoot .kpi-card.black:before{background:#111}
#gcomRoot .kpi-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
#gcomRoot .kpi-icon{width:42px;height:42px;border-radius:14px;background:#eef2f7;display:flex;align-items:center;justify-content:center;font-size:22px}
#gcomRoot .kpi-label{font-size:15px;font-weight:900;color:#425a78;letter-spacing:.08em;text-transform:uppercase}
#gcomRoot .kpi-value{font-size:clamp(46px,4.7vw,72px);font-weight:900;color:#07152e;line-height:1}
#gcomRoot .kpi-foot{margin-top:8px;font-size:18px;color:#53627a}
#gcomRoot .section{background:var(--card);border:1px solid var(--line);border-radius:26px;box-shadow:0 8px 18px rgba(15,23,42,.05);padding:22px;margin-top:18px}
#gcomRoot .section h2{margin:0 0 6px;font-size:clamp(30px,2.8vw,42px);line-height:1.1}
#gcomRoot .desc{margin:0 0 14px;color:var(--muted);font-size:clamp(17px,1.35vw,21px)}
#gcomRoot .grid-2>*, #gcomRoot .grid-phones>*{min-width:0}
#gcomRoot .grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:start}
#gcomRoot .grid-phones{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
#gcomRoot .chart-wrap{width:100%;overflow-x:auto}
#gcomRoot .chart-svg{min-width:760px;max-width:100%;height:auto}
#gcomRoot .legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:10px;font-size:16px;font-weight:800;color:#374151}
#gcomRoot .legend span{display:inline-flex;align-items:center;gap:8px}
#gcomRoot .swatch{width:14px;height:14px;border-radius:4px;display:inline-block}
#gcomRoot .tablewrap{overflow:auto;border:1px solid var(--line);border-radius:18px}
#gcomRoot table{border-collapse:collapse;width:100%;min-width:650px}
#gcomRoot th{background:#000;color:#fff;padding:12px 10px;font-size:15px;text-align:left;border-bottom:3px solid var(--yellow)}
#gcomRoot td{padding:11px 10px;border-bottom:1px solid #e5e7eb;font-size:16px;vertical-align:top}
#gcomRoot tr:nth-child(even) td{background:#fafbfc}
#gcomRoot td.num{text-align:right;font-weight:900}
#gcomRoot .critical-row td{background:#fff1f2!important;color:#b91c1c}
#gcomRoot .chip{display:inline-flex;padding:4px 10px;border-radius:999px;font-weight:900;font-size:12px}
#gcomRoot .chip.critica{background:#fee2e2;color:#991b1b}
#gcomRoot .chip.alta{background:#fef3c7;color:#8a5a00}
#gcomRoot .callout{margin-top:14px;background:#111;color:#fff;border-left:6px solid var(--yellow);border-radius:16px;padding:14px 16px;font-size:15px;line-height:1.45}
#gcomRoot .formula-box{margin-top:14px;background:#fff7cc;border:1px solid #e4c548;border-left:6px solid var(--yellow);border-radius:16px;padding:14px 16px;font-size:15px;line-height:1.45;color:#1f2937}
#gcomRoot .top3-table{min-width:1180px}
#gcomRoot .top3-table .tipo-rechazo{font-weight:900;min-width:220px}
#gcomRoot .top3-table .total-tipo{color:#111;font-size:15px}
#gcomRoot .top3-table .topgrp{border-left:none}
#gcomRoot .top3-table .top1{background:#eef2f7!important}
#gcomRoot .top3-table .top2{background:#f8fafc!important}
#gcomRoot .top3-table .top3{background:#f1f5f9!important}
#gcomRoot .top3-table td.top2:not(.casos-top), #gcomRoot .top3-table td.top3:not(.casos-top){border-left:3px solid #cbd5e1}
#gcomRoot .top3-table .casos-top{border-right:none;color:#111}
#gcomRoot .matrix-table{min-width:1200px}
#gcomRoot .matrix-table th{font-size:12px;white-space:nowrap}
#gcomRoot .matrix-table td{font-size:13px;white-space:nowrap}
#gcomRoot .matrix-table .exec-name{font-weight:900;min-width:260px}
#gcomRoot .matrix-table .reject-total{color:var(--red);font-weight:900}
#gcomRoot .pct-badge{display:inline-block;background:var(--yellow);color:#111;padding:5px 9px;border-radius:8px;font-weight:900;min-width:58px;text-align:center}
#gcomRoot .heat-1{background:#fff7cc;font-weight:900}
#gcomRoot .heat-2{background:#ffe08a;font-weight:900}
#gcomRoot .heat-3{background:#e12727!important;color:#fff;font-weight:900}
#gcomRoot .total-row td{background:#0a0a0a!important;color:#fff!important;font-weight:900;border-top:3px solid var(--yellow)}
#gcomRoot .footer{text-align:center;color:#6b7280;font-size:12px;padding:18px 10px 26px}
@media(max-width:1100px){
  #gcomRoot .kpi-grid{grid-template-columns:repeat(2,1fr)}
  #gcomRoot .grid-2, #gcomRoot .grid-phones{grid-template-columns:1fr}
}
@media(max-width:700px){
  #gcomRoot .gc-header{padding:18px 14px 84px}
  #gcomRoot .container{padding:0 10px 20px}
  #gcomRoot .kpi-grid{grid-template-columns:1fr}
  #gcomRoot .title{font-size:32px}
  #gcomRoot .kpi-value{font-size:44px}
  #gcomRoot .section{padding:14px}
  #gcomRoot th, #gcomRoot td{font-size:12px;padding:9px 8px}
  #gcomRoot .chart-svg{min-width:700px}
}
/* Los dos bloques de teléfonos van a 2 columnas: el gráfico ya no necesita 820px de alto
   fijos ni el ancho mínimo grande — se adapta a su media pantalla y desliza si hace falta. */
#gcomRoot .contact-chart-enhanced .chart-wrap{min-height:0}
#gcomRoot .grid-phones .chart-svg{min-width:520px}
#gcomRoot .grid-phones table{min-width:420px}

/* ── Añadidos propios (no vienen del archivo) ─────────────────────────────────
   El archivo original es una página suelta; acá vive dentro de una pestaña, así
   que se le saca el alto de ventana y se le agregan el selector de período y los
   avisos de "este dato todavía no lo tenemos". */
#gcomRoot { display:block; border-radius:18px; overflow:hidden; }
#gcomRoot .container { max-width:none; }
/* Aviso de dato faltante: se ve, pero no finge un número */
#gcomRoot .gcom-falta { background:#fff7cc; border:1px solid #e4c548; border-left:6px solid var(--yellow); border-radius:16px; padding:14px 16px; font-size:15px; line-height:1.45; color:#1f2937; }
#gcomRoot .gcom-falta b { color:#8a5a00; }
#gcomRoot .kpi-card.gcom-stop { opacity:.55; }
#gcomRoot .kpi-card.gcom-stop .kpi-value { font-size:26px; color:#8a5a00; }
#gcomRoot .gcom-vacio { color:#6b7280; font-size:16px; padding:14px 4px; }
/* En el teléfono el tablero se ve completo deslizando de costado (igual que los otros) */
#gcomRoot .chart-wrap { -webkit-overflow-scrolling:touch; }

/* ── Sub-navegación de Gerenciales (los 4 tableros). Vive FUERA de #gcomRoot,
   así que va con su propio prefijo. Misma estética que la sub-nav de Gráficos. */
#dashboard-gerenciales .ger-subnav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
#dashboard-gerenciales .ger-tab { cursor: pointer; border: 2px solid #d8e0ea; background: #fff; color: #171717;
    border-radius: 9px; padding: 9px 16px; font-size: 0.9rem; font-weight: 700; font-family: inherit; }
#dashboard-gerenciales .ger-tab.on { background: #171717; border-color: #171717; color: #fff; }