*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, sans-serif;
  background: #f5f5f0;
  color: #1a1a1a;
  min-height: 100vh;
}

header {
  background: #1B5E20;
  color: white;
  padding: 1.25rem 2rem;
}
header h1 { font-size: 1.4rem; }
header p  { font-size: 0.9rem; opacity: 0.8; margin-top: 0.2rem; }

main { max-width: 900px; margin: 0 auto; padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 1.5rem; }

/* Resumen */
.resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.card {
  background: white;
  border-radius: 10px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.card .label { font-size: 0.8rem; color: #666; text-transform: uppercase; letter-spacing: .05em; }
.card .monto { font-size: 1.7rem; font-weight: 700; color: #1B5E20; }
.card .cant  { font-size: 0.85rem; color: #888; }

/* Formulario */
.formulario, .historial {
  background: white;
  border-radius: 10px;
  padding: 1.4rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.formulario h2, .historial h2 { font-size: 1rem; margin-bottom: 1rem; color: #333; }

.campos {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 0.6rem;
}
input, select {
  padding: 0.55rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.95rem;
  width: 100%;
}
input:focus, select:focus { outline: 2px solid #1B5E20; border-color: transparent; }

button[type="submit"] {
  background: #1B5E20;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.55rem 1.2rem;
  cursor: pointer;
  font-size: 0.95rem;
  white-space: nowrap;
}
button[type="submit"]:hover { background: #2E7D32; }

#msg-form { margin-top: 0.6rem; font-size: 0.9rem; min-height: 1.2em; }
#msg-form.ok  { color: #2E7D32; }
#msg-form.err { color: #c62828; }

/* Historial */
.historial-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
#btn-actualizar {
  background: none;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: #555;
}
#btn-actualizar:hover { background: #f0f0f0; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
thead th { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid #eee; color: #555; font-weight: 600; }
tbody td { padding: 0.6rem 0.75rem; border-bottom: 1px solid #f0f0f0; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafaf7; }

.empty { text-align: center; color: #aaa; padding: 2rem !important; }

.metodo {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}
.metodo.efectivo     { background: #E8F5E9; color: #2E7D32; }
.metodo.transferencia{ background: #E3F2FD; color: #1565C0; }
.metodo.tarjeta      { background: #F3E5F5; color: #6A1B9A; }
.metodo.otro         { background: #FFF3E0; color: #E65100; }

.btn-del {
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  font-size: 1rem;
  padding: 0 0.3rem;
}
.btn-del:hover { color: #c62828; }

@media (max-width: 640px) {
  .resumen { grid-template-columns: 1fr; }
  .campos  { grid-template-columns: 1fr 1fr; }
  .campos button { grid-column: span 2; }
}