/* 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} /* 28 y no 26, que era lo de antes. La palabra nueva lleva la tilde suelta y más alta, así que a la misma altura de CAJA las letras salían un diez por ciento más pequeñas que las de la anterior y la cabecera se veía encogida sin que se supiera por qué. Lo que se iguala es el alto de la LETRA, que es lo que se percibe como el tamaño del logotipo; la caja crece dos píxeles. */ .marca img{height:28px;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)} /* overflow:visible además de quitar el relleno: .tarjeta recorta por la esquina redondeada, y sin relleno la primera letra de una etiqueta pegada al borde se come el trozo de curva. Así se veía media U de "Usar una guardada". */ .tarjeta.plana{background:transparent;padding:0;box-shadow:none;overflow:visible} .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:not([type=checkbox]):not([type=radio]),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} /* Las casillas se quedan como las pinta el navegador. El reinicio de arriba lleva -webkit-appearance:none, que en un campo de texto quita el relieve de iOS y está bien. En una CASILLA quita la casilla entera: queda un rectángulo vacío que no enseña la palomita, así que se puede marcar y no se nota. Eso es lo que hacía parecer que los servicios y las zonas del registro no se podían seleccionar. Tamaño de dedo y el color de la marca, que es todo lo que hay que decirles. */ input[type=checkbox], input[type=radio]{ -webkit-appearance:auto;appearance:auto; width:20px;height:20px;flex:0 0 auto;margin:0; accent-color:var(--azul);cursor:pointer} 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); position:relative} /* 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. */ /* El halo vivía aquí: 340 píxeles de resplandor puestos DETRÁS DEL ICONO de la aplicación, para levantarlo del fondo. Al quitar el icono se quedó flotando encima de nada, que es peor que no haber tenido ninguno — una mancha de color sin objeto que explique por qué está ahí. Con él se fueron el estilo del icono y el del eslogan, que tampoco tienen ya a quién aplicarse. */ .bienvenida{text-align:center;padding:0} .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)} .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} /* DEBIENDO, en rojo. Es la única cifra de la aplicación que puede ir en contra de quien la mira, y tiene que leerse como lo que es. */ .saldo.debe{color:var(--rojo)} .saldo-grande.debe{color:var(--rojo)} .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} /* La cabecera ya no lleva cara: es la línea de cuándo y cuánto dura, y debajo el estado en pequeño. La cara y el nombre bajan a .quien-fila. */ .marcha .cab{display:block} .marcha .cab .estado-vivo{padding-right:var(--esquina)} .marcha .cuando-grande{font-size:18px;letter-spacing:-.015em} .marcha .meta .dura{color:var(--tinta);font-weight:700} /* QUIÉN VIENE, debajo del riel. La cara en 40 px y el nombre en 15: sigue estando -a la puerta se le abre a una persona y reconocerla es la diferencia entre abrir tranquila y abrir con la cadena puesta- pero deja de ser lo primero que se lee, que es lo que se venía a mirar aquí. */ .marcha .quien-fila{display:flex;align-items:center;gap:10px;margin:14px 0 0} .marcha .quien-fila .retrato{width:40px;height:40px} .marcha .quien-fila .sin-foto{width:40px;height:40px;font-size:17px} .marcha .quien-fila .quien{font-size:15px;font-weight:600;letter-spacing:-.01em} /* A QUÉ SERVICIO ES ESTO, con su figura y su color. Una sola pastilla para los dos sitios donde hace falta: la tarjeta del trabajo en marcha y cada oferta que llega. El color es el mismo azul/rosa/turquesa/naranja que se eligió al pedirlo, así que se reconoce sin leerlo; el dibujo, el mismo que se tocó. */ .oficio-marca{display:inline-flex;align-items:center;gap:5px; padding:4px 10px 4px 4px;border-radius:999px; font-size:12px;font-weight:700;letter-spacing:-.01em;line-height:1.15; background:var(--relleno);color:var(--tinta)} .oficio-marca img{width:16px;height:16px;object-fit:contain;flex:0 0 auto} .oficio-marca[data-sv="limpieza"]{background:rgba(23,107,255,.13);color:var(--sv-limpieza)} .oficio-marca[data-sv="ninos"] {background:rgba(232,67,139,.13);color:var(--sv-ninos)} .oficio-marca[data-sv="paseo"] {background:rgba(0,178,196,.15); color:var(--sv-paseo)} .oficio-marca[data-sv="plomero"] {background:rgba(255,149,0,.16); color:var(--sv-plomero)} /* EN LA TARJETA EN MARCHA VA A LA ESQUINA DE ARRIBA, encima del color con el que esa tarjeta ya se tiñe. Suelta -no en la columna del nombre- para no comerle ancho a las tres líneas de debajo; sólo el nombre le deja sitio, que es la única que llega a su altura. */ .marcha{--esquina:132px} .marcha .oficio-marca{position:absolute;top:12px;right:12px;z-index:1; max-width:calc(100% - 96px)} /* EN LA OFERTA VA DEBAJO DEL NOMBRE, y no en la esquina: ahí arriba están la cifra grande y la etiqueta de "la más barata", y en un teléfono estrecho las tres cosas no caben en la misma línea. */ .oferta .oficio-marca{margin-top:4px} .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. */ /* BUSCANDO A ALGUIEN. Un radar, no un puntito de nueve píxeles. Es la única pantalla donde no hay nada que tocar: se publicó y toca esperar. Si aquí no se mueve algo grande, la sensación es que se colgó, y lo que sigue a esa sensación es cerrar la aplicación. Y es literal, no decorativo: se está preguntando por la ciudad quién puede ir. Las ondas salen de tu casa hacia fuera; los tres puntos que giran son la gente a la que se le está preguntando. */ .buscando{display:flex;flex-direction:column;align-items:center;text-align:center; gap:4px;margin:22px 0 10px} .buscando b{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-top:6px} .buscando .pista{max-width:26em} .radar{position:relative;width:132px;height:132px;display:flex; align-items:center;justify-content:center} /* Las ondas: tres aros que salen del centro y se desvanecen, escalonados para que siempre haya una a medio camino. */ .radar .onda{position:absolute;inset:0;border-radius:50%; border:2px solid var(--azul);opacity:0; animation:radar-onda 2.8s cubic-bezier(.2,.6,.35,1) infinite} .radar .onda:nth-child(2){animation-delay:.93s} .radar .onda:nth-child(3){animation-delay:1.86s} @keyframes radar-onda{ 0% {transform:scale(.30);opacity:0} 12% {opacity:.55} 100%{transform:scale(1);opacity:0} } /* El centro: tu casa. Late despacio, como respirando. */ .radar .centro{position:relative;z-index:1;width:56px;height:56px;border-radius:50%; display:flex;align-items:center;justify-content:center;color:#fff; background:linear-gradient(145deg, var(--azul), var(--azul-hondo)); box-shadow:0 6px 20px rgba(23,107,255,.34); animation:radar-late 2.8s ease-in-out infinite} .radar .centro svg{width:26px;height:26px} @keyframes radar-late{ 0%,100%{transform:scale(1)} 50% {transform:scale(1.06)} } /* Los tres puntos que giran alrededor: la gente a la que se pregunta. Cada uno en su propia órbita y a su propio ritmo, que tres cosas girando al unísono se leen como un engranaje y no como personas. */ .radar .satelite{position:absolute;top:50%;left:50%;width:9px;height:9px; margin:-4.5px;border-radius:50%;background:var(--azul); transform-origin:4.5px 4.5px} .radar .s1{animation:radar-orbita1 4.2s linear infinite} .radar .s2{background:var(--rosa);animation:radar-orbita2 5.6s linear infinite} .radar .s3{background:var(--sv-paseo, var(--azul)); animation:radar-orbita3 6.8s linear infinite} @keyframes radar-orbita1{ from{transform:rotate(0deg) translateX(48px) rotate(0deg)} to {transform:rotate(360deg) translateX(48px) rotate(-360deg)}} @keyframes radar-orbita2{ from{transform:rotate(140deg) translateX(60px) rotate(-140deg)} to {transform:rotate(500deg) translateX(60px) rotate(-500deg)}} @keyframes radar-orbita3{ from{transform:rotate(265deg) translateX(38px) rotate(-265deg)} to {transform:rotate(625deg) translateX(38px) rotate(-625deg)}} @media (prefers-reduced-motion: reduce){ .radar .onda{animation:none;opacity:.22} .radar .onda:nth-child(2){transform:scale(.72)} .radar .onda:nth-child(3){transform:scale(.46)} .radar .centro, .radar .satelite{animation:none} .radar .s1{transform:translateX(48px)} .radar .s2{transform:rotate(140deg) translateX(60px)} .radar .s3{transform:rotate(265deg) translateX(38px)} } /* ---------- 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. */ /* AIRE DEBAJO DEL BOTÓN QUE CIERRA UNA SECCIÓN. Los botones no llevan margen y .tarjeta sólo lo lleva por abajo, así que un botón que es lo último de su sección queda PEGADO a la primera tarjeta de la sección siguiente. Pasaba con "Publicar otro" y con "Añadir otra dirección", y habría pasado con el siguiente que se pusiera al final de algo. :last-of-type y no :last-child a propósito: en la pantalla de direcciones, detrás del botón viene el formulario de una dirección nueva -oculto cuando ya hay guardadas-, así que el botón no es el último HIJO aunque sea lo último que se ve. Y así se deja fuera el "‹ Volver", que abre su sección en vez de cerrarla. 16 px, el mismo aire que hay entre tarjeta y tarjeta. */ .envoltura > section > button:last-of-type{margin-bottom:16px} #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. OJO CON ESTA LISTA DE :not(). Alcanza a CUALQUIER