:root {
    --bg:#f0f4f8; --surface:#ffffff; --surface2:#f8f9fa; --border:#dee2e6;
    --accent:#1a56a0; --accent2:#0f7a5a; --accent3:#a32d2d; --accent4:#378add;
    --text:#1a1d23; --text-muted:#6c757d; --text-dim:#adb5bd;
    --personal:#1a56a0; --negocio:#378add;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  body { background:var(--bg); color:var(--text); font-family:'DM Mono',monospace; min-height:100vh; }

  /* HEADER */
  header {
    background:var(--surface); border-bottom:1px solid var(--border);
    padding:14px 28px; display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:200; gap:12px; flex-wrap:wrap;
  }
  .header-left h1 { font-family:'DM Serif Display',serif; font-size:1.35rem; color:var(--accent); }
  .header-left span { font-size:0.63rem; color:var(--text-dim); letter-spacing:0.15em; text-transform:uppercase; }
  .header-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .month-nav { display:flex; align-items:center; gap:8px; }
  .month-nav button {
    background:none; border:1px solid var(--border); color:var(--text-muted);
    width:26px; height:26px; border-radius:4px; cursor:pointer; font-size:0.85rem; transition:all 0.2s;
  }
  .month-nav button:hover { border-color:var(--accent); color:var(--accent); }
  .mes-txt {
    font-family:'Syne',sans-serif; font-size:0.78rem; font-weight:700;
    color:var(--text); letter-spacing:0.08em; min-width:120px; text-align:center; text-transform:uppercase;
  }
  .toolbar-btn {
    background:var(--surface2); border:1px solid var(--border); color:var(--text-muted);
    font-family:'DM Mono',monospace; font-size:0.68rem; padding:6px 10px;
    border-radius:6px; cursor:pointer; transition:all 0.2s; white-space:nowrap;
  }
  .toolbar-btn:hover { border-color:var(--accent); color:var(--accent); }
  .toolbar-btn.sync-btn { border-color:rgba(127,191,142,0.3); color:var(--accent2); }
  .conn-dot { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:5px; background:var(--text-dim); }
  .conn-dot.online  { background:var(--accent2); box-shadow:0 0 6px var(--accent2); }
  .conn-dot.offline { background:var(--accent3); }
  .conn-dot.loading { background:var(--accent); animation:pulse 1s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

  /* BOLSILLO SWITCHER */
  .bolsillo-switcher {
    display:grid; grid-template-columns:1fr 1fr;
    background:var(--surface); border-bottom:1px solid var(--border);
    position:sticky; top:57px; z-index:190;
  }
  .bolsillo-btn {
    padding:14px 20px; border:none; background:none; cursor:pointer;
    display:flex; align-items:center; gap:12px; transition:background 0.25s;
    border-bottom:3px solid transparent; text-align:left;
  }
  .bolsillo-btn:hover { background:rgba(255,255,255,0.03); }
  .bolsillo-btn.active-p { border-bottom-color:var(--accent) !important; background:rgba(26,86,160,0.06) !important; }
  .bolsillo-btn.active-n { border-bottom-color:var(--accent4) !important; background:rgba(55,138,221,0.06) !important; }
  .bolsillo-btn:first-child { border-right:1px solid var(--border); }
  .bolsillo-icon { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
  .icon-personal { background:rgba(200,169,110,0.12); border:1px solid rgba(200,169,110,0.2); }
  .icon-negocio  { background:rgba(126,170,191,0.12); border:1px solid rgba(126,170,191,0.2); }
  .bolsillo-info { flex:1; }
  .bolsillo-name { font-family:'Syne',sans-serif; font-size:0.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.1em; display:block; margin-bottom:1px; }
  .bolsillo-btn.active-p .bolsillo-name { color:var(--personal); }
  .bolsillo-btn.active-n .bolsillo-name { color:var(--negocio); }
  .bolsillo-desc { font-size:0.6rem; color:var(--text-dim); display:block; }
  .bolsillo-balance { font-family:'DM Serif Display',serif; font-size:1rem; color:var(--text-muted); text-align:right; }
  .bolsillo-btn.active-p .bolsillo-balance { color:var(--personal); }
  .bolsillo-btn.active-n .bolsillo-balance { color:var(--negocio); }

  /* APP */
  .app { max-width:1200px; margin:0 auto; padding:20px 20px 80px; }

  /* LOADING */
  .loading-overlay { display:none; position:fixed; inset:0; background:rgba(15,14,12,0.7); z-index:999; align-items:center; justify-content:center; flex-direction:column; gap:14px; }
  .loading-overlay.show { display:flex; }
  .spinner { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .loading-txt { font-size:0.75rem; color:var(--text-muted); letter-spacing:0.1em; }

  /* TOAST */
  .toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.8); z-index:2000; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 24px; font-size:0.85rem; font-weight:500; color:var(--text); opacity:0; transition:all 0.25s; pointer-events:none; box-shadow:0 4px 20px rgba(0,0,0,0.15); text-align:center; min-width:200px; }
  .toast.show { transform:translate(-50%,-50%) scale(1); opacity:1; }
  .toast.ok  { border-color:rgba(127,191,142,0.4); color:var(--accent2); }
  .toast.err { border-color:rgba(224,123,110,0.4); color:var(--accent3); }

  /* SUMMARY */
  .summary { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
  .card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px; position:relative; overflow:hidden; }
  .card::before { content:''; position:absolute; top:0;left:0;right:0; height:2px; }
  .card.ingresos::before { background:var(--accent2); }
  .card.gastos::before   { background:var(--accent3); }
  .card.ahorros::before  { background:var(--accent4); }
  .card.balance::before  { background:var(--accent); }
  .card-label { font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-muted); margin-bottom:7px; }
  .card-amount { font-family:'DM Serif Display',serif; font-size:1.45rem; line-height:1; margin-bottom:4px; }
  .card.ingresos .card-amount { color:var(--accent2); }
  .card.gastos   .card-amount { color:var(--accent3); }
  .card.ahorros  .card-amount { color:var(--accent4); }
  .card.balance  .card-amount { color:var(--accent); }
  .card-sub { font-size:0.6rem; color:var(--text-dim); }

  /* SAVINGS GOAL */
  .savings-goal { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 18px; margin-bottom:20px; display:flex; align-items:center; gap:18px; }
  .savings-goal-label { font-size:0.6rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.15em; min-width:80px; }
  .savings-bar-wrap { flex:1; }
  .savings-bar-bg { background:var(--border); border-radius:99px; height:6px; overflow:hidden; }
  .savings-bar-fill { border-radius:99px; height:100%; transition:width 0.5s; }
  .savings-pct { font-size:0.66rem; margin-top:4px; }
  .savings-goal-input-wrap { display:flex; align-items:center; gap:8px; }
  .savings-goal-input-wrap label { font-size:0.6rem; color:var(--text-dim); }
  .savings-goal-input-wrap input { background:var(--surface2); border:1px solid var(--border); color:var(--text); font-family:'DM Mono',monospace; font-size:0.76rem; border-radius:6px; padding:5px 10px; width:110px; }

  /* TABS */
  .tabs { display:flex; gap:4px; margin-bottom:18px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:4px; width:fit-content; }
  .tab { background:none; border:none; color:var(--text-muted); font-family:'DM Mono',monospace; font-size:0.7rem; padding:7px 14px; border-radius:7px; cursor:pointer; letter-spacing:0.05em; transition:all 0.2s; }
  .tab.active { background:var(--surface2); color:var(--text); border:1px solid var(--border); }
  .tab:hover:not(.active) { color:var(--text); }

  .panel { display:none; }
  .panel.active { display:block; }
  .bolsillo-content { display:none; }
  .bolsillo-content.active { display:block; }
  .bolsillo-content.hidden-panel { display:none !important; }

  .section-grid { display:grid; grid-template-columns:310px 1fr; gap:18px; align-items:start; }

  /* FORM */
  .form-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:18px; }
  .form-card h3 { font-family:'Syne',sans-serif; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-muted); margin-bottom:14px; }
  .field { margin-bottom:11px; }
  .field label { font-size:0.6rem; letter-spacing:0.12em; color:var(--text-muted); text-transform:uppercase; display:block; margin-bottom:4px; }
  .field input, .field select, .field textarea { width:100%; background:var(--surface2); border:1px solid var(--border); color:var(--text); font-family:'DM Mono',monospace; font-size:0.78rem; border-radius:7px; padding:7px 11px; outline:none; transition:border-color 0.2s; }
  .field input:focus, .field select:focus, .field textarea:focus { border-color:var(--accent); }
  .field select option { background:var(--surface2); }
  .field-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .btn-add { width:100%; border:none; font-family:'Syne',sans-serif; font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:9px; border-radius:7px; cursor:pointer; transition:opacity 0.2s; margin-top:4px; color:#0f0e0c; }
  .btn-add:hover { opacity:0.85; }
  .btn-verde  { background:var(--accent2); }
  .btn-rojo   { background:var(--accent3); }
  .btn-azul   { background:var(--accent4); }
  .btn-dorado { background:var(--accent); }

  /* TABLE */
  .table-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
  .table-card table { min-width:500px; }
  .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table-header { display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-bottom:1px solid var(--border); }
  .table-header h3 { font-family:'Syne',sans-serif; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-muted); }
  .total-badge { font-family:'DM Serif Display',serif; font-size:0.95rem; }
  table { width:100%; border-collapse:collapse; }
  th { font-size:0.58rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-dim); padding:8px 16px; text-align:left; border-bottom:1px solid var(--border); font-weight:400; }
  td { font-size:0.74rem; color:var(--text); padding:10px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
  tr:last-child td { border-bottom:none; }
  tr:hover td { background:rgba(255,255,255,0.02); }

  .badge { font-size:0.58rem; padding:2px 7px; border-radius:99px; letter-spacing:0.08em; white-space:nowrap; }
  .badge-nomina   { background:rgba(200,169,110,0.12); color:var(--accent);     border:1px solid rgba(200,169,110,0.25); }
  .badge-renta    { background:rgba(127,191,142,0.12); color:var(--accent2);    border:1px solid rgba(127,191,142,0.25); }
  .badge-ml       { background:rgba(126,170,191,0.12); color:var(--accent4);    border:1px solid rgba(126,170,191,0.25); }
  .badge-asesoria { background:rgba(224,123,110,0.12); color:var(--accent3);    border:1px solid rgba(224,123,110,0.25); }
  .badge-otro     { background:rgba(90,84,72,0.3);     color:var(--text-muted); border:1px solid var(--border); }
  .badge-gasto    { background:rgba(224,123,110,0.12); color:var(--accent3);    border:1px solid rgba(224,123,110,0.25); }
  .badge-ahorro   { background:rgba(126,170,191,0.12); color:var(--accent4);    border:1px solid rgba(126,170,191,0.25); }
  .badge-personal { background:rgba(200,169,110,0.12); color:var(--personal);   border:1px solid rgba(200,169,110,0.25); }
  .badge-negocio  { background:rgba(126,170,191,0.12); color:var(--negocio);    border:1px solid rgba(126,170,191,0.25); }

  .amount-positive { color:var(--accent2); }
  .amount-negative { color:var(--accent3); }
  .amount-saving   { color:var(--accent4); }

  .btn-del { background:none; border:1px solid var(--border); color:var(--text-dim); width:22px; height:22px; border-radius:5px; cursor:pointer; font-size:0.65rem; transition:all 0.2s; display:flex; align-items:center; justify-content:center; }
  .btn-del:hover { border-color:var(--accent3); color:var(--accent3); }
  .empty-state { text-align:center; padding:34px 20px; color:var(--text-dim); font-size:0.7rem; letter-spacing:0.08em; }

  /* RESUMEN */
  .resumen-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .breakdown-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:18px; }
  .breakdown-card h3 { font-family:'Syne',sans-serif; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-muted); margin-bottom:14px; }
  .breakdown-row { display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--border); }
  .breakdown-row:last-child { border-bottom:none; }
  .breakdown-label { font-size:0.71rem; color:var(--text); display:flex; align-items:center; gap:8px; }
  .breakdown-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
  .breakdown-amount { font-family:'DM Serif Display',serif; font-size:0.9rem; text-align:right; }
  .breakdown-pct { font-size:0.6rem; color:var(--text-dim); text-align:right; margin-top:2px; }
  .bar-chart { margin-top:6px; }
  .bar-row { margin-bottom:11px; }
  .bar-row-label { display:flex; justify-content:space-between; font-size:0.66rem; color:var(--text-muted); margin-bottom:4px; }
  .bar-bg { background:var(--border); border-radius:99px; height:6px; overflow:hidden; }
  .bar-fill { height:100%; border-radius:99px; transition:width 0.5s; }

  /* ── COMPROMISOS ── */
  .comp-header {
    display:grid; grid-template-columns:1fr 1fr 1fr;
    gap:12px; margin-bottom:20px;
  }
  .comp-stat { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
  .comp-stat-label { font-size:0.6rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; }
  .comp-stat-val { font-family:'DM Serif Display',serif; font-size:1.3rem; }
  .comp-stat-sub { font-size:0.6rem; color:var(--text-dim); margin-top:3px; }

  .comp-grid { display:grid; grid-template-columns:320px 1fr; gap:18px; align-items:start; }

  /* Semáforo */
  .semaforo { display:inline-flex; align-items:center; gap:6px; font-size:0.68rem; padding:3px 8px; border-radius:99px; }
  .sem-rojo   { background:rgba(224,123,110,0.15); color:var(--accent3); border:1px solid rgba(224,123,110,0.3); }
  .sem-amarillo { background:rgba(200,169,110,0.15); color:var(--accent); border:1px solid rgba(200,169,110,0.3); }
  .sem-verde  { background:rgba(127,191,142,0.15); color:var(--accent2); border:1px solid rgba(127,191,142,0.3); }
  .sem-gris   { background:rgba(90,84,72,0.2); color:var(--text-dim); border:1px solid var(--border); }

  /* Checkbox pagado */
  .check-pagado { display:flex; align-items:center; gap:6px; cursor:pointer; }
  .check-pagado input { accent-color:var(--accent2); width:14px; height:14px; cursor:pointer; }
  .check-pagado span { font-size:0.65rem; color:var(--text-muted); }

  /* Apartar por quincena banner */
  .apartar-banner {
    background:linear-gradient(135deg, rgba(200,169,110,0.08), rgba(126,170,191,0.08));
    border:1px solid var(--border); border-radius:10px;
    padding:16px 20px; margin-bottom:20px;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  }
  .apartar-item { text-align:center; }
  .apartar-label { font-size:0.6rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.12em; display:block; margin-bottom:4px; }
  .apartar-val { font-family:'DM Serif Display',serif; font-size:1.2rem; color:var(--accent); }

  /* Modal */
  .modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:500; align-items:center; justify-content:center; }
  .modal-bg.show { display:flex; }
  .modal { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:26px; width:460px; max-width:95vw; }
  .modal h3 { font-family:'Syne',sans-serif; font-size:0.85rem; font-weight:700; color:var(--accent); margin-bottom:14px; }
  .modal p  { font-size:0.72rem; color:var(--text-muted); margin-bottom:14px; line-height:1.6; }
  .modal textarea { width:100%; height:140px; background:var(--surface2); border:1px solid var(--border); color:var(--text); font-family:'DM Mono',monospace; font-size:0.7rem; border-radius:7px; padding:10px; outline:none; resize:vertical; }
  .modal-btns { display:flex; gap:10px; margin-top:14px; justify-content:flex-end; }
  .modal-btns button { font-family:'Syne',sans-serif; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:8px 18px; border-radius:7px; cursor:pointer; border:none; }
  .btn-cancel  { background:var(--surface2); color:var(--text-muted); border:1px solid var(--border) !important; }
  .btn-confirm { background:var(--accent); color:#0f0e0c; }

  .config-bar { background:rgba(224,123,110,0.08); border:1px solid rgba(224,123,110,0.2); border-radius:8px; padding:10px 16px; margin-bottom:20px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .config-bar span { font-size:0.68rem; color:var(--accent3); }
  .config-bar input { flex:1; min-width:200px; background:var(--surface2); border:1px solid rgba(224,123,110,0.3); color:var(--text); font-family:'DM Mono',monospace; font-size:0.7rem; border-radius:6px; padding:6px 10px; outline:none; }
  .config-bar button { background:var(--accent3); color:#fff; border:none; font-family:'Syne',sans-serif; font-size:0.68rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:6px 14px; border-radius:6px; cursor:pointer; }

  @media (max-width:900px) {
    .summary { grid-template-columns:repeat(2,1fr); }
    .section-grid, .comp-grid { grid-template-columns:1fr; }
    .resumen-grid { grid-template-columns:1fr; }
    .comp-header { grid-template-columns:1fr 1fr; }
  }
  @media (max-width:560px) {
    header { padding:10px 14px; }
    .bolsillo-btn { padding:10px 12px; }
    .bolsillo-balance { display:none; }
    .comp-header { grid-template-columns:1fr; }
  }

  /* ── LOGIN ── */
  .login-screen {
    position:fixed; inset:0; background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    z-index:9999; flex-direction:column; gap:0;
  }
  .login-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; padding:40px 36px; width:380px; max-width:90vw;
    text-align:center;
  }
  .login-logo {
    font-family:'DM Serif Display',serif; font-size:2rem;
    color:var(--accent); margin-bottom:8px;
  }
  .login-sub {
    font-size:0.7rem; color:var(--text-dim); letter-spacing:0.15em;
    text-transform:uppercase; margin-bottom:32px;
  }
  .login-desc {
    font-size:0.78rem; color:var(--text-muted); margin-bottom:28px;
    line-height:1.6;
  }
  .btn-google {
    width:100%; background:#fff; border:1px solid #dadce0;
    border-radius:8px; padding:12px 16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:12px;
    font-family:'Syne',sans-serif; font-size:0.82rem; font-weight:600;
    color:#3c4043; transition:box-shadow 0.2s; margin-bottom:12px;
  }
  .btn-google:hover { box-shadow:0 1px 6px rgba(0,0,0,0.2); }
  .btn-google svg { width:20px; height:20px; flex-shrink:0; }
  .login-footer {
    font-size:0.62rem; color:var(--text-dim); margin-top:20px;
    line-height:1.6;
  }
  .user-bar {
    display:flex; align-items:center; gap:8px;
  }
  .user-avatar {
    width:28px; height:28px; border-radius:50%;
    border:1px solid var(--border); object-fit:cover;
  }
  .user-name {
    font-size:0.68rem; color:var(--text-muted); max-width:120px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .btn-logout {
    background:none; border:1px solid var(--border); color:var(--text-dim);
    font-family:'DM Mono',monospace; font-size:0.65rem; padding:4px 8px;
    border-radius:5px; cursor:pointer; transition:all 0.2s;
  }
  .btn-logout:hover { border-color:var(--accent3); color:var(--accent3); }

/* ══ Paneles ocultos ══ */
.hidden-panel { display: none !important; }
.amount-negative { color: var(--accent3); font-weight: 600; }

/* ===== Barra inferior responsive ===== */
@media (max-width:768px){

    #bottom-toolbar{
        justify-content:flex-start !important;
        overflow-x:auto;
        overflow-y:hidden;
        white-space:nowrap;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        padding:4px !important;
        gap:4px !important;
    }

    #bottom-toolbar::-webkit-scrollbar{
        display:none;
    }

    #bottom-toolbar .toolbar-btn{

        flex:0 0 auto;

        min-width:90px !important;
        max-width:90px !important;

        height:36px !important;

        padding:4px 6px !important;

        font-size:.63rem !important;

        display:flex;
        align-items:center;
        justify-content:center;

        overflow:hidden;
        text-overflow:ellipsis;
    }

}