/* Estilo de la PWA. Las variables y los componentes son los de la maqueta aprobada (docs/maqueta-app-taxista-completa-v1.html): la maqueta manda. La diferencia con la maqueta es que aquí NO hay simulador ni marco de móvil — la app ES la pantalla del teléfono, a pantalla completa. */ :root{ --bg:#F5F4F2; --s1:#EDECE9; --s2:#FFFFFF; --bd:#DDDCD9; --bdF:#C9C7C3; --tx:#1A1918; --tx2:#63615C; --tx3:#8F8D88; --acBg:#E8F0F9; --acBd:#9CC1E4; --acTx:#0F4478; --acTx2:#185FA5; --acFill:#185FA5; --rjBg:#FBEBEB; --rjBd:#E9B9B9; --rjTx:#A32D2D; --rjTx2:#501313; --vdBg:#E9F4EC; --vdTx:#1F6B3A; --amBg:#FAEEDA; --amBd:#BA7517; --amTx:#412402; --amTx2:#854F0B; --moBg:#EEEDFE; --moBd:#7F77DD; --moTx:#26215C; --moTx2:#534AB7; --moSel:#CECBF6; /* EL SENTIDO TIENE COLOR (Aram, 10-ago-2026): verde sube, morado baja. Alias y no valores propios, para que el par se cambie de sitio en una línea; el porqué de todo esto está en `colorSentido()` de altas.js, que es quien los reparte. El fondo de la pantalla de apuntar se tiñe con `--subBg`/`--bajBg`, y por eso esos dos tienen que seguir siendo casi blancos: es una pantalla entera. */ --subBg:var(--vdBg); --subTx:var(--vdTx); --subTx2:var(--vdTx); --bajBg:var(--moBg); --bajTx:var(--moTx); --bajTx2:var(--moTx2); --r:8px; } *{box-sizing:border-box} /* Nada de destello de tap del móvil (salía azul al pulsar cualquier cosa tocable). El "toqué" se nota con un pequeño zoom al presionar, más serio que un flash. */ html{-webkit-tap-highlight-color:transparent} html,body{height:100%} body{ margin:0;background:var(--bg);color:var(--tx); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:15px;line-height:1.5; /* El DOCUMENTO no scrollea nunca: si lo hiciera, el pie se iría por debajo del borde. El scroll vive DENTRO de cada vista, no aquí. */ overflow:hidden; /* AQUÍ NO SE SELECCIONA TEXTO (Aram, 6-ago-2026: "al pulsar algo que no tiene acción la palabra se queda seleccionada y estorba"). Esto NO es un documento, es una app que se maneja con el pulgar y a veces de pie: cada toque que cae fuera de un botón dejaba una palabra en azul que hay que quitarse de encima tocando en otro sitio. Los botones y las líneas del desglose ya lo tenían cada uno por su lado, según iban apareciendo los casos; se sube aquí para que valga también para el texto suelto, que es donde salía ahora. `touch-callout` es el hermano de esto en iPhone: sin él, mantener el dedo sobre una palabra abre el menú de copiar/definir encima de la pantalla. Donde SÍ se selecciona es en los campos de escribir, justo debajo. */ user-select:none;-webkit-user-select:none;-webkit-touch-callout:none; } /* Lo que se escribe se selecciona con normalidad: corregir un recuento o un motivo pide poder colocar el cursor y arrastrar sobre lo tecleado. */ input,textarea{user-select:text;-webkit-user-select:text;-webkit-touch-callout:default} /* La app es una cáscara de ALTO FIJO igual a la pantalla, y NO scrollea ella: el scroll ocurre DENTRO de cada vista. Así el pie de acción es un hermano estático al fondo y no baila (ni por el sticky en móvil ni por la barra de URL / dvh). height:100% (no 100dvh) para que CUADRE con el body y no lo desborde: descuadrar esas dos alturas era lo que empujaba el pie fuera de pantalla. El hueco de la barra del móvil: arriba lo pone el #app, abajo el propio pie. */ #app{max-width:520px;margin:0 auto;height:100%;overflow:hidden; background:var(--s2);display:flex;flex-direction:column; padding-top:env(safe-area-inset-top,0px)} button{font-family:inherit;background:transparent;border:1px solid var(--bdF);border-radius:var(--r); padding:8px 12px;color:var(--tx);cursor:pointer;font-size:14px; /* Al pulsar rápido no se selecciona el texto (evita el resalte de toda la caja) ni aparece el sombreado de tap del móvil. El guiño de pulsado va abajo, pequeño. */ user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent} button:hover{filter:brightness(0.97)} /* El pulsado: un zoom breve (más notorio que un cambio de brillo, y no deja color). */ button,.casilla,.ln,#miAccion,#miZona{transition:transform .07s ease} button:active,.casilla:active,#miAccion:active,#miZona:active{transform:scale(0.96)} .ln:active{transform:scale(0.99)} button:disabled{opacity:0.4;cursor:default} input{font-family:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--bdF);border-radius:var(--r);width:100%} /* LA BANDA DE LA DEMO (§13, P4). Solo se ve con `?demo=` y no se puede cerrar: es lo único que dice que aquí el gesto se ve entero pero la consecuencia no se propaga. `flex:none` para que no la encoja el reparto de la columna. */ .bandaDemo{flex:none;background:var(--amBd);color:#fff;font-size:11px;font-weight:600; letter-spacing:.05em;text-align:center;padding:4px;text-transform:uppercase} /* SIN COBERTURA, en grande y en toda la app. Ámbar de fondo y no una línea gris: tiene que verse sin buscarla, porque lo que dice es "no te fíes de lo que estás mirando para señalar a otro". No es rojo — no hay nada roto ni nada que hacer; la app sigue apuntando y mandará sola en cuanto vuelva. */ .bandaRed{flex:none;background:var(--amBg);color:var(--amTx);font-size:13px; font-weight:500;text-align:center;padding:7px 10px;border-bottom:1px solid var(--amBd)} .barra{display:flex;align-items:center;justify-content:space-between;padding:10px 14px; border-bottom:1px solid var(--bd);font-size:13px;color:var(--tx2)} .chipRj{background:var(--rjBg);color:var(--rjTx);font-size:12px;padding:3px 9px;border-radius:20px;white-space:nowrap;line-height:1.4;cursor:pointer} /* LA CAMPANITA de avisos (§12.15.E). Botón desnudo (sin marco ni fondo: en la barra manda el icono) con el globo del número pegado arriba a la derecha. El globo lleva `min-width` y no `width`: con dos cifras se ensancha en vez de recortar. */ .campana{position:relative;background:none;border:0;padding:2px;color:var(--rjTx); line-height:0;flex:none;cursor:pointer} .campana .globo{position:absolute;top:-3px;right:-5px;background:var(--rjTx);color:#fff; font-size:11px;font-weight:600;line-height:16px;min-width:16px;height:16px;padding:0 4px; border-radius:9px;text-align:center;letter-spacing:-.2px} /* LA CAMPANILLA AZUL: lo que yo señalé y ya me han contestado. Misma pieza, otro color — el azul de "esto ya se atendió", el mismo del chip `.chipAz`. No compite con la roja: la roja es trabajo pendiente, esta es una respuesta que leer. */ .campana.az{color:var(--acTx2)} .campana.az .globo{background:var(--acTx2)} /* La ámbar: lo que ve la máquina (`huecos.js`), no lo que dice una persona. */ .campana.am{color:var(--amTx2)} .campana.am .globo{background:var(--amTx2)} /* Al llegar uno nuevo, un toque de atención y para: la campana NO suena (§12.10, decisión v1.6 — puede estar conduciendo). Un solo balanceo, y solo si se mueve. */ @keyframes tilin{0%,100%{transform:rotate(0)}20%{transform:rotate(-13deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}} .campana.suena svg{animation:tilin .7s ease-in-out} @media (prefers-reduced-motion:reduce){.campana.suena svg{animation:none}} /* La marca de una línea CORREGIDA: azul, no roja — no es algo que atender, es el rastro de que ya se atendió. Se reconoce de un vistazo en un día pasado. */ .chipAz{background:var(--acBg);color:var(--acTx2);font-size:12px;padding:3px 9px;border-radius:20px;white-space:nowrap;line-height:1.4} /* "¿sobra?": las dos patas de un par demasiado junto para esconder un viaje (`huecos.js`). Ámbar porque lo ve la máquina — el rojo se reserva para lo que señala una persona. */ .chipAm{background:var(--amBg);color:var(--amTx2);font-size:12px;padding:3px 9px;border-radius:20px;white-space:nowrap;line-height:1.4} /* Cada vista rellena la cáscara y scrollea por dentro (la barra de arriba, si la hay, queda fija fuera). min-height:0 es lo que deja encoger al hijo flex y que el overflow funcione. */ .cuerpo{padding:14px;flex:1;min-height:0;display:flex;flex-direction:column; overflow-y:auto;-webkit-overflow-scrolling:touch} .caja{border:1px solid var(--bdF);border-radius:12px;padding:12px} .fila{display:flex;justify-content:space-between;padding:4px 0} .am{background:var(--amBg);border-radius:var(--r);padding:10px;font-size:13px;color:var(--amTx)} .vd{background:var(--vdBg);border-radius:var(--r);padding:10px;font-size:13px;color:var(--vdTx)} .rj{background:var(--rjBg);border-radius:var(--r);padding:10px;font-size:13px;color:var(--rjTx2)} .grande{width:100%;height:60px;font-size:20px;font-weight:500;background:var(--acFill);color:#fff;border:none} .grande:disabled{background:var(--acFill)} /* El MISMO azul lleno del botón grande de apuntar, para el botón que decide en un panel (hoy, "Me pongo al volante"): entre dos botones iguales no se ve cuál es el que hace la cosa. Es el color de "esto es lo que vas a pulsar" en toda la app. */ .acento{background:var(--acFill);color:#fff;border:none;font-weight:500} .sel{background:var(--acBg) !important;border-color:var(--acBd) !important;color:var(--acTx) !important;font-weight:500} .peso{width:100%;font-size:15px;margin-bottom:8px;text-align:left;padding:12px} .oculto{display:none !important} /* Barra de pestañas inferior (Tablero · Mi jornada). Solo en las dos pantallas principales; en las de apuntar se oculta (ahí manda el botón grande fijo). Es un hermano estático al fondo del #app, como el pie: no scrollea. */ .navBar{flex:none;display:flex;border-top:1px solid var(--bd);background:var(--s2); padding-bottom:env(safe-area-inset-bottom,0px)} .nav{flex:1;border:none;border-radius:0;padding:12px;font-size:14px;background:transparent;color:var(--tx)} .nav.on{background:var(--s1);font-weight:500;color:var(--tx)} /* PIE FIJO: el botón grande queda clavado al borde inferior de la pantalla y el contenido hace scroll por detrás, así el azul es SIEMPRE el límite de la app, en el teléfono que sea. La banda verde de "Apuntado" vive en el mismo pie y ocupa el MISMO sitio que el botón (no debajo): apuntar no mueve nada. El `bottom` respeta la barra del iPhone; al final del scroll el botón cae en su sitio natural, dentro del relleno del cuerpo. */ /* vAlta/vParada/vCaja NO scrollean ellas (su padding pasa al scroll de dentro); manda el hijo. */ #vAlta,#vParada,#vCaja,#vTotal,#vCoordFin{padding:0;overflow:hidden} #altaScroll,#paradaScroll,#cajaScroll,#totalScroll,#coordScroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px} /* El pie: hijo estático al fondo del alto fijo. Sin sticky, sin fixed, sin dvh: no se mueve NUNCA. El hueco de la barra del móvil va en su padding de abajo. */ .pieFijo{flex:none;background:var(--s2); padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); box-shadow:0 -10px 12px -10px rgba(0,0,0,0.22)} /* Tablero */ .casilla{border:1px solid var(--bd);border-radius:var(--r);padding:8px;cursor:pointer} #rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} /* LA GENTE DEL DÍA: tres cajas del mismo tamaño, y la que importa —la que sigue arriba— en ámbar. El color va SOLO ahí: si las tres fueran de color, no se miraría ninguna. La cifra manda sobre la etiqueta (tamaño, no negrita). */ #personasDia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px} .pers{border:1px solid var(--bd);border-radius:var(--r);padding:8px;text-align:center} /* La ámbar reaprovecha `.am` (fondo y color de texto) y solo le pone su borde. El padding se repite a propósito: `.am` trae el suyo de 10px y, si algún día este bloque subiera por encima de `.am` en el fichero, la tercera caja quedaría más alta que sus dos hermanas sin que nadie tocara nada. */ .pers.am{border-color:var(--amBd);padding:8px} .persNum{font-size:24px;font-weight:500;line-height:1.2} .persTx{font-size:12px;color:var(--tx3)} .pers.am .persTx{color:var(--amTx2)} /* Desglose: una línea del día (una pata, una parada o un grupo cobrado). Sin selección de texto: se toca para actuar, no para seleccionar (era lo que pintaba de verde todo el recuadro al mover los +/−). */ .ln{border:1px solid var(--bd);border-radius:var(--r);padding:10px;margin-bottom:6px; user-select:none;-webkit-user-select:none} /* La nota de un agujero del día (Aram, 12-ago-2026), encima de la fila de la que habla. SIN recuadro y SIN fondo a propósito: el recuadro ámbar es de las LÍNEAS que pueden estar mal, y un hueco no es una línea — si se le pusiera caja parecería una más y habría que preguntarse por qué no se toca. Lo que la separa de la lista es el aire de arriba y abajo, que es justo como lo pidió ("abriendo hueco entre las filas"). El margen de los lados iguala al padding de `.ln` para que el texto caiga a plomo con el de los viajes. */ .notaHueco{font-size:12px;color:var(--tx3);margin:12px 11px;line-height:1.4} /* ---- Calendario de rango ("Ver otros días", 10-ago-2026) ------------------- Hermano del de "El día" del panel, pero DE MÓVIL, y las diferencias no son cosméticas: allí es un popover flotante de 440 px con dos columnas y celdas de 24 px, aquí se despliega EN LÍNEA a todo el ancho y con celdas de 40, que es lo que se puede pulsar con el pulgar y de pie. Por eso no se reutilizó aquel: la lógica de fechas se copió (`calendario.js` lo explica), el dibujo no. `display:none → block` y no flex: en el móvil los atajos van DEBAJO del mes, no en una columna al lado. */ .calBoton{display:flex;align-items:center;gap:10px;width:100%;justify-content:space-between; font-size:14px;padding:10px 12px} .calPop{display:none;margin-top:6px;background:var(--s2);border:1px solid var(--bdF); border-radius:12px;padding:12px} .calPop.on{display:block} .calCab{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .calCab b{font-size:15px;font-weight:500} .calCab button{padding:6px 14px;font-size:16px;line-height:1.2} .calDias{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .calDias .dow{font-size:11px;color:var(--tx3);text-align:center;padding:2px 0} /* `min-height` y no `height`: la celda crece si el teléfono tiene la letra grande, en vez de recortar el número. `tabular-nums` para que las columnas no bailen. */ .calDias button{border:0;border-radius:0;padding:0;min-height:40px;font-size:15px; background:transparent;font-variant-numeric:tabular-nums} .calDias button:disabled{opacity:.25} .calDias button.dentro{background:var(--acBg);color:var(--acTx)} .calDias button.punta{background:var(--acFill);color:#fff;font-weight:600} .calDias button.ini{border-radius:var(--r) 0 0 var(--r)} .calDias button.fin{border-radius:0 var(--r) var(--r) 0} .calDias button.solo{border-radius:var(--r)} .calAtajos{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px} .calAtajos button{font-size:13px;padding:10px} /* PLIEGUES de "Mi jornada" de la coordinadora (Aram, 10-ago-2026): "Sin revisar" y "Atendidos", y abrir uno cierra el otro. Mismo dibujo que el botón del calendario —ancho entero, el rótulo a la izquierda y la flecha a la derecha— y no es una coincidencia: en esta app esa forma ya significa "esto se despliega", así que no hay que aprenderla dos veces. */ .pliegue{display:flex;align-items:center;justify-content:space-between;width:100%; font-size:14px;padding:11px 12px;margin-bottom:6px} /* Entrada: lista de nombres */ .nombre{width:100%;text-align:left;padding:12px;margin-bottom:6px;font-size:15px} /* Aviso flotante (toast) */ #toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%); background:var(--tx);color:#fff;padding:10px 16px;border-radius:20px;font-size:13px; max-width:88%;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,0.2);z-index:10}