/* Yatá - hoja única, sin compilación.

   LENGUAJE VISUAL: iOS nativo.

   Nada de fuentes web. En iOS, -apple-system ES San Francisco, la tipografía
   del sistema: ya está cargada, cuesta cero bytes y es exactamente lo que hace
   que una pantalla se lea como parte del teléfono y no como una página. Cargar
   Nunito habría sido pagar 18 KB por parecerse menos a lo que se quiere
   parecer.

   Las convenciones que se siguen, porque son las que el ojo reconoce sin
   pensarlo:
     · Fondo gris agrupado, tarjetas blancas encima. iOS no pone sombra a las
       tarjetas de formulario: las separa por color de fondo.
     · Listas agrupadas con esquinas sólo arriba y abajo del grupo, y filas
       divididas por un pelo de 0.5 px que arranca en el texto, no en el borde.
     · Título grande alineado a la izquierda, 34 px, muy negrita.
     · Barra superior translúcida con desenfoque.
     · Control segmentado para elegir entre dos cosas.
     · Azul de marca como tinte, en vez del azul del sistema.
     · Zonas seguras respetadas: el notch arriba y la barra de inicio abajo. */

:root{
  /* marca */
  --azul:#176BFF; --azul-hondo:#0B4FCC; --rosa:#FF4FA3;
  /* grises de iOS (modo claro) */
  --fondo:#F2F2F7;            /* systemGroupedBackground */
  --tarjeta:#FFFFFF;          /* secondarySystemGroupedBackground */
  --tinta:#000000;            /* label */
  --suave:rgba(60,60,67,.60); /* secondaryLabel */
  --tenue:rgba(60,60,67,.30); /* tertiaryLabel */
  --pelo:rgba(60,60,67,.29);  /* separator */
  --relleno:rgba(118,118,128,.12); /* tertiarySystemFill: campos, segmentos */
  --rojo:#FF3B30; --verde:#34C759; --ambar:#FF9500;
  --r:12px; --r-grande:14px; --r-xl:20px;
  --barra:rgba(249,249,249,.82);

  /* UN COLOR POR SERVICIO. No es adorno: con cuatro servicios el color es lo
     que dice de un vistazo qué estás mirando, antes de leer nada. Teal para
     el paseo y no verde, porque el verde ya significa "completada" en los
     estados y dos cosas distintas del mismo color se confunden. */
  --sv-limpieza:#176BFF; --sv-ninos:#E8438B;
  --sv-paseo:#0E9AA7;    --sv-plomero:#E07C00;

  /* Profundidad. Tres escalones y no doce: una sombra por cada altura real
     que hay en la pantalla -lo que descansa, lo que flota, lo que se levanta-
     y no una por componente. */
  --sombra-1:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
  --sombra-2:0 4px 10px rgba(16,24,40,.07), 0 1px 3px rgba(16,24,40,.05);
  --sombra-3:0 12px 28px rgba(16,24,40,.12), 0 4px 8px rgba(16,24,40,.05);
  --aro:inset 0 0 0 .5px rgba(16,24,40,.06);
  --curva-muelle:cubic-bezier(.34,1.4,.5,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --azul:#0A84FF; --azul-hondo:#409CFF; --rosa:#FF6FB4;
    --fondo:#000000; --tarjeta:#1C1C1E; --tinta:#FFFFFF;
    --suave:rgba(235,235,245,.60); --tenue:rgba(235,235,245,.30);
    --pelo:rgba(84,84,88,.65); --relleno:rgba(118,118,128,.24);
    --rojo:#FF453A; --verde:#30D158; --ambar:#FF9F0A;
    --barra:rgba(30,30,32,.82);
    /* En oscuro los mismos colores se apagan: hay que subirles la luz o
       desaparecen contra el negro. */
    --sv-limpieza:#4C9AFF; --sv-ninos:#FF6FB4;
    --sv-paseo:#2FC4D2;    --sv-plomero:#FFA829;
    --sombra-1:0 1px 2px rgba(0,0,0,.5);
    --sombra-2:0 4px 12px rgba(0,0,0,.55);
    --sombra-3:0 14px 32px rgba(0,0,0,.6);
    --aro:inset 0 0 0 .5px rgba(255,255,255,.07);
  }
}

/* A MANO. El bloque de arriba sigue al sistema; éste gana cuando la persona
   elige. Son los mismos valores a propósito y no una variable compartida:
   duplicar veinte líneas es feo, pero un @media no se puede "activar" desde
   JavaScript, y la alternativa -escribir los colores con JS- deja la pantalla
   en blanco un instante al cargar. */
:root[data-tema="oscuro"]{
    --azul:#0A84FF; --azul-hondo:#409CFF; --rosa:#FF6FB4;
    --fondo:#000000; --tarjeta:#1C1C1E; --tinta:#FFFFFF;
    --suave:rgba(235,235,245,.60); --tenue:rgba(235,235,245,.30);
    --pelo:rgba(84,84,88,.65); --relleno:rgba(118,118,128,.24);
    --rojo:#FF453A; --verde:#30D158; --ambar:#FF9F0A;
    --barra:rgba(30,30,32,.82);
    /* En oscuro los mismos colores se apagan: hay que subirles la luz o
       desaparecen contra el negro. */
    --sv-limpieza:#4C9AFF; --sv-ninos:#FF6FB4;
    --sv-paseo:#2FC4D2;    --sv-plomero:#FFA829;
    --sombra-1:0 1px 2px rgba(0,0,0,.5);
    --sombra-2:0 4px 12px rgba(0,0,0,.55);
    --sombra-3:0 14px 32px rgba(0,0,0,.6);
    --aro:inset 0 0 0 .5px rgba(255,255,255,.07);
  }}


*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  /* Un lavado de color muy tenue arriba, donde está la cabecera, y gris
     agrupado el resto. Plano se lee como una hoja de formulario; con esto se
     lee como una aplicación, sin llegar a ser un fondo de colores. */
  background:var(--fondo);
  background-image:
    radial-gradient(120% 42% at 50% -8%, rgba(23,107,255,.10), transparent 62%),
    radial-gradient(90% 34% at 92% 2%, rgba(255,79,163,.07), transparent 60%);
  background-attachment:fixed;
  color:var(--tinta);
  font:17px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:-.01em;
}
.envoltura{max-width:620px;margin:0 auto;
  padding:0 16px calc(64px + env(safe-area-inset-bottom));}

/* ---------- barra superior translúcida ---------- */
/* hidden gana SIEMPRE.
   La regla del navegador para [hidden] es display:none, pero vive en la hoja
   del navegador y cualquier clase nuestra con display la pisa sin avisar. Así
   apareció la ficha del saldo en la pantalla de entrada, marcada como oculta
   en el HTML y dibujada igual, porque .saldo trae display:flex. Esto lo corta
   de raíz para todo lo que venga después. */
[hidden]{display:none !important}

.barra{position:sticky;top:0;z-index:30;
  background:var(--barra); -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--pelo);
  /* En horizontal, el iPhone mete la muesca por el lado: sin esto el
     engranaje se esconde debajo del borde redondeado de la pantalla. */
  padding:calc(8px + env(safe-area-inset-top))
          max(16px, env(safe-area-inset-right)) 8px
          max(16px, env(safe-area-inset-left))}
.barra .adentro{max-width:620px;margin:0 auto;display:flex;align-items:center;gap:10px}
/* El logotipo empuja, y todo lo demás se va al borde derecho.
   Antes el empujón lo daba el lema con margin-left:auto — pero el lema se
   esconde por debajo de 560 px, así que en un teléfono el empujón
   desaparecía con él y el saldo, el idioma y el engranaje se quedaban
   apelotonados a la izquierda con un hueco a la derecha. Puesto aquí
   funciona haya lema o no. */
.marca{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.marca img{height:26px;width:auto;display:block}
.barra small{color:var(--suave);font-size:13px}
.barra a{color:var(--azul);text-decoration:none;font-size:15px}

/* ---------- tipografía de iOS ---------- */
h1{font-size:34px;line-height:1.12;font-weight:700;letter-spacing:-.026em;
   margin:22px 0 6px;text-wrap:balance}
h2{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:28px 0 8px}
h3{font-size:17px;font-weight:600;margin:18px 0 6px}
.sub{color:var(--suave);font-size:15px;line-height:1.4;margin:0 0 20px}
.pista{font-size:13px;line-height:1.36;color:var(--suave);margin:7px 4px 0}

/* ---------- listas agrupadas: el patrón de Ajustes ---------- */
.tarjeta{background:var(--tarjeta);border-radius:var(--r-xl);
  padding:18px;margin:0 0 16px;overflow:hidden;
  box-shadow:var(--sombra-1),var(--aro)}
.tarjeta.plana{background:transparent;padding:0;box-shadow:none}
.grupo{background:var(--tarjeta);border-radius:var(--r-xl);overflow:hidden;margin:0 0 16px;
  box-shadow:var(--sombra-1),var(--aro)}
.grupo > *{position:relative}
/* el pelo divisorio arranca donde arranca el texto, como en iOS */
.grupo > * + *::before{content:"";position:absolute;left:16px;right:0;top:0;
  height:.5px;background:var(--pelo)}

/* ---------- campos ---------- */
label{display:block;font-size:13px;font-weight:400;color:var(--suave);
  margin:0 0 6px;letter-spacing:0}
input,select,textarea{
  /* box-sizing explícito. El reset global con * no alcanza a los controles de
     formulario en todos los navegadores, y sin esto el ancho es 100% MÁS los
     28 px de relleno: el campo de la calle se salía 10 px por la derecha de
     su tarjeta. Medido, no supuesto. */
  box-sizing:border-box;
  width:100%;max-width:100%;padding:12px 14px;font-size:17px;font-family:inherit;
  color:var(--tinta);
  background:var(--relleno);border:0;border-radius:10px;letter-spacing:-.01em;
  -webkit-appearance:none;appearance:none}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul);outline-offset:0}
textarea{min-height:82px;resize:vertical;line-height:1.4}
select{background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),
                       linear-gradient(135deg,var(--suave) 50%,transparent 50%);
  background-position:calc(100% - 19px) 20px, calc(100% - 14px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.campo{margin:0 0 16px}
.fila{display:flex;gap:12px}
.fila>*{flex:1}

/* ---------- botones ---------- */
button,.boton{display:block;width:100%;padding:16px;font-size:17px;font-weight:650;
  font-family:inherit;letter-spacing:-.012em;color:#fff;
  /* Un degradado de un punto y medio, no un arcoíris: lo justo para que el
     botón tenga volumen en vez de parecer un rectángulo pintado. Y la sombra
     con el color del propio botón, que es lo que hace que parezca que está
     sobre la página en vez de dentro de ella. */
  background:linear-gradient(180deg, var(--azul) 0%, var(--azul-hondo) 100%);
  box-shadow:0 6px 16px rgba(23,107,255,.30), inset 0 1px 0 rgba(255,255,255,.18);
  border:0;border-radius:15px;cursor:pointer;text-align:center;text-decoration:none}
button:active,.boton:active{transform:scale(.975);
  box-shadow:0 2px 8px rgba(23,107,255,.28), inset 0 1px 0 rgba(255,255,255,.14)}
button[disabled]{opacity:.35}
button.secundario{background:var(--relleno);color:var(--azul);box-shadow:none;
  font-weight:600}
button.secundario:active{box-shadow:none}
button.peligro{background:transparent;color:var(--rojo);box-shadow:none;font-weight:600}
button.peligro:active{box-shadow:none}
button.chico,button.texto,.quitar,.idioma,.engranaje,.saldo,.atras,.wa-boton,
.tel-boton,.enviar,.zona-cab .todo{box-shadow:none}
button.chico{width:auto;padding:8px 15px;font-size:15px;display:inline-block;
  background:var(--relleno);color:var(--azul);border-radius:9px}
button.texto{background:none;color:var(--azul);font-weight:400;padding:10px}

/* ---------- control segmentado (medio día / día completo) ---------- */
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px}
.opciones.dos{background:var(--relleno);border-radius:10px;padding:2px;
  grid-template-columns:1fr 1fr;gap:2px}
.opciones.dos .opcion{background:transparent;border:0;border-radius:8px;
  padding:12px 8px;box-shadow:none}
.opciones.dos .opcion[aria-pressed="true"]{background:var(--tarjeta);
  box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
/* Tres caben en una fila del teléfono si el texto es corto. Mismo segmentado
   que el de dos, sólo que más estrecho. */
.opciones.tres{background:var(--relleno);border-radius:10px;padding:2px;
  grid-template-columns:repeat(3,1fr);gap:2px}
.opciones.tres .opcion{background:transparent;border:0;border-radius:8px;
  padding:12px 4px;box-shadow:none}
.opciones.tres .opcion[aria-pressed="true"]{background:var(--tarjeta);
  box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
.opciones.tres .opcion b{font-size:14px;letter-spacing:-.01em}
.opciones.tres .opcion span{font-size:11px;line-height:1.25;display:block}
.opciones.tres .opcion svg{width:23px;height:23px;margin-bottom:6px}
/* Cuatro: dos filas de dos. En una fila quedarían a 85 px y el nombre no
   cabe; en dos filas se lee y el dedo acierta. */
.opciones.cuatro{background:var(--relleno);border-radius:10px;padding:2px;
  grid-template-columns:1fr 1fr;gap:2px}
.opciones.cuatro .opcion{background:transparent;border:0;border-radius:8px;
  padding:13px 6px;box-shadow:none}
.opciones.cuatro .opcion[aria-pressed="true"]{background:var(--tarjeta);
  box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
.opciones.cuatro .opcion b{font-size:14.5px}
.opciones.cuatro .opcion span{font-size:11.5px}
.opciones.cuatro .opcion svg{width:24px;height:24px;margin-bottom:6px}

/* ---------- las figuras de oficio ----------
   Elegir servicio es la primera decisión de la pantalla, así que deja de ser
   un control segmentado y pasa a ser cuatro tarjetas con la figura grande.
   El fondo circular va DEBAJO de la figura, que sale por arriba del círculo:
   ese desbordamiento es lo que hace que no parezca una foto de carnet. */
#tipos{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:none;padding:0}
#tipos .opcion{background:var(--tarjeta);border-radius:var(--r-xl);
  padding:10px 8px 14px;box-shadow:var(--sombra-1),var(--aro);
  display:flex;flex-direction:column;align-items:center;text-align:center}
/* Grandes de verdad. El original es de 512 px y la figura tiene cara, ropa y
   herramientas: a 96 px eso se pierde y el dibujo sólo aporta color. A 140 se
   ve de qué va cada oficio, que es justo lo que hay que decidir aquí. El
   fichero servido son 240 px, o sea 240/140 = 1,7x: nítido en pantallas
   normales y casi de sobra en las de densidad doble, sin bajarse medio mega. */
.figura{display:block;width:100%;height:132px;position:relative;margin-bottom:2px}
.figura::before{content:"";position:absolute;left:50%;bottom:6px;width:108px;height:108px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 35%, rgba(23,107,255,.22), rgba(23,107,255,.06) 70%)}
.figura img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:auto;height:140px;object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(16,24,40,.24));
  transition:transform 260ms var(--curva-muelle), filter 200ms ease}
@media (max-width:360px){
  .figura{height:112px}.figura img{height:118px}
  .figura::before{width:92px;height:92px}
}
#tipos .opcion b{font-size:15px;line-height:1.2}
#tipos .opcion .sub{font-size:12px;color:var(--suave);line-height:1.3;
  display:block;margin-top:2px}
/* el fondo de cada uno con su color */
#tipos .opcion[data-sv="ninos"] .figura::before{
  background:radial-gradient(circle at 50% 35%, rgba(232,67,139,.24), rgba(232,67,139,.07) 70%)}
#tipos .opcion[data-sv="paseo"] .figura::before{
  background:radial-gradient(circle at 50% 35%, rgba(14,154,167,.26), rgba(14,154,167,.08) 70%)}
#tipos .opcion[data-sv="plomero"] .figura::before{
  background:radial-gradient(circle at 50% 35%, rgba(224,124,0,.26), rgba(224,124,0,.08) 70%)}
/* sin elegir, apagadas; elegida, a todo color y un poco más grande */
#tipos .opcion:not([aria-pressed="true"]) img{filter:saturate(.55) opacity(.72)
  drop-shadow(0 4px 8px rgba(16,24,40,.14))}
#tipos .opcion[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--azul),var(--sombra-2)}
#tipos .opcion[aria-pressed="true"] img{transform:translateX(-50%) scale(1.08)}
#tipos .opcion[data-sv="ninos"][aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--sv-ninos),var(--sombra-2)}
#tipos .opcion[data-sv="paseo"][aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--sv-paseo),var(--sombra-2)}
#tipos .opcion[data-sv="plomero"][aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--sv-plomero),var(--sombra-2)}
@media (prefers-reduced-motion: reduce){ .figura img{transition:none} }

/* Cada servicio con su color cuando está elegido. Con cuatro, el color es lo
   que dice de un vistazo qué estás mirando antes de leer nada. */
.opcion[data-sv="limpieza"][aria-pressed="true"] svg,
.opcion[data-sv="limpieza"][aria-pressed="true"] b{color:var(--sv-limpieza)}
.opcion[data-sv="ninos"][aria-pressed="true"] svg,
.opcion[data-sv="ninos"][aria-pressed="true"] b{color:var(--sv-ninos)}
.opcion[data-sv="paseo"][aria-pressed="true"] svg,
.opcion[data-sv="paseo"][aria-pressed="true"] b{color:var(--sv-paseo)}
.opcion[data-sv="plomero"][aria-pressed="true"] svg,
.opcion[data-sv="plomero"][aria-pressed="true"] b{color:var(--sv-plomero)}

/* El muelle al elegir. Es el gesto que más se repite en esta pantalla, y un
   cambio instantáneo no confirma nada: el rebote sí. */
.opcion{transition:transform 220ms var(--curva-muelle),
                   background-color 160ms ease, box-shadow 160ms ease}
.opcion:active{transform:scale(.96)}
.opcion[aria-pressed="true"]{transform:scale(1)}
@media (prefers-reduced-motion: reduce){ .opcion{transition:none} }

/* Lo que hay que decir de un servicio y de ningún otro: que el precio del
   plomero es la mano de obra, por ejemplo. */
.nota-servicio{display:flex;align-items:flex-start;gap:8px;margin-top:14px;
  background:rgba(255,149,0,.12);color:var(--ambar);border-radius:12px;
  padding:11px 13px;font-size:13.5px;line-height:1.4}
.nota-servicio .icono{margin-top:1px;flex:0 0 auto}
/* Mientras se le pregunta al mapa. Dos segundos de nada es lo que hace que
   alguien toque el botón otra vez. */
.buscando{color:var(--suave)}
.buscando::after{content:"";display:inline-block;width:11px;height:11px;
  margin-left:7px;vertical-align:-1px;border-radius:50%;
  border:2px solid var(--tenue);border-top-color:var(--azul);
  animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .buscando::after{animation:none} }
.opcion{border:0;background:var(--tarjeta);border-radius:var(--r);padding:16px 10px;
  text-align:center;cursor:pointer}
.opcion svg{width:26px;height:26px;display:block;margin:0 auto 8px;color:var(--suave)}
.opcion b{display:block;font-size:15px;font-weight:600;margin-bottom:1px}
.opcion span{font-size:13px;color:var(--suave)}
.opcion[aria-pressed="true"] svg,.opcion[aria-pressed="true"] b{color:var(--azul)}

/* ---------- fila con chevron ---------- */
.cuando{display:flex;align-items:center;gap:12px;width:100%;background:var(--tarjeta);
  border:0;border-radius:var(--r-grande);padding:15px 16px;cursor:pointer;
  text-align:left;color:var(--tinta);font-size:17px;font-family:inherit;font-weight:400}
.cuando svg{width:21px;height:21px;color:var(--azul);flex:0 0 auto}
.cuando .txt{flex:1}
.cuando .flecha{color:var(--tenue);font-size:19px;font-weight:600}
.cuando-campos{display:none;gap:12px;margin-top:12px}
.cuando-campos.abierto{display:flex}
.cuando-campos>*{flex:1}

/* ---------- precio ---------- */
.precio,.precio-editor{background:var(--tarjeta);border:0;border-radius:var(--r-grande);
  padding:16px;margin:16px 0}
.precio .total{font-size:34px;font-weight:700;letter-spacing:-.03em}
.precio .detalle{font-size:13px;color:var(--suave);margin-top:2px}
.monto{display:flex;align-items:center;gap:12px;margin-top:6px}
.monto .rd{font-size:22px;font-weight:600;color:var(--suave)}
.monto input{font-size:30px;font-weight:700;padding:6px 12px;text-align:right;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;background:var(--relleno)}
.monto button{width:38px;height:38px;padding:0;font-size:23px;flex:0 0 auto;
  background:var(--relleno);color:var(--azul);border-radius:50%;line-height:1}
.sugerencia{font-size:13px;color:var(--suave);margin-top:10px;line-height:1.4}
.sugerencia b{color:var(--tinta);font-weight:600}

/* ---------- píldoras de estado ---------- */
.estado{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;
  font-weight:600;background:var(--relleno);color:var(--suave);letter-spacing:0}
.estado.solicitado{background:rgba(255,149,0,.16);color:var(--ambar)}
.estado.asignada,.estado.en_camino,.estado.trabajando{
  background:rgba(23,107,255,.14);color:var(--azul)}
.estado.completada,.estado.pagada{background:rgba(52,199,89,.16);color:var(--verde)}
.estado.cancelada{background:rgba(255,59,48,.14);color:var(--rojo)}

/* ---------- filas de lista ---------- */
.item{display:flex;gap:12px;align-items:center;padding:13px 16px;background:var(--tarjeta)}
.item:first-child{border-radius:var(--r-xl) var(--r-xl) 0 0}
.item:last-child{border-radius:0 0 var(--r-xl) var(--r-xl)}
.item:only-child{border-radius:var(--r-xl)}
.tarjeta.plana .item:first-child{box-shadow:var(--aro)}
.tarjeta.plana{box-shadow:none}
.tarjeta.plana > .item{box-shadow:var(--aro)}
.item + .item{box-shadow:inset 0 .5px 0 var(--pelo)}
.item .cuerpo{flex:1;min-width:0}
.item .titulo{font-weight:600;font-size:16px;letter-spacing:-.01em}
.item .meta{font-size:14px;color:var(--suave);margin-top:1px}
.codigo{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-weight:600;letter-spacing:.04em}

/* ---------- avisos ---------- */
.aviso{padding:13px 15px;border-radius:var(--r);font-size:15px;margin:0 0 16px;line-height:1.38}
.aviso.malo{background:rgba(255,59,48,.12);color:var(--rojo)}
.aviso.bien{background:rgba(52,199,89,.14);color:var(--verde)}
.aviso.ojo{background:rgba(255,149,0,.14);color:var(--ambar)}

/* ---------- disponibilidad ---------- */
.dispo{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:var(--r);
  font-size:15px;margin:16px 0 0;line-height:1.38}
.dispo.hay{background:rgba(23,107,255,.12);color:var(--azul)}
.dispo.pocas{background:rgba(255,149,0,.14);color:var(--ambar)}
.dispo.ninguna{background:rgba(255,59,48,.12);color:var(--rojo)}
.dispo .punto{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}

/* ---------- ofertas ---------- */
.oferta,.trabajo-abierto{background:var(--tarjeta);border:0;border-radius:var(--r-xl);
  padding:17px;margin:0 0 12px;box-shadow:var(--sombra-1),var(--aro)}
/* La que recomendamos: un aro azul y algo de altura, para que se lea como
   levantada del resto y no sólo como subrayada. */
.oferta.mejor{box-shadow:inset 0 0 0 2px var(--azul), var(--sombra-3);
  position:relative}
.oferta.mejor::before{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(23,107,255,.055), transparent 46%)}
.oferta > *{position:relative}
.oferta .cab{display:flex;align-items:center;gap:12px}
.oferta .linea-monto{display:flex;align-items:center;gap:8px}
.oferta .monto-of{font-size:24px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.oferta .quien{font-weight:600;font-size:16px;line-height:1.25;margin-top:1px}
.oferta .msj{background:var(--relleno);border-radius:10px;padding:11px;margin-top:10px;
  font-size:15px;color:var(--suave)}
.etiq-barata{background:var(--azul);color:#fff;padding:2px 9px;border-radius:999px;
  font-size:12px;font-weight:600}
.aviso-suelo{background:rgba(255,149,0,.14);color:var(--ambar);border-radius:10px;
  padding:10px 12px;font-size:13px;margin-top:10px;line-height:1.36}
.repu{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--suave);margin-top:2px}
.repu b{color:var(--tinta);font-weight:600}
.repu .nueva{background:var(--relleno);color:var(--suave);padding:1px 8px;
  border-radius:999px;font-size:12px;font-weight:600}
.repu .revisar{background:rgba(255,59,48,.14);color:var(--rojo);padding:1px 8px;
  border-radius:999px;font-size:12px;font-weight:600}

/* ---------- calificar ---------- */
.calificar{background:var(--tarjeta)}
.estrellas{display:flex;gap:8px;justify-content:center;margin:14px 0 4px}
.estrellas button{width:auto;padding:0;background:none;font-size:36px;line-height:1;
  color:var(--tenue);border-radius:0}
.estrellas button.on{color:#FFCC00}
.pregunta{text-align:center;font-weight:600;font-size:17px;margin:18px 0 10px}
.sino{display:flex;gap:10px}
.sino button.no{background:var(--relleno);color:var(--rojo)}
.sino button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--azul)}
.sino button.no[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--rojo)}
.etiquetas{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.etiqueta{padding:8px 14px;border:0;border-radius:999px;font-size:15px;
  background:var(--relleno);color:var(--tinta);cursor:pointer;user-select:none}
.etiqueta[aria-pressed="true"]{background:var(--azul);color:#fff}

/* ---------- línea de tiempo ---------- */
.tiempo{list-style:none;margin:10px 0 0;padding:0}
.tiempo li{position:relative;padding:0 0 16px 22px;border-left:2px solid var(--pelo);font-size:15px}
.tiempo li:last-child{border-left-color:transparent;padding-bottom:0}
.tiempo li::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;
  border-radius:50%;background:var(--tenue)}
.tiempo li.hecho::before{background:var(--azul)}
.tiempo li small{display:block;color:var(--suave);font-size:13px}

/* ---------- varios ---------- */
.vacio{text-align:center;color:var(--suave);padding:38px 18px;font-size:15px;
  line-height:1.45;background:var(--tarjeta);border-radius:var(--r-xl);
  box-shadow:var(--sombra-1),var(--aro)}

/* Las cifras del panel. Número grande arriba y etiqueta pequeña debajo, con
   una pizca de color de fondo: son lo primero que se mira al abrir y merecen
   pesar más que una fila de texto. */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0 0 18px}
.cifra{background:var(--tarjeta);border:0;border-radius:var(--r-xl);padding:16px;
  box-shadow:var(--sombra-1),var(--aro);position:relative;overflow:hidden}
.cifra::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%, rgba(23,107,255,.07), transparent 60%)}
.cifra b{display:block;font-size:26px;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.cifra span{font-size:13px;color:var(--suave)}
.tabla{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto;
  white-space:nowrap;background:var(--tarjeta);border-radius:var(--r-grande);padding:4px 16px}
.tabla th{text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--suave);padding:10px 14px 8px 0;border-bottom:.5px solid var(--pelo)}
.tabla td{padding:11px 14px 11px 0;border-bottom:.5px solid var(--pelo);
  font-variant-numeric:tabular-nums}
.tabla tr:last-child td{border-bottom:0}
.wa{color:var(--azul);text-decoration:none;font-weight:500}
.idioma{width:auto;margin-left:8px;padding:5px 12px;font-size:14px;font-weight:400;
  background:var(--relleno);color:var(--azul);border-radius:999px}
.navs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.navlink{background:var(--tarjeta);color:var(--azul);padding:8px 14px;border-radius:999px;
  text-decoration:none;font-size:15px}

/* ---------- bienvenida ----------
   La primera pantalla no es un formulario, es la decisión. Quien llega está
   sopesando meter a una desconocida en su casa, y un campo de teléfono solo no
   responde a eso. El icono grande, una frase y tres motivos: verificada con
   cédula, pagas al final, el precio lo pones tú. Después se pide el número. */
/* La primera pantalla. El icono sobre un halo de su propio color: en iOS eso
   es lo que separa una aplicación de una página web con un logo arriba. El
   halo se dibuja con un pseudo-elemento y no con una imagen - cero bytes. */
.bienvenida{text-align:center;padding:34px 0 10px;position:relative}
.bienvenida::before{content:"";position:absolute;left:50%;top:-40px;
  width:340px;height:340px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle at 50% 42%,
    rgba(23,107,255,.24) 0%, rgba(255,79,163,.12) 38%, transparent 68%);
  filter:blur(6px)}
.bienvenida > *{position:relative}
.bienvenida .icono{width:96px;height:96px;border-radius:24px;display:block;
  margin:0 auto 22px;
  box-shadow:0 18px 40px rgba(23,107,255,.34), 0 4px 10px rgba(23,107,255,.20),
             inset 0 1px 0 rgba(255,255,255,.25)}
.bienvenida h1{font-size:33px;margin:0 0 10px;letter-spacing:-.03em}
.bienvenida .sub{margin:0 auto 24px;max-width:30ch}
.motivos{text-align:left;background:var(--tarjeta);border-radius:var(--r-xl);
  overflow:hidden;margin:0 0 24px;box-shadow:var(--sombra-2),var(--aro)}
.motivo{display:flex;gap:14px;align-items:center;padding:14px 16px;position:relative}
.motivo + .motivo::before{content:"";position:absolute;left:58px;right:0;top:0;
  height:.5px;background:var(--pelo)}
.motivo .ico{width:36px;height:36px;border-radius:11px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(160deg, var(--azul), var(--azul-hondo));
  box-shadow:0 3px 8px rgba(23,107,255,.28)}
.motivo .ico svg{width:18px;height:18px}
.motivo .ico.rosa{background:linear-gradient(160deg,#FF6FB4,#E8438B);
  box-shadow:0 3px 8px rgba(232,67,139,.30)}
.motivo .ico.verde{background:linear-gradient(160deg,#4ED37A,#1FA34C);
  box-shadow:0 3px 8px rgba(31,163,76,.28)}
.motivo b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.motivo span{font-size:14px;color:var(--suave);line-height:1.35}

.boton-descarga{display:inline-block;background:var(--azul);color:#fff;
  text-decoration:none;font-weight:600;font-size:16px;padding:13px 20px;
  border-radius:var(--r-boton,12px);text-align:center}
.boton-descarga:active{opacity:.85}

/* Abajo del todo y por encima de todo. Abajo porque el pulgar está ahí y
   porque tapar la cabecera esconde el saldo y el idioma; ámbar y no rojo
   porque no se ha roto nada, sólo falta señal. */
.sin-red{position:fixed;left:12px;right:12px;z-index:90;
  bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--ambar);color:#fff;font-size:14.5px;font-weight:600;
  text-align:center;padding:11px 14px;border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.18)}

/* La foto que se acaba de tomar, para poder mirarla antes de seguir. Nadie
   manda una foto de su cédula a ciegas, y menos una de su propia cara. */
.retrato-previo{display:none;margin:0 0 12px}
.retrato-previo:not(:empty){display:block}
.retrato-previo img{width:150px;height:150px;object-fit:cover;border-radius:50%;
  display:block;margin:0 auto;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.retrato-previo.cuadrado img{width:100%;height:auto;max-height:230px;
  object-fit:contain;border-radius:12px;background:var(--relleno)}

/* Lo que le han comprobado a alguien. Pequeñas y juntas, debajo del nombre:
   tienen que verse de un vistazo sin competir con el precio. */
.insignias{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.insignia{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;
  font-weight:600;padding:3px 8px;border-radius:999px;line-height:1.25}
.insignia .icono{width:13px;height:13px;vertical-align:0}
.insignia.azul{background:rgba(23,107,255,.12);color:var(--azul)}
.insignia.verde{background:rgba(52,199,89,.16);color:var(--verde)}

/* La tarjeta de volver a pedir a la misma persona. Centrada y con su cara
   grande: la pregunta es sobre ELLA, no sobre un servicio. */
.repetir{text-align:center}
.repetir .retrato.grande{margin:0 auto;width:84px;height:84px}
.repetir h2{font-size:20px}
.repetir .tira{justify-content:flex-start}
.dos-botones{display:grid;grid-template-columns:1fr 1.3fr;gap:10px}

/* ---------- las tiras de día y hora ----------
   Se deslizan con el pulgar, como los carretes de fotos de iOS. El scroll con
   ajuste (snap) hace que siempre quede una pastilla entera a la vista en vez
   de media, que es lo que separa esto de una lista que se arrastra. */
.tira{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.tira::-webkit-scrollbar{display:none}
.pastilla{width:auto;flex:0 0 auto;scroll-snap-align:start;
  min-width:58px;padding:9px 12px;border-radius:14px;
  background:var(--tarjeta);color:var(--tinta);box-shadow:var(--sombra-1),var(--aro);
  display:flex;flex-direction:column;align-items:center;gap:1px;
  font-weight:400;font-size:13px;transition:transform 200ms var(--curva-muelle),
    background-color 140ms ease, color 140ms ease}
.pastilla .dia{font-size:11.5px;color:var(--suave);text-transform:uppercase;
  letter-spacing:.04em}
.pastilla b{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.pastilla .ampm{font-size:11px;color:var(--suave)}
.pastilla[aria-pressed="true"]{
  background:linear-gradient(180deg,var(--azul),var(--azul-hondo));color:#fff;
  box-shadow:0 6px 14px rgba(23,107,255,.32);transform:scale(1.04)}
.pastilla[aria-pressed="true"] .dia,
.pastilla[aria-pressed="true"] .ampm{color:rgba(255,255,255,.85)}
.pastilla:active{transform:scale(.94)}
.tira.horas .pastilla{min-width:62px}
@media (prefers-reduced-motion: reduce){ .pastilla{transition:none} }

/* ---------- ajustes ---------- */
.engranaje{width:36px;height:36px;flex:0 0 auto;padding:0;margin:0;border-radius:50%;
  background:var(--relleno);color:var(--suave);display:flex;align-items:center;
  justify-content:center}
.engranaje .icono{width:19px;height:19px}
.engranaje:active{transform:scale(.92)}

/* Un dato que se enseña y no se toca. Parece un campo para que se lea en la
   misma línea que los demás, pero sin el fondo de "aquí se escribe". */
.dato-fijo{display:flex;align-items:center;gap:8px;padding:12px 14px;
  border:1.5px solid var(--pelo);border-radius:12px;font-size:16px;
  color:var(--tinta);background:transparent}
.dato-fijo .icono{color:var(--suave)}

.lista-sectores{max-height:190px;overflow:auto;border:1.5px solid var(--linea);
  border-radius:12px;padding:10px}
.lista-sectores label{display:flex;gap:9px;align-items:center;font-weight:400;
  color:var(--tinta);margin:0 0 8px;font-size:15px}
.lista-sectores input{width:auto;margin:0}
.lista-sectores .zona + .zona{margin-top:14px;padding-top:12px;
  border-top:.5px solid var(--pelo)}
.zona-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 9px}
.zona-cab b{font-size:13px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--suave)}
.zona-cab .todo{width:auto;margin:0;padding:4px 10px;font-size:12.5px;font-weight:600;
  background:var(--relleno);color:var(--azul);border-radius:999px}

/* El botón de tomar la foto lleva la cámara dentro, así que necesita fila. */
#cfg-tomar{display:flex;align-items:center;justify-content:center;gap:9px}
#cfg-tomar .icono{width:21px;height:21px}

/* ---------- iconos ----------
   Heredan el color de donde caigan, así que el mismo dibujo sirve en una fila
   gris y en un botón azul sin duplicar nada. */
.icono{width:20px;height:20px;flex:0 0 auto;vertical-align:-4px}
.icono.chico{width:16px;height:16px;vertical-align:-3px}

/* El cuadradito de color que lleva un icono dentro, para las filas de lista.
   Redondeado y tenue: tiene que ayudar a saltar la línea, no competir con el
   texto que hay al lado. */
.marco{width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;background:var(--relleno);
  color:var(--suave)}
.marco.azul{background:rgba(23,107,255,.13);color:var(--azul)}
.marco.verde{background:rgba(52,199,89,.16);color:var(--verde)}
.marco.ambar{background:rgba(255,149,0,.17);color:var(--ambar)}
.marco.rojo{background:rgba(255,59,48,.14);color:var(--rojo)}

/* ---------- pasos ---------- */
.pasos{display:flex;gap:6px;justify-content:center;margin:0 0 22px}
.pasos i{width:7px;height:7px;border-radius:50%;background:var(--tenue);
  transition:all 260ms var(--curva)}
.pasos i.ahora{background:var(--azul);width:22px;border-radius:4px}
.pasos i.hecho{background:var(--azul)}

/* ---------- código en casillas ----------
   Seis casillas en vez de un campo. Se lee de un vistazo cuántas cifras van y
   cuántas faltan, que en un código dictado en voz alta o leído de otra
   pantalla es justo lo que uno pierde. */
.casillas{display:flex;gap:8px;justify-content:center;margin:8px 0 4px;direction:ltr}
.casillas input{width:46px;height:58px;padding:0;text-align:center;font-size:26px;
  font-weight:600;border-radius:var(--r);background:var(--relleno);
  font-variant-numeric:tabular-nums;caret-color:var(--azul)}
.casillas input:focus{outline:2px solid var(--azul);background:var(--tarjeta)}
.casillas input.llena{background:var(--tarjeta);box-shadow:inset 0 0 0 1.5px var(--azul)}
@media (max-width:380px){ .casillas input{width:42px;height:54px;font-size:23px} }

/* Marca de perfil inventado, para la consola. Roja y sin sutileza: confundir
   uno de estos con una limpiadora de verdad es mandar a una clienta a esperar
   a nadie. */
.etiq-demo{background:rgba(255,59,48,.14);color:var(--rojo);font-size:10.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 7px;border-radius:5px;margin-left:7px;vertical-align:middle}

/* El regalo, en la pantalla de entrada. Verde y no azul: el azul de la marca
   está en todos los botones, y esto tiene que leerse como algo que se recibe,
   no como una cosa más que tocar. */
.regalo{display:inline-block;background:rgba(52,199,89,.15);color:var(--verde);
  font-weight:650;font-size:14.5px;padding:7px 15px;border-radius:999px;
  margin-top:12px;letter-spacing:-.01em}

/* ---------- el saldo ----------
   En la barra, encima de todo y en todas las pantallas. Un crédito que sólo
   se ve en la pantalla de reservar es un crédito del que nadie se acuerda. */
.saldo{width:auto;margin:0;padding:6px 12px 6px 10px;font-size:14px;font-weight:400;
  background:linear-gradient(180deg, rgba(23,107,255,.13), rgba(23,107,255,.08));
  color:var(--tinta);border-radius:999px;
  box-shadow:inset 0 0 0 .5px rgba(23,107,255,.20);
  display:flex;align-items:baseline;gap:1px;flex:0 0 auto}
.saldo .rd{font-size:11.5px;color:var(--suave);font-weight:600}
.saldo b{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.saldo.vacio{background:linear-gradient(180deg,rgba(255,149,0,.22),rgba(255,149,0,.14));
  box-shadow:inset 0 0 0 .5px rgba(255,149,0,.32)}
.saldo.vacio b,.saldo.vacio .rd{color:var(--ambar)}
.saldo:active{transform:scale(.94)}
/* En un teléfono manda el saldo: el lema es adorno y el saldo no. El corte va
   en 560 y no en 430 porque con la ficha puesta el lema parte en dos líneas
   mucho antes de quedarse sin sitio, y una barra de dos líneas empuja la
   página entera hacia abajo. */
@media (max-width:560px){ .barra small{display:none} }

.saldo-cab{display:flex;align-items:center;gap:13px}
.saldo-cab .marco{width:40px;height:40px;border-radius:12px}
.saldo-cab .icono{width:23px;height:23px}
.saldo-grande{font-size:40px;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.05}
.saldo-grande span{font-size:21px;color:var(--suave);margin-right:2px;font-weight:600}
.saldo-pie{color:var(--suave);font-size:14.5px;margin-top:4px}
.cargos{margin-top:14px;border-top:.5px solid var(--pelo)}
.cargo{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 0;border-bottom:.5px solid var(--pelo);font-size:15px}
.cargo:last-child{border-bottom:0;padding-bottom:0}
.cargo span{display:block;color:var(--suave);font-size:13px;margin-top:1px}
.cargo .icono{color:var(--tenue);margin-right:3px}
.cargo b{font-variant-numeric:tabular-nums}
.cargo.devuelto{color:var(--suave)}
.cargo.devuelto b:last-child{text-decoration:line-through}

/* ---------- el recibo ----------
   Dos cifras, separadas: lo que le pones en la mano a ella y lo que cobra
   Yatá. Enterarse del cargo después es la forma más rápida de que alguien no
   vuelva, así que va antes de publicar y otra vez antes de escoger. */
.recibo{background:var(--tarjeta);border-radius:var(--r-grande);padding:14px 16px;
  margin-top:14px}
.recibo .linea{display:flex;justify-content:space-between;align-items:center;
  gap:12px;font-size:15px;padding:5px 0}
.recibo .linea span{display:flex;align-items:center;gap:8px;color:var(--suave)}
.recibo .linea.total span{color:var(--tinta)}
.recibo .linea b{font-variant-numeric:tabular-nums;font-weight:600}
.recibo .linea.total{border-top:.5px solid var(--pelo);margin-top:6px;padding-top:10px;
  font-size:16.5px}
.recibo .linea.total b{font-weight:700}
.nota-saldo{margin:9px 0 0;font-size:13px;color:var(--suave);line-height:1.4}
.nota-saldo.sin{color:var(--ambar)}
/* Texto pelado, sin caja: con fondo se confundía con el recuadro del recado
   de ella, y dos cajas grises iguales seguidas no dicen nada. */
.desglose{color:var(--suave);font-size:13px;margin-top:9px;padding:0 2px}

/* La estimación de un "ahora". Se dice "podría" y no "llega a las 13:00":
   nadie ha aceptado todavía el trabajo, y prometer una hora que depende de que
   alguien diga que sí es la forma más rápida de quedar mal el primer día. */
.ahora-nota{display:flex;align-items:flex-start;gap:8px;background:var(--relleno);
  border-radius:12px;padding:11px 13px;margin-top:14px;font-size:14px;
  color:var(--suave);line-height:1.4}
.ahora-nota .icono{margin-top:1px}
/* La hora entera o nada: "1:00 p. m." partido en dos líneas por la mitad se
   lee como dos cosas distintas. */
.ahora-nota b{white-space:nowrap;color:var(--tinta)}
.tenue{color:var(--tenue)}

/* ---------- contacto ----------
   Los dos botones grandes y separados: uno es WhatsApp y el otro es llamar, y
   confundirlos con el pulgar mientras se va en una moto es lo que pasa cuando
   se ponen pegados y pequeños. 44px de lado, que es lo que mide un dedo. */
.contacto-cab{font-size:12.5px;font-weight:600;color:var(--suave);
  text-transform:uppercase;letter-spacing:.05em;margin:16px 0 8px;
  padding-top:14px;border-top:.5px solid var(--pelo)}
.contacto{display:flex;align-items:center;gap:12px}
.contacto .retrato{width:44px;height:44px}
.contacto .marco{width:44px;height:44px;border-radius:13px}
.contacto .quien{flex:1;min-width:0}
.contacto .quien b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.contacto .quien span{display:block;font-size:13px;color:var(--suave);margin-top:1px}
.wa-boton,.tel-boton{width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;text-decoration:none}
.wa-boton{background:#25D366;color:#fff}
.wa-boton svg{width:25px;height:25px}
.tel-boton{background:var(--relleno);color:var(--azul)}
.tel-boton svg{width:21px;height:21px}
.wa-boton:active,.tel-boton:active{transform:scale(.92)}

/* ---------- chat ----------
   Burbujas, porque es la forma que todo el mundo ya sabe leer. Lo suyo a la
   izquierda y en gris, lo tuyo a la derecha y en azul: no hay que explicarlo.
   El hilo tiene altura fija y scroll propio - si creciera, empujaría el botón
   de "voy en camino" fuera de la pantalla justo el día que hace falta. */
.chat{margin-top:14px;border-top:.5px solid var(--pelo);padding-top:12px}
.hilo{max-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:7px;
  padding:2px 0 8px;-webkit-overflow-scrolling:touch}
.hilo-vacio{color:var(--tenue);font-size:13.5px;text-align:center;padding:16px 6px;
  display:flex;flex-direction:column;align-items:center;gap:7px}
.hilo-vacio .icono{width:26px;height:26px}
.burbuja{max-width:82%;padding:9px 13px;border-radius:17px;font-size:15px;
  line-height:1.35;word-wrap:break-word;display:flex;align-items:flex-end;gap:7px}
.burbuja i{font-style:normal;font-size:10.5px;opacity:.62;flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.burbuja.suya{align-self:flex-start;background:var(--relleno);color:var(--tinta);
  border-bottom-left-radius:5px}
.burbuja.mia{align-self:flex-end;background:var(--azul);color:#fff;
  border-bottom-right-radius:5px}
.escribir{display:flex;gap:8px;align-items:center}
.escribir input{flex:1;margin:0;border-radius:999px;padding:11px 16px;font-size:16px}
.enviar{width:42px;height:42px;flex:0 0 auto;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.enviar svg{width:21px;height:21px}
.sin-leer{background:var(--rojo);color:#fff;border-radius:999px;padding:2px 8px;
  font-size:11.5px;font-weight:700;margin-left:7px}

/* ---------- el trabajo en marcha ----------
   La tarjeta que se mira treinta veces mientras se espera a alguien. Todo lo
   que hay que saber de un vistazo y desde lejos: quién, en qué punto va,
   cuánto se le paga. */
/* La tarjeta del trabajo en marcha es la que más se mira: se abre la
   aplicación treinta veces esperando a alguien. Se lleva el color del
   servicio en una banda superior, que además dice de un vistazo qué es. */
.marcha{position:relative;overflow:hidden}
.marcha::before{content:"";position:absolute;left:0;right:0;top:0;height:96px;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(23,107,255,.10), transparent)}
.marcha[data-sv="ninos"]::before{background:linear-gradient(180deg,rgba(232,67,139,.10),transparent)}
.marcha[data-sv="paseo"]::before{background:linear-gradient(180deg,rgba(14,154,167,.12),transparent)}
.marcha[data-sv="plomero"]::before{background:linear-gradient(180deg,rgba(224,124,0,.12),transparent)}
.marcha > *{position:relative}
.marcha .cab{display:flex;gap:14px;align-items:center}
.marcha .meta{color:var(--suave);font-size:13.5px;margin-top:3px}
.marcha .estado-vivo{font-size:15px;color:var(--azul);font-weight:600;margin-top:1px}

/* Cuatro tramos, no cuatro etiquetas con un número: el recorrido de la tarde
   se lee de un golpe sin tener que leerlo. */
.riel{display:flex;gap:5px;margin:15px 0 6px}
.riel i{flex:1;height:6px;border-radius:3px;background:var(--relleno)}
.riel i.hecho{background:linear-gradient(90deg, var(--azul), var(--azul-hondo))}
.riel i.ahora{background:linear-gradient(90deg, var(--azul), var(--azul-hondo));
  animation:riel-vivo 1.8s ease-in-out infinite;
  box-shadow:0 0 0 3px rgba(23,107,255,.14)}
@keyframes riel-vivo{0%,100%{opacity:1}50%{opacity:.38}}
.riel-textos{display:flex;gap:5px;font-size:11.5px;color:var(--tenue)}
.riel-textos span{flex:1;text-align:center;letter-spacing:.01em}
.riel-textos span.on{color:var(--suave);font-weight:600}

/* Cambió algo mientras mirabas. Un destello corto, una vez, y se va: si se
   quedara encendido dejaría de significar "acaba de pasar". */
.destella{animation:destello 1.5s ease-out 1}
@keyframes destello{
  0%  {box-shadow:0 0 0 0 rgba(23,107,255,.55)}
  100%{box-shadow:0 0 0 16px rgba(23,107,255,0)}
}
@media (prefers-reduced-motion: reduce){
  .riel i.ahora,.destella{animation:none}
}

/* ---------- quitar ----------
   La × de deshacer. Discreta: tiene que estar ahí cuando se busca y no pedir
   el dedo cuando no. Área de toque de 40px aunque el signo sea pequeño -por
   debajo de eso, en un teléfono, se falla y se toca la fila. */
.quitar{width:40px;height:40px;flex:0 0 auto;background:none;border:0;padding:0;
  margin:0 -6px 0 4px;color:var(--suave);font-size:24px;line-height:1;
  border-radius:50%;font-weight:400}
.quitar:active{background:var(--relleno);color:var(--rojo)}
.item .quitar{align-self:center}

/* ---------- esperando ----------
   Un punto que late mientras no hay ofertas. Es la diferencia entre "esto se
   quedó pegado" y "siguen buscando": la misma pantalla, treinta segundos
   después, contada de dos maneras distintas. */
.esperando{display:flex;align-items:center;gap:10px;justify-content:center;
  color:var(--suave);font-size:14.5px;margin:16px 0 4px}
.pulso{width:9px;height:9px;border-radius:50%;background:var(--azul);flex:0 0 auto;
  animation:latir 1.7s ease-in-out infinite}
@keyframes latir{
  0%,100%{transform:scale(.75);opacity:.45}
  50%    {transform:scale(1.15);opacity:1}
}
@media (prefers-reduced-motion: reduce){ .pulso{animation:none;opacity:.7} }

/* ---------- atrás ----------
   Discreto y arriba del todo. Equivocarse de dirección y no poder volver es
   de las pocas cosas que obligan a recargar la aplicación entera. */
.atras{background:none;border:0;color:var(--suave);font-size:15px;font-weight:500;
  width:auto;padding:6px 2px;margin:0 0 6px;text-align:left;display:flex;
  align-items:center;gap:5px}
.atras:active{opacity:.55}

/* ---------- retrato ----------
   La cara al lado de la oferta no es adorno. El cliente está escogiendo a
   quién le abre la puerta de su casa, y una cara cambia esa decisión más que
   RD$200 de diferencia. Redondo y recortado para que una foto de carnet
   cualquiera quede decente sin pedirle a nadie que la encuadre. */
.retrato{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--relleno);box-shadow:0 2px 8px rgba(16,24,40,.16),
  inset 0 0 0 .5px rgba(16,24,40,.10)}
.retrato.grande{width:78px;height:78px;
  box-shadow:0 6px 18px rgba(16,24,40,.20), inset 0 0 0 .5px rgba(16,24,40,.10)}
.sin-foto{width:52px;height:52px;border-radius:50%;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;background:var(--relleno);
  color:var(--suave);font-weight:600;font-size:19px}

/* ---------- ubicación ---------- */
.mapa{display:none;height:230px;border-radius:var(--r-grande);overflow:hidden;
  margin:12px 0;background:var(--relleno)}
.mapa .leaflet-control-attribution{font-size:10px}
.ubicacion{display:flex;gap:10px;margin:0 0 4px}
.ubicacion button{flex:1;font-size:15px;padding:12px}
.coord{font-size:12px;color:var(--suave);font-variant-numeric:tabular-nums;
  margin:8px 4px 0;display:flex;align-items:center;gap:7px}
.coord .ok{color:var(--verde);font-weight:600}
.coord .ojo{color:var(--ambar);font-weight:600}

/* ============================================================ MOVIMIENTO
   Reglas que se siguen en todo el archivo, para que esto parezca una
   aplicación y no una colección de efectos:

   1. SÓLO transform Y opacity. Son las dos cosas que el navegador puede
      componer en la GPU sin recalcular la página. Animar width, top o margin
      obliga a rehacer el diseño en cada fotograma, y en un Android de gama
      baja -que es el teléfono de la mayoría de las limpiadoras- eso se ve como
      un tartamudeo.
   2. RÁPIDO. 150-260 ms. Lo que tarda más se siente lento a la tercera vez que
      lo ves, y aquí la gente reserva a menudo.
   3. UNA CURVA para todo, salvo donde se quiera un rebote.
   4. QUIEN PIDA MENOS MOVIMIENTO, NO LO TIENE. prefers-reduced-motion no es un
      detalle: hay gente a la que el movimiento le produce mareo, y el sistema
      operativo ya lo sabe. */
:root{
  --vel:200ms;
  --vel-lenta:320ms;
  --curva:cubic-bezier(.22,.61,.36,1);        /* salida suave, entrada decidida */
  --rebote:cubic-bezier(.34,1.56,.64,1);      /* pasa de largo y vuelve */
}

@keyframes sube      { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes entra     { from{opacity:0;transform:scale(.94)}       to{opacity:1;transform:none} }
@keyframes desliza   { from{opacity:0;transform:translateX(22px)} to{opacity:1;transform:none} }
@keyframes aparece   { from{opacity:0} to{opacity:1} }
@keyframes late      { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes brilla    { 0%{background-position:-420px 0} 100%{background-position:420px 0} }
@keyframes gira      { to{transform:rotate(360deg)} }
@keyframes chispea   { 0%{opacity:0;transform:scale(.3) rotate(-25deg)}
                       55%{opacity:1;transform:scale(1.15) rotate(6deg)}
                       100%{opacity:1;transform:scale(1) rotate(0)} }
@keyframes sello     { 0%{transform:scale(.2);opacity:0}
                       60%{transform:scale(1.12);opacity:1}
                       100%{transform:scale(1);opacity:1} }
@keyframes cae       { 0%{opacity:0;transform:translateY(-14px) rotate(0)}
                       12%{opacity:1}
                       100%{opacity:0;transform:translateY(150px) rotate(320deg)} }

/* ---------- las pantallas entran, no aparecen de golpe ---------- */
section[id^="paso-"]:not([hidden]),
#ofertas-recibidas:not([hidden]),
#mis-servicios:not([hidden]){ animation:sube var(--vel-lenta) var(--curva) both }

/* ---------- las listas entran escalonadas ----------
   El retraso lo pone el JavaScript en --i. Sin escalonar, diez tarjetas que
   aparecen a la vez son un parpadeo; escalonadas se leen como una lista que
   se va poniendo. Se corta a los ocho elementos: más allá, esperar es peor
   que aparecer. */
.tarjeta, .item, .oferta, .trabajo-abierto{
  animation:sube var(--vel) var(--curva) both;
  animation-delay:calc(min(var(--i,0),8) * 45ms);
}

/* ---------- botones: responden al dedo ---------- */
button,.boton{
  transition:transform 90ms var(--curva), box-shadow var(--vel) var(--curva),
             background-color var(--vel) var(--curva), opacity var(--vel) var(--curva);
}
button:not([disabled]):active,.boton:active{ transform:scale(.97) }
/* el hover vive todo junto al final del fichero, y sólo con ratón */

/* ---------- tarjetas que se pueden tocar ---------- */
.opcion{ transition:border-color 130ms var(--curva), background-color 130ms var(--curva),
                     transform 130ms var(--curva) }
.opcion:active{ transform:scale(.97) }
.opcion[aria-pressed="true"]{ animation:late 260ms var(--curva) }
.opcion svg{ transition:color 130ms var(--curva), transform 220ms var(--rebote) }
.opcion[aria-pressed="true"] svg{ transform:scale(1.14) }

.etiqueta{ transition:transform 120ms var(--curva), background-color 120ms var(--curva),
                       border-color 120ms var(--curva), color 120ms var(--curva) }
.etiqueta:active{ transform:scale(.94) }

/* ---------- estrellas ---------- */
.estrellas button{ transition:color 130ms var(--curva), transform 180ms var(--rebote) }
.estrellas button.on{ transform:scale(1.16) }

/* ---------- avisos ---------- */
.aviso{ animation:sube 260ms var(--curva) both }
.dispo{ animation:entra 260ms var(--curva) both }
.dispo .punto{ animation:late 1.9s ease-in-out infinite }

/* ---------- el precio, cuando cambia ---------- */
.precio-editor .monto input{ transition:transform 160ms var(--rebote) }
.precio-editor .monto input.cambia{ transform:scale(1.06) }

/* ---------- la pantalla de confirmación: el momento de la aplicación ----------
   Es el único sitio donde se gasta de verdad en movimiento. La persona acaba
   de soltar dinero y una llave de su casa a una desconocida; que la pantalla
   celebre un segundo no es adorno, es la señal de que salió bien. */
#paso-listo:not([hidden]) h1{ animation:sello 520ms var(--rebote) both }
#paso-listo:not([hidden]) .sub{ animation:sube 380ms var(--curva) 140ms both }
#paso-listo:not([hidden]) .tarjeta{ animation:sube 380ms var(--curva) 240ms both }
#paso-listo:not([hidden]) .codigo{ animation:entra 420ms var(--rebote) 380ms both }
.chispas{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:60 }
.chispa{ position:absolute; top:-16px; width:9px; height:9px; border-radius:2px;
  animation:cae 1900ms ease-in forwards }

/* ---------- esqueletos mientras carga ----------
   Un rectángulo que respira dice "viene algo"; una pantalla en blanco dice
   "se rompió". En una conexión móvil dominicana esa diferencia son segundos
   de duda. */
.esqueleto{ border-radius:12px; height:64px; margin:0 0 11px;
  background:linear-gradient(90deg, var(--pelo) 0%, var(--tarjeta) 46%, var(--pelo) 92%);
  background-size:420px 100%; animation:brilla 1.15s linear infinite }

/* ---------- el botón que está trabajando ---------- */
button.cargando{ color:transparent !important; position:relative; pointer-events:none }
button.cargando::after{ content:""; position:absolute; inset:0; margin:auto;
  width:19px; height:19px; border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%; animation:gira .62s linear infinite }
button.secundario.cargando::after{ border-color:rgba(23,107,255,.3); border-top-color:var(--azul) }

/* ---------- la cabecera ---------- */
.marca img{ animation:entra 420ms var(--rebote) both }
.idioma{ transition:border-color var(--vel) var(--curva), transform 110ms var(--curva) }
.idioma:active{ transform:scale(.94) }

/* ---------- foco visible, que el movimiento no se lo coma ---------- */
button:focus-visible,.opcion:focus-visible,.etiqueta:focus-visible{
  outline:3px solid var(--azul); outline-offset:2px }

/* ---------- y quien no quiera nada de esto ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important }
  .chispas{ display:none }
}


/* ============================================================ CON RATÓN
   Todo lo de aquí abajo va detrás de (hover:hover) y (pointer:fine), y no es
   una precaución de manual: en un teléfono, :hover SE QUEDA PEGADO después de
   tocar. Sin este candado, la tarjeta que acabas de elegir se queda levantada
   y con sombra hasta que toques otra cosa, y la aplicación parece rota justo
   en el aparato para el que está hecha.

   Lo que se busca no es que "brille" todo. Es que antes de hacer clic se
   sepa QUÉ va a pasar: lo que se levanta se puede pulsar, lo que se tiñe de
   rojo borra algo, lo que se desplaza un pelo hacia la izquierda es un
   "volver". El movimiento dice de qué tipo es cada cosa.

   Todo con transform y opacity, que no obligan al navegador a recalcular la
   página: en un Android de gama baja eso es la diferencia entre 60 y 20
   cuadros por segundo. */
@media (hover:hover) and (pointer:fine){

  /* --- el botón principal: se levanta y le pasa un brillo por encima ----
     El brillo es un pseudo-elemento que cruza; no hay imagen ni filtro, sólo
     un degradado que se desplaza. */
  button:not(.secundario):not(.peligro):not(.chico):not(.quitar):not(.texto):not([disabled]),
  .boton,.boton-descarga{ position:relative; overflow:hidden }
  button:not(.secundario):not(.peligro):not(.chico):not(.quitar):not(.texto):not([disabled])::after,
  .boton::after,.boton-descarga::after{
    content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
    transform:skewX(-18deg);pointer-events:none;
    background:linear-gradient(90deg, transparent,
               rgba(255,255,255,.28), transparent);
    transition:left 620ms cubic-bezier(.22,.9,.3,1)}
  button:not(.secundario):not(.peligro):not(.chico):not(.quitar):not(.texto):not([disabled]):hover::after,
  .boton:hover::after,.boton-descarga:hover::after{ left:120% }
  button:not(.secundario):not(.peligro):not(.chico):not(.quitar):not(.texto):not([disabled]):hover,
  .boton:hover,.boton-descarga:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(23,107,255,.38), inset 0 1px 0 rgba(255,255,255,.22)}

  button.secundario:hover{ background:rgba(23,107,255,.14) }
  button.peligro:hover{ background:rgba(255,59,48,.10) }
  button.chico:hover,.zona-cab .todo:hover{ background:rgba(23,107,255,.16);
    transform:translateY(-1px) }
  button.texto:hover{ opacity:.7 }

  /* --- las tarjetas de elegir: se levantan y el dibujo crece ---------- */
  .opcion:hover{ transform:translateY(-3px);
    box-shadow:0 10px 22px rgba(16,24,40,.14),var(--aro) }
  .opciones.dos .opcion:hover,.opciones.tres .opcion:hover,
  .opciones.cuatro .opcion:hover{ background:rgba(255,255,255,.55) }
  #tipos .opcion:hover img{ transform:translateX(-50%) scale(1.12) }
  #tipos .opcion[aria-pressed="true"]:hover img{ transform:translateX(-50%) scale(1.16) }
  .opcion:hover svg{ transform:scale(1.1) }

  /* --- las pastillas de día y hora ----------------------------------- */
  .pastilla:hover{ transform:translateY(-2px);
    box-shadow:0 8px 16px rgba(16,24,40,.16),var(--aro) }
  .pastilla[aria-pressed="true"]:hover{ transform:translateY(-2px) scale(1.04);
    box-shadow:0 10px 20px rgba(23,107,255,.40) }

  /* --- las filas de lista: se tiñen y avanzan un pelo ----------------- */
  /* Todas las filas, sin :has(). Este navegador puede no soportarlo, y una
     regla con un selector inválido se tira ENTERA sin avisar: la fila se
     quedaría muerta al ratón y nadie se enteraría. Y todas las filas de esta
     aplicación o llevan a algún sitio o tienen una × dentro, así que no hay
     ninguna que no deba responder. */
  .item:hover{ background:rgba(23,107,255,.055) }
  .item:hover .titulo{ transform:translateX(2px) }
  .item .titulo{ transition:transform 160ms var(--curva) }

  /* --- lo que borra se pone rojo ANTES de pulsarlo -------------------- */
  .quitar:hover{ background:rgba(255,59,48,.14);color:var(--rojo);
    transform:scale(1.12) }

  /* --- barra y cabecera ---------------------------------------------- */
  .idioma:hover{ background:rgba(23,107,255,.16);transform:translateY(-1px) }
  .engranaje:hover{ background:rgba(23,107,255,.14);color:var(--azul);
    transform:rotate(38deg) }
  .saldo:hover{ transform:translateY(-1px);
    box-shadow:inset 0 0 0 .5px rgba(23,107,255,.34),
               0 6px 14px rgba(23,107,255,.20) }
  .marca:hover img{ transform:scale(1.05) }
  .marca img{ transition:transform 200ms var(--curva-muelle) }

  /* --- "volver" se va hacia la izquierda, que es a donde lleva -------- */
  .atras:hover{ color:var(--azul);transform:translateX(-3px) }
  .atras{ transition:color 140ms ease, transform 160ms var(--curva) }

  /* --- contacto: WhatsApp y llamar ----------------------------------- */
  .wa-boton:hover{ transform:translateY(-2px) scale(1.05);
    box-shadow:0 8px 18px rgba(37,211,102,.45) }
  .tel-boton:hover{ transform:translateY(-2px) scale(1.05);
    background:rgba(23,107,255,.16) }
  .enviar:hover{ transform:translateY(-2px) scale(1.06);
    box-shadow:0 8px 18px rgba(23,107,255,.40) }

  /* --- calificar ------------------------------------------------------ */
  .estrellas button:hover{ transform:scale(1.28) rotate(-6deg);color:#FFB800 }
  .estrellas button{ transition:transform 180ms var(--curva-muelle), color 140ms ease }
  .etiqueta:hover{ transform:translateY(-2px);background:rgba(23,107,255,.14) }
  .sino button:hover{ transform:translateY(-2px) }

  /* --- enlaces -------------------------------------------------------- */
  a.wa:hover{ text-decoration:underline;text-underline-offset:3px }
  .cargo:hover{ background:rgba(23,107,255,.04) }
  .cargo{ transition:background-color 140ms ease;border-radius:8px;
    margin:0 -6px;padding-left:6px;padding-right:6px }

  /* --- las ofertas: la tarjeta entera responde, aunque el botón sea el
         que hace clic. Que se mueva confirma que se está mirando esa. --- */
  .oferta:hover{ transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(16,24,40,.14),var(--aro) }
  .oferta.mejor:hover{ box-shadow:inset 0 0 0 2px var(--azul),
    0 16px 34px rgba(23,107,255,.22) }
  .oferta,.item,.pastilla{ transition:transform 170ms var(--curva),
    box-shadow 170ms var(--curva), background-color 140ms ease }
}

/* Con el movimiento reducido no se mueve nada: sólo cambia el color, que es
   lo que hace falta para saber dónde está el ratón. */
@media (prefers-reduced-motion: reduce){
  @media (hover:hover) and (pointer:fine){
    button:hover,.boton:hover,.opcion:hover,.pastilla:hover,.quitar:hover,
    .engranaje:hover,.idioma:hover,.saldo:hover,.atras:hover,.wa-boton:hover,
    .tel-boton:hover,.enviar:hover,.estrellas button:hover,.etiqueta:hover,
    .oferta:hover,.marca:hover img{ transform:none !important }
    #tipos .opcion:hover img{ transform:translateX(-50%) !important }
    button::after,.boton::after,.boton-descarga::after{ display:none }
  }
}

/* Cómo llegar. Dos botones del mismo tamaño, uno al lado del otro: quien va
   de camino los toca con el pulgar y muchas veces sin mirar, así que son
   grandes y no comparten fila con nada más. Cada uno lleva el color de su
   aplicación, que es como se reconocen sin leer. */
.navegar{display:flex;gap:8px;margin-top:10px}
.nav-boton{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:11px 10px;border-radius:11px;font-size:14.5px;font-weight:600;
  text-decoration:none;color:#fff;letter-spacing:-.01em;
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease}
.nav-boton.maps{background:#1A73E8}
.nav-boton.waze{background:#33CCFF;color:#0B2B36}
.nav-boton svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){
  .nav-boton:hover{transform:translateY(-1px);filter:brightness(1.06);
    box-shadow:0 6px 16px rgba(0,0,0,.18)}
}
.nav-boton:active{transform:translateY(0) scale(.985)}

/* Zonas de trabajo: cuatro filas grandes, una por área. Antes eran 47
   casillas diminutas y quien se registraba marcaba tres a dedo en el
   teléfono, se cansaba, y luego no le llegaba casi ningún trabajo sin saber
   por qué. Cuatro filas se leen de un vistazo y se tocan sin apuntar. */
.zona-uno{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:8px;
  background:var(--relleno);border-radius:12px;cursor:pointer;
  transition:background .14s ease, transform .14s ease}
.zona-uno input{width:22px;height:22px;flex:0 0 auto;accent-color:var(--marca);margin:0}
.zona-uno span{display:flex;flex-direction:column;gap:2px;min-width:0}
.zona-uno b{font-size:16px;letter-spacing:-.01em}
.zona-uno small{color:var(--suave);font-size:13px}
@media (hover:hover) and (pointer:fine){
  .zona-uno:hover{background:var(--relleno-fuerte,var(--relleno));transform:translateX(2px)}
}
.zona-uno:active{transform:scale(.995)}

/* Atención extra: lo que el cliente quiere que se mire con calma.

   COMPACTO. Son veintidós cosas y tienen que caber sin que la pantalla se
   convierta en un formulario: pastillas pequeñas que fluyen en varias por
   fila, el grupo anunciado con una línea fina en vez de un bloque, y el
   conjunto entero encajado en un alto que se recorre de un vistazo.

   Y que se note al marcar. Marcar algo aquí es la única decisión de esta
   pantalla que no tiene consecuencia visible en ningún otro sitio, así que
   el aviso de que ha entrado tiene que estar en la pastilla misma: se
   rellena del color de la marca, sube un punto, y la palomita entra
   dibujándose. */
.extras-grupo{margin-bottom:11px}
.extras-grupo>b{display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;color:var(--suave);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.extras-grupo>b::after{content:"";flex:1;height:1px;background:var(--relleno)}
.extras-items{display:flex;flex-wrap:wrap;gap:6px}

.pastilla-check{position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px 7px 10px;background:var(--relleno);border-radius:999px;
  cursor:pointer;font-size:13.5px;font-weight:500;line-height:1.15;
  white-space:nowrap;user-select:none;
  transition:background .18s cubic-bezier(.2,.8,.3,1),
             color .18s ease,
             transform .18s cubic-bezier(.2,.8,.3,1),
             box-shadow .18s ease}
/* La casilla de verdad se esconde pero sigue ahí: es lo que oye el teclado y
   lo que leen los lectores de pantalla. El círculo de al lado es su dibujo. */
.pastilla-check input{position:absolute;opacity:0;width:0;height:0;margin:0}
.pastilla-check .tic{flex:0 0 auto;width:15px;height:15px;border-radius:50%;
  background:var(--papel);position:relative;
  transition:background .18s ease, transform .18s cubic-bezier(.2,.8,.3,1)}
/* La palomita, dibujada con dos lados de un cuadrado girado. Entra creciendo
   desde el centro, que es lo que hace que se note sin tener que parpadear. */
.pastilla-check .tic::after{content:"";position:absolute;left:5px;top:2px;
  width:3px;height:7px;border:solid var(--marca);border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);transform-origin:center;
  transition:transform .2s cubic-bezier(.2,1.5,.4,1)}

.pastilla-check.marcada{background:var(--marca);color:#fff;
  box-shadow:0 3px 10px rgba(23,107,255,.32)}
.pastilla-check.marcada .tic{background:#fff}
.pastilla-check.marcada .tic::after{transform:rotate(45deg) scale(1)}
.pastilla-check.apagada{opacity:.35;cursor:not-allowed}

@media (hover:hover) and (pointer:fine){
  .pastilla-check:hover{transform:translateY(-1.5px)}
  .pastilla-check:hover .tic{transform:scale(1.12)}
  .pastilla-check.marcada:hover{box-shadow:0 5px 14px rgba(23,107,255,.4)}
  .pastilla-check.apagada:hover{transform:none}
  .pastilla-check.apagada:hover .tic{transform:none}
}
.pastilla-check:active{transform:scale(.95)}
/* El teclado tiene que ver dónde está: la casilla real es invisible. */
.pastilla-check input:focus-visible + .tic{outline:2px solid var(--marca);
  outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .pastilla-check, .pastilla-check .tic, .pastilla-check .tic::after{
    transition-duration:.01ms}
}

/* Todo el bloque cabe en un alto que se recorre de un vistazo; si la lista
   creciera, se desliza dentro de su caja y no empuja el resto de la página. */
#extras{max-height:none}

/* Y cómo lo ve quien va a hacer el trabajo. */
.extras-pedidos{margin-top:10px;padding:11px;background:var(--relleno);border-radius:10px}
.extras-pedidos>b{display:block;font-size:12.5px;font-weight:600;color:var(--suave);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.pastilla-si{display:inline-block;margin:0 5px 5px 0;padding:5px 11px;border-radius:999px;
  background:var(--papel);font-size:13.5px;font-weight:500}