/* ============================================================
   AGROLOG · Design system (productizado desde agrolog/design/agrolog-tokens.css)
   Carga junto a la hoja Tailwind existente durante la migración por etapas.
   Todo acá queda scopeado a `.ag-scope` salvo los tokens (custom properties),
   que son inertes hasta que algo los referencia - no tocan las vistas Tailwind.
   ============================================================ */

/* --- 01: Tokens (paleta + escalas) --- */
:root{
  --ag-verde-50:#E9F6F0;  --ag-verde-100:#C6E9D9; --ag-verde-200:#93D5BB;
  --ag-verde-300:#58BB98; --ag-verde-400:#269D77; --ag-verde-500:#0A7B5A;
  --ag-verde-600:#00593F; --ag-verde-700:#004A35; --ag-verde-800:#003A29;
  --ag-verde-900:#002A1E; --ag-verde-950:#001812;

  --ag-lima-50:#F8FCEA;  --ag-lima-100:#F0F9CD; --ag-lima-200:#E0F29D;
  --ag-lima-300:#BDE04E; --ag-lima-400:#A8CC35; --ag-lima-500:#8DAD24;
  --ag-lima-600:#6F881B; --ag-lima-700:#566818; --ag-lima-800:#435118;
  --ag-lima-900:#2E380F;

  --ag-tierra-50:#FAF3EC;  --ag-tierra-100:#F2E3D1; --ag-tierra-200:#E4C7A6;
  --ag-tierra-300:#D0A578; --ag-tierra-400:#BA8752; --ag-tierra-500:#9E6B39;
  --ag-tierra-600:#82552C; --ag-tierra-700:#6A4524; --ag-tierra-800:#52351B;
  --ag-tierra-900:#3A2513; --ag-tierra-950:#221408;

  --ag-bruma-0:#FFFFFF;   --ag-bruma-25:#FBFBF8; --ag-bruma-50:#F5F5F0;
  --ag-bruma-100:#ECECE5; --ag-bruma-200:#DEDED4; --ag-bruma-300:#C5C5B8;
  --ag-bruma-400:#9A9A8C; --ag-bruma-500:#67675B; --ag-bruma-600:#4E4E45;
  --ag-bruma-700:#3B3B34; --ag-bruma-800:#272723; --ag-bruma-900:#191916;
  --ag-bruma-950:#0E0E0C;

  --ag-exito:#1B7F4B; --ag-alerta:#F8E16C; --ag-alerta-tinta:#7A5D06; --ag-error:#B23A2B; --ag-info:#2A6E86;

  --font-sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:'Young Serif',Georgia,'Times New Roman',serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  --text-3xs:.6875rem; --text-2xs:.75rem;  --text-xs:.8125rem; --text-sm:.875rem;
  --text-base:1rem;    --text-md:1.0625rem; --text-lg:1.25rem; --text-xl:1.5rem;
  --text-2xl:1.875rem; --text-3xl:2.375rem; --text-4xl:3rem;   --text-5xl:3.75rem;

  --lh-tight:1.14; --lh-snug:1.28; --lh-normal:1.5; --lh-relaxed:1.65;
  --ls-tight:-0.03em; --ls-normal:0; --ls-wide:.06em;

  --sp-1:4px; --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;

  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-2xl:32px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(0,42,30,.07), 0 1px 1px rgba(0,42,30,.04);
  --sh-2:0 2px 6px rgba(0,42,30,.08), 0 1px 2px rgba(0,42,30,.05);
  --sh-3:0 8px 20px -6px rgba(0,42,30,.15), 0 2px 6px rgba(0,42,30,.07);
  --sh-4:0 20px 48px -12px rgba(0,42,30,.24), 0 6px 14px rgba(0,42,30,.10);

  --dur-1:110ms; --dur-2:180ms; --dur-3:280ms; --dur-4:460ms; --dur-5:760ms;
  --ease-out:cubic-bezier(.22,.7,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.22,1.2,.36,1);

  --z-nav:20; --z-sticky:30; --z-overlay:60; --z-toast:80;

  /* Roles semánticos (light) */
  --color-primary:var(--ag-verde-600);
  --color-primary-hover:var(--ag-verde-700);
  --color-on-primary:#FFFFFF;
  --color-primary-container:var(--ag-verde-100);
  --color-on-primary-container:var(--ag-verde-900);
  --color-primary-subtle:var(--ag-verde-50);

  --color-secondary:var(--ag-tierra-600);
  --color-on-secondary:#FFFFFF;
  --color-secondary-container:var(--ag-tierra-100);
  --color-on-secondary-container:var(--ag-tierra-900);
  --color-secondary-subtle:var(--ag-tierra-50);

  --color-accent:var(--ag-lima-300);
  --color-on-accent:var(--ag-verde-900);
  --color-accent-container:var(--ag-lima-100);
  --color-on-accent-container:var(--ag-lima-900);
  --color-accent-subtle:var(--ag-lima-50);

  --color-background:var(--ag-bruma-25);
  --color-surface:var(--ag-bruma-0);
  --color-surface-alt:var(--ag-bruma-50);
  --color-surface-sunken:var(--ag-bruma-100);
  --color-surface-inverse:var(--ag-verde-600);
  --color-on-surface-inverse:#FFFFFF;

  --color-text:var(--ag-bruma-900);
  --color-text-muted:var(--ag-bruma-500);
  --color-text-subtle:var(--ag-bruma-400);
  --color-text-on-brand:#FFFFFF;

  --color-border:var(--ag-bruma-200);
  --color-border-strong:var(--ag-bruma-300);
  --color-focus:var(--ag-verde-500);

  --color-success:var(--ag-exito);   --color-success-container:#A6E9BE; --color-on-success-container:#0B3D25;
  --color-warning:var(--ag-alerta);  --color-warning-container:var(--ag-alerta); --color-on-warning-container:#3D2F02;
  --color-on-warning:#3D2F02;        --color-warning-tinta:var(--ag-alerta-tinta);
  --color-error:var(--ag-error);     --color-error-container:#F8A894;   --color-on-error-container:#5A1A0F;
  --color-info:var(--ag-info);       --color-info-container:#A3D9F0;    --color-on-info-container:#0D3547;

  --color-highlight:var(--ag-lima-200);
  --color-highlight-alt:var(--ag-verde-200);
}

/* --- Dark (no activado todavía - sin toggle en index.html; queda listo para cuando se sume) --- */
[data-theme="dark"]{
  --color-primary:var(--ag-verde-300);
  --color-primary-hover:var(--ag-verde-200);
  --color-on-primary:var(--ag-verde-900);
  --color-primary-container:#10402F;
  --color-on-primary-container:var(--ag-verde-100);
  --color-primary-subtle:#0E2A20;

  --color-secondary:var(--ag-tierra-300);
  --color-on-secondary:var(--ag-tierra-950);
  --color-secondary-container:#43301C;
  --color-on-secondary-container:var(--ag-tierra-100);
  --color-secondary-subtle:#241A10;

  --color-accent:var(--ag-lima-300);
  --color-on-accent:var(--ag-verde-950);
  --color-accent-container:#33400F;
  --color-on-accent-container:var(--ag-lima-100);
  --color-accent-subtle:#1E2609;

  --color-background:#0B120F;
  --color-surface:#131A16;
  --color-surface-alt:#1B231E;
  --color-surface-sunken:#0F1512;
  --color-surface-inverse:var(--ag-verde-100);
  --color-on-surface-inverse:var(--ag-verde-900);

  --color-text:#EDF0EC;
  --color-text-muted:#A0A99F;
  --color-text-subtle:#7B857A;
  --color-text-on-brand:#FFFFFF;

  --color-border:#26302A;
  --color-border-strong:#3A4740;
  --color-focus:var(--ag-verde-300);

  --color-success:#5FC48D; --color-success-container:#123D28; --color-on-success-container:#A6E9BE;
  --color-warning:#F8E16C; --color-warning-container:#4A3A05; --color-on-warning-container:#F8E16C;
  --color-on-warning:#2E2401; --color-warning-tinta:#F8E16C;
  --color-error:#E68C7D;   --color-error-container:#4A1810;   --color-on-error-container:#F8A894;
  --color-info:#7DB6CB;    --color-info-container:#0F3040;    --color-on-info-container:#A3D9F0;

  --color-highlight:#41520F;
  --color-highlight-alt:#134534;

  --sh-1:0 1px 2px rgba(0,0,0,.45);
  --sh-2:0 2px 6px rgba(0,0,0,.5);
  --sh-3:0 8px 20px -6px rgba(0,0,0,.6);
  --sh-4:0 20px 48px -12px rgba(0,0,0,.7);
}

/* --- 02: Tipografía, scopeada a .ag-scope para no pisar las vistas Tailwind --- */
.ag-scope{
  font-family:var(--font-sans);color:var(--color-text);
  -webkit-font-smoothing:antialiased;
}
.ag-scope h1,.ag-scope h2,.ag-scope h3,.ag-scope h4,.ag-scope h5{
  font-family:var(--font-sans);font-weight:400;letter-spacing:var(--ls-tight);margin:0;line-height:var(--lh-tight);
}
.ag-scope h3{font-size:var(--text-xl);letter-spacing:-0.026em}
.ag-scope h4{font-size:var(--text-md);font-weight:400;letter-spacing:-.018em;line-height:var(--lh-snug)}
.ag-scope a{color:var(--color-primary);text-decoration-color:color-mix(in srgb,var(--color-primary) 35%,transparent);text-underline-offset:3px;transition:color var(--dur-1) var(--ease-out),text-decoration-color var(--dur-1) var(--ease-out)}
.ag-scope a:hover{text-decoration-color:currentColor}
.ag-scope :focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:var(--r-xs)}
.ag-scope .ico{width:20px;height:20px;flex:none;fill:currentColor;stroke:none;display:inline-block;vertical-align:middle}
.ag-scope .row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
/* Grilla de 3 responsive (métricas/stats). Clase propia en vez de mezclar un inline-style
   con una utilidad Tailwind (sm:grid-cols-3): un estilo inline le gana siempre a una clase,
   así que la utilidad responsive nunca podría ganarle a un display inline. */
.ag-scope .g3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
@media (min-width:640px){ .ag-scope .g3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.ag-scope .g2{display:grid;grid-template-columns:1fr;gap:var(--sp-5)}
@media (min-width:1024px){ .ag-scope .g2{grid-template-columns:1fr 1fr} }
/* #vistaAdmin llevaba display:flex inline, que le gana a .hidden{display:none} de Tailwind
   sin importar especificidad (un estilo inline siempre le gana a una clase) - la vista
   Admin quedaba renderizada en TODAS las vistas, no solo al entrar a Admin. */
#vistaAdmin:not(.hidden){display:flex;flex-direction:column;gap:var(--sp-8)}

/* --- 03: Botones --- */
.ag-scope .btn{
  --btn-bg:var(--color-primary); --btn-fg:var(--color-on-primary); --btn-bd:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-sans);font-size:var(--text-sm);font-weight:500;letter-spacing:.005em;
  line-height:1;padding:11px 20px;min-height:42px;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  cursor:pointer;white-space:nowrap;text-decoration:none;overflow:hidden;
  transition:transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2) var(--ease-out),
             background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),
             border-color var(--dur-2) var(--ease-out);
}
.ag-scope .btn::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.ag-scope .btn:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.ag-scope .btn:hover::after{opacity:.08}
.ag-scope .btn:active{transform:translateY(0) scale(.985);box-shadow:var(--sh-1);transition-duration:var(--dur-1)}
.ag-scope .btn:disabled,.ag-scope .btn[aria-disabled="true"]{opacity:.45;pointer-events:none;box-shadow:none}
.ag-scope .btn .ico{width:18px;height:18px;flex:none}
.ag-scope .btn-secundario{--btn-bg:transparent;--btn-fg:var(--color-primary);--btn-bd:var(--color-border-strong)}
.ag-scope .btn-secundario:hover{--btn-bd:var(--color-primary);background:var(--color-primary-subtle)}
.ag-scope .btn-tonal{--btn-bg:var(--color-primary-container);--btn-fg:var(--color-on-primary-container)}
.ag-scope .btn-fantasma{--btn-bg:transparent;--btn-fg:var(--color-text-muted)}
.ag-scope .btn-fantasma:hover{--btn-fg:var(--color-text);background:var(--color-surface-alt)}
.ag-scope .btn-peligro{--btn-bg:var(--color-error);--btn-fg:#fff}
.ag-scope .btn-sm{font-size:var(--text-xs);padding:7px 14px;min-height:34px}
.ag-scope .btn-lg{font-size:var(--text-base);padding:15px 30px;min-height:52px}
.ag-scope .btn-bloque{width:100%}
.ag-scope .btn-icono{padding:0;width:42px;min-height:42px;border-radius:var(--r-pill)}
.ag-scope .btn-icono.btn-sm{width:34px;min-height:34px}

/* --- 04: Campos --- */
/* :not(.hidden): campo se combina con "hidden" en algunos campos condicionales de forms
   (ej. editTcWrap en el modal de movimientos) - mismo motivo que modal-overlay/form-inline. */
.ag-scope .campo:not(.hidden){display:flex;flex-direction:column;gap:6px}
.ag-scope .campo>label{font-size:var(--text-xs);font-weight:500;color:var(--color-text);letter-spacing:.01em}
.ag-scope .campo .ayuda{font-size:var(--text-xs);color:var(--color-text-muted)}
.ag-scope .campo .error-msg{font-size:var(--text-xs);color:var(--color-error);display:flex;align-items:center;gap:5px}
.ag-scope .input,.ag-scope .select,.ag-scope .textarea{
  font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text);
  background:var(--color-surface);border:1px solid var(--color-border-strong);
  border-radius:var(--r-sm);padding:10px 12px;width:100%;min-height:42px;
  transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out);
}
.ag-scope .input::placeholder,.ag-scope .textarea::placeholder{color:var(--color-text-subtle)}
.ag-scope .input:hover,.ag-scope .select:hover,.ag-scope .textarea:hover{border-color:var(--color-text-subtle)}
.ag-scope .input:focus,.ag-scope .select:focus,.ag-scope .textarea:focus{outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 18%,transparent)}
.ag-scope .textarea{min-height:88px;resize:vertical;line-height:var(--lh-normal)}
.ag-scope .select{appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2367675B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center}
.ag-scope .input[aria-invalid="true"]{border-color:var(--color-error)}
.ag-scope .input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-error) 20%,transparent)}
.ag-scope .input:disabled,.ag-scope .select:disabled,.ag-scope .textarea:disabled{background:var(--color-surface-sunken);color:var(--color-text-subtle);cursor:not-allowed}

/* --- 05: Selección (checkbox custom) --- */
.ag-scope .check{position:relative;display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:var(--text-sm);line-height:1.45}
.ag-scope .check input{position:absolute;opacity:0;width:0;height:0}
.ag-scope .check .caja{
  flex:none;width:20px;height:20px;margin-top:1px;border:1.5px solid var(--color-border-strong);
  background:var(--color-surface);display:grid;place-items:center;border-radius:6px;
  transition:all var(--dur-2) var(--ease-spring);
}
.ag-scope .check .caja svg{width:13px;height:13px;color:var(--color-on-primary);stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset var(--dur-3) var(--ease-out)}
.ag-scope .check input:checked+.caja{background:var(--color-primary);border-color:var(--color-primary)}
.ag-scope .check input:checked+.caja svg{stroke-dashoffset:0}
.ag-scope .check input:focus-visible+.caja{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 22%,transparent)}
.ag-scope .check:hover .caja{border-color:var(--color-primary)}

/* --- 06: Badges --- */
.ag-scope .badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--text-2xs);font-weight:500;
  letter-spacing:.02em;padding:3px 9px;border-radius:var(--r-pill);
  background:var(--color-surface-alt);color:var(--color-text-muted);border:1px solid var(--color-border)}
.ag-scope .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.ag-scope .badge-exito{background:var(--color-success-container);color:var(--color-on-success-container);border-color:transparent}
.ag-scope .badge-alerta{background:var(--color-warning-container);color:var(--color-on-warning-container);border-color:transparent}
.ag-scope .badge-error{background:var(--color-error-container);color:var(--color-on-error-container);border-color:transparent}
.ag-scope .badge-info{background:var(--color-info-container);color:var(--color-on-info-container);border-color:transparent}
.ag-scope .badge-marca{background:var(--color-primary-container);color:var(--color-on-primary-container);border-color:transparent}
.ag-scope .badge-tierra{background:var(--color-secondary-container);color:var(--color-on-secondary-container);border-color:transparent}
.ag-scope .badge-sin-punto::before{display:none}

/* --- 07: Tarjetas --- */
.ag-scope .card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-lg);
  padding:var(--sp-5);transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out),border-color var(--dur-3) var(--ease-out)}
.ag-scope .card-hover:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--color-border-strong)}
.ag-scope .card h4{margin-bottom:var(--sp-2)}
.ag-scope .card p:last-child{margin-bottom:0}
.ag-scope .card-sub{font-size:var(--text-sm);color:var(--color-text-muted)}
.ag-scope .card-verde{background:var(--color-primary-subtle);border-color:transparent}

/* Métricas: el color lo pone el fondo, no un borde. Se habían quedado afuera de la
   productivización inicial (usadas en Admin desde el primer commit, nunca definidas acá -
   las 3 tarjetas de stats de Admin se renderizaban sin estilo alguno en prod). */
.ag-scope .metrica{
  --m-bg:var(--color-surface-alt); --m-ico:var(--color-primary);
  background:var(--m-bg);border:1px solid transparent;border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5);display:flex;flex-direction:column;gap:2px;
  transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)}
.ag-scope .metrica:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.ag-scope .metrica .rot{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--ls-wide);font-weight:500;color:var(--color-text-muted);
  display:flex;align-items:center;gap:6px}
.ag-scope .metrica .rot .ico{width:15px;height:15px;color:var(--m-ico)}
.ag-scope .metrica .val{font-size:var(--text-2xl);font-weight:500;letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums;line-height:1.1}
.ag-scope .metrica .val .u{font-size:var(--text-md);font-weight:500;color:var(--color-text-muted);margin-left:2px}
.ag-scope .metrica .delta{font-size:var(--text-xs);font-weight:500;display:flex;align-items:center;gap:4px}
.ag-scope .m-verde{--m-bg:var(--color-primary-subtle);--m-ico:var(--color-primary)}
.ag-scope .m-lima{--m-bg:var(--color-accent-container);--m-ico:var(--color-on-accent-container)}
.ag-scope .m-tierra{--m-bg:var(--color-secondary-subtle);--m-ico:var(--color-secondary)}
.ag-scope .m-cielo{--m-bg:var(--color-info-container);--m-ico:var(--color-info)}
/* No está en el sistema fuente (solo define verde/lima/tierra/cielo) - variante propia para
   costos/egresos, consistente con --color-error-container ya usado en badge-error/aviso-error. */
.ag-scope .m-rojo{--m-bg:var(--color-error-container);--m-ico:var(--color-error)}
.ag-scope .delta-sube{color:var(--color-success)}
.ag-scope .delta-baja{color:var(--color-error)}
.ag-scope .delta-neutro{color:var(--color-text-muted)}

/* --- 08: Tablas --- */
.ag-scope .tabla-wrap{border:1px solid var(--color-border);border-radius:var(--r-lg);overflow:hidden;background:var(--color-surface)}
.ag-scope table.tabla{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.ag-scope table.tabla th{
  text-align:left;font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--ls-wide);font-weight:500;
  color:var(--color-text-muted);background:var(--color-surface-alt);padding:11px var(--sp-4);
  border-bottom:1px solid var(--color-border);white-space:nowrap}
.ag-scope table.tabla td{padding:12px var(--sp-4);border-bottom:1px solid var(--color-border);vertical-align:middle}
.ag-scope table.tabla tbody tr{transition:background var(--dur-1) var(--ease-out)}
.ag-scope table.tabla tbody tr:hover{background:var(--color-primary-subtle)}
.ag-scope table.tabla tbody tr:last-child td{border-bottom:0}
.ag-scope table.tabla .num{text-align:right;font-variant-numeric:tabular-nums}
.ag-scope table.tabla .ppal{font-weight:500}
/* Mismo motivo que .metrica arriba: usadas en el markup de Movimientos, nunca definidas acá. */
.ag-scope .caravana{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.02em;
  background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--r-xs);padding:2px 7px;white-space:nowrap}
.ag-scope .tabla-toolbar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  background:var(--color-surface);border-bottom:1px solid var(--color-border);flex-wrap:wrap}

/* --- 09: Feedback --- */
.ag-scope .aviso{display:flex;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-md);font-size:var(--text-sm);
  border:1px solid transparent;line-height:var(--lh-normal)}
.ag-scope .aviso .ico{width:20px;height:20px;flex:none;margin-top:1px}
.ag-scope .aviso strong{display:block;margin-bottom:2px}
.ag-scope .aviso-info{background:var(--color-info-container);color:var(--color-on-info-container)}
.ag-scope .aviso-alerta{background:var(--color-warning-container);color:var(--color-on-warning-container)}
.ag-scope .aviso-error{background:var(--color-error-container);color:var(--color-on-error-container)}
.ag-scope .vacio{text-align:center;padding:var(--sp-10) var(--sp-6);border-radius:var(--r-lg);background:var(--color-surface-alt)}
.ag-scope .vacio .ico{width:48px;height:48px;color:var(--color-border-strong);margin-bottom:var(--sp-3)}

/* --- 10: Barra de progreso (uso: hectáreas ocupadas del potrero) --- */
.ag-scope .barra{height:8px;border-radius:var(--r-pill);background:var(--color-surface-sunken);overflow:hidden}
.ag-scope .barra>span{display:block;height:100%;background:var(--color-primary);border-radius:var(--r-pill);
  transition:width var(--dur-3) var(--ease-out)}

/* --- 11: Nav (misma estructura/lógica JS actual, solo cambia la piel) ---
   navtop/navbottom no fijan "display" acá: index.html ya trae hidden/lg:hidden/lg:flex
   de Tailwind para eso (permanentes, no vía JS), y cualquier "display" nuestro con más
   especificidad que esas utilidades les gana y rompe el toggle responsive. Solo agregamos
   las propiedades que Tailwind no cubre; el display:flex va scopeado al mismo breakpoint
   lg (1024px) que usan esas clases, para no competir nunca con ellas. */
.ag-scope .navtop{align-items:center;gap:2px}
@media (min-width:1024px){ .ag-scope .navtop{display:flex} }
.ag-scope .navtop .item{
  padding:8px 14px;border-radius:var(--r-pill);font-size:var(--text-sm);font-weight:500;
  color:var(--color-text-muted);background:transparent;border:0;cursor:pointer;text-decoration:none;
  transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out);
}
.ag-scope .navtop .item:hover{color:var(--color-text);background:var(--color-surface-alt)}
.ag-scope .navtop .item.activo{color:var(--color-on-primary-container);background:var(--color-primary-container)}

.ag-scope .navbottom{align-items:stretch;background:var(--color-surface);border-top:1px solid var(--color-border)}
@media (max-width:1023.98px){ .ag-scope .navbottom{display:flex} }
/* :not(.hidden): bnavAdmin combina "hidden" (toggle real por rol, no de breakpoint) con
   "item" - sin el guard, el display:flex de acá (3 clases) le gana a .hidden de Tailwind
   (1 clase) y el botón Admin quedaría visible para usuarios no-admin. */
.ag-scope .navbottom .item:not(.hidden){
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:8px 0;color:var(--color-text-subtle);background:transparent;border:0;cursor:pointer;
}
.ag-scope .navbottom .item .ico{width:20px;height:20px}
.ag-scope .navbottom .item .etq{font-size:10px;font-weight:500}
.ag-scope .navbottom .item.activo{color:var(--color-primary)}

/* ============================================================
   Componentes propios (no existen en el design system fuente):
   modal + acordeón. Reusan tokens/superficie/sombra existentes
   (--sh-4 está anotado en origen "modal, toast").
   ============================================================ */

/* --- Modal ---
   :not(.hidden) es necesario y no cosmético: ".ag-scope .modal-overlay" son 2 clases
   (especificidad 0,2,0), más alta que ".hidden{display:none}" de Tailwind (0,1,0) - sin
   este guard, display:flex le gana a "hidden" aunque el JS lo siga agregando/sacando bien,
   y el modal queda visible siempre (fue exactamente el bug reportado en prod). */
/* Mismo motivo que el comentario de arriba: form-inline (agregar productor/potrero en el
   acordeón) alterna "hidden" vía JS, así que su display:flex necesita el mismo guard. */
.ag-scope .form-inline:not(.hidden){margin-top:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2)}
/* inlineProdNombreBloque: mismo motivo, alterna "hidden" por JS (onInlineProdWhatsappInput). */
.ag-scope .grid2:not(.hidden){display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}

.ag-scope .modal-overlay:not(.hidden){
  position:fixed;inset:0;z-index:var(--z-overlay);
  background:color-mix(in srgb, var(--ag-bruma-950) 55%, transparent);
  display:flex;align-items:center;justify-content:center;padding:var(--sp-4);
  animation:ag-fade-in var(--dur-3) var(--ease-out);
}
.ag-scope .modal{
  background:var(--color-surface);border-radius:var(--r-xl);box-shadow:var(--sh-4);
  width:100%;max-width:26rem;max-height:calc(100vh - var(--sp-8));overflow-y:auto;
  animation:ag-modal-in var(--dur-3) var(--ease-spring);
}
.ag-scope .modal-lg{max-width:34rem}
.ag-scope .modal-cabecera{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-5) var(--sp-5) var(--sp-3);
}
.ag-scope .modal-cabecera h3{font-size:var(--text-lg)}
.ag-scope .modal-cerrar{
  flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:0;color:var(--color-text-muted);
  transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-spring);
}
.ag-scope .modal-cerrar:hover{background:var(--color-surface-alt);color:var(--color-text);transform:rotate(90deg)}
.ag-scope .modal-cerrar .ico{width:18px;height:18px}
.ag-scope .modal-cuerpo{padding:0 var(--sp-5) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}
.ag-scope .modal-pie{
  display:flex;justify-content:flex-end;gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--color-border);
}
@keyframes ag-fade-in{from{opacity:0}to{opacity:1}}
@keyframes ag-modal-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* --- Acordeón (usado para expandir cada establecimiento) --- */
.ag-scope .acordeon-item{
  border:1px solid var(--color-border);border-radius:var(--r-lg);background:var(--color-surface);
  overflow:hidden;transition:border-color var(--dur-2) var(--ease-out);
}
.ag-scope .acordeon-item+.acordeon-item{margin-top:var(--sp-3)}
.ag-scope .acordeon-cabecera{
  display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-4) var(--sp-5);
  background:transparent;border:0;cursor:pointer;text-align:left;font-family:var(--font-sans);color:var(--color-text);
}
.ag-scope .acordeon-cabecera:hover{background:var(--color-surface-alt)}
.ag-scope .acordeon-cabecera .chev{
  flex:none;width:18px;height:18px;color:var(--color-text-muted);
  transition:transform var(--dur-2) var(--ease-spring);
}
.ag-scope .acordeon-item[data-abierto="true"] .acordeon-cabecera .chev{transform:rotate(180deg)}
.ag-scope .acordeon-cabecera .titulo{flex:1;min-width:0;font-weight:500}
.ag-scope .acordeon-cuerpo{
  padding:0 var(--sp-5) var(--sp-5);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5);
}
@media (max-width:760px){
  .ag-scope .acordeon-cuerpo{grid-template-columns:1fr}
}