/* RapidCuentas — tema oscuro con acento amarillo neón ("velocidad del rayo") */

:root {
  color-scheme: dark;
  --bolt: #ffd60a;        /* amarillo neón principal */
  --bolt-soft: #ffe14d;
  --bolt-deep: #e6be00;
}

body { background: #0a0a0b; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #101012; }
::-webkit-scrollbar-thumb { background: #2c2c30; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #3d3d42; }

/* Tarjetas con borde sutil y brillo amarillo al pasar el cursor */
.card {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, #17171a, #101012);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card-hover:hover {
  border-color: rgba(255, 214, 10, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 16px 44px -14px rgba(255, 214, 10, 0.28);
}

/* Inputs */
.field {
  width: 100%;
  border-radius: .7rem;
  border: 1px solid rgba(255,255,255,.09);
  background: #101012;
  padding: .6rem .8rem;
  font-size: .9rem;
  color: #e7e7ea;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field:focus {
  border-color: var(--bolt);
  box-shadow: 0 0 0 3px rgba(255, 214, 10, .18);
}
.field::placeholder { color: #6b7280; }
label.lbl { display:block; margin-bottom:.35rem; font-size:.78rem; font-weight:600; color:#9ca3af; }
.field-err { margin-top:.3rem; font-size:.75rem; color:#fb7185; }

/* Botones */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  border-radius:.7rem; padding:.62rem 1.05rem; font-size:.875rem; font-weight:700;
  cursor:pointer; transition:all .15s ease; border:1px solid transparent; white-space:nowrap;
  letter-spacing:.01em;
}
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary {
  background: linear-gradient(180deg, var(--bolt-soft), var(--bolt));
  color: #1a1500;
  box-shadow: 0 6px 20px -8px rgba(255, 214, 10, .5);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.btn-ghost { background:transparent; border-color:rgba(255,255,255,.14); color:#d4d4d8; }
.btn-ghost:hover:not(:disabled) { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.24); }
.btn-outline { background:transparent; border-color:var(--bolt); color:var(--bolt); }
.btn-outline:hover:not(:disabled) { background:rgba(255,214,10,.1); }
.btn-danger { background:#e11d48; color:#fff; }
.btn-danger:hover:not(:disabled) { background:#be123c; }
.btn-wa { background:#25D366; color:#04310f; }
.btn-wa:hover { filter:brightness(1.08); }
.btn-sm { padding:.4rem .72rem; font-size:.78rem; }
.btn-lg { padding:.85rem 1.6rem; font-size:1rem; }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:.3rem; border-radius:999px; padding:.16rem .62rem; font-size:.7rem; font-weight:700; }
.badge-green { background:rgba(34,197,94,.16); color:#4ade80; }
.badge-amber { background:rgba(245,158,11,.16); color:#fbbf24; }
.badge-red   { background:rgba(239,68,68,.16); color:#f87171; }
.badge-slate { background:rgba(148,163,184,.16); color:#d4d4d8; }
.badge-brand { background:rgba(255,214,10,.16); color:var(--bolt-soft); }

/* Tablas */
.tbl { width:100%; border-collapse:collapse; font-size:.83rem; }
.tbl th { text-align:left; padding:.6rem .75rem; color:#9ca3af; font-weight:600; border-bottom:1px solid rgba(255,255,255,.08); }
.tbl td { padding:.6rem .75rem; border-bottom:1px solid rgba(255,255,255,.05); }
.tbl tr:hover td { background:rgba(255,255,255,.025); }

/* Navegación */
.nav-link { padding:.4rem .55rem; border-radius:.6rem; color:#a1a1aa; font-weight:600; font-size:.8rem; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; }
.nav-link:hover { color:#fff; }
.nav-link.active { color:var(--bolt); box-shadow: inset 0 -2px 0 var(--bolt); border-radius:0; }

/* Utilidades de acento */
.text-bolt { color: var(--bolt); }
.bolt-glow { filter: drop-shadow(0 0 10px rgba(255, 214, 10, .55)); }
.hero-grid-bg {
  background-image:
    radial-gradient(60% 60% at 85% 25%, rgba(255,214,10,.14), transparent 70%),
    linear-gradient(180deg, #0d0d0e, #0a0a0b);
}

.fade-in { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none; } }

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: '+'; float: right; color: var(--bolt); font-weight: 700; }
details[open] > summary::after { content: '–'; }