/* ════════════════════════════════════════
   LAYOUT — TOPBAR / SIDEBAR / MAIN
   Dark Teal Sidebar + Clean White Content
   ════════════════════════════════════════ */

/* ─── TOPBAR ─── */
#topbar {
  position:fixed; top:0; left:0; right:0; height:var(--topbar);
  background:rgba(255,255,255,.95);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px) saturate(1.2);
  display:flex; align-items:center; padding:0 20px 0 0;
  z-index:200; gap:0;
}
#topbar .brand {
  width:var(--sidebar); display:flex; align-items:center;
  gap:12px; padding:0 24px; flex-shrink:0;
  background:var(--sidebar-bg); height:100%;
  border-right:none;
}
#topbar .brand .logo-wrap {
  width:32px; height:32px; border-radius:10px;
  background:rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
#topbar .brand .brand-text { display:flex; flex-direction:column; }
#topbar .brand .brand-name { font-size:15px; font-weight:700; color:rgba(255,255,255,.95); letter-spacing:-.3px; line-height:1.1; }
#topbar .brand .brand-sub  { font-size:10px; color:rgba(255,255,255,.45); letter-spacing:.5px; text-transform:uppercase; }
#topbar .topbar-right { margin-left:auto; display:flex; align-items:center; gap:10px; }

.topbar-icon {
  width:34px; height:34px; border-radius:var(--r2);
  background:var(--bg4); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--txt2); cursor:pointer; font-size:15px;
  transition:all .2s var(--ease); position:relative;
}
.topbar-icon:hover { background:var(--bg5); border-color:var(--border2); color:var(--txt); }
.topbar-icon .notif-dot {
  position:absolute; top:5px; right:5px; width:7px; height:7px;
  background:var(--red); border-radius:50%; border:2px solid var(--bg2);
}

#topbar .user-pill {
  display:flex; align-items:center; gap:8px;
  background:var(--bg4); border:1px solid var(--border);
  border-radius:20px; padding:4px 14px 4px 4px;
  cursor:pointer; transition:all .2s var(--ease);
}
#topbar .user-pill:hover { background:var(--bg5); border-color:var(--border2); }
#topbar .user-pill .av { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; }
#topbar .user-pill span { font-size:12.5px; font-weight:500; color:var(--txt2); }

/* ─── SIDEBAR — Dark Teal ─── */
#sidebar {
  position:fixed; top:var(--topbar); left:0;
  width:var(--sidebar); height:calc(100% - var(--topbar));
  background:var(--sidebar-bg);
  overflow-y:auto; z-index:100; padding:16px 0 24px;
  border-right:none;
}
#sidebar::-webkit-scrollbar { width:0; }

.nav-label {
  font-size:10px; font-weight:600; letter-spacing:1.2px;
  color:rgba(255,255,255,.35); text-transform:uppercase;
  padding:20px 20px 6px; display:flex; align-items:center; gap:8px;
}
.nav-label::after {
  content:''; flex:1; height:1px; background:rgba(255,255,255,.08);
}

.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px;
  font-size:13px; font-weight:500;
  color:rgba(255,255,255,.55); border-radius:10px;
  margin:2px 10px; cursor:pointer;
  transition:all .18s var(--ease); position:relative;
}
.nav-item:hover { background:rgba(255,255,255,.08); color:rgba(255,255,255,.9); }
.nav-item.active {
  background:#fff; color:#1E293B; font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.nav-item.active::before { display:none; }
.nav-item.active .nav-icon { color:#1E293B; }

.nav-sub { overflow:hidden; max-height:0; transition:max-height .3s var(--ease); }
.nav-sub.open { max-height:400px; }
.nav-sub-item {
  display:flex; align-items:center; gap:8px;
  padding:7px 14px 7px 44px;
  font-size:12.5px; color:rgba(255,255,255,.4);
  cursor:pointer; border-radius:var(--r);
  margin:1px 10px; transition:all .15s var(--ease);
  position:relative;
}
.nav-sub-item::before {
  content:''; position:absolute; left:30px; top:50%; transform:translateY(-50%);
  width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.2);
  transition:all .15s;
}
.nav-sub-item:hover { color:rgba(255,255,255,.85); background:rgba(255,255,255,.06); }
.nav-sub-item:hover::before { background:#10B981; }
.nav-sub-item.active { color:#10B981; font-weight:500; }
.nav-sub-item.active::before { background:#10B981; }
.nav-chevron { margin-left:auto; width:13px; height:13px; transition:transform .25s var(--ease); flex-shrink:0; color:rgba(255,255,255,.3); }
.nav-parent.open .nav-chevron { transform:rotate(90deg); }

.sidebar-footer {
  position:absolute; bottom:0; left:0; right:0;
  padding:12px 16px; border-top:1px solid rgba(255,255,255,.08);
  background:var(--sidebar-bg);
}

/* Nav icons */
.nav-icon {
  width:18px; height:18px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:currentColor;
}
.nav-icon svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ─── MAIN ─── */
#main {
  margin-left:var(--sidebar); margin-top:var(--topbar);
  padding:28px; min-height:calc(100vh - var(--topbar));
  position:relative; z-index:1;
  overflow-x:hidden; /* prevent horizontal overflow on mobile */
}
.page { display:none; max-width:100%; overflow-x:hidden; }
.page.active { display:block; animation:pageFadeIn .25s var(--ease); }
@keyframes pageFadeIn { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }

/* ─── HAMBURGER ─── */
.hamburger-btn {
  display:none;
  flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:40px; height:40px; padding:8px;
  background:transparent; border:none; cursor:pointer;
  border-radius:var(--r); flex-shrink:0; margin-left:8px;
  transition:background .15s var(--ease);
}
.hamburger-btn:hover { background:var(--bg4); }
.hamburger-btn span {
  display:block; width:20px; height:2px;
  background:var(--txt2); border-radius:2px;
  transition:all .25s var(--ease); transform-origin:center;
}

/* ─── SIDEBAR OVERLAY ─── */
#sidebar-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(15,23,42,.45); z-index:99;
  backdrop-filter:blur(2px);
}
#sidebar-overlay.active { display:block; }

/* ─── SIDEBAR CLOSE BTN (móvil) ─── */
.sidebar-close-btn {
  display:none; position:absolute; top:12px; right:12px;
  width:28px; height:28px; border-radius:var(--r);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.6); font-size:13px; cursor:pointer;
  align-items:center; justify-content:center;
  transition:all .15s;
}
.sidebar-close-btn:hover { background:rgba(255,255,255,.2); color:#fff; }

/* ─── RESPONSIVE TABLET (≤1024px) ─── */
@media(max-width:1024px) {
  :root { --sidebar: 220px; }
  .row-3 { grid-template-columns:1fr 1fr; }
  .row-3-2 { grid-template-columns:1fr 1fr; }
}

/* ─── RESPONSIVE MÓVIL (≤768px) ─── */
@media(max-width:768px) {
  :root { --topbar: 56px; }

  /* Hamburger visible */
  .hamburger-btn { display:flex; }

  /* Sidebar como drawer */
  #sidebar {
    transform:translateX(-100%);
    transition:transform .28s var(--ease);
    z-index:100; top:0; height:100%;
    padding-top:56px; width:260px;
  }
  #sidebar.open { transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.35); }
  .sidebar-close-btn { display:flex; color:rgba(255,255,255,.6); }

  /* Brand más compacto - white text removed on mobile */
  #topbar .brand { width:auto; padding:0 10px; border-right:none; background:transparent; }
  #topbar .brand .brand-sub { display:none; }
  #topbar .brand .brand-name { font-size:13px; color:var(--txt); }
  #topbar .brand .logo-wrap { background:#1E293B; }

  /* Rates widget oculto */
  #rates-widget { display:none !important; }

  /* User pill simplificado */
  #topbar .user-pill span { display:none; }
  #topbar .user-pill { padding:4px; border-radius:50%; }

  /* Topbar right: no overflow */
  #topbar .topbar-right { gap:6px; overflow:hidden; }

  /* Main sin margen lateral */
  #main { margin-left:0; padding:14px; padding-bottom:24px; }

  /* KPI grid: 2 columnas con overflow hidden */
  .kpi-grid { grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
  .kpi-card { padding:12px; gap:10px; overflow:hidden; }
  .kpi-val { font-size:20px; }
  .kpi-icon { width:34px; height:34px; font-size:15px; flex-shrink:0; }
  .kpi-icon svg { width:18px; height:18px; }
  .kpi-label { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .kpi-trend { font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* Grids */
  .row-2,.row-3,.row-2-1,.row-1-2,.row-3-2 { grid-template-columns:1fr; }

  /* Page header apilado */
  .page-header { flex-direction:column; align-items:flex-start; margin-bottom:18px; }
  .page-title { font-size:19px; }
  .page-header-actions { width:100%; justify-content:flex-start; flex-wrap:wrap; }

  /* Tablas: scroll horizontal */
  .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tbl-toolbar { flex-direction:column; align-items:stretch; gap:8px; }
  table { min-width:560px; }

  /* Cards */
  .card { padding:14px; }

  /* Modales full-screen en móvil */
  .modal-overlay { align-items:flex-end; padding:0; }
  .modal, .modal-lg, .modal-xl {
    max-width:100%; width:100%; border-radius:var(--r3) var(--r3) 0 0;
    max-height:92vh;
  }

  /* Botones en modales apilados */
  .modal-footer { flex-direction:column-reverse; }
  .modal-footer .btn { width:100%; justify-content:center; }

  /* Tab bar scroll horizontal */
  .tab-bar { overflow-x:auto; width:100%; -webkit-overflow-scrolling:touch; flex-wrap:nowrap !important; }
  .condo-tab-bar { overflow-x:auto; }

  /* Stat row */
  .stat-row { gap:6px; flex-wrap:wrap; }
  .stat-pill { font-size:11.5px; padding:5px 10px; }

  /* Input group apilado */
  .input-group { flex-direction:column; }
  .input-group .form-control { width:100%; }

  /* Export group */
  .export-group { flex-wrap:wrap; }

  /* Toast en móvil */
  #toast { bottom:16px; right:12px; left:12px; }
  .toast-item { min-width:unset; max-width:100%; }

  /* Form rows apilados */
  .form-row { flex-direction:column; gap:10px; }
  .form-row .form-group { width:100%; }
}

/* ─── RESPONSIVE SMALL (≤520px) ─── */
@media(max-width:520px) {
  .kpi-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .kpi-card { padding:10px 12px; gap:8px; }
  .kpi-val { font-size:18px; }
  .kpi-icon { width:30px; height:30px; font-size:13px; }
  .kpi-icon svg { width:16px; height:16px; }
  .kpi-label { font-size:10px; }
  .kpi-trend { font-size:9px; }

  /* Dropdown de grupo: ancho completo */
  #grupo-dropdown {
    min-width:auto !important; max-width:calc(100vw - 20px) !important;
    left:10px !important; right:10px !important;
  }

  /* Login card */
  .login-card { min-width:auto !important; padding:32px 24px 28px !important; }

  /* Page title */
  .page-title { font-size:17px; }
  .page-sub { font-size:12px; }
  #main { padding:10px; }

  /* Buttons smaller */
  .btn { padding:7px 12px; font-size:12.5px; }
  .btn-sm { padding:4px 8px; font-size:11px; }
  .btn-lg { padding:9px 16px; font-size:13px; }

  /* Table font smaller */
  table { font-size:12px; min-width:480px; }
  thead th { padding:8px 10px; font-size:10px; }
  tbody td { padding:8px 10px; }
}

/* ─── RESPONSIVE MINI (≤420px) — iPhone SE, iPhone 4-8 ─── */
@media(max-width:420px) {
  .kpi-grid { grid-template-columns:1fr 1fr; gap:6px; }
  .kpi-card { padding:8px 10px; gap:7px; flex-direction:column; align-items:flex-start; }
  .kpi-val { font-size:22px; }
  .kpi-icon { width:28px; height:28px; font-size:12px; }
  .kpi-icon svg { width:15px; height:15px; }
  .kpi-label { font-size:10px; }
  .kpi-trend { font-size:9px; }

  #main { padding:8px; }
  .page-title { font-size:16px; }
  .btn-lg { padding:8px 14px; font-size:12px; }
  .modal-header { padding:14px 16px 10px; }
  .modal-body   { padding:12px 16px; }
  .modal-footer { padding:10px 16px; }
  .modal-header h3 { font-size:16px; }
  .form-label { font-size:12px; }
  .form-control { font-size:13px; padding:8px 10px; }

  /* Topbar ultra compacto */
  #topbar { padding:0 8px 0 0; gap:0; }
  #topbar .brand { padding:0 6px; gap:6px; }
  #topbar .brand .brand-name { font-size:12px; }
  #topbar .brand .logo-wrap { width:26px; height:26px; font-size:12px; border-radius:8px; }
  .topbar-icon { width:28px; height:28px; font-size:12px; }
  .hamburger-btn { width:32px; height:32px; margin-left:2px; padding:6px; }
  .hamburger-btn span { width:18px; }

  /* Login extra small */
  .login-card { padding:24px 16px 20px !important; border-radius:12px !important; }
  .login-title { font-size:18px !important; }
  .login-sub { font-size:12px !important; margin-bottom:20px !important; }
  .login-logo { width:40px !important; height:40px !important; font-size:18px !important; }

  /* Stat pills wrap */
  .stat-row, [style*="stat-pill"] { flex-wrap:wrap; }
  .stat-pill { font-size:10px; padding:4px 8px; }
}

/* ─── GRUPO BUTTON RESPONSIVE ─── */
.grupo-btn-responsive { max-width:200px; }
@media(max-width:520px) {
  .grupo-btn-responsive { max-width:120px !important; font-size:10px !important; padding:3px 7px 3px 5px !important; }
}
@media(max-width:380px) {
  .grupo-btn-responsive { max-width:90px !important; font-size:9px !important; padding:3px 5px !important; }
  .grupo-btn-responsive svg { display:none !important; }
}

/* ─── DARK MODE OVERRIDES ─── */
[data-theme="dark"] #topbar {
  background:rgba(15,23,42,.95);
  border-bottom-color:var(--border);
}
[data-theme="dark"] #topbar .brand {
  background:var(--sidebar-bg);
}
[data-theme="dark"] .login-card {
  background:rgba(30,41,59,.95) !important;
  border-color:var(--border) !important;
}
[data-theme="dark"] .login-card .form-control {
  background:var(--bg4) !important;
  border-color:var(--border) !important;
  color:var(--txt) !important;
}
[data-theme="dark"] .login-title { color:var(--txt) !important; }
[data-theme="dark"] .login-sub { color:var(--txt3) !important; }