/* =====================================================================
   AgroControl PRO — App interna · Capa premium (rediseño 2026-06-12)
   Enlazada en base.html DESPUÉS del <style> inline → eleva el shell y
   los componentes comunes de las 55 páginas sin tocar markup ni hooks.
   Lenguaje visual: el de la landing V3 (verde + oro, aurora, Fraunces).
   Cache-bust: subir ?v=app-NNN en el <link> al cambiar este archivo.
   ===================================================================== */

/* ---------- 1. Tokens (los hijos heredan estas variables) ---------- */
:root{
  --ink:#030804;
  --forest:#0b1d10;
  --canopy:#12291a;
  --moss:#173821;
  --fern:#2f6b3d;
  --leaf:#4aa55e;
  --sage:#6fce82;
  --mist:#a8ecb4;
  --gold:#dcb157;
  --gold-l:#f0d28a;
  --white:#eef6ef;
  --border:rgba(190,225,198,.1);
  --border-l:rgba(190,225,198,.2);
  --sub:rgba(238,246,239,.4);
  --muted:rgba(238,246,239,.66);
  --red:#f59ea4;
  --shadow-lg:0 24px 70px rgba(0,0,0,.5);
  --radius:14px;
  --serif:'Fraunces',Georgia,serif;
}

::selection{background:rgba(111,206,130,.35)}

body{
  background:
    radial-gradient(ellipse 70% 42% at 12% -6%, rgba(111,206,130,.14), transparent 52%),
    radial-gradient(ellipse 48% 30% at 96% 8%, rgba(220,177,87,.08), transparent 46%),
    linear-gradient(175deg,#050d07 0%,#071108 55%,#050d08 100%);
}

/* ---------- 2. Sidebar (shell) ---------- */
.sidebar{
  background:linear-gradient(180deg,rgba(8,21,12,.99) 0%,rgba(5,14,8,.99) 100%);
  border-right:1px solid rgba(168,236,180,.12);
}
.sidebar::after{
  height:220px;
  background:radial-gradient(ellipse 130% 55% at 50% -12%, rgba(111,206,130,.13) 0%, transparent 72%);
}
.sidebar::-webkit-scrollbar-thumb{background:rgba(111,206,130,.22)}

.brand-mark{
  background:linear-gradient(145deg,#8dd99b,#3e8d52);
  box-shadow:0 8px 26px rgba(111,206,130,.32), inset 0 1px 0 rgba(255,255,255,.18);
  border-radius:11px;
}
.brand-name span{color:var(--mist)}

.farm-bar{
  background:linear-gradient(135deg,rgba(111,206,130,.1),rgba(111,206,130,.04));
  border:1px solid rgba(111,206,130,.22);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.farm-bar i{color:var(--mist)}

.nav-section{color:rgba(168,236,180,.45);letter-spacing:1.8px}

.nav-link{border-radius:11px;transition:background .2s,color .2s,transform .2s}
.nav-link:hover{background:rgba(111,206,130,.09);transform:translateX(2px)}
.nav-link.active{
  background:linear-gradient(135deg,rgba(111,206,130,.18) 0%,rgba(111,206,130,.06) 100%);
  color:var(--mist);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.25);
}
.nav-link.active::before{
  width:3px;
  background:linear-gradient(180deg,var(--mist),var(--sage));
  box-shadow:0 0 12px rgba(111,206,130,.6);
}

.pro-badge{
  background:linear-gradient(135deg,rgba(220,177,87,.12),rgba(220,177,87,.05));
  border:1px solid rgba(220,177,87,.3);
  border-radius:11px;
}
.pro-badge i{color:var(--gold-l)}
.pro-badge-text strong{color:var(--gold-l)}

/* ---------- 3. Cabecera móvil / toggle / overlay ---------- */
.mobile-header{
  background:rgba(4,11,6,.86);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(168,236,180,.14);
}
.mobile-toggle{
  background:rgba(8,21,12,.92);
  border:1px solid rgba(111,206,130,.35);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.overlay{background:rgba(3,8,4,.84)}

/* ---------- 4. Componentes comunes (.main-content gana especificidad
                sobre los <style> de cada página hija) ---------- */

/* Tarjetas */
.main-content .card{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 14px 44px rgba(0,0,0,.28);
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.main-content .card:hover{border-color:rgba(111,206,130,.26)}

/* KPI: número grande con serif editorial */
.main-content .kpi-card{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 14px 44px rgba(0,0,0,.26);
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.main-content .kpi-card:hover{
  border-color:rgba(111,206,130,.32);
  transform:translateY(-2px);
  box-shadow:0 22px 60px rgba(0,0,0,.4);
}
.main-content .kpi-label{
  color:var(--sub);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:700;
}
.main-content .num,
.main-content .kpi-value,
.main-content .kpi-card .num,
.main-content .lote-stat-value,
.main-content .stat-value{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.02em;
}

/* Botones */
.main-content .btn{border-radius:11px;transition:transform .2s, box-shadow .2s, background .2s, border-color .2s, color .2s}
.main-content .btn-primary,
.btn-primary{
  background:linear-gradient(135deg,#f2fbf1,#b9ecc2);
  color:#06110a;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 10px 30px rgba(120,210,140,.22), inset 0 1px 0 rgba(255,255,255,.6);
  font-weight:700;
}
.main-content .btn-primary:hover,
.btn-primary:hover{
  background:#fff;
  transform:translateY(-1px);
  box-shadow:0 16px 42px rgba(120,210,140,.36), inset 0 1px 0 rgba(255,255,255,.6);
}
.main-content .btn-outline,
.main-content .btn-ghost{
  background:rgba(255,255,255,.04);
  color:var(--muted);
  border:1px solid var(--border-l);
}
.main-content .btn-outline:hover,
.main-content .btn-ghost:hover{
  background:rgba(255,255,255,.08);
  color:var(--white);
  border-color:rgba(168,236,180,.45);
}

/* Badges */
.badge{border-radius:100px;letter-spacing:.02em}
.badge-green{background:rgba(111,206,130,.14);color:var(--mist);border:1px solid rgba(111,206,130,.28)}
.badge-gold{background:rgba(220,177,87,.13);color:var(--gold-l);border:1px solid rgba(220,177,87,.3)}
.badge-red{background:rgba(245,158,164,.1);color:var(--red);border:1px solid rgba(245,158,164,.25)}

/* Formularios */
.main-content .form-label{
  color:var(--muted);
  font-weight:600;
  letter-spacing:.02em;
}
.main-content .form-control,
.main-content input[type="text"],
.main-content input[type="number"],
.main-content input[type="email"],
.main-content input[type="password"],
.main-content input[type="date"],
.main-content select,
.main-content textarea{
  background:rgba(0,0,0,.3);
  border:1px solid var(--border-l);
  border-radius:11px;
  color:var(--white);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.main-content .form-control:focus,
.main-content input:focus,
.main-content select:focus,
.main-content textarea:focus{
  outline:none;
  border-color:rgba(111,206,130,.55);
  box-shadow:0 0 0 3px rgba(111,206,130,.16);
  background:rgba(0,0,0,.4);
}
.main-content input::placeholder,
.main-content textarea::placeholder{color:var(--sub)}

/* Tablas */
.main-content table{border-collapse:collapse}
.main-content th{
  color:var(--sub);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:700;
  border-bottom:1px solid var(--border-l);
}
.main-content td{border-bottom:1px solid var(--border)}
.main-content tbody tr{transition:background .18s}
.main-content tbody tr:hover{background:rgba(111,206,130,.05)}

/* Modales de páginas hijas */
.main-content .modal,
.main-content [class*="modal-overlay"]{
  background:rgba(3,8,4,.84);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.main-content .modal-box{
  background:linear-gradient(180deg,#0a190f,#07120a);
  border:1px solid rgba(168,236,180,.18);
  border-radius:18px;
  box-shadow:0 40px 110px rgba(0,0,0,.65), 0 0 0 1px rgba(111,206,130,.08);
}
.main-content .modal-title{font-weight:700;letter-spacing:-.01em}
.main-content .modal-close{transition:background .2s,color .2s}

/* Pestañas tipo "vista" usadas en módulos */
.main-content .vista-tab{
  border-radius:100px;
  transition:background .2s,color .2s,border-color .2s;
}

/* ---------- 5. Modal de ayuda (shell) ---------- */
.help-panel{
  background:linear-gradient(180deg,#0a190f,#07120a);
  border:1px solid rgba(168,236,180,.18);
  border-radius:20px;
  box-shadow:0 40px 110px rgba(0,0,0,.65), 0 0 0 1px rgba(111,206,130,.08);
}
.help-search{border-radius:11px}
.help-search input:focus{outline:none}
.help-card,details.help-acc{border-radius:12px}

/* ---------- 6. Detalles globales ---------- */
.main-content h1,.main-content h2{letter-spacing:-.02em}
.main-content ::-webkit-scrollbar{width:8px;height:8px}
.main-content ::-webkit-scrollbar-thumb{background:rgba(111,206,130,.18);border-radius:8px}
.main-content ::-webkit-scrollbar-thumb:hover{background:rgba(111,206,130,.3)}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(111,206,130,.55);
  outline-offset:2px;
}

/* ---------- 7. Móvil / tablet ---------- */
@media (max-width:900px){
  .main-content .card,.main-content .kpi-card{border-radius:13px}
  .main-content .btn{min-height:42px}
}

@media (prefers-reduced-motion:reduce){
  .nav-link,.main-content .card,.main-content .kpi-card,.main-content .btn{transition:none}
}