:root {
    --bg-main: #0f172a;
    --bg-panel: rgba(30, 41, 59, 0.85);
    --bg-glass: rgba(255, 255, 255, 0.04);
    --bg-input: rgba(255, 255, 255, 0.06);
    --border-glass: rgba(255, 255, 255, 0.09);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --accent: #6366f1;
    --accent-hover: #4f46e5;
    --accent-glow: rgba(99,102,241,0.3);
    --green: #10b981;
    --green-bg: rgba(16,185,129,0.12);
    --orange: #f59e0b;
    --orange-bg: rgba(245,158,11,0.12);
    --red: #ef4444;
    --red-bg: rgba(239,68,68,0.12);
    --blue: #3b82f6;
    --blue-bg: rgba(59,130,246,0.12);
    --purple: #a855f7;
    --purple-bg: rgba(168,85,247,0.12);
    --shadow: 0 8px 32px rgba(0,0,0,0.35);
    --radius: 16px;
    --radius-sm: 10px;
    --transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    --sidebar-width: 270px;
}
.light-theme {
    --bg-main: #f1f5f9;
    --bg-panel: rgba(255,255,255,0.9);
    --bg-glass: rgba(0,0,0,0.03);
    --bg-input: rgba(0,0,0,0.04);
    --border-glass: rgba(0,0,0,0.08);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --shadow: 0 4px 20px rgba(0,0,0,0.06);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;}
body{font-family:'Outfit',sans-serif;background:var(--bg-main);color:var(--text-primary);min-height:100vh;overflow-x:hidden;transition:background 0.3s,color 0.3s;}

/* Background blobs */
body::before{content:'';position:fixed;top:-20%;left:-10%;width:55vw;height:55vw;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.14) 0%,transparent 65%);z-index:-1;pointer-events:none;}
body::after{content:'';position:fixed;bottom:-20%;right:-10%;width:60vw;height:60vw;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.1) 0%,transparent 65%);z-index:-1;pointer-events:none;}

/* ─── Layout ─────────────────────────────────────────────── */
.app-container{display:flex;min-height:100vh;}

/* ─── Sidebar ─────────────────────────────────────────────── */
.sidebar{width:var(--sidebar-width);background:var(--bg-panel);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-right:1px solid var(--border-glass);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;transition:var(--transition);}
.sidebar-header{padding:1.75rem 1.5rem 1.25rem;display:flex;align-items:center;gap:1rem;border-bottom:1px solid var(--border-glass);}
.logo-box{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#8b5cf6);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 4px 14px var(--accent-glow);}
.logo-box.large{width:64px;height:64px;border-radius:18px;}
.logo-box svg{width:22px;height:22px;}
.logo-sub{font-size:.75rem;color:var(--text-secondary);display:block;}
.sidebar-header h2{font-size:1.1rem;font-weight:700;line-height:1.2;}

.sidebar-nav{flex:1;padding:1rem .75rem;display:flex;flex-direction:column;gap:.25rem;overflow-y:auto;}
.nav-divider{height:1px;background:var(--border-glass);margin:.5rem .5rem;}
.nav-item{display:flex;align-items:center;gap:.875rem;padding:.85rem 1rem;color:var(--text-secondary);text-decoration:none;border-radius:var(--radius-sm);font-weight:500;font-size:.925rem;transition:var(--transition);position:relative;}
.nav-item svg{width:18px;height:18px;flex-shrink:0;}
.nav-item:hover{background:var(--bg-glass);color:var(--text-primary);}
.nav-item.active{background:linear-gradient(90deg,rgba(99,102,241,.15) 0%,transparent 100%);color:var(--text-primary);border-left:3px solid var(--accent);}

/* Categorías de Menú Lateral en Acordeón */
.nav-category {
    display: flex;
    flex-direction: column;
    margin-top: 0.35rem;
    border-radius: var(--radius-sm, 10px);
    transition: background 0.2s ease;
}
.nav-category:first-of-type {
    margin-top: 0.15rem;
}
.nav-category-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    -webkit-user-select: none;
    text-align: left;
}
.nav-category-toggle:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}
.nav-category.open .nav-category-toggle {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
}
.nav-category-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}
.nav-category-label span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-category-label svg,
.nav-category-label i {
    width: 15px;
    height: 15px;
    opacity: 0.75;
    flex-shrink: 0;
}
.nav-category.open .nav-category-label svg,
.nav-category.open .nav-category-label i {
    opacity: 1;
    color: var(--accent, #6366f1);
}
.nav-category-arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    opacity: 0.5;
    flex-shrink: 0;
}
.nav-category.open .nav-category-arrow {
    transform: rotate(180deg);
    opacity: 0.9;
}
.nav-category.has-active .nav-category-toggle {
    color: var(--text-primary);
}
.nav-category.has-active:not(.open) .nav-category-label::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent, #6366f1);
    box-shadow: 0 0 8px var(--accent-glow, rgba(99, 102, 241, 0.6));
    margin-left: 6px;
    display: inline-block;
}
.nav-category-items {
    display: none;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.25rem 0 0.4rem 0.35rem;
    border-left: 2px solid rgba(255, 255, 255, 0.06);
    margin-left: 1.15rem;
    animation: navCategorySlideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-category.open .nav-category-items {
    display: flex;
}
@keyframes navCategorySlideDown {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Modo claro (Light theme) */
.light-theme .nav-category-toggle:hover {
    background: rgba(0, 0, 0, 0.04);
}
.light-theme .nav-category.open .nav-category-toggle {
    background: rgba(0, 0, 0, 0.03);
}
.light-theme .nav-category-items {
    border-left-color: rgba(0, 0, 0, 0.08);
}


.sidebar-footer{padding:1rem 1.5rem;border-top:1px solid var(--border-glass);display:flex;align-items:center;gap:.75rem;}
.user-profile{display:flex;align-items:center;gap:.75rem;flex:1;}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#8b5cf6);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;color:#fff;flex-shrink:0;}
.user-info{display:flex;flex-direction:column;line-height:1.3;}
.user-name{font-weight:600;font-size:.9rem;}
.user-role{font-size:.75rem;color:var(--text-secondary);text-transform:capitalize;}
.logout-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;color:var(--text-secondary);text-decoration:none;transition:var(--transition);}
.logout-btn:hover{background:var(--red-bg);color:var(--red);}
.logout-btn svg{width:16px;height:16px;}

/* ─── Main Content ────────────────────────────────────────── */
.main-content{flex:1;margin-left:var(--sidebar-width);display:flex;flex-direction:column;min-height:100vh;}
.top-header{height:70px;padding:0 2.5rem;display:flex;align-items:center;justify-content:space-between;background:var(--bg-panel);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-glass);position:sticky;top:0;z-index:50;}
.page-breadcrumb{font-size:1rem;font-weight:600;color:var(--text-secondary);}
.header-actions{display:flex;gap:.75rem;}
.action-btn{background:var(--bg-glass);border:1px solid var(--border-glass);color:var(--text-secondary);width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);}
.action-btn:hover{color:var(--text-primary);border-color:var(--accent);}
.action-btn svg{width:18px;height:18px;}

.page-body{padding:2.5rem;flex:1;}
.dashboard-content{max-width:1400px;margin:0 auto;}

.page-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2rem;flex-wrap:wrap;gap:1rem;}
.page-header h1{font-size:2rem;font-weight:700;letter-spacing:-.03em;margin-bottom:.25rem;}
.subtitle{color:var(--text-secondary);font-size:1rem;}
.section-title{font-size:1rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin:.5rem 0 1rem;}

/* ─── Buttons ─────────────────────────────────────────────── */
.btn-primary{background:var(--accent);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;transition:var(--transition);box-shadow:0 4px 14px var(--accent-glow);text-decoration:none;}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 6px 20px var(--accent-glow);}
.btn-primary.btn-full{width:100%;justify-content:center;padding:1rem;}
.btn-primary.small,.btn-secondary.small{padding:.45rem .9rem;font-size:.82rem;}
.btn-secondary{background:var(--bg-glass);color:var(--text-primary);border:1px solid var(--border-glass);padding:.75rem 1.5rem;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;transition:var(--transition);text-decoration:none;}
.btn-secondary:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);}
.btn-danger{background:var(--red);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;transition:var(--transition);}
.btn-danger:hover{opacity:.88;}
.btn-group{display:flex;gap:.75rem;}
.icon-btn{background:var(--bg-glass);border:1px solid var(--border-glass);color:var(--text-secondary);width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);text-decoration:none;}
.icon-btn:hover{color:var(--text-primary);}
.icon-btn.danger:hover{background:var(--red-bg);color:var(--red);border-color:transparent;}
.icon-btn.success{color:var(--green);}
.icon-btn svg{width:15px;height:15px;}

/* ─── Cards ───────────────────────────────────────────────── */
.glass-card{background:var(--bg-panel);backdrop-filter:blur(16px);border:1px solid var(--border-glass);border-radius:var(--radius);box-shadow:var(--shadow);}
.glass-panel{background:var(--bg-panel);backdrop-filter:blur(16px);border:1px solid var(--border-glass);border-radius:var(--radius);padding:1.75rem;box-shadow:var(--shadow);}
.glass-card{padding:1.5rem;}
.glass-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.15);}

/* ─── Stats Grid ──────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.25rem;margin-bottom:2rem;}
.stat-card{display:flex;align-items:flex-start;gap:1.25rem;}
.stat-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.stat-icon svg{width:22px;height:22px;}
.box-purple{background:linear-gradient(135deg,#a855f7,#7e22ce);}
.box-orange{background:linear-gradient(135deg,#fb923c,#c2410c);}
.box-blue{background:linear-gradient(135deg,#3b82f6,#1d4ed8);}
.box-green{background:linear-gradient(135deg,#10b981,#047857);}
.stat-details h3{font-size:.85rem;color:var(--text-secondary);font-weight:500;margin-bottom:.4rem;}
.stat-value{font-size:1.8rem;font-weight:700;letter-spacing:-.02em;line-height:1;margin-bottom:.4rem;}
.stat-change{display:flex;align-items:center;gap:.3rem;font-size:.82rem;font-weight:500;}
.stat-change svg{width:14px;height:14px;}
.stat-change.positive{color:var(--green);}
.stat-change.negative{color:var(--red);}
.stat-change.neutral{color:var(--text-secondary);}

/* ─── Quick Actions ───────────────────────────────────────── */
.quick-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2rem;}
.quick-action-btn{background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--radius-sm);padding:.9rem 1.5rem;display:flex;align-items:center;gap:.6rem;color:var(--text-primary);text-decoration:none;font-weight:500;font-size:.9rem;transition:var(--transition);}
.quick-action-btn:hover{background:rgba(99,102,241,.12);border-color:var(--accent);color:var(--accent);}
.quick-action-btn svg{width:18px;height:18px;}

/* ─── Dashboard 2-col Grid ────────────────────────────────── */
.dashboard-grid-2{display:grid;grid-template-columns:1.6fr 1fr;gap:1.25rem;}
.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;}
.panel-header h3{font-size:1.1rem;font-weight:600;}
.view-all{color:var(--accent);text-decoration:none;font-size:.875rem;font-weight:500;}
.view-all:hover{text-decoration:underline;}

/* ─── Table ───────────────────────────────────────────────── */
.table-responsive{overflow-x:auto;}
.modern-table{width:100%;border-collapse:collapse;}
.modern-table th{text-align:left;padding:.9rem 1rem;color:var(--text-secondary);font-weight:500;font-size:.83rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border-glass);}
.modern-table td{padding:.9rem 1rem;font-size:.9rem;border-bottom:1px solid var(--bg-glass);}
.modern-table tbody tr:hover{background:var(--bg-glass);}
.modern-table tbody tr:last-child td{border-bottom:none;}
.loading-row,.empty-row{text-align:center;color:var(--text-muted);padding:2rem!important;}

/* ─── Status Badges ───────────────────────────────────────── */
.status-badge{padding:.3rem .75rem;border-radius:20px;font-size:.78rem;font-weight:600;display:inline-block;}
.status-badge.success{background:var(--green-bg);color:var(--green);}
.status-badge.warning{background:var(--orange-bg);color:var(--orange);}
.status-badge.danger{background:var(--red-bg);color:var(--red);}
.status-badge.neutral{background:var(--bg-glass);color:var(--text-secondary);}

.tag{background:var(--bg-glass);border:1px solid var(--border-glass);padding:.2rem .6rem;border-radius:6px;font-size:.78rem;}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
.dot.rented,.dot.danger{background:var(--accent);}
.dot.owner,.dot.success-dot{background:var(--green);}
.dot.warning{background:var(--orange);}
.dot.debt-1{background:var(--orange);}
.dot.debt-2{background:var(--red);}
.dot.debt-3{background:#dc2626;}

/* ─── Filter Bar ──────────────────────────────────────────── */
.filter-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem;padding:1rem!important;}
.filter-btn{background:transparent;border:1px solid var(--border-glass);color:var(--text-secondary);padding:.5rem 1.1rem;border-radius:8px;font-size:.85rem;font-weight:500;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:.4rem;}
.filter-btn:hover{color:var(--text-primary);}
.filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}

/* ─── Tab Bar ─────────────────────────────────────────────── */
.tab-bar{display:flex;gap:.5rem;margin-bottom:1.25rem;border-bottom:1px solid var(--border-glass);padding-bottom:.75rem;}
.tab-btn{background:transparent;border:none;color:var(--text-secondary);padding:.5rem 1.25rem;font-size:.925rem;font-weight:500;cursor:pointer;border-radius:8px;transition:var(--transition);}
.tab-btn:hover{color:var(--text-primary);}
.tab-btn.active{background:var(--accent);color:#fff;}

/* ─── Apartments Grid ─────────────────────────────────────── */
.apartments-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;}
.apt-card{padding:1.25rem;text-align:center;cursor:pointer;border-radius:var(--radius);transition:var(--transition);}
.apt-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.apt-number{font-size:1.75rem;font-weight:700;margin-bottom:.5rem;}
.apt-status-badge{margin-bottom:.4rem;}
.apt-resident{font-size:.8rem;color:var(--text-secondary);}
.apt-card.rented{border-color:rgba(99,102,241,.3);}
.apt-card.owned{border-color:rgba(16,185,129,.3);}
/* Debt Colors */
.apt-card.debt-0{border-left:4px solid var(--green);}
.apt-card.debt-1{border-left:4px solid yellow; background:rgba(255,255,0,0.03);}
.apt-card.debt-2{border-left:4px solid var(--orange); background:rgba(245,158,11,0.05);}
.apt-card.debt-3{border-left:4px solid var(--red); background:rgba(239,68,68,0.05); animation:pulseBorder 2s infinite;}

@keyframes pulseBorder {
    0% { border-left-color: var(--red); }
    50% { border-left-color: #7f1d1d; }
    100% { border-left-color: var(--red); }
}

/* ─── Forms ───────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
label{font-size:.875rem;font-weight:500;color:var(--text-secondary);}
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],textarea,.select-input{background:var(--bg-input);border:1px solid var(--border-glass);border-radius:var(--radius-sm);color:var(--text-primary);padding:.7rem 1rem;font-size:.9rem;font-family:'Outfit',sans-serif;width:100%;transition:var(--transition);}
input:focus,textarea:focus,.select-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
textarea{resize:vertical;min-height:80px;}
.select-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;}
.select-input option {background:var(--bg-main);color:var(--text-primary);}
.form-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.5rem;}
.form-hint{font-size:.78rem;color:var(--text-muted);display:flex;align-items:center;gap:.3rem;margin-top:.25rem;}
.form-hint svg{width:13px;height:13px;}
.info-box{background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.2);border-radius:var(--radius-sm);padding:.9rem 1.1rem;font-size:.875rem;display:flex;align-items:flex-start;gap:.6rem;margin:.5rem 0 1rem;color:var(--text-secondary);}
.info-box svg{width:16px;height:16px;flex-shrink:0;margin-top:.1rem;color:var(--accent);}
.inline-input{background:var(--bg-input);border:1px solid var(--border-glass);border-radius:6px;color:var(--text-primary);padding:.3rem .6rem;font-size:.85rem;width:80px;}

/* ─── File Upload ─────────────────────────────────────────── */
.file-upload-area{position:relative;border:2px dashed var(--border-glass);border-radius:var(--radius-sm);padding:1.5rem;text-align:center;cursor:pointer;transition:var(--transition);}
.file-upload-area:hover{border-color:var(--accent);background:rgba(99,102,241,.05);}
.file-upload-area input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.file-upload-content{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--text-secondary);}
.file-upload-content svg{width:28px;height:28px;color:var(--accent);}

/* ─── Modal ───────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease;}
.modal-box{background:var(--bg-main);border:1px solid var(--border-glass);border-radius:20px;width:90%;max-width:520px;max-height:90vh;overflow-y:auto;animation:slideUp .25s ease;box-shadow:var(--shadow);}
.modal-box.modal-lg{max-width:700px;}
.modal-box.modal-xl{max-width:1050px;}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 1.75rem;border-bottom:1px solid var(--border-glass);}
.modal-header h3{font-size:1.15rem;font-weight:600;}
.modal-close{background:var(--bg-glass);border:1px solid var(--border-glass);color:var(--text-secondary);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);}
.modal-close:hover{color:var(--text-primary);}
.modal-close svg{width:15px;height:15px;}
.modal-body{padding:1.75rem;}
.detail-section{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-glass);}
.detail-section:last-child{border-bottom:none;margin-bottom:0;}
.detail-section h4{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);margin-bottom:.9rem;display:flex;align-items:center;gap:.4rem;}
.detail-section h4 svg{width:14px;height:14px;}
.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem;}
.toggle{position:relative;display:inline-block;width:44px;height:24px;}
.toggle input{opacity:0;width:0;height:0;}
.slider{position:absolute;inset:0;background:var(--border-glass);border-radius:24px;cursor:pointer;transition:.3s;}
.slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.3s;}
input:checked+.slider{background:var(--accent);}
input:checked+.slider::before{transform:translateX(20px);}

/* ─── Request Cards ───────────────────────────────────────── */
.requests-list{display:flex;flex-direction:column;gap:1rem;}
.request-card{padding:1.5rem;}
.request-card-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem;}
.request-date,.request-meta-right{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--text-secondary);}
.request-meta-right{flex-direction:column;align-items:flex-end;gap:.3rem;}
.request-meta-right svg,.request-date svg{width:13px;height:13px;}
.request-description{font-size:.95rem;margin-bottom:1rem;line-height:1.5;}
.request-actions{display:flex;gap:.75rem;}
.days-badge{font-size:.8rem;font-weight:500;}
.days-badge.danger-text{color:var(--red);}
.request-item{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0;border-bottom:1px solid var(--bg-glass);}
.request-item:last-child{border-bottom:none;}
.request-info{display:flex;flex-direction:column;gap:.2rem;}
.request-desc{font-size:.9rem;font-weight:500;}
.request-meta{font-size:.78rem;color:var(--text-secondary);}

/* ─── Period List ─────────────────────────────────────────── */
.period-item{display:flex;align-items:center;justify-content:space-between;padding:1.1rem;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);border:1px solid transparent;}
.period-item:hover{background:var(--bg-glass);border-color:var(--border-glass);}
.period-info{display:flex;flex-direction:column;gap:.25rem;}
.period-info strong{font-size:1rem;}
.period-info span{font-size:.82rem;color:var(--text-secondary);}
.period-actions{display:flex;align-items:center;gap:.75rem;}
.period-actions svg{width:16px;height:16px;color:var(--text-muted);}

/* ─── Payment ─────────────────────────────────────────────── */
.payment-summary{background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--radius-sm);padding:1.1rem;margin-bottom:1.25rem;}
.payment-apt{font-size:.9rem;color:var(--text-secondary);margin-bottom:.3rem;}
.payment-total{font-size:1.5rem;font-weight:700;}

/* ─── Toast ───────────────────────────────────────────────── */
#toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;}
.toast{display:flex;align-items:center;gap:.75rem;background:var(--bg-panel);border:1px solid var(--border-glass);border-radius:12px;padding:.9rem 1.25rem;box-shadow:var(--shadow);animation:slideInRight .3s ease;min-width:280px;max-width:400px;}
.toast svg{width:18px;height:18px;flex-shrink:0;}
.toast span{flex:1;font-size:.875rem;}
.toast button{background:none;border:none;color:var(--text-muted);cursor:pointer;display:flex;}
.toast button svg{width:14px;height:14px;}
.toast-success{border-left:3px solid var(--green);}
.toast-success svg:first-child{color:var(--green);}
.toast-error{border-left:3px solid var(--red);}
.toast-error svg:first-child{color:var(--red);}
.toast-warning{border-left:3px solid var(--orange);}
.toast-warning svg:first-child{color:var(--orange);}
.toast-info{border-left:3px solid var(--accent);}
.toast-info svg:first-child{color:var(--accent);}

/* ─── Login ───────────────────────────────────────────────── */
.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;}
.login-card{background:var(--bg-panel);border:1px solid var(--border-glass);border-radius:24px;padding:2.5rem;width:100%;max-width:420px;box-shadow:var(--shadow);}
.login-logo{text-align:center;margin-bottom:2rem;}
.login-logo h1{font-size:1.5rem;font-weight:700;margin:.75rem 0 .25rem;}
.login-logo p{color:var(--text-secondary);font-size:.9rem;}
.login-logo .logo-box{margin:0 auto .75rem;}
.login-form .form-group{margin-bottom:1.1rem;}
.input-wrapper{position:relative;display:flex;align-items:center;}
.input-wrapper svg:first-child{position:absolute;left:.9rem;width:17px;height:17px;color:var(--text-muted);pointer-events:none;}
.input-wrapper input{padding-left:2.6rem;}
.toggle-password{position:absolute;right:.75rem;background:none;border:none;color:var(--text-muted);cursor:pointer;display:flex;}
.toggle-password svg{width:17px;height:17px;}
.login-footer{text-align:center;margin-top:1.5rem;color:var(--text-muted);font-size:.8rem;}
.alert{display:flex;align-items:center;gap:.6rem;padding:.9rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.875rem;}
.alert-error{background:var(--red-bg);color:var(--red);border:1px solid rgba(239,68,68,.25);}
.alert svg{width:16px;height:16px;flex-shrink:0;}

/* ─── Misc ────────────────────────────────────────────────── */
.text-muted{color:var(--text-muted);}
.text-danger{color:var(--red);}
.small{font-size:.8rem;}
.mb-1{margin-bottom:.5rem;}
.mt-1{margin-top:.5rem;}
.action-btns{display:flex;gap:.4rem;align-items:center;}

/* ─── Animations ──────────────────────────────────────────── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideOutRight{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)}}

/* ─── Responsive ──────────────────────────────────────────── */
@media(max-width:1100px){.dashboard-grid-2{grid-template-columns:1fr;}}
@media(max-width:768px){
    .sidebar{width:0;transform:translateX(-100%);}
    .main-content{margin-left:0;}
    .form-row{grid-template-columns:1fr;}
    .page-header{flex-direction:column;align-items:flex-start;}
}


/* ============================================================ */
/* 📱 MOBILE RESPONSIVE & DEVICE OPTIMIZATION                   */
/* ============================================================ */

.mobile-menu-btn {
    display: none;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.mobile-menu-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: var(--accent);
}

.sidebar-close-btn {
    display: none;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-glass);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.sidebar-close-btn:hover {
    color: var(--text-primary);
    background: var(--red-bg);
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.sidebar-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-bottom-nav {
    display: none;
}

/* Tablet & Mobile Screens (<= 900px) */
@media (max-width: 900px) {
    .mobile-menu-btn {
        display: inline-flex;
    }
    
    .sidebar-close-btn {
        display: inline-flex;
    }
    
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 290px;
        max-width: 85vw;
        height: 100vh;
        height: 100dvh;
        z-index: 9999;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.6);
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Cellphone & Small Mobile Screens (<= 768px) */
@media (max-width: 768px) {
    body.is-mobile-device,
    body {
        padding-bottom: calc(65px + env(safe-area-inset-bottom, 0px));
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Top Header */
    .top-header {
        height: 56px;
        padding: 0 0.85rem;
        position: sticky;
        top: 0;
        z-index: 50;
    }
    
    .page-breadcrumb {
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px;
    }
    
    .header-actions {
        gap: 6px;
    }
    
    .action-btn {
        width: 36px;
        height: 36px;
    }
    
    #google_translate_element {
        transform: scale(0.85);
        transform-origin: right center;
    }
    
    /* Page Body */
    .page-body {
        padding: 1rem 0.75rem;
    }
    
    .page-header {
        margin-bottom: 1.25rem;
        gap: 0.75rem;
        flex-direction: column;
        align-items: stretch;
    }
    
    .page-header h1 {
        font-size: 1.45rem;
        line-height: 1.2;
    }
    
    .subtitle {
        font-size: 0.82rem;
    }
    
    /* Stats Grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.65rem;
        margin-bottom: 1.25rem;
    }
    
    .stat-card {
        padding: 0.85rem;
        flex-direction: column;
        gap: 0.4rem;
        align-items: flex-start;
    }
    
    .stat-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
    
    .stat-icon svg {
        width: 18px;
        height: 18px;
    }
    
    .stat-details h3 {
        font-size: 0.75rem;
        margin-bottom: 0.2rem;
    }
    
    .stat-value {
        font-size: 1.25rem;
    }
    
    /* Panels and Cards */
    .glass-panel {
        padding: 1rem 0.85rem;
        border-radius: 14px;
    }
    
    .glass-card {
        padding: 1rem;
        border-radius: 14px;
    }
    
    .panel-header {
        margin-bottom: 0.85rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }
    
    .panel-header h3 {
        font-size: 1rem;
    }
    
    /* Tables on Mobile */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 10px;
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
    }
    
    .modern-table {
        min-width: 600px;
        font-size: 0.8rem;
    }
    
    .modern-table th,
    .modern-table td {
        padding: 8px 10px;
        white-space: nowrap;
    }
    
    /* Tabs on Mobile */
    .tab-bar {
        gap: 0.35rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    
    .tab-bar::-webkit-scrollbar {
        display: none;
    }
    
    .tab-btn {
        padding: 0.55rem 0.85rem;
        font-size: 0.82rem;
        white-space: nowrap;
    }
    
    /* Forms & Inputs on Mobile (16px to prevent iOS auto-zoom) */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0.65rem;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    textarea,
    .select-input {
        font-size: 16px !important;
        padding: 0.65rem 0.85rem;
        border-radius: 10px;
        min-height: 42px;
    }
    
    .form-group {
        margin-bottom: 0.75rem;
    }
    
    .form-actions {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }
    
    .form-actions button {
        width: 100%;
        justify-content: center;
    }
    
    .btn-primary,
    .btn-secondary,
    .btn-danger {
        padding: 0.65rem 1rem;
        font-size: 0.88rem;
        min-height: 42px;
        justify-content: center;
    }
    
    /* Modals on Mobile */
    .modal-overlay {
        padding: 0.5rem;
    }
    
    .modal-box {
        width: 96% !important;
        max-width: 96% !important;
        max-height: 88vh;
        max-height: 88dvh;
        margin: 6vh auto;
        border-radius: 16px;
    }
    
    .modal-header {
        padding: 1rem 1.15rem;
    }
    
    .modal-header h3 {
        font-size: 1.05rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    /* Notifications Dropdown on Mobile */
    #notif-dropdown {
        position: fixed !important;
        top: 60px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-height: calc(100vh - 140px) !important;
        border-radius: 14px !important;
    }
    
    /* Mobile Bottom Navigation Bar */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid var(--border-glass);
        z-index: 1000;
        justify-content: space-around;
        align-items: center;
        padding: 0 0.5rem;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    }
    
    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 0.7rem;
        font-weight: 500;
        background: none;
        border: none;
        cursor: pointer;
        flex: 1;
        padding: 6px 0;
        transition: color 0.2s ease;
    }
    
    .mobile-nav-item:hover,
    .mobile-nav-item.active {
        color: var(--accent, #6366f1);
        font-weight: 700;
    }
    
    .mobile-nav-item svg {
        width: 20px;
        height: 20px;
    }
    
    /* Apartments Grid */
    .apartments-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 0.65rem;
    }
    
    .apt-card {
        padding: 0.85rem;
    }
    
    .apt-number {
        font-size: 1.35rem;
    }
}


/* ============================================================ */

/* ============================================================ */
/* 🖥️ DESKTOP SIDEBAR AUTO-HIDE / COLLAPSIBLE STYLES (ROBUST)   */
/* ============================================================ */

.desktop-sidebar-toggle {
    display: none;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    color: var(--text-secondary);
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.desktop-sidebar-toggle:hover {
    color: var(--text-primary);
    border-color: var(--accent);
    background: rgba(99, 102, 241, 0.12);
}

.desktop-sidebar-toggle svg {
    width: 18px;
    height: 18px;
}

@media (min-width: 901px) {
    .desktop-sidebar-toggle {
        display: inline-flex !important;
    }

    /* COLLAPSED STATE (72px Icon Rail) */
    body.sidebar-collapsed,
    html.sidebar-collapsed-mode body {
        --sidebar-width: 72px !important;
    }

    body.sidebar-collapsed .sidebar,
    html.sidebar-collapsed-mode .sidebar {
        width: 72px !important;
        overflow-x: hidden !important;
        transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease !important;
    }

    body.sidebar-collapsed .main-content,
    html.sidebar-collapsed-mode .main-content {
        margin-left: 72px !important;
        width: calc(100% - 72px) !important;
        transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s ease !important;
    }

    body.sidebar-collapsed .sidebar .sidebar-header,
    html.sidebar-collapsed-mode .sidebar .sidebar-header {
        padding: 1.25rem 0.5rem !important;
        justify-content: center !important;
    }

    body.sidebar-collapsed .sidebar .logo-text-wrapper,
    html.sidebar-collapsed-mode .sidebar .logo-text-wrapper,
    body.sidebar-collapsed .sidebar .sidebar-header h2,
    html.sidebar-collapsed-mode .sidebar .sidebar-header h2,
    body.sidebar-collapsed .sidebar .sidebar-header .logo-sub,
    html.sidebar-collapsed-mode .sidebar .sidebar-header .logo-sub {
        display: none !important;
    }

    body.sidebar-collapsed .sidebar .logo-box,
    html.sidebar-collapsed-mode .sidebar .logo-box {
        margin: 0 auto !important;
        width: 38px !important;
        height: 38px !important;
    }

    body.sidebar-collapsed .sidebar .nav-item,
    html.sidebar-collapsed-mode .sidebar .nav-item {
        padding: 0.85rem 0.5rem !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    body.sidebar-collapsed .sidebar .nav-item span,
    html.sidebar-collapsed-mode .sidebar .nav-item span {
        display: none !important;
    }

    body.sidebar-collapsed .sidebar .nav-item svg,
    html.sidebar-collapsed-mode .sidebar .nav-item svg {
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
    }

    body.sidebar-collapsed .sidebar .sidebar-footer,
    html.sidebar-collapsed-mode .sidebar .sidebar-footer {
        padding: 1rem 0.5rem !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 0.6rem !important;
    }

    body.sidebar-collapsed .sidebar .user-info,
    html.sidebar-collapsed-mode .sidebar .user-info {
        display: none !important;
    }

    body.sidebar-collapsed .sidebar .user-profile,
    html.sidebar-collapsed-mode .sidebar .user-profile {
        justify-content: center !important;
    }

    /* HOVER TO PEEK (Auto-Expand floating over content when mouse hovers left edge) */
    body.sidebar-collapsed .sidebar:hover,
    html.sidebar-collapsed-mode .sidebar:hover {
        width: 270px !important;
        box-shadow: 12px 0 40px rgba(0, 0, 0, 0.8) !important;
        background: var(--bg-main) !important;
        z-index: 10000 !important;
    }

    body.sidebar-collapsed .sidebar:hover .sidebar-header,
    html.sidebar-collapsed-mode .sidebar:hover .sidebar-header {
        padding: 1.75rem 1.5rem 1.25rem !important;
        justify-content: flex-start !important;
    }

    body.sidebar-collapsed .sidebar:hover .logo-text-wrapper,
    html.sidebar-collapsed-mode .sidebar:hover .logo-text-wrapper,
    body.sidebar-collapsed .sidebar:hover .sidebar-header h2,
    html.sidebar-collapsed-mode .sidebar:hover .sidebar-header h2,
    body.sidebar-collapsed .sidebar:hover .sidebar-header .logo-sub,
    html.sidebar-collapsed-mode .sidebar:hover .sidebar-header .logo-sub {
        display: block !important;
    }

    body.sidebar-collapsed .sidebar:hover .logo-box,
    html.sidebar-collapsed-mode .sidebar:hover .logo-box {
        margin: 0 !important;
    }

    body.sidebar-collapsed .sidebar:hover .nav-item,
    html.sidebar-collapsed-mode .sidebar:hover .nav-item {
        padding: 0.85rem 1rem !important;
        justify-content: flex-start !important;
        gap: 0.875rem !important;
    }

    body.sidebar-collapsed .sidebar:hover .nav-item span,
    html.sidebar-collapsed-mode .sidebar:hover .nav-item span {
        display: inline !important;
    }

    body.sidebar-collapsed .sidebar:hover .sidebar-footer,
    html.sidebar-collapsed-mode .sidebar:hover .sidebar-footer {
        padding: 1rem 1.5rem !important;
        flex-direction: row !important;
        justify-content: space-between !important;
    }

    body.sidebar-collapsed .sidebar:hover .user-info,
    html.sidebar-collapsed-mode .sidebar:hover .user-info {
        display: flex !important;
    }

    body.sidebar-collapsed .sidebar .nav-category-arrow,
    html.sidebar-collapsed-mode .sidebar .nav-category-arrow {
        display: none !important;
    }
    body.sidebar-collapsed .sidebar .nav-category-label span,
    html.sidebar-collapsed-mode .sidebar .nav-category-label span {
        display: none !important;
    }
    body.sidebar-collapsed .sidebar .nav-category-toggle,
    html.sidebar-collapsed-mode .sidebar .nav-category-toggle {
        justify-content: center !important;
        padding: 0.65rem 0 !important;
    }
    body.sidebar-collapsed .sidebar .nav-category-items,
    html.sidebar-collapsed-mode .sidebar .nav-category-items {
        margin-left: 0 !important;
        border-left: none !important;
        padding-left: 0 !important;
    }

    body.sidebar-collapsed .sidebar:hover .nav-category-arrow,
    html.sidebar-collapsed-mode .sidebar:hover .nav-category-arrow {
        display: block !important;
    }
    body.sidebar-collapsed .sidebar:hover .nav-category-label span,
    html.sidebar-collapsed-mode .sidebar:hover .nav-category-label span {
        display: inline !important;
    }
    body.sidebar-collapsed .sidebar:hover .nav-category-toggle,
    html.sidebar-collapsed-mode .sidebar:hover .nav-category-toggle {
        justify-content: space-between !important;
        padding: 0.65rem 0.85rem !important;
    }
    body.sidebar-collapsed .sidebar:hover .nav-category-items,
    html.sidebar-collapsed-mode .sidebar:hover .nav-category-items {
        margin-left: 1.15rem !important;
        border-left: 2px solid rgba(255, 255, 255, 0.06) !important;
        padding-left: 0.35rem !important;
    }

}




/* ========================================================
   OCULTAR BANNER SUPERIOR DE GOOGLE TRANSLATE SIN ROMPER MOTOR
   ======================================================== */
iframe.goog-te-banner-frame,
.goog-te-banner-frame,
iframe[class*="goog-te-banner"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    top: -9999px !important;
}

body {
    top: 0px !important;
    position: static !important;
}

#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover {
    display: none !important;
    visibility: hidden !important;
}

.goog-text-highlight {
    background-color: transparent !important;
    box-shadow: none !important;
}

#google_translate_element {
    position: fixed !important;
    top: -200px !important;
    left: 0 !important;
    opacity: 0.01 !important;
    z-index: -1 !important;
}

.flag-icon { width: 22px; height: 15px; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.35); display: inline-block; vertical-align: middle; flex-shrink: 0; }


/* ========================================================
   COMPORTAMIENTO NATIVO DE IMÁGENES EN MÓVIL Y TÁCTIL (PWA / APP STYLE)
   Bloquea el arrastre con el dedo, selección fantasma y callouts
   ======================================================== */
img, picture, svg, video, canvas {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: pan-y;
}

/* Logos, avatares e iconos dentro de componentes interactivos */
.logo-box img,
.avatar img,
.nav-item img,
.btn img,
button img,
a img,
.badge img {
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}

/* Responsive & Bounds */
img {
    max-width: 100%;
    height: auto;
}


/* ========================================================
   ESTILOS OPTIMIZADOS DEL MENÚ ACORDEÓN (TEXTO COMPACTO)
   ======================================================== */
.nav-category {
    display: flex;
    flex-direction: column;
    margin-top: 0.28rem;
    border-radius: 9px;
}
.nav-category:first-of-type {
    margin-top: 0.15rem;
}
.nav-category-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.48rem 0.65rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 9px;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    text-align: left;
    outline: none;
}
.nav-category-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #f8fafc);
    border-color: rgba(255, 255, 255, 0.14);
}
.nav-category.open .nav-category-toggle {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.35);
    color: var(--text-primary, #f8fafc);
}
.nav-category-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    pointer-events: none;
}
.nav-category-label span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.nav-category-label svg,
.nav-category-label i {
    width: 13.5px;
    height: 13.5px;
    opacity: 0.75;
    color: var(--text-secondary, #94a3b8);
    flex-shrink: 0;
    pointer-events: none;
}
.nav-category.open .nav-category-label svg,
.nav-category.open .nav-category-label i {
    opacity: 1;
    color: #818cf8;
}
.nav-category-arrow {
    width: 13px;
    height: 13px;
    color: var(--text-secondary, #94a3b8);
    opacity: 0.65;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    flex-shrink: 0;
    pointer-events: none;
}
.nav-category.open .nav-category-arrow {
    transform: rotate(180deg);
    opacity: 1;
    color: var(--text-primary, #f8fafc);
}
.nav-category.has-active:not(.open) .nav-category-label::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent, #6366f1);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.8);
    margin-left: 5px;
    display: inline-block;
}
.nav-category-items {
    display: none;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.25rem 0 0.3rem 0.35rem;
    border-left: 2px solid rgba(255, 255, 255, 0.08);
    margin-left: 1rem;
    animation: navCategorySlideDown 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-category.open .nav-category-items {
    display: flex;
}
.nav-category-items .nav-item {
    font-size: 0.82rem !important;
    padding: 0.45rem 0.65rem !important;
    gap: 0.55rem !important;
    border-radius: 7px !important;
    font-weight: 500 !important;
}
.nav-category-items .nav-item svg,
.nav-category-items .nav-item i {
    width: 15px !important;
    height: 15px !important;
    opacity: 0.8 !important;
    flex-shrink: 0 !important;
}
.nav-category-items .nav-item.active {
    font-weight: 600 !important;
    background: rgba(99, 102, 241, 0.15) !important;
    color: #ffffff !important;
    border-left: 2px solid #6366f1 !important;
}