/* ===== AgroSimple · Modo Barro =====
   Pensado para manos con guantes, sol fuerte y poca costumbre de pantalla:
   targets enormes, alto contraste, nada de texto chico. */

:root{
  --campo:#2f6b3a;
  --campo-claro:#3e8e4f;
  --barro:#7a5c3a;
  --tap-min: 88px;            /* alto mínimo de cualquier cosa tocable */
}

*{ -webkit-tap-highlight-color: transparent; }
html,body{ margin:0; height:100%; overscroll-behavior:none; }
body{ font-size:18px; }

/* ---------- Header ---------- */
.app-header{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:12px;
  padding: max(14px, env(safe-area-inset-top)) 16px 14px;
  background:var(--campo); color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.hdr-title{ font-size:26px; font-weight:800; letter-spacing:.3px; flex:1; margin:0; }
.hdr-back{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; margin-left:-6px; border-radius:14px;
  background:rgba(255,255,255,.14); color:#fff; border:0;
}
.hdr-back:active{ background:rgba(255,255,255,.28); }

.sync-badge{
  display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.16); padding:7px 12px; border-radius:999px;
  font-size:14px; font-weight:600;
}
.sync-dot{ width:11px; height:11px; border-radius:50%; background:#ffd24d; box-shadow:0 0 0 3px rgba(255,210,77,.25); }
.sync-badge.online .sync-dot{ background:#7CFC9A; box-shadow:0 0 0 3px rgba(124,252,154,.25); }
.sync-badge.syncing .sync-dot{ background:#7ec8ff; animation:pulse 1s infinite; }
@keyframes pulse{ 50%{ opacity:.35; } }

/* ---------- Layout ---------- */
.app-main{ padding:18px 16px 40px; max-width:560px; margin:0 auto; }

/* ---------- Grilla de la casa ---------- */
.home-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:6px; }
.tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  min-height:160px; padding:18px 12px; border:0; border-radius:24px;
  background:#fff; color:var(--campo); font-size:21px; font-weight:800; text-align:center;
  box-shadow:0 4px 0 rgba(0,0,0,.08), 0 8px 22px rgba(0,0,0,.08);
  transition:transform .06s ease;
}
.tile:active{ transform:translateY(3px) scale(.99); box-shadow:0 1px 0 rgba(0,0,0,.08); }
.tile svg{ width:64px; height:64px; }
.tile .plan-tag{ font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; }
.plan-1{ background:#e6f2e8; color:#2f6b3a; }
.plan-2{ background:#fbeede; color:#9a6a2f; }
.plan-3{ background:#e7eefb; color:#2f5aa8; }

/* ---------- Botones grandes genéricos ---------- */
.btn-xl{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; min-height:var(--tap-min); padding:20px;
  border:0; border-radius:20px; font-size:22px; font-weight:800; color:#fff;
  background:var(--campo); box-shadow:0 4px 0 rgba(0,0,0,.12);
}
.btn-xl:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.12); }
.btn-xl svg{ width:34px; height:34px; }
.btn-xl.secondary{ background:#fff; color:var(--campo); border:3px solid var(--campo); box-shadow:none; }
.btn-xl.warn{ background:#c0492f; }
.btn-xl:disabled{ opacity:.5; }

/* ---------- Tarjetas / paneles ---------- */
.card{ background:#fff; border-radius:22px; padding:20px; box-shadow:0 6px 18px rgba(0,0,0,.07); margin-bottom:16px; }
.card h2{ font-size:20px; font-weight:800; margin:0 0 12px; }
.muted{ color:#8a7a66; }
.big-number{ font-size:54px; font-weight:900; line-height:1; color:var(--campo); }

/* ---------- Categorías de gasto (íconos) ---------- */
.cat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cat-btn{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:18px 10px; border-radius:20px; border:3px solid transparent; background:#f6f1e8;
  font-size:17px; font-weight:700; color:#5a4a33;
}
.cat-btn svg{ width:46px; height:46px; }
.cat-btn.active{ border-color:var(--campo); background:#eaf4ec; color:var(--campo); }

/* ---------- Contadores +/- (inventario) ---------- */
.counter-row{ display:flex; align-items:center; gap:12px; }
.counter-btn{
  width:74px; height:74px; flex:0 0 auto; border:0; border-radius:20px;
  font-size:40px; font-weight:900; color:#fff; box-shadow:0 4px 0 rgba(0,0,0,.12);
}
.counter-btn:active{ transform:translateY(3px); box-shadow:none; }
.counter-btn.minus{ background:#c0492f; }
.counter-btn.plus{ background:var(--campo); }
.counter-value{ flex:1; text-align:center; font-size:44px; font-weight:900; }

/* Semáforo de stock */
.semaforo{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; font-weight:800; font-size:15px; }
.sem-verde{ background:#e2f5e6; color:#1f7a35; }
.sem-amarillo{ background:#fef3d6; color:#9a6a00; }
.sem-rojo{ background:#fbe2dc; color:#b8341c; }

/* ---------- Inputs grandes ---------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:16px; font-weight:700; margin-bottom:7px; color:#5a4a33; }
.input-xl{
  width:100%; min-height:68px; padding:14px 18px; font-size:24px; font-weight:700;
  border:3px solid #e3d8c6; border-radius:18px; background:#fff; box-sizing:border-box;
}
.input-xl:focus{ outline:none; border-color:var(--campo); }

/* ---------- Pluviómetro táctil ---------- */
.gauge-wrap{ display:flex; gap:22px; align-items:stretch; }
.gauge{
  position:relative; width:120px; flex:0 0 auto; height:300px; border-radius:0 0 26px 26px;
  border:5px solid #b9c7d6; border-top:0; background:linear-gradient(#f3f8fc,#eaf1f8);
  overflow:hidden; touch-action:none;
}
.gauge-fill{ position:absolute; left:0; right:0; bottom:0; background:linear-gradient(#5aa8e6,#3b82c4); transition:height .05s linear; }
.gauge-label{ position:absolute; left:0; right:0; top:8px; text-align:center; font-weight:900; font-size:30px; color:#1e4e7a; text-shadow:0 1px 0 #fff; }
.gauge-tick{ position:absolute; left:0; height:2px; background:rgba(0,0,0,.18); }
.gauge-tick span{ position:absolute; left:6px; top:-9px; font-size:12px; color:#5a6b7a; }

/* ---------- Listas / historial ---------- */
.list-row{ display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:2px solid #f0e8da; }
.list-row:last-child{ border-bottom:0; }
.list-row .ic{ width:46px; height:46px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:#f2ece1; border-radius:14px; }
.list-row .ic svg{ width:30px; height:30px; }
.list-grow{ flex:1; min-width:0; }
.list-grow .t{ font-weight:800; font-size:18px; }
.list-grow .s{ font-size:14px; color:#8a7a66; }
.list-amt{ font-weight:900; font-size:20px; }

/* Mini gráfico de barras (lluvias) */
.bars{ display:flex; align-items:flex-end; gap:6px; height:140px; padding-top:8px; }
.bar{ flex:1; background:linear-gradient(#5aa8e6,#3b82c4); border-radius:6px 6px 0 0; min-height:3px; position:relative; }
.bar span{ position:absolute; bottom:-22px; left:0; right:0; text-align:center; font-size:11px; color:#8a7a66; }
.bar b{ position:absolute; top:-20px; left:0; right:0; text-align:center; font-size:11px; font-weight:800; color:#3b82c4; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(120%);
  background:#2b2b2b; color:#fff; padding:16px 22px; border-radius:16px; font-weight:700; font-size:17px;
  box-shadow:0 8px 24px rgba(0,0,0,.3); z-index:60; transition:transform .25s ease; max-width:90%; text-align:center;
}
.toast.show{ transform:translateX(-50%) translateY(0); }

/* ---------- Varios ---------- */
.empty{ text-align:center; padding:30px 10px; color:#8a7a66; }
.empty svg{ width:70px; height:70px; opacity:.4; margin-bottom:8px; }
.hidden{ display:none !important; }
.section-title{ font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:#9a8a73; margin:24px 4px 10px; }
.thumb{ width:54px; height:54px; border-radius:12px; object-fit:cover; background:#eee; }