body{
background:#0f172a;
color:#f8fafc;
font-family:'Segoe UI',sans-serif;
overflow-x:hidden;
}

/* CONTENIDO */

.content{
padding:30px;
transition:.3s;
}

/* SIDEBAR */

.sidebar{
position:fixed;
top:0;
left:-280px;
width:260px;
height:100vh;
background:#111827;
padding:20px;
transition:.3s;
z-index:999;
box-shadow:5px 0 25px rgba(0,0,0,.3);
}

.sidebar.active{
left:0;
}

.sidebar ul{
list-style:none;
padding:0;
margin-top:40px;
}

.sidebar li{
margin-bottom:15px;
}

.sidebar a{
display:flex;
align-items:center;
gap:10px;
color:#cbd5e1;
text-decoration:none;
padding:12px 15px;
border-radius:12px;
transition:.3s;
}

.sidebar a:hover{
background:#1e293b;
color:white;
}

.logo{
font-weight:bold;
color:white;
}

/* BOTON MENU */

.menu-btn{
background:#1e293b;
border:none;
color:white;
width:50px;
height:50px;
border-radius:12px;
font-size:24px;
transition:.3s;
}

.menu-btn:hover{
    background:#334155;
    transform:scale(1.05);
}

/* CARDS */

.card-custom{
    background:#1e293b;
    border-radius:20px;
    border:none;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}
/* ESTADO WATCH */

.status-watch{
background:rgba(34,197,94,.15);
border:1px solid rgba(34,197,94,.4);
padding:12px 20px;
border-radius:50px;
font-weight:600;
}

.status-dot{
width:10px;
height:10px;
background:#22c55e;
border-radius:50%;
display:inline-block;
margin-right:10px;
}

/* ACCIONES */

.action-card{
border-radius:16px;
padding:22px;
font-size:18px;
font-weight:600;
cursor:pointer;
transition:.3s;
color:white;
}

.action-card i{
font-size:22px;
margin-right:10px;
}

.action-card:hover{
transform:translateY(-5px);
box-shadow:0 15px 30px rgba(0,0,0,.35);
}

/* COLORES */

.green{
background:#22c55e;
}

.blue{
background:#3b82f6;
}

.cyan{
background:#06b6d4;
}

.teal{
background:#14b8a6;
}

.red{
background:#ef4444;
}

.purple{
background:#8b5cf6;
}

.orange{
background:#f59e0b;
}

.gray{
background:#475569;
}

/* TIMELINE */

.timeline .event{
background:#0f172a;
padding:15px;
border-radius:12px;
}

/* RESPONSIVE */

@media(max-width:768px){

.status-watch{
    margin-top:15px;
}

.content{
    padding:15px;
}

}

.close-btn{
    position:absolute;
    top:15px;
    right:15px;

    background:none;
    border:none;

    color:white;

    font-size:24px;

    cursor:pointer;

    z-index:1000;
}

a.action-card {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    text-decoration: none;
}

a.action-card:hover {
    color: white;
    text-decoration: none;
    transform: scale(1.03);
}

#actividadReciente {
    max-height: 430px;
    overflow-y: auto;
    padding-right: 6px;
}

#actividadReciente::-webkit-scrollbar {
    width: 6px;
}

#actividadReciente::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 10px;
}

#actividadReciente .event {
    background: #0f172a;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

@media (max-width: 768px) {

    .content {
        padding: 28px 18px;
    }

    .d-flex.justify-content-between {
        gap: 18px;
        align-items: flex-start !important;
    }

    .status-watch {
        font-size: 16px;
        padding: 16px 20px;
        border-radius: 28px;
    }

    .action-card {
        min-height: 110px;
        font-size: 22px;
        padding: 24px;
    }

    .action-card i {
        font-size: 30px;
    }

    .card-custom {
        border-radius: 24px;
    }

    .table-responsive {
        overflow-x: auto;
    }

    .table {
        min-width: 850px;
    }

    .btn-outline-light {
        padding: 14px 20px;
        font-size: 18px;
    }
}

.dashboard-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 18px;
}

.mini-stat {
    background: #0f172a;
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.08);
}

.mini-stat span {
    display: block;
    color: #94a3b8;
    font-size: 14px;
    margin-bottom: 6px;
}

.mini-stat strong {
    color: #ffffff;
    font-size: 26px;
}

@media (max-width: 768px) {

    .content {
        padding: 22px 14px;
    }

    .content h1 {
        font-size: 30px;
        line-height: 1.2;
    }

    .content p {
        font-size: 16px;
    }

    .status-watch {
        margin-top: 14px;
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .action-card {
        min-height: 100px;
        font-size: 20px;
        padding: 22px;
    }

    .action-card i {
        font-size: 30px;
    }

    .dashboard-mini-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mini-stat {
        padding: 14px;
    }

    .mini-stat strong {
        font-size: 24px;
    }

    .card-custom {
        padding: 22px !important;
        border-radius: 22px;
    }

    .table {
        min-width: 850px;
    }

    .table-responsive {
        overflow-x: auto;
    }

    #map {
        height: 340px !important;
    }
}

@media (max-width: 480px) {

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

    .content h1 {
        font-size: 26px;
    }

    .action-card {
        font-size: 18px;
    }
}

.status-watch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-radius: 999px;
    font-weight: 700;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.status-watch.connected {
    background: rgba(16, 185, 129, 0.12);
    color: #ffffff;
    border-color: rgba(34, 197, 94, 0.45);
}

.status-watch.connected .status-dot {
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.7);
}

.status-watch.disconnected {
    background: rgba(239, 68, 68, 0.12);
    color: #ffffff;
    border-color: rgba(239, 68, 68, 0.45);
}

.status-watch.disconnected .status-dot {
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
}

/* LOGIN */
.login-body{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle at top,#1e293b 0,#0f172a 55%,#020617 100%);
}

.login-container{
    width:100%;
    max-width:430px;
    padding:20px;
}

.login-card{
    background:#111827;
    border:1px solid rgba(148,163,184,.18);
    border-radius:24px;
    padding:32px;
    box-shadow:0 24px 70px rgba(0,0,0,.45);
}

.login-icon{
    width:72px;
    height:72px;
    margin:0 auto 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:22px;
    background:#2563eb;
    color:white;
    font-size:36px;
}

.login-input{
    background:#0f172a;
    border:1px solid #334155;
    color:white;
}

.login-input:focus{
    background:#0f172a;
    color:white;
    border-color:#3b82f6;
    box-shadow:0 0 0 .25rem rgba(59,130,246,.2);
}

.login-btn{
    border-radius:14px;
    padding:12px;
    font-weight:700;
}

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

.sidebar-user{
    border-top:1px solid rgba(148,163,184,.18);
    padding-top:18px;
    color:#e5e7eb;
}

.logout-link{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fecaca !important;
    text-decoration:none;
    padding:12px 15px;
    border-radius:12px;
}

.logout-link:hover{
    background:rgba(239,68,68,.15) !important;
    color:white !important;
}