/* ==========================================================================
   BigRay — Design system
   Coherente con PivotRay y el sistema visual del mockup.
   ========================================================================== */

/* ── Variables por defecto (tema DEFAULT) ── */
.br-root {
  --br-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --br-sidebar-w:     68px;
  --br-topbar-h:      44px;
  --br-filterbar-h:   38px;
  --br-radius:        6px;
  --br-radius-lg:     10px;
  --br-transition:    0.15s ease;

  /* Colores base — sobreescritos por BigRayTheme.applyTo() */
  --br-bg:             #ffffff;
  --br-sidebar:        #ffffff;
  --br-topbar:         #ffffff;
  --br-bg-secondary:   #f8fafc;
  --br-bg-tertiary:    #f1f5f9;
  --br-bg-hover:       #f0f4f8;
  --br-border:         rgba(0,0,0,0.08);
  --br-border-strong:  rgba(0,0,0,0.14);
  --br-text:           #1a202c;
  --br-text-secondary: #4a5568;
  --br-text-muted:     #718096;
  --br-accent:         #3b82f6;
  --br-accent-light:   #eff6ff;
  --br-accent-border:  #bfdbfe;
  --br-green:          #3B6D11;
  --br-green-light:    #EAF3DE;
  --br-green-border:   #C0DD97;
  --br-red:            #A32D2D;
}

/* ── Shell ── */
.br-root {
  display: flex;
  width: 100%;
  height: 100%;
  font-family: var(--br-font);
  font-size: 13px;
  background: var(--br-bg-tertiary);
  overflow: hidden;
}

/* ── Sidebar ── */
.br-sidebar {
  width: var(--br-sidebar-w);
  background: var(--br-sidebar);
  border-right: 1px solid var(--br-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 8px;
  gap: 2px;
  flex-shrink: 0;
  overflow-y: auto;
}

.br-sb-item {
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 4px;
  border-radius: var(--br-radius);
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--br-text-muted);
  transition: all var(--br-transition);
  user-select: none;
}

.br-sb-item:hover {
  background: var(--br-bg-hover);
  color: var(--br-text-secondary);
}

.br-sb-item.br-sb-active {
  background: var(--br-blue-light);
  color: var(--br-blue);
  border-color: var(--br-blue-border);
}

.br-sb-icon { font-size: 18px; line-height: 1; }
.br-sb-icon img { width: 22px; height: 22px; object-fit: contain; display: block; }
.br-sb-label { font-size: 9px; font-weight: 500; text-align: center; line-height: 1.2; }

/* ── Main ── */
.br-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* ── Topbar ── */
.br-topbar {
  height: var(--br-topbar-h);
  background: var(--br-topbar);
  border-bottom: 1px solid var(--br-border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
  flex-shrink: 0;
}

.br-module-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--br-text);
  white-space: nowrap;
  margin-right: 6px;
}

.br-persp-bar {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: 1;
  overflow-x: auto;
  padding-bottom: 1px;
}

.br-persp-pill {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--br-border-strong);
  background: var(--br-bg);
  color: var(--br-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--br-transition);
  user-select: none;
}

.br-persp-pill:hover {
  border-color: var(--br-blue);
  color: var(--br-text);
}

.br-persp-pill.br-persp-active {
  background: var(--br-blue-light);
  color: var(--br-blue);
  border-color: var(--br-blue-border);
}

.br-persp-custom {
  border-style: dashed !important;
  color: var(--br-text-muted);
}

.br-persp-custom.br-persp-active {
  background: var(--br-green-light);
  color: var(--br-green);
  border-color: var(--br-green-border);
}

/* ── Filter bar ── */
.br-filterbar {
  height: var(--br-filterbar-h);
  background: var(--br-topbar);
  border-bottom: 1px solid var(--br-border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 6px;
  flex-shrink: 0;
  overflow-x: auto;
}

.br-filter-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--br-border-strong);
  border-radius: 20px;
  font-size: 11px;
  color: var(--br-text-secondary);
  background: var(--br-bg);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--br-transition);
  user-select: none;
}

.br-filter-chip:hover { border-color: var(--br-blue); }
.br-filter-chip.br-active { background: var(--br-blue-light); color: var(--br-blue); border-color: var(--br-blue-border); }
.br-filter-chip-label { font-weight: 500; }

/* ── Content ── */
.br-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

/* ── Empty state ── */
.br-empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.br-empty-state-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.br-empty-bolt {
  width: 48px;
  height: 78px;
  opacity: 0.4;
}

.br-empty-state-msg {
  font-size: 15px;
  color: #9aaab8;
  font-weight: 400;
}

/* ── Layout grid ── */
.br-layout-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  align-items: start;
}

.br-widget-cell {
  min-width: 0;
}

/* ── Widget ── */
.br-widget {
  background: var(--br-bg);
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.br-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--br-border);
  flex-shrink: 0;
}

.br-widget-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--br-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.br-widget-body {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* Widget desvinculado del filtro global */
.br-widget-unlinked {
  border-color: var(--br-border-strong);
  border-style: dashed;
}

/* ── KPI widget ── */
.br-kpi-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.br-kpi-value {
  font-size: 22px;
  font-weight: 500;
  color: var(--br-text);
  line-height: 1.2;
}

.br-kpi-trend {
  font-size: 11px;
  font-weight: 500;
}

.br-kpi-comp {
  font-size: 10px;
  color: var(--br-text-muted);
}

.br-trend-up   { color: var(--br-green); }
.br-trend-down { color: var(--br-red);   }
.br-trend-neutral { color: var(--br-text-muted); }

/* ── Chart widget ── */
.br-chart-body {
  padding: 8px;
  width: 100%;
  height: 100%;
}

/* ── HTML widget ── */
.br-html-body {
  padding: 12px;
  font-size: 12px;
  color: var(--br-text-secondary);
}

/* ── Custom layout ── */
.br-layout-custom {
  position: relative;
}

.br-widget-cell-custom {
  position: relative;
  cursor: default;
}

.br-widget-cell-custom.br-drag-over {
  outline: 2px dashed var(--br-blue);
  border-radius: var(--br-radius-lg);
}

.br-custom-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.br-edit-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--br-bg-secondary);
  border-bottom: 1px solid var(--br-border);
}

.br-drag-handle {
  color: var(--br-text-muted);
  cursor: grab;
  font-size: 14px;
  flex: 1;
}

.br-hide-btn,
.br-link-btn {
  font-size: 14px;
  color: var(--br-text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  transition: color var(--br-transition), background var(--br-transition);
}

.br-hide-btn:hover  { color: var(--br-red);  background: #fff5f5; }
.br-link-btn:hover  { color: var(--br-blue); background: var(--br-blue-light); }
.br-link-btn.br-linked { color: var(--br-blue); }

.br-resize-handle {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 13px;
  color: var(--br-text-muted);
  cursor: se-resize;
  opacity: 0.5;
}

.br-resize-handle:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Alturas de widgets en el grid
   -------------------------------------------------------------------------- */

/* Celdas con rowSpan=1 — widgets KPI */
.br-widget-cell .br-widget .br-kpi-body {
  min-height: 70px;
}

/* Celdas con gráficos — altura fija para que Charba renderice bien */
.br-widget-cell .br-chart-body {
  height: 220px;
}

.br-widget-cell .br-widget-body {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Perspectiva personalizada — placeholder
   -------------------------------------------------------------------------- */
.br-custom-placeholder {
  grid-column: 1 / -1;
  padding: 40px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.br-custom-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  background: var(--br-green-light);
  border: 1px dashed var(--br-green-border);
  border-radius: var(--br-radius-lg);
  font-size: 13px;
  color: var(--br-green);
  max-width: 520px;
  text-align: center;
}

.br-custom-hint i {
  font-size: 20px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   FIX Chart.js: el contenedor directo del canvas debe ser position:relative
   con dimensiones definidas para que el chart pueda calcular su tamaño.
   -------------------------------------------------------------------------- */
.br-widget-body {
  position: relative;
}

.br-widget-cell .br-widget {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   Fix 1 — Altura igual en widgets del mismo row
   align-items: stretch fuerza que todas las celdas de una misma fila
   tengan la misma altura (la del widget más alto del grupo)
   -------------------------------------------------------------------------- */
.br-layout-grid {
  align-items: stretch !important;
}

.br-widget-cell {
  display: flex;
  flex-direction: column;
}

.br-widget-cell .br-widget {
  flex: 1;
}

.br-widget-cell .br-widget-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.br-widget-cell .br-chart-body {
  flex: 1;
  height: auto !important;  /* dejar que crezca con el contenedor */
  min-height: 220px;
}

/* --------------------------------------------------------------------------
   Fix 2 — KPI font-size proporcional al contenedor
   -------------------------------------------------------------------------- */
.br-kpi-body {
  padding: 16px;
  justify-content: center;
  flex: 1;
}

.br-kpi-value {
  font-size: clamp(20px, 3vw, 36px) !important;
}

.br-kpi-label {
  font-size: clamp(11px, 1vw, 13px);
}

/* --------------------------------------------------------------------------
   Contenedor por módulo — ocupa todo el espacio del content
   -------------------------------------------------------------------------- */
.br-module-container {
  width: 100%;
  min-height: 100%;
}

/* ==========================================================================
   Perspectiva Comparativa
   ========================================================================== */

.br-comp-root {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Barra de configuración compartida ── */
.br-comp-config-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--br-bg);
  border-bottom: 1px solid var(--br-border);
  flex-wrap: wrap;
}

.br-comp-config-label {
  font-size: 11px;
  color: var(--br-text-muted);
}

.br-comp-select {
  height: 28px;
  padding: 0 8px;
  font-size: 11px;
  border: 1px solid var(--br-border-strong);
  border-radius: var(--br-radius);
  background: var(--br-bg);
  color: var(--br-text);
  cursor: pointer;
}

/* ── Secciones A / B ── */
.br-comp-section-a {
  background: #EEF5FE;
  border-bottom: 2px solid #B5D4F4;
  padding: 12px 14px;
}

.br-comp-section-b {
  background: #EDF7F2;
  border-bottom: 2px solid #C0DD97;
  padding: 12px 14px;
}

.br-comp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.br-comp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}

.br-comp-badge-a { background: #185FA5; color: #E6F1FB; }
.br-comp-badge-b { background: #3B6D11; color: #EAF3DE; }

.br-comp-filter-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  position: relative;
}

.br-comp-chip {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.br-comp-chip i { font-size: 10px; }
.br-comp-chip-a { background: #E6F1FB; color: #185FA5; border: 0.5px solid #B5D4F4; }
.br-comp-chip-b { background: #EAF3DE; color: #3B6D11; border: 0.5px solid #C0DD97; }
.br-comp-chip:hover { opacity: 0.8; }

.br-comp-add-filter {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  border: 0.5px dashed var(--br-border-strong);
  color: var(--br-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all var(--br-transition);
  user-select: none;
}

.br-comp-add-filter:hover {
  border-color: var(--br-accent);
  color: var(--br-accent);
}

/* Popup selector de filtros */
.br-comp-filter-popup {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 9999;
  background: var(--br-bg);
  border: 1px solid var(--br-border-strong);
  border-radius: var(--br-radius-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 200px;
  max-width: 280px;
  overflow: hidden;
}

.br-comp-filter-search {
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid var(--br-border);
  font-size: 11px;
  outline: none;
  background: var(--br-bg);
  color: var(--br-text);
}

.br-comp-popup-list {
  max-height: 200px;
  overflow-y: auto;
}

.br-comp-popup-item {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--br-text-secondary);
  cursor: pointer;
  transition: background var(--br-transition);
}

.br-comp-popup-item:hover {
  background: var(--br-bg-hover);
  color: var(--br-text);
}

/* ── KPIs ── */
.br-comp-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.br-comp-kpi {
  border-radius: var(--br-radius);
  padding: 8px 10px;
}

.br-comp-kpi-a { background: #ddeafb; }
.br-comp-kpi-b { background: #daf0e5; }

.br-comp-kpi-l {
  font-size: 9px;
  color: var(--br-text-muted);
  margin-bottom: 2px;
}

.br-comp-kpi-v {
  font-size: 18px;
  font-weight: 500;
}

.br-comp-kpi-a .br-comp-kpi-v { color: #185FA5; }
.br-comp-kpi-b .br-comp-kpi-v { color: #3B6D11; }

.br-comp-kpi-d {
  font-size: 9px;
  margin-top: 2px;
}

.br-up { color: #3B6D11; }
.br-dn { color: #A32D2D; }

/* ── Chart wrap ── */
.br-comp-chart-wrap {
  background: var(--br-bg);
  border-radius: var(--br-radius);
  padding: 8px;
  height: 180px;
  position: relative;
}

/* ── Sección diff ── */
.br-comp-diff {
  background: var(--br-bg);
  padding: 14px 16px;
}

.br-comp-diff-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--br-text-secondary);
  margin-bottom: 12px;
}

.br-comp-diff-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.br-comp-diff-card {
  background: var(--br-bg-secondary);
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius);
  padding: 10px 12px;
}

.br-comp-diff-card-l {
  font-size: 11px;
  color: var(--br-text-muted);
  margin-bottom: 6px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.br-comp-diff-vals {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.br-dval-a   { font-size: 13px; font-weight: 600; color: #185FA5; }
.br-dval-b   { font-size: 13px; font-weight: 600; color: #3B6D11; }
.br-dval-sep { font-size: 12px; color: var(--br-text-muted); }

/* Veredicto del KPI card: flecha + porcentaje + quién gana */
.br-comp-diff-verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.br-dval-diff {
  font-size: 14px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.br-dval-diff.br-up { color: #15803d; background: #dcfce7; }
.br-dval-diff.br-dn { color: #b91c1c; background: #fee2e2; }

.br-dval-winner {
  font-size: 12px;
  font-weight: 500;
}
.br-dval-winner-a { color: #185FA5; }
.br-dval-winner-b { color: #3B6D11; }

/* Barras comparativas */
.br-comp-diff-bars-wrap {
  background: var(--br-bg-secondary);
  border-radius: var(--br-radius);
  padding: 12px;
}

.br-comp-diff-bars-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
}

.br-comp-leg-a { color: #185FA5; display: flex; align-items: center; gap: 5px; }
.br-comp-leg-b { color: #3B6D11; display: flex; align-items: center; gap: 5px; }
.br-comp-leg-dot-a { width: 10px; height: 10px; border-radius: 50%; background: #85B7EB; flex-shrink: 0; }
.br-comp-leg-dot-b { width: 10px; height: 10px; border-radius: 50%; background: #97C459; flex-shrink: 0; }

.br-comp-diff-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 3px 0;
}
.br-comp-diff-row:nth-child(odd) { background: rgba(0,0,0,0.02); border-radius: 3px; }
.br-comp-diff-row:last-child { margin-bottom: 0; }

.br-comp-diff-label {
  font-size: 12px;
  color: var(--br-text-secondary);
  width: 80px;
  flex-shrink: 0;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.br-comp-diff-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.br-comp-bar-a { height: 10px; border-radius: 3px; background: #85B7EB; }
.br-comp-bar-b { height: 10px; border-radius: 3px; background: #97C459; }

.br-comp-diff-pct {
  font-size: 12px;
  font-weight: 600;
  min-width: 130px;
  text-align: left;
  flex-shrink: 0;
}

.br-comp-diff-pct.br-up { color: #15803d; }
.br-comp-diff-pct.br-dn { color: #b91c1c; }
.br-comp-diff-pct:not(.br-up):not(.br-dn) { color: var(--br-text-muted); font-weight: 400; }

/* ==========================================================================
   ComparisonWidget
   ========================================================================== */

.br-comp-root {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ── Barra de control ── */
.br-comp-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--br-bg);
  border-bottom: 1px solid var(--br-border);
  flex-wrap: wrap;
}

.br-comp-bar-label {
  font-size: 11px;
  color: var(--br-text-muted);
  white-space: nowrap;
  margin-right: 2px;
}

.br-comp-type-btn {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--br-border-strong);
  background: var(--br-bg);
  color: var(--br-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--br-transition);
}

.br-comp-type-btn:hover { border-color: var(--br-accent); }
.br-comp-type-btn.on    { background: #1a202c; color: #f7fafc; border-color: #1a202c; }

.br-comp-bar-sep {
  flex: 1;
}

.br-comp-val-a,
.br-comp-val-b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.br-comp-val-a { background: #E6F1FB; color: #185FA5; border: 1px solid #B5D4F4; }
.br-comp-val-b { background: #EAF3DE; color: #3B6D11; border: 1px solid #C0DD97; }

.br-comp-sel-inline {
  font-size: 11px;
  border: none;
  background: transparent;
  outline: none;
  cursor: pointer;
  font-weight: 500;
  max-width: 80px;
}

.br-comp-sel-a { color: #185FA5; }
.br-comp-sel-b { color: #3B6D11; }

.br-comp-vs {
  font-size: 12px;
  color: var(--br-text-muted);
  font-weight: 500;
}

/* ── Secciones ── */
.br-comp-section-a {
  background: #EEF5FE;
  border-bottom: 2px solid #B5D4F4;
  padding: 10px 14px;
}

.br-comp-section-b {
  background: #EDF7F2;
  border-bottom: 2px solid #C0DD97;
  padding: 10px 14px;
}

.br-comp-diff {
  background: var(--br-bg);
  padding: 10px 14px;
}

.br-comp-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.br-comp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}

.br-comp-badge-a { background: #185FA5; color: #E6F1FB; }
.br-comp-badge-b { background: #3B6D11; color: #EAF3DE; }

.br-comp-sec-ctx {
  font-size: 10px;
  color: var(--br-text-muted);
}

/* ── KPIs ── */
.br-comp-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 8px;
}

.br-comp-kpi-a,
.br-comp-kpi-b {
  border-radius: var(--br-radius);
  padding: 6px 9px;
}

.br-comp-kpi-a { background: #ddeafb; }
.br-comp-kpi-b { background: #daf0e5; }

.br-comp-kpi-l {
  font-size: 9px;
  color: var(--br-text-muted);
  margin-bottom: 2px;
}

.br-comp-kpi-v {
  font-size: 16px;
  font-weight: 500;
}

.br-comp-kpi-v.ca { color: #185FA5; }
.br-comp-kpi-v.cb { color: #3B6D11; }

.br-comp-kpi-d { font-size: 9px; margin-top: 1px; }

/* ── Diff ── */
.br-comp-diff-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--br-text-secondary);
  margin-bottom: 8px;
}

.br-comp-diff-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 8px;
}

.br-comp-diff-card {
  background: var(--br-bg-secondary);
  border-radius: var(--br-radius);
  padding: 6px 9px;
  border: 1px solid var(--br-border);
}

.br-comp-diff-card-l {
  font-size: 9px;
  color: var(--br-text-muted);
  margin-bottom: 3px;
}

.br-comp-diff-vals {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}

.br-dval-a   { font-size: 12px; font-weight: 500; color: #185FA5; }
.br-dval-b   { font-size: 12px; font-weight: 500; color: #3B6D11; }
.br-dval-sep { font-size: 10px; color: var(--br-text-muted); }
.br-dval-diff { font-size: 11px; font-weight: 500; }

.br-comp-diff-bars-wrap {
  background: var(--br-bg-secondary);
  border-radius: var(--br-radius);
  padding: 8px 10px;
}

.br-comp-diff-bars-legend {
  font-size: 9px;
  color: var(--br-text-muted);
  margin-bottom: 6px;
  display: flex;
  gap: 12px;
}

.br-comp-leg-a,
.br-comp-leg-b {
  display: flex;
  align-items: center;
  gap: 4px;
}

.br-comp-leg-dot-a,
.br-comp-leg-dot-b {
  width: 8px;
  height: 8px;
  border-radius: 1px;
}

.br-comp-leg-dot-a { background: #85B7EB; }
.br-comp-leg-dot-b { background: #97C459; }

.br-comp-diff-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.br-comp-diff-row:last-child { margin-bottom: 0; }

.br-comp-diff-label {
  font-size: 9px;
  color: var(--br-text-secondary);
  width: 70px;
  text-align: right;
  flex-shrink: 0;
}

.br-comp-diff-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.br-comp-bar-a,
.br-comp-bar-b {
  height: 7px;
  border-radius: 1px;
  min-width: 2px;
}

.br-comp-bar-a { background: #85B7EB; }
.br-comp-bar-b { background: #97C459; }

.br-comp-diff-pct {
  font-size: 9px;
  width: 48px;
  text-align: right;
  flex-shrink: 0;
}

.br-up { color: #3B6D11; }
.br-dn { color: #A32D2D; }

.br-comp-chart-wrap {
  background: var(--br-bg);
  border-radius: var(--br-radius);
  padding: 6px;
  height: 160px;
}

.br-comp-chart-wrap > * {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   ComparisonWidget — mejoras
   -------------------------------------------------------------------------- */

/* Separador vertical en barra */
.br-comp-bar-vsep {
  width: 1px;
  height: 20px;
  background: var(--br-border-strong);
  margin: 0 4px;
  flex-shrink: 0;
}

/* Selector de medida */
.br-comp-select-measure {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--br-border-strong);
  background: var(--br-bg);
  color: var(--br-text-primary);
  cursor: pointer;
}

/* Sección diff — fuentes más grandes */
.br-comp-diff-title {
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-bottom: 10px !important;
}

.br-comp-diff-card-l {
  font-size: 11px !important;
}

.br-dval-a,
.br-dval-b {
  font-size: 15px !important;
}

.br-dval-diff {
  font-size: 13px !important;
}

.br-comp-diff-label {
  font-size: 11px !important;
  width: 70px !important;
}

.br-comp-diff-pct {
  font-size: 11px !important;
  width: 52px !important;
}

.br-comp-bar-a,
.br-comp-bar-b {
  height: 9px !important;
}

.br-comp-leg-a,
.br-comp-leg-b {
  font-size: 11px !important;
}

/* --------------------------------------------------------------------------
   Sección diff — mejor visibilidad y separación entre grupos de barras
   -------------------------------------------------------------------------- */

/* Fuentes más grandes */
.br-comp-diff-label {
  font-size: 12px !important;
  width: 80px !important;
  color: var(--br-text-secondary) !important;
}

.br-comp-diff-pct {
  font-size: 12px !important;
  width: 58px !important;
  font-weight: 500 !important;
}

.br-dval-a,
.br-dval-b {
  font-size: 16px !important;
  font-weight: 500 !important;
}

.br-dval-diff {
  font-size: 14px !important;
  font-weight: 500 !important;
}

.br-comp-diff-card-l {
  font-size: 11px !important;
}

.br-comp-diff-title {
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Barras más gruesas para mejor visibilidad */
.br-comp-bar-a,
.br-comp-bar-b {
  height: 10px !important;
  border-radius: 2px !important;
}

/* Agrupación sutil de cada mes — fila con fondo levemente diferente */
.br-comp-diff-row {
  padding: 4px 6px !important;
  border-radius: 4px !important;
  margin-bottom: 2px !important;
  transition: background 0.1s !important;
}

.br-comp-diff-row:nth-child(odd) {
  background: rgba(0, 0, 0, 0.025);
}

.br-comp-diff-row:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* KPIs de sección A y B — fondo blanco */
.br-comp-kpi-a,
.br-comp-kpi-b {
  background: var(--br-bg) !important;
  border: 1px solid var(--br-border) !important;
}

/* ==========================================================================
   BigRay — Unificación de botones al estilo PivotRay
   ========================================================================== */

/* ── Pills de perspectiva ── */
.br-persp-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 28px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 14px !important;
  border: 1px solid var(--br-border-strong) !important;
  background: var(--br-bg) !important;
  color: var(--br-text-secondary) !important;
  cursor: pointer !important;
  transition: background var(--br-transition), border-color var(--br-transition) !important;
  user-select: none !important;
}

.br-persp-pill:hover {
  background: var(--br-bg-hover) !important;
  border-color: #a0aec0 !important;
}

.br-persp-pill.br-persp-active {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  border-color: #93c5fd !important;
}

.br-persp-custom {
  border-style: dashed !important;
}

.br-persp-custom.br-persp-active {
  background: var(--br-green-light) !important;
  color: var(--br-green) !important;
  border-color: var(--br-green-border) !important;
}

/* ── Chips de filtro global ── */
.br-filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 28px !important;
  padding: 0 10px !important;
  background: var(--br-bg) !important;
  border: 1px solid var(--br-border-strong) !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  cursor: pointer !important;
  user-select: none !important;
  white-space: nowrap !important;
  transition: background var(--br-transition), border-color var(--br-transition) !important;
  flex-shrink: 0 !important;
}

.br-filter-chip:hover {
  background: var(--br-bg-hover) !important;
  border-color: #a0aec0 !important;
}

.br-filter-chip.br-open {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}

.br-filter-chip.br-active {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
}

.br-filter-chip-label {
  font-weight: 600 !important;
  color: var(--br-text-muted) !important;
}

.br-filter-chip-value {
  color: var(--br-text-primary) !important;
  max-width: 120px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.br-filter-chip-arrow {
  color: var(--br-text-muted) !important;
  font-size: 10px !important;
}

.br-filter-chip-clear {
  color: var(--br-text-muted) !important;
  font-size: 10px !important;
  cursor: pointer !important;
  padding: 1px 2px !important;
  border-radius: 50% !important;
}

.br-filter-chip-clear:hover {
  background: rgba(0,0,0,0.08) !important;
}

/* ── Botones comparativa — mantener su identidad pero al estilo PivotRay ── */
.br-comp-type-btn {
  height: 28px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 14px !important;
  border: 1px solid var(--br-border-strong) !important;
  background: var(--br-bg) !important;
  color: var(--br-text-secondary) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background var(--br-transition), border-color var(--br-transition) !important;
  user-select: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

.br-comp-type-btn:hover {
  background: var(--br-bg-hover) !important;
  border-color: #a0aec0 !important;
}

.br-comp-type-btn.on {
  background: #1a202c !important;
  color: #f7fafc !important;
  border-color: #1a202c !important;
}

.br-comp-val-a {
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 14px !important;
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  border: 1px solid #93c5fd !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.br-comp-val-b {
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 14px !important;
  background: var(--br-green-light) !important;
  color: var(--br-green) !important;
  border: 1px solid var(--br-green-border) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.br-comp-select-measure {
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 14px !important;
  border: 1px solid var(--br-border-strong) !important;
  background: var(--br-bg) !important;
  color: var(--br-text-primary) !important;
  cursor: pointer !important;
}

/* ── Sidebar items — al estilo PivotRay ── */
.br-sb-item {
  height: 44px !important;
  border-radius: var(--br-radius) !important;
  border: 1px solid transparent !important;
  transition: all var(--br-transition) !important;
}

.br-sb-item:hover {
  background: var(--br-bg-hover) !important;
  border-color: var(--br-border-strong) !important;
}

.br-sb-item.br-sb-active {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  border-color: #93c5fd !important;
}

/* ==========================================================================
   Fix 1 — Bordes entre sidebar y toolbars eliminados
   ========================================================================== */
.br-sidebar {
  border-right: none !important;
}

.br-topbar {
  border-bottom: none !important;
}

.br-filterbar {
  border-bottom: none !important;
}

/* ==========================================================================
   Fix 2 — Botones BigRay al mismo estilo exacto que PivotRay (radius 4px)
   ========================================================================== */
.br-persp-pill {
  border-radius: 4px !important;
  height: 28px !important;
  padding: 0 10px !important;
}

.br-filter-chip {
  border-radius: 4px !important;
  height: 28px !important;
  padding: 0 10px !important;
}

.br-comp-type-btn {
  border-radius: 4px !important;
  height: 28px !important;
  padding: 0 10px !important;
}

.br-comp-val-a,
.br-comp-val-b {
  border-radius: 4px !important;
  height: 28px !important;
  padding: 0 10px !important;
}

.br-comp-select-measure {
  border-radius: 4px !important;
  height: 28px !important;
  padding: 0 10px !important;
}

.br-sb-item {
  border-radius: 4px !important;
}

/* ==========================================================================
   Fix final — pills perspectiva vuelven a su estilo pill redondeado original
   ========================================================================== */
.br-persp-pill {
  border-radius: 20px !important;
  height: auto !important;
  padding: 4px 12px !important;
}

/* --------------------------------------------------------------------------
   Comparativa — chips A y B con sus colores propios
   -------------------------------------------------------------------------- */
.br-comp-chip-a.pr-filter-chip,
.br-comp-chip-a.pr-filter-chip.pr-filter-chip-active {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  border-color: #93c5fd !important;
}

.br-comp-chip-a.pr-filter-chip .pr-fchip-label,
.br-comp-chip-a.pr-filter-chip .pr-fchip-value,
.br-comp-chip-a.pr-filter-chip .pr-fchip-sep,
.br-comp-chip-a.pr-filter-chip .pr-fchip-arrow,
.br-comp-chip-a.pr-filter-chip .pr-fchip-clear,
.br-comp-chip-a.pr-filter-chip .pr-fchip-icon {
  color: #1d4ed8 !important;
}

.br-comp-chip-b.pr-filter-chip,
.br-comp-chip-b.pr-filter-chip.pr-filter-chip-active {
  background: #dcfce7 !important;
  color: #166534 !important;
  border-color: #bbf7d0 !important;
}

.br-comp-chip-b.pr-filter-chip .pr-fchip-label,
.br-comp-chip-b.pr-filter-chip .pr-fchip-value,
.br-comp-chip-b.pr-filter-chip .pr-fchip-sep,
.br-comp-chip-b.pr-filter-chip .pr-fchip-arrow,
.br-comp-chip-b.pr-filter-chip .pr-fchip-clear,
.br-comp-chip-b.pr-filter-chip .pr-fchip-icon {
  color: #166534 !important;
}

.br-main {
  position: relative;
}

.br-global-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.br-loading .br-global-loading-overlay {
  opacity: 1;
  pointer-events: all;
}

.br-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.br-loading-bolt {
  width: 85px;
  height: 132px;
}

.br-loading-text {
  font-size: 14px;
  color: #5a6a7a;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Rayo sombra — siempre visible, da forma al rayo cuando el animado parpadea */
.br-bolt-shadow {
  opacity: 0.5;
}

/* Rayo azul — pulsa con fade simple, el shadow detrás cubre cualquier estado */
.br-bolt-path {
  animation: br-bolt-pulse 1.4s ease-in-out infinite;
}

@keyframes br-bolt-pulse {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}