/* ============================================================
   Panel P01 · capa "Chrome navy" (2026-06-01) · ADITIVA sobre _styles.css
   Re-estiliza la navegación EXISTENTE (.topbar + .panel-nav.app-nav +
   .panel-subnav + .context-bar) al look navy de opcion_C, SIN tocar markup
   ni IDs ni JS. Aplica a las 6 apps que comparten estas clases.
   Estructura visual resultante:
     fila 1 (navy) = .topbar  ·  fila 2 (navy) = .app-nav (6 apps · tab activo naranja)
     sub-barra      = .panel-subnav + .context-bar (vistas del app + periodo)
   ============================================================ */

/* --- Fila 1 · topbar navy glass --- */
.topbar{
  background:rgba(10,22,40,.92)!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06)!important;
  box-shadow:none!important;
}
.topbar .bn{ color:#fff!important; }
.topbar .bs{ color:rgba(255,255,255,.5)!important; }
.topbar .av{ background:linear-gradient(120deg,#F0A500,#E85D04 60%)!important; box-shadow:none!important; }
.topbar .user-chip{ background:rgba(255,255,255,.07)!important; border-color:rgba(255,255,255,.13)!important; }
.topbar .user-chip-name{ color:#fff!important; }
.topbar .user-chip-logout{ color:rgba(255,255,255,.7)!important; }
.topbar .user-chip-logout:hover{ color:#fff!important; }
.topbar .theme-toggle{ border-color:rgba(255,255,255,.16)!important; background:rgba(255,255,255,.06)!important; color:rgba(255,255,255,.78)!important; }
.topbar .theme-toggle:hover{ background:rgba(255,255,255,.12)!important; color:#fff!important; }

/* --- Fila 2 · app-nav navy con tabs (6 apps) · barra plana de ancho completo (no pildora) --- */
.panel-nav.app-nav{
  background:rgba(10,22,40,.92)!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:0!important; border-bottom:1px solid var(--border)!important;
  border-radius:0!important;
  width:auto!important; margin:0!important;
  gap:2px!important; box-shadow:none!important;
}
.app-nav .panel-nav-link{
  color:rgba(255,255,255,.6)!important;
  background:none!important; border:0!important;
  border-bottom:2px solid transparent!important;
  border-radius:0!important; margin-bottom:-1px;
  font-weight:500; transition:color .12s;
}
.app-nav .panel-nav-link:hover{ color:#fff!important; background:none!important; }
.app-nav .panel-nav-link.on{ color:#fff!important; background:none!important; border-bottom-color:var(--orange)!important; }
.app-nav .panel-nav-link .nav-badge{ background:var(--orange)!important; color:#fff!important; border-color:transparent!important; }

/* --- Sub-barra · subnav + context-bar (vistas del app + periodo) --- */
.panel-subnav, .context-bar{
  background:var(--bg-subtle)!important;
  border-bottom:1px solid var(--border-soft)!important;
}
.panel-subnav-link{
  color:var(--text-muted)!important; background:none!important;
  border-bottom:2px solid transparent!important; border-radius:0!important;
}
.panel-subnav-link:hover{ color:var(--text)!important; background:none!important; }
.panel-subnav-link.on{ color:var(--text)!important; background:none!important; border-bottom-color:var(--orange)!important; }
.panel-subnav-link .nav-badge{ background:var(--orange)!important; color:#fff!important; border-color:transparent!important; }

/* periodo: pill activo naranja-tenue para coherencia */
.period-selector .db.on{ color:var(--text)!important; }

/* --- conversation.html (detalle): header navy + back-link --- */
.conv-header{
  background:rgba(10,22,40,.92)!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06)!important; box-shadow:none!important;
}
.conv-header .bn{ color:#fff!important; }
.conv-header .bs{ color:rgba(255,255,255,.5)!important; }
.conv-header .av{ background:linear-gradient(120deg,#F0A500,#E85D04 60%)!important; box-shadow:none!important; }
.conv-header .user-chip{ background:rgba(255,255,255,.07)!important; border-color:rgba(255,255,255,.13)!important; }
.conv-header .user-chip-name{ color:#fff!important; }
.conv-header .theme-toggle{ border-color:rgba(255,255,255,.16)!important; background:rgba(255,255,255,.06)!important; color:rgba(255,255,255,.78)!important; }
.back-link{ color:#66D4E5!important; }

/* --- Pulido de componentes · todas las apps (hover glow + números mono) --- */
.kpi,.kpi-cell,.kpi-card,.card,.product-card,.hub-card,.channel-card{ transition:border-color .2s,transform .2s,box-shadow .2s; }
.kpi:hover,.kpi-cell:hover,.kpi-card:hover,.hub-card:hover,.channel-card:hover{
  border-color:var(--cyan)!important;
  box-shadow:0 0 0 1px rgba(77,184,199,.28),0 12px 32px rgba(123,97,255,.14)!important;
  transform:translateY(-2px);
}
.kv,.kpi-val,.kpi-value{ font-family:"JetBrains Mono","Fira Code",monospace; font-variant-numeric:tabular-nums; }
/* mapeo de modificadores a la semántica de marca (ads/leads) */
.kpi-value.good,.kpi-trend.up{ color:var(--green)!important; }
.kpi-value.accent{ color:var(--purple)!important; }

/* --- Terminal "rai_actividad.log" (dashboard WhatsApp) · datos reales --- */
.term{background:#060E1A;border:1px solid var(--border);border-radius:12px;overflow:hidden;font-family:"JetBrains Mono","Fira Code",monospace;position:relative;margin-bottom:16px;}
.term::after{content:"";position:absolute;inset:0;border-radius:12px;padding:1px;background:linear-gradient(100deg,#5b7cff,#7B61FF 45%,#4DB8C7 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.45;pointer-events:none;}
.term-bar{background:#0d1622;padding:9px 13px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;font-size:11px;color:#7c8794;}
.term .tdot{width:10px;height:10px;border-radius:50%;}.term .tdot.r{background:var(--coral);}.term .tdot.y{background:var(--amber);}.term .tdot.g{background:var(--green);}
.term-body{padding:14px 16px;font-size:12.5px;line-height:1.85;color:#cdd6df;}
.term-body .line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.term-body .dim{color:#6b7682;}.term-body .ai{color:#A897E2;}.term-body .warn{color:var(--amber);}.term-body .ok{color:var(--green);}
.term-cursor{display:inline-block;width:7px;height:13px;background:#66D4E5;vertical-align:middle;animation:rfaBlinkC 1.1s step-end infinite;}
@keyframes rfaBlinkC{50%{opacity:0;}}
@media (prefers-reduced-motion:reduce){.term-cursor{animation:none;}}

/* ============================================================
   SKIN opcion_C · transforma los COMPONENTES del cuerpo al lenguaje visual
   de opcion_C_panel_calmado (KPIs mono grandes, cards aireadas, labels mono).
   Cargado al final → gana sobre _styles.css. 2026-06-01.
   ============================================================ */
:root{ --jbm:"JetBrains Mono","Fira Code",monospace; }

/* --- Chrome más compacto (2 filas + subbar, no 4 barras altas) --- */
.topbar{ padding:10px 28px!important; }
.panel-nav.app-nav{ padding:0 28px!important; }
.app-nav .panel-nav-link{ padding:11px 14px!important; font-size:13.5px; }
.panel-subnav{ padding:0 28px!important; }
.panel-subnav-link{ padding:10px 13px!important; }
.context-bar{ padding:10px 28px!important; }

/* --- KPIs estilo opcion_C: mono grande, card aireada, label mono mayúsculas --- */
.kpis, .kpis-4{ gap:16px!important; padding:20px 28px 4px!important; }
.kpi{ border-radius:14px!important; padding:18px!important; box-shadow:none!important; gap:4px!important; }
.kpi .kv{ font-family:var(--jbm)!important; font-size:33px!important; font-weight:700!important; letter-spacing:.01em!important; line-height:1!important; margin-top:2px; }
.kpi .kl{ font-family:var(--jbm)!important; font-size:11px!important; letter-spacing:.05em!important; text-transform:uppercase!important; color:var(--text-muted)!important; order:-1; }
.kpi-head{ align-items:flex-start!important; }
.kpi-spark{ margin-top:8px; }

/* --- Layout dashboard estilo opcion_C: [terminal | rendimiento] --- */
.grid2-dash{ display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin-bottom:16px; }
.grid2-dash .term{ margin-top:0; order:-1; }   /* terminal a la izquierda, más ancho */
.grid2-dash .contract-bar{ margin:0; }
@media(max-width:900px){ .grid2-dash{ grid-template-columns:1fr; } }
.conv-full{ width:100%; }

/* KPIs compactos como opcion_C (ocultar caja sparkline vacía) */
.kpi-spark{ display:none!important; }

/* Cabecera del dashboard · eyebrow + título (como opcion_C) */
.dash-head{ padding:18px 28px 2px; }
.dash-head .eyebrow{ display:inline-flex; align-items:center; gap:8px; }
.dash-head .lvdot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-bg); }
.dash-head h1{ margin:6px 0 0; font-size:24px; font-weight:600; letter-spacing:-.018em; color:var(--text-strong); }

/* --- Cuerpo y cards: aireado + radius 14 --- */
.body{ padding:20px 28px 48px!important; }
.contract-bar,.section,.triage-strip,.pending-col,.conv-col,.conv-list-pane,.conv-chat-pane{ border-radius:14px!important; }
.contract-bar{ padding:18px!important; }
.section-eyebrow{ font-family:var(--jbm)!important; color:var(--cyan)!important; text-transform:uppercase!important; letter-spacing:.06em!important; font-size:11px!important; }
.section-title{ font-weight:600!important; letter-spacing:-.01em; }
.dashboard{ max-width:1280px; }

/* --- triage chips estilo pill mono --- */
.triage-strip{ padding:12px 18px!important; }
.tchip-num{ font-family:var(--jbm)!important; }

/* --- KPIs de ads/leads (clases propias) al mismo lenguaje --- */
.kpi-cell,.kpi-card{ border-radius:14px!important; padding:18px!important; }
.kpi-val,.kpi-value{ font-family:var(--jbm)!important; font-size:30px!important; font-weight:700!important; line-height:1!important; }
.kpi-label{ font-family:var(--jbm)!important; text-transform:uppercase!important; letter-spacing:.05em!important; font-size:11px!important; color:var(--text-muted)!important; }
.kpi-sub{ font-size:12px!important; color:var(--text-dim)!important; }

/* el chrome por encima del flujo (refuerza la regla de _flujo.css) */
.topbar,.panel-nav,.panel-subnav,.context-bar,.conv-header,.back-link{ position:relative; z-index:2; }

/* ============================================================
   Vista "Conversaciones" (body.mode-conv · hash #conversaciones)
   Misma pagina del dashboard, enfocada al buzon (como opcion_C):
   oculta KPIs / cabecera / fila Rendimiento+terminal y deja el buzon
   a ancho y alto completo. 2026-06-01.
   ============================================================ */
body.mode-conv .dash-head,
body.mode-conv .kpis,
body.mode-conv .kpis-4,
body.mode-conv .grid2-dash{ display:none!important; }
body.mode-conv .body{ padding:18px 28px 16px!important; }
/* buzon ocupa el alto de la ventana · el scroll vive DENTRO de las panes, no en la pagina */
body.mode-conv .conv-full{ height:calc(100vh - 250px); min-height:0; }
body.mode-conv .conv-full .conv-split{ flex:1; min-height:0; height:auto; max-height:none; }
/* el periodo (Hoy/7d/30d) solo afecta KPIs · ocultarlo en vista buzon */
body.mode-conv .period-selector{ display:none!important; }

/* Dashboard (SIN mode-conv): el buzon es SOLO lista · ver la conversacion vive en la
   seccion Conversaciones · click en un item salta a #conversaciones y la abre alli */
body:not(.mode-conv) .conv-full .conv-split{ grid-template-columns:1fr!important; }
body:not(.mode-conv) .conv-full .conv-chat-pane{ display:none!important; }
body:not(.mode-conv) .conv-full .conv-list-pane{ border-right:none!important; }