@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

  :root{
    --bg: #0a1628;
    --panel: #102340;
    --panel-2: #17305a;
    --line: #24457a;
    --text: #e8eef9;
    --text-dim: #93a8cc;
    --troncal: #8b5cf6;
    --distribucion: #2dd4bf;
    --drop: #ff7a29;
    --nap: #fbbf24;
    --poste: #64748b;
    --cliente: #34d399;
    --olt: #f472b6;
    --danger: #f87171;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%; background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; overflow:hidden;}

  #app{display:grid; grid-template-columns:280px 1fr; grid-template-rows:30px 56px 1fr; height:100vh; width:100vw;}

  /* Barra de menú (estilo software de escritorio) */
  #menubar{
    grid-column:1/3; grid-row:1;
    display:flex; align-items:center; gap:2px;
    background:#0a1b33; border-bottom:1px solid var(--line);
    padding:0 10px; z-index:1001; font-size:12px;
  }
  .menu-item{position:relative;}
  .menu-item > button{
    background:none; border:none; color:var(--text-dim); padding:5px 10px; font-size:12px;
    cursor:pointer; font-family:'Inter',sans-serif; border-radius:4px;
  }
  .menu-item > button:hover, .menu-item.open > button{background:var(--panel-2); color:var(--text);}
  .menu-dropdown{
    display:none; position:absolute; top:100%; left:0; min-width:220px; background:var(--panel);
    border:1px solid var(--line); border-radius:6px; padding:6px; box-shadow:0 12px 30px rgba(0,0,0,.45); z-index:1002;
  }
  .menu-item.open .menu-dropdown{display:block;}
  .menu-dropdown button{
    display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; background:none;
    border:none; color:var(--text); padding:7px 10px; font-size:12.5px; border-radius:4px; cursor:pointer;
  }
  .menu-dropdown button:hover{background:var(--panel-2);}
  .menu-dropdown button kbd{
    font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--text-dim); background:none;
  }
  .menu-dropdown hr{border:none; border-top:1px solid var(--line); margin:5px 2px;}

  /* Ayuda: el lema y la imagen de Yape. La imagen se oculta sola si el
     archivo no está (ver el onerror en el HTML), y en su lugar aparece la
     nota que dice dónde ponerla — así el menú nunca muestra un ícono roto. */
  .yape-dropdown{min-width:250px; text-align:center;}
  .yape-lema{
    font-size:11px; font-weight:700; line-height:1.45; letter-spacing:.02em;
    color:var(--text); padding:8px 6px 10px;
  }
  .yape-img{
    display:block; width:100%; max-width:230px; margin:0 auto 8px;
    border-radius:8px; border:1px solid var(--line);
  }
  .yape-falta{
    font-size:10.5px; color:var(--text-dim); padding:10px 8px; line-height:1.5;
    border:1px dashed var(--line); border-radius:8px; margin-bottom:8px;
  }
  .yape-falta code{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--drop);}

  /* Topbar */
  #topbar{
    grid-column:1/3; grid-row:2;
    display:flex; align-items:center; gap:16px;
    background:var(--panel); border-bottom:1px solid var(--line);
    padding:0 18px; z-index:1000;
  }
  #topbar .brand{display:flex; align-items:center; gap:10px; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:14px; letter-spacing:0.5px;}
  #topbar .brand img{height:28px; width:auto; display:block;}
  #topbar .brand .dot{width:9px; height:9px; border-radius:50%; background:var(--drop); box-shadow:0 0 8px var(--drop); animation:pulse 2s infinite;}
  @keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}
  #topbar .sep{width:1px; height:22px; background:var(--line);}
  #searchbox{
    flex:1; max-width:360px; background:var(--panel-2); border:1px solid var(--line);
    border-radius:6px; padding:7px 12px; color:var(--text); font-size:13px; outline:none;
  }
  #searchbox::placeholder{color:var(--text-dim);}
  #topActions{display:flex; align-items:center; gap:6px; flex-shrink:0;}
  .top-action-btn{
    background:var(--panel-2); border:1px solid var(--line); color:var(--text-dim);
    width:32px; height:32px; border-radius:6px; font-size:13px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .top-action-btn:hover{border-color:#395c94; color:var(--text);}
  .kmz-btn{width:auto; padding:0 12px; font-size:11px; font-weight:600; font-family:'IBM Plex Mono',monospace; letter-spacing:.3px;}
  #stats{margin-left:auto; display:flex; gap:18px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-dim);}
  #stats b{color:var(--text); font-weight:600;}

  /* Sidebar */
  #sidebar{
    grid-column:1; grid-row:3;
    background:var(--panel); border-right:1px solid var(--line);
    overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:18px;
  }
  .side-section h3{
    font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-dim);
    margin-bottom:10px; font-weight:600;
  }
  .section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
  .section-head h3{margin-bottom:0;}
  .head-actions{display:flex; align-items:center; gap:5px;}
  .head-plus{
    width:20px; height:20px; border-radius:5px; background:var(--panel-2); border:1px solid var(--line);
    color:var(--text-dim); font-size:14px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .head-plus:hover{color:var(--text); border-color:#395c94;}
  .collapsible{display:none;}
  .collapsible.expanded{display:block;}

  /* Árbol de proyectos (carpetas estilo Google Earth) */
  #projectSearchInput{
    width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:6px;
    padding:6px 9px; color:var(--text); font-size:12px; outline:none; margin-bottom:8px;
  }
  #projectSearchInput:focus{border-color:var(--drop);}
  #projectTree{display:flex; flex-direction:column; gap:2px; max-height:260px; overflow-y:auto; position:relative;}
  #treeSelectBox{
    position:fixed; z-index:2000; border:1px solid var(--drop); background:rgba(255,122,41,.15);
    pointer-events:none; display:none;
  }
  .tree-row{
    display:flex; align-items:center; gap:6px; padding:5px 6px; border-radius:5px; cursor:pointer;
    font-size:12px; color:var(--text); user-select:none;
  }
  .tree-row:hover{background:var(--panel-2);}
  .tree-row.drop-target{background:rgba(255,122,41,.15); outline:1px dashed var(--drop);}
  .tree-row.active-folder{background:rgba(250,204,21,.14); outline:1px solid rgba(250,204,21,.5);}
  .tree-row.tree-selected{background:rgba(56,189,248,.16); outline:1px solid rgba(56,189,248,.5);}
  .tree-row .chev{width:12px; flex-shrink:0; color:var(--text-dim); font-size:9px; text-align:center;}
  .tree-row .tree-icon{width:14px; height:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
  .tree-row .tree-icon svg{width:100%; height:100%;}
  .tree-row .tree-icon img{width:100%; height:100%; object-fit:contain;}
  .tree-row .tree-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .tree-row .tree-name-input{
    flex:1; background:var(--panel); border:1px solid var(--drop); border-radius:4px;
    color:var(--text); font-size:12px; padding:2px 5px; outline:none; font-family:'Inter',sans-serif;
  }
  .tree-row .tree-actions{display:none; gap:3px; flex-shrink:0;}
  .tree-row:hover .tree-actions{display:flex;}
  .tree-row .tree-actions button{
    background:none; border:none; color:var(--text-dim); font-size:11px; cursor:pointer; padding:1px 3px;
  }
  .tree-row .tree-actions button:hover{color:var(--text);}
  .tree-row.tree-root{color:var(--text); font-weight:600; border-bottom:1px solid var(--line); margin-bottom:4px; padding-bottom:8px;}
  .tree-children{margin-left:15px; border-left:1px dashed var(--line); padding-left:2px;}
  .tree-empty{font-size:11px; color:var(--text-dim); padding:6px 4px;}
  .tool-grid{display:grid; grid-template-columns:1fr 1fr; gap:4px;}
  .tool-btn{
    display:flex; flex-direction:row; align-items:center; gap:4px;
    background:var(--panel-2); border:1px solid var(--line); border-radius:5px;
    padding:4px 6px; cursor:pointer; color:var(--text-dim); font-size:9px; font-weight:500;
    transition:all .15s;
  }
  .tool-btn:hover{border-color:#395c94; color:var(--text);}
  .tool-btn.active{background:var(--panel-2); border-color:var(--accent,#fff); color:var(--text); box-shadow:0 0 0 1px var(--accent,#fff) inset;}
  .tool-btn .ic{width:11px; height:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
  .tool-btn .ic svg{width:100%; height:100%; overflow:visible;}
  .tool-btn .tool-label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

  .cable-list{display:flex; flex-direction:column; gap:6px;}
  .cable-btn{
    display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--line);
    border-radius:8px; padding:8px 10px; cursor:pointer; font-size:12px; color:var(--text-dim); font-weight:500;
  }
  .cable-btn:hover{color:var(--text);}
  .cable-btn.selected{color:var(--text); border-color:#395c94; background:#1b3459;}
  .cable-swatch{width:22px; height:0; border-top-width:3px; border-top-style:solid;}
  .tree-icon .cable-swatch{width:12px;}

  .cable-props{display:flex; flex-direction:column; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line);}
  .cable-prop-row{display:flex; gap:8px;}
  .cable-prop-row .cable-prop-field{flex:1; min-width:0;}
  .cable-prop-field{display:flex; flex-direction:column; gap:4px; font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em;}
  .cable-prop-field select{
    background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:7px 8px;
    color:var(--text); font-size:12px; font-family:inherit; text-transform:none; letter-spacing:normal;
  }
  .cable-prop-length{
    font-size:11.5px; color:var(--text-dim); font-family:'IBM Plex Mono',monospace; background:var(--panel-2);
    border:1px solid var(--line); border-radius:6px; padding:7px 8px;
  }

  .layer-row{display:flex; align-items:center; gap:8px; padding:5px 0; font-size:12.5px; color:var(--text-dim);}
  .layer-export-btn{
    width:100%; background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.35); color:#34d399;
    padding:8px 10px; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer; text-align:left;
    margin-bottom:8px;
  }
  .layer-export-btn:hover{background:rgba(52,211,153,.18);}
  .layer-export-btn:disabled{opacity:.6; cursor:default;}
  .layer-row input{accent-color:var(--drop);}
  .layer-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}

  #mode-banner{
    font-family:'IBM Plex Mono',monospace; font-size:11px; padding:8px 10px; border-radius:6px;
    background:rgba(255,122,41,.1); border:1px solid rgba(255,122,41,.35); color:var(--drop); display:none;
  }
  #mode-banner.show{display:block;}

  .btn-clear{
    margin-top:auto; background:transparent; border:1px solid var(--line); color:var(--text-dim);
    padding:9px; border-radius:6px; font-size:12px; cursor:pointer; font-weight:500;
  }
  .btn-clear:hover{border-color:var(--danger); color:var(--danger);}

  /* Map */
  #map{grid-column:2; grid-row:3; background:#081222;}
  .leaflet-container{background:#081222 !important; font-family:'Inter',sans-serif;}

  /* Detail panel */
  #detail{
    position:absolute; top:102px; right:16px; width:280px; background:var(--panel);
    border:1px solid var(--line); border-radius:10px; padding:16px; z-index:1000; display:none;
    box-shadow:0 12px 30px rgba(0,0,0,.4);
  }
  #detail.show{display:block;}
  #detail h4{font-size:13px; margin-bottom:2px; display:flex; align-items:center; gap:7px;}
  .det-icon{width:16px; height:16px; flex-shrink:0; display:inline-flex;}
  .det-icon svg{width:100%; height:100%;}
  .coord-box{margin-top:10px;}
  .coord-box label{font-size:10.5px; color:var(--text-dim); display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px;}
  .coord-row{
    display:flex; align-items:center; justify-content:space-between; gap:6px;
    background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:7px 9px;
  }
  .coord-row span{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text);}
  .coord-copy{background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:14px; padding:0 2px;}
  .coord-copy:hover{color:var(--drop);}

  /* Foto (mufa / NAP) */
  .photo-box{margin-top:10px;}
  .photo-box label{font-size:10.5px; color:var(--text-dim); display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px;}
  .photo-preview{
    width:100%; height:120px; border-radius:8px; overflow:hidden; background:var(--panel-2);
    border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  }
  .photo-preview img{width:100%; height:100%; object-fit:cover; cursor:zoom-in;}
  .photo-preview img:hover{opacity:0.85;}
  .photo-empty{font-size:11.5px; color:var(--text-dim);}
  .photo-actions{display:flex; gap:6px; margin-top:6px;}
  .photo-btn{
    flex:1; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
    padding:6px; border-radius:6px; font-size:11.5px; cursor:pointer;
  }
  .photo-btn:hover{border-color:#395c94;}
  .photo-btn.photo-remove{color:var(--danger); flex:0 0 auto; padding:6px 10px;}

  /* Fecha de instalación + galería de fotos del cable (DESPLIEGUE FO) */
  .cable-date-row{
    display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding:8px 10px;
    background:var(--panel-2); border:1px solid var(--line); border-radius:8px; font-size:12px;
  }
  .cable-date-row label{color:var(--text-dim); font-size:10.5px; text-transform:uppercase; letter-spacing:.5px;}
  .cable-date-row span{font-family:'IBM Plex Mono',monospace;}
  .cable-photo-box label{display:flex; align-items:center; justify-content:space-between;}
  .photo-add-btn{
    width:20px; height:20px; border-radius:5px; background:var(--panel-2); border:1px solid var(--line);
    color:var(--text-dim); font-size:14px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .photo-add-btn:hover{border-color:#395c94; color:var(--text);}
  .cable-photo-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;}
  .cable-photo-cell{position:relative; aspect-ratio:1; border-radius:6px; overflow:hidden; background:var(--panel-2); border:1px solid var(--line);}
  .cable-photo-cell img{width:100%; height:100%; object-fit:cover; cursor:zoom-in;}
  .cable-photo-del{
    position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%; border:none;
    background:rgba(10,14,19,.75); color:#fff; font-size:9px; line-height:1; cursor:pointer;
  }
  .cable-photo-del:hover{background:var(--danger);}
  .icon-popover{
    position:fixed; z-index:4500; background:var(--panel); border:1px solid var(--line); border-radius:10px;
    padding:10px; width:230px; box-shadow:0 16px 40px rgba(0,0,0,.5);
  }
  .icon-grid{
    display:grid; grid-template-columns:repeat(6, 1fr); gap:5px;
  }
  .icon-cell{
    background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:4px;
    cursor:pointer; display:flex; align-items:center; justify-content:center; aspect-ratio:1;
    min-width:0; /* si no, la celda crece al tamaño nativo del ícono de Google Earth en vez de encogerlo */
  }
  .icon-cell:hover{border-color:var(--drop);}
  .icon-cell img{width:20px; height:20px; object-fit:contain;}
  .icon-cell-upload{color:var(--text-dim); font-size:16px;}
  .icon-popover-reset{
    width:100%; margin-top:8px; background:var(--panel-2); border:1px solid var(--line); color:var(--text-dim);
    border-radius:6px; padding:6px; font-size:11px; cursor:pointer;
  }
  .icon-popover-reset:hover{color:var(--text); border-color:#395c94;}
  #detTitle .det-icon{cursor:pointer; border-radius:4px;}
  #detTitle .det-icon:hover{outline:1px solid var(--drop);}
  #detTitle .det-icon img{width:100%; height:100%; object-fit:contain;}
  #detTitle .det-name{cursor:text; border-radius:4px; padding:1px 3px; margin:-1px -3px;}
  #detTitle .det-name:hover{background:var(--panel-2);}
  .det-name-input{
    background:var(--panel-2); border:1px solid var(--drop); border-radius:4px; color:var(--text);
    font-size:13px; font-family:'Inter',sans-serif; font-weight:600; padding:1px 4px; width:100%;
  }

  .power-box{margin-top:10px;}
  .power-box label{font-size:10.5px; color:var(--text-dim); display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px;}
  .power-row{display:flex; gap:8px;}
  .power-field{flex:1; display:flex; align-items:center; gap:6px; background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:0 8px;}
  .power-field span{font-size:11px; color:var(--text-dim); font-family:'IBM Plex Mono',monospace; flex-shrink:0;}
  .power-field input{
    flex:1; min-width:0; background:none; border:none; padding:7px 0; color:var(--text); font-size:12px; outline:none;
  }

  .paired-field-row{display:flex; gap:8px; margin-top:10px;}
  .paired-field-col{flex:1; min-width:0;}
  .paired-field-col label{font-size:10.5px; color:var(--text-dim); display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px;}
  .paired-field-col input{
    width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:6px;
    padding:7px 9px; color:var(--text); font-size:12.5px; outline:none;
  }
  .paired-field-col input:focus{border-color:var(--drop);}
  .narrow-field{max-width:110px;}

  .plan-box{margin-top:10px;}
  .plan-box > label{font-size:10.5px; color:var(--text-dim); display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px;}
  .plan-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .plan-buttons{display:flex; gap:5px; flex:1;}
  .plan-btn{
    flex:1; background:var(--panel-2); border:1px solid var(--line); color:var(--text-dim); border-radius:6px;
    padding:7px 4px; font-size:11.5px; cursor:pointer; font-family:'IBM Plex Mono',monospace;
  }
  .plan-btn:hover{border-color:#395c94; color:var(--text);}
  .plan-btn.active{background:rgba(255,122,41,.15); border-color:var(--drop); color:var(--drop); font-weight:600;}
  .plan-catv{
    display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--text-dim); white-space:nowrap; cursor:pointer;
  }
  .plan-catv input{accent-color:var(--drop);}

  .splice-label-popover{
    position:fixed; z-index:4600; background:var(--panel); border:1px solid var(--drop); border-radius:8px;
    padding:6px; box-shadow:0 16px 40px rgba(0,0,0,.5);
  }
  .splice-label-popover input{
    background:var(--panel-2); border:1px solid var(--line); border-radius:5px; color:var(--text);
    font-size:12px; padding:6px 8px; width:170px; outline:none;
  }
  .splice-label-popover input:focus{border-color:var(--drop);}

  .fiber-color-popover{
    position:fixed; z-index:4500; background:var(--panel); border:1px solid var(--line); border-radius:10px;
    padding:8px; display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; width:180px;
    box-shadow:0 16px 40px rgba(0,0,0,.5);
  }
  .fc-swatch{width:32px; height:32px; border-radius:6px; border:1px solid rgba(255,255,255,.25); cursor:pointer;}
  .fc-swatch:hover{outline:2px solid var(--drop);}

  /* Pestañas persistentes FTTH·MAP / SMARTLASER — siempre visibles en el menubar */
  .menu-tabs{display:flex; align-items:center; gap:3px; margin-left:8px; padding-left:8px; border-left:1px solid var(--line);}
  .menu-tab{
    background:none; border:none; color:var(--text-dim); padding:4px 12px; font-size:12px; font-weight:600;
    cursor:pointer; font-family:'IBM Plex Mono',monospace; letter-spacing:.3px; border-radius:5px;
  }
  .menu-tab:hover{background:var(--panel-2); color:var(--text);}
  .menu-tab.active{background:var(--accent,var(--olt)); color:#1a0a12;}

  #accountArea{display:flex; align-items:center; gap:8px; margin-left:auto;}
  #userBadge{font-size:11px; color:var(--text-dim); font-family:'IBM Plex Mono',monospace;}
  #userBadge b{color:var(--text); font-weight:600;}
  #logoutBtn{
    background:none; border:1px solid var(--line); color:var(--text-dim); padding:3px 10px; font-size:11px;
    border-radius:5px; cursor:pointer; font-family:'Inter',sans-serif;
  }
  #logoutBtn:hover{border-color:var(--danger); color:var(--danger);}

  /* Módulos cargados en iframe: SMARTLASER (OLTs) y ADMINISTRACIÓN (abonados).
     Ocupan todo el área debajo del menubar (30px) mientras su pestaña está activa;
     el menubar con las pestañas queda siempre visible encima para poder volver. */
  #smartLaserOverlay, #adminOverlay{
    /* z-index por encima de #topbar (1000) — el overlay empieza justo donde
       termina #menubar (30px) así que nunca se solapan y no hace falta
       superar el z-index:1001 del menubar para que las pestañas se vean. */
    display:none; position:fixed; top:30px; left:0; right:0; bottom:0; background:var(--bg); z-index:1005;
  }
  #smartLaserOverlay.show, #adminOverlay.show{display:block;}
  #smartLaserFrame, #adminFrame{width:100%; height:100%; border:none; display:block; background:var(--bg);}

  /* Gestión de usuarios (solo admin) y de empresas (solo app de escritorio).
     Comparten #usersModal y todo lo de adentro — es la misma ventana con
     otro contenido, no vale la pena duplicar los estilos. */
  #usersOverlay, #empresasOverlay{
    display:none; position:fixed; inset:0; background:rgba(4,7,10,.75); z-index:3200;
    align-items:center; justify-content:center; backdrop-filter:blur(2px);
  }
  #usersOverlay.show, #empresasOverlay.show{display:flex;}
  #waBox .uf-field > div > div{
    display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:6px;
    background:var(--panel-2); border:1px solid var(--line); font-size:12px; margin-bottom:4px;
  }
  #waBox .wa-del{
    margin-left:auto; background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:13px;
  }
  #waBox .wa-del:hover{color:var(--danger);}
  #usersModal{
    background:var(--panel); border:1px solid var(--line); border-radius:12px;
    width:min(760px, 94vw); max-height:86vh; display:flex; flex-direction:column; overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.5);
  }
  #usersHeader{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line);}
  #usersHeader h3{font-size:14px; font-weight:600;}
  #usersHeader span{font-size:11px; color:var(--text-dim);}
  #closeUsers{background:none; border:none; color:var(--text-dim); font-size:18px; cursor:pointer;}
  #usersToolbar{display:flex; flex-wrap:wrap; gap:8px; padding:14px 20px 0;}
  .users-link{
    font-size:11.5px; font-weight:600; color:var(--text-dim); background:var(--panel-2); border:1px solid var(--line);
    border-radius:6px; padding:7px 11px; text-decoration:none; display:inline-flex; align-items:center;
  }
  .users-link:hover{color:var(--text); border-color:#395c94;}
  #usersImportMsg{font-size:11.5px; color:var(--text-dim); padding:0 20px; margin-top:6px;}
  #usersImportMsg.err{color:var(--danger);}
  #usersTableWrap{overflow:auto; padding:14px 20px 20px; max-height:340px;}
  #usersTable{width:100%; border-collapse:collapse; font-size:12px;}
  #usersTable th{
    text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim);
    padding:6px 8px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel);
  }
  #usersTable td{padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:middle;}
  #usersTable button{background:none; border:none; color:var(--text-dim); font-size:12px; cursor:pointer; padding:0 4px;}
  #usersTable button:hover{color:var(--text);}
  #usersTable button.rm:hover{color:var(--danger);}
  #userFormBox{border-top:1px solid var(--line); padding:16px 20px 20px;}
  #userFormBox h4{font-size:12.5px; font-weight:600; margin-bottom:12px;}
  .uf-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px;}
  .uf-field{display:flex; flex-direction:column; gap:4px;}
  .uf-field label{font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em;}
  .uf-field label span{text-transform:none; letter-spacing:0; font-style:italic;}
  .uf-field input, .uf-field select{
    background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:7px 9px;
    color:var(--text); font-size:12.5px; font-family:'Inter',sans-serif; outline:none;
  }
  .uf-field input:focus, .uf-field select:focus{border-color:var(--drop);}
  #ufErr{font-size:11.5px; color:var(--danger); margin-bottom:8px; display:none;}
  #ufErr.show{display:block;}
  .uf-actions{display:flex; justify-content:flex-end; gap:8px;}

  /* Clientes de NAP */
  #napClientsOverlay{
    display:none; position:fixed; inset:0; background:rgba(4,7,10,.75); z-index:3200;
    align-items:center; justify-content:center; backdrop-filter:blur(2px);
  }
  #napClientsOverlay.show{display:flex;}
  #napClientsModal{
    background:var(--panel); border:1px solid var(--line); border-radius:12px;
    width:min(980px, 94vw); max-height:86vh; display:flex; flex-direction:column; overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.5);
  }
  #napClientsHeader{
    display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
    border-bottom:1px solid var(--line);
  }
  #napClientsHeader h3{font-size:14px; font-weight:600;}
  #napClientsHeader span{font-size:11px; color:var(--text-dim); font-family:'IBM Plex Mono',monospace;}
  #closeNapClients{background:none; border:none; color:var(--text-dim); font-size:18px; cursor:pointer;}
  #napClientsTableWrap{flex:1; overflow:auto; padding:14px 20px 20px;}
  #napClientsTable{width:100%; border-collapse:collapse; font-size:12px;}
  #napClientsTable th{
    text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim);
    padding:6px 8px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel);
  }
  #napClientsTable td{padding:4px 6px; border-bottom:1px solid var(--line); vertical-align:middle;}
  #napClientsTable input{
    width:100%; min-width:80px; background:var(--panel-2); border:1px solid transparent; border-radius:5px;
    padding:6px 7px; color:var(--text); font-size:12px; outline:none;
  }
  #napClientsTable input:focus{border-color:var(--drop); background:var(--panel);}
  .nc-photo-cell{width:60px; text-align:center;}
  .nc-photo-toggle{
    background:var(--panel-2); border:1px solid var(--line); color:var(--text-dim); border-radius:5px;
    width:30px; height:26px; cursor:pointer; font-size:13px;
  }
  .nc-photo-toggle:hover{border-color:#395c94; color:var(--text);}
  .nc-photo-expanded{display:flex; flex-direction:column; align-items:center; gap:3px;}
  .nc-photo-expanded img{width:42px; height:42px; object-fit:cover; border-radius:5px; cursor:zoom-in; border:1px solid var(--line);}
  .nc-photo-expanded .nc-photo-actions{display:flex; gap:3px;}
  .nc-photo-expanded button{background:none; border:none; color:var(--text-dim); font-size:10px; cursor:pointer;}
  .nc-photo-expanded button:hover{color:var(--text);}
  .nc-del-btn{background:none; border:none; color:var(--text-dim); font-size:13px; cursor:pointer; padding:0 4px;}
  .nc-del-btn:hover{color:var(--danger);}
  #napConnectedWrap{padding:14px 20px 0; border-bottom:1px solid var(--line);}
  #napConnectedWrap h4, #napClientsTableWrap h4{
    font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-dim); margin-bottom:8px; font-weight:600;
  }
  #napConnectedTable{width:100%; border-collapse:collapse; font-size:12px; margin-bottom:14px;}
  #napConnectedTable th{
    text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim);
    padding:6px 8px; border-bottom:1px solid var(--line);
  }
  #napConnectedTable td{padding:4px 6px; border-bottom:1px solid var(--line); vertical-align:middle;}
  #napConnectedTable input{
    width:100%; min-width:80px; background:var(--panel-2); border:1px solid transparent; border-radius:5px;
    padding:6px 7px; color:var(--text); font-size:12px; outline:none;
  }
  #napConnectedTable input:focus{border-color:var(--drop); background:var(--panel);}
  .nc-thumb{width:32px; height:32px; border-radius:5px; object-fit:cover; cursor:zoom-in; border:1px solid var(--line);}
  .nc-thumb-empty{font-size:10px; color:var(--text-dim);}
  .nc-edit-btn{background:var(--panel-2); border:1px solid var(--line); color:var(--text-dim); border-radius:5px; padding:4px 8px; font-size:10.5px; cursor:pointer;}
  .nc-edit-btn:hover{color:var(--text); border-color:#395c94;}

  /* Importación KMZ — recuadro de agrupación */
  #kmzImportOverlay{
    display:none; position:fixed; inset:0; background:rgba(4,7,10,.75); z-index:3600;
    align-items:center; justify-content:center; backdrop-filter:blur(2px);
  }
  #kmzImportOverlay.show{display:flex;}
  #kmzImportModal{
    background:var(--panel); border:1px solid var(--line); border-radius:12px;
    width:min(680px, 94vw); max-height:86vh; display:flex; flex-direction:column; overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.5);
  }
  #kmzImportHeader{
    display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
    border-bottom:1px solid var(--line);
  }
  #kmzImportHeader h3{font-size:14px; font-weight:600;}
  #kmzImportHeader span{font-size:11px; color:var(--text-dim); font-family:'IBM Plex Mono',monospace;}
  #closeKmzImport{background:none; border:none; color:var(--text-dim); font-size:18px; cursor:pointer;}
  #kmzImportHint{padding:8px 20px; font-size:11.5px; color:var(--text-dim); border-bottom:1px solid var(--line);}
  #kmzImportBody{flex:1; overflow-y:auto; padding:14px 20px;}
  .kmz-section{margin-bottom:16px;}
  .kmz-section h4{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-dim); margin-bottom:8px; font-weight:600;}
  .kmz-floating-note{text-transform:none; letter-spacing:0; font-weight:400; color:var(--text-dim); font-size:10.5px;}
  .kmz-group-row{
    display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--line);
    border-radius:8px; padding:8px 10px; margin-bottom:6px;
  }
  .kmz-group-icon{width:26px; height:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
  .kmz-group-icon img{max-width:100%; max-height:100%;}
  .kmz-group-swatch{width:22px; height:5px; border-radius:3px; flex-shrink:0;}
  .kmz-group-info{flex:1; min-width:0;}
  .kmz-group-info .kg-name{font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .kmz-group-info .kg-count{font-size:10.5px; color:var(--text-dim); font-family:'IBM Plex Mono',monospace;}
  .kmz-group-row select{
    background:var(--panel); border:1px solid var(--line); border-radius:6px; color:var(--text);
    font-size:12px; padding:6px 8px; flex-shrink:0;
  }
  #kmzImportFooter{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 20px; border-top:1px solid var(--line);
  }
  .kmz-folder-label{font-size:11.5px; color:var(--text-dim); display:flex; align-items:center; gap:6px;}
  .kmz-folder-label select{
    background:var(--panel-2); border:1px solid var(--line); border-radius:6px; color:var(--text);
    font-size:12px; padding:5px 8px;
  }
  #kmzImportStatus{padding:0 20px; font-size:11.5px; min-height:0;}
  #kmzImportStatus.show{padding:8px 20px; color:var(--danger); border-top:1px solid var(--line);}

  #photoLightbox{
    display:none; position:fixed; inset:0; background:rgba(4,7,10,.9); z-index:3500;
    align-items:center; justify-content:center; flex-direction:column; gap:10px; cursor:zoom-out;
  }
  #photoLightbox.show{display:flex;}
  #photoLightbox img{max-width:90vw; max-height:82vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.6);}
  #photoLightboxCaption{color:var(--text); font-size:13px; font-family:'IBM Plex Mono',monospace;}
  #detail .type-tag{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; display:block;}
  #detail label{font-size:10.5px; color:var(--text-dim); display:block; margin-top:10px; margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px;}
  #detail input, #detail select{
    width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:6px;
    padding:7px 9px; color:var(--text); font-size:12.5px; outline:none;
  }
  #detail input:focus, #detail select:focus{border-color:var(--drop);}
  .field-inline-row{display:flex; gap:6px; align-items:stretch;}
  .field-inline-row input{flex:1;}
  .field-inline-btn{
    flex-shrink:0; width:32px; background:rgba(255,122,41,.12); border:1px solid rgba(255,122,41,.4);
    color:var(--drop); border-radius:6px; font-size:15px; font-weight:600; cursor:pointer;
  }
  .field-inline-btn:hover{background:rgba(255,122,41,.22);}
  .field-inline-btn.wide{flex:1; width:auto; font-size:12px; font-weight:600; padding:0 8px;}
  .detail-actions{display:flex; gap:8px; margin-top:14px;}
  .detail-actions button{flex:1; padding:8px; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer; border:1px solid var(--line);}
  #saveBtn{background:var(--drop); border-color:var(--drop); color:#1a0f05;}
  #deleteBtn{background:transparent; color:var(--danger); border-color:var(--line);}
  #deleteBtn:hover{border-color:var(--danger);}
  #openSpliceBtn{
    width:100%; margin-top:14px; padding:9px; border-radius:6px; font-size:12px; font-weight:500;
    cursor:pointer; background:rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.4); color:#38bdf8;
  }
  #openSpliceBtn:hover{background:rgba(56,189,248,.2);}
  #extendCableBtn{
    width:100%; margin:10px 0 4px; padding:8px; border-radius:6px; font-size:11.5px; font-weight:500;
    cursor:pointer; background:rgba(148,163,184,.1); border:1px solid var(--line); color:var(--text);
  }
  #extendCableBtn:hover{border-color:#395c94;}
  #closeDetail{position:absolute; top:12px; right:14px; cursor:pointer; color:var(--text-dim); font-size:16px; background:none; border:none;}

  /* Leaflet popup tweaks */
  .leaflet-popup-content-wrapper{background:var(--panel); color:var(--text); border-radius:8px; border:1px solid var(--line);}
  .leaflet-popup-tip{background:var(--panel);}
  .leaflet-popup-content{font-family:'Inter',sans-serif; font-size:12.5px; margin:10px 12px;}
  .leaflet-popup-content b{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.3px;}

  .divIcon{border-radius:50%; border:2px solid #0a1628; box-shadow:0 0 0 1px rgba(255,255,255,.15);}

  /* Cuadradito que sigue al cursor mientras se reubica un elemento (doble
     clic — ver startRelocateElement). Reusa el mismo @keyframes pulse del
     puntito del topbar. */
  .relocate-marker{
    width:14px; height:14px; background:var(--drop); border:2px solid #fff;
    box-shadow:0 0 10px var(--drop); animation:pulse 0.9s infinite;
  }

  #statusbar{
    position:absolute; left:280px; right:0; bottom:0; height:26px;
    background:var(--panel); border-top:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 14px; font-size:10.5px; color:var(--text-dim);
    font-family:'IBM Plex Mono',monospace; z-index:900;
  }
  #statusbar .sb-hint{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:12px;}
  #statusbar .sb-right{display:flex; align-items:center; gap:16px; flex-shrink:0;}
  #statusbar .sb-right b{color:var(--text); font-weight:600;}
  .leaflet-bottom{ bottom:26px !important; }
  .leaflet-control-scale-line{
    background:rgba(18,25,34,.85) !important; border-color:#395c94 !important; color:var(--text-dim) !important;
    font-family:'IBM Plex Mono',monospace !important; font-size:10px !important;
  }
  .leaflet-control-attribution{
    background:rgba(18,25,34,.75) !important; color:var(--text-dim) !important; font-size:9.5px !important;
    padding:1px 6px !important; border-radius:4px 0 0 0 !important;
  }
  .leaflet-control-attribution a{color:var(--text-dim) !important;}
  .leaflet-control-layers{
    background:var(--panel) !important; border:1px solid var(--line) !important; border-radius:8px !important;
    color:var(--text) !important; box-shadow:0 8px 20px rgba(0,0,0,.4) !important;
  }
  .leaflet-control-layers-toggle{ filter:invert(1) brightness(1.6); }
  .leaflet-control-layers-expanded{ padding:10px 12px !important; font-family:'Inter',sans-serif; font-size:12.5px; }
  .leaflet-control-layers label{ margin-bottom:4px; }
  .leaflet-control-layers-separator{ border-color:var(--line) !important; }

  /* Splice viewer */
  #spliceOverlay{
    display:none; position:fixed; inset:0; background:rgba(4,7,10,.75); z-index:3000;
    align-items:center; justify-content:center; backdrop-filter:blur(2px);
  }
  #spliceOverlay.show{display:flex;}
  #spliceModal{
    background:var(--panel); border:1px solid var(--line); border-radius:12px;
    width:min(920px, 92vw); max-height:86vh; display:flex; flex-direction:column; overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.5);
  }
  #spliceHeader{
    display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
    border-bottom:1px solid var(--line);
  }
  #spliceHeader h3{font-size:14px; font-weight:600;}
  #spliceHeader span{font-size:11px; color:var(--text-dim); font-family:'IBM Plex Mono',monospace;}
  #closeSplice{background:none; border:none; color:var(--text-dim); font-size:18px; cursor:pointer;}
  .splice-pdf-btn{
    background:rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.4); color:#38bdf8;
    padding:6px 12px; border-radius:6px; font-size:11.5px; font-weight:500; cursor:pointer;
    font-family:'Inter',sans-serif;
  }
  .splice-pdf-btn:hover{background:rgba(56,189,248,.2);}
  .splice-pdf-btn:disabled{opacity:.5; cursor:default;}
  #spliceHint{
    padding:8px 20px; font-size:11.5px; color:var(--text-dim); border-bottom:1px solid var(--line);
    font-family:'IBM Plex Mono',monospace;
  }
  #spliceCanvasWrap{flex:1; overflow:auto; padding:10px 10px 0;}
  #splitterBar{
    display:flex; align-items:center; gap:8px; padding:8px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap;
  }
  #splitterBar .sp-label{font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px;}
  #splitterBar .sp-add{
    background:var(--panel-2); border:1px solid var(--line); color:var(--text); border-radius:6px;
    padding:4px 10px; font-size:11.5px; cursor:pointer; font-family:'IBM Plex Mono',monospace;
  }
  #splitterBar .sp-add:hover{border-color:#395c94;}
  #splitterChips{display:flex; gap:6px; flex-wrap:wrap; margin-left:6px;}
  .sp-chip{
    display:flex; align-items:center; gap:6px; background:rgba(163,173,186,.12); border:1px solid #395c94;
    color:var(--text); border-radius:14px; padding:3px 6px 3px 10px; font-size:11px;
  }
  .sp-chip button{background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:12px; padding:0 2px;}
  .sp-chip button:hover{color:var(--danger);}
  #equipmentBar{
    display:flex; align-items:center; gap:8px; padding:8px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap;
  }
  #equipmentBar .sp-label{font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px;}
  #equipmentKindSelect{
    background:var(--panel-2); border:1px solid var(--line); color:var(--text); border-radius:6px;
    padding:4px 8px; font-size:11.5px;
  }
  #equipmentChips{display:flex; gap:6px; flex-wrap:wrap; margin-left:6px;}
  #spliceList{
    border-top:1px solid var(--line); padding:10px 20px; max-height:150px; overflow-y:auto;
    display:flex; flex-direction:column; gap:6px;
  }
  #spliceList .empty{color:var(--text-dim); font-size:12px;}
  .splice-row{
    display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--text);
    background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:6px 10px;
  }
  .splice-row .swatch{width:10px; height:10px; border-radius:50%; flex-shrink:0; border:1px solid rgba(255,255,255,.3);}
  .splice-row .rm{margin-left:auto; cursor:pointer; color:var(--text-dim); background:none; border:none; font-size:13px;}
  .splice-row .rm:hover{color:var(--danger);}
  .fiber-dot{cursor:pointer;}
  .fiber-dot:hover{filter:brightness(1.3);}

  /* Tooltip del mapa */
  .ftth-tooltip{
    background:var(--panel) !important; color:var(--text) !important; border:1px solid var(--line) !important;
    border-radius:6px !important; font-family:'Inter',sans-serif; font-size:12px; padding:6px 10px !important;
    box-shadow:0 8px 20px rgba(0,0,0,.4);
  }
  .ftth-tooltip::before{border-top-color:var(--line) !important;}
  /* Etiqueta fija sobre el mapa (menú Ver → nombres): más chica y discreta
     que el tooltip de hover, porque están todas prendidas a la vez. */
  .ftth-label{
    background:rgba(10,14,19,.78) !important; border-color:rgba(255,255,255,.18) !important;
    font-size:10.5px !important; padding:2px 6px !important; box-shadow:none;
  }
  .ftth-label::before{display:none !important;}
  .menu-check{
    display:inline-block; width:13px; margin-right:2px; text-align:center; color:var(--drop);
  }

  /* Ventanita que sigue al cursor SOLO mientras se traza troncal/distribución:
     dice "ingreso a X" al pasar sobre una herramienta, y "saliendo de X"
     después de atravesarla, hasta el siguiente vértice. */
  #nodeHoverTip{
    position:fixed; z-index:1200; display:none; pointer-events:none;
    font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; padding:5px 9px; border-radius:6px;
    background:var(--drop); color:#1a0f05;
    box-shadow:0 8px 20px rgba(0,0,0,.45); white-space:nowrap;
  }
  #nodeHoverTip.show{display:block;}

  /* Esquema "caja anterior — esta caja — caja siguiente" en el detalle de
     un elemento puntual (ver buildChainDiagram). */
  .chain-box{margin-top:10px;}
  .chain-box > label{
    display:block; font-size:10px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--text-dim); margin-bottom:6px;
  }
  .chain-svg{width:100%; height:auto; display:block; overflow:visible;}
  .chain-empty{font-size:11.5px; color:var(--text-dim);}