/* ========== Variables ========== */
:root{
  --bg-deep: #0B0F14;
  --panel: #121820;
  --panel-2: #0F151C;
  --hairline: #212A33;
  --text: #E6EDF2;
  --muted: #7C8B99;
  --muted-2: #57646F;
  --wazuh: #29C2AE;
  --wazuh-dim: #1A3F3B;
  --good: #5FD498;
  --bad: #E5645A;
  --amber: #E8B25C;
  --blue: #5B8DEF; /* NUEVO: color para el panel de contexto */
  --radius: 3px;
  --error: #ff6b6b;
  --field-hover: rgba(41,194,174,.08);
  --sidebar-width: 280px;
  --sidebar-collapsed: 42px;
  --questions-panel-width: 300px; /* antes 380px */
  --font-base: 10.5px;
}
*{box-sizing:border-box;}
html, body {
  height: 100%;
  overflow: hidden;
  margin:0;
  padding:0;
}
body{
  background:var(--bg-deep);
  color:var(--text);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:var(--font-base);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

/* ========== SHELL (GRID PRINCIPAL) ========== */
.shell{
  display:grid;
  grid-template-columns: var(--sidebar-width) 1fr 0px;
  height: 100vh;
  min-height: 0;
  transition: grid-template-columns .35s ease;
}
.shell.collapsed{
  grid-template-columns: var(--sidebar-collapsed) 1fr 0px;
}
.shell.with-questions,
.shell.with-killchain,
.shell.with-context { /* NUEVO: soporte para contexto */
  grid-template-columns: var(--sidebar-width) 1fr var(--questions-panel-width);
}
.shell.collapsed.with-questions,
.shell.collapsed.with-killchain,
.shell.collapsed.with-context {
  grid-template-columns: var(--sidebar-collapsed) 1fr var(--questions-panel-width);
}
@media (max-width:960px){
  .shell{grid-template-columns:1fr 0px;}
  .sidebar{border-right:none;border-bottom:1px solid var(--hairline);}
  .shell.with-questions,
  .shell.with-killchain,
  .shell.with-context { grid-template-columns:1fr 0px; }
}

/* ========== SIDEBAR ========== */
.sidebar{
  background:var(--panel-2);
  border-right:1px solid var(--hairline);
  padding:20px 16px;
  display:flex;
  flex-direction:column;
  gap:18px;
  overflow:hidden;
  transition:padding .25s ease, gap .25s ease;
  position:relative;
}
.shell.collapsed .sidebar{
  padding:10px 6px;
  gap:6px;
  align-items:center;
}
.sidebar .sidebar-content{
  opacity:1;
  transition:opacity .2s ease .1s;
  overflow:hidden;
}
.shell.collapsed .sidebar .sidebar-content{
  opacity:0;
  pointer-events:none;
  display:none;
}

/* ====== BRAND ====== */
.brand-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.brand-logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 6px;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.brand-subtitle {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--muted-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.shell.collapsed .brand-logo {
  width: 28px;
  height: 28px;
}
.shell.collapsed .brand-text {
  display: none;
}
.shell.collapsed .brand-container {
  gap: 4px;
  justify-content: center;
}

/* ====== SELECTOR DE DIFICULTAD ====== */
.difficulty-selector {
  display:flex;
  gap:4px;
  margin-bottom:10px;
}
.difficulty-selector .diff-btn {
  flex:1;
  padding:5px 3px;
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  background:var(--panel);
  color:var(--muted-2);
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
  text-align:center;
}
.difficulty-selector .diff-btn:hover {
  border-color:var(--muted-2);
  color:var(--text);
}
.difficulty-selector .diff-btn.active {
  border-color:var(--wazuh);
  color:var(--wazuh);
  background:rgba(41,194,174,.08);
}
.difficulty-selector .diff-btn.facil.active { border-color:var(--good); color:var(--good); background:rgba(95,212,152,.08); }
.difficulty-selector .diff-btn.medio.active { border-color:var(--amber); color:var(--amber); background:rgba(232,178,92,.08); }
.difficulty-selector .diff-btn.dificil.active { border-color:var(--bad); color:var(--bad); background:rgba(229,100,90,.08); }
.difficulty-selector .diff-btn .icon { font-size:11px; display:block; }

/* ========== LISTA DE CASOS ========== */
.challenge-list{display:flex;flex-direction:column;gap:5px;margin-top:2px;}
.challenge-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:2px;
}
.challenge-btn{
  text-align:left;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:7px 8px;
  color:var(--text);
  cursor:pointer;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:11.5px;
  line-height:1.4;
  transition:border-color .15s ease,background .15s ease;
  width:100%;
  position:relative;
}
.challenge-btn:hover{border-color:var(--muted-2);}
.challenge-btn.active{border-color:var(--wazuh);background:rgba(41,194,174,.08);}
.challenge-btn .cnum{
  font-family:'IBM Plex Mono',monospace;
  font-size:8.5px;
  color:var(--muted-2);
  display:block;
}
.challenge-btn.solved .cnum{color:var(--good);}
.challenge-btn.solved::after{
  content:"✓ resuelto";
  font-family:'IBM Plex Mono',monospace;
  font-size:8px;
  color:var(--good);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-left:6px;
}
.progress-line{
  margin-top:auto;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  color:var(--muted);
  border-top:1px solid var(--hairline);
  padding-top:12px;
}
.sidebar-toggle{
  position:absolute;
  top:10px;
  right:12px;
  width:22px;
  height:22px;
  border-radius:var(--radius);
  background:var(--panel-2);
  border:1px solid var(--hairline);
  color:var(--muted-2);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  transition:border-color .15s,color .15s,transform .2s;
  z-index:10;
  padding:0;
  line-height:1;
}
.sidebar-toggle:hover{
  border-color:var(--wazuh);
  color:var(--wazuh);
}
.shell.collapsed .sidebar-toggle{
  transform:rotate(0deg);
}

/* ========== MAIN (contenedor flex) ========== */
.main{
  height: 100vh;
  overflow-y: auto; /* red de seguridad, no debería activarse normalmente */
  padding:8px 8px 8px;
  min-width:0;
  transition:padding .25s ease;
  display:flex;
  flex-direction:column;
}

/* ========== TOPBAR ========== */
.topbar{
  display:flex;
  flex-direction:column;
  margin-bottom:14px;
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  background:var(--panel);
  transition:background .2s ease;
  flex-shrink:0;
}
.topbar-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 10px;
  border-bottom:1px solid var(--hairline);
}
.topbar.collapsed .topbar-strip{border-bottom:none;}
.topbar-case-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.scenario-toggle-btn{
  flex-shrink:0;
  background:var(--panel-2);
  border:1px solid var(--hairline);
  color:var(--muted-2);
  border-radius:var(--radius);
  width:22px;
  height:22px;
  cursor:pointer;
  font-size:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s,color .15s,transform .2s;
}
.scenario-toggle-btn:hover{border-color:var(--wazuh);color:var(--wazuh);}
.topbar .scenario-box{
  max-width:640px;
  padding:14px 16px 16px;
  max-height:800px;
  opacity:1;
  overflow:hidden;
  transition:max-height .35s ease, opacity .25s ease, padding .35s ease;
}
.topbar.collapsed{background:var(--panel-2);}
.topbar.collapsed .scenario-box{
  max-height:0;
  opacity:0;
  padding-top:0;
  padding-bottom:0;
  pointer-events:none;
}
.topbar.collapsed .scenario-toggle-btn{transform:rotate(180deg);}

.scenario-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--amber);
}
.scenario-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:17px;
  font-weight:600;
  margin:4px 0 4px 0;
}
.scenario-text{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.55;
}
.context-text{
  font-size:11.5px;
  color:var(--muted-2);
  font-style:italic;
  padding:6px 10px;
  background:var(--panel-2);
  border-left:3px solid var(--wazuh);
  border-radius:var(--radius);
  margin:2px 0 8px 0;
  line-height:1.5;
}
.hint-badge{
  display:inline-block;
  background:var(--wazuh-dim);
  color:var(--wazuh);
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  padding:2px 8px;
  border-radius:999px;
  margin-top:4px;
  border:1px solid rgba(41,194,174,.3);
}

/* ====== QUERY SECTION ====== */
.query-section {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 14px;
  flex-shrink:0;
}
.query-panel {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.query-actions {
  width: 130px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

/* ====== BOTONES DE PANEL ====== */
.panel-toggle-btn {
  width: 100%;
  padding: 6px 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.03em;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity .2s ease, filter .2s ease;
  text-align: center;
  white-space: nowrap;
}
.panel-toggle-btn:hover {
  filter: brightness(1.1);
}
.panel-toggle-btn .badge {
  margin-left: 4px;
  font-weight: 600;
  opacity: 0.85;
}

/* Botón "Ver preguntas" - color amber */
.questions-btn {
  background: var(--amber);
  color: #2B1D08;
}
.questions-btn.active {
  filter: brightness(0.85);
}

/* Botón "Kill Chain" - color wazuh */
.killchain-btn {
  background: var(--wazuh);
  color: #06211D;
}
.killchain-btn.active {
  filter: brightness(0.85);
}

/* NUEVO: Botón "Contexto SOC" - color azul */
.context-btn {
  background: var(--blue);
  color: #0B1A3A;
}
.context-btn.active {
  filter: brightness(0.85);
}

/* ====== QUERY PANEL INTERNO ====== */
.query-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--hairline);
  flex-wrap:wrap;
}
.query-lang-tag{
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid var(--hairline);
  color:var(--muted);
  flex-shrink:0;
}
#queryInput{
  flex:1;
  background:none;
  border:none;
  outline:none;
  color:var(--text);
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;
  min-width:200px;
}
#queryInput::placeholder{color:var(--muted-2);}
.run-btn{
  background:var(--wazuh);
  color:#06211D;
  border:none;
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;
  font-size:11px;
  padding:6px 14px;
  border-radius:var(--radius);
  cursor:pointer;
  flex-shrink:0;
}
.run-btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
}
.query-hint{
  padding:6px 12px;
  font-size:10.5px;
  color:var(--muted-2);
  font-family:'IBM Plex Mono',monospace;
  border-bottom:1px solid var(--hairline);
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
}
.query-hint .clickable{
  color:var(--wazuh);
  cursor:pointer;
  transition:color .15s;
}
.query-hint .clickable:hover{color:#4dd4c0;}
.query-error{
  padding:4px 12px;
  font-size:10.5px;
  color:var(--error);
  font-family:'IBM Plex Mono',monospace;
  display:none;
  background:rgba(255,107,107,.05);
  border-top:1px solid rgba(255,107,107,.2);
}

/* ====== STATS ROW ====== */
.stats-row{
  display:flex;
  align-items:center;
  gap:16px;
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  color:var(--muted);
  margin-bottom:10px;
  flex-wrap:wrap;
  justify-content:space-between;
  flex-shrink:0;
}
.stats-row b{color:var(--text);}

/* ====== FEEDBACK INLINE (NUEVO) ====== */
.feedback-inline {
  display: none; /* oculto por defecto */
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  margin: 0 8px;
}
.feedback-inline.correct { color: var(--good); }
.feedback-inline.wrong   { color: var(--bad); }
.feedback-inline.help    { color: var(--amber); }

/* ====== STREAM CONTROLS ====== */
#streamStats {
  color: var(--muted-2);
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  margin-left: auto;
}
.stream-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.stream-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.stream-btn:hover {
  border-color: var(--wazuh);
  color: var(--text);
}
.stream-btn.pause:hover {
  border-color: var(--bad);
  color: var(--bad);
  background: rgba(229,100,90,.06);
}
.stream-btn.resume:hover {
  border-color: var(--good);
  color: var(--good);
  background: rgba(95,212,152,.06);
}
.stream-btn:active {
  transform: scale(0.97);
}

/* ========== CONTENIDO PRINCIPAL ========== */
.content-grid{
  display:grid;
  grid-template-columns: minmax(240px, 280px) 1fr;
  gap:14px;
  align-items:start;
  flex:1;
  min-height:0;
}
@media (max-width:760px){
  .content-grid{grid-template-columns:1fr;}
}

/* ========== PANEL DE FILTROS ========== */
.filters-panel{
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:12px 10px;
  overflow-y:auto;
  width:100%;
  flex-shrink:0;
  height:100%;
}
.filters-panel::-webkit-scrollbar{width:4px;}
.filters-panel::-webkit-scrollbar-track{background:transparent;}
.filters-panel::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:999px;}

/* Scrollbar consistente: panel de preguntas, killchain, contexto y scroll general */
.questions-panel::-webkit-scrollbar,
.killchain-panel::-webkit-scrollbar,
.context-panel::-webkit-scrollbar, /* NUEVO */
html::-webkit-scrollbar{width:4px;}
.questions-panel::-webkit-scrollbar-track,
.killchain-panel::-webkit-scrollbar-track,
.context-panel::-webkit-scrollbar-track,
html::-webkit-scrollbar-track{background:transparent;}
.questions-panel::-webkit-scrollbar-thumb,
.killchain-panel::-webkit-scrollbar-thumb,
.context-panel::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:999px;}
.questions-panel::-webkit-scrollbar-thumb:hover,
.killchain-panel::-webkit-scrollbar-thumb:hover,
.context-panel::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover{background:var(--wazuh-dim);}

.filters-panel,
.questions-panel,
.killchain-panel,
.context-panel, /* NUEVO */
.table-panel,
.main,
html{
  scrollbar-width:thin;
  scrollbar-color:var(--hairline) transparent;
}

.main::-webkit-scrollbar{width:4px;}
.main::-webkit-scrollbar-track{background:transparent;}
.main::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:999px;}
.main::-webkit-scrollbar-thumb:hover{background:var(--wazuh-dim);}

.filters-title{
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:8px;
}

/* ====== BUSCADOR DEL PANEL DE CAMPOS ====== */
.field-search-row{
  position:relative;
  margin-bottom:10px;
}
.field-search-input{
  width:100%;
  background:var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  color:var(--text);
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  padding:6px 24px 6px 8px;
  outline:none;
  transition:border-color .15s;
}
.field-search-input:focus{border-color:var(--wazuh);}
.field-search-input::placeholder{color:var(--muted-2);}
.field-search-clear{
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:var(--muted-2);
  cursor:pointer;
  font-size:10px;
  padding:2px 4px;
  line-height:1;
}
.field-search-clear:hover{color:var(--bad);}

/* ====== ACORDEÓN DE CAMPOS ====== */
.field-block{margin-bottom:3px;border-bottom:1px solid var(--hairline);border-left:2px solid transparent;transition:border-color .15s ease,background .15s ease;}
.field-block.selected{
  border-left:2px solid var(--wazuh);
  background:rgba(41,194,174,.06);
}
.field-block.selected .field-head{color:var(--wazuh);}
.field-block.selected .field-head:hover{color:var(--text);}
.field-block.search-hidden{display:none;}
.field-head{
  display:flex;
  align-items:center;
  gap:4px;
  width:100%;
  background:none;
  border:none;
  cursor:pointer;
  color:var(--text);
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  padding:6px 2px;
  text-align:left;
  transition:color .15s;
}
.field-head:hover {
  color:var(--wazuh);
}
.field-head .fchev {
  color:var(--muted-2);
  font-size:8px;
  transition:transform .15s ease;
  display:inline-block;
  width:12px;
  text-align:center;
}
.field-block.open .fchev {
  transform:rotate(90deg);
  color:var(--wazuh);
}
.field-values{display:none;flex-direction:column;gap:2px;padding:2px 2px 8px 12px;}
.field-block.open .field-values{display:flex;}
.field-val{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  padding:3px 5px;
  border-radius:var(--radius);
  background:var(--panel-2);
  border:1px solid transparent;
  cursor:pointer;
  text-align:left;
  word-break:break-word;
  transition:border-color .12s ease,background .12s ease;
}
.field-val:hover{
  border-color:var(--wazuh);
  background:rgba(41,194,174,.06);
}
.field-val .count{
  font-size:8.5px;
  color:var(--muted-2);
  background:var(--panel);
  padding:0 5px;
  border-radius:999px;
  flex-shrink:0;
}
.field-val .syntax-btn{
  flex-shrink:0;
  background:none;
  border:1px solid transparent;
  color:var(--muted-2);
  font-size:9px;
  line-height:1;
  width:16px;
  height:16px;
  border-radius:999px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0 4px;
  transition:border-color .15s,color .15s,background .15s;
}
.field-val .syntax-btn:hover{
  border-color:var(--wazuh);
  color:var(--wazuh);
  background:rgba(41,194,174,.08);
}
.syntax-popover{
  position:fixed;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  z-index:1000;
  font-family:'IBM Plex Mono',monospace;
}
.syntax-popover-title{
  font-size:9px;
  color:var(--muted-2);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:6px;
}
.syntax-popover-actions{
  display:flex;
  gap:6px;
}
.syntax-popover-actions button{
  background:var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  color:var(--text);
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  padding:4px 8px;
  cursor:pointer;
  transition:border-color .15s,color .15s;
}
.syntax-popover-actions button:hover{
  border-color:var(--wazuh);
  color:var(--wazuh);
}

/* ====== CAMPOS SELECCIONADOS ====== */
.fields-section {
  margin-bottom:10px;
}
.fields-section .section-title {
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin:0 0 4px 0;
  padding-bottom:3px;
  border-bottom:1px solid var(--hairline);
}
.field-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2px 5px 2px 8px;
  border-radius:var(--radius);
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  color:var(--text);
  transition:background .12s ease;
  cursor:default;
}
.field-item:hover {
  background:var(--field-hover);
}
.field-item .field-name {
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.field-item .field-actions {
  display:flex;
  gap:2px;
  flex-shrink:0;
  margin-left:4px;
}
.field-item .field-actions button {
  background:none;
  border:1px solid var(--hairline);
  border-radius:999px;
  color:var(--muted-2);
  width:16px;
  height:16px;
  font-size:9px;
  line-height:1;
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.field-item .field-actions button:hover {
  border-color:var(--wazuh);
  color:var(--wazuh);
  background:rgba(41,194,174,.08);
}
.field-item .field-actions button.remove-btn:hover {
  border-color:var(--bad);
  color:var(--bad);
  background:rgba(229,100,90,.08);
}
.field-item.selected-field {
  background:rgba(41,194,174,.06);
  border-left:2px solid var(--wazuh);
  padding-left:6px;
}
.fields-divider {
  border:none;
  border-top:1px solid var(--hairline);
  margin:6px 0 8px 0;
}

/* ========== TABLA Y OVERLAY ========== */
.table-panel{
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  overflow-y:auto;
  overflow-x:hidden;
  min-width:0;
  height:100%;
}
.table-panel::-webkit-scrollbar{width:4px;}
.table-panel::-webkit-scrollbar-track{background:transparent;}
.table-panel::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:999px;}
.table-panel::-webkit-scrollbar-thumb:hover{background:var(--wazuh-dim);}
.start-logo {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  margin-bottom: 8px;
}
.table-panel .start-shift-overlay {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:30px 20px;
  min-height:180px;
  text-align:center;
  gap:10px;
}
.table-panel .start-shift-overlay .empty-message {
  color:var(--muted-2);
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
}
.table-panel .start-shift-overlay .start-btn {
  background:var(--wazuh);
  color:#06211D;
  border:none;
  border-radius:var(--radius);
  padding:12px 32px;
  font-family:'Space Grotesk',sans-serif;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
  box-shadow:0 0 30px rgba(41,194,174,.15);
}
.table-panel .start-shift-overlay .start-btn:hover {
  transform:scale(1.03);
  box-shadow:0 0 40px rgba(41,194,174,.25);
}
.table-panel .start-shift-overlay .start-btn:active {
  transform:scale(0.97);
}

table{width:100%;border-collapse:collapse;}
mark.log-highlight{
  background:rgba(232,178,92,.35);
  color:var(--amber);
  border-radius:2px;
  padding:0 1px;
  font-weight:600;
}
thead th{
  text-align:left;
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-2);
  padding:8px 10px;
  border-bottom:1px solid var(--hairline);
  background:var(--panel-2);
  position:sticky;
  top:0;
  z-index:1;
}
thead th.sortable{
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
thead th.sortable:hover{
  color:var(--text, #e6edf3);
  background:rgba(255,255,255,.04);
}
tbody td{
  padding:8px 10px;
  font-size:11px;
  border-bottom:1px solid var(--hairline);
  color:var(--text);
  font-family:'IBM Plex Mono',monospace;
  vertical-align:top;
}
tbody tr.log-row{
  cursor:pointer;
  transition:background 0.15s ease, border-left 0.15s ease;
}
tbody tr.log-row:hover{background:rgba(255,255,255,.03);}
tbody tr:last-child td{border-bottom:none;}
.chev{
  display:inline-block;
  width:12px;
  color:var(--muted-2);
  transition:transform .15s ease;
}
tr.expanded .chev{transform:rotate(90deg);color:var(--wazuh);}
.empty-row td{text-align:center;color:var(--muted-2);padding:24px 12px;}
.empty-row td.no-results{color:var(--bad);}
.detail-row td{background:var(--panel-2);padding:0;}
.detail-inner{
  padding:12px 14px 14px 32px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.detail-fields{
  flex:1;
  min-width:240px;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  line-height:1.8;
  color:var(--text);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* Las claves del detalle deben tener el color muted-2, los valores heredan var(--text) */
.detail-fields .detail-key {
  color: var(--muted-2);
}
.detail-id{
  flex-shrink:0;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  color:var(--text);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:6px 8px;
  height:fit-content;
  min-width:140px;
}
.detail-id div{margin-bottom:3px;}
.detail-id span{color:var(--muted-2);}

.feedback{
  margin-top:12px;
  padding:10px 12px;
  border-radius:var(--radius);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  display:none;
  line-height:1.5;
}
.feedback.show{display:block;}
.feedback.correct{background:rgba(95,212,152,.08);border:1px solid var(--good);color:var(--good);}
.feedback.wrong{background:rgba(229,100,90,.08);border:1px solid var(--bad);color:var(--bad);}
.feedback.help{background:rgba(232,178,92,.08);border:1px solid var(--amber);color:var(--amber);}

/* ========== PANEL DE PREGUNTAS (dentro del grid) ========== */
.questions-panel-wrapper,
.killchain-panel-wrapper,
.context-panel-wrapper { /* NUEVO: añadido context-panel-wrapper */
  display: none;
  overflow: hidden;
  min-width: 0;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
}
.shell.with-questions .questions-panel-wrapper {
  display: block;
}
.shell.with-killchain .killchain-panel-wrapper {
  display: block;
}
.shell.with-context .context-panel-wrapper {
  display: block;
}

.questions-panel,
.killchain-panel,
.context-panel {
  width: var(--questions-panel-width);
  height: 100%;
  background: var(--panel-2);
  border-left: 1px solid var(--hairline);
  padding: 20px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ====== DENTRO DE LOS PANELES ====== */
.questions-panel .panel-header,
.killchain-panel .panel-header,
.context-panel .panel-header { 
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--hairline);
  padding-bottom:10px;
  flex-shrink:0;
}
.questions-panel .panel-header h3,
.killchain-panel .panel-header h3,
.context-panel .panel-header h3 {
  font-family:'Space Grotesk',sans-serif;
  font-size:15px;
  margin:0;
  color:var(--text);
}
.questions-panel .panel-header .close-btn,
.killchain-panel .panel-header .close-btn,
.context-panel .panel-header .close-btn {
  background:none;
  border:none;
  color:var(--muted-2);
  font-size:16px;
  cursor:pointer;
  padding:0 4px;
  transition:color .15s;
}
.questions-panel .panel-header .close-btn:hover,
.killchain-panel .panel-header .close-btn:hover,
.context-panel .panel-header .close-btn:hover {
  color:var(--text);
}

/* ====== ITEMS DE PREGUNTAS ====== */
.questions-panel .question-item {
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:12px 14px;
  margin-bottom:8px;
}
.questions-panel .question-item .q-text {
  font-size:12px;
  color:var(--text);
  margin-bottom:6px;
  font-weight:500;
}
.questions-panel .question-item .q-status {
  font-size:10px;
  margin-left:4px;
}
.questions-panel .question-item .q-status.correct{color:var(--good);}
.questions-panel .question-item .q-status.wrong{color:var(--bad);}

/* ====== NUEVO: INPUT COMPACTO CON BOTÓN DENTRO ====== */
.q-input-row,
.phase-input-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: border-color .15s;
  overflow: hidden;
}
.q-input-row:focus-within,
.phase-input-row:focus-within {
  border-color: var(--wazuh);
}
/* ====== INPUT COMPACTO CON BOTÓN DENTRO ====== */
.q-input-row,
.phase-input-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: border-color .15s;
  overflow: hidden;
}
.q-input-row:focus-within,
.phase-input-row:focus-within {
  border-color: var(--wazuh);
}

/* Estilos específicos para input dentro de preguntas */
.q-input-row input {
  flex: 1;
  min-width: 80px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  padding: 5px 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}

/* Estilos específicos para select dentro de Kill Chain */
.q-input-row select,
.phase-input-row select {
  flex: 1;
  min-width: 80px;
  background-color: var(--panel-2);
  color: var(--text);
  border: none;
  outline: none;
  margin: 0;                  
  box-sizing: border-box;      
  height: 100%;              
  padding: 5px 22px 5px 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%237C8B99'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}



/* Estilos del menú desplegable nativo (opciones) */
.q-input-row select option,
.phase-input-row select option {
  background: var(--panel-2);
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  padding: 4px 8px;
}
.q-input-row input::placeholder,
.phase-input-row select::placeholder {
  color: var(--muted-2);
  opacity: 1;
}
.q-input-row .verify-btn,
.phase-input-row .verify-btn {
  background: var(--wazuh);
  color: #06211D;
  border: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 5px 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
  flex-shrink: 0;
  height: 100%;
}
.q-input-row .verify-btn:disabled,
.phase-input-row .verify-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.q-input-row .verify-btn:hover:not(:disabled),
.phase-input-row .verify-btn:hover:not(:disabled) {
  opacity: 0.8;
}
.q-input-row.correct,
.phase-input-row.correct {
  border-color: var(--good);
}
.q-input-row.wrong,
.phase-input-row.wrong {
  border-color: var(--bad);
}
/* Icono de estado dentro del input */
.q-input-row .status-icon,
.phase-input-row .status-icon {
  margin-right: 4px;
  font-size: 12px;
  flex-shrink: 0;
}
/* Mensaje de error compacto */
.input-error {
  font-size: 9px;
  color: var(--bad);
  margin-top: 2px;
  font-family: 'IBM Plex Mono', monospace;
  display: none;
}
.input-error.show {
  display: block;
}

/* ====== HINT TOGGLE ====== */
.hint-toggle-btn {
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--muted);
  font-size: 9px;
  padding: 2px 8px;
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 4px;
}
.hint-toggle-btn:hover {
  border-color: var(--wazuh);
  color: var(--wazuh);
}
.q-hint-content,
.phase-hint-content {
  font-size: 10px;
  color: var(--muted-2);
  padding: 4px 8px;
  background: var(--panel-2);
  border-radius: var(--radius);
  margin-top: 4px;
  border-left: 2px solid var(--wazuh-dim);
}

.questions-progress,
.killchain-progress {
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  color:var(--muted);
  padding:6px 0;
  border-top:1px solid var(--hairline);
  margin-top:auto;
  flex-shrink:0;
}

/* ====== CAPTURA DE LOGS (Kill Chain) ====== */
.capture-cell {
  width: 26px;
  text-align: center;
}
.capture-checkbox {
  cursor: pointer;
  accent-color: var(--wazuh);
}

/* ====== FASES DE KILL CHAIN (tarjetas) ====== */
.killchain-panel .killchain-phase {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.killchain-panel .killchain-phase:last-child {
  margin-bottom: 0;
}
.killchain-panel .phase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.killchain-panel .phase-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.killchain-panel .phase-desc {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
  line-height: 1.4;
}
.killchain-panel .phase-status {
  font-size: 14px;
}
.killchain-panel .phase-status.correct { color: var(--good); }
.killchain-panel .phase-status.wrong { color: var(--bad); }

/* ====== PANEL DE CONTEXTO SOC (NUEVO) ====== */
.context-panel .context-search-row {
  display: flex;
  gap: 4px;
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 3px 3px 3px 8px;
  transition: border-color .15s;
}
.context-panel .context-search-row:focus-within {
  border-color: var(--blue);
}
.context-panel .context-search-row input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  padding: 5px 0;
}
.context-panel .context-search-row input::placeholder {
  color: var(--muted-2);
}
.context-panel .context-search-row button {
  background: var(--blue);
  border: none;
  border-radius: var(--radius);
  color: #0B1A3A;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 10px;
  padding: 5px 12px;
  cursor: pointer;
  transition: opacity .15s;
}
.context-panel .context-search-row button:hover {
  opacity: 0.8;
}

.context-panel .context-result {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 4px 0 10px 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.6;
}
.context-panel .context-result .result-type {
  font-weight: 600;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
}
.context-panel .context-result .result-type.internal {
  background: rgba(95,212,152,.15);
  color: var(--good);
}
.context-panel .context-result .result-type.malicious {
  background: rgba(229,100,90,.15);
  color: var(--bad);
}
.context-panel .context-result .result-type.unknown {
  background: rgba(124,139,153,.15);
  color: var(--muted);
}
.context-panel .context-result .result-detail {
  margin-top: 6px;
  color: var(--muted);
}
.context-panel .context-result .result-detail span {
  color: var(--text);
}

.context-panel .context-history-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 4px;
  margin-top: 4px;
}
.context-panel .context-history {
  flex: 1;
  overflow-y: auto;
  margin-top: 6px;
}
.context-panel .context-history .history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
  border-radius: var(--radius);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--text);
  cursor: pointer;
  transition: background .12s ease;
  border-bottom: 1px solid var(--hairline);
}
.context-panel .context-history .history-item:hover {
  background: rgba(91,141,239,.08);
}
.context-panel .context-history .history-item .h-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
.context-panel .context-history .history-item .h-type {
  font-size: 8.5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted-2);
}
.context-panel .context-history .history-item .h-type.internal { color: var(--good); }
.context-panel .context-history .history-item .h-type.malicious { color: var(--bad); }
.context-panel .context-history .history-item .h-type.unknown { color: var(--muted); }
.context-panel .context-history .empty-history {
  color: var(--muted-2);
  font-size: 11px;
  padding: 6px 0;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
  .shell{
    grid-template-columns: 1fr 0px;
  }
  .shell.collapsed{
    grid-template-columns: 1fr 0px;
  }
  .shell.with-questions,
  .shell.with-killchain,
  .shell.with-context {
    grid-template-columns: 0px 1fr;
  }
  .shell.collapsed.with-questions,
  .shell.collapsed.with-killchain,
  .shell.collapsed.with-context {
    grid-template-columns: 0px 1fr;
  }
  .questions-panel,
  .killchain-panel,
  .context-panel {
    width: 100%;
    height: 100vh;
  }
  .sidebar-toggle{
    right:8px;
    top:8px;
  }
  .main{padding:14px;}
  .filters-panel{
    width:100%;
    position:relative;
    top:0;
    max-height:none;
    height:auto;
  }
  .content-grid{
    grid-template-columns:1fr;
  }
  .query-section {
    flex-direction: column;
  }
  .query-actions {
    width: 100%;
    flex-direction: row;
    gap: 6px;
  }
  .panel-toggle-btn {
    text-align: center;
  }

  /* ====== FASE SIN LOG (auto-completada) ====== */
.phase-auto-note {
  font-size: 10px;
  color: var(--muted-2);
  font-style: italic;
  margin-top: 4px;
}
}
/* ========== BLOC DE NOTAS FLOTANTE (SCRATCHPAD) ========== */
.scratchpad-fab{
  position:fixed;
  right:24px;
  bottom:24px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--wazuh);
  color:#0B0F14;
  border:none;
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
  z-index:500;
  transition:right .3s ease,transform .15s ease,background .15s ease;
}
.scratchpad-fab:hover{transform:scale(1.06);background:#3ddcc6;}
.scratchpad-fab.active{background:var(--panel-2);color:var(--wazuh);border:1px solid var(--wazuh);}

.scratchpad-panel{
  position:fixed;
  right:24px;
  bottom:80px;
  width:var(--questions-panel-width);
  max-width:calc(100vw - 48px);
  height:420px;
  max-height:calc(100vh - 120px);
  background:var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  box-shadow:0 12px 32px rgba(0,0,0,.5);
  display:none;
  flex-direction:column;
  z-index:499;
  transition:right .3s ease;
}
.scratchpad-panel.open{display:flex;}
.scratchpad-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--hairline);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  color:var(--text);
  flex-shrink:0;
}
.scratchpad-header .close-btn{
  background:none;
  border:none;
  color:var(--muted-2);
  font-size:14px;
  cursor:pointer;
  padding:0 4px;
}
.scratchpad-header .close-btn:hover{color:var(--bad);}
.scratchpad-textarea{
  flex:1;
  width:100%;
  resize:none;
  border:none;
  outline:none;
  background:transparent;
  color:var(--text);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  line-height:1.6;
  padding:12px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.scratchpad-textarea::placeholder{color:var(--muted-2);}

/* Cuando cualquier panel lateral está abierto, el botón/panel flotante se corre */
.shell.with-questions .scratchpad-fab,
.shell.with-killchain .scratchpad-fab,
.shell.with-context .scratchpad-fab,
.shell.with-questions .scratchpad-panel,
.shell.with-killchain .scratchpad-panel,
.shell.with-context .scratchpad-panel {
  right:calc(var(--questions-panel-width) + 24px);
}

/* ====== BOTÓN +/- DE CADA CAMPO (agregar/quitar de la tabla) ====== */
.field-toggle{
  color:var(--muted-2);
  font-size:13px;
  font-weight:bold;
  padding:1px 7px;
  margin-right:-4px;
  cursor:pointer;
  border-radius:var(--radius);
  transition:background .15s ease,color .15s ease;
}
.field-toggle:hover{
  background:var(--wazuh-dim,rgba(41,194,174,.15));
  color:var(--wazuh);
}

/* ====== POPOVER DE CONFIRMACIÓN AL CAMBIAR DE CASO ====== */
.confirm-popover{
  position:fixed;
  z-index:1000;
  max-width:260px;
  background:var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  box-shadow:0 10px 28px rgba(0,0,0,.5);
  padding:12px;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:12px;
  color:var(--text);
  line-height:1.4;
}
.confirm-popover .popover-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.confirm-popover .popover-actions button{
  flex:1;
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  padding:6px 8px;
  border-radius:var(--radius);
  cursor:pointer;
  border:1px solid var(--hairline);
  transition:border-color .15s,background .15s,color .15s;
}
.confirm-popover .confirm-btn{
  background:var(--wazuh);
  border-color:var(--wazuh);
  color:#0B0F14;
  font-weight:600;
}
.confirm-popover .confirm-btn:hover{background:#3ddcc6;}
.confirm-popover .cancel-btn{
  background:transparent;
  color:var(--muted);
}
.confirm-popover .cancel-btn:hover{border-color:var(--muted);color:var(--text);}

/* ============================================================ */
/* ====== NUEVOS ESTILOS PARA CLICK TO PIVOT CON ÍCONO ====== */
/* ============================================================ */

/* Contenedor principal de la celda pivoteable (el td o el span.pivotable en detalle) */
td.pivotable {
  position: relative;
  cursor: default;
  /* No se declara display para que mantenga su comportamiento de tabla */
}

span.pivotable {
  display: inline-block;
  position: relative;
  cursor: default;
}

/* Texto del valor - hereda color normal y no tiene eventos de clic */
.pivot-text {
  color: inherit;
  cursor: text;
}

/* Ícono de búsqueda - oculto por defecto, se muestra al hacer hover sobre el contenedor */
.pivot-icon {
  display: inline-block;
  font-size: 10px;
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
  color: var(--wazuh);
  cursor: pointer;
  user-select: none;
  line-height: 1;
}

/* Al hacer hover sobre el contenedor, mostramos el ícono y subrayamos el texto */
td.pivotable:hover .pivot-icon,
span.pivotable:hover .pivot-icon {
  opacity: 1;
}

td.pivotable:hover .pivot-text,
span.pivotable:hover .pivot-text {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  color: var(--wazuh);
}

/* Para que el ícono tenga un leve efecto al pasar el mouse por encima */
.pivot-icon:hover {
  transform: scale(1.1);
}

/* ============================================================ */
/* ====== NUEVOS ESTILOS PARA GLOSARIO (ÍCONO ℹ️ Y POPUP) ====== */
/* ============================================================ */

/* Ícono de glosario: similar al de pivot pero con color amber y otro símbolo */
.glossary-icon {
  display: inline-block;
  font-size: 10px;
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
  color: var(--amber);
  cursor: pointer;
  user-select: none;
  line-height: 1;
}

/* En hover sobre el contenedor (td o span que lo contiene) mostramos el ícono */
td:hover .glossary-icon,
span:hover .glossary-icon,
.detail-fields div:hover .glossary-icon {
  opacity: 1;
}

/* Efecto al hacer hover sobre el ícono */
.glossary-icon:hover {
  transform: scale(1.1);
  color: #f0c45a; /* un tono más claro del amber */
}

/* Popup de glosario */
.glossary-popup {
  position: absolute;
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 10px 12px;
  max-width: 320px;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 2000;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  pointer-events: auto;
}

.glossary-popup .glossary-popup-title {
  font-weight: 600;
  color: var(--amber);
  margin-bottom: 4px;
  font-size: 12px;
}

.glossary-popup .glossary-popup-body {
  color: var(--muted);
}

/* Para que los íconos se muestren en el detalle expandido */
.detail-fields div {
  position: relative;
}

.detail-fields div .glossary-icon {
  opacity: 0;
}

.detail-fields div:hover .glossary-icon {
  opacity: 1;
}