/* ============================================================================
   asesor.css — Layout propio del panel del asesor.
   Shell (sidebar oscura / barra inferior móvil), KPIs, bandeja de solicitudes,
   tabla de pedidos, drawer de detalle y formularios de los modales.
   Solo layout: todos los colores y medidas provienen de tokens.css.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Shell: sidebar fija a la izquierda + contenido con ancho de lectura
   --------------------------------------------------------------------------- */
.asesor-shell {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding-left: 14.5rem; /* espacio de la sidebar fija */
}

.asesor-sidebar {
  position: relative;
  isolation: isolate;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 14.5rem;
  display: flex;
  flex-direction: column;
  /* Cartón en penumbra en vez de negro plano: la textura asoma bajo un velo
     del 94 % de negro, así el texto y los iconos claros no pierden contraste.
     cover + no-repeat: carton.webp NO es tileable (la costura se nota), y esta
     superficie es acotada, así que una sola hoja la cubre entera. */
  background-color: var(--color-superficie-oscura);
  background-image: linear-gradient(rgba(24, 24, 24, 0.94), rgba(24, 24, 24, 0.94)),
    var(--textura-carton);
  background-size: auto, cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-texto-inverso);
  padding: var(--esp-5) 0 var(--esp-4);
  z-index: var(--z-cabecera);
}

.asesor-sidebar__logo {
  height: 48px;
  width: auto;
  align-self: center;
  margin: 0 auto var(--esp-4);
}

/* Navegación vertical; el ítem activo lleva el acento dorado de marca */
.asesor-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  padding-top: var(--esp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.asesor-nav__item {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-5);
  border-left: 3px solid transparent;
  color: #efece3;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: color var(--dur-rapida) linear, background-color var(--dur-rapida) linear;
}
.asesor-nav__item .icono { color: var(--amarillo-marca); }
.asesor-nav__item + .asesor-nav__item { border-top: 1px solid rgba(255, 255, 255, 0.09); }
.asesor-nav__item:hover {
  color: var(--blanco);
  background: rgba(255, 255, 255, 0.06);
}
.asesor-nav__item[aria-current='page'] {
  border-left-color: var(--amarillo-marca);
  color: var(--blanco);
  background: rgba(255, 199, 11, 0.10);
}

/* Burbuja de pendientes en el nav (como los mensajes sin leer de un chat):
   dice CUÁNTAS solicitudes de venta hay sin entrar a la sección. */
.asesor-nav__contador {
  margin-left: auto;
  flex: none;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-pastilla);
  background: var(--rojo-sello);
  color: var(--blanco);
  font-size: 0.75rem;
  font-weight: var(--peso-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}

/* Pie de la sidebar: asesor con sesión + salir */
.asesor-sidebar__pie {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-4) 0;
  border-top: 1px solid var(--gris-oscuro);
}
.asesor-sidebar__nombre {
  flex: 1;
  min-width: 0;
  color: #efece3;
  font-size: var(--texto-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Botón-avatar: abre el selector de gallina de perfil. Invita TRES veces al
   entrar y luego se queda quieto (un anillo dorado + un lapicito): se
   entiende que se puede cambiar sin que distraiga todo el día. */
/* Retrato, no botón: el selector de gallina se quitó (distraía). Sin lápiz{
  position: relative;
  border: 0;
  padding: 0;
  background: none;
  border-radius: 50%;
  line-height: 0;
  flex: none;
}

.asesor-sidebar__pie .boton-icono { color: var(--gris-claro); }
.asesor-sidebar__pie .boton-icono:hover {
  color: var(--blanco);
  background: var(--gris-oscuro);
}

.asesor-contenido {
  max-width: 75rem; /* rem: escala en pantallas gigantes */
  margin-inline: auto;
  padding: var(--esp-5) var(--esp-6);
}
/* Panel de operación: columna más angosta y centrada (KPIs + bandeja + config)
   para que las filas no queden larguísimas y desbalanceadas. */
.asesor-contenido--angosto { max-width: 59rem; }

/* ----------------------------------------------------------------------------
   Cabecera de cada vista: título (+ saludo) y acción primaria
   --------------------------------------------------------------------------- */
.asesor-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-4);
  flex-wrap: wrap;
  margin-bottom: var(--esp-5);
}
.asesor-cabecera p {
  color: var(--color-texto-suave);
  margin-top: var(--esp-1);
}

/* ----------------------------------------------------------------------------
   Bandeja de solicitudes (plegables)
   --------------------------------------------------------------------------- */
/* Fila-resumen compacta: avatar + nombre arriba, y estado + nº + hora en una
   sub-línea que envuelve sin encimarse. El chevron queda a la derecha. */
.asesor-solicitud summary {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}
.asesor-solicitud__id {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.3;
  min-width: 0;
  flex: 1;
}
.asesor-solicitud__id strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Qué pide la solicitud, legible con la tarjeta CERRADA (ítem 10) */
.asesor-solicitud__que {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: var(--texto-sm); color: var(--color-texto);
}
.asesor-solicitud__sub {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
}
/* Único control del encabezado: el botón de desplegar, redondo y con color
   (dorado cerrado → azul abierto). Rechazar/ignorar viven dentro, con motivo. */
.asesor-solicitud__abrir {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  color: var(--color-acento-texto);
  background: var(--dorado-velo);
  box-shadow: inset 0 0 0 1px var(--color-borde-fuerte);
  transition: background var(--dur-rapida), color var(--dur-rapida), transform var(--dur-rapida);
}


.asesor-solicitud__chev { flex: none; transition: transform var(--dur-rapida); }
.plegable[open] .asesor-solicitud__chev { transform: rotate(180deg); }
.asesor-solicitud__acciones { justify-content: flex-end; gap: var(--esp-2); flex-wrap: wrap; }

/* Cambio de estado: resumen "Actual → Pasará a" y detalle plegable */
.sol-estado-resumen {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-2);
  background: var(--dorado-velo);
  box-shadow: inset 0 0 0 1px var(--color-borde-fuerte);
}
.sol-estado-resumen--seg { margin: var(--esp-2) 0; }

/* Datos para averiguar el estado real: tienda · n.º de orden · tracking · link */
.sol-averiguar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-2);
  border-left: 3px solid var(--accion-info);
  background: var(--accion-info-velo, rgba(63,109,142,0.12));
}
.sol-averiguar__etq { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: .04em; font-weight: var(--peso-semibold); color: var(--accion-info); }
.sol-averiguar__dato { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--texto-sm); }
.sol-averiguar__dato--link { flex: 1 1 14rem; min-width: 0; max-width: 100%; }
.sol-averiguar__dato--link > .enlace-vista-hueco { flex: 1 1 auto; margin-top: 0; }
.sol-averiguar__copiar { width: 1.6rem; height: 1.6rem; color: var(--accion-info); }
.sol-estado-chips { margin: var(--esp-2) 0 0; }
.sol-estado-resumen__par { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; }
.sol-estado-resumen__etq {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-texto-2);
}
.sol-estado-resumen__flecha { color: var(--accion-info); flex: none; }
.sol-detalle { border-top: 1px dashed var(--color-borde-fuerte); padding-top: var(--esp-2); }
.sol-detalle > summary {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  cursor: pointer;
  list-style: none;
  color: var(--accion-info);
  font-size: var(--texto-sm);
  font-weight: 600;
}
.sol-detalle > summary::-webkit-details-marker { display: none; }
.sol-detalle__chev { margin-left: auto; transition: transform var(--dur-rapida); }
.sol-detalle[open] > summary .sol-detalle__chev { transform: rotate(180deg); }
.sol-detalle__cuerpo { display: flex; flex-direction: column; gap: var(--esp-3); margin-top: var(--esp-3); }

.asesor-solicitud__mensaje {
  font-style: italic;
  color: var(--color-texto-2);
  margin-bottom: var(--esp-3);
}
.asesor-solicitud__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  margin-bottom: var(--esp-4);
}
.asesor-solicitud__datos span {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
}
.asesor-solicitud__datos .icono { color: var(--color-icono); }

.asesor-solicitud__form {
  border-top: 1px solid var(--color-borde);
  padding-top: var(--esp-4);
}
.asesor-solicitud__enviar { align-self: flex-start; }

/* Bloque de despacho (transportadora + guía), compartido con los modales */
.asesor-despacho {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background: var(--color-superficie-2);
  border-radius: var(--radio-firma-sm);
}
.asesor-despacho__titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--color-texto-2);
}

/* ----------------------------------------------------------------------------
   Fila de filtros: búsqueda + tienda
   --------------------------------------------------------------------------- */
.asesor-filtros {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin: var(--esp-4) 0;
}
.asesor-filtros__buscar { width: 100%; }
/* Los tres filtros{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: var(--esp-3);
  align-items: end;
}
/* Cada filtro con su icono a la izquierda{ position: relative; }


/* ----------------------------------------------------------------------------
   Tabla de gestión: celdas propias del asesor
   --------------------------------------------------------------------------- */
.asesor-tabla { margin-bottom: var(--esp-6); }

.asesor-tabla__vacia {
  text-align: center;
  color: var(--color-texto-suave);
  padding: var(--esp-6) var(--esp-4);
}

.asesor-celda-cliente {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}
.asesor-celda-cliente__texto {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}
.asesor-celda-producto { max-width: 18rem; }

.asesor-codigo {
  background: var(--gris-velo);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radio-xs);
  font-size: var(--texto-sm);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   Drawer de detalle del pedido
   --------------------------------------------------------------------------- */
.asesor-drawer__titulo { line-height: 1.2; }
.asesor-drawer__titulo .texto-xs { display: block; }
.asesor-drawer__titulo h2 { font-size: var(--texto-lg); }

/* Estado actual en grande + última actualización */
.asesor-drawer__estado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  flex-wrap: wrap;
  margin-bottom: var(--esp-5);
}
.asesor-drawer__estado .badge-estado {
  font-size: var(--texto-base);
  padding: 0.45rem 1rem 0.45rem 0.8rem;
}

.asesor-drawer__seccion {
  margin-bottom: var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-md);
  border: 1px solid var(--color-borde);
  background-color: var(--dorado-velo);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
}
.asesor-drawer__seccion > h3 {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-texto-2);
  margin-bottom: var(--esp-3);
}
.asesor-drawer__seccion > h3 .icono {
  display: inline-grid;
  place-items: center;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: var(--color-acento);
  color: var(--negro);
  padding: 0.3rem;
}

/* Pares etiqueta/valor en dos columnas */
.asesor-datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3) var(--esp-4);
  margin: 0;
}
.asesor-datos dt {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}
.asesor-datos dd {
  margin: 0;
  font-size: var(--texto-sm);
  overflow-wrap: break-word;
}

.asesor-drawer__items {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--esp-3);
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
}

.asesor-drawer__acciones {
  display: flex;
  gap: var(--esp-2);
  flex-wrap: wrap;
  margin: 0 0 var(--esp-5);
  padding-bottom: var(--esp-4);
  border-bottom: 1px dashed var(--color-borde-fuerte);
}
.asesor-drawer__acciones .boton { flex: 1 1 9rem; }
.asesor-orden__fila { display: inline-flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.asesor-orden__agregar { margin: 0; }

/* Solicitudes dentro del drawer */
.asesor-drawer__solicitud {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-firma-sm);
  padding: var(--esp-3) var(--esp-4);
}
.asesor-drawer__solicitud + .asesor-drawer__solicitud { margin-top: var(--esp-2); }
.asesor-drawer__solicitud .asesor-solicitud__mensaje { margin: var(--esp-2) 0 0; }

.asesor-drawer__respuesta {
  margin-top: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  background: var(--dorado-velo);
  border-radius: var(--radio-xs);
  font-size: var(--texto-sm);
}

/* Estado de una solicitud: icono + etiqueta (el color solo refuerza) */
.asesor-chip-solicitud {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.6rem;
  border-radius: var(--radio-pastilla);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  background: var(--gris-velo);
  color: var(--color-texto-2);
}
.asesor-chip-solicitud[data-estado='pendiente'] {
  background: var(--dorado-velo);
  color: var(--estado-actual-texto);
}

/* ----------------------------------------------------------------------------
   Formularios de los modales
   --------------------------------------------------------------------------- */
.asesor-form__grid,
.asesor-form__grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3) var(--esp-4);
}

.asesor-modal__acciones {
  justify-content: flex-end;
  margin-top: var(--esp-2);
}

/* ----------------------------------------------------------------------------
   Esqueletos de carga (formas propias del asesor)
   --------------------------------------------------------------------------- */
.asesor-esqueleto-fila {
  height: 3.25rem;
  margin: var(--esp-2);
}

/* ----------------------------------------------------------------------------
   Móvil (< 880px): la sidebar se vuelve barra inferior fija con iconos
   --------------------------------------------------------------------------- */
@media (max-width: 879px) {
  .asesor-shell {
    padding-left: 0;
    padding-bottom: 4.5rem; /* espacio de la barra inferior */
  }

  .asesor-sidebar {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    border-top: 1px solid var(--gris-oscuro);
  }
  .asesor-sidebar__logo { display: none; }

  .asesor-nav {
    flex-direction: row;
    gap: 0;
    /* Con 7 secciones la barra no se aplasta: se desliza de lado */
    overflow-x: auto;
    scrollbar-width: none;
  }
  .asesor-nav::-webkit-scrollbar { display: none; }
  .asesor-nav__item {
    flex: 1 0 4.8rem;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    padding: var(--esp-2) var(--esp-1);
    border-left: none;
    border-top: 3px solid transparent;
    text-align: center;
    font-size: var(--texto-xs);
  }
  .asesor-nav__item span { line-height: 1.15; }
  .asesor-nav__item[aria-current='page'] {
    border-left: none;
    border-top-color: var(--amarillo-marca);
  }
  /* En la barra inferior la burbuja se monta sobre el icono, como en una app */
  .asesor-nav__item { position: relative; }
  .asesor-nav__contador {
    position: absolute;
    top: 0.15rem;
    right: 50%;
    transform: translateX(1.35rem);
    margin-left: 0;
    min-width: 1.15rem;
    height: 1.15rem;
    font-size: var(--texto-2xs);
  }

  .asesor-sidebar__pie {
    border-top: none;
    padding: 0 var(--esp-2);
    align-items: center;
  }
  .asesor-sidebar__pie .avatar,
  .asesor-sidebar__nombre { display: none; }

  .asesor-contenido { padding: var(--esp-4); }
}

/* Formularios de modal a una columna en pantallas angostas */
@media (max-width: 560px) {
  .asesor-form__grid,
  .asesor-form__grid2 { grid-template-columns: 1fr; }
  .asesor-datos { grid-template-columns: 1fr; }
}


/* ----------------------------------------------------------------------------
   Densidad profesional de la tabla: el producto y la tienda no envuelven en
   tres líneas — una línea con elipsis; el detalle completo vive en el drawer.
   --------------------------------------------------------------------------- */
/* Anchos FIJOS en porcentaje: la tabla siempre cabe en el ancho disponible,
   nunca hay scroll lateral. Cliente 30 · Nº 11 · Producto 27 · Estado 20 ·
   Entrega 12. Lo que no cabe se recorta con elipsis (el detalle está en el
   drawer al hacer clic). */
.asesor-tabla table { table-layout: fixed; width: 100%; min-width: 0; }
/* Pedidos: Cliente · Venta · Tienda · N.º orden · Producto · Estado · Entrega */
.asesor-tabla th:nth-child(1), .asesor-tabla td:nth-child(1) { width: 18%; }
.asesor-tabla th:nth-child(2), .asesor-tabla td:nth-child(2) { width: 10%; }
.asesor-tabla th:nth-child(3), .asesor-tabla td:nth-child(3) { width: 8%; }
.asesor-tabla th:nth-child(4), .asesor-tabla td:nth-child(4) { width: 16%; }
.asesor-tabla th:nth-child(5), .asesor-tabla td:nth-child(5) { width: 19%; }
.asesor-tabla th:nth-child(6), .asesor-tabla td:nth-child(6) { width: 17%; }
.asesor-tabla th:nth-child(7), .asesor-tabla td:nth-child(7) { width: 12%; }
.asesor-tabla th:nth-child(2), .asesor-tabla td:nth-child(2) { padding-left: 0.4rem; padding-right: 0.4rem; }
.asesor-tabla td:nth-child(2) code { font-size: var(--texto-xs); letter-spacing: 0; padding: 0.1rem 0.35rem; }
/* El N.º de orden se LEE completo (regla del dueño): si no cabe, se parte en
   dos líneas — jamás se recorta con puntos suspensivos. */
.asesor-tabla td:nth-child(4) code { white-space: normal; word-break: break-all; font-size: var(--texto-xs); letter-spacing: 0; }
.asesor-celda-entrega > span:first-child { white-space: nowrap; }
/* Estado: sello + barra fina de avance con el color de la etapa */
/* Columna Estado PAREJA: todos los sellos del mismo ancho y la ruta debajo
   alineada con ellos. Antes cada sello medía lo que midiera su palabra y los
   puntos arrancaban en una x distinta por fila: la columna se veía coja. */
/* Qué pide la solicitud abierta, dentro de la fila (color por tipo) */
.asesor-celda-pide {
  display: inline-flex; align-items: center; gap: 0.25rem;
  margin-top: 0.15rem; padding: 0.1rem 0.4rem;
  border-radius: var(--radio-xs);
  background: var(--dorado-velo); color: var(--dorado-texto);
  font-size: var(--texto-2xs); font-weight: var(--peso-semibold);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.asesor-celda-pide[data-clase='dato'] { background: var(--accion-info-velo); color: var(--accion-info-oscuro); }
.asesor-celda-estado {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem;
  width: 8.75rem; max-width: 100%; vertical-align: middle;
}
.asesor-celda-estado .badge-estado {
  width: 100%; justify-content: center;
  overflow: hidden; text-overflow: ellipsis;
}
.asesor-celda-estado .ruta-etapas--mini { max-width: none; }
/* Entrega estimada: fecha y cuánto falta, con color */
.asesor-celda-entrega { display: inline-flex; flex-direction: column; gap: 0.1rem; line-height: 1.25; white-space: normal; }
.asesor-tabla td:nth-child(7) { white-space: normal; }
.asesor-eta { font-size: var(--texto-2xs); font-weight: var(--peso-semibold); }
.asesor-eta[data-tono='tarde'] { color: var(--accion-no-oscuro); }
.asesor-eta[data-tono='pronto'] { color: var(--dorado-texto); }
.asesor-eta[data-tono='ok'] { color: var(--accion-ok-oscuro); }
/* Hasta 1100px el Producto se lee en el drawer: se le da su sitio a lo demás */
@media (max-width: 1100px) {
  .asesor-tabla th:nth-child(5), .asesor-tabla td:nth-child(5) { display: none; }
  .asesor-tabla th:nth-child(1), .asesor-tabla td:nth-child(1) { width: 18%; }
  .asesor-tabla th:nth-child(2), .asesor-tabla td:nth-child(2) { width: 11%; }
  .asesor-tabla th:nth-child(3), .asesor-tabla td:nth-child(3) { width: 9%; }
  .asesor-tabla th:nth-child(4), .asesor-tabla td:nth-child(4) { width: 13%; }
  .asesor-tabla th:nth-child(6), .asesor-tabla td:nth-child(6) { width: 20%; }
  .asesor-tabla th:nth-child(7), .asesor-tabla td:nth-child(7) { width: 14%; }
  .asesor-tabla th, .asesor-tabla td { padding-left: var(--esp-2); padding-right: var(--esp-2); }
  .asesor-tabla--clientes th, .asesor-tabla--clientes td { display: table-cell; }
}
/* La tabla de clientes tiene 5 columnas: repartos propios */
.asesor-tabla--clientes th:nth-child(1), .asesor-tabla--clientes td:nth-child(1) { width: 16%; }
.asesor-tabla--clientes th:nth-child(2), .asesor-tabla--clientes td:nth-child(2) { width: 34%; }
.asesor-tabla--clientes th:nth-child(3), .asesor-tabla--clientes td:nth-child(3) { width: 20%; }
.asesor-tabla--clientes th:nth-child(4), .asesor-tabla--clientes td:nth-child(4) { width: 18%; }
.asesor-tabla--clientes th:nth-child(5), .asesor-tabla--clientes td:nth-child(5) { width: 12%; }
.asesor-orden { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; }
.asesor-orden--vacia {
  font-size: var(--texto-xs);
  color: var(--color-texto-2);
  padding: .15rem .5rem;
  border-radius: 999px;
  border: 1px dashed var(--color-borde-fuerte);
  background: var(--dorado-velo);
}
.asesor-orden--vacia svg { color: var(--color-acento-texto); }
.asesor-orden__agregar { margin-left: var(--esp-2); vertical-align: middle; }
.asesor-tabla td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asesor-tabla td:nth-child(1) > * { min-width: 0; }


.asesor-tabla .badge-estado { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: var(--texto-xs); padding: 0.25rem 0.55rem; }
.asesor-tabla .avatar { width: 1.9rem; height: 1.9rem; }

/* Barra de filtros: todos los controles a la misma altura. */
.asesor-filtros .campo__control {
  height: 2.5rem;
  padding-top: 0;
  padding-bottom: 0;
}

/* ----------------------------------------------------------------------------
   Filtro por fecha (vista pedidos)
   --------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   Selector de estados del modal: chips por etapa en vez de un <select>.
   Un toque elige, otro toque deselecciona; la etapa actual queda señalada.
   --------------------------------------------------------------------------- */
.selector-estados { border: 0; padding: 0; margin: 0; min-width: 0; }
.selector-estados legend { padding: 0; margin-bottom: var(--esp-2); }
/* Rejilla SIMÉTRICA: las dos rejillas (flujo y excepciones) comparten la misma
   plantilla de columnas — 7 en pantallas anchas (una fila por etapa), 4 en
   medianas (4 + 3), 2 en móvil — y todos los chips miden lo mismo (una línea,
   alto fijo). Las excepciones ocupan las primeras celdas y dejan el resto vacío:
   así los bordes de las columnas coinciden en ambas rejillas. */
.selector-estados__grupo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-2);
}
@media (min-width: 48rem) { .selector-estados__grupo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 88rem) { .selector-estados__grupo { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.modal .selector-estados__grupo,
.panel-lateral .selector-estados__grupo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) {
  .modal .selector-estados__grupo, .panel-lateral .selector-estados__grupo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.selector-estados .campo__ayuda { margin-top: var(--esp-3); }

.chip-estado {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.9rem;
  padding: 0.55rem 0.85rem;
  white-space: nowrap;
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio-sm);
  background: var(--color-superficie);
  color: var(--color-texto-2);
  font: inherit;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--curva-salida),
              background var(--dur-rapida) var(--curva-salida),
              box-shadow var(--dur-rapida) var(--curva-salida),
              color var(--dur-rapida) var(--curva-salida);
}
/* Cada chip lleva el COLOR de su estado (--chip-c, del token --est-<clave>):
   sin elegir, franja e icono de ese color; elegido, relleno completo. Se ve
   de un vistazo cuál es cuál. Las excepciones van en rojo. */
.chip-estado { --chip-c: var(--dorado-ambar); --chip-t: #fff; border-left-width: 5px; border-left-color: var(--chip-c); }
.chip-estado[data-tipo="excepcion"] { --chip-c: var(--color-excepcion); --chip-t: #fff; }
.chip-estado svg { flex: 0 0 auto; }
.chip-estado .icono { color: var(--chip-c); }
.chip-estado > span:not(.chip-estado__actual) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chip-estado:hover { border-color: var(--chip-c); box-shadow: var(--sombra-1); }
.chip-estado:focus-visible { outline: 2px solid var(--color-foco); outline-offset: 2px; }
.chip-estado[aria-pressed="true"] .icono { color: currentColor; }
.chip-estado[aria-pressed="true"] {
  border-color: var(--chip-c);
  background: var(--chip-c);
  color: var(--chip-t);
  font-weight: var(--peso-semibold);
}
/* La etapa en la que está el pedido HOY: rótulo pequeño en la esquina superior
   derecha del chip (no ocupa sitio en la línea: todos los chips miden igual). */
.chip-estado__actual {
  position: absolute;
  top: 0;
  right: 0.6rem;
  line-height: 1;
  font-size: var(--texto-2xs);
  font-weight: var(--peso-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--negro);
  transform: translateY(-55%);
  padding: 0.15rem 0.5rem;
  background: var(--amarillo-marca);
  border: 1px solid var(--dorado-bronce);
  border-radius: var(--radio-pastilla);
  box-shadow: var(--sombra-1);
}
/* El chip de la etapa ACTUAL se distingue solo: fondo ámbar suave, borde del
   color de la etapa, texto en negrita. Elegido, se pinta como los demás. */
.chip-estado[data-actual="true"] {
  border-color: var(--chip-c);
  border-width: 2px;
  border-left-width: 5px;
  background: var(--dorado-velo);
  color: var(--color-texto);
  font-weight: var(--peso-semibold);
  box-shadow: 0 0 0 3px rgba(199, 128, 1, 0.16);
}
.chip-estado[aria-pressed="true"] .chip-estado__actual { color: var(--negro); }

/* ----------------------------------------------------------------------------
   Perfil del cliente: cabecera con datos + historial de pedidos
   --------------------------------------------------------------------------- */
.cliente-perfil { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }

.cliente-perfil__cabecera {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding-bottom: var(--esp-3);
  border-bottom: 1px solid var(--color-borde);
}
.cliente-perfil__cabecera .avatar { width: 2.75rem; height: 2.75rem; }
.cliente-perfil__nombre {
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulo);
  font-size: var(--texto-md);
  line-height: 1.2;
}
.cliente-perfil__meta {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  margin-top: 2px;
}
.cliente-perfil__titulo {
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}
.cliente-perfil__pedidos { display: flex; flex-direction: column; gap: var(--esp-2); }
.cliente-perfil__pedido {
  /* Borde en dorado arena: contra el papel del modal, el borde suave daba
     1.25:1 y la tarjeta no se distinguía del fondo. */
  border: 1px solid var(--dorado-arena);
  border-radius: var(--radio-sm);
  padding: var(--esp-3);
  background-color: var(--color-superficie);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
}
.cliente-perfil__venta {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  font-variant-numeric: tabular-nums;
}
.cliente-perfil__producto {
  font-size: var(--texto-sm);
  color: var(--color-texto-2);
  margin-top: var(--esp-1);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cliente-perfil__fechas {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  margin-top: var(--esp-1);
}

/* ----------------------------------------------------------------------------
   Bandeja: grupos (propuestas de asesores / consultas de clientes)
   --------------------------------------------------------------------------- */
.asesor-bandeja__grupo {
  margin: var(--esp-5) 0 var(--esp-2);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}
.asesor-bandeja__grupo:first-child { margin-top: 0; }
.asesor-bandeja__conteo {
  font-variant-numeric: tabular-nums;
  background: var(--gris-velo);
  border-radius: var(--radio-pastilla);
  padding: 0.05rem 0.5rem;
  letter-spacing: 0;
}

/* Acciones de una propuesta en la bandeja */
.asesor-solicitud__acciones {
  justify-content: flex-end;
  flex-wrap: wrap;
}


/* Textura kraft tenue sobre el carbón del sidebar: material, no plano. */
.asesor-sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--textura-kraft);
  background-size: 460px;
  opacity: 0.07;
  pointer-events: none;
}
/* El cartón cubre TODO el lienzo del asesor (la sidebar fija lo tapa a la
   izquierda); las tarjetas blancas y los papeles contrastan encima. */
.asesor-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--textura-kraft);
  background-size: 460px;
  opacity: 0.4;
  pointer-events: none;
}
/* Sobre cartón, nada queda blanco plano: papel crema con textura y sombra */
.asesor-contenido .tarjeta,
.asesor-contenido .plegable,
.asesor-contenido .tabla-envoltura {
  background-image: linear-gradient(rgba(253, 249, 238, 0.92), rgba(253, 249, 238, 0.92)),
    var(--textura-kraft);
  background-size: auto, 460px;
  background-color: #fdf9ee;
  box-shadow: var(--sombra-2);
}


/* Sin desplazamiento horizontal: table-layout fixed arriba lo garantiza */
.asesor-tabla th:last-child,
.asesor-tabla td:last-child { white-space: nowrap; }
.asesor-contenido .asesor-tabla.tabla-envoltura { overflow-x: hidden; }
/* En pantallas angostas la columna Entrega se retira: caben las cuatro */
@media (max-width: 720px) {
  /* Pantalla angosta: fuera Producto y Entrega (viven en el drawer) */
  .asesor-tabla th:nth-child(5), .asesor-tabla td:nth-child(5),
  .asesor-tabla th:nth-child(7), .asesor-tabla td:nth-child(7) { display: none; }
  .asesor-tabla th:nth-child(1), .asesor-tabla td:nth-child(1) { width: 18%; }
  .asesor-tabla th:nth-child(2), .asesor-tabla td:nth-child(2) { width: 11%; }
  .asesor-tabla th:nth-child(3), .asesor-tabla td:nth-child(3) { width: 9%; }
  .asesor-tabla th:nth-child(4), .asesor-tabla td:nth-child(4) { width: 13%; }
  .asesor-tabla th:nth-child(6), .asesor-tabla td:nth-child(6) { width: 20%; }
  .asesor-tabla--clientes th, .asesor-tabla--clientes td { display: table-cell; }
}
/* Menos aire lateral en la tabla del asesor: 5 columnas caben sin cortarse */
.asesor-tabla th,
.asesor-tabla td { padding-left: var(--esp-3); padding-right: var(--esp-3); }

/* ----------------------------------------------------------------------------
   Nuevo pedido: grupos en tarjetas con rejilla responsiva
   --------------------------------------------------------------------------- */
.asesor-nuevo { gap: var(--esp-4); max-width: 52rem; }
.asesor-nuevo__grupo { padding: var(--esp-5); }
.asesor-nuevo__legend {
  margin-bottom: var(--esp-4);
  padding-bottom: var(--esp-2);
  border-bottom: 1px solid var(--color-borde);
  font-weight: var(--peso-semibold);
  color: var(--dorado-texto);
  font-size: var(--texto-sm);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.asesor-nuevo__rejilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-3) var(--esp-4);
}
@media (max-width: 560px) { .asesor-nuevo__rejilla { grid-template-columns: 1fr; } }
.asesor-nuevo__req { color: var(--rojo-marca); font-weight: var(--peso-semibold); }
.asesor-nuevo__acciones { justify-content: flex-end; }

/* "Venta realizada por": no se elige, queda a nombre de quien ingresó. Se ve
   como dato confirmado (no como ranura editable). */
.asesor-nuevo__fijo {
  background: var(--gris-velo);
  color: var(--color-texto-2);
  font-weight: var(--peso-semibold);
  cursor: default;
}
/* Aviso de que al asesor le falta el WhatsApp: el cliente caería a la general */
.asesor-nuevo__aviso {
  color: var(--color-excepcion);
  font-weight: var(--peso-medio);
}
.asesor-nuevo__aviso .icono { color: var(--color-excepcion); }

/* Un campo que ocupa las dos columnas de la rejilla (producto, link). */
.asesor-nuevo__ancho2 { grid-column: 1 / -1; }
@media (max-width: 560px) { .asesor-nuevo__ancho2 { grid-column: auto; } }

/* Grupo de productos: bloques repetibles + botón de agregar. */
.asesor-nuevo__grupo--productos { display: flex; flex-direction: column; gap: var(--esp-4); }
.asesor-nuevo__productos { display: flex; flex-direction: column; gap: var(--esp-4); }
.asesor-nuevo__producto {
  border: 1px dashed var(--color-borde-fuerte);
  border-radius: var(--radio-md);
  padding: var(--esp-4);
  background-color: var(--color-superficie-2);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
}
.asesor-nuevo__producto-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--esp-3);
}
.asesor-nuevo__producto-num {
  font-weight: var(--peso-semibold);
  color: var(--dorado-texto);
  font-size: var(--texto-sm);
}
.asesor-nuevo__quitar { color: var(--color-excepcion); }
.asesor-nuevo__agregar { align-self: flex-start; }

/* PROBADO Y DESCARTADO: un sello de cartón al lado de estos avisos vacíos
   ("no entraron pedidos", "sin visitas"). Sobre el cartón se lee como viñeta
   descolorida o como avatar que no cargó, no como sello. Estas dos líneas se
   quedan limpias: el vacío con texto corto no necesita adorno. */

/* Detalle del pedido: talla · color · tipo bajo cada producto, y el saldo
   marcado (rojo si el cliente debe, verde si ya está pago). */
.asesor-drawer__item-detalle { display: block; margin-top: 0.1rem; }
.asesor-saldo--debe { color: var(--color-excepcion); }
.asesor-saldo--ok { color: var(--est-entregado); }


/* Grupo "Datos de la compra" (solo coordinador): se distingue del resto. */
.asesor-nuevo__grupo--compra { border-left: 3px solid var(--color-acento-fuerte); }

.asesor-venta { border-left: 4px solid var(--color-acento-fuerte); }
.asesor-venta__por { margin-left: auto; flex: none; text-align: right; }
.asesor-venta__cuerpo { display: flex; flex-direction: column; gap: var(--esp-3); }
/* Productos: icono + nombre en negrita, detalle en gris, link debajo */
.asesor-venta__productos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-2); }
.asesor-venta__productos li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--texto-sm); color: var(--color-texto-2); }
.asesor-venta__productos li > .icono { flex: none; margin-top: 3px; color: var(--dorado-texto); }
.asesor-venta__productos li > span { min-width: 0; }
.asesor-venta__productos strong { color: var(--color-texto); }
.asesor-venta__pago { margin: 0; font-size: var(--texto-sm); font-weight: var(--peso-semibold); color: var(--color-texto); }

/* ==========================================================================
   Vista del asesor de CAMPO (#/campo): lista de clientes en tarjetas.
   ========================================================================== */
.campo-clientes {
  display: grid;
  /* 19rem: cabe nombre + estado, y la ruta de 7 etapas con aire */
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--esp-3);
  margin-top: var(--esp-4);
}
.campo-cliente {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: var(--esp-4);
  /* Grano de papel real (multiply: solo oscurece donde hay fibra, así el
     manila conserva su tono cálido y el texto su contraste). */
  background-color: var(--color-superficie);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  cursor: pointer;
  /* Nada se sale de la tarjeta, por largo que venga el dato de la hoja */
  overflow: hidden;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.campo-cliente:hover {
  box-shadow: var(--sombra-2);
  border-color: var(--color-acento-fuerte);
  transform: translateY(-1px);
}
.campo-cliente:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 2px; }


.campo-cliente__nombre {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--peso-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Renglón 2: cédula · celular · ciudad, una línea con elipsis */
.campo-cliente__meta {
  min-width: 0;
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tarjeta de PEDIDO del asesor comercial: quién (cliente + n.º de venta y
   fecha) con el estado a la derecha; qué (foto del producto, nombre, tienda y
   valor); la RUTA (un punto por etapa, rellenos hasta la actual); datos de
   entrega + WhatsApp del cliente; y al pie el seguimiento y "Solicitar". */
.campo-pedido {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-4);
  background-color: var(--color-superficie);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}
.campo-pedido:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); border-color: var(--color-borde-fuerte); }
/* El color de la etapa actual llega desde JS en --tono-estado (var(--est-<clave>)
   del catálogo): nada de claves de estado escritas acá. */
.campo-pedido { border-top: 3px solid var(--tono-estado, var(--dorado-ambar)); }
.campo-pedido[data-excepcion='1'] { --tono-estado: var(--rojo-marca); }

/* Cabecera: gallina · nombre + n.º de venta · estado a la derecha (si no
   cabe, el estado baja de línea y no se come el nombre). */
.campo-pedido__cab {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: nowrap;
  min-width: 0;
}
.campo-pedido__cab > .avatar,
.campo-pedido__cab > .gallina-avatar { flex: none; }

.campo-pedido__quien { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.campo-pedido__quien .campo-cliente__nombre { font-size: var(--texto-md); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Meta bajo el nombre: estado + n.º de venta + fecha. Envuelve como bloque
   (nunca parte el "# 13907" ni la fecha). */
.campo-pedido__venta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.15rem;
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
  color: var(--color-texto-suave);
}
.campo-pedido__venta .badge-estado { font-size: var(--texto-2xs); padding: 0.1rem 0.5rem 0.1rem 0.4rem; }
.campo-pedido__venta .badge-estado .icono { width: 12px; height: 12px; }
.campo-pedido__num { display: inline-flex; align-items: center; gap: 0.2rem; white-space: nowrap; }
.campo-pedido__num .icono { color: var(--color-icono); }
.campo-pedido__ref { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.campo-pedido__sep { margin: 0 0.05rem; }

/* Producto: foto (vista previa del link) o cajita con icono; nombre + tienda·valor */
.campo-pedido__prod {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-width: 0;
  min-height: calc(3.25rem + 2 * var(--esp-2));
  padding: var(--esp-2);
  border-radius: var(--radio-sm);
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(74, 58, 28, 0.10);
}
/* El HUECO donde se pinta la vista previa es el que hace de casilla en el
   flex: sin darle tamaño se encogía y la foto (52 px) se montaba sobre el
   texto. Se dimensionan los dos igual. */
.campo-pedido__prod > .enlace-vista-hueco,
.campo-pedido__prod .enlace-vista--miniatura{
  flex: 0 0 3.25rem;
  width: 3.25rem;
  height: 3.25rem;
  min-height: 0;
  max-width: none;
  border-radius: var(--radio-sm);
  overflow: hidden;
}

.enlace-vista--miniatura .enlace-vista__mini,
.campo-pedido__prod .enlace-vista--miniatura .enlace-vista__mini { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; max-width: 100%; border-right: 0; }
.campo-pedido__prod > .enlace-vista-hueco > .enlace-vista--miniatura { width: 100%; height: 100%; }
.enlace-vista--miniatura .enlace-vista__mini--favicon .enlace-vista__img { width: 1.75rem; height: 1.75rem; }
.campo-pedido__prod-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; padding-left: 0.1rem; }
.campo-pedido__producto {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  color: var(--color-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.campo-pedido__mas {
  display: inline-grid; place-items: center; margin-left: 0.3rem; padding: 0 0.4rem; height: 1.15rem;
  border-radius: 999px; background: var(--dorado-velo); color: var(--dorado-texto);
  font-size: var(--texto-2xs, 0.75rem); font-weight: var(--peso-semibold); vertical-align: middle;
}
.campo-pedido__tienda { font-size: var(--texto-xs); color: var(--color-texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* La ruta de etapas (.ruta-etapas*) vive en componentes.css: la comparten
   el asesor (tarjeta y tabla) y la cabecera del cliente. */
/* La tarjeta del comercial hereda su color de etapa a la ruta */
.campo-pedido .ruta-etapas { --tono-ruta: var(--tono-estado, var(--dorado-ambar)); }

/* Datos: entrega estimada · ciudad, y el WhatsApp del cliente a la derecha */
.campo-pedido__datos { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); min-width: 0; min-height: 2.1rem; }
.campo-pedido__datos .campo-cliente__meta { flex: 1 1 auto; font-size: var(--texto-sm); color: var(--color-texto-2); }
.campo-pedido__datos .contactos { flex: none; }
.campo-pedido__datos .contacto { padding: 0.3rem 0.45rem; }
.campo-pedido__datos .contacto span:empty { display: none; }
.campo-pedido__cedula { display: inline-flex; align-items: center; gap: 0.3rem; font-variant-numeric: tabular-nums; }
.campo-pedido .boton { align-self: center; margin: 0; }

/* ----------------------------------------------------------------------------
   Pedidos de la última semana (panel): filas compactas clicables
   --------------------------------------------------------------------------- */
.asesor-semana { margin-top: var(--esp-6); }


.asesor-semana__lista { display: flex; flex-direction: column; gap: var(--esp-2); }
.asesor-semana__fila {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background-color: var(--color-superficie);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-rapida) linear, background-color var(--dur-rapida) linear;
}
.asesor-semana__fila:hover { border-color: var(--dorado-bronce); background: var(--crema); }
.asesor-semana__datos { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.asesor-semana__datos strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asesor-semana__datos .texto-xs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asesor-semana__fila .badge-estado { flex: none; }
.asesor-semana__vacia { padding: var(--esp-4); }

/* Rango de fecha de compra: mini-etiqueta arriba + input de fecha */

.asesor-semana__fila--visita { cursor: default; }
.asesor-semana__fila--visita:hover { border-color: var(--color-borde); background: var(--color-superficie); }
.asesor-visita__icono { flex: none; color: var(--color-icono); }

/* Botón sincronizar: el icono gira mientras trabaja */
.asesor-cabecera [data-accion="sync"] { flex: none; }
.asesor-cabecera [data-accion="sync"].girando .icono { animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .asesor-cabecera [data-accion="sync"].girando .icono { animation: none; } }


/* ----------------------------------------------------------------------------
   Filtros PRO de Clientes: chips instantáneos + selects + conteo en vivo
   --------------------------------------------------------------------------- */
.asesor-filtros--clientes { align-items: center; row-gap: var(--esp-2); }
.asesor-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
}
.asesor-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radio-pastilla);
  border: 1.5px solid #b3a273;
  background-color: #f6efdd;
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  color: var(--color-texto-2);
  font: inherit;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  cursor: pointer;
  transition: border-color var(--dur-rapida) linear, background-color var(--dur-rapida) linear;
}
.asesor-chip[aria-pressed='true'] {
  background-color: var(--amarillo-marca);
  border-color: var(--dorado-bronce);
  color: var(--negro);
}
.asesor-chip:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 2px; }
.asesor-filtros__sel .campo__control { width: auto; min-width: 10.5rem; padding: 0.45rem 0.7rem; font-size: var(--texto-sm); }
.asesor-filtros__conteo { margin-left: auto; font-variant-numeric: tabular-nums; }


.seg-item {
  padding: var(--esp-4);
  border-radius: var(--radio-md);
  border: 1px solid var(--color-borde);
  border-left: 4px solid var(--gris-claro);
  background-color: var(--color-superficie);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  box-shadow: var(--sombra-1);
}
.seg-item[data-estado='pendiente'] { border-left-color: var(--dorado-ambar); }
.seg-item[data-estado='atendida'] { border-left-color: var(--est-entregado); }
.seg-item[data-estado='descartada'] { border-left-color: var(--rojo-marca); }
.seg-item__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  flex-wrap: wrap;
}
.seg-item__titulo { font-size: var(--texto-base); }
.seg-item__clase { margin-top: var(--esp-1); font-size: var(--texto-xs); font-weight: var(--peso-semibold); color: var(--dorado-texto); text-transform: uppercase; letter-spacing: 0.3px; }
.seg-item__detalle { margin-top: var(--esp-1); font-size: var(--texto-sm); color: var(--color-texto-2); }
.seg-item__respuesta {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin-top: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  border-left: 3px solid var(--dorado-bronce);
  background: var(--dorado-velo);
  border-radius: var(--radio-xs);
  font-size: var(--texto-sm);
}
.seg-item__meta { margin-top: var(--esp-2); }

.seg-sello {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radio-pastilla);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  flex: none;
}
.seg-sello[data-estado='espera'] { background: var(--dorado-velo); color: var(--dorado-texto); border: 1px solid var(--dorado-bronce); }
.seg-sello[data-estado='ok'] { background: rgba(31, 122, 65, 0.14); color: #14532d; border: 1px solid var(--est-entregado); }
.seg-sello[data-estado='no'] { background: rgba(179, 40, 44, 0.1); color: var(--rojo-vino); border: 1px solid var(--rojo-marca); }


/* Pie de la tarjeta del comercial: seguimiento de SU solicitud a la izquierda,
   "Pedir un cambio" a la derecha. */
.campo-pedido__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--esp-3);
  border-top: 1px solid rgba(74, 58, 28, 0.14);
}
.campo-pedido__seg { display: inline-flex; align-items: center; gap: var(--esp-2); text-decoration: none; color: inherit; }
.campo-pedido__seg:hover .seg-sello { filter: brightness(0.95); }
/* Pestañas del hub del comercial: tres subsecciones{ margin-top: var(--esp-2); }


.enlace-vista-hueco { display: block; margin-top: 0.35rem; }
.asesor-nuevo__vista-url { margin-top: var(--esp-2); }
.asesor-drawer__items .enlace-vista, .asesor-venta__productos .enlace-vista { max-width: 28rem; }

.seg-item__respuesta .icono { flex: none; margin-top: 0.15rem; }
/* Filtros compactos de las pestañas de seguimiento: pastillas con conteo */
/* Panel de filtros del seguimiento: rejilla etiqueta | pastillas, para que las
   etiquetas queden alineadas en columna y las filas midan lo mismo. */
.seg-chips__ops { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
/* Fila de cortes de trabajo (ítem 8): rejilla de anchos IGUALES — los cinco
   cortes caben parejos en 5, 3 o 2 columnas, así que nunca queda una fila coja. */
.asesor-filtros__cortes {
  display: grid;
  /* Columnas FIJAS en vez de "las que quepan": un reparto automático deja
     filas cojas. En ancho van los cinco en una línea, sin partir palabras. */
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: var(--esp-3);
}
/* Al angostarse baja a 3 columnas y en móvil a --cols-movil (2, o 1 cuando
   hay pocos cortes con rótulo largo: se apilan a ancho completo). */
@media (max-width: 1180px) { .asesor-filtros__cortes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .asesor-filtros__cortes { grid-template-columns: repeat(var(--cols-movil, 2), minmax(0, 1fr)); } }
.seg-chip {
  --tono: var(--color-borde-fuerte);
  --tono-velo: #f6efdd;
  display: flex; align-items: center; gap: 0.3rem;
  min-height: 2.35rem;
  /* Costados apretados a propósito: los rótulos largos ("En espera de compra")
     deben caber enteros repartiendo el ancho en columnas iguales. */
  padding: 0.35rem 0.5rem;
  border-radius: var(--radio-pastilla);
  border: 1px solid var(--color-borde-fuerte);
  background-color: #f6efdd;
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  color: var(--color-texto-2);
  font: inherit; font-size: var(--texto-sm); font-weight: var(--peso-medio);
  cursor: pointer;
}
/* El texto manda al centro y el conteo se ancla a la derecha: con anchos
   iguales, los números quedan alineados en columna entre pastillas. */
.seg-chip > span:not(.seg-chip__n) {
  flex: 1 1 auto; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seg-chip .icono { flex: none; color: var(--tono); }
.seg-chip:hover { border-color: var(--tono); }
.seg-chip[aria-pressed='true'] {
  background-color: var(--tono-velo);
  border-color: var(--tono);
  box-shadow: inset 0 0 0 1px var(--tono);
  color: var(--negro);
  font-weight: var(--peso-semibold);
}
.seg-chip__n {
  display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem;
  padding: 0 0.3rem; border-radius: 999px;
  background: var(--tono); color: #fff;
  font-size: var(--texto-2xs); font-weight: var(--peso-semibold);
  font-variant-numeric: tabular-nums;
}
.seg-chip[data-cero='1'] { opacity: 0.5; }
.seg-chip[data-cero='1'] .seg-chip__n { background: var(--color-borde-fuerte); }

/* Un color por CORTE: cada uno dice de qué habla (plata por comprar, algo que
   responder, en camino, un problema). El color acá comunica; no es decoración. */
.seg-chip[data-tono='comprar']   { --tono: var(--est-venta_registrada); --tono-velo: #efe7d8; }
.seg-chip[data-tono='solicitud'] { --tono: var(--accion-info);          --tono-velo: var(--accion-info-velo); }


/* SELLO de la solicitud (arriba del nombre): un botón de color dice qué es.
   Estado = ámbar de la casa; datos = azul acción; sin tags sueltos. */
.asesor-solicitud[data-clase='dato'] { border-left: 4px solid var(--accion-info); }
.asesor-solicitud[data-clase='estado'] { border-left: 4px solid var(--dorado-ambar); }

/* ----------------------------------------------------------------------------
   Jerarquía del menú (rótulos de grupo) + candado del pedido
   --------------------------------------------------------------------------- */
.asesor-nav__rotulo {
  padding: var(--esp-3) var(--esp-4) 0.3rem;
  font-size: var(--texto-2xs);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: var(--peso-semibold);
  color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 879px) {
  /* En la barra inferior no caben rótulos: la jerarquía la da el orden */
  .asesor-nav__rotulo { display: none; }
}


.seg-item__cambios {
  list-style: none;
  margin: var(--esp-2) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: var(--texto-sm);
}
.seg-item__cambios li { display: flex; gap: var(--esp-2); align-items: baseline; }
.seg-item__cambios li span { color: var(--color-texto-suave); font-size: var(--texto-xs); min-width: 8rem; }

.asesor-filtros__fila {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}
.asesor-filtros--panel .asesor-filtros__buscar { flex: 1; min-width: 0; }
.asesor-filtros--panel .asesor-filtros__conteo {
  margin-left: 0;
  flex: none;
  font-variant-numeric: tabular-nums;
}


/* ----------------------------------------------------------------------------
   Solicitudes TIPADAS (comercial → coordinador)
   --------------------------------------------------------------------------- */
/* Fichas de tipo: una por clase, la elegida en amarillo de marca */
.sol-tipos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr));
  gap: var(--esp-2);
}
.sol-tipo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 0.5rem;
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio-sm);
  background-color: var(--color-superficie);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  font: inherit;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  color: var(--color-texto-2);
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s ease, border-color var(--dur-rapida) linear;
}
.sol-tipo .icono { color: var(--dorado-texto); }
.sol-tipo:hover { transform: translateY(-1px); border-color: var(--dorado-bronce); }
.sol-tipo[aria-pressed='true'] {
  background-color: var(--amarillo-marca);
  border-color: var(--dorado-bronce);
  color: var(--negro);
}
.sol-tipo[aria-pressed='true'] .icono { color: var(--negro); }
.sol-tipo:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 2px; }
.sol-campos { display: block; }

/* Edición COMPLETA del pedido: dos grupos (cliente / pedido) en papel, cada
   campo con su valor actual; lo que cambia se resalta en dorado. */
.sol-edicion { display: flex; flex-direction: column; gap: var(--esp-4); }
.sol-edicion__grupo {
  margin: 0;
  padding: var(--esp-3) var(--esp-4) var(--esp-4);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-md);
  background-color: var(--dorado-velo);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
}
.sol-edicion__grupo > legend {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radio-pastilla);
  background: var(--color-acento);
  color: var(--negro);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sol-edicion__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--esp-3);
  margin-top: var(--esp-2);
}
.sol-edicion__ancho2 { grid-column: 1 / -1; }
.sol-edicion__grid .campo { margin: 0; }
.sol-edicion__grid .campo__control { transition: box-shadow var(--dur-rapida), background-color var(--dur-rapida); }
/* Campo CAMBIADO, sobrio: el control toma fondo ámbar y borde firme, la
   etiqueta se subraya en ámbar y debajo va "Antes: <valor>" en pequeño. Nada
   de pastillas ni cajas dentro de cajas. */
.sol-edicion__campo--cambiado .campo__control {
  background-color: #fff3c4;
  border-color: var(--dorado-ambar);
  box-shadow: inset 0 0 0 1.5px var(--dorado-ambar);
}
.sol-edicion__campo--cambiado .campo__etiqueta {
  color: var(--dorado-texto);
  font-weight: var(--peso-semibold);
  text-decoration: underline;
  text-decoration-color: var(--dorado-ambar);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.sol-edicion__antes {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--texto-xs);
  color: var(--color-texto-2);
  overflow-wrap: anywhere;
}
.sol-edicion__antes b { color: var(--dorado-texto); font-weight: var(--peso-semibold); }
.sol-edicion__antes i { color: var(--color-texto-suave); }
.sol-edicion__campo--foco .campo__control { box-shadow: inset 0 0 0 2px var(--accion-info); }
.sol-form__contador {
  margin-right: auto;
  align-self: center;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  color: var(--dorado-texto);
}
.sol-form__contador.es-activo { color: var(--color-texto); }

/* Lado del coordinador: qué pide (antes → nuevo) y el botón que lo aplica */
.sol-aplicar { display: flex; flex-direction: column; gap: var(--esp-3); }
.sol-cambios {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-3);
  border-radius: var(--radio-sm);
  border: 1px solid var(--dorado-bronce);
  background-color: var(--dorado-velo);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
}
.sol-cambio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; font-size: var(--texto-sm); }
.sol-cambio__etq { color: var(--color-texto-suave); font-size: var(--texto-xs); font-weight: var(--peso-semibold); text-transform: uppercase; letter-spacing: 0.3px; min-width: 7rem; }
.sol-cambio__antes { color: var(--color-texto-suave); text-decoration: line-through; }
.sol-cambio__flecha { color: var(--dorado-texto); }
.sol-cambio__nuevo { color: var(--color-texto); overflow-wrap: anywhere; }

/* Nuevo pedido: casilla de confirmación de compra */
.asesor-nuevo__confirmo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-5);
  border: 2px dashed var(--dorado-bronce);
  border-radius: var(--radio-md);
  background: var(--dorado-velo);
  cursor: pointer;
  transition: background-color var(--dur-rapida) linear, border-color var(--dur-rapida) linear, box-shadow var(--dur-rapida) linear;
}
.asesor-nuevo__confirmo:hover { box-shadow: var(--sombra-1); }
.asesor-nuevo__confirmo input {
  flex: none; margin: 0; width: 1.6rem; height: 1.6rem;
  accent-color: var(--accion-ok); cursor: pointer;
}
.asesor-nuevo__confirmo-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.asesor-nuevo__confirmo-txt strong { font-size: var(--texto-md); line-height: 1.3; }
.asesor-nuevo__confirmo-txt .campo__ayuda { margin: 0; }
.asesor-nuevo__confirmo-estado {
  flex: none; display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.7rem; border-radius: var(--radio-pastilla);
  font-size: var(--texto-xs); font-weight: var(--peso-semibold);
  background: rgba(255, 255, 255, 0.6); color: var(--dorado-texto); border: 1px solid var(--dorado-bronce);
}
/* Marcada: TODO el bloque cambia a verde (se siente que pasó algo) */
.asesor-nuevo__confirmo:has(input:checked) {
  border-style: solid; border-color: var(--accion-ok);
  background: var(--accion-ok-velo);
  box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.15);
}
.asesor-nuevo__confirmo:has(input:checked) .asesor-nuevo__confirmo-estado { background: var(--accion-ok); color: #fff; border-color: var(--accion-ok-oscuro); }
.asesor-nuevo__confirmo:has(input:checked) strong { color: var(--accion-ok-oscuro); }
/* Y el grupo "Datos de la compra" acompaña: barra y fondo verdes */
.asesor-nuevo__grupo--compra:has(#np-confirmo:checked) { border-left-color: var(--accion-ok); background-color: #eef4e6; }
.asesor-nuevo__confirmo.campo--error { border-color: var(--rojo-marca); background: var(--accion-no-velo); }
.asesor-nuevo__confirmo.campo--error .asesor-nuevo__confirmo-estado { color: var(--accion-no-oscuro); border-color: var(--rojo-marca); }
@media (max-width: 40rem) {
  .asesor-nuevo__confirmo { flex-wrap: wrap; }
  .asesor-nuevo__confirmo-estado { margin-left: calc(1.6rem + var(--esp-4)); }
}

/* ----------------------------------------------------------------------------
   Filtros PRO de Pedidos: menús con etiqueta+valor, presets y resumen activo
   --------------------------------------------------------------------------- */
/* UNA barra (estilo Notion): filtros a la izquierda, ORDEN al final separado
   por una línea vertical y con su icono de flechas. Sin rótulos: cada pastilla
   dice su nombre y su valor. */
/* Filtros SOBRIOS (regla del dueño: simetría y minimalismo): todas las
   pastillas iguales, en un solo tono neutro, del tamaño de su contenido y en
   una línea. El color queda para lo que significa (estados, urgencias). */
/* Misma regla de SIMETRÍA que los cortes: los menús se reparten TODO el ancho
   en columnas iguales (auto-fit colapsa las vacías: 2 menús = 2 mitades) y el
   chevron se ancla a la derecha, como el conteo en las pastillas. */
.asesor-filtros__menus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  align-items: center;
  gap: var(--esp-2);
  border-top: 1px dashed var(--color-borde-fuerte);
  padding-top: var(--esp-3);
}
.asesor-filtros__menus > .fmenu { min-width: 0; }
.asesor-filtros__menus .fmenu__textos { flex: 1 1 auto; min-width: 0; }
/* ORDEN: botón compacto de icono al final de la barra (patrón Notion). Sin
   pastilla grande: icono ↕ + chevron; cuando el orden no es el de por defecto,
   muestra el valor en pequeño. El menú se abre igual que los demás. */
.asesor-filtros__fila > .fmenu--compacto { flex: 0 0 auto; }
.fmenu--compacto .fmenu__boton { padding: 0.45rem 0.6rem; gap: 0.35rem; background-color: transparent; border-style: dashed; }
.fmenu--compacto .fmenu__etq { display: none; }
.fmenu--compacto .fmenu__valor { display: none; font-size: var(--texto-xs); font-weight: var(--peso-medio); color: var(--color-texto-2); }
.fmenu--compacto.es-activo .fmenu__valor { display: inline; }
.fmenu--compacto.es-activo .fmenu__boton { background-color: var(--dorado-velo); border-style: solid; }
.fmenu--compacto .fmenu__chev { width: 1.3rem; height: 1.3rem; }
.fmenu--compacto .fmenu__panel { left: auto; right: 0; min-width: 16rem; }

.fmenu { position: relative; }
/* Un DESPLEGABLE que se ve como tal: papel claro, borde firme, y la flecha en
   su propio cuadradito a la derecha (el gesto universal de "aquí se elige"). */
.fmenu__boton {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.6rem 0.45rem 0.7rem;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-pastilla);
  background-color: var(--color-superficie);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-rapida) linear, background-color var(--dur-rapida) linear;
}
.fmenu__boton:hover { border-color: var(--dorado-bronce); }
.fmenu__boton > .icono { color: var(--color-texto-suave); flex: none; width: 15px; height: 15px; }
/* Una sola línea: "Etapa · Todas". La etiqueta en gris, el valor en negro. */
.fmenu__textos { display: flex; flex-direction: row; align-items: baseline; min-width: 0; gap: 0.35rem; }
.fmenu__etq { font-size: var(--texto-sm); color: var(--color-texto-suave); font-weight: var(--peso-normal); }
.fmenu__etq::after { content: ' ·'; }
.fmenu__valor {
  font-size: var(--texto-sm); font-weight: var(--peso-semibold); color: var(--color-texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem;
}
/* La flecha sin marco ni fondo: un chevron y ya. */
.fmenu__chev {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-texto-suave);
  transition: transform var(--dur-rapida) ease;
}
.fmenu__boton[aria-expanded='true'] { border-color: var(--dorado-bronce); }
.fmenu__boton[aria-expanded='true'] .fmenu__chev { transform: rotate(180deg); }
/* Con un valor elegido: borde firme y velo suave — sin gritar. */
.fmenu.es-activo .fmenu__boton { border-color: var(--dorado-bronce); background-color: var(--dorado-velo); }
.fmenu.es-activo .fmenu__boton > .icono { color: var(--dorado-texto); }
.fmenu__boton:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 2px; }

.fmenu__panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(22rem, 90vw);
  max-height: 22rem;
  overflow: auto;
  z-index: 30;
  padding: 0.4rem;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-md);
  background-color: #fbf6e9;
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  box-shadow: var(--sombra-3);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.fmenu__grupo {
  margin: 0.45rem 0.6rem 0.2rem;
  font-size: var(--texto-2xs);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-texto-suave);
  font-weight: var(--peso-semibold);
}
.fmenu__opcion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: var(--radio-xs);
  background: transparent;
  font: inherit;
  font-size: var(--texto-sm);
  color: var(--color-texto);
  text-align: left;
  cursor: pointer;
}
.fmenu__opcion > .icono { color: var(--dorado-texto); flex: none; }
.fmenu__opcion > span:first-of-type { flex: 1; }
.fmenu__opcion:hover { background: var(--dorado-velo); }
.fmenu__opcion[aria-pressed='true'] { background: var(--amarillo-marca); color: var(--negro); font-weight: var(--peso-semibold); }
.fmenu__opcion[aria-pressed='true'] > .icono { color: var(--negro); }
.fmenu__n { font-size: var(--texto-2xs); color: var(--color-texto-suave); }
.fmenu__rango { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.3rem 0.6rem 0.5rem; }
.fmenu__rango label { display: flex; flex-direction: column; gap: 0.2rem; font-size: var(--texto-xs); color: var(--color-texto-2); }
.fmenu__rango .campo__control { padding: 0.4rem 0.6rem; font-size: var(--texto-sm); }
.fmenu__rango .boton { align-self: flex-end; }

/* Resumen de filtros activos: pastillas con ×, y "Limpiar filtros" al final */
.asesor-filtros__activos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding-top: var(--esp-2);
}
.factivo__etq { font-size: var(--texto-xs); color: var(--color-texto-suave); font-weight: var(--peso-semibold); margin-right: 0.2rem; }
.factivo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem 0.25rem 0.7rem;
  border-radius: var(--radio-pastilla);
  border: 1px solid var(--dorado-bronce);
  background: var(--dorado-velo);
  color: var(--dorado-texto);
  font: inherit;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  cursor: pointer;
}
.factivo .icono { color: var(--dorado-texto); }
.factivo:hover { background: var(--amarillo-marca); color: var(--negro); }
.factivo:hover .icono { color: var(--negro); }
.factivo--todo { background: transparent; border-style: dashed; padding-right: 0.7rem; }


/* ----------------------------------------------------------------------------
   Pantallas gigantes (≥1920 / ≥2560): más columnas, menú más ancho, drawer más
   amplio y tablas que respiran. Todo en rem, encima del escalado de base.css.
   --------------------------------------------------------------------------- */
@media (min-width: 1920px) {
  .asesor-sidebar { width: 16.5rem; }
  .asesor-contenido { max-width: 96rem; }
  .asesor-contenido--angosto { max-width: 68rem; }
  .asesor-nuevo { max-width: 60rem; }
  .campo-clientes { grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }
  .panel-lateral.asesor-drawer { width: min(36rem, 100vw); }
  .asesor-tabla th, .asesor-tabla td { padding-top: 0.9rem; padding-bottom: 0.9rem; }
  .asesor-drawer__items .enlace-vista, .asesor-venta__productos .enlace-vista { max-width: 32rem; }
}
@media (min-width: 2560px) {
  .asesor-sidebar { width: 18rem; }
  .asesor-contenido { max-width: 110rem; }
  .asesor-contenido--angosto { max-width: 76rem; }
  .campo-clientes { grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr)); }
  .panel-lateral.asesor-drawer { width: min(40rem, 100vw); }
  /* La bandeja del coordinador se parte en dos columnas: más solicitudes a la vista */
  .asesor-bandeja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); align-items: start; }
  .asesor-bandeja > .asesor-bandeja__grupo, .asesor-bandeja > .estado-vacio, .asesor-bandeja > .esqueleto, .asesor-bandeja > p { grid-column: 1 / -1; }
}

/* ----------------------------------------------------------------------------
   Ficha del pedido dentro de "Detalles" de una solicitud: rejilla de dos
   columnas (etiqueta arriba, dato abajo), WhatsApp del cliente y Editar todo.
   --------------------------------------------------------------------------- */
.ficha-pedido {
  display: flex; flex-direction: column; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-sm);
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(74, 58, 28, 0.12);
  border-left: 3px solid var(--accion-info);
}
.ficha-pedido__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--esp-2) var(--esp-4);
  margin: 0;
}
.ficha-pedido__par { min-width: 0; margin: 0; }
.ficha-pedido__par dt { font-size: var(--texto-2xs); font-weight: var(--peso-semibold); text-transform: uppercase; letter-spacing: .06em; color: var(--accion-info-oscuro); }
.ficha-pedido__par dd { margin: 0.05rem 0 0; font-size: var(--texto-sm); color: var(--color-texto); overflow-wrap: anywhere; line-height: 1.45; }
.ficha-pedido__par dd code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: rgba(0,0,0,0.06); padding: 0.05rem 0.4rem; border-radius: 4px; }
.ficha-pedido__par dd .enlace-vista--compacta { margin-top: 0.2rem; }
.ficha-pedido__saldo { color: var(--accion-no-oscuro); margin-left: 0.25rem; }
.ficha-pedido__acciones { display: flex; align-items: center; justify-content: flex-end; gap: var(--esp-2); flex-wrap: wrap; }
.ficha-pedido__acciones .contactos { margin-right: auto; }

/* ----------------------------------------------------------------------------
   Tarjeta "Revisar estado": pasos numerados (1 averigua · 2 marca) y
   cancelación (solo excepciones)
   --------------------------------------------------------------------------- */
.sol-paso {
  display: inline-grid; place-items: center;
  width: 1.35rem; height: 1.35rem; margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--negro); color: #fff;
  font-size: var(--texto-2xs); font-weight: var(--peso-semibold); font-style: normal;
}
.sol-averiguar__etq { color: var(--color-texto); text-transform: none; letter-spacing: 0; font-size: var(--texto-sm); }
.sol-averiguar__dato--prod { font-weight: var(--peso-semibold); color: var(--color-texto); }
.selector-estados--excepciones .selector-estados__grupo[data-grupo='flujo']{ display: none; }
/* Aviso "ventas en espera" dentro de la rejilla de tarjetas: ocupa la fila
   completa y compacto (no una tarjeta alta vacía). */
.campo-clientes > 
/* Mini guía plegada bajo las pestañas del comercial */
.campo-guia { margin: 0 0 var(--esp-4); }
.campo-guia > summary { display: flex; align-items: center; gap: 0.45rem; font-size: var(--texto-sm); color: var(--color-texto-2); }
.campo-guia > summary > span { flex: 1; }
.campo-guia__pasos { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--texto-sm); color: var(--color-texto-2); }
.campo-guia__pasos li { max-width: 70ch; }
.campo-guia__pasos b { color: var(--color-texto); }

/* Pie de la tabla paginada: cuántos se ven del total + "Cargar más" */
.asesor-tabla__pie {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  flex-wrap: wrap;
  padding: var(--esp-3) var(--esp-4);
  border-top: 1px solid var(--color-borde);
}
/* Pie de las tarjetas del comercial (paginado) */
.campo-clientes > .campo-pedidos__pie {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  flex-wrap: wrap; padding-top: var(--esp-2);
}

/* Ventana de edición del comercial: los dos botones del pie, juntos */
.campo-pedido__ventana { gap: var(--esp-2); }

/* "Ver más y editar" dentro del paso 1 de la bandeja: acción secundaria, a la
   derecha de los datos, sin robarle protagonismo al n.º de orden. */
.sol-averiguar__mas { margin-left: auto; align-self: center; }

/* Columna Producto: miniatura de la tienda + nombre. La miniatura solo existe
   cuando la vista previa trae una foto real (si no, ui la retira sola), así
   que la celda nunca queda con un hueco. */
.asesor-celda-producto__caja { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
/* La miniatura ACOMPAÑA (chica y fija); el NOMBRE es lo que se lee y se lleva
   el resto del ancho. Sin foto real, ui retira la miniatura y el nombre ocupa
   la celda entera. */
.asesor-celda-producto .enlace-vista--miniatura { flex: 0 0 1.7rem; width: 1.7rem; height: 1.7rem; border-radius: var(--radio-xs); overflow: hidden; }
.asesor-celda-producto .enlace-vista--miniatura img { width: 100%; height: 100%; object-fit: cover; }
.asesor-celda-producto__txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }