/* =========================================================
   Helix · Panel V4 — capa de firma (F0)
   Mezcla B+C validada 2026-07-30: glass contenido + firma en
   momentos clave sobre fondo vivo «presente». Reglas duras:
   - El fondo vivo SIEMPRE detrás de superficies de datos.
   - Glow SOLO en lo activo. Texto corrido siempre sólido.
   - reduced-motion => todo estático.
   Depende de helix-tokens.css (--grad-signal, spacing, temas).
   ========================================================= */

/* ---------- Tokens de la capa (por tema) ---------- */
:root {
  --glass-bg: linear-gradient(165deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.34) 100%);
  --glass-border: rgba(10, 10, 10, 0.10);
  --veil: rgba(250, 250, 250, 0.82);
  --blob-opacity: 0.14;
  --strand-opacity: 0.18;

  /* Burbujas del chat (Task 5 — mockup validado en dark; el light se DERIVA
     con la misma pareja de matices a menor alpha, no un gris plano, para que
     el bubble siga leyéndose como "de firma"/"naranja" también de día).
     Ver sección "Chat bubbles — re-piel de firma" más abajo para el porqué
     de cada valor y la verificación de contraste AA. */
  --bubble-ia-bg: linear-gradient(165deg, rgba(0,122,255,0.10), rgba(184,75,255,0.07));
  --bubble-ia-border: rgba(0,122,255,0.18);
  --bubble-alex-bg: linear-gradient(165deg, rgba(255,107,53,0.13), rgba(255,59,48,0.08));
  --bubble-alex-border: rgba(255,107,53,0.22);
  --bubble-lead-bg: var(--bg-elevated);
}
[data-theme="dark"] {
  --glass-bg: linear-gradient(165deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.03) 38%, rgba(255,255,255,0.015) 100%);
  --glass-border: rgba(255, 255, 255, 0.14);
  --veil: rgba(8, 8, 10, 0.72);
  --blob-opacity: 0.30;      /* «presente» de verdad: el shell ya no lo tapa */
  --strand-opacity: 0.34;

  /* Variante B del tablero 31-07 (elección de Alex): superficies OPACAS con
     matiz — los tintes translúcidos al 20% sobre negro leían turbios. El
     azul/naranja sigue distinguiendo bot/manual, ahora como color de
     superficie sólido con hairline a juego. */
  --bubble-ia-bg: #1C2030;
  --bubble-ia-border: #2C3450;
  --bubble-alex-bg: #241C18;
  --bubble-alex-border: #453027;
  --bubble-lead-bg: #1A1A1F;
}

/* ---------- Fondo vivo ---------- */
#helix-bg {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
#helix-bg .bg-blob {
  position: absolute; border-radius: 50%;
  opacity: var(--blob-opacity); filter: blur(14px);
  will-change: transform;
}
#helix-bg .bg-blob-a {
  top: -18vh; left: 12vw; width: 46vw; height: 46vw;
  background: radial-gradient(circle, #007AFF 0%, transparent 64%);
  animation: hx-drift-a 52s var(--ease-out) infinite alternate;
}
#helix-bg .bg-blob-b {
  bottom: -22vh; right: -10vw; width: 52vw; height: 52vw;
  background: radial-gradient(circle, #FF6B35 0%, transparent 64%);
  animation: hx-drift-b 64s var(--ease-out) infinite alternate;
}
#helix-bg .bg-blob-c {
  top: 34%; left: -14vw; width: 38vw; height: 38vw;
  background: radial-gradient(circle, #B84BFF 0%, transparent 64%);
  animation: hx-drift-c 58s var(--ease-out) infinite alternate;
}
#helix-bg .bg-strands { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--strand-opacity); }
@keyframes hx-drift-a { to { transform: translate(5vw, 4vh); } }
@keyframes hx-drift-b { to { transform: translate(-6vw, -4vh); } }
@keyframes hx-drift-c { to { transform: translate(6vw, -5vh); } }

/* El shell SIEMPRE por encima del fondo */
#helix-root { position: relative; z-index: 1; }

/* Amortiguación por pantalla: los datos mandan (spec §4). */
body[data-screen="insights"] #helix-bg,
body[data-screen="campaigns"] #helix-bg { opacity: 0.55; }
body[data-screen="admin"] #helix-bg { opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
  #helix-bg .bg-blob { animation: none; }
}

/* ---------- Utilidades de firma ---------- */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.sig-underline { position: relative; }
.sig-underline::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 38px; height: 2px; border-radius: 2px;
  background: var(--grad-signal);
}
.sig-num {
  background: var(--grad-signal);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.glow-active {
  box-shadow: 0 6px 28px rgba(184, 75, 255, 0.14), 0 2px 10px rgba(0, 122, 255, 0.10);
}

/* ---------- Skeleton (lo usa Task 5) ---------- */
.hx-skeleton { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.hx-skeleton .sk-row {
  height: 58px; border-radius: 12px;
  background: linear-gradient(100deg,
    rgba(127,127,127,0.10) 40%, rgba(127,127,127,0.20) 50%, rgba(127,127,127,0.10) 60%);
  background-size: 200% 100%;
  animation: hx-shimmer 1.2s linear infinite;
}
@keyframes hx-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .hx-skeleton .sk-row { animation: none; } }


/* ── Re-piel de navegación (Task 3) · estados activos con tinte de firma ──
   Vive AQUÍ (última hoja en cargar) y con prefijo .helix-app para ganarle el
   cascade a helix-layout.css:199 (.helix-app .helix-sidebar-item.is-active),
   que declara background/color planos con especificidad (0,3,0). */
.helix-app .helix-sidebar-item.is-active,
.helix-app .helix-bottom-nav-item.is-active {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.16) 0%, rgba(184, 75, 255, 0.12) 100%);
  color: var(--text-1);
}
[data-theme="dark"] .helix-app .helix-sidebar-item.is-active,
[data-theme="dark"] .helix-app .helix-bottom-nav-item.is-active {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.28) 0%, rgba(184, 75, 255, 0.20) 100%);
  color: var(--text-1);
}

/* ── Panes del shell (Task 5): solo el activo se ve; el resto conserva su DOM ── */
#helix-panes { display: contents; }
.helix-tab-pane { display: none; }
.helix-tab-pane.is-active { display: block; min-height: 100%; }

/* ── Destape del fondo vivo (fix post-F0, 2026-07-30) ──
   helix-layout.css pinta el shell/sidebar/topbar/headers con fondos OPACOS
   (var(--bg-page)/(--bg-elevated)) y tapaba el #helix-bg por completo: el
   «fondo presente» de la spec era invisible en producción. Aquí (última hoja,
   gana el cascade) esas superficies pasan a velo translúcido + blur. El texto
   sigue sobre --veil (≈72-82% del fondo del tema): el contraste AA se mantiene. */
.helix-app .helix-shell { background: transparent; }
.helix-app .helix-workspace { background: transparent; }
.helix-app .helix-topbar {
  background: var(--veil);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.helix-app .helix-mobile-header {
  background: var(--veil);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.helix-app .helix-sidebar {
  background: var(--veil);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.helix-app .helix-bottom-nav {
  background: var(--veil);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
/* Contenedores grandes del master-detail: velo SIN blur (coste GPU) para que
   el fondo respire también bajo la lista y el panel de detalle. */
.helix-app .helix-split-detail { background: transparent; }
.helix-app .helix-shell.inbox-active .helix-content { background: var(--veil); }
.helix-app .helix-lead-detail { background: var(--veil); }
/* El tapón real: .helix-app (helix-tokens.css:236) pinta var(--bg-page) opaco
   DENTRO de #helix-root, encima del fondo vivo. El fondo de página ya lo dan
   html/body (detrás de #helix-bg) — aquí sobra. */
.helix-app { background: transparent; }

/* ── Bandeja viva (F1a): dot en vivo, no-leídos, chips de etiqueta ── */
.helix-live-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  background: var(--text-3); opacity: .5; margin-right: 8px; }
.helix-live-dot[data-on="1"] { background: #4ADE80; opacity: 1;
  box-shadow: 0 0 8px rgba(74, 222, 128, .6); }
.hx-unread { min-width: 18px; height: 18px; border-radius: 999px; padding: 0 5px;
  background: var(--grad-signal); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.hx-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px;
  padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border-1);
  color: var(--text-2); }
.hx-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, #8E8E93); }

/* Fila con mensajes sin leer (.helix-lead-row, helix-components.js::helixLeadRow):
   nombre en negrita (patrón WhatsApp/Gmail). El nombre lleva font-weight INLINE
   (SIZES por densidad) — hace falta !important para ganarle, mismo patrón que
   ya usa helix-components.css:51-52 para lo mismo. */
.helix-app .helix-lead-row.is-unread .helix-row-name { font-weight: 700 !important; }

/* Picker de etiquetas custom (helix-chat.js::helixOpenEtiquetasCustomPicker):
   fila de etiqueta asignada (toggle) + swatch de color de la paleta de 8. */
.helix-app .helix-sheet-action.is-on { background: var(--accent-bg); }
.hx-color-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0; }
.hx-color-dot.is-on { border-color: var(--text-1); }

/* =========================================================
   Chat bubbles — re-piel de firma (Panel V4 · F1b · Task 5)
   Mockup validado: bot = tinte azul-violeta de firma con esquina inferior
   derecha recta; «a mano» (fuente=alex) = tinte naranja + el sello "a mano"
   ya existente (.helix-status-manual, helix-components.css — sin tocar);
   lead = neutra. Tope min(62%, 460px) (D5, antes 75%). Los --bubble-* de
   arriba (:root/[data-theme=dark]) ya son theme-aware: dark = valores
   EXACTOS del mockup; light DERIVA los mismos matices a menor alpha (no un
   gris plano) para que la burbuja siga leyéndose "de firma"/"naranja" de
   día. Contraste --text-1 sobre el fondo efectivo (tinte + --veil detrás):
   >8:1 en el peor caso calculado (dark, alex) y >14:1 en el mejor (light) —
   AA de sobra en los 6 pares tema×variante.
   ========================================================= */
.helix-app .helix-chat-bubble {
  max-width: min(62%, 460px);
}
.helix-app .helix-chat-bubble--lead {
  background: var(--bubble-lead-bg);
  border: 1px solid var(--glass-border);
  box-shadow: none;
}
.helix-app .helix-chat-bubble--ia {
  background: var(--bubble-ia-bg);
  border: 1px solid var(--bubble-ia-border);
  box-shadow: none;
  /* Esquina inferior derecha recta — el mockup la reserva para el bot. La
     burbuja "a mano" de al lado queda con las 4 esquinas redondas a
     propósito (no repetir el gesto: ya la distingue el tinte + el sello). */
  border-bottom-right-radius: 4px;
}
.helix-app .helix-chat-bubble--alex {
  background: var(--bubble-alex-bg);
  border: 1px solid var(--bubble-alex-border);
  box-shadow: none;
  /* Reset del acento-bandera del F0 (border-left de 2px + padding-left:18px
     + doble box-shadow): el tinte naranja de cuerpo entero ya distingue esta
     burbuja — la bandera lateral quedaba redundante y descentraba el texto.
     padding-left vuelve al valor base de .helix-chat-bubble (16px). */
  padding-left: 16px;
}

/* ---------- Lightbox de imagen entrante (Task 5) ----------
   Overlay fixed con la imagen a tamaño ajustado + descarga + cierre por
   clic fuera/Escape (helix-chat.js::helixAbrirLightboxImagen). Sin librerías. */
.helix-app .helix-chat-media-img {
  max-width: 220px; max-height: 280px;
  border-radius: 10px; display: block; object-fit: cover;
  cursor: zoom-in;
}
.helix-lightbox-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.82);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: helix-lightbox-in 160ms var(--ease-out);
}
@keyframes helix-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.helix-lightbox-img {
  max-width: 92vw; max-height: 82vh;
  border-radius: 12px; display: block;
  box-shadow: var(--shadow-3);
}
.helix-lightbox-actions { position: absolute; top: 20px; right: 20px; display: flex; gap: 10px; }
.helix-lightbox-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.12); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  cursor: pointer; text-decoration: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.helix-lightbox-btn:hover { background: rgba(255, 255, 255, 0.22); }
@media (prefers-reduced-motion: reduce) {
  .helix-lightbox-backdrop { animation: none; }
}

/* ---------- Audio player custom (Task 5) ----------
   El <audio> real queda oculto (display:none inline en el markup, motor
   único — helix-chat.js::helixWireAudioPlayer); esto SOLO pinta la piel:
   botón circular play/pausa con gradiente de firma, barra de progreso,
   duración y velocidad cíclica ×1/1.5/2. */
.helix-audio-player { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 260px; padding: 2px 0; }
.helix-audio-play {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-signal); color: #fff;
}
.helix-audio-play svg { position: relative; left: 1px; } /* óptico: el triángulo de "play" centra mejor 1px a la derecha */
.helix-audio-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.helix-audio-track { height: 4px; border-radius: 2px; background: var(--border-1); cursor: pointer; overflow: hidden; }
.helix-audio-progress { height: 100%; width: 0%; background: var(--grad-signal); border-radius: 2px; }
.helix-audio-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.helix-audio-time { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.helix-audio-speed {
  font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--bg-sunken);
  border: 1px solid var(--border-1); border-radius: 999px; padding: 2px 8px; cursor: pointer;
  font-family: var(--font-sans);
}
.helix-audio-speed:hover { color: var(--text-1); }

/* ---------- Filas de bandeja — B «sólido premium» translúcido ----------
   Variante B elegida por Alex (31-07, tablero de variantes) con su matiz:
   «cada lead algo translúcido». Superficie nítida estilo gethelix.es a
   ~80% de opacidad (el fondo vivo respira detrás, SIN backdrop-filter:
   blur por-fila con 50-100+ filas es un anti-patrón de rendimiento). El
   gradiente de firma queda solo donde hay señal: anillo degradado en la
   fila con no-leídos (::before enmascarado — compatible con fondo
   translúcido, un border-image no lo sería) y el contador .hx-unread.
   La franja de calor deja de ser barra de altura completa (el «filete
   blanco» de Frío #8E8E93 en oscuro) y pasa a punto de 7px en flujo. */
:root {
  --row-bg: rgba(255, 255, 255, 0.72);
  --row-border: rgba(10, 10, 10, 0.09);
  --row-border-hover: rgba(10, 10, 10, 0.18);
  --row-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  --chip-fu-bg: rgba(0, 122, 255, 0.10);
  --chip-fu-text: #3D6FD6;
}
[data-theme="dark"] {
  --row-bg: rgba(23, 23, 28, 0.80);
  --row-border: rgba(255, 255, 255, 0.10);
  --row-border-hover: rgba(255, 255, 255, 0.18);
  --row-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);
  --chip-fu-bg: rgba(0, 122, 255, 0.14);
  --chip-fu-text: #93B9FF;
}
.helix-app .helix-lead-row {
  background: var(--row-bg);
  border: 1px solid var(--row-border);
  border-radius: 14px;
  margin: 0 10px 8px;
  box-shadow: var(--row-shadow);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.helix-app .helix-lead-row:first-child { margin-top: 10px; }
.helix-app .helix-lead-row:hover {
  border-color: var(--row-border-hover);
  transform: translateY(-1px);
}
.helix-app .helix-lead-row.is-active {
  border-color: var(--accent);
  background: var(--accent-bg);
}
/* Anillo degradado de firma en filas con no-leídos: overlay enmascarado a
   solo-borde — funciona sobre fondo translúcido sin teñir el interior. */
.helix-app .helix-lead-row.is-unread::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 15px;
  padding: 1px;
  background: var(--grad-signal);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* Franja de calor → punto de 7px en flujo (deja de tapar el borde curvo). */
.helix-app .helix-row-stripe {
  position: static;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
}
.helix-app .helix-row-stripe.hx-heat-frio { opacity: 0.5; }
/* Badges de fila unificados en píldoras tintadas (solo dentro de la fila —
   .helix-tag se usa en más pantallas y ahí no se toca). */
.helix-app .helix-lead-row .helix-tag--neutral {
  background: var(--chip-fu-bg);
  color: var(--chip-fu-text);
}

/* ---------- Header y composer del lead detail: veil (Task 5) ----------
   helix-screens.css pinta header/context-bar/actionbar/input-bar con fondo
   OPACO (--bg-elevated) — eran los únicos tramos del chat que aún tapaban
   el fondo vivo (.helix-lead-detail y el transcript ya heredan --veil desde
   el fix post-F0 de arriba). Mismo tratamiento que .helix-topbar/
   .helix-mobile-header: veil + blur — AA ya probado con esos mismos tokens
   para contenido equivalente (nombre, teléfono, labels, iconos). */
.helix-app .helix-lead-detail-header,
.helix-app .helix-lead-context-bar,
.helix-app .helix-lead-detail-actionbar,
.helix-app .helix-lead-detail-input-bar,
.helix-app .helix-composer-preview {
  background: var(--veil);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* Enviar: gradiente de firma (spec §5.3) en vez del azul plano. */
.helix-app .helix-lead-detail-send,
.helix-app .helix-lead-detail-send:hover {
  background: var(--grad-signal);
  color: #fff;
}
.helix-app .helix-lead-detail-send:hover {
  filter: brightness(1.08);
}

/* =========================================================
   Composer: clip + grabadora (Panel V4 · F1b · Task 4)
   Preview de archivo (imagen/audio/vídeo/documento) antes de enviar + fila
   de grabación de audio — ninguna de las dos destruye los nodos normales
   del input-bar (textarea/attach/mic/send siguen bindeados por
   helix-chat.js); ambas se muestran/ocultan por CSS. El progreso de subida
   reutiliza el LENGUAJE visual de .helix-audio-track/.helix-audio-progress
   (arriba) con clases propias — aquí la barra no es seekable (sin
   cursor:pointer heredado).
   ========================================================= */
.helix-app .helix-composer-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--glass-border);
}
.helix-app .helix-composer-preview[hidden] { display: none; }
.helix-composer-preview-thumb {
  flex: none; width: 44px; height: 44px; border-radius: 8px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--bg-sunken); color: var(--text-3);
}
.helix-composer-preview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.helix-composer-preview-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.helix-composer-preview-name {
  font-size: 12px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.helix-composer-preview-caption {
  width: 100%; border: 1px solid var(--border-1); background: var(--bg-sunken);
  border-radius: 10px; padding: 6px 10px; font-size: 13px;
  font-family: var(--font-sans); color: var(--text-1);
}
.helix-composer-preview-caption:focus { outline: none; border-color: var(--accent); }
.helix-composer-progress-track {
  height: 4px; border-radius: 2px; background: var(--border-1); overflow: hidden;
}
.helix-composer-progress-track[hidden] { display: none; }
.helix-composer-progress-fill {
  height: 100%; width: 0%; background: var(--grad-signal); border-radius: 2px;
  transition: width 120ms linear;
}

/* Fila de grabación: sustituye VISUALMENTE attach/textarea/mic/send mientras
   graba — los nodos no se destruyen, .is-recording solo alterna display
   (helix-composer.js nunca reescribe el innerHTML del bar). */
.helix-composer-recording {
  display: none; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.helix-app .helix-lead-detail-input-bar.is-recording .helix-composer-recording {
  display: flex;
}
.helix-app .helix-lead-detail-input-bar.is-recording > .helix-composer-btn,
.helix-app .helix-lead-detail-input-bar.is-recording > .helix-lead-detail-input,
.helix-app .helix-lead-detail-input-bar.is-recording > .helix-lead-detail-send {
  display: none;
}
.helix-rec-dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: #FF3B30;
  animation: helix-rec-pulse 1.4s ease-in-out infinite;
}
@keyframes helix-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .helix-rec-dot { animation: none; } }
.helix-rec-time { flex: 1; font-size: 14px; color: var(--text-1); }

/* Embudo (tablero, 2026-08-16): datos mandan, mismo trato que Insights. */
body[data-screen="embudo"] #helix-bg { opacity: 0.55; }