/*
 * ═══════════════════════════════════════════════════════════════════════
 * GTV_AI_HIVE Hub · Frontend styles · dark theme
 * ═══════════════════════════════════════════════════════════════════════
 * WORLD WIDE GLOBAL TELEVISIÓN, SL · EU VAT ES B 81121931
 * Autor: Julio César de la Orden Ossel + CLAUDE (NPI Team)
 * Versión: 0.2.0  ·  2026-04-27 14:10 (Europe/Madrid)
 * Sin frameworks · Vanilla CSS · Variables CSS para tema · Layout grid
 * ═══════════════════════════════════════════════════════════════════════
 */

:root {
  --bg-0: #0a0a0c;
  --bg-1: #15161a;
  --bg-2: #1c1d22;
  --bg-3: #25272d;
  --border: #2e3038;
  --text-0: #ffffff;
  --text-1: #e6e7eb;
  --text-2: #b8bbc4;
  --accent: #ffb84a;
  --accent-dim: #c98e3a;
  --green: #6dd97a;
  --red: #f06b6b;
  --blue: #6cb4ff;
  --purple: #c89dff;

  --claude: #d97757;
  --codex: #6cb4ff;
  --chatgpt: #34d399;
  --gemini: #c89dff;
  --perplexity: #19c5be;
  --julio: var(--accent);

  --mono: 'JetBrains Mono', 'Menlo', 'Monaco', 'SF Mono', 'Consolas', monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', sans-serif;

  --r: 6px;
  --sidebar-width: 280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--sans);
  background: var(--bg-0);
  color: var(--text-0);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

button {
  font: inherit;
  background: var(--bg-2);
  color: var(--text-0);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: var(--r);
  cursor: pointer;
  transition: background 80ms;
}
button:hover { background: var(--bg-3); }
button:active { transform: translateY(1px); }
button.primary { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 600; }
button.primary:hover { background: var(--accent-dim); }
button.danger { color: var(--red); }

input, textarea, select {
  font: inherit;
  background: var(--bg-1);
  color: var(--text-0);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: var(--r);
  outline: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
}

code {
  font-family: var(--mono);
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.92em;
  color: var(--accent);
}

.hidden { display: none !important; }
.accent { color: var(--accent); }
.separator { opacity: 0.4; }

/* ===== Login screen ===== */
.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 30%, var(--bg-2), var(--bg-0));
}
.login-box {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 40px;
  min-width: 480px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.login-box h1 {
  font-family: var(--mono);
  font-size: 28px;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.subtitle {
  color: var(--text-1);
  font-family: var(--mono);
  font-size: 13px;
  margin-bottom: 24px;
}
.status-pill {
  display: inline-block;
  background: var(--bg-2);
  color: var(--text-1);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--mono);
  margin-bottom: 24px;
}
.status-pill.ok { color: var(--green); border: 1px solid var(--green); }
.status-pill.fail { color: var(--red); border: 1px solid var(--red); }
.login-box label {
  display: block;
  color: var(--text-1);
  font-size: 12px;
  font-family: var(--mono);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.login-box input {
  width: 100%;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 13px;
}
.login-box button {
  width: 100%;
  background: var(--accent);
  color: #000;
  font-weight: 600;
  padding: 10px;
  border: none;
}
.login-box .hint {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-2);
}
.login-box .hint code {
  font-size: 10px;
  display: block;
  white-space: nowrap;
  overflow-x: auto;
  background: var(--bg-2);
  padding: 6px 8px;
}
.error-msg {
  margin-top: 10px;
  color: var(--red);
  font-size: 12px;
  font-family: var(--mono);
}

/* ===== App layout ===== */
.app {
  display: grid;
  grid-template-rows: auto 1fr 28px;
  height: 100%;
}

.header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 7px 16px 8px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  gap: 6px;
}
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 16px;
  min-width: 0;
}
.header-row-main {
  align-items: center;
}
.header-row-brand {
  justify-content: flex-start;
}
.header-row-nav {
  justify-content: flex-end;
}
.header-row-secondary {
  /* R4.5.f: la tercera fila empieza en la misma vertical que el contenido
     principal tras el sidebar, y sus elementos internos quedan a la derecha. */
  justify-content: flex-end;
  gap: 14px;
  padding-left: calc(var(--sidebar-width) - 16px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  min-width: max-content;
}
.bee-brand::before {
  content: "";
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M11.1 9.2C8.4 5.2 4 4.4 2.6 6.6C1.1 9 4 12.6 9 12.8M20.9 9.2c2.7-4 7.1-4.8 8.5-2.6C30.9 9 28 12.6 23 12.8' fill='none' stroke='rgba(255,255,255,.92)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 7.4c5.2 0 9.3 3.8 9.3 8.5S21.2 24.4 16 24.4s-9.3-3.8-9.3-8.5S10.8 7.4 16 7.4Z' fill='%23ffb84a' stroke='%23141414' stroke-width='1.3'/%3E%3Cpath d='M12.7 8.2c-1.3 2.2-1.9 4.8-1.9 7.7s.6 5.5 1.9 7.7M16 7.5c-1 2.4-1.5 5.2-1.5 8.4s.5 6 1.5 8.4M19.3 8.2c1.3 2.2 1.9 4.8 1.9 7.7s-.6 5.5-1.9 7.7M24.4 15.9h3.7' fill='none' stroke='%23141414' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: bee-buzz 6s ease-in-out infinite;
  transform-origin: 50% 60%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
@keyframes bee-buzz {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  10% { transform: rotate(-4deg) translateY(-1px); }
  20% { transform: rotate(4deg) translateY(0); }
  30% { transform: rotate(-2deg) translateY(-2px); }
  40% { transform: rotate(2deg) translateY(0); }
  50% { transform: rotate(0deg) translateY(-1px); }
  60% { transform: rotate(-1deg) translateY(0); }
  /* descansa los siguientes 40% del ciclo: efecto sutil, no molesto */
}

/* Abeja decorativa grande en el welcome (no se elimina con el welcome
   porque el welcome se elimina entero al primer mensaje, pero mientras
   está visible se ve mucho mejor que el emoji 🐝 plano). */
.welcome-bee {
  width: 96px;
  height: 96px;
  margin: 0 auto 12px auto;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M11.1 9.2C8.4 5.2 4 4.4 2.6 6.6C1.1 9 4 12.6 9 12.8M20.9 9.2c2.7-4 7.1-4.8 8.5-2.6C30.9 9 28 12.6 23 12.8' fill='none' stroke='rgba(255,255,255,.92)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 7.4c5.2 0 9.3 3.8 9.3 8.5S21.2 24.4 16 24.4s-9.3-3.8-9.3-8.5S10.8 7.4 16 7.4Z' fill='%23ffb84a' stroke='%23141414' stroke-width='1.3'/%3E%3Cpath d='M12.7 8.2c-1.3 2.2-1.9 4.8-1.9 7.7s.6 5.5 1.9 7.7M16 7.5c-1 2.4-1.5 5.2-1.5 8.4s.5 6 1.5 8.4M19.3 8.2c1.3 2.2 1.9 4.8 1.9 7.7s-.6 5.5-1.9 7.7M24.4 15.9h3.7' fill='none' stroke='%23141414' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: bee-buzz 6s ease-in-out infinite;
  transform-origin: 50% 60%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
.header-tabs {
  /* JULIO 2026-04-30 21:14: el menú debe alinearse a la DERECHA.
     `flex: 1 1 auto` ocupa todo el ancho, lo que con justify-content
     interno puede no parecer "alineado" al cliente. Mantenemos
     flex-end + nos aseguramos de que el contenedor padre (.header-row-nav)
     fuerza también flex-end (no necesita flex:1 1 auto). */
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
}
.header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-1);
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
  margin-left: 0;
}
.connection-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-2);
  display: inline-block;
}
.connection-dot.ok { background: var(--green); box-shadow: 0 0 8px var(--green); }
.connection-dot.fail { background: var(--red); }
.header-secondary-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.tab-btn {
  background: transparent;
  border: none;
  padding: 6px 12px;
  color: var(--text-1);
  border-radius: var(--r);
}
.tab-btn:hover { background: var(--bg-2); color: var(--text-0); }
.tab-btn.active {
  background: var(--bg-2);
  color: var(--accent);
}
.logout-btn {
  margin-left: 4px;
  font-size: 12px;
  color: var(--red);
  border-color: transparent;
}

/* ===== Main grid (sidebar + content) ===== */
.main {
  display: grid;
  grid-template-columns: 280px 1fr;
  overflow: hidden;
}
.sidebar {
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 16px;
}
.sidebar-section {
  margin-bottom: 24px;
}
.sidebar-section h3 {
  font-size: 11px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
  margin-bottom: 12px;
}

/* LLM cards */
.llm-list { display: flex; flex-direction: column; gap: 8px; }
.llm-card {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: var(--bg-2);
  border-radius: var(--r);
  border-left: 3px solid var(--text-2);
  font-size: 12px;
  font-family: var(--mono);
}
.llm-card.claude { border-left-color: var(--claude); }
.llm-card.codex { border-left-color: var(--codex); }
.llm-card.chatgpt { border-left-color: var(--chatgpt); }
.llm-card.gemini { border-left-color: var(--gemini); }
.llm-card.perplexity { border-left-color: var(--perplexity); }
.llm-card.mosqueteros {
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
  border-left: 3px solid var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim);
  cursor: pointer;
}
.llm-card.mosqueteros:hover {
  border-left-width: 6px;
}
.llm-card.mosqueteros .avatar {
  background: var(--accent);
  color: #000;
  font-size: 16px;
}
.llm-card.mosqueteros .name {
  color: var(--accent);
  letter-spacing: 0.05em;
}
.llm-card .avatar {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}
.llm-card.claude .avatar { background: var(--claude); color: #fff; }
.llm-card.codex .avatar { background: var(--codex); color: #000; }
.llm-card.chatgpt .avatar { background: var(--chatgpt); color: #000; }
.llm-card.gemini .avatar { background: var(--gemini); color: #000; }
.llm-card.perplexity .avatar { background: var(--perplexity); color: #000; }
.llm-card .info { display: flex; flex-direction: column; min-width: 0; }
.llm-card .name { font-weight: 600; color: var(--text-0); }
.llm-card .meta { color: var(--text-2); font-size: 10px; }
.llm-card .status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--text-2);
}
.llm-card .status-dot.ok { background: var(--green); }
.llm-card .status-dot.warn { background: var(--accent); }
.llm-card .status-dot.fail { background: var(--red); }

.llm-card.expanded {
  display: block;
  padding: 0;
  background: var(--bg-2);
}
.llm-card.expanded .card-main {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  cursor: pointer;
}
.llm-card.expanded .card-main:hover { background: var(--bg-3); }
.llm-card .card-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 10px 8px;
}
.mode-badge {
  font-size: 9px;
  font-family: var(--mono);
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-3);
  color: var(--text-2);
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mode-badge.active {
  background: rgba(109, 217, 122, 0.15);
  color: var(--green);
  border-color: var(--green);
}
.mode-badge.failed {
  background: rgba(240, 107, 107, 0.15);
  color: var(--red);
  border-color: var(--red);
}
.mode-badge.pending, .mode-badge.pending_user_config, .mode-badge.inactive {
  color: var(--text-2);
  background: var(--bg-3);
}
.mode-badge.primary {
  font-weight: 600;
  box-shadow: 0 0 0 1px currentColor;
}
.llm-card .card-controls {
  display: flex;
  gap: 4px;
  padding: 0 10px 8px;
  flex-wrap: wrap;
}
.btn-control {
  font-size: 10px;
  padding: 3px 8px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-1);
  border-radius: 3px;
  cursor: pointer;
}
.btn-control:hover { background: var(--bg-2); border-color: var(--accent); color: var(--accent); }
.btn-control.danger { color: var(--red); }
.btn-control.danger:hover { background: rgba(240,107,107,0.15); border-color: var(--red); }

.syntax-help {
  list-style: none;
  font-size: 11px;
  color: var(--text-1);
}
.syntax-help li {
  padding: 4px 0;
  font-family: var(--mono);
}
.syntax-help code { font-size: 10px; }

.stats {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-1);
}
.stats div { padding: 3px 0; }
.stats span { color: var(--accent); font-weight: 600; }

/* ===== Content area ===== */
.content {
  background: var(--bg-0);
  position: relative;
  overflow: hidden;
}
.tab-panel {
  display: none;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
}
.tab-panel.active { display: flex; }

/* ===== Chat ===== */
.messages {
  /* R4.5 FIX5 (JULIO 12:0X · monitor 27" 5K external): padding lateral igualado
     al composer (16px) para consistencia visual responsive. Vertical mantiene
     24px para separación arriba/abajo. Antes era padding 24px uniforme que
     en pantallas grandes hacía parecer que las messages tenían ancho fijo
     más estrecho que el composer (padding 16px lateral). */
  flex: 1;
  overflow-y: auto;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.welcome {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-1);
}
.welcome h2 {
  font-family: var(--mono);
  margin-bottom: 12px;
  color: var(--text-0);
}
.welcome p { max-width: 580px; margin: 0 auto; line-height: 1.6; }

.message {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  width: 100%;
}
.message .avatar {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--mono);
}
.message.from-julio .avatar { background: var(--julio); color: #000; }
.message.from-claude .avatar { background: var(--claude); color: #fff; }
.message.from-codex .avatar { background: var(--codex); color: #000; }
.message.from-chatgpt .avatar { background: var(--chatgpt); color: #000; }
.message.from-gemini .avatar { background: var(--gemini); color: #000; }
.message.from-perplexity .avatar { background: var(--perplexity); color: #000; }
.message.from-system .avatar { background: var(--bg-3); color: var(--text-2); }

.message .body {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 0;
}
.message .meta {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-2);
}
.message .meta .name { color: var(--text-0); font-weight: 600; }
.message .meta .target { color: var(--accent); }
.message .text { white-space: pre-wrap; word-break: break-word; }
.message.event {
  grid-template-columns: 1fr;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-2);
  text-align: center;
  padding: 4px 0;
}

/* R4.2: dedup visual badge inline en .meta cuando un mensaje se ha
   recibido N>1 veces dentro de la ventana de 5s (solo visual, no borra
   datos canónicos). */
.message .meta .dup-badge {
  display: inline-block;
  font-size: 10px;
  background: var(--bg-3);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid var(--accent);
  cursor: help;
}

.messages-toast {
  align-self: center;
  margin: 10px 16px 0;
  background: var(--accent);
  color: #000;
  border: 1px solid var(--accent);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}
.messages-toast:hover {
  transform: translateY(-2px);
}
.messages-toast.hidden {
  display: none;
}

/* ===== Chat filters / Composer ===== */
.chat-controls {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--bg-1);
  flex-wrap: wrap;
}
.chat-controls input {
  font-family: var(--mono);
  min-width: 190px;
}
.chat-controls #chat-id-filter { min-width: 210px; }
.message .meta .chat-id,
.conv-row .conv-chat-id {
  display: inline-block;
  font-size: 10px;
  background: var(--bg-3);
  color: var(--blue);
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(108, 180, 255, 0.45);
}
.conv-row .conv-chat-id {
  margin-top: 4px;
  display: block;
  width: fit-content;
}

.composer {
  border-top: 1px solid var(--border);
  background: var(--bg-1);
  padding: 12px 16px;
}
.composer textarea {
  width: 100%;
  resize: none;
  min-height: 60px;
  font-family: var(--mono);
  font-size: 13px;
  box-sizing: border-box;
}
/* R4.5.d v2 HOTFIX (CODEX 18:47 defecto 1): wrapper con handle custom
   absolute top-right. El textarea está bottom-anchored: drag del handle
   hacia arriba aumenta height (bottom_offset estable, top_offset decrece).
   Altura persistida en localStorage por _initComposerResize() en app.js.
   Reemplaza el approach `.composer-resize-up` (column-reverse) que NO movía
   el handle visual del browser. */
.composer-resize-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.composer-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 18px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-bottom: none;
  border-right: none;
  border-top-left-radius: 4px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-2);
  user-select: none;
  z-index: 5;
  line-height: 1;
}
.composer-resize-handle:hover {
  background: var(--accent, #4a90e2);
  color: #fff;
}
.composer-resize-wrapper.is-resizing {
  cursor: ns-resize;
}
.composer-resize-wrapper.is-resizing textarea {
  pointer-events: none;
  user-select: none;
}

/* R4.5.f: selector de categoría en primera fila, a la derecha de la navegación. */
.chat-class-row {
  display: flex;
  gap: 4px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  margin-left: 12px;
  order: 999;
}
.chat-class-label {
  color: var(--text-2);
  margin-right: 4px;
  font-family: var(--mono);
  font-size: 11px;
}
.chat-class-selector {
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 8px;
}

/* R4.5.d v2 (JULIO 18:19 #1, CODEX 18:23 ord. 1): chat_id badge visible en
   cada mensaje · todos los emisores (CLAUDE/CODEX/GEMINI/JULIO) consistente. */
.message .meta .chat-id-badge {
  display: inline-block;
  font-size: 10px;
  background: var(--bg-3);
  color: var(--accent);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
  font-family: var(--mono);
}
.conv-row .chat-id-badge {
  display: inline-block;
  font-size: 9px;
  background: var(--bg-3);
  color: var(--accent);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  font-family: var(--mono);
}
/* Tag chat_class metadata (NO texto del cuerpo · CODEX 18:23 ord. 3). */
.chat-class-tag {
  display: inline-block;
  font-size: 9px;
  background: var(--bg-2);
  color: var(--text-1);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  font-family: var(--mono);
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.chat-class-tag.dev { color: var(--codex); border-color: var(--codex); }
.chat-class-tag.general { color: var(--accent); border-color: var(--accent); }
.chat-class-tag.normas, .chat-class-tag.estado, .chat-class-tag.decisiones,
.chat-class-tag.tareas, .chat-class-tag.bloqueos, .chat-class-tag.bitacora,
.chat-class-tag.votaciones { color: var(--gemini); border-color: var(--gemini); }

/* R4.5.d v2: tab DOCUMENTOS · viewer markdown read-only. */
.documents-controls {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--bg-1);
  flex-wrap: wrap;
}
.documents-controls input { flex: 1; min-width: 200px; max-width: 350px; }
.documents-controls select { font-family: var(--mono); }
.documents-content {
  flex: 1;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 1px;
  background: var(--border);
  overflow: hidden;
}
.documents-list-pane, .documents-viewer-pane {
  background: var(--bg-0);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.documents-list { flex: 1; overflow-y: auto; }
.document-row {
  padding: 10px 16px;
  border-bottom: 1px solid var(--bg-2);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
}
.document-row:hover { background: var(--bg-1); }
.document-row.selected {
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
}
.document-row .doc-name { color: var(--text-0); font-weight: 600; }
.document-row .doc-meta { color: var(--text-2); font-size: 10px; margin-top: 4px; }
.document-row .doc-category {
  display: inline-block;
  font-size: 9px;
  background: var(--bg-3);
  color: var(--accent);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  text-transform: uppercase;
}
.documents-viewer {
  flex: 1;
  overflow: auto;
  padding: 16px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-0);
  background: var(--bg-0);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.composer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.composer-hint { font-size: 11px; color: var(--text-2); font-family: var(--mono); }
#send-btn {
  background: var(--accent);
  color: #000;
  font-weight: 600;
  border-color: var(--accent);
  padding: 8px 18px;
}

/* ===== Audit ===== */
.audit-controls, .memory-controls, .state-controls {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--bg-1);
}
.audit-controls input, .memory-controls input { flex: 1; max-width: 400px; }
.audit-count, .memory-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
}
.audit-table, .memory-table, .conversations-table {
  flex: 1;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 12px;
}
.conversations-controls {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--bg-1);
  flex-wrap: wrap;
}
.conversations-controls input { flex: 1; min-width: 200px; max-width: 350px; }
.conversations-controls #conv-id-filter {
  flex: 0 0 220px;
  min-width: 220px;
  max-width: 220px;
  font-family: var(--mono);
}
.conversations-controls select { font-family: var(--mono); }

/* R4.1: toggle JULIO !!! filter · accionable, reversible, contraste alto. */
.conv-julio-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-1);
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-1);
  user-select: none;
}
.conv-julio-toggle:hover { background: var(--bg-2); }
.conv-julio-toggle input { margin: 0; cursor: pointer; }
.conv-julio-toggle .julio-tag {
  color: var(--julio, #ffb454);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* R4.1: highlight visual de filas con JULIO !!! incluso sin filtro activo. */
.conv-row.julio-alert {
  background: rgba(255, 180, 84, 0.08);
  border-left: 3px solid var(--julio, #ffb454);
}
.conv-row.julio-alert:hover { background: rgba(255, 180, 84, 0.14); }

/* R4.1: badge inline en el título cuando la fila lleva la marca. */
.julio-alert-badge {
  display: inline-block;
  font-size: 9px;
  background: var(--julio, #ffb454);
  color: #000;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.conv-row {
  display: grid;
  grid-template-columns: 145px 130px 130px 1fr;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--bg-2);
  align-items: start;
}
.conv-row:hover { background: var(--bg-2); }
.conv-row { cursor: default; }
.conv-row:hover { cursor: pointer; }
.conv-row .ts { color: var(--text-2); font-size: 11px; white-space: nowrap; }
.conv-row .from {
  font-weight: 600;
}
.conv-row .from.julio { color: var(--julio); }
.conv-row .from.claude { color: var(--claude); }
.conv-row .from.codex, .conv-row .from.chatgpt_codex { color: var(--codex); }
.conv-row .from.chatgpt { color: var(--chatgpt); }
.conv-row .from.gemini { color: var(--gemini); }
.conv-row .from.perplexity { color: var(--perplexity); }
.conv-row .from.system, .conv-row .from.unknown { color: var(--text-2); }
.conv-row .arrow { color: var(--text-2); margin-right: 4px; }
.conv-row .to {
  color: var(--text-1);
}
.conv-row .text {
  color: var(--text-0);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
  line-height: 1.4;
}
.conv-row .title {
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 4px;
}
.conv-row .via-badge {
  display: inline-block;
  font-size: 9px;
  background: var(--bg-3);
  color: var(--text-2);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}
.audit-row, .memory-row {
  display: grid;
  grid-template-columns: 150px 110px 110px 1fr;
  gap: 12px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--bg-2);
}
.memory-row { grid-template-columns: 110px 1fr 1fr 80px; }
.audit-row:hover, .memory-row:hover { background: var(--bg-2); }
.audit-row .ts { color: var(--text-2); }
.audit-row .id { color: var(--accent); }
.audit-row .ev { color: var(--blue); }
.audit-row .det { color: var(--text-1); }

/* ===== Projects tab ===== */
.projects-controls {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--bg-1);
  flex-wrap: wrap;
}
.projects-content {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(360px, 1fr) minmax(320px, 420px);
  gap: 1px;
  background: var(--border);
  overflow: hidden;
}
.projects-pane, .project-detail-pane, .tasks-pane {
  background: var(--bg-0);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.pane-title {
  padding: 12px 16px;
  font-size: 11px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
}
#tasks-of-project { color: var(--accent); font-size: 10px; margin-left: 8px; }
.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-2);
  font-style: italic;
}

.project-row, .task-row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg-2);
  cursor: pointer;
  border-left: 3px solid transparent;
}
.project-row:hover, .task-row:hover { background: var(--bg-1); }
.project-row.selected {
  background: var(--bg-2);
  border-left-color: var(--accent);
}
.project-row.priority-critical, .task-row.priority-critical { border-left-color: var(--red); }
.project-row.priority-high, .task-row.priority-high { border-left-color: var(--accent); }
.project-row.priority-medium, .task-row.priority-medium { border-left-color: var(--blue); }
.project-row.priority-low, .task-row.priority-low { border-left-color: var(--text-2); }
.project-row.priority-backlog, .task-row.priority-backlog { border-left-color: var(--bg-3); }

.task-row.status-done { opacity: 0.55; }
.task-row.status-cancelled { opacity: 0.4; text-decoration: line-through; }
.task-row.status-blocked { background: rgba(240, 107, 107, 0.06); }

.project-header, .task-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: var(--mono);
  font-size: 13px;
}
.project-name, .task-title {
  font-weight: 600;
  color: var(--text-0);
  flex: 1;
  min-width: 0;
}
.project-desc, .task-desc {
  margin-top: 6px;
  color: var(--text-1);
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
}
.project-meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 10px;
}
.project-meta span {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  background: var(--bg-1);
}
.project-tags {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.project-tag {
  color: var(--accent);
  border: 1px solid rgba(255,184,74,0.35);
  background: rgba(255,184,74,0.08);
  border-radius: 999px;
  padding: 1px 7px;
  font-family: var(--mono);
  font-size: 10px;
}
.project-objectives-preview {
  margin: 8px 0 0 18px;
  color: var(--text-2);
  font-size: 11px;
}
.project-actions, .task-actions {
  margin-top: 8px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.task-assigned {
  font-size: 11px;
  color: var(--accent);
  font-family: var(--mono);
}

/* Priority badges */
.badge-critical { color: var(--red); background: rgba(240,107,107,0.15); border: 1px solid var(--red); padding: 1px 6px; font-size: 10px; border-radius: 3px; font-family: var(--mono); }
.badge-high { color: var(--accent); background: rgba(255,184,74,0.15); border: 1px solid var(--accent); padding: 1px 6px; font-size: 10px; border-radius: 3px; font-family: var(--mono); }
.badge-medium { color: var(--blue); background: rgba(108,180,255,0.15); border: 1px solid var(--blue); padding: 1px 6px; font-size: 10px; border-radius: 3px; font-family: var(--mono); }
.badge-low { color: var(--text-1); background: var(--bg-3); padding: 1px 6px; font-size: 10px; border-radius: 3px; font-family: var(--mono); }
.badge-backlog { color: var(--text-2); background: var(--bg-3); padding: 1px 6px; font-size: 10px; border-radius: 3px; font-family: var(--mono); opacity: 0.7; }

/* Status badges */
.badge-status { padding: 1px 6px; font-size: 10px; border-radius: 3px; font-family: var(--mono); border: 1px solid var(--border); color: var(--text-1); }
.badge-status.badge-active { color: var(--green); border-color: var(--green); background: rgba(109,217,122,0.1); }
.badge-status.badge-paused { color: var(--text-2); }
.badge-status.badge-completed, .badge-status.badge-done { color: var(--green); opacity: 0.7; }
.badge-status.badge-archived { color: var(--text-2); opacity: 0.5; }
.badge-status.badge-pending { color: var(--text-1); }
.badge-status.badge-in_progress { color: var(--accent); border-color: var(--accent); background: rgba(255,184,74,0.1); }
.badge-status.badge-review { color: var(--purple); border-color: var(--purple); background: rgba(200,157,255,0.1); }
.badge-status.badge-blocked { color: var(--red); border-color: var(--red); background: rgba(240,107,107,0.1); }
.badge-status.badge-cancelled { color: var(--text-2); opacity: 0.5; }

.project-form, .areas-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.project-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.project-form label, .areas-section label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.project-form input,
.project-form textarea,
.project-form select,
.areas-section input,
.areas-section textarea,
.areas-section select {
  width: 100%;
  font-family: var(--sans);
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
}
.form-grid, .area-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.project-form-actions, .area-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.project-relations {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-1);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255,184,74,0.03);
}
.relation-link {
  margin: 2px 4px 2px 0;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--blue);
}
.relation-empty {
  color: var(--text-2);
  font-style: italic;
}
.areas-section h4 {
  margin-bottom: 10px;
  font-family: var(--mono);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.area-add-form {
  display: grid;
  grid-template-columns: 1.2fr 1fr 120px;
  gap: 8px;
  align-items: start;
  margin-bottom: 12px;
}
.area-add-form textarea {
  grid-column: 1 / 3;
}
.area-add-form.disabled {
  opacity: 0.45;
  pointer-events: none;
}
.areas-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.area-row {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 1280px) {
  .header-row-main,
  .header-row-secondary {
    align-items: flex-start;
  }
  .header-row-main {
    flex-direction: column;
  }
  .header-tabs {
    justify-content: flex-end;
  }
  .header-row-secondary {
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 0;
  }
  .projects-content {
    grid-template-columns: minmax(280px, 340px) minmax(360px, 1fr);
  }
  .tasks-pane {
    grid-column: 1 / -1;
    min-height: 260px;
  }
}

@media (max-width: 900px) {
  .header-status,
  .header-secondary-actions {
    width: 100%;
  }
  .header-secondary-actions {
    justify-content: flex-start;
  }
  .projects-content {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .projects-pane, .project-detail-pane, .tasks-pane {
    min-height: 260px;
  }
  .form-grid, .area-grid, .area-add-form {
    grid-template-columns: 1fr;
  }
  .area-add-form textarea {
    grid-column: auto;
  }
}

/* ===== State ===== */
.state-dump {
  flex: 1;
  overflow: auto;
  padding: 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-1);
  background: var(--bg-0);
  white-space: pre;
}

/* ===== Footer ===== */
.footer {
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-2);
  justify-content: space-between;
}

/* ===== Modal ===== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-content {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  min-width: 400px;
  max-width: 600px;
}
.modal-content.conversation-reply-content {
  width: min(760px, calc(100vw - 40px));
  max-width: 760px;
}
.modal-title { font-weight: 600; margin-bottom: 12px; font-family: var(--mono); }
.modal-body { color: var(--text-1); margin-bottom: 16px; font-family: var(--mono); font-size: 12px; max-height: 400px; overflow-y: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.reply-original {
  white-space: pre-wrap;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px;
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 12px;
  color: var(--text-1);
}
.reply-target-label,
.reply-text-label {
  display: block;
  color: var(--text-2);
  margin-top: 10px;
}
.reply-target-label input,
.reply-text-label textarea {
  width: 100%;
  margin-top: 6px;
  font-family: var(--mono);
}

/* ===== Scrollbars ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-3); }

/* ===== v4 · Decisiones / Pipelines / Stats / Locks / Skills ===== */
.empty-hint { padding: 20px; color: var(--text-2); text-align: center; font-style: italic; }
.muted { color: var(--text-2); font-style: italic; }

.decisions-controls, .pipelines-controls, .stats-controls {
  display: flex; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg-1); align-items: center;
}
.decisions-list, .pipelines-list { padding: 16px; overflow-y: auto; max-height: calc(100vh - 200px); }
.stats-content { padding: 16px; overflow-y: auto; max-height: calc(100vh - 180px); }
.stats-section { margin-bottom: 24px; }
.stats-section h3 {
  font-size: 13px; color: var(--text-1); margin: 0 0 8px 0; padding-bottom: 4px;
  border-bottom: 1px solid var(--border); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.5px;
}

.decision-card, .pipeline-card {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: 6px;
  padding: 12px; margin-bottom: 12px; font-family: var(--mono); font-size: 12px;
}
.decision-card.status-open { border-left: 3px solid #4a9eff; }
.decision-card.status-closed { border-left: 3px solid #2bb673; }
.decision-card.status-cancelled { border-left: 3px solid #888; opacity: 0.7; }
.dec-header { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; color: var(--text-2); font-size: 11px; }
.dec-id { font-weight: 700; color: var(--text-0); }
.dec-status { padding: 2px 8px; background: var(--bg-2); border-radius: 3px; }
.dec-title { font-size: 14px; color: var(--text-0); margin: 4px 0 6px; font-weight: 600; }
.dec-desc { color: var(--text-1); margin: 6px 0; white-space: pre-wrap; }
.dec-tally { margin: 8px 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.vote-tally { padding: 2px 8px; background: var(--bg-2); border-radius: 3px; }
.my-vote { color: #4a9eff; }
.dec-vote-actions { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.vote-btn {
  padding: 4px 12px; background: var(--bg-2); color: var(--text-0); border: 1px solid var(--border);
  border-radius: 3px; cursor: pointer; font-family: var(--mono); font-size: 11px;
}
.vote-btn:hover { background: var(--bg-3); }
.vote-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.dec-result { margin-top: 8px; color: #2bb673; padding: 4px 8px; background: rgba(43, 182, 115, 0.1); border-radius: 3px; }

.pipeline-card.status-active { border-left: 3px solid #4a9eff; }
.pipeline-card.status-completed { border-left: 3px solid #2bb673; }
.pipeline-card.status-cancelled { border-left: 3px solid #888; opacity: 0.7; }
.pipe-header { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; color: var(--text-2); font-size: 11px; }
.pipe-id { font-weight: 700; color: var(--text-0); }
.pipe-name { font-size: 14px; color: var(--text-0); font-weight: 600; }
.pipe-status { padding: 2px 8px; background: var(--bg-2); border-radius: 3px; }
.pipe-desc { color: var(--text-1); margin: 6px 0; white-space: pre-wrap; }
.pipe-steps { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.pipe-step {
  display: grid; grid-template-columns: 50px 100px 80px 1fr; gap: 8px; align-items: center;
  padding: 6px 8px; background: var(--bg-2); border-radius: 4px; font-size: 11px;
}
.pipe-step.current { background: rgba(74, 158, 255, 0.15); border-left: 2px solid #4a9eff; }
.pipe-step.status-done { color: #2bb673; }
.pipe-step.status-error { color: #ff6b6b; }
.pipe-step.status-pending { opacity: 0.55; }
.step-result { grid-column: 1 / -1; color: var(--text-2); padding-left: 50px; font-size: 10px; }

.lock-row, .skill-row, .paused-row, .sub-row {
  padding: 6px 10px; background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 4px; margin-bottom: 4px; font-family: var(--mono); font-size: 11px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.lock-ident, .paused-ident { color: #4a9eff; font-weight: 600; }
.lock-path { color: var(--text-1); }
.lock-ttl, .paused-when { color: var(--text-2); font-size: 10px; }
.lock-reason, .paused-reason { color: var(--text-2); font-style: italic; }
.skill-pill { padding: 2px 6px; background: var(--bg-2); border-radius: 3px; margin: 2px; display: inline-block; }
.resume-btn, .pause-btn {
  padding: 2px 10px; background: var(--bg-2); color: var(--text-0); border: 1px solid var(--border);
  border-radius: 3px; cursor: pointer; font-family: var(--mono); font-size: 11px;
}
.resume-btn:hover, .pause-btn:hover { background: var(--bg-3); }

.metrics-tbl { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; }
.metrics-tbl th, .metrics-tbl td { padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.metrics-tbl th { color: var(--text-2); font-weight: 600; background: var(--bg-1); }
.metrics-tbl td:last-child { text-align: right; font-weight: 600; color: var(--text-0); }

/* ═══════════════════════════════════════════════════════════════════════
 * R4.19 GEMINI Control + R5.1 WhatsApp tabs (CLAUDE 2026-05-01)
 * ═══════════════════════════════════════════════════════════════════════ */

.gc-controls,
.wa-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.gc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 16px;
  align-content: start;
  flex: 1 1 auto;
  overflow-y: auto;
}

.gc-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.gc-card-wide { grid-column: 1 / -1; }

.gc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.gc-table td,
.gc-table th {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.gc-table th {
  background: var(--bg-3);
  font-weight: 600;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gc-table td:first-child { width: 40%; }

.gc-table code { font-family: var(--mono); font-size: 11px; }

.gc-result {
  padding: 8px;
  border-radius: 4px;
  background: var(--bg-3);
  font-size: 12px;
  min-height: 24px;
}

.gc-result .ok { color: var(--green); }
.gc-result .err { color: var(--red); }

.gc-info p { margin: 4px 0; font-size: 12px; }
.gc-info .muted { color: var(--text-2); font-size: 11px; }

.gc-logs-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.gc-logs-output {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}

.inline-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-right: auto;
}

.badge {
  padding: 2px 8px;
  font-size: 10px;
  border-radius: 3px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid;
}

.badge.badge-active {
  color: var(--green);
  background: rgba(109,217,122,0.1);
  border-color: var(--green);
}

.badge.badge-disabled {
  color: var(--text-2);
  background: var(--bg-3);
  border-color: var(--border);
}

button.danger {
  background: rgba(240,107,107,0.15);
  border-color: var(--red);
  color: var(--red);
}

button.danger:hover {
  background: rgba(240,107,107,0.25);
}
/* 
  =============================================================
  GTV AI HIVE - UTB V2 Conceptual CSS Additions
  Para ser inyectadas en frontend/style.css
  =============================================================
*/

/* Layout Split-Screen para el UTB */
.split-screen {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 180px); /* Ocupar el resto de la pantalla */
  gap: 16px;
  overflow: hidden;
}

.utb-log-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border-right: 1px solid var(--border-color);
  padding: 10px;
  overflow-y: auto;
}

.utb-detail-pane {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  padding: 10px;
  overflow-y: auto;
}

/* Eventos del Log UTB */
.utb-log-item {
  padding: 12px;
  margin-bottom: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.utb-log-item:hover {
  background: var(--bg-3);
  border-color: var(--accent);
}

.utb-log-item.active {
  border-color: var(--accent);
  box-shadow: 0 0 5px rgba(255, 170, 0, 0.3); /* GTV Gold Accent */
}

/* Visor JSON-RPC */
.utb-json-viewer {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 15px;
  border-radius: 6px;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 13px;
  flex-grow: 1;
  overflow: auto;
  border: 1px solid var(--border-color);
}

/* Badges Corporativos (Colores) */
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  margin-left: 6px;
}

.badge-owner-claude { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.5); }
.badge-owner-codex  { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.5); }
.badge-owner-gemini { background: rgba(139, 92, 246, 0.2); color: #a78bfa; border: 1px solid rgba(139, 92, 246, 0.5); }
.badge-owner-system { background: rgba(107, 114, 128, 0.2); color: #9ca3af; border: 1px solid rgba(107, 114, 128, 0.5); }

/* Gate Status */
.badge-gate-auto        { color: #10b981; } /* Verde - Sin fricción */
.badge-gate-codex       { color: #f59e0b; } /* Naranja - Requiere Auditoría */
.badge-gate-julio_codex { color: #ef4444; } /* Rojo - Zero Trust Absoluto */

/* Grid de Capabilities */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.cap-card {
  background: var(--bg-2);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.cap-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.cap-card-title {
  font-size: 14px;
  font-weight: bold;
  font-family: monospace;
}

/* Health Cards (Provider Health) */
.health-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.health-latency {
  font-family: monospace;
  font-size: 14px;
  color: var(--text-muted);
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3f3f46;
}

.status-indicator.online {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.status-indicator.offline {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}