/* ════════════════════════════════════════════════════════════════
   ALYX INSIGHTS UI — Estilos
   ════════════════════════════════════════════════════════════════
   Panel flotante esquina inferior-izquierda. Colapsado por defecto.
   Sólo cabecera + badges cuando colapsado; cabecera + dos listas
   + footer cuando expandido.
   ════════════════════════════════════════════════════════════════ */

.alyx-ins-root{
  position: fixed;
  bottom: 14px;
  left: 14px;
  z-index: 9988;
  background: var(--bg2, #1e1e26);
  border: 1px solid var(--border2, #36364a);
  border-radius: 6px;
  font-family: var(--ff-sans, -apple-system, system-ui, sans-serif);
  color: var(--text, #f0ead8);
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  width: 320px;
  max-width: 90vw;
  overflow: hidden;
  transition: width .18s, max-height .22s;
}
.alyx-ins-root.alyx-ins-collapsed{
  width: 260px;
}
.alyx-ins-root.alyx-ins-expanded{
  max-height: 70vh;
}

/* Cabecera ───────────────────────────────────────────────────── */
.alyx-ins-header{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, rgba(232,184,75,.06), transparent);
}
.alyx-ins-expanded .alyx-ins-header{
  border-bottom-color: var(--border, #28283a);
}
.alyx-ins-title{
  flex: 1;
  font-family: var(--ff-cinzel, serif);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold, #e8b84b);
}
.alyx-ins-toggle{
  font-size: 12px;
  color: var(--text3, #8c8490);
  transition: transform .18s;
  display: inline-block;
}
.alyx-ins-expanded .alyx-ins-toggle{
  transform: rotate(180deg);
}

/* Badges de severidad ────────────────────────────────────────── */
.alyx-ins-badges{
  display: flex;
  gap: 4px;
}
.alyx-ins-badge{
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 9px;
  font-family: var(--ff-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  border: 1px solid;
  line-height: 1.4;
}
.alyx-ins-badge-ok{
  color: #4ac870;
  border-color: rgba(74,200,112,.4);
  background: rgba(74,200,112,.08);
}

/* Cuerpo (sólo expandido) ───────────────────────────────────── */
.alyx-ins-body{
  max-height: calc(70vh - 40px);
  overflow-y: auto;
  display: none;
}
.alyx-ins-expanded .alyx-ins-body{
  display: block;
}

.alyx-ins-section{
  padding: 10px 10px 4px;
  border-bottom: 1px solid var(--border, #28283a);
}
.alyx-ins-section:last-child{
  border-bottom: 0;
}
.alyx-ins-section-head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.alyx-ins-section-title{
  flex: 1;
  font-family: var(--ff-cinzel, serif);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text3, #8c8490);
}
.alyx-ins-refresh{
  background: transparent;
  border: 1px solid var(--border2, #36364a);
  color: var(--text3, #8c8490);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 11px;
  cursor: pointer;
  transition: .12s;
  line-height: 1.4;
}
.alyx-ins-refresh:hover{
  color: var(--gold, #e8b84b);
  border-color: var(--gold, #e8b84b);
}

/* Listas ───────────────────────────────────────────────────── */
.alyx-ins-list{
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alyx-ins-item{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 4px;
  border-left: 2px solid transparent;
  background: rgba(255,255,255,.015);
}
.alyx-ins-tag{
  flex-shrink: 0;
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--ff-mono, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: 1px solid;
  margin-top: 1px;
  min-width: 46px;
  text-align: center;
}
.alyx-ins-text{
  flex: 1;
  color: var(--text2, #b8b0a2);
}
.alyx-ins-meta{
  flex-shrink: 0;
  font-family: var(--ff-mono, monospace);
  font-size: 10px;
  color: var(--text3, #8c8490);
  margin-top: 1px;
}
.alyx-ins-empty{
  padding: 6px 8px;
  font-size: 11px;
  font-style: italic;
  color: var(--text3, #8c8490);
}

/* Severidad — colorimetría por nivel ───────────────────────── */
.alyx-ins-sev-critical{
  color: var(--crimson, #e84a60);
  border-color: rgba(232,74,96,.45);
  background: rgba(232,74,96,.08);
}
.alyx-ins-item.alyx-ins-sev-critical{
  border-left-color: var(--crimson, #e84a60);
}

.alyx-ins-sev-warning{
  color: var(--gold, #e8b84b);
  border-color: rgba(232,184,75,.45);
  background: rgba(232,184,75,.08);
}
.alyx-ins-item.alyx-ins-sev-warning{
  border-left-color: var(--gold, #e8b84b);
}

.alyx-ins-sev-info{
  color: #4ad0d8;
  border-color: rgba(74,208,216,.4);
  background: rgba(74,208,216,.08);
}
.alyx-ins-item.alyx-ins-sev-info{
  border-left-color: #4ad0d8;
}

.alyx-ins-sev-hint{
  color: var(--text3, #8c8490);
  border-color: var(--border2, #36364a);
  background: rgba(255,255,255,.02);
}
.alyx-ins-item.alyx-ins-sev-hint{
  border-left-color: var(--border2, #36364a);
}

/* Footer ───────────────────────────────────────────────────── */
.alyx-ins-foot{
  padding: 6px 10px 10px;
  font-size: 10px;
  font-style: italic;
  color: var(--text3, #8c8490);
  text-align: right;
}