:root
{
    --primary: #C8102E;
    --primary-dark: #9E0E24;
    --background: #F4F6F9;
    --panel: #FFFFFF;
    --border: #E6E6E6;
    --text: #1f1f1f;
}

/* reset */

body
{
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    background: var(--background);
}

/* wrapper */

.app-wrapper
{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* topbar */

.topbar
{
    height: 60px;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

.system-title
{
    font-weight: 600;
    font-size: 18px;
}

.system-subtitle
{
    font-size: 11px;
    opacity: 0.8;
}

.system-year
{
    font-size: 13px;
}

/* layout */

.main-layout
{
    flex: 1;
    display: flex;
}

/* sidebar */

.sidebar
{
    width: 240px;
    background: white;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.sidebar-header
{
    padding: 18px;
    font-size: 11px;
    color: #888;
    letter-spacing: 1px;
}

.sidebar-menu
{
    display: flex;
    flex-direction: column;
}

.menu-item
{
    padding: 12px 18px;
    text-decoration: none;
    color: #333;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.menu-item:hover
{
    background: #f3f3f3;
}

.menu-icon
{
    width: 24px;
    margin-right: 8px;
}

/* sidebar footer */

.sidebar-footer
{
    margin-top: auto;
    padding: 18px;
    border-top: 1px solid var(--border);
    font-size: 11px;
}

.dev-link
{
    color: #888;
}

/* content */

.content-area
{
    flex: 1;
    display: flex;
    flex-direction: column;
}

.content-container
{
    padding: 28px;
}

/* cards */

.card
{
    border: none;
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* footer */

.system-footer
{
    height: 40px;
    background: white;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.legend-row
{
display:flex;
align-items:center;
font-size:13px;
margin-bottom:6px;
}

.color
{
width:16px;
height:16px;
margin-right:8px;
border-radius:3px;
display:inline-block;
}

.c1{background:#006400;}
.c2{background:#2E8B57;}
.c3{background:#F1C40F;}
.c4{background:#E67E22;}
.c5{background:#C0392B;}

/* MAPA — esto es lo que faltaba */

#mapa
{
    width: 100%;
    height: 650px;
}

/* FOOTER COMMAND CONSOLE */

.system-footer
{
height:32px;
background:#040404;
border-top:1px solid #1c1c1c;
display:flex;
flex-direction:column;
justify-content:center;
font-family:Consolas, Monaco, monospace;
font-size:10px;
color:#a6a6a6;
position:relative;
overflow:hidden;
}

/* consola */

.footer-console
{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
white-space:nowrap;
}

/* separadores */

.separator
{
color:#555;
}

/* node */

.node
{
color:#9ecbff;
font-weight:600;
}

/* estado */

.status-online
{
color:#00ff9c;
font-weight:600;
}

/* link */

.system-footer a
{
color:#9ecbff;
text-decoration:none;
}

.system-footer a:hover
{
color:#ffffff;
}

/* barra actividad */

.system-activity
{
position:absolute;
bottom:0;
left:0;
height:2px;
width:100%;
background:linear-gradient(
90deg,
transparent,
#C8102E,
transparent
);
animation:activity 8s linear infinite;
}

@keyframes activity
{
0%{transform:translateX(-100%);}
100%{transform:translateX(100%);}
}