/* ════════════════════════════════════════════════════════════════
   Query Forge — forge.css
   Layout (.tlab-layout), sidebar (.tlab-*), workspace (.forge-ws-*),
   tabs segmented control y popover de ayuda.
   ════════════════════════════════════════════════════════════════ */

/* ── Layout principal ──────────────────────────────────────── */
.tlab-layout {
  display: flex;
  flex: 1;
  height: calc(100% - 96px);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.tlab-sidebar {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: rgba(255,255,255,.012);
}
.tlab-sidebar-head {
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.tlab-sb-title {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tlab-sb-title svg,
.tlab-sb-title i {
  width: 13px;
  height: 13px;
  color: var(--teal);
}

/* ── Source items (acordeón KQL / CSQL / XQL) ──────────────── */
.tlab-source-item {
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.tlab-source-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  cursor: pointer;
  transition: background var(--tr);
}
.tlab-source-head:hover {
  background: rgba(255,255,255,.025);
}
.tlab-source-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  color: rgba(255,255,255,.4);
  transition: transform .2s;
  flex-shrink: 0;
}
.tlab-source-icon svg,
.tlab-source-icon i {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
}
.tlab-source-item.open > .tlab-source-head > .tlab-source-icon {
  transform: rotate(90deg);
}
.tlab-source-name {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.tlab-source-body {
  border-top: 1px solid rgba(255,255,255,.04);
  display: none;
  flex-direction: column;
  gap: 26px;
  background: rgba(0,0,0,.15);
  padding: 16px 18px 18px;
}
.tlab-source-item.open > .tlab-source-body {
  display: flex;
}

/* Sub-row (IOC/IOA Hunter) — neutralizar inline bg=var(--bg3) */
#forge-ioc-head,
#forge-ioa-head,
#forge-cs-ioc-head,
#forge-xql-ioc-head {
  background: transparent !important;
}

.tlab-config-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Sidebar — select y CTA alineados (mismo ancho, misma altura visual).
   Safari ignora el padding vertical de <select>, así que forzamos
   min-height para que coincida con la altura del CTA. */
.tlab-source-body .u-select {
  width: 100%;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12.5px;
}

/* Apple HIG: verbo principal con peso (CTA full-width),
   acción de soporte como texto (.forge-clear-link). */
.tlab-source-body .tlab-analyze-btn {
  width: 100%;
  min-height: 32px;
  padding: 7px 14px;
  font-size: 13px;
}

.forge-clear-link {
  align-self: center;
  background: transparent;
  border: none;
  padding: 2px 8px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255,255,255,.38);
  cursor: pointer;
  letter-spacing: .1px;
  transition: color var(--tr);
}
.forge-clear-link:hover {
  color: var(--text);
}
.tlab-config-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 2px;
}

/* Platform badge en sidebar (Defender XDR / CrowdStrike / Cortex) */
.forge-platform-badge {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,.4);
  letter-spacing: .2px;
  margin-left: auto;
}

/* ── Main workspace ────────────────────────────────────────── */
.tlab-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ── Forge workspace (KQL / CSQL / XQL) ────────────────────── */
.forge-ws {
  flex: 1;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.forge-ws.is-active {
  display: flex;
}
.forge-ws-header {
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: transparent;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.forge-ws-title {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.1px;
}

/* Body split */
.forge-ws-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.forge-ws-input-col {
  width: 320px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
}

/* Variante para formularios (IOA Hunter): más ancho, scroll vertical */
.forge-ws-input-col-form {
  width: 360px;
  overflow-y: auto;
}
.forge-form {
  display: flex;
  flex-direction: column;
  padding: 20px 22px 28px;
  gap: 24px;
}

/* Jerarquía Apple: section title > row label.
   Section conserva el énfasis (600/1.8/.5); las rows se sirven con menor peso
   (500/1.2/.42) para que el ojo lea primero los grupos y luego los campos. */
.forge-form-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.forge-form-section-title {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

/* Subgroup: par de campos relacionados (Proceso + Cmdline). Gap interno
   tighter para señalar "pareja"; el gap del section actúa entre subgroups. */
.forge-form-subgroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.forge-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Hairline lateral en el row hijo del subgroup (Cmdline) — pista visual de
   subordinación, no indent (preserva la alineación del input). */
.forge-form-row--child {
  position: relative;
}
.forge-form-row--child::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 4px;
  bottom: 6px;
  width: 1px;
  background: rgba(255,255,255,.06);
  border-radius: 1px;
}

.forge-form-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 18px;
}
.forge-form-row-head .tlab-config-label {
  margin-bottom: 0;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.42);
  transition: color var(--tr);
}
/* Cuando el row tiene foco dentro, el label se reactiva — micro-feedback Apple */
.forge-form-row:focus-within .tlab-config-label {
  color: rgba(255,255,255,.72);
}
.forge-form-textarea {
  resize: vertical;
  min-height: 44px;
  line-height: 1.5;
  font-family: var(--font-data);
}

/* ── Segmented control de tablas (header workspace IOA) ────── */
.forge-ioa-tables {
  display: inline-flex;
  margin-left: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  padding: 3px;
}
.forge-ioa-table-btn {
  background: transparent;
  border: none;
  padding: 4px 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1px;
  color: rgba(255,255,255,.55);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.forge-ioa-table-btn:hover:not(.is-disabled):not(.active) {
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.forge-ioa-table-btn.active {
  background: rgba(var(--teal-rgb),.16);
  color: rgba(var(--teal-rgb),.98);
  font-weight: 600;
}
.forge-ioa-table-btn.is-disabled {
  color: rgba(255,255,255,.22);
  cursor: not-allowed;
}

/* ── Segmented control inline Cualquiera/Todos (cmdline) ───── */
.forge-ioa-mode {
  display: inline-flex;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 2px;
}
.forge-ioa-mode-btn {
  background: transparent;
  border: none;
  padding: 2px 9px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.forge-ioa-mode-btn:hover:not(.active) {
  color: var(--text);
}
.forge-ioa-mode-btn.active {
  background: rgba(var(--teal-rgb),.16);
  color: rgba(var(--teal-rgb),.98);
}

/* ── Chip Y/O por campo (combinar con AND/OR a nivel de query) ── */
.forge-form-row-toggles {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.forge-ioa-join {
  display: inline-flex;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 999px;
  padding: 1px;
}
.forge-ioa-join-btn {
  background: transparent;
  border: none;
  padding: 1px 7px;
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .6px;
  color: rgba(255,255,255,.28);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
  min-width: 14px;
}
.forge-ioa-join-btn:hover:not(.active) {
  color: rgba(255,255,255,.7);
}
.forge-ioa-join-btn.active[data-join="and"] {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
}
.forge-ioa-join-btn.active[data-join="or"] {
  background: rgba(var(--teal-rgb),.18);
  color: rgba(var(--teal-rgb),.98);
}
/* Cuando un campo está marcado OR, refuerza el border del chip */
.forge-ioa-join:has(.forge-ioa-join-btn.active[data-join="or"]) {
  border-color: rgba(var(--teal-rgb),.3);
}

/* ── Fila disabled (v2 placeholders en IOA LQL: Abuelo, Cmdline padre) ── */
.forge-form-row--disabled .tlab-config-label {
  color: rgba(255,255,255,.22);
}
.forge-form-row--disabled .u-input,
.forge-form-row--disabled .u-input:hover {
  background: rgba(255,255,255,.012);
  border-color: rgba(255,255,255,.05);
  color: rgba(255,255,255,.25);
  cursor: not-allowed;
}
.forge-form-row--disabled .u-input::placeholder {
  color: rgba(255,255,255,.18);
  font-style: italic;
}
.forge-form-row-tag {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  padding: 1px 6px;
  border-radius: 999px;
}

/* ── Badge de event type (workspace LQL · IOA) ─────────────── */
.forge-ioa-event-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 14px;
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1px;
  color: rgba(var(--teal-rgb),.85);
  background: rgba(var(--teal-rgb),.10);
  border: 1px solid rgba(var(--teal-rgb),.22);
  border-radius: 999px;
  padding: 3px 10px;
}

/* ── Chips multi-select (ActionType en File / Registry) ───── */
.forge-ioa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0;
}
.forge-ioa-chip {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.55);
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1px;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.forge-ioa-chip:hover:not(.active) {
  border-color: rgba(255,255,255,.18);
  color: var(--text);
}
.forge-ioa-chip.active {
  background: rgba(var(--teal-rgb),.16);
  border-color: rgba(var(--teal-rgb),.4);
  color: rgba(var(--teal-rgb),.98);
  font-weight: 600;
}
.forge-ws-textarea {
  flex: 1;
  background: rgba(255,255,255,.018);
  border: none;
  color: var(--text);
  font-family: var(--font-data);
  font-size: 12.5px;
  padding: 14px 20px;
  resize: none;
  outline: none;
  line-height: 1.7;
  transition: background .2s, box-shadow .2s;
}
.forge-ws-textarea:focus {
  background: rgba(255,255,255,.03);
  box-shadow: inset 2px 0 0 rgba(var(--teal-rgb),.45);
}
.forge-ws-textarea::placeholder {
  color: rgba(255,255,255,.3);
  font-family: var(--font-data);
  font-size: 12.5px;
  line-height: 1.7;
}

.forge-ws-output-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.forge-ws-stats {
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  background: transparent;
  min-height: 0;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: rgba(255,255,255,.5);
  display: flex;
  align-items: center;
}
.forge-ws-stats:empty {
  display: none;
}
.forge-ws-stats .forge-muted {
  color: rgba(255,255,255,.5);
  font-size: 12.5px;
}
.forge-count {
  color: var(--text);
  font-weight: 600;
}
.forge-muted {
  font-size: 11px;
  color: rgba(255,255,255,.5);
}

.forge-ws-output {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  gap: 0;
  display: flex;
  flex-direction: column;
}

/* ── Empty state ───────────────────────────────────────────── */
.forge-ws-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  min-height: 380px;
}
.forge-ws-empty-inner {
  text-align: center;
  font-family: var(--font-ui);
}
.forge-ws-empty-icon {
  color: rgba(255,255,255,.22);
  margin-bottom: 14px;
}
.forge-ws-empty-icon svg,
.forge-ws-empty-icon i {
  stroke-width: 1.5;
}
.forge-ws-empty-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.2px;
  margin-bottom: 6px;
}
.forge-ws-empty-hint {
  font-family: var(--font-ui);
  font-size: 13px;
  color: rgba(255,255,255,.42);
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto;
}

/* ── Segmented control (Apple Stocks/App Store) ────────────── */
.forge-tabs {
  display: flex;
  gap: 6px;
  padding: 18px 24px 14px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.forge-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  letter-spacing: .1px;
  transition: background .2s, border-color .2s, color .2s;
}
.forge-tab-btn:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.18);
  color: var(--text);
}
.forge-tab-btn.active {
  background: rgba(var(--teal-rgb),.13);
  border-color: rgba(var(--teal-rgb),.42);
  color: rgba(var(--teal-rgb),.98);
}
.forge-tab-count {
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.06);
  padding: 1px 7px;
  border-radius: 999px;
  color: inherit;
  opacity: .9;
  min-width: 18px;
  text-align: center;
}
.forge-tab-btn.active .forge-tab-count {
  background: rgba(var(--teal-rgb),.22);
  opacity: 1;
}

/* ── Viewer único + meta + pre ─────────────────────────────── */
.forge-tab-viewer {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.forge-tab-pane {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.forge-tab-pane.active {
  display: flex;
}
.forge-tab-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: rgba(255,255,255,.55);
  flex-shrink: 0;
}
.forge-tab-meta-text {
  letter-spacing: .1px;
}
.forge-pre {
  margin: 0;
  font-family: var(--font-data);
  font-size: 13px;
  color: var(--text);
  white-space: pre;
  line-height: 1.7;
}
.forge-tab-pane > .forge-pre {
  flex: 1;
  overflow: auto;
  padding: 18px 24px;
  background: rgba(255,255,255,.012);
}

/* ── Help button (icon-only ghost, nivel A) ────────────────── */
.forge-help-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255,255,255,.45);
  cursor: pointer;
  transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.forge-help-btn:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  color: var(--text);
}
.forge-help-btn svg,
.forge-help-btn i {
  width: 15px;
  height: 15px;
  stroke-width: 1.7;
}

/* ── Help popover ──────────────────────────────────────────── */
.forge-help-popover {
  position: fixed;
  z-index: 1500;
  width: 320px;
  padding: 16px 18px;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.6;
  background: linear-gradient(180deg, rgba(28,28,34,.92), rgba(20,20,24,.92));
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 16px 48px rgba(0,0,0,.55),
    0 4px 12px rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  animation: forgeHelpIn .2s cubic-bezier(.16,1,.3,1);
}
.forge-help-popover[hidden] { display: none; }
@keyframes forgeHelpIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.forge-help-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 10px;
}
.forge-help-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.forge-help-list li {
  padding-left: 14px;
  position: relative;
  font-size: 12.5px;
  color: rgba(255,255,255,.7);
  line-height: 1.5;
}
.forge-help-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--teal-rgb),.6);
}
.forge-help-list strong {
  color: var(--text);
  font-weight: 600;
}
.forge-help-list code {
  font-family: var(--font-data);
  font-size: 11.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  color: var(--text);
}