:root{
  --ink:#0b1220;
  --stroke: rgba(15,23,42,.08);
}
body{ color: var(--ink); }

.bg-navy{
  background:
    radial-gradient(1200px 520px at 18% 0%, rgba(32,88,178,.45) 0%, rgba(7,27,58,1) 55%, rgba(4,14,31,1) 100%);
  min-height:100vh;
}
.nav-glass{
  background: linear-gradient(90deg, rgba(10,39,83,.92), rgba(6,27,58,.92));
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}

/* Navbar: botones y logo */
.brand-logo{
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.nav-pill{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem .72rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.74) !important;
  transition: all .15s ease;
}
.nav-pill:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.30);
  color: #fff !important;
}
.nav-pill.active{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.38);
  color: #fff !important;
}
.glass{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  backdrop-filter: blur(10px);
}

.filter{ min-width: 170px; }
.filter .form-label{ color: rgba(255,255,255,.78); margin-bottom:4px; font-size:.82rem; }

.kpi{
  background: rgba(255,255,255,.96);
  border-radius: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  height: 100%;
}
.kpi-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.kpi-value{
  font-weight: 900;
  font-size: 2rem;
  line-height: 1;
}
.kpi-label{
  font-size: .82rem;
  color: rgba(15,23,42,.62);
  margin-top: 6px;
}
.kpi-sub{
  font-size: .78rem;
  color: rgba(15,23,42,.55);
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.75);
  font-size: .8rem;
  color: rgba(2,6,23,.70);
}

.panel{
  background: rgba(255,255,255,.96);
  border-radius: 18px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  height: 100%;
}
.panel-title{
  font-weight: 900;
  font-size: .95rem;
  color: rgba(2,6,23,.78);
  margin: 2px 0 10px 2px;
}
.chart-wrap{ position: relative; height: 260px; }
.chart-wrap.sm{ height: 220px; }
.chart-wrap.lg{ height: 320px; }

/* Tabulator */
.tabulator{
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 14px;
  overflow: hidden;
  font-size: 12px;
}
.tabulator .tabulator-header{
  font-weight: 800;
  background: rgba(2,6,23,.02);
}
.tabulator .tabulator-row:nth-child(even){
  background: rgba(2,6,23,.02);
}

/* Loading overlay */
.loading-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(3,10,24,.55);
  z-index: 2000;
  backdrop-filter: blur(4px);
}
.loading-overlay.show{ display:flex; }
.loading-box{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 16px;
  padding: 14px 18px;
  font-weight: 700;
}


/* Mejorar contraste de etiquetas en filtros (sobre fondo oscuro) */
.glass .form-label{
  color: rgba(255,255,255,.92) !important;
  font-weight: 800;
  letter-spacing: .2px;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.glass .form-select,
.glass .form-control{
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}
.glass .form-select:focus,
.glass .form-control:focus{
  outline: none;
  border-color: rgba(255,255,255,.85);
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.18);
}


/* Tabs (Detalle analítico) */
.nav-tabs-clean{
  border-bottom: 1px solid rgba(2,6,23,.10);
}
.nav-tabs-clean .nav-link{
  border: none;
  color: rgba(2,6,23,.72);
  font-weight: 800;
  padding: .55rem .9rem;
  border-radius: 12px 12px 0 0;
}
.nav-tabs-clean .nav-link:hover{
  color: rgba(2,6,23,.92);
  background: rgba(2,6,23,.03);
}
.nav-tabs-clean .nav-link.active{
  color: rgba(2,6,23,.92);
  background: rgba(2,6,23,.04);
  box-shadow: inset 0 -2px 0 rgba(37,99,235,.75);
}

/* Tabulator: fondo blanco, sin "gris" en área vacía */
.table-host .tabulator{
  border-radius: 14px;
  background: #fff !important;
}
.table-host .tabulator .tabulator-tableholder{
  background: #fff !important;
}
.table-host .tabulator .tabulator-placeholder{
  padding: 24px 10px;
  font-weight: 800;
  color: rgba(2,6,23,.55);
}

/* Totales (bottom calcs) más gerencial */
.table-host .tabulator .tabulator-calcs-holder{
  background: rgba(2,6,23,.03);
  font-weight: 900;
}


/* =============================
   Tabulator look & feel
   ============================= */
.tabulator{border-radius:14px;overflow:hidden;}
.tabulator .tabulator-header{background:#f1f5f9;border-bottom:1px solid rgba(2,6,23,.12);}
.tabulator .tabulator-col{background:transparent;}
.tabulator .tabulator-col-title{font-weight:800;color:rgba(2,6,23,.86);}
.tabulator .tabulator-tableholder,.tabulator .tabulator-table{background:#fff !important;}
.tabulator .tabulator-row{border-bottom:1px solid rgba(2,6,23,.06);}
.tabulator .tabulator-row.tabulator-row-even{background:rgba(2,6,23,.015);}
.tabulator .tabulator-row.tabulator-selectable:hover{background:rgba(37,99,235,.08);}
.tabulator .tabulator-footer{background:rgba(2,6,23,.02);border-top:1px solid rgba(2,6,23,.08);}

/* ===== Chart sizing ===== */
.chart-wrap.sm{ height: 240px; }
.chart-wrap.md{ height: 380px; }
.chart-wrap.prov{ height: 420px; }

/* ===== Helper text ===== */
.hint{
  font-size: .85rem;
  color: rgba(2,6,23,.60);
}

/* ===== Tabulator polish ===== */
.table-host .tabulator{
  border: 1px solid rgba(2,6,23,.12);
  border-radius: 14px;
  overflow: hidden;
}
.table-host .tabulator .tabulator-header{
  background: rgba(2,6,23,.035);
}
.table-host .tabulator .tabulator-col .tabulator-col-content{
  padding: 10px 10px;
}
.table-host .tabulator .tabulator-row:hover{
  background: rgba(37,99,235,.06);
}
.table-host .tabulator .tabulator-cell{
  padding: 8px 10px;
}
.table-host .tabulator .tabulator-cell.cell-wrap{
  white-space: normal !important;
  line-height: 1.1;
}


/* ====== V5: filtros y barras (% variables) ====== */

.checklist{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(2,6,23,.10);
  border-radius: 10px;
  padding: 10px 10px 6px 10px;
  max-height: 118px;
  overflow: auto;
}
.checklist .chk{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.85rem;
  padding: 2px 0;
  color: #0f172a;
}
.checklist .chk-tools{
  display:flex;
  gap:8px;
  margin-top: 6px;
}
.btn-xs{
  padding: .15rem .5rem;
  font-size: .75rem;
  border-radius: 999px;
}

.dual-range{
  position: relative;
  height: 22px;
}
.dual-range .range{
  position:absolute;
  left:0; right:0;
  top: 2px;
  width:100%;
  pointer-events:none; /* allow top to take events via thumb */
  -webkit-appearance:none;
  background: transparent;
}
.dual-range .range::-webkit-slider-thumb{
  pointer-events:auto;
  -webkit-appearance:none;
  height: 16px;
  width: 16px;
  border-radius: 999px;
  background: #0ea5e9;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 10px rgba(2,6,23,.25);
}
.dual-range .range::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(2,6,23,.12);
}
.range-meta{
  display:flex;
  gap:10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* Tabulator: barras de % por variable */
.vbar{
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: rgba(2,6,23,.08);
  overflow: hidden;
}
.vbar .vbar-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  background: rgba(14,165,233,.75);
}
.vbar .vbar-txt{
  position:absolute;
  right:6px; top:0;
  font-size: 11px;
  line-height: 16px;
  color: #0f172a;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
}


/* ====== V6: Tabulator polish (Cumplimiento) ====== */

/* Tabla jerárquica más gerencial */
#tbl_tree .tabulator{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 18px 50px rgba(2,6,23,.10);
}
#tbl_tree .tabulator-header{
  background: linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.02));
  border-bottom: 1px solid rgba(2,6,23,.10);
}
#tbl_tree .tabulator-col{
  background: transparent !important;
}
#tbl_tree .tabulator-col-title{
  font-weight: 800;
  color: #0f172a;
  font-size: 13px;
}
#tbl_tree .tabulator-row{
  font-size: 13px;
}
#tbl_tree .tabulator-row.tabulator-row-even{
  background: rgba(2,6,23,.02);
}
#tbl_tree .tabulator-row:hover{
  background: rgba(14,165,233,.08) !important;
}
#tbl_tree .tabulator-cell{
  padding: 10px 10px;
  border-right: 1px solid rgba(2,6,23,.06);
}
#tbl_tree .tabulator-group{
  font-weight: 800;
}

/* Barras (%) - con semáforo */
.vbar.p-high .vbar-fill{ background: rgba(16,185,129,.80); }   /* verde */
.vbar.p-good .vbar-fill{ background: rgba(14,165,233,.80); }   /* celeste */
.vbar.p-mid  .vbar-fill{ background: rgba(245,158,11,.80); }   /* ámbar */
.vbar.p-low  .vbar-fill{ background: rgba(244,63,94,.80); }    /* rojo */
.vbar .vbar-txt{
  left: 8px;
  right: 8px;
  text-align: right;
  mix-blend-mode: normal;
}

/* Evitar que Ubicación se rompa feo */
#tbl_tree .tabulator-cell[tabulator-field="UBICACION"]{
  white-space: normal;
  line-height: 1.15;
}


/* =========================
   Heatmap (Sello municipal)
   ========================= */
.heatmap-wrap{
  overflow:auto;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: rgba(255,255,255,.88);
}

table.heatmap{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1100px;
}

table.heatmap th,
table.heatmap td{
  padding: .45rem .55rem;
  font-size: .86rem;
  border-bottom: 1px solid rgba(15,23,42,.08);
  border-right: 1px solid rgba(15,23,42,.06);
  vertical-align: middle;
}

table.heatmap th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(255,255,255,.97);
  font-weight: 900;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .02em;
}

table.heatmap td.sticky-col,
table.heatmap th.sticky-col{
  position: sticky;
  left: 0;
  z-index: 4;
  background: rgba(255,255,255,.97);
  font-weight: 900;
}

table.heatmap td.sticky-col{
  z-index: 2;
}

.heatcell{
  text-align: center;
  font-weight: 900;
  border-radius: 10px;
}

.heat-red{ background: rgba(239,68,68,.18); }
.heat-amber{ background: rgba(245,158,11,.18); }
.heat-green{ background: rgba(34,197,94,.18); }