/* ============================================================
   UNLOCKED DASHBOARD · redesign.css · v=20260610-redesign-v2
   Capa de overrides VISUAL-ONLY — cargar DESPUÉS de styles.css
   y crm-filters.css:

   <link rel="stylesheet" href="/dashboard/redesign.css?v=20260610-redesign-v2" />

   No toca app.js: todos los ids, data-tab, data-crm y clases
   que el JS usa como hooks siguen presentes en el DOM.
   Rollback: quitar el <link> de index.html.

   Adaptación vs patch original (auditoría Fable 2026-06-10):
   - El patch ocultaba `.section-intro-card` completas, pero en el
     DOM real esas cards contienen controles funcionales
     (#reportsSubnav, #crmManualSaleBtn, filtros Sales/Atribución,
     export CSV/XLSX, toolbar Instagram). Aquí solo se oculta el
     texto descriptivo estático (.mini-desc / .subtitle) y se
     compacta la card; ningún control queda oculto.
   - redesign.js del paquete se omitió: pertenecía a otra variante
     del patch y no tiene CSS de soporte en este archivo.
   ============================================================ */

:root {
  --rd-bg: #0b0908;
  --rd-surface: #15110f;
  --rd-surface-2: #100d0b;
  --rd-border: #2a221d;
  --rd-border-soft: #221c18;
  --rd-text: #f2ece8;
  --rd-text-2: #d8d2cd;
  --rd-muted: #a3968e;
  --rd-faint: #7d736c;
  --rd-accent: #F8551F;
  --rd-accent-soft: #FB835E;
  --rd-ok: #5cc878;
  --rd-warn: #F2B705;
  --rd-bad: #e06b7a;
}

/* ------------------------------------------------------------
   1 · NAVEGACIÓN ÚNICA
   Mata la duplicación: el subnav CRM del sidebar desaparece;
   la única superficie CRM es el crm-sub-nav (tabs del panel).
   ------------------------------------------------------------ */
.app-sidebar-subnav { display: none !important; }

/* tabs CRM del panel como tabs horizontales con subrayado */
.crm-sub-nav {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--rd-border);
  padding: 0 4px;
  margin-bottom: 14px;
  overflow-x: auto;
}
.crm-sub-btn {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 9px 14px 11px !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  color: var(--rd-muted) !important;
  border-bottom: 2px solid transparent !important;
  white-space: nowrap;
}
.crm-sub-btn.active {
  color: var(--rd-accent-soft) !important;
  border-bottom-color: var(--rd-accent) !important;
  background: none !important;
}

/* mismo patrón para subnav de Reportes y tabs de tabla maestra */
.reports-subnav, .master-level-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--rd-border);
  overflow-x: auto;
}
.reports-sub-btn {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 9px 12px 11px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  color: var(--rd-muted) !important;
  border-bottom: 2px solid transparent !important;
  white-space: nowrap;
}
.reports-sub-btn.active,
.reports-sub-btn.is-active {
  color: var(--rd-accent-soft) !important;
  border-bottom-color: var(--rd-accent) !important;
}

/* ------------------------------------------------------------
   2 · HERO → BANNER DE CORTE (T3)
   En vez de borrar el hero (ahí vive #dataFreshness, que app.js
   actualiza), se compacta: fuera título/subtítulo/highlights,
   y la línea de freshness se convierte en el banner de estado.
   ------------------------------------------------------------ */
.hero.card {
  padding: 10px 18px !important;
  margin-bottom: 14px !important;
  background: rgba(255, 255, 255, .025) !important;
  border: 1px solid var(--rd-border-soft) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.hero h1,
.hero .subtitle,
.hero .hero-highlights { display: none !important; }
.hero .eyebrow {
  margin: 0 0 2px !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  color: var(--rd-accent-soft) !important;
}
.hero .freshness,
#dataFreshness {
  margin: 0 !important;
  font-size: 11.5px !important;
  color: var(--rd-muted) !important;
  line-height: 1.6 !important;
}

/* Intro-cards: SOLO se oculta el texto explicativo estático.
   Las cards en sí permanecen visibles porque contienen controles
   funcionales (#reportsSubnav, #crmManualSaleBtn, filtros Sales/
   Atribución, export CSV/XLSX, toolbar Instagram). */
.section-intro-card > .mini-desc,
.section-intro-card > .subtitle { display: none !important; }
.section-intro-card {
  padding: 12px 16px !important;
}
.section-intro-card .section-head h2 {
  font-size: 15px !important;
}

/* ------------------------------------------------------------
   3 · JERARQUÍA DE KPIs
   Stats más compactos, números en mono, y el PRIMER stat de
   cada grid lleva el acento (el que decide).
   ------------------------------------------------------------ */
.stats {
  gap: 10px !important;
}
.stats > * {
  background: var(--rd-surface) !important;
  border: 1px solid var(--rd-border) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
}
.stats > * strong,
.stats > * b {
  font-family: 'Space Grotesk', 'IBM Plex Mono', monospace !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  line-height: 1.1 !important;
}
.stats > *:first-child {
  border-color: rgba(248, 85, 31, .4) !important;
  box-shadow: inset 3px 0 0 var(--rd-accent) !important;
}
/* stats secundarios (franja de costos derivados) más silenciosos */
.secondary-stats > * {
  background: var(--rd-surface-2) !important;
  border-color: var(--rd-border-soft) !important;
}
.secondary-stats strong,
.secondary-stats b { font-size: 17px !important; }

/* ------------------------------------------------------------
   4 · TABLAS · totales/header fijos + scroll en 2 ejes
   Aplica a todos los .table-wrap (CRM, master tables, attr…).
   Regla pedida: hasta ~50 filas visibles, luego scroll vertical;
   horizontal siempre disponible sin cortar columnas.
   ------------------------------------------------------------ */
.table-wrap {
  overflow: auto !important;
  max-height: min(72vh, 1900px); /* ~50 filas de 36px + headers */
  border: 1px solid var(--rd-border) !important;
  border-radius: 12px !important;
  background: var(--rd-surface-2) !important;
}
.table-wrap table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  min-width: max-content;
}
.table-wrap thead th {
  position: sticky !important;
  top: 0;
  z-index: 3;
  background: #0e0b09 !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--rd-muted) !important;
  border-bottom: 1px solid var(--rd-border) !important;
  white-space: nowrap;
}
/* fila de totales: si la primera fila del tbody lleva la clase
   .totals-row (o <tr data-totals>), queda pegada bajo el header */
.table-wrap tbody tr.totals-row td,
.table-wrap tbody tr[data-totals] td {
  position: sticky !important;
  top: 33px; /* alto del thead */
  z-index: 2;
  background: #17120f !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--rd-border) !important;
}
/* primera columna fija (lead / campaña) en tablas anchas */
.master-table-shell table th:first-child,
.master-table-shell table td:first-child,
#crmSalesTable th:first-child,
#crmSalesTable td:first-child,
#callsCrmTable th:first-child,
#callsCrmTable td:first-child {
  position: sticky !important;
  left: 0;
  z-index: 1;
  background: var(--rd-surface-2) !important;
  box-shadow: 1px 0 0 var(--rd-border-soft);
}
/* la celda esquina (header de la 1a col) por encima de todo */
.master-table-shell table thead th:first-child,
#crmSalesTable thead th:first-child,
#callsCrmTable thead th:first-child {
  z-index: 4 !important;
  background: #0e0b09 !important;
}
.table-wrap tbody td {
  border-bottom: 1px solid #1c1714 !important;
  white-space: nowrap;
}
.table-wrap tbody tr:hover td { background: rgba(248, 85, 31, .04); }

/* scrollbars discretos */
.table-wrap::-webkit-scrollbar { height: 10px; width: 10px; }
.table-wrap::-webkit-scrollbar-track { background: #0e0b09; }
.table-wrap::-webkit-scrollbar-thumb {
  background: #352c25;
  border-radius: 999px;
  border: 2px solid #0e0b09;
}

/* ------------------------------------------------------------
   5 · FILTROS COMPACTOS · una sola fila pegada a la tabla
   ------------------------------------------------------------ */
.crm-view-toolbar,
.crm-scope-toolbar,
.crm-window-toolbar,
.master-toolbar,
.leads-toolbar,
.instagram-toolbar {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  margin-bottom: 10px !important;
}
.crm-view-toolbar select,
.crm-scope-toolbar select,
.master-toolbar select,
.crm-view-toolbar input,
.master-toolbar input {
  background: var(--rd-surface-2) !important;
  border: 1px solid var(--rd-border) !important;
  border-radius: 9px !important;
  padding: 7px 11px !important;
  font-size: 12px !important;
  color: var(--rd-text-2) !important;
}
/* presets / vistas guardadas como segmented control */
.master-presets,
.crm-seg-btn { font-size: 12px !important; }
.crm-seg-btn {
  border: 1px solid var(--rd-border) !important;
  background: none !important;
  color: var(--rd-muted) !important;
  border-radius: 9px !important;
  padding: 7px 13px !important;
  font-weight: 650 !important;
}
.crm-seg-btn.active,
.crm-seg-btn.is-active {
  background: rgba(248, 85, 31, .16) !important;
  color: var(--rd-accent-soft) !important;
  border-color: rgba(248, 85, 31, .4) !important;
}
.crm-export-btn {
  border: 1px solid var(--rd-border) !important;
  background: none !important;
  color: var(--rd-muted) !important;
  border-radius: 9px !important;
  padding: 7px 12px !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
}
/* acción primaria (+ Agregar venta) en degradado de marca */
.crm-primary-action {
  background: linear-gradient(135deg, #F8551F, #D62A04) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* ------------------------------------------------------------
   6 · MOBILE · safe visual polish only
   The uploaded patch tried to turn the existing hamburger sidebar into
   a fixed bottom bar with CSS only. In the real DOM there are 8 primary
   items plus the CRM group, so that produced a huge horizontal rail and
   covered Sales cards. Keep the proven mobile hamburger navigation and
   only apply non-invasive spacing/typography polish here.
   ------------------------------------------------------------ */
@media (max-width: 820px) {
  .page { padding-bottom: 34px !important; }

  /* KPIs in two columns, but do not truncate money values. */
  .stats { grid-template-columns: 1fr 1fr !important; }
  #crmSalesStats .crm-mobile-summary,
  #crmCitasStats .crm-mobile-summary,
  #crmCallsStats .crm-mobile-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #crmSalesStats .crm-mobile-summary-cell,
  #crmCitasStats .crm-mobile-summary-cell,
  #crmCallsStats .crm-mobile-summary-cell {
    min-width: 0 !important;
    overflow: visible !important;
  }
  #crmSalesStats .crm-mobile-summary-value,
  #crmCitasStats .crm-mobile-summary-value,
  #crmCallsStats .crm-mobile-summary-value {
    font-size: clamp(17px, 5vw, 21px) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }
  #crmSalesStats .crm-mobile-summary-sub,
  #crmCitasStats .crm-mobile-summary-sub,
  #crmCallsStats .crm-mobile-summary-sub {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* ============================================================
   V2 · 2026-06-10 · "command center" pass — VISUAL ONLY
   v1 quedó demasiado sutil. V2 hace el cambio inconfundible:
   - Desktop: sidebar → rail de iconos compacto (72px) que se
     expande al hover/focus. Solo CSS: los glifos se pintan con
     ::before sobre el .app-sidebar-dot existente; ningún id,
     data-tab ni clase usada por app.js cambia.
   - Atmósfera global con glow de marca, jerarquía de paneles
     más fuerte, KPIs con barra de acento superior, tablas con
     header naranja y primera columna sticky diferenciada,
     acción primaria de Sales más prominente.
   Mobile (≤900px) conserva el hamburger probado: todas las
   reglas de rail viven dentro de @media (min-width: 901px).
   ============================================================ */

/* ---- V2.0 · atmósfera global ---- */
body {
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(248, 85, 31, .085), transparent 62%),
    radial-gradient(900px 620px at 108% 6%, rgba(248, 85, 31, .045), transparent 55%),
    #080605 !important;
}
.page { background: transparent !important; }

/* ---- V2.1 · jerarquía de paneles ---- */
.card {
  background: linear-gradient(180deg, #16110e 0%, #100c0a 100%) !important;
  border: 1px solid var(--rd-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .32) !important;
}
.section-head h2 {
  display: flex !important;
  align-items: center;
  gap: 10px;
  letter-spacing: -.01em;
}
.section-head h2::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--rd-accent), #D62A04);
  flex: 0 0 auto;
}

/* hero como tira de estado con corte de marca */
.hero.card {
  border-left: 3px solid var(--rd-accent) !important;
  background: linear-gradient(90deg, rgba(248, 85, 31, .09), rgba(255, 255, 255, .02) 42%) !important;
  border-radius: 10px !important;
}

/* cabecera de panel (Sales/Reportes/Atribución) más apretada,
   con corte naranja; los controles siguen visibles */
.section-intro-card {
  border-left: 3px solid rgba(248, 85, 31, .55) !important;
  background: linear-gradient(180deg, #181210, #110d0b) !important;
  padding: 10px 16px !important;
}

/* ---- V2.2 · KPIs: barra de acento + glass ---- */
.stats > * {
  position: relative !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 55%),
    var(--rd-surface) !important;
}
.stats > *::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, rgba(248, 85, 31, .55), rgba(248, 85, 31, 0) 70%);
  opacity: .35;
  pointer-events: none;
}
.stats > * strong,
.stats > * b { font-size: 26px !important; }
.stats > *:first-child {
  background:
    linear-gradient(180deg, rgba(248, 85, 31, .12), rgba(248, 85, 31, .02) 60%),
    var(--rd-surface) !important;
  border-color: rgba(248, 85, 31, .45) !important;
  box-shadow: 0 10px 26px rgba(248, 85, 31, .12) !important;
}
.stats > *:first-child::before {
  opacity: 1;
  background: linear-gradient(90deg, #F8551F, #D62A04);
}
.secondary-stats > *::before { opacity: .15; }
.secondary-stats strong,
.secondary-stats b { font-size: 17px !important; }

/* ---- V2.3 · tablas: header marcado + 1a col sticky distinta ---- */
.table-wrap {
  border-radius: 14px !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .3) !important;
}
.table-wrap thead th {
  background: linear-gradient(180deg, #171110, #0e0b09) !important;
  border-bottom: 2px solid rgba(248, 85, 31, .35) !important;
  color: #c9beb6 !important;
}
.table-wrap tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .015); }
.table-wrap tbody tr:hover td { background: rgba(248, 85, 31, .07) !important; }
.master-table-shell table td:first-child,
#crmSalesTable td:first-child,
#callsCrmTable td:first-child {
  background: #14100d !important;
  box-shadow: 1px 0 0 rgba(248, 85, 31, .22) !important;
}

/* ---- V2.4 · acciones: primaria prominente, secundarias con hover ---- */
.crm-primary-action {
  padding: 9px 18px !important;
  font-size: 12.5px !important;
  letter-spacing: .02em !important;
  box-shadow: 0 8px 22px rgba(248, 85, 31, .35) !important;
}
.crm-primary-action:hover { filter: brightness(1.1); }
.crm-export-btn:hover,
.crm-seg-btn:hover {
  border-color: rgba(248, 85, 31, .45) !important;
  color: var(--rd-text-2) !important;
}

/* ---- V2.5 · DESKTOP · rail de iconos que expande al hover ---- */
@media (min-width: 901px) {
  .app-sidebar {
    width: 72px !important;
    padding: 14px 10px !important;
    gap: 14px !important;
    overflow: hidden;
    transition: width .18s ease, box-shadow .18s ease;
    background: linear-gradient(180deg, #150c08 0%, #0c0806 100%) !important;
    border-right: 1px solid rgba(248, 85, 31, .16) !important;
  }
  .app-sidebar:hover {
    width: 236px !important;
    box-shadow: 28px 0 64px rgba(0, 0, 0, .55) !important;
  }
  /* la página gana espacio: margen fijo al ancho del rail;
     el panel expandido se superpone sin mover el layout */
  body:has(.app-sidebar) .page {
    margin-left: 72px !important;
    width: calc(100% - 72px) !important;
  }

  .app-sidebar-brand {
    padding: 2px 0 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  }
  .app-sidebar-brand > div {
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity .15s ease;
  }
  .app-sidebar:hover .app-sidebar-brand > div {
    opacity: 1;
    width: auto;
  }

  /* botones: colapsado = solo glifo centrado (texto a font-size 0,
     el glifo del dot lleva font-size propio); expandido = glifo+label */
  .app-sidebar .tab-btn {
    font-size: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
    min-height: 42px !important;
    border-radius: 11px !important;
    white-space: nowrap;
  }
  .app-sidebar:hover .tab-btn {
    font-size: 13px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  /* el dot existente se convierte en glifo (sin tocar DOM) */
  .app-sidebar .app-sidebar-dot {
    width: auto !important;
    height: auto !important;
    background: none !important;
    box-shadow: none !important;
    font-size: 15px;
    line-height: 1;
    color: rgba(242, 236, 232, .55);
  }
  .app-sidebar .tab-btn[data-tab="reportsTab"] .app-sidebar-dot::before { content: "▦"; }
  .app-sidebar .tab-btn[data-tab="highTab"] .app-sidebar-dot::before { content: "◆"; }
  .app-sidebar .tab-btn[data-tab="lowTab"] .app-sidebar-dot::before { content: "◇"; }
  .app-sidebar .tab-btn[data-tab="leadsTab"] .app-sidebar-dot::before { content: "◎"; }
  .app-sidebar .tab-btn[data-tab="crmTab"] .app-sidebar-dot::before { content: "❖"; }
  .app-sidebar .tab-btn[data-tab="instagramTab"] .app-sidebar-dot::before { content: "✦"; }
  .app-sidebar .tab-btn[data-tab="attributionTab"] .app-sidebar-dot::before { content: "⇄"; }
  .app-sidebar .tab-btn[data-tab="trustTab"] .app-sidebar-dot::before { content: "✓"; }

  /* activo: pill naranja inconfundible */
  .app-sidebar .tab-btn.active {
    background: linear-gradient(135deg, #F8551F, #D62A04) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(248, 85, 31, .35) !important;
  }
  .app-sidebar .tab-btn.active .app-sidebar-dot {
    background: none !important;
    box-shadow: none !important;
    color: #fff;
  }
  .app-sidebar .tab-btn:hover:not(.active) {
    background: rgba(248, 85, 31, .10) !important;
    color: #f5ede8 !important;
  }
}

/* ============================================================
   V3 · 2026-06-10 · CRM Sales command-center — VISUAL ONLY
   Target: paridad con mockup Sales (header con chips de rango,
   fila de estado operativo, KPIs en una fila, segmented Tipo,
   tabla con fila de totales + Fecha/Lead fijas + aviso de fila
   sin lead vinculado). Cero lógica de datos: los chips/segment
   son proxies sobre selects existentes (app.js render los
   sincroniza y despacha 'change' sobre los controles reales).
   ============================================================ */

/* ---- V3.0 · header Sales: título + chips de rango + acción ---- */
.crm-sales-head { row-gap: 8px; }
.crm-range-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.crm-sales-head .crm-range-chips { margin-right: 12px; }
.crm-range-chip {
  border: 1px solid var(--rd-border);
  background: var(--rd-surface-2);
  color: var(--rd-muted);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.crm-range-chip:hover {
  border-color: rgba(248, 85, 31, .45);
  color: var(--rd-text-2);
}
.crm-range-chip.is-active {
  background: rgba(248, 85, 31, .16);
  color: var(--rd-accent-soft);
  border-color: rgba(248, 85, 31, .45);
}
.crm-range-chip--label {
  cursor: default;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .02em;
}

/* ---- V3.1 · fila de estado operativo ---- */
.crm-status-strip { margin: 0 0 10px; }
.crm-status-strip:empty { display: none; }
.crm-status-strip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.crm-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--rd-border);
  background: var(--rd-surface-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--rd-text-2);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.crm-status-chip.is-ok {
  color: var(--rd-ok);
  border-color: rgba(92, 200, 120, .35);
  background: rgba(92, 200, 120, .07);
}
.crm-status-chip.is-warn {
  color: var(--rd-warn);
  border-color: rgba(242, 183, 5, .4);
  background: rgba(242, 183, 5, .08);
}
.crm-status-chip.is-muted {
  color: var(--rd-faint);
  border-color: var(--rd-border-soft);
  background: none;
}
.crm-status-cut {
  margin-left: auto;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rd-faint);
  white-space: nowrap;
}

/* ---- V3.2 · KPIs Sales en una sola fila (desktop) ---- */
@media (min-width: 901px) {
  #crmSalesStats .crm-mobile-summary {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 10px !important;
  }
  #crmSalesStats .crm-mobile-summary-cell {
    flex: 1 1 0;
    min-width: 122px;
  }
}

/* ---- V3.3 · segmented Tipo (proxy del select #crmSalesTypeFilter) ---- */
.crm-type-segment {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rd-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--rd-surface-2);
}
.crm-type-segment:empty { display: none; }
.crm-type-segment .crm-seg-btn {
  border: none !important;
  border-radius: 0 !important;
  border-right: 1px solid var(--rd-border-soft) !important;
}
.crm-type-segment .crm-seg-btn:last-child { border-right: none !important; }
/* el select nativo Tipo queda accesible (sr-only) pero fuera de la vista:
   el segmented es un proxy 1:1 que escribe sobre él y dispara 'change'.
   Si el segmented no se montó (JS aún sin render), el select sigue visible. */
.crm-type-segment:not(:empty) + label.crm-sales-type-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- V3.4 · tabla Sales: Fecha + Lead fijas, totales, aviso sin lead ---- */
#crmSalesTable table.crm-sales-table th:nth-child(2),
#crmSalesTable table.crm-sales-table td:nth-child(2) {
  position: sticky !important;
  left: var(--crm-sales-col1-w, 96px);
  z-index: 1;
  background: #14100d !important;
  box-shadow: 1px 0 0 rgba(248, 85, 31, .22) !important;
}
#crmSalesTable table.crm-sales-table thead th:nth-child(2) {
  z-index: 4 !important;
  background: #0e0b09 !important;
}
/* fila de totales: sticky bajo el header y por encima de las columnas fijas */
#crmSalesTable tbody tr[data-totals] td {
  color: var(--rd-text);
  font-size: 11.5px;
}
#crmSalesTable tbody tr[data-totals] td:nth-child(-n+2) {
  z-index: 3 !important;
  background: #17120f !important;
}
#crmSalesTable tbody tr[data-totals]:hover td { background: #17120f !important; }
/* fila sin lead vinculado: corte ámbar a la izquierda, fondo sutil */
#crmSalesTable tbody tr.crm-row-unlinked td { background: rgba(242, 183, 5, .035); }
#crmSalesTable tbody tr.crm-row-unlinked td:first-child {
  box-shadow: inset 3px 0 0 var(--rd-warn), 1px 0 0 rgba(248, 85, 31, .22) !important;
}
#crmSalesTable tbody tr.crm-row-unlinked:hover td { background: rgba(242, 183, 5, .07) !important; }
/* nota de pie: columnas fijas + scroll */
.crm-sales-foot-note {
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: .05em;
  color: var(--rd-faint);
  text-align: right;
}

/* ---- V3.5 · salud del rail (dot verde abajo, solo desktop) ---- */
@media (min-width: 901px) {
  .app-sidebar::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rd-ok);
    box-shadow: 0 0 10px rgba(92, 200, 120, .65);
    margin: auto auto 6px;
    flex: 0 0 auto;
  }
}

/* ---- V3.6 · Sales filter row: compact one-row command bar on desktop ---- */
@media (min-width: 901px) {
  #crmSales .section-intro-card {
    padding: 10px 14px !important;
  }
  #crmSales .crm-filters-panel-head {
    display: none !important;
  }
  #crmSales #crm-crmSales-filters.crm-view-toolbar {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 10px 0 0 !important;
  }
  #crmSales #crm-crmSales-filters.crm-view-toolbar > * {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  #crmSales #crm-crmSales-filters label:not(.crm-sales-type-native) {
    min-width: 150px !important;
  }
  #crmSales #crm-crmSales-filters label input {
    min-width: 220px !important;
  }
  #crmSales #crm-crmSales-filters .crm-export-btn {
    width: auto !important;
    min-width: 54px !important;
  }
  #crmSales #crm-crmSales-filters .crm-quick-views {
    flex: 1 1 220px !important;
    min-width: 220px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    height: 34px !important;
    max-height: 34px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 0 !important;
  }
  #crmSales #crm-crmSales-filters .crm-quick-views > span {
    flex: 0 0 auto !important;
    font-size: 9px !important;
    letter-spacing: .1em !important;
    color: var(--rd-faint) !important;
  }
  #crmSales #crm-crmSales-filters .crm-quick-views button {
    flex: 0 0 auto !important;
    padding: 5px 8px !important;
    min-height: 28px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }
}

/* ---- V3.7 · mobile: chips/estado sin overflow horizontal ---- */
@media (max-width: 820px) {
  .crm-range-chips { margin-left: 0; width: 100%; }
  .crm-status-strip-row { gap: 6px; }
  .crm-status-cut { margin-left: 0; width: 100%; }
  .crm-status-chip { white-space: normal; }
}

/* ============================================================
   V3.8 · CRM Calls desktop usability hotfix — VISUAL ONLY
   Jose reportó que en desktop Calls los menús se sienten bloqueados
   y que las cards tienen un recuadro rojo demasiado pesado. Este
   bloque NO toca datos ni JS: solo restituye el patrón del mockup
   para Calls (controles amplios/clickeables + chips oscuros con
   acento superior sutil, sin caja roja de alerta).
   ============================================================ */
@media (min-width: 901px) {
  #crmCalls .section-intro-card {
    position: relative;
    z-index: 6;
    overflow: visible !important;
    padding: 14px 16px !important;
    display: block !important;
    grid-template-columns: none !important;
  }

  #crmCalls .crm-view-toolbar,
  #crmCalls #crm-crmCalls-filters,
  #crmCalls .leads-toolbar.crm-view-toolbar {
    position: relative;
    z-index: 7;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: end !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls #crm-crmCalls-filters.crm-view-toolbar label,
  #crmCalls .crm-view-toolbar label {
    flex: 0 1 154px !important;
    width: auto !important;
    min-width: 142px !important;
    max-width: 180px !important;
    gap: 4px !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls #crm-crmCalls-filters.crm-view-toolbar label:has(input[type="date"]),
  #crmCalls .crm-view-toolbar label:has(input[type="date"]) {
    flex-basis: 154px !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls #crm-crmCalls-filters.crm-view-toolbar label:has(input[type="text"]),
  #crmCalls .crm-view-toolbar label:has(input[type="text"]) {
    flex: 1 1 230px !important;
    min-width: 220px !important;
    max-width: 320px !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls #crm-crmCalls-filters.crm-view-toolbar select,
  body.ui-crm-refresh #crmTab #crmCalls #crm-crmCalls-filters.crm-view-toolbar input,
  #crmCalls .crm-view-toolbar select,
  #crmCalls .crm-view-toolbar input {
    min-height: 34px !important;
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 10px !important;
    border-color: rgba(232, 236, 244, .16) !important;
    background: #1b1512 !important;
    color: var(--rd-text) !important;
    padding: 8px 10px !important;
    cursor: pointer;
    position: relative;
    z-index: 8;
  }

  #crmCalls .crm-view-toolbar input[type="text"] { cursor: text; }

  #crmCalls .crm-view-toolbar label > span {
    color: var(--rd-muted) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
  }

  #crmCalls .crm-view-toolbar .crm-export-btn {
    min-height: 34px !important;
    align-self: end !important;
    position: relative;
    z-index: 8;
  }

  #crmCalls .crm-view-toolbar .crm-quick-views {
    flex: 1 1 360px !important;
    min-width: 300px !important;
    align-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 0 !important;
  }

  #crmCalls .crm-view-toolbar .crm-quick-views button {
    flex: 0 0 auto !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
  }

  #callsCrmStats,
  #callsCrmStats .crm-mobile-summary {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  #callsCrmStats .crm-mobile-summary {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(118px, 1fr)) !important;
    gap: 10px !important;
  }

  #callsCrmStats .crm-mobile-summary-cell,
  #callsCrmStats.stats > *,
  #callsCrmStats .stat-card,
  #callsCrmStats .kpi-card {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), #15110f !important;
    border: 1px solid rgba(232, 236, 244, .10) !important;
    box-shadow: none !important;
  }

  #callsCrmStats .crm-mobile-summary-cell:first-child,
  #callsCrmStats.stats > *:first-child {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), #15110f !important;
    border-color: rgba(232, 236, 244, .10) !important;
    box-shadow: none !important;
  }

  #callsCrmStats .crm-mobile-summary-cell::before,
  #callsCrmStats.stats > *::before {
    height: 2px !important;
    opacity: .45 !important;
    background: linear-gradient(90deg, rgba(248,85,31,.65), rgba(248,85,31,0) 72%) !important;
  }
}

/* ============================================================
   V3.9 · CRM Calls cost-KPI accent — VISUAL ONLY
   Paridad con el mockup de Calls: las tres primeras cards del
   strip (C/Raw, C/L, C/Q — las de costo en USD; app.js siempre
   las emite, con '—' si no hay spend) llevan un borde naranja
   fino que las separa de los contadores. Solo border-color:
   sin glow, sin fondo de alerta — la "caja roja pesada" que el
   hotfix V3.8 eliminó no vuelve.
   ============================================================ */
@media (min-width: 901px) {
  #callsCrmStats .crm-mobile-summary .crm-mobile-summary-cell:nth-child(-n+3) {
    border-color: rgba(248, 85, 31, .32) !important;
  }
  #callsCrmStats .crm-mobile-summary .crm-mobile-summary-cell:nth-child(-n+3)::before {
    opacity: .85 !important;
  }
}

/* ============================================================
   V3.10 · CRM Calls KPI wrapper cleanup — VISUAL ONLY
   Jose pidió quitar el cuadro/fondo externo detrás del strip de
   cards. Dejamos solo las cards individuales y sus bordes; no se
   toca ningún número, cálculo, filtro ni fuente de datos.
   ============================================================ */
@media (min-width: 901px) {
  body.ui-crm-refresh #crmTab #crmCalls #callsCrmStats > .crm-mobile-summary {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
}

/* ============================================================
   V5 · CRM Calls compact previous-card design — PRESENTATION ONLY
   Mantiene las cards operativas previas de Calls y aplica el shell nuevo
   en versión compacta. No cambia fuentes, filtros, cálculos ni exports.
   ============================================================ */
@media (min-width: 901px) {
  #crmCalls > .section-intro-card,
  body.ui-crm-refresh #crmTab #crmCalls > .section-intro-card {
    display: none !important;
  }

  #crmCalls #callsCrmStats.crm-calls-command,
  body.ui-crm-refresh #crmTab #crmCalls #callsCrmStats.crm-calls-command {
    display: block !important;
    margin: 0 0 14px !important;
    padding: 22px 24px 18px !important;
    border: 1px solid rgba(72, 48, 37, .62) !important;
    border-radius: 20px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(248, 85, 31, .08), transparent 34%),
      linear-gradient(180deg, #080706, #050505) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 24px 70px rgba(0,0,0,.28) !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .crm-calls-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
  }

  .crm-calls-eyebrow,
  .crm-calls-kpi-label,
  .crm-calls-cost-label {
    color: #8f8178;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .105em;
    text-transform: uppercase;
  }

  .crm-calls-hero-head h2 {
    margin: 5px 0 0;
    color: #f4eee8;
    font-size: clamp(20px, 1.8vw, 24px);
    line-height: 1.08;
    letter-spacing: -.02em;
  }

  .crm-calls-hero-head h2 span {
    color: #958982;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
  }

  .crm-calls-range {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .crm-calls-range button,
  .crm-calls-range-label {
    height: 36px;
    border: 1px solid rgba(73, 49, 40, .9);
    background: #0f0b0a;
    color: #a99b92;
    border-radius: 10px;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  .crm-calls-range button.is-active {
    background: #35170e;
    color: #ff7a3d;
    border-color: rgba(248, 85, 31, .52);
  }

  .crm-calls-range-label {
    display: inline-flex;
    align-items: center;
    color: #eee6df;
  }

  .crm-calls-primary-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 12px;
  }

  .crm-calls-primary-card {
    position: relative;
    min-height: 128px;
    padding: 16px 17px 14px;
    border: 1px solid rgba(62, 42, 35, .88);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.006)), #130e0d;
    box-shadow: none;
    overflow: hidden;
  }

  .crm-calls-primary-card.is-active {
    border-color: rgba(248, 85, 31, .48);
  }

  .crm-calls-primary-card.is-active::before {
    content: '';
    position: absolute;
    inset: 12px auto 12px 0;
    width: 3px;
    border-radius: 0 99px 99px 0;
    background: #ff5b1f;
  }

  .crm-calls-kpi-value {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 7px;
    color: #f2ece6;
    font-size: 36px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.035em;
  }

  .crm-calls-kpi-value span {
    color: #92867e;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
  }

  .crm-calls-kpi-sub {
    margin-top: 7px;
    color: #9c9088;
    font-size: 12px;
    line-height: 1.35;
  }

  .crm-calls-kpi-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: #8b817a;
    font-size: 11px;
  }

  .crm-calls-kpi-foot em {
    font-style: normal;
    color: #81756e;
  }

  .crm-calls-live-pill {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 9px;
    border: 1px solid rgba(66, 148, 80, .55);
    border-radius: 999px;
    background: rgba(18, 48, 27, .82);
    color: #65de86;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .045em;
  }

  .crm-calls-cost-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(145px, .82fr)) minmax(230px, 1.3fr);
    min-height: 78px;
    margin-bottom: 13px;
    border: 1px solid rgba(62, 42, 35, .86);
    border-radius: 12px;
    background: #120d0c;
    overflow: hidden;
  }

  .crm-calls-cost-strip article,
  .crm-calls-cost-strip p {
    margin: 0;
    padding: 14px 16px;
    border-right: 1px solid rgba(62, 42, 35, .78);
  }

  .crm-calls-cost-strip article strong {
    display: block;
    margin-top: 5px;
    color: #f1ebe5;
    font-size: 20px;
    line-height: 1.08;
    letter-spacing: -.02em;
  }

  .crm-calls-cost-strip article span,
  .crm-calls-cost-strip p {
    display: block;
    margin-top: 4px;
    color: #968a83;
    font-size: 11.5px;
    line-height: 1.45;
  }

  .crm-calls-cost-strip p {
    border-right: 0;
    margin-top: 0;
    display: flex;
    align-items: center;
  }

  .crm-calls-toolbar-shell .crm-view-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .crm-calls-toolbar-shell .crm-quick-views {
    order: 0;
    display: inline-flex !important;
    gap: 0 !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(73, 49, 40, .9) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #0f0b0a !important;
  }

  .crm-calls-toolbar-shell .crm-quick-view-btn,
  .crm-calls-toolbar-shell .crm-quick-save,
  .crm-calls-toolbar-shell .crm-export-btn {
    height: 34px !important;
    border: 1px solid rgba(73, 49, 40, .9) !important;
    border-radius: 9px !important;
    background: #0f0b0a !important;
    color: #b4a7a0 !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  .crm-calls-toolbar-shell .crm-quick-views .crm-quick-view-btn {
    border-width: 0 1px 0 0 !important;
    border-radius: 0 !important;
  }

  .crm-calls-toolbar-shell .crm-quick-views .crm-quick-view-btn:first-of-type {
    background: #35170e !important;
    color: #ff7a3d !important;
  }

  .crm-calls-toolbar-shell label {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .crm-calls-toolbar-shell label.crm-calls-hidden-control {
    display: none !important;
  }

  .crm-calls-toolbar-shell label > span {
    position: absolute !important;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: #b4a7a0 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    pointer-events: none;
  }

  .crm-calls-toolbar-shell #callsQualifiedFilter,
  .crm-calls-toolbar-shell #callsAgendaFromFilter,
  .crm-calls-toolbar-shell #callsAgendaToFilter {
    display: none !important;
  }

  .crm-calls-toolbar-shell #callsAgendaStatusFilter,
  .crm-calls-toolbar-shell #callsTempFilter,
  .crm-calls-toolbar-shell #callsStageFilter,
  .crm-calls-toolbar-shell #callsSearch {
    height: 34px !important;
    min-height: 34px !important;
    border: 1px solid rgba(73, 49, 40, .9) !important;
    border-radius: 9px !important;
    background: #0f0b0a !important;
    color: #d9d0ca !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }

  .crm-calls-toolbar-shell #callsAgendaStatusFilter { width: 150px !important; padding-left: 82px !important; }
  .crm-calls-toolbar-shell #callsTempFilter { width: 158px !important; padding-left: 92px !important; }
  .crm-calls-toolbar-shell #callsStageFilter { width: 132px !important; padding-left: 54px !important; }
  .crm-calls-toolbar-shell #callsSearch { width: 245px !important; padding-left: 34px !important; }

  .crm-calls-toolbar-shell #callsSearch::placeholder {
    color: #766b65 !important;
  }

  .crm-calls-toolbar-shell .crm-quick-save {
    margin-left: auto !important;
  }

  .crm-calls-toolbar-shell #crmCallsExportCsvBtn,
  .crm-calls-toolbar-shell #crmCallsExportXlsxBtn {
    order: 8 !important;
  }

  .crm-calls-toolbar-shell .crm-quick-save {
    order: 7 !important;
  }
}

@media (max-width: 900px) {
  body.ui-crm-refresh #crmTab #crmCalls #callsCrmStats.crm-calls-command {
    display: grid !important;
    gap: 10px !important;
  }
  .crm-calls-hero-head,
  .crm-calls-primary-kpis,
  .crm-calls-cost-strip,
  .crm-calls-toolbar-shell .crm-view-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 901px) {
  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell .crm-view-toolbar,
  body.ui-crm-refresh[data-crm-filters="1"] #crmTab #crmCalls .crm-calls-toolbar-shell .crm-view-toolbar {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell .crm-view-toolbar label,
  body.ui-crm-refresh[data-crm-filters="1"] #crmTab #crmCalls .crm-calls-toolbar-shell .crm-view-toolbar label {
    order: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell .crm-view-toolbar label.crm-calls-hidden-control,
  body.ui-crm-refresh[data-crm-filters="1"] #crmTab #crmCalls .crm-calls-toolbar-shell .crm-view-toolbar label.crm-calls-hidden-control {
    display: none !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell .crm-view-toolbar .crm-quick-views,
  body.ui-crm-refresh[data-crm-filters="1"] #crmTab #crmCalls .crm-calls-toolbar-shell .crm-view-toolbar .crm-quick-views {
    order: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    flex-basis: auto !important;
    border-top: 1px solid rgba(73, 49, 40, .9) !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell .crm-view-toolbar input[type="text"],
  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell .crm-view-toolbar select,
  body.ui-crm-refresh[data-crm-filters="1"] #crmTab #crmCalls .crm-calls-toolbar-shell .crm-view-toolbar input[type="text"],
  body.ui-crm-refresh[data-crm-filters="1"] #crmTab #crmCalls .crm-calls-toolbar-shell .crm-view-toolbar select {
    max-width: none !important;
    min-height: 34px !important;
  }
}


/* ============================================================
   V5.1 · CRM compact header + previous Calls cards override
   ============================================================ */
@media (min-width: 901px) {
  #crmExecutiveOverview .crm-exec-strip,
  body.ui-crm-refresh #crmExecutiveOverview .crm-exec-strip {
    margin: 0 0 8px !important;
    padding: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #crmExecutiveOverview .crm-exec-kpis,
  #crmExecutiveOverview .crm-exec-action,
  body.ui-crm-refresh #crmExecutiveOverview .crm-exec-kpis,
  body.ui-crm-refresh #crmExecutiveOverview .crm-exec-action {
    display: none !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls #callsCrmStats.crm-calls-command {
    margin: 0 0 8px !important;
    padding: 12px 14px 10px !important;
    border-radius: 16px !important;
    border-color: rgba(72, 48, 37, .56) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 12px 34px rgba(0,0,0,.22) !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-hero-head {
    gap: 12px !important;
    margin-bottom: 9px !important;
    align-items: center !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-hero-head h2 {
    margin-top: 2px !important;
    font-size: clamp(16px, 1.35vw, 19px) !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-hero-head h2 span {
    font-size: 11.5px !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-range {
    gap: 5px !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-range button,
  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-range-label {
    height: 28px !important;
    border-radius: 8px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-primary-kpis.is-previous-cards {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(92px, 1fr)) !important;
    gap: 7px !important;
    margin-bottom: 8px !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-primary-kpis.is-previous-cards .crm-calls-primary-card {
    min-height: 76px !important;
    padding: 10px 10px 9px !important;
    border-radius: 11px !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-primary-kpis.is-previous-cards .crm-calls-primary-card.is-active::before {
    inset: 9px auto 9px 0 !important;
    width: 2px !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-primary-kpis.is-previous-cards .crm-calls-kpi-value {
    margin-top: 5px !important;
    font-size: 23px !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-primary-kpis.is-previous-cards .crm-calls-kpi-sub {
    margin-top: 4px !important;
    font-size: 10.5px !important;
    line-height: 1.22 !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell .crm-view-toolbar {
    gap: 6px !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell .crm-quick-view-btn,
  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell .crm-quick-save,
  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell .crm-export-btn,
  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell #callsAgendaStatusFilter,
  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell #callsTempFilter,
  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell #callsStageFilter,
  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell #callsSearch {
    height: 30px !important;
    min-height: 30px !important;
    font-size: 11px !important;
  }
}

@media (min-width: 901px) and (max-width: 1240px) {
  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-primary-kpis.is-previous-cards {
    grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
  }
}


/* V5.2 · CRM Calls one-line compact toolbar */
@media (min-width: 1280px) {
  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell .crm-view-toolbar {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell .crm-quick-views {
    max-width: 360px !important;
    flex: 0 1 auto !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell .crm-quick-view-btn,
  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell .crm-quick-save,
  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell .crm-export-btn {
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell .crm-quick-save {
    margin-left: 0 !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell label {
    flex: 0 1 auto !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell #callsAgendaStatusFilter { width: 132px !important; padding-left: 72px !important; }
  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell #callsTempFilter { width: 138px !important; padding-left: 82px !important; }
  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell #callsStageFilter { width: 112px !important; padding-left: 48px !important; }
  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell #callsSearch { width: 184px !important; padding-left: 28px !important; }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell #crmCallsExportCsvBtn,
  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-toolbar-shell #crmCallsExportXlsxBtn {
    width: 48px !important;
    min-width: 48px !important;
  }
}


/* V5.3 · CRM Calls extra vertical compaction */
@media (min-width: 901px) {
  body.ui-crm-refresh #crmTab #crmCalls #callsCrmStats.crm-calls-command {
    padding: 9px 12px 8px !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-hero-head {
    margin-bottom: 6px !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-eyebrow {
    font-size: 9.5px !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-hero-head h2 {
    font-size: clamp(15px, 1.18vw, 17px) !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-primary-kpis.is-previous-cards {
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-primary-kpis.is-previous-cards .crm-calls-primary-card {
    min-height: 66px !important;
    padding: 8px 9px 7px !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-primary-kpis.is-previous-cards .crm-calls-kpi-label {
    font-size: 9.5px !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-primary-kpis.is-previous-cards .crm-calls-kpi-value {
    margin-top: 3px !important;
    font-size: 21px !important;
  }

  body.ui-crm-refresh #crmTab #crmCalls .crm-calls-primary-kpis.is-previous-cards .crm-calls-kpi-sub {
    margin-top: 2px !important;
    font-size: 10px !important;
    line-height: 1.12 !important;
  }
}


/* V5.5 · duplicated CRM-wide summary hidden on every CRM viewport */
body.ui-crm-refresh #crmTab #crmExecutiveOverview,
#crmTab #crmExecutiveOverview {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}


/* V5.6 · hide legacy CRM header/filter chrome after compact per-section headers */
body.ui-crm-refresh #crmTab > .crm-scope-card,
body.ui-crm-refresh #crmTab .crm-scope-card {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

body.ui-crm-refresh #crmTab .crm-filters-panel-head {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* V5.3 · CRM mobile date range in quick-use filters */
.crm-mobile-range {
  display: none;
}

@media (max-width: 900px) {
  body.ui-crm-refresh #crmTab .crm-mobile-range {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 0 0 8px;
  }

  body.ui-crm-refresh #crmTab .crm-mobile-range .crm-range-chip,
  body.ui-crm-refresh #crmTab .crm-mobile-range-field {
    min-height: 34px;
    border: 1px solid rgba(73, 49, 40, .9);
    border-radius: 10px;
    background: #0f0b0a;
    color: #b4a7a0;
  }

  body.ui-crm-refresh #crmTab .crm-mobile-range .crm-range-chip {
    padding: 0 8px;
    font-size: 11px;
    font-weight: 900;
  }

  body.ui-crm-refresh #crmTab .crm-mobile-range .crm-range-chip.is-active {
    background: #35170e;
    color: #ff7a3d;
    border-color: rgba(248, 85, 31, .52);
  }

  body.ui-crm-refresh #crmTab .crm-mobile-range-field {
    grid-column: span 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
  }

  body.ui-crm-refresh #crmTab .crm-mobile-range-field span {
    color: #92867e;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  body.ui-crm-refresh #crmTab .crm-mobile-range-field input[type="date"] {
    min-width: 0;
    width: 100%;
    border: 0;
    background: transparent;
    color: #f2ece6;
    font-size: 12px;
    font-weight: 800;
    padding: 0;
  }
}

/* V6 · CRM Calls: remove redundant active-section header bar — DESKTOP ONLY.
   On desktop (>=769px) the command center (renderCallsCommandCenter) relocates
   the Calls filters/search/export out of the intro card, so the old
   section-intro card is just a redundant wide "Llamadas" label and must not
   reappear above the table.
   On mobile (<=768px) isCrmMobileView() is true, the command center is NOT
   rendered, and the real Calls toolbar (.crm-view-toolbar) lives inside this
   #crmCalls > .section-intro-card. It MUST stay visible there, so the hide is
   scoped to the same >=769px threshold the JS uses for relocation. Any
   unscoped hide here would make the mobile Calls filters disappear. */
@media (min-width: 769px) {
  body.ui-crm-refresh #crmTab #crmCalls > .section-intro-card,
  body.ui-crm-refresh[data-crm-filters="1"] #crmTab #crmCalls > .section-intro-card,
  #crmTab #crmCalls > .section-intro-card {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}

/* ============================================================
   V7 · CRM Calls + Citas mobile KPI text readability — PRESENTATION ONLY
   Problema: en mobile los valores de las cards de Calls (C/Raw,
   C/L, C/Q en USD) se truncaban como "$62...." porque el strong
   del valor heredaba la regla global `.stats > * strong { 26px }`
   (redesign.css), cuyo selector (0,1,1)+!important vence a la
   base mobile `.crm-mobile-summary-value` (0,1,0) de styles.css.
   Con 26px, "$181.98" (~99px) no cabe en la celda (~66px @390px)
   y el ellipsis lo corta.

   Citas (V224 · parity): #citasCrmStats es un contenedor distinto a
   #callsCrmStats, así que el override original (scopeado solo a Calls)
   nunca alcanzó las cards de Citas. En mobile los valores de las
   cards de Citas seguían heredando ese 26px global, por lo que su
   tipografía no coincidía con la de Calls. Se extiende el mismo
   override a #citasCrmStats para que ambas vistas compartan EXACTAMENTE
   la misma escala tipográfica de card en mobile.

   Fix: override mobile-only de mayor especificidad
   (2 ids + 2 clases), scopeado a #callsCrmStats y #citasCrmStats, que
   baja el valor a un tamaño que entra en la celda con números
   tabulares y sin ellipsis. No toca grid (sigue 4 columnas como
   Leads), ni desktop (>=769px), ni Leads/Sales, ni los conteos,
   filtros, universo de Citas (startTime) ni ningún dato/cálculo.
   ============================================================ */
@media (max-width: 768px) {
  body.ui-crm-refresh #crmTab #callsCrmStats .crm-mobile-summary-value,
  body.ui-crm-refresh #crmTab #citasCrmStats .crm-mobile-summary-value {
    font-size: clamp(13px, 3.5vw, 14px) !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  body.ui-crm-refresh #crmTab #callsCrmStats .crm-mobile-summary-label,
  body.ui-crm-refresh #crmTab #citasCrmStats .crm-mobile-summary-label {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Subtítulo legible: hasta 2 líneas en vez de un ellipsis de 1
     línea que escondía la mitad del contexto. */
  body.ui-crm-refresh #crmTab #callsCrmStats .crm-mobile-summary-sub,
  body.ui-crm-refresh #crmTab #citasCrmStats .crm-mobile-summary-sub {
    font-size: 10px !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
}