:root{
  --fondo:#f4f6f8; --papel:#ffffff; --tinta:#16202b; --suave:#5d6b7a;
  --linea:#dde3ea; --acento:#0b5fa5; --acento2:#0a7d5a; --alerta:#c0392b;
  --aviso:#b8860b; --radio:10px; --sombra:0 1px 3px rgba(16,32,48,.10),0 6px 18px rgba(16,32,48,.06);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--fondo);color:var(--tinta);-webkit-text-size-adjust:100%}
.oculto{display:none !important}
button,input,select,textarea{font:inherit;color:inherit}

/* ---------- botones ---------- */
.btn{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:.45rem .8rem;cursor:pointer;white-space:nowrap;transition:.12s}
.btn:hover{border-color:#b9c4d0;background:#fbfcfd}
.btn:active{transform:translateY(1px)}
.btn.primario{background:var(--acento);border-color:var(--acento);color:#fff}
.btn.primario:hover{background:#0a538f}
.btn.peligro{color:var(--alerta);border-color:#f0c9c4}
.btn.fantasma{background:transparent;border-color:transparent}
.btn.fantasma:hover{background:rgba(255,255,255,.14);border-color:transparent}
.btn.activo{background:var(--acento2);border-color:var(--acento2);color:#fff}
.btn.mini{padding:.2rem .5rem;font-size:12px}

/* ---------- login ---------- */
.login{min-height:100%;display:grid;place-items:center;padding:1.5rem;
  background:linear-gradient(160deg,#0b2d4d,#0b5fa5 60%,#0a7d5a)}
.tarjetaLogin{background:var(--papel);padding:1.8rem;border-radius:16px;box-shadow:var(--sombra);
  width:min(100%,380px);display:grid;gap:.9rem}
.marca{display:flex;align-items:center;gap:.8rem}
.marca h1{margin:0;font-size:1.35rem}
.version{font-size:.72rem;color:var(--suave);font-weight:600;vertical-align:super}
.marca p{margin:.15rem 0 0;color:var(--suave);font-size:.85rem}
.logo{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;flex:0 0 auto;
  background:linear-gradient(140deg,#0b5fa5,#0a7d5a);color:#fff;font-weight:700;letter-spacing:.5px}
.tarjetaLogin label{display:grid;gap:.3rem;font-size:.85rem;color:var(--suave)}
.tarjetaLogin input{padding:.6rem .7rem;border:1px solid var(--linea);border-radius:var(--radio);background:#fff}
.aviso{margin:0;color:var(--alerta);font-size:.85rem;min-height:1.2em}

/* ---------- barra ---------- */
.barra{display:flex;align-items:center;gap:.5rem;padding:.55rem .8rem;color:#fff;
  background:linear-gradient(100deg,#0b2d4d,#0b5fa5);flex-wrap:wrap}
.marca.compacta .logo{width:30px;height:30px;border-radius:9px;font-size:.8rem;background:rgba(255,255,255,.18)}
.marca.compacta{gap:.5rem}
.espaciador{flex:1}
.selProyecto{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radio);padding:.4rem .6rem;max-width:min(46vw,320px)}
.selProyecto option{color:#16202b}
.chipUsuario{font-size:.8rem;background:rgba(255,255,255,.16);padding:.25rem .6rem;border-radius:999px}
.barra .btn{color:#fff}

/* ---------- pestañas ---------- */
.pestanas{display:flex;gap:.2rem;background:var(--papel);border-bottom:1px solid var(--linea);
  padding:0 .5rem;overflow-x:auto}
.pestana{background:none;border:0;border-bottom:3px solid transparent;padding:.7rem .9rem;
  cursor:pointer;color:var(--suave);white-space:nowrap}
.pestana.activa{color:var(--acento);border-bottom-color:var(--acento);font-weight:600}

/* ---------- vistas ---------- */
#app{display:flex;flex-direction:column;height:100vh;height:100dvh}
.barra,.pestanas{flex:0 0 auto}
.vista{padding:.7rem;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.vista>.herramientas{flex:0 0 auto}
.herramientas{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-bottom:.6rem}
.grupo{display:flex;gap:.3rem;flex-wrap:wrap;background:var(--papel);padding:.25rem;
  border:1px solid var(--linea);border-radius:var(--radio)}
.pista{color:var(--suave);font-size:.82rem}
.campoEnLinea{display:flex;align-items:center;gap:.4rem;background:var(--papel);
  border:1px solid var(--linea);border-radius:var(--radio);padding:.25rem .5rem;font-size:.82rem;color:var(--suave)}
.campoEnLinea select,.campoEnLinea input{border:0;background:transparent;padding:.2rem;color:var(--tinta);max-width:52vw}

/* ---------- lienzo ---------- */
.lienzoEnvoltura{position:relative;background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--radio);box-shadow:var(--sombra);overflow:hidden;
  flex:1 1 auto;min-height:280px}
#lienzo{width:100%;height:100%;display:block;touch-action:none;background:
  repeating-linear-gradient(0deg,#f7f9fb 0 24px,transparent 24px 25px),
  repeating-linear-gradient(90deg,#f7f9fb 0 24px,transparent 24px 25px),#fff}
.nodo{cursor:grab}
.nodo.sel .caja{stroke:var(--acento2);stroke-width:3}
.caja{fill:#fff;stroke:#0b2d4d;stroke-width:2;rx:8}
.etiqueta{font:600 11px sans-serif;fill:#16202b;pointer-events:none}
.subetiqueta{font:10px sans-serif;fill:#5d6b7a;pointer-events:none}
.icono{font:700 11px sans-serif;fill:#fff;pointer-events:none;text-anchor:middle}
.cable{stroke:#0b5fa5;stroke-width:3;fill:none;cursor:pointer}
.cable:hover{stroke:#0a7d5a;stroke-width:5}
.cableTexto{font:10px sans-serif;fill:#0b5fa5;pointer-events:none}

/* ---------- panel lateral ---------- */
.panel{position:absolute;top:0;right:0;width:min(92vw,330px);height:100%;background:var(--papel);
  border-left:1px solid var(--linea);box-shadow:-8px 0 24px rgba(16,32,48,.08);padding:.9rem;
  overflow:auto;display:grid;gap:.55rem;align-content:start}
.panel h3{margin:0 0 .2rem}
.panel label{display:grid;gap:.25rem;font-size:.78rem;color:var(--suave)}
.panel input,.panel select,.panel textarea{padding:.45rem .55rem;border:1px solid var(--linea);
  border-radius:8px;background:#fff;width:100%}
.panel .fila{display:flex;gap:.4rem}
.panel .fila>*{flex:1}

/* ---------- tablas ---------- */
.tablaEnvoltura{overflow:auto;background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--radio);box-shadow:var(--sombra);flex:1 1 auto;min-height:0}
.tabla{border-collapse:collapse;width:100%;font-size:.85rem;min-width:860px}
.tabla th{position:sticky;top:0;background:#eef2f6;text-align:left;padding:.5rem;
  border-bottom:1px solid var(--linea);font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;z-index:2}
.tabla td{padding:.3rem .45rem;border-bottom:1px solid #eef1f5;vertical-align:middle}
.tabla tr:hover td{background:#fafcfe}
.tabla select,.tabla input{border:1px solid transparent;background:transparent;padding:.25rem;
  border-radius:6px;width:100%}
.tabla select:focus,.tabla input:focus{border-color:var(--acento);background:#fff;outline:none}
.hilo{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.muestra{width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.25);flex:0 0 auto}
.tubo{font-size:.72rem;color:var(--suave)}

/* ---------- bitácora ---------- */
.bitacoraLista{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  overflow:auto;align-content:start;flex:1 1 auto;min-height:0}
.entrada{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:.8rem;display:grid;gap:.45rem}
.entrada h4{margin:0;font-size:1rem}
.metadatos{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.75rem;color:var(--suave)}
.insignia{padding:.1rem .5rem;border-radius:999px;font-size:.72rem;border:1px solid var(--linea)}
.insignia.completado{background:#e7f6ef;color:#0a7d5a;border-color:#bfe5d5}
.insignia.pendiente{background:#fdf5e3;color:var(--aviso);border-color:#f0e0bb}
.insignia\.enproceso,.insignia.enproceso{background:#e8f1fa;color:var(--acento);border-color:#c9dcef}
.insignia.incidencia{background:#fbebe9;color:var(--alerta);border-color:#f0c9c4}
.miniaturas{display:flex;gap:.35rem;flex-wrap:wrap}
.miniaturas img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--linea);cursor:pointer}
.descripcion{margin:0;color:#31404f;white-space:pre-wrap;font-size:.88rem}

/* ---------- colores ---------- */
.colores{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  overflow:auto;align-content:start;flex:1 1 auto;min-height:0}
.tarjetaColor{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:.6rem;display:flex;align-items:center;gap:.6rem;box-shadow:var(--sombra)}
.tarjetaColor .muestra{width:30px;height:30px;border-radius:7px}
.tarjetaColor b{display:block}
.tarjetaColor span{font-size:.75rem;color:var(--suave)}

/* ---------- resumen ---------- */
.resumen{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  overflow:auto;align-content:start;flex:1 1 auto;min-height:0}
.metrica{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:.9rem;box-shadow:var(--sombra)}
.metrica b{display:block;font-size:1.7rem;line-height:1.1}
.metrica span{color:var(--suave);font-size:.8rem}
.resumen .ancho{grid-column:1/-1}

/* ---------- modal ---------- */
.modalFondo{position:fixed;inset:0;background:rgba(11,26,43,.55);display:grid;place-items:center;
  padding:1rem;z-index:50;overflow:auto}
.modal{background:var(--papel);border-radius:14px;padding:1.1rem;width:min(100%,560px);
  display:grid;gap:.6rem;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:92vh;overflow:auto}
.modal h3{margin:0}
.modal label{display:grid;gap:.25rem;font-size:.8rem;color:var(--suave)}
.modal input,.modal select,.modal textarea{padding:.5rem .6rem;border:1px solid var(--linea);
  border-radius:8px;background:#fff;width:100%}
.modal textarea{min-height:80px;resize:vertical}
.modal .fila{display:flex;gap:.5rem;flex-wrap:wrap}
.modal .fila>*{flex:1;min-width:120px}
.acciones{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap;margin-top:.3rem}

/* ---------- varios ---------- */
.brindis{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);background:#16202b;color:#fff;
  padding:.6rem 1rem;border-radius:999px;z-index:80;box-shadow:var(--sombra);font-size:.85rem}
.visor{position:fixed;inset:0;background:rgba(0,0,0,.9);display:grid;place-items:center;z-index:90;gap:1rem}
.visor img{max-width:96vw;max-height:84vh;object-fit:contain}
.cerrarVisor{position:absolute;top:1rem;right:1rem}
.vacio{color:var(--suave);padding:1.5rem;text-align:center;background:var(--papel);
  border:1px dashed var(--linea);border-radius:var(--radio);grid-column:1/-1}

@media (max-width:820px), (max-height:520px){
  .vista{padding:.5rem}
  /* barra mas compacta: el mapa necesita la pantalla */
  /* toda la barra de arriba en una sola fila */
  .barra{padding:.4rem .5rem;gap:.3rem;flex-wrap:nowrap}
  .marca.compacta strong{display:none}
  .barra .btn{padding:.3rem .45rem;font-size:.8rem;white-space:nowrap}
  .chipUsuario{display:none}
  .selProyecto{flex:1 1 auto;min-width:0;max-width:none}
  #btnNuevoProyecto{font-size:0;padding:.3rem .55rem}
  #btnNuevoProyecto::after{content:"+";font-size:1.05rem;line-height:1}
  .espaciador{display:none}
  .pestana{padding:.55rem .75rem;font-size:.92rem}
  /* una sola fila de herramientas, deslizable */
  .vista>.herramientas{flex-wrap:wrap;gap:.3rem;padding-bottom:.2rem;align-items:center}
  /* descendiente, no hijo directo: los secundarios viven dentro de los grupos */
  .vista>.herramientas .secundario{display:none}
  .vista>.herramientas.abierta .secundario{display:inline-flex}
  .vista>.herramientas .grupo:not(:has(*:not(.secundario))){display:none}
  .vista>.herramientas.abierta .grupo{display:flex}
  .vista>.herramientas .btn{padding:.4rem .55rem;font-size:.82rem}
  .grupo{flex-wrap:wrap;gap:.25rem}
  .buscador{flex:1 1 100%}
  .buscador input{min-width:0;width:100%}
  .campoEnLinea{flex:1 1 auto;min-width:0}
  .campoEnLinea select{flex:1 1 auto;min-width:0;max-width:none}
  .botonMas{display:inline-flex !important;align-items:center;gap:.25rem}
  .pista{flex:1 1 100%;order:9}
  /* la pista flota sobre el mapa */
  #pistaMapa{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:20;
    background:rgba(22,32,43,.92);color:#fff;padding:.45rem .9rem;border-radius:999px;
    font-size:.78rem;max-width:92vw;text-align:center;box-shadow:var(--sombra)}
  #pistaMapa:empty{display:none}
}

/* ---------- mapa real ---------- */
.mapa{position:relative;width:100%;height:100%;overflow:hidden;background:#e6ebf0;
  touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.mapa:active{cursor:grabbing}
.mapa.colocando,.mapa.trazando{cursor:crosshair}
.capaTeselas,.capaSuperpuestas,.capaMarcas,.capaLineas{position:absolute;inset:0}
.capaTeselas{z-index:1}
.capaSuperpuestas{z-index:1;pointer-events:none}
.capaLineas{z-index:2;pointer-events:none}
.capaLineas .lineaMapa{pointer-events:auto;cursor:pointer}
.capaLineas .lineaMapa:hover polyline:last-of-type{stroke-width:7}
.capaMarcas{z-index:3;pointer-events:none}
.tesela{position:absolute;width:256px;height:256px;pointer-events:none;
  -webkit-user-drag:none;user-drag:none}
.tesela.falla{opacity:0;}
.textoLinea{font:600 10px sans-serif;fill:#0b2d4d}
.verticeRuta{fill:#fff;stroke:#0b5fa5;stroke-width:2}
.marcaMapa{position:absolute;top:0;left:0;pointer-events:auto;cursor:pointer;
  will-change:transform;touch-action:none}
.pin{position:relative;transform:translate(-50%,-100%);display:flex;flex-direction:column;
  align-items:center;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.pin .globo{background:#0b5fa5;color:#fff;font:700 10px/1 sans-serif;letter-spacing:.3px;
  padding:6px 7px;border-radius:8px;border:2px solid #fff;white-space:nowrap}
.pin .punta{width:0;height:0;border:6px solid transparent;border-top-color:#fff;margin-top:-1px}
.pin .rotulo{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;
  background:rgba(255,255,255,.94);border:1px solid var(--linea);border-radius:6px;
  padding:1px 5px;font:600 10px sans-serif;color:#16202b;white-space:nowrap}
.marcaMapa.sel .globo{outline:3px solid #0a7d5a;outline-offset:1px}
.marcaMapa.yo .globo{background:#1a73e8;border-radius:50%;width:16px;height:16px;padding:0}
.zoomBotones{position:absolute;right:10px;bottom:34px;z-index:4;display:grid;gap:4px}
.zoomBotones button{width:34px;height:34px;border-radius:9px;border:1px solid var(--linea);
  background:rgba(255,255,255,.95);font-size:18px;line-height:1;cursor:pointer;box-shadow:var(--sombra)}
.creditoMapa{position:absolute;right:0;bottom:0;z-index:4;background:rgba(255,255,255,.82);
  font-size:10px;color:#425263;padding:1px 6px;border-radius:6px 0 0 0;pointer-events:none}
.buscador{position:relative}
.buscador input{padding:.45rem .7rem;border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--papel);min-width:min(52vw,230px)}
.resultadosBusqueda{position:absolute;top:110%;left:0;z-index:30;background:var(--papel);
  border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);
  width:min(90vw,380px);max-height:280px;overflow:auto}
.resultadosBusqueda button{display:block;width:100%;text-align:left;background:none;border:0;
  padding:.5rem .6rem;cursor:pointer;font-size:.82rem;border-bottom:1px solid #eef1f5}
.resultadosBusqueda button:hover{background:#f2f7fc}

/* ---------- estructura interna del cable ---------- */
.modal details{border:1px solid var(--linea);border-radius:var(--radio);padding:.5rem .7rem;background:#fbfcfd}
.modal summary{cursor:pointer;font-size:.82rem;color:var(--suave);font-weight:600}
.estructura{display:grid;gap:.3rem;margin:.5rem 0;max-height:220px;overflow:auto}
.tuboFila{display:flex;align-items:center;gap:.45rem;padding:.25rem .35rem;background:#fff;
  border:1px solid var(--linea);border-radius:8px;font-size:.8rem;flex-wrap:wrap}
.tuboFila b{font-size:.8rem}
.hilosTubo{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.muestra.mini{width:10px;height:10px;border-radius:2px;display:inline-block}

/* ---------- fotos por elemento ---------- */
.bloqueFotos,.bloqueIcono{border:1px solid var(--linea);border-radius:var(--radio);
  padding:.5rem .7rem;background:#fbfcfd}
.bloqueFotos summary,.bloqueIcono summary{cursor:pointer;font-size:.82rem;color:var(--suave);font-weight:600}
.miniFoto{position:relative;margin:0}
.miniFoto img{width:84px;height:84px;object-fit:cover;border-radius:8px;
  border:1px solid var(--linea);cursor:pointer;display:block}
.quitarFoto{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;
  border:0;background:rgba(22,32,43,.78);color:#fff;cursor:pointer;line-height:1;font-size:14px}
.quitarFoto:hover{background:var(--alerta)}
.subirFotos{display:block;margin-top:.5rem;font-size:.78rem;color:var(--suave)}
.subirFotos input{margin-top:.25rem}
.insigniaFoto{display:inline-block;background:rgba(255,255,255,.9);color:#16202b;border-radius:999px;
  font-size:9px;padding:0 4px;margin-left:3px;vertical-align:middle;font-weight:700}

/* ---------- icono y color del elemento ---------- */
.filaIcono{display:flex;gap:.7rem;align-items:flex-start;margin:.5rem 0}
#vistaPin{flex:0 0 auto;display:grid;place-items:center;min-width:64px;padding:.3rem}
.selIconos{display:flex;flex-wrap:wrap;gap:.25rem;max-height:120px;overflow:auto;flex:1}
.chipIcono{min-width:34px;height:30px;border:1px solid var(--linea);border-radius:8px;
  background:#fff;cursor:pointer;font-size:14px;line-height:1;padding:0 .3rem}
.chipIcono:hover{border-color:var(--acento)}
.chipIcono.sel{background:var(--acento);color:#fff;border-color:var(--acento)}
.selColores{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center}
.chipColor{width:24px;height:24px;border-radius:7px;border:2px solid transparent;cursor:pointer}
.chipColor.sel{border-color:#16202b;box-shadow:0 0 0 2px #fff inset}
.selColores input[type=color]{width:34px;height:26px;padding:0;border:1px solid var(--linea);
  border-radius:7px;background:#fff;cursor:pointer}

/* ---------- iconos subidos ---------- */
.iconoImg{width:18px;height:18px;object-fit:contain;vertical-align:middle;display:inline-block}
.chipIcono.propio{position:relative;padding:0 .25rem}
.chipIcono.propio .iconoImg{width:20px;height:20px}
.borrarIcono{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;
  background:rgba(22,32,43,.8);color:#fff;font-size:12px;line-height:18px;text-align:center;
  cursor:pointer;opacity:.55;transition:.12s}
.chipIcono.propio:hover .borrarIcono,.borrarIcono:hover{opacity:1;background:var(--alerta)}
.pin .globo .iconoImg{width:20px;height:20px}

/* ---------- tablero de empalmes ---------- */
.tableroEnvoltura{flex:1 1 auto;min-height:0;overflow:auto;background:var(--papel);
  border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra)}
.tablero{position:relative;display:flex;align-items:flex-start;gap:clamp(40px,7vw,110px);
  padding:.6rem;min-height:100%;width:max-content;min-width:100%;
  --fs:.95rem; --sw:20px; --pad:.32rem; --colw:300px; --gapf:.45rem}
.tablero.compacto{--fs:.78rem; --sw:16px; --pad:.14rem; --colw:190px; --gapf:.35rem}
.tablero.normal {--fs:.88rem; --sw:18px; --pad:.24rem; --colw:250px; --gapf:.4rem}
.tablero.grande {--fs:.98rem; --sw:21px; --pad:.34rem; --colw:320px; --gapf:.5rem}
.tablero.enorme {--fs:1.12rem;--sw:25px; --pad:.46rem; --colw:390px; --gapf:.6rem}
.lineasEmpalme{position:absolute;inset:0;pointer-events:none;z-index:4}
.columnaHilos{display:grid;gap:3px;z-index:2;flex:0 0 auto;min-width:var(--colw);width:var(--colw)}
.filaHilo{display:flex;align-items:stretch;gap:3px}
.haloEmpalme{fill:none}
.cabezaCable{position:sticky;top:0;z-index:3;background:var(--papel);padding:.35rem .45rem;
  border-bottom:2px solid var(--linea);font-size:calc(var(--fs) * 1.08);font-weight:700;width:100%;
  display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.cabezaCable .tubo{font-weight:400}
.cabezaTubo{display:flex;align-items:center;gap:.4rem;font-size:calc(var(--fs) * .88);
  color:var(--suave);padding:.45rem .4rem .1rem;width:100%;font-weight:600}

.hiloBtn{display:flex;align-items:center;gap:var(--gapf);padding:var(--pad) .5rem;border-radius:8px;
  border:1px solid var(--linea);background:#fff;cursor:pointer;font-size:var(--fs);
  flex:1 1 auto;min-width:0;text-align:left;transition:.1s;line-height:1.25}
.tablero .muestra{width:var(--sw);height:var(--sw);border-radius:5px;flex:0 0 auto}
.comentarioHilo{flex:1 1 auto;min-width:0;white-space:normal;word-break:break-word;
  color:var(--acento);font-size:.92em;font-weight:600;text-align:left;padding-left:.2rem}
.notaBtn{flex:0 0 auto;width:2em;border:1px solid var(--linea);border-radius:8px;background:#fff;
  cursor:pointer;color:var(--suave);font-size:calc(var(--fs) * .95);line-height:1}
.notaBtn:hover{border-color:var(--acento);color:var(--acento);background:#f4f9fe}
.notaBtn.conNota{color:var(--acento);border-color:#c9dcef;background:#f4f9fe}

.hiloBtn:hover{border-color:var(--acento);background:#f4f9fe}
.hiloBtn.sel{border-color:var(--acento2);background:#e7f6ef;box-shadow:0 0 0 2px #bfe5d5}
.hiloBtn.usado{background:#f7f9fb}
.hiloBtn.resaltado{border-color:var(--aviso);background:#fdf5e3}
.hiloBtn .num{font-weight:700;min-width:2.1em;text-align:center;flex:0 0 auto}
.hiloBtn .nomColor{flex:0 0 auto}
.hiloBtn .nomColor{color:var(--suave)}
.medio{position:relative;z-index:2}
.lineaEmpalme{stroke-width:2.5;fill:none;cursor:pointer;pointer-events:stroke}
.lineaEmpalme:hover{stroke-width:5}
.tableroVacio{grid-column:1/-1;padding:2rem;text-align:center;color:var(--suave)}
@media (max-width:820px), (max-height:520px){
  .tablero{gap:46px;padding:.3rem}
  .tablero{--colw:min(78vw,300px)}
  .hiloBtn .nomColor{display:none}
}

/* ---------- splitter en el tablero ---------- */
.hiloBtn.entradaSpl{border-color:#6a3fa0;font-weight:600;background:#f6f2fb}
.hiloBtn.entradaSpl .num{color:#6a3fa0}
.hiloBtn.puertoSpl .num{color:var(--acento)}

/* aviso de cambios sin guardar en una ficha */
.btn.primario.pendiente{animation:latir 1.6s ease-in-out infinite;
  box-shadow:0 0 0 3px rgba(11,95,165,.25)}
@keyframes latir{50%{box-shadow:0 0 0 6px rgba(11,95,165,.12)}}

/* ---------- botón "aquí": plantar un elemento donde estoy ---------- */
.botonAqui{position:absolute;left:18px;bottom:26px;z-index:20;width:60px;height:60px;
  border-radius:50%;border:0;background:var(--acento2);color:#fff;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.3);display:grid;place-items:center;line-height:1}
.botonAqui:active{transform:scale(.94)}
.botonAqui .chincheta{font-size:24px}
.botonAqui .masAqui{position:absolute;right:6px;bottom:6px;width:22px;height:22px;
  border-radius:50%;background:#fff;color:var(--acento2);font-weight:800;font-size:16px;
  display:grid;place-items:center}
.botonAqui.buscando{animation:latir 1.2s ease-in-out infinite}
.hojaTipos{position:fixed;inset:0;z-index:60;background:rgba(11,26,43,.5);
  display:flex;align-items:flex-end;justify-content:center}
.hojaCaja{background:var(--papel);width:min(100%,520px);border-radius:18px 18px 0 0;
  padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));display:grid;gap:.6rem;
  box-shadow:0 -8px 30px rgba(0,0,0,.25)}
.hojaCaja h3{margin:0}
.tiposAqui{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.5rem}
.tipoAqui{display:grid;gap:.25rem;place-items:center;padding:.7rem .4rem;border-radius:12px;
  border:1px solid var(--linea);background:#fff;cursor:pointer;font-size:.78rem}
.tipoAqui .globo{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  color:#fff;font:700 12px sans-serif}
.tipoAqui:active{background:#f2f7fc}
.marcaMapa .halo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(26,115,232,.18);border:1px solid rgba(26,115,232,.45)}

/* ---------- ajustes para el celular ---------- */
@media (max-width:820px), (max-height:520px){
  .barra{padding-top:calc(.4rem + env(safe-area-inset-top))}
  /* las seis pestañas caben de una: nada de deslizar para encontrarlas */
  .pestanas{padding:0;overflow:visible}
  .pestana{flex:1 1 0;min-width:0;padding:.5rem .15rem;font-size:.78rem;
    text-align:center;border-bottom-width:3px;letter-spacing:-.01em}
  .vista{padding-left:max(.5rem, env(safe-area-inset-left));
         padding-right:max(.5rem, env(safe-area-inset-right))}
  .herramientas .btn,.pestana{min-height:40px}          /* dedo, no mouse */
  .botonAqui{width:66px;height:66px;left:14px;bottom:calc(20px + env(safe-area-inset-bottom))}
  .botonAqui .chincheta{font-size:27px}
  /* las fichas se comportan como hoja: ocupan la pantalla y no bailan */
  .modalFondo{align-items:flex-end;padding:0}
  .modal{width:100%;max-width:none;border-radius:16px 16px 0 0;max-height:92vh;
    padding-bottom:calc(1.1rem + env(safe-area-inset-bottom))}
  .modal .fila>*{min-width:100%}
  .acciones .btn{flex:1 1 auto;min-height:42px}
  /* los botones de la ficha quedan siempre a mano, sin bajar hasta el final */
  .modal .acciones:last-of-type{position:sticky;bottom:0;background:var(--papel);
    margin:0 -1rem -0.4rem;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
    border-top:1px solid var(--linea);z-index:6}
  .zoomBotones{bottom:calc(30px + env(safe-area-inset-bottom))}
}

/* el botón de "más herramientas" solo tiene sentido en pantalla chica */
.botonMas{display:none}