/* Conéctate Fiber GIS — estilos v0.7.1 */
:root {
  --fondo: #ffffff; --texto: #1f2933; --tenue: #6b7280; --borde: #d6dbe1;
  --primario: #0b6bcb; --peligro: #c62828; --ok: #15803d; --barra: #102a43; --barra-texto: #f0f4f8;
  --libre: #e3f4e8; --ocupado: #0b6bcb; --panel-ancho: 400px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #16202b; --texto: #e5e9f0; --tenue: #9aa5b1; --borde: #33414f;
    --primario: #4ea1f3; --peligro: #ef5350; --ok: #4ade80; --barra: #0b1622; --barra-texto: #e5e9f0;
    --libre: #1d3a2a; --ocupado: #2f7fd1; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo); color: var(--texto); }
.oculto { display: none !important; }
.tenue { color: var(--tenue); }
.error { color: var(--peligro); min-height: 1.2em; }
button { font: inherit; padding: 6px 10px; border: 1px solid var(--borde); border-radius: 6px;
  background: var(--fondo); color: var(--texto); cursor: pointer; }
button.primario { background: var(--primario); color: #fff; border-color: var(--primario); }
button.peligro { color: var(--peligro); border-color: var(--peligro); }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--borde); border-radius: 6px;
  background: var(--fondo); color: var(--texto); width: 100%; }
label { display: block; margin: 8px 0; font-weight: 500; }
label > input, label > select, label > textarea { margin-top: 3px; font-weight: 400; }

#login { position: fixed; inset: 0; display: grid; place-items: center; background: var(--barra); }
.tarjeta { background: var(--fondo); padding: 24px; border-radius: 10px; width: min(340px, 92vw); }
.tarjeta h1 { font-size: 20px; margin: 0 0 12px; }
.tarjeta button { width: 100%; margin-top: 8px; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; padding-top: max(6px, env(safe-area-inset-top));
  background: var(--barra); color: var(--barra-texto); flex-wrap: wrap; }
header .tenue { color: #9fb3c8; }
header button { background: transparent; color: var(--barra-texto); border-color: #486581; }
header button.activo { background: var(--primario); border-color: var(--primario); }
#herramientas { display: flex; gap: 6px; flex-wrap: wrap; }
#form-buscar { display: flex; gap: 6px; margin-left: auto; }
#form-buscar input { width: 210px; }
.rol-tecnico .solo-oficina { display: none !important; }

#mapa { flex: 1; }
#modo { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 5;
  background: var(--barra); color: var(--barra-texto); padding: 8px 12px; border-radius: 8px;
  display: flex; gap: 8px; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.3); max-width: 94vw; }
#modo button { background: transparent; color: var(--barra-texto); border-color: #486581; }

#panel { position: absolute; top: 48px; right: 0; bottom: 0; width: var(--panel-ancho); z-index: 4;
  background: var(--fondo); border-left: 1px solid var(--borde); overflow-y: auto; padding: 14px 16px 40px;
  box-shadow: -2px 0 10px rgba(0,0,0,.15); }
#panel-cerrar { position: absolute; top: 8px; right: 8px; font-size: 18px; line-height: 1; padding: 4px 9px; }
#panel h2 { font-size: 18px; margin: 0 32px 4px 0; word-break: break-all; }
#panel h3 { font-size: 15px; margin: 18px 0 6px; padding-top: 10px; border-top: 1px solid var(--borde); }
#panel table { width: 100%; border-collapse: collapse; font-size: 13px; }
#panel th, #panel td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.acciones { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.etiqueta { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; border: 1px solid var(--borde); }

.puertos { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 6px 0; }
.puerto { padding: 6px 0; text-align: center; font-size: 12px; border-radius: 4px; }
.puerto.libre { background: var(--libre); }
.puerto.ocupado { background: var(--ocupado); color: #fff; border-color: var(--ocupado); }
.puerto.entrada { border-style: dashed; }
.color { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #0006;
  vertical-align: middle; margin-right: 4px; }

#aviso { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 10;
  background: #102a43; color: #fff; padding: 10px 16px; border-radius: 8px; max-width: 90vw;
  box-shadow: 0 2px 8px rgba(0,0,0,.3); }
#aviso.mal { background: var(--peligro); }

@media (max-width: 760px) {
  #version, #quien, #btn-importar { display: none; }
  header { gap: 6px; }
  header button { padding: 5px 8px; }
  #form-buscar { margin-left: 0; width: 100%; }
  #form-buscar input { flex: 1; width: auto; }
  #panel { top: auto; left: 0; width: 100%; height: 58vh; border-left: 0; border-top: 1px solid var(--borde);
    border-radius: 12px 12px 0 0; padding-bottom: max(40px, env(safe-area-inset-bottom)); }
  #modo { top: auto; bottom: 16px; }
}

/* v0.2.0: potencias */
.puerto small.pot { display: block; font-size: 10px; line-height: 1.1; opacity: .9; }
.puerto.libre small.pot-ok, .pot-ok { color: #15803d; }
.puerto.libre small.pot-alerta, .pot-alerta { color: #b45309; }
.puerto.libre small.pot-mal, .pot-mal { color: #c62828; }
.puerto.libre small.pot-alta, .pot-alta { color: #7c3aed; }
.puerto.ocupado small.pot { color: #fff; }
.puertos { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 760px) { #btn-materiales { display: none; } }

/* v0.4.0: diagrama de fibras */
#diagrama { position: fixed; inset: 0; z-index: 30; background: var(--fondo); overflow: auto; padding: 0 16px 40px; }
.dg-cab { position: sticky; top: 0; z-index: 3; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: var(--fondo); padding: 10px 0; border-bottom: 1px solid var(--borde); }
.dg-cab button { margin-left: auto; }
.dg-norma { margin: 12px 0; padding: 8px 12px; border: 1px solid var(--borde); border-radius: 8px; }
.dg-norma table { border-collapse: collapse; font-size: 13px; width: 100%; max-width: 900px; }
.dg-norma th, .dg-norma td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--borde); }
.dg-lienzo { position: relative; display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 140px; padding: 16px 8px; min-width: 1060px; }
.dg-svg { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; }
.dg-col { position: relative; z-index: 1; }
.dg-col { display: flex; flex-direction: column; gap: 22px; }
.dg-bloque { border: 1px solid var(--borde); border-radius: 6px; background: var(--fondo); }
.dg-titulo { font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--borde); }
.dg-titulo small { display: block; font-weight: 400; color: var(--tenue); }
.dg-fila { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 6px; border-bottom: 1px solid var(--borde); font-size: 12px; }
.dg-fila.der { justify-content: flex-start; }
.dg-fila.izq { justify-content: flex-end; }
.dg-fila.off { opacity: .5; }
.dg-num { font-family: ui-monospace, monospace; min-width: 22px; text-align: center; }
.dg-fibra { width: 16px; height: 14px; border: 1px solid #0005; }
.dg-tubo { width: 22px; align-self: stretch; }
.dg-pot { font-size: 11px; padding: 0 4px; border-radius: 3px; background: #374151; color: #fff; white-space: nowrap; }
.dg-pot.apagada { background: transparent; color: var(--tenue); }
.dg-pot.pot-bg-ok { background: #15803d; } .dg-pot.pot-bg-alerta { background: #b45309; }
.dg-pot.pot-bg-mal { background: #c62828; } .dg-pot.pot-bg-alta { background: #7c3aed; }
.dg-extra { color: var(--tenue); font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; }
.dg-ancla, .dg-ancla-vacia { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dg-ancla { background: #64748b; border: 2px solid var(--fondo); box-shadow: 0 0 0 1px #64748b; }
.dg-fila.centro .dg-ancla.izq { margin-right: auto; } .dg-fila.centro .dg-ancla.der { margin-left: auto; }
.dg-fila.centro { justify-content: space-between; }

/* v0.5.0: racks */
#rackv { position: fixed; inset: 0; z-index: 30; background: var(--fondo); overflow: auto; padding: 0 16px 40px; }
.rk-cuerpo { display: flex; gap: 24px; align-items: flex-start; padding-top: 14px; flex-wrap: wrap; }
.rk-marco { display: grid; grid-template-columns: 34px 460px 34px; background: #2b2f36; padding: 8px 4px; border-radius: 6px;
  border: 6px solid #3c424b; }
.rk-u { color: #cbd5e1; font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, monospace; }
.rk-vacio { border-bottom: 1px dashed #4b5563; color: #6b7280; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.rk-vacio.editable { cursor: pointer; } .rk-vacio.editable:hover { background: #374151; color: #fff; }
.rk-eq { color: #f1f5f9; border: 1px solid #94a3b8; border-radius: 3px; margin: 1px 0; padding: 2px 10px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; overflow: hidden; font-size: 12px; line-height: 1.25; }
.rk-eq span { color: #cbd5e1; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-eq .rk-uso { color: #86efac; }
.rk-eq.sel { outline: 3px solid #f59e0b; }
.rk-det { flex: 1; min-width: 320px; max-width: 640px; }
.rk-det h4 { margin: 14px 0 4px; font-size: 13px; }
.rk-det .puertos { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.rk-det .puerto { font-size: 10px; padding: 4px 0; }
@media (max-width: 760px) { .rk-marco { grid-template-columns: 28px 1fr 28px; width: 100%; } .rk-det .puertos { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

/* v0.6.0: uniones con el mouse */
.dg-fila[data-unico]:not([data-unico=""]) { cursor: pointer; }
.dg-fila[data-unico]:not([data-unico=""]):hover { background: rgba(11,107,203,.08); }
.dg-ancla { cursor: pointer; width: 13px; height: 13px; }
.dg-ancla:hover { box-shadow: 0 0 0 3px #0b6bcb; }
.dg-elegido { background: rgba(245,158,11,.25) !important; outline: 2px solid #f59e0b; }
.dg-x { padding: 0 4px; font-size: 10px; line-height: 14px; color: #fff; background: #c62828; border: 0; border-radius: 3px; cursor: pointer; }
#dg-sel { position: sticky; top: 52px; z-index: 3; background: #f59e0b; color: #111; padding: 6px 10px; border-radius: 6px; margin-top: 6px; }
[data-tx] { cursor: pointer; }

/* v0.7.0: reservas */
.rollo-mini { display: inline-block; width: 22px; height: 12px; vertical-align: middle;
  background: radial-gradient(ellipse 5px 6px at 6px 6px, transparent 3px, #1f2937 3.5px, transparent 4.5px),
              radial-gradient(ellipse 5px 6px at 11px 6px, transparent 3px, #1f2937 3.5px, transparent 4.5px),
              radial-gradient(ellipse 5px 6px at 16px 6px, transparent 3px, #1f2937 3.5px, transparent 4.5px); }

/* v0.7.1: hilos en paso agrupados; las líneas pasan por detrás de los splitters */
.dg-tramo { cursor: pointer; background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.025) 6px 12px); }
.dg-tramo:hover { background: rgba(11,107,203,.08); }
.dg-tramo-txt { flex: 1; font-size: 12px; color: var(--tenue, #6b7280); padding: 0 6px; white-space: nowrap; }
.dg-tramo.izq .dg-tramo-txt { text-align: right; }
.dg-fibras-mini { display: inline-flex; gap: 1px; }
.dg-fibras-mini i { width: 4px; height: 12px; display: inline-block; border: 1px solid rgba(0,0,0,.15); }

/* v0.13.0: distancia hasta la OLT */
.dist-olt { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; margin: 8px 0; border-radius: 12px; background: #e8f1fd; color: #0b4a9e; }
.dist-olt b { font-size: 26px; font-weight: 800; } .dist-olt span { font-size: 13px; }
.tabla-tramos td, .tabla-tramos th { font-size: 12.5px; }

/* v0.13.1: leyenda de colores de cable */
.ley-cables { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; font-size: 12px; margin-bottom: 8px; }
.ley-cables span { display: flex; align-items: center; gap: 5px; }
.ley-cables i { width: 22px; height: 7px; border-radius: 4px; box-shadow: 0 0 0 1.5px #1f2937; }