/* =========================
   Design Tokens (Light)
   ========================= */
/* LOGO: colocar tu archivo en /assets/img/logo.svg y actualizar la variable:
   --logo-url: url("/assets/img/logo.svg"); */
:root{
  --logo-url: url("/assets/img/logo.svg");

  --bg:#F7F8FA; --surface:#FFFFFF; --surface-2:#F2F4F7; --border:#D6DBE1;
  --text:#0F172A; --text-muted:#475569;

  --primary:#2E7D32; --primary-600:#256B2A; --primary-50:#E9F5EA;
  --secondary:#2563EB; --secondary-50:#EEF2FF;
  --success:#16A34A; --warning:#D97706; --danger:#DC2626; --focus:#3B82F6;

  --chart-1:#2563EB; --chart-2:#10B981; --chart-3:#F59E0B; --chart-4:#EF4444; --chart-grid:#E5E7EB;

  --shadow-1:0 1px 2px rgba(15,23,42,.07);
  --shadow-2:0 8px 24px rgba(15,23,42,.08);

  --bp-sm:640px; --bp-md:768px; --bp-lg:1024px;

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.5rem; --space-8:2rem;

  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-lg:1.125rem; --fs-xl:1.25rem; --fs-2xl:1.5rem;

  --rounded:.75rem; --rounded-sm:.5rem;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font: 400 var(--fs-base)/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

a:focus-visible{outline:3px solid var(--focus); outline-offset:2px}

/* Layout container */
.container{max-width:1100px; margin:0 auto; padding:0 var(--space-4)}
@media (min-width:768px){ .container{padding:0 var(--space-6)} }

/* Topbar (mobile-first) */
.topbar{
  position:sticky; top:0; z-index:50; background:var(--surface);
  box-shadow:var(--shadow-1); border-bottom:1px solid var(--border);
}
.topbar-inner{display:flex; align-items:center; gap:var(--space-4); padding:var(--space-3) var(--space-4)}
.brand{
  display:flex; align-items:center; gap:.5rem; text-decoration:none; color:inherit;
}
.brand__logo{
  width:28px; height:28px; background-image:var(--logo-url); background-size:contain; background-repeat:no-repeat; background-position:center;
  border-radius:6px;
}
.brand__title{font-weight:600; font-size:var(--fs-lg)}
.nav-actions{margin-left:auto; display:flex; align-items:center; gap:.5rem}
.icon-btn{
  background:transparent; border:1px solid var(--border); border-radius:10px; padding:.5rem;
}
.icon-btn:focus-visible{outline:3px solid var(--focus); outline-offset:2px}

/* Sidebar (desktop) */
.app{display:grid; grid-template-columns: 1fr; gap:var(--space-4)}
@media (min-width:768px){
  .app{grid-template-columns: 260px 1fr}
  .sidebar{position:sticky; top:64px; height:calc(100dvh - 64px)}
}
.sidebar{
  display:none; padding:var(--space-4);
  background:var(--surface); border-right:1px solid var(--border)
}
@media (min-width:768px){ .sidebar{display:block} }
.sidebar .nav a{
  display:flex; align-items:center; gap:.5rem;
  color:var(--text-muted); text-decoration:none; padding:.5rem .75rem; border-radius:10px;
}
.sidebar .nav a:hover{background:var(--surface-2); color:var(--text)}
.sidebar .nav a.active{background:var(--primary-50); color:var(--primary); font-weight:600}

/* Cards */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--rounded); box-shadow:var(--shadow-1);
}
.card__header{padding:var(--space-4); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between}
.card__body{padding:var(--space-4)}
.card__footer{padding:var(--space-3) var(--space-4); border-top:1px solid var(--border); background:linear-gradient(0deg, rgba(0,0,0,0.015), rgba(0,0,0,0.015))}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; border-radius:12px; border:1px solid transparent; cursor:pointer;
  padding:.625rem .9rem;
}
.btn:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.btn:disabled{opacity:.6; cursor:not-allowed}
.btn--primary{background:var(--primary); color:#fff}
.btn--primary:hover{background:var(--primary-600)}
.btn--secondary{background:#fff; color:var(--text); border-color:var(--border)}
.btn--ghost{background:transparent; color:var(--text-muted)}
.btn--danger{background:var(--danger); color:#fff}

/* Forms */
.form{display:grid; gap:var(--space-3)}
.field{display:grid; gap:.375rem}
.label{font-size:var(--fs-sm); color:var(--text-muted)}
.input, .select, .textarea{
  width:100%; border:1px solid var(--border); border-radius:12px; background:#fff; color:var(--text);
  padding:.625rem .75rem; font-size:var(--fs-base);
}
.input:focus, .select:focus, .textarea:focus{outline:3px solid var(--focus); border-color:transparent}
.help{font-size:var(--fs-xs); color:var(--text-muted)}
.field--error .input{border-color:var(--danger)}
.field--error .help{color:var(--danger)}

/* Table */
.table-wrap{overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--rounded)}
table{width:100%; border-collapse:collapse; font-size:var(--fs-sm)}
th, td{padding:.75rem; text-align:left}
thead th{position:sticky; top:0; background:var(--surface); border-bottom:1px solid var(--border)}
tbody tr:nth-child(even){background:var(--surface-2)}
tbody tr:hover{background:#fff}

/* Badges */
.badge{
  display:inline-flex; align-items:center; gap:.375rem; padding:.25rem .5rem;
  font-size:var(--fs-xs); border-radius:999px; border:1px solid transparent;
}
.badge--siembra{background:#ECFDF5; color:#065F46; border-color:#A7F3D0}
.badge--cosecha{background:#FFFBEB; color:#92400E; border-color:#FDE68A}
.badge--rinde{background:#EFF6FF; color:#1E3A8A; border-color:#BFDBFE}
.badge--fertilizacion{background:#E9F5EA; color:#1B5E20; border-color:#C8E6C9}
.badge--fumigacion{background:#F5F3FF; color:#5B21B6; border-color:#DDD6FE}

/* Map */
.map{
  height:320px; border:1px solid var(--border); border-radius:var(--rounded); overflow:hidden;
}
@media (min-width:768px){ .map{height:420px} }

/* Empty state */
.empty{
  display:grid; place-items:center; text-align:center; gap:.5rem; padding:var(--space-8);
  color:var(--text-muted)
}

/* Utilities */
.muted{color:var(--text-muted)}
.divider{height:1px; background:var(--border); margin:var(--space-4) 0}
.grid{display:grid; gap:var(--space-4)}
@media (min-width:768px){ .grid--2{grid-template-columns:1fr 1fr} .grid--3{grid-template-columns:repeat(3,1fr)} }

/* Toast */
.toast{position:fixed; left:50%; bottom:1rem; transform:translateX(-50%); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-2); border-radius:var(--rounded-sm); padding:var(--space-3); z-index:100;}
@media(min-width:768px){.toast{top:1rem; right:1rem; bottom:auto; left:auto; transform:none;}}

/* Modal */
.modal-overlay{position:fixed; inset:0; background:rgba(15,23,42,.45); display:none; align-items:center; justify-content:center; padding:var(--space-4); z-index:80;}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface); border-radius:var(--rounded); box-shadow:var(--shadow-2); max-width:420px; width:100%;}
.modal__header{padding:var(--space-4); border-bottom:1px solid var(--border);}
.modal__body{padding:var(--space-4);}
.modal__footer{padding:var(--space-3) var(--space-4); border-top:1px solid var(--border); text-align:right;}

/* Sidebar mobile off-canvas */
.sidebar{transition:transform .3s;}
@media(max-width:767px){
  .sidebar{position:fixed; top:0; bottom:0; left:0; width:260px; transform:translateX(-100%); z-index:90;}
  .sidebar.open{transform:translateX(0);}
}
.sidebar-overlay{position:fixed; inset:0; background:rgba(15,23,42,.45); display:none; z-index:80;}
.sidebar-overlay.open{display:block;}