:root { --fondo: #121212; --panel: #1a1a1a; --caja: #222; --texto: #f2f2f2; --suave: #aaa; --acento: #ff9800;
        --gris: #9e9e9e; --amarillo: #ffd54f; --verde: #25d366; --rojo: #e05252; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--texto);
             font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
#app { display: flex; height: 100%; }
#panel { width: 320px; flex: none; background: var(--panel); border-right: 3px solid var(--acento); padding: 20px;
         display: flex; flex-direction: column; gap: 18px; overflow-y: auto; z-index: 1000; }
#mapa { flex: 1; height: 100%; background: var(--panel); }
h1 { margin: 0; font-size: 22px; color: var(--acento); font-weight: 800; }
.sub { margin: 6px 0 0; font-size: 12px; color: var(--suave); line-height: 1.45; }
.acciones { display: flex; flex-direction: column; gap: 10px; }
.btn { width: 100%; padding: 12px; border: 0; border-radius: 8px; font: 700 14px/1.2 inherit; cursor: pointer;
       text-align: center; text-decoration: none; display: block; }
.btn:disabled { opacity: .6; cursor: wait; }
.btn-corte { background: var(--acento); color: #121212; }
.btn-volvio { background: #2b2b2b; color: var(--amarillo); border: 1px solid #3a3a3a; }
.btn-wa { background: var(--verde); color: #0b2b16; }
.btn[hidden] { display: none; }
.aviso { margin: 0; min-height: 1.2em; font-size: 13px; line-height: 1.4; }
.aviso.ok { color: #8fd694; } .aviso.error { color: var(--rojo); }
.leyenda { background: var(--caja); border-radius: 8px; padding: 12px; font-size: 12px; color: #ccc; }
.leyenda .item { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.punto { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.punto.gris { background: var(--gris); } .punto.amarillo { background: var(--amarillo); }
.estado { margin: 8px 0 0; color: var(--suave); }
.leaflet-popup-content-wrapper { background: var(--panel); color: var(--texto); border: 1px solid var(--acento); border-radius: 8px; }
.leaflet-popup-tip { background: var(--acento); }
.pop { min-width: 180px; font-size: 13px; line-height: 1.5; }
.pop .zona { display: block; font-size: 15px; font-weight: 800; border-bottom: 1px solid #333; padding-bottom: 4px; margin-bottom: 6px; }
.pop .badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 800; margin-bottom: 6px; }
.pop .badge.sin { background: var(--rojo); color: #fff; } .pop .badge.con { background: var(--amarillo); color: #121212; }
.pop .linea { display: block; } .pop small { display: block; color: var(--suave); margin-top: 6px; }
@media (max-width: 768px) {
  #app { flex-direction: column; }
  #panel { width: 100%; border-right: 0; border-bottom: 3px solid var(--acento); padding: 14px 16px; gap: 12px; max-height: 48vh; }
  .leyenda { display: none; }
  #mapa { flex: 1; min-height: 52vh; }
}