* { -webkit-font-smoothing: antialiased; }
  body {
  background-color: #000000;
  color: #ffffff;
  overflow-x: hidden;
  overflow-y: scroll;
}
  
  .grid-bg {
    background-image:
      linear-gradient(rgba(39,39,42,0.4) 1px, transparent 1px),
      linear-gradient(90deg, rgba(39,39,42,0.4) 1px, transparent 1px);
    background-size: 48px 48px;
    background-attachment: fixed;
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, #000 30%, transparent 100%);
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
  }

  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: #000000; }
  ::-webkit-scrollbar-thumb { background: #27272a; border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: #3f3f46; }

  .num-tick { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .led { box-shadow: 0 0 6px 1px rgba(16,185,129,0.8); }

  .nav-link { position: relative; transition: color .25s ease, background-color .25s ease; }
  .nav-link .bar { position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: #10b981; opacity: 0; transform: scaleY(.4); transition: opacity .25s ease, transform .25s ease; border-radius: 0 4px 4px 0; }
  .nav-link.active { color: #ffffff; background: rgba(255,255,255,0.03); }
  .nav-link.active .bar { opacity: 1; transform: scaleY(1); }
  .nav-link:not(.active):hover { color: #f4f4f5; background: rgba(255,255,255,0.02); }

  .card { background: #0b0b0b; border: 1px solid #27272a; transition: all 0.5s ease; }
  .card:hover { border-color: rgba(16,185,129,0.4); }

  /* Vistas principales */
  .view { display: none; animation: fadeUp .4s ease both; }
  .view.active { display: block; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

  /* Sub-nav de MONEY */
  .money-tab { border-bottom: 2px solid transparent; transition: all 0.3s; padding-bottom: 0.5rem; }
  .money-tab.active { border-bottom-color: #10b981; color: #ffffff; }
  
  .money-view { display: none; animation: fadeUp .3s ease both; }
  .money-view.active { display: block; }

  /* Controles */
  input[type="range"] { -webkit-appearance:none; appearance:none; height:4px; background:#27272a; border-radius:2px; outline:none; }
  input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:#10b981; cursor:pointer; border:3px solid #000; box-shadow:0 0 0 1px #10b981; transition: transform 0.1s; }
  input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.2); }
  input[type="range"]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:#10b981; cursor:pointer; border:3px solid #000; box-shadow:0 0 0 1px #10b981; transition: transform 0.1s; }
  
  input[type="text"], input[type="email"], input[type="password"], input[type="number"] { background: #000; border: 1px solid #27272a; color: #fff; padding: 0.75rem 1rem; border-radius: 0.375rem; font-family: 'Manrope', sans-serif; font-size: 0.875rem; width: 100%; outline: none; transition: border-color 0.3s; }
  input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus { border-color: #10b981; }
  
  .custom-checkbox input:checked + div { background-color: #10b981; border-color: #10b981; }
  .custom-checkbox input:checked + div svg { opacity: 1; transform: scale(1); }

  .profile-btn { transition: all .25s ease; }
  .profile-btn.active { background: rgba(16,185,129,0.1); border-color: #10b981; color: #34d399; }

  /* Alertas Expandibles */
  .alert-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out, margin-top 0.5s ease-in-out; opacity: 0; }
  .alert-card.open .alert-content { max-height: 500px; margin-top: 1rem; opacity: 1; }
  .alert-card.open .alert-chevron { transform: rotate(180deg); }

  input[type="date"], input[type="month"] { background:#000; border:1px solid #27272a; color:#fff; padding:.75rem 1rem; border-radius:.375rem; font-family:'Manrope',sans-serif; font-size:.875rem; width:100%; outline:none; color-scheme:dark; }  
  input[type="date"]:focus, input[type="month"]:focus { border-color:#10b981; }
  select { background:#000; border:1px solid #27272a; color:#fff; padding:.75rem 1rem; border-radius:.375rem; font-size:.875rem; width:100%; outline:none; color-scheme:dark; }
  select:focus { border-color:#10b981; }
  .month-btn { transition:all .2s; }
  .month-btn.sel { border-color:#10b981; background:rgba(16,185,129,.1); color:#34d399; }
  .month-btn.pre { opacity:.4; }
  .del-btn { color:#52525b; transition:color .2s; } .del-btn:hover { color:#f87171; }