/* ════════════════════════════════════════════════════════════════════════════
   dashboard.css — Dashboard ejecutivo premium (rediseño fiel al mock).
   Reglas:
   - Color = lenguaje: tokens --dash-* (claro/oscuro) en styles.css. Cada componente
     hereda su acento vía las vars locales --c / --c-soft / --c-border / --c-text,
     asignadas una sola vez por acento en el bloque "Acentos semánticos".
   - Halo de color (premium dark) via --dash-glow-strength + color-mix (0% en claro).
   - Hex sueltos = SOLO data-viz (heatmap, barras de plataforma) — excepción de estado.
   ════════════════════════════════════════════════════════════════════════════ */

.dash-container { padding-bottom: 3rem; }

/* ── Acentos semánticos: un mapeo, todos los componentes ─────────────────── */
.hero-fact--danger, .attn-card--danger, .pulse-card--danger, .pqrs-stat--danger,
.stock-mini--danger, .ai-conversion-rate--danger
  { --c: var(--dash-danger);  --c-soft: var(--dash-danger-soft);  --c-border: var(--dash-danger-border);  --c-text: var(--dash-danger-text); }
.hero-fact--warning, .attn-card--warning, .pulse-card--warning, .stock-mini--warning,
.ai-conversion-rate--warning
  { --c: var(--dash-warning); --c-soft: var(--dash-warning-soft); --c-border: var(--dash-warning-border); --c-text: var(--dash-warning-text); }
.hero-fact--success, .attn-card--success, .pulse-card--success, .pqrs-stat--success,
.stock-mini--success, .ai-conversion-rate--success
  { --c: var(--dash-success); --c-soft: var(--dash-success-soft); --c-border: var(--dash-success-border); --c-text: var(--dash-success-text); }
.hero-fact--info, .attn-card--info, .pulse-card--info
  { --c: var(--dash-info);    --c-soft: var(--dash-info-soft);    --c-border: var(--dash-info-border);    --c-text: var(--dash-info-text); }
.hero-fact--violet, .attn-card--violet, .pulse-card--violet
  { --c: var(--dash-violet);  --c-soft: var(--dash-violet-soft);  --c-border: var(--dash-violet-border);  --c-text: var(--dash-violet-text); }
.pulse-card, .pqrs-stat { --c: var(--dash-info); --c-soft: var(--dash-info-soft); --c-border: var(--dash-info-border); --c-text: var(--dash-info-text); }

/* ── Cabecera de página + selector de período ───────────────────────────── */
.dash-toolbar { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; }
.dash-page-title { margin: 0; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.01em; color: var(--color-text-strong); }
.dash-subtitle { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--color-text-tertiary); }
.dash-toolbar-right { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
.period-selector { display: inline-flex; gap: 0; border: 1px solid var(--dash-card-border); border-radius: var(--radius-pill); padding: 3px; background: var(--dash-card-bg); }
.period-btn { padding: 0.35rem 0.95rem; border: none; border-radius: var(--radius-pill); background: transparent; cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--color-text-tertiary); transition: background 0.15s, color 0.15s; }
.period-btn.active { background: var(--color-primary); color: var(--color-primary-contrast); }
.dash-range-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.85rem; border: 1px solid var(--dash-card-border); border-radius: var(--radius-pill); background: var(--dash-card-bg); font-size: 0.82rem; font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; }

/* Toggle de plataforma (super-admin / login-as) — conservado */
.platform-toggle-wrap { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border: 1px dashed var(--color-platform-border); border-radius: var(--radius-pill); background: var(--color-platform-bg); color: var(--color-platform-text); font-size: 0.78rem; font-weight: 600; cursor: pointer; user-select: none; }
.platform-toggle-wrap input { accent-color: var(--color-platform); cursor: pointer; }
.platform-toggle-wrap.u-hidden { display: none; }

/* ── Primitivas de sección ──────────────────────────────────────────────── */
.dashboard-section { margin-bottom: 2.25rem; }
.dash-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.dash-section-head h2 { font-size: 1.05rem; font-weight: 700; color: var(--color-text-strong); margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.dash-section-link { font-size: 0.82rem; font-weight: 600; color: var(--color-primary); text-decoration: none; white-space: nowrap; }
.dash-section-link:hover { text-decoration: underline; }
.dash-section-note { font-size: 0.78rem; color: var(--color-text-muted); }
.dash-count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.45rem; border-radius: var(--radius-pill); background: var(--dash-danger); color: #fff; font-size: 0.78rem; font-weight: 700; }
.dash-muted { color: var(--color-text-muted); font-size: 0.88rem; margin: 0; }
.dash-modal-label { font-size: 0.85rem; font-weight: 600; color: var(--color-text); margin: 0 0 0.5rem; }

/* ── Zona 1 — Hero band ─────────────────────────────────────────────────── */
.dash-hero-band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0;
  border: 1px solid var(--dash-hero-border); border-radius: var(--radius-xl); overflow: hidden;
  margin-bottom: 2rem;
  background: linear-gradient(120deg, var(--dash-hero-from), var(--dash-hero-to));
}
.hero-fact { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.35rem; }
.hero-fact + .hero-fact { box-shadow: inset 1px 0 0 var(--dash-hero-border); }
.hero-fact-icon { font-size: 1.5rem; line-height: 1; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 35%, transparent)); }
.hero-fact-big { font-size: 1rem; font-weight: 700; color: var(--color-text-strong); line-height: 1.25; }
.hero-fact-small { font-size: 0.8rem; color: var(--color-text-tertiary); margin-top: 0.1rem; }

/* ── Zona 2 — Requiere atención ─────────────────────────────────────────── */
.attention-widget { margin-bottom: 2.25rem; }
.attn-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.attn-card {
  position: relative; display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1.15rem 1.25rem; border-radius: var(--radius-xl);
  background: var(--dash-card-bg);
  border: 1px solid var(--c-border);
  box-shadow: var(--dash-card-shadow), 0 10px 30px color-mix(in srgb, var(--c) var(--dash-glow-strength), transparent);
}
.attn-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: var(--radius-xl) 0 0 var(--radius-xl); background: var(--c); }
.attn-top { display: flex; align-items: center; gap: 0.6rem; }
.attn-icon { font-size: 1.25rem; line-height: 1; }
.attn-count { font-size: 1.9rem; font-weight: 800; color: var(--c-text); line-height: 1; margin-left: auto; }
.attn-label { font-size: 0.92rem; font-weight: 700; color: var(--color-text-strong); }
.attn-sub { font-size: 0.78rem; color: var(--color-text-tertiary); }
.attn-cta { margin-top: 0.5rem; align-self: flex-start; display: inline-block; padding: 0.4rem 0.85rem; border: 1px solid var(--c-border); border-radius: var(--radius-pill); background: var(--c-soft); color: var(--c-text); font-size: 0.78rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: background 0.15s; }
.attn-cta:hover { background: color-mix(in srgb, var(--c) 18%, transparent); }

/* ── Zona 3 — Pulso del negocio ─────────────────────────────────────────── */
.pulse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.pulse-card { position: relative; padding: 1.15rem 1.25rem 0.75rem; border-radius: var(--radius-xl); background: var(--dash-card-bg); border: 1px solid var(--dash-card-border); box-shadow: var(--dash-card-shadow); overflow: hidden; }
.pulse-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--c); opacity: 0.85; }
.pulse-label { font-size: 0.8rem; font-weight: 600; color: var(--color-text-tertiary); }
.pulse-value { font-size: 1.65rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-text-strong); line-height: 1.1; margin-top: 0.25rem; font-variant-numeric: tabular-nums; }
.pulse-foot { min-height: 1.1rem; margin-top: 0.35rem; }
.pulse-subs { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; margin-top: 0.4rem; }
.pulse-sub { font-size: 0.78rem; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.pulse-sub b { color: var(--color-text-secondary); font-weight: 600; }
.pulse-note { font-size: 0.7rem; color: var(--color-text-tertiary); margin-top: 0.3rem; opacity: 0.85; }
.pulse-spark { height: 38px; margin: 0.5rem -0.25rem -0.25rem; }
.pulse-spark canvas { width: 100% !important; }

/* Delta chip (reusado en pulso, asistente, etc.) */
.kpi-delta { display: inline-block; font-size: 0.76rem; font-weight: 700; line-height: 1; }
.kpi-delta.delta-up   { color: var(--dash-success); }
.kpi-delta.delta-down { color: var(--dash-danger); }
.kpi-delta.delta-flat { color: var(--color-text-muted); }

/* ── Zona 4 — Hallazgos (insight chips) ─────────────────────────────────── */
.insight-strip { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.25rem; }
.insight-chip { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.9rem; border-radius: var(--radius-pill); background: var(--dash-card-bg); border: 1px solid var(--dash-card-border); box-shadow: var(--dash-card-shadow); }
.insight-icon { font-size: 1.15rem; line-height: 1; }
.insight-text { display: flex; flex-direction: column; line-height: 1.2; }
.insight-title { font-size: 0.7rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.insight-value { font-size: 0.85rem; font-weight: 700; color: var(--color-text-strong); }
.insight-sub { font-weight: 500; color: var(--color-text-tertiary); }

/* ── Zona 5 — Tendencias + Heatmap ──────────────────────────────────────── */
.trends-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.25rem; }
.chart-card { padding: 1.25rem 1.4rem; border-radius: var(--radius-xl); background: var(--dash-card-bg); border: 1px solid var(--dash-card-border); box-shadow: var(--dash-card-shadow); display: flex; flex-direction: column; }
.chart-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.chart-card-head h3 { font-size: 0.95rem; font-weight: 700; color: var(--color-text-strong); margin: 0; }
/* Pestañas del gráfico de tendencia (mismo lenguaje que el selector de período) */
.trend-tabs { display: inline-flex; gap: 0; border: 1px solid var(--dash-card-border); border-radius: var(--radius-pill); padding: 3px; background: var(--dash-card-bg); }
.trend-tab { padding: 0.3rem 0.75rem; border: none; border-radius: var(--radius-pill); background: transparent; cursor: pointer; font-size: 0.78rem; font-weight: 600; color: var(--color-text-tertiary); transition: background 0.15s, color 0.15s; white-space: nowrap; }
.trend-tab.active { background: var(--color-primary); color: var(--color-primary-contrast); }
.chart-canvas-wrap { height: 260px; }
/* Cuando la tarjeta de Tendencia se estira a la altura del heatmap vecino (grid de 2
   columnas), el canvas crece para llenar en vez de dejar un hueco abajo. El gráfico usa
   maintainAspectRatio:false, así que respeta la altura del contenedor. */
.chart-card--trend .chart-canvas-wrap { flex: 1 1 auto; height: auto; min-height: 260px; }
/* Un heatmap con muchas horas activas (mensajes 24/7) no debe estirar la fila sin límite:
   se acota y hace scroll interno, dejando ambas tarjetas a una altura razonable. */
.chart-card--heat .heatmap { max-height: 460px; overflow-y: auto; }

/* Heatmap día×hora (grid CSS, sin canvas) */
.heatmap { display: grid; grid-template-columns: auto repeat(7, 1fr); gap: 4px; }
.heat-corner { position: sticky; top: 0; z-index: 2; background: var(--dash-card-bg); }
.heat-day { position: sticky; top: 0; z-index: 2; background: var(--dash-card-bg); font-size: 0.72rem; font-weight: 600; color: var(--color-text-tertiary); text-align: center; padding-bottom: 2px; }
.heat-hour { font-size: 0.7rem; color: var(--color-text-muted); padding-right: 0.4rem; display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.heat-cell {
  height: 20px; border-radius: 5px;
  /* rampa violeta→ámbar por intensidad (data-viz), fundida al fondo si es baja */
  background: color-mix(in srgb,
    color-mix(in srgb, var(--color-warning) calc(var(--heat) * 100%), #6366f1)
    calc(var(--heat) * 86% + 8%), var(--color-surface-muted));
}
.heat-legend { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.85rem; font-size: 0.72rem; color: var(--color-text-muted); justify-content: flex-end; }
.heat-scale { width: 90px; height: 10px; border-radius: var(--radius-pill); background: linear-gradient(90deg, #6366f1, #ec4899, var(--color-warning)); }

/* ── Zona 6 — Mi asistente virtual ──────────────────────────────────────── */
/* Por defecto (tenant / demo): SOLO el card de autonomía, a ancho completo. El card
   lateral "Dónde preguntan" y la sección "Preguntas a mitad de un flujo" son
   solo-plataforma (super-admin en login-as con el check "Métricas de plataforma"). */
.assist-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
body:not(.platform-on) .assist-card--side { display: none; }
body:not(.platform-on) #interruptions-section { display: none; }
@media (min-width: 721px) {
  body.platform-on .assist-grid { grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.4fr); }
}
.assist-card { padding: 1.4rem 1.5rem; border-radius: var(--radius-xl); background: var(--dash-card-bg); border: 1px solid var(--dash-card-border); box-shadow: var(--dash-card-shadow); }
.assist-card--main { border-top: 3px solid var(--dash-success); }
.assist-pct-row { display: flex; align-items: baseline; gap: 0.6rem; }
.assist-pct { font-size: 2.8rem; font-weight: 800; letter-spacing: -0.03em; color: var(--dash-success); line-height: 1; }
.assist-caption { font-size: 0.9rem; color: var(--color-text-secondary); margin-top: 0.2rem; }
.assist-bar-track { height: 10px; border-radius: var(--radius-pill); background: var(--color-surface-muted); overflow: hidden; margin: 0.85rem 0 0.6rem; }
.assist-bar { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, color-mix(in srgb, var(--dash-success) 70%, #34d399), var(--dash-success)); }
.assist-sub { font-size: 0.82rem; color: var(--color-text-tertiary); }
.assist-stats { display: flex; gap: 1.25rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--dash-card-border); flex-wrap: wrap; }
.assist-stat { display: flex; flex-direction: column; }
.assist-stat-val { font-size: 1.25rem; font-weight: 800; color: var(--color-text-strong); }
.assist-stat-label { font-size: 0.74rem; color: var(--color-text-tertiary); }
.assist-side-title { font-size: 0.95rem; font-weight: 700; color: var(--color-text-strong); margin: 0; }
.assist-side-desc { font-size: 0.8rem; color: var(--color-text-tertiary); margin: 0.25rem 0 1rem; }
.assist-q-list { display: flex; flex-direction: column; gap: 0.5rem; }
.assist-q-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.7rem; border-radius: var(--radius-md); background: var(--color-surface-muted); }
.assist-q-rank { width: 1.4rem; height: 1.4rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--dash-violet-soft); color: var(--dash-violet-text); font-size: 0.78rem; font-weight: 700; }
.assist-q-label { flex: 1; font-size: 0.85rem; color: var(--color-text); }
.assist-q-count { font-size: 0.75rem; font-weight: 700; color: var(--dash-warning-text); background: var(--dash-warning-soft); border: 1px solid var(--dash-warning-border); border-radius: var(--radius-pill); padding: 0.15rem 0.55rem; white-space: nowrap; }
.assist-cta { margin-top: 1rem; }
.assist-empty { padding: 1.5rem 0; text-align: center; }

/* ── Zona 7 — Fila inferior (Top / Profesional / Inventario) ─────────────── */
/* stretch (default) → todas las tarjetas de una fila comparten altura: borde
   inferior parejo sin importar cuántos datos traiga cada una. info-card es columna
   flex para poder anclar su pie (ej. "Ver rotación") abajo con margin-top:auto. */
.bottom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.info-card { display: flex; flex-direction: column; padding: 1.3rem 1.4rem; border-radius: var(--radius-xl); background: var(--dash-card-bg); border: 1px solid var(--dash-card-border); box-shadow: var(--dash-card-shadow); }
.info-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.info-card-head h3 { font-size: 0.95rem; font-weight: 700; color: var(--color-text-strong); margin: 0; }

/* Ranking (top productos / profesionales) */
.rank-list { display: flex; flex-direction: column; gap: 0.85rem; }
.rank-row { display: flex; align-items: center; gap: 0.75rem; }
.rank-num { width: 1.5rem; height: 1.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-surface-muted); color: var(--color-text-tertiary); font-size: 0.78rem; font-weight: 700; }
.rank-main { flex: 1; min-width: 0; }
.rank-label { font-size: 0.85rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-bar-track { height: 6px; border-radius: var(--radius-pill); background: var(--color-surface-muted); overflow: hidden; margin-top: 0.3rem; }
.rank-bar { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--dash-info), color-mix(in srgb, var(--dash-info) 60%, var(--dash-violet))); }
.rank-value { font-size: 0.8rem; font-weight: 700; color: var(--color-text-secondary); white-space: nowrap; }
.rank-row--top .rank-num { background: var(--dash-success-soft); }
.voice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.voice-list { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.25rem; }
.voice-item { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.85rem; }
.voice-tag { flex-shrink: 0; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--dash-warning-text); background: var(--dash-warning-soft); border-radius: var(--radius-pill); padding: 0.1rem 0.45rem; }
.voice-text { flex: 1; min-width: 0; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-meta { flex-shrink: 0; font-size: 0.72rem; font-weight: 600; color: var(--color-text-tertiary); white-space: nowrap; }
.assist-conv { margin-top: 0.6rem; font-size: 0.82rem; color: var(--color-text-secondary); }
.assist-conv b { color: var(--color-text-strong); font-weight: 800; }
.funnel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.funnel-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.25rem; }
.funnel-row { display: flex; align-items: center; gap: 0.6rem; }
.funnel-label { flex: 0 0 6.5rem; font-size: 0.8rem; font-weight: 600; color: var(--color-text-secondary); }
.funnel-bar-track { flex: 1; height: 1.35rem; border-radius: var(--radius-md); background: var(--color-surface-muted); overflow: hidden; }
.funnel-bar { height: 100%; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--dash-info), color-mix(in srgb, var(--dash-info) 55%, var(--dash-violet))); min-width: 2px; }
.funnel-count { flex: 0 0 2.5rem; text-align: right; font-size: 0.85rem; font-weight: 800; color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
.funnel-lost { margin-top: 0.6rem; font-size: 0.76rem; color: var(--color-text-tertiary); }

/* Resumen de inventario */
.stock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.stock-mini { padding: 0.85rem 0.7rem; border-radius: var(--radius-lg); background: var(--c-soft); border: 1px solid var(--c-border); text-align: center; }
.stock-mini[role="button"] { cursor: pointer; }
.stock-mini-count { font-size: 1.7rem; font-weight: 800; color: var(--c-text); line-height: 1; }
.stock-mini-label { font-size: 0.72rem; font-weight: 600; color: var(--color-text-secondary); margin-top: 0.35rem; }
.stock-mini-cta { color: var(--c-text); font-weight: 700; }
.info-card-foot { width: 100%; margin-top: auto; }

/* Accesos rápidos — tira de atajos a subsecciones (deep-links). Fila propia,
   auto-fit → siempre tesela parejo con 2..6 tiles y apila en móvil. */
.qa-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.9rem; }
.qa-tile { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.15rem; border-radius: var(--radius-xl); background: var(--dash-card-bg); border: 1px solid var(--dash-card-border); box-shadow: var(--dash-card-shadow); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.qa-tile:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.qa-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.qa-tile-body { display: flex; flex-direction: column; min-width: 0; }
.qa-label { font-size: 0.9rem; font-weight: 700; color: var(--color-text-strong); }
.qa-sub { font-size: 0.76rem; color: var(--color-text-tertiary); }

/* ── Zona 8 — PQRS slim ─────────────────────────────────────────────────── */
.pqrs-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.pqrs-stat { padding: 1rem 1.2rem; border-radius: var(--radius-xl); background: var(--dash-card-bg); border: 1px solid var(--dash-card-border); box-shadow: var(--dash-card-shadow); border-left: 4px solid var(--c); }
.pqrs-num { display: block; font-size: 1.8rem; font-weight: 800; color: var(--c-text); line-height: 1; }
.pqrs-label { font-size: 0.8rem; color: var(--color-text-tertiary); }

/* ── Loader / vacío ─────────────────────────────────────────────────────── */
.empty { padding: 2rem; text-align: center; color: var(--color-text-muted); }

/* ── Capa plataforma (super-admin) — acento violeta, agrupada ───────────── */
.dashboard-section--platform { position: relative; margin-top: 2.5rem; padding: 1.4rem; border: 1px solid var(--color-platform-border); border-left: 4px solid var(--color-platform); border-radius: var(--radius-xl); background: var(--color-platform-bg); }
.dashboard-section--platform h2 { color: var(--color-platform-text); margin: 0.5rem 0 1.25rem; font-size: 1.05rem; }
.platform-tag { display: inline-block; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); background: var(--color-platform); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.ai-perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ratio-card { background: var(--dash-card-bg); border: 1px solid var(--dash-card-border); border-radius: var(--radius-lg); padding: 1.2rem 1.4rem; margin-bottom: 1rem; }
.ratio-card h3 { font-size: 0.9rem; font-weight: 700; color: var(--color-text-strong); margin: 0 0 0.85rem; }
.plat-ratio { margin-bottom: 0.75rem; }
.ratio-row { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; color: var(--color-text-secondary); margin-bottom: 0.45rem; }
.ratio-name { min-width: 50px; }
.ratio-pct { min-width: 45px; text-align: right; font-weight: 600; }
.ratio-bar-wrap { flex: 1; height: 12px; border-radius: var(--radius-pill); background: var(--color-surface-muted); overflow: hidden; }
.ai-bar-faq { background: #22c55e; height: 100%; transition: width 0.4s; }
.ai-bar-claude { background: #6366f1; height: 100%; transition: width 0.4s; }
.ai-bar-budget-ok { background: #6366f1; height: 100%; transition: width 0.4s; }
.ai-bar-budget-warn { background: var(--color-warning); height: 100%; transition: width 0.4s; }
.ai-bar-budget-over { background: var(--color-danger); height: 100%; transition: width 0.4s; }
.ratio-labels { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--color-text-tertiary); margin-top: 0.3rem; }
.plat-budget { margin: 0.75rem 0 0.25rem; }
.plat-models { margin-top: 0.75rem; }
.plat-models-title { font-size: 0.78rem; font-weight: 600; color: var(--color-text-tertiary); margin: 0 0 0.35rem; }
.plat-model-row { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--color-text-secondary); margin-bottom: 0.2rem; }
.plat-cost-main { font-size: 1rem; font-weight: 700; color: var(--color-text); margin: 0 0 0.2rem; }
.plat-cost-sub { font-size: 0.85rem; color: var(--color-text-tertiary); margin: 0; }
.plat-conv-sub { text-align: center; font-size: 0.82rem; color: var(--color-text-secondary); }
.ai-conversion-rate { font-size: 2.5rem; font-weight: 800; line-height: 1; text-align: center; margin: 0.5rem 0 0.25rem; color: var(--c-text); }
.ai-note { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 0.5rem; }
.endpoint-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem; }
.endpoint-item { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0.55rem; background: var(--color-surface-muted); border-radius: var(--radius-sm); font-size: 0.8rem; }
.endpoint-label { font-weight: 500; color: var(--color-text); }
.endpoint-calls { color: var(--color-text-tertiary); font-size: 0.78rem; }
.endpoint-cost { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-text); }
.top-conv-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.top-conv-table th { text-align: left; padding: 0.4rem 0.5rem; color: var(--color-text-tertiary); font-weight: 500; border-bottom: 2px solid var(--dash-card-border); }
.top-conv-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--dash-card-border); color: var(--color-text); }
.top-conv-table tr:last-child td { border-bottom: none; }
.top-conv-table .mono { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.78rem; color: var(--color-text-tertiary); }

/* ── Tablas (modales de inventario) ─────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th { text-align: left; padding: 0.5rem 0.75rem; color: var(--color-text-tertiary); font-weight: 500; border-bottom: 2px solid var(--dash-card-border); }
.data-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--dash-card-border); color: var(--color-text); }
.data-table tr:last-child td { border-bottom: none; }
.table-card { background: var(--dash-card-bg); border: 1px solid var(--dash-card-border); border-radius: var(--radius-lg); overflow-x: auto; margin-bottom: 1rem; }
.table-card > table { min-width: max-content; }
.cop { font-variant-numeric: tabular-nums; }

/* ── Ítems de atención (modal) ──────────────────────────────────────────── */
.attention-item { display: flex; align-items: center; gap: 1rem; padding: 0.65rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--dash-card-border); background: var(--dash-card-bg); margin-bottom: 0.4rem; font-size: 0.875rem; flex-wrap: wrap; }
.attention-item .ai-name { font-weight: 600; flex: 1; min-width: 120px; }
.attention-item .ai-detail { color: var(--color-text-tertiary); flex: 2; min-width: 180px; }
.attention-item .ai-since { color: var(--color-text-muted); font-size: 0.8rem; white-space: nowrap; }
.attention-item .ai-action { margin-left: auto; }
.attention-item--urgency-high   { border-left: 3px solid var(--dash-danger); }
.attention-item--urgency-medium { border-left: 3px solid var(--dash-warning); }

/* ── Modal de detalle (genérico) ────────────────────────────────────────── */
.dash-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 200; align-items: flex-start; justify-content: center; padding: 2rem 1rem; overflow-y: auto; }
.dash-modal { background: var(--dash-card-bg); border: 1px solid var(--dash-card-border); border-radius: var(--radius-xl); width: 100%; max-width: 640px; box-shadow: var(--shadow-md); }
.dash-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--dash-card-border); }
.dash-modal-header h3 { font-size: 1rem; font-weight: 700; color: var(--color-text-strong); margin: 0; }
.dash-modal-close { background: none; border: none; cursor: pointer; font-size: 1.25rem; color: var(--color-text-tertiary); line-height: 1; padding: 0.2rem 0.4rem; border-radius: 4px; }
.dash-modal-close:hover { background: var(--color-surface-muted); color: var(--color-text-strong); }
.dash-modal-body { padding: 1.25rem 1.5rem; max-height: 60vh; overflow-y: auto; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* Tablet / móvil grande: una columna en los bloques de min-track grande
   (evita el desborde horizontal cuando el ancho útil < min-track). */
@media (max-width: 820px) {
  .trends-grid,
  .bottom-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .dash-toolbar { flex-direction: column; }
  .dash-toolbar-right { width: 100%; justify-content: flex-start; }
  .assist-grid { grid-template-columns: 1fr; }
  .hero-fact + .hero-fact { box-shadow: inset 0 1px 0 var(--dash-hero-border); }
  .chart-canvas-wrap { height: 220px; }
  /* Cualquier track ancho a 1 columna: cero scroll lateral en teléfonos. */
  .pulse-grid,
  .attn-cards,
  .pqrs-row { grid-template-columns: 1fr 1fr; }
  .dash-page-title { font-size: 1.35rem; }
}

/* Teléfonos angostos: todo en una sola columna y números más compactos. */
@media (max-width: 480px) {
  .pulse-grid,
  .attn-cards { grid-template-columns: 1fr; }
  .pulse-value { font-size: 1.45rem; }
  .assist-pct { font-size: 2.3rem; }
  .hero-fact { padding: 0.95rem 1.1rem; }
  .assist-card,
  .info-card,
  .chart-card { padding: 1.1rem 1.15rem; }
  .heat-hour { font-size: 0.62rem; }
  .heat-day { font-size: 0.66rem; }
  .stock-mini-count { font-size: 1.45rem; }
}