/* ══════════════════════════════════════════════════════════════════════════════
   MOBIX — MENSAJERÍA · GSD-768 · v30.146.0

   ESTE ARCHIVO ES DELIBERADAMENTE PEQUEÑO.

   La hoja de tipos y el formulario del encargo NO definen su propio cristal, ni
   su propio radio, ni su propia curva de animación: reutilizan
   `.service-selector-sheet`, `.sheet-content`, `.request-panel`, `.panel-content`,
   `.input-group`, `.modern-input`, `.price-section` y `.btn-request-primary` de
   `service-selector.css`. El comentario de `.sheet-content` ya lo dice para el
   formulario de mototaxi y vale igual aquí: si estos números divergen, dejan de
   parecer la misma pieza de vidrio — DT-010 aplicado al diseño.

   Aquí abajo sólo está lo que no existía: la rejilla de iconos y cuatro remates
   del formulario del encargo.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── REJILLA DE TIPOS DE ENCARGO ─────────────────────────────────────────────
   2×2 en vez de la lista vertical del selector de servicios. Son cuatro, cortos
   y se eligen de un vistazo: una lista los estiraría hasta obligar a desplazar
   en pantallas de gama baja, que es donde vive esta app. */
.encargo-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 4px 0 18px 0;
  max-height: 58vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.encargo-options::-webkit-scrollbar {
  display: none;
}

.encargo-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 14px;
  /* Mismo material que `.service-option`, para que las dos hojas se lean como
     una sola familia. */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.2s ease,
    border-color 0.2s ease;
}

@media (hover: hover) {
  .encargo-option:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
  }
}

.encargo-option:active {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 215, 0, 0.28);
}

.encargo-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* El mismo lecho dorado translúcido de `.service-icon`. */
  background: rgba(255, 215, 0, 0.1);
  border-radius: 12px;
  color: #fff;
  flex-shrink: 0;
}

.encargo-name {
  font-family: "Outfit", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
}

.encargo-desc {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.35;
}

/* ── GSD-789 · QUÉ SE ESTÁ PIDIENDO, DICHO UNA SOLA VEZ ─────────────────
   Sustituye a `.encargo-tipo-chip` (píldora amarilla dentro del cuerpo). El tipo
   de encargo pasa a ser el TÍTULO de la hoja —amarillo, grande, sin fondo ni
   trazo— y "Mensajero" queda como rótulo pequeño encima. Se recupera el alto de
   la píldora más su margen para los campos, que es lo que escaseaba.
   Sólo aplica a esta hoja: el `h3` del panel de mototaxi no lleva estos hijos y
   conserva su estilo de siempre. */
.panel-header-simple h3 .panel-kicker,
.panel-header-simple h3 .panel-servicio {
  display: block;
  line-height: 1.15;
}

.panel-header-simple h3 .panel-kicker {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.panel-header-simple h3 .panel-servicio {
  margin-top: 2px;
  font-size: 1.18rem;
  font-weight: 700;
  color: #ffd700;
}

/* ===========================================================================
   GSD-790 - LOS CUATRO ICONOS SE MUEVEN UNA VEZ, AL ABRIRSE LA HOJA

   Cada icono hace el gesto de SU oficio, no un rebote generico: el sello
   estampa, el vapor sube, la bolsa se balancea, la caja cae y se asienta. Dura
   ~1 s, corre UNA vez y termina en la posicion de reposo, asi que si el motor no
   la ejecuta no queda nada torcido.

   TRES DECISIONES QUE NO SON ESTETICAS:

   1. Solo `transform` y `opacity`. Son las dos unicas propiedades que el
      compositor resuelve sin re-maquetar ni repintar el documento. Memoria del
      proyecto: "el WebView cobra por dibujar", y con mapa nativo el coste por
      fotograma es binario - animar `width`, `top` o un filtro aqui habria
      costado lo mismo que animar toda la pantalla.
   2. Escalonadas con `animation-delay` (0 / 90 / 180 / 270 ms). Cuatro
      animaciones arrancando en el mismo fotograma leen como un parpadeo; en
      cascada leen como una lista que se presenta.
   3. `transform-box: fill-box` en las piezas internas del SVG. Sin eso,
      `transform-origin` se mide contra el viewBox entero y el giro sale
      descentrado - es el equivalente SVG de rotar sobre la esquina del lienzo.
   =========================================================================== */
.encargo-icon svg,
.encargo-icon .ico-chispa {
  transform-box: fill-box;
  transform-origin: center;
}

/* El lecho dorado tambien respira: acompana al icono sin competir con el. */
.iconos-animados .encargo-option .encargo-icon {
  animation: encargo-lecho 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes encargo-lecho {
  0% {
    transform: scale(0.7);
    opacity: 0.2;
  }
  55% {
    transform: scale(1.14);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* -- MANDADO: el recibo se presenta y el sello ESTAMPA -------------------- */
.iconos-animados .encargo-option[data-tipo="mandado"] .encargo-icon svg {
  animation: ico-recibo 1.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.iconos-animados .encargo-option[data-tipo="mandado"] .ico-chispa {
  animation: ico-sello 1.7s ease-out both;
}

@keyframes ico-recibo {
  0% {
    transform: rotate(-20deg) translateY(5px) scale(0.82);
  }
  40% {
    transform: rotate(12deg) translateY(-3px) scale(1.12);
  }
  65% {
    transform: rotate(-6deg) translateY(0) scale(1);
  }
  82% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg) translateY(0) scale(1);
  }
}

@keyframes ico-sello {
  0%,
  40% {
    transform: scale(0);
    opacity: 0;
  }
  55% {
    transform: scale(3.4);
    opacity: 1;
  }
  70% {
    transform: scale(0.8);
    opacity: 1;
  }
  85% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* -- COMIDA: el recipiente se asienta y el vapor SUBE --------------------- */
.iconos-animados .encargo-option[data-tipo="comida"] .encargo-icon svg {
  animation: ico-recipiente 1.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.iconos-animados .encargo-option[data-tipo="comida"] .ico-chispa {
  animation: ico-vapor 1.8s ease-out both;
}

@keyframes ico-recipiente {
  0% {
    transform: translateY(10px) scale(0.76);
  }
  45% {
    transform: translateY(-4px) scale(1.16);
  }
  70% {
    transform: translateY(2px) scale(0.95);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes ico-vapor {
  0% {
    transform: translateY(6px) scaleY(0.4);
    opacity: 0;
  }
  25% {
    transform: translateY(1px) scaleY(1.2);
    opacity: 1;
  }
  55% {
    transform: translateY(-7px) scaleY(1.4);
    opacity: 0;
  }
  56% {
    transform: translateY(5px) scaleY(0.6);
    opacity: 0;
  }
  80% {
    transform: translateY(-2px) scaleY(1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }
}

/* -- TIENDA: la bolsa se BALANCEA colgando del asa -----------------------
   El origen va arriba a proposito: una bolsa pivota desde donde se agarra. */
.iconos-animados .encargo-option[data-tipo="tienda"] .encargo-icon svg {
  transform-origin: center top;
  animation: ico-bolsa 1.8s ease-in-out both;
}

.iconos-animados .encargo-option[data-tipo="tienda"] .ico-chispa {
  animation: ico-asa 1.8s ease-out both;
}

@keyframes ico-bolsa {
  0% {
    transform: rotate(-26deg);
  }
  22% {
    transform: rotate(20deg);
  }
  42% {
    transform: rotate(-14deg);
  }
  60% {
    transform: rotate(9deg);
  }
  76% {
    transform: rotate(-5deg);
  }
  90% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes ico-asa {
  0% {
    transform: translateY(-6px) scaleX(0.5);
    opacity: 0;
  }
  35% {
    transform: translateY(2px) scaleX(1.25);
    opacity: 1;
  }
  70% {
    transform: translateY(-1px) scaleX(0.92);
  }
  100% {
    transform: translateY(0) scaleX(1);
    opacity: 1;
  }
}

/* -- PAQUETE: la caja CAE y se asienta; la arista se marca al final ------- */
.iconos-animados .encargo-option[data-tipo="paquete"] .encargo-icon svg {
  animation: ico-caja 1.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.iconos-animados .encargo-option[data-tipo="paquete"] .ico-chispa {
  animation: ico-arista 1.7s ease-out both;
}

@keyframes ico-caja {
  0% {
    transform: translateY(-16px) rotate(22deg) scale(0.8);
  }
  38% {
    transform: translateY(3px) rotate(-10deg) scale(1.12);
  }
  56% {
    transform: translateY(-6px) rotate(5deg) scale(0.96);
  }
  74% {
    transform: translateY(2px) rotate(-3deg) scale(1.04);
  }
  88% {
    transform: translateY(-1px) rotate(1deg);
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes ico-arista {
  0%,
  35% {
    transform: scaleY(0);
    opacity: 0;
  }
  55% {
    transform: scaleY(1.7);
    opacity: 1;
  }
  75% {
    transform: scaleY(0.85);
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* -- EL ESCALONADO VA AL FINAL, Y NO ES ORDEN CAPRICHOSO ------------------
   `animation: nombre 1s ... both` es un ATAJO: reescribe TODAS las
   subpropiedades, `animation-delay` incluida, y la deja en 0. Las reglas por
   tipo de encargo usan ese atajo y tienen la misma especificidad que estas,
   asi que si los retardos se declaran ANTES, el atajo los borra y las cuatro
   animaciones arrancan juntas. Medido por CDP en el telefono: los 12
   `animation-delay` salian a 0 ms. Van despues a proposito. */
.iconos-animados .encargo-option:nth-child(1) .encargo-icon,
.iconos-animados .encargo-option:nth-child(1) .encargo-icon svg,
.iconos-animados .encargo-option:nth-child(1) .ico-chispa {
  animation-delay: 0ms;
}

.iconos-animados .encargo-option:nth-child(2) .encargo-icon,
.iconos-animados .encargo-option:nth-child(2) .encargo-icon svg,
.iconos-animados .encargo-option:nth-child(2) .ico-chispa {
  animation-delay: 150ms;
}

.iconos-animados .encargo-option:nth-child(3) .encargo-icon,
.iconos-animados .encargo-option:nth-child(3) .encargo-icon svg,
.iconos-animados .encargo-option:nth-child(3) .ico-chispa {
  animation-delay: 300ms;
}

.iconos-animados .encargo-option:nth-child(4) .encargo-icon,
.iconos-animados .encargo-option:nth-child(4) .encargo-icon svg,
.iconos-animados .encargo-option:nth-child(4) .ico-chispa {
  animation-delay: 450ms;
}

/* Quien pide menos movimiento en el sistema no recibe ninguno: la hoja sigue
   abriendose igual, los iconos aparecen ya colocados. */
@media (prefers-reduced-motion: reduce) {
  .iconos-animados .encargo-icon,
  .iconos-animados .encargo-icon svg,
  .iconos-animados .ico-chispa {
    animation: none !important;
  }
}

/* ── GSD-789 · LA RUTA COMO UN SOLO BLOQUE ────────────────────────────
   Fuera las etiquetas "Recoger en" / "Entregar en": el placeholder ya lo dice y
   ocupaban dos filas. Las sustituye una viñeta con el mismo código de color que
   el mapa (verde = origen, rojo = destino), dentro del campo.

   OJO al `top` de la mira: `.btn-pick-location` la ancla en `top:25px` porque
   asume una etiqueta encima (0,72 rem + 8 px de margen). Sin etiqueta hay que
   recentrarla o asoma por debajo del campo — es el mismo defecto que la
   corrección v30.144.213 documenta en `service-selector.css`. */
.encargo-ruta {
  margin-top: 14px;
}

.encargo-ruta .encargo-punto {
  margin-top: 10px;
}

.encargo-ruta .encargo-punto:first-child {
  margin-top: 0;
}

/* Sitio para la viñeta. Los sub-campos de referencia lo llevan también aunque no
   tengan punto: así el texto de los cuatro campos de la ruta arranca alineado. */
.encargo-ruta .modern-input {
  padding-left: 34px;
}

.encargo-dot {
  position: absolute;
  left: 13px;
  top: 50%;
  margin-top: -4.5px; /* GSD-804: centrada en el campo, no a ojo */
  width: 9px;
  height: 9px;
  border-radius: 50%;
  pointer-events: none;
}

.dot-origen {
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.16);
}

.dot-entrega {
  background: #f87171;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.16);
}

/* GSD-804: centrada por cálculo, igual que «Mi ubicación» (antes `top: 7px`). */
.encargo-ruta .encargo-punto .btn-pick-location {
  top: 50%;
  transform: translateY(-50%);
}

/* El `:hover/:active` genérico (service-selector.css) pone `scale(0.94)` y borraría
   el centrado: el pin saltaría al tocarlo. */
.encargo-ruta .encargo-punto .btn-pick-location:hover,
.encargo-ruta .encargo-punto .btn-pick-location:focus-visible,
.encargo-ruta .encargo-punto .btn-pick-location:active {
  transform: translateY(-50%) scale(0.94);
}

/* GSD-800 — «Mi ubicación» en los DOS puntos. Va a la izquierda de la mira y el
   campo reserva sitio para ambos; la mira conserva su `top: 7px` de arriba. */
.encargo-ruta .encargo-punto .modern-input {
  padding-right: 112px;
  /* GSD-804: el margen de 8 px del campo alargaba el grupo (46 px para un campo de
     38) y todo lo centrado con `top: 50%` caía 4 px abajo. Se pasa al grupo. */
  margin-bottom: 0;
}

.encargo-ruta .encargo-punto {
  padding-bottom: 0;
  margin-bottom: 28px; /* 20 del .input-group + los 8 que tenía el campo */
}

/* GSD-804: centrada en el campo (antes `top: 9px` fijo la dejaba caída hacia abajo)
   y amarilla sólida, como pidió el usuario. */
.encargo-yo {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  height: 28px;
  line-height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd950 0%, #f5c518 55%, #e0ac00 100%);
  color: #1a1400;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(245, 197, 24, 0.3);
}

.encargo-yo:active {
  transform: translateY(-50%) scale(0.95);
}

.encargo-yo.is-on {
  background: #ffd700;
  color: #111;
}

/* La nota del precio: mismo tamaño que la etiqueta pero sin su peso, para que se
   lea como aclaración y no como parte del rótulo. */
.encargo-nota {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}

/* ── CAMPOS ──────────────────────────────────────────────────────────────────
   `.encargo-punto` reserva sitio a la derecha para el botón de la mira, igual
   que hace el grupo de `#destination-input` en el formulario de mototaxi. */
.encargo-punto {
  position: relative;
  margin-top: 14px;
}

/* Sub-campo: cuelga del de arriba, así que no lleva etiqueta propia ni el aire
   que separa un bloque de otro. */
.encargo-sub {
  position: relative;
  margin-top: 8px;
}

.encargo-textarea {
  resize: none;
  min-height: 76px;
  line-height: 1.4;
  padding-top: 12px;
  font-family: inherit;
  /* Medido por CDP: `.modern-input` deja los INPUT en blanco al 10 % (los del
     formulario de mototaxi incluidos) pero al TEXTAREA le llegaba dorado al 20 %
     desde otra regla. La diferencia no la había decidido nadie — el campo salía
     resaltado por herencia, no por criterio — y un resalte accidental le dice al
     usuario que ese campo es especial cuando no lo es más que los otros dos
     obligatorios. Se fija explícito al mismo valor que sus hermanos. */
  border-color: rgba(255, 255, 255, 0.1);
}

/* ── PLEGABLE DE OPCIONALES ──────────────────────────────────────────────────
   La investigación de GSD-765 señala los formularios largos antes de cotizar
   como causa medida de abandono. Lo que el mensajero necesita para arrancar
   queda arriba y a la vista; el resto entra sólo si el usuario lo pide. */
.encargo-mas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.encargo-chevron {
  font-size: 1.3rem;
  color: rgba(255, 215, 0, 0.6);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.encargo-mas.is-open .encargo-chevron {
  transform: rotate(90deg);
}

.encargo-extra {
  padding-top: 4px;
  /* El bloque plegable termina en el aviso legal del dinero, y debajo arranca
     "Tu oferta". Sin esta separación las dos cosas se leen como un solo párrafo
     y el aviso —que existe para verse— se confunde con el pie del precio. */
  padding-bottom: 10px;
}

/* ── QUIÉN PONE LA PLATA ─────────────────────────────────────────────────────
   Dos botones y no un desplegable: son dos opciones, y un desplegable de dos
   esconde la mitad de la decisión detrás de un toque extra. */
.encargo-paga {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.encargo-paga-op {
  padding: 11px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.encargo-paga-op.is-on {
  background: rgba(255, 215, 0, 0.12);
  border-color: rgba(255, 215, 0, 0.4);
  color: #ffd700;
  font-weight: 600;
}

/* ── EL AVISO DEL DINERO NO ES LETRA PEQUEÑA DECORATIVA ──────────────────────
   GSD-765, marco legal: lo que mantiene a MOBIX fuera del perímetro de la
   Superintendencia Financiera es que la plata no pasa por la plataforma. Y la
   SIC ya resolvió que un descargo enterrado en los términos no vale: tiene que
   decirse donde ocurre la decisión. Por eso vive junto al campo del valor. */
.encargo-aviso {
  margin: 10px 2px 0 2px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.45);
}

/* ── ERROR DEL FORMULARIO ────────────────────────────────────────────────────
   `.status-msg` ya existe y ya se ve; esto sólo le da el color de "esto no va a
   seguir hasta que lo arregles". */
#encargo-status.is-error {
  color: #ff6b6b;
}

/* ── PANTALLAS CORTAS ────────────────────────────────────────────────────────
   Android Go con teclado abierto deja muy poca altura útil. */
@media (max-height: 700px) {
  .encargo-option {
    padding: 12px 11px;
    gap: 6px;
  }

  .encargo-icon {
    width: 38px;
    height: 38px;
  }

  .encargo-desc {
    display: none;
  }
}

/* ── LA PILA DE TARJETAS CRECE PARA UN ENCARGO ───────────────────────────────
   `.mox-card-stack` mide 520 px fijos (premium-stack.css:29), calculados para un
   viaje de mototaxi: origen, destino, precio y dos botones. Un encargo añade el
   tipo, la plata y la instrucción, y con ese tope el bloque se cortaba a mitad de
   la palabra «PAGO» — medido en el teléfono, no supuesto.

   El `min()` es lo que hace que esto sea seguro: en un aparato alto crece a 620 px
   y en uno de gama baja nunca pasa del 76 % de la ventana, así que los dos botones
   siguen cabiendo. Un 620 px a secas los habría empujado fuera de pantalla justo
   en los teléfonos donde vive esta app. */
.mox-card-stack.has-encargo {
  height: min(620px, 76vh);
}

/* ── LA TARJETA DE ESPERA, CUANDO LO QUE SE ESPERA ES UN ENCARGO ─────────────
   GSD-772. `is-encargo` la pone `mox-encargo-form.js` junto a `is-searching` y la
   quita el mismo módulo al acabar la búsqueda.

   Los dos rótulos de la tarjeta de espera son `content:` de pseudo-elementos en
   `service-selector.css`, escritos para un viaje de mototaxi: «Tarifa propuesta»
   y «Destino propuesto». Para un encargo dicen la cosa equivocada — el destino es
   una ENTREGA, y «tarifa» no distingue entre lo que se le paga al mensajero y lo
   que vale lo que va a comprar. Se sustituyen por las palabras EXACTAS del
   formulario donde el cliente acabó de decidirlo, que es todo el arreglo: el
   mismo dato no puede llamarse de dos maneras en dos pantallas seguidas. */
.request-panel.is-searching.is-encargo .price-selector::before {
  content: "Tu oferta por el servicio · toca +/− para reenviar";
}

.request-panel.is-searching.is-encargo
  .input-group:has(#destination-input)::before {
  content: "Entregar en";
}

/* La plata del encargo mientras se espera. No es un tercer precio: es el mismo
   dato que el mensajero verá en su tarjeta, con las mismas palabras y contado
   desde el lado del cliente. Va debajo de la oferta, en gris y pequeño, porque
   informa —no se toca ni se decide aquí. */
.encargo-espera-plata {
  /* Nace OCULTA. Sólo se ve dentro de la tarjeta de espera de un encargo: si la
     búsqueda no llega a arrancar (el guard anti-búsqueda-fantasma de
     `activarEstadoBuscando` puede abortarla), este párrafo se quedaría colgado
     en medio del formulario del mototaxi. Un elemento condicional nace
     restringido y es el estado quien lo enciende, no al revés. */
  display: none;
  margin: -4px 0 12px 0;
  text-align: center;
  font-family: "Outfit", sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.55);
}

.request-panel.is-searching.is-encargo .encargo-espera-plata {
  display: block;
}

/* ── EL AVISO DEL CUPO DIARIO ────────────────────────────────────────────
   GSD-774. Se cuelga justo encima del interruptor de disponibilidad, que es donde
   el mensajero ya mira para saber si está trabajando. Lo inyecta
   `mox-cupo-encargos.js`; aquí sólo está su aspecto.

   NACE OCULTO y lo enciende `is-on`. Un aviso que se pinta primero y se esconde
   después parpadea en cada arranque, y además empujaría el interruptor un
   instante — justo el control que el usuario está buscando con el dedo. */
.mox-cupo-aviso {
  display: none;

  /* FIJO, como todo el HUD flotante de esta app. La primera versión era estática
     y se coló en el flujo normal: el DOM decía `display:block` y la medición por
     CDP daba `y=755` en una ventana de 834 — debajo del mapa nativo y del banner,
     o sea invisible en el aparato mientras todas las sondas decían que estaba
     bien. `#driver-availability-container` es `position: fixed; z-index: 1020`,
     así que un hermano en flujo no se apoya en él para nada.

     El `bottom` NO se escribe aquí: lo calcula `mox-cupo-encargos.js` desde el
     rectángulo REAL del interruptor. Clavar un número habría sido copiar dos
     constantes ajenas —la altura del interruptor y `--ui-map-controls-bottom`,
     que a su vez depende de la altura de la barra de anuncios— y quedarse
     desalineado en cuanto cualquiera de las dos cambie. */
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1019; /* justo debajo del interruptor, con el que no se solapa */
  width: max-content;
  max-width: min(92vw, 420px);
  padding: 9px 14px;
  background: rgba(20, 20, 24, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 215, 0, 0.22);
  border-radius: 14px;
  font-family: "Outfit", sans-serif;
  text-align: center;
  line-height: 1.35;
  pointer-events: none; /* informa; no se toca */
}

.mox-cupo-aviso.is-on {
  display: block;
}

.mox-cupo-aviso strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffd700;
}

.mox-cupo-aviso span {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Sin cupo el asunto deja de ser un aviso y pasa a ser un motivo: el borde rojo
   es lo que distingue «te quedan 2» de «hoy ya no te va a sonar». */
.mox-cupo-aviso.is-agotado {
  border-color: rgba(255, 107, 107, 0.4);
}

.mox-cupo-aviso.is-agotado strong {
  color: #ff8a8a;
}

/* Mismo respeto que el resto de la interfaz flotante: mientras se arrastra el
   mapa, se aparta. Copia la regla que ya cumple `.driver-availability-container`. */
body.user-is-interacting .mox-cupo-aviso {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* GSD-804 — «Tu oferta al mensajero (aparte de lo que cueste el mandado)» partía en
   dos líneas alineadas a la izquierda y chocaba con el selector de precio. Centrado,
   un poco más pequeño, y la aclaración en su propia línea, más discreta. Se acota con
   `:has(#encargo-precio)` para no tocar el formulario de mototaxi. */
.price-section:has(#encargo-precio) > label {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.3;
  margin-bottom: 10px;
}

.price-section:has(#encargo-precio) > label .encargo-nota {
  display: block;
  font-size: 0.7rem;
  margin-top: 2px;
}