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

:root {
    --bg:#111612;
    --bg2:#171e19;
    --sidebar:#0b100d;
    --panel:#1a211c;
    --panel2:#202920;
    --line:#354238;
    --line-soft:#29352c;
    --text:#e0e8dc;
    --muted:#8d9a8d;
    --green:#91a77a;
    --green-bright:#b1c98e;
    --amber:#d3a34f;
    --red:#c85a51;
    --blue:#7d9ca4;
    --white:#f2f5ee;
}

* { box-sizing:border-box; }

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Inter,Arial,sans-serif;
    font-size:13px;
}

button,input,select { font:inherit; }
button { cursor:pointer; }

.app { min-height:100vh; }

.sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:245px;
    background:var(--sidebar);
    border-right:1px solid #344136;
    display:flex;
    flex-direction:column;
    z-index:1000;
}

.brand {
    display:flex;
    align-items:center;
    gap:12px;
    padding:22px 19px 19px;
    border-bottom:1px solid var(--line);
}

.brand-mark {
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    background:#29372a;
    border:1px solid #60734f;
    color:var(--green-bright);
    font-family:'Barlow Condensed',sans-serif;
    font-size:25px;
    font-weight:800;
    letter-spacing:1px;
}

.brand b {
    display:block;
    color:var(--white);
    font-family:'Barlow Condensed',sans-serif;
    font-size:25px;
    letter-spacing:2px;
    line-height:1;
}

.brand small {
    display:block;
    margin-top:5px;
    color:var(--muted);
    font-family:'IBM Plex Mono',monospace;
    font-size:8px;
    letter-spacing:1px;
}

.side-classification {
    margin:15px 14px 11px;
    padding:10px;
    background:#171f18;
    border-left:2px solid var(--green);
}

.side-classification span,
.side-classification strong { display:block; }

.side-classification span {
    color:var(--muted);
    font-family:'IBM Plex Mono',monospace;
    font-size:8px;
    letter-spacing:1px;
}

.side-classification strong {
    margin-top:5px;
    color:var(--green-bright);
    font-family:'Barlow Condensed',sans-serif;
    font-size:16px;
    letter-spacing:1px;
}

.sidebar nav {
    padding:0 10px;
    overflow-y:auto;
}

.nav-label {
    padding:18px 10px 7px;
    color:#738073;
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
    font-weight:600;
    letter-spacing:1.5px;
}

.nav {
    width:100%;
    min-height:39px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:8px 11px;
    margin:2px 0;
    border:1px solid transparent;
    border-radius:2px;
    background:transparent;
    color:#aab5a8;
    text-align:left;
    text-decoration:none;
    font-size:12px;
    transition:background .15s,border .15s,color .15s;
}

.nav:hover {
    background:#1c281e;
    color:var(--white);
}

.nav.active {
    background:#263428;
    border-color:#53694d;
    border-left:3px solid var(--green-bright);
    color:#e7f0df;
    padding-left:9px;
}

.nav-icon {
    width:19px;
    color:var(--green);
    text-align:center;
    font-size:16px;
}

.side-bottom {
    margin-top:auto;
    padding:15px;
    border-top:1px solid var(--line);
}

.connection-line {
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--green-bright);
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
    letter-spacing:.7px;
}

.live-dot {
    width:7px;
    height:7px;
    display:inline-block;
    border-radius:50%;
    background:#8eae68;
    box-shadow:0 0 8px #8eae6880;
}

#sideuser {
    display:block;
    margin:12px 0;
    color:var(--muted);
    font-size:10px;
}

.logout {
    width:100%;
    padding:9px;
    border:1px solid #4b3936;
    background:#211a18;
    color:#d39a8d;
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
    letter-spacing:1px;
}

.side-version {
    margin-top:13px;
    color:#59655a;
    font-family:'IBM Plex Mono',monospace;
    font-size:8px;
}

.main {
    min-height:100vh;
    margin-left:245px;
    padding:0 25px 20px;
}

.topbar {
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    border-bottom:1px solid var(--line);
}

.eyebrow {
    color:var(--green);
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
    font-weight:500;
    letter-spacing:1.2px;
}

.topbar .eyebrow { margin:0 0 5px; }

h1,h2,h3,p { margin-top:0; }

.topbar h1 {
    margin:0;
    color:var(--white);
    font-family:'Barlow Condensed',sans-serif;
    font-size:27px;
    font-weight:700;
    letter-spacing:.6px;
}

.top-right {
    display:flex;
    align-items:center;
    gap:15px;
    color:var(--muted);
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
}

.status {
    display:flex;
    align-items:center;
    gap:7px;
    padding:7px 9px;
    border:1px solid #43553f;
    background:#1b281c;
    color:var(--green-bright);
    font-size:9px;
    letter-spacing:.7px;
}

.status i {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#a3c47e;
}

.clock-label {
    color:#657366;
    font-size:8px;
}

#clock { color:#cbd6c5; }

.view { display:none; padding-top:20px; }
.view.active { display:block; }

.command-heading,
.section-intro {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-bottom:18px;
}

.command-heading h2,
.section-intro h2 {
    margin:5px 0 4px;
    color:var(--white);
    font-family:'Barlow Condensed',sans-serif;
    font-size:28px;
    letter-spacing:.5px;
}

.command-heading p,
.section-intro p {
    margin:0;
    color:var(--muted);
    font-size:11px;
}

.command-stamp {
    min-width:185px;
    padding:10px 14px;
    border:1px solid #465443;
    background:#1b241c;
    text-align:right;
}

.command-stamp span,
.command-stamp strong,
.command-stamp small { display:block; }

.command-stamp span {
    color:var(--green);
    font-family:'Barlow Condensed',sans-serif;
    font-size:20px;
    font-weight:800;
    letter-spacing:2px;
}

.command-stamp strong {
    color:#dce6d5;
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
    letter-spacing:.7px;
}

.command-stamp small {
    margin-top:5px;
    color:var(--muted);
    font-family:'IBM Plex Mono',monospace;
    font-size:8px;
}

.kpi-heading {
    display:flex;
    justify-content:space-between;
    margin:20px 0 8px;
    color:var(--muted);
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
    letter-spacing:1px;
}

.kpis {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:9px;
    margin-bottom:21px;
}

.kpi {
    position:relative;
    min-height:83px;
    padding:13px 15px;
    overflow:hidden;
    border:1px solid var(--line);
    border-top:2px solid #667c58;
    background:linear-gradient(135deg,#202a21,#19211b);
}

.kpi:after {
    content:"";
    position:absolute;
    right:-18px;
    bottom:-27px;
    width:75px;
    height:75px;
    border:1px solid #667c581c;
    transform:rotate(45deg);
}

.kpi small {
    display:block;
    color:#9aa797;
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
    letter-spacing:1px;
}

.kpi strong {
    display:block;
    margin-top:8px;
    color:var(--white);
    font-family:'Barlow Condensed',sans-serif;
    font-size:31px;
    font-weight:700;
    line-height:1;
}

.section-divider {
    display:flex;
    align-items:center;
    gap:12px;
    margin:19px 0 10px;
    color:#94a18f;
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
    letter-spacing:1.1px;
}

.divider-line {
    flex:1;
    height:1px;
    background:var(--line);
}

.grid-two {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.panel {
    min-width:0;
    margin-bottom:12px;
    border:1px solid var(--line);
    background:var(--panel);
}

.panel-head {
    min-height:57px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 14px;
    border-bottom:1px solid var(--line);
    background:#202820;
}

.panel-head .eyebrow { font-size:8px; }

.panel-head h3 {
    margin:4px 0 0;
    color:#e0e8dc;
    font-family:'Barlow Condensed',sans-serif;
    font-size:17px;
    font-weight:600;
    letter-spacing:.3px;
}

.panel-code {
    padding:5px 7px;
    border:1px solid #3e4b3e;
    color:#a2b092;
    font-family:'IBM Plex Mono',monospace;
    font-size:8px;
    letter-spacing:.7px;
}

.chart-wrap {
    height:220px;
    padding:13px;
}

.text-btn {
    padding:7px 9px;
    border:1px solid #536448;
    background:#263328;
    color:var(--green-bright);
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
    letter-spacing:.5px;
}

.table-wrap {
    width:100%;
    overflow-x:auto;
}

table {
    width:100%;
    border-collapse:collapse;
    font-size:11px;
    text-align:left;
}

thead { background:#222c23; }

th {
    padding:11px 12px;
    border-bottom:1px solid #485447;
    color:#a9b59f;
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
    font-weight:500;
    letter-spacing:.5px;
    white-space:nowrap;
}

td {
    padding:10px 12px;
    border-bottom:1px solid #2d382f;
    color:#cbd4c7;
    vertical-align:middle;
}

tbody tr:hover { background:#222d24; }

tbody tr:last-child td { border-bottom:0; }

td small {
    color:var(--muted);
    font-size:9px;
}

td a {
    color:var(--green-bright);
    text-decoration:none;
}

td a:hover { text-decoration:underline; }

.badge {
    display:inline-block;
    padding:4px 7px;
    border:1px solid #4a5546;
    background:#293329;
    color:#c3d0b7;
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
    white-space:nowrap;
}

.badge.critical {
    border-color:#80433e;
    background:#482622;
    color:#f08d7d;
}

.badge.high {
    border-color:#795a34;
    background:#40301d;
    color:#e6b765;
}

.badge.medium {
    border-color:#75673b;
    background:#39341f;
    color:#d6c276;
}

.badge.low {
    border-color:#405f4a;
    background:#213528;
    color:#9dc49a;
}

.filters {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin:15px 0;
}

input,select {
    min-height:36px;
    padding:8px 11px;
    border:1px solid #465247;
    border-radius:2px;
    outline:none;
    background:#1a221c;
    color:#dce5d8;
    font-size:11px;
}

input { min-width:220px; flex:1; }
select { min-width:160px; }

input:focus,select:focus {
    border-color:#91a77a;
    box-shadow:0 0 0 2px #91a77a18;
}

input::placeholder { color:#788578; }

.primary {
    padding:9px 14px;
    border:1px solid #637650;
    border-radius:2px;
    background:#35452f;
    color:#e1ebd8;
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    letter-spacing:.6px;
}

.primary:hover { background:#465b3b; }
.primary.small { min-height:36px; }

.map {
    width:100%;
    height:calc(100vh - 165px);
    min-height:450px;
    border:1px solid var(--line);
    background:#151d18;
}

.leaflet-container { background:#18211b; }



.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background:#202a22;
    color:#e0e8dc;
    border:1px solid #52614d;
}

.leaflet-popup-content {
    font-family:Inter,sans-serif;
    font-size:11px;
    line-height:1.6;
}

.leaflet-popup-content b { color:var(--green-bright); }

footer {
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:22px;
    padding:13px 0 5px;
    border-top:1px solid var(--line);
    color:#718071;
    font-family:'IBM Plex Mono',monospace;
    font-size:8px;
    letter-spacing:.6px;
}

@media(max-width:1100px) {
    .sidebar { width:205px; }
    .main { margin-left:205px; padding:0 16px 18px; }
    .kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media(max-width:760px) {
    .sidebar {
        position:relative;
        width:100%;
        height:auto;
    }
    .sidebar nav {
        display:flex;
        flex-wrap:wrap;
        padding-bottom:10px;
    }
    .nav-label { width:100%; padding-top:12px; }
    .nav { width:auto; flex:1 1 140px; }
    .side-bottom { display:none; }
    .main { margin-left:0; padding:0 12px 15px; }
    .topbar { align-items:flex-start; flex-direction:column; padding:14px 0; }
    .top-right { flex-wrap:wrap; }
    .grid-two { grid-template-columns:1fr; }
    .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .command-heading { align-items:flex-start; }
    .command-stamp { display:none; }
    footer { flex-direction:column; }
}

/* LOGOTIPO DE LA BARRA LATERAL */
.sidebar .brand {
    display:flex;
    align-items:center;
    justify-content:flex-start;
}

.sidebar .brand-mark {
    position:relative;
    width:43px;
    height:43px;
    min-width:43px;
    flex:0 0 43px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.sidebar .brand-mark img {
    position:static;
    display:block;
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    padding:3px;
}

/* CENTRO DE OPERACIONES GEOESPACIAL */
.operations-grid {
    display:grid;
    grid-template-columns:minmax(0, 2.1fr) minmax(270px, .9fr);
    gap:14px;
    margin-bottom:20px;
}

.operations-map-panel,
.priority-panel {
    min-width:0;
}

.map-status {
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:9px 13px;
    color:var(--muted);
    background:#131a15;
    border-top:1px solid var(--line-soft);
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
    letter-spacing:.7px;
}

.map-status > span:first-child {
    color:var(--green-bright);
}

.pulse-dot {
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:6px;
    border-radius:50%;
    background:#91c477;
    box-shadow:0 0 8px #91c477;
    animation:statusPulse 1.8s infinite;
}

.operations-map {
    height:440px;
    min-height:350px;
    border:0;
    border-radius:0 0 5px 5px;
}

.priority-events {
    max-height:440px;
    overflow-y:auto;
    padding:4px 12px;
}

.priority-item {
    padding:12px 2px;
    border-bottom:1px solid var(--line-soft);
}

.priority-item:last-child {
    border-bottom:0;
}

.priority-item-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:7px;
}

.priority-item > strong {
    display:block;
    color:var(--text);
    font-size:12px;
    line-height:1.45;
}

.priority-item > small {
    display:block;
    margin-top:5px;
    color:var(--muted);
    font-size:10px;
}

.priority-score {
    color:var(--amber);
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
}

.priority-meta {
    display:flex;
    justify-content:space-between;
    gap:6px;
    margin-top:8px;
    color:var(--muted);
    font-family:'IBM Plex Mono',monospace;
    font-size:8px;
}

.priority-empty {
    padding:25px 8px;
    color:var(--muted);
    text-align:center;
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
}

.threat-marker-wrap {
    background:transparent;
    border:0;
}

.threat-marker {
    position:relative;
    display:block;
    width:18px;
    height:18px;
    border-radius:50%;
}

.marker-core {
    position:absolute;
    top:6px;
    left:6px;
    width:6px;
    height:6px;
    border:1px solid #fff;
    border-radius:50%;
    background:#91a77a;
    box-shadow:0 0 7px currentColor;
}

.threat-marker::before,
.threat-marker::after {
    content:"";
    position:absolute;
    inset:0;
    border:1px solid currentColor;
    border-radius:50%;
    animation:markerPulse 2.4s ease-out infinite;
}

.threat-marker::after {
    animation-delay:1.2s;
}

.threat-critical { color:#e35d55; }
.threat-high { color:#d3a34f; }
.threat-medium { color:#a7b96d; }
.threat-low { color:#6c9b91; }

.threat-critical .marker-core { background:#e35d55; }
.threat-high .marker-core { background:#d3a34f; }
.threat-medium .marker-core { background:#a7b96d; }
.threat-low .marker-core { background:#6c9b91; }

.intel-popup {
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:180px;
    color:#202820;
    font-size:11px;
}

.intel-popup strong {
    font-size:12px;
}

@keyframes markerPulse {
    0% { transform:scale(.5); opacity:.9; }
    100% { transform:scale(2.5); opacity:0; }
}

@keyframes statusPulse {
    0%,100% { opacity:1; }
    50% { opacity:.35; }
}

@media (max-width:1000px) {
    .operations-grid {
        grid-template-columns:1fr;
    }
    .priority-events {
        max-height:360px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .threat-marker::before,
    .threat-marker::after,
    .pulse-dot {
        animation:none;
    }
}

/* AJUSTE DEL MAPA EN EL PANEL OPERATIVO */
.operations-map-panel {
    min-width: 0;
    overflow: hidden;
    border-radius: 5px;
}

.operations-map {
    display: block;
    width: 100%;
    height: 440px;
    min-height: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.operations-map .leaflet-control-container {
    max-width: 100%;
}


/* CARTOGRAFIA TACTICA - NATO OPERATIONS */


.leaflet-container {
    background: #101711;
}

.leaflet-control-zoom a {
    background: #202a22 !important;
    color: #d5dfce !important;
    border-color: #465442 !important;
}

.leaflet-control-attribution {
    background: rgba(15, 22, 17, .82) !important;
    color: #9da995 !important;
}

.leaflet-control-attribution a {
    color: #b3c39f !important;
}



/* CARTO DARK MATTER: no invertir los colores de la cartografia */

.leaflet-container {
    background: #101711;
}


/* CARTO DARK MATTER - CONFIGURACION DEFINITIVA */



/* CARTOGRAFIA TACTICA OSCURA - OPENSTREETMAP */
.leaflet-tile {
    filter: invert(1) hue-rotate(180deg) grayscale(1)
            brightness(.72) contrast(1.15) !important;
}
.leaflet-container {
    background: #151d18;
}

/* PRIORITY EVENTS - INTELLIGENCE DETAIL */
.priority-actor {
    margin-top:8px;
    color:var(--amber);
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
    letter-spacing:.3px;
}

.priority-actor span {
    color:var(--text);
    font-family:inherit;
}

.priority-summary {
    margin-top:8px;
    color:var(--muted);
    font-size:10px;
    line-height:1.5;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.priority-indicators {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:10px;
}

.priority-indicator {
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:65px;
    padding:6px 8px;
    border:1px solid var(--line-soft);
    border-radius:3px;
    background:rgba(255,255,255,.02);
}

.priority-indicator span {
    color:var(--muted);
    font-family:'IBM Plex Mono',monospace;
    font-size:7px;
    letter-spacing:.3px;
}

.priority-indicator b {
    color:var(--text);
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    font-weight:600;
}