/* ================================
   ControlWallet • Tema oscuro
   (Login + Dashboard centrados)
   ================================ */

/* Paleta y tokens */
:root{
  --bg:#0b0c10;
  --card:#12141a;
  --muted:#aab0c0;
  --brand:#4f7cff;
  --text:#e7eaf3;
  --danger:#ff5d5d;
  --success:#35c47c;
  --warning:#ffd166;
}

/* Reset básico */
*{box-sizing:border-box;margin:0;padding:0}
html, body{height:100%}
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  background:radial-gradient(1200px 800px at 80% -10%, #1a1f35 0%, #0b0c10 60%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* =================
   Contenedores base
   ================= */

.container {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;       /* centra horizontal */
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;       /* centra hijos */
}

.container > .card,
.container > .grid,
.container > .table-wrap {
  width: 100%;
  max-width: 1000px;         /* controla el ancho del contenido */
  margin: 0 auto;
}

/* La página ocupa alto completo y centra verticalmente (login) */
.page {
  min-height: 100svh;
  display: grid;
  place-items: center;       /* centra vertical + horizontal */
  padding: 24px;
}

/* =================
   Topbar / Header
   ================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(12,13,20,0.6);
  padding: 0; /* usamos .topbar-inner para el padding */
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.topbar > .topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 12px;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 18px;
}

.brand{font-weight:700}
.muted{color:var(--muted)}

/* ========
   Tarjetas
   ======== */

.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:16px;
  box-shadow:0 20px 50px rgba(0,0,0,0.35);
}

/* =========
   Formularios
   ========= */

.form{display:grid; gap:12px}
label{font-size:14px; color:#d7def0}

input, select, textarea {
  background:#0d0f17;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  padding:12px 14px;
  color:var(--text);
  outline:none;
  width:100%;
}
input::placeholder, textarea::placeholder{color:#9aa3b2}

input:focus, select:focus, textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(79,124,255,0.25);
}

.password-field{position:relative; display:flex; align-items:center}
.password-field input{width:100%}
.password-field .toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; cursor:pointer; font-size:16px; color:var(--muted);
}

/* =======
   Botones
   ======= */

.btn{
  border:1px solid rgba(255,255,255,0.12);
  padding:12px 16px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
  color:var(--text);
  background:#0e111a;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn.primary{background:var(--brand); border-color:transparent}
.btn.ghost{background:transparent}
.btn:hover{opacity:0.95}

/* ==========
   Mensajes
   ========== */

.flash{
  border-radius:12px;
  padding:12px 14px;
  font-size:14px;
  background:#1a2030;
  border:1px solid rgba(255,255,255,0.12);
  width:100%;
  max-width:720px;
  margin:12px auto;
}
.flash.success{border-color:rgba(53,196,124,0.6)}
.flash.error{border-color:rgba(255,93,93,0.6)}
.flash.info{border-color:rgba(79,124,255,0.6)}

/* =====
   Login
   ===== */

.auth{
  width:100%;
  display:grid;
  place-items:center;
}

.auth .card{
  width:100%;
  max-width:420px;
  margin-inline:auto;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  padding:28px;
  backdrop-filter: blur(8px);
}

h1{margin:0 0 6px 0; font-size:28px}
.subtitle{margin:0 0 18px 0; color:var(--muted)}
.footnote{color:var(--muted); font-size:12px; text-align:center; margin-top:8px}

/* ==========
   Dashboard
   ========== */

.grid{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
  margin:18px auto;
  width:100%;
  max-width:1000px;
}

@media (min-width: 900px){
  .grid{grid-template-columns:1fr 1fr}
}

.table-wrap{overflow:auto; width:100%; max-width:1000px}

.table{
  width:100%;
  border-collapse:collapse;
  min-width:680px; /* evita ruptura visual en medianos */
}

.table th,.table td{
  padding:10px;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,0.09);
}

.table thead th{
  position:sticky;
  top:0;
  background:#12141a;
  z-index:1;
}

/* Alterna filas (zebra) */
.table tbody tr:nth-child(odd){
  background:rgba(255,255,255,0.02);
}

/* Chips por tipo */
.pill{font-weight:600}
.pill.ingreso{color:var(--success)}
.pill.egreso{color:var(--danger)}
.pill.gasto{color:var(--warning)}

/* ===========
   Selectores
   =========== */

select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #9aa3b2 50%),
    linear-gradient(135deg, #9aa3b2 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 20px) calc(1em - 2px),
    calc(100% - 15px) calc(1em - 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat:no-repeat;
  padding-right:2.5em;
}

/* ===========
   Utilidades
   =========== */

.center{display:grid; place-items:center}
.right{display:flex; justify-content:flex-end}
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}

/* =====================
   Ajustes responsivos
   ===================== */

@media (min-width: 1024px){
  body{
    background: radial-gradient(900px 600px at 50% -10%, #1a1f35 0%, #0b0c10 60%);
  }
  .page{ padding: 40px; }
}

@media (max-width: 420px){
  .topbar > .topbar-inner{ height:56px; padding-inline:12px }
  .auth .card{ padding:22px }
  .table{ min-width: 560px }
}

/* ==== KPIs y cuentas en Resumen ==== */
.summary-kpis{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  margin-top:12px;
}
@media (min-width: 720px){
  .summary-kpis{ grid-template-columns: 1fr 1fr; }
}
.kpi{
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:12px;
}
.kpi-title{ font-size:13px; color:#aab0c0; margin-bottom:4px }
.kpi-value{ font-size:20px; font-weight:700 }
.kpi-value.ingreso{ color:#76c3ff }   /* azul suave */
.kpi-value.egreso{  color:#ff7a7a }   /* rojo suave */
.kpi-value.balance{ color:#ffd166 }   /* amarillo suave */

/* Grid de saldos por cuenta */
.accounts-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin: 8px 0 16px;
}
@media (min-width: 720px){
  .accounts-grid{ grid-template-columns: repeat(4, 1fr); }
}
.account{
  background: #12141a;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:10px 12px;
}
.account-name{ font-size:13px; color:#aab0c0 }
.account-value{ font-size:16px; font-weight:700; margin-top:2px }

/* ====== Topbar responsive (móvil) ====== */
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0; /* permite truncado */
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0; /* necesario para que el span pueda hacer ellipsis */
}

/* Truncar el correo si es largo */
.user-email {
  max-width: 45vw;             /* espacio máximo en móvil */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

/* Botón más compacto en pantallas chicas */
@media (max-width: 480px) {
  .topbar > .topbar-inner {
    height: auto;
    padding-inline: 12px;
    padding-block: 10px;
  }
  .brand { font-size: 16px; }
  .user-email { 
    max-width: 40vw; 
    font-size: 12px; 
    opacity: 0.9; 
  }
  .btn.ghost { 
    padding: 8px 10px; 
    font-size: 12px; 
    border-radius: 10px;
  }
}

/* Ultra chico: si el ancho es muy reducido, permitimos salto a 2 líneas ordenadas */
@media (max-width: 360px) {
  .topbar-inner { flex-wrap: wrap; }
  .topbar nav { 
    width: auto;
    margin-left: auto;         /* empuja el nav a la derecha */
  }
  .user-email { max-width: 55vw; }
}

/* ====== Mejora "Saldos por cuenta" en escritorio ====== */

/* Mantén 4 columnas cómodas en desktop y 2 en tablet */
@media (min-width: 900px){
  .accounts-grid{ grid-template-columns: repeat(4, 1fr); gap: 14px; }
}

/* Tarjeta más consistente y alineada */
.accounts-grid .account{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 90px;                 /* misma altura para todas */
  padding: 14px 16px;               /* un pelín más de aire */
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* Título de la cuenta */
.account-name{
  font-size: 13px;
  color: #aab0c0;
  line-height: 1.2;
}

/* Valor en una sola línea (evita salto entre "$" y la cifra) */
.account-value{
  margin-top: 6px;
  font-size: 20px;          /* sube tamaño para desktop */
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;      /* <- clave: evita el salto de línea */
}

/* Un poco más grande en pantallas muy anchas */
@media (min-width: 1200px){
  .account-value{ font-size: 22px; }
}