/* NOC FibraSLP · vista «Mapa» — v1.5
 * Estilos del módulo static/mapa.js. Todo con prefijo .mapa- (o bajo #mapa-root) para no
 * chocar con index.html; reutiliza sus variables (--plane, --surface, --ink…) y clases
 * (.tiles/.tile, .pill/.dot, .check, .actions, .res, .meter, button.mini/.on/.danger).
 * La vista ocupa toda la altura disponible: 100vh menos el «cromo» de index.html = header
 * (padding 14 px ×2 + botones de 33 px + borde 1 px ≈ 62 px) + padding de <main> (20 px arriba
 * y abajo) = 102 px. El margen inferior de la sección NO se descuenta: index.html pone
 * #view-mapa{margin-bottom:0}. Este valor es el del primer pintado; mapa.js (fitHeight) mide
 * el cromo real al mostrarse la vista y lo sobreescribe en --mapa-chrome (el header puede
 * ocupar dos filas en pantallas estrechas). min-height 70vh como red de seguridad. En
 * pantalla completa, 100vh. */
#mapa-root{--mapa-chrome:102px;display:flex;flex-direction:column;gap:12px;
  height:calc(100vh - var(--mapa-chrome));min-height:70vh}
#mapa-root.mapa-fs{height:100vh;min-height:100vh;background:var(--plane);padding:12px}

/* ── KPIs ───────────────────────────────────────────────────────────────── */
.mapa-kpis{flex:none}
.mapa-kpis .tile{padding:10px 14px}
.mapa-kpis .tile .value{font-size:22px}
.mapa-kpis .tile .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Cuerpo: panel lateral + escenario del mapa ─────────────────────────── */
.mapa-body{flex:1;min-height:0;display:flex;gap:12px;position:relative}
.mapa-panel{width:280px;flex:none;display:flex;flex-direction:column;min-height:0;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.mapa-panel.collapsed{display:none}
.mapa-panel-head{display:flex;gap:6px;align-items:center;padding:10px;
  border-bottom:1px solid var(--grid)}
.mapa-panel-head input{flex:1;min-width:0;background:var(--plane);color:var(--ink);
  border:1px solid var(--border);border-radius:6px;padding:6px 9px;font:inherit;font-size:13px}
.mapa-panel-head input:focus{outline:none;border-color:var(--s1)}
.mapa-panel-head .mini{margin:0;padding:4px 8px}
.mapa-sec{padding:8px 10px;border-bottom:1px solid var(--grid)}
.mapa-sec h3{margin:0 0 6px;font-size:11px}
.mapa-count{color:var(--muted);font-weight:normal;text-transform:none;letter-spacing:0;margin-left:4px}
.mapa-sec-list{flex:1 1 auto;min-height:90px;display:flex;flex-direction:column}
.mapa-sec-list .mapa-list{flex:1;min-height:0;overflow:auto}
#mapa-unplaced{max-height:150px;overflow:auto}
.mapa-checks{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
.mapa-checks .check{font-size:12px;gap:6px}
.mapa-filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mapa-filters select{flex:1;min-width:0;background:var(--plane);color:var(--ink);
  border:1px solid var(--border);border-radius:6px;padding:5px 8px;font:inherit;font-size:12px}
.mapa-filters select:focus{outline:none;border-color:var(--s1)}
.mapa-filters .check{font-size:12px}
.mapa-filters .mini{margin:0}
.mapa-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;
  cursor:pointer;font-size:13px;color:var(--ink-2)}
.mapa-row:hover{background:var(--surface-2);color:var(--ink)}
.mapa-row.sel{background:var(--surface-2);color:var(--ink);box-shadow:inset 2px 0 0 var(--s1)}
.mapa-row-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mapa-row-name small{color:var(--muted);margin-left:4px;font-size:11px}
.mapa-row-meta{color:var(--muted);font-size:12px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.mapa-row-meta b{font-weight:600}
.mapa-row-unplaced{cursor:default}
.mapa-row-unplaced .mapa-row-name{cursor:pointer}
.mapa-row .mini{margin:0;padding:2px 8px}
.mapa-panel-foot{margin-top:auto;border-bottom:0}
.mapa-panel-foot button{width:100%}
.mapa-empty{color:var(--muted);font-size:12px;padding:6px 4px;line-height:1.4}

/* ── Escenario: mapa y capas flotantes (por encima de los panes de Leaflet, ≤ 1000) ── */
.mapa-stage{flex:1;min-width:0;position:relative;border:1px solid var(--border);
  border-radius:10px;overflow:hidden;background:var(--plane)}
.mapa-map{position:absolute;inset:0;background:#0d0d0d}
.mapa-map.leaflet-container{background:#0d0d0d;font:inherit}
.mapa-map .leaflet-control-attribution{background:rgba(13,13,13,.7);color:var(--muted);
  font-size:10px;padding:1px 6px}
.mapa-map .leaflet-control-attribution a{color:var(--ink-2)}
.mapa-picking .mapa-map,.mapa-picking .mapa-map *{cursor:crosshair!important}

/* etiquetas bajo los marcadores: Leaflet (tooltip) y Google (label) */
.mapa-label{background:transparent!important;border:0!important;box-shadow:none!important;
  color:#e8e8e0;font:600 11px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;
  text-shadow:0 0 3px #000,0 0 6px #000,0 1px 2px #000;padding:2px 4px!important;
  margin-top:0!important;pointer-events:none;white-space:nowrap}
.mapa-label::before{display:none!important}
.mapa-glabel{text-shadow:0 0 3px #000,0 0 6px #000,0 1px 2px #000;white-space:nowrap}

.mapa-panel-show{position:absolute;top:10px;left:10px;z-index:1100;background:var(--surface);
  padding:4px 10px;font-size:14px;line-height:1.2}
.mapa-ctrls{position:absolute;top:10px;right:10px;z-index:1100;display:flex;gap:6px;
  align-items:center;flex-wrap:wrap;justify-content:flex-end}
.mapa-ctrls>button{background:var(--surface);padding:5px 9px;line-height:1.2}
.mapa-seg{display:inline-flex;border:1px solid var(--border);border-radius:6px;
  overflow:hidden;background:var(--surface)}
.mapa-seg button{border:0;border-radius:0;padding:5px 10px;background:transparent;font-size:12px}
.mapa-seg button+button{border-left:1px solid var(--border)}
.mapa-seg button:hover{background:var(--surface-2)}
.mapa-seg button.on{background:var(--surface-2);color:var(--ink);box-shadow:inset 0 -2px 0 var(--s1)}
.mapa-zoom button{width:32px;font-size:15px;line-height:1;padding:4px 0}

.mapa-notice{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:1150;
  max-width:min(92%,640px);background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--warning);border-radius:8px;padding:8px 12px;font-size:12px;
  color:var(--ink-2);box-shadow:0 6px 20px rgba(0,0,0,.45)}
.mapa-notice.err{border-left-color:var(--critical)}
.mapa-editing .mapa-notice{top:auto;bottom:56px}

/* barra de herramientas del modo edición */
.mapa-toolbar{position:absolute;top:10px;left:10px;z-index:1100;max-width:calc(100% - 330px);
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--s1);
  border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:6px;font-size:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.45)}
.mapa-panel.collapsed+.mapa-stage .mapa-toolbar{left:54px;max-width:calc(100% - 374px)}
.mapa-tb-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mapa-tb-row button{padding:4px 9px;font-size:12px}
.mapa-tb-row select{background:var(--plane);color:var(--ink);border:1px solid var(--border);
  border-radius:6px;padding:4px 8px;font:inherit;font-size:12px;max-width:220px}
.mapa-tb-row select:focus{outline:none;border-color:var(--s1)}
.mapa-tb-help{color:var(--ink-2)}
.mapa-toolbar .res{margin-left:auto}

/* ── Tarjeta de detalle (sitio / enlace) ────────────────────────────────── */
.mapa-card{position:absolute;top:52px;right:10px;z-index:1120;width:340px;
  max-width:calc(100% - 20px);max-height:calc(100% - 100px);overflow:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px 14px;font-size:13px;box-shadow:0 8px 28px rgba(0,0,0,.5)}
.mapa-card-head{display:flex;align-items:flex-start;gap:8px}
.mapa-card-title{flex:1;min-width:0;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.mapa-code{color:var(--muted);font-size:12px;margin-left:4px}
.mapa-x{padding:2px 8px;font-size:13px;line-height:1.2;flex:none}
.mapa-card-pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0 10px;font-size:12px}
.mapa-kind{color:var(--ink)}
.mapa-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.mapa-grid>div{min-width:0}
.mapa-grid .wide{grid-column:1/-1}
.mapa-grid .k,.mapa-end .k,.mapa-notes .k{display:block;color:var(--muted);font-size:11px;
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.mapa-grid .v{display:block;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mapa-grid .v .mini{margin-left:6px;padding:1px 7px}
.mapa-grid input[type=text],.mapa-grid select{width:100%;background:var(--plane);
  color:var(--ink);border:1px solid var(--border);border-radius:6px;padding:5px 8px;
  font:inherit;font-size:13px}
.mapa-grid input:focus,.mapa-grid select:focus{outline:none;border-color:var(--s1)}
/* campo «lat, lng» + botón Ubicar/Mover en una fila */
.mapa-coord{display:flex;gap:6px;align-items:stretch}
.mapa-coord input{flex:1;min-width:0}
.mapa-coord .mini{flex:none;margin-left:0;white-space:nowrap}
.mapa-card h4{margin:14px 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:600}
.mapa-items{display:grid;gap:3px}
.mapa-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;
  background:var(--surface-2);border:1px solid transparent;cursor:pointer;font-size:12px;
  color:var(--ink-2)}
.mapa-item:hover{border-color:var(--s1);color:var(--ink)}
.mapa-item .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink)}
.mapa-item .mt{color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.mapa-dim{color:var(--muted)}
.mapa-small{font-size:11px;margin-top:8px}
.mapa-end{margin-top:10px;padding:8px 10px;background:var(--surface-2);border-radius:8px;
  font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.mapa-end code,.mapa-notes code{background:var(--plane);padding:1px 5px;border-radius:4px;
  color:var(--ink)}
.mapa-notes{margin-top:10px;font-size:12px;color:var(--ink-2);white-space:pre-wrap;
  overflow-wrap:anywhere}
.mapa-card .meter{margin-top:4px;min-width:0}
.mapa-card-actions{margin-top:14px;gap:8px}
.mapa-card-actions button{padding:4px 10px;font-size:12px}
.mapa-card-actions .res{flex-basis:100%}

/* ── Leyenda y pie ──────────────────────────────────────────────────────── */
.mapa-legend{position:absolute;left:10px;bottom:10px;z-index:1100;display:grid;gap:4px;
  max-width:380px;background:rgba(26,26,25,.92);border:1px solid var(--border);
  border-radius:8px;padding:8px 10px;font-size:11px;color:var(--ink-2)}
.mapa-lg-title{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.mapa-lg-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.mapa-lg-ic{width:16px;height:16px;vertical-align:middle;margin-left:4px}
.mapa-lg-ic:first-child{margin-left:0}
.mapa-sw{display:inline-block;width:18px;height:3px;border-radius:2px;vertical-align:middle;
  margin-left:6px}
.mapa-sw:first-child{margin-left:0}
.mapa-legend .dot{width:8px;height:8px;margin-left:6px}
.mapa-legend .dot:first-child{margin-left:0}
.mapa-foot{position:absolute;right:10px;bottom:26px;z-index:1100;display:flex;gap:8px;
  font-size:11px;color:var(--muted);background:rgba(13,13,13,.6);padding:2px 6px;border-radius:4px}
.mapa-foot span:empty{display:none}

/* ── Diálogos del módulo (mismo estilo que los de index.html) ───────────── */
dialog.mapa-dlg{max-width:860px}
dialog.mapa-dlg-sm{max-width:460px}

/* ── Vista previa de la importación KML/KMZ ─────────────────────────────── */
.mapa-import-list{max-height:50vh;overflow:auto;border:1px solid var(--border);
  border-radius:8px;padding:6px;margin-bottom:12px;background:var(--surface)}
.mapa-import-h{font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:600;margin:10px 6px 4px}
.mapa-import-h:first-child{margin-top:2px}
.mapa-import-row{display:flex;gap:8px;align-items:flex-start;padding:5px 6px;
  border-radius:6px;font-size:13px}
label.mapa-import-row{cursor:pointer}
label.mapa-import-row:hover{background:var(--surface-2)}
.mapa-import-row input[type=checkbox]{margin-top:2px;flex:none}

/* ── Responsive: en < 900 px el panel se superpone al mapa ──────────────── */
@media(max-width:900px){
  /* header{padding:10px 14px} (≈ 54 px) + main{padding:14px} ×2 = 82 px */
  #mapa-root{--mapa-chrome:82px}
  .mapa-panel{position:absolute;left:0;top:0;bottom:0;z-index:1200;width:min(280px,85%);
    box-shadow:0 0 40px rgba(0,0,0,.6)}
  .mapa-panel.collapsed+.mapa-stage .mapa-toolbar{left:10px;max-width:calc(100% - 20px)}
  .mapa-toolbar{top:52px;max-width:calc(100% - 20px)}
  .mapa-card{top:52px;width:min(340px,calc(100% - 20px));max-height:calc(100% - 70px)}
  .mapa-legend{display:none}
  .mapa-kpis{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
  .mapa-kpis .tile{padding:8px 10px}
  .mapa-kpis .tile .value{font-size:18px}
  .mapa-kpis .tile .sub{display:none}
}