/* ============================================================================
   vistas.css — Estilos de las pantallas de login y cliente, más la barra
   de impersonación del superadmin. (Asesor y admin tienen su hoja.)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Barra de impersonación (superadmin viendo como otro rol)
   --------------------------------------------------------------------------- */
/* Alto de la barra: lo usa la sidebar fija del asesor para NO quedar debajo. */
:root { --alto-barra-imp: 3rem; }

#barra-impersonacion {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-cabecera) + 1);
  min-height: var(--alto-barra-imp);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-4);
  /* Mismo cartón en penumbra de la sidebar (nada de negro plano), con cover
     porque carton.webp no es tileable. */
  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-repeat: no-repeat;
  color: var(--color-texto-inverso);
  font-size: var(--texto-sm);
}

/* Con la barra puesta, la sidebar (position: fixed) arranca DEBAJO de ella;
   si no, la barra le tapa el logo. En móvil la sidebar es barra inferior, así
   que ahí no se toca. */
body.con-barra-impersonacion .asesor-sidebar { top: var(--alto-barra-imp); }
@media (max-width: 879px) {
  body.con-barra-impersonacion .asesor-sidebar { top: auto; }
}
#barra-impersonacion .icono { color: var(--amarillo-marca); }
#barra-impersonacion .boton--secundario {
  background: transparent;
  color: var(--blanco);
  border-color: var(--gris-oscuro);
}
#barra-impersonacion .boton--secundario:hover {
  border-color: var(--amarillo-marca);
  color: var(--amarillo-marca);
}

/* ----------------------------------------------------------------------------
   LOGIN — panel de marca kraft + formulario
   --------------------------------------------------------------------------- */
.login {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* Panel de marca: la textura kraft del manual (la pinta .fondo-kraft de
   base.css sobre esta base crema), wordmark negro en Casablanca y cero
   decoración en movimiento. La marca se afirma quedándose quieta. */
.login__marca {
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;          /* la marca protagonista, centrada */
  text-align: center;
  gap: var(--esp-5);
  padding: var(--esp-6) var(--esp-5);
  background: var(--crema-media, #e8dcc8);
  color: var(--color-texto);
}
.login__marca-arriba {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
}
.login__marca-arriba .login__nombre { margin-top: var(--esp-2); }
.login__nombre {
  /* El ÚNICO lugar de la interfaz donde vive Casablanca. */
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: clamp(2.7rem, 4.6vw, 4rem);
  color: var(--negro);
  line-height: 1.15;
}

.login__panel {
  width: 100%;
  max-width: 27rem;
  margin-inline: auto;
  padding: var(--esp-6) var(--esp-4) var(--esp-7);
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}
.login__panel h1 { font-size: var(--texto-xl); }

.login__form { gap: var(--esp-4); }

/* ----------------------------------------------------------------------------
   Formulario del login: tarjeta plana con borde. La elevación no hace falta
   cuando el contraste panel-oscuro / fondo-crema ya ordena la página.
   --------------------------------------------------------------------------- */
.login__tarjeta h1 { font-size: var(--texto-lg); }
.login__tarjeta > .texto-suave { font-size: var(--texto-sm); }
.login__tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  box-shadow: var(--sombra-2);
}
/* La página entera es cartón (misma intensidad que la vista del cliente);
   la tarjeta es la única "ventana" clara encima: etiqueta blanca de envío.
   El padding de .etiqueta-kraft (más apretado) no aplica acá. */
.login.fondo-kraft::before { opacity: 0.5; }

/* La puerta del equipo: presente, sin pelearle al cliente. */
/* La caja abierta con productos va en el panel de marca del ingreso del
   CLIENTE: bajo el wordmark queda una zona vacía grande y ahí cuenta de qué se
   trata el servicio. Detrás del contenido (z-index -1: sobre la textura, bajo
   el texto) y sin capturar clics. Solo en escritorio: en móvil ese panel se
   encoge a una franja y la caja robaría espacio útil. */
/* La ventana tiene que ser ANCHA y ALTA: en una ventana baja el panel se
   encoge y la caja se subía encima del wordmark. Con poca altura, no se pinta. */
@media (min-width: 880px) and (min-height: 620px) {
  .login__marca { overflow: clip; min-height: 30rem; }
  .login__marca::after {
    content: '';
    position: absolute;
    z-index: -1;
    /* Centrada horizontalmente: cae en el MISMO eje que la gallina y el
       wordmark de arriba (el panel es una grilla con place-items: center). */
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(16px, 5vh, 56px);
    /* Tope en 320px: es el ancho real del PNG, así no se escala ni se ve blando */
    width: clamp(230px, 26vw, 320px);
    height: clamp(200px, 30vh, 290px);
    background: var(--decor-caja) bottom center / contain no-repeat;
    /* A opacidad plena y con el color un poco levantado: es una foto, y
       atenuada se veía lavada, no discreta. */
    opacity: 1;
    filter: saturate(1.12) contrast(1.04);
    pointer-events: none;
  }
}

.login__equipo { text-align: center; }
.login__equipo a {
  color: var(--color-texto-suave);
  text-decoration: none;
}
.login__equipo a:hover,
.login__equipo a:focus-visible { color: var(--dorado-texto); text-decoration: underline; text-underline-offset: 3px; }

.login__clave { position: relative; }
.login__clave .campo__control { padding-right: 3rem; }
.login__clave .boton-icono {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
}

.login__pie { text-align: center; margin-inline: auto; }

/* Escritorio: marca a la izquierda, formulario a la derecha */
@media (min-width: 880px) {
  .login {
    grid-template-rows: none;
    grid-template-columns: minmax(320px, 42%) 1fr;
  }
  .login__marca { padding: var(--esp-7) var(--esp-6); }
  .login__panel {
    align-self: center;
    padding: var(--esp-7) var(--esp-6);
  }

  /* La puerta del equipo no tiene panel de marca: vuelve a una columna.
     Va DENTRO del media query porque si no, la regla de arriba la pisa. */
  .login--interno {
    grid-template-columns: 1fr;
    align-content: center;
  }
}

/* ----------------------------------------------------------------------------
   CLIENTE — móvil primero (los clientes llegan desde WhatsApp)
   --------------------------------------------------------------------------- */
.contenedor-movil {
  width: 100%;
  margin-inline: auto;
  padding: 0 var(--esp-4) var(--esp-7);
}

.cliente-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--esp-4) 0;
  border-bottom: 1px solid var(--color-borde);
  margin-bottom: var(--esp-4);
}
.cliente-cabecera img { height: 44px; width: auto; }
.cliente-cabecera__acciones {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
}
/* ----------------------------------------------------------------------------
   CABECERA DEL PEDIDO — etiqueta de envío con: saludo, estado grande (icono +
   nombre + mensaje), ruta de 7 etapas y la entrega estimada protagonista.
   El color de la etapa entra por --tono-estado (inline, var(--est-<clave>)).
   --------------------------------------------------------------------------- */
.pedido-cabecera {
  --tono-estado: var(--dorado-ambar);
  margin-bottom: var(--esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-5) var(--esp-4) var(--esp-4);
}
.pedido-cabecera__saludo {
  font-size: var(--texto-xl);
  color: var(--color-texto);
  margin-bottom: calc(-1 * var(--esp-2));
}
/* Estado: medallón con el icono de la etapa (color de la etapa) + nombre en
   grande + el mensaje de la etapa. */
.pedido-estado {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
}
.pedido-estado__icono {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-color: var(--tono-estado);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: soft-light;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 2px var(--tono-estado), var(--sombra-1);
}
/* La primera etapa es amarilla: icono oscuro encima */
.pedido-cabecera[style*="--est-compra_realizada"] .pedido-estado__icono { color: var(--est-compra_realizada-texto); }
.pedido-estado__texto { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.pedido-estado__nombre {
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulo);
  font-size: var(--texto-xl);
  line-height: var(--interlineado-titulos);
  letter-spacing: -0.01em;
  color: var(--color-texto);
}
.pedido-estado[data-tono='excepcion'] .pedido-estado__nombre { color: var(--rojo-vino); }
.pedido-estado__desc {
  font-size: var(--texto-base);
  color: var(--color-texto-2);
  line-height: 1.5;
}

/* Ruta: los 7 puntos (ui.rutaEtapas --grande) y, debajo, primera etapa,
   "Etapa n de 7" y última etapa como pie discreto. */
.pedido-ruta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--esp-2) 0.15rem 0;
}
.pedido-ruta__pie {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--esp-2);
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  max-width: none;
}
.pedido-ruta__n {
  font-weight: var(--peso-semibold);
  color: var(--color-texto-2);
  font-variant-numeric: tabular-nums;
}

/* Entrega: el bloque protagonista — papel dorado con la fecha en grande.
   Entregado: papel del color de la etapa final. */
.pedido-entrega {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-md);
  background-color: var(--dorado-velo);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  border: 1px solid #e3cd8d;
}
.pedido-entrega__icono {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--amarillo-marca);
  color: var(--negro);
  border: 1px solid rgba(24, 24, 24, 0.12);
}
.pedido-entrega__texto { display: flex; flex-direction: column; min-width: 0; }
.pedido-entrega__rotulo {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--color-texto-2);
  line-height: 1.3;
}
.pedido-entrega__fecha {
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulo);
  font-size: var(--texto-2xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-texto);
  font-variant-numeric: tabular-nums;
}
.pedido-entrega__nota { font-size: var(--texto-xs); color: var(--color-texto-suave); }
/* Con el sello al lado (entregado) la fecha baja un punto y no parte */
.pedido-entrega[data-tipo='hecha'] .pedido-entrega__fecha { font-size: var(--texto-xl); white-space: nowrap; }
.pedido-entrega[data-tipo='hecha'] {
  background-color: #e4f2e8;
  border-color: rgba(31, 122, 65, 0.35);
}
.pedido-entrega[data-tipo='hecha'] .pedido-entrega__icono {
  background: var(--tono-estado);
  color: #fff;
  border-color: transparent;
}
/* El sello del pollito, estampado a la derecha del bloque de entrega */
.pedido-entrega__sello { margin-left: auto; flex: none; line-height: 0; }
.pedido-entrega__sello:empty { display: none; }

/* En pantallas anchas: estado a la izquierda, entrega a la derecha; la ruta
   cierra la etiqueta a todo lo ancho. */
@media (min-width: 640px) {
  .pedido-cabecera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'saludo saludo'
      'estado entrega'
      'ruta   ruta';
    align-items: center;
    column-gap: var(--esp-5);
    padding: var(--esp-5);
  }
  .pedido-cabecera__saludo { grid-area: saludo; }
  .pedido-estado { grid-area: estado; }
  .pedido-entrega { grid-area: entrega; align-self: center; min-width: 13rem; max-width: 19rem; }
  .pedido-ruta { grid-area: ruta; padding-top: var(--esp-3); }
}

/* ----------------------------------------------------------------------------
   Secciones (tarjetas de papel) — un solo encabezado para todas: h2 en frase
   con icono, mismo tamaño y margen. Nada de rótulos diminutos en mayúsculas.
   --------------------------------------------------------------------------- */
.pedido-seccion { margin-bottom: var(--esp-4); }
.pedido-seccion__titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-md);
  font-weight: var(--peso-titulo);
  letter-spacing: -0.01em;
  color: var(--color-texto);
  margin-bottom: var(--esp-4);
}
.pedido-seccion__titulo .icono { width: 20px; height: 20px; color: var(--color-icono); flex: none; }

/* --- Tu producto: foto grande (vista previa del link o caja kraft), nombre
   en negrita, talla/color, tienda como pastilla, valor y "Ver en la tienda". */
.pedido-producto { position: relative; }
.pedido-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}
.pedido-item {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  min-width: 0;
  max-width: none;
}
.pedido-item + .pedido-item {
  padding-top: var(--esp-3);
  border-top: 1px dashed rgba(74, 58, 28, 0.22);
}
/* La foto: cuadro de 6rem (96px), kraft con grano; adentro va la miniatura
   del link (foto del producto o favicon de la tienda) o el icono de paquete. */
.pedido-item__foto {
  flex: 0 0 6rem;
  width: 6rem;
  height: 6rem;
  border-radius: var(--radio-md);
  overflow: hidden;
  border: 1px solid #d9c9a1;
  background-color: var(--gris-velo);
  background-image: var(--textura-kraft);
  background-size: 460px;
  background-blend-mode: multiply;
  box-shadow: var(--sombra-1);
}
.pedido-item__foto .enlace-vista--miniatura {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.pedido-item__foto .enlace-vista--miniatura:hover { transform: none; box-shadow: none; }
.pedido-item__foto .enlace-vista__mini { background: transparent; border: 0; }
.pedido-item__foto .enlace-vista__mini--favicon .enlace-vista__img { width: 2.75rem; height: 2.75rem; }

.pedido-item__cuerpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.pedido-item__nombre {
  font-size: var(--texto-md);
  font-weight: var(--peso-semibold);
  line-height: 1.3;
  color: var(--color-texto);
  overflow-wrap: anywhere;
  max-width: none;
}
.pedido-item__cant { font-weight: var(--peso-medio); color: var(--color-texto-suave); white-space: nowrap; }
.pedido-item__specs { font-size: var(--texto-sm); color: var(--color-texto-2); max-width: none; }
.pedido-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem var(--esp-3);
  margin-top: 0.15rem;
  max-width: none;
}
.pedido-item__tienda {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem 0.15rem 0.5rem;
  border-radius: var(--radio-pastilla);
  background: var(--color-superficie);
  border: 1px solid #d9c9a1;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  color: var(--color-texto-2);
  white-space: nowrap;
}
.pedido-item__tienda .icono { color: var(--color-icono); }
.pedido-item__valor {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-texto);
}
.pedido-item__ver { align-self: flex-start; margin-top: var(--esp-2); white-space: nowrap; }
.pedido-producto__pie {
  margin-top: var(--esp-4);
  padding-top: var(--esp-3);
  border-top: 1px solid rgba(74, 58, 28, 0.16);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  max-width: none;
}

/* --- Pago: tres fichas + barra de % pagado. Números, sin consejos. */
.pedido-pago__fichas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-2);
}
.pedido-pago__ficha {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  padding: var(--esp-3) var(--esp-3);
  border-radius: var(--radio-sm);
  background-color: var(--color-superficie-2);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  border: 1px solid var(--color-borde);
}
.pedido-pago__rotulo {
  font-size: var(--texto-sm);
  color: var(--color-texto-2);
  line-height: 1.3;
}
.pedido-pago__cifra {
  font-size: var(--texto-md);
  font-weight: var(--peso-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: var(--color-texto);
  overflow-wrap: anywhere;
}
/* Solo el saldo se distingue: dorado si falta, verde de "ok" si está al día.
   El rótulo ya dice cuál es cuál; el color solo refuerza. */
.pedido-pago[data-pagado='no'] .pedido-pago__ficha--saldo {
  background-color: var(--dorado-velo);
  border-color: #e3cd8d;
}
.pedido-pago[data-pagado='no'] .pedido-pago__ficha--saldo .pedido-pago__cifra { color: var(--dorado-texto); }
.pedido-pago[data-pagado='si'] .pedido-pago__ficha--saldo {
  background-color: var(--accion-ok-velo);
  border-color: rgba(46, 139, 87, 0.35);
}
.pedido-pago[data-pagado='si'] .pedido-pago__ficha--saldo .pedido-pago__cifra { color: var(--accion-ok-oscuro); }
.pedido-pago__barra {
  margin-top: var(--esp-4);
  height: 0.6rem;
  border-radius: var(--radio-pastilla);
  background: rgba(74, 58, 28, 0.14);
  overflow: hidden;
}
.pedido-pago__relleno {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--dorado-ambar);
  transition: width var(--dur-lenta) var(--curva-salida);
}
.pedido-pago[data-pagado='si'] .pedido-pago__relleno { background: var(--accion-ok); }
.pedido-pago__pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-3);
  margin-top: var(--esp-2);
  font-size: var(--texto-sm);
  color: var(--color-texto-2);
  font-variant-numeric: tabular-nums;
  max-width: none;
}
.pedido-pago__aldia {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: var(--peso-semibold);
  color: var(--accion-ok-oscuro);
}
@media (max-width: 400px) {
  .pedido-pago__fichas { grid-template-columns: 1fr 1fr; }
  .pedido-pago__ficha--saldo { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: space-between; }
}

.pedido-solicitud { display: flex; flex-direction: column; gap: var(--esp-3); }
.pedido-solicitud:empty { display: none; }
.detalle-respuesta p { margin: 0.15rem 0; }

/* Selector de pedidos (etiqueta arriba, desplegable de ancho completo) */
.cliente-selector {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: var(--esp-4);
}
.cliente-selector:empty { display: none; }
.cliente-selector__etq {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--color-texto-2);
}
.cliente-selector__etq .icono { color: var(--color-icono); }
.cliente-selector__select { width: 100%; }

/* Sello pequeño de "Entregado" (tamaño para la tarjeta del producto) */
.sello-pollito--sm {
  width: 5rem;
  height: 5rem;
  flex: none;
}
.sello-pollito--sm img { width: 2rem; }
.sello-pollito--sm span { font-size: 0.52rem; }
@media (max-width: 460px) {
  .sello-pollito--sm { width: 4.25rem; height: 4.25rem; }
  .sello-pollito--sm img { width: 1.7rem; }
}

/* ----------------------------------------------------------------------------
   Mapa de tracking (Leaflet + OpenStreetMap) + stepper de etapas
   --------------------------------------------------------------------------- */
.mapa-tracking { margin: 0; }
.mapa-lienzo {
  position: relative;
  border-radius: var(--radio-firma-sm);
  overflow: hidden;
  border: 1px solid var(--color-borde);
}
.mapa-leaflet { width: 100%; height: 380px; background: #dfe7ea; }
@media (min-width: 640px) { .mapa-leaflet { height: 440px; } }

/* Nodos: marcadores divIcon de TAMAÑO FIJO (no se deforman al hacer zoom) */
.mnodo-wrap { background: none; border: none; }
.mnodo {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-superficie);
  border: 2px solid var(--gris-medio);
  color: var(--gris-medio);
  box-shadow: 0 1px 3px rgba(24, 24, 24, 0.3);
}
.mnodo[data-estado='hecho'] { background: var(--dorado-velo); border-color: var(--dorado-bronce); color: var(--dorado-texto); }
.mnodo[data-estado='actual'] { background: var(--amarillo-marca); border-color: var(--dorado-ambar); color: var(--negro); }
.mnodo[data-estado='excepcion'] { background: var(--color-excepcion-velo); border-color: var(--color-excepcion); color: var(--rojo-vino); }
.mnodo__halo {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--amarillo-marca);
  animation: mapa-pulso calc(2000ms * var(--anim-factor)) var(--curva-salida) infinite;
}
.mnodo[data-estado='excepcion'] .mnodo__halo { border-color: var(--color-excepcion); }
@keyframes mapa-pulso {
  0% { transform: scale(0.8); opacity: 0.8; }
  70%, 100% { transform: scale(1.9); opacity: 0; }
}
:root[data-animaciones='apagada'] .mnodo__halo { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .mnodo__halo { animation: none; opacity: 0; } }

/* Rótulos (tooltips de Leaflet) con identidad Mercurio */
.mapa-tooltip.leaflet-tooltip {
  background: var(--color-superficie);
  color: var(--color-texto);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-xs);
  font-family: var(--fuente-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  box-shadow: var(--sombra-1);
  padding: 2px 7px;
}
.mapa-tooltip.leaflet-tooltip-right::before { border-right-color: var(--color-superficie); }
.mapa-tooltip.leaflet-tooltip-left::before { border-left-color: var(--color-superficie); }
.mapa-tooltip.leaflet-tooltip-top::before { border-top-color: var(--color-superficie); }
.mapa-tooltip.leaflet-tooltip-bottom::before { border-bottom-color: var(--color-superficie); }
.mapa-tooltip--actual.leaflet-tooltip { border-color: var(--dorado-ambar); color: var(--dorado-texto); }

/* Controles/atribución de Leaflet acordes a la marca */
.leaflet-container { font-family: var(--fuente-texto); background: #dfe7ea; }
.leaflet-bar a { color: var(--color-texto-2); }
.leaflet-control-attribution { font-size: 10px; }


/* Línea de tiempo VERTICAL de las 7 etapas bajo el mapa (ui.mapaRuta): punto
   con el icono y el color de SU etapa (--tono-estado inline), línea que une
   los puntos, nombre de la etapa y la fecha a la derecha. La actual va
   resaltada; con excepción, en rojo. En vertical nunca desborda en móvil. */
.etapas-lista {
  list-style: none;
  margin: var(--esp-4) 0 0;
  padding: 0 0 0 0.25rem;
  display: flex;
  flex-direction: column;
}
.etapas-lista__paso {
  --tono-estado: var(--dorado-ambar);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding-bottom: var(--esp-3);
  max-width: none;
}
.etapas-lista__paso:last-child { padding-bottom: 0; }
/* Novedad intercalada (ítem 11): en rojo, con su nota, sin romper la línea */
.etapas-lista__paso--novedad .etapas-lista__nombre { color: var(--accion-no-oscuro); font-weight: var(--peso-semibold); }
.etapas-lista__paso--novedad .etapas-lista__nodo { background: var(--accion-no-velo); color: var(--accion-no-oscuro); border-color: var(--rojo-marca); }
.etapas-lista__nota {
  display: block; font-size: var(--texto-xs); color: var(--color-texto-suave);
  margin-top: 2px; max-width: 34ch;
}
/* Conector: línea vertical detrás de los puntos, del centro de uno al siguiente */
.etapas-lista__paso::before {
  content: '';
  position: absolute;
  left: calc(0.95rem - 1px);
  top: 1.9rem;
  bottom: 0;
  width: 2px;
  background: rgba(74, 58, 28, 0.2);
}
.etapas-lista__paso:last-child::before { display: none; }
.etapas-lista__paso[data-estado='hecho']::before { background: var(--tono-estado); }
.etapas-lista__paso[data-estado='excepcion']::before {
  background: repeating-linear-gradient(180deg, var(--rojo-marca) 0 5px, transparent 5px 9px);
}
.etapas-lista__nodo {
  position: relative;
  z-index: 1;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-superficie);
  border: 2px solid rgba(74, 58, 28, 0.28);
  color: var(--gris-medio);
}
.etapas-lista__paso[data-estado='hecho'] .etapas-lista__nodo,
.etapas-lista__paso[data-estado='actual'] .etapas-lista__nodo {
  background: var(--tono-estado);
  border-color: var(--tono-estado);
  color: #fff;
}
.etapas-lista__paso[data-estado='actual'] .etapas-lista__nodo {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--tono-estado), var(--sombra-1);
}
.etapas-lista__paso[data-estado='excepcion'] .etapas-lista__nodo {
  background: var(--color-excepcion-velo);
  border-color: var(--color-excepcion);
  color: var(--rojo-vino);
  box-shadow: 0 0 0 2px var(--color-excepcion-velo);
}
/* Compra realizada es amarilla: icono oscuro encima */
.etapas-lista__paso[style*="--est-compra_realizada"][data-estado='hecho'] .etapas-lista__nodo,
.etapas-lista__paso[style*="--est-compra_realizada"][data-estado='actual'] .etapas-lista__nodo { color: var(--est-compra_realizada-texto); }
.etapas-lista__texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--esp-3);
  padding-top: 0.2rem;
  min-height: 1.9rem;
}
.etapas-lista__nombre {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--color-texto-2);
  line-height: 1.35;
}
.etapas-lista__paso[data-estado='futuro'] .etapas-lista__nombre { color: var(--color-texto-suave); }
.etapas-lista__paso[data-estado='actual'] .etapas-lista__nombre { color: var(--color-texto); font-weight: var(--peso-semibold); }
.etapas-lista__paso[data-estado='excepcion'] .etapas-lista__nombre { color: var(--rojo-vino); font-weight: var(--peso-semibold); }
.etapas-lista__fecha {
  flex: none;
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.etapas-lista__paso[data-estado='actual'] .etapas-lista__fecha { color: var(--color-texto-2); font-weight: var(--peso-medio); }
.etapas-lista__paso[data-estado='excepcion'] .etapas-lista__fecha { color: var(--rojo-vino); white-space: normal; text-align: right; }

/* Nota bajo el mapa: la ubicación es aproximada. Texto sereno, sin caja. */
.pedido-mapa__nota {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
  color: var(--color-texto-2);
  line-height: 1.5;
  max-width: none;
}
.pedido-mapa__nota .icono { color: var(--color-icono); margin-top: 0.2rem; }

/* ----------------------------------------------------------------------------
   Novedad (excepción) y datos de envío
   --------------------------------------------------------------------------- */
/* Novedad: papel rojo sobrio con lo que significa. Vive suelto entre la
   cabecera y la primera tarjeta, con el mismo ritmo vertical (esp-4). */
.pedido-novedad {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
  margin-bottom: var(--esp-4);
  padding: var(--esp-4);
  border-radius: var(--radio-md);
  background: var(--color-excepcion-velo);
  border: 1px solid rgba(152, 25, 19, 0.45);
  border-left: 4px solid var(--color-excepcion);
  color: var(--color-excepcion-oscuro);
  box-shadow: var(--sombra-2);
}
.pedido-novedad > .icono { color: var(--color-excepcion); flex: none; margin-top: 2px; }
.pedido-novedad strong { display: block; font-size: var(--texto-md); margin-bottom: 0.15rem; }
.pedido-novedad p { color: inherit; font-size: var(--texto-base); }

/* Envío: una sola línea (transportadora) y, si la hay, la nota del equipo. El
   rastreo es esta app: sin guías ni códigos para el cliente. */
.pedido-envio__guia { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-2); margin: var(--esp-2) 0 0; }
.pedido-envio__guia > span { font-size: var(--texto-sm); color: var(--color-texto-2); }
.pedido-envio__linea {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--texto-base);
  font-weight: var(--peso-medio);
  color: var(--color-texto);
}
.pedido-envio__linea .icono { color: var(--accion-info-oscuro); flex: none; }
.pedido-nota {
  margin-top: var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-sm);
  background: var(--color-superficie);
  border-left: 3px solid var(--dorado-mostaza);
  font-size: var(--texto-sm);
  color: var(--color-texto-2);
}
.pedido-nota strong { display: block; color: var(--color-texto); margin-bottom: 0.1rem; }
.pedido-nota p { max-width: none; }

/* ----------------------------------------------------------------------------
   La página del cliente es CARTÓN (la textura la pinta .fondo-kraft de
   base.css, suavizada) y las tarjetas blancas son las etiquetas pegadas a la
   caja. La cabecera es la calcomanía de envío: blanca, con su marco punteado.
   --------------------------------------------------------------------------- */
.cliente-fondo { min-height: 100vh; }
.cliente-fondo.fondo-kraft::before { opacity: 0.5; }
/* Sobre cartón, las tarjetas necesitan más presencia que sobre crema. */
.cliente-fondo .tarjeta,
.cliente-fondo .plegable,
.cliente-fondo .aviso { box-shadow: var(--sombra-2); }

.etiqueta-kraft {
  position: relative;
  /* Papel manila con la textura asomando: nunca blanco plano ni el mismo
     tono del cartón de la página. */
  background-image: linear-gradient(rgba(253, 248, 233, 0.9), rgba(253, 248, 233, 0.9)),
    var(--textura-kraft);
  background-size: auto, 460px;
  background-color: #fdf8e9;
  border: 1px solid #e0d3ae;
  border-radius: var(--radio-md);
  padding: var(--esp-4);
  box-shadow: var(--sombra-2);
}
.etiqueta-kraft::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1.5px dashed rgba(179, 40, 44, 0.5); /* tinta roja de la cresta: rótulo postal */
  border-radius: calc(var(--radio-md) - 4px);
  pointer-events: none;
}
.etiqueta-kraft > * { position: relative; z-index: 1; }

/* ----------------------------------------------------------------------------
   "Hablar con asesor" = un TELÉFONO con el chat abierto (recreación en CSS del
   arte de marca: el pollito en su caja como mensaje de imagen). La barra de
   "escribe un mensaje" es el enlace real a WhatsApp. Colores de WhatsApp a
   propósito: la pantalla REPRESENTA WhatsApp, no es UI de la app.
   ---------------------------------------------------------------------------- */
.chat-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-4) 0 var(--esp-2);
}
/* El título de la sección, centrado como el teléfono */
.chat-cta__titulo { justify-content: center; margin-bottom: var(--esp-2); }
/* El marco del teléfono, con el mismo leve giro del arte original. Angosto y
   chico a propósito: la proporción 9/19 de la pantalla es la de un celular
   real (sin ella el bloque salía cuadrado y parecía una tablet). */
.chat-cta__marco {
  width: min(15rem, 100%);
  background: #181818;
  border-radius: 1.9rem;
  padding: 0.45rem;
  box-shadow: var(--sombra-3);
  position: relative;
  transform: rotate(-1.2deg);
}
.chat-cta__altavoz {
  position: absolute;
  top: 0.8rem;
  left: 50%;
  transform: translateX(-50%);
  width: 3.2rem;
  height: 0.28rem;
  border-radius: 1rem;
  background: #2e2e2e;
  z-index: 1;
}
.chat-cta__pantalla {
  border-radius: 1.5rem;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  /* Sin aspect-ratio: con overflow:hidden recortaba la barra de escribir. El
     alto lo da el contenido; el hilo tiene un mínimo para que parezca celular. */
}
.chat-cta__cab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 0.7rem 0.5rem;
  background: #f7f5f0;
  border-bottom: 1px solid #e8e4da;
}
.chat-cta__cab > .icono { color: #25d366; margin-left: auto; flex: none; }
.chat-cta__avatar {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: var(--dorado-velo);
  display: grid;
  place-items: center;
}
.chat-cta__avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-cta__quien { display: flex; flex-direction: column; min-width: 0; }
.chat-cta__nombre {
  font-weight: var(--peso-semibold);
  font-size: var(--texto-xs);
  color: #181818;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-cta__linea { font-size: 0.75rem; }
.chat-cta__linea.es-on { color: #157238; }
.chat-cta__linea.es-off { color: #8d8d8c; }
/* El hilo: beige de chat con el grano de papel de la casa */
.chat-cta__hilo {
  flex: 1;
  min-height: 11rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.7rem 0.7rem 0.85rem;
  background-color: #efe9df;
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
}
.chat-cta__burbuja {
  align-self: flex-start;
  max-width: 88%;
  background: #fff;
  border-radius: 0.8rem 0.8rem 0.8rem 0.25rem;
  padding: 0.42rem 2rem 0.48rem 0.55rem;
  font-size: var(--texto-xs);
  line-height: 1.4;
  color: #222;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.chat-cta__hora {
  position: absolute;
  right: 0.5rem;
  bottom: 0.28rem;
  font-size: 0.7rem;
  color: #8d8d8c;
}
/* Chip centrado tipo aviso de sistema (horario / "te respondo al volver") */
.chat-cta__burbuja--chip {
  align-self: center;
  background: #f4eeda;
  color: #6b5b33;
  font-size: 0.72rem;
  border-radius: 0.6rem;
  padding: 0.3rem 0.6rem;
  box-shadow: none;
  max-width: 92%;
  text-align: center;
}
/* El arte del pollito en su caja, como mensaje de imagen recibido */
.chat-cta__imagen {
  align-self: flex-start;
  width: 52%;
  border-radius: 0.8rem;
  overflow: hidden;
  background: #fff;
  padding: 0.24rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.chat-cta__imagen img { display: block; width: 100%; border-radius: 0.6rem; }
/* El pie del teléfono es EL botón: el WhatsApp real ocupa la barra donde uno
   esperaría escribir. Único punto de clic, y se nota: verde WhatsApp pleno,
   grande, con pista corta arriba, flecha que empuja y anillo que late. */
.chat-cta__pie {
  padding: 0.55rem 0.6rem 0.75rem;
  background: #f7f5f0;
  border-top: 1px solid #e6e2d8;
  text-align: center;
}
.chat-cta__pie-txt { margin: 0 0 0.4rem; font-size: var(--texto-2xs); color: #6b6b68; letter-spacing: .01em; }
.chat-cta__pie .contactos { justify-content: stretch; }
.chat-cta__pie .contacto {
  width: 100%;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.8rem 0.75rem;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  white-space: nowrap;
  border-radius: 1.6rem;
  background: linear-gradient(180deg, #2fd66c, #1fb457);
  color: #fff;
  border: 1px solid #199a49;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6), 0 6px 14px rgba(25, 154, 73, 0.35);
  animation: chat-pulso 1.7s ease-out infinite;
}
.chat-cta__pie .contacto span { overflow: hidden; text-overflow: ellipsis; }
.chat-cta__pie .contacto .icono { width: 20px; height: 20px; }
.chat-cta__pie .contacto .contacto__flecha { width: 18px; height: 18px; opacity: 1; animation: chat-empuje 1.4s ease-in-out infinite; }
.chat-cta__pie .contacto:hover { animation: none; transform: translateY(-1px); box-shadow: 0 0 0 6px rgba(37, 211, 102, 0.3), 0 8px 18px rgba(25, 154, 73, 0.4); }
@keyframes chat-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6), 0 6px 14px rgba(25, 154, 73, 0.35); }
  70%  { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0), 0 6px 14px rgba(25, 154, 73, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 6px 14px rgba(25, 154, 73, 0.35); }
}
@keyframes chat-empuje { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
:root[data-animaciones='apagada'] .chat-cta__pie .contacto,
:root[data-animaciones='apagada'] .chat-cta__pie .contacto .contacto__flecha { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .chat-cta__pie .contacto, .chat-cta__pie .contacto .contacto__flecha { animation: none; }
}
.chat-cta__pie .contacto .icono { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .chat-cta__marco { transform: none; } }

/* ----------------------------------------------------------------------------
   Redes: comunidad de WhatsApp + cuentas oficiales, colgadas en el LETRERO de
   la marca (tabla + cuerdas de los recursos VSG). La tabla es letrero-tabla
   (ratio 943/471, ojales al 4.3% y 95.3% del ancho, 8.6% del alto) y las
   cuerdas cuelgan detrás pasando por los ojales, que son transparentes.
   ---------------------------------------------------------------------------- */
.redes {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--esp-2) 0 var(--esp-5);
}
.redes__tabla {
  position: relative;
  margin-top: 3.2rem; /* de aquí cuelgan las cuerdas */
  width: min(26rem, 94%);
  aspect-ratio: 941 / 468;
  background: url('../assets/img/decor/letrero-tabla.webp') center / contain no-repeat;
  filter: drop-shadow(0 10px 14px rgba(46, 30, 12, 0.28));
  transform: rotate(-0.9deg);
  transform-origin: 50% -3.2rem; /* mece colgado de las cuerdas */
  animation: letrero-mecer 7s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  padding: 12% 9% 7%;
}
@keyframes letrero-mecer {
  0%, 100% { transform: rotate(-1.3deg); }
  50% { transform: rotate(-0.2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .redes__tabla { animation: none; }
}
:root[data-animaciones='apagada'] .redes__tabla { animation: none; }
.redes__tabla::before,
.redes__tabla::after {
  content: '';
  position: absolute;
  /* Las cuerdas SUBEN hasta tocar la tarjeta anterior (ajuste del dueño:
     colgadas del aire se veían mal): cubren todo el hueco entre secciones y
     se meten un poco bajo la tarjeta, como amarradas a ella. */
  top: -5.4rem;
  width: 13px;
  /* los ojales están al 14.5% del alto de la tabla: la cuerda muere ahí */
  height: calc(5.4rem + 17.5%); /* pasa el ojal: se ve la cuerda dentro del hueco */
  background: url('../assets/img/decor/letrero-cuerda.webp') top center / 100% auto repeat-y;
  z-index: -1; /* detrás de la tabla: se asoma por el ojal transparente */
}
/* Centros medidos sobre los huecos CERRADOS del arte (las esquinas
   redondeadas, también transparentes, engañaban la medición anterior). */
.redes__tabla::before { left: calc(7% - 6.5px); }
.redes__tabla::after { left: calc(92.8% - 6.5px); }
.redes__titulo {
  font-size: var(--texto-base);
  font-weight: var(--peso-semibold);
  letter-spacing: 0.2px;
  color: #4a3418; /* tinta oscura sobre el kraft de la tabla */
  text-align: center;
  line-height: 1.25;
}
/* Chips en grilla simétrica: WhatsApp a lo ancho, IG y TikTok gemelos */
.redes__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-2);
  width: 100%;
  max-width: 19rem;
}
.redes__fila .redes__chip { justify-content: center; }
.redes__chip--wsp { grid-column: 1 / -1; }
.redes__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radio-pastilla);
  border: 1px solid rgba(24, 24, 24, 0.5);
  /* Cartón en penumbra (misma receta de la sidebar): textura bajo un velo
     oscuro, nunca una pastilla blanca plana sobre el kraft. */
  background-color: var(--color-superficie-oscura);
  background-image: linear-gradient(rgba(24, 24, 24, 0.88), rgba(24, 24, 24, 0.88)),
    var(--textura-carton);
  background-size: auto, cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-texto-inverso);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  text-decoration: none;
  box-shadow: var(--sombra-1);
  transition: transform 0.12s ease, box-shadow var(--dur-rapida) linear,
              border-color var(--dur-rapida) linear;
}
.redes__chip:hover { transform: translateY(-1px); box-shadow: var(--sombra-2); border-color: var(--amarillo-marca); }
.redes__chip:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 2px; }
/* Cada red con su acento reconocible en el icono, brillando sobre lo oscuro */
.redes__chip--wsp .icono { color: #35e372; }
.redes__chip--ig .icono { color: #ff5fa2; }
.redes__chip--tk .icono { color: #ffffff; }
/* La flecha/enlace al final: indica que el chip lleva a otro lado */
.redes__chip .redes__flecha { color: rgba(255, 255, 255, 0.85); margin-left: 0.1rem; }
.asesor-cta__b-boton .boton__flecha { color: var(--color-texto-suave); }
/* Flecha/enlace-externo al final de los botones CTA del cliente */
.pedido-item__ver .boton__flecha{ width: 14px; height: 14px; opacity: 0.85; margin-left: 0.1rem; }
/* "Otro asesor": un PAPELITO pegado con cinta bajo el teléfono, girado al lado
   contrario del marco para que dialoguen; el botón habla el mismo idioma de
   chips del letrero de redes (pastilla blanca, icono verde), no un botonzote. */
.asesor-cta__b {
  position: relative;
  margin-top: var(--esp-3);
  padding: var(--esp-4) var(--esp-4) var(--esp-3);
  border-radius: var(--radio-sm);
  background-color: var(--dorado-velo);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  box-shadow: var(--sombra-1);
  transform: rotate(0.9deg); /* contrapunto al -1.2deg del teléfono */
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  align-items: center;
  text-align: center;
  max-width: 17rem;
}
/* La cinta que lo pega al cartón */
.asesor-cta__b::before {
  content: '';
  position: absolute;
  top: -0.6rem;
  left: 50%;
  width: 4.2rem;
  height: 1.15rem;
  transform: translateX(-50%) rotate(-2.4deg);
  background: rgba(255, 199, 11, 0.55);
  box-shadow: 0 1px 2px rgba(46, 30, 12, 0.18);
}
.asesor-cta__b-texto { font-size: var(--texto-xs); color: var(--color-texto-2); }
.asesor-cta__b-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.85rem;
  border-radius: var(--radio-pastilla);
  border: 1px solid var(--color-borde);
  background: var(--color-superficie);
  color: var(--color-texto-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  text-decoration: none;
  box-shadow: var(--sombra-1);
  transition: transform 0.12s ease, border-color var(--dur-rapida) linear;
}
.asesor-cta__b-boton .icono { color: #1ebe5d; }
.asesor-cta__b-boton:hover { transform: translateY(-1px); border-color: #25d366; }
.asesor-cta__b-boton:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .asesor-cta__b { transform: none; } }

/* ----------------------------------------------------------------------------
   Papeles de color: cada tarjeta lleva su .papel--* (componentes.css), nunca
   el mismo tono que el cartón. Lo blanco DENTRO de un papel de color vuelve a
   contrastar: plegables del FAQ y controles de formulario.
   --------------------------------------------------------------------------- */
.cliente-fondo .pedido-faq .plegable,
.cliente-fondo .pedido-solicitud .campo__control { background: var(--color-superficie); }
.cliente-fondo .pedido-faq .plegable summary { font-size: var(--texto-base); }

/* Anchos: la columna del cliente en rem, así crece con la base en pantallas
   gigantes (base.css sube el font-size del html en ≥1920 / ≥2560 / ≥3400). */
.contenedor-movil { max-width: 40rem; }
@media (min-width: 1024px) { .contenedor-movil { max-width: 42rem; } }
@media (min-width: 1920px) { .contenedor-movil { max-width: 46rem; } }
@media (min-width: 2560px) { .contenedor-movil { max-width: 50rem; } }

/* ----------------------------------------------------------------------------
   Marca del login: protagonista — grande, centrada, con aire
   --------------------------------------------------------------------------- */

/* La gallina caminante en las puertas: tamaño por puerta */
.login__caminante { display: flex; justify-content: center; }
.login__caminante .gallina-caminante { --gc-ancho: clamp(96px, 11vw, 140px); }
.login__caminante--sm { margin-inline: auto; }
.login__caminante--sm .gallina-caminante { --gc-ancho: 74px; }

/* El color de cada estado también en los nodos del mapa y del stepper */
.mnodo[data-estado='hecho'][data-clave='compra_realizada'],
.mnodo[data-estado='actual'][data-clave='compra_realizada'] { background: var(--est-compra_realizada); border-color: var(--est-compra_realizada); color: var(--est-compra_realizada-texto); }
.mnodo[data-estado='hecho'][data-clave='recibido_importador'],
.mnodo[data-estado='actual'][data-clave='recibido_importador'] { background: var(--est-recibido_importador); border-color: var(--est-recibido_importador); color: #ffffff; }
.mnodo[data-estado='hecho'][data-clave='transito_internacional'],
.mnodo[data-estado='actual'][data-clave='transito_internacional'] { background: var(--est-transito_internacional); border-color: var(--est-transito_internacional); color: #ffffff; }
.mnodo[data-estado='hecho'][data-clave='en_aduana'],
.mnodo[data-estado='actual'][data-clave='en_aduana'] { background: var(--est-en_aduana); border-color: var(--est-en_aduana); color: #ffffff; }
.mnodo[data-estado='hecho'][data-clave='bodega_mercurio'],
.mnodo[data-estado='actual'][data-clave='bodega_mercurio'] { background: var(--est-bodega_mercurio); border-color: var(--est-bodega_mercurio); color: #ffffff; }
.mnodo[data-estado='hecho'][data-clave='despachado'],
.mnodo[data-estado='actual'][data-clave='despachado'] { background: var(--est-despachado); border-color: var(--est-despachado); color: #ffffff; }
.mnodo[data-estado='hecho'][data-clave='entregado'],
.mnodo[data-estado='actual'][data-clave='entregado'] { background: var(--est-entregado); border-color: var(--est-entregado); color: #ffffff; }

/* La etiqueta del ingreso es una FOTO montada: esquinas vivas (las
   esquineras encajan exactas), giro apenas perceptible, ARRUGAS de papel
   (vetas diagonales de luz y sombra) y una esquina doblada. */
.login__tarjeta.etiqueta-kraft {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border-radius: 2px;
  transform: rotate(-0.5deg);
  background-image:
    linear-gradient(112deg, transparent 36%, rgba(122, 90, 40, 0.06) 38%, transparent 41%),
    linear-gradient(74deg, transparent 52%, rgba(255, 255, 255, 0.32) 53.5%, transparent 56%),
    linear-gradient(158deg, transparent 20%, rgba(122, 90, 40, 0.05) 22%, transparent 25.5%),
    linear-gradient(96deg, transparent 68%, rgba(122, 90, 40, 0.06) 70%, transparent 73.5%),
    linear-gradient(23deg, transparent 79%, rgba(255, 255, 255, 0.26) 81%, transparent 84%),
    linear-gradient(141deg, transparent 8%, rgba(255, 255, 255, 0.22) 9.5%, transparent 12%),
    linear-gradient(rgba(253, 248, 233, 0.9), rgba(253, 248, 233, 0.9)),
    var(--textura-kraft);
  background-size: auto, auto, auto, auto, auto, auto, auto, 460px;
}
.login__tarjeta.etiqueta-kraft::after { border-radius: 0; }

/* "Pedir novedades" dentro de la cabecera del pedido (ajuste del dueño): un
   control quieto de la etiqueta, no un botón de chat. Tono neutro, borde
   fino, alineado a la derecha bajo la ruta. */
.pedido-cabecera__novedades {
  display: inline-flex; align-items: center; gap: 0.4rem;
  align-self: flex-end;
  margin-top: var(--esp-3);
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pastilla);
  background: var(--color-superficie);
  color: var(--color-texto-2);
  font-size: var(--texto-sm);
  cursor: pointer;
}
.pedido-cabecera__novedades:hover:not(:disabled) { border-color: var(--dorado-bronce); color: var(--color-texto); }
.pedido-cabecera__novedades:disabled { opacity: 0.7; cursor: default; }
.pedido-cabecera__novedades .icono { color: var(--dorado-texto); }