:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#fbfcfe;--surface:#fff;--surface-2:#f3f6fa;--surface-3:#eef2f6;--text:#111827;--muted:#667085;--soft:#98a2b3;--border:#e4e7ec;--accent:#355d9a;--accent-2:#188c83;--danger:#b42318;--warning:#b54708;--ok:#087443;--violet:#6941c6;--shadow:0 10px 28px #1018280e;--radius:20px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#101418;--surface:#151a21;--surface-2:#1c2430;--surface-3:#243041;--text:#f2f4f7;--muted:#b8c0cc;--soft:#8f9aac;--border:#2b3647;--accent:#8fb3ff;--accent-2:#6bd6c9;--danger:#ffb4a8;--warning:#ffd38a;--ok:#8ee0b4;--violet:#c3b5ff;--shadow:0 18px 44px #0000003d}*{box-sizing:border-box}body{background:linear-gradient(180deg,#fff 0,var(--bg) 360px);color:var(--text);margin:0}[data-theme=dark] body{background:radial-gradient(circle at top left,#8fb3ff1a,transparent 30rem),var(--bg)}a{color:inherit;text-decoration:none}.shell{grid-template-columns:282px 1fr;min-height:100vh;display:grid}.side{border-right:1px solid var(--border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffffdb;height:100vh;padding:26px 22px;position:sticky;top:0;overflow-y:auto}[data-theme=dark] .side{background:#151a21e0}.brand{gap:6px;margin-bottom:26px;display:grid}.brand strong{letter-spacing:-.02em;font-size:1.02rem}.brand span{color:var(--muted);font-size:.8rem}.nav{gap:4px;display:grid}.nav a{color:var(--muted);border-radius:12px;padding:10px 12px;font-size:.92rem}.nav a.active{color:#244c82;background:#eef4ff;font-weight:700}.nav a:hover{background:var(--surface-2);color:var(--text)}[data-theme=dark] .nav a.active{color:#d9e6ff;background:#22314a}.content{width:100%;max-width:1420px;margin:0 auto;padding:34px}.topbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:30px;display:flex}.hero{padding:10px 0 4px}.eyebrow{color:var(--accent-2);letter-spacing:.13em;text-transform:uppercase;font-size:.74rem;font-weight:850}h1{letter-spacing:-.05em;margin:6px 0 10px;font-size:clamp(2rem,3.6vw,3.7rem);line-height:1.02}.lead{max-width:850px;color:var(--muted);font-size:1.04rem}.actions{flex-wrap:wrap;gap:10px;display:flex}button,.button{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:999px;padding:10px 15px;box-shadow:0 1px 2px #1018280a}button:hover,.button:hover{background:var(--surface-2);border-color:#cbd5e1}.grid{gap:18px;display:grid}.grid.kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin:26px 0}.grid.two{grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr)}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.card{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);background:#fffffff5;padding:20px;overflow:hidden}[data-theme=dark] .card{background:#151a21f5}.card h2,.card h3{letter-spacing:-.02em;margin:0 0 10px}.card p{color:var(--muted);margin:0 0 14px}.kpi{gap:7px;display:grid}.kpi .value{letter-spacing:-.06em;color:#0f172a;font-size:2.28rem;font-weight:850}[data-theme=dark] .kpi .value{color:#f8fafc}.kpi .label{color:var(--muted);font-size:.9rem}.chart{width:100%;height:320px;min-height:260px}.bars{gap:11px;display:grid}.bar{grid-template-columns:165px 1fr 48px;align-items:center;gap:10px;font-size:.86rem;display:grid}.bar strong{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.bar .track{background:var(--surface-2);border-radius:999px;height:10px;overflow:hidden}.bar .fill{border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-2));height:100%}.map-panel{border:1px solid var(--border);background:linear-gradient(135deg,#188c831f,#355d9a1a),var(--surface-2);border-radius:18px;min-height:360px;position:relative;overflow:hidden}.map-panel:after{content:"Mapa territorial preview";color:var(--muted);font-size:.8rem;position:absolute;top:auto;bottom:16px;left:auto;right:16px}.heat-grid{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:9px;display:grid}.heat-cell{background:color-mix(in srgb,var(--accent) var(--w),var(--surface-2));border:1px solid color-mix(in srgb,var(--accent) 12%,transparent);border-radius:13px;min-width:0;padding:11px}.heat-cell strong{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}table{border-collapse:collapse;width:100%;font-size:.88rem}th,td{border-bottom:1px solid var(--border);text-align:left;vertical-align:top;padding:11px 10px}th{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;background:0 0;font-size:.74rem}.network{border:1px solid var(--border);background:var(--surface-2);border-radius:18px;width:100%;height:320px}.status{background:var(--surface-2);color:var(--muted);border-radius:999px;align-items:center;gap:6px;padding:7px 11px;font-size:.82rem;display:inline-flex}.empty{color:var(--muted);text-align:center;border:1px dashed var(--border);background:var(--surface);border-radius:14px;padding:26px}.mobile-menu{display:none}@media (max-width:980px){.shell{grid-template-columns:1fr}.side{z-index:20;width:282px;transition:transform .2s;position:fixed;top:0;bottom:0;left:0;right:auto;transform:translate(-105%)}body.menu-open .side{transform:translate(0)}.mobile-menu{display:inline-flex}.content{padding:18px}.grid.kpis,.grid.two,.grid.three{grid-template-columns:1fr}.bar{grid-template-columns:112px 1fr 38px}}


/* === Premium enhancements FASE 48 === */

/* KPI cards glow effect */
.card.kpi, .kpi-card {
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card.kpi:hover, .kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow), 0 0 20px rgba(53, 93, 154, 0.08);
}

/* KPI value glow */
.kpi .value, .kpi-value {
    text-shadow: 0 0 30px rgba(53, 93, 154, 0.15);
}

/* Chart container premium styling */
.chart {
    border-radius: 12px;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    padding: 4px;
}

/* Card premium hover */
.card {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.card:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
    box-shadow: 0 14px 36px #10182814, 0 0 1px rgba(53, 93, 154, 0.1);
}

/* Table row premium hover */
tr:hover td {
    background: color-mix(in srgb, var(--accent) 4%, var(--surface-2)) !important;
}

/* Badge premium styling */
.filter-badge, .badge {
    backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Button premium styling */
button:hover, .button:hover {
    box-shadow: 0 4px 12px rgba(53, 93, 154, 0.15);
    transform: translateY(-1px);
}
button:active, .button:active {
    transform: translateY(0);
}

/* Nav active glow */
.nav a.active {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
                inset 0 -2px 0 var(--accent);
}

/* Loading skeleton shimmer */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Status indicator pulse */
.status::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
    margin-right: 6px;
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.9); }
}

/* Card gradient top border */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: var(--radius) var(--radius) 0 0;
}
.card:hover::before {
    opacity: 1;
}

/* Spinner premium */
.spinner {
    border-top-color: var(--accent) !important;
    border-right-color: color-mix(in srgb, var(--accent) 0.3%, transparent) !important;
}

/* Progress bar glow */
.fill {
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Input focus glow */
input:focus, select:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* Tooltip premium */
.echarts-tooltip {
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Gradient text for hero */
.eyebrow {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}