/* ============================================================
   Módulo de Leads - estilos adicionales para el dashboard central
   (theme.css ya cubre colores, botones, tarjetas base y modales genéricos)
   ============================================================ */

.leads-panel .filtros-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
  background: var(--color-surface);
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
  padding: 14px 16px;
}

.filtro-grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filtro-grupo label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.leads-select {
  padding: 8px 10px;
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.85rem;
  background: var(--color-surface);
  color: var(--color-text);
  min-width: 160px;
}

/* --- Desplegable de estados --- */
.filtro-estados-dropdown summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 14px;
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: 0.85rem;
  color: var(--color-text);
  min-width: 160px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filtro-estados-dropdown summary::-webkit-details-marker {
  display: none;
}

.filtro-estados-dropdown summary::after {
  content: '▾';
  margin-left: 10px;
  color: var(--color-text-muted);
}

.filtro-estados-dropdown[open] summary::after {
  content: '▴';
}

.filtro-estados-dropdown {
  position: relative;
}

.filtro-estados-dropdown .filtro-chips {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 10px;
  width: 220px;
  max-height: 280px;
  overflow-y: auto;
}

.chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  width: 100%;
}

.chip input {
  margin: 0;
}

/* --- Pendientes de contactar --- */
.pendientes-block {
  border-left: 4px solid var(--color-accent);
}

.pendientes-block h3 {
  color: var(--color-accent);
}

.pendientes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pendiente-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

/* --- Kanban --- */
.kanban-board {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 12px;
}

.kanban-column {
  /* Fondo BLANCO (antes gris): así la columna se despega del fondo de
     la app, que ahora es gris. Con sombra, para que flote. */
  background: var(--color-surface);
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: 8px;
  min-width: 215px;
  max-width: 215px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.kanban-column-header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
  padding: 12px;
  background: var(--color-surface-alt);
  border-bottom: 2px solid var(--color-border-fuerte);
}

.kanban-column-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
}

.lead-card {
  background: var(--color-surface);
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: 6px;
  padding: 10px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.lead-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.lead-nombre {
  color: var(--color-text);
  font-weight: 700;
}

.lead-nombre {
  font-weight: 700;
  margin: 0 0 4px 0;
  font-size: 0.85rem;
  color: var(--color-text);
}

.lead-dato {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0 0 2px 0;
}

.lead-recordatorio {
  color: var(--color-accent);
  font-weight: 600;
}

.lead-estado-select,
.lead-intencion-select {
  width: 100%;
  margin-top: 6px;
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-borde-tarjeta);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.72rem;
  font-weight: 600;
}

.lead-card-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.btn-enviar-mensaje {
  width: 100%;
  margin-top: 6px;
  padding: 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--marco-color);
  background: var(--color-primary-soft);
  color: var(--titulo-color);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-enviar-mensaje:hover {
  background: var(--icono-color);
  color: white;
}

.btn-ver-detalle {
  width: 100%;
  padding: 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-borde-tarjeta);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-ver-detalle:hover {
  border-color: var(--marco-color);
  color: var(--titulo-color);
}

.lead-card.intencion-muy_interesado {
  border-left: 4px solid #d92d20;
}

.lead-card.intencion-interesado {
  border-left: 4px solid #f79009;
}

.lead-card.intencion-poco_interesado {
  border-left: 4px solid #98a2b3;
}

/* --- Modales de Leads (X de cerrar, teléfono, historial) --- */
.modal-card {
  position: relative;
}

.modal-close-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close-x:hover {
  background: var(--color-border);
  color: var(--color-text);
}

.modal-card-ancho {
  width: min(100%, 520px);
  max-height: 85vh;
  overflow-y: auto;
}

.telefono-display {
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-surface-alt);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 14px 0;
}

.link-corregir-telefono {
  background: none;
  border: none;
  color: var(--titulo-color);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.telefono-row {
  display: flex;
  gap: 8px;
}

.input-codigo-pais {
  width: 70px;
  flex-shrink: 0;
  padding: 12px 10px;
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
  font: inherit;
}

.input-telefono {
  flex: 1;
  padding: 12px 10px;
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
  font: inherit;
}

.detalle-info p {
  margin: 4px 0;
  font-size: 0.88rem;
}

.detalle-historial-titulo {
  margin-top: 20px;
  font-size: 0.95rem;
}

.detalle-historial {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.historial-item {
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.historial-fecha {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.historial-comentario {
  margin: 4px 0 0;
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .leads-panel .filtros-panel {
    flex-direction: column;
    align-items: stretch;
  }

  /* Filtros y selects: cada uno ocupa TODO el ancho (parejos) */
  .filtros-panel .field,
  .filtros-panel .leads-select,
  .filtros-panel select,
  .metricas-cab-der .field,
  .metricas-cab-der select {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* Filtros de Métricas (Período / Vendedor / Campaña + Ver métricas):
     los tres selects y el botón a TODO el ancho, uno debajo del otro y
     parejos. Antes cada uno tomaba el ancho de su contenido y quedaban
     desproporcionados. */
  .metricas-filtros { flex-direction: column; align-items: stretch; }
  .metricas-filtros .field,
  .metricas-filtros select,
  .metricas-filtros input,
  .metricas-filtros .btn {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* Filtros de Descuentos comerciales: los 4 selects en grilla 2×2, todos
     del mismo ancho. Antes iban uno abajo del otro y desparejos. */
  .descuentos-filtros {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: stretch !important;
  }
  .descuentos-filtros .news-filtro-select {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  /* El botón "Limpiar filtros" ocupa la fila entera (las dos columnas) */
  .descuentos-filtros #descFiltroLimpiar {
    grid-column: 1 / -1;
    width: 100%;
  }
  /* El conmutador Tarjetas/Lista baja a su fila, ancho completo, 50/50 */
  .descuentos-filtros .desc-vista-toggle {
    grid-column: 1 / -1;
    margin-left: 0 !important;
    width: 100%;
  }
  .descuentos-filtros .desc-vista-toggle .btn-secundario {
    flex: 1;
    justify-content: center;
  }

  /* Filtros de Facturación (Ver / Vendedor / Mes / Año + Ver liquidación):
     grilla 2 columnas. Ver, Vendedor y el botón ocupan la fila entera;
     Mes y Año comparten una fila (50/50), como ya se veían bien juntos. */
  .fact-filtros {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem 0.8rem;
    align-items: end !important;
  }
  /* Por defecto cada campo ocupa las dos columnas (full width) */
  .fact-filtros .field,
  .fact-filtros > .btn {
    grid-column: 1 / -1;
    margin: 0 !important;
  }
  .fact-filtros .field select,
  .fact-filtros > .btn {
    width: 100% !important;
    box-sizing: border-box;
  }
  /* Excepción: Mes y Año, cada uno en una columna (quedan lado a lado) */
  .fact-filtros .fact-campo-mitad {
    grid-column: auto;
  }

  /* ==========================================================================
     USUARIOS en MÓVIL: la tabla (Nombre/Email/Rol/Alta/Estado/Acciones) se
     vuelve TARJETAS. Cada usuario = una tarjeta con el nombre arriba y los
     botones de acción abajo. Se ocultan email, rol, alta y estado (para
     gestión rápida desde el celu no hacen falta). Solo .users-table-gestion,
     para no tocar las otras tablas del sistema. En escritorio no cambia nada.
     ========================================================================== */
  .table-wrap-usuarios { overflow-x: visible; }
  .users-table-gestion,
  .users-table-gestion tbody,
  .users-table-gestion tr,
  .users-table-gestion td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  /* Ocultar el encabezado de la tabla */
  .users-table-gestion thead { display: none; }
  /* Cada fila = una tarjeta */
  .users-table-gestion tr {
    background: var(--color-surface);
    border: 2px solid var(--color-borde-tarjeta);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 14px;
    margin-bottom: 12px;
  }
  /* Ocultar las celdas que no interesan en móvil: Email(2), Rol(3), Alta(4),
     Estado(5). Quedan Nombre(1) y Acciones(6). */
  .users-table-gestion td:nth-child(2),
  .users-table-gestion td:nth-child(3),
  .users-table-gestion td:nth-child(4),
  .users-table-gestion td:nth-child(5) {
    display: none;
  }
  /* Nombre: título de la tarjeta */
  .users-table-gestion td:nth-child(1) {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
    padding: 0 0 12px 0;
    border: none;
  }
  /* Acciones: grilla 2 columnas con los botones parejos */
  .users-table-gestion td.acciones-usuario {
    padding: 0;
    border: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .users-table-gestion td.acciones-usuario .btn-accion {
    width: 100%;
    justify-content: center;
    margin: 0;
  }
  /* El botón Eliminar (el último, cuando está) ocupa la fila entera */
  .users-table-gestion td.acciones-usuario .eliminar-user-btn {
    grid-column: 1 / -1;
  }

  /* Pestañas de métricas (Leads / Por vendedor / Cupos): parejas, a 2 columnas.
     El botón impar (Cupos) se estira a todo el ancho en su fila. */
  .metricas-cab,
  .metricas-cab-izq,
  .metricas-cab-der {
    width: 100% !important;
  }
  .leads-subtabs {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
    width: 100% !important;
  }
  .leads-subtabs .nav-item-simple {
    width: 100% !important;
    justify-content: center;
    box-sizing: border-box;
  }
  .leads-subtabs .nav-item-simple:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* El botón de acción (Ver métricas / Ver liquidación) a todo el ancho */
  .metricas-cab-der .btn,
  .filtros-panel .btn {
    width: 100%;
  }

  .kanban-column {
    min-width: 78vw;
    max-width: 78vw;
  }

  .modal-card {
    padding: 18px;
    max-height: 85vh;
    overflow-y: auto;
  }

  .telefono-row {
    flex-direction: column;
  }
}

/* ============================================================
   Casilleros de módulos por usuario (panel de Usuarios)
   ============================================================ */
.modulos-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  max-width: 320px;
}

.modulos-checklist .btn-guardar-modulos {
  margin-left: 4px;
}

/* ============================================================
   Mostrar/ocultar contraseña (login y definir contraseña)
   ============================================================ */
.password-field {
  position: relative;
}

.password-field input {
  width: 100%;
  padding-right: 42px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  padding: 4px;
}

.password-toggle:hover {
  color: var(--titulo-color);
}

/* ============================================================
   Tabla de usuarios: acciones en fila compacta
   ============================================================ */
.acciones-usuario {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================================
   Carrusel del Home
   ============================================================ */
.carousel {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}

/* Contenedor de los dos carruseles: horizontal en escritorio */
.home-carruseles-doble {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
}

.home-carrusel-espacio {
  flex: 1;
  min-width: 0;
}

.carousel-media {
  flex: 1;
  aspect-ratio: 4 / 3;
  max-height: 520px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-media img,
.carousel-media iframe,
.carousel-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none;
}

/* Imagen fija del home (sin carrusel): se ve completa, con borde */
.home-imagen-fija {
  aspect-ratio: 4 / 3;
  max-height: 520px;
  background: var(--color-surface-alt);
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-imagen-fija img,
.home-imagen-fija video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ==========================================================================
   HOME — imágenes de Novedades en ESCRITORIO: el marco se ajusta a la imagen.
   Antes el marco era 4:3 fijo y la imagen apaisada quedaba "hundida" con un
   espacio gris grande arriba y abajo (había que scrollear para verla). Acá,
   solo en escritorio (≥641px), el marco toma la altura de la imagen: se ve
   completa, sin espacio de más. En móvil se mantiene el 4:3 como estaba.
   ========================================================================== */
@media (min-width: 641px) {
  .home-imagen-fija {
    aspect-ratio: auto;
    max-height: none;
  }
  .home-imagen-fija img,
  .home-imagen-fija video {
    height: auto;
  }
}

.carousel-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-borde-tarjeta);
  background: var(--color-surface);
  color: var(--titulo-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-arrow:hover {
  background: var(--color-primary-soft);
}

.carousel-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.carousel-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 640px;
  margin: 10px auto 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.carousel-contador {
  font-weight: 600;
}

/* ============================================================
   Tarjeta del carrusel del Home: menos espacio arriba
   ============================================================ */
.home-carousel-card {
  padding-top: 8px;
}

.home-carousel-card .panel-header {
  margin-bottom: 8px;
}

/* ============================================================
   Dashboard central: menú horizontal (reemplaza la barra lateral)
   ============================================================ */
.app-shell-horizontal {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topnav-main {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--encabezado-fondo);
  /* El padding vertical baja de 16 a 10px para compensar el logo más
     grande: así el logo crece pero el header mantiene su alto. */
  padding: 10px 28px;
  /* Línea de marca terracota + sombra: el encabezado tiene que leerse
     POR ENCIMA del contenido, como una capa que flota. */
  border-bottom: 5px solid var(--encabezado-franja);
  box-shadow: var(--shadow-header);
  position: relative;
  z-index: 20;
}

.topnav-main-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topnav-main-brand img {
  height: 88px;              /* 60 -> 76 -> 88 */
  width: auto;
  display: block;
  /* Sombra sutil: despega el logo del azul del header */
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.32));
}

/* Separador entre el logo y el eslogan */
.topnav-main-brand::after {
  content: "";
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.22);
}

.topnav-main-slogan {
  color: var(--encabezado-texto, #FFFFFF);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.topnav-main-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}

.nav-item-h {
  position: relative;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.nav-item-h:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.nav-item-h.active {
  background: var(--color-accent);
  color: white;
}

.nav-item-h .badge {
  position: absolute;
  top: 2px;
  right: 2px;
}

.topnav-main-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topnav-main-user {
  position: relative;
}

.menu-cuenta-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  background: var(--color-surface);
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  min-width: 240px;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

.topnav-main-spacer {
  flex: 1;
}

.menu-nav-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

/* Ícono a la IZQUIERDA y el texto al lado.
   (Antes había `justify-content: space-between`, que los mandaba a cada
    punta: el ícono a un lado y el texto al otro.) */
.menu-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border: 1.5px solid var(--color-borde-tarjeta);
  background: transparent;
  color: var(--color-text);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: all 0.13s ease;
}

/* El ícono va en una cajita con fondo: se lee mucho mejor que suelto */
/* La cajita del ícono. OJO: Lucide le mete width/height propios al <svg>,
   así que hay que forzarlos, o el ícono sale diminuto. */
.menu-nav-icon {
  /* El !important es necesario: Lucide le inyecta width/height al <svg>
     y si no, el ícono sale diminuto. Solo afecta el TAMAÑO, no el color
     (los colores por módulo se definen en ventas-module.css). */
  width: 34px !important;
  height: 34px !important;
  padding: 7px;
  flex-shrink: 0;
  border-radius: 8px;
  stroke-width: 2;
  transition: all 0.13s ease;
  box-sizing: border-box;
}

.menu-nav-item:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  transform: translateX(2px);
}

/* (el hover del ícono se resuelve más abajo, con el color de cada módulo) */

/* (las reglas del ítem activo van al FINAL del archivo: tienen que
   ganarle a los colores por módulo, que son más específicos) */

.user-chip-mini {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

.user-chip-mini strong {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text);
}

.user-chip-mini span {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.main-panel-full {
  flex: 1;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (max-width: 900px) {
  /* En celular: logo a la izquierda, íconos a la derecha, en la MISMA fila */
  .topnav-main {
    flex-wrap: nowrap;
    padding: 20px 16px;
    gap: 8px;
    align-items: center;
  }

  .topnav-main-links {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }

  /* El slogan oculto en celular */
  .topnav-main-slogan {
    display: none;
  }

  /* Logo un poco más grande pero contenido */
  .topnav-main-brand img {
    height: 72px;
  }

  /* Empujar las acciones (campana, clipboard, menú) a la derecha */
  .topnav-main-spacer {
    flex: 1;
  }

  .topnav-main-actions {
    margin-left: auto;
    flex-shrink: 0;
  }

  /* Los dos carruseles: uno arriba del otro en celular */
  .home-carruseles-doble {
    flex-direction: column;
    gap: 20px;
    margin-top: 14px;
  }

  /* Título de Novedades: bajarlo y separarlo del borde */
  .home-carousel-card {
    padding: 18px 14px;
  }

  .home-carousel-card .panel-header {
    margin-bottom: 4px;
    padding-top: 6px;
  }

  .home-carousel-card .panel-header h2 {
    font-size: 1.2rem;
  }

  /* Carrusel 1 (arriba): GIF/imagen HORIZONTAL → espacio apaisado, más bajo */
  .home-carrusel-1 .carousel-media {
    aspect-ratio: 16 / 9;
    max-height: 44vh;
  }

  /* Carrusel 2 (abajo): imagen VERTICAL → espacio alto, protagonista */
  .home-carrusel-2 .carousel-media {
    aspect-ratio: 3 / 4;
    max-height: 70vh;
  }

  /* Flechas sin círculo, solo la flecha, para no robar espacio a la imagen */
  .carousel-arrow {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 0;
    border: none;
    background: none;
    color: var(--titulo-color);
  }

  .carousel-arrow:hover {
    background: none;
  }

  .carousel {
    gap: 2px;
  }
}

/* ============================================================
   Leads: sub-pestañas (Leads/Métricas/Mi Negocio/Administración)
   ============================================================ */
.leads-subtabs,
.admin-subtabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.nav-item-simple {
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(27, 90, 125, 0.3);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(16, 24, 40, 0.08);
}

.nav-item-simple.active {
  background: var(--icono-color);
  border-color: var(--marco-color);
  color: white;
}

/* --- Métricas: tarjetas resumen y gráficos --- */
.metricas-resumen {
  gap: 14px;
}

.metrica-card {
  cursor: default;
}

.metrica-card small {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.metrica-card h3 {
  margin: 8px 0 0;
  font-size: 1.8rem;
  color: var(--titulo-color);
}

.metrica-card.metrica-positiva h3 { color: #16a34a; }
.metrica-card.metrica-negativa h3 { color: var(--color-accent); }

.graficos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.grafico-card canvas {
  max-height: 280px;
}

@media (max-width: 900px) {
  .graficos-grid { grid-template-columns: 1fr; }
}

/* --- Diagnóstico --- */
.diagnostico-item {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 10px;
  font-size: 0.88rem;
  line-height: 1.5;
}

.diagnostico-item p {
  margin: 6px 0 0;
  font-weight: 400;
  color: var(--color-text-muted);
}

.diagnostico-alerta {
  background: #FEF3F2;
  border: 1px solid #FECDCA;
  color: #B42318;
}

.diagnostico-alerta p { color: #7A271A; }

.diagnostico-ok {
  background: #ECFDF3;
  border: 1px solid #ABEFC6;
  color: #166534;
}

.diagnostico-neutro {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-borde-tarjeta);
  color: var(--color-text-muted);
}

/* --- Mi Negocio: tarjeta de neto --- */
.negocio-neto {
  text-align: center;
  padding: 24px;
}

.negocio-neto h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--color-text-muted);
}

.negocio-neto-valor {
  font-size: 2.4rem;
  font-weight: 800;
  margin: 4px 0 10px;
}

.negocio-neto.neto-positivo .negocio-neto-valor { color: #16a34a; }
.negocio-neto.neto-negativo .negocio-neto-valor { color: var(--color-accent); }

/* --- Administración: plantillas --- */
.plantillas-admin-grupo { margin-bottom: 18px; }

.plantillas-admin-grupo h4 {
  color: var(--titulo-color);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.plantilla-admin-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.plantilla-admin-texto p {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.btn-eliminar-plantilla {
  flex-shrink: 0;
  background: none;
  border: 1px solid #FECDCA;
  color: #B42318;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-eliminar-plantilla:hover { background: #FEF3F2; }

/* --- Objetivo mensual inline (tabla de equipo) --- */
.objetivo-inline {
  display: flex;
  gap: 6px;
  align-items: center;
}

.input-objetivo {
  width: 60px;
  padding: 6px 8px;
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}

.btn-guardar-objetivo {
  background: var(--icono-color);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-guardar-objetivo:hover { background: var(--color-primary-dark); }

/* ============================================================
   Cartel de noticias sin leer: contraste y posición
   ============================================================ */
.news-toast {
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-accent);
  right: 70px;
}

.news-toast-text {
  color: var(--color-text);
}

.news-toast-icon {
  color: var(--color-accent);
}

.news-toast-close {
  color: var(--color-text-muted);
}

.news-toast-close:hover {
  color: var(--color-text);
}

/* ============================================================
   Chatbot
   ============================================================ */
.chatbot-panel {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 160px);
}

.chatbot-mensajes {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 4px;
}

.chatbot-bienvenida {
  background: var(--color-primary-soft);
  color: var(--titulo-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 0.9rem;
  max-width: 480px;
}

.chatbot-burbuja {
  max-width: 640px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.chatbot-burbuja-user {
  align-self: flex-end;
  background: var(--icono-color);
  color: white;
  border-bottom-right-radius: 4px;
}

.chatbot-burbuja-bot {
  align-self: flex-start;
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-bottom-left-radius: 4px;
}

.chatbot-pensando {
  font-style: italic;
  color: var(--color-text-muted);
}

.chatbot-fuentes {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 6px;
}

.chatbot-form {
  display: flex;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.chatbot-form input {
  flex: 1;
  padding: 12px 14px;
  border: 1.5px solid rgba(27, 90, 125, 0.3);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.9rem;
}


/* ============================================================
   HOME — Novedades con más presencia
   ============================================================ */

/* Este archivo carga DESPUÉS de theme.css, así que este border-image
   le gana al `border-top: 3px solid petróleo` genérico de .detail-card.
   Es a propósito: el Home lleva los dos colores. */
.home-carousel-card {
  padding-top: 20px;
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg,
                var(--color-primary) 0%,
                var(--color-primary) 45%,
                var(--color-accent) 55%,
                var(--color-accent) 100%) 1;
  box-shadow: var(--shadow);
}

.home-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--color-border);
}

.home-header h2 {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.02em;
  position: relative;
  padding-left: 16px;
}

.home-header h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 5px;
  background: var(--color-accent);
}

.home-header p {
  margin: 8px 0 0 16px;
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Espacios del carrusel: marco definido en vez de vacío */
.home-carrusel-espacio {
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-alt);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-carrusel-espacio:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow);
}


/* NOTA: los colores de ícono por módulo y las reglas del ítem activo
   viven en ventas-module.css, que carga DESPUÉS de este archivo. Si
   estuvieran acá, perderían la cascada. */

/* El panel del menú, con más presencia */
.menu-nav-lista {
  gap: 4px;
  padding-bottom: 12px;
}



/* ==========================================================================
   BADGES DEL LEAD — prepaga + tipo de consulta
   Van arriba de la tarjeta y del detalle. El vendedor ve de un vistazo
   de qué prepaga viene y qué necesita el cliente.
   Usa las variables de marca: si el broker cambia su color, los siguen.
   ========================================================================== */

.lead-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.lead-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}

/* Prepaga: fondo de marca (petróleo). Es el dato principal. */
.lead-badge-prepaga {
  background: var(--color-primary);
  color: #fff;
}

/* Tipo de consulta: ribete de acento (terracota), no fondo.
   Respeta la regla: el terracota es ribete, nunca superficie. */
.lead-badge-tipo {
  background: var(--color-surface);
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
}

/* Título del bloque "Datos de la consulta" en el detalle.
   Imita a .detalle-historial-titulo para verse consistente. */
.detalle-consulta-titulo {
  margin-top: 20px;
  font-size: 0.95rem;
  color: var(--color-primary);
}

/* ==========================================================================
   DATOS DE LA CONSULTA — grilla de mini-tarjetas (detalle del lead)
   Cada dato en su cajita: el vendedor ubica lo que busca de un vistazo.
   ========================================================================== */

.lead-datos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.lead-dato-cell {
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lead-dato-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.2;
}

.lead-dato-valor {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

/* ==========================================================================
   BARRA DE SCROLL SUPERIOR DEL KANBAN
   Espejo de la barra de abajo, pero arriba del tablero: siempre a mano,
   aunque una columna tenga muchas tarjetas. La agrega activarScrollTopKanban().
   Aplica al Kanban del CRM y al de Seguimiento (ambos usan .kanban-board).
   ========================================================================== */

.kanban-scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 8px;
}

/* La barra mide poco de alto: es solo el riel para arrastrar. */
.kanban-scroll-top-inner {
  height: 1px;
}

/* Barra gemela abajo del tablero (la agrega activarScrollTopKanban).
   En escritorio queda oculta: alcanza con la de arriba + la nativa. */
.kanban-scroll-bottom {
  display: none;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 8px;
}

/* ==========================================================================
   BARRAS DE SCROLL DEL KANBAN — VISIBLES EN MÓVIL
   En el celu la barra nativa del navegador está oculta, así que nadie sabe
   que el tablero se corre hacia el costado. Acá hacemos que las barras
   espejo (arriba y abajo) se VEAN: un riel gris con un pulgar gris oscuro
   que se puede arrastrar. Solo ≤640px; en escritorio no cambia nada.
   ========================================================================== */
@media (max-width: 640px) {
  /* Mostrar también la barra de abajo */
  .kanban-scroll-bottom {
    display: block;
  }

  /* El riel: fondo gris suave, alto tocable */
  .kanban-scroll-top,
  .kanban-scroll-bottom {
    height: 12px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 999px;
  }

  /* El interior espejo pasa a ser alto, para que el pulgar se vea */
  .kanban-scroll-top .kanban-scroll-top-inner,
  .kanban-scroll-bottom .kanban-scroll-top-inner {
    height: 10px;
  }

  /* El pulgar (la parte arrastrable de la barra nativa): gris oscuro */
  .kanban-scroll-top::-webkit-scrollbar,
  .kanban-scroll-bottom::-webkit-scrollbar {
    height: 10px;
    -webkit-appearance: none;
  }
  .kanban-scroll-top::-webkit-scrollbar-thumb,
  .kanban-scroll-bottom::-webkit-scrollbar-thumb {
    background: var(--color-border-fuerte);
    border-radius: 999px;
  }
  .kanban-scroll-top::-webkit-scrollbar-track,
  .kanban-scroll-bottom::-webkit-scrollbar-track {
    background: transparent;
  }

  /* Firefox: barra fina con pulgar oscuro sobre riel claro */
  .kanban-scroll-top,
  .kanban-scroll-bottom {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-fuerte) var(--color-surface-alt);
  }
}

/* ==========================================================================
   VISTA LISTA DEL CRM — aparece cuando hay filtros activos
   Botones Tablero/Lista + tabla compacta. Imita la lista de Seguimiento
   para que el vendedor no reaprenda nada.
   ========================================================================== */

.leads-vista-toggle {
  display: flex;
  gap: 4px;
  margin: 4px 0 14px;
}

.leads-vista-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: all .12s ease;
  white-space: nowrap;
}
.leads-vista-btn .icon-svg { width: 14px !important; height: 14px !important; }
.leads-vista-btn:hover { color: var(--color-text); }
.leads-vista-btn.activo {
  color: #fff;
  background: var(--boton-fondo);
}

.leads-lista {
  margin-top: 6px;
  background: var(--color-surface);
  border: 2px solid var(--color-border-fuerte);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.leads-lista-cab,
.leads-lista-fila {
  display: grid;
  grid-template-columns: 1.4fr 120px 1fr 120px 110px 130px 90px;
  gap: 12px;
  align-items: center;
}

.leads-lista-cab {
  padding: 9px 14px;
  background: var(--form-campo-fondo);
  border-bottom: 2px solid var(--color-border);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-text-muted);
}

.leads-lista-fila {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-surface-alt);
  font-size: 0.85rem;
  color: var(--color-text);
}
.leads-lista-fila:last-child { border-bottom: none; }
.leads-lista-fila:hover { background: var(--form-campo-fondo); }

.leads-lista-nombre { font-weight: 600; }
.leads-lista-contacto { color: var(--color-text-muted); }

/* El estado como pastilla con el color de su nivel */
.leads-lista-estado {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.leads-lista-acciones { text-align: right; }
.leads-lista-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: underline;
}
.leads-lista-link:hover { color: var(--color-primary-dark); }

/* En celular, la tabla se vuelve tarjetas apiladas */
@media (max-width: 720px) {
  .leads-lista-cab { display: none; }
  .leads-lista-fila {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 14px;
  }
}

/* ==========================================================================
   OBJETIVO DEL EQUIPO — la pizarra grupal
   Barra de avance hacia el objetivo del mes + ranking de aporte por vendedor.
   ========================================================================== */

.objetivo-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 18px 0;
}

.objetivo-cifra {
  flex: 1;
  min-width: 200px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: 8px;
  padding: 16px 20px;
}
/* La cifra del objetivo lleva el ribete de marca arriba */
.objetivo-cifra-meta {
  border-top: 3px solid var(--color-accent);
}

.objetivo-cifra-label {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.objetivo-cifra-valor {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.1;
}

.objetivo-barra-wrap { margin: 8px 0 24px; }

.objetivo-barra {
  height: 26px;
  background: var(--color-surface-alt);
  border-radius: 999px;
  overflow: hidden;
}
.objetivo-barra-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width .5s ease;
  min-width: 2px;
}
.objetivo-barra-fill.alcanzado {
  background: var(--aviso-ok-icono, #2e7d4f);
}

.objetivo-barra-pie {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}
.objetivo-logrado {
  color: var(--aviso-ok-icono, #2e7d4f);
  display: flex;
  align-items: center;
  gap: 5px;
}

.objetivo-ranking-tit {
  margin: 24px 0 12px;
  font-size: 1rem;
  color: var(--color-primary);
}

.objetivo-ranking {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.objetivo-vend {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: 6px;
  padding: 12px 14px;
}

.objetivo-vend-pos {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.objetivo-vend-info { flex: 1; }

.objetivo-vend-cab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.objetivo-vend-nombre { font-weight: 600; font-size: 0.92rem; color: var(--color-text); }
.objetivo-vend-monto { font-size: 0.85rem; color: var(--color-text-muted); white-space: nowrap; }

.objetivo-vend-barra {
  height: 8px;
  background: var(--color-surface-alt);
  border-radius: 999px;
  overflow: hidden;
}
.objetivo-vend-barra-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 999px;
  transition: width .4s ease;
}

/* Editor del objetivo (solo lo ve quien puede configurar) */
.objetivo-editor {
  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-top: 3px solid var(--color-accent);
  border-radius: 6px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.objetivo-editor label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}
.objetivo-editor-fila {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.objetivo-editor-fila input {
  flex: 1;
  min-width: 180px;
  padding: 9px 12px;
  font-size: 1rem;
  font-family: inherit;
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: 8px;
}

.objetivo-sin-meta {
  text-align: center;
  padding: 20px;
  color: var(--color-text-muted);
}
.objetivo-sin-meta .icon-svg {
  width: 34px;
  height: 34px;
  color: var(--color-border-fuerte);
  margin-bottom: 8px;
}

@media (max-width: 640px) {
  .objetivo-hero { flex-direction: column; }
}

/* Gráficos del panel Objetivo (torta + evolución) */
.objetivo-graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.objetivo-grafico-box {
  background: var(--color-surface);
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: 8px;
  padding: 16px 18px;
}
.objetivo-grafico-tit {
  margin: 0 0 12px;
  font-size: 0.95rem;
  color: var(--color-primary);
  text-align: center;
}

/* ==========================================================================
   OBJETIVO — layout de dos columnas: carrusel del premio (izq) + resumen (der)
   ========================================================================== */
.objetivo-top {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 14px;
  align-items: stretch;
  margin: 0.6rem 0 1rem;
}
/* En Objetivo, el título va más pegado a las tarjetas (sin hueco grande) */
.objetivo-panel .panel-header { margin-bottom: 8px; }

/* La imagen fija del premio (sin carrusel): se ve completa, con borde oscuro */
.objetivo-premio-img {
  min-width: 0;
}
.objetivo-imagen-fija {
  height: 100%;
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-alt);
}
.objetivo-imagen-fija img,
.objetivo-imagen-fija video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* La parte derecha: cifras en fila arriba + barra abajo, llenando el alto */
.objetivo-resumen {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Las cifras van en FILA (una al lado de la otra), cada una en su tarjeta.
   No se estiran: alto natural. El espacio sobrante lo toma la barra. */
.objetivo-resumen .objetivo-hero-fila {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0;
}
.objetivo-resumen .objetivo-cifra {
  min-width: 0;
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.objetivo-resumen .objetivo-cifra-meta {
  border-top: 4px solid var(--color-accent);
}

/* Barra más gruesa cuando está en el resumen */
.objetivo-barra-gruesa {
  height: 38px !important;
}
/* La barra en su propia tarjeta BLANCA, que se estira para ocupar el alto
   restante (hasta donde termina la imagen del costado) */
.objetivo-resumen .objetivo-barra-wrap {
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  background: var(--color-surface);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* En pantallas chicas, las dos columnas se apilan */
@media (max-width: 820px) {
  .objetivo-top {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .objetivo-resumen .objetivo-hero-fila {
    grid-template-columns: 1fr;
  }
}

/* Tres gráficos chiquitos en fila (torta, evolución, progreso) */
.objetivo-graficos-tres {
  grid-template-columns: repeat(3, 1fr);
}
.objetivo-graficos-tres .objetivo-grafico-box {
  padding: 12px 14px;
}
.objetivo-graficos-tres .objetivo-grafico-tit {
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.objetivo-graficos-tres canvas {
  max-height: 180px;
}
@media (max-width: 820px) {
  .objetivo-graficos-tres {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   CUPOS DE LEADS — pantalla de gestión
   ========================================================================== */

.cupos-panel { padding-top: 0.5rem; }

.cupos-aviso {
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  margin: 0.8rem 0;
  font-size: 0.9rem;
}
.cupos-aviso-ok {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.cupos-aviso-error {
  background: var(--aviso-peligro-fondo);
  color: var(--aviso-peligro-texto);
  border: 1.5px solid var(--aviso-peligro-borde);
}

/* Cabecera compacta: título + selector en una línea, techo a la derecha */
/* Cabecera de Métricas: cuando la pestaña es Cupos, se parte en dos columnas
   (izquierda: título + pestañas / derecha: controles de cupos arriba) */
.metricas-cab-cupos {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}
.metricas-cab-izq { flex: 1; min-width: 0; }
.metricas-cab-der {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 290px;
  flex-shrink: 0;
}
.metricas-cab .leads-subtabs { margin-bottom: 1.2rem; }
.cupos-titulo {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
}
/* Buscador + selector en la misma fila */
.cupos-controles-fila {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Espacio + línea entre el encabezado y las tarjetas */
.cupos-separador {
  border-top: 1px solid var(--color-border);
  margin: 0.3rem 0 1.4rem;
}

.cupos-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.3rem 0 1.1rem;
}
.cupos-cabecera-izq {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
/* Los controles (selector + techo + buscador) apilados a la derecha */
.cupos-cabecera-der {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 280px;
}
.cupos-cabecera h2 { margin: 0; font-size: 1.15rem; }
.cupos-broker-sel {
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-primary);
  border: 1.5px solid var(--color-border-fuerte);
  border-radius: 8px;
  background: var(--color-surface);
  cursor: pointer;
}

/* El techo del equipo, compacto (chip a la derecha) */
.cupos-techo-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--color-surface-alt);
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
}
.cupos-techo-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}
.cupos-techo-val {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary);
}
.cupos-techo-btn {
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.25rem 0.6rem;
  border: 1.5px solid var(--color-primary);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-primary);
  cursor: pointer;
}
.cupos-techo-btn:hover { background: var(--color-primary-soft); }

/* La grilla de vendedores: tamaño cómodo, ~5 por fila, bien separadas */
.cupos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.5rem;
}

/* Buscador de vendedor por nombre (vive en la cabecera, a la derecha) */
.cupos-buscador {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  flex: 1;
  min-width: 0;
}
.cupos-buscador .icon-svg { width: 16px; height: 16px; color: var(--color-text-muted); flex-shrink: 0; }
.cupos-buscador input {
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--color-text);
  width: 100%;
}
.cupos-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: 6px;
  padding: 0.75rem 0.8rem;
  box-shadow: 0 3px 10px rgba(0,0,0,0.09);
  transition: box-shadow 0.18s, transform 0.18s;
}
.cupos-card:hover {
  box-shadow: 0 10px 24px rgba(27,90,125,0.18);
  transform: translateY(-2px);
}
/* Un vendedor CON cupo se distingue con el ribete de marca (terracota) */
.cupos-card-con { border-left: 3px solid #B5472B; border-radius: 6px; }
.cupos-card-sin { opacity: 0.96; }

.cupos-card-nombre {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-text);
}
.cupos-card-sin-txt {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  flex: 1;
}

.cupos-card-datos {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

/* Los casilleros de datos (diseño 4C) */
.cupo-cajas {
  display: flex;
  gap: 0.45rem;
}
.cupo-caja {
  flex: 1;
  text-align: center;
  padding: 0.5rem 0.25rem;
  border-radius: 8px;
  border: 1.5px solid;
}
.cupo-caja-num {
  font-family: ui-monospace, 'SF Mono', 'Consolas', monospace;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}
.cupo-caja-hora-txt {
  font-family: ui-monospace, 'SF Mono', 'Consolas', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 0.2rem;
  color: #1B5A7D;
}
.cupo-caja-lbl {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-top: 0.25rem;
}

/* Día: terracota */
.cupo-caja-dia {
  background: #faf1ee;
  border-color: #B5472B;
}
.cupo-caja-dia .cupo-caja-num { color: #B5472B; }
.cupo-caja-dia .cupo-caja-lbl { color: #8a3a24; }

/* Total: terracota más suave (mismo color que día para coherencia) */
.cupo-caja-total {
  background: #faf1ee;
  border-color: #B5472B;
}
.cupo-caja-total .cupo-caja-num { color: #B5472B; }
.cupo-caja-total .cupo-caja-lbl { color: #8a3a24; }

/* Horario: petróleo */
.cupo-caja-hora {
  flex: 1.5;
  background: #eef3f6;
  border-color: #1B5A7D;
}
.cupo-caja-hora .cupo-caja-lbl { color: #1B5A7D; }

/* Los 7 días en fila */
.cupo-dias {
  display: flex;
  gap: 0.2rem;
}
.cupo-dias i {
  font-style: normal;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.cupo-dias .dia-on { background: #1B5A7D; color: #fff; }
.cupo-dias .dia-off { background: #f0e6e2; color: #c0a99f; }
.cupo-dias-txt {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* El botón: usa el color de acción del sistema (mismo que los de avanzar) */
.cupos-card-btn {
  margin-top: auto;
  padding: 0.5rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 8px;
  border: none;
  background: var(--boton-fondo);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.cupos-card-btn:hover { background: var(--boton-fondo-hover); }
/* Mismo botón para editar (con o sin cupo, coherente con el sistema) */
.cupos-card-btn-editar {
  background: var(--boton-fondo);
  color: #fff;
}
.cupos-card-btn-editar:hover { background: var(--boton-fondo-hover); }

/* El formulario modal */
.cupos-form h3 { color: var(--color-primary); }

.cupos-campo { margin-bottom: 0.9rem; }
.cupos-campo label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.3rem;
}
.cupos-campo input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  font-size: 0.95rem;
  font-family: inherit;
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}
.cupos-campo input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(27, 90, 125, 0.14);
}

.cupos-campo-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

/* Los 7 días */
.cupos-dias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.cupos-dia {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
  background: var(--color-surface);
}
.cupos-dia input { width: 15px; height: 15px; accent-color: var(--color-primary); cursor: pointer; }

.cupos-form-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1.5px solid var(--color-border);
}

.btn-borrar-cupo {
  background: var(--color-surface);
  color: var(--aviso-peligro-icono);
  border: 1.5px solid var(--aviso-peligro-icono);
}
.btn-borrar-cupo:hover { background: var(--aviso-peligro-fondo); }

@media (max-width: 640px) {
  .cupos-grid { grid-template-columns: repeat(2, 1fr); }
  .cupos-cabecera { flex-direction: column; align-items: stretch; }
  .cupos-techo-chip { justify-content: space-between; }
  .metricas-cab-cupos { flex-direction: column; }
  .metricas-cab-der { min-width: 0; }
}

/* ====================================================================
   PANEL DE BOLSA DE LEADS (admin): filtros + detalle expandible.
   ==================================================================== */
.bolsa-filtros {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
}
.bolsa-filtros .news-filtro-select {
  flex: 1 1 auto;
  min-width: 150px;
  max-width: 220px;
}
.bolsa-conteo {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 600;
}
.bolsa-acciones { text-align: right; white-space: nowrap; }
.bolsa-detalle-fila > td { background: var(--color-surface-alt); padding: 0; }
.bolsa-detalle {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 20px;
  padding: 14px 16px;
}
.bolsa-det-item { display: flex; flex-direction: column; gap: 2px; }
.bolsa-det-etq {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}
.bolsa-det-val { font-size: 0.9rem; color: var(--color-text); }

/* En móvil: la tabla de la bolsa se vuelve tarjetas (poca info por fila) */
@media (max-width: 640px) {
  /* Filtros en grilla 2x2 (mitad de alto que apilados) */
  .bolsa-filtros {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: stretch;
  }
  .bolsa-filtros .news-filtro-select { width: 100%; min-width: 0; }
  .bolsa-conteo { margin-left: 0; grid-column: 1 / -1; }

  .bolsa-tabla, .bolsa-tabla tbody, .bolsa-tabla tr, .bolsa-tabla td { display: block; width: 100%; box-sizing: border-box; }
  .bolsa-tabla thead { display: none; }
  .bolsa-tabla tr.bolsa-fila {
    background: var(--color-surface);
    border: 0.5px solid var(--color-borde-tarjeta);
    border-left: 4px solid var(--prepaga-color, var(--color-borde-tarjeta));
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 12px 14px;
    margin-bottom: 10px;
    /* Fila 1: nombre (izq) + prepaga (der). Fila 2: acciones. */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  /* Teléfono, origen, sueldo: en el detalle, no en la tarjeta */
  .bolsa-tabla tr.bolsa-fila td:nth-child(3),
  .bolsa-tabla tr.bolsa-fila td:nth-child(4),
  .bolsa-tabla tr.bolsa-fila td:nth-child(5),
  .bolsa-tabla tr.bolsa-fila td:nth-child(6) { display: none; }
  .bolsa-tabla tr.bolsa-fila td { border: none; padding: 0; }

  /* Nombre a la izquierda (ocupa el ancho libre) */
  .bolsa-td-nombre {
    order: 1;
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 600;
    padding-right: 8px !important;
  }
  /* Prepaga arriba a la derecha, misma línea */
  .bolsa-td-prepaga {
    order: 2;
    flex: 0 0 auto;
    width: auto !important;
  }
  .bolsa-td-prepaga .prepaga-tag { font-size: 0.68rem; padding: 2px 9px; }

  /* Acciones: fila completa debajo, lado a lado */
  .bolsa-acciones {
    order: 3;
    flex: 0 0 100%;
    text-align: left;
    margin-top: 10px;
    display: flex;
    gap: 8px;
  }
  .bolsa-acciones .btn-accion { flex: 1; justify-content: center; }
  .bolsa-detalle { grid-template-columns: 1fr 1fr; }
}

/* Fila de asignación manual (selector de vendedor) */
.bolsa-asignar-fila > td { background: var(--bg-accent, #eef4fb); padding: 0; }
.bolsa-asignar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
}
.bolsa-asignar-txt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--color-text);
}
.bolsa-asignar-select { min-width: 220px; }
.bolsa-asignar-confirm { white-space: nowrap; }

@media (max-width: 640px) {
  .bolsa-asignar { flex-direction: column; align-items: stretch; }
  .bolsa-asignar-select { width: 100%; min-width: 0; }
  .bolsa-asignar .btn { width: 100%; }
}

/* ====================================================================
   HISTORIAL DE LEADS TOMADOS (dentro de Bolsa de Leads)
   ==================================================================== */
.bolsa-head-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.hist-filtros {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 18px;
  padding: 12px 14px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
}
.hist-filtro-label { font-size: 0.85rem; color: var(--color-text-muted); }
.hist-filtros .news-filtro-select { min-width: 150px; }
/* Grupo Desde/Hasta: etiqueta + input. En desktop van en línea. */
.hist-filtro-fecha { display: flex; align-items: center; gap: 8px; }
.hist-btn-pdf {
  background: #eaf2f8 !important;
  color: var(--color-primary, #0A3D62) !important;
  border: 0.5px solid #b8d4e8 !important;
}

.hist-resumen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.hist-metrica {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.hist-metrica-label { font-size: 0.8rem; color: var(--color-text-muted); }
.hist-metrica-num { font-size: 1.6rem; font-weight: 700; color: var(--color-text); margin-top: 2px; }

.hist-lista { display: flex; flex-direction: column; gap: 10px; }
.hist-vend-card {
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.hist-vend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--color-surface);
  flex-wrap: wrap;
  gap: 10px;
}
.hist-vend-info { display: flex; align-items: center; gap: 11px; }
.hist-vend-textos { display: flex; flex-direction: column; gap: 1px; }
.hist-vend-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700;
  flex-shrink: 0;
}
.hist-vend-nombre { font-size: 0.95rem; font-weight: 600; color: var(--color-text); }
.hist-vend-leads { font-size: 0.8rem; color: var(--color-text-muted); }
.hist-vend-leads strong { color: var(--color-primary, #0A3D62); font-size: 0.9rem; }
.hist-vend-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.hist-detalle { padding: 4px 16px 14px; }
.hist-tabla-detalle { width: 100%; font-size: 0.85rem; }
.hist-tabla-detalle th { color: var(--color-text-muted); font-weight: 500; text-align: left; padding: 6px 4px; }
.hist-tabla-detalle td { padding: 7px 4px; border-top: 1px solid var(--color-borde-tarjeta); }

@media (max-width: 640px) {
  /* Filtros: fechas y selects en grilla 2x2, Aplicar abajo full-width */
  .hist-filtros {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: end;
  }
  .hist-filtro-fecha { flex-direction: column; align-items: stretch; gap: 3px; }
  .hist-filtro-fecha .hist-filtro-label { font-size: 0.7rem; }
  .hist-filtros .news-filtro-select { width: 100%; min-width: 0; }
  .hist-btn-aplicar { grid-column: 1 / -1; width: 100%; }

  /* Resumen: 3 números en fila, no 3 cajas apiladas */
  .hist-resumen { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hist-metrica { padding: 10px 8px; text-align: center; }
  .hist-metrica-label { font-size: 0.68rem; }
  .hist-metrica-num { font-size: 1.4rem; color: var(--color-primary, #0A3D62); }

  /* Tarjeta de vendedor: info arriba, botones lado a lado abajo */
  .hist-vend-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .hist-vend-acciones { width: 100%; }
  .hist-vend-acciones .btn-accion { flex: 1; justify-content: center; }
}

/* Tag de prepaga con su color de marca (texto blanco sobre el color) */
.prepaga-tag-color {
  color: #fff !important;
  border: none !important;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-block;
}

/* ====================================================================
   BOTONES CHICOS en Bolsa/Historial (el .btn global es full-width;
   acá los queremos del ancho de su contenido, arriba a la derecha).
   ==================================================================== */
.bolsa-head-acciones .btn {
  width: auto;
  padding: 9px 16px;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Filtros del historial en fila horizontal (desde/hasta/broker/vendedor/aplicar) */
.hist-filtros { align-items: center; flex-wrap: wrap; }
.hist-filtros .btn {
  width: auto;
  padding: 9px 20px;
  font-size: 0.9rem;
  white-space: nowrap;
}
.hist-filtros input[type="date"] {
  min-width: 0;
  flex: 0 0 auto;
  width: auto;
}
.hist-filtros select.news-filtro-select {
  flex: 0 0 auto;
  width: auto;
  min-width: 140px;
  max-width: 200px;
}
#histBroker, #histVendedor {
  flex: 0 0 auto;
  width: auto;
  min-width: 140px;
  max-width: 200px;
}

@media (max-width: 640px) {
  .bolsa-head-acciones { width: 100%; }
  .bolsa-head-acciones .btn { flex: 1; }
}

/* Head de bolsa/historial: título a la izq, botones chicos a la der */
.bolsa-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.bolsa-panel-head > .btn {
  width: auto;
  padding: 9px 16px;
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .bolsa-panel-head > .btn { width: 100%; }
}

/* ====================================================================
   CRM — Kanban en gris con encabezado blanco (solo el CRM, no Seguimiento).
   La clase .kanban-crm en el board acota estos estilos al CRM del vendedor.
   ==================================================================== */
.kanban-crm .kanban-column {
  --col-color: #cbd2da !important;
  background: #f2f0ec;
  border: 2px solid #3a4149;
}
.kanban-crm .kanban-column .kanban-column-header {
  background: #fff;
  border-bottom: 2px solid #3a4149;
}
.kanban-crm .kanban-column .kanban-col-titulo { color: #3a4149; }
.kanban-crm .kanban-column .kanban-col-cant {
  background: #f1f3f5;
  color: #3a4149;
  border: 1px solid #d3d9df;
}
.kanban-crm .kanban-column .kanban-column-body { background: transparent !important; }

/* Tarjeta compacta del CRM */
.kanban-crm .lead-card { padding: 12px; }
.lead-card-gestionar {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.lead-card-gestionar:hover { filter: brightness(1.08); }
.lead-card-abierta { border-color: var(--color-primary); }
.lead-card-detalle {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-borde-tarjeta, #e2e6ea);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ====================================================================
   Micro-tarjetas en el detalle del lead (asesor): cada dato en su cajita.
   ==================================================================== */
.lead-microcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 14px 0 4px;
}
.lead-microcard {
  background: var(--color-surface-alt, #f4f5f7);
  border: 1px solid var(--color-borde-tarjeta, #e2e6ea);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lead-microcard-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.66rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lead-microcard-label .icon-svg { width: 12px; height: 12px; }
.lead-microcard-valor {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  word-break: break-word;
}

@media (max-width: 640px) {
  .lead-microcards { grid-template-columns: 1fr 1fr; }
}

/* ====================================================================
   Modal de detalle del lead con pestañas (asesor).
   ==================================================================== */
.lead-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.lead-modal-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 700;
  flex-shrink: 0;
}
.lead-modal-nombre { font-size: 1.05rem; font-weight: 600; color: var(--color-text); }
.lead-modal-sub { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 2px; }

.lead-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-borde-tarjeta, #e2e6ea);
  margin-bottom: 14px;
}
.lead-tab {
  padding: 8px 14px;
  border: none;
  background: transparent;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lead-tab.activo {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom-color: var(--color-primary);
}
.lead-tab-badge {
  background: var(--color-primary);
  color: #fff;
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 999px;
  align-items: center;
}

/* Línea de tiempo del historial */
.historial-timeline {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-borde-tarjeta, #eee);
}
.historial-timeline:last-child { border-bottom: none; }
.historial-punto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-borde-tarjeta, #ccc);
  margin-top: 5px;
  flex-shrink: 0;
}
.historial-punto-nuevo { background: var(--color-primary); }
.historial-timeline .historial-comentario { font-size: 0.85rem; margin: 0; }
.historial-timeline .historial-fecha { font-size: 0.72rem; color: var(--color-text-muted); }

/* ====================================================================
   Modal de detalle: encabezado oscuro + datos con ícono de color.
   ==================================================================== */
.lead-modal-head-oscuro {
  background: #22303b;
  margin: -18px -18px 0;
  padding: 16px 18px;
  border-radius: 12px 12px 0 0;
}
.lead-modal-head-oscuro .lead-modal-avatar { background: #E8720C; }
.lead-modal-head-oscuro .lead-modal-nombre { color: #fff; }
.lead-modal-head-oscuro .lead-modal-sub { color: #9fb0bd; }
.lead-modal-head-oscuro .lead-modal-head-txt { min-width: 0; }

/* Grilla de datos con ícono de color */
.lead-datos-ico-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin: 14px 0 2px;
}
.lead-dato-ico { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lead-dato-ico-caja {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lead-dato-ico-caja .icon-svg { width: 16px; height: 16px; }
.lead-dato-ico-txt { display: flex; flex-direction: column; min-width: 0; }
.lead-dato-ico-label {
  font-size: 0.66rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lead-dato-ico-valor {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  word-break: break-word;
}
.lead-datos-sep { height: 1px; background: var(--color-borde-tarjeta, #e2e6ea); margin: 16px 0; }

/* Tonos de los íconos por grupo de dato */
.tono-azul  { background: #E6F1FB; color: #185FA5; }
.tono-gris  { background: #F1EFE8; color: #5F5E5A; }
.tono-verde { background: #E1F5EE; color: #0F6E56; }
.tono-ambar { background: #FAEEDA; color: #854F0B; }

@media (max-width: 640px) {
  .lead-datos-ico-grid { grid-template-columns: 1fr; }
}

/* Tarjeta CRM: los dos botones de acción lado a lado */
.lead-card-actions-2col {
  display: flex;
  gap: 6px;
}
.lead-card-actions-2col button {
  flex: 1;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ====================================================================
   Selector de modalidad de gestión (editar accesos del usuario)
   ==================================================================== */
.modo-gestion-campo {
  border: 1px solid var(--color-borde-tarjeta, #e2e6ea);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modo-gestion-titulo {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
}
.modo-gestion-opcion {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}
.modo-gestion-opcion input[type="radio"] { margin-top: 3px; flex-shrink: 0; }
.modo-gestion-opcion span { display: flex; flex-direction: column; gap: 2px; }
.modo-gestion-opcion strong { font-size: 0.85rem; }
.modo-gestion-opcion small { font-size: 0.74rem; color: var(--color-text-muted); line-height: 1.35; }

/* Botón eliminar lead de la bolsa (solo lo ve el dueño) */
.bolsa-btn-eliminar {
  background: #FBEAE8 !important;
  color: #B42318 !important;
  border: 0.5px solid #f0c4ac !important;
  padding: 7px 10px !important;
}
.bolsa-btn-eliminar:hover { background: #f7d7d2 !important; }
.bolsa-btn-eliminar .icon-svg { width: 15px; height: 15px; }

/* Múltiples rangos horarios en el formulario de cupo */
.cupos-horarios { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.cupos-horarios-titulo { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.cupo-rango { position: relative; align-items: flex-end; }
.cupo-rango-quitar {
  background: #FBEAE8;
  color: #B42318;
  border: 0.5px solid #f0c4ac;
  border-radius: 6px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 1px;
}
.cupo-rango-quitar .icon-svg { width: 15px; height: 15px; }
.cupo-agregar-rango {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface-alt, #f1f3f5);
  border: 1px dashed var(--color-borde-tarjeta, #c7cdd3);
  color: var(--color-text-accent, #1B5A7D);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.82rem;
  cursor: pointer;
  align-self: flex-start;
}
.cupo-agregar-rango:hover { background: var(--color-surface, #fff); }
.cupos-horarios-nota { font-size: 0.72rem; color: var(--color-text-muted); margin: 0; }

/* Historial: vista de lista completa del día (sin filtro de vendedor) */
.hist-lista-completa { overflow-x: auto; }
.hist-tabla-completa { width: 100%; border-collapse: collapse; }
.hist-tabla-completa th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-borde-tarjeta, #e2e6ea);
  background: var(--color-surface-alt, #f4f5f7);
}
.hist-tabla-completa td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--color-borde-tarjeta, #eef0f2);
  font-size: 0.88rem;
}
.hist-tabla-completa tr:hover td { background: var(--color-surface-alt, #f7f8fa); }