/* ============================================================================
   componentes.css — Sistema de componentes de Mercurio Tracker.
   Todos los colores/tamaños provienen de tokens.css. Los estados NUNCA se
   comunican solo con color: icono + etiqueta + posición siempre presentes.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Botones — una sola acción primaria (dorada) por vista
   --------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: 0.6rem 1.1rem;
  border-radius: var(--radio-sm);
  font-weight: var(--peso-semibold);
  font-size: var(--texto-sm);
  line-height: 1.2;
  border: 1px solid transparent;
  transition: background-color var(--dur-rapida) linear,
              border-color var(--dur-rapida) linear,
              color var(--dur-rapida) linear;
  text-decoration: none;
}
/* Sin saltos ni elevaciones al pasar el mouse: un botón profesional cambia de
   tono, no de posición. El icono acompaña, no protagoniza. */
.boton .icono { width: 16px; height: 16px; }
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.boton--primario {
  background: var(--color-acento);
  color: var(--negro);
  border-color: rgba(24, 24, 24, 0.12);
}
.boton--primario:hover:not(:disabled) {
  background: var(--dorado-mostaza);
}

.boton--secundario {
  background: var(--dorado-velo);
  border-color: var(--dorado-arena);
  color: var(--color-texto);
}
.boton--secundario:hover:not(:disabled) {
  border-color: var(--dorado-bronce);
  color: var(--dorado-texto);
}

/* Variantes SEMÁNTICAS: verde confirma/aplica, rojo rechaza, azul envía/
   propone. Todas con textura de papel y borde un tono más oscuro. */
.boton--ok {
  background-color: var(--accion-ok);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  border-color: var(--accion-ok-oscuro);
  color: #fff;
}
.boton--ok:hover:not(:disabled) { background-color: var(--accion-ok-oscuro); }
.boton--no {
  background-color: var(--accion-no-velo);
  border-color: var(--accion-no);
  color: var(--accion-no);
}
.boton--no:hover:not(:disabled) { background-color: var(--accion-no); color: #fff; }
.boton--info {
  background-color: var(--accion-info);
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  border-color: var(--accion-info-oscuro);
  color: #fff;
}
.boton--info:hover:not(:disabled) { background-color: var(--accion-info-oscuro); }
.boton--ok .icono, .boton--info .icono { color: #fff; }

.boton--peligro {
  background: var(--color-excepcion-oscuro);
  color: var(--blanco);
}
.boton--peligro:hover:not(:disabled) { background: var(--color-excepcion); }

.boton--bloque { width: 100%; }
/* Robusto: para las acciones que cierran un formulario largo (guardar/cancelar
   de un modal), donde un botón pequeño se siente frágil. */
.boton--lg {
  padding: 0.8rem 1.5rem;
  font-size: var(--texto-base);
  border-radius: var(--radio-md);
}
.boton--sm { padding: 0.4rem 0.8rem; font-size: var(--texto-sm); border-radius: var(--radio-xs); }

/* Botón de solo icono (acciones de tabla, cerrar modal) */
.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radio-xs);
  color: var(--color-texto-2);
  transition: background-color var(--dur-rapida) linear, color var(--dur-rapida) linear;
}
.boton-icono:hover { background: var(--gris-velo); color: var(--color-texto); }

/* ----------------------------------------------------------------------------
   Campos de formulario
   --------------------------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: var(--esp-1); }

.campo__etiqueta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--color-texto-2);
}

.campo__control {
  width: 100%;
  padding: 0.65rem 0.9rem;
  /* Borde tierra FIRME y esquina discreta: campo de herramienta, no burbuja */
  border: 1.5px solid #b3a273;
  border-radius: var(--radio-xs);
  /* Papel con grano en TODOS los campos y desplegables: nada de superficies
     lisas; el texto sigue leyéndose sobre el crema porque el grano es tenue. */
  background-color: #f6efdd;
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  box-shadow: inset 0 1px 3px rgba(74, 58, 28, 0.09);
  transition: border-color var(--dur-rapida) linear, box-shadow var(--dur-rapida) linear;
}
/* La lista desplegada del <select>: el navegador solo deja pintar el color de
   fondo de cada opción, así que va el mismo crema de papel (sin textura, que
   ahí no se puede). Con JS activo, ui.autoDesplegables() pinta encima el
   desplegable propio (abajo) y este select queda oculto pero vivo. */
select.campo__control option { background-color: #f6efdd; color: var(--color-texto); }

/* ---- Desplegable propio (ui.mejorarSelect) ---- */
.desplegable { position: relative; width: 100%; }
/* Abierto: TODO el widget sube de nivel — sin esto, una tarjeta hermana con
   animación (transform crea contexto de apilamiento) pintaba encima del panel. */
.desplegable--abierto { z-index: var(--z-modal, 60); }
/* Y si el widget vive DENTRO de un contenedor animado (aparecer), ese
   contenedor es su cárcel de apilamiento: mientras el desplegable esté
   abierto, el contenedor entero sube — si no, la tarjeta siguiente del DOM
   pintaba encima del panel (visto en el selector "Mis pedidos" del cliente). */
:is(.aparecer, [class]):has(> .desplegable--abierto),
.aparecer:has(.desplegable--abierto) { position: relative; z-index: var(--z-modal, 60); }
.desplegable__nativo {
  position: absolute !important;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  width: 100%; height: 100%;
}
.desplegable__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--color-texto);
}
.desplegable__boton--vacio .desplegable__texto { color: var(--color-texto-suave); }
.desplegable__texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desplegable__chev {
  flex: none;
  color: var(--dorado-texto);
  border-radius: 50%;
  padding: 2px;
  transition: transform var(--dur-rapida), background var(--dur-rapida), color var(--dur-rapida);
}
.desplegable__boton[aria-expanded='true'] { border-color: var(--dorado-ambar); box-shadow: 0 0 0 3px var(--dorado-velo); }
.desplegable__boton[aria-expanded='true'] .desplegable__chev { transform: rotate(180deg); background: var(--amarillo-marca); color: var(--negro); }
.desplegable__boton:disabled { opacity: 0.6; cursor: not-allowed; }
.desplegable__panel {
  position: absolute;
  z-index: var(--z-modal, 60);
  left: 0; right: 0;
  top: calc(100% + 4px);
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.35rem;
  border: 1.5px solid #b3a273;
  border-radius: var(--radio-sm);
  background-color: #f6efdd;
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  box-shadow: var(--sombra-3);
  animation: modal-entrada var(--dur-rapida) var(--curva-salida);
}
.desplegable--arriba .desplegable__panel { top: auto; bottom: calc(100% + 4px); }
.desplegable__grupo {
  margin: 0.4rem 0.35rem 0.15rem;
  font-size: var(--texto-2xs);
  font-weight: var(--peso-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-texto-suave);
}
.desplegable__opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: var(--radio-xs);
  background: transparent;
  color: var(--color-texto);
  font: inherit;
  font-size: var(--texto-sm);
  text-align: left;
  cursor: pointer;
}
.desplegable__opcion:hover,
.desplegable__opcion:focus-visible { background: var(--dorado-velo); outline: none; }
.desplegable__opcion[aria-selected='true'] { background: var(--amarillo-marca); color: var(--negro); font-weight: var(--peso-semibold); }
.desplegable__opcion:disabled { opacity: 0.5; cursor: not-allowed; }
.desplegable__check { flex: none; opacity: 0; }
.desplegable__opcion[aria-selected='true'] .desplegable__check { opacity: 1; }
.desplegable__opcion > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campo__control:focus {
  outline: none;
  border-color: var(--dorado-ambar);
  box-shadow: 0 0 0 3px var(--dorado-velo);
}
.campo__control::placeholder { color: var(--color-texto-suave); }
textarea.campo__control { resize: vertical; min-height: 5.5rem; }

.campo__ayuda { font-size: var(--texto-sm); color: var(--color-texto-2); line-height: 1.5; max-width: 64ch; }

.campo--error .campo__control { border-color: var(--color-excepcion); }
.campo__error {
  display: flex; align-items: center; gap: var(--esp-1);
  font-size: var(--texto-sm);
  color: var(--color-excepcion-oscuro);
}

/* Campo de búsqueda con icono */
.campo-buscar { position: relative; }
.campo-buscar .icono {
  position: absolute; left: 0.8rem; top: 50%;
  transform: translateY(-50%);
  color: var(--color-icono);
  pointer-events: none;
}
.campo-buscar .campo__control { padding-left: 2.6rem; }

/* ----------------------------------------------------------------------------
   Tarjetas
   --------------------------------------------------------------------------- */
/* Tarjetas: el borde manda, la sombra apenas existe. La jerarquía sale del
   contenido, no de la decoración del contenedor. */
.tarjeta {
  /* Papel de verdad, no un crema plano: el grano del papel asoma bajo un velo
     del 94 % del color de superficie, así el texto conserva TODO su contraste
     (el velo es casi opaco; la textura solo rompe la planitud). */
  background-color: var(--color-superficie);
  background-image: linear-gradient(rgba(253, 249, 236, 0.94), rgba(253, 249, 236, 0.94)),
    var(--textura-papel);
  background-size: auto, 420px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-1);
  padding: var(--esp-tarjeta);
}

/* ----------------------------------------------------------------------------
   Badge de estado — icono + etiqueta + (posición en contexto). El tono
   (data-tono) refuerza, nunca sustituye. AA verificado sobre cada fondo.
   --------------------------------------------------------------------------- */
/* Compacto y con borde del mismo tono: se lee como dato, no como sticker.
   El icono se reduce a 13px — señal, no ilustración. */
.badge-estado {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem 0.2rem 0.5rem;
  border-radius: var(--radio-xs);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  line-height: 1.3;
  white-space: nowrap;
  background: var(--estado-progreso-fondo);
  color: var(--estado-progreso-texto);
  border: 1px solid rgba(24, 24, 24, 0.10);
}
.badge-estado .icono { width: 13px; height: 13px; opacity: 0.85; }
.badge-estado[data-tono='actual'] {
  background: var(--estado-actual-fondo);
  color: var(--estado-actual-texto);
  border-color: rgba(169, 107, 3, 0.28);
}
.badge-estado[data-tono='final'] {
  background: var(--estado-final-fondo);
  color: var(--estado-final-texto);
  border-color: rgba(24, 24, 24, 0.18);
}
.badge-estado[data-tono='excepcion'] {
  background: var(--rojo-marca);
  color: #ffffff;
  border-color: var(--rojo-vino);
}

/* ----------------------------------------------------------------------------
   Tabs con conteo (asesor) — activo: subrayado dorado de 3px
   --------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: var(--esp-2);
  border-bottom: 1px solid var(--color-borde);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--color-texto-2);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--dur-rapida) linear, border-color var(--dur-rapida) linear;
}
.tab:hover { color: var(--color-texto); }
.tab[aria-selected='true'] {
  color: var(--color-texto);
  border-bottom-color: var(--amarillo-marca);
  font-weight: var(--peso-semibold);
}

/* ----------------------------------------------------------------------------
   Tabla de gestión (asesor)
   --------------------------------------------------------------------------- */
.tabla-envoltura {
  overflow-x: auto;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-firma);
  background: var(--color-superficie);
  box-shadow: var(--sombra-1);
}
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
  font-variant-numeric: tabular-nums;   /* fechas y números alinean en columna */
}
.tabla th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-weight: var(--peso-semibold);
  font-size: var(--texto-xs);
  text-transform: none;                 /* sin bloques en mayúsculas (dislexia) */
  letter-spacing: 0.02em;
  color: var(--color-texto-suave);
  background: var(--color-superficie-2);
  padding: var(--esp-celda) var(--esp-4);
  border-bottom: 1px solid var(--color-borde);
  white-space: nowrap;
}
.tabla td {
  padding: 0.625rem var(--esp-4);
  border-bottom: 1px solid var(--color-borde);
  vertical-align: middle;
  line-height: 1.45;
}
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr { transition: background-color var(--dur-rapida) linear; }
/* Hover con intención: velo dorado + barra de marca a la izquierda, para que
   la fila activa se sienta elegible y no un accidente del cursor. */
.tabla tbody tr:hover { background: var(--dorado-velo); }
.tabla tbody tr.fila-clic { cursor: pointer; }
.tabla tbody tr.fila-clic td:first-child { box-shadow: inset 3px 0 0 transparent; transition: box-shadow var(--dur-rapida) linear; }
.tabla tbody tr.fila-clic:hover td:first-child { box-shadow: inset 3px 0 0 var(--amarillo-marca); }

/* Avatar de iniciales */
.avatar {
  width: 2.1rem; height: 2.1rem;
  flex: none;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--dorado-velo);
  color: var(--dorado-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
}

/* ----------------------------------------------------------------------------
   Panel lateral (drawer) para detalle sin salir de la tabla
   --------------------------------------------------------------------------- */
.panel-lateral {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(30rem, 100vw);
  background: var(--color-superficie);
  box-shadow: var(--sombra-3);
  z-index: var(--z-panel);
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  transition: transform var(--dur-media) var(--curva-salida);
}
.panel-lateral.abierto { transform: translateX(0); }
.panel-lateral__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  background: var(--crema);
  border-bottom: 1px solid var(--color-borde);
  box-shadow: inset 0 -3px 0 rgba(255, 199, 11, 0.35); /* hilo de marca */
}
.panel-lateral__cuerpo { overflow-y: auto; padding: var(--esp-5); flex: 1; }

.telon {
  position: fixed;
  inset: 0;
  background: rgba(24, 24, 24, 0.45);
  z-index: calc(var(--z-panel) - 1);
  opacity: 0;
  transition: opacity var(--dur-media) linear;
}
.telon.abierto { opacity: 1; }

/* ----------------------------------------------------------------------------
   Modal
   --------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--esp-4);
  background: rgba(24, 24, 24, 0.45);
}
.modal__caja {
  width: min(34rem, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-superficie);
  border-radius: var(--radio-firma-lg);
  box-shadow: var(--sombra-3);
  padding: var(--esp-5);
  animation: modal-entrada var(--dur-media) var(--curva-rebote);
}
.modal__caja--ancha { width: min(46rem, 100%); }
@keyframes modal-entrada {
  from { transform: translateY(14px) scale(0.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (max-width: 480px) {
  .modal { place-items: end center; padding: 0; }
  .modal__caja {
    border-radius: var(--radio-lg) var(--radio-lg) 0 0;
    animation-name: modal-entrada-movil;
  }
  @keyframes modal-entrada-movil {
    from { transform: translateY(30%); }
    to { transform: none; }
  }
}

/* ----------------------------------------------------------------------------
   Toast (aviso flotante)
   --------------------------------------------------------------------------- */
.zona-toast {
  position: fixed;
  bottom: var(--esp-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  width: min(26rem, calc(100vw - 2rem));
}
/* En móvil el panel interno tiene barra de navegación abajo: el toast sube
   para no taparla (ni quedar tapado por ella). */
@media (max-width: 880px) {
  body:has(.asesor-sidebar) .zona-toast { bottom: calc(4.5rem + var(--esp-4)); }
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  background: var(--negro);
  color: var(--blanco);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-firma-sm);
  border-left: 4px solid var(--amarillo-marca);
  box-shadow: var(--sombra-3);
  font-size: var(--texto-sm);
  animation: toast-entrada var(--dur-media) var(--curva-rebote);
}
.toast[data-tono='excepcion'] { border-left-color: var(--rojo-pollito); }
.toast .icono { color: var(--amarillo-marca); margin-top: 1px; }
.toast[data-tono='excepcion'] .icono { color: #f0a5a0; }
@keyframes toast-entrada {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.toast.salida { animation: toast-salida var(--dur-media) var(--curva-salida) forwards; }
@keyframes toast-salida {
  to { transform: translateY(8px); opacity: 0; }
}

/* ----------------------------------------------------------------------------
   Skeleton con textura kraft (carga)
   --------------------------------------------------------------------------- */
.esqueleto {
  position: relative;
  overflow: hidden;
  background: var(--gris-velo);
  border-radius: var(--radio-xs);
  min-height: 1rem;
}
.esqueleto::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--textura-kraft);
  background-size: 460px;
  opacity: 0.16;
}
.esqueleto::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: esqueleto-brillo calc(1400ms * var(--anim-factor)) linear infinite;
}
:root[data-animaciones='apagada'] .esqueleto::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .esqueleto::before { animation: none; } }
@keyframes esqueleto-brillo {
  to { transform: translateX(100%); }
}

/* ----------------------------------------------------------------------------
   Estado vacío con el sketch del pollito
   --------------------------------------------------------------------------- */
.estado-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 46vh;
  text-align: center;
  gap: var(--esp-2);
  padding: var(--esp-7) var(--esp-4);
  color: var(--color-texto-2);
  font-size: var(--texto-md);
}
.estado-vacio img {
  width: 136px;
  opacity: 0.6;
  margin-bottom: var(--esp-3);
}
.estado-vacio h3 { color: var(--color-texto); }
.estado-vacio p { max-width: 34ch; margin-inline: auto; font-size: var(--texto-sm); }

/* ----------------------------------------------------------------------------
   Sello del pollito — confirma cambios de estado y pedidos entregados.
   Efecto de caucho: cae, comprime y asienta (rebote), respeta reduced-motion.
   --------------------------------------------------------------------------- */
.sello-pollito {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: 6.5rem; height: 6.5rem;
  border: 3px double var(--est-entregado);
  border-radius: 50%;
  color: #227a44;
  transform: rotate(-9deg);
  background: radial-gradient(circle at 30% 25%, rgba(47, 158, 87, 0.14), transparent 60%);
}
.sello-pollito img {
  width: 2.6rem;
  opacity: 0.95;
  /* el boceto negro se tiñe del verde del sello */
  filter: invert(45%) sepia(60%) saturate(500%) hue-rotate(96deg) brightness(0.92);
}
.sello-pollito span {
  font-size: 0.6rem;
  font-weight: var(--peso-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;             /* pieza gráfica de marca, no texto corrido */
}
.sello-pollito.estampar {
  animation: estampar var(--dur-lenta) var(--curva-rebote) both;
}
@keyframes estampar {
  0% { transform: rotate(-9deg) scale(1.7); opacity: 0; }
  55% { transform: rotate(-9deg) scale(0.94); opacity: 1; }
  100% { transform: rotate(-9deg) scale(1); opacity: 1; }
}
:root[data-animaciones='apagada'] .sello-pollito.estampar { animation: none; }
@media (prefers-reduced-motion: reduce) { .sello-pollito.estampar { animation: none; } }

/* ----------------------------------------------------------------------------
   Chips de filtro
   --------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radio-pastilla);
  border: 1.5px solid var(--color-borde-fuerte);
  background: var(--color-superficie);
  font-size: var(--texto-sm);
  color: var(--color-texto-2);
  transition: all var(--dur-rapida) linear;
}
.chip:hover { border-color: var(--dorado-bronce); }
.chip[aria-pressed='true'] {
  background: var(--dorado-velo);
  border-color: var(--dorado-ambar);
  color: var(--estado-actual-texto);
  font-weight: var(--peso-medio);
}

/* ----------------------------------------------------------------------------
   Detalles plegables (FAQ) — acordeón nativo estilizado
   --------------------------------------------------------------------------- */
.plegable {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-firma-sm);
  background: var(--color-superficie);
}
.plegable + .plegable { margin-top: var(--esp-2); }
.plegable summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  cursor: pointer;
  font-weight: var(--peso-medio);
  list-style: none;
}
.plegable summary::-webkit-details-marker { display: none; }
.plegable > summary > .icono { transition: transform var(--dur-rapida) var(--curva-salida); color: var(--gris-medio); }
.plegable[open] > summary > .icono { transform: rotate(180deg); }
.plegable__cuerpo {
  padding: 0 var(--esp-4) var(--esp-4);
  font-size: var(--texto-sm);
  color: var(--color-texto-2);
}

/* ----------------------------------------------------------------------------
   Aviso contextual (banner informativo dentro de vistas)
   --------------------------------------------------------------------------- */
.aviso {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-firma-sm);
  background: var(--dorado-velo);
  color: var(--estado-actual-texto);
  font-size: var(--texto-sm);
}
.aviso .icono { flex: none; margin-top: 2px; }
.aviso[data-tono='excepcion'] {
  background: var(--color-excepcion-velo);
  color: var(--rojo-vino);
}
.aviso[data-tono='neutro'] {
  background: var(--gris-velo);
  color: var(--color-texto-2);
}

/* ----------------------------------------------------------------------------
   Entrada de vistas: aparición escalonada (JS marca .aparecer en hijos)
   --------------------------------------------------------------------------- */
.aparecer {
  animation: aparecer var(--dur-media) var(--curva-salida) both;
  animation-delay: calc(var(--orden, 0) * 45ms * var(--anim-factor));
}
/* Se anima `translate` (propiedad independiente) y NO `transform`: con
   `transform: none` al final y fill-mode both, la animación pisaba para siempre
   los giros decorativos de las piezas montadas (p. ej. el medio grado de la
   tarjeta del login), que nunca llegaban a verse. */
@keyframes aparecer {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
:root[data-animaciones='apagada'] .aparecer { animation: none; }
@media (prefers-reduced-motion: reduce) { .aparecer { animation: none; } }

/* ----------------------------------------------------------------------------
   Paleta por ESTADO: cada etapa del viaje con su tinte tierra propio. Van
   DESPUÉS de los tonos genéricos para pisarlos; las excepciones no aparecen
   aquí y conservan su rojo (data-tono='excepcion' manda).
   --------------------------------------------------------------------------- */
.badge-estado[data-estado='compra_realizada'] { background: var(--est-compra_realizada); color: var(--est-compra_realizada-texto); border-color: rgba(24, 24, 24, 0.22); }
.badge-estado[data-estado='recibido_importador'] { background: var(--est-recibido_importador); color: #ffffff; border-color: rgba(24, 24, 24, 0.22); }
.badge-estado[data-estado='transito_internacional'] { background: var(--est-transito_internacional); color: #ffffff; border-color: rgba(24, 24, 24, 0.22); }
.badge-estado[data-estado='en_aduana'] { background: var(--est-en_aduana); color: #ffffff; border-color: rgba(24, 24, 24, 0.22); }
.badge-estado[data-estado='bodega_mercurio'] { background: var(--est-bodega_mercurio); color: #ffffff; border-color: rgba(24, 24, 24, 0.22); }
.badge-estado[data-estado='despachado'] { background: var(--est-despachado); color: #ffffff; border-color: rgba(24, 24, 24, 0.22); }
.badge-estado[data-estado='entregado'] { background: var(--est-entregado); color: #ffffff; border-color: rgba(24, 24, 24, 0.22); }

.badge-estado[data-estado] .icono { opacity: 1; }

/* ----------------------------------------------------------------------------
   Gallinas de perfil: variantes del pollito del logo por FILTRO (mismo SVG,
   cero assets nuevos). Paquetes por rol: cl (cliente, tierras cálidas),
   as (asesor, fríos) y su (superadmin, dorados/sobrios).
   --------------------------------------------------------------------------- */
.gallina-avatar {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  /* Fondo BLANCO fijo con aro: el hue-rotate no toca los píxeles sin color
     (blanco, negros y grises del cuerpo), solo cresta, pico y motas. */
  background: #ffffff;
  border: 1px solid #e3dcc6;
  object-fit: contain;
  /* Relleno FIJO: un % se resolvería contra el contenedor (una celda ancha
     de tabla lo inflaría hasta tapar el dibujo). */
  padding: 0.3rem;
  display: block;
  flex: none;
}

/* Selector de gallinas (modal): rejilla 4×2{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--esp-3);
}


/* ----------------------------------------------------------------------------
   Invitación a la gallina de perfil: halo dorado que respira. Es el ÚNICO
   elemento animado en reposo de toda la app: por eso funciona como invitación.
   --------------------------------------------------------------------------- */
@keyframes foto-invita {
  0%, 100% { box-shadow: 0 0 0 2px var(--glow-avatar, var(--amarillo-marca)), 0 0 8px 1px var(--glow-avatar, var(--amarillo-marca)); }
  50% { box-shadow: 0 0 0 3px var(--glow-avatar, var(--amarillo-marca)), 0 0 16px 5px var(--glow-avatar, var(--amarillo-marca)); }
}

/* ============================================================================
   KIT POSTAL — la app entera es un paquete: papeles de color con textura,
   cinta de embalaje impresa de la marca y código de barras.
   ============================================================================ */

/* Papeles de color: recuadro interno con textura kraft propia, NUNCA del
   mismo tono que el fondo grande. */
.papel {
  transition: transform var(--dur-media) var(--curva-salida),
              box-shadow var(--dur-media) var(--curva-salida);
  position: relative;
  isolation: isolate;
}
.papel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--textura-kraft);
  background-size: 460px;
  opacity: 0.14;
  pointer-events: none;
}
.papel--dorado { background: #fdf0c8; border-color: #e3cd8d; }
.papel--cielo { background: #e3edf6; border-color: #b9cfe2; }
.papel--salvia { background: #e8efd8; border-color: #c6d6a3; }
.papel--terracota { background: #f9e7d2; border-color: #e2c29b; }
.papel--lila { background: #efe9f6; border-color: #cec2e2; }


/* Botón "?" de ayuda contextual: mini círculo junto a la etiqueta del campo */
.boton-ayuda {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1px solid var(--color-borde);
  background: transparent;
  color: var(--color-texto-suave);
  font-size: 0.78rem;
  font-weight: var(--peso-semibold);
  line-height: 1;
  cursor: pointer;
}
.boton-ayuda:hover,
.boton-ayuda[aria-expanded='true'] {
  background: var(--dorado-velo);
  color: var(--dorado-texto);
  border-color: var(--dorado-bronce);
}
.ayuda-globo {
  background: var(--dorado-velo);
  border: 1px solid var(--dorado-arena);
  border-radius: var(--radio-sm);
  padding: var(--esp-3) var(--esp-4);
  margin-bottom: var(--esp-2);
  font-size: var(--texto-sm);
  color: var(--color-texto-2);
}
.ayuda-globo p + p { margin-top: var(--esp-2); }

/* Los papeles se despegan apenas al pasar el mouse: se sienten objetos */
.papel:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-2);
}

/* ----------------------------------------------------------------------------
   La gallina mensajera de las puertas: el arte original del logo con su
   paquete, sombra suave y una respiración LENTA (translate/scale mínimos).
   Sin patas ni caminatas dibujadas encima del arte.
   --------------------------------------------------------------------------- */
.gallina-caminante {
  --gc-ancho: 150px;
  position: relative;
  width: calc(var(--gc-ancho) * 1.5);
  height: calc(var(--gc-ancho) * 1.18);
  pointer-events: none;
}
.gc-cuerpo {
  position: absolute;
  left: 50%;
  bottom: calc(var(--gc-ancho) * 0.08);
  width: var(--gc-ancho);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: gc-respira 2.6s ease-in-out infinite;
  z-index: 1;
}
.gc-cuerpo img { width: 100%; height: auto; display: block; }
.gc-sombra {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(var(--gc-ancho) * 0.82);
  height: calc(var(--gc-ancho) * 0.09);
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(24, 24, 24, 0.16);
  filter: blur(3px);
  animation: gc-sombra 2.6s ease-in-out infinite;
}
@keyframes gc-respira {
  0%   { transform: translateX(-50%) translateY(0)    scale(1, 1)       rotate(0deg); }
  20%  { transform: translateX(-50%) translateY(1%)   scale(1.05, 0.94) rotate(0deg); }
  48%  { transform: translateX(-50%) translateY(-12%) scale(0.97, 1.05) rotate(-2.5deg); }
  72%  { transform: translateX(-50%) translateY(0)    scale(1.04, 0.96) rotate(2.5deg); }
  100% { transform: translateX(-50%) translateY(0)    scale(1, 1)       rotate(0deg); }
}
@keyframes gc-sombra {
  0%, 20%, 72%, 100% { transform: translateX(-50%) scaleX(1);    opacity: 1; }
  48% { transform: translateX(-50%) scaleX(0.82); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .gc-cuerpo, .gc-sombra { animation: none; }
}
:root[data-animaciones='apagada'] :is(.gc-cuerpo, .gc-sombra, .admin-cabecera__foto) { animation: none; }

/* Ni los controles del mapa quedan blancos: manila como todo lo demás */
.leaflet-bar a,
.leaflet-bar a:hover,
.leaflet-bar a:focus {
  background-color: var(--color-superficie);
  color: var(--color-texto);
}
.leaflet-container .leaflet-control-attribution {
  background: rgba(253, 249, 236, 0.85);
}


/* Cintas pequeñas "DE USA ✈ A TU PUERTA": muerden el borde superior e
   inferior de la etiqueta del ingreso, rasgadas en las puntas. Nunca tocan
   el contenido. */
@keyframes asentar { from { opacity: 0; } }
.etiqueta-kraft > .cinta-mini {
  position: absolute;
  left: 50%;
  width: 10.5rem;
  height: 1.45rem;
  background: url('../assets/img/cinta-mini.svg') center / 100% 100% no-repeat;
  clip-path: polygon(0 12%, 2.5% 0, 97.5% 4%, 100% 16%, 99% 46%, 100% 70%, 98% 88%, 96.5% 100%, 3% 96%, 0.8% 78%, 0 52%, 1.4% 28%);
  box-shadow: 0 1px 3px rgba(24, 24, 24, 0.2);
  z-index: 2;
  pointer-events: none;
  animation: asentar var(--dur-escena) var(--curva-salida) both;
}
.etiqueta-kraft > .cinta-mini--arriba { top: -0.7rem; transform: translateX(-50%) rotate(-2deg); }

/* ----------------------------------------------------------------------------
   Vista previa de enlaces (MB.ui.vistaPreviaEnlace)
   Tarjeta de papel: miniatura (og:image o favicon) a la izquierda, título +
   dominio a la derecha y el botón "Abrir". Nada de blanco plano: papel manila
   con su grano. La compacta es una sola línea para listas densas.
   --------------------------------------------------------------------------- */
.enlace-vista {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--esp-3);
  max-width: 34rem;
  min-height: 4.5rem;
  background-color: #f6efdd;
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  color: var(--color-texto);
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--sombra-1);
  transition: transform var(--dur-rapida) var(--curva-salida),
              box-shadow var(--dur-rapida) var(--curva-salida),
              border-color var(--dur-rapida) linear;
}
.enlace-vista:hover {
  transform: translateY(-1px);
  box-shadow: var(--sombra-2);
  border-color: var(--dorado-bronce);
}
.enlace-vista__mini {
  position: relative;
  flex: 0 0 4.5rem;
  width: 4.5rem;
  min-height: 4.5rem;
  align-self: stretch;
  display: grid;
  place-items: center;
  background-color: var(--gris-velo);
  background-image: var(--textura-kraft);
  background-size: 460px;
  background-blend-mode: multiply;
  border-right: 1px solid var(--color-borde);
  color: var(--color-icono);
  overflow: hidden;
}
/* Absoluta y no en flujo: así el tamaño natural de la foto (una de 1000 px
   de alto, por ejemplo) no estira la tarjeta; llena el cuadro y se recorta. */
.enlace-vista__mini .enlace-vista__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Sin og:image: el favicon grande, contenido y con aire, no estirado. */
.enlace-vista__mini--favicon .enlace-vista__img {
  position: static;
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
  border-radius: var(--radio-xs);
}
.enlace-vista__cuerpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: var(--esp-2) 0;
}
.enlace-vista__titulo {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  line-height: 1.3;
  color: var(--color-texto);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.enlace-vista__titulo.esqueleto {
  display: block;
  width: 70%;
  height: 0.9rem;
  margin: 2px 0;
}
.enlace-vista__meta {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.enlace-vista__abrir {
  align-self: center;
  flex: 0 0 auto;
  margin-right: var(--esp-3);
  white-space: nowrap;
}
.enlace-vista--sin-datos .enlace-vista__titulo { font-weight: var(--peso-medio); }
.enlace-vista--cargando .enlace-vista__abrir { opacity: 0.7; }

/* Compacta: una línea (favicon 16px + título + dominio), es un <a> entero. */
.enlace-vista--compacta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 0.2rem var(--esp-2) 0.2rem 0.35rem;
  border-radius: var(--radio-xs);
  box-shadow: none;
  vertical-align: middle;
}
.enlace-vista--compacta:hover { transform: none; box-shadow: var(--sombra-1); }
.enlace-vista--compacta .enlace-vista__favicon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  color: var(--color-icono);
}
.enlace-vista--compacta .enlace-vista__favicon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 3px;
}
.enlace-vista--compacta .enlace-vista__titulo {
  display: block;
  -webkit-line-clamp: unset;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}
/* El hueco donde se pinta la vista previa nunca ensancha a su contenedor */
.enlace-vista-hueco { display: block; min-width: 0; max-width: 100%; }
/* Sin foto real (soloFoto): el hueco desaparece, no queda una caja vacía */
.enlace-vista-hueco:empty,
.enlace-vista-hueco:has(> .enlace-vista--vacia) { display: none; }
.enlace-vista--compacta .enlace-vista__titulo.esqueleto {
  width: 8rem;
  height: 0.85rem;
  color: transparent;
  margin: 0;
}
.enlace-vista--compacta .enlace-vista__meta {
  flex: 0 0 auto;
  max-width: 11rem;
}
.enlace-vista--compacta .enlace-vista__meta::before { content: '·'; margin-right: var(--esp-2); }

/* Texto que no es un link http(s): se muestra tal cual, sin tarjeta. */
.enlace-vista--cruda {
  display: inline;
  background: none;
  border: 0;
  box-shadow: none;
  min-height: 0;
  max-width: none;
  overflow-wrap: anywhere;
}
.enlace-vista--cruda:hover { transform: none; box-shadow: none; }


/* ---- Botones de contacto (ui.botonesContacto): un canal, un color ---- */
.contactos { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.contactos--compacto { gap: 0.35rem; }
.contacto {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radio-pastilla);
  border: 1.5px solid transparent;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  text-decoration: none;
  color: #fff;
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: soft-light;
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
  transition: transform var(--dur-rapida), filter var(--dur-rapida);
}
.contacto:hover { transform: translateY(-1px); filter: brightness(1.05); }
.contacto .icono { flex: none; }
.contactos--compacto .contacto { padding: 0.3rem 0.65rem; font-size: var(--texto-xs); }
.contacto--whatsapp { background-color: #25a05a; }
.contacto--correo { background-color: var(--dorado-ambar); color: var(--negro); }
.contacto--instagram { background-color: #b0357a; }
.contacto--tiktok { background-color: #181818; }
.contacto--telefono { background-color: var(--accion-info); }
.contacto span:empty { display: none; }
.contacto__flecha { margin-left: 0.15rem; opacity: 0.85; }

/* ----------------------------------------------------------------------------
   Ruta de etapas (ui.rutaEtapas) — compartida por el asesor (tarjeta del
   comercial, tabla del coordinador) y la cabecera del cliente: línea de fondo,
   tramo recorrido con el color de la etapa actual (--tono-estado desde JS),
   un punto por etapa (relleno con el color de SU etapa); el actual lleva el
   icono. Con excepción la línea de fondo se raya en rojo.
   --------------------------------------------------------------------------- */
.ruta-etapas {
  --tono-ruta: var(--tono-estado, var(--dorado-ambar));
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1.35rem;
  margin: 0 0.15rem;
}
.ruta-etapas::before,
.ruta-etapas__linea {
  content: '';
  position: absolute;
  left: 0.55rem; right: 0.55rem; top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 999px;
  background: rgba(74, 58, 28, 0.16);
}
.ruta-etapas__linea { right: auto; width: calc((100% - 1.1rem) * var(--pct, 0%) / 100%); background: var(--tono-ruta); }
.ruta-etapas__punto {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--color-superficie);
  border: 2px solid rgba(74, 58, 28, 0.28);
  color: var(--tono-estado-texto, #fff);
}
.ruta-etapas__punto.es-hecha { background: var(--tono); border-color: var(--tono); }
.ruta-etapas__punto.es-actual {
  width: 1.35rem; height: 1.35rem;
  background: var(--tono); border-color: #fff;
  box-shadow: 0 0 0 2px var(--tono), var(--sombra-1);
}
.ruta-etapas__punto.es-actual .icono { width: 11px; height: 11px; }
.ruta-etapas[data-excepcion='1']::before { background: repeating-linear-gradient(90deg, var(--rojo-marca) 0 6px, transparent 6px 10px); opacity: 0.55; }
.ruta-etapas[data-excepcion='1'] .ruta-etapas__punto:not(.es-hecha):not(.es-actual) { border-color: var(--rojo-marca); }
/* Mini (celdas de tabla): puntos pequeños, el actual apenas más grande, sin icono */
.ruta-etapas--mini { height: 0.75rem; width: 100%; max-width: 9rem; margin: 0; }
.ruta-etapas--mini::before, .ruta-etapas--mini .ruta-etapas__linea { left: 0.3rem; right: 0.3rem; height: 2px; margin-top: -1px; }
.ruta-etapas--mini .ruta-etapas__linea { right: auto; width: calc((100% - 0.6rem) * var(--pct, 0%) / 100%); }
.ruta-etapas--mini .ruta-etapas__punto { width: 0.5rem; height: 0.5rem; border-width: 1.5px; }
.ruta-etapas--mini .ruta-etapas__punto.es-actual { width: 0.75rem; height: 0.75rem; box-shadow: 0 0 0 1.5px var(--tono); }
/* Grande (cabecera del cliente): puntos de 0.9rem, el actual de 1.75rem con
   icono de 14px, línea de 4px. Ocupa todo el ancho disponible. */
.ruta-etapas--grande { height: 1.75rem; width: 100%; margin: 0; }
.ruta-etapas--grande::before, .ruta-etapas--grande .ruta-etapas__linea { left: 0.7rem; right: 0.7rem; height: 4px; margin-top: -2px; }
.ruta-etapas--grande .ruta-etapas__linea { right: auto; width: calc((100% - 1.4rem) * var(--pct, 0%) / 100%); }
.ruta-etapas--grande .ruta-etapas__punto { width: 0.9rem; height: 0.9rem; border-width: 2px; }
.ruta-etapas--grande .ruta-etapas__punto.es-actual { width: 1.75rem; height: 1.75rem; box-shadow: 0 0 0 2.5px var(--tono), var(--sombra-2); }
.ruta-etapas--grande .ruta-etapas__punto.es-actual .icono { width: 14px; height: 14px; }