/* ============================================================
   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;
  }
  /* 🔴 LOS BOTONES SE SALÍAN DE LA PANTALLA.
     Con `flex: 1` y el texto completo —"Ver", "Asignar", "Compartir" más el
     tacho— los cuatro pedían más de 340px y el último quedaba fuera del área
     visible, sin forma de tocarlo.
     Ahora: los tres primeros se reparten el ancho y el tacho ocupa lo suyo. */
  .bolsa-acciones {
    flex-wrap: nowrap;
    gap: 5px;
  }
  .bolsa-acciones .btn-accion {
    flex: 1;
    min-width: 0;
    justify-content: center;
    padding: 7px 4px;
    font-size: 0.78rem;
    gap: 3px;
    white-space: nowrap;
  }
  .bolsa-acciones .btn-accion .icon-svg { width: 14px; height: 14px; flex-shrink: 0; }

  /* El de borrar: solo el ícono, no compite por ancho con los otros tres. */
  .bolsa-acciones .bolsa-btn-eliminar {
    flex: 0 0 auto;
    padding: 7px 8px;
  }

  .bolsa-detalle { grid-template-columns: 1fr 1fr; }

  /* La cabecera: los botones a todo el ancho, de a dos por fila. Antes
     desbordaban y el borde derecho quedaba cortado. */
  .bolsa-head-acciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
  }
  .bolsa-head-acciones .btn {
    width: 100%;
    justify-content: center;
    padding: 9px 6px;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  /* Los selects cortaban el texto: se achica la letra para que entre. */
  .bolsa-filtros .news-filtro-select {
    font-size: 0.82rem;
    padding-left: 8px;
    padding-right: 22px;
  }
}

/* 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); }

/* ===== Asignación masiva de cupos ===== */
.cupos-btn-masivo { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.4rem; }
.cupos-masivo-aplicar {
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.9rem;
  background: var(--color-surface-alt, #F8FAFC);
}
.cupos-masivo-check {
  display: flex; align-items: center; gap: 0.5rem;
  cursor: pointer; margin-bottom: 0.7rem; font-size: 0.92rem;
}
.cupos-masivo-check input { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; }
.cupos-masivo-check span { color: var(--color-text-muted); font-weight: 400; font-size: 0.85rem; }
.cupos-masivo-vendedores {
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 8px; padding: 0.9rem 1rem; margin-bottom: 1rem;
}
.cupos-masivo-vend-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.cupos-masivo-vend-cab label { font-weight: 600; font-size: 0.9rem; }
.cupos-masivo-todos {
  background: none; border: 1px solid var(--color-primary); color: var(--color-primary);
  border-radius: 6px; padding: 0.3rem 0.7rem; font-size: 0.8rem; cursor: pointer; font-weight: 500;
}
.cupos-masivo-todos:hover { background: var(--color-primary); color: #fff; }
.cupos-masivo-lista {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem;
  max-height: 240px; overflow-y: auto;
}
@media (max-width: 560px) { .cupos-masivo-lista { grid-template-columns: 1fr; } }
.cupos-masivo-vend {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.6rem; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent; font-size: 0.88rem;
}
.cupos-masivo-vend:hover { background: var(--color-surface-alt, #F1F5F9); }
.cupos-masivo-vend.sel { background: #E7F0EB; border-color: #B7D5C2; }
.cupos-masivo-vend input { width: 15px; height: 15px; accent-color: var(--color-primary); cursor: pointer; }

/* ===== Panel de Métricas de Leads ===== */
.met-controles {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  margin-bottom: 1rem; padding: 1rem; background: var(--color-surface-alt, #F8FAFC);
  border-radius: 8px;
}
.met-periodo { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.met-periodo label { font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted); }
.met-periodo input[type="date"] {
  padding: 0.4rem 0.6rem; border: 1px solid var(--color-border, #CBD5E1);
  border-radius: 6px; font-size: 0.85rem;
}
.met-rapidos { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-left: 0.3rem; }
.met-rapido {
  background: #fff; border: 1px solid var(--color-border, #CBD5E1); color: var(--color-text, #334155);
  border-radius: 6px; padding: 0.35rem 0.7rem; font-size: 0.8rem; cursor: pointer;
}
.met-rapido:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* El rango que se esta viendo. Sin esta marca, quien cambia las fechas a mano
   pierde de vista que periodo esta mirando: los botones se ven todos iguales
   y el unico dato son los dos campos de fecha. */
.met-rapido-activo {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  font-weight: 600;
}
.met-filtros { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.met-filtro-sel {
  padding: 0.4rem 0.6rem; border: 1px solid var(--color-border, #CBD5E1);
  border-radius: 6px; font-size: 0.85rem; background: #fff; max-width: 200px;
}
.met-limpiar {
  background: none; border: none; color: #B42318; font-size: 0.82rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.2rem;
}
.met-total-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #E7F0EB; color: #0F6E56; padding: 0.5rem 0.9rem; border-radius: 20px;
  font-size: 0.9rem; margin-bottom: 1.2rem;
}
.met-total-chip strong { font-size: 1.1rem; }
.met-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;
}
@media (max-width: 720px) { .met-grid { grid-template-columns: 1fr; } }
.met-card {
  background: #fff; border: 2px solid var(--color-borde-tarjeta, #D6DEE7);
  border-radius: 8px; padding: 1.1rem 1.2rem;
}
.met-card-full { margin-bottom: 1rem; }
.met-card-tit {
  font-weight: 700; font-size: 0.95rem; margin-bottom: 0.9rem;
  display: flex; align-items: center; gap: 0.4rem; color: var(--color-text, #1E293B);
}
.met-vacio { color: var(--color-text-muted); font-size: 0.85rem; font-style: italic; }
.met-barra-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.met-barra-lbl {
  flex: 0 0 34%; font-size: 0.83rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: var(--color-text, #334155);
}
.met-barra-track {
  flex: 1; height: 18px; background: var(--color-surface-alt, #EEF2F6);
  border-radius: 4px; overflow: hidden;
}
.met-barra-fill {
  display: block; height: 100%; background: linear-gradient(90deg, #0F6E56, #2E9E5B);
  border-radius: 4px; min-width: 2px;
}
.met-barra-num { flex: 0 0 auto; font-size: 0.82rem; font-weight: 600; color: var(--color-text, #334155); }
.met-barra-num small { color: var(--color-text-muted); font-weight: 400; }
/* Gráficos de columnas */
.met-graf-horas, .met-graf-dias {
  display: flex; align-items: flex-end; gap: 2px; height: 140px;
  padding-top: 0.5rem;
}
.met-graf-dias { gap: 0.5rem; }
.met-col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; position: relative;
}
.met-col-barra {
  width: 70%; background: linear-gradient(180deg, #2E9E5B, #0F6E56);
  border-radius: 3px 3px 0 0; min-height: 2px; transition: height 0.2s;
}
.met-col-dia .met-col-barra { width: 55%; }
.met-col-lbl { font-size: 0.65rem; color: var(--color-text-muted); margin-top: 0.3rem; }
.met-col-num { font-size: 0.72rem; font-weight: 600; color: var(--color-text, #334155); }
.met-graf-nota { font-size: 0.75rem; color: var(--color-text-muted); text-align: center; margin-top: 0.4rem; }

/* ===== Comparación de períodos ===== */
.met-comp-presets {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.met-comp-presets-lbl { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); }
.met-comp-periodos {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem;
}
.met-comp-periodo {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem;
  border-radius: 8px; border: 1px solid var(--color-border, #E2E8F0);
}
.met-comp-periodo input[type="date"] {
  padding: 0.35rem 0.5rem; border: 1px solid var(--color-border, #CBD5E1);
  border-radius: 6px; font-size: 0.82rem;
}
.met-comp-periodo-a { background: #EAF2FB; border-color: #B9D4F0; }
.met-comp-periodo-b { background: #FBF0EA; border-color: #F0D2B9; }
.met-comp-badge { font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 10px; }
.met-badge-a { background: #2E86DE; color: #fff; }
.met-badge-b { background: #B5651D; color: #fff; }
/* Totales comparados */
.met-comp-totales {
  display: flex; align-items: stretch; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.met-comp-total-card {
  flex: 1; min-width: 160px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 1.2rem; border-radius: 12px; text-align: center;
}
.met-comp-total-a { background: #EAF2FB; border: 1px solid #B9D4F0; }
.met-comp-total-b { background: #FBF0EA; border: 1px solid #F0D2B9; }
.met-comp-total-lbl { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.3rem; }
.met-comp-total-num { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--color-text, #1E293B); }
.met-comp-total-sub { font-size: 0.8rem; color: var(--color-text-muted); }
.met-comp-vs {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 0.5rem; min-width: 90px;
}
.met-comp-var-grande { font-size: 1.5rem; font-weight: 800; }
.met-comp-vs-txt { font-size: 0.72rem; color: var(--color-text-muted); }
.met-var-sube { color: #157F3D; }
.met-var-baja { color: #B42318; }
.met-var-igual { color: var(--color-text-muted); }
/* Tabla comparada de desgloses */
.met-comp-tabla { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.met-comp-tabla thead th {
  font-size: 0.7rem; color: var(--color-text-muted); text-align: right; padding: 0.2rem 0.4rem;
  border-bottom: 1px solid var(--color-border, #E2E8F0);
}
.met-comp-tabla thead th:first-child { text-align: left; }
.met-comp-tabla td { padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--color-surface-alt, #F1F5F9); }
.met-comp-lbl { color: var(--color-text, #334155); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.met-comp-a, .met-comp-b, .met-comp-var { text-align: right; font-weight: 600; }
.met-comp-a { color: #2E86DE; }
.met-comp-b { color: #B5651D; }
/* Gráficos comparados (dos barras) */
.met-graf-comp .met-col-comp {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%;
}
.met-comp-barras { display: flex; align-items: flex-end; gap: 1px; height: 100%; width: 100%; justify-content: center; }
.met-graf-comp .met-col-barra { width: 42%; border-radius: 3px 3px 0 0; min-height: 1px; }
.met-barra-a { background: #2E86DE; }
.met-barra-b { background: #B5651D; }
.met-leyenda-a { color: #2E86DE; font-weight: 700; }
.met-leyenda-b { color: #B5651D; font-weight: 700; }

.met-comp-filtros { margin-bottom: 1.2rem; padding: 0.7rem 1rem; background: var(--color-surface-alt, #F8FAFC); border-radius: 8px; }
.met-comp-filtros-lbl { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); margin-right: 0.3rem; }

/* ===== Comparación entre prepagas ===== */
.met-comp-prepagas { margin-bottom: 1rem; }
.met-comp-prepagas-lbl { display: block; font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 0.5rem; }
.met-comp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.met-comp-chip {
  background: #fff; border: 1.5px solid var(--color-border, #CBD5E1); color: var(--color-text, #334155);
  border-radius: 20px; padding: 0.45rem 1rem; font-size: 0.87rem; cursor: pointer; font-weight: 500;
  display: inline-flex; align-items: center; gap: 0.3rem; transition: all 0.15s;
}
.met-comp-chip:hover { border-color: var(--color-primary); }
.met-comp-chip.on { background: var(--color-primary, #0F6E56); color: #fff; border-color: var(--color-primary, #0F6E56); }
.met-comp-vacio {
  text-align: center; padding: 3rem 1rem; color: var(--color-text-muted);
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
}
.met-comp-vacio .icon-svg { width: 40px; height: 40px; opacity: 0.5; }
.met-comp-tabla-wrap { overflow-x: auto; }
.met-comp-prepagas-tabla { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.met-comp-prepagas-tabla thead th {
  text-align: center; padding: 0.7rem 1rem; font-size: 0.92rem; font-weight: 700;
  border-bottom: 2px solid var(--color-border, #E2E8F0); white-space: nowrap;
}
.met-comp-prepagas-tabla thead th:first-child { text-align: left; }
.met-comp-prepagas-tabla td { padding: 0.5rem 1rem; text-align: center; border-bottom: 1px solid var(--color-surface-alt, #F1F5F9); }
.met-comp-prepagas-tabla td:first-child { text-align: left; color: var(--color-text, #334155); }
.met-comp-total-row { background: var(--color-surface-alt, #F8FAFC); }
.met-comp-total-row td { font-size: 1.05rem; padding: 0.7rem 1rem; }
.met-comp-seccion td {
  background: #EEF2F6; font-weight: 700; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--color-text-muted); text-align: left !important;
  padding: 0.45rem 1rem;
}
.met-comp-catlbl { padding-left: 1.5rem !important; color: var(--color-text-muted) !important; }
.met-comp-val { font-weight: 600; }

/* ===== Barras apiladas por prepaga en métricas ===== */
.met-stack-selector {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem;
  padding: 0.7rem 1rem; background: var(--color-surface-alt, #F8FAFC); border-radius: 8px;
}
.met-stack-selector-lbl { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); margin-right: 0.2rem; }
.met-stack-chip {
  background: #fff; border: 1px solid var(--color-border, #CBD5E1); color: var(--color-text, #334155);
  border-radius: 6px; padding: 0.4rem 0.9rem; font-size: 0.84rem; cursor: pointer; font-weight: 500;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.met-stack-chip:hover { border-color: var(--color-primary); }
.met-stack-row {
  padding-bottom: 0.85rem;
  border-bottom: 0.5px solid var(--color-border, #E2E8F0);
  margin-bottom: 0.85rem;
}
.met-stack-row:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.met-stack-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; gap: 0.5rem; }
.met-stack-lbl { font-size: 0.88rem; color: var(--color-text, #334155); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.met-stack-detalle { font-size: 0.75rem; color: var(--color-text-muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.met-stack-detalle span { font-weight: 600; }
.met-stack-sep { color: var(--color-text-muted); opacity: 0.5; font-weight: 400; }
.met-stack-barra-fila { display: flex; align-items: center; gap: 0.65rem; }
.met-stack-track {
  height: 24px; border-radius: 5px; overflow: hidden; display: flex;
  background: var(--color-surface-alt, #EEF2F6); min-width: 3px;
}
.met-stack-seg { height: 100%; display: block; }
.met-stack-num { flex: 0 0 auto; font-size: 0.92rem; font-weight: 700; color: var(--color-text, #334155); min-width: 32px; text-align: right; }
.met-stack-leyenda {
  display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.8rem; padding-top: 0.7rem;
  border-top: 0.5px solid var(--color-border, #E2E8F0); font-size: 0.78rem; color: var(--color-text-muted);
}
.met-stack-leyenda span { display: inline-flex; align-items: center; gap: 0.3rem; }
.met-stack-punto { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* Canvas de los gráficos de métricas (Chart.js) */
.met-canvas-wrap { position: relative; height: 250px; width: 100%; }
.met-canvas-dias { height: 230px; }
.met-leyenda-graf {
  display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 0.7rem;
  font-size: 0.78rem; color: var(--color-text-muted);
}
.met-leyenda-graf span { display: inline-flex; align-items: center; gap: 0.3rem; }

/* ===== Comparación de prepagas en barras ===== */
.met-comp-totales-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px; margin-bottom: 1.2rem;
}
.met-comp-totales-cards .met-comp-total-card {
  background: var(--color-surface-alt, #F8FAFC);
  border: 2px solid var(--color-borde-tarjeta, #D6DEE7);
  border-radius: 8px; padding: 1rem;
  text-align: center; display: flex; flex-direction: column; gap: 2px;
}
.met-comp-total-prep { font-size: 0.85rem; font-weight: 600; }
.met-comp-totales-cards .met-comp-total-num { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--color-text, #1E293B); }
.met-comp-totales-cards .met-comp-total-sub { font-size: 0.75rem; color: var(--color-text-muted); }
.met-comp-cat {
  padding-bottom: 0.85rem; border-bottom: 0.5px solid var(--color-border, #E2E8F0); margin-bottom: 0.85rem;
}
.met-comp-cat:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.met-comp-cat-tit { font-size: 0.88rem; color: var(--color-text, #334155); margin: 0 0 0.5rem; font-weight: 500; }
.met-comp-barra-fila { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
.met-comp-barra-fila:last-child { margin-bottom: 0; }
.met-comp-barra-prep { font-size: 0.75rem; font-weight: 600; flex: 0 0 58px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.met-comp-barra-track {
  flex: 1; height: 18px; background: var(--color-surface-alt, #EEF2F6);
  border-radius: 4px; overflow: hidden; display: block;
}
.met-comp-barra-fill { display: block; height: 100%; border-radius: 4px; min-width: 2px; }
.met-comp-barra-num { flex: 0 0 auto; font-size: 0.82rem; font-weight: 600; color: var(--color-text, #334155); min-width: 24px; text-align: right; }
.met-comp-barra-num.cero { color: var(--color-text-muted); font-weight: 400; }

/* ===== Panel de Rendimiento (conversión) ===== */
.rend-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px; margin-bottom: 1.2rem;
}
.rend-card {
  background: var(--color-surface-alt, #F8FAFC);
  border: 2px solid var(--color-borde-tarjeta, #D6DEE7);
  border-radius: 8px; padding: 0.9rem;
  text-align: center; display: flex; flex-direction: column; gap: 3px;
}
.rend-card-lbl { font-size: 0.78rem; color: var(--color-text-muted); }
.rend-card-num { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--color-text, #1E293B); }
.rend-card-ok { color: #0E4C5C; }
.rend-card-proc { color: #7A7870; }
.rend-nota { font-size: 0.78rem; color: var(--color-text-muted); margin: 0 0 0.8rem; }
/* Ranking */
.rend-rank-fila {
  display: flex; align-items: center; gap: 0.7rem;
  padding-bottom: 0.6rem; border-bottom: 0.5px solid var(--color-border, #E2E8F0); margin-bottom: 0.6rem;
}
.rend-rank-fila:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.rend-rank-pos {
  width: 24px; height: 24px; border-radius: 5px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700;
  flex: 0 0 auto; color: #fff;
}
.rend-rank-lbl { flex: 1; font-size: 0.87rem; color: var(--color-text, #334155); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rend-rank-leads { font-size: 0.78rem; color: var(--color-text-muted); flex: 0 0 auto; }
.rend-rank-tasa { font-size: 1rem; font-weight: 700; color: #0E4C5C; min-width: 56px; text-align: right; flex: 0 0 auto; }
/* Filas de conversión */
.rend-fila { padding-bottom: 0.8rem; border-bottom: 0.5px solid var(--color-border, #E2E8F0); margin-bottom: 0.8rem; }
.rend-fila:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.rend-fila-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.35rem; }
.rend-fila-lbl { font-size: 0.88rem; font-weight: 500; color: var(--color-text, #334155); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rend-fila-detalle { font-size: 0.74rem; color: var(--color-text-muted); white-space: nowrap; }
.rend-cerr { color: #0E4C5C; font-weight: 600; }
.rend-proc { color: #7A7870; font-weight: 600; }
.rend-fila-barra { display: flex; align-items: center; gap: 0.6rem; }
.rend-track {
  flex: 1; height: 20px; background: var(--color-surface-alt, #EEF2F6);
  border-radius: 4px; overflow: hidden; display: flex;
}
/* Paleta: el color (petróleo) marca lo cerrado; lo en proceso queda neutro
   en gris, para que la vista salte a lo que se concretó. */
.rend-seg-cerr { height: 100%; background: linear-gradient(180deg, #14606F, #0E4C5C); display: block; }
.rend-seg-proc { height: 100%; background: linear-gradient(180deg, #C2C0B7, #B4B2A9); display: block; }
.rend-tasa { font-size: 0.92rem; font-weight: 700; color: #0E4C5C; min-width: 52px; text-align: right; }
.rend-leyenda {
  display: flex; gap: 1rem; margin-top: 0.9rem; padding-top: 0.7rem;
  border-top: 0.5px solid var(--color-border, #E2E8F0); font-size: 0.76rem; color: var(--color-text-muted);
}
.rend-leyenda span { display: inline-flex; align-items: center; gap: 0.3rem; }
.rend-punto { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.rend-punto-cerr { background: #0E4C5C; }
.rend-punto-proc { background: #B4B2A9; }

/* Tarjetas de pérdida en Rendimiento */
.rend-card-perd { color: #B42318; }
.rend-card-desist { color: #8A4318; }
/* Leads por estado actual */
.rend-estado-fila { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.55rem; }
.rend-estado-fila:last-child { margin-bottom: 0; }
.rend-estado-lbl {
  flex: 0 0 180px; font-size: 0.86rem; color: var(--color-text, #334155);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rend-estado-track {
  flex: 1; height: 20px; background: var(--color-surface-alt, #EEF2F6);
  border-radius: 4px; overflow: hidden; display: block;
}
.rend-estado-fill { display: block; height: 100%; border-radius: 4px; min-width: 2px; }
.rend-estado-num { flex: 0 0 auto; font-size: 0.9rem; font-weight: 700; color: var(--color-text, #334155); min-width: 32px; text-align: right; }
@media (max-width: 600px) { .rend-estado-lbl { flex: 0 0 120px; font-size: 0.78rem; } }

/* Grid desparejo: cada columna acomoda sus tarjetas sin estirarlas.
   Sin esto, "Conversión por ingresos" (5 filas) se estira hasta igualar
   a "Por provincia" (20 filas) y deja un hueco blanco enorme. */
.rend-grid-desparejo { align-items: start; }
.rend-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.met-grid > .rend-col > .met-card { margin: 0; }

/* Botón para expandir el ranking completo */
.rend-rank-vermas {
  width: 100%; margin-top: 0.9rem; padding: 0.5rem;
  background: none; border: 1px dashed var(--color-border, #CBD5E1);
  border-radius: 6px; color: var(--color-text-muted); font-size: 0.83rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.3rem;
}
.rend-rank-vermas:hover { border-color: #0E4C5C; color: #0E4C5C; }

/* Aclaración de qué mide el panel de rendimiento */
.rend-aclaracion {
  font-size: 0.8rem; color: var(--color-text-muted);
  background: var(--color-surface-alt, #F8FAFC);
  border-left: 3px solid #0E4C5C; border-radius: 0;
  padding: 0.6rem 0.9rem; margin: 0 0 1.2rem;
  display: flex; align-items: center; gap: 0.4rem;
}

/* Objetivo del Equipo SIN imagen (brokers que no cargaron una):
   una sola columna, así las tarjetas ocupan todo el ancho en vez de
   quedar apretadas a la izquierda con medio panel vacío. */
.objetivo-top.objetivo-top-sin-img {
  grid-template-columns: 1fr;
}

/* Motivos del "ingreso desistido" (por qué no avanzó el lead) */
.leads-motivos { display: flex; flex-direction: column; gap: 0.5rem; }
.leads-motivo-opcion {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--color-border, #CBD5E1);
  border-radius: 8px; cursor: pointer;
  font-size: 0.9rem; transition: all .12s;
}
.leads-motivo-opcion:hover { border-color: #B57A0B; background: #FEF9F0; }
.leads-motivo-opcion input { width: 16px; height: 16px; accent-color: #B57A0B; cursor: pointer; }
.leads-motivo-opcion:has(input:checked) {
  border-color: #B57A0B; background: #FEF6E7; font-weight: 600;
}

/* Ayudas de los campos de cupo */
.cupos-ayuda {
  font-size: 0.78rem; color: var(--color-text-muted);
  margin: 0.3rem 0 0; line-height: 1.5;
}
.cupos-ayuda-ojo {
  background: #FEF6E7; border-left: 3px solid #B57A0B;
  padding: 0.5rem 0.7rem; border-radius: 0 4px 4px 0;
  color: #8A5A0B;
}
.cupos-ayuda-ojo .icon-svg { width: 13px; height: 13px; vertical-align: -2px; }

/* Compartir leads con otro broker */
.btn-accion-compartido {
  background: #E7F0EB; border-color: #B7D5C2; color: #0F6E56;
}
.bolsa-compartir-lista { display: flex; flex-direction: column; gap: 0.5rem; }
.bolsa-compartir-opcion {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem; text-align: left;
  border: 1.5px solid var(--color-border, #CBD5E1);
  border-radius: 8px; background: #fff; cursor: pointer;
  font-size: 0.92rem; font-weight: 500; transition: all .12s;
}
.bolsa-compartir-opcion:hover {
  border-color: var(--color-primary); background: var(--color-surface-alt, #F1F5F9);
}

/* Aviso de leads compartidos disponibles (vendedores de otro broker) */
.leads-compartidos-aviso {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: #E7F0EB; color: #0F6E56;
  padding: 0.35rem 0.8rem; border-radius: 16px;
  font-size: 0.85rem; font-weight: 600; margin: 0.3rem 0 0;
}
.leads-compartidos-aviso .icon-svg { width: 14px; height: 14px; }

/* ==========================================================================
   MIS MÉTRICAS — el tablero personal del vendedor
   ==========================================================================
   Vive DENTRO del CRM, como pestaña al lado de "CRM". No es un módulo propio
   del menú: como módulo habría que habilitarlo DOS veces —techo del broker y
   permiso por usuario— y con 150 asesores eso es trabajo manual puro. Son sus
   propios leads: quien tiene CRM ya ve esos datos.

   Reusa las clases del panel de Rendimiento del admin (.met-card, .met-grid,
   .rend-fila, .rend-track...) para que el vendedor lea sus números con el
   mismo lenguaje visual que su supervisor. Acá solo va lo que ese panel no
   tiene: los KPI de arriba, los atajos de fecha y el gráfico por día.
   ========================================================================== */

.mismet-panel { padding: 0.25rem 0 0; }

.mismet-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0 0 0.9rem;
  border-bottom: 1.5px solid var(--color-border);
}

.mismet-sub {
  margin: 0;
  font-size: 0.87rem;
  color: var(--color-text-muted);
}

/* --- Los atajos de fecha ------------------------------------------------ */

.mismet-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 0 0;
}

.mismet-atajo {
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.mismet-atajo:hover { background: var(--color-surface-alt); }

/* El atajo elegido va en petroleo lleno: es el unico de la fila. */
.mismet-atajo.activo {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.mismet-rango {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.9rem 0 0;
}

.mismet-rango label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.mismet-rango span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.mismet-rango input {
  padding: 7px 10px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
}

/* --- Los KPI de arriba --------------------------------------------------- */

.mismet-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 0.75rem;
  padding: 1.25rem 0;
}

.mismet-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  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);
}

.mismet-kpi-label {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.mismet-kpi-valor {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-text);
}

.mismet-kpi-nota {
  font-size: 0.74rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* La tasa de cierre es EL numero del vendedor: lleva el ribete terracota. */
.mismet-kpi-destacado { border-top: 3px solid var(--color-accent); }
.mismet-kpi-destacado .mismet-kpi-valor { color: var(--color-accent); }

.mismet-kpi-ok .mismet-kpi-valor { color: var(--color-success); }

/* Ambar = "esto se demora". Solo se enciende si hay algo pendiente. */
.mismet-kpi-alerta { border-color: var(--color-warning); }
.mismet-kpi-alerta .mismet-kpi-valor { color: var(--color-warning); }

.mismet-aviso { margin: 0 0 1.25rem; }

/* --- Leads por día ------------------------------------------------------- */
/* Barras verticales: el vendedor ve su ritmo de un vistazo. La porcion verde
   de cada barra son los leads de ESE dia que termino cerrando. */

.mismet-dias {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 150px;
  padding-top: 0.5rem;
  overflow-x: auto;
}

.mismet-dia {
  flex: 1 0 22px;
  min-width: 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.mismet-dia-barra {
  width: 100%;
  min-height: 6px;
  background: var(--color-primary);
  border-radius: 3px 3px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}

.mismet-dia-cerr {
  width: 100%;
  background: var(--color-success);
  border-radius: 0 0 3px 3px;
}

.mismet-dia-lbl {
  font-size: 0.62rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  transform: rotate(-45deg);
  transform-origin: center;
  height: 1.1em;
}

/* --- Celular ------------------------------------------------------------ */

@media (max-width: 640px) {
  .mismet-atajo {
    flex: 1 1 calc(33.333% - 0.34rem);
    text-align: center;
    padding: 7px 6px;
    font-size: 0.78rem;
  }
  .mismet-rango label { flex: 1 1 100%; }
  .mismet-rango input { width: 100%; box-sizing: border-box; }

  .mismet-kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
    padding: 1rem 0;
  }
  .mismet-kpi { padding: 0.75rem 0.85rem; }
  .mismet-kpi-valor { font-size: 1.4rem; }

  .mismet-dias { height: 130px; }
  .mismet-dia { flex: 1 0 18px; min-width: 18px; }
}

/* ==========================================================================
   MI MES — el resumen de facturación del vendedor
   ==========================================================================
   Modo LECTURA. Responde una sola pregunta: "¿cómo viene mi mes?".

   La distincion clave es entre lo que tiene FIRME (ventas ya finalizadas) y
   el TECHO (si entran todas las que estan en tramite). Si se mostrara un solo
   numero, el vendedor tomaria el techo por asegurado y despues reclamaria la
   diferencia. Por eso van los dos, y el firme va primero.
   ========================================================================== */

.mimes-panel { padding: 0.25rem 0 0; }

.mimes-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0 0 0.9rem;
  border-bottom: 1.5px solid var(--color-border);
}

.mimes-sub {
  margin: 0;
  font-size: 0.87rem;
  color: var(--color-text-muted);
}

.mimes-cab-acciones {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

/* --- Los KPI de arriba --------------------------------------------------- */

.mimes-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  padding: 1.25rem 0;
}

.mimes-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  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);
}

.mimes-kpi-label {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.mimes-kpi-valor {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-text);
}

.mimes-kpi-nota {
  font-size: 0.74rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* Lo que ya esta firme va en verde: es el unico numero seguro de la pantalla. */
.mimes-kpi-ok { border-top: 3px solid var(--color-success); }
.mimes-kpi-ok .mimes-kpi-valor { color: var(--color-success); }

/* --- Las cuentas --------------------------------------------------------- */

.mimes-cuenta { margin-top: 0.3rem; }

.mimes-cuenta-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  font-size: 0.9rem;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.mimes-cuenta-fila:last-child { border-bottom: none; }
.mimes-cuenta-fila em { font-style: normal; color: var(--color-text-muted); font-size: 0.85em; }
.mimes-cuenta-fila strong { font-weight: 700; white-space: nowrap; }

.mimes-cuenta-total {
  margin-top: 0.2rem;
  padding-top: 0.7rem;
  border-top: 1.5px solid var(--color-borde-tarjeta) !important;
  border-bottom: none;
  font-size: 1rem;
}
.mimes-cuenta-total strong { font-size: 1.2rem; }

.mimes-resta { color: var(--color-danger); }
.mimes-negativo { color: var(--color-danger); }

/* El techo: lo que cobraria SI entran todas. Va aparte y en terracota —el
   ribete de la marca— para que no se confunda con el numero firme de arriba. */
.mimes-techo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  background: var(--color-surface-alt);
  border-left: 3px solid var(--color-accent);
  border-radius: 0;
}

.mimes-techo-lbl {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.mimes-techo-val {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}

/* --- La tabla de ventas -------------------------------------------------- */

.mimes-tabla-wrap { overflow-x: auto; margin-top: 0.4rem; }

.mimes-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.mimes-tabla th {
  text-align: left;
  padding: 0.55rem 0.7rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  border-bottom: 1.5px solid var(--color-borde-tarjeta);
  white-space: nowrap;
}

.mimes-tabla td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.mimes-tabla .num { text-align: right; white-space: nowrap; }
.mimes-tabla tbody tr:last-child td { border-bottom: none; }

/* Una venta desistida sigue a la vista, pero apagada: el vendedor tiene que
   poder ver QUE se cayo, sin que compita con las que si cuentan. */
.mimes-fila-caida td { opacity: 0.55; }

.mimes-chip {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.mimes-chip-ok {
  background: var(--color-success-soft, #ECFDF3);
  color: var(--color-success);
}

.mimes-chip-proceso {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.mimes-chip-caida {
  background: var(--color-danger-soft, #FEF3F2);
  color: var(--color-danger);
}

/* --- Celular ------------------------------------------------------------ */

@media (max-width: 640px) {
  .mimes-cab-acciones { width: 100%; }
  .mimes-cab-acciones select,
  .mimes-cab-acciones button { flex: 1 1 100%; }

  .mimes-kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
    padding: 1rem 0;
  }
  .mimes-kpi { padding: 0.75rem 0.85rem; }
  .mimes-kpi-valor { font-size: 1.25rem; }

  .mimes-techo { flex-direction: column; gap: 0.25rem; }
  .mimes-tabla { font-size: 0.82rem; }
}


/* ==========================================================================
   RENDIMIENTO EN CELULAR
   ==========================================================================
   El panel estaba pensado para pantalla ancha: nombre a la izquierda y
   detalle a la derecha, todo en una linea. En un celular esas dos cosas se
   pelean por 340px y gana el truncado — quedaba "Galeno · C..." y no se
   sabia de que tipo de consulta hablaba.

   En celular cada cosa va en su propia linea. Ocupa mas alto, pero se lee.
   ========================================================================== */

@media (max-width: 640px) {

  /* --- Conversion por prepaga / provincia / tipo de consulta --- */

  .rend-fila-cab {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }

  .rend-fila-lbl {
    white-space: normal;      /* que el nombre largo baje de linea */
    overflow: visible;
    text-overflow: clip;
    font-size: 0.92rem;
    font-weight: 600;
  }

  .rend-fila-detalle {
    white-space: normal;
    font-size: 0.78rem;
    line-height: 1.35;
  }

  /* La barra y el porcentaje, mas altos: en el celular se miran de lejos. */
  .rend-track { height: 11px; }
  .rend-tasa { font-size: 1rem; min-width: 46px; }

  /* --- El ranking de segmentos --- */
  /*
     Eran 4 columnas en una fila: posicion, etiqueta, leads y tasa. En
     celular la etiqueta quedaba con ~90px y se cortaba siempre.
     Pasa a dos filas: arriba el nombre completo, abajo los numeros.
  */
  .rend-rank-fila {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    grid-template-areas:
      "pos lbl lbl"
      "pos leads tasa";
    gap: 0.15rem 0.55rem;
    align-items: center;
    /* El borde y el margen los pone la regla base: no se tocan, si no las
       filas quedan pegadas una a la otra. */
    padding-bottom: 0.6rem;
  }

  .rend-rank-pos   { grid-area: pos; align-self: start; margin-top: 0.15rem; }
  .rend-rank-lbl   {
    grid-area: lbl;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 0.88rem;
    line-height: 1.35;
  }
  .rend-rank-leads { grid-area: leads; font-size: 0.78rem; }
  .rend-rank-tasa  { grid-area: tasa; font-size: 1rem; text-align: right; }

  /* --- Los KPI de arriba --- */
  /* Cuatro tarjetas en fila no entran: quedan de 80px y el numero se
     achica hasta ser ilegible. Dos por fila se leen bien. */
  .rend-cards {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  /* --- Filtros --- */
  .met-filtros { flex-direction: column; align-items: stretch; }
  .met-filtro-sel { width: 100%; }
  .met-rapidos { width: 100%; }
  .met-rapido { flex: 1 1 auto; text-align: center; }
}


/* ==========================================================================
   CUPOS DE LEADS EN CELULAR
   ==========================================================================
   La grilla pedia columnas de minimo 210px. En un celular de 340px entran
   dos, asi que cada tarjeta quedaba con ~150px: el horario "09:00-20:00"
   se partia en dos lineas y los dias se apretaban hasta ser ilegibles.

   Los controles tenian el mismo problema: buscador, selector de broker y
   boton peleando por una fila. El buscador terminaba con 30px de ancho y
   el selector mostraba "Cor..." en vez del nombre del broker.
   ========================================================================== */

@media (max-width: 640px) {

  /* --- Los controles: uno debajo del otro --- */

  .cupos-controles-fila {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .cupos-buscador { width: 100%; }
  .cupos-broker-sel { width: 100%; }
  .cupos-btn-masivo { width: 100%; justify-content: center; }

  /* El chip del techo: en una fila no entra, y es el dato mas importante
     de la pantalla —cuantos leads puede tomar el equipo—. */
  .cupos-techo-chip {
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
  }
  .cupos-techo-btn { margin-left: auto; }

  /* --- Las tarjetas: UNA por fila --- */
  /* Con dos por fila el horario se corta. Una sola deja lugar para que
     cada dato se lea de un vistazo. */
  .cupos-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .cupo-caja { padding: 0.6rem 0.4rem; }

  /* Los dias: mas grandes, que se puedan tocar */
  .cupo-dias { gap: 0.3rem; flex-wrap: wrap; }
  .cupo-dias i {
    width: 26px;
    height: 26px;
    font-size: 0.78rem;
  }
}


/* ==========================================================================
   MÉTRICAS EN CELULAR — las barras apiladas
   ==========================================================================
   El titulo y el desglose ("Swiss Medical 10 · Omint 8 · Galeno 6...")
   compartian linea. En un celular el desglose se le encimaba al titulo y
   los dos quedaban ilegibles.

   Aparte, el total quedaba a la derecha de una barra que ocupa solo parte
   del ancho: el numero flotaba en el medio de la nada, sin alinearse con
   nada.
   ========================================================================== */

@media (max-width: 640px) {

  .met-stack-cab {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    margin-bottom: 0.3rem;
  }

  .met-stack-lbl {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 0.92rem;
    font-weight: 600;
  }

  /* El desglose baja de linea entero y puede ocupar dos renglones: es
     preferible a que se corte o se encime con el titulo. */
  .met-stack-detalle {
    white-space: normal;
    text-align: left;
    font-size: 0.76rem;
    line-height: 1.5;
  }

  /* El total va SIEMPRE al final de la fila, no pegado a la barra: asi
     todos los numeros quedan alineados en la misma columna y se pueden
     comparar de un vistazo. */
  .met-stack-barra-fila {
    gap: 0.6rem;
  }
  .met-stack-num {
    margin-left: auto;
    font-size: 1rem;
    min-width: 34px;
    text-align: right;
  }

  .met-stack-track { height: 15px; }

  /* La leyenda: en celular las prepagas entran de a dos por fila */
  .met-stack-leyenda {
    gap: 0.4rem 0.9rem;
  }
}


/* La consulta que escribió el cliente: ocupa la fila entera porque puede ser
   un párrafo, no un dato de una palabra como los demás. */
.bolsa-det-consulta {
  grid-column: 1 / -1;
  padding: 8px 10px;
  background: var(--color-surface);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
}
.bolsa-det-consulta .bolsa-det-val { line-height: 1.5; }