:root{--bg:#f4f7fb;--dark:#0b1f4d;--card:#fff;--muted:#64748b;--blue:#2563eb;--green:#16a34a;--red:#dc2626;--amber:#d97706;--border:#e5e7eb}*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:var(--bg);color:#111827}.sidebar{position:fixed;left:0;top:0;width:245px;height:100vh;background:var(--dark);color:#fff;padding:20px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2563eb #0b1f4d}.brand{font-size:21px;font-weight:800;margin-bottom:24px}.brand small{display:block;color:#93c5fd;font-size:12px;margin-top:4px}

.nav a{
display:block;
color:#dbeafe;
text-decoration:none;
padding:12px 14px;
border-radius:12px;
margin:6px 0;
transition:.25s;
font-weight:500;
}
.nav a:hover,
.nav a.active{
    background:linear-gradient(
        90deg,
        #2563eb,
        #16a34a
    );
    color:#fff;
    transform:translateX(4px);
    box-shadow:0 10px 25px rgba(37,99,235,.35);
    border-left:4px solid #ffffff;
    font-weight:700;
}

.main{
margin-left:245px;
padding:24px;
}

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.card{
background:#fff;
border:none;
border-radius:20px;
padding:22px;
box-shadow:0 12px 30px rgba(15,23,42,.10);
margin-bottom:20px;
}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stat{font-size:30px;font-weight:800}.muted{color:var(--muted)}table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden}th,td{padding:12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}th{background:#f8fafc;color:#334155}.btn{display:inline-block;background:linear-gradient(
90deg,
#2563eb,
#16a34a
);color:#fff;padding:8px 12px;
border-radius:10px;text-decoration:none;border:0;cursor:pointer;font-weight:600;margin:2px}.btn.green{background:var(--green)}.btn.red{background:var(--red)}.btn.gray{background:#64748b}.btn.amber{background:var(--amber)}.form input,.form select,.form textarea{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:10px;margin:6px 0 14px}.form label{font-weight:600}.flash{padding:12px;border-radius:12px;margin-bottom:16px;background:#dcfce7;color:#166534}.flash.error{background:#fee2e2;color:#991b1b}.pill{display:inline-block;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700;background:#e5e7eb}.pill.active,.pill.paid,.pill.closed{background:#dcfce7;color:#166534}.pill.suspended,.pill.overdue{background:#fee2e2;color:#991b1b}.pill.pending,.pill.open{background:#fef3c7;color:#92400e}.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}pre{background:#0b1220;color:#e2e8f0;padding:15px;border-radius:14px;overflow:auto}.login{max-width:420px;margin:8vh auto}.logoBox{text-align:center;margin-bottom:20px}@media(max-width:900px){.sidebar{position:relative;width:100%;height:auto}.main{margin-left:0}.grid,.two{grid-template-columns:1fr}}
/* ===== LOGIN ZONLIN V4 ===== */

.login-page{
background:linear-gradient(
135deg,
#0b1f4d,
#2563eb,
#16a34a
);
min-height:100vh;
}

.login{
max-width:460px;
margin:6vh auto;
background:rgba(255,255,255,.96);
backdrop-filter:blur(20px);
border-radius:28px;
padding:30px;
box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.logoBox{
text-align:center;
margin-bottom:20px;
}

.login h1{
margin:10px 0;
color:#0b1f4d;
}

.login .btn{
width:100%;
padding:14px;
font-size:16px;
}

.login input{
height:48px;
font-size:15px;
}
/* ===== ZONLIN DASHBOARD PRO ===== */

.card h3{
    margin-top:5;
    color:#0b1f4d;
    font-size:15px;
}

.stat{
    font-size:32px;
    font-weight:800;
    color:#0b1f4d;
}

.card:hover{
    transform:translateY(-4px);
    transition:0.25s;
}

.nav a{
    font-size:15px;
    font-weight:600;
}

/* ===== GRAFICOS ===== */

.chart-card{
    min-height:240px;
}

.chart-container{
    position:relative;
    height:180px;
}
/* =========================
   RESPONSIVE MOVIL Y TABLET
========================= */

@media (max-width: 768px){

    .sidebar{
        position:relative;
        width:100%;
        height:auto;
    }

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

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

    .two{
        grid-template-columns:1fr !important;
    }

    .card{
        padding:12px;
    }

    table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

    .btn{
        min-height:44px;
        padding:10px 14px;
    }

    .stat{
        font-size:30px;
    }

}
/* MEJORAS PARA IPHONE Y ANDROID */

@media (max-width:768px){

    .topbar{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }

    .card h3{
        font-size:16px;
    }

    .stat{
        font-size:24px;
    }

}

/* =====================================================
   DISEÑO COMPACTO MODERNO + MENÚ HAMBURGUESA (móvil/tablet)
===================================================== */

/* Tarjetas más ligeras en todo el CRM */
.card{
    border-radius:14px;
    padding:16px;
    box-shadow:0 4px 14px rgba(15,23,42,.07);
    margin-bottom:14px;
}
.card:hover{ transform:none; }

/* ===== Menú lateral con grupos desplegables ===== */
.nav-group { margin:4px 0; }
.nav-group-title {
    display:flex; justify-content:space-between; align-items:center;
    width:100%; background:rgba(255,255,255,.06); border:none; cursor:pointer;
    color:#dbeafe; font-weight:700; font-size:15px; text-align:left;
    padding:11px 14px; border-radius:12px; font-family:inherit;
    transition:.2s;
}
.nav-group-title:hover { background:rgba(255,255,255,.12); }
.nav-group-title .arr { transition:transform .25s; font-size:12px; opacity:.7; }
.nav-group.open .nav-group-title .arr { transform:rotate(180deg); }
.nav-group-items {
    display:none;
    margin:2px 0 4px 10px;
    border-left:2px solid rgba(255,255,255,.15);
    padding-left:6px;
}
.nav-group.open .nav-group-items { display:block; }
.nav-group-items a { padding:9px 12px; margin:3px 0; font-size:14px; }

/* Botón hamburguesa (oculto en escritorio) */
.menu-toggle{
    display:none;
    position:fixed;
    top:12px;
    left:12px;
    z-index:1101;
    width:44px;
    height:44px;
    border:none;
    border-radius:12px;
    background:var(--dark);
    color:#fff;
    font-size:20px;
    cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,.25);
}

.sidebar-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:1099;
}
.sidebar-overlay.show{ display:block; }

/* Sidebar deslizante en móvil y tablet */
@media (max-width:1024px){

    .menu-toggle{ display:block; }

    .sidebar{
        position:fixed !important;
        left:-280px;
        top:0;
        width:250px !important;
        height:100vh !important;
        z-index:1100;
        transition:left .28s ease;
        overflow-y:auto;
        padding:16px;
    }
    .sidebar.open{ left:0; }

    .brand img{ width:90px !important; height:auto; }
    .brand{ padding-bottom:8px; margin-bottom:10px; }
    .nav a{ padding:10px; margin:3px 0; font-size:14px; }

    .main{
        margin-left:0 !important;
        padding:14px;
        padding-top:64px; /* espacio para el botón hamburguesa */
    }

    .grid,.two{ grid-template-columns:1fr !important; }

    table{ display:block; overflow-x:auto; white-space:nowrap; }

    .btn{ min-height:42px; padding:9px 13px; }
}

@media (max-width:480px){
    .main{ padding:10px; padding-top:60px; }
    .card{ padding:12px; }
}