/* Panel GLOBALS > LIDAR (shader.html) — tabs UNIFORMS | LIDAR
   Muestra las instancias del LIDAR conectadas por socket.io, permite elegir cuál
   alimenta a los shaders y ver los mensajes que van llegando. */

.globals-tabs {
    display: flex;
    gap: 6px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 14px;
}

.globals-tab {
    background: rgba(255, 255, 255, 0.05);
    color: #c9d4e6;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
}

.globals-tab:hover { background: rgba(255, 255, 255, 0.1); }

.globals-tab.active {
    background: rgba(255, 211, 77, 0.16);
    border-color: rgba(255, 211, 77, 0.55);
    color: #ffd34d;
}

.g-tab-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #9fb0cc;
}
.g-tab-badge.on  { background: rgba(80, 220, 130, 0.18); border-color: rgba(80, 220, 130, 0.5); color: #8ff0b0; }
.g-tab-badge.off { background: rgba(255, 143, 143, 0.12); border-color: rgba(255, 143, 143, 0.4); color: #ff9d9d; }

.globals-pane { padding-bottom: 6px; }

/* ---- estado general ---- */
.lidar-estado {
    font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #cfe0ff;
    background: #0b0d13;
    border: 1px solid #262c3a;
    border-left: 3px solid #ffd34d;
    border-radius: 8px;
    padding: 9px 12px;
    margin-bottom: 12px;
    white-space: pre-wrap;
}
.lidar-estado.ok   { border-left-color: #4ade80; }
.lidar-estado.off  { border-left-color: #ff8f8f; }

/* ---- lista de instancias ---- */
.lidar-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.lidar-vacio {
    font-size: 12px;
    color: #7d8ba6;
    padding: 14px;
    text-align: center;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 8px;
}

.lidar-inst {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0b0d13;
    border: 1px solid #262c3a;
    border-radius: 9px;
    padding: 10px 12px;
}
.lidar-inst.activa { border-color: rgba(80, 220, 130, 0.55); background: rgba(80, 220, 130, 0.06); }

.lidar-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
    flex-shrink: 0;
}
.lidar-dot.vieja { background: #ffd34d; box-shadow: none; }

.lidar-info { flex: 1; min-width: 0; }
.lidar-nombre {
    font-size: 13px; font-weight: 700; color: #eaf1ff;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lidar-chip {
    font-size: 10px; font-weight: 700; letter-spacing: .4px;
    padding: 1px 7px; border-radius: 999px;
    background: rgba(80, 220, 130, 0.16); color: #8ff0b0;
    border: 1px solid rgba(80, 220, 130, 0.45);
}
.lidar-chip.gris { background: rgba(255,255,255,.06); color: #9fb0cc; border-color: rgba(255,255,255,.15); }
.lidar-meta {
    font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #7d8ba6; margin-top: 3px; word-break: break-all;
}

.lidar-btn {
    background: rgba(255, 255, 255, 0.07);
    color: #dfe6f5;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 7px;
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.lidar-btn:hover { background: rgba(255, 255, 255, 0.14); }
.lidar-btn.primary {
    background: rgba(255, 211, 77, 0.16);
    border-color: rgba(255, 211, 77, 0.5);
    color: #ffd34d;
}
.lidar-btn[disabled] { opacity: .45; cursor: default; }

.lidar-acciones {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px;
}
.lidar-chk {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: #9fb0cc; cursor: pointer;
}

/* ---- log de mensajes ---- */
.lidar-log {
    max-height: 300px;
    overflow: auto;
    font-size: 11px !important;
    line-height: 1.5;
    /* wrap: las líneas del mensaje son largas (coords incluidas) y con `pre` se
       cortaban a la derecha sin forma de leerlas */
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.lidar-log .l-hora { color: #ffd34d; }
.lidar-log .l-id   { color: #8ff0b0; }
.lidar-log .l-n    { color: #c084fc; }
.lidar-log .l-dim  { color: #7d8ba6; }