/* La web del repartidor. El contexto manda sobre el gusto: esta pantalla se mira PARADO en la vereda, con sol de frente, el paquete en una mano y el celular en la otra. De ahi sale todo lo de abajo. Tres cosas que parecen decisiones de estilo y son de contexto: - NO hay modo oscuro. Al sol, una pantalla oscura al maximo brillo se lee peor que una clara: el vidrio refleja y el texto claro sobre fondo oscuro pierde antes. Adentro de la camioneta seria al reves, pero el momento que importa es el timbre, no el volante. - NO se baja ninguna fuente. Es la politica W2, y ademas el celular baja esta pagina con la senial de un pasillo: una fuente de Google es medio segundo mirando una pantalla en blanco. Se usa la del sistema. - Nada de texto por debajo de 12px, y el dato mas grande que su rotulo. La primera version de esto tenia los rotulos en 9.5px; al sol, a la distancia del brazo, eso no se lee. Los colores de los estados NO estan aca: los pone ui.mjs leyendolos de la tabla `estados` (W6). Si estuvieran aca habria dos lugares que se desincronizan. Los cinco pasan contraste AA sobre texto blanco, medido. */ :root { --tinta: #14181c; --tenue: #5F6E79; --borde: #dde3e9; --fondo: #ffffff; --marca: #1C5FA8; --aviso: #8C5A0B; --error: #A0362A; --radio: 10px; --toque: 48px; /* alto minimo de cualquier cosa que se toque */ } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: system-ui, "Segoe UI", Roboto, -apple-system, sans-serif; color: var(--tinta); background: var(--fondo); font-size: 16px; line-height: 1.5; /* Alto completo y en columna. Esto se usa PARADO, con el celular en una mano y el paquete en la otra: los botones tienen que caer donde llega el pulgar, abajo, no pegados a la tarjeta en el medio de la pantalla. Con el contenido suelto arriba, la mitad de abajo del telefono quedaba vacia y habia que recolocar la mano para marcar una entrega. 100dvh y no 100vh: en el celular la barra del navegador aparece y desaparece, y con vh el ultimo boton queda debajo del borde. */ min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; /* El verde de que salio bien, un momento antes de que cambie la pantalla. */ transition: background-color 220ms ease; } body.exito, body.exito #app { background: #E7F3EC; } /* viewport-fit=cover esta en el HTML, asi que el pie tiene que esquivar la barra de gestos del telefono o el ultimo boton queda abajo del borde. */ #app { width: 100%; max-width: 560px; margin: 0 auto; padding: 12px; padding-bottom: max(16px, env(safe-area-inset-bottom)); flex: 1; display: flex; flex-direction: column; } .cargando { color: var(--tenue); text-align: center; padding: 40px 0; } /* Arriba de 600px de ancho ya no hay un celular del otro lado: hay la notebook de la oficina, o la mia, mirando la misma pantalla. Estirar la pagina a lo alto de una notebook deja la tarjeta pegada arriba y los botones a 600px de distancia, con un hueco enorme en el medio: se ve mal ahi y no se parece en nada a lo que el repartidor tiene en la mano. Asi que arriba de ese ancho se la encuadra con la forma de un telefono y se la centra. Lo que se mira en la notebook pasa a ser lo que se va a ver en la calle, que es lo unico que importa: esta pantalla es de celular siempre. La condicion de alto tambien: un celular dado vuelta pasa los 600px de ancho y NO tiene que entrar por aca. */ @media (min-width: 600px) and (min-height: 640px) { body { background: #EEF1F4; justify-content: center; align-items: center; padding: 24px 0; } #app { flex: none; height: min(780px, calc(100dvh - 48px)); background: var(--fondo); border-radius: 18px; box-shadow: 0 6px 30px rgba(20, 24, 28, .12); overflow: auto; transition: background-color 220ms ease; } /* La banda de avisos vive en el , no adentro del marco, asi que sin esto se estiraria de punta a punta de la notebook. */ .banda { width: 100%; max-width: 560px; border-radius: 10px 10px 0 0; } } /* El foco, una sola vez y para todo. Con guantes de trabajo no se usa teclado, pero esta pantalla tambien se abre desde una notebook, y sin esto no hay forma de saber donde estas parado. */ :where(a, button, input, [tabindex]):focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 4px; } /* La banda de avisos: pegada arriba, imposible de no ver. W11 se apoya en esto, y ui.mjs le pone role="status" para que ademas se anuncie sola. */ .banda { position: sticky; top: 0; z-index: 10; background: var(--aviso); color: #fff; padding: 12px 14px; font-weight: 600; font-size: 15px; padding-top: max(12px, env(safe-area-inset-top)); } /* ---- La ficha ---- */ .barra { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #1b2733; color: #fff; padding: 11px 13px; border-radius: var(--radio) var(--radio) 0 0; } /* El codigo del envio en la barra. Se llama codigo-envio y no codigo porque la pantalla de entrada por codigo corto usa .codigo para su formulario, y con el mismo nombre el formulario heredaba este tamanio y este espaciado. */ .codigo-envio { font-size: 14px; font-weight: 600; letter-spacing: .02em; } .chip { border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; /* "En camino" no se parte en dos lineas */ } .tarjeta { border: 1px solid var(--borde); border-top: none; border-radius: 0 0 var(--radio) var(--radio); padding: 14px; display: flex; flex-direction: column; gap: 14px; } /* El rotulo ARRIBA del dato, no al costado. Con el rotulo al costado, una direccion larga se parte contra el margen derecho y queda peor que el nombre corto de al lado. Es lo mismo que la tajada 1 de K le hizo al escritorio, asi que las dos pantallas dicen las cosas igual. */ .fila { display: flex; flex-direction: column; gap: 2px; } .rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--tenue); font-weight: 700; } .valor { font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; /* una direccion sin espacios no desborda */ } /* Llamar es la salida cuando no hay nadie en el timbre. El link ocupa el ancho de la fila y el alto de un toque, no el ancho del numero. */ .tel { color: var(--marca); text-decoration: none; display: flex; align-items: center; min-height: 40px; } /* La franja de observaciones: es el dato que evita el viaje en vano, asi que se destaca. Solo aparece si hay observaciones (C4). */ .obs { margin-top: 14px; background: #FFF6D8; border-left: 5px solid #C99A06; border-radius: 0 6px 6px 0; padding: 12px 13px; } .obs .rotulo { color: #7A5B04; } .obs-texto { margin: 3px 0 0; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; } /* Un envio terminado no muestra botones. Decirlo con todas las letras evita que el repartidor crea que la pantalla no cargo. */ .cerrado { margin-top: 18px; padding: 14px; border: 1px dashed var(--borde); border-radius: var(--radio); color: var(--tenue); text-align: center; font-weight: 600; } /* ---- Las acciones ---- */ .pie { /* auto y no un margen fijo: lo que sobra de pantalla se lo queda el hueco de arriba, y el pie queda siempre abajo, este llena o vacia la ficha. */ margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 10px; } .btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--toque); padding: 10px 14px; border: none; border-radius: 9px; font-family: inherit; font-size: 17px; font-weight: 700; cursor: pointer; transition: filter 150ms ease; } .btn-ir { background: var(--marca); color: #fff; } .btn-mal { background: #fff; color: var(--aviso); border: 2px solid var(--aviso); } .btn-gris { background: #fff; color: var(--tinta); border: 2px solid var(--borde); } .btn-volver { background: none; color: var(--marca); border: 2px solid var(--borde); font-weight: 600; } .btn-listo { background: #266845; color: #fff; border-color: #266845; } .btn:active { filter: brightness(.92); } /* El deslizador de W5. El fondo lo pinta ui.mjs con el color del estado destino, que sale de la base. */ .slide { position: relative; display: flex; align-items: center; border-radius: 999px; padding: 5px; min-height: calc(var(--toque) + 10px); user-select: none; touch-action: none; } .slide-texto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-left: 58px; /* deja lugar a la perilla */ color: #fff; font-weight: 700; font-size: 16px; pointer-events: none; /* el texto no le roba el gesto a la perilla */ transition: padding-left 200ms ease, font-size 200ms ease; } .knob { position: relative; z-index: 1; width: var(--toque); height: var(--toque); flex: none; border: none; border-radius: 50%; background: #fff; color: var(--tinta); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; touch-action: none; } .knob-flecha { font-size: 22px; font-weight: 900; line-height: 1; } /* La clase la pone y la saca ui.mjs. Mientras el dedo arrastra NO esta, para que la perilla vaya pegada al dedo; se pone para los dos momentos en que la perilla se mueve sola: cuando termina el recorrido y cuando vuelve al arranque. Antes las dos cosas pasaban de un salto, y eso es lo que se veia como que la pantalla se rompia. */ .knob-animando { transition: transform 260ms cubic-bezier(.22,.7,.24,1); } .knob[disabled] { cursor: default; } /* Salio bien: la pastilla se queda verde, con el tilde y sin perilla, el tiempo que ui.mjs decide. Es el unico momento en que el repartidor ve que su envio quedo marcado, porque enseguida cambia la pantalla. */ .slide-listo { box-shadow: inset 0 0 0 3px rgba(255,255,255,.9); } .slide-listo .knob { opacity: 0; transition: opacity 200ms ease; } .slide-listo .slide-texto { padding-left: 0; font-size: 18px; } /* Sobre un fondo de color, el contorno oscuro solo no se ve: el anillo blanco de afuera lo despega. */ .knob:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255,255,255,.9); } /* ---- La confirmacion (la alternativa al arrastre, WCAG 2.5.7) ---- */ .confirmar { width: min(92vw, 420px); border: none; border-radius: 14px; padding: 20px; color: var(--tinta); box-shadow: 0 10px 40px rgba(0,0,0,.3); } .confirmar::backdrop { background: rgba(10,14,18,.55); } .confirmar-texto { margin: 0; font-size: 19px; font-weight: 700; } .confirmar-aclaracion { margin: 8px 0 0; font-size: 15px; color: var(--tenue); } .confirmar-botones { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; } /* El pedido de motivo, que usa el mismo que la confirmacion. */ .confirmar .rotulo { display: block; margin-top: 16px; } .obs-campo { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 17px; /* igual que los inputs: menos hace que iOS haga zoom al enfocar */ padding: 12px 13px; margin-top: 5px; border: 1px solid var(--borde); border-radius: 9px; color: var(--tinta); background: #fff; resize: vertical; } .confirmar .error { margin-top: 8px; } /* ---- Login y codigo corto ---- */ .login, .codigo { display: flex; flex-direction: column; gap: 14px; padding-top: 32px; } .login h1, .codigo h1 { font-size: 24px; margin: 0; line-height: 1.2; } .subtitulo { color: var(--tenue); font-size: 15px; margin: 0; } .campo { display: flex; flex-direction: column; gap: 5px; } .login input, .codigo input { font-family: inherit; font-size: 17px; /* 17px o mas: menos que eso hace que iOS haga zoom al enfocar el campo */ min-height: var(--toque); padding: 12px 13px; border: 1px solid var(--borde); border-radius: 9px; color: var(--tinta); background: #fff; } .codigo input { text-align: center; letter-spacing: .18em; font-weight: 700; font-size: 22px; text-transform: uppercase; } .error { color: var(--error); font-size: 15px; font-weight: 600; margin: 0; } .btn-camara { margin-bottom: 2px; } /* "o tipeá el código", con una linea a cada lado: deja claro que abajo hay otro camino y no la continuacion del de arriba. */ .separador { display: flex; align-items: center; gap: 10px; margin: 2px 0; color: var(--tenue); font-size: 14px; } .separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); } /* ---- La camara ---- */ .escaner { position: fixed; inset: 0; width: 100vw; max-width: none; max-height: none; height: 100dvh; margin: 0; padding: 0; border: none; background: #000; overflow: hidden; } .escaner::backdrop { background: #000; } .escaner-video { width: 100%; height: 100%; object-fit: cover; /* que llene, sin deformar la imagen */ display: block; } /* El recuadro donde hay que poner el QR. Es sólo una guía —se lee igual si el código cae afuera— pero sin él nadie sabe a qué distancia poner el paquete, y se termina barriendo la etiqueta de lejos a cerca. */ .escaner-marco { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); width: min(68vw, 300px); aspect-ratio: 1; border: 3px solid rgba(255,255,255,.9); border-radius: 16px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); } .escaner-pie { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); } .escaner-ayuda { margin: 0; text-align: center; color: #fff; font-size: 16px; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.8); } .escaner-error { color: #FFD9D3; } .escaner-cancelar { background: rgba(255,255,255,.95); } /* El que pidio menos movimiento, menos movimiento. El arrastre de la perilla no entra aca: es manipulacion directa, sigue al dedo. */ @media (prefers-reduced-motion: reduce) { * { transition-duration: 1ms !important; animation-duration: 1ms !important; } } /* Quien esta adentro, y como salir. La leccion 14 del sub-proyecto B era que "recordarme" sin "cerrar sesion" es una puerta de una sola mano, y que ademas no habia forma de saber con que usuario estabas. Las dos mitades se arreglan aca. */ .sesion { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 2px; } .quien { color: var(--tenue); font-size: 14px; } .salir { background: none; border: none; color: var(--tenue); font-family: inherit; font-size: 15px; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 12px; }