/* =====================================================================
   perfil-logico.css — el panel "Perfil lógico" debajo del mapa.

   Vive en la CUARTA fila de la grilla de #app, solo en la columna del
   mapa: el sidebar de la izquierda y su tirador no se enteran, la ficha
   flotante sigue a la derecha y el statusbar sigue pegado abajo. Si no
   hay nada que mostrar, el panel no existe (display:none) y la grilla
   vuelve a ser la de siempre.

   Se carga DESPUÉS de app.css a propósito: las tres reglas de abajo que
   tocan #app, #sidebar y #detail le ganan por orden, no por !important.
   ===================================================================== */

/* --- la fila nueva de la grilla --- */
#app{ grid-template-rows:30px 46px 1fr auto; }
#sidebar{ grid-row:2 / 5; }

#perfil{
  grid-column:2; grid-row:4;
  display:none; position:relative;
  height:var(--perfil-h, 0px);
  margin-bottom:26px;                 /* el statusbar (26px) vive debajo, absoluto */
  background:var(--panel); border-top:1px solid var(--line);
  font-family:'Inter',sans-serif; color:var(--text);
  z-index:950; overflow:visible;   /* la lengüeta ⇕ asoma por encima del borde */
  box-sizing:border-box;
}
body.perfil-visible #perfil{ display:flex; flex-direction:column; }

/* La ficha flotante no puede pasar por debajo del panel. */
body.perfil-visible #detail{ max-height:calc(100vh - 92px - 42px - var(--perfil-h, 0px)); }
/* Los controles de Leaflet ya no necesitan esquivar el statusbar. */
body.perfil-visible .leaflet-bottom{ bottom:4px !important; }

/* --- tirador del alto (borde superior) ---
   Una franja fina para agarrar y, montada sobre el borde, una lengüeta con
   la flecha ⇕ que avisa que se puede arrastrar. */
.pf-tirador{
  position:absolute; top:-5px; left:0; right:0; height:10px; cursor:ns-resize; z-index:2;
}
.pf-tirador::after{
  content:''; position:absolute; left:0; right:0; top:4px; height:2px; background:transparent; transition:background .12s;
}
.pf-grip{
  position:absolute; left:50%; top:-6px; transform:translateX(-50%);
  width:36px; height:16px; line-height:14px; text-align:center; font-size:11px;
  background:var(--panel); color:var(--text-dim); border:1px solid var(--line); border-radius:8px;
  pointer-events:none; transition:color .12s, border-color .12s;
}
.pf-tirador:hover::after, body.resizing-perfil .pf-tirador::after{ background:var(--drop); }
.pf-tirador:hover .pf-grip, body.resizing-perfil .pf-grip{ color:var(--drop); border-color:var(--drop); }
body.resizing-perfil{ user-select:none; }
body.resizing-perfil *{ cursor:ns-resize !important; }
#perfil.plegado .pf-tirador{ display:none; }

/* --- cabecera: pestañas · título del recorrido · acciones --- */
.pf-cab{
  flex:0 0 28px; display:flex; align-items:center; gap:10px; padding:0 10px;
  background:var(--menubar-bg); border-bottom:1px solid var(--line); font-size:11.5px;
}
#perfil.plegado .pf-cab{ border-bottom:0; cursor:pointer; }
/* La flechita de ocultar/mostrar, a la izquierda de las pestañas. */
.pf-cab .pf-plegar{
  flex-shrink:0; width:20px; height:20px; padding:0; margin-right:-4px;
  background:transparent; border:1px solid var(--line); border-radius:4px; color:var(--text-dim);
  font:inherit; font-size:11px; line-height:1; cursor:pointer;
}
.pf-cab .pf-plegar:hover{ color:var(--text); border-color:var(--text-dim); }
.pf-tabs{ display:flex; gap:2px; flex-shrink:0; }
.pf-tabs button{
  background:transparent; border:1px solid transparent; color:var(--text-dim); font:inherit;
  padding:2px 9px; border-radius:4px; cursor:pointer;
}
.pf-tabs button:hover{ color:var(--text); }
.pf-tabs button.activa{ background:var(--panel); border-color:var(--line); color:var(--text); font-weight:600; }
.pf-titulo{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text-dim);
}
.pf-titulo b{ color:var(--text); font-weight:600; }
.pf-acciones{ display:flex; gap:4px; flex-shrink:0; align-items:center; }
.pf-acciones button{
  background:transparent; border:1px solid var(--line); color:var(--text-dim); font:inherit; font-size:11px;
  padding:2px 7px; border-radius:4px; cursor:pointer;
}
.pf-acciones button:hover{ color:var(--text); }
.pf-lam{ font-family:'IBM Plex Mono',monospace; font-size:10px; }
.pf-lam.net{ color:#38bdf8; } .pf-lam.tv{ color:#34d399; }

/* --- cuerpo --- */
.pf-zona{ flex:1; min-height:0; position:relative; overflow:hidden; }
#perfil.plegado .pf-zona{ display:none; }
.pf-zona svg{ display:block; width:100%; height:100%; }
.pf-zona svg text{ font-family:'Inter',sans-serif; }
.pf-zona svg .mono{ font-family:'IBM Plex Mono',monospace; }
.pf-vacio{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--text-dim); font-size:12px; padding:0 40px; line-height:1.5;
}
.pf-vacio b{ color:var(--text); }

.pf-acciones .pf-comparar.activa{ color:#e8edf2; border-color:#9ca3af; background:rgba(156,163,175,.12); }
.pf-titulo .pf-margen.ok{ color:#34d399; } .pf-titulo .pf-margen.warn{ color:#fbbf24; } .pf-titulo .pf-margen.bad{ color:#f87171; }
.pf-titulo .pf-b{ color:#9ca3af; }

/* --- barra de arriba del perfil: historial · ¿y si sigo? · alcance --- */
.pf-barra{
  height:24px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 8px 0 10px;
  font-size:10.5px; color:var(--text-dim); border-bottom:1px solid var(--line); background:var(--panel);
}
.pf-barra-izq, .pf-barra-der{ display:flex; align-items:center; gap:5px; white-space:nowrap; min-width:0; }
.pf-barra-der{ overflow:hidden; }
.pf-barra .dim{ color:var(--text-dim); }
.pf-barra button{
  background:transparent; border:1px solid var(--line); color:var(--text); font:inherit; font-size:10px;
  padding:1px 6px; border-radius:4px; cursor:pointer; line-height:1.4;
}
.pf-barra button:hover{ border-color:#fbbf24; color:#fbbf24; }
.pf-alcance{ font-family:'IBM Plex Mono',monospace; font-size:10px; margin-right:6px; }
.pf-alcance .net{ color:#38bdf8; } .pf-alcance .tv{ color:#34d399; } .pf-alcance .bad{ color:#f87171; }
.pf-hist{ display:flex; align-items:center; gap:6px; }
.pf-hist input[type=range]{ width:110px; height:14px; accent-color:#38bdf8; cursor:pointer; }
.pf-hist-txt{ font-family:'IBM Plex Mono',monospace; color:var(--text); }

/* --- tooltip de la mira --- */
.pf-tip{
  position:absolute; top:32px; pointer-events:none; display:none;
  background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:5px 8px;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text); line-height:1.45;
  box-shadow:0 6px 18px rgba(0,0,0,.35); white-space:nowrap; z-index:3;
}
.pf-tip .dim{ color:var(--text-dim); }
.pf-tip .net{ color:#38bdf8; } .pf-tip .tv{ color:#34d399; }

/* --- tabla del recorrido --- */
.pf-tabla-wrap{ position:absolute; inset:0; overflow:auto; }
.pf-tabla{ border-collapse:collapse; width:100%; font-size:11.5px; }
.pf-tabla th{
  position:sticky; top:0; background:var(--panel); text-align:left; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-dim); padding:5px 10px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.pf-tabla td{ padding:4px 10px; border-bottom:1px solid rgba(255,255,255,.05); white-space:nowrap; vertical-align:middle; }
.pf-tabla td.num{ font-family:'IBM Plex Mono',monospace; text-align:right; font-variant-numeric:tabular-nums; }
.pf-tabla td.paso{ white-space:normal; min-width:220px; }
.pf-tabla tr.fila{ cursor:pointer; }
.pf-tabla tr.fila:hover td{ background:rgba(255,255,255,.05); }
.pf-tabla tr.fuente td{ color:var(--text); font-weight:600; }
.pf-tabla tr.cable td.paso::before{ content:'— '; color:var(--text-dim); }
.pf-tabla tr.medida td{ background:rgba(255,255,255,.025); }
.pf-tabla .net{ color:#38bdf8; } .pf-tabla .tv{ color:#34d399; }
.pf-tabla .ok{ color:#34d399; } .pf-tabla .warn{ color:#fbbf24; } .pf-tabla .bad{ color:#f87171; }
.pf-tabla .perd{ color:var(--text-dim); }

/* --- árbol de spliteo --- */
.pf-arbol-wrap{ position:absolute; inset:0 0 16px 0; overflow:auto; }
.pf-arbol-wrap svg{ width:auto; height:auto; display:block; }
.pf-nodo{ cursor:pointer; }
.pf-nodo:hover rect:first-child{ filter:brightness(1.35); }
.pf-arbol-pie{
  position:absolute; left:0; right:0; bottom:0; height:16px; line-height:16px; padding:0 10px;
  font-size:9.5px; color:var(--text-dim); background:var(--panel); border-top:1px solid var(--line);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* --- resaltado de la ruta sobre el mapa --- */
.pf-ruta{ stroke-dasharray:7 5; animation:senal-flujo .7s linear infinite; }

/* En el teléfono el panel no existe: la cáscara móvil ya tiene su propia
   navegación y no hay alto para dos cosas. */
@media (max-width: 820px){
  #perfil{ display:none !important; }
  #app{ grid-template-rows:30px 46px 1fr; }
  #sidebar{ grid-row:2 / 4; }
}
@media (prefers-reduced-motion: reduce){
  .pf-ruta{ animation:none; }
}