/* CONSOLA de CUCI: terminal de operaciones clara, densa, mono chica. Azul = acción, verde/rojo = estado. */
@font-face { font-family: Flexa; src: url(/fonts/GTFlexa-BlackExtended.otf); }
:root { --tinta: #0d0d0d; --gris: #7a7a7a; --linea: #d9d9d6; --fondo: #fbfbf9; --panel: #ffffff; --azul: #1530ff; --verde: #12b04a; --rojo: #e2231a; --ambar: #e8a200;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--tinta); font: 11.5px/1.45 var(--mono); }
button { font: inherit; cursor: pointer; }
.logo { font: 30px/1 Flexa, sans-serif; letter-spacing: -.02em; }
[hidden] { display: none !important; }

#entrar { position: fixed; inset: 0; display: grid; place-items: center; }
#entrar .caja { display: grid; gap: 10px; text-align: center; }
#entrar .logo { font-size: 64px; }
#entrar form { display: flex; gap: 6px; margin-top: 10px; }
#entrar input { font: 13px var(--mono); padding: 9px 12px; border: 1px solid var(--tinta); border-radius: 0; width: 220px; }
#entrar button, .azul { background: var(--azul); color: #fff; border: 0; padding: 8px 14px; letter-spacing: .08em; }
#errEntrar { color: var(--rojo); font-style: normal; min-height: 1em; }

#consola { padding: 14px 18px 18px; max-width: 1680px; margin: 0 auto; }
.barra { display: flex; align-items: center; gap: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--tinta); position: relative; }
.marca { display: flex; flex-direction: column; border-left: 1px solid var(--linea); padding-left: 14px; letter-spacing: .12em; }
.marca small { color: var(--gris); letter-spacing: .04em; }
.reloj { margin-left: auto; background: var(--azul); color: #fff; padding: 4px 10px; letter-spacing: .08em; }
.global { letter-spacing: .06em; }
.alertas { border: 1px solid var(--rojo); color: var(--rojo); padding: 3px 9px; letter-spacing: .06em; cursor: default; }
.alertas.cero { border-color: var(--linea); color: var(--gris); }
.listaAlertas { list-style: none; margin: 0; padding: 0; font-size: 10.5px; color: var(--gris); max-width: 260px; }
.pt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); margin-right: 4px; vertical-align: 1px; }
.pt.no { background: var(--rojo); } .pt.medio { background: var(--ambar); } .pt.gris { background: #bbb; }

.tabs { display: flex; align-items: center; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--linea); margin-bottom: 12px; }
.tabs button { background: none; border: 0; padding: 4px 10px; letter-spacing: .14em; color: var(--gris); }
.tabs button.on { background: var(--azul); color: #fff; }
.tabs .ruta { margin-left: auto; color: var(--gris); letter-spacing: .1em; }
.tabs .act { color: var(--gris); margin-left: 16px; }

.vista { display: none; } .vista.on { display: block; }
.panel { background: var(--panel); border: 1px solid var(--linea); padding: 10px 12px; min-width: 0; overflow-x: auto; }
.panel h3 span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel h3 { margin: 0 0 8px; font-weight: 400; display: flex; align-items: center; gap: 14px; color: var(--gris); letter-spacing: .06em; }
.panel h3 b { background: var(--azul); color: #fff; font-weight: 700; padding: 2px 8px; letter-spacing: .14em; }
.panel h3 button { margin-left: auto; }
.fila { display: grid; grid-template-columns: minmax(330px, 1fr) 1.25fr 1.15fr; gap: 12px; margin-top: 12px; }
.col { display: grid; gap: 12px; align-content: start; }

.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-weight: 400; color: var(--gris); letter-spacing: .08em; border-bottom: 1px solid var(--tinta); padding: 4px 6px; white-space: nowrap; }
.tabla td { padding: 5px 6px; border-bottom: 1px solid var(--linea); white-space: nowrap; vertical-align: middle; }
.tabla td.id { font-weight: 700; }
.tabla tr.sub td { color: var(--gris); }
.tabla.mini td, .tabla.mini th { padding: 3px 4px; }
.barrita { display: inline-block; width: 70px; height: 4px; background: #eee; vertical-align: middle; margin-left: 6px; }
.barrita i { display: block; height: 100%; background: var(--azul); }
.etq { border: 1px solid var(--azul); color: var(--azul); padding: 0 5px; font-size: 10px; letter-spacing: .08em; }
.etq.lleno { background: var(--azul); color: #fff; }
svg.spark { vertical-align: middle; }
.gris { color: var(--gris); }

.metrica { display: grid; grid-template-columns: 44px minmax(60px, 1fr) auto; align-items: center; gap: 8px; padding: 3px 0; }
.metrica b { font-size: 15px; } .metrica small { color: var(--gris); } .metrica > span:last-child { text-align: right; white-space: nowrap; }
.eventos { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow: auto; }
.eventos.largo { max-height: calc(100vh - 170px); }
.eventos li { display: grid; grid-template-columns: 62px 120px 1fr; gap: 8px; padding: 2px 0; border-bottom: 1px dotted var(--linea); }
.eventos li.largo { grid-template-columns: 130px 120px 1fr; }
.eventos .q { color: var(--gris); overflow: hidden; text-overflow: ellipsis; }
.eventos li.alerta .m { color: var(--rojo); } .eventos li.ok .m { color: var(--verde); } .eventos li.upd .m, .eventos li.sol .m { color: var(--azul); }
.filtros button { background: none; border: 1px solid var(--linea); padding: 0 6px; color: var(--gris); }
.filtros button.on { border-color: var(--azul); color: var(--azul); }

.sw { display: grid; gap: 0; }
.sw .s { display: grid; grid-template-columns: 1.3fr 1fr 70px; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--linea); align-items: center; }
.sw .s b { letter-spacing: .04em; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#kpisCostos { grid-template-columns: repeat(4, 1fr); }
.kpis div { border-left: 1px solid var(--linea); padding-left: 8px; }
.kpis small { color: var(--gris); letter-spacing: .06em; display: block; }
.kpis b { font-size: 20px; letter-spacing: -.01em; display: block; }

/* MAPA: 4 capas de izquierda a derecha + detalle */
#v-mapa.on { display: grid; grid-template-columns: 1fr 330px; gap: 12px; }
.mapa { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; padding: 4px; }
.mapa svg#lineas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.capa h4 { margin: 0 0 8px; font-weight: 700; letter-spacing: .12em; border: 1px solid var(--tinta); padding: 3px 8px; display: inline-block; }
.capa h4 small { font-weight: 400; color: var(--gris); }
.nodo { position: relative; background: var(--panel); border: 1px solid var(--linea); padding: 7px 9px; margin-bottom: 10px; cursor: pointer; z-index: 1; }
.nodo:hover { border-color: var(--tinta); } .nodo.sel { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.nodo .n { display: flex; justify-content: space-between; font-weight: 700; letter-spacing: .04em; }
.nodo .v { color: var(--gris); }
.nodo .o { margin-top: 3px; }
.nodo .d { margin-top: 3px; color: var(--gris); font-size: 10.5px; }
.nodo .hijos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; }
.nodo .hijo { border: 1px solid var(--linea); padding: 2px 5px; font-size: 10.5px; }
.detalle h4 { font: 20px/1.1 Flexa, sans-serif; margin: 4px 0 10px; }
.detalle dl { display: grid; grid-template-columns: 110px 1fr; gap: 3px 8px; margin: 0 0 12px; }
.detalle dt { color: var(--gris); } .detalle dd { margin: 0; overflow-wrap: anywhere; }
.detalle .cmd { background: #f2f2ef; border-left: 2px solid var(--azul); padding: 3px 7px; margin: 3px 0; overflow-wrap: anywhere; }

/* SOFTWARES */
#tSoftwares td { white-space: normal; vertical-align: top; } #tSoftwares td:first-child { white-space: nowrap; }
#tSoftwares .comp div { white-space: nowrap; }
#tSoftwares .tipo { color: var(--gris); font-size: 10px; letter-spacing: .08em; }
#tSoftwares code { font: inherit; color: var(--azul); }

/* CLIENTES */
.alta label { display: grid; grid-template-columns: 90px 1fr; align-items: center; margin-bottom: 6px; color: var(--gris); }
.alta input { font: inherit; border: 1px solid var(--linea); padding: 5px 7px; }
.check { list-style: none; margin: 0; padding: 0; columns: 2; }
.check li { padding: 3px 0; cursor: pointer; }
.check li::before { content: "☐ "; } .check li.ok::before { content: "☒ "; color: var(--azul); } .check li.ok { color: var(--gris); }
.fila:has(.alta) { grid-template-columns: 1fr 1.6fr; }