/* ============================================================
   GreenNode · estética heredada del panel Verdant
   HTML + CSS + JS puro. Sin compilar. Sin librerías.
   ============================================================ */
:root{
  --bg:hsl(90 30% 97%);
  --fg:hsl(140 30% 12%);
  --card:hsl(90 40% 99%);
  --primary:hsl(142 45% 28%);
  --primary-fg:hsl(90 40% 98%);
  --secondary:hsl(90 25% 92%);
  --muted:hsl(90 22% 93%);
  --muted-fg:hsl(140 12% 40%);
  --accent:hsl(40 65% 55%);
  --destructive:hsl(8 72% 52%);
  --border:hsl(120 15% 87%);
  --radius:1rem;
  --z1:#40916c; --z2:#e0a458; --z3:#5b9ad9; --z4:#9b6bc9;
  --shadow:0 10px 40px -24px hsl(142 45% 28% / .5);
  --shadow-soft:0 10px 40px -30px hsl(142 45% 28% / .6);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"DM Sans",system-ui,sans-serif;
  background:var(--bg); color:var(--fg);
  min-height:100dvh; overflow-x:clip;
}
.display{font-family:"Fraunces",Georgia,serif}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}

/* grano sutil de fondo, como en Verdant */
.grain{
  position:fixed; inset:0; pointer-events:none; opacity:.03; z-index:0;
  background-image:radial-gradient(hsl(140 30% 12% / .5) .5px, transparent .5px);
  background-size:4px 4px;
}

/* ---------- HEADER ---------- */
header{
  position:sticky; top:0; z-index:30;
  border-bottom:1px solid hsl(120 15% 87% / .7);
  background:hsl(90 30% 97% / .8); backdrop-filter:blur(12px);
}
.hwrap{
  max-width:90rem; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:44px;height:44px;border-radius:14px;background:var(--primary);
  color:var(--primary-fg);display:grid;place-items:center;flex-shrink:0;
}
.brand h1{font-size:20px;line-height:1;font-weight:600}
.brand p{font-size:12px;color:var(--muted-fg);margin-top:3px}
.chip{
  display:inline-flex;align-items:center;gap:7px;border-radius:999px;
  padding:7px 13px;font-size:12px;font-weight:600;white-space:nowrap;
}
.chip.demo{background:hsl(40 65% 55% / .15);color:hsl(38 80% 32%)}
.chip.live{background:hsl(142 45% 28% / .1);color:var(--primary)}

/* ---------- LAYOUT ---------- */
main{max-width:90rem;margin:0 auto;padding:26px 20px 40px;position:relative;z-index:1}
.hero-eyebrow{
  display:flex;align-items:center;gap:8px;color:var(--primary);
  font-size:14px;font-weight:500;margin-bottom:8px;
}
h2.hero{font-size:clamp(30px,4vw,46px);line-height:1.08;font-weight:600}
h2.hero em{font-style:italic;color:var(--primary)}
.hero-sub{margin-top:10px;max-width:36rem;color:var(--muted-fg)}

/* ---------- TARJETAS RESUMEN ---------- */
.summary{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px;
}
@media(min-width:640px){.summary{grid-template-columns:repeat(4,1fr)}}
.stat{
  border:1px solid var(--border);background:var(--card);
  border-radius:1.25rem;padding:16px;
}
.stat svg{color:var(--primary);margin-bottom:8px}
.stat .v{font-size:26px;font-weight:600;line-height:1}
.stat .l{font-size:12px;color:var(--muted-fg);margin-top:5px}
.stat.alert .v{color:var(--destructive)}

/* ---------- CLIMA ---------- */
.climate{
  margin-top:24px;border:1px solid var(--border);background:var(--card);
  border-radius:1.5rem;padding:20px;box-shadow:var(--shadow-soft);
}
.climate .head{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:14px;font-weight:600;color:var(--muted-fg);margin-bottom:14px;
}
.climate .head .note{font-size:12px;font-weight:400}
.climate .grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.climate .grid{grid-template-columns:repeat(3,1fr)}}
.cbox{
  display:flex;align-items:center;gap:14px;
  background:hsl(90 25% 92% / .4);border-radius:1.25rem;padding:16px;
}
.cbox .ic{width:44px;height:44px;border-radius:.85rem;display:grid;place-items:center;flex-shrink:0}
.cbox .v{font-size:24px;font-weight:600;line-height:1}
.cbox .l{font-size:12px;color:var(--muted-fg);margin-top:5px}

/* ---------- ZONAS ---------- */
.zone{margin-top:34px}
.zone-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.zone-bar{width:6px;height:34px;border-radius:999px;flex-shrink:0}
.zone-head h3{font-size:24px;line-height:1;font-weight:600}
.zone-head p{font-size:12px;color:var(--muted-fg);margin-top:5px}
.unit{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  border-radius:999px;padding:7px 13px;font-size:12px;font-weight:600;
}
.unit.on{background:hsl(142 45% 28% / .1);color:var(--primary)}
.unit.off{background:hsl(8 72% 52% / .1);color:var(--destructive)}

.cards{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.cards{grid-template-columns:repeat(3,1fr)}}

/* ---------- TARJETA DE PLANTA ---------- */
.plant{
  border:1px solid var(--border);border-radius:1.5rem;background:var(--card);
  box-shadow:var(--shadow);overflow:hidden;
  animation:rise .5s ease-out backwards;
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.photo{position:relative;height:150px;overflow:hidden;background:linear-gradient(135deg,#dfe9df,#c8dcc9)}
.photo .ph{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:54px;opacity:.5;
}
.photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgb(0 0 0 / .5),transparent 60%);
}
.badge{
  position:absolute;top:14px;left:14px;z-index:2;
  border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;
  backdrop-filter:blur(6px);
}
.badge.ok{background:hsl(142 45% 28% / .18);color:#0f3d24}
.badge.dry{background:hsl(8 72% 52% / .2);color:#7a1d12}
.badge.wet{background:hsl(199 89% 48% / .2);color:#0d4a63}
.wbadge{
  position:absolute;top:14px;right:14px;z-index:2;
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;
  padding:5px 10px;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;backdrop-filter:blur(6px);
}
.wbadge.dest{background:hsl(199 89% 48% / .22);color:#0b4257;box-shadow:inset 0 0 0 1px hsl(199 89% 48% / .45)}
.wbadge.norm{background:hsl(90 25% 92% / .85);color:hsl(142 45% 22%)}
.photo .name{position:absolute;left:16px;bottom:12px;z-index:2;color:#fff}
.photo .name h4{font-size:20px;line-height:1.1;font-weight:600}
.photo .name span{font-size:12px;opacity:.85}

.pbody{padding:18px}
.ring-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.ring{position:relative;width:104px;height:104px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .inner{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;
}
.ring .val{font-size:19px;font-weight:600}
.ring-lbl{font-size:12px;color:var(--muted-fg)}
.method{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:12px;font-size:11.5px;font-weight:500;color:var(--muted-fg);
}
.notes{
  margin-top:12px;background:hsl(90 25% 92% / .5);border-radius:1rem;
  padding:9px 13px;font-size:11.5px;line-height:1.45;color:var(--muted-fg);
}
.pfoot{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.ago{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted-fg)}
.auto{
  display:inline-flex;align-items:center;gap:4px;border-radius:999px;
  background:hsl(142 45% 28% / .1);color:var(--primary);
  padding:2px 8px;font-size:10px;font-weight:700;
}
.pacts{display:flex;align-items:center;gap:6px}
.icon-btn{
  width:36px;height:36px;border-radius:999px;border:none;cursor:pointer;
  background:transparent;color:var(--muted-fg);display:grid;place-items:center;
  transition:background .15s,color .15s;
}
.icon-btn:hover{background:var(--secondary);color:var(--primary)}
.water-btn{
  border:none;cursor:pointer;color:#fff;border-radius:999px;
  padding:9px 16px;font-size:13.5px;font-weight:600;font-family:inherit;
  display:inline-flex;align-items:center;gap:7px;position:relative;overflow:hidden;
  transition:filter .15s,transform .1s;
}
.water-btn:hover{filter:brightness(1.08)}
.water-btn:active{transform:scale(.97)}
.water-btn:disabled{opacity:.65;cursor:default}
.water-btn .rip{
  position:absolute;inset:0;border-radius:999px;background:rgb(255 255 255 / .35);
  animation:ripple 1.2s ease-out infinite;
}
@keyframes ripple{0%{transform:scale(.5);opacity:.7}100%{transform:scale(2.2);opacity:0}}

/* ---------- SECCIONES INFERIORES ---------- */
.lower{display:grid;grid-template-columns:1fr;gap:18px;margin-top:34px}
@media(min-width:1024px){.lower{grid-template-columns:1.35fr 1fr}}
.panel{
  border:1px solid var(--border);background:var(--card);
  border-radius:1.5rem;padding:20px;box-shadow:var(--shadow-soft);
}
.panel h3{font-size:20px;font-weight:600;line-height:1.2}
.panel .sub{font-size:12px;color:var(--muted-fg);margin-top:4px}

/* depósitos */
.tanks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.tank{border:1px solid var(--border);border-radius:1.25rem;padding:15px;background:hsl(90 25% 92% / .25)}
.tank .tl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-fg);margin-bottom:11px;font-weight:600}
.tvis{display:flex;align-items:flex-end;gap:12px}
.vessel{
  width:46px;height:66px;border:2px solid var(--border);
  border-radius:5px 5px 10px 10px;position:relative;overflow:hidden;
  background:hsl(90 40% 99%);flex-shrink:0;
}
.vessel .liq{position:absolute;left:0;right:0;bottom:0;transition:height .6s ease}
.tank .p{font-size:23px;font-weight:600;line-height:1}
.tank .s{font-size:11.5px;color:var(--muted-fg);margin-top:4px}
.tank .warn{
  margin-top:11px;display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;color:var(--destructive);
}

/* actividad */
.act{margin-top:16px}
.act .row{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.act .row:last-child{border-bottom:none}
.act .ic{width:32px;height:32px;border-radius:.7rem;display:grid;place-items:center;flex-shrink:0}
.act .msg{font-size:13px;line-height:1.35}
.act .when{font-size:10.5px;color:var(--muted-fg);margin-top:2px}

/* gráfica */
.chart-tabs{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap}
.tab{
  border:1px solid var(--border);background:transparent;cursor:pointer;
  border-radius:999px;padding:6px 13px;font-size:12px;font-weight:500;
  font-family:inherit;color:var(--muted-fg);transition:all .15s;
}
.tab:hover{background:var(--secondary)}
.tab.on{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
.chart{margin-top:16px;height:230px;position:relative}
.chart svg{width:100%;height:100%;overflow:visible}

/* ---------- MODAL DE UMBRALES ---------- */
.modal-bg{
  position:fixed;inset:0;background:rgb(20 30 24 / .45);backdrop-filter:blur(3px);
  display:none;place-items:center;z-index:50;padding:18px;
}
.modal-bg.open{display:grid;animation:fade .18s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--card);border-radius:1.75rem;padding:26px;
  width:min(460px,100%);box-shadow:0 24px 70px -20px rgb(0 0 0 / .35);
  animation:pop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.modal h3{font-size:25px;font-weight:600;line-height:1.15}
.modal .msub{font-size:13px;color:var(--muted-fg);margin-top:5px}
.mrow{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:hsl(90 25% 92% / .6);border-radius:1.15rem;padding:15px;margin-top:20px;
}
.mrow .t{font-size:13.5px;font-weight:600}
.mrow .d{font-size:11.5px;color:var(--muted-fg);margin-top:3px}
.switch{
  width:46px;height:26px;border-radius:999px;background:var(--border);
  position:relative;cursor:pointer;flex-shrink:0;transition:background .2s;border:none;
}
.switch.on{background:var(--primary)}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:transform .2s;
  box-shadow:0 1px 3px rgb(0 0 0 / .2);
}
.switch.on::after{transform:translateX(20px)}
.range-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin:22px 0 12px}
.range-head .rv{font-weight:600;color:var(--primary)}
.dual{position:relative;height:34px}
.dual input[type=range]{
  position:absolute;left:0;top:9px;width:100%;height:6px;margin:0;
  -webkit-appearance:none;appearance:none;background:none;pointer-events:none;
}
.dual .track{position:absolute;left:0;top:14px;height:6px;width:100%;border-radius:999px;background:var(--muted)}
.dual .fill{position:absolute;top:14px;height:6px;border-radius:999px;background:var(--primary)}
.dual input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:auto;cursor:grab;
  width:22px;height:22px;border-radius:50%;background:#fff;
  border:3px solid var(--primary);box-shadow:0 2px 6px rgb(0 0 0 / .18);
}
.dual input[type=range]::-moz-range-thumb{
  pointer-events:auto;cursor:grab;width:22px;height:22px;border-radius:50%;
  background:#fff;border:3px solid var(--primary);box-shadow:0 2px 6px rgb(0 0 0 / .18);
}
.hint{font-size:11.5px;color:var(--muted-fg);margin-top:14px;line-height:1.45}
.save{
  width:100%;margin-top:22px;border:none;cursor:pointer;font-family:inherit;
  background:var(--primary);color:var(--primary-fg);border-radius:999px;
  padding:13px;font-size:14.5px;font-weight:600;transition:filter .15s;
}
.save:hover{filter:brightness(1.1)}

/* ---------- TOAST ---------- */
#toasts{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:10px}
.toast{
  background:var(--fg);color:var(--bg);border-radius:1rem;padding:13px 17px;
  box-shadow:0 12px 34px -10px rgb(0 0 0 / .45);font-size:13.5px;
  animation:slide .28s cubic-bezier(.2,.9,.3,1.1);max-width:330px;
}
.toast b{display:block;margin-bottom:2px}
.toast span{opacity:.8;font-size:12px}
@keyframes slide{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

footer{
  border-top:1px solid hsl(120 15% 87% / .7);margin-top:44px;padding:26px 20px;
  position:relative;z-index:1;
}
.fwrap{
  max-width:90rem;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between;font-size:13px;color:var(--muted-fg);
}
.live-dot{position:relative;display:inline-flex;width:8px;height:8px}
.live-dot i{position:absolute;inset:0;border-radius:50%;background:var(--primary)}
.live-dot i:first-child{animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite;opacity:.6}
@keyframes ping{75%,100%{transform:scale(2.2);opacity:0}}
.proto{
  background:repeating-linear-gradient(45deg,hsl(40 65% 55% / .12),hsl(40 65% 55% / .12) 12px,transparent 12px,transparent 24px);
  border-bottom:1px solid hsl(40 65% 55% / .3);
  color:hsl(38 80% 30%);text-align:center;padding:7px;font-size:11.5px;
  font-weight:600;letter-spacing:.04em;position:relative;z-index:2;
}

/* ============================================================
   Añadidos de la versión conectada
   ============================================================ */

/* estado sin datos */
.badge.none{background:hsl(90 25% 92% / .9);color:hsl(140 12% 40%)}

/* aviso de error de conexión con la API */
.apifail{
  background:hsl(8 72% 52% / .1);border:1px solid hsl(8 72% 52% / .3);
  color:#8f2b2b;border-radius:1rem;padding:13px 16px;margin-bottom:18px;
  font-size:13.5px;display:none;
}
.apifail.show{display:block}

/* depósito: botón de rellenar */
.tank-fill{
  margin-top:10px;width:100%;border:1px solid var(--border);background:transparent;
  border-radius:999px;padding:7px;font-size:12px;font-weight:600;cursor:pointer;
  font-family:inherit;color:var(--muted-fg);transition:all .15s;
}
.tank-fill:hover{background:var(--secondary);color:var(--primary)}

/* skeleton de carga */
.skel{
  border-radius:1.5rem;background:linear-gradient(90deg,var(--muted) 25%,hsl(90 25% 95%) 50%,var(--muted) 75%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;height:330px;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* selector de rango de la gráfica */
.range-tabs{display:flex;gap:6px;margin-left:auto}
.range-tabs .tab{padding:5px 11px;font-size:11.5px}

/* pie de gráfica */
.chart-foot{font-size:11.5px;color:var(--muted-fg);margin-top:10px;text-align:center;line-height:1.5}

/* indicador de regando en curso */
.watering-now{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;
  background:hsl(199 89% 48% / .15);color:#0d4a63;padding:2px 9px;
  font-size:10px;font-weight:700;
}
.watering-now::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  animation:blink 1s infinite;
}
@keyframes blink{50%{opacity:.25}}