/* =========================================================================
   AgroControl — identidad visual compartida
   Se carga DESPUÉS del <style> de cada página, así que sobrescribe su
   apariencia sin tocar la lógica. Un solo archivo para cambiar el look de
   toda la plataforma.

   Idea: la finca vista desde arriba. Encabezado en verde selva con curvas
   de nivel (como un plano topográfico de los lotes), y la hoja como motivo
   repetido en marcadores, indicadores y tarjetas de módulo.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap");

:root{
  --selva:#12382B;      /* verde profundo: encabezado, títulos */
  --hoja:#2F6B3A;       /* acción principal */
  --brote:#9BC53D;      /* acento del logo: estado activo, foco */
  --cacao:#6B3F24;      /* acento cálido secundario */
  --neblina:#ECF0E6;    /* fondo */
  --tinta:#17231D;      /* texto */

  --bg:var(--neblina); --card:#FFFFFF; --ink:var(--tinta); --ink-2:#5A6A60;
  --line:#D6DDD0; --line-2:#E7ECE2;
  --accent:var(--brote); --accent-ink:var(--selva);
  --ok:#2F6B3A; --ok-bg:#E3F0DA; --alert:#A8382A; --alert-bg:#F7E4E0; --info:#23607A;
  --sombra:0 1px 0 rgba(18,56,43,.04), 0 12px 28px -14px rgba(18,56,43,.28);
  --topo:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 320' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%239BC53D' stroke-opacity='.17' stroke-width='1.3'><path d='M-40 50 C 180 10 320 110 560 60 S 980 0 1180 70 S 1480 40 1660 60'/><path d='M-40 90 C 190 50 330 150 570 100 S 990 40 1190 110 S 1490 80 1660 100'/><path d='M-40 135 C 200 95 340 195 580 140 S 1000 85 1200 150 S 1500 120 1660 140'/><path d='M-40 185 C 170 150 350 245 600 185 S 1010 130 1210 195 S 1510 165 1660 185'/><path d='M-40 235 C 190 200 360 295 610 230 S 1020 180 1220 240 S 1520 210 1660 230'/><path d='M-40 285 C 200 250 370 345 620 280 S 1030 230 1230 290 S 1530 260 1660 280'/><ellipse cx='1360' cy='120' rx='70' ry='30'/><ellipse cx='1360' cy='120' rx='38' ry='14'/><ellipse cx='330' cy='250' rx='60' ry='22'/><ellipse cx='330' cy='250' rx='28' ry='9'/></g></svg>");
  --hoja-forma:22px 5px 22px 5px;
}

body{
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;
  background:var(--neblina);
  color:var(--tinta);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.kpi .n,.kpi-destacado .n,.calMesTxt,.orden-numero,.op-codigo,.persona-nombre{
  font-family:"Bricolage Grotesque","Figtree",sans-serif;
  letter-spacing:-.015em;
}

/* ---------- Encabezado de módulo: la banda topográfica ---------- */
#app-header{
  background:var(--selva) var(--topo) center/cover no-repeat;
  border-bottom:0;
  border-radius:0 0 28px 28px;
  box-shadow:0 14px 30px -18px rgba(18,56,43,.55);
  margin-bottom:6px;
}
#app-header .hd h1{color:#fff;font-weight:700;font-size:clamp(19px,2.2vw,24px)}
#app-header .hd img{background:#fff;border-radius:10px;padding:4px;width:34px;height:34px;box-sizing:border-box}
#app-header .hd .sub, #app-header .hd .quien, #app-header .hd .ot,
#app-header .subhd{color:rgba(232,240,227,.78)}
#app-header .hd .ot b, #app-header .subhd b{color:#fff}
#app-header .subhd button, #app-header .hd .quien button{color:rgba(232,240,227,.85)}
#app-header nav.navApp a, #app-header .navApp a{color:rgba(232,240,227,.72);border-color:transparent;background:none}
#app-header nav.navApp a[aria-current], #app-header .navApp a[aria-current]{color:#fff;border-bottom:2px solid var(--brote);border-radius:0;background:none}
#app-header .estado-conexion.off{color:#FFB9AC}
#app-header .estado-conexion.sync{color:#BFE0F0}

/* Pestañas: pastillas sobre la banda */
#app-header .tabs{gap:6px;padding-bottom:16px}
#app-header .tab{
  border:0;border-radius:999px;background:rgba(255,255,255,.07);
  color:rgba(232,240,227,.82);font-weight:500;padding:10px 18px;min-height:42px;
  transition:background .15s,color .15s;
}
#app-header .tab:hover{background:rgba(255,255,255,.14)}
#app-header .tab[aria-selected="true"]{background:var(--brote);color:var(--selva);font-weight:700;border:0}
#app-header .tab .pill{background:var(--selva);color:var(--brote)}

/* Botones dentro de la banda (tablero de mantenimiento) */
#app-header .btn{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.22)}
#app-header .btn[aria-pressed="true"]{background:var(--brote);color:var(--selva);border-color:var(--brote)}

/* ---------- Pantalla de entrada ---------- */
.gate{background:var(--selva) var(--topo) center/cover no-repeat}
.gate .box{
  background:#fff;border-radius:28px;padding:34px 30px 28px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.55);
}
.gate h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;color:var(--selva);font-size:26px}
.gate input{border-radius:14px;background:#F7F9F4;border-color:var(--line)}
.gate button{background:var(--hoja);color:#fff;border-radius:999px;font-weight:700}
.gate button:hover{background:var(--selva)}

/* ---------- Secciones ---------- */
section{
  border:1px solid rgba(18,56,43,.07);
  border-radius:22px;
  box-shadow:var(--sombra);
}
.shd{border-bottom-color:var(--line-2)}
.shd h2{color:var(--selva);font-weight:700;display:flex;align-items:center;gap:10px}
.shd h2::before{
  content:"";flex:0 0 auto;width:11px;height:11px;
  border-radius:0 11px 0 11px;background:var(--brote);
}

/* ---------- Indicadores: la hoja ---------- */
.kpi, .kpi-destacado{
  border-radius:var(--hoja-forma);
  border:1px solid rgba(18,56,43,.07);
  box-shadow:var(--sombra);
}
.kpi .n{color:var(--selva);font-weight:800}
.kpi-destacado{background:var(--selva) var(--topo) center/cover no-repeat;color:#fff}
.kpi-destacado .n{color:var(--brote);font-weight:800}
.kpi-destacado .l{color:rgba(232,240,227,.8)}

/* ---------- Tarjetas de lista ---------- */
.card-item, .persona-card, .orden-card, .item-card, .oc, .op-card{
  border-radius:16px;border-color:var(--line);box-shadow:0 1px 0 rgba(18,56,43,.04);
}
.card-item:hover, .oc:hover{box-shadow:var(--sombra)}

/* ---------- Botones ---------- */
.btn{border-radius:999px;font-weight:600;border-color:var(--line)}
.btn.main{background:var(--hoja);border-color:var(--hoja);color:#fff}
.btn.main:hover{background:var(--selva);border-color:var(--selva);filter:none}
.btn.ok{background:var(--ok-bg);border-color:#BFDDB0;color:var(--ok)}
.btn.alert{background:var(--alert-bg);border-color:#E6BDB5;color:var(--alert)}
.segmento{border-radius:999px;padding:4px;background:#F1F4EC;border-color:var(--line)}
.segmento button{border-radius:999px}
.segmento button.activo{background:var(--selva);color:#fff}

/* ---------- Campos ---------- */
input[type=text],input[type=number],input[type=date],input[type=email],input[type=time],
input[type=datetime-local],select,textarea{
  background-color:#F9FBF6;border-color:var(--line);border-radius:12px;
}
input:focus,select:focus,textarea:focus,button:focus-visible{
  outline:3px solid rgba(155,197,61,.45);outline-offset:1px;border-color:var(--hoja);
}
label{color:#4E5E54}

/* ---------- Tablas ---------- */
table th, table.tablaCat th{
  text-transform:none;letter-spacing:0;font-size:13px;color:var(--selva);
  background:#F2F5EE;border-bottom:1px solid var(--line);
}
table th:first-child{border-radius:10px 0 0 10px}
table th:last-child{border-radius:0 10px 10px 0}
tr:hover td{background:#F6F9F2}

/* ---------- Varios ---------- */
.toast{background:var(--selva);border-radius:999px}
.badge.on,.badgeEstado.on{background:var(--ok-bg);color:var(--ok)}
.empty-list{color:var(--ink-2)}
.credito{color:var(--ink-2)}
.savebar{border-top-color:var(--line);box-shadow:0 -10px 24px -18px rgba(18,56,43,.4)}
.sheet .panel{border-radius:26px 26px 0 0}
.modal .hoja{border-radius:24px}

@media (prefers-reduced-motion:reduce){ *{transition:none !important} }

/* =========================================================================
   Hub de la plataforma (index.html)
   ========================================================================= */
body.hub::before{display:none}
body.hub .wrap{max-width:1080px;padding-top:0}
body.hub header{
  width:100vw;margin:0 0 34px calc(50% - 50vw);padding:44px 24px 74px;
  background:var(--selva) var(--topo) center/cover no-repeat;
  border-radius:0 0 40px 40px;color:#fff;
}
body.hub header img{
  width:230px;background:#fff;border-radius:20px;padding:14px 18px;margin-bottom:22px;
  box-shadow:0 18px 36px -20px rgba(0,0,0,.6);
}
body.hub header h1{font-size:clamp(26px,4vw,38px);font-weight:800;color:#fff}
body.hub header p{color:rgba(232,240,227,.8);font-size:15.5px;margin-top:6px}

body.hub .gate{
  background:#fff;border:0;border-radius:24px;padding:28px 24px;max-width:400px;
  margin-top:-62px;position:relative;box-shadow:var(--sombra);
}
body.hub .gate input{border-radius:14px;background:#F7F9F4;padding:13px}
body.hub .gate button{background:var(--hoja);color:#fff;border-radius:999px;padding:13px;font-weight:700}

body.hub .quien{margin-top:-50px;position:relative;color:rgba(232,240,227,.85)}
body.hub .quien b{color:#fff}
body.hub .quien button{color:rgba(232,240,227,.85)}

body.hub .modulos{gap:18px}
body.hub a.mod, body.hub div.mod{
  background:#fff;border:1px solid rgba(18,56,43,.07);
  border-radius:var(--hoja-forma);padding:24px 22px 20px;box-shadow:var(--sombra);
}
body.hub a.mod:hover{transform:translateY(-3px);border-color:var(--brote)}
body.hub div.mod{opacity:.6}
body.hub .mod .ico{width:50px;height:50px;border-radius:0 18px 0 18px}
body.hub .mod b{font-family:"Bricolage Grotesque",sans-serif;font-size:19px;font-weight:700;color:var(--selva)}
body.hub .mod .estado{border-top-color:var(--line-2)}
body.hub .mod .estado.disp{color:var(--hoja);font-weight:700}
body.hub a.mod .quienmod{border-top-color:var(--line-2)}
svg text{font-family:"Figtree",sans-serif !important}

/* Tablero de mantenimiento: cajas y color de barras */
:root{--verde:var(--hoja);--salvia:#7FA46B}
.caja{border-radius:22px;border:1px solid rgba(18,56,43,.07);box-shadow:var(--sombra)}
.caja h2{color:var(--selva);display:flex;align-items:center;gap:10px}
.caja h2::before{content:"";flex:0 0 auto;width:11px;height:11px;border-radius:0 11px 0 11px;background:var(--brote)}
.filtros .btn[aria-pressed="true"]{background:var(--selva);border-color:var(--selva);color:#fff}
#app-header select{background-color:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25)}
#app-header select option{color:var(--tinta)}