/* ============================================================
   app.css — Diseño de la app de gastos (Adrián & Natalia)
   Hoja de estilos propia, independiente de la plantilla Auricle.
   ============================================================ */

:root{
  --bg:        #eef1f6;
  --card:      #ffffff;
  --text:      #1f2933;
  --muted:     #6b7280;
  --border:    #e5e7eb;
  --border-2:  #eceff3;
  --primary:   #2563eb;
  --primary-d: #1d4ed8;
  --primary-l: #eff4ff;
  --green:     #16a34a;
  --green-bg:  #e8f7ee;
  --amber:     #d97706;
  --red:       #dc2626;
  --shadow:    0 1px 2px rgba(16,24,40,.06), 0 4px 16px rgba(16,24,40,.06);
  --radius:    14px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
.muted{ color:var(--muted); }

/* ---------- Barra superior ---------- */
.topbar{
  background:#0f172a;
  color:#fff;
  position:sticky; top:0; z-index:50;
  box-shadow:0 1px 0 rgba(255,255,255,.04), 0 6px 18px rgba(2,6,23,.25);
}
.topbar-inner{
  max-width:1080px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:22px; min-height:60px;
  flex-wrap:wrap;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:1.05rem; color:#fff; letter-spacing:.2px;
}
.brand:hover{ text-decoration:none; }
.brand .dot{ width:10px; height:10px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px rgba(37,99,235,.25); }
.nav{ display:flex; gap:4px; flex-wrap:wrap; margin-left:auto; }
.nav a{
  color:#cbd5e1; padding:8px 12px; border-radius:8px; font-size:.9rem; font-weight:500;
}
.nav a:hover{ background:rgba(255,255,255,.08); color:#fff; text-decoration:none; }
.nav a.active{ background:var(--primary); color:#fff; }

/* ---------- Estructura ---------- */
.container{ max-width:1080px; margin:0 auto; padding:28px 20px 60px; }
.page-head{ margin:6px 0 22px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.page-head h1{ font-size:1.6rem; margin:0; font-weight:700; letter-spacing:-.01em; }
.page-head .sub{ margin:4px 0 0; color:var(--muted); font-size:.95rem; }
.head-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px 24px; margin-bottom:22px;
}
.card h2{ font-size:1.05rem; margin:0 0 4px; font-weight:650; }
.card h2 .hint{ font-weight:400; color:var(--muted); font-size:.85rem; margin-left:8px; }
.card .card-sub{ color:var(--muted); font-size:.88rem; margin:0 0 16px; }
.card-divider{ border:0; border-top:1px solid var(--border-2); margin:20px 0; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:.9rem; font-weight:600; padding:10px 16px; border-radius:9px;
  border:1px solid transparent; transition:.15s; text-decoration:none; line-height:1;
}
.btn:hover{ text-decoration:none; }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-d); color:#fff; }
.btn-outline{ background:#fff; color:var(--text); border-color:var(--border); }
.btn-outline:hover{ background:#f8fafc; border-color:#cbd5e1; }
.btn-green{ background:var(--green); color:#fff; }
.btn-green:hover{ background:#15803d; color:#fff; }
.btn-danger-o{ background:#fff; color:var(--red); border-color:#f3c9c9; }
.btn-danger-o:hover{ background:#fdf1f1; }
.btn-sm{ padding:7px 12px; font-size:.82rem; }

/* ---------- Formularios ---------- */
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; align-items:end; }
.field label{ display:block; font-size:.78rem; font-weight:600; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.03em; }
input[type=text], input[type=number], input[type=password], select{
  width:100%; padding:10px 12px; font-size:.95rem; color:var(--text);
  background:#fff; border:1px solid var(--border); border-radius:9px; outline:none; transition:.15s;
  font-family:inherit;
}
input:focus, select:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.form-actions{ margin-top:4px; }

/* ---------- Tablas ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:12px; }
.data-table{ width:100%; border-collapse:collapse; font-size:.92rem; background:#fff; }
.data-table th, .data-table td{ padding:11px 14px; text-align:left; border-bottom:1px solid var(--border-2); white-space:nowrap; }
.data-table thead th{ background:#f8fafc; color:var(--muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
.data-table tbody tr:last-child td{ border-bottom:0; }
.data-table tbody tr:hover{ background:#fafbfe; }
.data-table .num{ text-align:right; font-variant-numeric:tabular-nums; }
.data-table .mes{ font-weight:600; }
.data-table .total-col{ font-weight:700; background:#fbfcfe; }
.empty-row td{ text-align:center; color:var(--muted); padding:26px; }

/* Resumen total bajo la tabla */
.total-line{ display:flex; align-items:baseline; gap:10px; margin-top:16px; font-size:.95rem; }
.total-line .amount{ font-size:1.5rem; font-weight:700; letter-spacing:-.01em; }
.total-line .amount.pos{ color:var(--green); }
.total-line .amount.neg{ color:var(--red); }

/* ---------- Presupuesto por categoría ---------- */
.budget-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:14px; }
.budget-card{ border:1px solid var(--border); border-radius:12px; padding:14px 16px; background:#fff; }
.budget-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:10px; }
.budget-cat{ font-weight:600; font-size:.9rem; }
.budget-amount{ font-weight:700; font-size:1.05rem; font-variant-numeric:tabular-nums; }
.budget-meta{ font-size:.76rem; color:var(--muted); margin-top:9px; }
.bar{ height:7px; border-radius:99px; background:#eef1f6; overflow:hidden; }
.bar span{ display:block; height:100%; border-radius:99px; background:#cbd5e1; }
.estado-ok    .budget-amount{ color:var(--green); }
.estado-ok    .bar span{ background:var(--green); }
.estado-warn  .budget-amount{ color:var(--amber); }
.estado-warn  .bar span{ background:var(--amber); }
.estado-over  .budget-amount{ color:var(--red); }
.estado-over  .bar span{ background:var(--red); }
.estado-over{ border-color:#f3c9c9; background:#fffafa; }

/* ---------- Badges ---------- */
.badge{ display:inline-block; padding:3px 9px; border-radius:99px; font-size:.75rem; font-weight:600; background:#eef2f7; color:#475569; }

/* ---------- Login / acceso ---------- */
.access-wrap{ max-width:400px; margin:8vh auto; }
.access-wrap .card{ text-align:center; }
.access-wrap h1{ font-size:1.3rem; margin:0 0 4px; }
.access-wrap p{ color:var(--muted); margin:0 0 20px; }
.access-wrap form{ display:flex; gap:10px; }
.access-wrap input{ flex:1; }

/* ---------- Toolbar de filtros ---------- */
.filters{ display:flex; gap:12px; flex-wrap:wrap; align-items:end; }
.filters .field{ min-width:150px; }
.filters .field.grow{ flex:1; }

/* ---------- Lista de compra ---------- */
.ls-list{ list-style:none; margin:0; padding:0; }
.ls-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 6px; border-bottom:1px solid var(--border-2);
}
.ls-item:last-child{ border-bottom:none; }
.ls-check{
  flex:0 0 auto; font-size:1.5rem; line-height:1; color:var(--primary);
  text-decoration:none; width:28px; text-align:center;
}
.ls-check:hover{ text-decoration:none; }
.ls-name{ flex:1; font-size:1.05rem; }
.ls-item.done .ls-name{ text-decoration:line-through; color:var(--muted); }
.ls-item.done .ls-check{ color:var(--green); }
.ls-del{
  flex:0 0 auto; color:var(--muted); font-size:1.4rem; line-height:1;
  text-decoration:none; width:28px; text-align:center; border-radius:8px;
}
.ls-del:hover{ color:var(--red); text-decoration:none; background:rgba(220,38,38,.08); }
.ls-empty{ color:var(--muted); padding:12px 6px; }

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .page-head h1{ font-size:1.35rem; }
  .card{ padding:18px 16px; }
  .topbar-inner{ min-height:54px; }
  .ls-name{ font-size:1.1rem; }
  .ls-item{ padding:14px 4px; }
}