:root {
  --fondo: #f6f4ef;
  --papel: #ffffff;
  --tinta: #1d1b18;
  --suave: #6b665e;
  --linea: #e2ded5;
  --acento: #7a5c2e;
  --bueno: #2f6b3a;
  --malo: #a3352b;
  --resalte: #fbf3df;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #171614;
    --papel: #211f1c;
    --tinta: #ece8e1;
    --suave: #a39d92;
    --linea: #36332e;
    --acento: #d2ad6d;
    --bueno: #7cc48a;
    --malo: #e57b70;
    --resalte: #2c2618;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
header { background: var(--papel); border-bottom: 1px solid var(--linea); padding: 14px 20px 0; position: sticky; top: 0; z-index: 2; }
h1 { margin: 0; font-size: 18px; letter-spacing: .02em; }
.encabezado { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 12px; }
.encabezado .accion { padding: 4px 10px; font-size: 13px; }
[hidden] { display: none !important; }
form.acceso { max-width: 420px; margin: 40px auto; padding: 20px; display: grid; gap: 14px; }
form.acceso label { display: grid; gap: 4px; font-size: 14px; color: var(--suave); }
form.acceso input { border-color: var(--linea); padding: 8px 10px; color: var(--tinta); }
form.acceso button { justify-self: start; }
nav { display: flex; gap: 4px; overflow-x: auto; }
nav button {
  border: 0; background: none; color: var(--suave); padding: 8px 12px; font: inherit;
  border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
}
nav button.activa { color: var(--tinta); border-bottom-color: var(--acento); font-weight: 600; }
main { padding: 20px; max-width: 1280px; margin: 0 auto; }
h2 { font-size: 17px; margin: 28px 0 8px; }
h2:first-child { margin-top: 0; }
p.ayuda { color: var(--suave); margin: 0 0 12px; max-width: 820px; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 8px; }
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; padding: 12px 14px; }
.tarjeta .dato { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tarjeta .que { color: var(--suave); font-size: 13px; }
.caja { background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; overflow-x: auto; margin-bottom: 16px; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 6px 10px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: middle; }
th { font-size: 12px; font-weight: 600; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.total { font-weight: 700; }
tr.grupo td { background: var(--fondo); font-weight: 600; color: var(--suave); font-size: 13px; }
input, select {
  font: inherit; color: inherit; background: transparent; border: 1px solid transparent;
  border-radius: 4px; padding: 3px 6px; width: 100%; min-width: 60px;
}
input:hover, select:hover { border-color: var(--linea); }
input:focus, select:focus { outline: none; border-color: var(--acento); background: var(--resalte); }
input.num { text-align: right; font-variant-numeric: tabular-nums; }
input[data-campo="nombre"] { min-width: 230px; }
input[data-campo="categoria"] { min-width: 150px; }
input[data-campo="unidad"] { min-width: 80px; }
select[data-campo="insumo_id"], select[data-campo="receta_id"] { min-width: 260px; }
td.nota input { color: var(--suave); min-width: 220px; }
button.accion, a.accion {
  display: inline-block; text-decoration: none;
  font: inherit; font-size: 14px; border: 1px solid var(--linea); background: var(--papel); color: var(--tinta);
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
}
button.accion:hover, a.accion:hover { border-color: var(--acento); }
button.borrar { border: 0; background: none; color: var(--suave); cursor: pointer; font-size: 16px; }
button.borrar:hover { color: var(--malo); }
.matriz td:first-child { min-width: 170px; }
.matriz td.celda { cursor: pointer; }
.matriz td.celda:hover, .matriz td.celda.elegida { background: var(--resalte); }
.matriz .pct { display: block; font-size: 12px; color: var(--suave); }
.bueno { color: var(--bueno); }
.malo { color: var(--malo); }
.receta { margin-bottom: 20px; }
.receta h3 { margin: 0; padding: 10px 12px; font-size: 15px; display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--linea); }
.receta h3 input { font-weight: 600; max-width: 320px; }
.fila-acciones { display: flex; gap: 8px; margin: 8px 0 24px; flex-wrap: wrap; }
#aviso {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: var(--tinta); color: var(--fondo); padding: 8px 16px; border-radius: 6px; font-size: 14px;
}
#aviso.error { background: var(--malo); color: #fff; }
@media (max-width: 640px) {
  main { padding: 16px; }
  header { padding: 12px 16px 0; }
}