/* ==========================================================================
   00) THEME VARIABLES
   ========================================================================== */

/* Dark (default) */
:root{
  --bg:#0b0f1a; --bg2:#0f172a; --card:#101826; --text:#e5e7eb; --muted:#9aa4b2;
  --accent:#26ffe6; --accent-2:#b26bff; --line:#1f2a3b; --danger:#ef4444;

  /* Header spacing (aire) entre icono de TEMA y "Salir" */
  --theme-sep: 18px;         /* ← súbelo a 20/22/24 para “más aire” */
}

/* Force dark if attribute is set */
html[data-theme="dark"]{
  --bg:#0b0f1a; --bg2:#0f172a; --card:#101826; --text:#e5e7eb; --muted:#9aa4b2;
  --accent:#26ffe6; --accent-2:#b26bff; --line:#1f2a3b; --danger:#ef4444;
}

/* Light */
html[data-theme="light"]{
  --bg:#f6f8fb; --bg2:#ffffff; --card:#ffffff; --text:#0b1220; --muted:#5a6472;
  --accent:#0ea5e9; --accent-2:#6366f1; --line:#e5e7eb; --danger:#b91c1c;

  /* Inputs en claro */
  --input-bg:#ffffff; --input-text:#0b1220; --input-border:#cbd5e1; --placeholder:#94a3b8;
}

/* ==========================================================================
   01) RESET & BASE
   ========================================================================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, Arial; color:var(--text); background:var(--bg);
  background-image:
    radial-gradient(60% 60% at 20% 10%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 60%),
    radial-gradient(40% 40% at 80% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%);
}
.container{padding:22px;max-width:1100px;margin:auto}

/* ==========================================================================
   02) HEADER (Topbar 3 zonas: izquierda / centro / derecha) + NAV chips
   ========================================================================== */

/* Estructura en desktop/tablet (flex) */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px; background:rgba(15,23,42,.6); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}

/* Título centrado (cuando usas .tb-left / .tb-center / .tb-right) */
.tb-left, .tb-right{ display:flex; align-items:center; gap:8px; }
.tb-center{ display:flex; align-items:center; justify-content:center; min-width:0; }
.tb-center .brand{
  font-weight:800; letter-spacing:.5px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Botón hamburguesa */
.menu-btn{
  border:1px solid var(--line); background:transparent; color:var(--text);
  border-radius:10px; padding:6px 10px; cursor:pointer;
}
.menu-btn:hover{ background:rgba(255,255,255,.06) }

/* Toggle de tema (global) */
.theme-toggle{
  margin-left:10px;                 /* default (se anula abajo en header) */
  padding:6px 10px; border-radius:10px;
  border:1px solid var(--line); background:transparent; color:var(--text);
  cursor:pointer; transition:background .2s, transform .06s;
}
.theme-toggle:hover{ background:rgba(0,0,0,.06) }
.theme-toggle:active{ transform:translateY(1px) }

/* Aire entre TEMA y "Salir" solo en el header derecho */
.tb-right{ display:flex; align-items:center; }
.tb-right .theme-toggle{
  margin-left:0;                /* anula el default global */
  margin-right:var(--theme-sep);/* ← controla el aire con la variable */
}

/* Enlaces tipo chip */
.main-nav{ display:flex; align-items:center; gap:8px; }
.main-nav .chip{
  display:inline-block; padding:8px 12px; border-radius:999px;
  border:1px solid var(--line); color:var(--text); text-decoration:none;
  background:transparent; font-size:.95rem;
  transition:background .2s, transform .06s, border-color .2s;
}
.main-nav .chip:hover{
  background:rgba(255,255,255,.06);
  transform:translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

/* Botón Salir “despriorizado” */
.chip.danger{ border-color:#5f1a1a; color:#ff9f9f; }
.chip.danger:hover{ background:#3b0d0d; }

/* Legacy (por si quedan vistas antiguas) */
.brand{font-weight:800;letter-spacing:.5px;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar nav a{color:var(--text);text-decoration:none;margin-left:14px;padding:6px 10px;border-radius:8px;transition:all .2s}
.topbar nav a:hover{background:rgba(255,255,255,.06)}
.topbar nav .logout{color:#ff9f9f}
.brand-wrap,.nav-actions{ display:none !important; }   /* ya no se usan */
.demo-chip{ display:none !important; }                 /* ocultar DEMO chip */

/* ==========================================================================
   03) COMPONENTS: Alerts, Toast, Buttons
   ========================================================================== */
.alert{padding:10px 12px;border-radius:8px;margin-bottom:12px}
.alert.error{background:#3b0d0d;color:#ffd2d2;border:1px solid #5f1a1a}

.toast{
  position:relative; margin-bottom:12px; background:#0f1f2f;
  border:1px solid #213044; border-radius:10px; padding:12px 40px 12px 12px;
}
.toast-close{
  position:absolute; right:8px; top:6px; border:1px solid var(--line);
  background:transparent; color:var(--text); border-radius:8px;
  width:28px; height:28px; cursor:pointer;
}
.toast-close:hover{ background:rgba(255,255,255,.06) }

.btn-secondary{
  display:inline-block;padding:10px 14px;border-radius:10px;
  border:1px solid var(--line);text-decoration:none;color:var(--text)
}
.btn-secondary:hover{background:rgba(255,255,255,.06)}

/* ==========================================================================
   04) LOGIN CARD & FORM
   ========================================================================== */
.login-hero{min-height:calc(100vh - 60px);display:grid;place-items:center;position:relative}
.login-hero .glow{position:absolute;width:60vmax;height:60vmax;background:radial-gradient(closest-side,rgba(178,107,255,.28),transparent 70%);filter:blur(40px);z-index:0;transform:translate(20%, -10%)}
.card{position:relative;z-index:1;border-radius:16px;padding:22px}
.glass{background:linear-gradient(180deg,rgba(16,24,38,.75),rgba(16,24,38,.6));backdrop-filter: blur(14px); border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 30px rgba(0,0,0,.35)}
.login-card{max-width:440px;width:100%}
.login-head{margin-bottom:12px}
.login-head h1{margin:0 0 6px 0; font-size:1.8rem}
.login-head .sub{margin:0;color:var(--muted)}
.badge{display:inline-block;margin-top:8px;font-size:.78rem;border:1px dashed var(--line);padding:2px 8px;border-radius:8px;color:var(--muted)}

.form label{display:block;margin:12px 0 6px;color:var(--muted);font-size:.95rem}
.form input{
  width:100%;padding:12px;border-radius:10px;border:1px solid #233;
  background:#0b1220;color:var(--text);outline:none;transition:border .2s, box-shadow .2s
}
.form input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(38,255,230,.1)}

.btn-primary{
  width:100%;margin-top:12px;padding:12px 16px;border:0;border-radius:10px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#0a0a0a;font-weight:800;cursor:pointer;letter-spacing:.3px;transition:transform .06s
}
.btn-primary:hover{transform:translateY(-1px)}
.hint{margin-top:8px;color:var(--muted);font-size:.86rem}

/* “Aire” en el login */
.login-card .form input{ margin-bottom:14px; }
.login-card .form .btn-primary{ margin-top:18px; }

/* Links de auth bajo el form */
.auth-links{ display:flex; justify-content:flex-end; gap:14px; margin-top:14px; }
.auth-link{
  display:inline-flex; align-items:center; padding:8px 10px; border-radius:8px;
  border:1px solid transparent; color:var(--muted); font-size:.95rem; text-decoration:none;
  transition: color .2s, background .2s, border-color .2s, transform .06s;
}
.auth-link:hover{ color:var(--text); background:rgba(255,255,255,.06); border-color:var(--line); transform:translateY(-1px); }

/* ==========================================================================
   05) DASHBOARD / TABLES / ICON BUTTONS
   ========================================================================== */
.hero-small{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}
.hero-small .muted{color:var(--muted)}
.role-tag{border:1px solid var(--line);padding:6px 10px;border-radius:10px;opacity:.8}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{padding:16px;border-radius:14px}
.kpi span{color:var(--muted);display:block}
.kpi strong{font-size:1.5rem}

.table-wrap{border-radius:14px;overflow:hidden}
.table{width:100%;border-collapse:collapse;background:transparent}
.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:left}

.pill{padding:4px 10px;border-radius:999px;border:1px solid var(--line);font-size:.85rem}
.pill-income{ border-color:#1a5f3b; background:color-mix(in srgb, #34d399 15%, transparent); }
.pill-expense{ border-color:#5f1a1a; background:color-mix(in srgb, #ef4444 12%, transparent); }

.top-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.btn-link{
  display:inline-flex;align-items:center;gap:6px; text-decoration:none;color:var(--text);
  border:1px solid var(--line);padding:8px 12px;border-radius:10px;
}
.btn-link:hover{background:rgba(255,255,255,.06)}

.table .actions{display:flex;gap:8px}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:1px solid var(--line);
  border-radius:8px;text-decoration:none;color:var(--text)
}
.icon-btn:hover{background:rgba(255,255,255,.06)}
.icon-btn.delete{border-color:#5f1a1a}
.icon-btn.delete:hover{background:#3b0d0d}

/* ==========================================================================
   06) MEDIA & PREVIEWS
   ========================================================================== */
.thumb{ width:36px; height:36px; object-fit:cover; border-radius:6px; border:1px solid var(--line); }
.thumb-lg{ max-width:220px; max-height:140px; border-radius:10px; border:1px solid var(--line); object-fit:cover; }
.image-preview{ margin-top:8px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.inline{ display:inline-flex; align-items:center; gap:8px; margin-top:8px; }

/* ==========================================================================
   07) MONEY COLORS
   ========================================================================== */
.money{ font-weight:700; letter-spacing:.2px; }
.money-pos{ color:#34d399; }
.money-neg{ color:#f87171; }

/* ==========================================================================
   08) LIGHT THEME OVERRIDES
   ========================================================================== */
html[data-theme="light"] .glass{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.9));
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(2, 8, 23, .06);
}
html[data-theme="light"] .topbar{
  background: rgba(255,255,255,.8);
  border-bottom: 1px solid var(--line);
}
html[data-theme="light"] .table th,
html[data-theme="light"] .table td{ border-bottom:1px solid var(--line); }
.table tr:hover{ background: color-mix(in srgb, var(--accent) 8%, transparent); }

.form input,
.form select,
.form textarea{
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border: 1px solid var(--input-border) !important;
}
.form input::placeholder,
.form textarea::placeholder{
  color: var(--placeholder) !important; opacity: 1;
}
html[data-theme="light"] .form label{ color:#334155; }
html[data-theme="light"] .hint,
html[data-theme="light"] .login-head .sub{ color:#64748b; }

/* ==========================================================================
   09) SELECTS (unificado)
   ========================================================================== */
.form select{
  width:100%; padding:12px; border-radius:10px;
  border:1px solid var(--input-border);
  background:var(--input-bg); color:var(--input-text); outline:none;
  transition:border .2s, box-shadow .2s, background .2s, color .2s;
}
.form select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.form select option{ background: var(--card); color: var(--text); }

/* ==========================================================================
   10) RESPONSIVE
   ========================================================================== */

/* Grids */
@media (max-width:900px){ .grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .grid-4{ grid-template-columns:1fr; } }
@media (max-width:800px){ .grid-2{ grid-template-columns:1fr; } }

/* Nav colapsable en móvil */
@media (max-width:820px){
  .topbar{ flex-wrap:wrap; align-items:center; }
  .menu-btn{ display:inline-block; }
  .main-nav{
    order:3; width:100%; display:none; padding-top:8px; flex-wrap:wrap; gap:8px;
  }
  .main-nav.open{ display:flex; }

  /* Un poco más de aire en móvil entre tema y salir */
  :root{ --theme-sep: 20px; }  /* ← ajusta aquí si quieres aún más */
}

/* ==========================================================================
   11) FOOTER
   ========================================================================== */
.footer{text-align:center;padding:24px;color:var(--muted)}