/* Chumil - campo. Interfaz para leerse bajo el sol, con una mano, en un cerro. */
:root{
  --fondo:#0e1216; --panel:#171d24; --panel-alto:#212a33; --borde:#2e3a45;
  --texto:#e9eef3; --tenue:#9aa8b6; --acento:#4ea3ff; --alerta:#ff5b52;
  --ok:#4ec77f; --aviso:#ffb340; --lluvia:#3d8ee0;
  --barra:56px; --panel-h:92px; --giro:0deg;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--fondo);color:var(--texto);
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-user-select:none;user-select:none}

/* barra superior */
#barra{position:fixed;top:0;left:0;right:0;height:var(--barra);z-index:900;
  background:var(--panel);border-bottom:1px solid var(--borde);
  display:flex;align-items:center;justify-content:space-between;padding:0 10px;gap:8px}
#titulo{display:flex;align-items:center;gap:7px;font-size:14px;white-space:nowrap;overflow:hidden}
#titulo strong{font-weight:650}
#pestanas{display:flex;gap:3px;flex-shrink:0}
.pest{background:transparent;border:1px solid transparent;color:var(--tenue);
  padding:7px 11px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
.pest.activa{background:var(--panel-alto);color:var(--texto);border-color:var(--borde)}

.chip{font-size:11px;padding:2px 7px;border-radius:99px;font-weight:600;letter-spacing:.2px}
.chip-gris{background:#2a343e;color:var(--tenue)}
.chip-ok{background:rgba(78,199,127,.18);color:var(--ok)}
.chip-mal{background:rgba(255,91,82,.18);color:var(--alerta)}
.chip-aviso{background:rgba(255,179,64,.18);color:var(--aviso)}

/* modos */
main{position:absolute;top:var(--barra);left:0;right:0;bottom:0}
.modo{position:absolute;inset:0;display:none}
.modo.activa{display:block}
.modo-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch}
#mapa-marco{position:absolute;inset:0;overflow:hidden;background:#0b0f13}
#mapa{position:absolute;left:0;top:0;width:100%;height:100%;background:#0b0f13;
  transform-origin:50% 50%}
#lienzo3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* HUD */
.hud{position:absolute;top:8px;left:8px;right:8px;z-index:500;pointer-events:none}
.hud-esquina{top:auto;bottom:calc(var(--panel-h) + 8px);right:8px;left:auto;width:auto}
.hud-fila{display:flex;gap:6px;background:rgba(14,18,22,.82);
  border:1px solid var(--borde);border-radius:10px;padding:7px 9px;width:fit-content}
.dato{display:flex;align-items:baseline;gap:3px}
.dato b{font-size:16px;font-variant-numeric:tabular-nums;font-weight:700}
.dato i{font-size:10px;color:var(--tenue);font-style:normal}
.info-sol{background:var(--panel-alto);border:1px solid var(--borde);border-radius:7px;
  padding:3px 8px;font-size:11.5px;color:var(--tenue);font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* controles */
.controles{position:absolute;right:10px;bottom:14px;z-index:500;
  display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.ctl{background:var(--panel);color:var(--texto);border:1px solid var(--borde);
  border-radius:10px;min-width:46px;height:46px;font-size:17px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.45)}
.ctl:active{background:var(--panel-alto);transform:scale(.96)}
.ctl.activa{border-color:var(--acento);color:var(--acento)}
.ctl-ancho{padding:0 15px;font-size:14px;min-width:auto}
.ctl-rojo{background:var(--alerta);border-color:var(--alerta);color:#fff}
.ctl-rojo.grabando{animation:latido 1.6s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.55}}

/* paneles inferiores */
.panel-inf{position:absolute;left:0;right:0;bottom:0;z-index:500;background:var(--panel);
  border-top:1px solid var(--borde);padding:9px 11px;min-height:var(--panel-h)}
.linea-tiempo{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.linea-tiempo input[type=range]{flex:1}
.etiqueta{font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--texto);
  min-width:132px;text-align:right;font-weight:600}
.linea-opciones{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--tenue)}
.linea-opciones label{display:flex;align-items:center;gap:5px}
.linea-opciones select{background:var(--panel-alto);color:var(--texto);border:1px solid var(--borde);
  border-radius:7px;padding:4px 7px;font-size:12px}
.casilla{cursor:pointer}
input[type=range]{-webkit-appearance:none;appearance:none;height:26px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:5px;background:var(--panel-alto);border-radius:3px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--acento);margin-top:-7.5px;border:2px solid var(--panel)}
input[type=range]::-moz-range-track{height:5px;background:var(--panel-alto);border-radius:3px}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--acento);border:2px solid var(--panel)}

/* briefing de lluvia */
.contenido{padding:11px 11px 68px;max-width:760px;margin:0 auto}
.tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:12px;
  padding:12px;margin-bottom:11px}
.tarjeta-titulo{display:flex;align-items:center;justify-content:space-between;
  font-weight:650;font-size:15px;margin-bottom:7px;gap:10px}
.sello{font-size:12px;color:var(--tenue)}
.sello.viejo{color:var(--aviso)}
.dia-tit{font-size:13px;font-weight:650;color:var(--tenue);margin:14px 0 7px;
  text-transform:uppercase;letter-spacing:.6px}
.barras{display:flex;flex-direction:column;gap:3px}
.hfila{display:grid;grid-template-columns:44px 1fr 62px;align-items:center;gap:8px;
  font-size:12px;font-variant-numeric:tabular-nums}
.hfila.punta{background:rgba(61,142,224,.10);border-radius:6px}
.hbarra{display:block;height:17px;background:var(--panel-alto);border-radius:4px;overflow:hidden;position:relative}
.hrelleno{display:block;height:100%;background:var(--lluvia);border-radius:4px;transition:width .25s}
.hrelleno.alto{background:var(--alerta)}
.hrelleno.medio{background:var(--aviso)}
.hetq{color:var(--tenue);text-align:right}
.hhora{color:var(--tenue)}
.nota{font-size:12.5px;color:var(--tenue);line-height:1.55;margin-top:9px}
.tabla{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums;margin-top:8px}
.tabla th{text-align:right;color:var(--tenue);font-weight:600;padding:4px 5px;border-bottom:1px solid var(--borde)}
.tabla th:first-child,.tabla td:first-child{text-align:left}
.tabla td{text-align:right;padding:4px 5px;border-bottom:1px solid rgba(46,58,69,.45)}
.veredicto{font-size:14px;font-weight:650;padding:9px 11px;border-radius:9px;margin-bottom:10px}
.v-alto{background:rgba(255,91,82,.15);color:#ff8a83;border:1px solid rgba(255,91,82,.3)}
.v-medio{background:rgba(255,179,64,.13);color:var(--aviso);border:1px solid rgba(255,179,64,.28)}
.v-bajo{background:rgba(78,199,127,.12);color:var(--ok);border:1px solid rgba(78,199,127,.26)}

/* avisos */
.aviso{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:2000;
  background:var(--panel-alto);border:1px solid var(--borde);color:var(--texto);
  padding:10px 16px;border-radius:10px;font-size:13.5px;max-width:86vw;text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.5);transition:opacity .25s}
.aviso.oculto{opacity:0;pointer-events:none}

/* Leaflet, ajustes al tema */
.leaflet-container{background:#0b0f13;font-family:inherit}
.leaflet-control-attribution{background:rgba(14,18,22,.72)!important;color:var(--tenue)!important;font-size:10px}
.leaflet-control-attribution a{color:var(--tenue)!important}
.leaflet-control-zoom a{background:var(--panel)!important;color:var(--texto)!important;border-color:var(--borde)!important}
.marca-yo{border-radius:50%;background:var(--acento);border:2.5px solid #fff;box-shadow:0 0 0 2px rgba(78,163,255,.35)}
/* La zona de toque es la caja de 28; lo que se ve es el cuadro de 13. */
.blanco-punto{width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  cursor:pointer}
.marca-punto{width:13px;height:13px;background:var(--aviso);border:2px solid #fff;
  border-radius:3px;transform:rotate(var(--giro));
  box-shadow:0 1px 4px rgba(0,0,0,.6)}
.etq-punto{background:rgba(14,18,22,.85);border:1px solid var(--borde);border-radius:5px;
  padding:1px 5px;font-size:11px;color:var(--texto);white-space:nowrap;
  /* El icono de Leaflet mide 0 px. Un hijo display:block dentro de un padre
     de ancho cero hereda ancho cero: el texto se desbordaba y el recuadro se
     quedaba del tamaño del relleno. max-content lo ajusta al texto real. */
  width:max-content;
  /* pivota junto al punto, no en el centro del texto */
  transform:rotate(var(--giro));transform-origin:0 50%}

@media (max-width:420px){
  .pest{padding:7px 8px;font-size:12px}
  #titulo strong{display:none}
  .dato b{font-size:15px}
  .etiqueta{min-width:112px}
}


/* ─── resumen de una linea (mapa y 3D) ─── */
.resumen{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}
.res-lluvia,.res-destino{background:rgba(14,18,22,.86);border:1px solid var(--borde);
  border-radius:9px;padding:5px 9px;font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.res-alto{border-color:rgba(255,91,82,.55);color:#ff8a83}
.res-medio{border-color:rgba(255,179,64,.5);color:var(--aviso)}
.res-bajo{border-color:rgba(78,199,127,.45);color:var(--ok)}
.res-destino{color:var(--texto)}
.res-baro{border-color:rgba(154,168,182,.45);color:var(--tenue)}
/* Briefing de más de 6 h: la ficha lo dice y lo lleva escrito al lado. */
.res-lluvia.res-viejo{border-color:rgba(255,179,64,.6);color:var(--aviso)}
.res-lluvia.res-viejo::before{content:'⚠ '}
.res-destino b{color:var(--acento)}
#hud-3d .resumen{margin:0}

/* ─── flecha de posicion ─── */
.flecha-yo{width:100%;height:100%;transform-origin:50% 50%;transition:transform .18s linear;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}

/* ─── capa de rutas (fija sobre 2D y 3D) ─── */
.pila-inferior{position:fixed;left:10px;bottom:12px;z-index:1500;
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  /* Los controles del mapa viven a la derecha; esta pila se acota para no
     llegar hasta ellos. Se reserva el ancho del boton mas ancho de esa
     columna ("Parar" / "Grabar"), no un valor a ojo. */
  max-width:calc(100vw - 128px)}
.pila-inferior.oculta,.barra-ruta.oculta{display:none}
/* En 3D el panel de abajo ocupa el borde inferior: la pila se sube encima. */
body.con-panel .pila-inferior{bottom:calc(var(--panel-h) + 12px)}

.barra-ruta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ctl .ico{margin-right:6px;flex-shrink:0}
#btn-mapear{gap:0}
.ruta-extras{display:flex;align-items:center;gap:8px}
.ruta-extras.oculta{display:none}

.res-red{background:rgba(14,18,22,.86);border:1px solid var(--borde);border-radius:9px;
  padding:5px 9px;font-size:12px;color:var(--tenue);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.res-red b{color:var(--acento);font-weight:700}
.res-destino{display:inline-flex;align-items:center;gap:7px;pointer-events:auto}
.res-destino b{color:var(--ok);font-size:15px}
.res-destino i{color:var(--tenue);font-style:normal;font-size:11px;font-weight:500}
.mini-x{padding:1px 6px;font-size:11px;line-height:1.5}

.marca-destino{width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  color:var(--ok);font-size:20px;font-weight:700;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.8))}
.mini{background:var(--panel-alto);color:var(--tenue);border:1px solid var(--borde);
  border-radius:6px;padding:3px 8px;font-size:12px;cursor:pointer}
.mini:active{background:var(--borde)}
.mini-claro{background:#fff;color:#171d24;border-color:#fff;font-weight:650}

/* ─── barra de simulacion ─── */
.barra-sim{display:flex;align-items:center;gap:10px;background:rgba(255,179,64,.94);
  color:#2b1d05;border-radius:10px;padding:6px 8px 6px 12px;font-size:12px;font-weight:650;
  box-shadow:0 4px 18px rgba(0,0,0,.45);max-width:100%}
.barra-sim.oculta{display:none}
.barra-sim .mini{background:#2b1d05;color:#ffe3b0;border-color:#2b1d05}

@media (max-width:420px){
  .res-lluvia,.res-destino,.res-red{font-size:11px;padding:4px 7px}
  .res-destino b{font-size:13px}
  .res-destino i{display:none}
  .barra-ruta .ctl{height:42px;min-width:42px}
  .barra-ruta .ctl-ancho{padding:0 11px;font-size:13px}
}


/* El panel del 3D se come la vista en pantalla angosta: se aprieta. */
@media (max-width:480px){
  #panel-3d .linea-opciones{gap:7px}
  #panel-3d input[type=range]{width:86px}
  #panel-3d .ctl{height:38px;min-width:38px;font-size:12.5px;padding:0 10px}
  .info-sol{font-size:11px;padding:2px 6px}
}


/* ─── menu chico anclado a un boton ─── */
.menu-flotante{position:fixed;z-index:2100;background:var(--panel);border:1px solid var(--borde);
  border-radius:11px;padding:5px;display:flex;flex-direction:column;gap:3px;min-width:186px;
  box-shadow:0 8px 28px rgba(0,0,0,.6)}
.menu-item{background:transparent;border:none;color:var(--texto);text-align:left;
  padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;
  font-family:inherit;white-space:nowrap}
.menu-item:active{background:var(--panel-alto)}

/* ─── banda de "toca un punto" ─── */
.banda-selector{position:fixed;top:calc(var(--barra) + 8px);left:50%;transform:translateX(-50%);
  z-index:1600;display:flex;align-items:center;gap:12px;
  background:var(--acento);color:#06182c;border-radius:10px;
  padding:7px 8px 7px 14px;font-size:13px;font-weight:650;max-width:92vw;
  box-shadow:0 4px 18px rgba(0,0,0,.45)}
.banda-selector.oculta{display:none}
.banda-selector .mini{background:#06182c;color:#cfe6ff;border-color:#06182c}


/* ═══════════════ PANTALLA ACOSTADA ═══════════════
   Un telefono en horizontal deja ~360 px de alto. Con la barra de 56 y el
   panel del 3D de 160 no queda mapa. Todo se aprieta y la columna de
   controles pasa a dos columnas para no salirse por arriba.
   Se dispara por ALTO, no por orientacion: es el alto lo que estorba. */
@media (max-height: 540px) {
  :root{ --barra:44px; }

  #barra{padding:0 8px}
  .pest{padding:5px 9px;font-size:12px}
  #titulo strong{display:none}
  .chip{font-size:10px;padding:1px 6px}

  /* la columna de botones se parte en dos para caber a lo alto */
  .controles{flex-direction:row-reverse;flex-wrap:wrap-reverse;
    justify-content:flex-start;max-width:120px;bottom:10px;gap:6px}
  .ctl{height:40px;min-width:40px;font-size:15px;border-radius:9px}
  .ctl-ancho{padding:0 11px;font-size:13px}

  .hud{top:6px;left:6px;right:6px}
  .hud-fila{padding:5px 7px;gap:5px}
  .dato b{font-size:14px}
  .dato i{font-size:9px}
  .resumen{margin-top:4px}
  .res-lluvia,.res-destino,.res-red{font-size:11px;padding:3px 7px}

  /* el panel del 3D: una sola fila que se desplaza en horizontal */
  .panel-inf{min-height:0;padding:6px 8px}
  #panel-3d .linea-opciones{flex-wrap:nowrap;overflow-x:auto;gap:9px;
    padding-bottom:2px;-webkit-overflow-scrolling:touch}
  #panel-3d .linea-opciones > *{flex-shrink:0}
  #panel-3d input[type=range]{width:74px}
  #panel-3d .ctl{height:32px;min-width:32px;font-size:12px;padding:0 9px}
  .info-sol{font-size:10.5px;padding:2px 6px}

  .pila-inferior{bottom:8px;left:8px;gap:6px;max-width:calc(100vw - 140px)}
  .barra-ruta .ctl{height:36px;min-width:36px}
  .barra-ruta .ctl-ancho{padding:0 10px;font-size:12.5px}
  .barra-sim{font-size:11px;padding:4px 6px 4px 10px}

  .banda-selector{top:calc(var(--barra) + 6px);font-size:12px;padding:5px 6px 5px 11px}
  .contenido{padding:8px 8px 56px}
  .tarjeta{padding:9px;margin-bottom:8px}
  .hfila{grid-template-columns:40px 1fr 58px;font-size:11px}
  .hbarra{height:14px}
}

/* Acostada y ademas angosta (telefono chico de lado): aun mas apretado. */
@media (max-height: 420px) {
  .controles{max-width:96px}
  .ctl{height:36px;min-width:36px}
  .dato:nth-child(n+4){display:none}   /* el HUD se queda con lo esencial */
}


/* ═══════════════ BRÚJULA Y GIRO ═══════════════
   La rosa vive fija sobre el mapa 2D y sobre el 3D. El control de zoom de
   Leaflet ocupa esa misma esquina, así que se le baja el tope para que no
   se peleen. */
.leaflet-top.leaflet-right{padding-top:74px}

.brujula{position:fixed;right:9px;top:calc(var(--barra) + 8px);z-index:1200;
  width:58px;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:3px 2px 2px;border-radius:12px;cursor:grab;
  background:rgba(14,18,22,.72);border:1px solid var(--borde);
  box-shadow:0 2px 10px rgba(0,0,0,.45);
  touch-action:none;-webkit-user-select:none;user-select:none}
.brujula:active{cursor:grabbing}
.brujula.oculta{display:none}
.brujula.br-auto{border-color:var(--acento);box-shadow:0 0 0 1px rgba(78,163,255,.35),0 2px 10px rgba(0,0,0,.45)}
.brujula.br-manual{border-color:var(--aviso)}

.br-disco{fill:rgba(23,29,36,.9);stroke:var(--borde);stroke-width:2}
#br-rosa,#br-aguja{transition:transform .14s linear}
.br-ejes{stroke:var(--tenue);stroke-width:3;stroke-linecap:round;opacity:.65}
.br-n{fill:var(--alerta);font:700 26px system-ui,sans-serif;text-anchor:middle}
.br-aguja path{fill:var(--acento);stroke:#0e1216;stroke-width:2.5;stroke-linejoin:round}
.br-aguja.sin path{fill:#5d6d7c}
.br-centro{fill:var(--texto);opacity:.75}
.br-texto{font-size:10px;font-weight:700;color:var(--tenue);letter-spacing:.2px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.brujula.br-auto .br-texto{color:var(--acento)}

/* El destino y la flecha también viven dentro del contenedor girado. */
.marca-destino{transform:rotate(var(--giro))}


/* ═══════════════ FICHA DE UN PUNTO ═══════════════ */
.velo{position:fixed;inset:0;z-index:1890;background:transparent}
.velo.oculta{display:none}

.panel-punto{position:fixed;z-index:1900;left:50%;transform:translateX(-50%);
  top:calc(var(--barra) + 10px);width:min(330px,calc(100vw - 20px));
  background:var(--panel);border:1px solid var(--borde);border-radius:13px;
  padding:11px;display:flex;flex-direction:column;gap:9px;
  box-shadow:0 10px 34px rgba(0,0,0,.65)}
.panel-punto.oculta{display:none}

.pp-cab{display:flex;align-items:center;gap:8px}
.pp-icono{width:14px;height:14px;border-radius:3px;border:2px solid #fff;flex-shrink:0}
.pp-nombre{flex:1;min-width:0;background:var(--panel-alto);color:var(--texto);
  border:1px solid var(--borde);border-radius:8px;padding:7px 9px;
  font:650 14.5px inherit;font-family:inherit;-webkit-user-select:text;user-select:text}
.pp-nombre:focus{outline:none;border-color:var(--acento)}

.pp-coords{background:var(--panel-alto);color:var(--acento);border:1px solid var(--borde);
  border-radius:8px;padding:7px 9px;font-size:13px;font-weight:650;cursor:pointer;
  font-variant-numeric:tabular-nums;font-family:inherit;text-align:left;width:100%}
.pp-coords:active{background:var(--borde)}
.pp-meta{font-size:11.5px;color:var(--tenue);line-height:1.4}

.pp-colores{display:flex;gap:7px;flex-wrap:wrap}
.pp-color{width:30px;height:30px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.pp-color.elegido{border-color:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 0 0 2px var(--borde)}

.pp-acciones{display:flex;gap:8px}
.pp-acciones .ctl{flex:1;height:42px;font-size:13.5px}
.ctl-peligro{border-color:rgba(255,91,82,.5);color:#ff8a83}
.ctl-peligro.armado{background:var(--alerta);border-color:var(--alerta);color:#fff}

/* Coordenadas del destino temporal, bajo su distancia. */
.res-destino{flex-wrap:wrap}
.rd-linea{display:inline-flex;align-items:center;gap:7px}
.rd-coord{flex-basis:100%;background:transparent;border:none;padding:0;text-align:left;
  color:var(--tenue);font:600 11px inherit;font-family:inherit;
  font-variant-numeric:tabular-nums;cursor:pointer;pointer-events:auto}
.rd-coord:active{color:var(--acento)}

@media (max-height: 540px){
  .leaflet-top.leaflet-right{padding-top:60px}
  .brujula{width:48px;right:7px;top:calc(var(--barra) + 5px)}
  .brujula svg{width:38px;height:38px}
  .br-texto{font-size:9px}
  .panel-punto{top:calc(var(--barra) + 6px);padding:9px;gap:7px}
  .pp-acciones .ctl{height:36px;font-size:12.5px}
  .pp-color{width:26px;height:26px}
}


/* ═══════════════ PANTALLA DE PERFIL ═══════════════
   Ocupa todo a propósito: es una decisión, no un aviso al paso. */
.pantalla{position:fixed;inset:0;z-index:2500;background:var(--fondo);
  display:flex;align-items:center;justify-content:center;padding:20px;
  overflow-y:auto}
.pantalla.oculta{display:none}
.pp-caja{width:100%;max-width:340px;display:flex;flex-direction:column;gap:11px}
.pp-caja h1{margin:0;font-size:25px;font-weight:700;letter-spacing:-.3px}
.pp-lema{margin:0 0 6px;font-size:13.5px;color:var(--tenue);line-height:1.45}
.pp-etq{font-size:11.5px;color:var(--tenue);font-weight:650;
  text-transform:uppercase;letter-spacing:.6px;margin-top:4px}
.pp-campo{background:var(--panel);color:var(--texto);border:1px solid var(--borde);
  border-radius:10px;padding:13px 12px;font:600 16px inherit;font-family:inherit;
  -webkit-user-select:text;user-select:text}
.pp-campo:focus{outline:none;border-color:var(--acento)}
.pp-campo::placeholder{color:#5d6d7c;font-weight:400}

.pp-paleta{display:flex;gap:10px;flex-wrap:wrap}
.pp-tono{width:44px;height:44px;border-radius:50%;border:3px solid transparent;
  cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.pp-tono.elegido{border-color:#fff}

.pp-entrar{margin-top:8px;background:var(--acento);color:#06182c;border:none;
  border-radius:11px;padding:15px;font:700 16px inherit;font-family:inherit;
  cursor:pointer}
.pp-entrar:disabled{background:var(--panel-alto);color:#5d6d7c;cursor:default}
.pp-entrar:not(:disabled):active{transform:scale(.98)}
.pp-nota{margin:2px 0 0;font-size:11.5px;color:var(--tenue);line-height:1.5}

/* ═══════════════ FICHA DE EQUIPO ═══════════════ */
.res-equipo{background:rgba(14,18,22,.86);border:1px solid var(--borde);
  border-radius:9px;padding:5px 9px;font-size:12px;white-space:nowrap;
  font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:6px;
  pointer-events:auto;cursor:pointer}
.res-equipo b{color:var(--acento);font-weight:700}
.res-equipo .eq-punto{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.eq-on{background:var(--ok)}
.eq-busca{background:var(--aviso);animation:latido 1.6s ease-in-out infinite}
.eq-off{background:#5d6d7c}
.res-equipo i{color:var(--tenue);font-style:normal;font-size:11px}

@media (max-height: 540px){
  .pp-caja h1{font-size:21px}
  .pp-campo{padding:10px}
  .pp-tono{width:36px;height:36px}
  .pp-entrar{padding:12px}
  .pp-nota{display:none}
}

/* ─── compañeros sobre el mapa ─── */
.eq-flecha{width:26px;height:26px;transform-origin:50% 50%;
  transition:transform .18s linear;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.eq-circulo{width:15px;height:15px;margin:5px;border-radius:50%;border:2.5px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.6)}
/* Quien lleva más de dos minutos sin dar señal se dibuja a medio gas: sigue
   ahí, pero no finge que es información fresca. */
.eq-apagado{opacity:.45}
.etq-equipo{background:rgba(14,18,22,.88);border:1px solid var(--borde);
  border-left-width:3px;border-radius:5px;padding:2px 6px;font-size:11px;
  color:var(--texto);white-space:nowrap;font-variant-numeric:tabular-nums;
  width:max-content;
  transform:rotate(var(--giro));transform-origin:0 50%}
.etq-equipo b{color:#fff;font-weight:700}
.etq-equipo i{color:var(--aviso);font-style:normal;font-size:10px}
.etq-equipo.apagada{opacity:.6}

/* ─── color reservado y colores ya tomados ─── */
.pp-tono:disabled{cursor:not-allowed;opacity:.28}
.pp-tono:disabled::after{content:'';display:block;width:100%;height:100%;
  border-radius:50%;box-shadow:inset 0 0 0 2px rgba(0,0,0,.55)}
.pp-tomados{font-size:11.5px;color:var(--aviso);line-height:1.45;margin:0}
.pp-tono.reservado{background:#000;border-color:#ff5fa2;box-shadow:inset 0 0 0 3px #ff5fa2}

/* Ficha de un punto ajeno: se mira, no se toca. */
.pp-ajeno .pp-nombre{color:var(--tenue);border-style:dashed}
.pp-ajeno .pp-acciones .ctl{flex:1}