:root{
  --bg:#081225;
  --card: rgba(255,255,255,.10);
  --card2: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.14);
  --text:#e5e7eb;
  --muted:#cbd5e1;
  --link:#7dd3fc;
  --accent:#22c55e;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(2,6,23,.82), rgba(2,6,23,.93)),
    url("/fondogastos.jpeg") center/cover fixed no-repeat;
}

.wrap{max-width:1100px;margin:0 auto;padding:18px}

.card{
  background: linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  margin-bottom:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.30);
  backdrop-filter: blur(10px);
}

a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

.badge{
  padding:4px 10px;
  border-radius:999px;
  font-size:.85rem;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:var(--muted);
}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
h2{margin:.35rem 0 0 0}

table{width:100%;border-collapse:collapse}
table th, table td { text-align:center; }
table th:nth-child(5), table td:nth-child(5) { text-align:left; }
table th:last-child, table td:last-child { text-align:right; }
th,td{padding:10px;border-bottom:1px solid rgba(255,255,255,.10)}
th{color:var(--muted);font-weight:600}

.btn{
  display:inline-block;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(34,197,94,.16);
  color:var(--text);
}
.btn:hover{
  background:rgba(34,197,94,.22);
  text-decoration:none;
}

/* Multi-persona: asegurar legibilidad en selects multiple */
select[multiple]{
  background: rgba(0,0,0,.25);
  color: #e5e7eb;
}
select[multiple] option{
  background: #0b1220;
  color: #e5e7eb;
}