:root {
  --bg: #f1f5f9;
  --card: #ffffff;
  --text: #000000;
  --input: #ffffff;
  --primary: #3b82f6;
}

.dark {
  --bg: #0f172a;
  --card: #1e293b;
  --text: #ffffff;
  --input: #1e293b;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Arial;
  background: var(--bg);
  color: var(--text);
}

/* 📱 contenedor */
.container {
  background: var(--bg);
  max-width: 480px;
  margin: auto;
  padding: 12px;
}

/* 🔝 header */
.header {
  background: var(--bg);
  position: sticky;
  top: 0;
  background: #eef1f5;
  padding-bottom: 10px;
  z-index: 10;
}

/* 🔘 botones */
button {
  color: var(--text);
  width: 100%;
  padding: 14px;
  margin: 6px 0;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: bold;
}

/* colores */
.save {
  background: #22c55e;
  color: white;
}

.edit {
  background: #facc15;
}

.delete {
  background: #ef4444;
  color: white;
}

/* inputs */
input {
  background: var(--input);
  color: var(--text);
  width: 100%;
  padding: 14px;
  margin: 6px 0;
  border: 1px solid #334155;
  border-radius: 12px;
  font-size: 16px;
}

/* ⚡ entrada rápida */
.quick-entry input {
  font-size: 18px;
  border: 2px solid #3b82f6;
}

/* 🧱 cards */
.card {
  background: var(--card);
  padding: 14px;
  margin-top: 10px;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* texto */
.card b {
  font-size: 18px;
}

/* oculto */
.hidden {
  display: none;
}

.dark .card {
  background: #1e293b;
}

.dark input {
  background: #1e293b;
  color: white;
}