/* ============================================================================
   Celaque · Capa de marca (brand layer)
   Tokens institucionales + override del tema base (omni.css).
   IMPORTANTE: cargar SIEMPRE DESPUÉS de omni.css para que el override de
   :root tenga efecto. Fuente de verdad de diseño: skill /celaque-brand-platform-design
   ========================================================================== */

:root {
  /* ── Paleta corporativa oficial ──────────────────────────────────────── */
  --cel-verde-profundo: #042523;
  --cel-verde-institucional: #488478;
  --cel-gris-claro: #CCCCCC;
  --cel-beige: #A99886;
  --cel-blanco: #FFFFFF;
  --cel-negro: #000000;

  /* Tints derivados (uso interno de UI) */
  --cel-verde-profundo-hover: #063330;
  --cel-verde-institucional-soft: rgba(72, 132, 120, 0.12);
  --cel-verde-institucional-tint: #e3eeeb;

  /* ── Tipografía, formas y espacios ───────────────────────────────────── */
  --cel-font-family: "Mulish", "Muli", Arial, sans-serif;
  --cel-radius-sm: 8px;
  --cel-radius-md: 14px;
  --cel-radius-lg: 22px;
  --cel-shadow-soft: 0 8px 24px rgba(4, 37, 35, 0.08);
  --cel-border-soft: 1px solid rgba(4, 37, 35, 0.12);
  --cel-space-xs: 4px;
  --cel-space-sm: 8px;
  --cel-space-md: 16px;
  --cel-space-lg: 24px;
  --cel-space-xl: 40px;

  /* ── Override del tema base (omni.css) → identidad Celaque ────────────── */
  /* Verde institucional como acento interactivo; verde profundo para hover,
     sidebar y texto principal. */
  --primary:             var(--cel-verde-institucional);
  --primary-dark:        var(--cel-verde-profundo);
  --primary-light:       var(--cel-verde-institucional-tint);
  --primary-muted:       var(--cel-verde-institucional-soft);

  --sidebar-bg:          var(--cel-verde-profundo);
  --sidebar-text:        rgba(255, 255, 255, 0.62);
  --sidebar-active-bg:   rgba(72, 132, 120, 0.28);
  --sidebar-active-text: var(--cel-blanco);
  --sidebar-hover:       rgba(255, 255, 255, 0.06);

  --bg:                  #f7f8f7;
  --bg-card:             var(--cel-blanco);
  --border:              rgba(4, 37, 35, 0.12);
  --border-light:        rgba(4, 37, 35, 0.07);
  --text:                var(--cel-verde-profundo);
  --text-secondary:      rgba(4, 37, 35, 0.66);
  --text-muted:          rgba(4, 37, 35, 0.45);

  --font:                var(--cel-font-family);
}

/* Acento cálido (beige) disponible como detalle de soporte cuando aplique */
.cel-accent-warm { color: var(--cel-beige); }

/* ============================================================================
   Capa editorial + tecnológica (IA)
   - Editorial: inspirado en celaque.net (fondo cálido, sombras muy suaves,
     versalitas con tracking, esquinas limpias, mucho aire).
   - Tecnológica: acento aqua/agéntico que representa la plataforma de IA,
     usado con mesura sobre la base verde institucional.
   ========================================================================== */
:root {
  /* Acentos tecnológicos / agénticos */
  --cel-ai-cyan: #1FD1BD;          /* aqua tecnológico (vida del agente) */
  --cel-ai-cyan-bright: #4DEAD6;
  --cel-ai-blue: #3FA7FF;          /* azul de datos */
  --cel-ai-gradient: linear-gradient(140deg, #042523 0%, #0b554d 58%, #1FD1BD 145%);
  --cel-ai-line: linear-gradient(90deg, var(--cel-verde-institucional), var(--cel-ai-cyan));
  --cel-ai-glow: 0 0 0 3px rgba(31, 209, 189, 0.18);

  /* Refinamiento editorial del tema base */
  --bg:           #f4f3ef;         /* crema cálido (como el sitio) */
  --border:       rgba(4, 37, 35, 0.10);
  --border-light: rgba(4, 37, 35, 0.06);
  --shadow-sm:    0 1px 2px rgba(4, 37, 35, 0.04);
  --shadow:       0 1px 3px rgba(4, 37, 35, 0.05);
  --shadow-md:    0 8px 22px rgba(4, 37, 35, 0.06);
  --shadow-lg:    0 18px 44px rgba(4, 37, 35, 0.09);
  --radius-sm:    6px;
  --radius:       9px;
  --radius-lg:    14px;
}

/* Tipografía editorial: versalitas con tracking, títulos firmes */
.nav-section { letter-spacing: 1.8px; }
h1, h2, h3, .cel-heading { letter-spacing: -0.02em; }

/* Sidebar: verde profundo con halo tecnológico sutil + acento agéntico
   en la línea bajo el logo (firma de plataforma de IA). */
.sidebar {
  background:
    radial-gradient(130% 55% at 50% -8%, rgba(31, 209, 189, 0.12), transparent 62%),
    var(--cel-verde-profundo);
}
.sidebar-brand {
  border-bottom: 0;
  position: relative;
}
.sidebar-brand::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px;
  background: var(--cel-ai-line); border-radius: 2px; opacity: 0.85;
}

/* Punto de actividad del agente: aqua con resplandor (representa IA "viva") */
.online-dot {
  background: var(--cel-ai-cyan);
  box-shadow: 0 0 0 3px rgba(31, 209, 189, 0.16), 0 0 9px rgba(31, 209, 189, 0.65);
}

/* Ítem de navegación de Agentes IA: indicador aqua discreto */
.nav-item--ai { position: relative; }
.nav-item--ai::after {
  content: ''; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cel-ai-cyan); box-shadow: 0 0 7px rgba(31, 209, 189, 0.8);
}
body.sidebar-collapsed .nav-item--ai::after { display: none; }

/* Topbar: línea de acento agéntica muy fina (firma de la plataforma) */
.topbar { position: relative; }
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--cel-ai-line); opacity: 0.55;
}

/* Foco accesible con brillo tecnológico en campos clave */
.topbar-search input:focus { box-shadow: var(--cel-ai-glow); }

/* Insignia / chip para estados de IA (uso opcional en plantillas) */
.cel-ai-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: var(--cel-verde-profundo);
  background: rgba(31, 209, 189, 0.14);
  border: 1px solid rgba(31, 209, 189, 0.45);
}
.cel-ai-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cel-ai-cyan); box-shadow: 0 0 7px rgba(31, 209, 189, 0.8);
}

/* ── Logotipo / isotipo ────────────────────────────────────────────────── */
/* El isologo oficial es tinta verde profundo. Sobre fondos oscuros (sidebar,
   panel de login) se muestra en blanco — variación de color autorizada de la
   paleta — mediante filtro, manteniendo proporción y sin deformar. */
.cel-logo { display: block; height: auto; }
.cel-logo--on-dark { filter: brightness(0) invert(1); }

/* ── Componentes de marca recomendados (sistema de diseño) ─────────────── */
.cel-card {
  background: var(--cel-blanco);
  border: var(--cel-border-soft);
  border-radius: var(--cel-radius-lg);
  box-shadow: var(--cel-shadow-soft);
  padding: var(--cel-space-lg);
}
.cel-heading {
  color: var(--cel-verde-profundo);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.cel-text-muted { color: rgba(4, 37, 35, 0.68); }

.cel-button-primary {
  background: var(--cel-verde-profundo);
  color: var(--cel-blanco);
  border: 1px solid var(--cel-verde-profundo);
  border-radius: var(--cel-radius-md);
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
}
.cel-button-primary:hover { background: var(--cel-verde-profundo-hover); }

.cel-button-secondary {
  background: transparent;
  color: var(--cel-verde-profundo);
  border: 1px solid var(--cel-verde-institucional);
  border-radius: var(--cel-radius-md);
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
}

.cel-input {
  border: 1px solid rgba(4, 37, 35, 0.18);
  border-radius: var(--cel-radius-md);
  padding: 12px 14px;
  font-family: var(--cel-font-family);
  color: var(--cel-verde-profundo);
  background: var(--cel-blanco);
}
.cel-input:focus {
  outline: 2px solid rgba(72, 132, 120, 0.28);
  border-color: var(--cel-verde-institucional);
}

/* ── CopiloComercial — panel del asesor en el detalle del chat ─────────── */
.copilot-panel {
  border-top: 1px solid var(--cel-verde-institucional-soft);
  background: var(--cel-verde-institucional-tint);
  padding: 10px 14px;
  max-height: 40vh;
  overflow-y: auto;
}
.copilot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.copilot-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--cel-verde-profundo);
  letter-spacing: 0.02em;
}
.copilot-content { margin-top: 8px; }
.copilot-loading,
.copilot-error {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 0;
}
.copilot-error { color: #b42318; }
.copilot-line {
  font-size: 12.5px;
  color: var(--cel-verde-profundo);
  margin: 4px 0;
  line-height: 1.4;
}
.copilot-chips { margin: 6px 0; display: flex; gap: 6px; flex-wrap: wrap; }
.copilot-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--cel-verde-institucional);
  background: var(--cel-blanco);
  border: 1px solid var(--cel-verde-institucional-soft);
  border-radius: 999px;
  padding: 2px 9px;
}
.copilot-cards { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.copilot-card {
  background: var(--cel-blanco);
  border: 1px solid var(--cel-verde-institucional-soft);
  border-radius: var(--cel-radius-md);
  padding: 10px 12px;
}
.copilot-card-text {
  font-size: 13px;
  color: var(--cel-verde-profundo);
  line-height: 1.45;
}
.copilot-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}