/* ============================================================
   AgroClima Pro · tema.css · v2
   Branding CreativaStudio: dark navy + gradiente verde→lima
   v2: foto de fondo con overlay, glows, glass panels, animaciones
   Uso: <link rel="stylesheet" href="tema.css?v=2"> antes de </head>
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#050816;
  --panel:rgba(13,20,40,.68);
  --panel2:rgba(22,30,58,.82);
  --line:rgba(255,255,255,.09);
  --txt:#ffffff;
  --muted:rgba(255,255,255,.62);
  --accent:#4ade80;
  --ok:#4ade80;
  --warn:#fbbf24;
  --bad:#f87171;
  --rain:#5b8cff;
  --g1:#4ade80;
  --g2:#a3e635;
  --grad:linear-gradient(90deg,var(--g1),var(--g2));
}

html{background:#050816}
body{
  font-family:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:transparent !important;
}

body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(5,8,22,.82) 0%,rgba(5,8,22,.93) 45%,#050816 95%),
    url('https://images.unsplash.com/photo-1492496913980-501348b61469?auto=format&w=1800&q=60') center 30%/cover no-repeat;
}

body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(560px 560px at -6% -8%,rgba(74,222,128,.13),transparent 65%),
    radial-gradient(520px 520px at 104% 38%,rgba(163,230,53,.09),transparent 65%),
    radial-gradient(620px 620px at 42% 110%,rgba(91,140,255,.07),transparent 65%);
}

header{
  background:rgba(5,8,22,.74) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
h1{font-weight:800;letter-spacing:-.5px}
h1 span{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.ticker{background:rgba(5,8,22,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

.card,.panel,.riskcard,.mapbox,.ben,.step{
  border-radius:18px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 14px 40px rgba(0,0,0,.30);
}
.card,.panel,.riskcard{transition:transform .18s,border-color .18s,box-shadow .18s}
.card:hover,.riskcard:hover{
  transform:translateY(-3px);
  border-color:rgba(74,222,128,.35);
  box-shadow:0 20px 50px rgba(0,0,0,.42);
}

.tabbtn{border-radius:12px;transition:transform .15s,border-color .15s,color .15s,background .15s}
.tabbtn:hover{transform:translateY(-1px);border-color:rgba(74,222,128,.45);color:var(--txt)}
.tabbtn.active{
  background:var(--grad);
  color:#04140a;border-color:transparent;font-weight:800;
  box-shadow:0 8px 26px rgba(74,222,128,.30);
}

select,button,a.cta,.cta,.btnp,.btns{transition:transform .15s,box-shadow .15s,border-color .15s,opacity .15s}
button:hover,select:hover{transform:translateY(-1px);border-color:var(--accent)}
button:active,.tabbtn:active{transform:translateY(0) scale(.98)}
a.cta:hover,.cta:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(34,158,217,.40)}
select,button{border-radius:10px}
.pill{border-radius:999px}

input[type=text],input[type=number]{transition:border-color .15s,box-shadow .15s}
input[type=text]:focus,input[type=number]:focus{
  outline:none;border-color:rgba(74,222,128,.55) !important;
  box-shadow:0 0 0 3px rgba(74,222,128,.15);
}

a{color:var(--g1)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#050816}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(74,222,128,.4)}

/* iconos svg en tabs y títulos */
.tabbtn svg{width:14px;height:14px;vertical-align:-2px;margin-right:6px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
h2 svg{width:18px;height:18px;vertical-align:-3px;margin-right:8px;stroke:var(--g1);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}