/* ================================
   FINANZAS PRO UI - NEON EDITION
================================ */

/* Fondo general */
#finanzasContenido{
  padding:25px;
  animation:fadeIn .4s ease;
}

/* ================= TABS ================= */

.fin-tabs{
  display:flex;
  gap:15px;
  margin-bottom:25px;
}

.fin-tabs button{
  flex:1;
  padding:12px;
  font-weight:700;
  border:none;
  border-radius:12px;
  cursor:pointer;
  background:linear-gradient(145deg,#111,#1c1c1c);
  color:#00ffcc;
  box-shadow:
    0 0 6px #00ffcc55,
    0 0 12px #00ffcc33,
    inset 0 0 6px #00ffcc22;
  transition:.2s;
}

.fin-tabs button:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 10px #00ffcc,
    0 0 20px #00ffcc,
    0 6px 14px rgba(0,0,0,.8);
}

.fin-tabs button:active{
  transform:translateY(2px);
}

/* ================= CARDS ================= */

.fin-card{
  background:linear-gradient(160deg,#0d0d0d,#151515);
  padding:25px;
  border-radius:18px;
  margin-bottom:25px;
  border:1px solid #00ffcc33;
  box-shadow:
    0 0 10px #00ffcc22,
    0 0 25px #00ffcc11,
    0 10px 25px rgba(0,0,0,.8);
}

/* ================= TITULOS ================= */

.fin-card h3{
  margin-bottom:20px;
  font-size:20px;
  text-align:center;
  color:#00ffcc;
  letter-spacing:2px;
  text-shadow:
    0 0 6px #00ffcc,
    0 0 12px #00ffcc;
}

/* ================= INPUTS ================= */

.fin-card input{
  padding:8px 12px;
  border-radius:8px;
  border:1px solid #00ffcc55;
  background:#0f0f0f;
  color:#00ffcc;
  margin:5px 10px 15px 0;
  transition:.2s;
}

.fin-card input:focus{
  outline:none;
  border:1px solid #00ffcc;
  box-shadow:
    0 0 6px #00ffcc,
    0 0 12px #00ffcc55;
}

/* ================= BOTONES ================= */

.fin-card button{
  padding:8px 14px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
  background:linear-gradient(145deg,#00ffcc,#00c2a8);
  color:#000;
  box-shadow:
    0 0 8px #00ffcc,
    0 4px 10px rgba(0,0,0,.7);
  transition:.2s;
}

.fin-card button:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 15px #00ffcc,
    0 0 25px #00ffcc,
    0 6px 14px rgba(0,0,0,.8);
}

.fin-card button:active{
  transform:translateY(2px);
}

/* ================= TABLA ================= */

.fin-table{
  width:100%;
  border-collapse:collapse;
  margin-top:20px;
  background:#0f0f0f;
  border-radius:12px;
  overflow:hidden;
  box-shadow:
    0 0 10px #00ffcc22;
}

.fin-table th{
  background:#111;
  padding:12px;
  color:#00ffcc;
  text-transform:uppercase;
  font-size:13px;
  border-bottom:2px solid #00ffcc44;
  text-shadow:0 0 6px #00ffcc;
}

.fin-table td{
  padding:12px;
  text-align:center;
  border-bottom:1px solid #00ffcc22;
  color:#fff;
}

.fin-table tr:hover{
  background:#151515;
  box-shadow:inset 0 0 10px #00ffcc22;
}

/* ================= SALDOS NEON ================= */

.fin-table td.positivo{
  color:#00ff88 !important;
  font-weight:900;
  text-shadow:
    0 0 6px #00ff88,
    0 0 12px #00ff88,
    0 0 24px rgba(0,255,136,.9);
}

.fin-table td.negativo{
  color:#ff2e2e !important;
  font-weight:900;
  text-shadow:
    0 0 6px #ff2e2e,
    0 0 12px #ff2e2e,
    0 0 24px rgba(255,46,46,.9);
}

/* =========================
   BALANCE RESUMEN NEON
========================= */

.fin-card p.positivo{
  color:#00ff88 !important;
  font-weight:900;
  font-size:18px;
  text-shadow:
    0 0 6px #00ff88,
    0 0 12px #00ff88,
    0 0 24px rgba(0,255,136,.9);
}

.fin-card p.negativo{
  color:#ff2e2e !important;
  font-weight:900;
  font-size:18px;
  text-shadow:
    0 0 6px #ff2e2e,
    0 0 12px #ff2e2e,
    0 0 24px rgba(255,46,46,.9);
}
/* ================= LISTA ================= */

.fin-lista div{
  background:#141414;
  padding:10px;
  border-radius:8px;
  margin-bottom:8px;
  border-left:4px solid #00ffcc;
  box-shadow:
    0 0 6px #00ffcc33,
    0 0 12px #00ffcc22;
}

/* ================= ANIMACION ================= */

@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}