/* Forestal Regentes(TM) - linea visual de VG (vg-tokens.css, R-LINEA-VISUAL) */
:root{
  --vg-dark-bg:#0A1128; --sup:#141a32; --sup2:#1b2742; --borde:#26314a;
  --texto:#e8edf6; --texto2:#9aa6bd;
  --azul:#1BABE1; --lima:#9FC834;
  --listo:#16a34a; --revisar:#d97706; --falta:#dc2626;
  --listo-bg:rgba(22,163,74,.14); --revisar-bg:rgba(217,119,6,.16); --falta-bg:rgba(220,38,38,.16);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
[hidden]{display:none!important}
html{background:var(--vg-dark-bg)}
body{background:var(--vg-dark-bg);color:var(--texto);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;padding-bottom:84px}
a{color:var(--azul)}
.app{max-width:560px;margin:0 auto;min-height:100vh}

/* Iconos Material Symbols: invisibles hasta que la fuente carga (sin red queda el texto del boton) */
.ms{font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;font-size:22px;line-height:1;
  display:inline-block;width:1em;height:1em;overflow:hidden;white-space:nowrap;direction:ltr;letter-spacing:normal;
  text-transform:none;word-wrap:normal;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";
  visibility:hidden;flex:0 0 auto}
.ms-ok .ms{visibility:visible}

/* ---------- encabezado ---------- */
header{background:var(--sup);border-bottom:1px solid var(--borde);padding:calc(8px + env(safe-area-inset-top)) 14px 8px;
  display:flex;justify-content:space-between;align-items:center;gap:8px;position:sticky;top:0;z-index:20}
.marca{font-weight:800;font-size:16px;letter-spacing:.005em;line-height:1.2}
.marca small{display:block;font-weight:500;font-size:11px;color:var(--texto2);letter-spacing:.02em}
.cab-der{display:flex;align-items:center;gap:6px}
.gps{font-size:11px;text-align:right;font-variant-numeric:tabular-nums;color:var(--texto2);line-height:1.25}
.gps .punto{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--texto2);margin-left:5px;vertical-align:0}
.gps.vivo .punto{background:var(--listo);animation:pulso 1.6s infinite}
.gps.apagado .punto{background:var(--falta)}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(22,163,74,.6)}70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.btn-ayuda{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:44px;min-height:44px;padding:0 8px;
  border:1px solid var(--borde);border-radius:10px;color:var(--texto);text-decoration:none;font-size:12px;font-weight:600;background:var(--sup2)}
.btn-ayuda:focus-visible{outline:3px solid var(--azul);outline-offset:2px}

main{padding:14px 14px 18px;display:flex;flex-direction:column;gap:12px}
.pantalla{display:none;flex-direction:column;gap:12px}
.pantalla.activa{display:flex}

canvas.mapa{width:100%;height:260px;background:#0f1a36;border:1px solid var(--borde);border-radius:12px;display:block;touch-action:none}
canvas.mapa.bajo{height:200px}
.pista{font-size:12px;color:var(--texto2);text-align:center;margin-top:-4px}

.tarjeta{background:var(--sup);border:1px solid var(--borde);border-radius:12px;padding:14px}
.tarjeta h2{font-size:15px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.cifras{display:flex;gap:8px}
.cifra{flex:1;background:var(--sup);border:1px solid var(--borde);border-radius:10px;padding:9px 11px;min-width:0}
.cifra .l{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto2);font-weight:700}
.cifra .v{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cifra .v small{font-size:11px;font-weight:600;color:var(--texto2)}
.cifra .v.chico{font-size:15px}
.cifra .v.si{color:var(--lima)}

label.campo{display:block;margin-bottom:10px}
label.campo .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto2);font-weight:700;display:block;margin-bottom:4px}
input,select,textarea{width:100%;font:inherit;font-size:16px;min-height:44px;padding:10px 11px;border:1px solid var(--borde);border-radius:10px;
  background:var(--sup2);color:var(--texto)}
input::placeholder,textarea::placeholder{color:#6f7b93}
textarea{resize:vertical;line-height:1.4}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(27,171,225,.25)}
.dos{display:flex;gap:10px}.dos>*{flex:1;min-width:0}

button,.boton{font:inherit;font-weight:700;border:none;border-radius:10px;padding:12px 14px;cursor:pointer;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;min-height:48px;text-align:center}
button:focus-visible,.boton:focus-within,.boton:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.b-prim{background:var(--azul);color:#06122a}
.b-lima{background:var(--lima);color:#0A1128}
.b-sup{background:var(--sup2);color:var(--texto);border:1px solid var(--borde)}
.b-borde{background:transparent;color:var(--texto);border:1px solid var(--texto2)}
.b-tenue{background:transparent;color:var(--texto2);border:1px solid var(--borde);font-size:14px;font-weight:600;min-height:44px}
.b-peligro{background:var(--falta);color:#fff}
button:disabled{opacity:.4;cursor:not-allowed}
.fila-btn{display:flex;gap:10px}.fila-btn>*{flex:1;min-width:0}
.ancho{width:100%}
.mb{margin-bottom:10px}

.pastilla{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.02em;padding:4px 10px;border-radius:99px;text-align:right}
.pastilla.ok{background:var(--listo-bg);color:#4ade80}
.pastilla.warn{background:var(--revisar-bg);color:#fbbf24}
.pastilla.bad{background:var(--falta-bg);color:#f87171}

.muestreo{background:var(--sup2);border:1px solid var(--borde);border-radius:10px;padding:11px 13px;text-align:center;font-variant-numeric:tabular-nums}
.muestreo .grande{font-size:24px;font-weight:800;color:var(--azul)}
.muestreo .sub{font-size:12px;color:var(--texto2)}

.lista{display:flex;flex-direction:column;gap:6px}
.arbol{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 10px;border:1px solid var(--borde);border-radius:10px;background:var(--sup2);font-size:13px}
.arbol .sw{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.arbol .nm{flex:1;min-width:0}
.arbol .nm b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arbol .nm span{display:block;font-size:12px;color:var(--texto2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arbol .vol{font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;text-align:right;white-space:nowrap}
.arbol .borrar{min-height:44px;min-width:44px;padding:0;background:transparent;color:var(--texto2);border:1px solid var(--borde)}
.sw.ap{background:var(--lima)} .sw.cond{background:var(--revisar)} .sw.veda{background:var(--falta)}
.sw.out{background:var(--vg-dark-bg);outline:2px solid var(--falta)}

.aviso{border-radius:10px;padding:11px 13px;font-size:14px;display:flex;gap:9px;align-items:flex-start;border:1px solid transparent}
.aviso .ms{font-size:20px}
.aviso.ok{background:var(--listo-bg);border-color:rgba(22,163,74,.4)}
.aviso.warn{background:var(--revisar-bg);border-color:rgba(217,119,6,.45)}
.aviso.bad{background:var(--falta-bg);border-color:rgba(220,38,38,.45)}
.aviso b{font-weight:800}
.aviso .txt{flex:1;min-width:0}
.aviso .txt div+div{margin-top:3px}
.chequeo{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;padding:9px 0;border-bottom:1px dashed var(--borde)}
.chequeo:last-of-type{border-bottom:none}
.tenue{color:var(--texto2);font-size:13px}
.regla{font-size:12px;color:var(--texto2);margin-top:8px}
.centro{text-align:center}

/* ---------- segmento de modo ---------- */
.seg{display:flex;border:1px solid var(--borde);border-radius:10px;overflow:hidden;background:var(--sup)}
.seg button{flex:1;background:transparent;color:var(--texto2);border-radius:0;font-size:14px;padding:10px;min-height:48px}
.seg button.on{background:var(--sup2);color:var(--lima);box-shadow:inset 0 -3px 0 var(--lima)}

/* ---------- pestanas inferiores ---------- */
nav.pestanas{position:fixed;bottom:0;left:0;right:0;background:var(--sup);border-top:1px solid var(--borde);
  display:flex;padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:20;max-width:560px;margin:0 auto}
nav.pestanas button{flex:1;flex-direction:column;gap:2px;background:transparent;color:var(--texto2);font-size:12px;font-weight:700;padding:4px;min-height:56px;border-radius:10px}
nav.pestanas button .ms{font-size:24px}
nav.pestanas button.on{color:var(--lima);background:var(--sup2)}
nav.pestanas .insignia{font-size:10px;background:var(--lima);color:#0A1128;border-radius:99px;padding:0 6px;margin-left:3px}

/* ---------- pie ---------- */
footer.pie{max-width:560px;margin:0 auto;padding:6px 16px 18px;text-align:center;font-size:11.5px;color:var(--texto2);line-height:1.5}
footer.pie b{color:var(--texto);font-weight:600}

/* ---------- aviso flotante y dialogos ---------- */
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);background:var(--sup2);color:var(--texto);border:1px solid var(--borde);
  padding:11px 16px;border-radius:10px;font-size:14px;z-index:40;max-width:90%;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .25s}
.toast.ver{opacity:1}
dialog{border:1px solid var(--borde);border-radius:14px;padding:0;max-width:92%;width:420px;background:var(--sup);color:var(--texto);
  box-shadow:0 20px 50px rgba(0,0,0,.5);margin:auto}
dialog::backdrop{background:rgba(5,9,22,.7)}
.dlg{padding:16px}
.dlg h2{font-size:17px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.dlg p{margin-bottom:12px}
.dlg ul{margin:0 0 12px 18px;font-size:13px;color:var(--texto2)}
.dlg ul li+li{margin-top:3px}

/* ---------- ayuda ---------- */
.ayuda-buscar{position:sticky;top:61px;z-index:10;background:var(--vg-dark-bg);padding:4px 0 8px}
.flujo{background:var(--sup);border:1px solid var(--borde);border-radius:12px;padding:0;overflow:hidden}
.flujo summary{list-style:none;cursor:pointer;padding:14px;display:flex;gap:10px;align-items:center;min-height:56px}
.flujo summary::-webkit-details-marker{display:none}
.flujo summary .t{flex:1;font-weight:700}
.flujo summary .num{color:var(--lima);font-weight:800;font-variant-numeric:tabular-nums;min-width:26px}
.flujo .cuerpo{padding:0 14px 14px}
.flujo ol{margin:4px 0 10px 20px}
.flujo ol li{margin-bottom:5px}
.etiqueta{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;border-radius:99px;padding:3px 9px;background:var(--sup2);color:var(--texto2);border:1px solid var(--borde)}
.etiqueta.video{color:#fbbf24;border-color:rgba(217,119,6,.45)}
.enlace-flujo{font-size:12px;color:var(--texto2)}

/* ---------- parcelas ---------- */
.sub-t{font-size:14px;font-weight:700;margin:6px 0 10px;display:flex;align-items:center;gap:8px}
.est-fila{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;padding:9px 0;border-bottom:1px dashed var(--borde)}
.est-fila:last-child{border-bottom:none}
.est-fila .nm{flex:1;min-width:0}
.est-fila .nm span{display:block;font-size:12px;color:var(--texto2)}