@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   Design System — IGAC Red Activa GNSS
   Fuente: Inter (Google Fonts)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Marca IGAC ────────────────────────────────────────────────────────── */
    --color-primary:       #1e3569;   /* navy IGAC — brand color */
    --color-primary-light: #2f57bbc9;   /* navy medio */
    --color-primary-dark:  #152549;   /* navy profundo */
    --color-accent:        #d97706;   /* amber-600 — más rico que el anterior */

    /* ── Estados — colores semánticos, sin transparencias ───────────────────── */
    --color-activa:        #059669;   /* emerald-600 — más vibrante, par con navy */
    --color-activa-bg:     #d1fae5;   /* emerald-100 */
    --color-activa-text:   #065f46;   /* emerald-900 */

    --color-inactiva:        #e11d48;   /* rose-600 — cálido, moderno, sin alpha */
    --color-inactiva-bg:     #ffe4e6;   /* rose-100 — sutil para fondos/badges */
    --color-inactiva-bg-chart: #e11d48; /* red-400 — rojo más intenso en gráficas */
    --color-inactiva-text:   #9f1239;   /* rose-900 */

    --color-vandal:        #7c3aed;   /* violet-700 */
    --color-vandal-bg:     #ede9fe;   /* violet-100 */
    --color-vandal-text:   #4c1d95;   /* violet-900 */

    --color-pasiva:        #475569;   /* slate-600 */
    --color-pasiva-bg:     #e2e8f0;   /* slate-200 */
    --color-pasiva-text:   #334155;   /* slate-700 */
    --color-pasiva-highlight:    #b45309;   /* amber-700 */
    --color-pasiva-highlight-bg: #fef3c7;   /* amber-100 */
    --color-pasiva-promedio:     #0f766e;   /* teal-700 */
    --color-pasiva-promedio-bg:  #ccfbf1;   /* teal-100 */

    /* ── Superficie — neutrales slate sistemáticos ─────────────────────────── */
    --bg:           #f1f5f9;   /* slate-100 */
    --surface:      #ffffff;
    --border:       #e2e8f0;   /* slate-200 */
    --border-light: #f8fafc;   /* slate-50  */

    /* ── Texto — jerarquía de contraste clara ───────────────────────────────── */
    --text:         #0f172a;   /* slate-950 */
    --text-muted:   #475569;   /* slate-600 */
    --text-light:   #94a3b8;   /* slate-400 */

    /* ── Sombras con tinte del brand navy ────────────────────────────────────── */
    --shadow-sm:  0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
    --shadow-md:  0 4px 16px rgba(15,23,42,.09), 0 2px 6px rgba(15,23,42,.05);
    --shadow-lg:  0 10px 30px rgba(15,23,42,.13);

    /* ── Radio ──────────────────────────────────────────────────────────────── */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;

    /* ── Tipografía ─────────────────────────────────────────────────────────── */
    --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-metric: 'Inter', sans-serif;

    /* ── Espaciado responsivo (se sobreescribe en breakpoints) ──────────────── */
    --sp-layout:   10px;   /* padding / gap del app-layout */
    --sp-panel:    16px;   /* padding interno del data-panel */
    --sp-gap:      10px;   /* gap entre elementos del panel */
    --sp-card:     13px 14px; /* padding de kpi-card */
    --sp-card-sm:  10px 14px; /* padding kpi-entity-card */
    --header-h:    3rem;
    --kpi-total-h: 6rem;
    --kpi-donut-sz: clamp(72px, 7vw, 88px);
    --kpi-val-fs:   clamp(1rem, 1.7vw, 1.25rem);
    --kpi-label-fs: .58rem;

    /* ── Legacy aliases (otras páginas) ─────────────────────────────────────── */
    --main-bg-color:       #353535;
    --gray-color:          #c1c1c1;
    --over-color:          #d97706;
    --azul-igac:           #2d4fa3;
    --azul-igac-light:     #1e3569;
    --azul-igac-dark:      #152549;
    --bg-igac-gris:        #f1f5f9;
    --rojo-igac:           #e11d48;
    --verde-igac:          #059669;
    --verde-igac-dark:     #065f46;
}

/* ─── Reset base ──────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font);
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img { max-width: 100%; height: auto; }

/* ─── Barra GOV.CO ────────────────────────────────────────────────────────── */

.barra_gov {
    background: #3366cc;
    width: 100%;
    height: 2.25rem;
    display: flex;
    align-items: center;
}

.logo-gov { display: flex; align-items: center; }
.logo-gov img { height: 1rem; padding: 0 .875rem; }

/* ─── Nav ─────────────────────────────────────────────────────────────────── */

nav {
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav ul  { list-style: none; margin: 0; padding: 0; }
nav a   { text-decoration: none; }

.navbarigac {
    height: 3.5rem;
    background: var(--color-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbarigac .logos {
    display: flex;
    align-items: center;
}

.navbar-brand-igac {
    background: #fff;
    height: 3.5rem;
    display: flex;
    align-items: center;
    padding: 0 .875rem;
}

.navbarigac img {
    height: 1.75rem;
    padding: 0 .75rem;
}

/* Título en el banner */
.nav-brand-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 18px;
    border-left: 1px solid rgba(255,255,255,.18);
    line-height: 1.25;
}

.nav-brand-main {
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.nav-brand-sub {
    font-size: .58rem;
    font-weight: 400;
    color: rgba(255,255,255,.6);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.navbarigac ul {
    display: flex;
    align-items: center;
    height: 100%;
}

.navbarigac ul li {
    padding: 0 6px;
    height: 100%;
    display: flex;
    align-items: center;
}

.navbarigac ul li a {
    color: rgba(255,255,255,.85);
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    padding: 0 6px;
    border-bottom: 3px solid transparent;
    font-size: .9rem;
    font-weight: 500;
    transition: color .15s, border-color .15s;
}

.navbarigac ul li a:hover {
    color: #fff;
    border-bottom-color: rgba(255,255,255,.4);
}

.nav-link.active {
    color: #fff !important;
    border-bottom-color: var(--color-accent) !important;
}

/* ── Tooltips descriptivos de módulo ── */
.nav-link {
    position: relative;
}
.nav-link::after {
    content: "";
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    background: #1e293b;
    color: #cbd5e1;
    font-size: .73rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 8px 13px;
    border-radius: 9px;
    width: 220px;
    white-space: normal;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 1001;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.nav-link:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.nav-link[href="./index.html"]::after    { content: "Disposición de los diferentes vértices que conforman la Red Geodésica Nacional."; }
.nav-link[href="./conexion.html"]::after,
.nav-link[href="./transmision.html"]::after { content: "Monitoreo de conexión en tiempo real de la red activa IGAC."; }
.nav-link[href="./rastreo.html"]::after  { content: "Aplicativo para el cálculo de tiempos de rastreo según Res. 643 de 2018 IGAC."; }
.nav-link[href="./calidad.html"]::after  { content: "Verificación de parámetros de calidad de las estaciones CORS IGAC."; }
.nav-link.nav-link-doc::after            { content: "Preguntas frecuentes y guía de uso de cada módulo del visor."; }

/* Últimos ítems: anclar al borde derecho del enlace para no salirse de pantalla */
.nav-link[href="./rastreo.html"]::after,
.nav-link[href="./calidad.html"]::after,
.nav-link.nav-link-doc::after {
    left: auto;
    right: -8px;
    transform: translateY(-5px);
}
.nav-link[href="./rastreo.html"]:hover::after,
.nav-link[href="./calidad.html"]:hover::after,
.nav-link.nav-link-doc:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.nav-bar-toggle-igac {
    display: none;
    padding: 0 16px;
    border: 0;
    background: none;
    cursor: pointer;
}

.nav-bar-toggle-igac .icon-bar {
    display: block;
    background: rgba(255,255,255,.7);
    width: 22px;
    height: 2px;
    margin-bottom: 4px;
    border-radius: 2px;
}

.navbarnavigac {
    width: 100%;
    position: absolute;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.4,0,.2,1);
    z-index: 999;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.navbarnavigac.expandMenu { max-height: 400px; }

.navbarnavigac ul {
    display: flex;
    flex-direction: column;
    background: #0f2040;
    margin: 0;
    padding: 6px 0 10px;
    list-style: none;
}
.navbarnavigac ul li {
    height: auto;
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.navbarnavigac ul li:last-child { border-bottom: none; }
.navbarnavigac ul li a {
    display: flex;
    align-items: center;
    padding: 13px 22px;
    font-size: .92rem;
    font-weight: 500;
    color: rgba(255,255,255,.75);
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    letter-spacing: .01em;
}
.navbarnavigac ul li a:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
    border-left-color: #f59e0b;
}
.navbarnavigac ul li a.active {
    color: #fff;
    border-left-color: #f59e0b;
    background: rgba(245,158,11,.08);
}

/* ─── Page Header ─────────────────────────────────────────────────────────── */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    min-height: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    gap: 16px;
    flex-shrink: 0;
    flex-wrap: wrap;
    position: relative;
}

/* Disposición: grid de 3 columnas para que el selector nunca se solape */
.page-header-disposicion {
    display: grid;
    grid-template-columns: 1fr auto 1fr;  /* columnas iguales → selector centrado */
    align-items: center;
    flex-wrap: unset;
}
.page-header-disposicion .page-header-left {
    justify-self: start;
}
.page-header-disposicion .page-header-meta {
    justify-self: end;
}
.page-header-disposicion .network-selector {
    position: static;
    transform: none;
    width: auto;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 5px;
}

.page-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.module-tag {
    background: var(--color-primary);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 3px 9px;
    border-radius: 4px;
}
.module-tag-conexion { background: #1e3569; }

.page-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -.01em;
}

.page-header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.meta-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .8rem;
    color: var(--text-muted);
}

.meta-chip strong { color: var(--text); }
.meta-chip svg   { color: var(--text-muted); flex-shrink: 0; }

.meta-chip-sep {
    opacity: .35;
    font-size: .75rem;
    margin: 0 1px;
}
.meta-chip-gnss-label { white-space: nowrap; }

.btn-refresh {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 7px 16px;
    border-radius: var(--r-sm);
    font-size: .82rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background .15s, transform .1s;
}

.btn-refresh:hover  { background: var(--color-primary-light); }
.btn-refresh:active { transform: translateY(1px); }

/* Legacy alias — transmision.html y otros usan .actualizar-boton */
.actualizar-boton {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 8px 18px;
    font-size: .9rem;
    font-family: var(--font);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: background .15s;
}
.actualizar-boton:hover { background: var(--color-primary-light); }

/* ─── App Layout (Disposición / Conexión) ─────────────────────────────────── */

.app-layout {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    padding: var(--sp-layout);
    gap: var(--sp-layout);
    overflow: hidden;
}

.app-layout-rastreo .data-panel {
    width: 50%;
    min-width: 0;
    overflow: hidden;
}

.app-layout-rastreo {
    overflow: hidden;
    align-items: stretch;
    gap: 12px;
}

/* Panel datos (izquierda) */
.data-panel {
    width: 50%;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    padding: var(--sp-panel);
    gap: var(--sp-gap);
    min-height: 0;
    overflow: visible;
    flex-shrink: 0;
}

/* El overflow se controla solo en el wrapper de tabla */
.data-panel .table-wrapper {
    overflow: hidden;
    min-height: 0;
}

/* Para rastreo, asegurar que el table-wrapper maneje el scroll */
.app-layout-rastreo .table-wrapper {
    overflow: hidden;
}

/* Panel mapa (derecha) */
.map-panel {
    flex: 1;
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-radius: var(--r-lg);
    /* overflow visible allows Esri popup to extend outside panel bounds;
       visual corner clipping is handled by #map below */
    overflow: visible;
    box-shadow: var(--shadow-md);
}

/* Clip map tiles to panel rounded corners without blocking popup overlay */
.map-panel > #map {
    border-radius: inherit;
    overflow: hidden;
}

#map {
    flex: 1;
    width: 100%;
}

/* ─── KPI Cards ───────────────────────────────────────────────────────────── */

.kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    flex-shrink: 0;
}

.kpi-full {
    grid-column: 1 / -1;
}

/* Tarjeta base */
.kpi-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border-radius: var(--r-md);
    padding: var(--sp-card);
    border-left: 4px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s, transform .15s;
}

.kpi-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Tarjeta Total: fondo de marca */
.kpi-total {
    background: var(--color-primary);
    border-left-color: var(--color-primary-dark);
    color: #fff;
    min-height: var(--kpi-total-h);
}

.kpi-activa    { border-left-color: var(--color-activa); }
.kpi-pasiva    { border-left-color: var(--color-pasiva); }
.kpi-inactiva  { border-left-color: var(--color-inactiva); }
.kpi-igac      { border-left-color: #f59e0b; }

/* KPI row Disposición — 4 columnas, IGAC ocupa 2 */
.kpi-row-disposicion {
    grid-template-columns: repeat(4, 1fr);
}
.kpi-igac-featured {
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    gap: 12px;
}
.kpi-igac-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex: 1;
    min-width: 0;
}
.kpi-igac-main {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.kpi-igac-split {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-left: 2px solid rgba(245, 158, 11, 0.4);
    padding-left: 12px;
    flex: 0 0 auto;
    width: 138px;
    justify-content: center;
}
.kpi-split-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 5px 8px 5px 6px;
    border-radius: 0 7px 7px 0;
    border-left: 3px solid transparent;
    background: rgba(255,255,255,0.45);
    min-width: 0;
}
.kpi-split-item span:first-child {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    flex-shrink: 0;
}
.kpi-split-item span:last-child {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    text-align: right;
    line-height: 1.2;
    flex: 1;
}
.kpi-split-activa {
    background: var(--color-activa-bg);
    border-left-color: var(--color-activa);
}
.kpi-split-inactiva {
    background: var(--color-inactiva-bg);
    border-left-color: var(--color-inactiva);
}
.kpi-split-activa  span:first-child { color: var(--color-activa); }
.kpi-split-inactiva span:first-child { color: var(--color-inactiva); }
.kpi-split-activa  span:last-child  { color: var(--color-activa-text); }
.kpi-split-inactiva span:last-child { color: var(--color-inactiva-text); }
.kpi-radio     { border-left-color: #0ea5e9; }
.kpi-result    { border-left-color: var(--color-primary-light); }

/* Icono */
.kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(22px, 2.5vw, 30px);
    height: clamp(22px, 2.5vw, 30px);
    border-radius: 7px;
    flex-shrink: 0;
}

.kpi-total    .kpi-icon { background: rgba(255,255,255,.15); color: #fff; }
.kpi-activa   .kpi-icon { background: var(--color-activa-bg);   color: var(--color-activa); }
.kpi-pasiva   .kpi-icon { background: var(--color-pasiva-bg);   color: var(--color-pasiva-text); }
.kpi-inactiva .kpi-icon { background: var(--color-inactiva-bg); color: var(--color-inactiva); }
.kpi-igac     .kpi-icon { background: #fef3c7; color: #d97706; }
.kpi-radio    .kpi-icon { background: #e0f2fe; color: #0284c7; }
.kpi-result   .kpi-icon { background: #dbeafe; color: var(--color-primary-light); }

/* Textos */
.kpi-body {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    flex-shrink: 0;
}

/* Panel lateral de colaboradores en el card Total */
.kpi-collab-panel {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    flex: 1;
    padding-left: 16px;
    border-left: 1px solid rgba(255,255,255,.15);
    gap: 0;
}
.kpi-collab-row { display: contents; }
.kpi-collab-logo {
    flex-shrink: 0;
    height: 50px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .72;
    transition: opacity .15s;
}
.kpi-collab-logo:hover { opacity: 1; }
.kpi-collab-filterable { cursor: pointer; }
.kpi-collab-filterable:hover { opacity: 1; }
.kpi-collab-active  { opacity: 1; filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(255,255,255,.45)); }
.kpi-collab-dimmed  { opacity: .28; }
.kpi-collab-logo-igac {
    height: 5rem;
}

.kpi-value {
    font-size: clamp(1.35rem, 2.8vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    line-height: 1;
}

.kpi-total .kpi-value { color: #fff; }

.kpi-label {
    font-size: clamp(.55rem, 0.75vw, .65rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-muted);
    line-height: 1.3;
    word-break: break-word;
}

.kpi-total .kpi-label { color: rgba(255,255,255,.7); }

/* ─── KPI Hero: total card con barra de ratio ─────────────────────────────── */
.kpi-hero-total {
    grid-column: span 2;
    flex-wrap: nowrap;
}
.kpi-hero-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.kpi-hero-bar {
    flex: 1;
    min-width: 40px;
    padding: 0 4px;
}

/* ─── Barra de ratio activa/inactiva ──────────────────────────────────────── */
.kpi-ratio-track {
    width: 100%;
    height: 5px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .18);
    overflow: hidden;
    display: flex;
}
.kpi-ratio-seg {
    height: 100%;
    flex-shrink: 0;
    transition: width .55s cubic-bezier(.4, 0, .2, 1);
}
.kpi-ratio-seg-activa   { background: #4ade80; }
.kpi-ratio-seg-inactiva { background: rgba(255, 110, 110, .6); }

/* ─── Badge porcentaje en cards activa/inactiva ──────────────────────────── */
.kpi-pct {
    margin-left: auto;
    font-size: .6rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    flex-shrink: 0;
    transition: background .3s, color .3s;
}
.kpi-pct:empty { display: none; }
.kpi-activa   .kpi-pct { background: var(--color-activa-bg);   color: var(--color-activa-text); }
.kpi-inactiva .kpi-pct { background: var(--color-inactiva-bg); color: var(--color-inactiva-text); }

/* ─── Gráfica donut activas / inactivas ──────────────────────────────────── */
.kpi-donut-card {
    grid-column: span 1;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
    
}
.kpi-donut-wrap {
    position: relative;
    flex-shrink: 0;
    width: var(--kpi-donut-sz);
    height: var(--kpi-donut-sz);
}
.kpi-donut-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
#donut-arc-activa {
    transition: stroke-dasharray .6s cubic-bezier(.4, 0, .2, 1);
}
.kpi-donut-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    line-height: 1;
}
.kpi-donut-pct {
    display: block;
    font-size: var(--kpi-val-fs);
    font-weight: 800;
    color: var(--color-activa);
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: -.03em;
    line-height: 1;
}
.kpi-donut-pct-label {
    display: block;
    font-size: .5rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    font-weight: 700;
    margin-top: 2px;
}
.kpi-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
}
.kpi-donut-leg-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.kpi-donut-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.kpi-donut-dot-activa   { background: var(--color-activa); }
.kpi-donut-dot-inactiva { background: var(--color-inactiva); }
.kpi-donut-leg-val {
    font-size: var(--kpi-val-fs);
    font-weight: 800;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    min-width: 24px;
    letter-spacing: -.03em;
    line-height: 1;
}
.kpi-donut-leg-label {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text-muted);
}

/* ─── Desglose por entidad ───────────────────────────────────────────────── */
.kpi-entity-card {
    grid-column: span 3;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: var(--sp-card-sm);
}
.kpi-entity-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    justify-content: center;
}
.kpi-entity-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 8px;
    cursor: default;
}
.kpi-entity-sigla {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-primary);
    font-family: var(--font-metric);
}
/* Pista exterior: muestra el espacio disponible */
.kpi-entity-bar-outer {
    height: 6px;
    border-radius: 100px;
    background: var(--border-light);
    overflow: hidden;
    position: relative;
}
/* Segmento proporcional al total de la entidad vs mayor entidad */
.kpi-entity-bar-track {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    border-radius: 100px;
    background: var(--color-inactiva-bg-chart);
    overflow: hidden;
    transition: width .6s cubic-bezier(.4, 0, .2, 1);
    min-width: 4px;
}
/* Porción activa dentro del track */
.kpi-entity-bar-active {
    height: 100%;
    background: var(--color-activa);
    border-radius: 100px;
    transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
/* Porción inactiva (chip Inactiva activo) */
.kpi-entity-bar-inactive {
    height: 100%;
    background: var(--color-inactiva);
    border-radius: 100px;
    transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
/* Track invertido: fondo verde cuando se muestran inactivas */
.kpi-entity-bar-track--inv {
    background: var(--color-activa-bg);
}
.kpi-entity-nums {
    font-size: .65rem;
    color: var(--text-muted);
    font-family: var(--font-metric);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
    text-align: right;
}
.kpi-entity-nums strong {
    color: var(--color-activa);
    font-weight: 600;
}
/* Número destacado en rojo cuando se muestran inactivas */
.kpi-entity-row--inactiva .kpi-entity-nums strong { color: var(--color-inactiva); }
.kpi-entity-empty {
    font-size: .65rem;
    color: var(--text-light);
    text-align: center;
    padding: 8px 0;
}

/* ─── Filter Bar ──────────────────────────────────────────────────────────── */

.filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    padding: 6px 10px;
    background: var(--bg);
    border-radius: var(--r-md);
    border: 1px solid var(--border-light);
    overflow-x: auto;
    scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }

.filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.filter-group + .filter-group {
    border-left: 1px solid var(--border-light);
    padding-left: 10px;
}

/* ── Barra de búsqueda independiente (entre filtros y tabla) ── */
.table-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 5px 10px;
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
}

.table-search-bar svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.table-search-input {
    flex: 1;
    min-width: 0;
    font-family: var(--font);
    font-size: .82rem;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
}

.table-search-input::placeholder {
    color: var(--text-light);
}

.table-search-bar:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(30, 53, 105, .07);
}

.filter-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    white-space: nowrap;
}

.filter-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* Chip base */
.chip {
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: .75rem;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.chip:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Chip seleccionado (estado "Todos") */
.chip.chip-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Chips de estado con color propio cuando activos */
.chip.chip-activa.chip-active {
    background: var(--color-activa);
    border-color: var(--color-activa);
    color: #fff;
}
.chip.chip-inactiva.chip-active {
    background: var(--color-inactiva);
    border-color: var(--color-inactiva);
    color: #fff;
}
.chip.chip-pasiva.chip-active {
    background: #94a3b8;
    border-color: #94a3b8;
    color: #fff;
}
.chip.chip-vandalizada.chip-active {
    background: var(--color-vandal);
    border-color: var(--color-vandal);
    color: #fff;
}
.chip.chip-igac.chip-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

/* Dropdown de departamento */
.dept-select {
    font-family: var(--font);
    font-size: .78rem;
    font-weight: 500;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    /* padding-right reserva espacio para la flecha SVG a cualquier tamaño */
    padding: .3em 1.75em .3em .625em;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .5em center;
    cursor: pointer;
    transition: border-color .15s;
    max-width: 11rem;
    min-width: 0;
}

.dept-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* ─── Table Wrapper ───────────────────────────────────────────────────────── */

.table-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* DataTables override */
.dataTables_wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 0;
}

/* ── Fila superior: reservada para páginas que aún usen lf en dom ── */
.dt-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
    margin-bottom: 4px;
}

.dataTables_wrapper .dataTables_length {
    float: none;
    font-size: .78rem;
    color: var(--text-muted);
    margin: 0;
}

.dataTables_wrapper .dataTables_length select {
    font-family: var(--font);
    font-size: .78rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 3px 6px;
}

.dataTables_wrapper .dataTables_filter {
    float: none;
    margin: 0;
}

.dataTables_wrapper .dataTables_filter label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.dataTables_wrapper .dataTables_filter input {
    font-family: var(--font);
    font-size: .8rem;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    outline: none;
    transition: border-color .15s;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--color-primary);
}

/* ── Área scrollable: solo scroll vertical en desktop ── */
.dataTables_wrapper .dataTables_scroll {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Cabecera pegajosa dentro del contenedor de scroll */
.dataTables_wrapper .dataTables_scrollHead {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
    overflow: visible !important; /* la tabla puede desbordar para el scroll H */
}

/* Cuerpo sin scroll propio — el contenedor padre (.dataTables_scroll) lo gestiona */
.dataTables_wrapper .dataTables_scrollBody {
    flex: 1;
    min-height: 0;
    overflow: visible !important;
    height: auto !important; /* anula el height inline que inyecta DataTables */
}

/* ── Fila inferior: length | info | paginación ── */
.dt-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
    gap: 8px;
}

.dt-bottom .dataTables_length {
    flex: 0 0 auto;
}

.dt-bottom .dataTables_info {
    flex: 1;
    text-align: center;
}

.dt-bottom .dataTables_paginate {
    flex: 0 0 auto;
}

.dataTables_wrapper .dataTables_info {
    float: none;
    font-size: .75rem;
    color: var(--text-muted);
    padding: 0;
}

.dataTables_wrapper .dataTables_paginate {
    float: none;
    padding: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-size: .75rem;
    padding: 3px 9px;
    margin: 0 2px;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    background: var(--surface) !important;
    color: var(--text-muted) !important;
    cursor: pointer;
    transition: all .12s;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bg) !important;
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--color-primary) !important;
    color: #ffffff !important;
    border-color: var(--color-primary) !important;
    text-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* ─── Tabla principal ─────────────────────────────────────────────────────── */

#statusTable {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
    font-size: .82rem;
    /* Sobrescribir bordes negros del CSS por defecto de DataTables */
    border: none !important;
}

/* DataTables añade border a table.dataTable — neutralizar */
table.dataTable,
table.dataTable.no-footer {
    border-bottom: 1px solid var(--border) !important;
}

table.dataTable thead th,
table.dataTable thead td {
    border-bottom: 2px solid var(--border) !important;
}

table.dataTable tbody tr td {
    border-top: none !important;
}

/* DataTables elimina el id del header clonado → hay que apuntar también
   a .dataTables_scrollHead table thead th para que el estilo llegue */
#statusTable thead th,
.dataTables_scrollHead table thead th {
    background: var(--bg);
    color: var(--text-muted);
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 9px 22px 9px 10px;
    text-align: center;
    border-bottom: 2px solid var(--border) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

/* Íconos de sort */
#statusTable thead th.sorting,
.dataTables_scrollHead table thead th.sorting,
#statusTable thead th.sorting_asc,
.dataTables_scrollHead table thead th.sorting_asc,
#statusTable thead th.sorting_desc,
.dataTables_scrollHead table thead th.sorting_desc {
    background-image: none !important;
    padding-right: 22px;
}
#statusTable thead th.sorting::after,
.dataTables_scrollHead table thead th.sorting::after,
#statusTable thead th.sorting_asc::after,
.dataTables_scrollHead table thead th.sorting_asc::after,
#statusTable thead th.sorting_desc::after,
.dataTables_scrollHead table thead th.sorting_desc::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}
#statusTable thead th.sorting::after,
.dataTables_scrollHead table thead th.sorting::after {
    border-top: 5px solid var(--text-muted);
    opacity: .35;
}
#statusTable thead th.sorting_asc::after,
.dataTables_scrollHead table thead th.sorting_asc::after {
    border-bottom: 5px solid var(--color-primary);
    border-top: none;
}
#statusTable thead th.sorting_desc::after,
.dataTables_scrollHead table thead th.sorting_desc::after {
    border-top: 5px solid var(--color-primary);
}

#statusTable tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light) !important;
    color: var(--text);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Alinear columna Municipio (3ª columna) a la izquierda en red pasiva */
#statusTable tbody td:nth-child(3) {
    text-align: left !important;
}

/* Centrar columna Estado (5ª columna) en tabla Activa */
body.net-activa #statusTable thead th:nth-child(5),
.net-activa #statusTable thead th:nth-child(5) {
    text-align: center !important;
}

body.net-activa #statusTable tbody td:nth-child(5),
.net-activa #statusTable tbody td:nth-child(5) {
    text-align: center !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    padding: 8px 12px !important;
}

body.net-activa #statusTable tbody td:nth-child(5) .status-badge,
.net-activa #statusTable tbody td:nth-child(5) .status-badge {
    display: inline-block;
    margin: 0 auto;
}

#statusTable tbody tr {
    transition: background .1s;
    cursor: pointer;
}

#statusTable tbody tr:hover { background: #f5f8ff; }

.row-selected { background: #eef3ff !important; }

/* Animación click */
@keyframes parpadeo {
    0%   { background: transparent; }
    40%  { background: #dbeafe; }
    100% { background: transparent; }
}

.parpadeo-activo { animation: parpadeo 1.2s ease; }

/* ─── Status Badges ───────────────────────────────────────────────────────── */

.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
}

.badge-activa {
    background: var(--color-activa-bg);
    color: var(--color-activa-text);
}

.badge-inactiva {
    background: var(--color-inactiva-bg);
    color: var(--color-inactiva-text);
}

.badge-pasiva {
    background: #e2e8f0;
    color: #475569;
}

.badge-vandalizada {
    background: var(--color-vandal-bg);
    color: var(--color-vandal-text);
}

.badge-neutral {
    background: #e2e8f0;
    color: #475569;
}

/* Legacy status classes — transmision.html y otros */
.status-active     { color: var(--color-activa);   font-weight: 700; }
.status-inactive   { color: var(--color-inactiva); font-weight: 700; }
.status-vandalizada { color: var(--color-vandal);  font-weight: 700; }

/* ─── Map Panel ───────────────────────────────────────────────────────────── */

.map-legend-overlay {
    position: absolute;
    bottom: 28px;
    left: 12px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 8px 12px;
    font-size: .68rem;
    color: var(--text);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    pointer-events: auto;
    transition: padding .2s;
}

/* ── Botón contraer ──────────────────────────────────────────────────────── */
.legend-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-muted);
    user-select: none;
    width: 100%;
}
.legend-toggle-btn:hover { color: var(--color-primary); }
.legend-toggle-btn .legend-icon-layers {
    display: none;
    flex-shrink: 0;
}
.legend-toggle-btn .legend-icon-chevron {
    transition: transform .2s;
    flex-shrink: 0;
}
.map-legend-overlay.legend-collapsed .legend-toggle-btn {
    justify-content: center;
}
.map-legend-overlay.legend-collapsed .legend-icon-layers  { display: block; }
.map-legend-overlay.legend-collapsed .legend-icon-chevron { transform: rotate(180deg); display: none; }

/* ── Estado colapsado ─────────────────────────────────────────────────────── */
.map-legend-overlay.legend-collapsed {
    padding: 7px 12px;
    gap: 0;
}
.map-legend-overlay.legend-collapsed .legend-body {
    display: none;
}
.map-legend-overlay.legend-collapsed .legend-icon-chevron {
    transform: rotate(180deg);
}

/* ── Contenido de la leyenda ─────────────────────────────────────────────── */
.legend-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.map-legend-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legend-layer-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--border-light);
}

.legend-layer-card.is-primary {
    background: linear-gradient(145deg, #f8fbff 0%, #eef4ff 100%);
    border-color: #cbd8f0;
}

.legend-layer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.legend-layer-title {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text);
}

.legend-layer-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: #e7eefb;
}

.legend-layer-items {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 12px;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-label {
    font-size: .7rem;
    font-weight: 600;
    color: var(--text);
}

.legend-map-marker {
    display: inline-block;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.legend-map-marker-active {
    width: 18px;
    height: 18px;
    background-image: url("images/activa.gif");
}

.legend-map-marker-inactive {
    width: 13px;
    height: 13px;
    background-image: url("images/inactiva.gif");
}

.legend-passive-marker {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 14px;
    flex-shrink: 0;
}

.legend-passive-marker::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 13px solid rgba(254, 80, 0, 0.35);  /* borde naranja suave */
}

.legend-passive-marker::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 9px solid rgba(254, 128, 0, 0.95);  /* naranja pasiva */
}

.legend-empty {
    font-size: .72rem;
    color: var(--text-muted);
}

.legend-buffer-sym {
    width: 18px;
    height: 10px;
    border-radius: 999px;
    border: 2px solid rgba(59,130,246,.28);
    background: rgba(59,130,246,.12);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}

/* Panel de control de capas */
.layer-controls {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-top: 1px solid var(--border);
    padding-top: 6px;
    margin-top: 2px;
}
.layer-controls-title {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin-bottom: 1px;
}
.layer-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
}
.layer-toggle-label {
    font-size: .68rem;
    font-weight: 500;
    color: var(--text);
    user-select: none;
}
/* Ocultar checkbox nativo */
.layer-toggle-row input[type="checkbox"] { display: none; }

/* Track del toggle */
.layer-toggle-track {
    position: relative;
    width: 30px;
    height: 16px;
    background: var(--border);
    border-radius: 8px;
    flex-shrink: 0;
    transition: background .2s;
}
.layer-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .2s;
}
.layer-toggle-row input:checked ~ .layer-toggle-track {
    background: var(--color-primary);
}
.layer-toggle-row input:checked ~ .layer-toggle-track::after {
    transform: translateX(14px);
}

.legend-sep {
    width: 1px;
    height: 32px;
    background: var(--border);
    flex-shrink: 0;
}

/* Bloque por institución */
.legend-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.legend-block-igac .legend-block-title {
    color: var(--color-primary);
    font-weight: 800;
}

.legend-block-title {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    line-height: 1;
}

.legend-block-items {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Chips de estado inline */
.legend-state-chip {
    font-size: .68rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
}

.chip-green { background: var(--color-activa-bg);   color: var(--color-activa-text); }
.chip-red   { background: var(--color-inactiva-bg); color: var(--color-inactiva-text); }
.chip-gray  { background: #e2e8f0; color: #475569; }

/* Símbolos base */
.legend-sym {
    display: inline-flex;
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,.85);
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}

.legend-circle  { border-radius: 50%; }
.legend-diamond { transform: rotate(45deg); border-radius: 1px; }

.legend-green { background: var(--color-activa); }
.legend-red   { background: var(--color-inactiva); }
.legend-gray  { background: #9ca3af; }

/* Símbolo GIF en leyenda del mapa */
.legend-gif-sym {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    object-fit: contain;
}
.legend-gif-sym-sm {
    width: 13px;
    height: 13px;
}

/* Triángulo pasiva en leyenda */
.legend-triangle-sym {
    display: inline-block;
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 12px solid rgba(160, 160, 160, 0.9);
}

/* Chip gris para Pasiva */
.chip-gray { color: #666; }

.legend-state-chip.chip-gray { color: #666; }

/* ─── Popup mapa (ArcGIS) ─────────────────────────────────────────────────── */

.sub-title { color: var(--color-primary); font-weight: 600; }

.popup-img img {
    width: 100%;
    border-radius: var(--r-sm);
    margin-top: 8px;
}

/* ─── Modal ───────────────────────────────────────────────────────────────── */

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}

/* Mostrar como flex cuando está visible */
.modal[style*="block"] {
    display: flex !important;
}

/* Tarjeta del modal */
.modal-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.12);
    width: 100%;
    max-width: 520px;
    overflow: hidden;
    border: 1px solid var(--border);
    animation: modal-in .2s ease;
}

@keyframes modal-in {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1)  translateY(0);    }
}

/* Cuerpo de la tarjeta */
.modal-card-body {
    padding: 32px 32px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* Fila superior: icono + etiqueta */
.modal-card-top {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--color-primary);
}

.modal-card-top svg { flex-shrink: 0; opacity: .8; }

.modal-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
}

.modal-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.02em;
}

/* Anillo de progreso — grid stacking garantiza alineación perfecta */
.progress-ring-wrapper {
    display: grid;
    place-items: center;
    width: 200px;
    height: 200px;
    flex-shrink: 0;
}

.progress-ring-wrapper > * {
    grid-area: 1 / 1;
}

/* Rotar desde las 12 en punto */
.progress-ring {
    transform: rotate(-90deg);
    transform-origin: center;
    display: block;
    width: 200px;
    height: 200px;
}

.progress-bg {
    fill: none;
    stroke: var(--border);
    stroke-width: 16;
}

.progress-bar {
    fill: none;
    stroke-width: 16;
    stroke-linecap: round;
    /* circunferencia = 2·π·54 ≈ 339.29  (r=54 igual que modal.js) */
    stroke-dasharray: 339.29;
    stroke-dashoffset: 339.29;
    transition: stroke-dashoffset .6s ease;
}

/* Estado indeterminado mientras carga */
.progress-ring-wrapper.is-loading .progress-ring {
    animation: ring-spin 1.1s linear infinite;
    transform-origin: center;
}

.progress-ring-wrapper.is-loading .progress-bar {
    stroke-dasharray: 90 249;
    stroke-dashoffset: 0;
    transition: none;
}

@keyframes ring-spin {
    from { transform: rotate(-90deg); }
    to   { transform: rotate(270deg); }
}

/* Contador centrado sobre el anillo */
.progress-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
}

.progress-count {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    letter-spacing: -.04em;
}


.progress-unit {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
}

/* Mensaje de estado */
.modal-message {
    margin: 0;
    font-size: .85rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
}

/* Legacy — transmisión y otras páginas aún usan estas clases */
.modal-content { background: var(--surface); margin: 12% auto; padding: 28px 32px; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 440px; border: 1px solid var(--border); }
.modal-header  { text-align: center; margin-bottom: 16px; }
.circular-progress-wrapper { position: relative; width: 150px; height: 150px; margin: 20px auto 0; }
.circular-progress { transform: rotate(-90deg); display: block; }
.progress-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 2.4rem; font-weight: 800; color: var(--color-primary); }
.mensaje-carga { margin-top: 24px; display: flex; justify-content: center; }
#modal-message { font-size: .85rem; color: var(--text-muted); text-align: center; }

/* ─── Tooltips ────────────────────────────────────────────────────────────── */

.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip-icon {
    background: rgba(255,255,255,.2);
    color: #fff;
    border-radius: 50%;
    padding: 1px 5px;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid rgba(255,255,255,.35);
}

.tooltip-box {
    visibility: hidden;
    opacity: 0;
    width: min(240px, 85vw);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    border-radius: var(--r-md);
    padding: 12px 14px;
    border: 1px solid var(--border);
    position: absolute;
    z-index: 2000;
    top: 130%;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity .2s;
    box-shadow: var(--shadow-md);
    font-size: .8rem;
    line-height: 1.5;
}

.tooltip-box::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-bottom-color: var(--border);
}

.tooltip-container:hover .tooltip-box { visibility: visible; opacity: 1; }

.justificar { text-align: justify; margin: 0; }

/* --- Rastreo --- */
.rastreo-form-card {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: 0 0 .65rem;
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    border-top: 2px solid var(--color-primary);
    flex-shrink: 0;
    min-width: 0;
    overflow: hidden;
}

.rastreo-form-header {
    display: flex;
    align-items: center;
    padding: .55rem .875rem .45rem;
    background: linear-gradient(90deg, rgba(45,79,163,.07) 0%, transparent 80%);
    border-bottom: 1px solid var(--border-light);
}

.rastreo-form-title {
    margin: 0;
    font-size: clamp(.72rem, .95vw, .85rem);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-primary);
    line-height: 1.2;
}

.rastreo-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: 0 .875rem;
}

.rastreo-hint {
    font-size: clamp(.52rem, .65vw, .63rem);
    color: var(--text-muted);
    line-height: 1.3;
}

.rastreo-summary {
    margin: 0;
    padding: 0 2px;
    font-size: .8rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.rastreo-summary:empty {
    display: none;
}

.rastreo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr minmax(0, .65fr) auto;
    gap: .5rem;
    align-items: end;
    min-width: 0;
    padding: 0 .875rem;
}

.rastreo-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.rastreo-field-coord .rastreo-input {
    min-width: 0;
}

.rastreo-label {
    font-size: clamp(.58rem, .75vw, .68rem);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.rastreo-input,
.rastreo-select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    padding: .38em .6em;
    font-size: clamp(.72rem, .88vw, .8rem);
    font-family: var(--font);
    transition: border-color .15s, box-shadow .15s;
}

.rastreo-input::placeholder {
    color: var(--text-light);
}

.rastreo-input:focus,
.rastreo-select:focus {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(45,79,163,.12);
}

.rastreo-actions {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
}

.rastreo-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: 100%;
    min-height: 2.25rem;
    padding: .4rem 1rem;
    font-size: clamp(.72rem, 1vw, .88rem);
    font-weight: 700;
    border-radius: .5rem;
    box-shadow: 0 .25rem .625rem rgba(30,53,105,.16);
}

.rastreo-info-btn {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--color-primary);
    font-size: .8rem;
    font-weight: 800;
    font-family: var(--font);
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
    flex-shrink: 0;
}

.rastreo-info-btn:hover {
    border-color: var(--color-primary-light);
    background: #eff6ff;
}

.rastreo-info-btn:active {
    transform: translateY(1px);
}

.rastreo-feedback {
    margin: 0 .875rem;
    padding: .35rem .6rem;
    font-size: clamp(.6rem, .78vw, .7rem);
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: var(--r-sm);
    border-left: 2px solid transparent;
    line-height: 1.4;
}

.rastreo-feedback:empty {
    display: none;
}

.rastreo-feedback.is-error {
    color: var(--color-inactiva-text);
    background: var(--color-inactiva-bg);
    border-left-color: var(--color-inactiva);
}

.rastreo-feedback.is-success {
    color: var(--color-activa-text);
    background: var(--color-activa-bg);
    border-left-color: var(--color-activa);
}

.row-out-of-radius td {
    background: linear-gradient(to right, rgba(253,224,71,0.18), rgba(253,224,71,0.06)) !important;
    border-left: 2px solid rgba(202,138,4,0.35) !important;
}

.kpi-row-rastreo {
    grid-template-columns: repeat(3, 1fr);
}


/* Altura mínima del contenedor de scroll en rastreo */
.app-layout-rastreo .table-wrapper .dataTables_scroll {
    min-height: 0;
}

/* Estado centrado en rastreo */
.app-layout-rastreo #statusTable thead th:nth-child(5),
.app-layout-rastreo #statusTable tbody td:nth-child(5) { text-align: center; }

.filter-bar.is-disabled {
    opacity: .72;
}

.chip:disabled,
.dept-select:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.map-legend-overlay-rastreo {
    flex-wrap: wrap;
    row-gap: 8px;
    white-space: normal;
    max-width: min(100% - 24px, 560px);
    pointer-events: none;
}

.map-legend-overlay-rastreo .legend-block-items {
    flex-wrap: wrap;
}

.map-legend-overlay-rastreo .legend-passive-marker {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 14px;
    flex-shrink: 0;
}

.map-legend-overlay-rastreo .legend-passive-marker::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 13px solid rgba(254, 80, 0, 0.35);
}

.map-legend-overlay-rastreo .legend-passive-marker::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 9px solid rgba(254, 128, 0, 0.95);
}

.modal-card-info {
    max-width: 680px;
}

.modal-card-body-info {
    align-items: stretch;
}

.modal-card-info-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.modal-close-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.modal-close-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary-light);
}

.rastreo-info-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text);
    font-size: .9rem;
    line-height: 1.6;
}

.rastreo-info-content p {
    margin: 0;
}

.rastreo-info-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text);
}

.rastreo-info-list li + li {
    margin-top: 4px;
}

.rastreo-info-cite {
    margin-top: 12px;
    font-size: .72rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    padding-top: 8px;
    font-style: italic;
}

/* ─── ArcGIS UI overrides ─────────────────────────────────────────────────── */

.esri-locate {
    background: var(--color-primary-light) !important;
    color: #fff !important;
    border-radius: 50% !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGACY — Rastreo, Calidad, Transmisión (páginas no rediseñadas aún)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Contenedor legacy (transmision.html usa .container) */
.container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    height: auto;
    padding: 0 16px 0 0;
    gap: 16px;
    max-width: 100%;
    overflow: hidden;
}

.table-container {
    width: 50%;
    margin: 16px 0 16px 16px;
    padding: 16px;
    background: var(--surface);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.map-container {
    width: 43%;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Stat cards legacy */
.stats-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--color-primary);
}

.stat-total    { border-top-color: var(--color-primary); }
.stat-activa   { border-top-color: var(--color-activa); }
.stat-inactiva { border-top-color: var(--color-inactiva); }
.stat-vandalizada { border-top-color: var(--color-vandal); }

.stat-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.stat-value {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}

/* Map legend legacy */
.map-legend {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    padding: 5px 4px;
    font-size: .82rem;
    color: var(--text-muted);
}

.legend-item { display: flex; align-items: center; gap: 5px; }

/* Table responsive legacy */
.table-responsive {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Rastreo */
.container-rastreo {
    display: flex;
    justify-content: center;
    padding: 20px;
    gap: 20px;
    min-height: calc(100vh - 200px);
    margin-bottom: 5vh !important;
}

.table-container-rastreo {
    display: flex;
    justify-content: center;
    width: 40vw;
    height: auto;
    margin-top: 60px;
    margin-left: 30px;
    margin-bottom: 50px;
    padding: 20px;
    background: var(--surface);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}

.map-container-rastreo {
    width: 70vw;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-container-rastreo { width: 100%; }

.form-container-rastreo label {
    color: #474d52;
    font-weight: bold;
    font-size: large;
}

.form-container-rastreo input,
.form-container-rastreo .form-select select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: rgba(62, 107, 206, .72);
    color: #fff;
}

.form-container-rastreo input::placeholder { color: #c3c5c9; }

.form-button {
    padding: 10px 20px;
    background: rgba(25, 143, 123, .49);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.row-tabla-rastreo { display: flex; align-items: center; gap: 10px; margin-left: 2vw; }
.texto-tabla { display: flex; flex-direction: column; align-items: flex-start; margin-left: 2vw; }
.texto-tabla .title { color: rgb(135, 176, 209); font-weight: bold; }
.icono-tabla { width: 25px; height: 25px; }
.h2-rastreo { text-align: left; }
.actualizar-rastreo { display: flex; justify-content: center; margin-left: 4vw; }
.container-actualizar { margin-top: 2vh; }

/* Transmisión */
.actualizar-transmision .actualizar-boton { background: var(--over-color); }
.actualizar-transmision .actualizar-boton:hover { background: #e3b97a; }

.refresh-button {
    background: var(--verde-igac-dark);
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    font-family: var(--font);
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: background .15s;
}
.refresh-button:hover { background: var(--verde-igac); }

/* Filtro red (legacy) */
.filtro-red-container select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: rgba(62, 107, 206, .72);
    color: #fff;
}

.badge-qc-empty {
    background: #dbeafe;
    color: #1d4ed8;
}

.chip-qc-empty {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.chip-blue {
    background: #dbeafe;
    color: #1d4ed8;
}

.legend-blue {
    background: #2563eb;
}

/* --- Calidad --- */
.app-layout-calidad {
    flex: 1;
    min-height: 0;
    height: auto;
    overflow: hidden;
    align-items: stretch;
    gap: 12px;
}

.app-layout-calidad .data-panel {
    width: 55%;
    overflow: hidden;
}

.calidad-data-panel {
    gap: 8px;
}

.calidad-analytics-panel {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.calidad-controls-card,
.calidad-chart-card,
.calidad-map-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
}

/* ── Controls card: barra horizontal compacta ── */
.calidad-controls-card {
    padding: .625rem 1rem;
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    background: linear-gradient(135deg, #f7f9fc 0%, #eef3f8 100%);
    border-bottom: 1px solid var(--border-light);
}

.calidad-controls-fields {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

/* Separador vertical entre chip de estación y selectores */
.calidad-controls-divider {
    width: 1px;
    background: var(--border);
    align-self: stretch;
    margin: 0 .75rem;
    flex-shrink: 0;
}

.calidad-controls-selects {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    flex-shrink: 0;
}

.calidad-select-sm {
    height: 2rem;
    padding: 3px 8px;
    font-size: .78rem;
}

/* Selector día GPS: más ancho para mostrar "106 — 17 abr" */
.calidad-select-day {
    height: 32px;
    padding: 3px 8px;
    font-size: .78rem;
    min-width: 155px;
}

.calidad-station-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 150px;
    max-width: 300px;
    padding: 5px 12px;
    background: rgba(255,255,255,.9);
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
}

.calidad-summary-label {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.calidad-station-chip strong {
    font-size: .92rem;
    font-weight: 700;
    color: var(--color-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: .01em;
}

.calidad-rinex {
    font-size: .66rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botón Descargar Excel: estilo propio, alineado al final */
.calidad-download-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    flex-shrink: 0;
    padding: 8px 16px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    font-size: .8rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    white-space: nowrap;
}
.calidad-download-btn:hover:not(:disabled) {
    background: var(--color-primary-light);
    box-shadow: 0 2px 8px rgba(30,53,105,.22);
}
.calidad-download-btn:disabled {
    opacity: .55;
    cursor: default;
}

/* ── Excel loading overlay ── */
.excel-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(15, 23, 42, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
.excel-overlay-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-lg);
    min-width: 260px;
    max-width: 340px;
    text-align: center;
}
.excel-overlay-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid var(--border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
.excel-overlay-title {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-primary);
}
.excel-overlay-msg {
    margin: 0;
    font-size: .78rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.calidad-logout-btn {
    border: 1px solid rgba(220,38,38,.18);
    background: #fff5f5;
    color: #b91c1c;
    padding: 9px 14px;
    border-radius: var(--r-sm);
    font-size: .82rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.calidad-logout-btn:hover {
    background: #fee2e2;
    border-color: rgba(220,38,38,.28);
}

.calidad-logout-header {
    background: #fff;
    min-height: 36px;
}

.calidad-admin-btn {
    border-color: rgba(30,53,105,.2);
    background: #f0f4ff;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.calidad-admin-btn:hover {
    background: #dce6ff;
    border-color: rgba(30,53,105,.35);
}

/* ── Calidad KPI: strip compacto (sin altura mínima heredada) ── */
.kpi-row-calidad {
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.kpi-row-calidad .kpi-card {
    padding: .8125rem .875rem;
    gap: .625rem;
    min-height: 3.875rem;
}

.kpi-row-calidad .kpi-total {
    min-height: 3.875rem;
}

.kpi-row-calidad .kpi-icon {
    width: 1.875rem;
    height: 1.875rem;
    min-width: 1.875rem;
    flex-shrink: 0;
    border-radius: .4375rem;
}

.kpi-row-calidad .kpi-value {
    font-size: clamp(.95rem, 1.8vw, 1.3rem);
}

.kpi-row-calidad .kpi-label {
    font-size: clamp(.54rem, 0.65vw, .63rem);
}

.kpi-qc-empty {
    border-left-color: #2563eb;
}

.kpi-qc-empty .kpi-icon {
    background: #dbeafe;
    color: #2563eb;
}

.table-wrapper-calidad {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.table-wrapper-calidad .dataTables_wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.table-wrapper-calidad .dataTables_scroll {
    flex: 1;
    min-height: 60px;
    display: flex;
    flex-direction: column;
}

.table-wrapper-calidad .dataTables_wrapper {
    margin-top: 0;
}

.table-wrapper-calidad .dt-top,
.table-wrapper-calidad .dt-bottom {
    align-items: center;
}

.table-wrapper-calidad .dataTables_length,
.table-wrapper-calidad .dataTables_filter {
    margin-bottom: 10px;
}

.table-wrapper-calidad .dataTables_filter {
    text-align: right;
}

.table-wrapper-calidad .dataTables_filter input {
    min-width: 220px;
}

.table-wrapper-calidad #statusTable {
    table-layout: fixed;
}

.table-wrapper-calidad #statusTable thead th,
.table-wrapper-calidad .dataTables_scrollHead table thead th {
    text-align: center;
    vertical-align: middle;
    background: var(--bg);
}

.table-wrapper-calidad #statusTable tbody td {
    vertical-align: top;
    word-break: break-word;
}

.table-wrapper-calidad #statusTable tbody td.dt-col-quality,
.table-wrapper-calidad #statusTable thead th.dt-col-quality {
    text-align: center;
}

.table-wrapper-calidad #statusTable tbody td.dt-col-station,
.table-wrapper-calidad #statusTable thead th.dt-col-station,
.table-wrapper-calidad #statusTable tbody td.dt-col-dept,
.table-wrapper-calidad #statusTable thead th.dt-col-dept,
.table-wrapper-calidad #statusTable tbody td.dt-col-municipio,
.table-wrapper-calidad #statusTable thead th.dt-col-municipio,
.table-wrapper-calidad #statusTable tbody td.dt-col-antena,
.table-wrapper-calidad #statusTable thead th.dt-col-antena,
.table-wrapper-calidad #statusTable tbody td.dt-col-receptor,
.table-wrapper-calidad #statusTable thead th.dt-col-receptor,
.table-wrapper-calidad #statusTable tbody td.dt-col-observaciones,
.table-wrapper-calidad #statusTable thead th.dt-col-observaciones {
    text-align: left;
}

/* Ancho solo en tbody td — no en thead th para que DataTables
   pueda compensar el scrollbar en el header table.
   7 columnas: Estación | Dpto | Mun | Estado | Antena | Receptor | Observaciones */
.table-wrapper-calidad #statusTable tbody td:nth-child(1) {  /* Estación */
    width: 7%;
    font-weight: 600;
}

.table-wrapper-calidad #statusTable tbody td:nth-child(2) {  /* Departamento */
    width: 11%;
}

.table-wrapper-calidad #statusTable tbody td:nth-child(3) {  /* Municipio */
    width: 10%;
}

.table-wrapper-calidad #statusTable tbody td:nth-child(4) {  /* Estado calidad */
    width: 9%;
    text-align: center;
}

.table-wrapper-calidad #statusTable tbody td:nth-child(5) {  /* Antena */
    width: 14%;
    font-size: .78em;
    word-break: break-all;
}

.table-wrapper-calidad #statusTable tbody td:nth-child(6) {  /* Receptor */
    width: 14%;
    font-size: .78em;
    word-break: break-all;
}

.table-wrapper-calidad #statusTable tbody td:nth-child(7) {  /* Observaciones */
    width: 35%;
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.5;
    vertical-align: top;
    padding-top: 8px;
    font-size: .8em;
    color: var(--text-secondary, #555);
}

/* Título compacto de tarjeta analítica */
.calidad-card-title {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.calidad-card-title strong { color: var(--color-primary); font-weight: 800; }

.calidad-chart-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.calidad-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .5625rem .875rem;
    border-bottom: 1px solid var(--border);
    background: #f8fafc;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.calidad-chart-head-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.calidad-chart-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.calidad-chart-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .7rem;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 3px 7px;
    white-space: nowrap;
    user-select: none;
}

.btn-chart-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
}
.btn-chart-reset:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.chart-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chart-range-group {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.chart-range-btn {
    background: var(--surface);
    border: none;
    border-right: 1px solid var(--border);
    padding: 4px 10px;
    font-size: .72rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
    line-height: 1;
    font-family: inherit;
}
.chart-range-btn:last-child { border-right: none; }
.chart-range-btn:hover { background: #f1f5f9; color: var(--text-main); }
.chart-range-btn.chart-range-active { background: var(--color-primary); color: #fff; }

.chart-scrollbar-wrap {
    padding: 2px 14px 8px;
    display: none;
}

.chart-scrollbar-track {
    position: relative;
    height: 7px;
    background: #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
}

.chart-scrollbar-thumb {
    position: absolute;
    top: 0;
    height: 100%;
    background: #94a3b8;
    border-radius: 4px;
    cursor: grab;
    transition: background .15s;
    min-width: 24px;
    user-select: none;
}
.chart-scrollbar-thumb:hover { background: #64748b; }
.chart-scrollbar-thumb:active { background: var(--color-primary); cursor: grabbing; }

.calidad-chart-status {
    font-size: .72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calidad-select-compact {
    font-size: .78rem;
    padding: 5px 8px;
    min-width: 160px;
}

/* Canvas: flex para llenar el espacio disponible dentro de la tarjeta */
.calidad-chart-canvas {
    flex: 1;
    position: relative;
    min-height: 0;
    padding: .625rem .75rem;
    overflow: hidden;
}

.calidad-chart-canvas canvas {
    image-rendering: -webkit-optimize-contrast; /* Chrome/Safari: disable smoothing */
    image-rendering: crisp-edges;               /* Firefox */
}

.calidad-map-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
    position: relative;
}

.calidad-map-card #map {
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    overflow: hidden;
}

.calidad-map-head {
    display: flex;
    align-items: center;
    padding: .625rem .875rem;
    border-bottom: 1px solid var(--border);
    background: #f8fafc;
    flex-shrink: 0;
}

.calidad-map-legend-overlay {
    bottom: 18px;
    left: 18px;
    top: auto;
    right: auto;
    white-space: normal;
    max-width: calc(100% - 36px);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.calidad-map-card #map {
    flex: 1;
    min-height: 0;
}

.login-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .72);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 3000;
    backdrop-filter: blur(5px);
}

.login-card {
    width: min(100%, 440px);
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.45);
    box-shadow: 0 24px 70px rgba(15,23,42,.25);
    padding: 28px 28px 24px;
}

.login-card-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.login-title {
    margin: 0;
    font-size: 1.35rem;
    color: var(--color-primary);
}

.login-copy {
    margin: 0;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-group label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.form-group input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: #fff;
    color: var(--text);
    font-size: .92rem;
    font-family: var(--font);
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(45,79,163,.12);
}

.login-button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: none;
    border-radius: 12px;
    background: var(--color-primary);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    transition: background .15s, transform .1s;
}

.login-button:hover {
    background: var(--color-primary-light);
}

.login-button:active {
    transform: translateY(1px);
}

.login-back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    font-size: .8rem;
    color: var(--text-muted, #64748b);
    text-decoration: none;
}
.login-back-link:hover {
    color: var(--color-primary, #1e3569);
}

.login-message {
    min-height: 18px;
    margin: 0;
    font-size: .82rem;
    color: var(--text-muted);
}

.login-message.is-error {
    color: var(--color-inactiva);
}

/* Puntos loader */
.puntos { color: rgb(95, 126, 33); display: inline-block; width: 2ch; }
.puntos::after { content: ""; animation: puntosAnim 1.2s steps(4, end) infinite; }

@keyframes puntosAnim {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
    100% { content: ""; }
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */

/* ══ LAPTOP / MONITOR MEDIANO ≤1440px ══════════════════════════════════════
   Escala moderada: reduce espaciados y tipografías ~15% para aprovechar
   mejor pantallas de 1280-1440px sin sacrificar legibilidad.              */
@media (max-width: 1440px) {
    :root {
        --sp-layout:   6px;
        --sp-panel:    10px;
        --sp-gap:      6px;
        --sp-card:     7px 10px;
        --sp-card-sm:  6px 9px;
        --header-h:    2.625rem;
        --kpi-total-h: 4.875rem;
        --kpi-donut-sz: clamp(3.25rem, 5vw, 4.25rem);
        --kpi-val-fs:   clamp(.8rem, 1.3vw, 1rem);
        --kpi-label-fs: .52rem;
    }
    .page-header          { padding: 0 1rem; min-height: var(--header-h); }
    .page-title           { font-size: .88rem; }
    .module-tag           { font-size: .6rem; padding: .125rem .44rem; }
    .meta-chip            { font-size: .68rem; padding: .2rem .44rem; }
    .btn-refresh          { font-size: .72rem; padding: .25rem .625rem; }
    .kpi-card             { gap: 7px; }
    .kpi-row              { gap: 5px; }
    .kpi-donut-legend     { gap: 4px; }
    .kpi-donut-leg-item   { gap: 5px; }
    .kpi-donut-dot        { width: 7px; height: 7px; }
    .kpi-donut-leg-label  { font-size: .52rem; }
    .kpi-donut-pct-label  { font-size: .46rem; }
    .kpi-entity-row       { gap: 6px; }
    .kpi-entity-rows      { gap: 4px; }
    .kpi-entity-sigla     { font-size: .58rem; }
    .kpi-entity-nums      { font-size: .6rem; }
    .kpi-entity-bar-outer { height: 5px; }
    .kpi-icon svg         { width: 14px; height: 14px; }
    .filter-bar           { padding: 4px 8px; gap: 8px; }
    .filter-group + .filter-group { padding-left: 8px; }
    .table-search-bar     { padding: 3px 8px; }
    .filter-label         { font-size: .68rem; }
    /* Mantener padding-right proporcional para no tapar la flecha SVG */
    .dept-select          { font-size: .68rem; padding: .28em 1.75em .28em .55em; }
    /* Pasiva: alinea tamaños con activa en laptop */
    .kpi-row-pasiva       { gap: 5px; }
    .kpi-row-pasiva .kpi-card { gap: 8px; }

    /* Rastreo: laptop */
    .kpi-row-rastreo      { gap: 4px; }
    .rastreo-form-card    { gap: .35rem; }
    .rastreo-form-header  { padding: .35rem .75rem .3rem; }
    .rastreo-form-title   { font-size: clamp(.62rem, .85vw, .74rem); }
    .rastreo-grid         { gap: .35rem; padding: 0 .75rem; }
    .rastreo-card-footer  { padding: 0 .75rem; }
    .rastreo-submit       { min-height: 1.875rem; font-size: .72rem; }
    .kpi-row-rastreo .kpi-value { font-size: clamp(.8rem, 1.2vw, .95rem); }
    .kpi-row-rastreo .kpi-label { font-size: .5rem; }
    .kpi-row-rastreo .kpi-card  { padding: .4rem .55rem; gap: .4rem; }
    .kpi-row-rastreo .kpi-icon  { width: 1.5rem; height: 1.5rem; min-width: 1.5rem; }
    .app-layout-rastreo .table-wrapper .dataTables_scroll { min-height: 11rem; }
    
    /* Calidad: compactar panel analítico en laptop */
    .calidad-controls-card   { padding: .45rem .9rem; }
    .calidad-analytics-panel { gap: .5rem; }
    .calidad-card-title      { font-size: .8rem; }
    /* KPI calidad: alinear tamaño */
    .kpi-row-calidad .kpi-value { font-size: clamp(.88rem, 1.5vw, 1.15rem); }
}

/* ── ≤1400px: los 3 botones "soon" ocultan su label, solo ícono ─────────── */
@media (max-width: 1400px) {
    .page-header-disposicion .network-selector { gap: 3px; }
    .net-btn                  { padding: 4px 10px; font-size: .7rem; gap: 4px; }
    .net-btn-soon .net-btn-label { display: inline; }
    .net-btn-soon             { padding: 4px 9px; }
    .net-btn-icon,
    .net-btn-svg {
        transform: scale(.92);
        transform-origin: center;
    }
}

/* ── ≤1100px: compactar toda la barra ───────────────────────────────────── */
@media (max-width: 1100px) {
    .page-header-disposicion  { gap: 8px; padding: 0 14px; }
    .net-btn                  { padding: 4px 10px; font-size: .7rem; gap: 4px; }
    .net-btn-soon             { padding: 4px 9px; }
    .net-btn-soon .net-btn-label { display: inline; }
    .page-title               { font-size: .88rem; }
    .meta-chip                { padding: 3px 7px; font-size: .7rem; }
    .btn-refresh              { padding: 5px 10px; font-size: .76rem; }
}

/* ── ≤900px: selector baja a segunda fila (scroll horizontal) ───────────── */
@media (max-width: 900px) {
    .page-header-disposicion {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "left meta"
            "selector selector";
        gap: 5px;
        padding: 7px 14px;
        min-height: auto;
    }
    .page-header-disposicion .page-header-left  { grid-area: left; justify-self: start; }
    .page-header-disposicion .page-header-meta  { grid-area: meta; justify-self: end; flex-wrap: nowrap; }
    .page-header-disposicion .network-selector  {
        grid-area: selector;
        justify-content: center;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 4px 0 2px;
        border-top: 1px solid var(--border-light);
        gap: 4px;
    }
    .page-header-disposicion .network-selector::-webkit-scrollbar { display: none; }
    /* En tablet todos los labels siguen visibles; el selector ya puede hacer scroll */
    .net-btn         { flex-shrink: 0; font-size: .7rem; padding: 4px 10px; }
    .net-btn-soon    { padding: 4px 9px; }
    .net-btn-soon .net-btn-label { display: inline; }
}

/* ── Desktop compacto / laptop (769 – 1200 px) ───────────────────────────
   Mantiene layout de 2 columnas y mapa a altura completa.
   Solo compacta los elementos de chrome para ganar espacio.             */
@media (min-width: 769px) and (max-width: 1200px) {

    /* Header */
    .page-header      { padding: 0 .75rem; gap: .375rem; min-height: 2.875rem; }
    .page-title       { font-size: .85rem; }
    .meta-chip        { padding: .19rem .44rem; font-size: .7rem; }
    .btn-refresh      { padding: .3rem .625rem; font-size: .76rem; }

    /* Network selector: ya es estático por el grid de page-header-disposicion */
    .net-btn          { padding: 3px 9px; font-size: .68rem; gap: 3px; }
    .net-btn-badge    { font-size: .5rem; padding: 1px 3px; }

    /* Data panel */
    .data-panel       { padding: 8px 10px; gap: 7px; }

    /* KPI cards */
    .kpi-card         { padding: .44rem .56rem; gap: .44rem; }
    .kpi-total        { min-height: 5rem; }

    /* Logos collab proporcionales */
    .kpi-collab-logo      { height: clamp(22px, 2.6vw, 40px); flex-shrink: 1; min-width: 0; }
    .kpi-collab-logo-igac { height: clamp(32px, 3.8vw, 64px); }

    /* Split IGAC */
    .kpi-split-item span:first-child { font-size: clamp(.78rem, 0.95vw, 1.1rem); }
    .kpi-igac-split   { width: clamp(88px, 9.5vw, 125px); }

    /* Filter bar */
    .filter-bar       { flex-wrap: wrap; padding: 4px 7px; gap: 5px; }
    .filter-label     { font-size: .62rem; }
    .chip             { font-size: .68rem; padding: 2px 7px; }
    .dept-select      { font-size: .7rem; padding: .25em 1.75em .25em .5em; }

    /* Rastreo: compactar en monitor pequeño */
    .app-layout-rastreo .kpi-row-rastreo { gap: 4px; }
    .app-layout-rastreo .kpi-row-rastreo .kpi-card { padding: .32rem .46rem; gap: .3rem; min-height: 3.5rem; }
    .app-layout-rastreo .kpi-row-rastreo .kpi-value { font-size: clamp(.74rem, 1.55vw, .9rem); }
    .app-layout-rastreo .kpi-row-rastreo .kpi-label { font-size: .46rem; line-height: 1.08; }
    .app-layout-rastreo .kpi-row-rastreo .kpi-icon { width: 1.2rem; height: 1.2rem; min-width: 1.2rem; }
    /* Form card compacto */
    .rastreo-form-card    { padding: .4rem .6rem; gap: .25rem; }
    .rastreo-grid         { gap: .35rem; }
    .rastreo-submit       { min-height: 1.75rem; border-radius: .4rem; box-shadow: none; }
    .rastreo-summary      { font-size: .64rem; }
    .rastreo-feedback     { font-size: .62rem; }
    .rastreo-info-btn     { width: 1.4rem; height: 1.4rem; font-size: .68rem; }
    .rastreo-hint         { font-size: clamp(.48rem, .65vw, .6rem); }
    .app-layout-rastreo .table-wrapper .dataTables_scroll { min-height: 0; }

    /* Calidad: compactación agresiva en monitor pequeño */
    .calidad-controls-card    { padding: .3rem .65rem; }
    .calidad-card-title       { font-size: .72rem; }
    .calidad-chart-head       { padding: .45rem .7rem; }
    .calidad-analytics-panel  { gap: .4rem; }
    .calidad-chart-status     { font-size: .62rem; }
    .calidad-select-compact   { font-size: .7rem; }
    .chart-range-btn          { font-size: .62rem; padding: .15rem .4rem; }
}

/* ── Tablet (≤ 1100 px) — solo para páginas SIN layout-fill ──────────── */
@media (max-width: 1100px) {
    /* Calidad: siempre columna porque tiene panel analítico complejo */
    .app-layout-calidad                          { flex-direction: column; height: auto; overflow: visible; align-items: flex-start; }
    .app-layout-calidad .data-panel              { width: 100%; overflow: visible; }
    .calidad-analytics-panel                     { width: 100%; overflow: visible; }
    .calidad-chart-card, .calidad-map-card       { flex: none; }
    .calidad-chart-canvas                        { height: 20rem; flex: none; }
    .calidad-map-card #map                       { min-height: 20rem; flex: none; }
}
/* Páginas sin layout-fill: columna en tablet */
@media (max-width: 1100px) {
    body:not(.layout-fill) .app-layout           { flex-direction: column; height: auto; overflow: auto; }
    body:not(.layout-fill) .data-panel           { width: 100%; }
    body:not(.layout-fill) .map-panel            { height: 55vh; }
    body:not(.layout-fill) .kpi-row              { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    /* ── Variables de escala mobile ─────────────────────────────────────── */
    :root {
        --sp-layout:   6px;
        --sp-panel:    10px;
        --sp-gap:      6px;
        --sp-card:     7px 10px;
        --sp-card-sm:  6px 8px;
        --header-h:    2.75rem;
        --kpi-total-h: auto;
        --kpi-donut-sz: clamp(3.25rem, 12vw, 4.25rem);
        --kpi-val-fs:   clamp(.8rem, 3.5vw, 1rem);
        --kpi-label-fs: .5rem;
    }
    /* Header base */
    .page-header         { padding: 8px 14px; gap: 4px; }
    .page-header-left    { gap: 8px; }
    .page-title          { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .page-header-meta    { flex-wrap: wrap; gap: 6px; }

    /* ── page-header-disposicion en mobile: volver a flex-column (3 filas) ──
       Fila 1: módulo + título
       Fila 2: chips fecha/GPS + botón actualizar (scroll horizontal)
       Fila 3: selectores de red (scroll horizontal)                     */
    .page-header-disposicion {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        padding: 8px 14px;
        min-height: auto;
    }
    .page-header-disposicion .page-header-left {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        min-width: 0;
    }
    .page-header-disposicion .page-header-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        justify-self: unset;
    }
    .page-header-disposicion .page-header-meta::-webkit-scrollbar { display: none; }
    .page-header-disposicion .network-selector {
        grid-area: unset;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        border-top: 1px solid var(--border-light);
        padding: 5px 0 2px;
        gap: 5px;
    }
    .page-header-disposicion .network-selector::-webkit-scrollbar { display: none; }

    .net-btn             { font-size: .7rem; padding: 5px 11px; gap: 4px; flex-shrink: 0; }
    .net-btn-badge       { font-size: .54rem; padding: 1px 4px; }

    /* ── Tablas: min-width garantiza scroll horizontal ──
       El contenedor .dataTables_scroll hace scroll H+V;
       ambas tablas (head/body) tienen el mismo min-width → alineación perfecta. */
    .dataTables_scrollHead table,
    .dataTables_scrollBody table,
    #statusTable {
        min-width: 560px;
    }
    /* Calidad: 7 columnas, scroll horizontal en pantallas estrechas */
    .table-wrapper-calidad .dataTables_scrollHead table,
    .table-wrapper-calidad .dataTables_scrollBody table,
    .table-wrapper-calidad #statusTable {
        min-width: 780px;
    }
    /* Ocultar texto del botón actualizar, dejar solo el ícono */
    .btn-refresh span,
    .btn-refresh { font-size: .75rem; padding: 5px 10px; }
    /* Chips de fecha más compactos */
    .meta-chip           { padding: 3px 8px; font-size: .72rem; }
    .kpi-row             { grid-template-columns: repeat(2, 1fr); }
    /* Disposición: 2 cols, cards especiales en full width */
    .kpi-row-disposicion              { grid-template-columns: repeat(2, 1fr); }
    .kpi-igac-featured                { grid-column: 1 / -1; }
    .kpi-igac-split                   { width: auto; flex: 1; border-left: none; padding-left: 0; }
    .kpi-hero-total                   { grid-column: 1 / -1; }
    .kpi-row-disposicion .kpi-activa  { grid-column: auto; }
    .kpi-row-disposicion .kpi-inactiva { grid-column: auto; }
    .kpi-igac-track-wrap              { min-width: 40px; }
    /* Logos collab: ocultar en móvil */
    .kpi-collab-panel    { display: none; }
    .kpi-total           { min-height: auto; }
    /* Donut: ocupa fila completa, gráfica prominente */
    .kpi-row-disposicion .kpi-donut-card {
        grid-column: 1 / -1;
        justify-content: center;
        gap: 20px;
    }
    .kpi-row-disposicion .kpi-donut-wrap {
        width: clamp(80px, 22vw, 110px);
        height: clamp(80px, 22vw, 110px);
    }
    .kpi-row-disposicion .kpi-donut-legend { flex-direction: row; gap: 16px; }
    .kpi-row-disposicion .kpi-donut-leg-val { font-size: clamp(1.1rem, 4.5vw, 1.4rem); }
    .kpi-row-disposicion .kpi-entity-card  { grid-column: 1 / -1; }
    /* Pasiva: escalar igual que activa */
    .kpi-pasiva-dist-row { grid-template-columns: 22px 46px 1fr 32px 32px; gap: 5px; }
    /* Filter bar */
    .filter-bar          { flex-direction: column; align-items: flex-start; flex-wrap: wrap; }
    .filter-group + .filter-group { border-left: none; padding-left: 0; border-top: 1px solid var(--border-light); padding-top: 6px; }
    .filter-bar          { flex-direction: column; align-items: flex-start; }
    .rastreo-grid                       { grid-template-columns: 1fr; }
    .rastreo-form-card                  { gap: .4rem; }
    .rastreo-submit                     { width: 100%; }
    .rastreo-hint                       { font-size: clamp(.55rem, 2.5vw, .68rem); }
    /* Rastreo: mobile */
    .app-layout-rastreo .data-panel     { width: 100% !important; }
    .kpi-row-rastreo                    { grid-template-columns: repeat(3, 1fr); }
    .map-panel           { height: 45vh; }
    .navbarigac ul         { display: none; }
    .nav-bar-toggle-igac   { display: flex; flex-direction: column; gap: 4px; }
    /* Ocultar imagen del logo, mantener solo el título */
    .navbar-brand-igac     { display: none; }
    .nav-brand-title       { border-left: none; padding-left: 0; }
    .navbarigac .logos     { padding-left: 16px; }
    .container { flex-direction: column; padding: 10px; }
    .table-container, .map-container { width: 90vw; margin: 8px 0; }
    #map { height: 50vh; flex: none; }
    .modal-content { margin: 20vh auto; }
    .stats-cards { grid-template-columns: repeat(2, 1fr); }
    .calidad-chart-head,
    .calidad-map-head { flex-direction: column; align-items: flex-start; }
    .calidad-controls-card { padding: .5rem .75rem; }
    .calidad-controls-fields { gap: .5rem; flex-wrap: wrap; }
    .calidad-controls-divider { display: none; }
    .calidad-controls-selects { flex-wrap: wrap; gap: .375rem; }
    .calidad-station-chip { max-width: 100%; flex: 1 1 100%; }
    .calidad-select-day { min-width: 0; width: 100%; }
    .calidad-download-btn,
    .calidad-logout-btn { width: 100%; justify-content: center; margin-left: 0; }
    .kpi-row-calidad { grid-template-columns: repeat(2, 1fr); }
    .calidad-select-compact { min-width: 0; width: 100%; }
    .calidad-chart-right { width: 100%; flex-wrap: wrap; }
    .calidad-chart-status { text-align: left; }
    .calidad-chart-canvas { height: 18.75rem; }
    .calidad-map-card #map { min-height: 18.75rem; }
    .calidad-map-legend-overlay { bottom: 12px; left: 8px; max-width: min(calc(100% - 16px), 340px); }
    .table-wrapper-calidad .dataTables_filter { text-align: left; }
    .table-wrapper-calidad .dataTables_filter input { min-width: 0; width: 100%; max-width: 100%; }
    /* Reducir fuente de la tabla calidad en tablets */
    .table-wrapper-calidad #statusTable,
    .table-wrapper-calidad .dataTables_scrollHead table {
        font-size: .77rem;
    }
    .login-card { padding: 24px 20px 20px; }

    /* ── Barra GOV compacta en mobile ── */
    .barra_gov              { height: 1.625rem; }
    .logo-gov img           { height: .72rem; }

    /* ── Touch targets mínimos (WCAG 2.5.5 ≥ 44 × 44 logical px) ── */
    .btn-refresh            { min-height: 2.5rem; padding-left: .875rem; padding-right: .875rem; }
    .dept-select,
    .rastreo-select,
    .calidad-select-sm,
    .calidad-select-day     { min-height: 2.25rem; }
    .chip                   { min-height: 1.875rem; display: inline-flex; align-items: center; justify-content: center; }

    /* ── Page-header de conexion: columna en mobile ── */
    .page-header-conexion {
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        padding: 8px 14px;
    }
    .page-header-conexion .page-header-meta {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        justify-content: flex-start;
        gap: 6px;
    }
    .page-header-conexion .page-header-meta::-webkit-scrollbar { display: none; }
}

@media (max-width: 480px) {
    .kpi-row             { grid-template-columns: repeat(2, 1fr); }
    .kpi-row-disposicion { grid-template-columns: 1fr 1fr; }
    .kpi-row-rastreo     { grid-template-columns: 1fr; }
    .kpi-row-pasiva      { grid-template-columns: 1fr; }
    .kpi-igac-split      { width: auto; }
    #statusTable         { font-size: .78rem; }
    .table-wrapper-calidad #statusTable,
    .table-wrapper-calidad .dataTables_scrollHead table { font-size: .72rem; }
    .rastreo-form-card   { padding: .375rem .5rem; gap: .25rem; }
    /* page-title ultra compacto en teléfonos pequeños */
    .page-title          { font-size: .78rem; }
    .module-tag          { font-size: .6rem; padding: 2px 7px; }
    /* barra GOV aún más compacta */
    .barra_gov           { height: 1.375rem; }
    .logo-gov img        { height: .65rem; }
    /* KPI conexion en 1 columna */
    .kpi-row-conexion    { flex-direction: column; }
    .kpi-row-conexion .kpi-card { flex: 1 1 auto; }
}

@media (max-width: 480px) {
    :root {
        --sp-layout:   4px;
        --sp-panel:    8px;
        --sp-gap:      5px;
        --sp-card:     6px 8px;
        --sp-card-sm:  5px 7px;
        --kpi-donut-sz: clamp(46px, 11vw, 58px);
        --kpi-val-fs:   clamp(.75rem, 3vw, .9rem);
    }
    .kpi-card             { gap: 6px; border-left-width: 3px; }
    .kpi-entity-bar-outer { height: 4px; }
    .kpi-entity-row       { gap: 5px; }
    .kpi-donut-dot        { width: 6px; height: 6px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .table-container, .map-container { width: 45%; }
}


/* ── KPI Red Pasiva ──────────────────────────────────────────────────────── */

/* ── KPI Red Pasiva: 2 cards — Total + distribución por orden ── */
.kpi-row-pasiva {
    display: grid;
    grid-template-columns: minmax(min-content, 40%) 1fr;
    gap: 8px;
}

.kpi-row-pasiva .kpi-card {
    min-width: 0;
    overflow: hidden;
}

.kpi-row-pasiva .kpi-card::after { display: none; }

/* Card total */
.kpi-pasiva-total {
    background: var(--color-primary);
    border-left-color: #10274f;
}

.kpi-pasiva-total .kpi-icon {
    background: rgba(255,255,255,.15);
    color: #fff;
    flex-shrink: 0;
}

.kpi-pasiva-total .kpi-value { color: #fff; }
.kpi-pasiva-total .kpi-label { color: rgba(255,255,255,.72); }

/* Card distribución */
.kpi-pasiva-dist {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 14px;
    background: #fff4e6;        /* naranja muy suave — mismo tono que el símbolo */
    border-left-color: #fe8000; /* naranja pasiva exacto */
}

.kpi-pasiva-dist-title {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #7c3200;             /* naranja oscuro, contraste sobre #fff4e6 */
    flex-shrink: 0;
}

.kpi-pasiva-dist-rows {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    justify-content: center;
}

.kpi-pasiva-dist-row {
    display: grid;
    grid-template-columns: 22px 80px minmax(60px, 1fr) 36px 36px;
    align-items: center;
    gap: 6px;
}

/* Badge O2 / O3 / O4 */
.kpi-pasiva-ord-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .02em;
    flex-shrink: 0;
}

.kpi-pasiva-ord-badge-2 { background: var(--color-activa-bg);  color: var(--color-activa); }
.kpi-pasiva-ord-badge-3 { background: #dbeafe;                 color: var(--color-primary-light); }
.kpi-pasiva-ord-badge-4 { background: var(--color-pasiva-bg);  color: var(--color-pasiva-text); }

.kpi-pasiva-dist-label {
    font-size: .73rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
}

/* Barra de progreso */
.kpi-pasiva-bar-wrap {
    background: #fdd5a0;        /* naranja claro — track visible sobre #fff4e6 */
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    min-width: 0;
}

.kpi-pasiva-bar {
    height: 100%;
    border-radius: 4px;
    width: 0%;
    transition: width .7s cubic-bezier(.4,0,.2,1);
}

.kpi-pasiva-bar-o2 { background: var(--color-activa); }
.kpi-pasiva-bar-o3 { background: var(--color-primary-light); }
.kpi-pasiva-bar-o4 { background: var(--color-pasiva); }

.kpi-pasiva-dist-count {
    font-size: .8rem;
    font-weight: 700;
    color: #3d1600;             /* marrón-naranja oscuro */
    text-align: right;
    white-space: nowrap;
}

.kpi-pasiva-dist-pct {
    font-size: .67rem;
    color: #a04010;             /* naranja medio, legible sobre fondo claro */
    white-space: nowrap;
    text-align: right;
}

@media (max-width: 768px) {
    .kpi-row-pasiva { grid-template-columns: 1fr; }
}

/* ── KPIs Red Vertical ───────────────────────────────────────────────────── */

.kpi-row-vertical {
    display: grid;
    grid-template-columns: minmax(min-content, 40%) 1fr;
    gap: 8px;
}

.kpi-row-vertical .kpi-card {
    min-width: 0;
    overflow: hidden;
}

.kpi-row-vertical .kpi-card::after { display: none; }

.kpi-vertical-total {
    background: var(--color-primary);
    border-left-color: #10274f;
}

.kpi-vertical-total .kpi-icon {
    background: rgba(255,255,255,.15);
    color: #fff;
    flex-shrink: 0;
}

.kpi-vertical-total .kpi-value { color: #fff; }
.kpi-vertical-total .kpi-label { color: rgba(255,255,255,.72); }

/* Card distribución */
.kpi-vertical-dist {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 14px;
    background: #dbeafe;        /* azul muy claro — mismo tono que el símbolo */
    border-left-color: #0891b2; /* azul vertical exacto */
}

.kpi-vertical-dist-title {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #0c4a6e;             /* azul oscuro, contraste sobre #dbeafe */
    flex-shrink: 0;
}

.kpi-vertical-dist-rows {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    justify-content: center;
}

.kpi-vertical-dist-row {
    display: grid;
    grid-template-columns: 22px 80px minmax(60px, 1fr) 36px 36px;
    align-items: center;
    gap: 6px;
}

/* Badge para tipos de coordenadas */
.kpi-vertical-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .02em;
    flex-shrink: 0;
}

.kpi-vertical-badge-geo {   background: #dbeafe;                 color: var(--color-primary-light); }
.kpi-vertical-badge-elip {  background: #cffafe;                 color: #0891b2; }
.kpi-vertical-badge-ortho { background: var(--color-activa-bg);  color: var(--color-activa); }

.kpi-vertical-dist-label {
    font-size: .73rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
}

/* Barra de progreso */
.kpi-vertical-dist-bar-wrap {
    background: #bae6fd;        /* azul claro — track visible sobre #dbeafe */
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    min-width: 0;
}

.kpi-vertical-dist-bar {
    height: 100%;
    border-radius: 4px;
    width: 0%;
    background: #0891b2;        /* azul base */
    transition: width .7s cubic-bezier(.4,0,.2,1);
}

.kpi-vertical-dist-count {
    font-size: .8rem;
    font-weight: 700;
    color: #0c4a6e;             /* azul-gris oscuro */
    text-align: right;
    white-space: nowrap;
}

.kpi-vertical-dist-pct {
    font-size: .67rem;
    color: #0891b2;             /* azul medio, legible sobre fondo claro */
    white-space: nowrap;
    text-align: right;
}

@media (max-width: 768px) {
    .kpi-row-vertical { grid-template-columns: 1fr; }
}

/* Marcador diamante para la leyenda vertical */
.legend-vertical-marker {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: rgba(8, 145, 178, 0.92);
    border: 1.5px solid rgba(6, 100, 125, 0.9);
    transform: rotate(45deg);
    flex-shrink: 0;
    margin: 2px 3px;
}

/* ── Network Selector (dentro del page-header) ───────────────────────────── */

.network-selector {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
    flex-wrap: nowrap;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;   /* evita que left:50% restrinja el ancho a viewport/2 */
}

.net-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
    white-space: nowrap;
    line-height: 1.4;
}

.net-btn:hover:not(.net-btn-soon) {
    background: #e8edf7;
    border-color: var(--color-primary-light);
    color: var(--color-primary);
}

.net-btn-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(30,53,105,.28);
}

.net-btn-active:hover {
    background: var(--color-primary-light) !important;
    border-color: var(--color-primary-light) !important;
}

.net-btn-soon {
    cursor: pointer;
    pointer-events: auto;
}

.net-btn-soon:hover {
    background: #e8edf7;
    border-color: var(--color-primary-light);
    color: var(--color-primary);
}

.net-btn-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.net-btn-svg {
    flex-shrink: 0;
    opacity: .75;
    color: var(--text-muted);
}

/* Unselected: greyscale gif */
.net-btn:not(.net-btn-active) .net-btn-icon {
    filter: grayscale(1);
    opacity: .75;
}

/* Active: restore icon visibility */
.net-btn-active .net-btn-svg  { opacity: 1; }
.net-btn-active .net-btn-icon { filter: none; opacity: 1; }

/* Active: network symbology colors per button */
.net-btn-active[data-network="pasiva"]       .net-btn-svg { color: #fe8000 !important; }
.net-btn-active[data-network="vertical"]     .net-btn-svg { color: #0891b2 !important; }
.net-btn-active[data-network="gravimetrica"] .net-btn-svg { color: #facc15 !important; }

.net-btn-badge {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: var(--color-accent);
    color: #fff;
    padding: 1px 5px;
    border-radius: 4px;
    line-height: 1.5;
}

/* ── Info dot sobre botón de red ─────────────────────────────────────────── */
.net-btn-info-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.07);
    font-size: 8.5px;
    font-style: italic;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.55;
    line-height: 1;
    user-select: none;
    transition: background .15s, opacity .15s;
    color: inherit;
}
.net-btn-info-dot:hover {
    background: rgba(0, 0, 0, 0.14);
    opacity: 1;
}
.net-btn-active .net-btn-info-dot {
    background: rgba(255, 255, 255, 0.20);
    color: #fff;
    opacity: 0.85;
}
.net-btn-active .net-btn-info-dot:hover {
    background: rgba(255, 255, 255, 0.38);
    opacity: 1;
}

/* ── Panel de información de red ─────────────────────────────────────────── */
.network-info-panel {
    background: #fff;
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s ease, border-color .25s;
    position: relative;
    z-index: 10;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
}
.network-info-panel.is-open {
    max-height: 200px;
}
.net-info-inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 28px;
}
.net-info-icon-wrap {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #e8edf7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}
.net-info-body {
    flex: 1;
    min-width: 0;
}
.net-info-names {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}
.net-info-name {
    font-size: .88rem;
    font-weight: 700;
    color: var(--color-primary);
}
.net-info-subtitle {
    font-size: .72rem;
    color: var(--text-muted);
    font-weight: 500;
}
.net-info-desc {
    font-size: .78rem;
    color: var(--text);
    line-height: 1.55;
    margin: 0 0 8px;
}
.net-info-specs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.net-info-spec-chip {
    font-size: .67rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 4px;
    background: var(--color-primary);
    color: #fff;
    letter-spacing: .02em;
}
.net-info-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    padding: 4px 12px;
    transition: background .15s, opacity .15s;
}
.net-info-link:hover {
    background: var(--color-primary-light);
    opacity: 1;
}
.net-info-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
    align-self: flex-start;
    margin-top: 1px;
}
.net-info-close:hover {
    background: var(--border);
    color: var(--text);
}

/* Variantes de color por red */
.network-info-panel[data-network="pasiva"] .net-info-icon-wrap { background: #fff4e6; color: #fe8000; }
.network-info-panel[data-network="pasiva"] .net-info-name { color: #7c3200; }
.network-info-panel[data-network="pasiva"] .net-info-spec-chip { background: #fe8000; }
.network-info-panel[data-network="vertical"] .net-info-icon-wrap { background: #dce8f8; color: var(--color-primary-light); }
.network-info-panel[data-network="vertical"] .net-info-spec-chip { background: var(--color-primary-light); }
.network-info-panel[data-network="gravimetrica"] .net-info-icon-wrap { background: #f1f5f9; color: #475569; }
.network-info-panel[data-network="gravimetrica"] .net-info-name { color: #334155; }
.network-info-panel[data-network="gravimetrica"] .net-info-spec-chip { background: #64748b; }

/* ── Toast "Próximamente" para redes no disponibles ───────────────────────── */
.net-soon-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: var(--color-primary);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 22px;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(21,37,73,.30);
    font-size: .82rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s, transform .22s;
    z-index: 9999;
    white-space: nowrap;
}
.net-soon-toast strong {
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .01em;
}
.net-soon-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* ── Layout de tabla: table-layout fixed (JS actualiza sWidth vía DataTables API) ── */

.table-wrapper #statusTable,
.dataTables_scrollHead table,
.dataTables_scrollBody table,
.table-wrapper-calidad #statusTable {
    table-layout: fixed !important;
}

/* Celdas por defecto: truncar con ellipsis */
#statusTable thead th,
#statusTable tbody td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Red Activa ── */

/* Col "Estado": badge centrado */
body[data-network="activa"] #statusTable thead th:nth-child(4),
body[data-network="activa"] #statusTable tbody td:nth-child(4) {
    text-align: center;
}

/* ── Red Pasiva ── */

/* Col "Orden": centrado */
body[data-network="pasiva"] #statusTable thead th:nth-child(3),
body[data-network="pasiva"] #statusTable tbody td:nth-child(3) {
    text-align: center;
}

/* Col "Lugar": puede wrappear (texto largo de ubicación) */
body[data-network="pasiva"] #statusTable tbody td:nth-child(4) {
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
    font-size: .78rem;
}

/* ── Responsive tabla ── */
@media (max-width: 600px) {
    #statusTable {
        font-size: .72rem;
    }
    #statusTable thead th,
    .dataTables_scrollHead table thead th {
        font-size: .50rem;
        letter-spacing: 0;
        padding: 6px 16px 6px 5px;
    }
    #statusTable tbody td {
        padding: 6px 6px;
    }
    body[data-network="pasiva"] #statusTable tbody td:nth-child(4) {
        font-size: .70rem;
    }
}

/* ── KPIs Red Gravimétrica ────────────────────────────────────────────────── */

.kpi-row-grav {
    display: grid;
    grid-template-columns: minmax(min-content, 40%) 1fr;
    gap: 8px;
}

.kpi-row-grav .kpi-card { min-width: 0; overflow: hidden; }
.kpi-row-grav .kpi-card::after { display: none; }

.kpi-grav-total {
    background: var(--color-primary);
    border-left-color: #10274f;
}

.kpi-grav-total .kpi-icon {
    background: rgba(255,255,255,.15);
    color: #fff;
    flex-shrink: 0;
}

.kpi-grav-total .kpi-value { color: #fff; }
.kpi-grav-total .kpi-label { color: rgba(255,255,255,.72); }

.kpi-grav-subtotals {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.kpi-grav-sub-item {
    font-size: .68rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 10px;
}

.kpi-grav-sub-item strong { font-weight: 700; }

.kpi-grav-sub-abs {
    background: rgba(245,158,11,.28);
    color: #fde68a;               /* ámbar claro — absoluta */
}

.kpi-grav-sub-rel {
    background: rgba(250,204,21,.18);
    color: #fef9c3;               /* amarillo pálido — relativa */
}

.kpi-grav-sub-sep {
    color: rgba(254,243,199,.45);
    font-size: .7rem;
}

/* Card distribución */
.kpi-grav-dist {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 14px;
    background: #fef9c3;          /* yellow-100 */
    border-left-color: #ca8a04;   /* yellow-600 */
}

.kpi-grav-dist-title {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #713f12;               /* amber-900 */
    flex-shrink: 0;
}

.kpi-grav-dist-rows {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    justify-content: center;
}

.kpi-grav-dist-row {
    display: grid;
    grid-template-columns: 22px 80px minmax(60px, 1fr) 36px 36px;
    align-items: center;
    gap: 6px;
}

.kpi-grav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: .6rem;
    font-weight: 800;
    flex-shrink: 0;
}

.kpi-grav-badge-apx { background: #fef08a; color: #713f12; }
.kpi-grav-badge-cal { background: #fde68a; color: #92400e; }
.kpi-grav-badge-sin { background: #fef3c7; color: #a16207; }

.kpi-grav-dist-label {
    font-size: .73rem;
    font-weight: 600;
    color: #78350f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.kpi-grav-dist-bar-wrap {
    background: #fde68a;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    min-width: 0;
}

.kpi-grav-dist-bar {
    height: 100%;
    border-radius: 4px;
    width: 0%;
    background: #ca8a04;
    transition: width .7s cubic-bezier(.4,0,.2,1);
}

.kpi-grav-dist-count {
    font-size: .8rem;
    font-weight: 700;
    color: #78350f;
    text-align: right;
    white-space: nowrap;
}

.kpi-grav-dist-pct {
    font-size: .67rem;
    color: #ca8a04;
    white-space: nowrap;
    text-align: right;
}

@media (max-width: 768px) {
    .kpi-row-grav { grid-template-columns: 1fr; }
}

/* Chips gravimétrica — Todos / Relativa / Absoluta: tamaño compacto */
#grav-tipo-chips .chip {
    padding: 2px 7px;
    font-size: .68rem;
}

/* Select tipo_coord: evitar desbordamiento */
#grav-tipo-coord-filter {
    min-width: 0;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-grav-rel,
.chip-grav-abs {
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.chip-grav-rel:hover { background: #fef9c3; color: #713f12; border-color: #fde047; }
.chip-grav-rel.chip-active { background: #facc15; color: #431407; border-color: #ca8a04; }
.chip-grav-abs:hover { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.chip-grav-abs.chip-active { background: #f59e0b; color: #fff; border-color: #b45309; }

/* Marcadores para la leyenda gravimétrica */
.legend-grav-rel-marker,
.legend-grav-abs-marker {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    margin: 2px 3px;
}

.legend-grav-rel-marker {
    background: rgba(250, 204, 21, 0.88);
    border: 0.5px solid rgba(161, 98, 7, 0.80);
}

.legend-grav-abs-marker {
    background: rgba(245, 158, 11, 0.95);
    border: 1.8px solid rgba(120, 53, 15, 0.95);
}

/* Badge Abs/Rel en la tabla */
.badge-grav-abs {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 8px;
    font-size: .62rem;
    font-weight: 700;
    background: #fde68a;
    color: #92400e;
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

.badge-grav-rel {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 8px;
    font-size: .62rem;
    font-weight: 700;
    background: #fef08a;
    color: #713f12;
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

.badge-est-vertice {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 8px;
    font-size: .62rem;
    font-weight: 700;
    background: #fee2e2;
    color: #991b1b;
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ── Visibilidad por red (body[data-network]) ─────────────────────────────── */

body[data-network="activa"]      .net-pasiva,
body[data-network="activa"]      .net-vertical,
body[data-network="activa"]      .net-gravimetrica { display: none !important; }
body[data-network="pasiva"]      .net-activa,
body[data-network="pasiva"]      .net-vertical,
body[data-network="pasiva"]      .net-gravimetrica { display: none !important; }
body[data-network="vertical"]    .net-activa,
body[data-network="vertical"]    .net-pasiva,
body[data-network="vertical"]    .net-gravimetrica { display: none !important; }
body[data-network="gravimetrica"] .net-activa,
body[data-network="gravimetrica"] .net-pasiva,
body[data-network="gravimetrica"] .net-vertical    { display: none !important; }

/* Toggles de capa que no aplican a cada red */
body[data-network="pasiva"]       .layer-toggle-row.net-activa { display: none; }
body[data-network="vertical"]     .layer-toggle-row.net-activa { display: none; }
body[data-network="gravimetrica"] .layer-toggle-row.net-activa { display: none; }

/* ── Layout fullscreen desktop — todos los módulos ───────────────────────── */
/* ≥769px: body bloqueado a 100vh, mapa ocupa toda la altura disponible.     */
/* ≤768px: se libera el scroll normal (comportamiento móvil).                */

@media (min-width: 769px) {
    body.layout-fill {
        height: 100vh;
        overflow: hidden;
    }
    body.layout-fill .footer { display: none; }

    /* Flex chain: garantiza que tabla y mapa llenen el espacio restante */
    body.layout-fill .app-layout       { overflow: hidden; flex: 1; min-height: 0; }
    body.layout-fill .map-panel        { flex: 1; min-height: 0; }

    /* .container (transmision legacy) participa en la cadena flex */
    body.layout-fill .container        { flex: 1; min-height: 0; height: auto; overflow: hidden; }

    /* Chrome compacto */
    body.layout-fill .kpi-card:not(.kpi-pasiva-ord) { padding: 7px 10px; }
    body.layout-fill .filter-bar                    { padding: 4px 8px; }

    /* Logos collab escalables */
    body.layout-fill .kpi-collab-logo      { height: clamp(22px, 2.6vw, 50px); flex-shrink: 1; min-width: 0; }
    body.layout-fill .kpi-collab-logo-igac { height: clamp(32px, 3.8vw, 80px); }
}

/* ≤768px — layout-fill se comporta como página normal (scroll natural) */
@media (max-width: 768px) {
    body.layout-fill                   { height: auto; overflow: auto; }
    body.layout-fill .footer           { display: block; }
    body.layout-fill .app-layout       { flex-direction: column; overflow: auto; }
    body.layout-fill .data-panel       { width: 100%; }
    body.layout-fill .map-panel        { height: 50vh; flex: none; }
    body.layout-fill .container        { flex-direction: column; height: auto; }
    /* Limitar la altura del contenedor de scroll en móvil y permitir scroll H para tablas anchas */
    .dataTables_wrapper .dataTables_scroll { max-height: 50vh; overflow: auto; }

    /* ── Leyenda del mapa: compacta en móvil, colapsada por defecto ── */
    .map-legend-overlay {
        padding: 7px 9px;
        font-size: .64rem;
        bottom: 12px;
        left: 8px;
        max-width: min(calc(100% - 16px), 210px);
        gap: 3px;
    }
    .map-legend-overlay:not(.legend-collapsed) { padding: 7px 9px 9px; }
    .legend-block-title,
    .layer-controls-title {
        font-size: .58rem;
    }
    .legend-state-chip {
        font-size: .60rem;
        padding: 1px 4px;
    }
    .legend-gif-sym {
        width: 14px;
        height: 14px;
    }
    .layer-controls {
        gap: 3px;
        padding-top: 5px;
    }
    .layer-toggle-label {
        font-size: .65rem;
    }
    .layer-toggle-track {
        width: 26px;
        height: 14px;
        border-radius: 7px;
    }
    .layer-toggle-track::after {
        width: 10px;
        height: 10px;
    }
    .layer-toggle-row input:checked ~ .layer-toggle-track::after {
        transform: translateX(12px);
    }
    /* Leyenda rastreo: admite más ancho por tener 3 items */
.map-legend-overlay-rastreo {
        max-width: min(calc(100% - 16px), 310px);
    }
}

@media (min-width: 769px) {
    body.layout-fill .filter-bar.net-activa,
    body.layout-fill .filter-bar.net-pasiva,
    body.layout-fill .filter-bar.net-vertical,
    body.layout-fill .filter-bar.net-gravimetrica {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-width: 0;
        overflow-x: visible;
    }

    body.layout-fill .filter-bar.net-activa {
        justify-content: flex-start;
    }

    body.layout-fill .filter-bar.net-pasiva,
    body.layout-fill .filter-bar.net-vertical,
    body.layout-fill .filter-bar.net-gravimetrica {
        justify-content: flex-start;
    }

    body.layout-fill .filter-bar.net-activa .filter-group,
    body.layout-fill .filter-bar.net-pasiva .filter-group,
    body.layout-fill .filter-bar.net-vertical .filter-group,
    body.layout-fill .filter-bar.net-gravimetrica .filter-group {
        display: flex;
        align-items: center;
        width: auto;
        min-width: 0;
        gap: 6px;
        flex-shrink: 1;
    }

    body.layout-fill .filter-bar.net-activa .filter-group + .filter-group,
    body.layout-fill .filter-bar.net-pasiva .filter-group + .filter-group,
    body.layout-fill .filter-bar.net-vertical .filter-group + .filter-group,
    body.layout-fill .filter-bar.net-gravimetrica .filter-group + .filter-group {
        min-width: 0;
    }

    body.layout-fill .filter-bar.net-activa .filter-chips,
    body.layout-fill .filter-bar.net-gravimetrica .filter-chips {
        min-width: 0;
        justify-content: flex-start;
    }

    body.layout-fill .filter-bar.net-activa .dept-select,
    body.layout-fill .filter-bar.net-pasiva .dept-select,
    body.layout-fill .filter-bar.net-vertical .dept-select,
    body.layout-fill .filter-bar.net-gravimetrica .dept-select {
        width: auto;
    }

    body.layout-fill #dept-filter,
    body.layout-fill #pasiva-dept-filter,
    body.layout-fill #vertical-dept-filter,
    body.layout-fill #grav-dept-filter {
        min-width: 7rem;
        max-width: 8.5rem;
    }

    body.layout-fill #inst-filter {
        min-width: 7.5rem;
        max-width: 8.75rem;
    }

    body.layout-fill #orden-filter,
    body.layout-fill #grav-tipo-coord-filter,
    body.layout-fill #tipo-coord-filter {
        min-width: 6.5rem;
        max-width: 8rem;
    }

    body.layout-fill #pasiva-muni-filter,
    body.layout-fill #vertical-muni-filter {
        min-width: 6.5rem;
        max-width: 8rem;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    body.layout-fill .filter-bar.net-activa,
    body.layout-fill .filter-bar.net-pasiva,
    body.layout-fill .filter-bar.net-vertical,
    body.layout-fill .filter-bar.net-gravimetrica {
        flex-wrap: wrap;
    }
}

@media (min-width: 1025px) and (max-width: 1400px) {
    #statusTable {
        font-size: .78rem;
    }

    #statusTable thead th,
    .dataTables_scrollHead table thead th {
        font-size: .58rem;
        padding: 8px 20px 8px 9px;
    }

    #statusTable tbody td {
        padding: 7px 10px;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_filter input {
        font-size: .76rem;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        font-size: .72rem;
    }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    body.layout-fill[data-network] .data-panel {
        padding: 12px;
        gap: 8px;
    }

    body.layout-fill[data-network] .kpi-row-disposicion {
        gap: 5px;
    }

    body.layout-fill[data-network] .kpi-card:not(.kpi-pasiva-ord) {
        padding: 6px 9px;
        gap: 8px;
    }

    body.layout-fill[data-network] .kpi-value {
        font-size: clamp(1.05rem, 1.9vw, 1.45rem);
    }

    body.layout-fill[data-network] .kpi-label {
        font-size: .53rem;
    }

    body.layout-fill[data-network] .kpi-collab-logo {
        height: clamp(18px, 2vw, 34px);
    }

    body.layout-fill[data-network] .kpi-collab-logo-igac {
        height: clamp(28px, 3vw, 58px);
    }

    body.layout-fill[data-network] .table-search-bar {
        padding: 4px 8px;
    }

    body.layout-fill[data-network] .table-search-input {
        font-size: .76rem;
    }

    body.layout-fill[data-network] .filter-bar.net-activa,
    body.layout-fill[data-network] .filter-bar.net-pasiva,
    body.layout-fill[data-network] .filter-bar.net-vertical,
    body.layout-fill[data-network] .filter-bar.net-gravimetrica {
        display: flex;
        align-items: center;
        width: 100%;
        overflow-x: visible;
        gap: 6px;
        flex-wrap: nowrap;
    }

    body.layout-fill[data-network] .filter-bar.net-activa .filter-group,
    body.layout-fill[data-network] .filter-bar.net-pasiva .filter-group,
    body.layout-fill[data-network] .filter-bar.net-vertical .filter-group,
    body.layout-fill[data-network] .filter-bar.net-gravimetrica .filter-group {
        display: flex;
        align-items: center;
        width: auto;
        min-width: 0;
        gap: 5px;
        flex-shrink: 1;
    }

    body.layout-fill[data-network] .filter-bar.net-activa .filter-group + .filter-group,
    body.layout-fill[data-network] .filter-bar.net-pasiva .filter-group + .filter-group,
    body.layout-fill[data-network] .filter-bar.net-vertical .filter-group + .filter-group,
    body.layout-fill[data-network] .filter-bar.net-gravimetrica .filter-group + .filter-group {
        border-left: none;
        padding-left: 0;
    }

    body.layout-fill[data-network] .filter-bar.net-activa .filter-chips,
    body.layout-fill[data-network] .filter-bar.net-gravimetrica .filter-chips {
        min-width: 0;
        flex-wrap: nowrap;
        gap: 3px;
    }

    body.layout-fill[data-network] #dept-filter,
    body.layout-fill[data-network] #inst-filter,
    body.layout-fill[data-network] #pasiva-dept-filter,
    body.layout-fill[data-network] #orden-filter,
    body.layout-fill[data-network] #vertical-dept-filter,
    body.layout-fill[data-network] #vertical-muni-filter,
    body.layout-fill[data-network] #tipo-coord-filter,
    body.layout-fill[data-network] #grav-dept-filter,
    body.layout-fill[data-network] #grav-tipo-coord-filter {
        width: auto;
        min-width: 0;
    }

    body.layout-fill[data-network] .dt-bottom {
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
    }

    body.layout-fill[data-network] .dt-bottom .dataTables_length {
        order: 1;
    }

    body.layout-fill[data-network] .dt-bottom .dataTables_paginate {
        order: 2;
        margin-left: auto;
    }

    body.layout-fill[data-network] .dt-bottom .dataTables_info {
        order: 3;
        flex: 1 1 auto;
        text-align: center;
    }

    body.layout-fill[data-network] .filter-label {
        font-size: .56rem;
        letter-spacing: .05em;
    }

    body.layout-fill[data-network] .chip {
        font-size: .64rem;
        padding: 2px 6px;
    }

    body.layout-fill[data-network] .dept-select {
        font-size: .66rem;
        padding: .2em 1.45em .2em .45em;
    }

    body.layout-fill[data-network] #dept-filter,
    body.layout-fill[data-network] #pasiva-dept-filter,
    body.layout-fill[data-network] #vertical-dept-filter,
    body.layout-fill[data-network] #grav-dept-filter {
        max-width: 7rem;
    }

    body.layout-fill[data-network] #inst-filter {
        max-width: 7.35rem;
    }

    body.layout-fill[data-network] #orden-filter,
    body.layout-fill[data-network] #vertical-muni-filter,
    body.layout-fill[data-network] #tipo-coord-filter,
    body.layout-fill[data-network] #grav-tipo-coord-filter {
        max-width: 6.35rem;
    }

    body.layout-fill[data-network] .dataTables_wrapper .dataTables_length,
    body.layout-fill[data-network] .dataTables_wrapper .dataTables_length select,
    body.layout-fill[data-network] .dataTables_wrapper .dataTables_info,
    body.layout-fill[data-network] .dataTables_wrapper .dataTables_paginate .paginate_button {
        font-size: .68rem;
    }

    body.layout-fill[data-network] .dataTables_wrapper .dataTables_length select {
        padding: 2px 4px;
    }

    body.layout-fill[data-network] .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 2px 6px;
        margin: 0 1px;
    }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    .app-layout-rastreo #rastreo-filter-bar {
        display: flex;
        align-items: center;
        width: 100%;
        overflow-x: visible;
        gap: 6px;
        flex-wrap: nowrap;
    }

    .app-layout-rastreo #rastreo-filter-bar .filter-group {
        display: flex;
        align-items: center;
        width: auto;
        min-width: 0;
        gap: 5px;
        flex-shrink: 1;
    }

    .app-layout-rastreo #rastreo-filter-bar .filter-group + .filter-group {
        border-left: none;
        padding-left: 0;
    }

    .app-layout-rastreo #rastreo-filter-bar .filter-chips {
        min-width: 0;
        flex-wrap: nowrap;
        gap: 3px;
    }

    .app-layout-rastreo #rastreo-filter-bar .filter-label {
        font-size: .56rem;
        letter-spacing: .05em;
    }

    .app-layout-rastreo #rastreo-filter-bar .chip {
        font-size: .64rem;
        padding: 2px 6px;
    }

    .app-layout-rastreo #rastreo-filter-bar .dept-select {
        font-size: .66rem;
        padding: .2em 1.45em .2em .45em;
        width: auto;
        min-width: 0;
    }

    .app-layout-rastreo #dept-filter {
        max-width: 7rem;
    }

    .app-layout-rastreo #inst-filter {
        max-width: 7.35rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Admin modal — gestión de usuarios calidad
   ══════════════════════════════════════════════════════════════════════════ */

.admin-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,15,30,.55);
    backdrop-filter: blur(3px);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.admin-modal-card {
    background: #fff;
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 52rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    overflow: hidden;
}

.admin-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    background: linear-gradient(90deg, rgba(30,53,105,.06) 0%, transparent 70%);
    border-top: 2px solid var(--color-primary);
}

.admin-modal-title {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.admin-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-muted);
    padding: .25rem .4rem;
    border-radius: var(--r-sm);
    transition: background .15s;
}
.admin-modal-close:hover { background: var(--surface-2); }

.admin-modal-body {
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.admin-section { display: flex; flex-direction: column; gap: .6rem; }

.admin-section-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: .3rem;
}

.admin-table-wrap { overflow-x: auto; }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
}
.admin-table th {
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .4rem .6rem;
    border-bottom: 1px solid var(--border-light);
}
.admin-table td {
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
    vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--surface-1); }

.admin-loading { text-align: center; color: var(--text-muted); padding: 1rem; }
.admin-error { color: var(--color-inactiva-text) !important; }

.admin-rol-chip {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .15rem .45rem;
    border-radius: 999px;
}
.admin-rol-admin     { background: rgba(30,53,105,.1); color: var(--color-primary); }
.admin-rol-consultor { background: var(--color-pasiva-bg); color: var(--color-pasiva); }

.admin-you-badge {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: rgba(5,150,105,.12);
    color: var(--color-activa-text);
    padding: .1rem .35rem;
    border-radius: 999px;
    vertical-align: middle;
}

.admin-actions { display: flex; gap: .35rem; }
.admin-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .85rem;
    padding: .2rem .3rem;
    border-radius: var(--r-sm);
    transition: background .15s;
    line-height: 1;
}
.admin-btn:hover { background: var(--surface-2); }

/* Formulario crear usuario */
.admin-create-form { display: flex; flex-direction: column; gap: .55rem; }

.admin-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}
.admin-form-row-bottom {
    grid-template-columns: auto 1fr;
    align-items: flex-end;
}

.admin-form-field { display: flex; flex-direction: column; gap: .25rem; }
.admin-form-field-sm { min-width: 8rem; }

.admin-form-label {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-primary);
}

.admin-form-input {
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    padding: .38em .6em;
    font-size: .8rem;
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--surface-1);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.admin-form-input:focus {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 2px rgba(30,53,105,.1);
}

.admin-submit-btn {
    padding: .45em 1.1em;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    font-size: .8rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background .15s;
    height: 2.1rem;
    align-self: flex-end;
}
.admin-submit-btn:hover { background: var(--color-primary-light); }

.admin-msg {
    font-size: .72rem;
    font-weight: 600;
    min-height: 1rem;
    margin: 0;
}
.admin-msg-ok    { color: var(--color-activa-text); }
.admin-msg-error { color: var(--color-inactiva-text); }

@media (max-width: 600px) {
    .admin-form-row { grid-template-columns: 1fr; }
    .admin-form-row-bottom { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Módulo Conexión — Timeline GNSS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Module tag ── */
.module-tag-conexion { background: #0891b2; color: #fff; }

/* ── Auto-refresh button ── */
.btn-auto-refresh {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-family: var(--font);
    font-size: .73rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.auto-refresh-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
    transition: background .2s;
}
.btn-auto-refresh.auto-refresh-on  .auto-refresh-dot,
.btn-refresh.auto-refresh-on       .auto-refresh-dot { background: #059669; animation: pulse-dot 2s infinite; }
.btn-auto-refresh.auto-refresh-off .auto-refresh-dot,
.btn-refresh.auto-refresh-off      .auto-refresh-dot { background: #94a3b8; }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: .35; }
}

/* ── Conexión layout general ── */
.layout-conexion .app-layout { display: none; } /* no usar el layout de disposición */

.conexion-layout {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px var(--sp-layout) var(--sp-layout);
    gap: 6px;
    overflow: hidden;
}

/* ── KPI + filtros wrapper ── */
.conexion-kpi-bar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ── KPI row ── */
.kpi-row-conexion {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 6px;
}
.kpi-row-conexion .kpi-card {
    flex: 1;
    background: #ffffff;
    border: 1px solid rgba(241, 245, 249, 1);
    border-radius: 14px;
    padding: 0.85rem 1.2rem;
    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.06), 0 2px 6px -2px rgba(0,0,0,0.04);
    border-left: none;
    transition: transform 0.2s, box-shadow 0.2s;
    align-items: center;
}
.kpi-row-conexion .kpi-card::after { display: none; }
.kpi-row-conexion .kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(0,0,0,0.1);
}
.kpi-row-conexion .kpi-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.4rem;
    flex-shrink: 0;
}
.kpi-row-conexion .kpi-icon svg {
    width: 18px;
    height: 18px;
}
.kpi-row-conexion .kpi-body {
    display: flex;
    flex-direction: column;
}
.kpi-row-conexion .kpi-value {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: #0f172a;
}
.kpi-row-conexion .kpi-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-top: 2px;
}

/* Colors specifically for connection KPI */
.kpi-con-total { 
    background: var(--color-primary) !important; 
    border-left-color: #10274f !important;
}
.kpi-con-total .kpi-value, .kpi-con-total .kpi-label { color: #ffffff !important; }
.kpi-con-total .kpi-label { opacity: 0.85; }
.kpi-con-total .kpi-icon { background: rgba(255,255,255,0.15); color: #fff;}

.kpi-con-conectada .kpi-icon { background: #dcfce7; color: #16a34a; }
.kpi-con-conectada .kpi-value { color: #16a34a; }

.kpi-con-desconectada .kpi-icon { background: #ffe4e6; color: #e11d48; }
.kpi-con-desconectada .kpi-value { color: #e11d48; }

/* ── Filter bar ── */
.conexion-filter-bar {
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    padding: .2rem .75rem;
    gap: .15rem 0;
}
.conexion-filter-bar .filter-group {
    flex: 0 0 auto;
    gap: .25rem;
    padding: 0 .6rem;
}
.conexion-filter-bar .filter-group + .filter-group {
    border-left: 1px solid var(--border-light);
}
.conexion-filter-bar .filter-group .filter-chips {
    flex-wrap: wrap;
    gap: .15rem;
}
.conexion-filter-bar .dept-select {
    min-width: 0;
    width: clamp(6rem, 9vw, 9rem);
    font-size: .7rem;
}
.conexion-filter-bar .filter-label {
    font-size: .62rem;
    white-space: nowrap;
    color: var(--text-muted);
}
.conexion-filter-bar .chip {
    padding: .15em .7em;
    font-size: clamp(.62rem, .9vw, .72rem);
}
.conexion-filter-bar .btn-reset-conexion {
    flex-shrink: 0;
    flex: 0 0 auto;
    padding: .2rem .55rem;
    font-size: .68rem;
}
/* Institución — oculta visualmente pero activa en JS (default IGAC) */
.cx-inst-group { display: none !important; }

/* Search prominente */
.tl-search-wrap-prominent {
    border-color: rgba(30,53,105,.25);
    background: #f0f4ff;
    padding: .22rem .55rem;
}
.tl-search-wrap-prominent:focus-within {
    background: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(30,53,105,.12);
}
.tl-search-wrap-prominent svg { color: var(--color-primary); opacity: .7; }
.conexion-filter-bar .filter-group-search .tl-search-input {
    width: clamp(8rem, 14vw, 16rem);
    font-size: .72rem;
}
@media (max-width: 900px) {
    .conexion-filter-bar .filter-group-search {
        flex: 1 0 100%;
        border-left: none;
        border-top: 1px solid var(--border-light);
        padding: .3rem .6rem;
        justify-content: center;
    }
    .conexion-filter-bar .filter-group-search .tl-search-input { width: 100%; max-width: 28rem; }
    .tl-search-wrap-prominent { width: 100%; max-width: 28rem; }
}

.tl-search-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 2px 7px;
    color: var(--text-muted);
    transition: border-color .15s;
}
.tl-search-wrap:focus-within { border-color: var(--color-primary); }

.tl-search-input {
    border: none; outline: none;
    background: transparent;
    font-family: var(--font);
    font-size: .72rem;
    color: var(--text);
    width: 110px;
}
.tl-search-input::placeholder { color: var(--text-light); }
.tl-search-input::-webkit-search-cancel-button { cursor: pointer; }

.btn-reset-conexion {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-family: var(--font);
    font-size: .73rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
}
.btn-reset-conexion:hover { background: #e8edf7; color: var(--color-primary); border-color: var(--color-primary-light); }

/* ── Paneles principales ── */
.conexion-panes {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: var(--sp-layout);
}

/* ── Timeline pane ── */
.timeline-pane {
    flex: 0 0 calc(60% - 5px);
    width: calc(60% - 5px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.timeline-axis-wrap {
    flex-shrink: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}
.timeline-axis-wrap canvas { display: block; }

.timeline-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.timeline-scroll::-webkit-scrollbar { width: 5px; }
.timeline-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.timeline-scroll canvas { display: block; }

#tl-rows-container { position: relative; }
.timeline-scroll #timeline-canvas { position: sticky; top: 0; }

.tl-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--text-light);
    font-size: .82rem;
    font-style: italic;
    pointer-events: none;
}
.tl-empty.hidden { display: none; }

/* ── Tooltip ── */
.tl-tooltip {
    position: fixed;
    z-index: 9999;
    background: #1e293b;
    color: #f8fafc;
    border-radius: 8px;
    padding: 8px 11px;
    min-width: 160px;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    pointer-events: none;
    font-size: .75rem;
    line-height: 1.55;
    transition: opacity 0.1s linear;
}
.tl-tooltip.hidden {
    opacity: 0;
    visibility: hidden;
}
.tl-tip-code  { font-weight: 700; font-size: .82rem; margin-bottom: 2px; }
.tl-tip-time  { color: #94a3b8; font-size: .70rem; margin-bottom: 4px; }
.tl-tip-estado {
    display: flex; align-items: center; gap: 5px;
    font-weight: 500;
}
.tl-tip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tl-tip-range { color: #94a3b8; font-size: .68rem; margin-top: 4px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 4px; }

/* ── Timeline legend ── */
.timeline-legend {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 5px 12px;
    border-top: 1px solid var(--border);
    background: #f8fafc;
    font-size: .71rem;
    color: var(--text-muted);
}
.tl-leg-item { display: flex; align-items: center; gap: 5px; }
.tl-leg-swatch {
    width: 18px; height: 9px; border-radius: 2px; flex-shrink: 0;
}
.tl-leg-con  { background: #059669; }
.tl-leg-des  { background: #e11d48; }
.tl-leg-gap  { background: #e2e8f0; border: 1px solid #cbd5e1; }
.tl-leg-now-line {
    width: 2px; height: 13px;
    background: #2563eb;
    border-left: 2px solid #2563eb;
    flex-shrink: 0;
}

/* ── Map pane ── */
.map-pane-conexion {
    flex: 0 0 calc(40% - 5px);
    width: calc(40% - 5px);
    min-width: 280px;
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.map-pane-conexion #map-conexion { width: 100%; height: 100%; outline: none; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .kpi-row-conexion { flex-wrap: wrap; }
    .kpi-row-conexion .kpi-card { flex: 1 1 45%; }
    .conexion-panes   { flex-direction: column; }
    .map-pane-conexion { flex: none; min-height: 400px; width: 100%; }
    .timeline-pane { width: 100%; }
}
@media (max-width: 600px) {
    .kpi-row-conexion .kpi-card { flex: 1 1 100%; }
    .conexion-filter-bar { flex-wrap: wrap; }
}

/* ── Conexión: mobile UX completo (≤ 768px) ─────────────────────────────── */
@media (max-width: 768px) {
    /* Scroll natural — body.layout-fill ya libera el body; aquí liberamos
       conexion-layout para que su contenido pueda crecer sin clipping.    */
    .conexion-layout {
        overflow: visible;
        flex: none;
        height: auto;
    }
    .conexion-panes         { height: auto; }

    /* KPI conexion — valores y iconos más compactos */
    .kpi-row-conexion .kpi-value    { font-size: 1.35rem; }
    .kpi-row-conexion .kpi-icon     { width: 2rem; height: 2rem; min-width: 2rem; }
    .kpi-row-conexion .kpi-card     { padding: .6rem .85rem; gap: .6rem; }

    /* Filter bar: columna apilada, cada grupo ocupa todo el ancho */
    .conexion-filter-bar {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 0;
        padding: 0;
        overflow-x: visible;
        border-radius: var(--r-md);
    }
    .conexion-filter-bar .filter-group {
        padding: .4rem .625rem;
        border-left: none;
        border-bottom: 1px solid var(--border-light);
        gap: .375rem;
    }
    .conexion-filter-bar .filter-group + .filter-group { border-left: none; }
    .conexion-filter-bar .filter-group:last-of-type { border-bottom: none; }
    .conexion-filter-bar .dept-select {
        width: 100%;
        max-width: 100%;
        min-height: 2.25rem;
    }
    .conexion-filter-bar .filter-group-search {
        border-top: none;
        padding: .4rem .625rem;
    }
    .conexion-filter-bar .filter-group-search .tl-search-input { width: 100%; }
    .tl-search-wrap-prominent { width: 100%; max-width: 100%; }
    .conexion-filter-bar .btn-reset-conexion {
        width: calc(100% - 1.25rem);
        margin: .375rem .625rem;
        justify-content: center;
        border-radius: var(--r-md);
        min-height: 2.25rem;
    }

    /* Paneles: alturas fijas razonables para pantallas de teléfono */
    .timeline-pane {
        flex: none;
        height: 50vh;
        min-height: 260px;
        width: 100%;
    }
    .map-pane-conexion {
        flex: none;
        height: 40vh;
        min-height: 220px;
        width: 100%;
        min-width: 0;
    }

    /* Leyenda timeline compacta */
    .timeline-legend {
        flex-wrap: wrap;
        gap: 7px;
        padding: 4px 10px;
        font-size: .67rem;
    }
}

/* ── Leyenda compacta módulo Conexión ── */
.legend-body-conexion {
    gap: 4px;
}
.legend-row-cx {
    display: flex;
    align-items: center;
    gap: 6px;
}
.map-pane-conexion .legend-buffer-sym {
    width: 16px;
    height: 9px;
    border-radius: 999px;
    border: 2px solid rgba(5, 150, 105, 0.45);
    background: rgba(5, 150, 105, 0.14);
    box-shadow: none;
    flex-shrink: 0;
}
.chip-buffer {
    background: rgba(5, 150, 105, 0.12);
    color: #065f46;
    border: 1px solid rgba(5, 150, 105, 0.25);
    font-size: .68rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

/* ── Basemap Gallery — conexion map (top-right) ── */
/* Limita el panel del gallery para que no desborde en monitores pequeños */
.map-pane-conexion .esri-basemap-gallery {
    max-height: clamp(180px, 45vh, 420px);
    overflow-y: auto;
    width: clamp(200px, 30vw, 300px);
}
.map-pane-conexion .esri-expand__container--expanded {
    max-width: clamp(200px, 32vw, 310px);
}
@media (max-width: 1100px) {
    .map-pane-conexion .esri-basemap-gallery {
        max-height: clamp(160px, 38vh, 340px);
        width: clamp(180px, 26vw, 260px);
    }
}
@media (max-width: 900px) {
    .map-pane-conexion .esri-basemap-gallery {
        max-height: 42vw;
        width: calc(100% - 8px);
    }
    .map-pane-conexion .esri-expand__container--expanded {
        max-width: calc(100% - 8px);
    }
}

/* ─── Splash de carga inicial ─────────────────────────────────────────────── */

#page-splash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: linear-gradient(160deg, #0f2040 0%, #1e3569 55%, #1a4a80 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .7s cubic-bezier(.4,0,.2,1), visibility .7s;
}
#page-splash.splash-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.splash-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    text-align: center;
    user-select: none;
}
.splash-logo {
    height: 180px;
    filter: brightness(0) invert(1);
    opacity: 0;
    animation: splash-rise .55s .1s cubic-bezier(.25,.46,.45,.94) forwards;
}
.splash-texts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    animation: splash-rise .55s .28s cubic-bezier(.25,.46,.45,.94) forwards;
}
.splash-title {
    color: #fff;
    font-family: var(--font, 'Inter', sans-serif);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .01em;
}
.splash-sub {
    color: rgba(255,255,255,.5);
    font-family: var(--font, 'Inter', sans-serif);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.splash-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    opacity: 0;
    animation: splash-rise .55s .45s cubic-bezier(.25,.46,.45,.94) forwards;
}
.splash-progress-track {
    width: 200px;
    height: 2px;
    background: rgba(255,255,255,.12);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.splash-progress-shine {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 55%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
    border-radius: 2px;
    animation: splash-shimmer 1.5s ease-in-out infinite;
}
.splash-progress-label {
    color: rgba(255,255,255,.38);
    font-family: var(--font, 'Inter', sans-serif);
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    transition: opacity .25s;
}
@keyframes splash-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes splash-shimmer {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}