/* Panel de trazabilidad Unnión · página propia en /panel/ (fuera de wp-admin) */
html,body.unn-pagina{margin:0;padding:0;background:#fff}
body.unn-pagina{font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#14241A;-webkit-text-size-adjust:100%}
/* los colores van en :root: las ventanas (hoja) se agregan al body, fuera de .unn, y también los usan */
:root,.unn{--verde:#004F28;--profundo:#002313;--hoja:#66BA47;--tinta:#14241A;--tinta2:#4B5B4F;--tinta3:#7C897F;--panel:#F3F6F1;--panel2:#E7ECE4;--linea:#DDE4D9;--linea2:#C9D3C4;
  --bien:#2E8540;--medio:#B7791F;--mal:#B42318;--azul:#1A73E8;--mono:ui-monospace,"SF Mono","Roboto Mono",Menlo,Consolas,monospace}
.unn{display:grid;grid-template-columns:212px 1fr;min-height:100vh;background:#fff;color:var(--tinta);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.unn *{box-sizing:border-box}
.unn .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.unn [hidden]{display:none!important}
.unn svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.unn-carga{padding:40px;color:#7C897F}

/* riel lateral */
.unn-rail{border-right:1px solid var(--linea);background:#FAFBF9;padding:18px 12px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.unn-rail .logo{display:flex;align-items:center;gap:10px;padding:0 8px 16px;margin-bottom:8px;border-bottom:1px solid var(--linea)}
.unn-rail .logo img{height:26px}
.unn-rail .logo span{font-size:11px;color:var(--tinta3);border-left:1px solid var(--linea2);padding-left:9px;line-height:1.2}
.unn-rail a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--tinta2);text-decoration:none;font-weight:600;font-size:13.5px}
.unn-rail a:hover{background:var(--panel);color:var(--tinta)}
.unn-rail a.on{background:#E6F0E8;color:var(--verde)}
.unn-rail a:focus{box-shadow:none;outline:2px solid var(--hoja)}
.unn-rail .cnt{margin-left:auto;font:700 11px var(--mono);background:#F8E0DC;color:#8E1B10;border-radius:9px;padding:1px 7px}
.unn-rail .pie{margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--linea);font-size:12px;color:var(--tinta3)}
.unn-rail .pie a{padding:6px 0;font-weight:600;color:var(--verde)}

/* cuerpo */
.unn-main{min-width:0;display:flex;flex-direction:column}
.unn-top{display:flex;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--linea);min-height:66px;background:#fff;position:sticky;top:0;z-index:5}
.unn-top h1{font-size:20px;font-weight:700;margin:0;line-height:1.2;padding:0}
.unn-top .sub{color:var(--tinta3);font-size:12.5px}
.unn-top .acc{margin-left:auto;display:flex;gap:8px;align-items:center}
.unn-vivo{font-size:12px;color:var(--tinta3);display:flex;align-items:center;gap:6px}
.unn-vivo i{width:8px;height:8px;border-radius:50%;background:var(--bien);animation:unnlat 2s infinite}
.unn-vivo.mal{color:var(--mal)}.unn-vivo.mal i{background:var(--mal);animation:none}
@keyframes unnlat{50%{opacity:.3}}
.unn-cuerpo{padding:20px 24px 40px;flex:1;min-width:0}

/* botones y formularios */
.unn .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--linea2);background:#fff;font-weight:600;font-size:13.5px;color:var(--tinta);cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1}
.unn .btn:hover{border-color:var(--tinta3)}
.unn .btn.pri{background:var(--verde);border-color:var(--verde);color:#fff}
.unn .btn.pri:hover{background:var(--profundo)}
.unn .btn.rojo{background:var(--mal);border-color:var(--mal);color:#fff}
.unn .btn.chico{min-height:30px;padding:0 10px;font-size:12.5px}
.unn .btn:disabled{opacity:.5;cursor:default}
.unn input[type=text],.unn input[type=search],.unn input[type=number],.unn input[type=url],.unn input[type=email],.unn input[type=date],.unn select,.unn textarea,
.hoja input[type=text],.hoja input[type=search],.hoja input[type=number],.hoja input[type=url],.hoja input[type=email],.hoja input[type=date],.hoja select,.hoja textarea{border:1px solid var(--linea2);border-radius:8px;padding:7px 10px;font:inherit;font-size:14px;min-height:36px;background:#fff;max-width:none;line-height:1.3;box-shadow:none;box-sizing:border-box;color:var(--tinta)}
.unn input:focus,.unn select:focus,.unn textarea:focus,.hoja input:focus,.hoja select:focus,.hoja textarea:focus{border-color:var(--verde);box-shadow:0 0 0 2px rgba(0,79,40,.12);outline:none}
.unn label.f,.hoja label.f,.hoja div.f{display:block;margin-bottom:12px}
.unn label.f>span,.hoja label.f>span,.hoja div.f>span{display:block;font-size:12px;font-weight:700;color:var(--tinta2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em}
.unn label.f input,.unn label.f select,.unn label.f textarea,.hoja label.f input,.hoja label.f select,.hoja label.f textarea{width:100%}
.hoja *{box-sizing:border-box}
.hoja .btn:disabled{opacity:.5;cursor:default}
.hoja .btn.chico{min-height:30px;padding:0 10px;font-size:12.5px}
.hoja .btn:hover{border-color:var(--tinta3)}.hoja .btn.pri:hover{background:var(--profundo)}

/* cifras */
.cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:10px;overflow:hidden;margin-bottom:18px}
.cifras div{background:#fff;padding:12px 14px}
.cifras b{display:block;font:700 22px var(--mono);line-height:1.2}
.cifras span{font-size:12px;color:var(--tinta3)}
.cifras .mal b{color:var(--mal)}

.dos{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px}
@media(max-width:1200px){.dos{grid-template-columns:1fr}}
.caja{border:1px solid var(--linea);border-radius:10px;background:#fff;min-width:0}
.caja>h2{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tinta2);margin:0;padding:12px 14px;border-bottom:1px solid var(--linea);display:flex;justify-content:space-between;align-items:center}
.caja>.in{padding:14px}

/* mapa */
.unn .mapa{position:relative;overflow:hidden;background:#1d2b20;touch-action:none;user-select:none;border-radius:0 0 10px 10px}
.unn .mapa canvas{display:block}
.unn .escala{position:absolute;left:12px;bottom:10px;font:600 11px var(--mono);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);pointer-events:none}
.unn .escala i{display:block;height:6px;border:2px solid #fff;border-top:0;margin-bottom:3px}
.unn .atrib{position:absolute;right:6px;bottom:4px;font-size:9.5px;color:rgba(255,255,255,.75);pointer-events:none}
.unn .mapa-g{height:calc(100vh - 66px - 40px - 52px);min-height:420px;border-radius:10px}
.mapa-r{height:420px}
.unn .mapa-f{height:260px;border-radius:10px}
.mapa-ctl{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;border-radius:8px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.3);z-index:2}
.mapa-ctl button{width:36px;height:36px;border:0;background:#fff;font-size:18px;cursor:pointer}
.mapa-ctl button+button{border-top:1px solid var(--linea)}
.mapa-ley{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.95);border-radius:8px;padding:8px 10px;font-size:12px;box-shadow:0 1px 4px rgba(0,0,0,.25);z-index:2;max-width:220px}
.mapa-ley div{display:flex;align-items:center;gap:7px;margin:2px 0}
.pto{display:inline-block;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);flex:none}
/* tarjeta del árbol elegido: foto arriba, código y estado, especie y cuatro datos */
.mapa-tarj{position:absolute;right:14px;bottom:14px;width:288px;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,35,19,.28),0 1px 3px rgba(0,0,0,.12);overflow:hidden;z-index:3}
.mapa-tarj .mt-foto{height:148px;background:var(--panel2)}
.mapa-tarj .mt-foto img{width:100%;height:100%;object-fit:cover;display:block}
.mapa-tarj .mt-foto img.esp{object-fit:contain;padding:14px}
.mapa-tarj .mt-x{position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,35,19,.62);color:#fff;font-size:18px;line-height:28px;cursor:pointer;z-index:1}
.mapa-tarj .mt-x:hover{background:rgba(0,35,19,.85)}
.mapa-tarj .mt-cuerpo{padding:12px 14px 14px}
.mapa-tarj .mt-cab{display:flex;align-items:center;gap:8px;justify-content:space-between}
.mapa-tarj .mt-cab b{font:700 15px var(--mono);color:var(--verde);letter-spacing:.02em}
.mapa-tarj .mt-esp{display:flex;align-items:baseline;gap:7px;font-weight:600;font-size:15px;margin:4px 0 10px;flex-wrap:wrap}
.mapa-tarj .mt-esp .pto{align-self:center}
.mapa-tarj .mt-esp i{font-weight:400;font-size:12.5px;color:var(--tinta3)}
.mapa-tarj .mt-d{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:0 0 12px;padding:10px 0 0;border-top:1px solid var(--linea)}
.mapa-tarj .mt-d dt{font-size:11px;color:var(--tinta3);text-transform:uppercase;letter-spacing:.04em}
.mapa-tarj .mt-d dd{margin:1px 0 0;font-size:13.5px;font-weight:600}
.mapa-tarj .mt-cuerpo>.tag{display:inline-block;margin:-4px 0 10px;text-decoration:none}
.mapa-tarj .mt-acc{display:flex;gap:6px}.mapa-tarj .mt-acc .btn{flex:1;justify-content:center}
.tag.gris{background:#ECEEEB;color:#5A645C}
/* ficha corta junto al puntero (con mouse, sin hacer clic) */
.mapa-tip{position:absolute;z-index:4;pointer-events:none;display:flex;gap:10px;align-items:center;background:#fff;border-radius:10px;padding:6px 12px 6px 6px;box-shadow:0 6px 18px rgba(0,35,19,.3);max-width:260px}
.mapa-tip img{width:52px;height:52px;border-radius:7px;object-fit:cover;background:var(--panel2);flex:none}
.mapa-tip img.esp{object-fit:contain;padding:4px}
.mapa-tip b{display:block;font:700 13px var(--mono);color:var(--verde)}
.mapa-tip span{display:block;font-weight:600;font-size:13px}
.mapa-tip small{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--tinta3);margin-top:1px}
.mapa-tip .pto{width:8px;height:8px}
/* tomas de Esri para elegir la que no tiene nubes (Ajustes) */
.wb-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:12px 0}
.wb-g button{border:2px solid var(--linea);border-radius:10px;padding:0;background:#fff;cursor:pointer;overflow:hidden;text-align:left;font:inherit}
.wb-g button:hover{border-color:var(--hoja)}
.wb-g img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.wb-g span{display:block;padding:6px 8px;font-size:12px;color:var(--tinta2)}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
/* árboles: la tabla y su mapa lado a lado (el mapa se queda a la vista al bajar por la tabla) */
.arb-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,38%);gap:16px;align-items:start}
.arb-g .arb-tabla{grid-column:1;grid-row:1}
.arb-g .arb-mapa{grid-column:2;grid-row:1;position:sticky;top:82px;height:calc(100vh - 170px);min-height:380px;border-radius:10px;overflow:hidden}
.arb-g .tabla td b.mono{white-space:nowrap}
.arb-g .arb-tabla{overflow-x:clip}
.t-arb td:nth-child(4){white-space:nowrap}
/* al lado del mapa no caben todas las columnas (1 casilla, 2 foto, 3 código, 4 especie, 5 zona, 6 precisión, 7 altura,
   8 diámetro, 9 estado, 10 visitas, 11 responsable, 12 capturado): visitas y responsable se ven en la ficha; en un
   portátil tampoco la zona (va en el código) ni el diámetro */
@media(max-width:1700px){.t-arb th:nth-child(10),.t-arb td:nth-child(10),.t-arb th:nth-child(11),.t-arb td:nth-child(11){display:none}}
@media(min-width:1181px) and (max-width:1500px){.t-arb th:nth-child(5),.t-arb td:nth-child(5),.t-arb th:nth-child(8),.t-arb td:nth-child(8){display:none}}
.arb-mapa .mapa{height:100%;border-radius:10px}
.tabla tr.sel td{background:#FFF8E6}
.tabla tr.sel td:first-child{box-shadow:inset 3px 0 0 #F2C14E}
@media(max-width:1180px){.arb-g{grid-template-columns:1fr}.arb-g .arb-mapa{grid-column:1;grid-row:1;position:relative;top:0;height:46vh;min-height:300px}.arb-g .arb-tabla{grid-row:2}}
.filtros input[type=search]{min-width:240px}

/* tablas */
.tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.tabla th{text-align:left;font-size:11.5px;font-weight:700;color:var(--tinta3);text-transform:uppercase;letter-spacing:.04em;padding:9px 10px;border-bottom:1px solid var(--linea2);white-space:nowrap;background:#FAFBF9;position:sticky;top:66px;cursor:pointer}
.tabla th.r,.tabla td.r{text-align:right}
.tabla td{padding:8px 10px;border-bottom:1px solid var(--linea);vertical-align:middle}
.tabla tr.clic{cursor:pointer}
.tabla tr.clic:hover td{background:#F7FAF6}
.tabla tr.anulado td{color:var(--tinta3);text-decoration:line-through}
.tabla img.mini{width:38px;height:38px;border-radius:6px;object-fit:cover;background:var(--panel);display:block}
.tabla .vacia{padding:30px;text-align:center;color:var(--tinta3)}
.tag{display:inline-block;font:700 10.5px/1.5 -apple-system,sans-serif;letter-spacing:.04em;padding:1px 7px;border-radius:4px;background:var(--panel2);color:var(--tinta2);white-space:nowrap}
.tag.mal{background:#F8E0DC;color:#8E1B10}.tag.ok{background:#E2F1E4;color:#1E6B30}.tag.medio{background:#FBEDD3;color:#6B4308}.tag.azul{background:#E3EDFB;color:#1B4F9C}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.dot.ok{background:var(--bien)}.dot.medio{background:var(--medio)}.dot.mal{background:var(--mal)}

/* ficha */
.ficha-g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:1200px){.ficha-g{grid-template-columns:1fr}}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.galeria a{display:block;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:#0f1a12;position:relative}
.galeria img{width:100%;height:100%;object-fit:cover;display:block}
.galeria .pie{position:absolute;left:0;right:0;bottom:0;padding:4px 7px;font:600 10.5px var(--mono);color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.galeria .falta{display:grid;place-items:center;color:#9aa69c;font-size:12px;text-align:center;padding:10px}
.kv{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:8px 16px;margin:0;font-size:13.5px}
.kv dt{color:var(--tinta3)}.kv dd{margin:0}
.vida{list-style:none;margin:0;padding:0}
.vida li{position:relative;padding:0 0 16px 22px;border-left:2px solid var(--linea);margin-left:6px}
.vida li:before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--verde)}
.vida .vd{display:flex;justify-content:space-between;gap:8px}
.vida .vd span{color:var(--tinta3);font-size:12.5px}
.vida .vc{color:var(--tinta2);font-size:13px;margin-top:2px}
.vida .vf{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.vida .vf img{width:72px;height:72px;border-radius:6px;object-fit:cover;background:var(--panel)}
.aud{font:12px var(--mono);color:var(--tinta2)}
.aud div{display:grid;grid-template-columns:140px 140px 1fr;gap:10px;padding:5px 0;border-bottom:1px dashed var(--linea)}
.aud span:last-child{word-break:break-all;color:var(--tinta3)}
pre.sens{background:var(--panel);border-radius:8px;padding:10px 12px;font:12px/1.5 var(--mono);white-space:pre-wrap;margin:0;max-height:300px;overflow:auto}
.volver{display:inline-flex;align-items:center;gap:6px;color:var(--tinta2);text-decoration:none;font-weight:600}

/* alertas */
.alerta-f{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--linea)}
.alerta-f .t{flex:1;min-width:0}
.alerta-f b{display:block}
.alerta-f .d{color:var(--tinta2)}
.alerta-f .m{font-size:12px;color:var(--tinta3);margin-top:2px}

/* equipo */
.qr-alta{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start}
.qr-alta svg{width:240px;height:240px;border:1px solid var(--linea);border-radius:8px}
/* cómo va el alta del teléfono (se actualiza solo) */
.alta-est{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border-radius:10px;border:1px solid #DDE4D9;background:#F7FAF6;font-size:14px;color:#4B5B4F}
.alta-est i{width:10px;height:10px;border-radius:50%;background:#7C897F;flex:none;animation:unnlat 1.4s infinite}
.alta-est.visto{background:#FFF6E6;border-color:#F0D9A8;color:#5C3A06}.alta-est.visto i{background:#B7791F}
.alta-est.conectado{background:#E2F1E4;border-color:#9CCFA6;color:#1E6B30;font-size:15px}
.alta-est.conectado svg{width:22px;height:22px;flex:none;fill:none;stroke:#1E6B30;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.alta-est.mal{background:#F8E0DC;border-color:#E9B4AC;color:#8E1B10}.alta-est.mal i{background:#B42318;animation:none}
.codigo-alta{font:700 32px ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;color:#004F28;margin:6px 0 10px}

/* hojas, diálogos y avisos (comparten estilo con la app de campo) */
.velo{position:fixed;inset:0;background:rgba(10,20,14,.45);z-index:100000;display:flex;align-items:center;justify-content:center}
.hoja{background:#fff;width:100%;max-width:620px;border-radius:12px;padding:8px 20px 20px;max-height:90vh;overflow-y:auto;font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#14241A}
.hoja .asa{display:none}
.hoja h2{font-size:18px;margin:12px 0 4px}
.hoja .sub{color:#4B5B4F;margin:0 0 14px}
.hoja .botones{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.hoja .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 14px;border-radius:8px;border:1px solid #C9D3C4;background:#fff;font-weight:600;cursor:pointer}
.hoja .btn.pri{background:#004F28;border-color:#004F28;color:#fff}.hoja .btn.rojo{background:#B42318;border-color:#B42318;color:#fff}
#aviso{position:fixed;left:50%;bottom:30px;transform:translate(-50%,16px);background:#002313;color:#fff;padding:11px 16px;border-radius:10px;font-size:14px;opacity:0;transition:.2s;z-index:100001;pointer-events:none}
#aviso.on{opacity:1;transform:translate(-50%,0)}

/* comprobacion del servidor */
.diag{list-style:none;margin:0;padding:0}
.diag li{display:flex;gap:14px;align-items:flex-start;padding:12px 18px;border-top:1px solid var(--linea)}
.diag li:first-child{border-top:0}
.diag li .tag{margin-top:2px;min-width:64px;text-align:center}
.diag li b{display:block;font-size:14px}
.diag li p{margin:2px 0 0;color:var(--tinta2);font-size:13px;line-height:1.45}
.diag-res .in{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.diag-res .in b{font-size:16px}
.diag-res .in span{margin-left:auto;color:var(--tinta3);font-size:12.5px}
.diag-res.ok{border-left:4px solid var(--bien)}.diag-res.medio{border-left:4px solid var(--medio)}.diag-res.mal{border-left:4px solid var(--mal)}

/* editor de la zona de trabajo (Ajustes) */
.unn .mapa-zona{height:460px;border-radius:10px;overflow:hidden;position:relative;margin:12px 0}
.mapa-zona.trazando canvas{cursor:crosshair}
.zona-ayuda{margin:0 0 12px;color:var(--tinta2);font-size:13.5px;line-height:1.5}
.zona-ir{display:flex;gap:8px}.zona-ir input{flex:1;min-width:0}
.zona-acc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 12px}
.zona-acc .zona-msg{margin-right:auto;color:var(--tinta2);font-size:13.5px}
.zona-acc input{width:auto;max-width:220px}
.zona-geo{margin-top:14px}.zona-geo summary{cursor:pointer;color:var(--tinta2);font-size:13px}
#gAj.pulso{box-shadow:0 0 0 3px rgba(102,186,71,.5)}
.zona-acc .zona-r{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--tinta2)}
.zona-acc .zona-r input{width:90px}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tabla-x{overflow-x:auto}
.tabla-x .tabla th{position:static}

/* quién está en el panel y salir */
.unn-rail .quien{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--linea)}
.unn-rail .quien span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tinta2);font-weight:600}
.unn-rail .salir{border:1px solid var(--linea2);background:#fff;border-radius:7px;padding:4px 10px;font:600 12px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--tinta2);cursor:pointer}
.unn-rail .salir:hover{border-color:var(--tinta3);color:var(--tinta)}

/* entrada al panel */
.unn-entrar{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:#F3F6F1;box-sizing:border-box}
.unn-entrar form{width:100%;max-width:380px;background:#fff;border:1px solid #DDE4D9;border-radius:14px;padding:28px 24px;box-shadow:0 8px 30px rgba(0,35,19,.08);box-sizing:border-box}
.unn-entrar .logo{height:36px;width:auto;display:block;margin-bottom:18px}
.unn-entrar h1{font-size:22px;line-height:1.2;margin:0;color:#14241A}
.unn-entrar .sub{color:#7C897F;margin:4px 0 22px;font-size:14px}
.unn-entrar label{display:block;margin-bottom:14px}
.unn-entrar label>span{display:block;font-size:12px;font-weight:700;color:#4B5B4F;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.unn-entrar input:not([type=checkbox]){width:100%;box-sizing:border-box;border:1px solid #C9D3C4;border-radius:8px;padding:11px 12px;font-size:16px;background:#fff;color:#14241A}
.unn-entrar input:focus{outline:none;border-color:#004F28;box-shadow:0 0 0 3px rgba(0,79,40,.12)}
.unn-entrar .rec{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#4B5B4F;margin:4px 0 18px}
.unn-entrar .rec input{width:18px;height:18px;margin:0;accent-color:#004F28}
.unn-entrar .btn{width:100%;min-height:46px;border:0;border-radius:10px;background:#004F28;color:#fff;font:700 15px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;cursor:pointer}
.unn-entrar .btn:hover{background:#002313}
.unn-entrar .btn:disabled{opacity:.6;cursor:default}
.unn-entrar .msg{min-height:20px;margin:12px 0 0;font-size:13.5px;color:#4B5B4F}
.unn-entrar .msg.mal{color:#B42318}
.unn-entrar .nota{font-size:12.5px;color:#7C897F;margin:14px 0 0;border-top:1px solid #DDE4D9;padding-top:12px}

/* en un teléfono o una tableta: el menú pasa arriba y se desliza de lado */
@media(max-width:820px){
  .unn{grid-template-columns:1fr}
  .unn-rail{position:sticky;top:0;height:auto;flex-direction:row;align-items:center;overflow-x:auto;padding:8px;gap:4px;border-right:0;border-bottom:1px solid var(--linea);z-index:6}
  .unn-rail .logo{display:none}
  .unn-rail a{white-space:nowrap;padding:8px 10px;flex:none}
  .unn-rail .pie{margin:0 0 0 6px;padding:0 0 0 10px;border-top:0;border-left:1px solid var(--linea);display:flex;align-items:center;gap:10px;flex:none;white-space:nowrap}
  .unn-rail .quien{margin:0;padding:0;border:0}
  .unn-top{position:static;padding:12px 16px;flex-wrap:wrap}
  .unn-top .acc{margin-left:0;flex-wrap:wrap}
  .unn-cuerpo{padding:14px 16px 30px}
  .cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qr-alta{grid-template-columns:1fr}
  .tabla{display:block;overflow-x:auto}
  .tabla th{position:static}
  .dos-col{grid-template-columns:1fr}
  .unn .mapa-g{height:62vh;min-height:320px}
  .unn .mapa-zona{height:360px}
  .mapa-tarj{left:12px;width:auto}
  .mapa-tarj .mt-foto{height:112px}
  .filtros input[type=search]{min-width:0;flex:1}
  .aud div{grid-template-columns:1fr;gap:2px}
  .zona-acc .zona-msg{flex-basis:100%}
}

/* empresas e informes */
.meta-b{height:5px;border-radius:3px;background:var(--panel2);margin-top:5px;min-width:60px;overflow:hidden}
.meta-b i{display:block;height:100%;background:var(--hoja)}
.emp-acc{white-space:nowrap}.emp-acc .btn{margin-left:4px}
.f-acc{display:flex;gap:6px}
.unn .btn .i{width:15px;height:15px}
/* antes y ahora: la foto del registro junto a la de la última visita */
.comp-g{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.comp-g figure{margin:0}.comp-g img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;background:var(--panel2);display:block}
.comp-g figcaption{font-size:12.5px;color:var(--tinta3);margin-top:6px}
@media(max-width:820px){.emp-acc{white-space:normal}.emp-acc .btn{margin:2px}.f-acc{flex-basis:100%}}

/* resumen: lo que requiere atención, avance y actividad */
.atencion{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-bottom:18px}
.at{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--linea);text-decoration:none;color:var(--tinta)}
.at b{font-size:28px;line-height:1;font-variant-numeric:tabular-nums;min-width:38px}
.at span{display:block;font-weight:650}.at small{display:block;color:var(--tinta3);font-size:12.5px;margin-top:2px}
.at.mal{border-color:#F1C4BD;background:#FDF1EF}.at.mal b{color:var(--mal)}
.at.medio{border-color:#F1D9A6;background:#FFF8E8}.at.medio b{color:var(--medio)}
.at.ok{border-color:#CFE3CB;background:#EEF6EC}.at.ok b{color:var(--bien)}
a.at:hover{box-shadow:0 2px 10px rgba(0,0,0,.08)}
.barra-s{height:6px;border-radius:3px;background:var(--panel2);overflow:hidden;min-width:70px;margin-top:3px}.barra-s i{display:block;height:100%;background:var(--hoja)}
td small{color:var(--tinta3);font-size:12px}
.emp-r{display:block;padding:8px 0;border-bottom:1px solid var(--linea);text-decoration:none;color:inherit}.emp-r b{display:block;font-size:14px}.emp-r span{font-size:12.5px;color:var(--tinta3)}
.act{display:flex;align-items:flex-end;gap:3px;height:90px;margin-top:12px;border-bottom:1px solid var(--linea)}
.act i{flex:1;min-height:2px;background:var(--hoja);border-radius:2px 2px 0 0}
.act-t{display:block;color:var(--tinta3);font-size:12px;margin-top:6px}
/* árboles: selección, acciones en lote y páginas */
.ck{width:30px;text-align:center}.ck input{width:16px;height:16px;cursor:pointer}
.lote-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px;border-radius:10px;background:#E6F0E8;border:1px solid #CFE3CB}
.lote-bar b{margin-right:6px;color:var(--verde)}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px;color:var(--tinta3);font-size:13px}.pager:empty{display:none}
/* marca: logo e ícono con su vista previa */
.marca-it{display:flex;gap:14px;align-items:flex-start}
.marca-it small{display:block;color:var(--tinta3);font-size:12.5px;margin:2px 0 8px}
.marca-img{flex:none;width:150px;height:70px;border:1px solid var(--linea);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;padding:6px}
.marca-img.cuadro{width:70px}
.marca-img img{max-width:100%;max-height:100%;object-fit:contain}
.botones-izq{display:flex;gap:6px;flex-wrap:wrap}
/* mapa: filtros y leyenda que filtra */
.mapa-fil{margin-bottom:10px}
@media(min-width:821px){.mapa-fil + .mapa-g{height:calc(100vh - 66px - 40px - 52px - 56px)}}
.ley-b{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:3px 2px;font:inherit;font-size:13px;color:inherit;cursor:pointer;text-align:left}
.ley-b.off{opacity:.35}.mapa-ley small{display:block;color:var(--tinta3);font-size:11.5px;margin-top:6px}
/* alertas agrupadas */
.al-tipos{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.al-tipos button{height:34px;padding:0 12px;border-radius:17px;border:1px solid var(--linea2);background:#fff;font-family:inherit;font-weight:600;font-size:13px;color:var(--tinta2);cursor:pointer}
.al-tipos button.on{background:var(--verde);border-color:var(--verde);color:#fff}
.al-todas{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--tinta2)}
.alerta-f>input[type=checkbox]{width:16px;height:16px;margin-top:4px;flex:none}
/* plan de mantenimiento */
.mant-c{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}
.mant-c button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border-radius:12px;border:1px solid var(--linea);background:#fff;cursor:pointer;font:inherit;text-align:left}
.mant-c b{font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums}.mant-c span{font-size:12.5px;color:var(--tinta3)}
.mant-c .m-muerto b,.mant-c .m-problema b{color:var(--mal)}.mant-c .m-vencido b{color:var(--medio)}.mant-c .m-aldia b{color:var(--bien)}
.mant-c button.on{border-color:var(--verde);box-shadow:inset 0 0 0 2px var(--verde)}
.mant-d{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--tinta2)}.mant-d input{width:72px}
.prox-p{margin:0 0 12px;padding:10px 12px;border-radius:8px;background:var(--panel);font-size:13.5px}.prox-p.mal{background:#FFF6E0}.prox-p a{margin-left:6px}
/* antes y ahora con deslizador */
.comp-s{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--panel2);user-select:none}
.comp-s img,.comp-s .cs-b{position:absolute;inset:0;width:100%;height:100%}
.comp-s img{object-fit:cover}.comp-s .cs-b{clip-path:inset(0 0 0 50%)}
.comp-s .cs-h{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.5);pointer-events:none}
.comp-s input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.cs-pies{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:12.5px;color:var(--tinta3)}
@media(max-width:820px){.mant-c{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* documentos y firmas */
.docs-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:18px;align-items:start}
.nota-doc{font-size:13.5px;color:var(--tinta2);margin:12px 0}
.docs-g td a.mono{white-space:nowrap;font-size:12.5px}
.botones-izq{display:flex;gap:8px;flex-wrap:wrap}
.firmante{display:grid;grid-template-columns:190px 1fr;gap:14px;align-items:start;padding:12px 0;border-top:1px solid var(--linea)}
.firma-img{height:84px;border:1px dashed var(--linea2);border-radius:8px;display:grid;place-items:center;background:#fff;overflow:hidden;color:var(--tinta3);font-size:12.5px}
.firma-img img{max-width:100%;max-height:80px}
.firma-datos .f{margin-bottom:8px}
/* muestrario de la API */
.api-g{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}
.api-ep{padding:8px}.api-ep>button{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:8px;background:none;cursor:pointer;color:inherit;font:inherit}
.api-ep>button .mono:first-child{grid-row:span 2;font-size:11px;font-weight:700;color:var(--bien);padding-top:2px}.api-ep>button .r{font-size:11.5px;color:var(--tinta3);text-align:left}
.api-ep>button:hover{background:var(--panel)}.api-ep>button.on{background:#E6F0E8}.api-ep>button.on b{color:var(--verde)}
.api-llave{margin:10px 4px 4px;padding:12px;border-top:1px solid var(--linea);font-size:13px;color:var(--tinta2)}.api-llave p{margin:8px 0}
.fila-llave{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:8px 10px;background:var(--panel);border-radius:6px}
.api-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;word-break:break-all}.api-met{font:700 12px var(--mono);color:#fff;background:var(--bien);padding:3px 8px;border-radius:5px}
.api-tabs{display:flex;gap:4px;border-bottom:1px solid var(--linea);margin-bottom:10px;flex-wrap:wrap}
.api-tabs button{border:0;background:none;padding:8px 12px;font:inherit;font-size:13.5px;color:var(--tinta2);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.api-tabs button.on{color:var(--verde);border-bottom-color:var(--verde);font-weight:600}.api-tabs button:disabled{opacity:.4;cursor:default}
.api-code,.api-json{margin:0;padding:14px 16px;border-radius:8px;background:#0F1A12;color:#DDE8D9;font:12.5px/1.55 var(--mono);overflow:auto;max-height:420px;white-space:pre}
.api-json .jk{color:#A6DA8C}.api-json .js{color:#F2C14E}.api-json .jn{color:#7FC8F8}.api-json .jl{color:#E59A8F}
.api-acc{display:flex;align-items:center;gap:12px;margin-top:12px}
.xl{border:1px solid #C9D3C4;border-radius:8px;overflow:hidden}.xl-bar{display:flex;gap:14px;align-items:center;padding:8px 12px;background:#1E6B30;color:#fff;font-size:12.5px;flex-wrap:wrap}
.xl-t{border-collapse:collapse;font:12.5px Calibri,Segoe UI,sans-serif;width:100%}.xl-t th,.xl-t td{border:1px solid #DADCE0;padding:3px 8px;white-space:nowrap}
.xl-t th,.xl-t td:first-child{background:#F3F3F3;color:#555;font-weight:400;text-align:center}.xl-t td.n{text-align:right}.xl-t td.xl-h{font-weight:700;background:#E6F0E8}
@media(max-width:1100px){.docs-g,.api-g{grid-template-columns:1fr}.firmante{grid-template-columns:1fr}}