/* BASE */
body {
    margin:0;
    font-family: Inter, system-ui;
    background:#020617;
    color:#e2e8f0;
}

/* LAYOUT */
.layout {
    display:flex;
}

/* SIDEBAR */
.sidebar {
    width:220px;
    background:#010409;
    height:100vh;
    position:fixed;
    padding:20px;
}

/* MAIN */
.main {
    margin-left:220px;
    padding:20px;
    width:100%;
}

/* CARD */
.card {
    background:#020617;
    border:1px solid #0f172a;
    border-radius:16px;
    padding:16px;
    box-shadow:0 10px 30px rgba(0,0,0,0.6);
    animation:fadeIn 0.5s ease;
}

/* GRID */
.grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

/* KPI */
.kpi h2 {
    font-size:26px;
}

/* DOT */
.dot {
    width:10px;
    height:10px;
    border-radius:50%;
    display:inline-block;
}
.ok { background:#22c55e; }
.down { background:#ef4444; }

/* ALERT */
.alert {
    padding:12px;
    border-radius:10px;
    background:#ef444420;
    border:1px solid #ef4444;
}

/* MAP */
.map {
    height:250px;
    border-radius:16px;
}

/* ANIMACIONES */
@keyframes fadeIn {
    from { opacity:0; transform:translateY(10px); }
    to { opacity:1; transform:translateY(0); }
}

/* 📱 MOBILE APP MODE */
@media(max-width:768px){

    .sidebar {
        display:none;
    }

    .main {
        margin-left:0;
        padding:10px;
    }

    .grid {
        grid-template-columns:1fr;
    }

    .card {
        padding:14px;
    }

    h2 {
        font-size:20px;
    }
}