/* =========================================================
   WIRTZ HUB · COMERCIAL DIGITAL
   LEADS COMERCIALES

   UBICACIÓN:
   frontend/src/pages/comercial-digital/leads-comerciales/
   leads-comerciales.css

   PARTE 1 DE 4

   DISEÑO:
   - Minimalista
   - Premium
   - Responsive full
   - Sin glow
   - Sin scroll horizontal en mobile
   - Animaciones rápidas
   - Bordes y divisiones visibles
   ========================================================= */


/* =========================================================
   VARIABLES LOCALES
   ========================================================= */

.leads-workspace {
  --leads-bg: #f6f7f9;
  --leads-surface: #ffffff;
  --leads-surface-soft: #f9fafb;
  --leads-surface-muted: #f3f4f6;

  --leads-text: #111111;
  --leads-text-soft: #3f4650;
  --leads-text-muted: #68707c;
  --leads-text-faint: #8a919c;

  --leads-border: #d9dde3;
  --leads-border-strong: #c9ced6;
  --leads-border-dark: #b9c0ca;

  --leads-primary: #111111;
  --leads-primary-hover: #252525;
  --leads-primary-text: #ffffff;

  --leads-danger: #b42318;
  --leads-danger-bg: #fff4f2;
  --leads-danger-border: #f1c4be;

  --leads-success: #16794b;
  --leads-success-bg: #effaf4;
  --leads-success-border: #bee4cd;

  --leads-warning: #9a6700;
  --leads-warning-bg: #fff8e6;
  --leads-warning-border: #eed99d;

  --leads-blue: #2766c7;
  --leads-blue-bg: #f1f6ff;
  --leads-blue-border: #c8d9f6;

  --leads-violet: #7052b8;
  --leads-violet-bg: #f7f3ff;
  --leads-violet-border: #dacdf4;

  --leads-radius-xs: 6px;
  --leads-radius-sm: 9px;
  --leads-radius-md: 12px;
  --leads-radius-lg: 16px;
  --leads-radius-xl: 20px;

  --leads-shadow-sm:
    0 1px 2px rgba(16, 24, 40, 0.04);

  --leads-shadow-md:
    0 8px 26px rgba(16, 24, 40, 0.07);

  --leads-shadow-lg:
    0 18px 50px rgba(16, 24, 40, 0.10);

  --leads-transition:
    150ms cubic-bezier(
      0.2,
      0.8,
      0.2,
      1
    );

  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  color: var(--leads-text);
}


/* =========================================================
   DARK MODE
   ========================================================= */

html.dark .leads-workspace,
body.dark .leads-workspace,
[data-theme="dark"] .leads-workspace {
  --leads-bg: #090909;
  --leads-surface: #101010;
  --leads-surface-soft: #151515;
  --leads-surface-muted: #1a1a1a;

  --leads-text: #f7f7f7;
  --leads-text-soft: #d9d9d9;
  --leads-text-muted: #aaaaaa;
  --leads-text-faint: #7e7e7e;

  --leads-border: #2c2c2c;
  --leads-border-strong: #3a3a3a;
  --leads-border-dark: #484848;

  --leads-primary: #ffffff;
  --leads-primary-hover: #e8e8e8;
  --leads-primary-text: #0a0a0a;

  --leads-danger: #ff8174;
  --leads-danger-bg: #21110f;
  --leads-danger-border: #5a2b26;

  --leads-success: #64d39b;
  --leads-success-bg: #0d1d15;
  --leads-success-border: #244b36;

  --leads-warning: #e8bb5c;
  --leads-warning-bg: #211b0e;
  --leads-warning-border: #50401f;

  --leads-blue: #7ca9f2;
  --leads-blue-bg: #101a29;
  --leads-blue-border: #293e5e;

  --leads-violet: #b49be9;
  --leads-violet-bg: #171224;
  --leads-violet-border: #3f315f;

  --leads-shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.18);

  --leads-shadow-md:
    0 8px 28px rgba(0, 0, 0, 0.24);

  --leads-shadow-lg:
    0 18px 54px rgba(0, 0, 0, 0.32);
}


/* =========================================================
   RESET INTERNO
   ========================================================= */

.leads-workspace *,
.leads-workspace *::before,
.leads-workspace *::after {
  box-sizing: border-box;
}


.leads-workspace button,
.leads-workspace input,
.leads-workspace select,
.leads-workspace textarea {
  font: inherit;
}


.leads-workspace button {
  -webkit-tap-highlight-color: transparent;
}


.leads-workspace button,
.leads-workspace select {
  touch-action: manipulation;
}


.leads-workspace img,
.leads-workspace svg {
  max-width: 100%;
}


.leads-workspace svg {
  flex: 0 0 auto;
  stroke-width: 1.8;
}


.leads-workspace [hidden] {
  display: none !important;
}


/* =========================================================
   MOUNT
   ========================================================= */

.leads-workspace__mount {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}


/* =========================================================
   PAGE
   ========================================================= */

.leads-page {
  position: relative;

  display: flex;
  flex-direction: column;

  gap: 16px;

  width: 100%;
  min-width: 0;
  max-width: 100%;

  padding: 22px;

  overflow: visible;

  opacity: 0;
  transform: translateY(5px);

  transition:
    opacity var(--leads-transition),
    transform var(--leads-transition);
}


.leads-page.is-ready {
  opacity: 1;
  transform: none;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.leads-page-head {
  position: relative;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  width: 100%;
  min-width: 0;

  padding-bottom: 18px;

  border-bottom:
    1px solid
    var(--leads-border);
}


.leads-page-head__identity {
  display: flex;
  flex-direction: column;

  gap: 10px;

  min-width: 0;
}


.leads-page-head__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  color: var(--leads-text-muted);

  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: 0.02em;
}


.leads-page-head__module {
  display: inline-flex;
  align-items: center;

  gap: 6px;
}


.leads-page-head__separator {
  color: var(--leads-border-dark);
}


.leads-page-head__eyebrow strong {
  color: var(--leads-text);
  font-weight: 750;
}


.leads-page-head__title {
  display: flex;
  align-items: flex-end;

  gap: 28px;

  min-width: 0;
}


.leads-page-head__title-copy {
  min-width: 0;
}


.leads-page-head__title h1 {
  margin: 0;

  color: var(--leads-text);

  font-size:
    clamp(
      25px,
      2.1vw,
      34px
    );

  font-weight: 760;
  line-height: 1.1;

  letter-spacing: -0.035em;
}


.leads-page-head__title p {
  max-width: 660px;

  margin:
    7px 0 0;

  color: var(--leads-text-muted);

  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}


.leads-page-head__pulse {
  display: flex;
  align-items: stretch;

  min-width: max-content;

  padding: 7px 0;
}


.leads-page-head__pulse-item {
  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 2px;

  min-width: 82px;

  padding: 0 16px;
}


.leads-page-head__pulse-item:first-child {
  padding-left: 0;
}


.leads-page-head__pulse-item span {
  color: var(--leads-text-faint);

  font-size: 10px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.055em;
}


.leads-page-head__pulse-item strong {
  color: var(--leads-text);

  font-size: 18px;
  font-weight: 760;
  line-height: 1.15;
}


.leads-page-head__pulse-divider {
  width: 1px;

  background:
    var(--leads-border);
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.leads-page-head__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;

  flex: 0 0 auto;
}


.leads-page-head__secondary-actions {
  display: flex;
  align-items: center;

  gap: 6px;
}


.leads-action-button {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 38px;

  padding: 0 13px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    var(--leads-radius-sm);

  background:
    var(--leads-surface);

  color:
    var(--leads-text);

  font-size: 13px;
  font-weight: 700;

  line-height: 1;

  white-space: nowrap;

  cursor: pointer;

  transition:
    background var(--leads-transition),
    color var(--leads-transition),
    border-color var(--leads-transition),
    transform var(--leads-transition);
}


.leads-action-button:hover {
  background:
    var(--leads-surface-muted);

  border-color:
    var(--leads-border-strong);
}


.leads-action-button:active {
  transform:
    translateY(1px);
}


.leads-action-button:focus-visible {
  outline:
    2px solid
    var(--leads-border-dark);

  outline-offset: 2px;
}


.leads-action-button--ghost {
  background:
    transparent;
}


.leads-action-button--primary {
  border-color:
    var(--leads-primary);

  background:
    var(--leads-primary);

  color:
    var(--leads-primary-text);
}


.leads-action-button--primary:hover {
  border-color:
    var(--leads-primary-hover);

  background:
    var(--leads-primary-hover);
}


.leads-action-button--new {
  min-height: 40px;

  padding:
    0 16px;
}


/* =========================================================
   OVERVIEW
   ========================================================= */

.leads-overview {
  display: grid;

  grid-template-columns:
    minmax(210px, 0.9fr)
    minmax(0, 3.1fr);

  gap: 10px;

  width: 100%;
  min-width: 0;
}


.leads-overview__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  min-width: 0;

  padding:
    18px 19px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    var(--leads-radius-lg);

  background:
    var(--leads-surface);

  box-shadow:
    var(--leads-shadow-sm);
}


.leads-overview__hero-copy {
  display: flex;
  flex-direction: column;

  min-width: 0;
}


.leads-overview__hero-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  margin-bottom: 10px;

  color:
    var(--leads-text-muted);

  font-size: 11px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.055em;
}


.leads-overview__hero-copy > strong {
  color:
    var(--leads-text);

  font-size:
    clamp(
      28px,
      2.3vw,
      38px
    );

  font-weight: 770;
  line-height: 0.95;

  letter-spacing: -0.04em;
}


.leads-overview__hero-copy > p {
  margin:
    7px 0 0;

  color:
    var(--leads-text-muted);

  font-size: 12px;
  font-weight: 550;
  line-height: 1.35;
}


.leads-overview__conversion {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 2px;

  padding-left: 16px;

  border-left:
    1px solid
    var(--leads-border);
}


.leads-overview__conversion > span {
  color:
    var(--leads-text-faint);

  font-size: 10px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.055em;
}


.leads-overview__conversion > strong {
  color:
    var(--leads-text);

  font-size: 18px;
  font-weight: 760;
}


.leads-overview__conversion > small {
  color:
    var(--leads-text-muted);

  font-size: 10px;
  font-weight: 600;

  white-space: nowrap;
}


/* =========================================================
   OVERVIEW METRICS
   ========================================================= */

.leads-overview__metrics {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap: 10px;

  min-width: 0;
}


.leads-overview-card {
  appearance: none;

  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  gap: 14px;

  min-width: 0;
  min-height: 118px;

  padding:
    15px;

  overflow: hidden;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    var(--leads-radius-lg);

  background:
    var(--leads-surface);

  color:
    var(--leads-text);

  text-align: left;

  cursor: pointer;

  box-shadow:
    var(--leads-shadow-sm);

  transition:
    transform var(--leads-transition),
    border-color var(--leads-transition),
    background var(--leads-transition);
}


.leads-overview-card:hover {
  transform:
    translateY(-2px);

  border-color:
    var(--leads-border-strong);

  background:
    var(--leads-surface-soft);
}


.leads-overview-card:active {
  transform:
    translateY(0);
}


.leads-overview-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}


.leads-overview-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text-soft);
}


.leads-overview-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color:
    var(--leads-text-faint);

  opacity: 0;

  transform:
    translate(
      -3px,
      3px
    );

  transition:
    opacity var(--leads-transition),
    transform var(--leads-transition);
}


.leads-overview-card:hover
.leads-overview-card__arrow {
  opacity: 1;

  transform: none;
}


.leads-overview-card__content {
  display: flex;
  flex-direction: column;

  min-width: 0;
}


.leads-overview-card__content strong {
  color:
    var(--leads-text);

  font-size: 23px;
  font-weight: 760;
  line-height: 1;

  letter-spacing: -0.025em;
}


.leads-overview-card__content > span {
  margin-top: 6px;

  color:
    var(--leads-text);

  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}


.leads-overview-card__content small {
  display: block;

  margin-top: 3px;

  overflow: hidden;

  color:
    var(--leads-text-muted);

  font-size: 10px;
  font-weight: 550;
  line-height: 1.25;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   KPI TONES
   ========================================================= */

.leads-overview-card--blue
.leads-overview-card__icon {
  border-color:
    var(--leads-blue-border);

  background:
    var(--leads-blue-bg);

  color:
    var(--leads-blue);
}


.leads-overview-card--amber
.leads-overview-card__icon {
  border-color:
    var(--leads-warning-border);

  background:
    var(--leads-warning-bg);

  color:
    var(--leads-warning);
}


.leads-overview-card--violet
.leads-overview-card__icon {
  border-color:
    var(--leads-violet-border);

  background:
    var(--leads-violet-bg);

  color:
    var(--leads-violet);
}


.leads-overview-card--green
.leads-overview-card__icon {
  border-color:
    var(--leads-success-border);

  background:
    var(--leads-success-bg);

  color:
    var(--leads-success);
}


.leads-overview-card--red
.leads-overview-card__icon {
  border-color:
    var(--leads-danger-border);

  background:
    var(--leads-danger-bg);

  color:
    var(--leads-danger);
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.leads-toolbar {
  position: relative;

  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  width: 100%;
  min-width: 0;

  padding:
    10px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    var(--leads-radius-md);

  background:
    var(--leads-surface);

  box-shadow:
    var(--leads-shadow-sm);
}


.leads-toolbar__primary {
  display: flex;
  align-items: center;

  gap: 8px;

  min-width: 0;

  flex: 1 1 auto;
}


.leads-toolbar__search {
  width: min(
    520px,
    100%
  );

  min-width: 210px;
}


.leads-toolbar-search {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;
  min-width: 0;
  min-height: 38px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    var(--leads-radius-sm);

  background:
    var(--leads-surface-soft);

  transition:
    border-color var(--leads-transition),
    background var(--leads-transition);
}


.leads-toolbar-search:focus-within {
  border-color:
    var(--leads-border-dark);

  background:
    var(--leads-surface);
}


.leads-toolbar-search__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  min-width: 38px;

  color:
    var(--leads-text-muted);
}


.leads-toolbar-search input {
  width: 100%;
  min-width: 0;
  height: 36px;

  padding: 0 9px 0 0;

  border: 0;
  outline: 0;

  background:
    transparent;

  color:
    var(--leads-text);

  font-size: 13px;
  font-weight: 580;
}


.leads-toolbar-search input::placeholder {
  color:
    var(--leads-text-faint);

  opacity: 1;
}


.leads-toolbar-search__shortcut {
  flex: 0 0 auto;

  margin-right: 7px;

  padding:
    4px 7px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    6px;

  background:
    var(--leads-surface);

  color:
    var(--leads-text-faint);

  font-size: 10px;
  font-weight: 700;
}


.leads-toolbar-search__clear {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  margin-right: 3px;

  padding: 0;

  border: 0;
  border-radius: 7px;

  background:
    transparent;

  color:
    var(--leads-text-muted);

  cursor: pointer;

  transition:
    background var(--leads-transition),
    color var(--leads-transition);
}


.leads-toolbar-search__clear:hover {
  background:
    var(--leads-surface-muted);

  color:
    var(--leads-text);
}


/* =========================================================
   FILTER BUTTON
   ========================================================= */

.leads-filter-trigger {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  min-height: 38px;

  padding:
    0 12px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    var(--leads-radius-sm);

  background:
    var(--leads-surface);

  color:
    var(--leads-text-soft);

  font-size: 12px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background var(--leads-transition),
    border-color var(--leads-transition),
    color var(--leads-transition);
}


.leads-filter-trigger:hover,
.leads-filter-trigger.is-active {
  border-color:
    var(--leads-border-strong);

  background:
    var(--leads-surface-muted);

  color:
    var(--leads-text);
}


.leads-filter-trigger strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 19px;
  height: 19px;

  padding: 0 5px;

  border-radius: 999px;

  background:
    var(--leads-primary);

  color:
    var(--leads-primary-text);

  font-size: 10px;
  font-weight: 800;
}


/* =========================================================
   TOOLBAR SECONDARY
   ========================================================= */

.leads-toolbar__secondary {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;

  min-width: 0;
}


.leads-toolbar__views {
  min-width: 0;
}


.leads-toolbar-views {
  display: flex;
  align-items: center;

  gap: 3px;

  padding:
    3px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    var(--leads-radius-sm);

  background:
    var(--leads-surface-soft);
}


.leads-toolbar-view {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 5px;

  min-height: 30px;

  padding:
    0 9px;

  border: 0;
  border-radius: 6px;

  background:
    transparent;

  color:
    var(--leads-text-muted);

  font-size: 11px;
  font-weight: 700;

  white-space: nowrap;

  cursor: pointer;

  transition:
    background var(--leads-transition),
    color var(--leads-transition);
}


.leads-toolbar-view:hover {
  color:
    var(--leads-text);
}


.leads-toolbar-view.is-active {
  background:
    var(--leads-surface);

  color:
    var(--leads-text);

  box-shadow:
    inset 0 0 0 1px
    var(--leads-border);
}


/* =========================================================
   VIEW MODE
   ========================================================= */

.leads-toolbar__display {
  display: flex;
  align-items: center;

  gap: 7px;

  flex: 0 0 auto;
}


.leads-toolbar__display-label {
  color:
    var(--leads-text-faint);

  font-size: 10px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.05em;
}


.leads-view-mode {
  display: flex;
  align-items: center;

  gap: 2px;

  padding:
    3px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    var(--leads-radius-sm);

  background:
    var(--leads-surface-soft);
}


.leads-view-mode__button {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  padding: 0;

  border: 0;
  border-radius: 6px;

  background:
    transparent;

  color:
    var(--leads-text-muted);

  cursor: pointer;

  transition:
    color var(--leads-transition),
    background var(--leads-transition);
}


.leads-view-mode__button:hover {
  color:
    var(--leads-text);
}


.leads-view-mode__button.is-active {
  background:
    var(--leads-surface);

  color:
    var(--leads-text);

  box-shadow:
    inset 0 0 0 1px
    var(--leads-border);
}


/* =========================================================
   FILTROS PANEL
   ========================================================= */

.leads-filters {
  position: relative;

  z-index: 15;

  width: 100%;
  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    var(--leads-radius-md);

  background:
    var(--leads-surface);

  box-shadow:
    var(--leads-shadow-sm);

  animation:
    leadsFiltersIn
    150ms ease-out both;
}


@keyframes leadsFiltersIn {
  from {
    opacity: 0;
    transform:
      translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


.leads-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  min-height: 48px;

  padding:
    9px 12px;

  border-bottom:
    1px solid
    var(--leads-border);
}


.leads-filters__head > div {
  display: flex;
  align-items: center;

  gap: 8px;
}


.leads-filters__head > div:first-child {
  flex-direction: column;
  align-items: flex-start;

  gap: 1px;
}


.leads-filters__head span {
  color:
    var(--leads-text);

  font-size: 12px;
  font-weight: 760;
}


.leads-filters__head small {
  color:
    var(--leads-text-muted);

  font-size: 10px;
  font-weight: 600;
}


.leads-filter-reset,
.leads-icon-button {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  min-height: 30px;

  padding:
    0 8px;

  border:
    1px solid
    transparent;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(--leads-text-muted);

  font-size: 11px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background var(--leads-transition),
    color var(--leads-transition),
    border-color var(--leads-transition);
}


.leads-filter-reset:hover,
.leads-icon-button:hover {
  border-color:
    var(--leads-border);

  background:
    var(--leads-surface-muted);

  color:
    var(--leads-text);
}


.leads-icon-button {
  width: 30px;
  padding: 0;
}


/* =========================================================
   FILTER GRID
   ========================================================= */

.leads-filters__grid {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap: 10px;

  width: 100%;
  min-width: 0;

  padding:
    12px;
}


.leads-filter-item {
  display: flex;
  flex-direction: column;

  gap: 6px;

  min-width: 0;
}


.leads-filter-item__label {
  display: flex;
  align-items: center;

  gap: 5px;

  color:
    var(--leads-text-muted);

  font-size: 10px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.045em;
}


.leads-filter-item__control {
  position: relative;

  display: flex;
  align-items: center;

  min-width: 0;
}


.leads-filter-item__control select {
  appearance: none;

  width: 100%;
  min-width: 0;
  height: 36px;

  padding:
    0 31px 0 10px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  outline: none;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text);

  font-size: 12px;
  font-weight: 600;

  cursor: pointer;

  transition:
    border-color var(--leads-transition),
    background var(--leads-transition);
}


.leads-filter-item__control select:hover {
  border-color:
    var(--leads-border-strong);
}


.leads-filter-item__control select:focus {
  border-color:
    var(--leads-border-dark);

  background:
    var(--leads-surface);
}


.leads-filter-item__control > svg {
  position: absolute;

  right: 9px;

  pointer-events: none;

  color:
    var(--leads-text-muted);
}


/* =========================================================
   MAIN
   ========================================================= */

.leads-main {
  width: 100%;
  min-width: 0;
}


/* =========================================================
   RESPONSIVE · PARTE 1
   ========================================================= */

@media (
  max-width: 1380px
) {
  .leads-page {
    padding: 18px;
  }


  .leads-overview {
    grid-template-columns: 1fr;
  }


  .leads-overview__metrics {
    grid-template-columns:
      repeat(
        5,
        minmax(0, 1fr)
      );
  }


  .leads-page-head__pulse {
    display: none;
  }


  .leads-toolbar {
    align-items: stretch;
    flex-direction: column;
  }


  .leads-toolbar__secondary {
    justify-content:
      space-between;
  }


  .leads-toolbar__views {
    flex: 1 1 auto;
  }


  .leads-toolbar-views {
    width: fit-content;
  }
}


@media (
  max-width: 1120px
) {
  .leads-page-head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .leads-page-head__actions {
    width: 100%;

    justify-content:
      space-between;
  }


  .leads-overview__metrics {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }


  .leads-filters__grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }
}


@media (
  max-width: 820px
) {
  .leads-page {
    gap: 12px;

    padding:
      14px;
  }


  .leads-page-head {
    gap: 15px;

    padding-bottom: 14px;
  }


  .leads-page-head__title h1 {
    font-size: 25px;
  }


  .leads-page-head__title p {
    font-size: 13px;
  }


  .leads-page-head__actions {
    align-items: stretch;

    flex-direction:
      column;
  }


  .leads-page-head__secondary-actions {
    display: grid;

    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    width: 100%;
  }


  .leads-page-head__actions
  > .leads-action-button--new {
    width: 100%;
  }


  .leads-overview__metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .leads-overview__hero {
    min-height: 112px;
  }


  .leads-toolbar__primary {
    width: 100%;
  }


  .leads-toolbar__search {
    width: 100%;
  }


  .leads-toolbar__secondary {
    align-items: stretch;

    flex-direction:
      column;
  }


  .leads-toolbar__views {
    width: 100%;
  }


  .leads-toolbar-views {
    display: grid;

    grid-template-columns:
      repeat(
        5,
        minmax(0, 1fr)
      );

    width: 100%;
  }


  .leads-toolbar-view {
    min-width: 0;

    padding:
      0 4px;
  }


  .leads-toolbar-view span {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
  }


  .leads-toolbar__display {
    justify-content:
      space-between;

    width: 100%;
  }


  .leads-filters__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}


@media (
  max-width: 560px
) {
  .leads-page {
    gap: 10px;

    padding:
      10px;
  }


  .leads-page-head__eyebrow {
    font-size: 10px;
  }


  .leads-page-head__title h1 {
    font-size: 22px;
  }


  .leads-page-head__title p {
    font-size: 12px;
    line-height: 1.45;
  }


  .leads-page-head__secondary-actions {
    gap: 5px;
  }


  .leads-page-head__secondary-actions
  .leads-action-button {
    min-width: 0;

    padding:
      0 8px;

    font-size: 11px;
  }


  .leads-page-head__secondary-actions
  .leads-action-button svg {
    width: 14px;
    height: 14px;
  }


  .leads-overview__hero {
    align-items: flex-start;

    min-height: auto;

    padding: 14px;
  }


  .leads-overview__hero-copy > strong {
    font-size: 28px;
  }


  .leads-overview__conversion {
    padding-left: 12px;
  }


  .leads-overview__metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 7px;
  }


  .leads-overview-card {
    min-height: 108px;

    padding: 12px;
  }


  .leads-overview-card:last-child {
    grid-column:
      1 / -1;
  }


  .leads-overview-card__content strong {
    font-size: 21px;
  }


  .leads-overview-card__content small {
    white-space: normal;
  }


  .leads-toolbar {
    padding: 7px;
  }


  .leads-toolbar__primary {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    gap: 6px;
  }


  .leads-toolbar__search {
    min-width: 0;
  }


  .leads-filter-trigger {
    width: 38px;

    padding: 0;
  }


  .leads-filter-trigger > span {
    display: none;
  }


  .leads-filter-trigger strong {
    position: absolute;

    top: -4px;
    right: -4px;

    min-width: 16px;
    height: 16px;

    padding: 0 4px;

    border:
      2px solid
      var(--leads-surface);

    font-size: 8px;
  }


  .leads-toolbar-views {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    gap: 2px;
  }


  .leads-toolbar-view:nth-child(4),
  .leads-toolbar-view:nth-child(5) {
    grid-column:
      auto;
  }


  .leads-toolbar-view {
    min-height: 32px;

    font-size: 10px;
  }


  .leads-toolbar-view svg {
    width: 13px;
    height: 13px;
  }


  .leads-filters__grid {
    grid-template-columns:
      1fr;
  }


  .leads-filter-item__control select {
    font-size: 13px;
  }


  /*
   * MOBILE:
   * PROHIBIMOS CUALQUIER SCROLL HORIZONTAL
   */

  .leads-page,
  .leads-main,
  .leads-overview,
  .leads-toolbar,
  .leads-toolbar__primary,
  .leads-toolbar__secondary,
  .leads-toolbar__views,
  .leads-filters,
  .leads-filters__grid {
    max-width: 100%;
    min-width: 0;

    overflow-x: clip;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion: reduce
) {
  .leads-workspace *,
  .leads-workspace *::before,
  .leads-workspace *::after {
    scroll-behavior: auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}/* =========================================================
   DATASET / TABLA
   ========================================================= */

.leads-dataset {
  position: relative;

  width: 100%;
  min-width: 0;

  overflow: visible;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    var(--leads-radius-lg);

  background:
    var(--leads-surface);

  box-shadow:
    var(--leads-shadow-sm);
}


.leads-dataset__head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  min-height: 62px;

  padding:
    13px 15px;

  border-bottom:
    1px solid
    var(--leads-border);
}


.leads-dataset__identity {
  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;
}


.leads-dataset__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  flex: 0 0 auto;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    9px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text-soft);
}


.leads-dataset__identity > div {
  display: flex;
  flex-direction: column;

  min-width: 0;
}


.leads-dataset__identity strong {
  color:
    var(--leads-text);

  font-size: 13px;
  font-weight: 760;
}


.leads-dataset__identity span {
  margin-top: 2px;

  color:
    var(--leads-text-muted);

  font-size: 11px;
  font-weight: 580;
}


.leads-dataset__meta {
  display: flex;
  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

  justify-content: flex-end;
}


.leads-dataset__meta-item {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  min-height: 28px;

  padding:
    0 8px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    7px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text-muted);

  font-size: 10px;
  font-weight: 650;

  white-space: nowrap;
}


.leads-dataset__meta-item strong {
  color:
    var(--leads-text);

  font-weight: 800;
}


/* =========================================================
   TABLE
   ========================================================= */

.leads-table-scroll {
  width: 100%;
  min-width: 0;

  overflow-x: auto;
  overflow-y: visible;

  scrollbar-width: thin;
  scrollbar-color:
    var(--leads-border-strong)
    transparent;
}


.leads-table-scroll::-webkit-scrollbar {
  height: 7px;
}


.leads-table-scroll::-webkit-scrollbar-track {
  background:
    transparent;
}


.leads-table-scroll::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    var(--leads-border-strong);
}


.leads-table {
  width: 100%;
  min-width: 1060px;

  border-collapse:
    separate;

  border-spacing: 0;

  table-layout: fixed;
}


.leads-table thead {
  background:
    var(--leads-surface-soft);
}


.leads-table th {
  height: 42px;

  padding:
    0 13px;

  border-bottom:
    1px solid
    var(--leads-border);

  color:
    var(--leads-text-muted);

  font-size: 10px;
  font-weight: 760;

  line-height: 1;

  text-align: left;

  text-transform: uppercase;
  letter-spacing: 0.045em;
}


.leads-table th:nth-child(1) {
  width: 24%;
}


.leads-table th:nth-child(2) {
  width: 14%;
}


.leads-table th:nth-child(3) {
  width: 16%;
}


.leads-table th:nth-child(4) {
  width: 15%;
}


.leads-table th:nth-child(5) {
  width: 14%;
}


.leads-table th:nth-child(6) {
  width: 14%;
}


.leads-table th:nth-child(7) {
  width: 52px;
}


.leads-table td {
  position: relative;

  height: 74px;

  padding:
    10px 13px;

  border-bottom:
    1px solid
    var(--leads-border);

  color:
    var(--leads-text);

  vertical-align: middle;
}


.leads-table tbody tr:last-child td {
  border-bottom: 0;
}


.leads-table-row {
  position: relative;

  transition:
    background var(--leads-transition);
}


.leads-table-row:hover {
  background:
    var(--leads-surface-soft);
}


.leads-table-row {
  animation:
    leadsRowIn
    180ms ease-out both;

  animation-delay:
    calc(
      min(
        var(--row-index, 0),
        8
      ) *
      16ms
    );
}


@keyframes leadsRowIn {
  from {
    opacity: 0;
    transform:
      translateY(3px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   COMPANY CELL
   ========================================================= */

.leads-company {
  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;
}


.leads-company__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  border:
    1px solid
    var(--leads-border-strong);

  border-radius:
    10px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: -0.01em;
}


.leads-company__content {
  display: flex;
  flex-direction: column;

  gap: 4px;

  min-width: 0;
}


.leads-company__content > strong {
  overflow: hidden;

  color:
    var(--leads-text);

  font-size: 12.5px;
  font-weight: 740;
  line-height: 1.25;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.leads-company__content > div {
  display: flex;
  align-items: center;

  gap: 6px;

  min-width: 0;
}


.leads-company__content > div span {
  overflow: hidden;

  color:
    var(--leads-text-muted);

  font-size: 10.5px;
  font-weight: 590;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.leads-company__content > div i {
  width: 3px;
  height: 3px;

  flex: 0 0 3px;

  border-radius:
    50%;

  background:
    var(--leads-border-dark);
}


/* =========================================================
   STATUS
   ========================================================= */

.leads-status-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 5px;
}


.leads-status {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  min-height: 24px;

  padding:
    0 8px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    999px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text-soft);

  font-size: 10px;
  font-weight: 740;

  white-space: nowrap;
}


.leads-status__dot {
  width: 6px;
  height: 6px;

  flex: 0 0 6px;

  border-radius:
    50%;

  background:
    var(--leads-text-faint);
}


.leads-status--nuevo {
  border-color:
    var(--leads-blue-border);

  background:
    var(--leads-blue-bg);

  color:
    var(--leads-blue);
}


.leads-status--nuevo
.leads-status__dot {
  background:
    var(--leads-blue);
}


.leads-status--contactado {
  border-color:
    var(--leads-violet-border);

  background:
    var(--leads-violet-bg);

  color:
    var(--leads-violet);
}


.leads-status--contactado
.leads-status__dot {
  background:
    var(--leads-violet);
}


.leads-status--interesado,
.leads-status--convertido {
  border-color:
    var(--leads-success-border);

  background:
    var(--leads-success-bg);

  color:
    var(--leads-success);
}


.leads-status--interesado
.leads-status__dot,
.leads-status--convertido
.leads-status__dot {
  background:
    var(--leads-success);
}


.leads-status--en-seguimiento,
.leads-status--negociacion {
  border-color:
    var(--leads-warning-border);

  background:
    var(--leads-warning-bg);

  color:
    var(--leads-warning);
}


.leads-status--en-seguimiento
.leads-status__dot,
.leads-status--negociacion
.leads-status__dot {
  background:
    var(--leads-warning);
}


.leads-status--descartado {
  border-color:
    var(--leads-danger-border);

  background:
    var(--leads-danger-bg);

  color:
    var(--leads-danger);
}


.leads-status--descartado
.leads-status__dot {
  background:
    var(--leads-danger);
}


/* =========================================================
   PRIORITY
   ========================================================= */

.leads-priority {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  color:
    var(--leads-text-muted);

  font-size: 10px;
  font-weight: 680;
}


.leads-priority__dot {
  width: 5px;
  height: 5px;

  border-radius:
    50%;

  background:
    var(--leads-text-faint);
}


.leads-priority--alta {
  color:
    var(--leads-warning);
}


.leads-priority--alta
.leads-priority__dot {
  background:
    var(--leads-warning);
}


.leads-priority--urgente {
  color:
    var(--leads-danger);
}


.leads-priority--urgente
.leads-priority__dot {
  background:
    var(--leads-danger);
}


.leads-priority--baja {
  color:
    var(--leads-blue);
}


.leads-priority--baja
.leads-priority__dot {
  background:
    var(--leads-blue);
}


/* =========================================================
   CONTACT CELL
   ========================================================= */

.leads-table-contact {
  display: flex;
  flex-direction: column;

  gap: 3px;

  min-width: 0;
}


.leads-table-contact strong {
  overflow: hidden;

  color:
    var(--leads-text);

  font-size: 11.5px;
  font-weight: 690;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.leads-table-contact span {
  overflow: hidden;

  color:
    var(--leads-text-muted);

  font-size: 10.5px;
  font-weight: 560;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   LOCATION CELL
   ========================================================= */

.leads-table-location {
  display: flex;
  align-items: center;

  gap: 7px;

  min-width: 0;
}


.leads-table-location__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 26px;
  height: 26px;

  flex: 0 0 26px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    7px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text-muted);
}


.leads-table-location > div {
  display: flex;
  flex-direction: column;

  gap: 2px;

  min-width: 0;
}


.leads-table-location strong {
  overflow: hidden;

  color:
    var(--leads-text);

  font-size: 11px;
  font-weight: 670;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.leads-table-location span {
  overflow: hidden;

  color:
    var(--leads-text-muted);

  font-size: 10px;
  font-weight: 560;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   OWNER
   ========================================================= */

.leads-table-owner {
  display: flex;
  align-items: center;

  gap: 7px;

  min-width: 0;
}


.leads-table-owner > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 27px;
  height: 27px;

  flex: 0 0 27px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    50%;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text-soft);

  font-size: 9px;
  font-weight: 800;
}


.leads-table-owner strong {
  overflow: hidden;

  color:
    var(--leads-text);

  font-size: 10.5px;
  font-weight: 670;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   NEXT ACTION
   ========================================================= */

.leads-table-next {
  display: flex;
  flex-direction: column;

  gap: 4px;

  min-width: 0;
}


.leads-table-next strong {
  overflow: hidden;

  color:
    var(--leads-text);

  font-size: 11px;
  font-weight: 680;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.leads-table-next span {
  display: inline-flex;
  align-items: center;

  gap: 4px;

  color:
    var(--leads-text-muted);

  font-size: 10px;
  font-weight: 620;
}


.leads-table-next--today span {
  color:
    var(--leads-warning);
}


.leads-table-next--overdue span {
  color:
    var(--leads-danger);

  font-weight: 720;
}


.leads-table-next--upcoming span {
  color:
    var(--leads-blue);
}


/* =========================================================
   ROW ACTIONS
   ========================================================= */

.leads-row-actions {
  position: relative;

  display: flex;
  justify-content: flex-end;
}


.leads-row-menu-trigger,
.leads-pipeline-card__menu {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;

  padding: 0;

  border:
    1px solid
    transparent;

  border-radius:
    8px;

  background:
    transparent;

  color:
    var(--leads-text-muted);

  cursor: pointer;

  transition:
    background var(--leads-transition),
    border-color var(--leads-transition),
    color var(--leads-transition);
}


.leads-row-menu-trigger:hover,
.leads-row-menu-trigger.is-active,
.leads-pipeline-card__menu:hover {
  border-color:
    var(--leads-border);

  background:
    var(--leads-surface-muted);

  color:
    var(--leads-text);
}


.leads-row-menu {
  position: absolute;

  top: calc(100% + 5px);
  right: 0;

  z-index: 90;

  display: flex;
  flex-direction: column;

  width: 205px;

  padding: 5px;

  border:
    1px solid
    var(--leads-border-strong);

  border-radius:
    10px;

  background:
    var(--leads-surface);

  box-shadow:
    var(--leads-shadow-md);

  animation:
    leadsMenuIn
    120ms ease-out both;
}


@keyframes leadsMenuIn {
  from {
    opacity: 0;
    transform:
      translateY(-3px)
      scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


.leads-row-menu button {
  appearance: none;

  display: flex;
  align-items: center;

  gap: 8px;

  width: 100%;
  min-height: 34px;

  padding:
    0 9px;

  border: 0;
  border-radius:
    7px;

  background:
    transparent;

  color:
    var(--leads-text-soft);

  font-size: 11.5px;
  font-weight: 650;

  text-align: left;

  cursor: pointer;

  transition:
    background var(--leads-transition),
    color var(--leads-transition);
}


.leads-row-menu button:hover {
  background:
    var(--leads-surface-muted);

  color:
    var(--leads-text);
}


.leads-row-menu button.is-danger {
  color:
    var(--leads-danger);
}


.leads-row-menu button.is-danger:hover {
  background:
    var(--leads-danger-bg);

  color:
    var(--leads-danger);
}


.leads-row-menu__divider {
  height: 1px;

  margin:
    4px 2px;

  background:
    var(--leads-border);
}


/* =========================================================
   PAGINATION
   ========================================================= */

.leads-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  min-height: 52px;

  padding:
    9px 13px;

  border-top:
    1px solid
    var(--leads-border);

  background:
    var(--leads-surface-soft);
}


.leads-table-footer__summary {
  display: flex;
  align-items: center;

  gap: 4px;

  color:
    var(--leads-text-muted);

  font-size: 10.5px;
  font-weight: 580;
}


.leads-table-footer__summary strong {
  color:
    var(--leads-text);

  font-weight: 750;
}


.leads-table-footer__pager {
  display: flex;
  align-items: center;

  gap: 7px;
}


.leads-table-footer__pager button {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;

  padding: 0;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface);

  color:
    var(--leads-text-soft);

  cursor: pointer;

  transition:
    background var(--leads-transition),
    border-color var(--leads-transition),
    color var(--leads-transition);
}


.leads-table-footer__pager button:hover:not(:disabled) {
  border-color:
    var(--leads-border-strong);

  background:
    var(--leads-surface-muted);

  color:
    var(--leads-text);
}


.leads-table-footer__pager button:disabled {
  opacity: 0.4;
  cursor: default;
}


.leads-table-footer__page {
  display: flex;
  align-items: center;

  gap: 4px;

  color:
    var(--leads-text-muted);

  font-size: 10.5px;
  font-weight: 590;
}


.leads-table-footer__page strong {
  color:
    var(--leads-text);

  font-weight: 760;
}


/* =========================================================
   EMPTY
   ========================================================= */

.leads-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 12px;

  min-height: 320px;

  padding:
    36px 20px;

  text-align: center;
}


.leads-empty__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}


.leads-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    16px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text-muted);
}


.leads-empty__content {
  display: flex;
  flex-direction: column;

  gap: 5px;
}


.leads-empty strong {
  color:
    var(--leads-text);

  font-size: 14px;
  font-weight: 760;
}


.leads-empty p {
  max-width: 390px;

  margin: 0;

  color:
    var(--leads-text-muted);

  font-size: 12px;
  line-height: 1.5;
}


/* =========================================================
   SKELETON
   ========================================================= */

.leads-table-skeleton {
  pointer-events: none;
}


.leads-table-skeleton td {
  height: 74px;
}


.leads-skeleton-company {
  display: flex;
  align-items: center;

  gap: 10px;
}


.leads-skeleton-company > span,
.leads-skeleton-avatar {
  width: 36px;
  height: 36px;

  flex: 0 0 auto;

  border-radius:
    10px;

  background:
    var(--leads-surface-muted);

  animation:
    leadsSkeleton
    1.15s ease-in-out infinite alternate;
}


.leads-skeleton-company > div {
  display: flex;
  flex-direction: column;

  gap: 6px;

  width: 100%;
}


.leads-skeleton-company i,
.leads-skeleton-line,
.leads-skeleton-pill,
.leads-skeleton-button,
.leads-skeleton-panel {
  display: block;

  background:
    var(--leads-surface-muted);

  animation:
    leadsSkeleton
    1.15s ease-in-out infinite alternate;
}


.leads-skeleton-company i:first-child {
  width: 78%;
  height: 9px;

  border-radius:
    5px;
}


.leads-skeleton-company i:last-child {
  width: 50%;
  height: 7px;

  border-radius:
    5px;
}


.leads-skeleton-line {
  width: 76%;
  height: 9px;

  border-radius:
    5px;
}


.leads-skeleton-line--title {
  width: 220px;
  max-width: 75%;
  height: 15px;
}


.leads-skeleton-line--subtitle {
  width: 150px;
  max-width: 55%;
  height: 9px;
}


.leads-skeleton-pill {
  width: 76px;
  height: 22px;

  border-radius:
    999px;
}


.leads-skeleton-button {
  width: 110px;
  height: 36px;

  border-radius:
    8px;
}


.leads-skeleton-panel {
  width: 100%;
  min-height: 150px;

  border-radius:
    12px;
}


.leads-skeleton-panel--hero {
  min-height: 110px;
}


.leads-skeleton-panel--wide {
  min-height: 220px;
}


.leads-skeleton-avatar--xl {
  width: 54px;
  height: 54px;

  border-radius:
    14px;
}


@keyframes leadsSkeleton {
  from {
    opacity: 0.55;
  }

  to {
    opacity: 1;
  }
}


/* =========================================================
   PIPELINE
   ========================================================= */

.leads-pipeline-shell {
  width: 100%;
  min-width: 0;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    var(--leads-radius-lg);

  background:
    var(--leads-surface);

  box-shadow:
    var(--leads-shadow-sm);
}


.leads-pipeline-shell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  min-height: 64px;

  padding:
    13px 15px;

  border-bottom:
    1px solid
    var(--leads-border);
}


.leads-pipeline-shell__identity {
  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;
}


.leads-pipeline-shell__identity > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    9px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text-soft);
}


.leads-pipeline-shell__identity > div {
  display: flex;
  flex-direction: column;

  gap: 2px;
}


.leads-pipeline-shell__identity strong {
  color:
    var(--leads-text);

  font-size: 13px;
  font-weight: 760;
}


.leads-pipeline-shell__identity small {
  color:
    var(--leads-text-muted);

  font-size: 10.5px;
  font-weight: 560;
}


.leads-pipeline-shell__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 1px;
}


.leads-pipeline-shell__summary span {
  color:
    var(--leads-text-faint);

  font-size: 9.5px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.045em;
}


.leads-pipeline-shell__summary strong {
  color:
    var(--leads-text);

  font-size: 17px;
  font-weight: 760;
}


/* =========================================================
   PIPELINE GRID
   ========================================================= */

.leads-pipeline {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap: 0;

  width: 100%;
  min-width: 0;
}


.leads-pipeline-column {
  min-width: 0;

  border-right:
    1px solid
    var(--leads-border);
}


.leads-pipeline-column:last-child {
  border-right: 0;
}


.leads-pipeline-column__head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  min-height: 54px;

  padding:
    10px;

  border-bottom:
    1px solid
    var(--leads-border);

  background:
    var(--leads-surface-soft);
}


.leads-pipeline-column__head > div {
  display: flex;
  align-items: center;

  gap: 7px;

  min-width: 0;
}


.leads-pipeline-column__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 27px;
  height: 27px;

  flex: 0 0 27px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    7px;

  background:
    var(--leads-surface);

  color:
    var(--leads-text-muted);
}


.leads-pipeline-column__head > div > div {
  display: flex;
  flex-direction: column;

  gap: 1px;

  min-width: 0;
}


.leads-pipeline-column__head strong {
  overflow: hidden;

  color:
    var(--leads-text);

  font-size: 10.5px;
  font-weight: 750;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.leads-pipeline-column__head small {
  color:
    var(--leads-text-faint);

  font-size: 8.5px;
  font-weight: 600;
}


.leads-pipeline-column__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 22px;
  height: 22px;

  padding: 0 6px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    999px;

  background:
    var(--leads-surface);

  color:
    var(--leads-text-soft);

  font-size: 9px;
  font-weight: 800;
}


.leads-pipeline-column__body {
  display: flex;
  flex-direction: column;

  gap: 8px;

  min-height: 300px;

  padding:
    8px;

  background:
    var(--leads-surface-soft);
}


/* =========================================================
   PIPELINE CARD
   ========================================================= */

.leads-pipeline-card {
  position: relative;

  display: flex;
  flex-direction: column;

  gap: 12px;

  min-width: 0;

  padding:
    11px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    10px;

  background:
    var(--leads-surface);

  cursor: pointer;

  box-shadow:
    var(--leads-shadow-sm);

  transition:
    transform var(--leads-transition),
    border-color var(--leads-transition),
    background var(--leads-transition);
}


.leads-pipeline-card:hover {
  transform:
    translateY(-1px);

  border-color:
    var(--leads-border-strong);

  background:
    var(--leads-surface);
}


.leads-pipeline-card.is-menu-open {
  z-index: 25;
}


.leads-pipeline-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 8px;
}


.leads-pipeline-card__identity {
  display: flex;
  align-items: center;

  gap: 8px;

  min-width: 0;
}


.leads-pipeline-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;

  flex: 0 0 31px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text);

  font-size: 9px;
  font-weight: 800;
}


.leads-pipeline-card__identity > div {
  min-width: 0;
}


.leads-pipeline-card__identity small {
  display: block;

  margin-bottom: 2px;

  overflow: hidden;

  color:
    var(--leads-text-muted);

  font-size: 8.5px;
  font-weight: 650;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.leads-pipeline-card__identity strong {
  display: block;

  overflow: hidden;

  color:
    var(--leads-text);

  font-size: 11px;
  font-weight: 730;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.leads-pipeline-card__menu-wrap {
  position: relative;

  flex: 0 0 auto;
}


.leads-row-menu--pipeline {
  top: 34px;
  right: -4px;

  width: 195px;
}


.leads-pipeline-card__body {
  display: flex;
  flex-direction: column;

  gap: 9px;
}


.leads-pipeline-card__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 7px;
}


.leads-pipeline-card__potential {
  display: inline-flex;
  align-items: center;

  gap: 4px;

  color:
    var(--leads-text-muted);

  font-size: 9.5px;
  font-weight: 650;
}


.leads-pipeline-card__meta {
  display: flex;
  flex-direction: column;

  gap: 5px;
}


.leads-pipeline-card__meta span {
  display: flex;
  align-items: center;

  gap: 5px;

  min-width: 0;

  overflow: hidden;

  color:
    var(--leads-text-muted);

  font-size: 9.5px;
  font-weight: 570;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.leads-pipeline-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  padding-top: 9px;

  border-top:
    1px solid
    var(--leads-border);
}


.leads-pipeline-card__next {
  display: flex;
  align-items: center;

  gap: 4px;

  min-width: 0;

  color:
    var(--leads-text-muted);

  font-size: 9px;
  font-weight: 620;
}


.leads-pipeline-card__next span {
  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.leads-pipeline-card__next--overdue {
  color:
    var(--leads-danger);
}


.leads-pipeline-card__next--today {
  color:
    var(--leads-warning);
}


.leads-pipeline-card__date {
  flex: 0 0 auto;

  color:
    var(--leads-text-muted);

  font-size: 9px;
  font-weight: 700;
}


.leads-pipeline-card__date--overdue {
  color:
    var(--leads-danger);
}


.leads-pipeline-card__date--today {
  color:
    var(--leads-warning);
}


.leads-pipeline-card__date--upcoming {
  color:
    var(--leads-blue);
}


/* =========================================================
   PIPELINE EMPTY
   ========================================================= */

.leads-pipeline-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 5px;

  min-height: 120px;

  padding:
    15px;

  border:
    1px dashed
    var(--leads-border);

  border-radius:
    9px;

  color:
    var(--leads-text-faint);

  text-align: center;
}


.leads-pipeline-empty > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.leads-pipeline-empty strong {
  color:
    var(--leads-text-muted);

  font-size: 10px;
  font-weight: 690;
}


.leads-pipeline-empty small {
  font-size: 8.5px;
  font-weight: 550;
}


/* =========================================================
   LOADING
   ========================================================= */

.leads-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 330px;

  padding: 30px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    var(--leads-radius-lg);

  background:
    var(--leads-surface);
}


.leads-loading-state strong {
  color:
    var(--leads-text);

  font-size: 12px;
  font-weight: 720;
}


.leads-loading-state small {
  color:
    var(--leads-text-muted);

  font-size: 10px;
}


.leads-spinner {
  display: inline-block;

  width: 15px;
  height: 15px;

  flex: 0 0 15px;

  border:
    2px solid
    var(--leads-border);

  border-top-color:
    var(--leads-text);

  border-radius:
    50%;

  animation:
    leadsSpin
    650ms linear infinite;
}


@keyframes leadsSpin {
  to {
    transform:
      rotate(360deg);
  }
}


/* =========================================================
   DETAIL ROOT
   ========================================================= */

.leads-detail-root {
  position: fixed;

  inset: 0;

  z-index: 100000;

  display: none;

  pointer-events: none;
}


.leads-detail-root.is-open {
  display: block;

  pointer-events: auto;
}


.leads-detail-backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(0, 0, 0, 0.42);

  opacity: 0;

  transition:
    opacity 150ms ease-out;
}


.leads-detail-backdrop.is-visible {
  opacity: 1;
}


.leads-detail-workspace {
  position: absolute;

  inset:
    12px;

  display: flex;
  flex-direction: column;

  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    var(--leads-border-strong);

  border-radius:
    16px;

  background:
    var(--leads-surface);

  box-shadow:
    var(--leads-shadow-lg);

  opacity: 0;

  transform:
    translateY(8px)
    scale(0.995);

  transition:
    opacity 150ms ease-out,
    transform 150ms ease-out;
}


.leads-detail-workspace.is-visible {
  opacity: 1;
  transform: none;
}


.leads-detail-workspace__content {
  width: 100%;
  min-width: 0;
  height: 100%;

  overflow: hidden;
}


body.leads-detail-open,
body.leads-modal-open {
  overflow: hidden !important;
}


/* =========================================================
   DETAIL LOADING
   ========================================================= */

.leads-detail-loading {
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;
}


.leads-detail-loading__head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  min-height: 84px;

  padding:
    15px 18px;

  border-bottom:
    1px solid
    var(--leads-border);
}


.leads-detail-loading__identity {
  display: flex;
  align-items: center;

  gap: 12px;

  min-width: 0;
}


.leads-detail-loading__identity > div {
  display: flex;
  flex-direction: column;

  gap: 7px;
}


.leads-detail-loading__body {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    290px;

  gap: 12px;

  flex: 1 1 auto;

  min-height: 0;

  padding: 14px;

  overflow: hidden;
}


.leads-detail-loading__main,
.leads-detail-loading__aside {
  display: flex;
  flex-direction: column;

  gap: 10px;

  min-width: 0;
}


.leads-detail-loading__grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;
}


/* =========================================================
   RESPONSIVE · TABLA / PIPELINE
   ========================================================= */

@media (
  max-width: 1180px
) {
  .leads-pipeline {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }


  .leads-pipeline-column:nth-child(3n) {
    border-right: 0;
  }


  .leads-pipeline-column:nth-child(n + 4) {
    border-top:
      1px solid
      var(--leads-border);
  }
}


@media (
  max-width: 820px
) {
  .leads-dataset__head,
  .leads-pipeline-shell__head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .leads-dataset__meta {
    width: 100%;

    justify-content:
      flex-start;
  }


  .leads-table-footer {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .leads-table-footer__pager {
    width: 100%;

    justify-content:
      space-between;
  }


  .leads-pipeline {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .leads-pipeline-column {
    border-right:
      1px solid
      var(--leads-border);

    border-top:
      1px solid
      var(--leads-border);
  }


  .leads-pipeline-column:nth-child(1),
  .leads-pipeline-column:nth-child(2) {
    border-top: 0;
  }


  .leads-pipeline-column:nth-child(2n) {
    border-right: 0;
  }


  .leads-detail-workspace {
    inset:
      7px;

    border-radius:
      13px;
  }
}


@media (
  max-width: 560px
) {
  /*
   * EN CELULAR NO USAMOS TABLA ANCHA.
   * CONVERTIMOS CADA <tr> EN TARJETA.
   * ASÍ NO HAY BARRA HORIZONTAL.
   */

  .leads-table-scroll {
    overflow:
      visible;

    width: 100%;
  }


  .leads-table {
    display: block;

    width: 100%;
    min-width: 0;
  }


  .leads-table thead {
    display: none;
  }


  .leads-table tbody {
    display: flex;
    flex-direction: column;

    gap: 8px;

    width: 100%;

    padding:
      8px;
  }


  .leads-table-row {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    width: 100%;
    min-width: 0;

    padding:
      11px;

    border:
      1px solid
      var(--leads-border);

    border-radius:
      11px;

    background:
      var(--leads-surface);

    box-shadow:
      var(--leads-shadow-sm);
  }


  .leads-table-row:hover {
    background:
      var(--leads-surface);
  }


  .leads-table td {
    display: block;

    width: auto;
    height: auto;
    min-width: 0;

    padding: 0;

    border: 0;
  }


  .leads-table td:nth-child(1) {
    grid-column:
      1 / 2;
  }


  .leads-table td:nth-child(7) {
    grid-column:
      2 / 3;

    grid-row:
      1 / 2;

    align-self:
      start;
  }


  .leads-table td:nth-child(2),
  .leads-table td:nth-child(3),
  .leads-table td:nth-child(4),
  .leads-table td:nth-child(5),
  .leads-table td:nth-child(6) {
    grid-column:
      1 / -1;

    margin-top: 10px;

    padding-top: 9px;

    border-top:
      1px solid
      var(--leads-border);
  }


  .leads-company__avatar {
    width: 38px;
    height: 38px;

    flex-basis: 38px;
  }


  .leads-company__content > strong {
    font-size: 13px;
  }


  .leads-status-stack {
    flex-direction: row;
    align-items: center;

    flex-wrap: wrap;
  }


  .leads-table-contact,
  .leads-table-next {
    gap: 2px;
  }


  .leads-table-location,
  .leads-table-owner {
    align-items: center;
  }


  .leads-row-menu {
    position: fixed;

    left: 10px;
    right: 10px;
    bottom: 10px;
    top: auto;

    width: auto;

    z-index: 100005;

    padding: 7px;

    border-radius:
      12px;

    box-shadow:
      var(--leads-shadow-lg);
  }


  .leads-row-menu button {
    min-height: 40px;

    font-size: 12px;
  }


  .leads-table-footer {
    padding: 10px;
  }


  .leads-table-footer__summary {
    flex-wrap: wrap;
  }


  /*
   * PIPELINE MOBILE:
   * UNA COLUMNA.
   * SIN SCROLL HORIZONTAL.
   */

  .leads-pipeline {
    display: flex;
    flex-direction: column;

    width: 100%;
  }


  .leads-pipeline-column,
  .leads-pipeline-column:nth-child(n) {
    width: 100%;
    min-width: 0;

    border-right: 0;

    border-top:
      1px solid
      var(--leads-border);
  }


  .leads-pipeline-column:first-child {
    border-top: 0;
  }


  .leads-pipeline-column__body {
    min-height: 0;
  }


  .leads-pipeline-card {
    width: 100%;
    min-width: 0;
  }


  .leads-pipeline-card__identity {
    min-width: 0;
  }


  .leads-pipeline-card__footer {
    align-items: flex-start;
  }


  .leads-pipeline-card__next {
    min-width: 0;
  }


  /*
   * CERO BARRA HORIZONTAL EN CELULAR
   */

  .leads-dataset,
  .leads-table-scroll,
  .leads-table,
  .leads-table tbody,
  .leads-table-row,
  .leads-pipeline-shell,
  .leads-pipeline,
  .leads-pipeline-column,
  .leads-pipeline-column__body,
  .leads-pipeline-card {
    max-width: 100%;
    min-width: 0;

    overflow-x: clip;
  }


  .leads-detail-workspace {
    inset: 0;

    border: 0;
    border-radius: 0;
  }
}/* =========================================================
   DETAIL LAYOUT
   ========================================================= */

.leads-detail-layout {
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;

  background:
    var(--leads-surface);
}


/* =========================================================
   DETAIL HEADER
   ========================================================= */

.leads-detail-head {
  position: relative;

  z-index: 8;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  min-width: 0;
  min-height: 82px;

  padding:
    14px 16px;

  border-bottom:
    1px solid
    var(--leads-border);

  background:
    var(--leads-surface);
}


.leads-detail-head__left {
  display: flex;
  align-items: center;

  gap: 12px;

  min-width: 0;
}


.leads-detail-head__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  flex: 0 0 48px;

  border:
    1px solid
    var(--leads-border-strong);

  border-radius:
    12px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text);

  font-size: 13px;
  font-weight: 800;
}


.leads-detail-head__identity {
  display: flex;
  flex-direction: column;

  gap: 5px;

  min-width: 0;
}


.leads-detail-head__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 6px;
}


.leads-detail-head__eyebrow > span:first-child {
  color:
    var(--leads-text-faint);

  font-size: 9px;
  font-weight: 780;

  letter-spacing: 0.055em;
}


.leads-detail-head__identity h2 {
  margin: 0;

  overflow: hidden;

  color:
    var(--leads-text);

  font-size:
    clamp(
      19px,
      1.8vw,
      27px
    );

  font-weight: 770;
  line-height: 1.1;

  letter-spacing: -0.03em;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.leads-detail-head__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 6px;

  min-width: 0;
}


.leads-detail-head__meta span {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  color:
    var(--leads-text-muted);

  font-size: 10px;
  font-weight: 600;
}


.leads-detail-head__meta i {
  width: 3px;
  height: 3px;

  border-radius:
    50%;

  background:
    var(--leads-border-dark);
}


/* =========================================================
   DETAIL HEADER ACTIONS
   ========================================================= */

.leads-detail-head__right {
  display: flex;
  align-items: center;

  gap: 7px;

  flex: 0 0 auto;
}


.leads-detail-action,
.leads-detail-icon-action {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  min-height: 36px;

  padding:
    0 11px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface);

  color:
    var(--leads-text-soft);

  font-size: 11px;
  font-weight: 700;

  white-space: nowrap;

  cursor: pointer;

  transition:
    background var(--leads-transition),
    border-color var(--leads-transition),
    color var(--leads-transition),
    transform var(--leads-transition);
}


.leads-detail-action:hover,
.leads-detail-icon-action:hover {
  border-color:
    var(--leads-border-strong);

  background:
    var(--leads-surface-muted);

  color:
    var(--leads-text);
}


.leads-detail-action:active,
.leads-detail-icon-action:active {
  transform:
    translateY(1px);
}


.leads-detail-action--primary {
  border-color:
    var(--leads-primary);

  background:
    var(--leads-primary);

  color:
    var(--leads-primary-text);
}


.leads-detail-action--primary:hover {
  border-color:
    var(--leads-primary-hover);

  background:
    var(--leads-primary-hover);

  color:
    var(--leads-primary-text);
}


.leads-detail-icon-action {
  width: 36px;
  padding: 0;
}


.leads-detail-close {
  margin-left: 2px;
}


/* =========================================================
   DETAIL MORE
   ========================================================= */

.leads-detail-more-wrap {
  position: relative;
}


.leads-detail-more-menu {
  position: absolute;

  top: calc(100% + 6px);
  right: 0;

  z-index: 80;

  display: flex;
  flex-direction: column;

  width: 220px;

  padding: 5px;

  border:
    1px solid
    var(--leads-border-strong);

  border-radius:
    10px;

  background:
    var(--leads-surface);

  box-shadow:
    var(--leads-shadow-md);

  animation:
    leadsMenuIn
    120ms ease-out both;
}


.leads-detail-more-menu button {
  appearance: none;

  display: flex;
  align-items: center;

  gap: 8px;

  width: 100%;
  min-height: 35px;

  padding:
    0 9px;

  border: 0;
  border-radius:
    7px;

  background:
    transparent;

  color:
    var(--leads-text-soft);

  font-size: 11.5px;
  font-weight: 650;

  text-align: left;

  cursor: pointer;

  transition:
    background var(--leads-transition),
    color var(--leads-transition);
}


.leads-detail-more-menu button:hover {
  background:
    var(--leads-surface-muted);

  color:
    var(--leads-text);
}


.leads-detail-more-menu button.is-danger {
  color:
    var(--leads-danger);
}


.leads-detail-more-menu button.is-danger:hover {
  background:
    var(--leads-danger-bg);

  color:
    var(--leads-danger);
}


.leads-detail-more-menu__divider {
  height: 1px;

  margin:
    4px 2px;

  background:
    var(--leads-border);
}


/* =========================================================
   DETAIL TABS
   ========================================================= */

.leads-detail-tabs {
  position: relative;

  z-index: 6;

  flex: 0 0 auto;

  width: 100%;
  min-width: 0;

  padding:
    0 16px;

  border-bottom:
    1px solid
    var(--leads-border);

  background:
    var(--leads-surface);
}


.leads-detail-tabs__rail {
  display: flex;
  align-items: center;

  gap: 2px;

  width: 100%;
  min-width: 0;
}


.leads-detail-tab {
  appearance: none;

  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  min-height: 44px;

  padding:
    0 11px;

  border: 0;

  background:
    transparent;

  color:
    var(--leads-text-muted);

  font-size: 11px;
  font-weight: 700;

  white-space: nowrap;

  cursor: pointer;

  transition:
    color var(--leads-transition),
    background var(--leads-transition);
}


.leads-detail-tab::after {
  content: "";

  position: absolute;

  left: 10px;
  right: 10px;
  bottom: -1px;

  height: 2px;

  border-radius:
    2px 2px 0 0;

  background:
    transparent;
}


.leads-detail-tab:hover {
  color:
    var(--leads-text);
}


.leads-detail-tab.is-active {
  color:
    var(--leads-text);
}


.leads-detail-tab.is-active::after {
  background:
    var(--leads-text);
}


.leads-detail-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.leads-detail-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 18px;
  height: 18px;

  padding:
    0 5px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    999px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text-muted);

  font-size: 8.5px;
  font-weight: 800;
}


.leads-detail-tab.is-active
.leads-detail-tab__count {
  border-color:
    var(--leads-border-strong);

  color:
    var(--leads-text);
}


/* =========================================================
   DETAIL BODY
   ========================================================= */

.leads-detail-body {
  flex: 1 1 auto;

  width: 100%;
  min-width: 0;
  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;

  background:
    var(--leads-bg);

  scrollbar-width: thin;
  scrollbar-color:
    var(--leads-border-strong)
    transparent;
}


.leads-detail-body::-webkit-scrollbar {
  width: 7px;
}


.leads-detail-body::-webkit-scrollbar-track {
  background:
    transparent;
}


.leads-detail-body::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    var(--leads-border-strong);
}


.leads-detail-tab-content {
  width: 100%;
  min-width: 0;

  padding:
    14px;

  opacity: 0;
  transform:
    translateY(3px);

  transition:
    opacity 130ms ease-out,
    transform 130ms ease-out;
}


.leads-detail-tab-content.is-visible {
  opacity: 1;
  transform: none;
}


/* =========================================================
   DETAIL SUMMARY GRID
   ========================================================= */

.leads-detail-summary {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    300px;

  gap: 12px;

  width: 100%;
  min-width: 0;
}


.leads-detail-summary__main,
.leads-detail-summary__aside {
  display: flex;
  flex-direction: column;

  gap: 12px;

  min-width: 0;
}


.leads-detail-summary__two {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;
}


/* =========================================================
   DETAIL CARDS
   ========================================================= */

.leads-detail-card,
.leads-detail-side-card,
.leads-next-action-panel,
.leads-detail-page-section {
  min-width: 0;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    var(--leads-radius-md);

  background:
    var(--leads-surface);

  box-shadow:
    var(--leads-shadow-sm);
}


.leads-detail-card,
.leads-detail-side-card {
  padding:
    14px;
}


.leads-detail-page-section {
  padding:
    15px;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.leads-detail-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 13px;
}


.leads-detail-section-head__copy {
  min-width: 0;
}


.leads-detail-section-head small {
  display: block;

  margin-bottom: 3px;

  color:
    var(--leads-text-faint);

  font-size: 9px;
  font-weight: 780;

  text-transform: uppercase;
  letter-spacing: 0.055em;
}


.leads-detail-section-head h3 {
  margin: 0;

  color:
    var(--leads-text);

  font-size: 13px;
  font-weight: 760;
  line-height: 1.25;
}


.leads-detail-section-head p {
  margin:
    4px 0 0;

  color:
    var(--leads-text-muted);

  font-size: 10.5px;
  font-weight: 540;
  line-height: 1.45;
}


.leads-detail-section-head__action {
  flex: 0 0 auto;
}


/* =========================================================
   NEXT ACTION PANEL
   ========================================================= */

.leads-next-action-panel {
  display: flex;
  align-items: stretch;
  justify-content: space-between;

  gap: 18px;

  padding:
    15px;

  border-left-width:
    3px;
}


.leads-next-action-panel--empty {
  border-left-color:
    var(--leads-border-dark);
}


.leads-next-action-panel--today {
  border-left-color:
    var(--leads-warning);
}


.leads-next-action-panel--overdue {
  border-left-color:
    var(--leads-danger);
}


.leads-next-action-panel--upcoming {
  border-left-color:
    var(--leads-blue);
}


.leads-next-action-panel__main {
  display: flex;
  align-items: flex-start;

  gap: 11px;

  min-width: 0;
}


.leads-next-action-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    9px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text-soft);
}


.leads-next-action-panel__main > div {
  min-width: 0;
}


.leads-next-action-panel__main small {
  display: block;

  margin-bottom: 4px;

  color:
    var(--leads-text-faint);

  font-size: 9px;
  font-weight: 780;

  letter-spacing: 0.055em;
}


.leads-next-action-panel__main strong {
  display: block;

  color:
    var(--leads-text);

  font-size: 14px;
  font-weight: 750;
}


.leads-next-action-panel__main p {
  max-width: 700px;

  margin:
    5px 0 0;

  color:
    var(--leads-text-muted);

  font-size: 10.5px;
  line-height: 1.45;
}


.leads-next-action-panel__aside {
  display: flex;
  align-items: center;

  gap: 10px;

  flex: 0 0 auto;
}


.leads-next-action-panel__date {
  display: flex;
  align-items: center;

  gap: 7px;

  min-width: 100px;

  padding:
    7px 10px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text-muted);
}


.leads-next-action-panel__date > div {
  display: flex;
  flex-direction: column;
}


.leads-next-action-panel__date strong {
  color:
    var(--leads-text);

  font-size: 10px;
  font-weight: 740;
}


.leads-next-action-panel__date span {
  color:
    var(--leads-text-muted);

  font-size: 9px;
  font-weight: 580;
}


.leads-next-action-panel__aside button {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  min-height: 34px;

  padding:
    0 10px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface);

  color:
    var(--leads-text);

  font-size: 10.5px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background var(--leads-transition),
    border-color var(--leads-transition);
}


.leads-next-action-panel__aside button:hover {
  border-color:
    var(--leads-border-strong);

  background:
    var(--leads-surface-muted);
}


/* =========================================================
   CONTACT SUMMARY
   ========================================================= */

.leads-detail-contact {
  display: flex;
  flex-direction: column;

  gap: 12px;
}


.leads-detail-contact__identity {
  display: flex;
  align-items: center;

  gap: 9px;

  padding-bottom: 11px;

  border-bottom:
    1px solid
    var(--leads-border);
}


.leads-detail-contact__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    9px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text);

  font-size: 10px;
  font-weight: 800;
}


.leads-detail-contact__identity > div {
  display: flex;
  flex-direction: column;

  min-width: 0;
}


.leads-detail-contact__identity strong {
  overflow: hidden;

  color:
    var(--leads-text);

  font-size: 11.5px;
  font-weight: 720;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.leads-detail-contact__identity small {
  color:
    var(--leads-text-muted);

  font-size: 9.5px;
  font-weight: 570;
}


.leads-detail-contact__channels {
  display: flex;
  flex-direction: column;

  gap: 7px;
}


/* =========================================================
   INFO ROW
   ========================================================= */

.leads-info-row {
  display: grid;

  grid-template-columns:
    28px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 8px;

  min-width: 0;

  padding:
    7px 8px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface-soft);
}


.leads-info-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  border-radius:
    7px;

  color:
    var(--leads-text-muted);
}


.leads-info-row__content {
  display: flex;
  flex-direction: column;

  gap: 1px;

  min-width: 0;
}


.leads-info-row small {
  color:
    var(--leads-text-faint);

  font-size: 8.5px;
  font-weight: 690;

  text-transform: uppercase;
  letter-spacing: 0.04em;
}


.leads-info-row strong {
  overflow: hidden;

  color:
    var(--leads-text);

  font-size: 10.5px;
  font-weight: 650;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.leads-info-row__copy {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 27px;
  height: 27px;

  padding: 0;

  border: 0;
  border-radius:
    7px;

  background:
    transparent;

  color:
    var(--leads-text-faint);

  cursor: pointer;

  transition:
    background var(--leads-transition),
    color var(--leads-transition);
}


.leads-info-row__copy:hover {
  background:
    var(--leads-surface-muted);

  color:
    var(--leads-text);
}


/* =========================================================
   BUSINESS DATA
   ========================================================= */

.leads-detail-data-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 7px;
}


.leads-detail-address {
  display: flex;
  align-items: flex-start;

  gap: 9px;

  margin-top: 10px;

  padding:
    9px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface-soft);
}


.leads-detail-address__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  flex: 0 0 28px;

  color:
    var(--leads-text-muted);
}


.leads-detail-address > div {
  display: flex;
  flex-direction: column;

  gap: 2px;

  min-width: 0;
}


.leads-detail-address small {
  color:
    var(--leads-text-faint);

  font-size: 8.5px;
  font-weight: 690;

  text-transform: uppercase;
}


.leads-detail-address strong {
  color:
    var(--leads-text);

  font-size: 10.5px;
  font-weight: 630;
  line-height: 1.4;
}


/* =========================================================
   COMMERCIAL STATE
   ========================================================= */

.leads-detail-state-grid {
  display: flex;
  flex-direction: column;

  gap: 9px;
}


.leads-detail-state-grid label {
  display: flex;
  flex-direction: column;

  gap: 5px;
}


.leads-detail-state-grid label > span {
  color:
    var(--leads-text-muted);

  font-size: 9px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.04em;
}


.leads-detail-select {
  position: relative;

  display: flex;
  align-items: center;

  min-width: 0;
}


.leads-detail-select select {
  appearance: none;

  width: 100%;
  height: 35px;

  padding:
    0 31px 0 9px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  outline: none;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text);

  font-size: 10.5px;
  font-weight: 620;

  cursor: pointer;

  transition:
    background var(--leads-transition),
    border-color var(--leads-transition);
}


.leads-detail-select select:focus {
  border-color:
    var(--leads-border-dark);

  background:
    var(--leads-surface);
}


.leads-detail-select > svg {
  position: absolute;

  right: 9px;

  color:
    var(--leads-text-muted);

  pointer-events: none;
}


.leads-detail-save-state {
  appearance: none;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  width: 100%;
  min-height: 34px;

  margin-top: 10px;

  border:
    1px solid
    var(--leads-primary);

  border-radius:
    8px;

  background:
    var(--leads-primary);

  color:
    var(--leads-primary-text);

  font-size: 10.5px;
  font-weight: 720;

  cursor: pointer;

  transition:
    background var(--leads-transition),
    border-color var(--leads-transition);
}


.leads-detail-save-state:hover {
  border-color:
    var(--leads-primary-hover);

  background:
    var(--leads-primary-hover);
}


/* =========================================================
   OWNER
   ========================================================= */

.leads-owner-profile {
  display: flex;
  align-items: center;

  gap: 9px;

  padding-bottom: 10px;

  border-bottom:
    1px solid
    var(--leads-border);
}


.leads-owner-profile > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    50%;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text);

  font-size: 9px;
  font-weight: 800;
}


.leads-owner-profile > div {
  display: flex;
  flex-direction: column;

  min-width: 0;
}


.leads-owner-profile strong {
  overflow: hidden;

  color:
    var(--leads-text);

  font-size: 10.5px;
  font-weight: 690;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.leads-owner-profile small {
  color:
    var(--leads-text-muted);

  font-size: 8.5px;
  font-weight: 560;
}


.leads-owner-profile__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  margin-top: 9px;
}


.leads-owner-profile__meta span {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  color:
    var(--leads-text-muted);

  font-size: 9px;
  font-weight: 600;
}


.leads-owner-profile__meta strong {
  overflow: hidden;

  color:
    var(--leads-text);

  font-size: 9px;
  font-weight: 700;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   TAGS
   ========================================================= */

.leads-detail-mini-button {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 4px;

  min-height: 28px;

  padding:
    0 7px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    7px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text-soft);

  font-size: 9px;
  font-weight: 700;

  cursor: pointer;
}


.leads-detail-mini-button:hover {
  border-color:
    var(--leads-border-strong);

  background:
    var(--leads-surface-muted);
}


.leads-detail-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;
}


.leads-detail-tag {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  min-height: 27px;

  padding:
    0 7px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    7px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text-soft);

  font-size: 9px;
  font-weight: 650;
}


.leads-detail-tag button {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 17px;
  height: 17px;

  padding: 0;

  border: 0;
  border-radius:
    5px;

  background:
    transparent;

  color:
    var(--leads-text-faint);

  cursor: pointer;
}


.leads-detail-tag button:hover {
  background:
    var(--leads-surface-muted);

  color:
    var(--leads-text);
}


.leads-detail-tags__empty {
  display: flex;
  align-items: center;

  gap: 5px;

  color:
    var(--leads-text-faint);

  font-size: 9.5px;
  font-weight: 580;
}


.leads-detail-tag-add {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    34px;

  gap: 6px;

  margin-top: 9px;
}


.leads-detail-tag-add > button {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 35px;

  padding: 0;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface);

  color:
    var(--leads-text);

  cursor: pointer;
}


/* =========================================================
   DIGITAL
   ========================================================= */

.leads-digital-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 7px;
}


.leads-digital-item {
  display: grid;

  grid-template-columns:
    30px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 8px;

  min-width: 0;

  padding:
    8px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text);

  text-decoration: none;

  transition:
    background var(--leads-transition),
    border-color var(--leads-transition);
}


.leads-digital-item:hover {
  border-color:
    var(--leads-border-strong);

  background:
    var(--leads-surface-muted);
}


.leads-digital-item > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  border-radius:
    7px;

  color:
    var(--leads-text-muted);
}


.leads-digital-item > div {
  display: flex;
  flex-direction: column;

  min-width: 0;
}


.leads-digital-item small {
  color:
    var(--leads-text-faint);

  font-size: 8px;
  font-weight: 690;

  text-transform: uppercase;
}


.leads-digital-item strong {
  overflow: hidden;

  color:
    var(--leads-text);

  font-size: 9.5px;
  font-weight: 650;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.leads-digital-item > svg {
  color:
    var(--leads-text-faint);
}


/* =========================================================
   POTENTIAL
   ========================================================= */

.leads-potential-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 7px;
}


.leads-potential-grid > div {
  display: flex;
  flex-direction: column;

  gap: 4px;

  min-width: 0;

  padding:
    9px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface-soft);
}


.leads-potential-grid > div > span {
  display: inline-flex;

  color:
    var(--leads-text-muted);
}


.leads-potential-grid small {
  color:
    var(--leads-text-faint);

  font-size: 8px;
  font-weight: 690;

  text-transform: uppercase;
}


.leads-potential-grid strong {
  overflow: hidden;

  color:
    var(--leads-text);

  font-size: 13px;
  font-weight: 740;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.leads-detail-text {
  margin-top: 9px;

  padding:
    9px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface-soft);
}


.leads-detail-text small {
  color:
    var(--leads-text-faint);

  font-size: 8px;
  font-weight: 690;

  text-transform: uppercase;
}


.leads-detail-text p {
  margin:
    4px 0 0;

  color:
    var(--leads-text-soft);

  font-size: 10px;
  font-weight: 560;
  line-height: 1.5;
}


/* =========================================================
   OBSERVATION
   ========================================================= */

.leads-detail-observation {
  display: flex;
  align-items: flex-start;

  gap: 8px;
}


.leads-detail-observation > span {
  display: inline-flex;

  padding-top: 2px;

  color:
    var(--leads-text-muted);
}


.leads-detail-observation p {
  margin: 0;

  color:
    var(--leads-text-soft);

  font-size: 10.5px;
  line-height: 1.55;
}


/* =========================================================
   DETAIL EMPTY
   ========================================================= */

.leads-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 6px;

  min-height: 200px;

  padding:
    24px;

  color:
    var(--leads-text-muted);

  text-align: center;
}


.leads-detail-empty--inline {
  min-height: 90px;

  padding: 14px;

  border:
    1px dashed
    var(--leads-border);

  border-radius:
    8px;
}


.leads-detail-empty > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    11px;

  background:
    var(--leads-surface-soft);
}


.leads-detail-empty strong {
  color:
    var(--leads-text);

  font-size: 11px;
  font-weight: 720;
}


.leads-detail-empty p {
  max-width: 360px;

  margin: 0;

  color:
    var(--leads-text-muted);

  font-size: 9.5px;
  line-height: 1.45;
}


/* =========================================================
   ACTIVITY
   ========================================================= */

.leads-activity {
  display: flex;
  flex-direction: column;
}


.leads-activity-item {
  display: grid;

  grid-template-columns:
    32px
    minmax(0, 1fr);

  gap: 8px;

  min-width: 0;

  animation:
    leadsActivityIn
    150ms ease-out both;

  animation-delay:
    calc(
      min(
        var(--activity-index, 0),
        8
      ) *
      14ms
    );
}


@keyframes leadsActivityIn {
  from {
    opacity: 0;
    transform:
      translateY(3px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


.leads-activity-item__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}


.leads-activity-item__rail > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  flex: 0 0 28px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface);

  color:
    var(--leads-text-muted);
}


.leads-activity-item__rail > i {
  width: 1px;
  min-height: 40px;
  flex: 1 1 auto;

  background:
    var(--leads-border);
}


.leads-activity-item:last-child
.leads-activity-item__rail > i {
  display: none;
}


.leads-activity-item--blue
.leads-activity-item__rail > span {
  border-color:
    var(--leads-blue-border);

  background:
    var(--leads-blue-bg);

  color:
    var(--leads-blue);
}


.leads-activity-item--green
.leads-activity-item__rail > span {
  border-color:
    var(--leads-success-border);

  background:
    var(--leads-success-bg);

  color:
    var(--leads-success);
}


.leads-activity-item--amber
.leads-activity-item__rail > span {
  border-color:
    var(--leads-warning-border);

  background:
    var(--leads-warning-bg);

  color:
    var(--leads-warning);
}


.leads-activity-item--violet
.leads-activity-item__rail > span {
  border-color:
    var(--leads-violet-border);

  background:
    var(--leads-violet-bg);

  color:
    var(--leads-violet);
}


.leads-activity-item--red
.leads-activity-item__rail > span {
  border-color:
    var(--leads-danger-border);

  background:
    var(--leads-danger-bg);

  color:
    var(--leads-danger);
}


.leads-activity-item__body {
  min-width: 0;

  padding:
    3px 0 16px;
}


.leads-activity-item__body header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;
}


.leads-activity-item__body header > div {
  display: flex;
  flex-direction: column;

  gap: 2px;

  min-width: 0;
}


.leads-activity-item__body strong {
  color:
    var(--leads-text);

  font-size: 10.5px;
  font-weight: 700;
}


.leads-activity-item__body header span {
  color:
    var(--leads-text-muted);

  font-size: 9px;
  font-weight: 560;
}


.leads-activity-item__body time {
  color:
    var(--leads-text-faint);

  font-size: 8.5px;
  font-weight: 580;

  white-space: nowrap;
}


.leads-activity-item__body p {
  margin:
    6px 0 0;

  color:
    var(--leads-text-soft);

  font-size: 9.5px;
  line-height: 1.45;
}


.leads-activity-change {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 6px;

  margin-top: 7px;

  padding:
    6px 8px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    7px;

  background:
    var(--leads-surface-soft);

  font-size: 9px;
}


.leads-activity-change span {
  color:
    var(--leads-text-muted);
}


.leads-activity-change strong {
  color:
    var(--leads-text);

  font-size: 9px;
}


/* =========================================================
   FOLLOWUPS
   ========================================================= */

.leads-detail-section-action {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 5px;

  min-height: 31px;

  padding:
    0 9px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    7px;

  background:
    var(--leads-surface);

  color:
    var(--leads-text);

  font-size: 9.5px;
  font-weight: 700;

  cursor: pointer;
}


.leads-detail-section-action:hover {
  background:
    var(--leads-surface-muted);

  border-color:
    var(--leads-border-strong);
}


.leads-followup-summary {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 7px;

  margin-bottom: 12px;
}


.leads-followup-summary > div {
  display: flex;
  flex-direction: column;

  gap: 3px;

  padding:
    9px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface-soft);
}


.leads-followup-summary span {
  color:
    var(--leads-text-muted);

  font-size: 8.5px;
  font-weight: 650;
}


.leads-followup-summary strong {
  color:
    var(--leads-text);

  font-size: 16px;
  font-weight: 760;
}


.leads-followups-list {
  display: flex;
  flex-direction: column;

  gap: 8px;
}


.leads-followup-card {
  display: grid;

  grid-template-columns:
    31px
    minmax(0, 1fr);

  gap: 9px;

  padding:
    10px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    9px;

  background:
    var(--leads-surface);
}


.leads-followup-card.is-overdue {
  border-color:
    var(--leads-danger-border);
}


.leads-followup-card.is-completed {
  opacity: 0.72;
}


.leads-followup-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text-muted);
}


.leads-followup-card.is-overdue
.leads-followup-card__icon {
  border-color:
    var(--leads-danger-border);

  background:
    var(--leads-danger-bg);

  color:
    var(--leads-danger);
}


.leads-followup-card.is-completed
.leads-followup-card__icon {
  border-color:
    var(--leads-success-border);

  background:
    var(--leads-success-bg);

  color:
    var(--leads-success);
}


.leads-followup-card__body {
  min-width: 0;
}


.leads-followup-card__body header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 10px;
}


.leads-followup-card__body header > div {
  display: flex;
  flex-direction: column;

  gap: 2px;

  min-width: 0;
}


.leads-followup-card__body header strong {
  color:
    var(--leads-text);

  font-size: 10.5px;
  font-weight: 700;
}


.leads-followup-card__body header span {
  color:
    var(--leads-text-muted);

  font-size: 8.5px;
  font-weight: 560;
}


.leads-followup-card__state {
  display: inline-flex;
  align-items: center;

  min-height: 22px;

  padding:
    0 7px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    999px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text-muted);

  font-size: 8px !important;
  font-weight: 720 !important;

  white-space: nowrap;
}


.leads-followup-card__state.is-overdue {
  border-color:
    var(--leads-danger-border);

  background:
    var(--leads-danger-bg);

  color:
    var(--leads-danger);
}


.leads-followup-card__state.is-completed {
  border-color:
    var(--leads-success-border);

  background:
    var(--leads-success-bg);

  color:
    var(--leads-success);
}


.leads-followup-card__body > p {
  margin:
    6px 0 0;

  color:
    var(--leads-text-soft);

  font-size: 9.5px;
  line-height: 1.45;
}


.leads-followup-card__body footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-top: 8px;

  padding-top: 8px;

  border-top:
    1px solid
    var(--leads-border);
}


.leads-followup-card__body footer > span {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  color:
    var(--leads-text-muted);

  font-size: 8.5px;
  font-weight: 600;
}


.leads-followup-card__body footer button {
  appearance: none;

  display: inline-flex;
  align-items: center;

  gap: 4px;

  min-height: 27px;

  padding:
    0 7px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    7px;

  background:
    var(--leads-surface);

  color:
    var(--leads-text);

  font-size: 8.5px;
  font-weight: 690;

  cursor: pointer;
}


.leads-followup-card__result {
  margin-top: 8px;

  padding:
    8px;

  border:
    1px solid
    var(--leads-success-border);

  border-radius:
    7px;

  background:
    var(--leads-success-bg);
}


.leads-followup-card__result small {
  color:
    var(--leads-success);

  font-size: 8px;
  font-weight: 720;

  text-transform: uppercase;
}


.leads-followup-card__result p {
  margin:
    3px 0 0;

  color:
    var(--leads-text-soft);

  font-size: 9px;
  line-height: 1.4;
}


/* =========================================================
   CONTACT CARDS
   ========================================================= */

.leads-contacts-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 9px;
}


.leads-contact-card {
  min-width: 0;

  padding:
    11px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    9px;

  background:
    var(--leads-surface);
}


.leads-contact-card > header {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 10px;

  padding-bottom: 10px;

  border-bottom:
    1px solid
    var(--leads-border);
}


.leads-contact-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    9px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text);

  font-size: 9px;
  font-weight: 800;
}


.leads-contact-card > header > div {
  min-width: 0;
}


.leads-contact-card > header > div > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 5px;
}


.leads-contact-card > header strong {
  color:
    var(--leads-text);

  font-size: 10.5px;
  font-weight: 710;
}


.leads-contact-card > header > div > span {
  display: block;

  margin-top: 1px;

  color:
    var(--leads-text-muted);

  font-size: 8.5px;
  font-weight: 560;
}


.leads-contact-card__primary {
  display: inline-flex !important;
  align-items: center;

  gap: 3px;

  margin: 0 !important;

  padding:
    2px 5px;

  border:
    1px solid
    var(--leads-warning-border);

  border-radius:
    999px;

  background:
    var(--leads-warning-bg);

  color:
    var(--leads-warning) !important;

  font-size: 7.5px !important;
  font-weight: 700 !important;
}


.leads-contact-card__channels {
  display: flex;
  flex-direction: column;

  gap: 6px;
}


.leads-contact-card__note {
  margin:
    8px 0 0;

  padding:
    7px 8px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    7px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text-muted);

  font-size: 9px;
  line-height: 1.45;
}


/* =========================================================
   NOTES
   ========================================================= */

.leads-note-editor {
  margin-bottom: 12px;

  overflow: hidden;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    9px;

  background:
    var(--leads-surface);
}


.leads-note-editor__input {
  display: grid;

  grid-template-columns:
    27px
    minmax(0, 1fr);

  gap: 7px;

  padding:
    10px;
}


.leads-note-editor__input > svg {
  margin-top: 3px;

  color:
    var(--leads-text-muted);
}


.leads-note-editor textarea {
  width: 100%;

  min-height: 76px;

  padding: 0;

  resize: vertical;

  border: 0;
  outline: 0;

  background:
    transparent;

  color:
    var(--leads-text);

  font-size: 10.5px;
  line-height: 1.5;
}


.leads-note-editor textarea::placeholder {
  color:
    var(--leads-text-faint);
}


.leads-note-editor footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  min-height: 44px;

  padding:
    7px 9px;

  border-top:
    1px solid
    var(--leads-border);

  background:
    var(--leads-surface-soft);
}


.leads-note-editor footer > span {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  color:
    var(--leads-text-faint);

  font-size: 8.5px;
  font-weight: 580;
}


.leads-note-editor footer button {
  appearance: none;

  display: inline-flex;
  align-items: center;

  gap: 5px;

  min-height: 30px;

  padding:
    0 9px;

  border:
    1px solid
    var(--leads-primary);

  border-radius:
    7px;

  background:
    var(--leads-primary);

  color:
    var(--leads-primary-text);

  font-size: 9px;
  font-weight: 700;

  cursor: pointer;
}


.leads-notes-list {
  display: flex;
  flex-direction: column;

  gap: 8px;
}


.leads-note-card {
  padding:
    10px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    9px;

  background:
    var(--leads-surface);
}


.leads-note-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
}


.leads-note-card header > div {
  display: flex;
  align-items: center;

  gap: 8px;
}


.leads-note-card header > div > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    50%;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text);

  font-size: 8px;
  font-weight: 800;
}


.leads-note-card header > div > div {
  display: flex;
  flex-direction: column;
}


.leads-note-card header strong {
  color:
    var(--leads-text);

  font-size: 9.5px;
  font-weight: 690;
}


.leads-note-card time {
  color:
    var(--leads-text-faint);

  font-size: 8px;
  font-weight: 560;
}


.leads-note-card header > svg {
  color:
    var(--leads-text-faint);
}


.leads-note-card > p {
  margin:
    8px 0 0;

  color:
    var(--leads-text-soft);

  font-size: 9.5px;
  line-height: 1.5;
}


/* =========================================================
   DETAIL RESPONSIVE
   ========================================================= */

@media (
  max-width: 1100px
) {
  .leads-detail-summary {
    grid-template-columns:
      minmax(0, 1fr)
      260px;
  }


  .leads-detail-head__right
  .leads-detail-action span {
    display: none;
  }


  .leads-detail-action {
    width: 36px;

    padding: 0;
  }
}


@media (
  max-width: 880px
) {
  .leads-detail-summary {
    grid-template-columns:
      1fr;
  }


  .leads-detail-summary__aside {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    align-items: start;
  }


  .leads-detail-side-card--tags {
    grid-column:
      1 / -1;
  }


  .leads-detail-summary__two {
    grid-template-columns:
      1fr;
  }


  .leads-detail-head {
    align-items: flex-start;
  }


  .leads-detail-head__meta {
    display: none;
  }


  .leads-next-action-panel {
    flex-direction: column;
  }


  .leads-next-action-panel__aside {
    justify-content:
      space-between;
  }
}


@media (
  max-width: 640px
) {
  .leads-detail-head {
    gap: 8px;

    min-height: 68px;

    padding:
      10px;
  }


  .leads-detail-head__avatar {
    width: 40px;
    height: 40px;

    flex-basis: 40px;

    border-radius:
      10px;
  }


  .leads-detail-head__identity h2 {
    font-size: 17px;
  }


  .leads-detail-head__eyebrow
  .leads-status,
  .leads-detail-head__eyebrow
  .leads-priority {
    display: none;
  }


  .leads-detail-head__right {
    gap: 4px;
  }


  .leads-detail-head__right
  .leads-detail-action:not(
    .leads-detail-action--primary
  ) {
    display: none;
  }


  .leads-detail-action--primary {
    width: 35px;
    min-height: 35px;

    padding: 0;
  }


  .leads-detail-icon-action {
    width: 35px;
    height: 35px;
  }


  .leads-detail-tabs {
    padding:
      0 6px;
  }


  .leads-detail-tabs__rail {
    display: grid;

    grid-template-columns:
      repeat(
        5,
        minmax(0, 1fr)
      );

    gap: 0;
  }


  .leads-detail-tab {
    min-width: 0;
    min-height: 42px;

    padding:
      0 3px;

    gap: 3px;
  }


  .leads-detail-tab__label {
    display: none;
  }


  .leads-detail-tab__count {
    min-width: 15px;
    height: 15px;

    padding:
      0 3px;

    font-size: 7px;
  }


  .leads-detail-tab::after {
    left: 5px;
    right: 5px;
  }


  .leads-detail-tab-content {
    padding:
      8px;
  }


  .leads-detail-summary {
    gap: 8px;
  }


  .leads-detail-summary__main,
  .leads-detail-summary__aside {
    gap: 8px;
  }


  .leads-detail-summary__aside {
    display: flex;
    flex-direction: column;
  }


  .leads-detail-side-card--tags {
    width: 100%;
  }


  .leads-detail-card,
  .leads-detail-side-card,
  .leads-detail-page-section {
    padding:
      10px;
  }


  .leads-detail-section-head {
    margin-bottom: 10px;
  }


  .leads-detail-data-grid,
  .leads-digital-grid,
  .leads-potential-grid,
  .leads-contacts-grid {
    grid-template-columns:
      1fr;
  }


  .leads-followup-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .leads-next-action-panel {
    gap: 10px;

    padding:
      10px;
  }


  .leads-next-action-panel__aside {
    width: 100%;

    flex-wrap: wrap;
  }


  .leads-next-action-panel__date {
    flex: 1 1 auto;
  }


  .leads-next-action-panel__aside button {
    flex: 0 0 auto;
  }


  .leads-activity-item__body header {
    flex-direction:
      column;

    gap: 3px;
  }


  .leads-followup-card__body header {
    align-items: flex-start;

    flex-direction:
      column;
  }


  .leads-followup-card__body footer {
    align-items: flex-start;

    flex-direction:
      column;
  }


  .leads-followup-card__body footer button {
    width: 100%;

    justify-content:
      center;
  }


  .leads-detail-more-menu {
    position: fixed;

    left: 8px;
    right: 8px;
    bottom: 8px;
    top: auto;

    width: auto;

    z-index: 100010;

    padding: 7px;

    border-radius:
      12px;
  }


  .leads-detail-more-menu button {
    min-height: 41px;

    font-size: 12px;
  }


  .leads-detail-body,
  .leads-detail-layout,
  .leads-detail-tab-content,
  .leads-detail-summary,
  .leads-detail-summary__main,
  .leads-detail-summary__aside,
  .leads-detail-card,
  .leads-detail-side-card,
  .leads-detail-page-section,
  .leads-detail-data-grid,
  .leads-digital-grid,
  .leads-potential-grid,
  .leads-contacts-grid,
  .leads-followups-list,
  .leads-activity {
    min-width: 0;
    max-width: 100%;

    overflow-x: clip;
  }
}/* =========================================================
   MODAL ROOT
   ========================================================= */

.leads-overlay-root {
  position: fixed;

  inset: 0;

  z-index: 100020;

  display: none;

  pointer-events: none;
}


.leads-overlay-root.is-open {
  display: block;

  pointer-events: auto;
}


.leads-modal-backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(0, 0, 0, 0.44);

  opacity: 0;

  transition:
    opacity 140ms ease-out;
}


.leads-modal-backdrop.is-visible {
  opacity: 1;
}


/* =========================================================
   MODAL
   ========================================================= */

.leads-modal {
  position: absolute;

  top: 50%;
  left: 50%;

  display: flex;
  flex-direction: column;

  width:
    min(
      calc(100vw - 28px),
      620px
    );

  max-height:
    calc(100vh - 28px);

  overflow: hidden;

  border:
    1px solid
    var(--leads-border-strong);

  border-radius:
    16px;

  background:
    var(--leads-surface);

  box-shadow:
    var(--leads-shadow-lg);

  opacity: 0;

  transform:
    translate(
      -50%,
      calc(-50% + 8px)
    )
    scale(0.992);

  transition:
    opacity 140ms ease-out,
    transform 140ms ease-out;
}


.leads-modal.is-visible {
  opacity: 1;

  transform:
    translate(
      -50%,
      -50%
    )
    scale(1);
}


.leads-modal--sm {
  width:
    min(
      calc(100vw - 28px),
      430px
    );
}


.leads-modal--md {
  width:
    min(
      calc(100vw - 28px),
      640px
    );
}


.leads-modal--lg {
  width:
    min(
      calc(100vw - 28px),
      900px
    );
}


.leads-modal--xl {
  width:
    min(
      calc(100vw - 28px),
      1180px
    );
}


/* =========================================================
   MODAL HEADER
   ========================================================= */

.leads-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  flex: 0 0 auto;

  min-height: 68px;

  padding:
    12px 14px;

  border-bottom:
    1px solid
    var(--leads-border);

  background:
    var(--leads-surface);
}


.leads-modal-head__identity {
  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;
}


.leads-modal-head__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    9px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text);
}


.leads-modal-head__identity > div {
  min-width: 0;
}


.leads-modal-head small {
  display: block;

  margin-bottom: 2px;

  color:
    var(--leads-text-faint);

  font-size: 8.5px;
  font-weight: 780;

  text-transform: uppercase;
  letter-spacing: 0.055em;
}


.leads-modal-head h2 {
  margin: 0;

  color:
    var(--leads-text);

  font-size: 16px;
  font-weight: 760;
  line-height: 1.2;

  letter-spacing: -0.018em;
}


.leads-modal-head p {
  margin:
    3px 0 0;

  color:
    var(--leads-text-muted);

  font-size: 9.5px;
  line-height: 1.4;
}


.leads-modal-head__close {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  padding: 0;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface);

  color:
    var(--leads-text-muted);

  cursor: pointer;

  transition:
    background var(--leads-transition),
    color var(--leads-transition),
    border-color var(--leads-transition);
}


.leads-modal-head__close:hover {
  border-color:
    var(--leads-border-strong);

  background:
    var(--leads-surface-muted);

  color:
    var(--leads-text);
}


/* =========================================================
   LEAD EDITOR
   ========================================================= */

.leads-modal--lead-editor {
  height:
    min(
      calc(100vh - 28px),
      860px
    );
}


.leads-lead-form {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}


.leads-lead-form__workspace {
  display: grid;

  grid-template-columns:
    190px
    minmax(0, 1fr);

  flex: 1 1 auto;

  min-width: 0;
  min-height: 0;

  overflow: hidden;
}


/* =========================================================
   FORM NAV
   ========================================================= */

.leads-form-nav {
  min-width: 0;

  overflow-y: auto;

  padding:
    11px;

  border-right:
    1px solid
    var(--leads-border);

  background:
    var(--leads-surface-soft);

  scrollbar-width: thin;
}


.leads-form-nav__title {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-bottom: 9px;

  padding:
    8px;

  border-bottom:
    1px solid
    var(--leads-border);
}


.leads-form-nav__title > span {
  display: inline-flex;

  color:
    var(--leads-text-muted);
}


.leads-form-nav__title > div {
  display: flex;
  flex-direction: column;
}


.leads-form-nav__title small {
  color:
    var(--leads-text-faint);

  font-size: 7.5px;
  font-weight: 760;

  letter-spacing: 0.055em;
}


.leads-form-nav__title strong {
  color:
    var(--leads-text);

  font-size: 10px;
  font-weight: 710;
}


.leads-form-nav nav {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.leads-form-nav__item {
  appearance: none;

  display: grid;

  grid-template-columns:
    20px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 6px;

  width: 100%;
  min-height: 36px;

  padding:
    0 8px;

  border:
    1px solid
    transparent;

  border-radius:
    8px;

  background:
    transparent;

  color:
    var(--leads-text-muted);

  font-size: 10px;
  font-weight: 650;

  text-align: left;

  cursor: pointer;

  transition:
    background var(--leads-transition),
    border-color var(--leads-transition),
    color var(--leads-transition);
}


.leads-form-nav__item:hover {
  background:
    var(--leads-surface);

  color:
    var(--leads-text);
}


.leads-form-nav__item.is-active {
  border-color:
    var(--leads-border);

  background:
    var(--leads-surface);

  color:
    var(--leads-text);
}


.leads-form-nav__item > svg:last-child {
  color:
    var(--leads-text-faint);
}


/* =========================================================
   FORM BODY
   ========================================================= */

.leads-lead-form__body {
  min-width: 0;
  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;

  padding:
    13px;

  background:
    var(--leads-bg);

  scroll-behavior:
    smooth;

  scrollbar-width: thin;
  scrollbar-color:
    var(--leads-border-strong)
    transparent;
}


.leads-lead-form__body::-webkit-scrollbar {
  width: 7px;
}


.leads-lead-form__body::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    var(--leads-border-strong);
}


/* =========================================================
   FORM SECTION
   ========================================================= */

.leads-form-section {
  min-width: 0;

  margin-bottom: 11px;

  padding:
    13px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    11px;

  background:
    var(--leads-surface);

  box-shadow:
    var(--leads-shadow-sm);

  scroll-margin-top:
    12px;
}


.leads-form-section:last-child {
  margin-bottom: 0;
}


.leads-form-section__head {
  display: flex;
  align-items: flex-start;

  gap: 9px;

  margin-bottom: 12px;

  padding-bottom: 11px;

  border-bottom:
    1px solid
    var(--leads-border);
}


.leads-form-section__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;

  flex: 0 0 31px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text-muted);
}


.leads-form-section__head > div {
  min-width: 0;
}


.leads-form-section__head small {
  display: block;

  margin-bottom: 2px;

  color:
    var(--leads-text-faint);

  font-size: 8px;
  font-weight: 760;

  text-transform: uppercase;
  letter-spacing: 0.055em;
}


.leads-form-section__head h3 {
  margin: 0;

  color:
    var(--leads-text);

  font-size: 12px;
  font-weight: 730;
}


.leads-form-section__head p {
  margin:
    3px 0 0;

  color:
    var(--leads-text-muted);

  font-size: 9px;
  line-height: 1.4;
}


/* =========================================================
   FORM GRID
   ========================================================= */

.leads-form-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;
}


.leads-form-field {
  display: flex;
  flex-direction: column;

  gap: 5px;

  min-width: 0;
}


.leads-form-field--wide {
  grid-column:
    1 / -1;
}


.leads-form-field__label {
  display: flex;
  align-items: center;

  gap: 5px;

  color:
    var(--leads-text-muted);

  font-size: 9px;
  font-weight: 690;
}


.leads-form-field__label b {
  color:
    var(--leads-danger);
}


.leads-form-control {
  position: relative;

  display: flex;
  align-items: center;

  min-width: 0;
}


.leads-form-control input,
.leads-form-control select,
.leads-form-control textarea {
  width: 100%;
  min-width: 0;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  outline: none;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text);

  font-size: 10.5px;
  font-weight: 570;

  transition:
    border-color var(--leads-transition),
    background var(--leads-transition);
}


.leads-form-control input,
.leads-form-control select {
  height: 36px;

  padding:
    0 10px;
}


.leads-form-control select {
  appearance: none;

  padding-right: 31px;

  cursor: pointer;
}


.leads-form-control textarea {
  min-height: 82px;

  padding:
    9px 10px;

  resize: vertical;

  line-height: 1.5;
}


.leads-form-control input:hover,
.leads-form-control select:hover,
.leads-form-control textarea:hover {
  border-color:
    var(--leads-border-strong);
}


.leads-form-control input:focus,
.leads-form-control select:focus,
.leads-form-control textarea:focus {
  border-color:
    var(--leads-border-dark);

  background:
    var(--leads-surface);
}


.leads-form-control input::placeholder,
.leads-form-control textarea::placeholder {
  color:
    var(--leads-text-faint);
}


.leads-form-control__chevron {
  position: absolute;

  right: 9px;

  display: inline-flex;

  color:
    var(--leads-text-muted);

  pointer-events: none;
}


/* =========================================================
   FORM FOOTER
   ========================================================= */

.leads-lead-form__footer,
.leads-simple-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  flex: 0 0 auto;

  min-height: 58px;

  padding:
    10px 13px;

  border-top:
    1px solid
    var(--leads-border);

  background:
    var(--leads-surface);
}


.leads-lead-form__footer > span {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  color:
    var(--leads-text-muted);

  font-size: 8.5px;
  font-weight: 580;
}


.leads-lead-form__footer > div,
.leads-simple-form__footer > div {
  display: flex;
  align-items: center;

  gap: 7px;
}


/* =========================================================
   MODAL BUTTONS
   ========================================================= */

.leads-modal-button {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  min-height: 34px;

  padding:
    0 11px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface);

  color:
    var(--leads-text-soft);

  font-size: 10px;
  font-weight: 690;

  cursor: pointer;

  transition:
    background var(--leads-transition),
    border-color var(--leads-transition),
    color var(--leads-transition),
    transform var(--leads-transition);
}


.leads-modal-button:hover {
  border-color:
    var(--leads-border-strong);

  background:
    var(--leads-surface-muted);

  color:
    var(--leads-text);
}


.leads-modal-button:active {
  transform:
    translateY(1px);
}


.leads-modal-button:disabled {
  opacity: 0.55;

  cursor: default;
}


.leads-modal-button--primary {
  border-color:
    var(--leads-primary);

  background:
    var(--leads-primary);

  color:
    var(--leads-primary-text);
}


.leads-modal-button--primary:hover {
  border-color:
    var(--leads-primary-hover);

  background:
    var(--leads-primary-hover);

  color:
    var(--leads-primary-text);
}


/* =========================================================
   SIMPLE FORM
   ========================================================= */

.leads-simple-form {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 0;
}


.leads-simple-form__body {
  min-width: 0;

  padding:
    13px;

  overflow-y: auto;
  overflow-x: hidden;

  background:
    var(--leads-bg);
}


/* =========================================================
   CHECKBOX
   ========================================================= */

.leads-checkbox-field {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-top: 10px;

  padding:
    9px 10px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface);

  color:
    var(--leads-text-soft);

  cursor: pointer;
}


.leads-checkbox-field input {
  width: 15px;
  height: 15px;

  accent-color:
    var(--leads-primary);
}


.leads-checkbox-field span {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  font-size: 9.5px;
  font-weight: 620;
}


/* =========================================================
   IMPORT
   ========================================================= */

.leads-import-form {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 0;
}


.leads-import-form__body {
  min-width: 0;

  padding:
    13px;

  overflow-y: auto;
  overflow-x: hidden;

  background:
    var(--leads-bg);
}


.leads-import-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 7px;

  min-height: 180px;

  padding:
    20px;

  border:
    1px dashed
    var(--leads-border-dark);

  border-radius:
    11px;

  background:
    var(--leads-surface);

  color:
    var(--leads-text);

  text-align: center;

  cursor: pointer;

  transition:
    border-color var(--leads-transition),
    background var(--leads-transition);
}


.leads-import-drop:hover {
  border-color:
    var(--leads-text-muted);

  background:
    var(--leads-surface-soft);
}


.leads-import-drop__icon,
.leads-import-drop > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    12px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text-muted);
}


.leads-import-drop strong {
  margin-top: 3px;

  color:
    var(--leads-text);

  font-size: 12px;
  font-weight: 730;
}


.leads-import-drop p {
  max-width: 360px;

  margin: 0;

  color:
    var(--leads-text-muted);

  font-size: 9.5px;
  line-height: 1.45;
}


.leads-import-drop__button {
  display: inline-flex !important;
  align-items: center !important;

  gap: 5px !important;

  width: auto !important;
  height: 31px !important;

  margin-top: 3px;

  padding:
    0 9px;

  border:
    1px solid
    var(--leads-border-strong) !important;

  border-radius:
    7px !important;

  background:
    var(--leads-surface) !important;

  color:
    var(--leads-text) !important;

  font-size: 9px;
  font-weight: 690;
}


/* =========================================================
   IMPORT SELECTED
   ========================================================= */

.leads-import-selected {
  display: grid;

  grid-template-columns:
    32px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 8px;

  margin-top: 9px;

  padding:
    9px;

  border:
    1px solid
    var(--leads-success-border);

  border-radius:
    8px;

  background:
    var(--leads-success-bg);
}


.leads-import-selected > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  color:
    var(--leads-success);
}


.leads-import-selected > div {
  display: flex;
  flex-direction: column;

  min-width: 0;
}


.leads-import-selected strong {
  overflow: hidden;

  color:
    var(--leads-text);

  font-size: 9.5px;
  font-weight: 680;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.leads-import-selected small {
  color:
    var(--leads-text-muted);

  font-size: 8px;
}


.leads-import-selected > svg {
  color:
    var(--leads-success);
}


/* =========================================================
   IMPORT OPTIONS
   ========================================================= */

.leads-import-options {
  margin-top: 10px;

  overflow: hidden;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    9px;

  background:
    var(--leads-surface);
}


.leads-import-options > header {
  display: flex;
  align-items: center;

  gap: 8px;

  min-height: 46px;

  padding:
    8px 10px;

  border-bottom:
    1px solid
    var(--leads-border);

  background:
    var(--leads-surface-soft);
}


.leads-import-options > header > span {
  display: inline-flex;

  color:
    var(--leads-text-muted);
}


.leads-import-options > header > div {
  display: flex;
  flex-direction: column;
}


.leads-import-options > header strong {
  color:
    var(--leads-text);

  font-size: 9.5px;
  font-weight: 700;
}


.leads-import-options > header small {
  color:
    var(--leads-text-muted);

  font-size: 8px;
}


.leads-import-options > label {
  display: grid;

  grid-template-columns:
    18px
    minmax(0, 1fr);

  align-items: flex-start;

  gap: 8px;

  padding:
    9px 10px;

  border-bottom:
    1px solid
    var(--leads-border);

  cursor: pointer;
}


.leads-import-options > label:last-child {
  border-bottom: 0;
}


.leads-import-options input {
  margin-top: 2px;

  accent-color:
    var(--leads-primary);
}


.leads-import-options label > span {
  display: flex;
  flex-direction: column;

  gap: 1px;
}


.leads-import-options label strong {
  color:
    var(--leads-text);

  font-size: 9.5px;
  font-weight: 660;
}


.leads-import-options label small {
  color:
    var(--leads-text-muted);

  font-size: 8.5px;
  line-height: 1.4;
}


/* =========================================================
   IMPORT HISTORY
   ========================================================= */

.leads-import-history {
  display: flex;
  flex-direction: column;

  gap: 7px;

  min-width: 0;

  padding:
    12px;

  overflow-y: auto;
  overflow-x: hidden;

  background:
    var(--leads-bg);
}


.leads-import-history-item {
  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 8px;

  padding:
    8px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface);
}


.leads-import-history-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border:
    1px solid
    var(--leads-border);

  border-radius:
    8px;

  background:
    var(--leads-surface-soft);

  color:
    var(--leads-text-muted);
}


.leads-import-history-item__icon.is-completada,
.leads-import-history-item__icon.is-completado {
  border-color:
    var(--leads-success-border);

  background:
    var(--leads-success-bg);

  color:
    var(--leads-success);
}


.leads-import-history-item__icon.is-error,
.leads-import-history-item__icon.is-fallida {
  border-color:
    var(--leads-danger-border);

  background:
    var(--leads-danger-bg);

  color:
    var(--leads-danger);
}


.leads-import-history-item__icon.is-completada-con-errores {
  border-color:
    var(--leads-warning-border);

  background:
    var(--leads-warning-bg);

  color:
    var(--leads-warning);
}


.leads-import-history-item > div {
  display: flex;
  flex-direction: column;

  min-width: 0;
}


.leads-import-history-item strong {
  overflow: hidden;

  color:
    var(--leads-text);

  font-size: 9.5px;
  font-weight: 680;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.leads-import-history-item span {
  color:
    var(--leads-text-muted);

  font-size: 8px;
}


.leads-import-history-item > small {
  color:
    var(--leads-text-muted);

  font-size: 8px;
  font-weight: 660;

  text-transform: uppercase;
}


/* =========================================================
   MODAL LOADING
   ========================================================= */

.leads-modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 220px;

  padding: 30px;

  color:
    var(--leads-text-muted);

  font-size: 10px;
  font-weight: 600;
}


/* =========================================================
   FOCUS
   ========================================================= */

.leads-workspace button:focus-visible,
.leads-modal button:focus-visible,
.leads-detail-workspace button:focus-visible {
  outline:
    2px solid
    var(--leads-border-dark);

  outline-offset: 2px;
}


/* =========================================================
   DISABLED
   ========================================================= */

.leads-workspace button:disabled,
.leads-workspace input:disabled,
.leads-workspace select:disabled,
.leads-workspace textarea:disabled {
  opacity: 0.55;

  cursor: default;
}


/* =========================================================
   FULL RESPONSIVE · TABLET
   ========================================================= */

@media (
  max-width: 900px
) {
  .leads-modal--lead-editor {
    width:
      calc(100vw - 18px);

    height:
      calc(100vh - 18px);

    max-height:
      calc(100vh - 18px);
  }


  .leads-lead-form__workspace {
    grid-template-columns:
      145px
      minmax(0, 1fr);
  }


  .leads-form-nav {
    padding:
      8px;
  }


  .leads-form-nav__item {
    grid-template-columns:
      18px
      minmax(0, 1fr);

    min-height: 34px;
  }


  .leads-form-nav__item > svg:last-child {
    display: none;
  }


  .leads-form-grid {
    grid-template-columns:
      1fr;
  }


  .leads-form-field--wide {
    grid-column:
      auto;
  }
}


/* =========================================================
   FULL RESPONSIVE · MOBILE
   ========================================================= */

@media (
  max-width: 600px
) {
  .leads-overlay-root {
    overflow: hidden;
  }


  .leads-modal {
    top: 0;
    left: 0;

    width: 100vw !important;
    max-width: 100vw !important;

    height: 100dvh;
    max-height: 100dvh;

    border: 0;
    border-radius: 0;

    transform:
      translateY(8px);

    overflow: hidden;
  }


  .leads-modal.is-visible {
    transform: none;
  }


  .leads-modal-head {
    min-height: 61px;

    padding:
      9px 10px;
  }


  .leads-modal-head__icon {
    width: 33px;
    height: 33px;

    flex-basis: 33px;
  }


  .leads-modal-head h2 {
    font-size: 14px;
  }


  .leads-modal-head p {
    overflow: hidden;

    max-width: 230px;

    font-size: 8.5px;

    text-overflow: ellipsis;
    white-space: nowrap;
  }


  .leads-modal-head__close {
    width: 33px;
    height: 33px;

    flex-basis: 33px;
  }


  /*
   * EDITOR MOBILE
   * SIN BARRA HORIZONTAL.
   */

  .leads-modal--lead-editor {
    height:
      100dvh;
  }


  .leads-lead-form__workspace {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    overflow: hidden;
  }


  /*
   * LA NAVEGACIÓN DE SECCIONES EN MOBILE
   * NO ES UNA BARRA HORIZONTAL.
   * PASA A GRID.
   */

  .leads-form-nav {
    flex: 0 0 auto;

    width: 100%;

    padding:
      7px;

    overflow: visible;

    border-right: 0;
    border-bottom:
      1px solid
      var(--leads-border);

    background:
      var(--leads-surface);
  }


  .leads-form-nav__title {
    display: none;
  }


  .leads-form-nav nav {
    display: grid;

    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    gap: 4px;
  }


  .leads-form-nav__item {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 4px;

    min-width: 0;
    min-height: 31px;

    padding:
      0 4px;

    font-size: 8.5px;
  }


  .leads-form-nav__item svg {
    width: 12px;
    height: 12px;
  }


  .leads-form-nav__item span {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
  }


  .leads-lead-form__body {
    width: 100%;
    min-width: 0;

    padding:
      7px;

    overflow-y: auto;
    overflow-x: hidden;
  }


  .leads-form-section {
    width: 100%;
    min-width: 0;

    margin-bottom: 7px;

    padding:
      9px;

    border-radius:
      9px;
  }


  .leads-form-section__head {
    gap: 7px;

    margin-bottom: 9px;

    padding-bottom: 8px;
  }


  .leads-form-section__icon {
    width: 27px;
    height: 27px;

    flex-basis: 27px;
  }


  .leads-form-section__head h3 {
    font-size: 11px;
  }


  .leads-form-section__head p {
    font-size: 8px;
  }


  .leads-form-grid {
    display: flex;
    flex-direction: column;

    gap: 8px;

    width: 100%;
    min-width: 0;
  }


  .leads-form-field,
  .leads-form-field--wide,
  .leads-form-control {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }


  .leads-form-control input,
  .leads-form-control select,
  .leads-form-control textarea {
    max-width: 100%;

    font-size: 13px;
  }


  /*
   * iOS:
   * 16px EN INPUT PARA NO FORZAR ZOOM.
   */

  @supports (
    -webkit-touch-callout: none
  ) {
    .leads-form-control input,
    .leads-form-control select,
    .leads-form-control textarea,
    .leads-toolbar-search input,
    .leads-filter-item__control select,
    .leads-detail-select select,
    .leads-note-editor textarea {
      font-size: 16px;
    }
  }


  .leads-lead-form__footer {
    align-items: stretch;

    min-height: auto;

    padding:
      8px;

    flex-direction: column;
  }


  .leads-lead-form__footer > span {
    display: none;
  }


  .leads-lead-form__footer > div {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    width: 100%;
  }


  .leads-modal-button {
    width: 100%;

    min-height: 39px;
  }


  /*
   * SIMPLE FORMS
   */

  .leads-simple-form {
    flex: 1 1 auto;

    min-height: 0;
  }


  .leads-simple-form__body {
    flex: 1 1 auto;

    min-height: 0;

    padding:
      8px;

    overflow-y: auto;
    overflow-x: hidden;
  }


  .leads-simple-form__footer {
    flex-direction: column;

    align-items: stretch;

    min-height: auto;

    padding:
      8px;
  }


  .leads-simple-form__footer > button,
  .leads-simple-form__footer > div {
    width: 100%;
  }


  .leads-simple-form__footer > div {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  /*
   * IMPORT MOBILE
   */

  .leads-import-form {
    flex: 1 1 auto;

    min-height: 0;
  }


  .leads-import-form__body {
    flex: 1 1 auto;

    min-height: 0;

    padding:
      8px;

    overflow-y: auto;
    overflow-x: hidden;
  }


  .leads-import-drop {
    min-height: 155px;

    padding:
      14px;
  }


  .leads-import-drop p {
    max-width: 280px;
  }


  .leads-import-options > label {
    padding:
      9px;
  }


  .leads-import-history {
    flex: 1 1 auto;

    min-height: 0;

    padding:
      8px;
  }


  .leads-import-history-item {
    grid-template-columns:
      30px
      minmax(0, 1fr);

    gap: 7px;
  }


  .leads-import-history-item > small {
    grid-column:
      2;

    justify-self:
      start;
  }


  /*
   * MOBILE:
   * NADA PUEDE CREAR SCROLL HORIZONTAL.
   */

  .leads-overlay-root,
  .leads-modal,
  .leads-modal-head,
  .leads-lead-form,
  .leads-lead-form__workspace,
  .leads-lead-form__body,
  .leads-form-nav,
  .leads-form-nav nav,
  .leads-form-section,
  .leads-form-section__body,
  .leads-form-grid,
  .leads-form-field,
  .leads-form-control,
  .leads-simple-form,
  .leads-simple-form__body,
  .leads-import-form,
  .leads-import-form__body,
  .leads-import-options,
  .leads-import-history {
    min-width: 0;
    max-width: 100%;

    overflow-x: clip;
  }
}


/* =========================================================
   MOBILE MUY PEQUEÑO
   ========================================================= */

@media (
  max-width: 380px
) {
  .leads-page {
    padding:
      8px;
  }


  .leads-page-head__secondary-actions {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .leads-page-head__secondary-actions
  .leads-action-button:last-child {
    grid-column:
      1 / -1;
  }


  .leads-overview__hero {
    flex-direction: column;
  }


  .leads-overview__conversion {
    align-items: flex-start;

    width: 100%;

    padding:
      10px 0 0;

    border-left: 0;
    border-top:
      1px solid
      var(--leads-border);
  }


  .leads-overview__metrics {
    grid-template-columns:
      1fr;
  }


  .leads-overview-card:last-child {
    grid-column: auto;
  }


  .leads-toolbar-views {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .leads-toolbar-view:last-child {
    grid-column:
      1 / -1;
  }


  .leads-form-nav nav {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .leads-followup-summary {
    grid-template-columns:
      1fr;
  }


  .leads-next-action-panel__aside {
    flex-direction: column;

    align-items: stretch;
  }


  .leads-next-action-panel__date,
  .leads-next-action-panel__aside button {
    width: 100%;
  }


  .leads-note-editor footer {
    align-items: stretch;

    flex-direction: column;
  }


  .leads-note-editor footer button {
    width: 100%;

    justify-content: center;
  }
}


/* =========================================================
   DARK MODE · AJUSTES PUNTUALES
   ========================================================= */

html.dark
.leads-detail-backdrop,
body.dark
.leads-detail-backdrop,
[data-theme="dark"]
.leads-detail-backdrop,
html.dark
.leads-modal-backdrop,
body.dark
.leads-modal-backdrop,
[data-theme="dark"]
.leads-modal-backdrop {
  background:
    rgba(0, 0, 0, 0.70);
}


html.dark
.leads-company__avatar,
body.dark
.leads-company__avatar,
[data-theme="dark"]
.leads-company__avatar,
html.dark
.leads-detail-head__avatar,
body.dark
.leads-detail-head__avatar,
[data-theme="dark"]
.leads-detail-head__avatar {
  background:
    #171717;
}


html.dark
.leads-table-row:hover,
body.dark
.leads-table-row:hover,
[data-theme="dark"]
.leads-table-row:hover {
  background:
    #151515;
}


/* =========================================================
   SCROLLBAR GENERAL
   ========================================================= */

.leads-workspace * {
  scrollbar-width: thin;
  scrollbar-color:
    var(--leads-border-strong)
    transparent;
}


.leads-workspace *::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}


.leads-workspace *::-webkit-scrollbar-track {
  background:
    transparent;
}


.leads-workspace *::-webkit-scrollbar-thumb {
  border:
    2px solid
    transparent;

  border-radius:
    999px;

  background:
    var(--leads-border-strong);

  background-clip:
    padding-box;
}


/* =========================================================
   MOBILE:
   OCULTAMOS CUALQUIER SCROLLBAR HORIZONTAL RESIDUAL
   ========================================================= */

@media (
  max-width: 600px
) {
  .leads-workspace *::-webkit-scrollbar:horizontal {
    display: none;
    height: 0;
  }


  .leads-workspace {
    overflow-x:
      clip !important;
  }


  .leads-workspace__mount,
  .leads-page,
  .leads-main,
  .leads-detail-root,
  .leads-detail-workspace,
  .leads-detail-workspace__content,
  .leads-overlay-root {
    width: 100%;
    max-width: 100%;

    overflow-x:
      clip !important;
  }
}


/* =========================================================
   SELECTION
   ========================================================= */

.leads-workspace ::selection {
  background:
    var(--leads-text);

  color:
    var(--leads-surface);
}


/* =========================================================
   TOUCH
   ========================================================= */

@media (
  hover: none
) {
  .leads-overview-card:hover,
  .leads-pipeline-card:hover {
    transform: none;
  }


  .leads-overview-card__arrow {
    display: none;
  }


  .leads-action-button,
  .leads-filter-trigger,
  .leads-toolbar-view,
  .leads-view-mode__button,
  .leads-row-menu-trigger,
  .leads-detail-action,
  .leads-detail-icon-action,
  .leads-modal-button {
    -webkit-tap-highlight-color:
      transparent;
  }
}


/* =========================================================
   PERFORMANCE
   ========================================================= */

.leads-page,
.leads-overview-card,
.leads-table-row,
.leads-pipeline-card,
.leads-detail-workspace,
.leads-modal {
  backface-visibility:
    hidden;
}


.leads-detail-workspace,
.leads-modal {
  will-change:
    transform,
    opacity;
}


/* =========================================================
   FIN
   ========================================================= *//* =========================================================
   FIX · MENÚ DE ACCIONES SOBRE FILAS
   UBICACIÓN:
   frontend/src/pages/comercial-digital/leads-comerciales/
   leads-comerciales.css

   AGREGAR AL FINAL
   ========================================================= */

.leads-table {
  position: relative;
}


.leads-table tbody {
  position: relative;
}


.leads-table-row {
  position: relative;
  z-index: 1;

  overflow: visible;
}


.leads-table-row td {
  overflow: visible;
}


.leads-table-row:hover {
  z-index: 50;
}


.leads-table-row:has(
  .leads-row-menu-trigger.is-active
) {
  z-index: 200;
}


.leads-row-actions {
  position: relative;
  z-index: 210;

  overflow: visible;
}


.leads-row-menu-trigger.is-active {
  position: relative;
  z-index: 220;
}


.leads-row-menu {
  z-index: 1000;

  overflow: visible;

  isolation: isolate;
}


.leads-row-menu button {
  position: relative;
  z-index: 2;

  opacity: 1;
  visibility: visible;
}


.leads-row-menu button:hover {
  opacity: 1;
  visibility: visible;

  background:
    var(--leads-surface-muted);

  color:
    var(--leads-text);
}


.leads-row-menu button.is-danger,
.leads-row-menu button.is-danger:hover {
  opacity: 1;
  visibility: visible;

  color:
    var(--leads-danger);
}


.leads-row-menu button.is-danger:hover {
  background:
    var(--leads-danger-bg);
}


/* =========================================================
   EVITAR QUE OTRAS FILAS TAPEN EL MENÚ
   ========================================================= */

.leads-table-row:has(
  .leads-row-menu
) {
  z-index: 250;
}


.leads-table-row:has(
  .leads-row-menu
)
.leads-row-actions {
  z-index: 260;
}


.leads-table-row:has(
  .leads-row-menu
)
.leads-row-menu {
  z-index: 300;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width: 560px
) {
  .leads-row-menu {
    z-index: 100050;
  }


  .leads-table-row:has(
    .leads-row-menu
  ) {
    z-index: 100040;
  }
}