@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;600;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --verde:#2D6A2F;--vclaro:#4CAF50;--vneon:#76FF03;
  --crema:#F5F0E8;--oscuro:#0d1a0e;--alerta:#FF6B35;--rojo:#e53935;
}
html,body{height:100%;overflow:hidden;background:var(--oscuro)}
body{font-family:'DM Sans',sans-serif;color:var(--crema);position:fixed;inset:0}

.screen{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden}
.screen.active{display:flex}

/* ── TOPBAR ── */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:rgba(0,0,0,0.85);flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,0.08)}
.topbar-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:2px}
.btn-icon{background:rgba(255,255,255,0.1);border:none;color:white;
  width:38px;height:38px;border-radius:10px;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center}

/* ── INICIO ── */
#s-inicio{background:linear-gradient(160deg,#0d1a0e,#1a2e1a,#0d1a0e);
  align-items:center;justify-content:center;padding:24px}
.logo-box{width:80px;height:80px;background:var(--verde);border-radius:22px;
  display:flex;align-items:center;justify-content:center;font-size:38px;
  margin:0 auto 14px;box-shadow:0 0 40px rgba(76,175,80,.4)}
.logo-title{font-family:'Bebas Neue',sans-serif;font-size:48px;letter-spacing:3px;text-align:center}
.logo-sub{font-size:11px;color:#7A9B7A;letter-spacing:3px;text-transform:uppercase;text-align:center;margin-top:4px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:360px;margin:24px 0}
.card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:14px 10px;text-align:center}
.card-num{font-family:'Bebas Neue',sans-serif;font-size:28px;color:var(--vneon);line-height:1}
.card-lbl{font-size:10px;color:#7A9B7A;margin-top:3px;line-height:1.4}
.btn-main{background:var(--vclaro);color:var(--oscuro);border:none;border-radius:14px;
  padding:16px 0;font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;
  cursor:pointer;width:100%;max-width:360px;box-shadow:0 4px 24px rgba(76,175,80,.4)}

/* ── DEMARCAR POTRERO ── */
#s-demarcar{flex-direction:column}
.instruccion{background:rgba(0,0,0,0.8);padding:12px 16px;font-size:13px;
  color:var(--crema);text-align:center;flex-shrink:0;line-height:1.5;
  border-bottom:1px solid rgba(255,255,255,0.1)}
.instruccion strong{color:var(--vneon)}
#map-demarcar{flex:1}
.demarcar-footer{background:rgba(0,0,0,0.85);padding:12px 16px;
  display:flex;gap:10px;flex-shrink:0;border-top:1px solid rgba(255,255,255,0.1)}
.btn-dem{flex:1;border:none;border-radius:12px;padding:14px;
  font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1px;cursor:pointer}
.btn-dem.pri{background:var(--vclaro);color:var(--oscuro)}
.btn-dem.sec{background:rgba(255,255,255,0.1);color:var(--crema)}
.vertice-count{text-align:center;font-size:12px;color:#7A9B7A;
  padding:6px;flex-shrink:0;background:rgba(0,0,0,0.6)}

/* ── CÁMARA ── */
#s-camara{background:#000}
#video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
#canvas-hidden{display:none}
.cam-ui{position:relative;z-index:10;display:flex;flex-direction:column;height:100%}
.cam-header{background:linear-gradient(180deg,rgba(0,0,0,.88) 0%,transparent 100%);
  padding:14px 18px 28px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.badge{background:var(--verde);border-radius:18px;padding:7px 18px;text-align:center}
.badge-num{font-family:'Bebas Neue',sans-serif;font-size:26px;color:white;line-height:1}
.badge-lbl{font-size:9px;color:rgba(255,255,255,.7);letter-spacing:1px}
.gps-badge{background:rgba(0,0,0,0.6);border-radius:12px;padding:6px 12px;
  font-size:11px;display:flex;align-items:center;gap:6px}
.gps-dot{width:8px;height:8px;border-radius:50%;background:#666;flex-shrink:0}
.gps-dot.ok{background:var(--vneon);box-shadow:0 0 6px rgba(118,255,3,.8)}

.nivel-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.cruz{position:relative;width:160px;height:160px}
.linea-h{position:absolute;top:50%;left:0;right:0;height:2px;background:rgba(255,255,255,.25);transform:translateY(-50%)}
.linea-v{position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(255,255,255,.25);transform:translateX(-50%)}
.centro{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.4)}
.burbuja{position:absolute;width:32px;height:32px;border-radius:50%;
  background:var(--alerta);border:3px solid white;
  transition:left .12s,top .12s,background .3s;transform:translate(-50%,-50%);
  box-shadow:0 0 20px rgba(255,107,53,.6)}
.burbuja.ok{background:var(--vneon);box-shadow:0 0 24px rgba(118,255,3,.8)}

.angulos{display:flex;gap:16px}
.chip{background:rgba(0,0,0,.65);border-radius:10px;padding:8px 14px;text-align:center;
  border:1px solid rgba(255,255,255,.1);transition:border-color .3s}
.chip.ok{border-color:rgba(118,255,3,.5)}
.chip-val{font-family:'Bebas Neue',sans-serif;font-size:20px;color:white;line-height:1}
.chip-val.ok{color:var(--vneon)}
.chip-lbl{font-size:9px;color:rgba(255,255,255,.5);letter-spacing:1px;margin-top:2px}
.qr-tag{background:rgba(0,0,0,.65);border-radius:18px;padding:5px 14px;font-size:11px;color:rgba(255,255,255,.5)}
.qr-tag.ok{color:var(--vneon)}

.cam-footer{background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,transparent 100%);
  padding:24px 20px 28px;flex-shrink:0}
.estado{text-align:center;margin-bottom:16px;font-size:12px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;color:var(--alerta);transition:color .3s}
.estado.ok{color:var(--vneon)}
.shutter-wrap{display:flex;justify-content:center;margin-bottom:16px}
.shutter{width:68px;height:68px;border-radius:50%;background:white;
  border:4px solid rgba(255,255,255,.3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .25s}
.shutter.ok{background:var(--vneon);border-color:rgba(118,255,3,.4);
  box-shadow:0 0 28px rgba(118,255,3,.6)}
.shutter-inner{width:48px;height:48px;border-radius:50%;background:#1A1F1A;transition:background .25s}
.shutter.ok .shutter-inner{background:var(--verde)}
.progress{height:5px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;background:var(--vneon);border-radius:3px;transition:width .4s ease}
.progress-lbl{text-align:center;font-size:10px;color:rgba(255,255,255,.4);margin-top:5px}

/* ── RESULTADO ── */
#s-resultado{flex-direction:column}
.res-scroll{flex:1;overflow-y:auto;padding:20px 18px 32px}
.res-main{background:var(--verde);border-radius:20px;padding:22px 20px;
  text-align:center;margin-bottom:14px;box-shadow:0 8px 40px rgba(45,106,47,.4)}
.res-valor{font-family:'Bebas Neue',sans-serif;font-size:64px;color:var(--vneon);line-height:1}
.res-unidad{font-size:12px;color:rgba(255,255,255,.65);letter-spacing:2px;text-transform:uppercase;margin-top:3px}
.res-rango{font-size:10px;color:rgba(255,255,255,.4);margin-top:6px}
.metricas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.met{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:14px;padding:14px 10px;text-align:center}
.met-val{font-size:20px;font-weight:800;color:var(--crema);line-height:1}
.met-lbl{font-size:10px;color:#7A9B7A;margin-top:4px;line-height:1.4}

/* MAPA RESULTADO */
.mapa-section{background:rgba(255,255,255,.04);border-radius:16px;
  overflow:hidden;margin-bottom:14px}
.mapa-header{padding:12px 14px;display:flex;align-items:center;justify-content:space-between}
.mapa-title{font-size:11px;color:#7A9B7A;letter-spacing:2px;text-transform:uppercase}
.leyenda{display:flex;gap:12px;font-size:10px;color:rgba(255,255,255,.6)}
.ley-item{display:flex;align-items:center;gap:4px}
.ley-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
#map-resultado{height:280px}

.hist-box{background:rgba(255,255,255,.04);border-radius:14px;padding:14px;margin-bottom:14px}
.hist-title{font-size:10px;color:#7A9B7A;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.hist-bars{display:flex;align-items:flex-end;gap:3px;height:44px}
.bar{flex:1;border-radius:2px 2px 0 0;min-height:3px}

.rec-box{border-left:4px solid var(--vneon);border-radius:0 14px 14px 0;
  background:rgba(255,255,255,.04);padding:14px 16px;margin-bottom:20px}
.rec-title{font-size:10px;color:var(--vneon);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.rec-text{font-size:13px;line-height:1.6;color:var(--crema)}

.btns{display:flex;flex-direction:column;gap:10px}
.btn-nuevo{background:var(--vclaro);color:var(--oscuro);border:none;border-radius:12px;
  padding:14px;font-size:15px;font-weight:800;letter-spacing:2px;cursor:pointer}
.btn-sec{background:transparent;color:var(--crema);
  border:1px solid rgba(255,255,255,.2);border-radius:12px;
  padding:12px;font-size:13px;cursor:pointer}

/* Flash y notif */
#flash{position:fixed;inset:0;background:white;opacity:0;pointer-events:none;z-index:9999;transition:opacity .05s}
#notif{position:fixed;top:14px;left:50%;transform:translateX(-50%) translateY(-10px);
  background:var(--verde);color:white;border-radius:18px;padding:9px 18px;
  font-size:12px;font-weight:600;opacity:0;z-index:9998;white-space:nowrap;
  transition:all .3s;box-shadow:0 4px 20px rgba(0,0,0,.5);max-width:90vw;
  overflow:hidden;text-overflow:ellipsis}
#notif.show{opacity:1;transform:translateX(-50%) translateY(0)}
#btn-permiso-orient{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:white;border-radius:10px;padding:8px 16px;font-size:12px;cursor:pointer;display:none}

/* ── CALCULADORA CARGA ANIMAL ── */
#s-calc{background:linear-gradient(160deg,#0d1a0e 0%,#1a2e1a 60%,#0d1a0e 100%);
  flex-direction:column;overflow:hidden}
.calc-scroll{flex:1;overflow-y:auto;padding:16px 18px 32px}
.calc-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;padding:16px;margin-bottom:14px}
.calc-card-title{font-size:11px;color:var(--vneon);letter-spacing:2px;
  text-transform:uppercase;margin-bottom:12px;font-weight:700}
.input-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.input-label{font-size:12px;color:#7A9B7A;min-width:80px;line-height:1.3}
.input-field{flex:1;background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.15);
  color:var(--crema);border-radius:10px;padding:10px 12px;font-size:15px;
  font-family:'DM Sans',sans-serif;font-weight:600;outline:none;
  -webkit-appearance:none;transition:border-color 0.3s}
.input-field:focus{border-color:var(--vneon)}
.input-unit{font-size:11px;color:#7A9B7A;min-width:45px;text-align:right}
select.input-field{background:rgba(0,0,0,0.5);cursor:pointer}
select.input-field option{background:#1a2e1a;color:var(--crema)}

.result-strip{background:var(--verde);border-radius:16px;padding:20px;
  text-align:center;margin-bottom:14px;box-shadow:0 6px 30px rgba(45,106,47,0.4)}
.result-strip .big{font-family:'Bebas Neue',sans-serif;font-size:56px;
  color:var(--vneon);line-height:1}
.result-strip .unit{font-size:12px;color:rgba(255,255,255,0.65);
  letter-spacing:2px;text-transform:uppercase;margin-top:2px}
.result-strip .sub{font-size:11px;color:rgba(255,255,255,0.4);margin-top:6px}

.desglose{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.desg-item{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;padding:12px 10px;text-align:center}
.desg-val{font-size:18px;font-weight:800;color:var(--crema);line-height:1}
.desg-lbl{font-size:10px;color:#7A9B7A;margin-top:4px;line-height:1.3}

.alerta-box{border-radius:14px;padding:14px 16px;margin-bottom:14px;
  border-left:4px solid}
.alerta-box.verde{background:rgba(76,175,80,0.1);border-color:var(--vclaro)}
.alerta-box.amarillo{background:rgba(255,193,7,0.1);border-color:#FFC107}
.alerta-box.rojo{background:rgba(229,57,53,0.1);border-color:#e53935}
.alerta-titulo{font-size:10px;letter-spacing:2px;text-transform:uppercase;
  margin-bottom:4px;font-weight:700}
.alerta-texto{font-size:13px;line-height:1.6;color:var(--crema)}

/* ── HISTORIAL ── */
#s-historial{background:linear-gradient(160deg,#0d1a0e 0%,#1a2e1a 60%,#0d1a0e 100%);
  flex-direction:column;overflow:hidden}
.hist-scroll{flex:1;overflow-y:auto;padding:16px 18px 32px}
.potrero-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;padding:14px;margin-bottom:10px;cursor:pointer;
  transition:border-color 0.3s}
.potrero-card:active{border-color:var(--vneon)}
.pot-header{display:flex;justify-content:space-between;align-items:center}
.pot-name{font-size:14px;font-weight:700;color:var(--crema)}
.pot-date{font-size:10px;color:#7A9B7A}
.pot-stats{display:flex;gap:12px;margin-top:8px}
.pot-stat{text-align:center}
.pot-stat-val{font-size:16px;font-weight:800;line-height:1}
.pot-stat-lbl{font-size:9px;color:#7A9B7A;margin-top:2px}
.pot-trend{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;margin-top:6px}
.pot-trend.up{color:#76FF03}
.pot-trend.down{color:#e53935}
.pot-trend.stable{color:#FFC107}

.empty-state{text-align:center;padding:40px 20px}
.empty-state .icon{font-size:48px;margin-bottom:12px}
.empty-state p{font-size:13px;color:#5A7B5A;line-height:1.6}

/* Detalle potrero */
#s-potrero-detalle{background:linear-gradient(160deg,#0d1a0e 0%,#1a2e1a 60%,#0d1a0e 100%);
  flex-direction:column;overflow:hidden}
.detalle-scroll{flex:1;overflow-y:auto;padding:16px 18px 32px}
.chart-container{background:rgba(255,255,255,0.04);border-radius:14px;
  padding:14px;margin-bottom:14px;overflow:hidden}
.chart-title{font-size:11px;color:var(--vneon);letter-spacing:2px;
  text-transform:uppercase;margin-bottom:10px;font-weight:700}
.chart-svg{width:100%;height:160px}
.registro-row{display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.06)}
.reg-fecha{font-size:12px;color:#7A9B7A}
.reg-valor{font-size:15px;font-weight:800;color:var(--crema)}
.reg-badge{font-size:10px;padding:3px 8px;border-radius:8px;font-weight:700}

/* Modal guardar */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:1000;
  display:none;align-items:center;justify-content:center;padding:24px}
.modal-overlay.show{display:flex}
.modal-box{background:#1a2e1a;border:1px solid var(--vneon);border-radius:20px;
  padding:24px;width:100%;max-width:340px;box-shadow:0 20px 60px rgba(0,0,0,0.8)}
.modal-title{font-size:16px;font-weight:800;color:var(--vneon);margin-bottom:4px}
.modal-sub{font-size:12px;color:#7A9B7A;margin-bottom:16px;line-height:1.4}
.modal-input{width:100%;background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.2);
  color:var(--crema);border-radius:12px;padding:12px 14px;font-size:15px;
  font-family:'DM Sans',sans-serif;font-weight:600;outline:none;margin-bottom:8px}
.modal-input:focus{border-color:var(--vneon)}
.modal-gps{font-size:10px;color:#5A7B5A;margin-bottom:16px}
.modal-btns{display:flex;gap:10px}
.modal-btn{flex:1;border:none;border-radius:12px;padding:12px;
  font-size:14px;font-weight:700;cursor:pointer}
.modal-btn.pri{background:var(--vneon);color:var(--oscuro)}
.modal-btn.sec{background:rgba(255,255,255,0.1);color:var(--crema)}

/* ── ESPECIES FORRAJERAS ── */
#s-especies{background:linear-gradient(160deg,#0d1a0e 0%,#1a2e1a 60%,#0d1a0e 100%);
  flex-direction:column;overflow:hidden}
.esp-scroll{flex:1;overflow-y:auto;padding:16px 18px 32px}
.esp-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;padding:14px;margin-bottom:10px;cursor:pointer;
  transition:all 0.3s;display:flex;gap:12px;align-items:flex-start}
.esp-card:active,.esp-card.selected{border-color:var(--vneon);
  background:rgba(118,255,3,0.08)}
.esp-icon{font-size:32px;flex-shrink:0;width:44px;text-align:center}
.esp-info{flex:1}
.esp-nombre{font-size:14px;font-weight:700;color:var(--crema)}
.esp-latin{font-size:10px;color:#7A9B7A;font-style:italic;margin-top:1px}
.esp-desc{font-size:11px;color:#8A9A8A;line-height:1.5;margin-top:6px}
.esp-formula{font-size:10px;color:var(--vneon);margin-top:6px;
  background:rgba(118,255,3,0.08);padding:4px 8px;border-radius:6px;
  display:inline-block}
.esp-check{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,0.2);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:14px;transition:all 0.3s}
.esp-card.selected .esp-check{border-color:var(--vneon);background:var(--vneon);color:#000}

/* Chip especie en cámara */
.especie-chip{background:rgba(0,0,0,0.65);border:1px solid rgba(118,255,3,0.4);
  border-radius:18px;padding:5px 12px;font-size:11px;color:var(--vneon);
  cursor:pointer;pointer-events:all}

/* Banner IA futuro */
.ia-banner{background:linear-gradient(135deg,rgba(33,150,243,0.15),rgba(118,255,3,0.1));
  border:1px solid rgba(33,150,243,0.3);border-radius:14px;padding:14px;
  margin-bottom:14px;text-align:center}
.ia-banner-title{font-size:12px;color:#40C4FF;font-weight:700;margin-bottom:4px}
.ia-banner-text{font-size:11px;color:#7A9B7A;line-height:1.5}

/* ── DETECCIÓN IA ── */
.ia-detect-btn{background:linear-gradient(135deg,rgba(33,150,243,0.2),rgba(118,255,3,0.15));
  border:1px solid rgba(33,150,243,0.5);border-radius:12px;padding:10px 16px;
  color:#40C4FF;font-size:12px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:8px;pointer-events:all;
  transition:all 0.3s;margin-top:6px}
.ia-detect-btn:active{transform:scale(0.97)}
.ia-detect-btn.loading{opacity:0.6;pointer-events:none}
.ia-detect-btn .spinner{width:14px;height:14px;border:2px solid rgba(64,196,255,0.3);
  border-top-color:#40C4FF;border-radius:50%;display:none;
  animation:spin-ia 0.8s linear infinite}
.ia-detect-btn.loading .spinner{display:inline-block}
@keyframes spin-ia{to{transform:rotate(360deg)}}

.ia-result{background:rgba(33,150,243,0.1);border:1px solid rgba(33,150,243,0.3);
  border-radius:12px;padding:10px 14px;margin-top:8px;display:none}
.ia-result.show{display:block}
.ia-result-title{font-size:10px;color:#40C4FF;letter-spacing:1px;
  text-transform:uppercase;margin-bottom:6px;font-weight:700}
.ia-species{display:flex;justify-content:space-between;align-items:center;
  padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.ia-species:last-child{border:none}
.ia-sp-name{font-size:12px;color:var(--crema);font-weight:600}
.ia-sp-pct{font-size:12px;font-weight:800;padding:2px 8px;border-radius:6px}

/* Settings modal */
.settings-bar{background:rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;padding:8px 12px;font-size:11px;color:#7A9B7A;
  margin:10px 18px 0;display:flex;align-items:center;justify-content:space-between;
  cursor:pointer}
.settings-bar:active{border-color:var(--vneon)}

.modal-apikey{width:100%;background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.2);
  color:var(--crema);border-radius:10px;padding:10px 12px;font-size:12px;
  font-family:monospace;outline:none;margin:8px 0}
.modal-apikey:focus{border-color:#40C4FF}
.modal-apikey-hint{font-size:10px;color:#5A7B5A;line-height:1.5;margin-bottom:12px}

/* ── SELECTOR PATRON Y CANTIDAD ── */
.patron-selector{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;padding:14px;margin:0 18px 10px}
.patron-title{font-size:11px;color:var(--vneon);letter-spacing:2px;
  text-transform:uppercase;margin-bottom:10px;font-weight:700}
.patron-options{display:flex;gap:8px;margin-bottom:12px}
.patron-opt{flex:1;background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;padding:10px 6px;text-align:center;cursor:pointer;
  transition:all 0.3s}
.patron-opt:active,.patron-opt.sel{border-color:var(--vneon);
  background:rgba(118,255,3,0.08)}
.patron-opt .p-icon{font-size:24px;margin-bottom:4px}
.patron-opt .p-name{font-size:11px;font-weight:700;color:var(--crema)}
.patron-opt .p-acc{font-size:9px;color:#7A9B7A;margin-top:2px}
.patron-opt.sel .p-name{color:var(--vneon)}
.patron-opt.recomendado{position:relative}
.patron-opt.recomendado::after{content:'★';position:absolute;top:4px;right:6px;
  font-size:10px;color:var(--vneon)}

.cantidad-row{display:flex;align-items:center;gap:10px}
.cantidad-row label{font-size:12px;color:#7A9B7A;min-width:60px}
.cantidad-btns{display:flex;gap:4px;flex:1}
.cant-btn{background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.1);
  color:var(--crema);border-radius:8px;padding:8px 0;font-size:13px;
  font-weight:700;cursor:pointer;flex:1;text-align:center;transition:all 0.3s}
.cant-btn:active,.cant-btn.sel{border-color:var(--vneon);color:var(--vneon);
  background:rgba(118,255,3,0.08)}
.cantidad-hint{font-size:9px;color:#5A7B5A;margin-top:6px;line-height:1.4}

/* ── CALIBRACIÓN ── */
.cal-banner{background:rgba(33,150,243,0.1);border:1px solid rgba(33,150,243,0.4);
  border-radius:12px;padding:12px 14px;margin:8px 0;pointer-events:all}
.cal-banner-title{font-size:11px;color:#40C4FF;font-weight:700;letter-spacing:1px}
.cal-banner-text{font-size:10px;color:#7A9B7A;line-height:1.5;margin-top:4px}
.cal-banner .cal-btn{background:#40C4FF;color:#000;border:none;border-radius:8px;
  padding:8px 16px;font-size:11px;font-weight:700;cursor:pointer;margin-top:8px}
.cal-status{font-size:10px;padding:4px 10px;border-radius:8px;display:inline-block;
  margin-top:6px}
.cal-status.ok{background:rgba(118,255,3,0.15);color:var(--vneon)}
.cal-status.no{background:rgba(255,193,7,0.15);color:#FFC107}

/* Leaflet overrides */
.leaflet-control-attribution{display:none}

/* ── MAPA MINI GPS ── */
#mapa-mini{
  position:absolute;
  bottom:140px;
  right:12px;
  width:130px;
  height:130px;
  border-radius:16px;
  overflow:hidden;
  border:2px solid rgba(118,255,3,0.6);
  box-shadow:0 4px 20px rgba(0,0,0,0.7);
  z-index:50;
  background:#1a1a1a;
}
#mapa-mini.expandido{
  width:220px;
  height:220px;
  bottom:150px;
}
.mini-btn-expand{
  position:absolute;
  top:4px;left:4px;
  background:rgba(0,0,0,0.7);
  border:none;color:white;
  border-radius:6px;
  padding:3px 6px;font-size:10px;
  cursor:pointer;z-index:51;
}
.mini-punto-info{
  position:absolute;
  bottom:144px;
  right:12px;
  background:rgba(0,0,0,0.8);
  border:1px solid rgba(118,255,3,0.4);
  border-radius:10px;
  padding:5px 10px;
  font-size:11px;
  color:var(--vneon);
  font-weight:700;
  z-index:50;
  white-space:nowrap;
  pointer-events:none;
}
/* ── BRÚJULA DIGITAL ── */
.compas-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  pointer-events:none;
}
.compas-svg{
  width:74px;height:74px;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,0.8));
  transition:transform 0.2s ease;
}
.compas-dist{
  background:rgba(0,0,0,0.75);
  border:1px solid rgba(118,255,3,0.5);
  border-radius:10px;
  padding:4px 12px;
  font-size:12px;
  font-weight:700;
  color:var(--vneon);
  white-space:nowrap;
}
.compas-dist.llegaste{
  color:#fff;
  border-color:rgba(118,255,3,1);
  background:rgba(45,106,47,0.85);
}

/* Punto activo en medición */
.punto-activo-lbl{
  background:var(--vneon);color:var(--oscuro);
  font-weight:800;font-size:11px;padding:2px 6px;border-radius:6px
}
/* Instrucción modo edición */
.inst-editar{color:var(--vneon)}

/* Footer extra */
#footer-medir .btn-dem.pri{background:var(--vneon);color:var(--oscuro)}