llena lo que queda entre la franja y la barra de abajo (su relleno de abajo ya es el alto de esa barra, --alto-control), y es una columna. Solo sus hijos directos pasan a flex (una vista a la vez, las rayas y el fallo de la carga); dentro de cada vista todo sigue igual. */ body.una-mano main { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; max-width: none; margin: 0; } body.una-mano main > * { min-width: 0; } /* (Hasta el 1 oct 2026 aquí iba `main > [data-vista-de] { margin-top: auto }`: la vista entera se apoyaba abajo con TODO el sitio libre encima. Con poco contenido eso era una franja vacía bajo la de arriba que se leía como pantalla rota: Today de Tony a 390 × 844, 370 px en blanco; Expense, 261; y a 1440 × 900, donde no hay pulgar, de 198 a 426. Ahora la vista empieza arriba, como en el resto de la app, en cualquier pantalla. Se probó un empujón con tope solo en el teléfono (hasta 48 px con el dedo como puntero): acercaba los botones 48 px y nada más, y a 360 × 740 la vista saltaba 48 px al pasar de Today, que llena la pantalla, a "Log a car", que no. Lo que queda bajo el pulgar es lo que se usa: la barra de abajo con el botón del día y las vistas, el aviso con Undo que flota sobre ella, y "Back"/"Next"/"Save the car" pegados abajo en un paso largo. A 390 × 844 "Yes, I got 700.00" queda en y=380, "Save expense" en y=454 y "Next: photos" en y=472: entre el 45 y el 56 % del alto, a media pantalla y al alcance del pulgar.) */ /* Lo que recibe el foco (Tab, o el campo que marca un error) no queda debajo de la barra de abajo ni de los botones pegados de "Log a car": el navegador deja este hueco al llevarlo a la vista. */ html:has(body.una-mano) { scroll-padding-bottom: calc(var(--alto-control, 4rem) + 5rem); } /* "Back" y "Next"/"Save the car" pegados abajo mientras se baja por un paso largo (las fotos): el pulgar no sube a buscarlos. Con el fondo de la tarjeta, para que lo que pasa por debajo no se lea a través. */ body.una-mano .pie-paso { position: sticky; bottom: calc(var(--alto-control, 4rem) + var(--e2)); z-index: 2; background: var(--panel); padding-top: var(--e2); margin-top: 0; } /* EL CDL: "Where did you drop it?" arriba, a 16 px de la franja, en cualquier pantalla. (Hasta el 1 oct 2026 la sección medía la primera pantalla y apoyaba los lugares abajo: a 1440 × 900 quedaban 190 px en blanco entre la franja y la pregunta, y 134 a 390 × 844. En el teléfono los lugares ya llenan la primera pantalla, de y=165 a y=654 a 390, y los de abajo quedan bajo el pulgar sin empujar nada.) */ body.una-mano #seccion-destinos > .titulo-vista { margin-top: 0; } } /* LA COLUMNA EN UNA PANTALLA ANCHA. La columna de 480 flotaba sobre el mismo crema de toda la ventana: solo las dos barras carbón decían dónde empezaba y acababa, y el contenido parecía pegado a nada. Fuera de la columna, el tono hundido del tema (la mesa), y el borde de 1 px con la línea de siempre: claro #E8E4DA dentro, #D8D3C6 fuera; oscuro #16191C y #0E1113; Sunlight blanco y #EFEDE7. Con sombras y no con borde ni con el fondo de : el borde le quitaba 2 px a la columna (dejaba de ser la del teléfono de 480), y el tema está en , así que no ve sus variables. Una sombra no suma al desborde ni recibe toques. Desde 32rem: más estrecho, la columna llega a los bordes de la pantalla. */ @media screen and (min-width: 32rem) { body.una-mano { box-shadow: 0 0 0 1px var(--linea), 0 0 0 100vmax var(--hundido); } } /* EL FOCO NO QUEDA DEBAJO DE LAS BARRAS (1 oct 2026, revisión de My account y Users). Con Tab, el navegador solo mueve la página si lo enfocado se sale de la ventana, y no sabe de las barras: la de arriba es `sticky` en las tres pantallas y la de secciones de la oficina es fija abajo en el teléfono y la tableta. Medido a 320 × 640: en Settings › My account "Change password" quedaba entero bajo la barra de abajo (44 de 44 px) y "Delete" de Users igual (48 de 48); con Shift+Tab, el campo de la clave bajo la de arriba (48 px) y "Cancel" (33); a 390, filas de Users tapadas de 6 a 48 px abajo y 41 arriba. scroll-padding en le dice al navegador qué parte de la ventana se ve de verdad. Un scroll-margin en lo que recibe Tab no basta: Chromium no lo mira si lo enfocado ya está dentro de la ventana (probado: seguían tapados). Arriba, --alto-pegado (lo publica apilarPegados, comun.js: 75 px en el teléfono, 71 en escritorio; el CDL y la entrada no lo llaman y vale el de su barra, 5rem). Los scroll-margin-top que ya había para lo mismo (`.tarjeta`, `[id^="seccion-"]`, `#tablero .ficha`, `#fallo-carga`, el chofer abierto en Drivers, `.cdl-quien`) se SUMAN a este relleno: se les restó para que cada uno siga cayendo en el mismo sitio. Abajo, el alto de la barra de la oficina; el chofer y el CDL ya lo dejan (`html:has(body.una-mano)`). */ @media screen { html { scroll-padding-top: calc(var(--alto-pegado, 5rem) + var(--e2)); } } @media screen and (max-width: 63.99rem) { html:has(> body[data-densidad="oficina"]) { scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + var(--e3)); } } /* ========================================================================== MY ACCOUNT (1 oct 2026). El dueño: "demos la opcion de que puedan cambiar sus usernames a todos ... y lo de la contraseña pongamos en configuracion no es necesario poner en el top de la app". Un bloque para las tres pantallas (htmlMiCuenta, comun.js): Settings › My account en la oficina, "My account" plegado al final de My cash del chofer y debajo de la semana del CDL. Dos filas, "Username juan [Change]" y "PIN [Change]"; el formulario se abre en su fila. Y en Users, "Turn off" y "Delete" con su segundo toque y el error en la fila. ========================================================================== */ /* Una fila por cosa, con divisoria como Users: rótulo de campo (16, 600, tinta suave), el valor en tinta y "Change" a la derecha. Un usuario largo se corta con "…" y el botón no se va de la fila (min-width: 0: sin él, la fila medía lo que el texto sin cortar y la página se corría a 320). */ .mi-cuenta { display: flex; flex-direction: column; min-width: 0; } .mi-cuenta .fila-cuenta { min-width: 0; } .mi-cuenta .fila-cuenta + .fila-cuenta { border-top: 1px solid var(--linea); } .mi-cuenta .linea-cuenta { display: flex; align-items: center; gap: var(--e3); min-height: 56px; min-width: 0; } .mi-cuenta .rotulo-cuenta { flex: none; font-weight: 600; color: var(--tinta-suave); } .mi-cuenta .valor-cuenta { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--tinta); } .mi-cuenta .linea-cuenta button { flex: none; margin-left: auto; } .mi-cuenta .hueco-cuenta { padding: var(--e2) 0 var(--e4); } .mi-cuenta .form-clave button { width: 100%; } /* La tapa del plegable del chofer y del CDL: "My account" y el usuario a la derecha, como "This week · 14 trips". El del CDL ya lo pinta su regla de la semana; el del chofer, esta. */ .mi-cara-plegada > summary .resumen-plegado { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--tinta-suave); } .mi-clave-plegada > summary .resumen-plegado { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Settings › My account con la forma de "The company": la tapa dice el usuario plegada y lo calla abierta (ya está en la fila); en el teléfono, una línea con "…". Y el aire de los grupos de abajo. */ #bloque-cuenta[open] > summary .pista { display: none; } #bloque-cuenta { margin-bottom: var(--e3); } @media (max-width: 44rem) { #bloque-cuenta > summary .pista { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } } /* USERS: "Turn off" y "Delete" uno al lado del otro; el segundo toque de "Delete" (la pregunta y sus dos botones) en la misma fila, y el 409 en rojo debajo, junto a los botones. */ .acciones-usuario { display: flex; flex-wrap: wrap; gap: var(--e2); } .confirmar-borrado { display: flex; flex-direction: column; gap: var(--e3); } .confirmar-borrado p { margin: 0; font-weight: 600; color: var(--tinta); } .confirmar-borrado .acciones { display: flex; flex-wrap: wrap; gap: var(--e2); } /* "DELETE {NOMBRE}" EN UNA LÍNEA (qa14). Con `.acciones > *` (flex: 1, 8rem) el botón partía el nombre en dos renglones en la rejilla de Users a 1440 ("Delete Test Dos / 1440oscuro"): la fila mide unos 380 px y se reparte con Cancel. Ahora el botón toma el ancho de su texto y, si no cabe junto a Cancel, Cancel baja a su propia línea; si ni solo cabe (un nombre de 40 letras a 320), corta con "…": el nombre entero está en la pregunta de arriba, que describe el botón. La altura es la de todo botón (--toque). */ .confirmar-borrado .acciones > [data-accion="borrar-si"] { flex: 1 1 auto; min-width: 0; max-width: 100%; } .confirmar-borrado .acciones > [data-accion="borrar-no"] { flex: 1 1 8rem; } .confirmar-borrado .texto-borrar { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .error-usuario { margin: 0; } /* "Nothing to clear. Juan Perez is at 0." no es un error: va en gris. */ .error-usuario.quieto { color: var(--tinta-suave); } /* "CLEAR TO 0" (2 oct 2026): la advertencia, en la misma caja que "Delete" (comparte .confirmar-borrado: una caja a la vez por fila). La lista de lo que se cierra, una linea por cosa; el neto es la unica cifra grande; el pie y la nota, en su peso normal. El boton rojo toma el ancho de su texto y corta con "…" como "Delete {nombre}". */ .confirmar-en-cero .aviso-local { margin: 0; } .confirmar-en-cero .aviso-local:not(.atencion) { color: var(--rojo-texto); } .confirmar-en-cero .vacio { font-weight: 400; color: var(--tinta-suave); } .lista-en-cero { margin: 0; padding-left: 1.2em; display: grid; gap: var(--e1); } .lista-en-cero li { overflow-wrap: anywhere; } .lista-en-cero li.sub { list-style: none; margin-left: -.2em; color: var(--tinta-suave); font-size: var(--t-chico); } /* Tras el 409 "the numbers changed": la linea que cambio, marcada (qa41). */ .lista-en-cero li.cambio { font-weight: 700; color: var(--tinta); } .lista-en-cero .marca-cambio { font-size: var(--t-micro); font-weight: 700; text-transform: none; padding: 0 var(--e1); border-radius: var(--radio-chico); background: var(--hundido); color: var(--acento-texto); } .confirmar-borrado p.neto-en-cero { font-size: var(--t-medio); font-weight: 700; } .confirmar-en-cero label { display: grid; gap: var(--e1); font-weight: 600; } .confirmar-borrado .acciones > [data-accion="en-cero-si"] { flex: 1 1 auto; min-width: 0; max-width: 100%; } .confirmar-borrado .acciones > [data-accion="en-cero-no"] { flex: 1 1 8rem; } /* EL AVISO DE SALDAR, CON AIRE DEBAJO (qa19). Tras un 409 de "Settle and save", llevarAlAviso (oficina.js) deja abajo de la ventana los botones del formulario, o el aviso dentro de la fila ya saldada. En el teléfono el scroll-padding-bottom de ya los separa de la barra de secciones; en escritorio no hay barra y quedaban pegados al borde de la ventana (medido a 1440: "Settle and save" tocando el borde de abajo). Este margen se SUMA al relleno de , como los scroll-margin-top de arriba. */ .liquidar-form .acciones, .liquidacion > .aviso-local { scroll-margin-bottom: var(--e4); } /* CDL PLACES AND PRICES, LO QUE SE VIENE A HACER PRIMERO (1 oct 2026). El dueño no encontraba cómo cambiar un precio (estaba al final de Settings, con el campo vacío después de las flechas y "Turn off"). Dentro de un lugar abierto va primero el precio (oficina-cdl.js): "Price of a trip" con el de hoy escrito, "Starting on" y "Save the price" en amarillo; debajo la historia en chico, el nombre, y al final el orden y apagarlo, separados por una raya porque casi nunca se tocan. El aviso de lo que pasó va DENTRO del formulario, en su propia línea debajo del botón: el formulario es una fila flex que parte, y sin `flex-basis: 100%` el aviso quedaba de 8rem al lado del botón. */ .destino-cdl form .aviso-local { flex: 1 1 100%; margin: 0; } .destino-cdl .acciones-destino { border-top: 1px solid var(--linea); padding-top: var(--e2); } #form-destino-cdl .aviso-local { margin-top: var(--e2); } /* "Price for all trips to River Front", en el "Set price" de un viaje: su propia línea debajo de Save y Cancel, a la izquierda, con el toque de 44 de los botones de la fila (el .enlace suelto devuelve su relleno a la línea con márgenes negativos, que en una fila flex montaban la de arriba). La línea la toma su envoltorio (.fila-a-lugar), no el botón: con el botón a `flex: 1 1 100%` se tocaba en 994 px de ancho a 1440 y un clic en el hueco a la derecha del texto se iba a Settings (qa30). */ .cdl-v form .fila-a-lugar { flex: 1 1 100%; display: flex; } .cdl-v form .enlace.a-lugar { justify-content: flex-start; text-align: left; min-height: 44px; margin-block: 0; padding-block: 0; } /* "Taxes this week", lo primero de la tarjeta de pago de un CDL (1 oct 2026). En escritorio el campo va en la línea de su rótulo y, con el foco (que ahora cae ahí al abrir el CDL), el anillo montaba la última letra ("Taxes this wee|k"). En el teléfono el campo baja a su línea: sin margen. */ @media screen and (min-width: 44.01rem) { #form-cdl-pagar input[name="impuestos"] { margin-inline-start: var(--e2); } } /* ========================================================================== EL DÍA DEL CDL (1 oct 2026). El dueño: "a los CDL tambien agreguemos la opcion de start day y end day ... solo para poder controlar y que no metan mas viajes". Bloque propio al final, sin tocar los de arriba. 1. EL TELÉFONO DEL CDL (cdl.html, cdl.js). La barra de abajo es la del chofer de grúa (`.control`, carbón, dentro de la columna de 480 por `body.una-mano .control`), con un solo botón: "Start my day" grande y amarillo (64 px, 21.6 px de letra), o "End my day" con borde y del tamaño de cualquier botón (48 px), con el segundo toque en rojo (`button.enorme.confirmando`, más arriba). Las mismas medidas que `#accion` del chofer: no se reusa el id porque sus reglas lo esconden fuera de la vista Today (`body:not([data-vista="hoy"]) #accion`), y el CDL no tiene vistas. Sin la fila de vistas debajo, la barra lleva su propio hueco abajo (el de la barra de gestos). El aviso con Undo y la franja de sin conexión flotan ENCIMA de la barra, como en el chofer (--alto-control lo mide cdl.js; 0 sin barra). 2. LA LÍNEA DEL DÍA (sin empezar o terminado) va donde estaban los lugares: una línea en tinta, 18 px y 600, sin tarjeta: es lo único que hay que leer arriba. 3. LA OFICINA (CDL trips): el día de cada CDL en chico debajo de su nombre ("Working since 7:02 AM"), texto quieto en --tinta-suave; las horas de cada día bajo su fecha; y debajo del nombre del CDL abierto, la línea con "End their day" / "Reopen day". ========================================================================== */ #control-cdl { padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom, 0px)); } #dia-cdl { min-height: var(--toque); font-size: 1rem; letter-spacing: 0; } #dia-cdl[data-accion="empezar"] { min-height: 4rem; font-size: 1.35rem; } /* "End my day" no grita: borde, crema sobre carbón (13:1), como el del chofer de grúa. El segundo toque (.confirmando) sigue en rojo. Con el peso visual (fusión del 2 oct 2026) el mismo secundario que el chofer: borde de control de la barra, #6E716D (3.57:1 sobre carbón), 1.5 px y 600; con 2 px de #8C8F8A y 700 pesaba como "Start my day". */ #dia-cdl[data-accion="terminar"]:not(.confirmando) { background: transparent; color: var(--crema); border: 1.5px solid #6E716D; font-weight: 600; } /* EL SEGUNDO TOQUE SIGUE EN ROJO CON EL RATÓN ENCIMA. `button.principal:hover` (más abajo en la hoja, la misma fuerza) le ganaba a `button.enorme .confirmando`: medido a 390 en el CDL con el puntero sobre el botón, "Tap again to end the day" quedaba blanco sobre amarillo, 1.34:1. Vale igual para el "End my day" del chofer de grúa, que tenía lo mismo. */ button.enorme.confirmando:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; } /* Con la barra a la vista: el aviso que flota, encima de ella; el hueco de abajo de

deja ver la última fila por encima de los dos; y la franja de sin conexión, encima de la barra (y el aviso, encima de la franja). */ body.una-mano:has(#control-cdl:not([hidden])) .aviso-flotante { bottom: calc(var(--alto-control, 5rem) + var(--e2)); } body.una-mano:has(#control-cdl:not([hidden])) main { padding-bottom: calc(var(--alto-control, 5rem) + 5.5rem); } body.una-mano:has(#control-cdl:not([hidden])) .sin-red { bottom: var(--alto-control, 5rem); } body.una-mano:has(#control-cdl:not([hidden])):has(.sin-red:not([hidden])) .aviso-flotante { bottom: calc(var(--alto-control, 5rem) + 4.25rem); } /* 2. La línea del día en el sitio de los lugares. */ .linea-dia-cdl { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: var(--tinta); } .linea-dia-cdl:focus { outline: none; } .linea-dia-cdl:focus-visible { outline: 3px solid var(--foco, var(--acento)); outline-offset: 2px; } #t-donde:focus { outline: none; } #t-donde:focus-visible { outline: 3px solid var(--foco, var(--acento)); outline-offset: 2px; } /* 3. La oficina. El día debajo del nombre, en su propia línea. En el papel de "lo de debajo" del peso visual (--t-meta, 14/400 gris; iba en 500, que la escala de cuatro pesos ya no usa). */ .cdl-uno-dia { display: block; margin-top: 2px; font-size: var(--t-meta); font-weight: 400; color: var(--tinta-suave); } /* Las horas de un día, debajo de su fecha (segunda fila de la cabecera, a la altura del texto de la fecha, después del triángulo). */ .cdl-dia > summary .cdl-dia-horas { grid-column: 1 / -1; grid-row: 2; padding-left: calc(6px + var(--e2)); font-size: var(--t-meta); font-weight: 400; color: var(--tinta-suave); min-width: 0; overflow-wrap: anywhere; } .cdl-viajes-dia > .cdl-v.vacio { display: block; border-top: 1px dashed var(--linea); } /* La línea del CDL abierto con su botón: el estado a la izquierda y "End their day" o "Reopen day" a la derecha; en el teléfono, si no caben, el botón baja a su línea. El "no" del servidor, debajo a lo ancho. */ .cdl-dia-control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); margin-top: var(--e2); } .cdl-dia-estado { margin: 0; flex: 1 1 12rem; min-width: 0; font-weight: 600; color: var(--tinta-suave); } .cdl-dia-estado:focus { outline: none; } .cdl-dia-estado:focus-visible { outline: 3px solid var(--foco, var(--acento)); outline-offset: 2px; } .cdl-dia-control > button { flex: none; } .cdl-dia-control > .aviso-local { flex: 1 1 100%; } @media screen and (min-width: 44.01rem) { .cdl-dia-control { max-width: 64rem; } } /* Con las horas debajo, las dos filas de la cabecera de un día van juntas: con el hueco de siempre (16 px) la hora quedaba lejos de su fecha. */ .cdl-dia > summary:has(.cdl-dia-horas) { row-gap: 2px; } /* ========================================================================== PESO VISUAL · 1. SUPERFICIES, Y EL AMARILLO SOLO PARA LO QUE SE TOCA (1 oct 2026). El dueño: "necesito mejorar el diseño y el contraste y peso visual de las cosas, ya que no se puede distinguir facil y rapido las cosas de la app". Medido antes (Home, Pay, Cash, Drivers, CDL trips y el chofer, 390 y 1440, claro y oscuro): la tarjeta daba 1.11:1 contra el fondo y su borde 1.42 (oscuro 1.09 y 1.38): no se veía dónde empieza un bloque. Y el amarillo decía cuatro cosas a la vez: lo que se toca (Save, Pay in cash), lo elegido (Pay|Cash, el filtro puesto, la sección activa), lo que espera (No price yet, Not counted) y el chofer trabajando; Cash a 1440 en oscuro tenía 10 cosas amarillas. Decisiones del dueño (1 oct): AMARILLO SOLO PARA LO QUE HAY QUE TOCAR; lo ELEGIDO en tinta (--elegido-fondo/-texto); lo que ESPERA en GRIS con el reloj de arena (--espera, icono `espera`); el rojo, lo que traba. Una banda a la izquierda solo dice dos cosas: roja, traba a alguien; gris, espera algo. Ni "trabajando", ni "elegido", ni "formulario abierto", ni "grúa llena" llevan banda. ========================================================================== */ /* LA TARJETA SE VE COMO TARJETA. El borde de la tarjeta es --borde-tarjeta (2.35:1 sobre la crema, 2.81 sobre el carbón, 5.1 al sol); --linea queda para las divisorias DE DENTRO, tranquilas a propósito. `main` delante: la banda de estado de cada tarjeta (`.entrega.reclamado`, `.ficha.descuadre`, 0,2,0) sigue ganando a la izquierda. */ main :is(.tarjeta, .bloque, .ficha, .viernes, .entrega, .grupo-tips, .casa-lista, .caja-todos, .pago-semana, .plegado-hoy, .mi-cara-plegada, .chofer-informe, .liquidacion, .liquidar-form) { border-color: var(--borde-tarjeta); } /* LO ELEGIDO, EN TINTA. La pestaña Pay|Cash, el filtro puesto, la opción del carro marcada (Parts), el lugar del CDL con viajes de hoy, el interruptor encendido. Crema sobre carbón en claro (16.7:1), carbón sobre crema en oscuro, blanco sobre negro al sol. El estado lo dicen también `aria-pressed`/`aria-current`/`:checked`, no solo el color. */ .conmutador button.activo, .conmutador button[aria-pressed="true"], .filtros button.activo, .filtros button[aria-pressed="true"] { background: var(--elegido-fondo); border-color: var(--elegido-fondo); color: var(--elegido-texto); } .conmutador button.activo:hover, .filtros button.activo:hover { color: var(--elegido-texto); } .filtros button.activo .cuantos { color: inherit; } .piezas label:has(input:checked) { background: var(--elegido-fondo); border-color: var(--elegido-fondo); color: var(--elegido-texto); } .chequeos label:has(input:checked) { border-color: var(--tinta); } .chequeos input[type="checkbox"]:checked { background: var(--elegido-fondo); border-color: var(--elegido-fondo); } .chequeos input[type="checkbox"]:checked::after { background: var(--elegido-texto); } button.destino .hoy { background: var(--elegido-fondo); color: var(--elegido-texto); } /* "Sunlight" encendido, en la barra carbón: lo elegido es la crema con carbón (16.7:1), el negativo de la barra; el amarillo era el de "tocar". */ .barra button[aria-pressed="true"] { background: var(--crema); border-color: var(--crema); color: var(--carbon); } /* LA SECCIÓN ACTIVA EN LA COLUMNA DE ESCRITORIO: píldora carbón con el nombre en amarillo, como la barra del teléfono. Era amarillo al 14 % sobre la crema: #EBE1BB sobre #E8E4DA, 1.03:1 (el fondo no se veía; solo el texto dorado lo decía). Ahora la píldora da 15.4:1 contra la crema y el amarillo 12.1:1 sobre ella. En oscuro la columna ya es carbón: la píldora sube a #2E3439 (1.4:1) y el amarillo, 10.4:1. */ @media (min-width: 64rem) { .pestanas button.activa, .barra-pestanas button.activa { background: var(--carbon); color: var(--acento); font-weight: 800; } [data-tema="oscuro"] .barra-pestanas button.activa, [data-densidad="oficina"]:not([data-tema="claro"]) .barra-pestanas button.activa { background: #2E3439; } } /* LO QUE ESPERA, EN GRIS CON EL RELOJ DE ARENA. Era amarillo: la entrega sin contar de Cash, su cifra de arriba, el lugar del CDL sin precio, los chips de Reports › Pay ("700.00 NOT COUNTED", "7 WITHOUT TIP"), la línea de aviso de Drivers. Gris de 6.6:1 en claro y 7.3:1 en oscuro; la banda, 3.9 y 3.6. */ .entrega.esperando { border-left-color: var(--espera-banda); } #cifras-entregas .titular:has(.cifra.pendiente) { border-left-color: var(--espera-banda); } .destino-cdl.sin-tarifa { border-left-color: var(--espera-banda); } .destino-cdl.sin-tarifa .precio-hoy { color: var(--espera); display: inline-flex; align-items: center; gap: 6px; } .chip-abierto.espera { background: transparent; border-color: var(--espera-banda); color: var(--espera); } .chip-abierto { display: inline-flex; align-items: center; gap: 4px; } .chip-abierto .icono, .destino-cdl .precio-hoy .icono { width: 14px; height: 14px; flex: none; } .acciones-nota .chip-abierto { display: inline-flex; } .aviso-ficha.espera { color: var(--espera); } .entrega header .codigo:has(> .icono)::before { content: none; } .entrega header .codigo > .icono { width: 14px; height: 14px; flex: none; } .entrega.esperando header .codigo { color: var(--espera); } /* UNA BANDA SOLO PARA LO QUE TRABA O ESPERA. Drivers: la banda sale del mismo estado que la línea de aviso (`estadoDeFicha`, oficina.js); antes era roja con cualquier efectivo sin contar mientras la línea lo decía en amarillo, y amarilla para "trabajando" o "grúa llena". */ main .ficha.chofer-informe:is(.andando, .tope, .descuadre) { border-left-color: var(--borde-tarjeta); } main .ficha.chofer-informe.estado-grave { border-left-color: var(--rojo); } main .ficha.chofer-informe.estado-espera { border-left-color: var(--espera-banda); } /* Un formulario abierto en el riel (Hand over or take back cash) no es un estado: sin la banda amarilla. */ .riel .bloque { border-left: 1px solid var(--borde-tarjeta); } /* Un aviso que pregunta ("Already saved… tap again", "Truck full") espera una respuesta: gris, no amarillo. */ .aviso.atencion, .aviso-local.atencion { border-left-color: var(--espera-banda); } /* Sin estado, la ficha no lleva banda: el ancho de 3 px de --banda en --linea-fuerte se leía como "algo" en Luis, Marco y Tony. La banda de estado, 4 px (la de Home › To do). */ main .ficha.chofer-informe { border-left-width: 1px; } main .ficha.chofer-informe:is(.estado-grave, .estado-espera) { border-left-width: 4px; } /* EL PUNTO DE "HACE FALTA" en gris, no en amarillo: marca un campo, no algo que se toca. --tinta-suave: 6.6:1 sobre la crema, 7.3:1 sobre el carbón. */ label:has(> [required]) > .pide, label:has(> [required])::before, .pregunta-titulo > legend::before { background: var(--tinta-suave); } /* EL TEXTO DE MUESTRA DE UN CAMPO GRANDE. `input::placeholder` ya iba en --tinta-tenue, pero el textarea no tenía regla y salía el gris de Chromium, #757575: 3.08:1 sobre el hundido en "Log a car" (el mensaje) y en "Note for the office". Con --tinta-tenue, 5.1:1 (claro), 6.0 (oscuro), 9.2 (sol). */ textarea::placeholder { color: var(--tinta-tenue); opacity: 1; } input::placeholder { opacity: 1; } /* "No price yet" de un viaje y la fila del CDL sin precio en la tabla de la semana: es lo que espera un precio, igual que el lugar sin precio de Settings (un estado, un color, un icono y una palabra en toda la app). */ .cdl-v-precio.falta { color: var(--espera); display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; } .cdl-v-precio.falta .icono { width: 14px; height: 14px; flex: none; } table.viajes tr.falta-precio th[scope="row"], table.viajes tr.falta-precio { border-left-color: var(--espera-banda); } /* `marcada` era "esta tarjeta importa" con la banda amarilla (el detalle de Cars and numbers, el formulario de "Somewhere else…" del CDL): no es un estado, así que sin banda. */ .tarjeta.marcada { border-left-width: 1px; border-left-color: var(--borde-tarjeta); } /* EL CHIP ROJO CON FONDO OPACO. Era rojo al 12 % sobre el panel: con el panel nuevo en oscuro, "cash dispute" bajaba a 4.38:1 (#F06A5B sobre #3A2C2F). Con el fondo del estado, opaco: 4.76 (oscuro), 6.05 (claro). */ .chip-abierto.rojo { background: var(--rojo-fondo); border-color: var(--rojo); color: var(--rojo-texto); } /* "Has title" en la tarjeta del carro del chofer (y "comprado" en la guía) iba en una pastilla amarilla: es un dato, no algo que se toca. En tinta con el borde de un control. */ .etiqueta.comprado { background: transparent; border-color: var(--linea-control); color: var(--tinta); } /* LOS BORDES DE LO QUE SE TOCA, 3:1 O MÁS (WCAG 1.4.11). Los chips de filtro sin elegir y la mitad apagada de Pay|Cash iban con --linea (1.42:1 en claro, 1.63 en oscuro); los botones secundarios, con --borde-boton (arriba, en el botón base). */ .filtros button:not(.activo), .conmutador button:not(.activo):not([aria-pressed="true"]) { border-color: var(--borde-boton); } /* EL PRINCIPAL EN CLARO Y AL SOL, CON CONTORNO CARBÓN. Amarillo sobre la crema da 1.15:1 y sobre el blanco del sol 1.46: el botón se distinguía solo por el tono. Con 2 px de carbón (13.9:1 sobre la crema, 21 al sol) se lee su forma; amarillo con carbón es la pareja de una grúa. En oscuro el amarillo ya da 12:1 contra el carbón y no lo lleva. */ [data-tema="claro"] :is(button.principal, .boton.principal):not(:disabled):not(.control *), [data-densidad="campo"]:not([data-tema="oscuro"]) :is(button.principal, .boton.principal):not(:disabled):not(.control *), [data-sol] :is(button.principal, .boton.principal):not(:disabled):not(.control *) { border: 2px solid var(--carbon); } /* (Ni el apagado, que lleva su borde gris de "no se puede", ni el de la barra de abajo del chofer, que ya es carbón: ahí el contorno carbón daba 1:1 en "Start my day" apagado.) */ @media (hover: hover) { [data-tema="claro"] button.principal:hover, [data-densidad="campo"]:not([data-tema="oscuro"]) button.principal:hover, [data-sol] button.principal:hover { border-color: var(--carbon); } } /* LOS BOTONES DE LA BARRA DE ARRIBA ("Log out", "Sunlight", el tema): su borde #3A4045 daba 1.68:1 contra el carbón. #6E716D, 3.57:1: se ve el botón, y sigue pesando menos que el contenido (crema sobre carbón). */ .barra button, .barra button.suave, .barra button.principal { border-color: #6E716D; } .barra button[aria-pressed="true"] { border-color: var(--crema); } /* La fecha que pliega un día de Tips (`button.dia-carros`) es una fila con su raya arriba: en oscuro, --linea-fuerte daba 2.32:1 sobre el panel nuevo. Con el borde de un campo, 3.42 (oscuro) y 4.69 (claro, donde el carbón de antes, 16.8:1, pesaba como un título). */ button.dia-carros { border-top-color: var(--linea-control); } /* ========================================================================== PESO VISUAL · 2. CUATRO BOTONES, CUATRO PESOS (1 oct 2026) Cada botón dice cuánto importa con su forma, de más a menos: - PRINCIPAL: amarillo con texto carbón (y contorno carbón en claro y al sol, ver la parte 1). Uno por zona: lo que se viene a hacer. - SECUNDARIO (`.suave`): sin relleno, borde --borde-boton de 1.5 px. - TRANQUILO (`.tranquilo`, nuevo): sin borde ni relleno, subrayado, 700. Lo que se usa poco y no decide nada: "Download for Excel", "Show N more", "Void" de un viaje o una línea del CDL, "Remove" del viaje propio del CDL. Con borde pesaban como "Settle up" o "Add it" (a 1440 "Void" iba con la misma píldora que la cifra a pagar). - PELIGRO (`.peligro`): borde y texto rojos; el segundo toque, relleno rojo con texto blanco (4.71:1), como "End my day". ========================================================================== */ button.tranquilo, .boton.tranquilo { border-color: transparent; background: transparent; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 700; } /* El segundo toque de lo peligroso, relleno rojo: "Delete Juan Perez" de Users, "Tap again" de Discard (Log a car) y "Tap again to remove" del CDL. Antes solo cambiaba el color del borde, y el segundo toque se veía igual que el primero. */ button.peligro[data-accion="borrar-si"], .cabeza-carro > .tirar-carro.peligro, button.tranquilo.peligro { background: var(--rojo); border-color: var(--rojo); color: #FFFFFF; text-decoration: none; } /* "Directions" (el mapa) era el único enlace de contacto con borde amarillo: es un secundario más, como Call. */ .contacto a.mapa { border-color: var(--borde-boton); color: var(--tinta); } /* EL BRILLO AL PASAR, SOLO CON RATÓN. En el teléfono el :hover se queda pegado tras el toque: cualquier botón tocado seguía más claro (el `brightness(1.18)` de todos), y "Directions", los montos de la hoja y las cuentas de la entrada se quedaban con el borde AMARILLO hasta tocar otra cosa: amarillo en algo que ya no se toca. */ @media (hover: none) { button:hover, .boton:hover { filter: none; } .contacto a:hover { border-color: var(--borde-boton); color: var(--tinta); } .contacto a.wasap:hover { border-color: var(--verde); color: var(--verde-texto); } .montos button:hover, .cuentas .cuenta:hover { border-color: var(--borde-boton); color: var(--tinta); } } /* Los montos de un tip y las cuentas de la entrada son secundarios: el borde de secundario, no el carbón de --linea-fuerte (en claro pesaban como el principal). */ .montos button, .cuentas .cuenta { border-color: var(--borde-boton); } @media (hover: hover) { .contacto a:hover, .montos button:hover, .cuentas .cuenta:hover { border-color: var(--tinta); color: var(--tinta); } } /* EL TRIÁNGULO DE UNA FILA DE TIPS EN EL TELÉFONO, 44 × 44. Medía 36 de ancho (la columna de 2.25rem) a 320 y 390: bajo el mínimo de toque. La columna crece a 2.5rem y el botón toma también el relleno de la fila (4 px): 44 de ancho sin quitarle más que 4 px a lo de al lado. */ @media (max-width: 44rem) { .fila-tip { grid-template-columns: 2.5rem minmax(0, 1fr) 5.5rem auto; } .fila-tip .abrir-tip { width: calc(100% + var(--e1)); margin-left: calc(-1 * var(--e1)); } } /* "No price yet" de un día de CDL trips iba en amarillo (--acento-texto): espera un precio, así que gris con el reloj, como el viaje y el lugar. */ .cdl-dia-monto.falta { color: var(--espera); display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; } .cdl-dia-monto.falta .icono { width: 14px; height: 14px; flex: none; } /* LOS RESTOS DE AMARILLO EN COSAS QUE NO SE TOCAN (salieron al buscar `color: var(--acento-texto)` regla por regla): la columna Tip de la lista de carros, lo que lleva un grupo de Tips, la cifra de "Not counted yet" de Cash y cuántas notas tiene el día del chofer. Son cifras o datos: en tinta (la cifra) o en su gris (el dato). Siguen en --acento-texto los enlaces (`a`, `.enlace`), que sí se tocan. */ .carros .n.tip, .grupo-tips .cabeza-grupo .lleva b, .titular .cifra.pendiente { color: var(--tinta); } .nota-dia .cuantas-notas { color: var(--tinta-suave); } /* ========================================================================== PESO VISUAL · 3. UNA ESCALA POR PAPEL, CUATRO PESOS (1 oct 2026) Medido antes: hasta 23 estilos de texto en la primera pantalla de Cash a 1440, seis pesos (400, 500, 600, 700, 800 y el 900 que salía de un dentro de un 600), y la cifra más grande no era la del trabajo de la pantalla: en Pay, cuatro cifras de 30 px antes de Settle up; en Home, "2,110.00" y "115" a 22 px por encima de To do; en Drivers, cada saldo a 18.4/900 por encima del nombre. La escala va por PAPEL, no por tamaño suelto: --t-pantalla el título de la pantalla (24 a 390, 28 a 1440), 700 --t-bloque el título de un bloque (To do, Settle up, Pay), 18/700 --t-fila el nombre de una fila, 16/600 --t-rotulo el rótulo de una cifra o un campo, 14/600, gris --t-meta lo de debajo (la hora, quién), 14/400, gris --t-estado los estados de dinero en mayúsculas, 12/700 --t-cifra-heroe UNA por pantalla, la de su trabajo: 36 a 390, 48 a 1440, 800, con "$" chico (htmlMonto, comun.js) --t-cifra-clave las cifras de apoyo, 24/700 --t-cifra-fila la de cada fila, 16/700 Cuatro pesos: 400, 600, 700 y 800. Toda cifra en tabular-nums. El chofer no cambia de escala (su héroe ya es el efectivo, 41.6 px); sus cifras héroe sí llevan el "$". ========================================================================== */ :root { --t-pantalla: clamp(1.5rem, 1.3rem + .8vw, 1.75rem); --t-bloque: 1.125rem; --t-fila: 1rem; --t-rotulo: .875rem; --t-meta: .875rem; --t-estado: .75rem; --t-cifra-heroe: clamp(2.25rem, 1.9rem + 1.6vw, 3rem); --t-cifra-clave: 1.5rem; --t-cifra-fila: 1rem; } /* La escala vieja de la oficina, plegada a la nueva: 12.8 y 13.76 a 14, y 18.4 a 18 (de 10 tamaños por pantalla a 6). Solo en la oficina: el chofer tiene su letra de 18 y su escala. */ [data-densidad="oficina"] { --t-micro: .875rem; --t-chico: .875rem; --t-medio: 1.125rem; } @media screen { /* El título de la pantalla de la oficina, 700 (iba en 600, como un rótulo más). */ [data-densidad="oficina"] main :is(h2.display, h2.titulo-vista) { font-size: var(--t-pantalla); font-weight: 700; } /* EL TÍTULO DE UN BLOQUE, 18/700 EN TINTA. To do, This week y Working now iban a 16, el tamaño de una fila: no se veía dónde empieza cada bloque. "Pay" de un CDL iba en gris a 16 y el pliegue "Add a charge" de dentro, a 18.4: lo de dentro pesaba más que su título. */ .casa-cabeza h3, .liquidar-semana .rotulo-bloque, .pago-cdl > h4, .cdl-dias > h4 { font-size: var(--t-bloque); font-weight: 700; color: var(--tinta); } main .bloque > summary .que { font-size: var(--t-bloque); font-weight: 700; } /* Un pliegue DENTRO de una tarjeta nunca pesa más que el título de la tarjeta: 16/600. */ main :is(.tarjeta, .bloque, .viernes, .ficha) .bloque > summary .que { font-size: var(--t-fila); font-weight: 600; } /* LA CIFRA HÉROE: Settle up en Pay y "Remaining balance, all drivers" en Cash. 36 a 390 y 48 a 1440, 800. La de Settle up era 30, igual que las cuatro de "Driver pay this week" de encima. */ .saldar-cifra, .caja-todos > .cifra { font-size: var(--t-cifra-heroe); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; } /* Las cifras de apoyo de Pay (lo que se paga en la semana), 24/700: se leen, pero la que manda es la de Settle up. Sus rótulos, todos iguales (14/600 en gris; el de los choferes iba a 17/700 en tinta). */ .pago-fila .cifra, .pago-choferes .cifra, .pago-semana:has(.pago-cdl) .pago-fila .cifra { font-size: var(--t-cifra-clave); font-weight: 700; line-height: 1.15; } .pago-choferes .rotulo { font-size: var(--t-rotulo); font-weight: 600; color: var(--tinta-suave); } /* HOME NO TIENE HÉROE: es un resumen que lleva a cada sitio. Lo primero es To do; las cifras de This week, 18/700 (iban a 22/800 y 18.4/800: la más grande de Home era "2,110.00", que no pide nada). A 17 px y no 18: en claro, con el panel más claro que el fondo, 18/700 sobre el panel le ganaba por contraste al título "To do" (18/700 sobre la crema). */ .casa-cifra > .cifra, .casa-par .cifra { font-size: 1.0625rem; font-weight: 700; } /* La fecha de Home, como cabecera chica: "Today" queda para el lector de pantalla (repetía "Home" de la barra). */ .casa-titulo { justify-content: flex-start; } .casa-fecha { font-size: var(--t-rotulo); } /* Cash: las dos cuentas de arriba (Not counted yet, Disputed) no se tocan ni son el trabajo de la pantalla: de 30.4/600 a 18/700. */ #cifras-entregas .titular .cifra, [data-densidad="oficina"] #cifras-entregas .titular .cifra { font-size: var(--t-bloque); font-weight: 700; } /* DRIVERS: el nombre es lo que se busca (24/600 a 1440 y 18 en el teléfono), 18/700 en los dos; el saldo de cada uno, 18/700 y no 18.4/900 (el dentro de un 600 salía en 900). */ #tablero details.ficha > summary .quien-es .nombre { font-size: var(--t-bloque); font-weight: 700; } .resumen-chofer b { font-size: var(--t-bloque); font-weight: 700; } /* CDL TRIPS: el nombre del CDL abierto es el título de lo de debajo (su pago, sus días): 22/700, más que un bloque (18) y menos que la pantalla. A 18 empataba con el pliegue "As on the paper sheet". */ .cdl-quien { font-size: 1.375rem; font-weight: 700; } /* CDL: la cifra de un día, 700 (iba en 800, más que el nombre del día); la de cada fila de la cuenta, 16/700; el total, la clave de la tarjeta. */ .cdl-dia-monto { font-weight: 700; } .pago-cdl .cuenta td.n { font-size: var(--t-cifra-fila); font-weight: 700; } .pago-cdl .cuenta tr.total td { font-size: var(--t-cifra-clave); font-weight: 800; } /* CUATRO PESOS. Un o es "bolder": dentro de un 600 salía en 900. Va en 700 (la regla de una clase le gana: la cifra héroe sigue en 800). Los 500 que quedaban (rótulos y datos en gris) pasan a 400. */ b, strong { font-weight: 700; } .circulo, .carro > summary, .carros .carro > summary .n.ofrecido, .carro-chofer .donde, table.viajes th[scope="row"] .precio, table.viajes td.cuenta, .tabla-resumen-cdl .antes, .cdl-uno, .cdl-uno-nombre small, .cdl-quien-semana, .cdl-v-lugar small, .cdl-v.anulado .cdl-v-lugar, .cdl-v.anulado .cdl-v-precio, #cdl-detalle h4, .aviso-ficha.solo-dato, .filtro-puesto, .situacion-barra > span:last-child, .usuario .chapa, .cuentas .cuenta .papel, .barra .quien, main.entrada .pedido-hecho .ayuda-campo { font-weight: 400; } /* Los estados de dinero en mayúsculas ("DISPUTED", "NOT COUNTED YET", "OPEN CLAIM"): 12/700 con .06em (iban en 500 con .14em: finos y separados, se leían peor que la palabra de al lado). */ .entrega header .codigo, .reclamo > .codigo, .confirmar.reclamado > h2.codigo { font-size: var(--t-estado); font-weight: 700; letter-spacing: .06em; } .tarjeta.confirmar > h2.codigo { font-weight: 600; } /* TODA CIFRA, EN COLUMNA: 1 y 9 del mismo ancho. */ .cifra, .n, .saldar-cifra, .monto, .resumen-chofer b, .cdl-dia-monto, .cdl-v-precio, .caja-por-chofer b { font-variant-numeric: tabular-nums; } /* EL "$" DE LA CIFRA HÉROE (htmlMonto). Chico (.55 de la cifra) y en gris, arriba como un exponente; los centavos a .62. Lo que se lee de lejos son los dólares. A 36 px el "$" mide 19.8 en 700: texto grande (3:1), y el gris da 6.6:1 sobre la crema y 6.0 sobre el panel oscuro. */ .monto { white-space: nowrap; } .monto .moneda { font-size: .55em; font-weight: 700; color: var(--tinta-suave); vertical-align: .62em; margin-right: .06em; letter-spacing: 0; } .monto .centavos { font-size: .62em; font-weight: inherit; letter-spacing: 0; } /* El signo de My cash ("+150.00") a .7: entero, pesaba como los dólares y dejaba el "$" chico perdido entre los dos. */ .monto .signo { font-size: .7em; margin-right: .04em; } } /* ========================================================================== PESO VISUAL · 4. CADA ESTADO CON SU COLOR, SU ICONO Y SU PALABRA (1 oct 2026). Un estado se ve igual en toda la app: lo que traba, rojo con la alerta; lo que espera, gris con el reloj de arena; lo que cuadra, verde con el visto. La dirección del dinero no es un estado: forma y palabra, nunca rojo o verde. Y toda fila que se toca lleva su marca: › lleva a otro sitio, ▸ abre aquí. ========================================================================== */ /* EL TRAZO DE LOS ICONOS, POR TAMAÑO (iconos.js ya no lo fija): a 16 px un trazo de 2 quedaba flaco al lado de una palabra en 700. */ .icono { stroke-width: 2; } .icono.i20 { width: 20px; height: 20px; stroke-width: 2.25; flex: none; } .icono.i16 { width: 16px; height: 16px; stroke-width: 2.5; flex: none; } .casa-ico { stroke-width: 2.25; } /* HOME › TO DO: lo que traba, además de la banda, con el fondo de su estado (--rojo-fondo, opaco: la tinta da 15.1:1 en claro y 11.3 en oscuro). Era una línea más de la lista con una raya: "Pedro Solis disputes 200.00" pesaba lo mismo que "115 cars need a tip". */ button.casa-fila.grave { background: var(--rojo-fondo); } @media (hover: hover) { button.casa-fila.grave:hover { background: var(--rojo-fondo); filter: brightness(.97); } } /* WORKING NOW lleva a la ficha del chofer: su › como To do. Y "Cash dispute" en gris: ya está arriba en To do con su banda roja (decir una cosa una vez por pantalla). */ button.casa-chofer { grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr) 16px; } .casa-estado.grave { color: var(--tinta-suave); font-weight: 400; } /* CASH: el estado de cada entrega con su icono (la rayita se fue): la disputa en rojo, lo contado en verde, lo que espera en gris. */ .entrega.reclamado header .codigo { color: var(--rojo-texto); } .entrega:is(.confirmado, .devuelto) header .codigo > .icono { color: var(--verde-texto); } /* Las dos cuentas de arriba de Cash, cada una con su estado: Not counted yet espera (reloj gris, cifra en tinta), Disputed traba (alerta roja). Las dos iban con la misma cifra de 30 px; en oscuro, del mismo color. */ #cifras-entregas .titular .rotulo { display: inline-flex; align-items: center; gap: 6px; } #cifras-entregas .titular:has(.cifra.pendiente) .rotulo .icono { color: var(--espera); } #cifras-entregas .titular:has(.cifra.falta) .rotulo .icono { color: var(--rojo-texto); } /* CDL: "+ 1 trip without a price" iba en rojo con un "?" rojo; es lo que espera un precio, como el lugar, el día y el viaje: gris con el reloj. */ .pago-cdl .cuenta tr.sin-precio td { color: var(--espera); } .pago-cdl .cuenta tr.sin-precio td:first-child { display: flex; align-items: center; gap: 6px; } /* La lista de los CDL: cada línea abre su semana aquí, debajo: lleva el triángulo que gira. El elegido iba con una banda amarilla: lo elegido va en tinta (una raya de 4 px y el triángulo abierto). */ .cdl-uno-nombre::before { content: ""; display: inline-block; vertical-align: middle; margin-right: var(--e2); width: 0; height: 0; border-left: 7px solid var(--tinta); border-top: 6px solid transparent; border-bottom: 6px solid transparent; transition: transform var(--transicion); } .cdl-uno[aria-expanded="true"] .cdl-uno-nombre::before { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .cdl-uno-nombre::before { transition: none; } } .cdl-uno.elegido { box-shadow: inset 4px 0 0 var(--tinta); } .cdl-uno-cifra b { font-weight: 700; } /* LOG A CAR: EL HUECO DE UNA FOTO QUE FALTA NO ES UN ERROR. Iba con borde rojo punteado y el texto en rojo antes de tocar nada: el paso de las fotos se leía como un fallo. Ahora el borde de un control (sólido, 2 px), la tinta y la cámara; el rojo, solo cuando el servidor dice que falta (`.falta`), con el mismo texto rojo de un error junto al campo. */ .hueco-foto.pendiente { border: 2px solid var(--borde-boton); color: var(--tinta); } .hueco-foto .camara { width: 28px; height: 28px; stroke-width: 2; color: var(--tinta-suave); } .hueco-foto.pendiente.falta { border-color: var(--rojo); color: var(--rojo-texto); } .hueco-foto.pendiente.falta .camara { color: var(--rojo-texto); } .hueco-foto.subiendo { border-color: var(--borde-boton); color: var(--tinta); } /* "TAKE PHOTO" O "CHOOSE FROM PHONE" (6 oct 2026, el dueño: "para los choferes demos la opción de que puedan subir fotos ya tomadas"). Cada foto es una fila: el hueco a la izquierda (la miniatura, y tocarlo sigue abriendo la cámara) y los dos botones a la derecha, uno encima del otro, del mismo alto de toque (`--toque`) y a todo el ancho de su columna: con guantes se acierta igual a los dos. Antes los huecos iban de dos en dos; con dos botones al lado de cada uno no caben a 390 px, así que la rejilla pasa a una columna cuando lleva opciones. "Take photo" pesa más (borde de 2 px en tinta): es lo principal, como antes. Sin amarillo: el amarillo de la pantalla es el de "Save the car" / "Next". */ .fotos:has(> .foto-con-opciones) { grid-template-columns: 1fr; } .foto-con-opciones { display: grid; /* El hueco angosto (6.5rem) para que "Choose from phone" quepa en una línea a 390 px: con 7.5rem se partía en dos y el botón crecía. */ grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); gap: var(--e2); align-items: start; } .foto-con-opciones .hueco-foto { min-height: calc(var(--toque) * 2 + var(--e2)); } /* En el hueco angosto, el nombre encima de la miniatura en chico: a 16 px "Photo of the car" en dos líneas tapaba casi toda la foto elegida. */ .foto-con-opciones .hueco-foto.puesta .que, .foto-con-opciones .hueco-foto.por-subir .que { font-size: var(--t-chico); line-height: 1.2; } .opciones-foto { display: flex; flex-direction: column; gap: var(--e2); width: 100%; } .boton-foto { position: relative; width: 100%; min-height: var(--toque); padding: var(--e1) var(--e2); line-height: 1.15; text-align: center; cursor: pointer; /* Es un , y `label` va en columna: el icono quedaba encima del texto y cada botón medía casi el doble. En fila, como un botón. */ flex-direction: row; /* El mismo grosor en los dos: con 1.5 px la de la galería medía 2 px menos de alto que "Take photo" (56 contra 58 a 390 px). Mismo toque, de verdad. */ border-width: 2px; } .boton-foto.tomar-foto { border-color: var(--tinta); } /* Junto a una foto ya tomada (opcionesFoto, clase `ya-tomada`): las mismas dos opciones, pero en chico y sin el borde de tinta, para que no se lean como lo que falta. Siguen del alto de toque: con guantes se aciertan igual. */ .opciones-foto.ya-tomada .boton-foto { font-size: var(--t-chico); border-width: 1px; border-color: var(--linea); color: var(--tinta-suave); } .opciones-foto.ya-tomada .boton-foto .icono { width: 1rem; height: 1rem; } /* VARIAS FOTOS DEL CARRO Y DEL TÍTULO (6 oct 2026). "Add another photo" es un hueco más, pero no es una falta: borde punteado y tinta suave, para que no se lea como la foto obligatoria que todavía no se tomó. "Remove" va bajo las dos opciones, del mismo alto, en el color de un error al armarse (segundo toque). */ .hueco-foto.pendiente.otra { border-style: dashed; color: var(--tinta-suave); } .hueco-foto.pendiente.otra .que { font-size: var(--t-chico); line-height: 1.2; } .boton-foto.quitar-foto[data-confirmando] { border-color: var(--rojo); color: var(--rojo-texto); } .nota-partes textarea { width: 100%; resize: vertical; } /* `input` lleva min-height y padding de campo: sin quitarlos, el campo escondido medía 48 px de alto dentro del botón. */ .boton-foto input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; } .boton-foto:has(input:focus-visible) { outline: 3px solid var(--foco, var(--acento)); outline-offset: 2px; } .mi-cara .opciones-foto { max-width: 20rem; } /* TIPS: ✓ Title, ✗ Catalytic... son datos del carro, no alarmas: en gris (el ✗ iba en rojo y la lista entera parecía llena de errores). Shell, que el dueño quiere ver, con borde de control y en tinta. */ .check.si, .check.no { color: var(--tinta-suave); } .check.shell { color: var(--tinta); border-color: var(--borde-boton); } /* LA DIRECCIÓN DEL DINERO: "We pay" con la flecha que sale, "owe us" y "Taken back" con la que entra (Settle up, cada entrega de Cash). En gris, nunca rojo o verde: no es un estado. Antes "Handed over" y "Taken back" solo se distinguían leyendo la línea gris de debajo. */ .dir-dinero { color: var(--tinta-suave); vertical-align: -3px; margin-right: 6px; } .cabeza-entrega .cifra { display: inline-flex; align-items: center; gap: 6px; } .cabeza-entrega .cifra .dir-dinero { margin-right: 0; } /* LAS ETIQUETAS DE ESTADO, CON EL COLOR DE SU ESTADO. "not counted yet" en la historia de un chofer (Cash, a la derecha) iba en rojo, con la misma entrega en gris en la lista de la izquierda; "voided" (un gasto o una entrega anulados) y "No title" (un dato del carro, como Shell) tampoco traban a nadie. Rojo queda para "disputed", "cash short", "not received". */ .etiqueta.espera { color: var(--espera); } .etiqueta.anulada { color: var(--tinta-suave); } .etiqueta.dato-carro { color: var(--tinta); border-color: var(--borde-boton); } /* ========================================================================== PESO VISUAL · 5. ESPACIO Y DISPOSICIÓN (1 oct 2026) El aire también dice qué va con qué: 12 entre las filas de una lista, 16 entre los grupos de una tarjeta, 32 entre las secciones de una pantalla (escritorio), y 16 de relleno en una tarjeta, 20 desde 64rem. ========================================================================== */ :root { --hueco-lista: .75rem; --hueco-grupo: 1rem; --hueco-seccion: 2rem; --relleno-tarjeta: 1rem; } @media screen and (min-width: 64rem) { :root { --relleno-tarjeta: 1.25rem; } .pago-semana, .viernes.liquidar-semana, .caja-todos { padding: var(--relleno-tarjeta); } /* SETTLE UP, LA CIFRA PEGADA A SU FRASE. A 1440 "5 drivers owe us" quedaba a la izquierda (x=265) y su cifra a 600 px, junto a la lista de lo que falta: el ojo saltaba media pantalla. Ahora de arriba abajo: quién, la cifra, por qué. */ .saldar-mitad { grid-template-columns: minmax(0, 1fr); grid-template-areas: "q" "c" "p"; justify-items: start; row-gap: var(--e1); } /* CDL › PAY: la cuenta de un CDL no se estira a lo ancho (el rótulo en x=265 y su cifra en x=1255 a 1440): 40rem, como una hoja. */ .pago-cdl .cuenta { max-width: 40rem; } /* USERS EN TRES COLUMNAS: sin hueco entre ellas, el papel de una fila ("CDL driver") quedaba pegado al triángulo de la siguiente y se leía como del vecino. 32 px entre columnas y una raya que las separa. */ #usuarios.filas { column-gap: var(--hueco-seccion); } } /* TIPS EN DOS COLUMNAS A PARTIR DE 80rem. Cada fila tiene tope de 44rem (el carro y su casilla cerca, a propósito), y a 1440 media tarjeta quedaba vacía: 30 carros de un sábado ocupaban 2,700 px de alto. Dos columnas por día, cada una con la fila entera; la raya de arriba solo entre filas de la misma columna. */ @media screen and (min-width: 80rem) { #lista-tips .dia-grupo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } #lista-tips .dia-grupo > .fila-tip { max-width: none; border-top: 1px solid var(--linea); } #lista-tips .dia-grupo > .fila-tip:nth-child(-n + 2) { border-top: 0; } #lista-tips .dia-grupo > .fila-tip:nth-child(even) { border-left: 1px solid var(--linea); } } /* EL CHOFER CON EL DÍA EMPEZADO: "LOG A CAR" ES LO QUE SE TOCA. En Today, con el día abierto, la píldora de "Log a car" va en amarillo (carbón sobre amarillo, 12:1): es el trabajo del día. "End my day", de una vez al día y con dos toques, pasa a secundario de verdad: borde de botón de la barra (#6E716D, 3.57:1) y 600, no el borde claro de 2 px que lo hacía el texto más pesado de la pantalla. */ body[data-vista="hoy"]:has(#accion[data-accion="cerrar"]) .vistas-chofer button[data-abre="carro"] .icono { background: var(--acento); color: var(--carbon); box-shadow: none; } body[data-vista="hoy"]:has(#accion[data-accion="cerrar"]) .vistas-chofer button[data-abre="carro"] .punto-aviso { background: var(--crema); } body[data-vista="hoy"]:has(#accion[data-accion="cerrar"]) .vistas-chofer button[data-abre="carro"] { color: var(--crema); font-weight: 700; } #accion[data-accion="cerrar"]:not(.confirmando) { border: 1.5px solid #6E716D; font-weight: 600; } /* EL EFECTIVO QUE LLEGA AL CHOFER NO ES UN ERROR. La tarjeta "The office says they gave you" iba con la banda roja de lo que traba, y la línea de abajo ("Confirm the cash above to start your day.") en rojo de error: es lo que falta hacer. Sin banda la tarjeta (la de una disputa la sigue llevando), y la línea en el gris de lo que espera (chofer.js le pone `error` solo con una disputa). El título, en frase y sin espaciado ancho: 16/600 en gris (las letras separadas se leían peor que la cifra). */ .tarjeta.alarma.confirmar:not(.reclamado) { border-left: 1px solid var(--borde-tarjeta); } .tarjeta.confirmar:not(.reclamado) > h2.codigo { font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tinta-suave); } .tarjeta.confirmar:not(.reclamado) > h2.codigo::before { content: none; } #motivo-traba.atencion { color: var(--tinta); } /* "Pay" y "Trips by day" de CDL trips, títulos de bloque (18/700 en tinta): `#cdl-detalle h4` (1,0,1) los dejaba en 16/400 gris, más flojos que el pliegue "Add a charge" de dentro. */ @media screen { #cdl-detalle :is(.pago-cdl, .cdl-dias) > h4 { font-size: var(--t-bloque); font-weight: 700; color: var(--tinta); } } /* ========================================================================== PESO VISUAL · 6. LA HOJA IMPRESA (1 oct 2026) Nada bajo 10 pt en el papel (la regla de diseño gráfico para lo impreso): había 7.5 ("before taxes" del resumen CDL), 8 ("Printed …" y la nota del Pay summary), 8.5 (los carros y las cabeceras de tabla), 9 (la marca, los rótulos de tabla y las firmas) y 9.5 (las cuentas, los días del CDL, las líneas del resumen). Todo a 10 pt con la letra de la marca (arriba). Las páginas no crecen. Medido en PDF carta (725 × 965 útiles), con la base del día: "Print the week" 6 páginas antes y después (el resumen y cinco hojas, de 550 a 788 px; antes de 536 a 779), la hoja de un chofer, la del CDL y el resumen CDL una cada una (la hoja del CDL con la lista de viajes, que llegó al unir las ramas el 2 oct, ya iba a 10 pt: con la letra de la marca, 30 viajes de 871 a 867 px). El peor caso (la hoja de Juan con sus carros clonados, las dos cuentas en 8 filas, un carro de 26 letras, la nota del tip y un nombre que parte la línea de firma): antes 35 carros en 951 px, ahora 961; 36 ya eran dos páginas. Para que quepa: - los carros de la hoja de pago a interlínea 1 (la fila de 10 pt mide 14.7 px, lo que medía la de 8.5: la raya de abajo separa las filas) y el nombre del carro sin partir (a 10 pt partía en dos renglones 9 de los 25 carros de Luis: +276 px; con la letra de la marca, más estrecha que la de antes, la tabla cabe en 725 sin partir); - las cuentas a interlínea 1.05 y la línea chica de la cabecera a 1.2. Solo la tabla de carros de la hoja de pago: las líneas del resumen y los días del CDL siguen con su aire (el estado parte en dos renglones). */ @media print { .hoja-pago .marca-hoja, .hoja-pago caption, .hoja-pago th, .hoja-pago .firmas div, .hoja-pago .impresa, .hoja-pago .carros-hoja, .hoja-pago .cuenta-hoja, .hoja-cdl .dias-hoja, .hoja-resumen .lineas-hoja, .hoja-resumen .lineas-hoja .antes { font-size: 10pt; } .hoja-pago caption, .hoja-pago .impresa, .hoja-pago .marca-hoja { line-height: 1.2; } .hoja-pago caption { padding-bottom: .5mm; } .hoja-pago .cuenta-hoja { line-height: 1.05; } article.hoja-pago:not(.hoja-resumen, .hoja-cdl) .carros-hoja { line-height: 1; } article.hoja-pago:not(.hoja-resumen, .hoja-cdl) .carros-hoja td { padding-block: .05mm; } article.hoja-pago:not(.hoja-resumen, .hoja-cdl) .carros-hoja td:nth-child(2) { white-space: nowrap; } /* "SETTLE UP" y "STATUS" se leían como una sola cabecera ("SETTLE UP STATUS") y cada fila como "533.00 they owe us 1 to count": la cifra va a la derecha y el estado empieza pegado. 4 mm antes del estado. */ .hoja-resumen .lineas-hoja th:last-child, .hoja-resumen .lineas-hoja td.estado { padding-left: 4mm; } } /* LA HOJA DE PAGO DE 39 A 41 CARROS, Y LAS FIRMAS NUNCA SOLAS (qa39). Con la letra a 10 pt (peso visual 6), la cabecera "Under offer" partía en dos renglones en cuanto la tabla iba justa de ancho (+13 px) y la hoja de Marco, 39 carros, pasó de 960 a 967 px de los 965 de la carta: dos cartas, y en la segunda SOLO las firmas. Luis (41) y Pedro (43) ya eran dos cartas así antes del rediseño. Sin bajar de 10 pt: - Las cabeceras de la tabla de carros en un renglón, y la columna se llama "Under" (oficina.js): entre Offered y Paid se lee "lo de debajo de lo ofrecido", y el glosario ya llama así a esa cifra (under the offer). - Lo que viene DETRÁS de la tabla (la nota del tip y las firmas) va pegado a ella (`break-before: avoid`) y las dos últimas filas pegadas a lo que sigue (`break-after: avoid`): si la hoja no cabe, a la segunda carta pasan las dos últimas filas, el total y las firmas, bajo la cabecera repetida, nunca las firmas solas. El total es un grupo de filas más (`table-row-group`): como pie de tabla, Chromium lo repetía al pie de la primera carta, "Total" antes de los dos últimos carros. La vista previa cuenta lo mismo (imprimir.js, trozosDeLaHoja). - Aire: las dos cuentas con .05 mm por fila (como los carros), 1.5 mm entre bloques y antes de las firmas (la raya para firmar sigue de 7 mm), y el recuadro del neto a interlínea 1.1. Medido en PDF carta con la semilla (la semana pasada; vista previa = PDF en todas): Marco 39 carros 967 -> 926 px, una carta; Luis 41, 983 -> 955, una carta; Pedro 43, 1013 -> 985, dos cartas como en main, con sus dos últimos carros, el total y las firmas en la segunda. "Print the week" de esa semana: 8 páginas en main (letra de 8 pt), 9 tras el rediseño, 7 ahora. Con la hoja de Pedro clonada de 36 a 120 carros, con y sin la nota del tip, la vista previa dice las mismas páginas que el PDF (41 entran en una carta, 42 a 104 en dos, 106 o más en tres). */ @media print { article.hoja-pago:not(.hoja-resumen, .hoja-cdl) .carros-hoja th { white-space: nowrap; } article.hoja-pago:not(.hoja-resumen, .hoja-cdl) > .carros-hoja ~ * { break-before: avoid; } article.hoja-pago:not(.hoja-resumen, .hoja-cdl) .carros-hoja tbody tr:nth-last-child(-n+2) { break-after: avoid; } article.hoja-pago:not(.hoja-resumen, .hoja-cdl) .carros-hoja tfoot { display: table-row-group; } article.hoja-pago:not(.hoja-resumen, .hoja-cdl) .cuenta-hoja td { padding-block: .05mm; } article.hoja-pago:not(.hoja-resumen, .hoja-cdl) > header, article.hoja-pago:not(.hoja-resumen, .hoja-cdl) .neto-hoja, article.hoja-pago:not(.hoja-resumen, .hoja-cdl) .dos-cuentas { margin-bottom: 1.5mm; } article.hoja-pago:not(.hoja-resumen, .hoja-cdl) .neto-hoja { line-height: 1.1; } article.hoja-pago:not(.hoja-resumen, .hoja-cdl) .firmas { margin-top: 1.5mm; } } /* ===================================================================== EL PANEL DE AVISOS (2 oct 2026) ---------------------------------------------------------------------------- El dueño: "deberia haber como un panel o algo asi para las notificaciones. y estas no deben aparecer arriba, sino como un panel de notificaciones que no interrumpa la experiencia". Se fueron las tres franjas de arriba de la oficina (.novedades amarilla, .aviso-efectivo y el del día), que empujaban la sección al aparecer, y el aviso pasajero deja de subir la página. - La campana (#abrir-avisos) en la barra de arriba, el mismo círculo de 48 px que el botón del tema. Su número: rojo #D6382A con blanco (4.7:1) si algo traba, crema con carbón (13.9:1) si solo espera, con anillo carbón de 2 px para despegarlo del borde del botón. NUNCA amarillo: el amarillo es lo que hay que tocar, y la campana ya es un botón. La barra es carbón en todos los temas: colores fijos, como el resto de la barra. - El panel (dialog.panel-avisos): en el teléfono una hoja que sube desde abajo (radio de tarjeta arriba, hasta el 80 % de la pantalla, sobre la barra de secciones); desde 64rem una hoja de 26rem a la derecha, bajo la barra de arriba (--alto-pegado). Dentro, las líneas de To do de Home (.casa-lista / .casa-fila, las mismas reglas) con su contorno de tarjeta. - El aviso pasajero (.aviso-oficina): fijo abajo como el del chofer, sin recibir toques y sin ocupar sitio en la página (no mueve nada al salir). Solo en pantalla: nada de esto existe en papel. ========================================================================== */ @media screen { /* ---- la campana ---- */ #abrir-avisos { position: relative; width: var(--toque); padding: 0; justify-content: center; flex: none; } #abrir-avisos svg.icono { width: 22px; height: 22px; display: block; } .cuenta-avisos { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; font-size: .75rem; font-weight: 700; line-height: 20px; text-align: center; background: #E8E4DA; color: #16191C; box-shadow: 0 0 0 2px #16191C; font-variant-numeric: tabular-nums; pointer-events: none; } .cuenta-avisos.grave { background: #D6382A; color: #FFFFFF; } /* ---- el panel ---- */ dialog.panel-avisos { margin: 0; padding: 0; border: 0; color: var(--tinta); background: var(--fondo); position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 80dvh; overflow: hidden; border-radius: var(--radio) var(--radio) 0 0; box-shadow: 0 -8px 32px rgba(0, 0, 0, .35); } /* display solo con [open]: puesto en el dialog sin [open] saldría abierto. */ dialog.panel-avisos[open] { display: flex; flex-direction: column; } dialog.panel-avisos::backdrop { background: rgba(14, 17, 19, .45); } .panel-avisos > header { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex: none; padding: var(--e2) var(--e2) var(--e2) var(--e4); border-bottom: 1px solid var(--linea); } .panel-avisos > header h2 { margin: 0; font-size: var(--t-bloque, 1.125rem); font-weight: 700; color: var(--tinta); } /* El título recibe el foco al abrir (tabindex=-1): sin anillo, no es algo que se toque; el lector lo dice y Tab sigue desde ahí. */ .panel-avisos > header h2:focus { outline: none; } .panel-avisos > header button { width: var(--toque); height: var(--toque); min-height: var(--toque); padding: 0; justify-content: center; flex: none; } .avisos-cuerpo { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--e4) var(--e4) calc(var(--e5) + env(safe-area-inset-bottom, 0px)); } .avisos-cuerpo .casa-cabeza { margin-bottom: var(--e2); } .avisos-cuerpo .casa-cabeza .n { color: var(--tinta-suave); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; } .panel-avisos .casa-lista, .panel-avisos .casa-listo { border-color: var(--borde-tarjeta); } .panel-avisos .estado-carga { margin-top: var(--e3); } /* Lo que el refresco no pintó: una caja tranquila arriba, con su botón. */ .avisos-espera { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--e2) var(--e3); margin: 0 0 var(--e4); padding: var(--e2) var(--e2) var(--e2) var(--e4); border: 1px solid var(--borde-tarjeta); border-radius: var(--radio-chico); background: var(--panel); } .avisos-espera p { margin: 0; color: var(--tinta); min-width: 0; } .avisos-espera button { min-height: 44px; } @media (min-width: 64rem) { dialog.panel-avisos { inset: var(--alto-pegado, 71px) 0 0 auto; width: 26rem; max-height: none; height: calc(100dvh - var(--alto-pegado, 71px)); border-radius: 0; border-left: 1px solid var(--borde-tarjeta); box-shadow: -8px 0 32px rgba(0, 0, 0, .25); } dialog.panel-avisos::backdrop { background: rgba(14, 17, 19, .18); } } /* ---- el aviso pasajero, abajo y flotando ---- */ #aviso.aviso-oficina { position: fixed; z-index: 35; left: var(--e4); right: var(--e4); margin: 0 auto; max-width: 30rem; bottom: calc(64px + var(--e3) + env(safe-area-inset-bottom, 0px)); pointer-events: none; } #aviso.aviso-oficina:empty { display: none; } #aviso.aviso-oficina .aviso { margin: 0; font-size: 1rem; border-radius: var(--radio-chico); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .28); } /* Sin conexión, la franja roja va sobre la barra de secciones: el aviso, encima de ella. */ body:has(.sin-red:not([hidden])) #aviso.aviso-oficina { bottom: calc(64px + 44px + var(--e3) + env(safe-area-inset-bottom, 0px)); } @media (min-width: 64rem) { /* Al pie de la columna de contenido (la de la izquierda mide 14rem). */ #aviso.aviso-oficina { left: calc(14rem + var(--e5)); right: var(--e5); bottom: var(--e5); } body:has(.sin-red:not([hidden])) #aviso.aviso-oficina { bottom: calc(44px + var(--e5)); } } } /* ========================================================================== REDISEÑO 3 OCT 2026 · "TALLER" (CLARO) Y "NOCHE" (OSCURO) ---------------------------------------------------------------------------- El dueño eligió "las dos": la dirección A (Taller, clara, a lo Canopy) es el tema CLARO y la B (Noche, oscura, a lo Xira) es el tema OSCURO; cada uno lo elige con el botón del tema de siempre y Sunlight sigue encima de los dos. Antes del rediseño anterior dijo "sigo viendo el diseño de la app igual": esta vez la diferencia se tiene que ver de un vistazo. Lo que trae: 1. UNA ESCALA FUERTE: To do a 88 px (claro) y 112 (oscuro), las cifras de la semana a 34 y 38, Settle up a 80 y 104. Una cosa grande por pantalla, una fila de 3 o 4 cifras de apoyo, lo demás en lista. 2. TARJETAS DE CIFRA (KPI): en claro, marco crema y pozo blanco (dos capas, maqueta A); en oscuro, un panel liso sobre el fondo hondo. 3. CHIPS DE ESTADO con palabra e icono: rojo traba, gris con reloj espera, carbón lo elegido. El amarillo, SOLO en lo que se toca. 4. LA COLUMNA DE ESCRITORIO con grupos en frase (Money, People, Setup) e insignias de To do por sección (rojas si traban, crema si esperan). 5. GRÁFICOS de una serie, a mano (Cars by day, el anillo de Working now, las barras por chofer de Pay, la semana del CDL). Va AL FINAL de la hoja para ganar por orden a las capas de antes sin reescribirlas. Colores por variable; los fijos son los de las barras carbón (carbón con cualquier tema), las insignias (como la campana) y el rojo de banda. La hoja impresa no se toca: todo va en @media screen o en clases que la hoja no usa. ========================================================================== */ /* ---- 1. LA ESCALA DEL REDISEÑO -------------------------------------------- Por tema y no por pantalla: la maqueta B es más grande que la A en todo lo que es cifra (112 contra 88 en To do). En el teléfono bajan con clamp() y la referencia es 390: To do 64/72 px, la cifra de una tarjeta 28/30, Settle up 48/52 (cabe "$1,468.00" con aire en 358 px). */ :root, [data-densidad="campo"], [data-tema="claro"] { --t-hacer: clamp(4rem, 2.6rem + 3vw, 5.5rem); --t-kpi: clamp(1.75rem, 1.45rem + .6vw, 2.125rem); --t-cifra-heroe: clamp(3rem, 1.6rem + 3.6vw, 5rem); --t-titulo-tarjeta: 1.375rem; /* Las marcas de los gráficos: la serie en tinta, lo que todavía corre (hoy, "so far") en gris. #8C887E daba 3.42:1 sobre el panel (3:1 es el piso de una marca, WCAG 1.4.11); desde el 5 oct 2026 ("mejora el contraste del home") #77736A, 4.57:1, y aún 3.74 contra la barra en tinta de al lado: hoy se sigue distinguiendo de los otros días. */ --grafico: var(--tinta); --grafico-parcial: #77736A; --grafico-resto: #CFC9BC; --radio-pozo: 20px; } [data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"] { --t-hacer: clamp(4.5rem, 2.6rem + 4.6vw, 7rem); --t-kpi: clamp(1.875rem, 1.55rem + .7vw, 2.375rem); --t-cifra-heroe: clamp(3.25rem, 1.3rem + 5.2vw, 6.5rem); --t-titulo-tarjeta: 1.125rem; /* En oscuro la serie va en crema (13:1 sobre el panel) y lo que corre en #80868B (4.23:1; era #6B7176, 3.15: la barra de hoy y la parte del anillo de los que no salieron, 5 oct 2026), 3.04 contra la crema de al lado. */ --grafico: var(--tinta); /* PESO VISUAL 2 (6 oct 2026): con la tarjeta a #262C33, lo que corre sube a #868C91 (4.14:1 sobre ella, 3.01 contra la crema de al lado; #80868B daba 3.82) y lo vacío a #3E454C (1.45, se sigue viendo el hueco). */ --grafico-parcial: #82888D; --grafico-resto: #4A525B; } [data-sol] { --grafico-parcial: #6E6E66; --grafico-resto: #C9C9C2; } /* ---- 2. CHIPS DE ESTADO -------------------------------------------------- Una palabra con su icono en una píldora de 28 px. Rojo lleno con blanco lo que traba (6.30:1 con --rojo-lleno desde el 5 oct 2026; era 4.71), gris con el reloj lo que espera (--espera sobre --hundido: 5.6:1 en claro, 5.5 en oscuro), neutro en tinta sobre lo hundido ("Before taxes", "That week"). Nunca amarillo: no se tocan. */ .chip-estado { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 28px; padding: 0 10px; border-radius: var(--pastilla); font-size: .8125rem; font-weight: 700; line-height: 1.2; white-space: nowrap; background: var(--hundido); color: var(--tinta); } .chip-estado .icono { width: 16px; height: 16px; flex: none; } .chip-estado.espera { color: var(--espera); } .chip-estado.traba { background: var(--rojo-lleno); color: #FFFFFF; } /* 6.30:1 (con --rojo, 4.71) */ .chip-estado.traba-suave { background: var(--rojo-fondo); color: var(--rojo-texto); } /* ---- 3. LA COLUMNA DE ESCRITORIO ----------------------------------------- Claro (A): la columna en el marco crema claro a todo el alto, con su raya a la derecha; la sección puesta, píldora carbón con el nombre en amarillo (15.4:1 contra la crema; la regla "LA SECCIÓN ACTIVA" de más arriba). Oscuro (B): la columna es una tarjeta carbón de radio 26 que flota sobre el fondo hondo, y la puesta, un escalón más claro con su filo y el amarillo (10.6:1). Los rótulos de grupo, en frase, 14/700 en tinta tenue. 16rem (256 px) de ancho: con 14rem "CDL trips" y su insignia no cabían con aire. */ /* Sin rótulos de grupo ("Money", "People") ni insignias con número desde el rediseño del 22 oct 2026: avisa solo la campana (oficina.js). */ @media (min-width: 64rem) { body[data-densidad="oficina"] { grid-template-columns: 16rem minmax(0, 1fr); } [data-densidad="oficina"] .barra-pestanas { background: var(--marco); border-right: 1px solid var(--linea); } [data-densidad="oficina"] .pestanas { padding: var(--e4) var(--e4) var(--e5); gap: 4px; } [data-densidad="oficina"] .pestanas button { min-height: 48px; border-radius: var(--radio-chico); padding: 0 var(--e3) 0 14px; gap: var(--e3); font-size: 1rem; font-weight: 600; color: var(--tinta); } [data-densidad="oficina"] .pestanas button:not(.activa) { color: var(--tinta); } [data-densidad="oficina"] .pestanas button > span { flex: 1 1 auto; min-width: 0; } /* SIN AIRE DE GRUPO ENTRE PESTAÑAS (22 oct 2026, pulido del rediseño). Settings (5 oct) y Dispatch (13 oct) llevaban 24 px encima para separarse del grupo "People" (GRUPOS_PESTANAS). La fase A quitó los grupos: Home · Reports · Team · Dispatch · Settings son cinco iguales, y el hueco de 24 px entre Team, Dispatch y Settings frente a los 4 px entre Home, Reports y Team sugería grupos que ya no existen. Todas con el `gap` de 4 px de .pestanas. */ /* NOCHE: la columna como tarjeta carbón dentro del fondo hondo. */ [data-densidad="oficina"]:not([data-tema="claro"]) .barra-pestanas, [data-tema="oscuro"] .barra-pestanas { background: var(--carbon); border-right: 0; border-radius: var(--radio); margin: var(--e4) 0 var(--e4) var(--e4); top: calc(4.5rem + var(--e4)); height: calc(100vh - 4.5rem - 2 * var(--e4)); } [data-densidad="oficina"]:not([data-tema="claro"]) .pestanas button:not(.activa), [data-tema="oscuro"] .pestanas button:not(.activa) { color: var(--tinta-suave); } [data-densidad="oficina"]:not([data-tema="claro"]) .pestanas button:not(.activa):hover, [data-tema="oscuro"] .pestanas button:not(.activa):hover { color: var(--tinta); } [data-densidad="oficina"]:not([data-tema="claro"]) .barra-pestanas button.activa, [data-tema="oscuro"] .barra-pestanas button.activa { background: #262B31; box-shadow: inset 0 0 0 1px #3A4147; border-radius: var(--pastilla); } } /* ---- 4. LAS TARJETAS DE CIFRA (KPI) ------------------------------------ Una fila de 3 o 4 cifras de apoyo (Home, Pay, Cash, Drivers, CDL trips). Claro: el marco (--marco, con el borde de la tarjeta) y dentro el pozo blanco de radio 20 donde vive la cifra. Oscuro: el marco es el panel y el pozo no se dibuja (maqueta B). La cifra a --t-kpi, 800, con "$" chico. */ .kpi-fila { list-style: none; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); } .kpi-fila > li { min-width: 0; display: flex; } .kpi { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; background: var(--marco); border: 1px solid var(--borde-tarjeta); border-radius: var(--radio); padding: 6px; color: var(--tinta); text-align: left; } .kpi-tapa { display: flex; align-items: center; gap: var(--e2); min-height: 40px; padding: 6px 10px 6px 12px; } .kpi-tapa .rotulo, .kpi .kpi-tapa .rotulo { font-size: 1rem; font-weight: 700; color: var(--tinta); text-transform: none; letter-spacing: 0; } .kpi-pozo { display: flex; flex-direction: column; gap: var(--e2); flex: 1 1 auto; min-width: 0; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio-pozo); padding: var(--e4) var(--e4) var(--e3); } .kpi .cifra { display: block; font-size: var(--t-kpi); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; } .kpi .cifra.palabra { font-size: var(--t-bloque); letter-spacing: 0; white-space: normal; } .kpi .cifra .mas, .cifra .mas { font-size: .55em; color: var(--tinta-suave); margin-left: .12em; font-weight: 700; letter-spacing: 0; } .kpi-par { display: flex; flex-direction: column; gap: var(--e1); } .kpi-par > span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--e2); } .kpi-par .cifra { font-size: calc(var(--t-kpi) * .7); } .kpi-par .que { font-size: .875rem; color: var(--tinta-suave); } .kpi-pie { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--e2); margin-top: auto; padding-top: var(--e2); font-size: .875rem; color: var(--tinta-suave); } .kpi-pie .nota { flex: 1 1 8rem; min-width: 0; } .kpi-ir { margin-left: auto; color: var(--tinta); font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; } /* Noche: un panel liso, sin el pozo (la maqueta B). */ [data-densidad="oficina"]:not([data-tema="claro"]) .kpi, [data-tema="oscuro"] .kpi { background: var(--panel); padding: var(--e2); } [data-densidad="oficina"]:not([data-tema="claro"]) .kpi-pozo, [data-tema="oscuro"] .kpi-pozo { background: transparent; border-color: transparent; padding-top: var(--e2); } @media (min-width: 64rem) { .kpi-fila.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Home: cada tarjeta es un botón entero (lleva a su sitio). */ button.kpi.casa-cifra { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; width: 100%; min-height: 0; padding: 6px; border-radius: var(--radio); background: var(--marco); border: 1px solid var(--borde-tarjeta); font-weight: 400; } [data-densidad="oficina"]:not([data-tema="claro"]) button.kpi.casa-cifra, [data-tema="oscuro"] button.kpi.casa-cifra { background: var(--panel); padding: var(--e2); } @media (hover: hover) { button.kpi.casa-cifra:hover { background: var(--marco); filter: none; border-color: var(--tinta-suave); } [data-densidad="oficina"]:not([data-tema="claro"]) button.kpi.casa-cifra:hover, [data-tema="oscuro"] button.kpi.casa-cifra:hover { background: var(--panel); } } button.kpi.casa-cifra:focus-visible { outline: 3px solid var(--foco, var(--acento)); outline-offset: 2px; } /* ---- 5. HOME -------------------------------------------------------------- La fecha como título (34/800 en escritorio), la semana de pago debajo. To do, la tarjeta grande; las cifras en dos por dos; Working now y Cars by day. En claro (A): To do y el gráfico a la izquierda, cifras y Working now a la derecha. En oscuro (B): To do y las cifras arriba, Working now (con el anillo) y el gráfico abajo. Solo cambian las áreas de la rejilla: el orden del documento, el del Tab y el del lector, es el mismo. */ @media screen { .casa { gap: var(--e4); } .casa-titulo { display: block; } .casa-fecha { margin: 0; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.125rem); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; color: var(--tinta); } .casa-titulo .casa-semana { margin: var(--e1) 0 0; font-size: 1rem; font-weight: 400; color: var(--tinta-suave); text-align: left; } .casa-rejilla { display: flex; flex-direction: column; gap: var(--e4); } .casa-bloque.casa-hacer, .casa-bloque.casa-ahora, .casa-bloque.casa-dias { background: var(--panel); border: 1px solid var(--borde-tarjeta); border-radius: var(--radio); padding: var(--e4); gap: var(--e3); } .casa-cifras { gap: 0; } .casa-cabeza h3 { font-size: var(--t-titulo-tarjeta); font-weight: 800; letter-spacing: -.015em; } /* TO DO: el número grande con su nombre, y cuántas traban y esperan. */ .hacer-estado { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n t" "n p"; align-items: end; column-gap: var(--e4); row-gap: var(--e2); margin: 0 0 var(--e2); } .hacer-total { display: contents; } .hacer-n { grid-area: n; font-size: var(--t-hacer); font-weight: 800; line-height: .85; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--tinta); } .hacer-estado h3 { grid-area: t; margin: 0; font-size: clamp(1.5rem, 1.3rem + .6vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--tinta); } .hacer-parte { grid-area: p; display: inline-flex; align-items: center; gap: 6px; } .hacer-estado:has(.hacer-parte.traba:not([hidden])) .hacer-parte.espera { grid-area: q; } .hacer-estado:has(.hacer-parte.traba:not([hidden])) { grid-template-areas: "n t t" "n p q"; grid-template-columns: auto max-content minmax(0, 1fr); } .hacer-parte { align-self: end; justify-self: start; min-height: 28px; padding: 0 10px; border-radius: var(--pastilla); font-size: .8125rem; font-weight: 700; white-space: nowrap; background: var(--hundido); color: var(--espera); } .hacer-parte .que { display: inline-flex; align-items: center; gap: 4px; } .hacer-parte .icono { width: 16px; height: 16px; } .hacer-parte.traba { background: var(--rojo-lleno); color: #FFFFFF; } /* "3 blocking": 6.30:1 (con --rojo, 4.71) */ .hacer-parte .n { font-weight: 800; font-variant-numeric: tabular-nums; } /* LAS DOS PASTILLAS BAJAN EN UNA TARJETA ESTRECHA (U2, qa47). A 320, con las dos ("3 blocking" y "4 waiting"), la segunda fila pedía 274 px en una tarjeta de 262 y "waiting" se salía por la derecha; con más cosas por hacer la página entera se corría 16 px. En Noche no pasaba porque ahí `.hacer-estado` es un flex que envuelve, pero ESE selector deja fuera al Taller elegido a mano y al modo sol, así que el mismo Home se rompía en claro y no en oscuro. Esto envuelve en los TRES modos, y por la TARJETA y no por la ventana (container query): la misma tarjeta dentro de la rejilla de escritorio no se parte. 17.5rem = 280 px, entre los 262 que no caben (320) y los 302 que sí (360), medidos. */ .casa-bloque.casa-hacer { container-type: inline-size; } @container (max-width: 17.5rem) { .hacer-estado:has(.hacer-parte.traba:not([hidden])) { grid-template-areas: "n t" "n p" "n q"; grid-template-columns: auto minmax(0, 1fr); } } /* Las líneas de To do: la tarjeta ya es la caja, la lista va sin marco. El icono en un pozo redondo de 40; lo que traba con su fondo y su banda (y el pozo rojo con el icono blanco). */ .casa-hacer .casa-lista, .casa-ahora .casa-lista { background: transparent; border: 0; border-radius: 0; } .casa-hacer button.casa-fila { grid-template-columns: 40px minmax(0, 1fr) auto 16px; min-height: 60px; padding: var(--e2) var(--e3) var(--e2) var(--e3); border-radius: var(--radio-chico); } .casa-hacer .casa-fila .casa-ico { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--hundido); color: var(--tinta); } .casa-hacer .casa-lista > li + li { border-top: 1px solid var(--linea); } .casa-hacer .casa-lista > li:has(> .grave) + li:has(> .grave) { border-top-color: transparent; margin-top: 6px; } .casa-hacer button.casa-fila.grave { background: var(--rojo-fondo); box-shadow: inset 5px 0 0 var(--rojo); } .casa-hacer .casa-fila.grave .casa-ico { background: var(--rojo); color: #FFFFFF; } .casa-hacer .casa-fila.grave .casa-destino { color: var(--rojo-texto); } .casa-hacer .casa-lista > li:has(> .grave) + li:not(:has(> .grave)) { border-top-color: transparent; } @media (max-width: 29.99rem) { .casa-hacer button.casa-fila { grid-template-columns: 40px minmax(0, 1fr) 16px; } } .casa-hacer .casa-listo { background: transparent; border: 0; padding: 0; } /* WORKING NOW: "3 of 5 out" en grande en la cabecera (A) o el anillo (B). */ .casa-ahora { container-type: inline-size; } .casa-ahora .casa-cabeza { flex-wrap: wrap; justify-content: flex-start; } .casa-ahora .casa-cabeza h3 { margin-right: auto; } .ahora-cuantos { display: inline-flex; align-items: baseline; gap: 6px; font-size: .9375rem; font-weight: 600; color: var(--tinta-suave); } .ahora-cuantos b { font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums; } .casa-ahora button.casa-chofer { min-height: 60px; padding: var(--e1) var(--e2); border-radius: var(--radio-chico); } .casa-ahora .cara.chica { width: 40px; height: 40px; font-size: .8125rem; } .casa-ahora .casa-nombre { font-weight: 700; } .casa-ahora .casa-estado { font-size: .9375rem; } .casa-ahora .casa-fuera { padding: var(--e2) var(--e1) 0; font-size: .9375rem; } .con-anillo { display: block; } .anillo { display: none; } .anillo { position: relative; width: 180px; height: 180px; flex: none; } .anillo svg { width: 100%; height: 100%; display: block; } .anillo .anillo-si { stroke: var(--grafico); } .anillo .anillo-no { stroke: var(--grafico-parcial); } .anillo-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .anillo-centro b { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--tinta); } .anillo-centro span { font-size: .9375rem; font-weight: 600; color: var(--tinta-suave); } /* En oscuro y con sitio (la tarjeta de 36rem o más): el anillo a la izquierda y las listas a la derecha; el número de la cabecera se va (lo dice el anillo). */ @container (min-width: 36rem) { :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .con-anillo { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--e5); align-items: start; } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .anillo { display: block; margin-top: var(--e2); } } .ahora-listas { min-width: 0; display: flex; flex-direction: column; gap: var(--e2); } /* CARS BY DAY */ .casa-dias .casa-cabeza { flex-wrap: wrap; } .casa-pagado { font-size: .9375rem; color: var(--tinta-suave); } .casa-pagado b { color: var(--tinta); font-variant-numeric: tabular-nums; } /* Barras (claro): 28 px de ancho como mucho, extremo redondo de 4 px y base recta; la cifra encima en tinta y el día debajo en gris (el de hoy en tinta y 800). Sobre una raya de base. */ .dias-barras { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; height: 15rem; padding-top: var(--e2); border-bottom: 1px solid var(--borde-tarjeta); margin-bottom: 1.75rem; } .dias-barras .dia-col { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; } .dias-barras .dia-barra { display: block; width: min(28px, 60%); height: calc((100% - 1.75rem) * var(--alto) / 100); min-height: 2px; background: var(--grafico); border-radius: 4px 4px 0 0; } .dias-barras .dia-col.hoy .dia-barra { background: var(--grafico-parcial); } .dias-barras .dia-n { font-size: .875rem; font-weight: 700; color: var(--tinta); margin-bottom: 6px; font-variant-numeric: tabular-nums; } .dias-barras .dia-nombre { position: absolute; top: calc(100% + 6px); left: 0; right: 0; text-align: center; font-size: .875rem; font-weight: 600; color: var(--tinta-suave); white-space: nowrap; } .dias-barras .dia-col.hoy .dia-nombre { color: var(--tinta); font-weight: 800; } /* Rayas (oscuro): una raya de 3 px por carro, 2 px entre ellas, de abajo arriba; el día que corre en gris. Debajo, el día, los carros y lo pagado. */ .dias-unidades { display: none; } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .casa-dias .dias-barras { display: none; } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .dias-unidades { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--e3); align-items: end; } .dias-unidades .dia-col { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; } .dias-unidades .dia-rayas { display: block; height: calc(var(--n) * 5px); max-height: calc(var(--tope) * 5px); background: repeating-linear-gradient(to top, var(--grafico) 0 3px, transparent 3px 5px); border-radius: 2px; } .dias-unidades .dia-col.hoy .dia-rayas { background: repeating-linear-gradient(to top, var(--grafico-parcial) 0 3px, transparent 3px 5px); } .dias-unidades .dia-pie { display: flex; flex-direction: column; margin-top: var(--e3); min-width: 0; } .dias-unidades .dia-nombre { font-size: .875rem; font-weight: 600; color: var(--tinta-suave); } .dias-unidades .dia-pie b { font-size: 1.25rem; font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; } .dias-unidades .dia-pie small { font-size: .875rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* En escritorio, la rejilla de dos filas. Una sola rejilla (y no dos columnas) para que las tarjetas de cada fila arranquen a la misma altura. */ @media screen and (min-width: 64rem) { /* (El tope de 90rem de Home se fue el 21 oct 2026: 100rem para todas.) */ .casa-rejilla { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; grid-template-areas: "hacer cifras" "dias ahora"; align-items: start; gap: var(--e4); } .casa-hacer { grid-area: hacer; } .casa-cifras { grid-area: cifras; } .casa-ahora { grid-area: ahora; } .casa-dias { grid-area: dias; } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .casa-rejilla { grid-template-areas: "hacer cifras" "ahora dias"; } .casa-bloque.casa-hacer, .casa-bloque.casa-ahora, .casa-bloque.casa-dias { padding: var(--e5) var(--e5) var(--e5); } .casa-hacer { align-self: stretch; } } /* NOCHE: To do con los tres números gigantes en fila (8 to do, 2 blocking, 6 waiting), el rojo en el que traba (5.2:1 sobre el panel: texto grande) y el gris en el que espera; el rótulo debajo de cada número. */ @media screen { :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .hacer-estado, :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .hacer-estado:has(.hacer-parte.traba:not([hidden])) { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3) clamp(1.25rem, 3vw, 2.25rem); } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .hacer-total { display: flex; flex-direction: column; gap: var(--e3); } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .hacer-estado h3 { font-size: 1rem; font-weight: 700; color: var(--tinta-suave); letter-spacing: 0; } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .hacer-parte, :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .hacer-parte.traba { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e3); background: transparent; padding: 0; min-height: 0; border-radius: 0; color: var(--tinta-suave); font-size: 1rem; } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .hacer-parte .n { font-size: var(--t-hacer); line-height: .85; letter-spacing: -.045em; color: var(--tinta-suave); } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .hacer-parte.traba .n, :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .hacer-parte.traba .que { color: var(--rojo-texto); } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .hacer-parte .que { gap: 6px; } } /* AJUSTES DE HOME TRAS VERLA EN EL NAVEGADOR (3 oct). */ @media screen { /* En claro el chip pone el icono delante del número ("⚠ 2 blocking"), como la maqueta A: la palabra y el icono se sueltan en la fila. */ .hacer-parte .que { display: contents; } .hacer-parte .que .icono { order: -1; } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .hacer-parte .que { display: inline-flex; } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .hacer-parte .que .icono { order: 0; } /* "CDL drivers" a la izquierda y su enlace a la derecha, como antes. */ .casa-ahora .casa-sub { justify-content: space-between; } .casa-ahora .casa-sub h4 { margin-right: auto; } /* Con el anillo a la vista, el número de la cabecera sobra. */ @container (min-width: 36rem) { :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .casa-cabeza .ahora-cuantos { display: none; } } /* Lo pagado de cada día, a 13 px: es la nota de una columna del gráfico (60 px a 1440) y "4,500.00" a 14 px no cabía. En una tarjeta estrecha (el teléfono) no sale: queda el número de carros, que es lo que dice el gráfico, y "so far" en el día que corre. */ .casa-dias { container-type: inline-size; } .dias-unidades { gap: var(--e2); } .dias-unidades .dia-pie small { font-size: .8125rem; text-overflow: clip; } @container (max-width: 24rem) { .dias-unidades .dia-col:not(.hoy) .dia-pie small { display: none; } } } /* LA SECCIÓN PUESTA DE LA COLUMNA, EN AMARILLO SOBRE CARBÓN. La regla de arriba que pone la tinta a cada botón de la columna (claro) tiene la misma fuerza y va después: el nombre de la puesta salía carbón sobre carbón (1:1, medido en Home en claro). */ @media (min-width: 64rem) { [data-densidad="oficina"] .pestanas button.activa { color: var(--acento); font-weight: 800; } } /* La altura de las barras en px fijos de la caja y no en % del alto de la columna: el % de un hijo de una celda de rejilla con align-items: end no se resolvía y todas las barras quedaban en su mínimo de 2 px. */ @media screen { .dias-barras { --alto-barras: 12rem; height: auto; } .dias-barras .dia-col { height: auto; } .dias-barras .dia-barra { height: calc(var(--alto-barras) * var(--alto)); } } /* ---- 6. REPORTS › PAY ----------------------------------------------------- Arriba, las tres cifras de lo que se paga en la semana como tarjetas de cifra (Driver pay, CDL pay, Total): apoyo, más chicas que el héroe. Debajo, SETTLE UP: la cifra héroe (80 px en claro, 104 en oscuro, con "$"), a quién y por qué, las barras por chofer y, a la derecha, lo que falta con su estado y el botón amarillo "Settle up with each driver". */ @media screen { main .pago-semana.pago-semana { display: flex; flex-direction: column; gap: var(--e3); padding: 0; background: transparent; border: 0; } main .pago-semana .kpi.pago-fila { display: flex; flex-direction: column; grid-template-areas: none; border: 1px solid var(--borde-tarjeta); padding: 6px; margin: 0; align-items: stretch; } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) main .pago-semana .kpi.pago-fila { padding: var(--e2); } main .pago-semana .kpi.pago-fila .rotulo { font-size: 1rem; font-weight: 700; color: var(--tinta); } main .pago-semana .kpi.pago-fila .cifra { font-size: var(--t-kpi); font-weight: 800; line-height: 1.05; } .kpi-chips { display: flex; flex-wrap: wrap; gap: 6px; } /* La tarjeta de Settle up, en dos columnas desde 64rem. */ main .viernes.liquidar-semana { gap: var(--e4); padding: var(--e4); } .saldar-izq, .saldar-der { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; } .liquidar-semana .rotulo-bloque { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); } main .liquidar-semana .rotulo-bloque { font-size: var(--t-titulo-tarjeta); font-weight: 800; letter-spacing: -.015em; } main .saldar-quien { font-size: 1.25rem; font-weight: 700; color: var(--tinta); } main .saldar-quien b { font-weight: 800; } main .saldar-cifra { line-height: 1; letter-spacing: -.035em; } main .viernes.con-dos .saldar-cifra { font-size: calc(var(--t-cifra-heroe) * .62); } main .saldar-porque { font-size: 1rem; } main .saldar-mitad { row-gap: var(--e2); } /* LAS BARRAS POR CHOFER: una serie en tinta, de 14 px de grueso con el extremo redondo; el nombre (16/600) y la cifra con su frase. */ .saldar-barras { border-top: 1px solid var(--linea); padding-top: var(--e4); margin-top: var(--e2); } .saldar-barras > .rotulo { margin: 0 0 var(--e3); font-size: .9375rem; font-weight: 600; color: var(--tinta-suave); } .barras-chofer { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); } .barras-chofer > li { display: grid; grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr); grid-template-areas: "n c" "b b"; align-items: center; gap: 6px var(--e3); min-width: 0; } .barras-chofer .nombre { grid-area: n; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* El nombre es un botón a su fila de Settle up (14 oct 2026): se ve como el texto de siempre, subrayado, y el toque crece por el relleno sin mover la fila (12 px arriba y abajo, compensados con el margen). */ .barras-chofer button.nombre { justify-self: start; max-width: 100%; min-height: 0; padding: 12px 0; margin: -12px 0; border: 0; background: none; color: var(--tinta); font: inherit; font-weight: 600; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .barras-chofer .barra-fila { grid-area: b; display: block; height: 14px; } .barras-chofer .barra-llena { display: block; height: 100%; width: calc(100% * var(--largo)); min-width: 4px; background: var(--grafico); border-radius: 0 4px 4px 0; } .barras-chofer .cuanto { grid-area: c; justify-self: end; font-size: .9375rem; color: var(--tinta-suave); white-space: nowrap; } .barras-chofer .cuanto b { color: var(--tinta); font-variant-numeric: tabular-nums; } @media (min-width: 48rem) { .barras-chofer > li { grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) auto; grid-template-areas: "n b c"; } } /* LO QUE FALTA: filas de 58 px con su icono; espera con banda gris, lo que traba con fondo y banda rojos. */ main .saldar-falta { border-color: var(--borde-tarjeta); background: var(--panel); } main .saldar-falta button.casa-fila { grid-template-columns: 24px minmax(0, 1fr) 16px; min-height: 58px; padding: var(--e2) var(--e4); } main .saldar-falta button.casa-fila.imprimir-semana { grid-template-columns: 24px minmax(0, 1fr); } main .saldar-falta .casa-ico { width: 20px; height: 20px; } main .saldar-falta button.casa-fila.espera { box-shadow: inset 5px 0 0 var(--espera-banda); } main .saldar-falta button.casa-fila.espera .casa-ico { color: var(--espera); } main .saldar-falta button.casa-fila.grave { background: var(--rojo-fondo); box-shadow: inset 5px 0 0 var(--rojo); } main .saldar-falta button.casa-fila.grave .casa-ico { color: var(--rojo-texto); } /* EL BOTÓN AMARILLO DE LA TARJETA: el que se viene a tocar el viernes. A todo el ancho de su columna, 56 px y 17/800 (el dueño, 3 oct: "un botón amarillo grande"). */ button.principal.saldar-cada { width: 100%; min-height: 56px; font-size: 1.0625rem; font-weight: 800; gap: var(--e2); } } @media screen and (min-width: 64rem) { main .viernes.liquidar-semana { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 1fr); grid-template-areas: none; align-items: start; gap: var(--e5) var(--e6); padding: var(--e5) var(--e6); } .saldar-der { position: sticky; top: calc(var(--alto-pegado, 5rem) + var(--e3)); } /* En escritorio la cifra no compite con la lista: queda sola en su columna, de arriba abajo (quién, la cifra, por qué). */ main .liquidar-semana .saldar-mitad { justify-items: start; } } /* NOCHE: lo que falta en filas sueltas sobre el panel (sin la caja), como B. */ @media screen { :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) main .saldar-falta { border: 0; background: transparent; gap: var(--e2); overflow: visible; } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) main .saldar-falta > li + li { border-top: 0; } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) main .saldar-falta button.casa-fila { background: var(--hundido); border-radius: var(--radio-chico); } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) main .saldar-falta button.casa-fila.grave { background: var(--rojo-fondo); } } /* ---- 7. EL CONMUTADOR PAY | CASH, UNA PÍLDORA --------------------------- Las dos partes dentro de una píldora hundida, la puesta en tinta (lo elegido). Antes eran dos botones con borde, sueltos. */ @media screen { .partes-dinero:not([hidden]), .partes-ajustes:not([hidden]), .partes-gente:not([hidden]) { display: flex; gap: 4px; padding: 4px; border-radius: var(--pastilla); background: var(--hundido); } .partes-dinero button, .partes-ajustes button, .partes-gente button { border-color: transparent; background: transparent; min-height: 44px; } .partes-dinero button.activo, .partes-dinero button[aria-pressed="true"], .partes-ajustes button.activo, .partes-ajustes button[aria-pressed="true"], .partes-gente button.activo, .partes-gente button[aria-pressed="true"] { background: var(--elegido-fondo); color: var(--elegido-texto); border-color: var(--elegido-fondo); } } /* PAY EN EL TELÉFONO (medido a 390, 3 oct): las tres tarjetas de cifra en dos columnas dejaban Settle up en y=795, fuera de la primera pantalla (el límite decidido es 680), y el chip "1 trip without a price" se salía 6 px de su tarjeta. Por debajo de 48rem cada cifra es una fila: el rótulo a la izquierda, la cifra a la derecha, los chips debajo. Settle up, de arriba abajo en cualquier ancho: quién, la cifra, por qué (como la maqueta). */ @media screen and (max-width: 47.99rem) { main .pago-kpis { grid-template-columns: minmax(0, 1fr); gap: var(--e2); } main .pago-semana .kpi.pago-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--e2) var(--e3) var(--e2) var(--e2); } main .pago-semana .kpi.pago-fila .kpi-tapa { min-height: 0; padding: 4px; } main .pago-semana .kpi.pago-fila .kpi-pozo { display: contents; } main .pago-semana .kpi.pago-fila .cifra { grid-column: 2; grid-row: 1; } main .pago-semana .kpi.pago-fila .kpi-chips, main .pago-semana .kpi.pago-fila .kpi-pie { grid-column: 1 / -1; padding: 0 4px 4px; } } @media screen { .kpi-chips .chip-estado { white-space: normal; max-width: 100%; } main .liquidar-semana .saldar-mitad { grid-template-columns: minmax(0, 1fr); grid-template-areas: "q" "c" "p"; justify-items: start; } .partes-dinero.partes-dinero button:not(.activo), .partes-ajustes.partes-ajustes button:not(.activo), .partes-gente.partes-gente button:not(.activo) { border-color: transparent; background: transparent; } } /* ---- 8. EL HÉROE DE UNA PANTALLA Y SU FILA DE CIFRAS ---------------------- Drivers ("3 of 5 working") y CDL trips ("Still to pay 4,340.00 +" al dueño, "29 trips this week" a la oficina). La cifra a --t-cifra-heroe en tinta, nunca amarilla; la fila de apoyo debajo, en tarjetas de cifra. */ @media screen { .heroe-pantalla:not([hidden]) { display: flex; flex-direction: column; gap: var(--e3); margin: 0 0 var(--e4); padding: var(--e4); background: var(--panel); border: 1px solid var(--borde-tarjeta); border-radius: var(--radio); } .heroe-pantalla p { margin: 0; } .heroe-rotulo { font-size: 1.125rem; font-weight: 700; color: var(--tinta); } .heroe-cifra { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e3); font-size: var(--t-cifra-heroe); font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--tinta); font-variant-numeric: tabular-nums; } .heroe-cifra > b { font-weight: 800; } .heroe-cifra > span:not(.monto):not(.mas) { font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); font-weight: 700; letter-spacing: -.01em; color: var(--tinta-suave); } .heroe-cifra .mas { font-size: .45em; } .heroe-nota { display: flex; gap: var(--e2); flex-wrap: wrap; } .heroe-pantalla .kpi-fila { margin-top: var(--e2); } .heroe-pantalla .kpi { background: var(--marco); } @media (min-width: 64rem) { .heroe-pantalla:not([hidden]) { padding: var(--e5) var(--e6); } .kpi-fila.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* La cabecera de Drivers ya no repite "3 of 5 working" en chico. */ [data-seccion="choferes"] #resumen-tablero:not(:empty) { display: none; } /* DRIVERS EN ESCRITORIO: una ficha abierta va a todo el ancho y las cerradas llenan las filas (dense). Juntas en la misma fila, las abiertas y las cerradas quedaban con alturas dispares (Juan y Pedro abiertos de ~600 px junto a fichas de 120: hallazgo H3). */ @media (min-width: 64rem) { #tablero.tablero { grid-auto-flow: row dense; } #tablero.tablero > details.ficha[open] { grid-column: 1 / -1; } } /* CASH: las tres cifras de apoyo (Not counted yet, Claims, Moves) como tarjetas, debajo de la cifra héroe. */ #cifras-entregas.titulares { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--e3); margin: var(--e2) 0 var(--e4); } [data-densidad="oficina"] #cifras-entregas .titular { display: flex; flex-direction: column; gap: var(--e1); padding: var(--e3) var(--e4); background: var(--panel); border: 1px solid var(--borde-tarjeta); border-radius: var(--radio); } [data-densidad="oficina"] #cifras-entregas .titular .cifra, #cifras-entregas .titular .cifra { font-size: var(--t-kpi); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; order: 2; } #cifras-entregas .titular .rotulo { order: 1; font-size: 1rem; font-weight: 700; color: var(--tinta); } #cifras-entregas .titular .nota { order: 3; } #cifras-entregas .titular:has(.cifra.pendiente) { box-shadow: inset 5px 0 0 var(--espera-banda); } #cifras-entregas .titular:has(.cifra.falta) { box-shadow: inset 5px 0 0 var(--rojo); } #cifras-entregas .titular .cifra.falta { color: var(--rojo-texto); } /* USERS: un grupo por papel, con su cabecera chica y cuántos son; arriba "Need you" (petición de clave, bloqueados) con la banda roja. En escritorio las filas de cada grupo en columnas de 22rem: el grupo ya no se parte a mitad de fila con el de al lado. */ #usuarios.filas { display: flex; flex-direction: column; gap: var(--e5); border-top: 0; } .grupo-usuarios { min-width: 0; } .cabeza-usuarios { display: flex; align-items: baseline; gap: var(--e2); margin: 0 0 var(--e2); font-size: 1rem; font-weight: 700; color: var(--tinta-suave); text-transform: none; letter-spacing: 0; } .cabeza-usuarios .n { min-width: 1.5rem; padding: 0 6px; border-radius: var(--pastilla); background: var(--hundido); color: var(--tinta); font-size: .8125rem; font-weight: 800; text-align: center; } .filas-usuarios { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; border-top: 1px solid var(--linea); } @media (min-width: 60rem) { .filas-usuarios { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); column-gap: var(--hueco-seccion); } /* LA FICHA ABIERTA, A LO ANCHO (8 oct 2026, usuario simulado). En la rejilla de tres columnas la ficha abierta crecía en su columna y a sus lados quedaban dos huecos negros de 600 px. Abierta ocupa la fila entera; las demás siguen en su orden, antes y después. */ .filas-usuarios > details.usuario[open] { grid-column: 1 / -1; } } .grupo-usuarios.urgente .cabeza-usuarios { color: var(--rojo-texto); } .grupo-usuarios.urgente .usuario { box-shadow: inset 4px 0 0 var(--rojo); background: var(--rojo-fondo); } .grupo-usuarios.urgente .usuario > summary { padding-left: var(--e3); } } /* ---- 9. CAMPOS Y CHIPS DE FILTRO ------------------------------------------ El campo era del color de lo hundido. Con la Noche lo hundido sube un escalón (#262B30) y un campo se leía como una caja llena, no como un hueco donde se escribe. Ahora: en claro, blanco con su borde de control (como la maqueta A: #6E716D da 4.9:1 sobre el blanco); en oscuro, el fondo hondo (como la maqueta B: el borde #767C81, 4.48:1). El texto de muestra sigue en tinta tenue: 7.4:1 en claro y 6.0 en oscuro. */ :root, [data-densidad="campo"], [data-tema="claro"] { --campo-fondo: #FFFFFF; } [data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"] { --campo-fondo: var(--carbon-hondo); } [data-sol] { --campo-fondo: #FFFFFF; } @media screen { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { background: var(--campo-fondo); } /* Los chips de filtro: con borde y sin relleno; el puesto, en tinta (lo elegido). Iban rellenos de lo hundido y se leían como botones apagados. */ main .filtros button:not(.activo):not([aria-pressed="true"]) { background: transparent; border-color: var(--borde-boton); color: var(--tinta); } /* Cash: las bandas de las cifras ya las pone su regla (peso visual · 4). */ #cifras-entregas .titular:has(.cifra.pendiente), #cifras-entregas .titular:has(.cifra.falta) { box-shadow: none; } /* Users: cada grupo a lo ancho (el contenedor era una rejilla que encogía sus hijos a su contenido). */ #usuarios.filas { align-items: stretch; } } /* ---- 10. EL TELÉFONO DEL CHOFER: TODAY ------------------------------------ El dueño, sobre la maqueta (3 oct): "Sí, así". Arriba, grande, "2 cars today" con lo pagado y "Show the 2 cars"; después la tarjeta de la grúa con sus huecos y los dos botones grandes; la nota para la oficina, plegada al final. Se lee al sol: la cifra en 800, nada bajo 16 px, y Sunlight encima lo lleva todo a blanco y negro. */ @media screen { body.una-mano .tarjeta.heroe-hoy:not([hidden]), body.una-mano .tarjeta.grua:not([hidden]) { display: flex; flex-direction: column; gap: var(--e3); padding: 18px; border: 1.5px solid var(--borde-tarjeta); border-radius: var(--radio); background: var(--panel); } .fila-heroe { display: flex; align-items: flex-end; gap: 14px; min-width: 0; } .cuantos-hoy { display: flex; align-items: flex-end; gap: 12px; margin: 0; min-width: 0; color: var(--tinta); } .cuantos-hoy b { font-size: clamp(4rem, 3rem + 5vw, 4.75rem); font-weight: 800; line-height: .82; letter-spacing: -.045em; font-variant-numeric: tabular-nums; } .cuantos-hoy span { font-size: 1.5rem; font-weight: 800; line-height: 1.05; max-width: 5.2em; } .pagado-hoy { margin: 0 0 0 auto; text-align: right; color: var(--tinta); } .pagado-hoy .monto { font-size: 1.875rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; } .pagado-hoy .r { display: block; margin-top: 4px; font-size: 1rem; font-weight: 600; color: var(--tinta-suave); } /* "Show the 2 cars": la lista detrás de una línea con el triángulo de la casa, separada de la cifra por una raya. 52 px de toque. */ .ver-lista { min-width: 0; } .ver-lista > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 52px; padding-top: var(--e2); border-top: 1px solid var(--linea); font-size: 1.0625rem; font-weight: 700; color: var(--tinta); } .ver-lista > summary::-webkit-details-marker { display: none; } .ver-lista[open] > summary::before { transform: rotate(90deg); } .ver-lista > summary:focus-visible { outline: 3px solid var(--foco, var(--acento)); outline-offset: 2px; border-radius: var(--radio-chico); } /* LA GRÚA: un hueco de 34 × 22 por sitio, lleno en tinta y vacío en gris; cuántos lleva (20/800) y a dónde va (16/600). El número lo dice el texto: los huecos son dibujo (aria-hidden). */ /* LOS HUECOS BAJAN DE LÍNEA (U1, qa47). Con `flex: none` y sin envolver, una grúa de 12 daba una fila de 474 px dentro de una cabecera de 258 (a 320) o 328 (a 390) y la página entera se corría de lado: empezaba a romperse en capacidad 6 a 320, 8 a 390 y 12 a 768. El tope de 12 de Settings se queda, porque una grúa de más de cinco carros es real (src/ajustes.js). Dos cambios, y ninguno toca el tamaño del hueco: - la FILA DE HUECOS envuelve, con `max-width: 100%` para que no pueda pasarse de la cabecera (sigue con `flex: none`, así que cada hueco conserva sus 34 × 22, que es lo que lo hace reconocible de un vistazo: doce caben en dos filas hasta a 320); - la CABECERA envuelve también, así que con muchos huecos "2 loaded · Heading to the yard" baja a su propia línea entera en vez de quedar en una columna de 12 px. No se pierde área táctil: los huecos son dibujo (`aria-hidden`); lo que se toca son los botones de abajo. */ .cabeza-grua { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; } .huecos { display: flex; flex-wrap: wrap; gap: 6px; flex: none; max-width: 100%; } .huecos i { display: block; width: 34px; height: 22px; border-radius: 6px; background: var(--tinta); } .huecos i.vacio { background: var(--grafico-resto); } /* Lo que le mandaron y va a recoger (8 oct 2026): ocupa sitio, pero no está arriba. Hueco con borde de tinta, sin relleno. */ .huecos i.reservado { background: transparent; box-shadow: inset 0 0 0 2px var(--tinta); } .cabeza-grua .t { margin: 0; min-width: 0; } .cabeza-grua .t b { display: block; font-size: 1.25rem; font-weight: 800; line-height: 1.15; color: var(--tinta); } .cabeza-grua .t small { display: block; font-size: 1rem; font-weight: 600; color: var(--tinta-suave); } body.una-mano .grua .acciones { display: flex; flex-direction: column; gap: 10px; margin: 0; } body.una-mano .grua .acciones > button { width: 100%; margin: 0; flex: none; } body.una-mano .grua #descargar.principal, body.una-mano .grua #hacia-yarda.principal { min-height: 64px; font-size: 1.25rem; font-weight: 800; } body.una-mano .grua #sigo-afuera, body.una-mano .grua #hacia-yarda:not(.principal) { min-height: 56px; font-size: 1.125rem; border-width: 2px; } body.una-mano .grua .aviso { margin: 0; } /* La nota y los demás plegados de una línea, como tarjeta de 60 px. */ body.una-mano .nota-dia > .desplegable > summary { min-height: 60px; font-size: 1.125rem; font-weight: 700; } /* NOCHE EN EL TELÉFONO: la columna de 480 sobre un fondo más hondo que la página (lo hundido de la Noche es más claro que el fondo y la columna quedaba dentro de un marco gris). */ body.una-mano[data-tema="oscuro"] { box-shadow: 0 0 0 1px var(--linea), 0 0 0 100vmax #070809; } } /* ---- 11. EL TELÉFONO DEL CDL: THIS WEEK Y LOS LUGARES ---------------------- La semana abierta: "17 trips" a 72 px, las barras por día y la lista de días sin cabecera (el total ya está arriba, grande). La tarjeta de la semana y la de hoy, como tarjetas de radio 26. Los lugares, tarjetas de 84 px con el nombre abajo y su contador de hoy arriba a la derecha, en tinta (lo elegido; nunca amarillo). Nunca dinero. */ @media screen { body.una-mano #seccion-semana:not([hidden]), body.una-mano #seccion-hoy:not([hidden]) { padding: 18px; background: var(--panel); border: 1.5px solid var(--borde-tarjeta); border-radius: var(--radio); } body.una-mano #plegado-semana { border: 0; background: transparent; padding: 0; } body.una-mano #plegado-semana > summary { min-height: 48px; padding: 0; border: 0; background: transparent; } .total-semana-cdl { display: flex; align-items: flex-end; gap: 10px; margin: var(--e2) 0 var(--e4); color: var(--tinta); } .total-semana-cdl b { font-size: 4.5rem; font-weight: 800; line-height: .82; letter-spacing: -.045em; font-variant-numeric: tabular-nums; } .total-semana-cdl span { font-size: 1.375rem; font-weight: 800; } .dias-barras.semana-barras { --alto-barras: 5rem; margin-bottom: 2rem; } .semana-barras .dia-nombre { font-size: 1rem; } .semana-barras .dia-n { font-size: 1rem; } body.una-mano table.semana-cdl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } body.una-mano table.semana-cdl tfoot { display: none; } body.una-mano table.semana-cdl tbody th, body.una-mano table.semana-cdl tbody td { font-size: 1.125rem; font-weight: 400; } body.una-mano table.semana-cdl tbody tr.hoy th, body.una-mano table.semana-cdl tbody tr.hoy td, body.una-mano table.semana-cdl tbody td.n { font-weight: 800; } /* LOS LUGARES DEL CDL, TARJETAS DE TOQUE DE 84 PX: el nombre abajo a la izquierda (18/800), el contador de hoy en un círculo de tinta arriba a la derecha. "Somewhere else…" a todo el ancho y punteado, como antes. */ body.una-mano .destinos { gap: 10px; } body.una-mano button.destino:not(.otro) { min-height: 84px; border-radius: 20px; border: 2px solid var(--borde-boton); background: var(--panel); display: grid; align-content: end; justify-items: start; text-align: left; padding: 12px 16px; } body.una-mano button.destino .nombre { font-size: 1.125rem; font-weight: 800; } /* En la Noche, el borde de control (#767C81: 4.48:1 contra el fondo, 3.7 contra el panel). Con el filo de tarjeta #4A5055 de la maqueta B daba 2.32: un botón necesita 3:1 (WCAG 1.4.11; lo vio la línea base). */ body.una-mano[data-tema="oscuro"] button.destino:not(.otro) { border-color: var(--linea-control); } body.una-mano button.destino.otro { min-height: 60px; border-radius: 20px; font-weight: 800; } /* LA NOTA DEL CHOFER, UNA LÍNEA DE 60 PX AL FINAL (la tarjeta llevaba su relleno además del de la línea: medía 98). */ body.una-mano .tarjeta.nota-dia { padding: 0 var(--e4); } body.una-mano .tarjeta.nota-dia > .desplegable[open] { padding-bottom: var(--e4); } } @media screen { /* Sin contador de hoy, el nombre del lugar usa todo el ancho ("Sims Motors" partía en dos líneas por el hueco del círculo que no estaba). */ body.una-mano button.destino:not(:has(.hoy)) .nombre { padding-right: 0; } /* My account del CDL, tarjeta como la semana (maquetas A y B). */ body.una-mano #seccion-cuenta:not([hidden]) { padding: 0 18px; background: var(--panel); border: 1.5px solid var(--borde-tarjeta); border-radius: var(--radio); } body.una-mano #seccion-cuenta #plegado-cuenta { border: 0; background: transparent; } body.una-mano #seccion-cuenta #plegado-cuenta > summary { border: 0; background: transparent; } } /* HOME CON TRES CIFRAS (la oficina: Remaining balance, Not counted yet y Cars this week). En la columna de la derecha, tres a lo ancho medían 140 px y "$2,210.00" tocaba el borde (Vanessa, 1440): dos arriba y la tercera a todo el ancho. */ @media screen and (min-width: 64rem) { .casa-kpis.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } .casa-kpis.tres > li:last-child { grid-column: 1 / -1; } } /* A 320 (medido el 3 oct): dos tarjetas de cifra por fila medían 134 px y el chip "Still running" y el "+" de "$5,082.00 +" se salían de su pozo; por debajo de 24.5rem, una por fila. Y "Fri so far" se montaba sobre "Thu": el "so far" baja a su renglón bajo el día. Las rayas de Cars by day, 72 px como mucho (a 768 cada columna medía 107). */ @media screen and (max-width: 24.49rem) { .kpi-fila { grid-template-columns: minmax(0, 1fr); } } @media screen { .dias-barras .hasta-ahora { display: block; font-size: .875rem; } .casa-dias .dias-barras { margin-bottom: 2.75rem; } .dias-unidades .dia-rayas { max-width: 4.5rem; } } /* ========================================================================== LO QUE VIO EL PROBADOR EN EL REDISEÑO (qa44, 3 oct 2026) ========================================================================== */ @media screen { /* U1. SETTLE UP: EL BOTÓN ANTES QUE LAS BARRAS. Las barras son la tercera pieza de la tarjeta (oficina.js): en una columna van después del botón; desde 64rem la rejilla las pone bajo la cifra, a la izquierda, como antes. Y por debajo de 64rem, las cinco de arriba y "and N more" (a 390 con 40 choferes el botón estaba en y=3,304). */ .saldar-barras .barras-mas { display: none; margin-top: var(--e2); min-height: 44px; padding: 0 var(--e1); } @media (max-width: 63.99rem) { /* El botón ya va primero de su columna EN EL DOM (pintarViernes, qa45): aquí no hay `order` que lo suba, para que el Tab y el lector de pantalla lo encuentren donde se ve. */ .saldar-barras.con-tope .barras-chofer > li:nth-child(n+6) { display: none; } .saldar-barras.con-tope .barras-mas { display: inline-flex; } } /* U5. MY ACCOUNT DEL CHOFER CON SU TARJETA. La regla de My account del CDL (#plegado-cuenta, el mismo id en los dos teléfonos) le quitaba el fondo y el borde también al chofer: ahora va solo dentro de #seccion-cuenta, que es del CDL (sección 11, arriba). */ /* U6. WORKING NOW EN UNA TARJETA ESTRECHA (320): el estado bajo el nombre y entero, en vez de "Cash cl…" o un CDL en cuatro renglones. */ @container (max-width: 19rem) { .casa-ahora button.casa-chofer { grid-template-columns: auto minmax(0, 1fr) 16px; grid-template-areas: "c n f" "c e f"; row-gap: 2px; } .casa-ahora button.casa-chofer > .cara { grid-area: c; } .casa-ahora button.casa-chofer > .casa-nombre { grid-area: n; } .casa-ahora button.casa-chofer > .casa-estado { grid-area: e; justify-self: start; text-align: left; max-width: none; white-space: normal; text-overflow: clip; } .casa-ahora button.casa-chofer > .casa-chev { grid-area: f; } } /* WORKING NOW CON EL RESUMEN DE HOY (5 oct 2026; el dueño: "en el home debe haber un resumen de los choferes activos"). Cada fila en dos renglones: arriba nombre y estado, como antes; debajo, bajo el nombre y el estado juntos, lo hecho hoy ("3 cars today 1 on the truck Remaining balance 120.00"; del CDL "3 trips today"). La cara y la › ocupan los dos renglones. Los trozos no parten por dentro (nowrap) y la línea parte entre ellos: a 390 baja "Remaining balance 1,250.00" entero. Gris como el estado, con la cifra en tinta y negrita: es lo que el ojo busca. Más específico que la regla de U6, así que repite su forma estrecha abajo con su tercer renglón. */ .casa-ahora button.casa-chofer.con-hoy { grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr) 16px; grid-template-areas: "c n e f" "c h h f"; row-gap: 2px; padding-top: var(--e2); padding-bottom: var(--e2); } .casa-ahora button.casa-chofer.con-hoy > .cara { grid-area: c; } .casa-ahora button.casa-chofer.con-hoy > .casa-nombre { grid-area: n; } .casa-ahora button.casa-chofer.con-hoy > .casa-estado { grid-area: e; } .casa-ahora button.casa-chofer.con-hoy > .casa-hoy { grid-area: h; } .casa-ahora button.casa-chofer.con-hoy > .casa-chev { grid-area: f; } .casa-hoy { display: flex; flex-wrap: wrap; gap: 0 var(--e3); min-width: 0; font-size: .875rem; line-height: 1.4; color: var(--tinta-suave); } .casa-hoy > span { white-space: nowrap; } .casa-hoy b { font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; } .casa-hoy b.falta { color: var(--rojo-texto); } @container (max-width: 19rem) { .casa-ahora button.casa-chofer.con-hoy { grid-template-columns: auto minmax(0, 1fr) 16px; grid-template-areas: "c n f" "c e f" "c h f"; } .casa-ahora button.casa-chofer.con-hoy > .casa-estado { justify-self: start; text-align: left; max-width: none; white-space: normal; text-overflow: clip; } } /* U7. "OPEN CLAIM" SIN LA RAYA AMARILLA: era amarillo en algo que no se toca (Drivers y el teléfono del chofer). La palabra ya lleva su rojo. */ .entrega header .codigo::before, .reclamo > .codigo::before, .confirmar.reclamado > h2.codigo::before { content: none; } /* U10. EN OSCURO, "8 2 6" SE LEÍA 826. El 8 sigue siendo el héroe; el 2 y el 6, a algo menos de la mitad, cada uno con su palabra debajo y una raya que los separa del 8 y entre ellos. Sigue siendo la fila de números de la maqueta B. */ :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .hacer-parte, :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .hacer-parte.traba { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--e2); padding-left: clamp(1rem, 2vw, 1.5rem); border-left: 1px solid var(--linea); align-self: stretch; } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .hacer-parte .n { font-size: calc(var(--t-hacer) * .45); line-height: .9; margin-top: auto; } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .hacer-estado, :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .hacer-estado:has(.hacer-parte.traba:not([hidden])) { align-items: stretch; column-gap: clamp(1rem, 2vw, 1.5rem); } /* LOS DOS CONTROLES BAJO 3:1 DE LA NOCHE. "Print the week" (un botón sin banda) era un relleno a 1.09:1 del panel: con el borde de control, 3.7. El filo de la sección puesta en la columna, de #3A4147 (1.38) a #767C81 (4.2 contra la columna carbón). */ :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) main .saldar-falta button.casa-fila.imprimir-semana { box-shadow: inset 0 0 0 1px var(--linea-control); } } @media screen and (min-width: 64rem) { main .viernes.liquidar-semana { grid-template-areas: "izq der" "barras der"; grid-template-rows: auto 1fr; } main .viernes.liquidar-semana > .saldar-izq { grid-area: izq; } main .viernes.liquidar-semana > .saldar-der { grid-area: der; } main .viernes.liquidar-semana > .saldar-barras { grid-area: barras; margin-top: 0; } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .barra-pestanas button.activa { box-shadow: inset 0 0 0 1px #767C81; } } /* U2. CDL: con la semana abierta, "17 trips" ya está grande debajo; el resumen de la línea solo se ve plegada. */ @media screen { body.una-mano #plegado-semana[open] > summary .resumen-plegado { display: none; } } /* La fila de lo que se paga, a todo el ancho de Pay: sin el chip largo "4,340.00 before taxes" (qa44, U2) la sección medía lo que su contenido y la fila se quedaba en 996 px de 1,136 a 1440 (la sección alinea sus hijos al principio). */ @media screen { main .pago-semana.pago-semana { width: 100%; align-self: stretch; } main .pago-semana > .pago-kpis { align-self: stretch; } } /* ========================================================================== ÁREA A · EL TELÉFONO DEL CHOFER DE GRÚA (Juan, ronda de usabilidad del 3 oct 2026). Bloque propio, al final, para que se fusione sin pisar a las otras áreas. Todo bajo `body.una-mano` o con clases que solo pinta chofer.js. ========================================================================== */ /* LO DICHO EN SU SITIO (decirEnSitio en chofer.js): la línea que confirma un botón de Today o de Expense, en su tarjeta y debajo del botón, en vez del aviso que flota sobre la barra y tapaba el botón siguiente. */ body.una-mano .dicho-sitio { margin: var(--e2) 0 0; } body.una-mano .aviso-local.dato { border-left-color: var(--espera-banda); color: var(--tinta); } /* "Earlier today: 7 more cars": lo del día de trabajo anterior de la misma fecha, en chico bajo la cifra grande (ver pintarComprados). */ body.una-mano .antes-hoy { margin: var(--e1) 0 0; color: var(--tinta-suave); font-size: var(--t-chico); } /* LA FILA DE "LOGGED TODAY" NO ES UNA CAJA A MEDIAS (Juan, pendiente de antes). La fila lleva border-radius de la regla general de listas y solo `border-top`: el navegador curva ese único borde en las dos esquinas y se lee como un recuadro con el lado izquierdo cortado. Aquí la fila es una línea de lista, no una caja: la raya va recta y de lado a lado, alineada con el borde de la tarjeta de abajo. (En la oficina la fila sí vive dentro de una caja: esto es solo del teléfono.) */ body.una-mano .gasto-hoy { border-radius: 0; } /* "3,150.00 OVER": el carro pagado de más, en rojo y con su icono (no solo el color), debajo de la cifra como el "under" verde. */ body.una-mano .carro-hoy .cifras .sobre { display: block; text-align: right; color: var(--rojo-texto); font-size: .85em; font-weight: 700; } body.una-mano .carro-hoy .cifras .sobre .icono { width: 1em; height: 1em; vertical-align: -.15em; margin-right: .25em; } /* "SOMETHING WRONG?" de cada carro: tranquilo (se usa poco y no decide nada), a la izquierda bajo lo que era el carro, con su toque de 48. */ body.una-mano .carro-hoy .algo-mal { grid-column: 1 / -1; justify-self: start; min-height: var(--toque, 48px); padding: 0; margin-top: .1rem; font-size: var(--t-base, 1rem); } /* LO ELEGIDO LLEVA ✓ (Juan, 3 oct 2026): "No title", "Shell" y el catalítico se marcaban solo invirtiendo el color, y el color se invierte con el tema (elegido = negro en claro, crema en oscuro). Con la marca se lee igual en los tres temas. El lector de pantalla ya dice "checked" (casilla nativa). */ body.una-mano .piezas label:has(input:checked) .nombre::before { content: "\2713\00a0"; font-weight: 800; } /* De qué carro es el paso 2 y el 3: una línea, cortada con "…". */ body.una-mano .carro-del-paso { margin: calc(var(--e1) * -1) 0 var(--e2); color: var(--tinta-suave); font-size: var(--t-chico); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Lo que viene después de guardar un gasto, dicho antes del botón. */ body.una-mano .pista-boton { margin: 0; color: var(--tinta-suave); font-size: var(--t-chico); } /* La foto de un gasto que espera señal, en la fila de "Logged today". */ body.una-mano .gasto-hoy .foto-espera { color: var(--tinta-suave); } /* El traspaso que el otro rechazó, arriba de Today. */ body.una-mano #traspasos-rechazados:not(:empty) { margin-bottom: var(--e2); } body.una-mano .rechazo-traspaso { margin: 0 0 var(--e2); padding: var(--e3); font-size: var(--t-base, 1rem); } /* "Give cash to a driver" en My cash: un secundario a todo el ancho, entre la cifra y los plegables de abajo. */ body.una-mano .dar-a-chofer { width: 100%; margin: var(--e3) 0; } /* LOS EJEMPLOS NO PARECEN ESCRITOS (Juan, 3 oct 2026): "2004 Toyota Corolla" y "New chain" en el gris del texto de muestra se leían como datos ya puestos. Llevan "e.g." y van en cursiva. */ body.una-mano ::placeholder { font-style: italic; } /* (Aquí iba el "Log out" armado de la barra, en rojo. Desde el 22 oct 2026 "Log out" vive al final de My account y sale con un toque: chofer.js.) */ /* ========================================================================== ÁREA B · EL TELÉFONO DEL CDL (ronda de usabilidad del 3 oct 2026, Victor) Bloque propio, al final, para que se fusione sin pisar a las otras áreas. Con los colores del sistema (variables); el único a mano es el gris del borde de la barra carbón, el mismo de "End my day" (más arriba). ========================================================================== */ @media screen { /* 1. EL BOTÓN DEL LUGAR NO CAMBIA DE FORMA CON EL PRIMER VIAJE. El contador iba en una esquina por encima del nombre, y el nombre le dejaba sitio solo cuando había contador (padding-right 2.6rem): al primer toque "Easton Cars" pasaba a "Easton / Cars" y se corría. Ahora el contador tiene su propio renglón arriba a la derecha, SIEMPRE (vacío con `.cero`, sin verse), y el nombre todo el ancho debajo, a la izquierda en todos. Una tarjeta mide lo mismo con 0 o con 3 viajes. */ /* Una columna de todo el ancho: con la columna "auto" de antes, el `justify-content: center` de los botones centraba la columna, y cada nombre quedaba a otra distancia del borde (medido a 390: de 25 a 64 px). */ body.una-mano button.destino:not(.otro) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-content: stretch; justify-content: stretch; justify-items: start; row-gap: 2px; text-align: left; } body.una-mano button.destino .hoy { position: static; grid-row: 1; justify-self: end; } body.una-mano button.destino .hoy.cero { visibility: hidden; } /* Solo en las tarjetas: "Somewhere else…" es flex en columna, y ahí `align-self: end` lo mandaba a la derecha. */ body.una-mano button.destino:not(.otro) .nombre { grid-row: 2; align-self: end; justify-self: start; text-align: left; padding-right: 0; overflow-wrap: break-word; } body.una-mano button.destino:not(.otro) .precio { grid-row: 3; justify-self: start; } /* 2. "REMOVE" Y SU SEGUNDO TOQUE, DEL MISMO ANCHO. "Tap again to remove" le quitaba el sitio al nombre: a 360 "A&G Cars" quedaba una letra por renglón y la fila crecía de 69 a 278 px bajo el pulgar. El segundo toque dice "Tap again" (cdl.js) en el mismo ancho que "Remove", y el nombre se parte solo entre palabras. */ /* La hora, lo que mide ("4:24 PM", 67 px), y no 5.2rem fijos; y el botón con un ANCHO fijo en sus dos estados ("Tap again" mide 74 px en 700/16, "Remove" 62): a 360 al nombre le quedan 121 px y "Newark Cars" (109) o "Sims Motors" (108) caben en una línea con el botón armado o sin armar. Medido en Chromium a 360 y 390. */ .viajes-hoy li { grid-template-columns: max-content minmax(0, 1fr) auto; column-gap: var(--e2); } .viajes-hoy .lugar { overflow-wrap: break-word; } .viajes-hoy button[data-quitar] { width: 5.875rem; min-width: 0; padding-inline: var(--e2); white-space: nowrap; justify-content: center; } /* 3. "SOMEWHERE ELSE": sin el punto de "obligatorio" (el cuadrito suelto antes de la etiqueta: es el único campo) y con el "no" en rojo. */ .otro-lugar label::before { content: none; } .otro-lugar #alerta-otro:empty { display: none; } /* 4. LA LÍNEA QUE SIGUE AL DÍA: qué hacer con un viaje olvidado, o que el día de otra fecha sigue abierto. Gris y del tamaño del texto, debajo de la línea del día (que es la que manda). */ .pista-dia-cdl { margin: var(--e2) 0 0; font-size: 1rem; font-weight: 400; line-height: 1.4; color: var(--tinta-suave); } /* 5. "NOT SENT YET: EASTON CARS · TAP TO SEND". Lo que espera va en gris con su reloj (regla de la casa: rojo lo que traba, gris lo que espera); toda la fila es el botón, de 56 px, con el borde punteado de lo que todavía no es. */ .sin-enviar-cdl { list-style: none; margin: 0 0 var(--e3); padding: 0; display: grid; gap: var(--e2); } .sin-enviar-cdl button.sin-enviar { width: 100%; min-height: 56px; margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e2); padding: var(--e2) var(--e3); border: 1.5px dashed var(--linea-control); border-radius: var(--radio-chico); background: var(--hundido); color: var(--tinta); text-align: left; text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 700; } .sin-enviar-cdl button.sin-enviar .icono { color: var(--tinta-suave); } .sin-enviar-cdl button.sin-enviar .que { overflow-wrap: break-word; } .sin-enviar-cdl button.sin-enviar .tocar { font-size: var(--t-chico); font-weight: 700; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .sin-enviar-cdl button.sin-enviar[aria-busy="true"] { opacity: .6; } /* 6. LA SEMANA PASADA, como la de ahora: tarjeta de radio 26 con su pliegue de una línea. */ body.una-mano #seccion-pasada:not([hidden]) { padding: 18px; background: var(--panel); border: 1.5px solid var(--borde-tarjeta); border-radius: var(--radio); } body.una-mano #plegado-pasada { border: 0; background: transparent; padding: 0; } body.una-mano #plegado-pasada > summary { min-height: 48px; padding: 0; border: 0; background: transparent; } body.una-mano #plegado-pasada[open] > summary .resumen-plegado { display: none; } /* 7. "LOG OUT", AL FINAL DE MY ACCOUNT y no a 4 px de "Sunlight". Un secundario a todo el ancho, separado de lo de arriba. */ .salir-cdl { margin: var(--e4) 0; padding-top: var(--e3); border-top: 1px solid var(--linea); } .salir-cdl button { width: 100%; } } /* 8. EL BOTÓN DEL DÍA. Armado ("Tap again to end the day"), los primeros 700 ms no escucha (cdl.js, ARMADO_QUIETO_MS) y se ve: el rojo se LLENA en esos 700 ms desde la barra carbón (blanco sobre una mezcla de carbón y rojo: nunca baja del 4.71:1 del rojo solo). Con "reducir movimiento", rojo de una vez. "Undo end of day" (los dos minutos tras terminar) va como "End my day": borde y crema sobre carbón, con el mismo gris de borde que esa regla (#6E716D, 3.57:1); no grita, está ahí. */ @keyframes armar-dia-cdl { from { background-color: transparent; } to { background-color: var(--rojo); } } #dia-cdl.confirmando[data-quieto] { animation: armar-dia-cdl .7s linear both; } /* El botón del día del chofer de grúa recién terminado el día (8 oct 2026): "Start another day" no escucha un momento, y se ve apagado. */ #accion[data-quieto] { opacity: .55; } @media (prefers-reduced-motion: reduce) { #dia-cdl.confirmando[data-quieto] { animation: none; } } #dia-cdl[data-accion="seguir"] { background: transparent; color: var(--crema); border: 1.5px solid #6E716D; font-weight: 600; } /* ---- "Undo end of day" del chofer de grúa (8 oct 2026, chofer.html) -------- El mismo botón que el del CDL (#dia-cdl[data-accion="seguir"]): borde y crema sobre carbón, con el gris de borde de "End my day" (#6E716D, 3.57:1); no grita, está ahí. Encima de "Start another day", con su línea en chico (#A8A79F sobre carbón, como la franja: 7.4:1). Solo en Today, como el botón del día. */ #seguir-dia { min-height: var(--toque); font-size: 1rem; background: transparent; color: var(--crema); border: 1.5px solid #6E716D; font-weight: 600; } .control .pista-seguir { margin: 0; font-size: .875rem; line-height: 1.35; color: #A8A79F; } body:not([data-vista="hoy"]) #seguir-dia, body:not([data-vista="hoy"]) #pista-seguir { display: none; } /* ========================================================================== ÁREA C · LA OFICINA (3 OCT 2026): lo que vieron Vanessa y Christian ---------------------------------------------------------------------------- Bloque propio, al final, para que se fusione sin pisar a las otras áreas (A el chofer, B el CDL, D Settings). Cada regla dice qué arregla. ========================================================================== */ @media screen { /* ---- "Find a car" (decisión 7): el panel de la lupa, como el del periodo ---- */ .cabeza-informe .panel-buscar:not([hidden]) { display: flex; flex-direction: column; gap: var(--e3); margin: 0; padding: var(--e3) var(--e4); background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio-chico); } .panel-buscar .buscar-todas { display: flex; flex-direction: column; gap: var(--e2); margin: 0; font-size: .875rem; font-weight: 600; color: var(--tinta-suave); } .panel-buscar .buscar-todas input { width: 100%; min-width: 0; min-height: var(--toque); font-size: 1rem; } .panel-buscar .estado-buscar { margin: 0; font-size: .875rem; color: var(--tinta-suave); } /* La fecha de cada resultado, debajo del carro: es lo que dice de qué semana es (cada resultado puede ser de una distinta). */ .resultados-busqueda .carro > summary .que { flex-wrap: wrap; } .resultados-busqueda .fecha-resultado { flex: 1 1 100%; padding-left: 13px; font-size: .875rem; font-weight: 400; color: var(--tinta-suave); } /* El teléfono del cliente se toca para llamar (con su subrayado). */ .ficha-carro a.llamar { color: var(--tinta); font-weight: 700; text-underline-offset: 3px; } /* ---- "The cars in this period" a 1440, alineada (Vanessa). Las filas van dentro de .dia-grupo y la regla de la oficina (sin Tip ni Cost) era de hijos directos (`.carros.sin-dinero > .carro > summary`): las filas se quedaban con la rejilla de cinco columnas y Offered/Paid caían 230 px a la izquierda de sus títulos y del total. ---- */ .carros.sin-dinero .carro > summary { grid-template-columns: 1fr repeat(2, minmax(4.5rem, 6.5rem)); } /* ---- Cash: dar o recibir ---- */ /* Lo que ya tiene el chofer elegido, bajo los campos. */ .saldo-caja { margin: var(--e2) 0 0; font-size: .875rem; font-weight: 600; color: var(--tinta-suave); } /* A 390 los tres campos iban en dos columnas y el selector se cortaba ("Choose the driv"): uno por fila hasta que quepan de verdad. */ #form-caja .par { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } /* ---- Tips en el teléfono: lo ofrecido y "under the offer" a la vista ---- */ .fila-tip .oferta-fila { display: none; } /* ---- Home: las líneas que explican la tarjeta de pago ---- */ .kpi-lineas { display: flex; flex-direction: column; gap: 2px; font-size: .875rem; line-height: 1.35; color: var(--tinta-suave); } .kpi-lineas .kpi-linea { white-space: normal; } /* ---- Saldar: la cifra que se mueve, una vez ---- */ .saldar-cifra-form { margin: 0; font-size: 1rem; font-weight: 600; color: var(--tinta-suave); } .saldar-cifra-form b { color: var(--tinta); font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; } /* ---- Users: cada permiso con su frase (crear y la fila) ---- */ .chequeos label.permiso { align-items: flex-start; padding-top: var(--e2); padding-bottom: var(--e2); } .chequeos label.permiso input { margin-top: 2px; } .permiso-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .permiso-detalle { font-size: .875rem; font-weight: 400; line-height: 1.35; color: var(--tinta-suave); white-space: normal; } .chequeos:has(label.permiso) { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .permisos-nuevo { border: 0; margin: var(--e3) 0 0; padding: 0; min-width: 0; } .permisos-nuevo legend { padding: 0; margin-bottom: var(--e2); font-size: 1rem; font-weight: 600; color: var(--tinta-suave); } .permisos-nuevo .ayuda-campo { display: block; margin-top: var(--e2); } /* ---- Drivers: la petición de PIN en la ficha ---- */ .pedido-ficha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); } .pedido-ficha p { margin: 0; flex: 1 1 12rem; } /* ---- "New PIN": el diálogo de la oficina usa la hoja del panel de avisos ---- */ dialog.dar-clave .avisos-cuerpo { display: flex; flex-direction: column; gap: var(--e4); } dialog.dar-clave .pedido-clave + .pedido-clave { border-top: 1px solid var(--linea); padding-top: var(--e4); } /* ---- "Jump to a date" no se estira (Vanessa: 141 × 224 px, en los dos temas). El campo de fecha es una línea de control, del alto de un toque. ---- */ .panel-periodo .salto-dia { flex: 0 1 auto; align-self: center; height: auto; } .panel-periodo .salto-dia input[type="date"] { height: var(--toque); min-height: var(--toque); max-height: var(--toque); width: auto; flex: 0 1 12rem; } /* ---- "Cars by day" en oscuro: la barra con su número (Vanessa y Christian: las rayitas grises, una por carro, no se leían como gráfico). La misma pieza que en claro; las rayas no salen en ningún tema. ---- */ :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .casa-dias .dias-barras { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .dias-unidades { display: none; } } /* Tips en el teléfono: la línea de lo ofrecido, a todo el ancho bajo "Paid". */ @media screen and (max-width: 44rem) { .fila-tip { grid-template-areas: "abrir carro carro carro" "abrir pago tip guardar" "abrir oferta oferta oferta" "abrir detalle detalle detalle" "nota nota nota nota"; } .fila-tip .oferta-fila { display: block; grid-area: oferta; min-width: 0; padding-bottom: 2px; font-size: var(--t-chico); color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fila-tip .oferta-fila b { font-weight: 700; } } /* Drivers en el teléfono: las tres cifras en una fila corta, para que el primer chofer se vea sin bajar (Vanessa: empezaba en y=667 a 390). Los nombres de "Need you" van en la lista misma (cada ficha dice lo suyo). */ @media screen and (max-width: 47.99rem) { #heroe-tablero .kpi-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); } #heroe-tablero .kpi { padding: 0; } #heroe-tablero .kpi .kpi-tapa { min-height: 0; padding: 6px 8px 0; } #heroe-tablero .kpi .kpi-tapa .rotulo { font-size: .875rem; } #heroe-tablero .kpi .kpi-pozo { padding: 4px 8px 8px; gap: 4px; border: 0; background: transparent; } #heroe-tablero .kpi .cifra { font-size: 1.75rem; } #heroe-tablero .kpi .kpi-pie { display: none; } #heroe-tablero .kpi .chip-estado { align-self: flex-start; } } /* El aviso pasajero en escritorio, abajo a la izquierda de la columna de contenido (Vanessa: centrado, caía sobre la columna de la derecha de Cash y tapaba el selector del historial o Amount y Save). La columna de secciones de la oficina mide 16rem. */ @media screen and (min-width: 64rem) { body[data-densidad="oficina"] #aviso.aviso-oficina { left: calc(16rem + var(--e5)); right: auto; width: min(30rem, calc(100vw - 16rem - 2 * var(--e5))); margin: 0; } } /* "Find a car" en la línea de "How this works", a la derecha (área C, 3 oct 2026): como quinto botón de la barra del periodo partía el nombre del periodo y bajaba Settle up. La ayuda, al abrirse, crece debajo de su resumen; el botón se queda arriba a la derecha. */ @media screen { .cabeza-informe .fila-ayuda { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: var(--e3); } .cabeza-informe .fila-ayuda > .ayuda-plegable { flex: 1 1 auto; min-width: 0; } .cabeza-informe .buscar-boton { flex: none; display: inline-flex; align-items: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e2); } } /* ========================================================================== ÁREA D · SETTINGS MÁS COMPLETA (3 oct 2026, decisión 1 del dueño) Los atajos de arriba, el "Saved" de cada perilla, la pregunta de "The week starts on", las grúas (una línea como los lugares de los CDL), las personas con sus papeles, los tipos de gasto, las fechas en Users y la línea de la empresa en la cabecera de las hojas impresas. Con las reglas de siempre: amarillo solo en lo que se toca (Save the truck, el sí de la semana), lo vencido en rojo con la alerta, lo que vence pronto en gris con el reloj, lo elegido en tinta (On/Off). ========================================================================== */ /* Los atajos: botones secundarios, 44 px de toque. En el teléfono, UNA fila que se desliza (como los chips de Cash): partidos en tres filas eran 150 px antes de My account a 390. */ .atajos-ajustes { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e2) 0 var(--e4); } .atajos-ajustes button { min-height: 44px; padding: 0 var(--e3); font-size: var(--t-chico); white-space: nowrap; flex: none; } @media (max-width: 44rem) { .atajos-ajustes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--e1)); padding: 2px var(--e1) var(--e1); } .atajos-ajustes::-webkit-scrollbar { display: none; } } /* "Your business": el título que antes solo oía el lector. */ #seccion-config > h2 { margin-top: var(--hueco-seccion); } #seccion-config .a-usuarios { margin: var(--e3) 0 0; } #seccion-config .a-usuarios .enlace, .filas-personas + p .enlace { min-height: 44px; padding: 0; } /* "Saving…", "Saved" o el "no" de una perilla, en su propia línea bajo ella. */ .opcion-config .estado-config { grid-column: 1 / -1; margin: 0; font-size: var(--t-chico); font-weight: 600; min-height: 0; } .opcion-config .estado-config:empty { display: none; } .estado-config.bien { color: var(--verde-texto); } .estado-config.guardando { color: var(--tinta-suave); font-weight: 400; } .estado-config.error { color: var(--rojo-texto); } .opcion-config [aria-invalid="true"] { border-color: var(--rojo-texto); } /* La pregunta de "The week starts on", dentro de su fila, a todo el ancho. */ .opcion-config .confirmar-semana { grid-column: 1 / -1; margin: 0; } .confirmar-semana p { margin: 0 0 var(--e2); } .confirmar-semana .acciones-aviso { display: flex; flex-wrap: wrap; gap: var(--e2); } .confirmar-semana .acciones-aviso button { min-height: 44px; } /* Las grúas: la línea de los lugares de los CDL (destino-cdl): la unidad y, debajo en chico, la placa y el chofer; a la derecha lo que vence y cuántos carros carga. Abierta, su ficha en rejilla (el `form` de un lugar es una fila que se parte, y aquí se leían los campos desordenados a 1440). */ .fila-grua > summary .sub, .fila-persona .sub { display: block; font-weight: 400; font-size: var(--t-chico); color: var(--tinta-suave); } .fila-grua > summary .lado { display: flex; flex-direction: column; align-items: flex-end; gap: var(--e1); flex: none; } .fila-grua > summary .chip-estado { flex: none; } .destino-cdl form.form-grua, form.form-grua { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); align-items: stretch; max-width: 48rem; margin-top: 0; } .form-grua .par { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--e3); } .form-grua > label, .form-grua .par > label { display: flex; flex-direction: column; gap: var(--e1); } .form-grua input, .form-grua select { width: 100%; max-width: none; box-sizing: border-box; } .form-grua .acciones button { white-space: nowrap; } .form-grua .acciones, .papeles-usuario .acciones { display: flex; flex-wrap: wrap; gap: var(--e2); } .sin-guardar { margin: 0; font-size: var(--t-chico); color: var(--espera); font-weight: 600; } #bloque-grua-nueva { margin-top: var(--e3); } /* Las personas: una línea que es un botón (lleva a su fila de Users). */ .filas-personas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); } .filas-personas li { border-bottom: 1px solid var(--linea); } /* El nombre y sus papeles a la izquierda (los papeles bajan debajo del nombre si no caben), la flecha siempre a la derecha. */ .fila-persona { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e3); width: 100%; min-height: 56px; padding: var(--e2) var(--e3); background: transparent; border: 0; border-radius: 0; text-align: left; color: var(--tinta); font-weight: 600; } .fila-persona .cuerpo-persona { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e1) var(--e3); min-width: 0; } .fila-persona .nombre { min-width: 0; overflow-wrap: anywhere; } .fila-persona .papeles { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e1); font-weight: 400; } @media (min-width: 44rem) { .fila-persona .papeles { align-items: flex-end; } } .fila-persona .casa-chev { flex: none; width: 20px; height: 20px; color: var(--tinta-suave); } .fila-persona.apagado { opacity: .75; } @media (hover: hover) { .fila-persona:hover { background: var(--hundido); } } .fila-persona:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--foco, var(--acento)); } /* El estado de un papel, en todas partes igual: rojo con la alerta, gris con el reloj, tenue sin fecha, tinta suave si falta mucho. */ .papel { display: inline-flex; align-items: center; gap: var(--e1); font-size: var(--t-chico); color: var(--tinta-suave); } .papel .icono { width: 16px; height: 16px; flex: none; } .papel.traba { color: var(--rojo-texto); font-weight: 700; } .papel.espera { color: var(--espera); font-weight: 600; } .papel.sin-fecha { color: var(--tinta-tenue); } /* Los tipos de gasto: nombre y On/Off, una fila cada uno. */ .titulo-tipos { font-size: var(--t-base); margin: var(--e4) 0 var(--e1); } .fila-tipo-gasto .nombre-tipo { font-weight: 600; } .fila-tipo-gasto .vacio { margin: 0; } .form-tipo-gasto { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e2); padding-top: var(--e3); border-top: 1px solid var(--linea); } .form-tipo-gasto label { flex: 1 1 14rem; display: flex; flex-direction: column; gap: var(--e1); } .form-tipo-gasto .acciones { margin: 0; } .form-tipo-gasto .aviso-local { flex-basis: 100%; } /* Las fechas de una persona en su fila de Users. */ .papeles-usuario { display: grid; gap: var(--e2); margin: var(--e2) 0; } .papeles-usuario .par { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--e3); align-items: start; } .papeles-usuario .par > label { display: flex; flex-direction: column; gap: var(--e1); } .papeles-usuario input { width: 100%; box-sizing: border-box; } .papeles-usuario.solo-leer .valor.papel { font-size: inherit; } /* LA EMPRESA EN LA HOJA IMPRESA: una línea de 10 pt (nada bajo 10 pt en el papel: peso-visual) al pie de la cabecera, A LO ANCHO bajo el nombre y los datos de la semana: dentro de la columna del nombre partía en dos renglones (unos 530 px de texto en 400) y la cabecera crecía 19 px. Sin datos no existe y la hoja es la de antes. LA CABECERA NO CRECE (el dueño: que la impresión no gane una página): con la línea, la cabecera recorta su aire por casi lo mismo que la línea ocupa (el título a interlínea 1, sin el respiro de "Printed", la raya de abajo más pegada). Medido en el PDF carta de Chromium con la semilla (README): la hoja de un CDL de 36 viajes y la de pago de 36 carros siguen en una. */ .hoja-pago > header { flex-wrap: wrap; } .hoja-pago .empresa-hoja { flex-basis: 100%; margin: 0; font-size: .875rem; line-height: 1.15; color: inherit; } @media print { .hoja-pago .empresa-hoja { grid-column: 1 / -1; font-size: 10pt; line-height: 1; letter-spacing: 0; text-transform: none; margin-top: 0; } /* Sin cortar con "…": son datos legales. Con todos los campos al máximo parte en dos renglones, que es lo honesto. */ /* row-gap 0: la cabecera es rejilla en papel pero hereda el `gap: 12mm` de cuando era flex, y la fila nueva quedaba 45 px más abajo. */ article.hoja-pago > header:has(.empresa-hoja) { padding-bottom: .25mm; margin-bottom: 1mm; row-gap: 0; } article.hoja-pago > header:has(.empresa-hoja) h1 { line-height: 1; } article.hoja-pago > header:has(.empresa-hoja) .impresa { margin-top: 0; } } /* ========================================================================== LA SEGUNDA RONDA DE USUARIOS SIMULADOS (4 OCT 2026) ---------------------------------------------------------------------------- Bloque propio al final, como las áreas A-D, para que se fusione sin pisar a nadie. Cada regla dice qué arregla y a quién se lo vio. ========================================================================== */ @media screen { /* ---- Drivers: la grúa del chofer y sus papeles, en la ficha (Christian) ---- Asignó la Truck 4 a Marco con el seguro vencido y la ficha de Marco no decía ni la grúa ni el seguro: eso vivía solo en Settings y en una línea de To do, y Drivers es donde se decide a quién se manda a la calle. Va en el summary, así que se lee con la ficha cerrada. */ .ficha .grua-ficha { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); min-width: 0; font-size: .875rem; color: var(--tinta-suave); } .ficha .grua-ficha .cual { font-weight: 600; color: var(--tinta); } /* "insurance expired" se escribe en minúscula porque también se usa a media frase en To do; aquí empieza la chapa y lleva mayúscula por CSS. */ .ficha .grua-ficha .chip-estado { display: inline-flex; } .ficha .grua-ficha .chip-estado::first-letter { text-transform: uppercase; } /* ---- "Find a car": las dos cifras con su rótulo (Vanessa) ---- El resultado decía "Jeep Cherokee 2000 · Pedro Solis 600.00 100.00" y no había forma de saber cuál era lo ofrecido y cuál lo pagado: la tabla del periodo tiene su cabecera de columnas y estos resultados no. El rótulo (data-rotulo, el mismo que el teléfono ya pinta) va pegado a su cifra, en frase y en gris, en cualquier ancho. */ .resultados-busqueda .carro > summary .n::before { content: attr(data-rotulo) " "; font-family: var(--letra); font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tinta-suave); } /* ---- Home: la tarjeta "Pay this week" no se estruja (Christian, 1440) ---- Medía unos 200 px con cinco líneas y "Pay ›" caía en medio de la frase ("Drivers 744.00 · CDL Pay › 585.00 +"), porque el pie es una fila que envuelve y el enlace se queda a la derecha del primer renglón. Es la primera cifra de dinero que ve el jefe por la mañana. Dos cosas: el enlace baja a su propio renglón al pie, y la tarjeta (la que más texto lleva) toma el ancho de las dos columnas. */ .casa-cifra[data-clave="cifra-pago"] .kpi-pie { flex-direction: column; align-items: flex-start; gap: var(--e1); } .casa-cifra[data-clave="cifra-pago"] .kpi-pie .nota { flex: 0 1 auto; } .casa-cifra[data-clave="cifra-pago"] .kpi-ir { margin-left: 0; } /* ---- Settle up: tres chapas, no una (Christian) ---- "5 drivers · 4 can't yet" con las cinco filas marcadas igual: "6 without tip" avisa pero no traba, y se veía igual que "700.00 not counted", que sí. La chapa neutra es un dato: tinta sobre lo hundido, sin icono. */ .chip-abierto.dato { border-color: var(--linea); background: var(--hundido); color: var(--tinta-suave); } /* ---- El teléfono del chofer: los carros que van de más (Juan) ---- Con siete en una grúa de seis salían los siete huecos pintados igual. */ .huecos i.sobra { background: var(--rojo); } } @media screen and (min-width: 64rem) { /* La tarjeta de pago, a lo ancho de las dos columnas (ver arriba). */ .casa-kpis.tres:has([data-clave="cifra-pago"]) > li:first-child { grid-column: 1 / -1; } .casa-kpis.tres:has([data-clave="cifra-pago"]) > li:last-child { grid-column: auto; } /* ---- Cash: el aviso que flota ya no se sienta sobre los filtros (Vanessa) ---- Caía justo encima de la fila "Any state · Not counted yet · Open claim · Counted" durante 4 s y tapaba la mitad de esos botones. Baja al borde de la ventana y el contenido reserva ese alto al final, para que con la página abajo del todo tampoco se monte sobre nada. Medido a 1440 con la fila de filtros al fondo de la ventana: los chips terminan en y=843 y el aviso empieza ahí mismo (antes caía sobre ellos desde y=832). */ body[data-densidad="oficina"] #aviso.aviso-oficina { bottom: var(--e2); } body[data-densidad="oficina"] main { padding-bottom: 4.5rem; } } /* ---- UNA OPCIÓN FIJA EN SETTINGS (5 oct 2026, P3 de la revisión de la demo) ---- "Demo mode" dentro de la demo del cliente no se apaga (config.fijar): sin interruptor, lo puesto en firme con un candado y, debajo, la frase que dice que en la app de verdad se apaga aquí. El rótulo va como el de las demás perillas (sin : no hay campo que nombrar). */ .opcion-config .explicacion .rotulo-opcion { font-family: var(--titular); font-weight: 600; font-size: var(--t-base); color: var(--tinta); } .opcion-config .valor-fijo { display: inline-flex; align-items: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e3); border: 1px dashed var(--linea-fuerte); border-radius: var(--pastilla); font-weight: 600; color: var(--tinta); } .opcion-config .valor-fijo .icono { width: 18px; height: 18px; color: var(--tinta-suave); } .opcion-config .nota-fija { grid-column: 1 / -1; margin: 0; font-size: var(--t-chico); color: var(--tinta-suave); } @media (max-width: 44rem) { .opcion-config .control-config > .valor-fijo { width: auto; } } /* ==== ÁREA A, ronda "recién llegado" (5 oct 2026): QUIÉN ES LA EMPRESA ==== La entrada con las cuentas de prueba (solo en Demo mode) dice el nombre y qué hace la empresa ("We buy old cars for scrap in Newark, NJ."): en el teléfono el logo entero se esconde para que quepan las cuentas (U3) y el nombre solo quedaba en la pestaña; en la computadora, "Towing" del logo hacía creer que remolcaban carros averiados. Va en la barra, junto a la marca, en dos renglones: la barra ya mide 75 px por el botón del tema, así que no crece ni empuja las cuentas (index.html, #empresa-entrada). Sin Demo mode no sale: la entrada de todos los días no cambia. */ .barra .empresa-entrada { margin: 0; display: flex; flex-direction: column; gap: 1px; min-width: 0; } /* El título se encoge y el texto parte dentro (a 360 la línea de qué hace va en dos renglones) en lugar de mandar el botón del tema a otra fila: la barra se envuelve en el teléfono y, sin esto, a 360 crecía 50 px. */ .barra-titulo:has(> .empresa-entrada:not([hidden])) { flex: 1 1 0%; } .barra .empresa-entrada strong { font-family: var(--titular); font-weight: 600; font-size: var(--t-medio); line-height: 1.2; letter-spacing: -.01em; color: var(--crema); } /* Un gris claro, segundo en la barra (9.1:1 sobre carbón; el de `.barra .quien`, 5.4:1, se queda corto para una frase a 14 px). */ .barra .empresa-entrada span { font-size: var(--t-chico); line-height: 1.3; color: #B9BBB5; } /* ========================================================================== ÁREA B · EXPLICAR SIN ESTORBAR (ronda "recién llegado", 5 oct 2026) Dos recién llegados no supieron qué es un tip, un CDL, Settle up ni el Remaining balance. Las palabras se quedan; se explican donde no estorban: "How this works" plegado al pie de Home y un "?" chico junto a la primera vez que sale cada palabra en Pay, Cash y CDL trips (public/explicar.js). ========================================================================== */ /* EL "?". Se ve chico (un círculo de 20 px en el gris de los rótulos, como el de "How this works"), pero se toca en 44 × 44: el margen negativo deja el renglón del rótulo como estaba. Nunca amarillo: no es lo que hay que tocar, es una ayuda. */ button.que-es { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: -12px -8px -12px -4px; padding: 0; vertical-align: middle; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--tinta-suave); font: inherit; letter-spacing: 0; text-transform: none; } button.que-es .icono { width: 20px; height: 20px; } button.que-es[aria-expanded="true"] { color: var(--tinta); } @media (hover: hover) { button.que-es:hover { color: var(--tinta); background: var(--hundido); } } button.que-es:focus-visible { outline: 3px solid var(--foco, var(--acento)); outline-offset: -4px; } /* LA LÍNEA QUE ABRE, EN SU SITIO: debajo de la palabra, en una caja hundida de fila (radio 16), con la palabra en negrita. Empuja lo de abajo (no tapa nada) y no hay que cerrarla para seguir. */ .def-palabra { margin: var(--e1) 0 var(--e2); padding: var(--e2) var(--e3); max-width: 40rem; background: var(--hundido); border-radius: var(--radio-chico); font-size: var(--t-chico); font-weight: 400; line-height: 1.45; color: var(--tinta); text-transform: none; letter-spacing: 0; } .def-palabra b { font-weight: 700; } /* En la cabecera de Tips (una fila que envuelve) la línea va a lo ancho. */ .grupo-tips .def-palabra { margin: 0; max-width: none; border-radius: 0; border-bottom: 1px solid var(--linea); } /* "HOW THIS WORKS" DE HOME: al pie, con aire arriba. El glosario en dos columnas desde 64rem (a 1440 una sola columna de 44rem dejaba media pantalla vacía y la lista medía el doble). */ .casa > .ayuda-casa { margin-top: var(--e4); } .ayuda-casa .cuerpo-ayuda { max-width: 72rem; } .ayuda-casa .ayuda-lead { margin: var(--e2) 0 0; font-weight: 600; color: var(--tinta); } .glosario { display: grid; gap: var(--e2); margin: 0; } .glosario .palabra-glosario { min-width: 0; } .glosario dt { font-weight: 700; color: var(--tinta); } .glosario dd { margin: 0; } @media screen and (min-width: 64rem) { .glosario { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e5); } } /* LA AYUDA DE PAY A LO ANCHO (recién llegado del teléfono: a 390 ocupaba unos 240 de 342 px). "Find a car" compartía la fila con el
, así que el cuerpo abierto se quedaba en lo que le dejaba el botón. Ahora el botón se queda arriba a la derecha, en la altura del resumen (44 px), y el
mide la fila entera: el cuerpo abre por debajo de los dos. */ @media screen { .cabeza-informe .fila-ayuda { position: relative; display: block; } .cabeza-informe .fila-ayuda > .ayuda-plegable { display: block; width: 100%; } .cabeza-informe .fila-ayuda > .buscar-boton { position: absolute; top: 0; right: 0; } } /* Dentro de una tarjeta de cifra de Pay (el "?" de "CDL pay this week"): la línea cruza la fila entera, como los chips, y no se va al lado de la cifra (la fila del teléfono es una rejilla de rótulo y cifra). */ .kpi > .def-palabra { grid-column: 1 / -1; margin: var(--e1) 4px 4px; max-width: none; } /* Lo que el carro tiene, dicho sin ✓ ("Cat: aftermarket"): en el gris de los checks, que no es un "bien" ni un "mal". */ .check.dato { color: var(--tinta-suave); } /* La media línea bajo "Turn off" y "Clear to 0" en Users: chica y gris, para leer una vez; no compite con los botones. */ .pista-acciones { margin: var(--e1) 0 0; font-size: var(--t-chico); line-height: 1.4; color: var(--tinta-suave); } /* ========================================================================== ÁREA C · LAS CIFRAS DE DINERO Y LA NAVEGACIÓN (ronda del recién llegado, 5 oct 2026). Bloque propio: las áreas A y B escriben en el suyo. ========================================================================== */ /* ---- "Driver pay this week", partida por semanas (partesDelPago) ---------- Una línea por parte ("0.00 from this week", "5,592.00 still owed from earlier weeks") y la nota de la semana sin saldar, una debajo de otra: en fila se mezclaban las cifras de las dos partes. */ .kpi-pie.partes-pago { flex-direction: column; align-items: flex-start; gap: 2px; } .kpi-pie.partes-pago .nota { flex: 0 1 auto; } /* ---- El signo de una cifra grande ("+$405.00" de My cash) ----------------- El "+" iba a .7 de la cifra y sobre la línea de base: quedaba bajo, chico y suelto, separado de los dólares por el "$" alzado, y se leía como un botón (ronda del recién llegado). Ahora va a la altura de la mitad de los dígitos, como un signo de suma, con el mismo peso, y pegado al "$". */ .monto .signo { font-size: .62em; font-weight: 800; vertical-align: .32em; margin-right: .02em; letter-spacing: 0; } /* ---- Dónde se cae al seguir un enlace (ponerLlegada) --------------------- Una línea quieta encima del bloque al que se llega: el camino ("Reports › Pay › Tips", lo último en tinta y negrita) y, a la izquierda, el botón para volver a la sección de la que se venía. Sin color de acción: no es lo que hay que tocar (amarillo, solo lo que se toca), es dónde se está. */ .llegada { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e3); margin: 0 0 var(--e2); font-size: var(--t-chico, .875rem); color: var(--tinta-suave); } .llegada .volver-llegada { display: inline-flex; align-items: center; gap: var(--e1); min-height: 44px; padding: 0 var(--e3); flex: none; width: auto; } .llegada .volver-llegada .icono { width: 16px; height: 16px; } /* ARRIBA Y PEGADA (13 oct 2026, fase 1 de la navegación). La línea es la primera cosa de
y se queda bajo la cabecera mientras se baja por la sección: el salto puede llevar a media página (la fila de un reclamo, el papel de una grúa) y "Back" tiene que seguir a la vista. Su `top` lo pone apilarPegados (oficina.js, apilarBarras), que suma su alto a --alto-pegado: lo que se pega debajo (la cabecera del chofer abierto en Drivers, z 3-4) y el scroll-padding de quedan bajo ella. Por encima de lo de la sección y por debajo de la cabecera (10) y la barra de secciones (9). Fondo de la página: tapa lo que pasa por debajo. */ main > .llegada { position: sticky; top: var(--alto-pegado, 0px); z-index: 8; margin: calc(-1 * var(--e3)) 0 calc(-1 * var(--e2)); padding: var(--e1) 0; background: var(--fondo); border-bottom: 1px solid var(--linea); } .llegada .migas { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e1); min-width: 0; } .llegada .migas b { color: var(--tinta); font-weight: 700; } .llegada .migas .sep { color: var(--tinta-suave); } /* ========================================================================== UX · EL RECIÉN LLEGADO, SEGUNDA VUELTA (5 oct 2026). Bloque propio: lo que separaba el 4 del 5 en "¿se entiende?" (scratchpad/nuevo2/). Explicar sin estorbar al de todos los días. ========================================================================== */ /* "WHAT DO THESE WORDS MEAN?" bajo la fecha de Home: se ve como la línea de "How this works" (gris, chica, con el "?"), que es lo que abre; no es amarillo porque no es el trabajo, es una ayuda. 44 px de alto para el dedo; el margen negativo deja la cabecera casi como estaba. */ .casa-titulo .ir-glosario { flex-basis: 100%; margin: calc(var(--e1) * -1) 0 calc(var(--e2) * -1); } .casa-titulo .ir-glosario[hidden] { display: none; } button.enlace-glosario { display: inline-flex; align-items: center; gap: var(--e2); width: auto; min-height: 44px; padding: 0 var(--e1); margin-left: calc(var(--e1) * -1); border: 0; background: transparent; box-shadow: none; border-radius: var(--radio-chico); font: inherit; font-size: var(--t-chico); font-weight: 600; color: var(--tinta-suave); text-transform: none; letter-spacing: 0; text-align: left; cursor: pointer; } button.enlace-glosario .icono { width: 20px; height: 20px; flex: none; } @media (hover: hover) { button.enlace-glosario:hover { color: var(--tinta); text-decoration: underline; } } /* Donde cae: la línea "The words in this app:" con el foco (tabindex=-1), sin anillo de botón; el hueco de las barras lo deja el scroll-padding. */ .ayuda-casa .ayuda-lead:focus { outline: none; } .ayuda-casa .ayuda-lead:focus-visible { outline: 3px solid var(--foco, var(--acento)); outline-offset: 2px; } /* EL "?" DE SETTLE UP, FUERA DEL
PERO A SU LADO (probador, n1): explicar.js envuelve el título y el botón en esta fila. */ .con-que-es { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e2); min-width: 0; } .con-que-es > h3 { min-width: 0; } /* EL HÉROE DE CDL TRIPS DE LA OFICINA: su rótulo ("CDL drivers") y el "?" en la misma línea. El del dueño, junto a "Before taxes". */ .heroe-rotulo.rotulo-cdl { display: flex; align-items: center; gap: var(--e2); } .heroe-nota { align-items: center; } /* "Call (973) 555-1122" de una ficha de Drivers: el número no se parte ("(973)" arriba y "555-1122" abajo a 390). */ .contacto a .numero { white-space: nowrap; } /* LAS PALABRAS DEL CHOFER en su "How this works" de Today (pintarPalabrasDelDia): debajo de los pasos, una por renglón, como el glosario de Home. */ .guia-dia .ayuda-lead { margin: var(--e3) 0 var(--e1); font-weight: 600; color: var(--tinta); } .guia-dia .glosario { gap: var(--e2); } /* LO SIN CONTAR EN LA FICHA DE DRIVERS (6 oct 2026, avisoPorContar): espera al chofer, así que va en el gris de `.aviso.atencion` y sus dos salidas ("Call Juan", "Typed it wrong? Void it in Cash") son tranquilas, en una fila que envuelve, alineadas con el texto (sin el relleno de lado) y con el toque de siempre de alto. */ .aviso.por-contar .acciones-por-contar { display: flex; flex-wrap: wrap; gap: 0 var(--e4); margin-top: var(--e1); } .aviso.por-contar .acciones-por-contar > * { padding-inline: 0; min-height: var(--toque); text-align: left; justify-content: flex-start; } .aviso.por-contar p + p.vacio { margin-top: 0; } /* ========================================================================== PESO VISUAL 2 · CAPAS, JERARQUÍA Y COLOR CON SENTIDO (6 oct 2026) ---------------------------------------------------------------------------- El dueño: "quiero que hagamos contraste y mejoremos el peso visual de las cosas de la app ya que todo al ser blanco y negro, se siente plano y no se ve como una diferencia a pesar de que cada cosa está por recuadros". Medido antes (semilla, Chromium, 390 y 1440): la tarjeta contra la página 1.22-1.23:1 (solo el borde la separaba); una tarjeta DENTRO de otra (las cifras de Drivers y CDL trips, Tips dentro de su bloque, la cuenta de cada chofer, Settings) con el mismo borde y el mismo fondo, recuadro sobre recuadro; el rótulo de una tarjeta de cifra ("Pay this week") a 16/700 en tinta, el mismo peso que un título; las cifras de una ficha de Drivers a 18/700, como el nombre; los estados con color solo en la letra. Lo que hace este bloque (los tokens van en las paletas de arriba): 1. TRES CAPAS. Página honda (--fondo), tarjeta arriba (--panel con --sombra-tarjeta: sombra corta en claro, filo de luz en oscuro) y lo de DENTRO hundido (--dentro), sin segundo borde ni sombra. 2. JERARQUÍA. Título de pantalla > título de bloque (20-22/800) > cifra (800, tabular) > rótulo (14-15, 600-700, gris) > nota (gris, 400). 3. COLOR CON SENTIDO. Cada estado con su fondo tintado además de la letra: verde (--verde-fondo) lo que cuadra o ya está hecho, gris (--espera-fondo) lo que espera, rojo (--rojo-fondo) lo que traba. El amarillo sigue siendo SOLO lo que se toca; las bandas de la izquierda siguen diciendo solo rojo (traba) o gris (espera), salvo el verde que Cash ya tenía para lo contado. Al sol (Sunlight) nada de esto se suaviza: sin sombra (el token es none), lo anidado conserva su borde oscuro y los tintes van al máximo contraste. La hoja impresa no cambia: todo va en @media screen. ========================================================================== */ @media screen { /* ---- 1. LA TARJETA SE SEPARA DE LA PÁGINA SIN DEPENDER DEL BORDE ------- :where() deja la sombra con la fuerza mínima: la banda que Users pone con box-shadow (.grupo-usuarios.urgente) o el foco por dentro de un summary siguen ganando. */ main :where(.tarjeta, .bloque, .ficha, .viernes, .entrega, .titular, .casa-bloque, .kpi, button.kpi, .pago-semana, .heroe-pantalla, .caja-todos, .plegado-hoy, .mi-cara-plegada, .modulo, .grupo-tips, .tabla-choferes, .panel-periodo, .panel-buscar, .casa-listo, .estado-carga) { box-shadow: var(--sombra-tarjeta); } /* Fuera de la lista de arriba, a propósito: las FILAS de una lista no son tarjetas (los lugares y las grúas de Settings, `.destino-cdl`; los usuarios de Users, `.usuario`: una fila con divisoria). Con la sombra cada fila se leía como una tira suelta (medido en Settings a 390). */ /* En el teléfono del chofer y del CDL, sus tarjetas propias también. */ body.una-mano :where(#seccion-semana, #seccion-hoy, #seccion-cuenta, #seccion-pasada, .tarjeta.grua), body.una-mano button.destino:not(.otro) { box-shadow: var(--sombra-tarjeta); } /* La cifra de Home que es un botón: con el ratón encima, el filo del botón secundario además de la sombra (antes cambiaba solo el borde). */ @media (hover: hover) { main button.kpi.casa-cifra:hover { box-shadow: var(--sombra-tarjeta), 0 0 0 1px var(--borde-boton); } } /* ---- 4. LO DE DENTRO DE UNA TARJETA, HUNDIDO Y SIN DOBLE BORDE -------- Los pares medidos en la semilla (scratchpad peso-visual-app/anidados.js): las cifras dentro del héroe de Drivers y de CDL trips, Tips y la tabla de pago dentro de su bloque, la cuenta de cada chofer dentro de la tabla, lo que falta de Settle up dentro de su tarjeta, el reclamo y los avisos dentro de una ficha de Drivers, un bloque de Settings dentro de otro. Fondo --dentro, sin borde ni sombra. Las bandas de estado (border-left) se vuelven a poner después. Al sol, no: ahí el borde oscuro es lo único que separa. */ body:not([data-sol]) main :is(.heroe-pantalla .kpi, .bloque .grupo-tips, .bloque .tabla-choferes, .bloque .tarjeta, .bloque .bloque, .tabla-choferes .liquidacion, .viernes .saldar-falta, .ficha .reclamo, .ficha .aviso) { background: var(--dentro); border-color: transparent; box-shadow: none; } body:not([data-sol]) main :is(.heroe-pantalla .kpi, .bloque .bloque) { border-radius: var(--radio-chico); } /* El pozo de una cifra que ya vive dentro de otra tarjeta: sin su filo, así se ven dos capas y no tres recuadros. */ body:not([data-sol]) main .heroe-pantalla .kpi-pozo { border-color: transparent; } /* Las bandas de estado de lo anidado, con su color (la regla de arriba las dejaba transparentes): rojo lo que traba, gris lo que espera. */ body:not([data-sol]) main .ficha .reclamo { border-left-color: var(--rojo); } body:not([data-sol]) main .ficha .aviso.atencion { border-left-color: var(--espera-banda); } body:not([data-sol]) main .ficha .aviso.error { border-left-color: var(--rojo); } body:not([data-sol]) main .tabla-choferes .liquidacion:is(.a-favor, .hecha) { border-left-color: var(--verde); } body:not([data-sol]) main .tabla-choferes .liquidacion.en-contra { border-left-color: var(--rojo); } /* ---- 2. JERARQUÍA DE TEXTO --------------------------------------------- El título de un bloque (To do, Working now, Cars by day, Settle up, Tips, "Give or take back cash", el "Pay" de un CDL) a 20/800: iba a 18/700, un punto por encima de una fila. Su token sube en :root (abajo) y el peso va aquí. */ .casa-cabeza h3, .liquidar-semana .rotulo-bloque, .pago-cdl > h4, .cdl-dias > h4, main .bloque > summary .que, .heroe-rotulo, h3.titulo-lista { font-weight: 800; letter-spacing: -.01em; color: var(--tinta); } main .bloque > summary .que, h3.titulo-lista { font-size: var(--t-bloque); } /* Un pliegue DENTRO de una tarjeta sigue en 16/600: nunca más que su título (la regla de PESO VISUAL 3, repetida porque esta va después). */ main :is(.tarjeta, .bloque, .viernes, .ficha) .bloque > summary .que { font-size: var(--t-fila); font-weight: 600; letter-spacing: 0; } /* EL RÓTULO DE UNA TARJETA DE CIFRA, MÁS LIGERO QUE SU CIFRA. "Pay this week", "Cars today", "Remaining balance" iban a 16/700 en tinta, el mismo peso que un título, y competían con la cifra de debajo. Ahora 15/700 en el gris de las notas (7.3:1 o más sobre la tarjeta y lo hundido, en los dos temas): de un vistazo se lee primero la cifra. */ .kpi-tapa .rotulo, .kpi .kpi-tapa .rotulo { font-size: .9375rem; font-weight: 700; color: var(--tinta-suave); } /* DRIVERS: LA CIFRA DE UNA FICHA, POR ENCIMA DE SU RÓTULO Y DEL NOMBRE. "700.00", "2", "5" iban a 18/700, el tamaño del nombre de la ficha, con "On the truck" a 14/600 justo debajo: todo pesaba igual. La cifra a 22/800 tabular; el rótulo se queda en 14/600 gris. */ .resumen-chofer b { font-size: 1.375rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; color: var(--tinta); } /* ---- 3. COLOR CON SENTIDO: CADA ESTADO CON SU FONDO TINTADO ------------ La palabra y el icono ya decían el estado; con solo la letra en color, de lejos todo era gris. Una píldora de fondo suave detrás: verde lo que cuadra o ya está hecho (COUNTED, "Nothing waiting"); gris lo que espera (NOT COUNTED YET, "waiting", sin precio); rojo lo que traba (OPEN CLAIM, "Cash claim", "cash short"). Nunca amarillo. La letra sobre su tinte, medida: verde 7.1:1 (claro) y 6.3 (oscuro); gris 7.9 y 5.9; rojo 6.1 y 7.0. */ .chip-estado.espera { background: var(--espera-fondo); } .etiqueta.contado { background: var(--verde-fondo); border-color: transparent; } .etiqueta.espera { background: var(--espera-fondo); border-color: transparent; } .etiqueta.cancelado { background: var(--rojo-fondo); border-color: transparent; } .chip-abierto.espera { background: var(--espera-fondo); border-color: transparent; } /* El estado de una entrega de Cash: la palabra en su píldora tintada. */ .entrega header .codigo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--pastilla); background: var(--espera-fondo); width: fit-content; } .entrega:is(.confirmado, .devuelto) header .codigo { background: var(--verde-fondo); color: var(--verde-texto); } .entrega.reclamado header .codigo { background: var(--rojo-fondo); color: var(--rojo-texto); } /* La línea de aviso de una ficha de Drivers, con su tinte y a lo que mide. El "…" de siempre sigue en el texto. */ .aviso-ficha:is(.grave, .espera) { width: fit-content; max-width: 100%; padding: 3px 10px; border-radius: var(--radio-chico); } .aviso-ficha.grave { background: var(--rojo-fondo); } .aviso-ficha.espera { background: var(--espera-fondo); } /* Lo que cuadra, con su verde de fondo y no solo la letra: "Nothing waiting on you" de Home, el "ya está" de un formulario. */ .casa-listo { background: var(--verde-fondo); border-color: transparent; } .aviso.bien, .aviso-local.bien { background: var(--verde-fondo); } /* La banda de estado de una tarjeta, de 3-4 a 5 px: se ve de reojo en la lista (Drivers, Cash), con el color de siempre. */ main .ficha:is(.estado-grave, .estado-espera), main .entrega:is(.esperando, .reclamado, .confirmado) { border-left-width: 5px; } /* ---- 5. LA CABECERA DE UN BLOQUE CON PRESENCIA ------------------------- Entre el título de un bloque de Home y su contenido, una raya fina (--linea): la tapa se lee como tapa y no como otra fila. */ .casa-bloque.casa-ahora > .casa-cabeza, .casa-bloque.casa-dias > .casa-cabeza { padding-bottom: var(--e3); border-bottom: 1px solid var(--linea); } } /* LOS TÍTULOS DE BLOQUE, UN ESCALÓN MÁS ARRIBA. --t-bloque de 18 a 20 (To do, Settle up, Tips, el "Pay" de un CDL) y --t-titulo-tarjeta de Home a 19 px en el teléfono y 22 en escritorio en los dos temas (en oscuro era 18 fijo, el tamaño de una fila con su cifra). Fuera del @media para pisar los bloques de tema del rediseño, que tampoco van en uno. */ :root { --t-bloque: 1.25rem; } :root, [data-densidad="campo"], [data-tema="claro"], [data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"] { --t-titulo-tarjeta: clamp(1.1875rem, 1rem + .5vw, 1.375rem); } /* ========================================================================== PESO VISUAL 2 · SEGUNDA PASADA (6 oct 2026) ---------------------------------------------------------------------------- Con la primera pasada Home oscuro a 1440 "casi no cambia a simple vista" (el coordinador, mirando la comparación antes/después). Los tokens de arriba suben la separación (tarjeta contra página: claro 1.49:1, oscuro 1.65; lo hundido contra la tarjeta: claro 1.20, oscuro 1.46) y aquí: 1. las filas de To do y de Working now y el pozo de cada cifra de Home van en lo hundido (--dentro), una caja por fila con aire entre ellas, en vez de líneas sueltas sobre la tarjeta; 2. los títulos de tarjeta de Home más grandes y con su raya debajo; "To do" en Noche deja de ser un rótulo gris de 16 px; 3. "Remaining balance" positivo en verde (`.cuadra`, como la cuenta de un chofer en Pay), "N waiting" en el gris de espera; 4. la columna de escritorio en su propio tono y la sección puesta con una raya amarilla a la izquierda (la navegación es la única excepción del amarillo: texto amarillo sobre carbón, como el teléfono, que ya lleva su raya arriba); 5. la barra de hoy de Cars by day, rayada: lo que todavía corre se distingue por la forma y no solo por un gris. Al sol nada de esto (Sunlight no lleva sombras ni hundidos suaves). ========================================================================== */ @media screen { /* ---- 1. LAS FILAS DE HOME, CADA UNA EN SU CAJA HUNDIDA -------------- */ body:not([data-sol]) .casa-hacer button.casa-fila:not(.grave), body:not([data-sol]) .casa-ahora button.casa-chofer { background: var(--dentro); } body:not([data-sol]) .casa-hacer .casa-lista > li + li, body:not([data-sol]) .casa-ahora .casa-lista > li + li { border-top: 0; margin-top: 6px; } body:not([data-sol]) .casa-ahora button.casa-chofer { padding: var(--e2) var(--e3); } /* El pozo del icono y la cara sin foto, sobre lo hundido: con su color de siempre (--hundido) desaparecían en Noche, donde lo hundido y el pozo son el mismo tono. Van en el de la tarjeta. */ body:not([data-sol]) .casa-hacer .casa-fila:not(.grave) .casa-ico, body:not([data-sol]) .casa-ahora .casa-chofer .cara.sin-foto { background: var(--panel); } @media (hover: hover) { body:not([data-sol]) .casa-hacer button.casa-fila:not(.grave):hover, body:not([data-sol]) .casa-ahora button.casa-chofer:hover { background: var(--dentro); box-shadow: inset 0 0 0 1px var(--borde-boton); } } /* El pozo de cada cifra de Home y de Pay en Noche: era transparente (la cifra flotaba en la tarjeta, como "Pay this week"); ahora es su caja hundida, como el pozo blanco del Taller. */ :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]):not([data-sol]) .kpi-pozo { background: var(--dentro); border-radius: var(--radio-pozo); padding: var(--e4) var(--e4) var(--e3); } /* Dentro del héroe de Drivers y CDL trips la tarjeta de cifra ya es lo hundido: su pozo no dibuja otra caja. */ :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]):not([data-sol]) .heroe-pantalla .kpi-pozo { background: transparent; } /* ---- 2. LOS TÍTULOS DE TARJETA DE HOME, CON SU RAYA ----------------- */ .casa-cifra .kpi-tapa .rotulo { font-size: 1.125rem; font-weight: 800; color: var(--tinta); letter-spacing: -.01em; } .casa-bloque.casa-ahora > .casa-cabeza, .casa-bloque.casa-dias > .casa-cabeza { border-bottom-width: 2px; } .casa-bloque.casa-hacer .hacer-estado { padding-bottom: var(--e3); border-bottom: 2px solid var(--linea); margin-bottom: var(--e3); } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .hacer-estado h3 { font-size: var(--t-titulo-tarjeta); font-weight: 800; color: var(--tinta); letter-spacing: -.015em; } /* ---- 3. LAS CIFRAS CON SU COLOR, DONDE YA HAY SIGNIFICADO ------------ */ .kpi .cifra.cuadra { color: var(--verde-texto); } .hacer-parte.espera, .hacer-parte.espera .n { color: var(--espera); } /* ---- 5. HOY EN CARS BY DAY, RAYADO ---------------------------------- Con el gris solo, hoy y los días cerrados se distinguían por 3:1. La raya diagonal es la marca de "todavía corre" (la misma idea que las rayas de los carros en Noche); el borde de 2 px la mantiene a 3:1 o más contra la tarjeta. */ .dias-barras .dia-col.hoy .dia-barra { background: repeating-linear-gradient(135deg, var(--grafico-parcial) 0 5px, transparent 5px 9px); box-shadow: inset 0 0 0 2px var(--grafico-parcial); } } /* ---- 4. LA COLUMNA DE ESCRITORIO, EN SU TONO ---------------------------- Claro: el marco crema claro contra la página honda (1.32:1) y su raya en el borde de la tarjeta (3.4). Noche: #1A1E23, entre la página (1.20) y la tarjeta (1.37), con un filo; la sección puesta, #2A3038 con la raya amarilla de 4 px a la izquierda y el nombre en amarillo (9.4:1). */ @media screen and (min-width: 64rem) { [data-densidad="oficina"] .barra-pestanas { border-right-color: var(--borde-tarjeta); } [data-densidad="oficina"] .barra-pestanas button.activa { box-shadow: inset 4px 0 0 var(--acento); } [data-densidad="oficina"]:not([data-tema="claro"]) .barra-pestanas, [data-tema="oscuro"] .barra-pestanas { background: #1A1E23; box-shadow: inset 0 0 0 1px #2A3038; } [data-densidad="oficina"]:not([data-tema="claro"]) .barra-pestanas button.activa, [data-tema="oscuro"] .barra-pestanas button.activa { background: #2A3038; box-shadow: inset 4px 0 0 var(--acento), inset 0 0 0 1px #3A4147; font-weight: 800; border-radius: var(--radio-chico); } } /* La chapa neutra dentro del pozo hundido de Noche ("Before taxes" de Pay this week): con el --hundido de siempre era el mismo tono que el pozo y la chapa desaparecía. Va en el de la tarjeta (tinta 11.1:1 encima). */ @media screen { :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]):not([data-sol]) .kpi-pozo .chip-estado:not(.traba):not(.traba-suave):not(.espera) { background: var(--panel); } } /* ============================================================================ DISPATCH (6 oct 2026, el dueño: "dejar WhatsApp y usar solo la app"). Bloque propio al final de la hoja, a propósito: otras áreas tocan la pantalla del chofer a la vez y así la fusión no se cruza con ellas. Oficina: el formulario "New car" (riel) y las listas "To send" / "Sent". Teléfono: la tarjeta grande del carro que manda la oficina (.carro-envio), con tres botones de una mano y "I bought it". ========================================================================== */ /* ---- oficina: el formulario ------------------------------------------ */ .nuevo-despacho { gap: var(--e3); } .nuevo-despacho .titulo-bloque { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--tinta); } #form-despacho { display: flex; flex-direction: column; gap: var(--e2); } #form-despacho .ayuda-campo { margin: calc(-1 * var(--e1)) 0 var(--e1); } #form-despacho .ayuda-campo:empty { display: none; } #form-despacho input[type="file"] { padding: var(--e2); font-size: var(--t-chico); } #form-despacho .acciones { margin-top: var(--e2); } .opcional { font-weight: 400; font-size: var(--t-chico); color: var(--tinta-tenue); margin-left: var(--e1); } .pegar-despacho { border: 1px dashed var(--linea-fuerte); padding: 0 var(--e3); } .pegar-despacho > summary { cursor: pointer; min-height: var(--toque); display: flex; align-items: center; font-weight: 600; color: var(--tinta); } .pegar-despacho[open] { padding-bottom: var(--e3); } .pegar-despacho[open] > :not(summary) + * { margin-top: var(--e2); } /* ---- oficina: las listas ---------------------------------------------- */ .listas-despacho { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; } .titulo-lista-despacho { display: flex; align-items: baseline; gap: var(--e2); margin: var(--e4) 0 0; font-size: 1.2rem; font-weight: 700; color: var(--tinta); } .titulo-lista-despacho:first-child { margin-top: 0; } .titulo-lista-despacho .cuantos { font-size: var(--t-chico); font-weight: 700; font-variant-numeric: tabular-nums; background: var(--tinta); color: var(--fondo); padding: 0 .45rem; min-width: 1.5rem; text-align: center; } .titulo-lista-despacho .cuantos:empty { display: none; } .carro-despacho { padding: 0; gap: 0; } .carro-despacho > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: var(--e1); padding: var(--e3); min-height: var(--toque); } .carro-despacho > summary::-webkit-details-marker { display: none; } .carro-despacho > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--foco, var(--acento)); } .carro-despacho.enviar { border-left: var(--banda) solid var(--acento); } .carro-despacho.comprado { opacity: .85; } .carro-despacho.recien { box-shadow: 0 0 0 3px var(--acento); } .linea-despacho { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e1) var(--e3); } .nombre-despacho { font-size: var(--t-medio); font-weight: 700; color: var(--tinta); } .oferta-despacho { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tinta); } .linea-despacho.sub { justify-content: flex-start; align-items: center; font-size: var(--t-chico); color: var(--tinta-suave); } .linea-despacho.sub > * + *::before { content: "·"; margin-right: var(--e2); color: var(--tinta-tenue); } .linea-despacho.sub > .con-grabacion + *::before { content: none; } .con-grabacion { display: inline-flex; align-items: center; color: var(--tinta); } .para-chofer { font-weight: 600; color: var(--tinta); } .ficha-despacho { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e3); border-top: 1px solid var(--linea); } .datos-despacho { display: flex; flex-direction: column; gap: var(--e1); } .dato-enlace { display: inline-flex; align-items: center; gap: var(--e2); min-height: var(--toque); color: var(--tinta); font-weight: 600; text-underline-offset: 3px; } .grabacion-despacho { display: flex; flex-direction: column; gap: var(--e2); align-items: flex-start; } .grabacion-despacho audio { width: 100%; max-width: 32rem; } /* "Download the original (AMR)" (22 oct 2026): lo que suena es la conversión, el original se baja aparte. Chico y en el gris de las pistas (como "Open in Maps"), no en el amarillo de acento: no compite con el reproductor ni con "Change the recording". Sigue tocándose en 48px (.enlace hace el área con relleno). */ .grabacion-despacho .bajar-original { font-size: var(--t-chico); font-weight: 600; color: var(--tinta-suave); } .grabacion-despacho .bajar-original:hover { color: var(--tinta); } .grabacion-despacho h3.rotulo-despacho { margin: 0; font-family: var(--letra); font-size: var(--t-base); font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--tinta); } .cambiar-grabacion { flex-direction: row; cursor: pointer; font-size: var(--t-base); } .cambiar-grabacion:focus-within { box-shadow: inset 0 0 0 3px var(--foco, var(--acento)); } .elegir-chofer { margin: 0; padding: var(--e2); border: 1px solid var(--linea); display: flex; flex-direction: column; gap: var(--e1); min-width: 0; } .elegir-chofer legend { padding: 0 var(--e1); font-weight: 700; color: var(--tinta); } .opcion-chofer { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--e3); align-items: center; padding: var(--e2); min-height: var(--toque); border: 1px solid transparent; cursor: pointer; font-weight: 400; color: var(--tinta); } .opcion-chofer input { grid-row: 1 / span 3; width: 1.35rem; height: 1.35rem; min-height: 0; margin: 0; accent-color: var(--tinta); } .opcion-chofer:has(input:checked) { border-color: var(--tinta); background: var(--hundido); } .opcion-chofer.suyo { cursor: default; } .opcion-chofer .nombre { font-weight: 700; } .opcion-chofer .estado-chofer { font-size: var(--t-chico); color: var(--tinta-suave); } .opcion-chofer .estado-chofer.espera { color: var(--tinta-tenue); } /* TODO LO ESCRITO EN LA SEGUNDA COLUMNA (ver6, 8 oct 2026). Un chofer con "Has cash to confirm first…" tiene CUATRO líneas y el botón redondo solo ocupa tres filas: la cuarta caía sola en la columna `auto` del botón, que crecía al ancho de la frase entera y dejaba la de 1fr en 0 px. History › "Move to another driver" se salía 39 px a 360 y 390. Cada línea va en la segunda columna, envuelve dentro de ella, y el botón cubre las cuatro. */ .opcion-chofer > :not(input) { grid-column: 2; min-width: 0; overflow-wrap: anywhere; } .opcion-chofer > input { grid-row: 1 / span 4; } .ya-lo-tiene { font-weight: 400; font-size: var(--t-chico); color: var(--tinta-suave); } .acciones-despacho > * { flex: 1 1 12rem; } .quitar-despacho { display: flex; flex-direction: column; gap: var(--e2); } .ficha-despacho .ayuda-campo:empty { display: none; } /* Por qué se cancela (6 oct 2026): las mismas filas para tocar que "Choose the driver"; el campo de "Other" a lo ancho. */ .motivos-cancelar[hidden], .otro-motivo[hidden] { display: none; } /* El "Pick why it was cancelled." encima de los motivos (8 oct 2026): en rojo de error y con su palabra, a lo ancho de la caja. */ .motivos-cancelar .error-motivo[hidden] { display: none; } .motivos-cancelar .error-motivo { margin: 0 0 var(--e2); font-size: var(--t-base); } .opcion-motivo input { grid-row: auto; } .otro-motivo { display: flex; flex-direction: column; gap: var(--e1); font-weight: 700; color: var(--tinta); } .otro-motivo input { width: 100%; } .todos-despacho { margin-top: var(--e5); } /* ---- teléfono: el carro que mandó la oficina --------------------------- */ .carro-envio { border-left: var(--banda) solid var(--acento); } .envio-cabeza { display: flex; flex-direction: column; gap: var(--e2); } .de-la-oficina { margin: 0; display: flex; align-items: center; gap: var(--e2); font-size: var(--t-chico); color: var(--tinta-suave); } .chapa-nuevo { display: none; padding: .1rem .45rem; font-size: var(--t-chico); font-weight: 800; background: var(--tinta); color: var(--fondo); } .carro-envio.nuevo .chapa-nuevo { display: inline-block; } /* Un h3 de la tarjeta, sin la raya ni las mayúsculas de las etiquetas técnicas (h3 de la hoja): es el nombre del carro, lo que se lee primero. */ .carro-chofer h3.envio-carro { display: block; margin: 0; font-family: var(--titular); font-size: 1.4rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; text-transform: none; color: var(--tinta); } .carro-chofer h3.envio-carro::before { content: none; } /* Lo ofrecido en su propia línea, debajo del carro: a 390 "· Offer 325.00" se partía y la línea de abajo empezaba con el punto. */ .envio-oferta { display: block; margin-top: var(--e1); font-size: 1.15rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .envio-direccion { margin: 0; font-size: 1.05rem; color: var(--tinta); } /* TRES BOTONES GRANDES, UNO POR FILA: con el pulgar y con guantes. 56 px de alto (más que --toque), el icono y la palabra a la izquierda, en tinta y con borde: el amarillo es de "I bought it" y de "Paid". */ .envio-botones { display: grid; grid-template-columns: 1fr; gap: var(--e2); } .envio-boton, .boton.envio-boton { min-height: 56px; justify-content: flex-start; gap: var(--e3); padding: 0 var(--e4); background: transparent; color: var(--tinta); border: 2px solid var(--tinta); font-size: 1.1rem; font-weight: 700; text-decoration: none; } .envio-boton svg { width: 24px; height: 24px; flex: none; } .envio-boton.apagado { border-style: dashed; border-color: var(--linea-fuerte); color: var(--tinta-suave); cursor: default; } .carro-envio audio { width: 100%; } .aviso-envio { margin: 0; font-weight: 700; } /* "I bought it": cerrado, es EL botón amarillo de la tarjeta; abierto, la compra de siempre debajo, y el amarillo pasa a "Paid". */ .carro-chofer .mas-carro.compra-envio > summary { justify-content: center; min-height: 56px; margin: var(--e2) var(--e3) var(--e3); background: var(--acento); color: var(--sobre-acento); border: 1px solid var(--acento); font-size: 1.1rem; font-weight: 800; } .carro-chofer .mas-carro.compra-envio > summary::before { border-left-color: var(--sobre-acento); } .carro-chofer .mas-carro.compra-envio[open] > summary { background: transparent; color: var(--tinta); border-color: var(--linea-fuerte); } .carro-chofer .mas-carro.compra-envio[open] > summary::before { border-left-color: var(--tinta); } /* ===================== EL INFORME DE CADA CDL (6 oct 2026) ===================== El dueño: "los CDL necesito un reporte por cada chofer y que sea más fácil de entender". Al tocar un CDL en CDL trips, debajo de su nombre (oficina-cdl.js, pintarInformeCdl): la semana, en grande lo que se le paga y si ya se pagó, "Print report" y sus viajes por lugar (Place · Trips · Price · Total). La cifra es más chica que la de la pantalla ("Still to pay" de todos, --t-cifra-heroe): una cosa grande por pantalla, y esta es la de un CDL. "No price yet" en gris con el reloj, como en toda la app (lo que espera nunca va en amarillo). */ @media screen { .informe-cdl { display: grid; gap: var(--e3); margin-top: var(--e3); padding: var(--relleno-tarjeta); background: var(--panel); border: 1px solid var(--borde-tarjeta); border-radius: var(--radio); } .informe-cdl p { margin: 0; } .informe-semana { font-size: var(--t-chico); font-weight: 600; color: var(--tinta-suave); } .informe-rotulo { font-size: 1.125rem; font-weight: 700; color: var(--tinta); } .informe-cifra { font-size: clamp(2.5rem, 2rem + 1.5vw, 3.25rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--tinta); font-variant-numeric: tabular-nums; } .informe-cifra > span:not(.monto) { font-size: 1.25rem; font-weight: 700; letter-spacing: 0; color: var(--tinta-suave); } .informe-estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); font-weight: 700; color: var(--tinta); } .informe-estado.pagado { color: var(--verde-texto); } .informe-cdl > .acciones { justify-content: flex-start; margin: 0; } .informe-cdl > .acciones > button { flex: none; } table.lugares-cdl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: var(--e2); } .lugares-cdl caption { text-align: left; font-size: var(--t-bloque, 1.25rem); font-weight: 800; color: var(--tinta); padding-bottom: var(--e2); } .lugares-cdl th, .lugares-cdl td { padding: var(--e2); border-bottom: 1px solid var(--linea); text-align: left; vertical-align: middle; font-size: var(--t-base); text-transform: none; letter-spacing: 0; } .lugares-cdl .n { text-align: right; white-space: nowrap; } .lugares-cdl thead th { font-size: var(--t-chico); font-weight: 600; color: var(--tinta-suave); } .lugares-cdl tbody th { font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; } .lugares-cdl tbody td { font-weight: 600; } .lugares-cdl tfoot th, .lugares-cdl tfoot td { font-weight: 800; border-top: 2px solid var(--linea-fuerte); border-bottom: 0; } .lugares-cdl td.falta { color: var(--espera); font-weight: 600; } .lugares-cdl td.falta .icono { vertical-align: -3px; margin-right: 4px; } .nota-lugares { font-size: var(--t-chico); color: var(--tinta-suave); } @media (min-width: 44.01rem) { .informe-cdl { max-width: 64rem; } .lugares-cdl { max-width: 40rem; } } /* "See report" en cada línea de la lista: el camino al informe, con palabras (el triángulo solo no lo decía). Subrayado como lo tranquilo que se toca; la línea entera sigue siendo el botón. */ .cdl-uno-ver { display: block; margin-top: 2px; font-size: var(--t-meta, .875rem); font-weight: 600; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; } /* "See every trip" debajo de la cuenta: el viaje por viaje, plegado. */ #cdl-dias > .ver-viajes-cdl { margin-top: var(--e4); } .ver-viajes-cdl .cdl-dias { margin-top: 0; } @media (min-width: 44.01rem) { #cdl-dias > .ver-viajes-cdl { max-width: 64rem; } } } /* El informe en papel: la tabla por lugar como las demás de la hoja, a 10 pt, con aire antes de la cuenta; la lista de cada viaje va al final y puede empezar otra carta. */ @media print { .hoja-viajes-cdl .lugares-hoja { font-size: 10pt; line-height: 1.15; margin-bottom: 1mm; } .hoja-viajes-cdl .lugares-hoja td, .hoja-viajes-cdl .lugares-hoja th { padding-block: .3mm; } .hoja-viajes-cdl .lugares-hoja .n { width: 28mm; } .hoja-viajes-cdl .lugares-hoja + .impresa { margin: 0 0 2mm; } .hoja-viajes-cdl .lugares-hoja + .cierre-cdl, .hoja-viajes-cdl .impresa + .cierre-cdl { margin-top: 3mm; } .hoja-viajes-cdl .cierre-cdl + .viajes-hoja, .hoja-viajes-cdl .cierre-cdl + .dias-hoja { margin-top: 2mm; } } /* ---- la vista de cada chofer en Settle up (6 oct 2026) ------------------ El dueño: "en la de los reportes de los choferes debe ser más fácil de entender". De arriba abajo: cuántos carros y cuánto se pagó (una línea, no un sumando), la cuenta (tips, tips de antes, own money, remaining balance) y, al final, el resultado en una frase grande con el nombre ("We pay Luis 1,005.00"). La frase es la cifra de su panel: más chica que el héroe de la tarjeta Settle up, más grande que todo lo demás del detalle (peso visual: una sola cifra héroe por pantalla). Su color es el de siempre (.liquidacion.a-favor / .en-contra / .hecha .neto). El "?" es el mismo botón que los de explicar.js; su línea va sobre --panel porque la caja de la liquidación ya es --hundido y no se distinguiría. */ .liquidacion .linea-carros { margin: 0; font-size: var(--t-base); } .liquidacion .linea-carros b { font-variant-numeric: tabular-nums; } .resultado-chofer { display: flex; align-items: center; /* El "?" pegado a la frase también a 390: con wrap caía solo en la línea de abajo y parecía de otra cosa. La frase se parte por dentro. */ flex-wrap: nowrap; gap: 0 var(--e2); padding-top: var(--e2); border-top: 1px solid var(--linea-fuerte); } .liquidacion .resultado-chofer .frase-neto { margin: 0; /* A 390 cabe "We pay Marco 1,045.00" en una línea junto al "?" (21.5 px); a 1440, 2rem. */ font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); font-weight: 700; line-height: 1.15; min-width: 0; overflow-wrap: anywhere; } .liquidacion .cuenta-chofer { margin: 0; max-width: none; background: var(--panel); font-variant-numeric: tabular-nums; } .cuerpo-chofer > .mas-del-chofer > summary { font-weight: 600; } /* Lo de dentro un paso a la derecha: sin sangría, "Their cars" y "Cash details" se leían como hermanos de "See details" y no como su contenido. */ .cuerpo-chofer > .mas-del-chofer[open] > :not(summary) { margin-inline-start: var(--e4); } /* ========================================================================== UNA MANO, SEGUNDA VUELTA (6 oct 2026). El dueño: "la interfaz de los choferes necesitamos hacerla más simple, que ellos puedan manejar con una mano" y "que no tenga que estar escribiendo y escribir mal". Medido antes, a 390 × 844: "Yes, I got 700.00" en el 36 % del alto, "Save expense" en el 71 %, "Next: parts" a 215 px de ancho, el "Done" de las fotos del gasto debajo de la pantalla, y "What you paid", el "Amount" del gasto y "What parts is it missing?" solo con el teclado. Bloque propio, al final, todo bajo `body.una-mano` (la oficina no cambia). 1. LA ACCIÓN, ABAJO. La vista sigue empezando arriba, a 16 px de la franja (la regla del 1 oct: nada de franja vacía bajo la de arriba); lo que baja es solo la fila de botones. La tarjeta de "Log a car" y la de Expense llenan hasta la barra de abajo y su pie (.pie-paso, .pie-accion) se apoya al fondo con `margin-top: auto`: Next/Save quedan siempre en el mismo sitio, sobre la barra, en los tres pasos. El sitio libre queda DENTRO de la tarjeta, entre lo último del formulario y sus botones, como el pie de una hoja; no encima de la vista. En un paso más alto que la pantalla el pie sigue pegado (sticky) sobre la barra, como antes. ========================================================================== */ @media screen { body.una-mano #seccion-carro:not([hidden]), body.una-mano #seccion-gasto:not([hidden]) { flex: 1 0 auto; display: flex; flex-direction: column; } body.una-mano #seccion-carro > .tarjeta, body.una-mano #seccion-gasto > .tarjeta { flex: 1 0 auto; display: flex; flex-direction: column; } /* .filas y .paso-carro ya son columnas flex: solo crecen. */ body.una-mano #form-carro, body.una-mano #form-gasto { flex: 1 0 auto; } body.una-mano #form-carro > .paso-carro:not([hidden]) { flex: 1 0 auto; } body.una-mano #fotos-gasto:not([hidden]) { flex: 1 0 auto; display: flex; flex-direction: column; gap: var(--e3); } body.una-mano .pie-paso { margin-top: auto; } body.una-mano .pie-accion { margin-top: auto; display: flex; flex-direction: column; gap: var(--e2); position: sticky; bottom: calc(var(--alto-control, 4rem) + var(--e2)); z-index: 2; background: var(--panel); padding-top: var(--e2); } /* Pegados, dejan 8 px entre ellos y la barra de abajo por los que se leía lo que pasaba por debajo ("It has a title · Change" asomaba bajo Back y Next en un paso 2 largo). Una sombra sin desenfoque del color de la tarjeta tapa esa franja sin mover nada. */ body.una-mano .pie-paso, body.una-mano .pie-accion { box-shadow: 0 var(--e2) 0 var(--panel); } /* 2. LOS BOTONES DE LA ACCIÓN, DE 56 Y A TODO LO ANCHO. Back se queda con lo que mide su palabra (es la salida, no la acción) y Next/Save the car se lleva el resto; Save expense y Done, de lado a lado. Lo mismo para "Yes, I got …" y su "Different amount", y para "Send note". 56 y no 48: con guantes y el teléfono en una mano, el botón que se toca en cada pantalla es el que no puede fallar. */ body.una-mano .pie-paso > button, body.una-mano .pie-accion > button, body.una-mano .confirmar .acciones > button, body.una-mano #form-nota > button { min-height: 56px; font-size: 1.125rem; } body.una-mano .pie-paso > button.principal, body.una-mano .pie-accion > button.principal, body.una-mano .confirmar .acciones > button.principal { font-weight: 800; } body.una-mano .pie-accion > button { width: 100%; } /* "Make a claim for this amount", la acción de "Different amount": del mismo alto y ancho que "Yes, I got …" de encima. */ body.una-mano .confirmar .otra-cantidad > button { width: 100%; min-height: 56px; font-size: 1.125rem; } /* La nota de lo que falta, de una línea: lo de casi siempre se toca en los botones de debajo y lo raro cabe en una línea que crece al escribir (la regla de `#form-carro textarea` la hacía de 88 px, la del mensaje). Con ella de dos líneas el paso 3 pasaba de la pantalla a 390 × 844. */ body.una-mano #form-carro .nota-partes textarea { min-height: 48px; field-sizing: content; } /* 3. EL EFECTIVO POR CONTAR, AL PULGAR. Sin el día empezado, "Yes, I got 700.00" es lo único que hay que tocar (el botón del día está apagado hasta entonces), y quedaba arriba, al 36 % del alto. Con el botón del día apagado, Today pasa a columna y la tarjeta baja al fondo, justo encima del motivo ("Confirm the cash above…", que sigue diciendo "above") y del botón apagado: lo que se lee (How this works, la nota) queda arriba. Con el día empezado no se mueve nada: ahí Today es largo y la tarjeta tiene que verse sin bajar. */ body.una-mano:has(#accion:disabled) #vista-hoy:not([hidden]) { flex: 1 0 auto; display: flex; flex-direction: column; } body.una-mano:has(#accion:disabled) #por-confirmar:not(:empty) { order: 1; margin-top: auto; } /* CON UN CARRO DE LA OFICINA ESPERANDO, LA TARJETA VA PRIMERO (8 oct 2026, usuario simulado a 360 × 780): "From the office" la empujaba hacia abajo y quedaba bajo la barra de abajo, con "Yes, I got 700.00" tapado justo cuando es lo único que se puede tocar. Arriba se ve entera sin bajar. */ body.una-mano:has(#accion:disabled):has(#seccion-jornada:not([hidden])) #por-confirmar:not(:empty) { order: -1; margin-top: 0; } /* 4. MENOS QUE LEER. "Photos" decía dos veces lo mismo: el paso de arriba ya lo dice en negrita. Se queda para el lector de pantalla (nombra el grupo del paso). Y la lista de "Logged today" se esconde mientras se toman las fotos del gasto recién guardado: repetía "Fuel · 40.00" con otros dos botones encima del que había que tocar. */ body.una-mano #titulo-paso-2 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } body.una-mano #seccion-gasto:has(#fotos-gasto:not([hidden])) #gastos-hoy { display: none; } /* 5. CIFRAS Y PARTES DE UN TOQUE (chofer.js, "UNA MANO, SIN ESCRIBIR"). Una fila de botones con borde, 48 px, que se reparten el ancho; lo elegido en tinta y con ✓ (como "No title" y el catalítico), nunca en amarillo: el amarillo es Next/Save. */ body.una-mano .montos-rapidos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: 0; } body.una-mano .montos-rapidos[hidden] { display: none; } body.una-mano .montos-rapidos .rapido { flex: 1 1 auto; min-height: 48px; min-width: 3.5rem; margin: 0; padding: 0 var(--e3); border-width: 2px; font-size: 1.125rem; font-weight: 700; letter-spacing: 0; } body.una-mano .montos-rapidos .rapido[aria-pressed="true"] { background: var(--elegido-fondo); border-color: var(--elegido-fondo); color: var(--elegido-texto); } body.una-mano .montos-rapidos .rapido[aria-pressed="true"]::before { content: "\2713\00a0"; font-weight: 800; } body.una-mano .rotulo-rapidos { font-weight: 700; color: var(--tinta); padding-right: var(--e1); } body.una-mano .partes-rapidas .rapido { font-size: 1rem; } } /* ---- DISPATCH, las decisiones del dueño del 6 oct 2026 ------------------- Dos carros por viaje (el chofer lleno no se elige), "Didn't happen" (el carro vuelve a la oficina) y "Cancel this car" (aparte, plegado). */ .opcion-chofer.lleno { cursor: not-allowed; color: var(--tinta-suave); } .opcion-chofer.lleno .nombre { color: var(--tinta-suave); } .opcion-chofer .estado-chofer.lleno-chofer { font-weight: 700; color: var(--rojo-texto); } .linea-despacho.sub .no-paso { font-weight: 700; color: var(--rojo-texto); } .ficha-despacho .cancelar-despacho { align-self: flex-start; } .plegado-despacho { margin-top: var(--e3); } .plegado-despacho > summary { cursor: pointer; min-height: var(--toque); display: flex; align-items: center; gap: var(--e2); font-size: 1.1rem; font-weight: 700; color: var(--tinta); } .plegado-despacho > summary .cuantos { font-size: var(--t-chico); background: var(--tinta); color: var(--fondo); padding: 0 .45rem; } .plegado-despacho > .filas { margin-top: var(--e2); } .carro-despacho.cancelado { opacity: .8; } /* En el teléfono: la otra salida del carro, de una mano y a todo lo ancho. */ .carro-envio .no-paso-envio { width: 100%; min-height: 52px; margin-top: var(--e2); } .carro-envio .no-paso-envio[data-confirmando] { border-color: var(--rojo); color: var(--rojo-texto); } .carro-envio [data-dicho-envio]:empty { display: none; } /* En el teléfono, la hora (o "Didn't happen – …", o a quién se mandó) va en su propia línea: partida, la línea de abajo empezaba con el punto. */ @media (max-width: 44rem) { .linea-despacho.sub > :is(.cuando, .no-paso, .para-chofer) { flex-basis: 100%; } .linea-despacho.sub > :is(.cuando, .no-paso, .para-chofer)::before { content: none; } } /* ---- LLAMADAS COMPARTIDAS DESDE EL TELÉFONO (6 oct 2026) ----------------- "Recordings to assign" en Dispatch y "Which car is this call for?" (oficina-compartir.js). Las filas de carros son botones enteros: se toca el carro y la llamada se pega, con un dedo y en el teléfono de la dispatcher. Mismo dibujo que las tarjetas de Dispatch. */ .bandeja-compartidas { display: flex; flex-direction: column; gap: var(--e2); } .fila-bandeja { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e1) var(--e3); padding: var(--e3); border-left: var(--banda) solid var(--acento); } .fila-bandeja .nombre-compartida, .fila-bandeja .datos-compartida { grid-column: 1; } .fila-bandeja > button { grid-column: 2; grid-row: 1 / span 2; } .nombre-compartida { margin: 0; font-weight: 700; color: var(--tinta); overflow-wrap: anywhere; } .datos-compartida { margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--e2); font-size: var(--t-chico); color: var(--tinta-suave); } .datos-compartida > * + *::before { content: "·"; margin-right: var(--e2); color: var(--tinta-tenue); } .asignar-grabacion { display: flex; flex-direction: column; gap: var(--e3); max-width: 48rem; } .asignar-grabacion h2.display { margin: 0; } .grabacion-compartida { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3); } .grabacion-compartida audio { width: 100%; } .buscar-asignar { display: flex; flex-direction: column; gap: var(--e1); font-weight: 600; } #asignar-cuerpo { display: flex; flex-direction: column; gap: var(--e2); } #asignar-cuerpo .filas { display: flex; flex-direction: column; gap: var(--e2); } .fila-asignar { /* Un botón de la app centra lo de dentro; esta fila se lee como una tarjeta. */ display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--e1); width: 100%; text-align: left; padding: var(--e3); min-height: var(--toque); cursor: pointer; font: inherit; color: var(--tinta); } .fila-asignar.enviar { border-left: var(--banda) solid var(--acento); } .fila-asignar:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--foco, var(--acento)); } .fila-asignar .ya-tiene { font-size: var(--t-chico); font-weight: 400; color: var(--tinta-suave); } .fila-asignar .linea-despacho.sub { font-weight: 400; } .fila-asignar[data-confirmando] { border-color: var(--rojo); } .fila-asignar[data-confirmando] .ya-tiene { font-weight: 700; color: var(--rojo-texto); } .acciones-asignar { flex-wrap: wrap; } .ayuda-compartir p { margin: 0; } .pasos-atajo { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: var(--e1); overflow-wrap: anywhere; } .llave-atajo { display: flex; flex-direction: column; gap: var(--e2); } #hueco-atajo label { display: flex; flex-direction: column; gap: var(--e1); } #hueco-atajo input[readonly] { font-family: ui-monospace, monospace; font-size: var(--t-chico); } /* SETTINGS › TELEGRAM BOT (19 oct 2026, oficina-telegram.js): el campo del token como los del Atajo, y los grupos pendientes en una fila cada uno con su "Allow" a la derecha (a 390 el título salta de línea y el botón no se estira: es una acción, no un campo). */ #hueco-telegram label { display: flex; flex-direction: column; gap: var(--e1); } #hueco-telegram input[name="token"] { font-family: ui-monospace, monospace; font-size: var(--t-chico); } .form-telegram { display: flex; flex-direction: column; gap: var(--e2); } .grupos-telegram { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); } .grupos-telegram li { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); flex-wrap: wrap; } .grupos-telegram li > span { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; } .grupos-telegram li > button { flex: 0 0 auto; } /* En el teléfono el riel se deshace y lo que no es la acción baja al final (.riel > * { order: 2 }): la bandeja va arriba, antes de New car. */ @media (max-width: 63.99rem) { .riel > .bandeja-compartidas { order: 0; } } @media (max-width: 44rem) { .fila-bandeja { grid-template-columns: minmax(0, 1fr); } .fila-bandeja > button { grid-column: 1; grid-row: auto; width: 100%; } .acciones-asignar > button { flex: 1 1 100%; } } /* ========================================================================== CALMA (8 oct 2026). El dueño: "está muy saturado los menús, y se hace mucho estímulo visual, necesito que mejoremos el diseño con los nuevos agregados que hicimos". Lo nuevo (Dispatch, la tarjeta del carro enviado en el teléfono, Settings con su conmutador) había llegado con su propio amarillo, sus cajas punteadas y sus chapas negras, encima del sistema de siempre. Medido antes con Chromium y la semilla (scratchpad calma/): Dispatch a 1440 con 11 chapas y 16 cajas con borde a la vista; la ficha abierta de un carro con tres acciones con borde (amarillo, contorno y rojo) una encima de otra; el teléfono de Marco con tres botones de 56 px con borde de 2 px en tinta uno por fila más "I bought it" y "Didn't happen": cinco botones grandes en una tarjeta. Las reglas: - UNA acción con color por zona; lo demás, contorno suave o tranquilo, y lo raro plegado ("More actions" en la ficha de Dispatch). - Una banda a la izquierda solo dice rojo (traba) o gris (espera): el amarillo de "To send", de la bandeja y de la tarjeta del teléfono se va. - Las cuentas de un título ("To send 4") en gris, sin chapa negra. - Nada de cajas punteadas: los pliegues con su triángulo y una raya fina. - La columna de secciones solo lleva insignia si algo traba (oficina.js, pintarInsignias; desde el 22 oct 2026 ninguna: solo la campana). Todo en `@media screen`: la hoja impresa no cambia. ========================================================================== */ @media screen { /* 1. SIN AMARILLO EN LOS BORDES. El amarillo es de lo que se toca; la banda de "To send" (3 px) se leía como un estado más. El borde vuelve al de cualquier tarjeta (--borde-tarjeta, el mismo de los otros tres lados). */ .carro-despacho.enviar, .fila-asignar.enviar, .fila-bandeja, .carro-envio { border-left: 1px solid var(--borde-tarjeta); } /* El carro recién guardado o mandado se marca con un anillo en tinta, no en amarillo (no es un botón). */ .carro-despacho.recien { box-shadow: 0 0 0 3px var(--tinta); } /* 2. LAS CUENTAS DE UN TÍTULO, EN GRIS. "To send 4", "Sent, not bought yet 2", "Cancelled 1": el número es un dato, no una chapa negra (eran cuatro manchas de tinta llena a 1440). --tinta-suave pasa 7:1 en los dos temas sobre la página (pruebas/tema.js). */ .titulo-lista-despacho .cuantos, .plegado-despacho > summary .cuantos, .bandeja-compartidas .cuantos { background: transparent; color: var(--tinta-suave); border: 0; padding: 0; min-width: 0; font-size: 1rem; font-weight: 600; } /* 3. LOS PLIEGUES DE DISPATCH: sin caja punteada, con el triángulo de la casa (lista de "SISTEMA 2 · COHERENCIA") y una raya fina encima. "Paste a WhatsApp message instead" y "Send calls from your phone" eran dos recuadros de raya negra dentro de la tarjeta de New car. */ .pegar-despacho { border: 0; border-top: 1px solid var(--linea); border-radius: 0; padding: 0; } .pegar-despacho > summary, .plegado-despacho > summary, .mas-acciones > summary { list-style: none; display: flex; align-items: center; gap: var(--e2); min-height: var(--toque); cursor: pointer; font-weight: 600; color: var(--tinta); } .pegar-despacho > summary::-webkit-details-marker, .plegado-despacho > summary::-webkit-details-marker, .mas-acciones > summary::-webkit-details-marker { display: none; } :is(.pegar-despacho, .plegado-despacho, .mas-acciones)[open] > summary::before { transform: rotate(90deg); } :is(.pegar-despacho, .plegado-despacho, .mas-acciones) > summary:focus-visible { outline: 3px solid var(--foco, var(--acento)); outline-offset: 2px; border-radius: var(--radio-chico); } /* Lo plegado de debajo de To send (Sent, Bought today, Cancelled): títulos del mismo tamaño que "To send" (una escala: 20 título, 18 carro, 16 texto, 14 dato), separados por una raya y no por 48 px de aire. */ .plegado-despacho { margin-top: 0; border-top: 1px solid var(--linea); } .plegado-despacho > summary { font-size: 1.25rem; font-weight: 700; } .titulo-lista-despacho, .nuevo-despacho .titulo-bloque { font-size: 1.25rem; font-weight: 700; } /* "All cars" cerrada, una línea más de la lista y no otra tarjeta; abierta vuelve a su tarjeta (las listas de dentro cuentan con su fondo). */ .todos-despacho:not([open]) { margin-top: 0; border: 0; border-top: 1px solid var(--linea); border-radius: 0; background: transparent; box-shadow: none; } .todos-despacho:not([open]) > summary { padding-inline: 0; } /* 4. LA LÍNEA DE UN CARRO, MENOS NEGRITA. La dirección y la hora en 400 gris; en 700 solo el carro, lo ofrecido, a quién se mandó (600) y el "Didn't happen" rojo. A 1440 la línea de abajo iba entera en negrita. */ .carro-despacho > summary { font-weight: 400; } .linea-despacho.sub .donde-despacho, .linea-despacho.sub .cuando { font-weight: 400; } /* 5. LA FICHA ABIERTA: el grupo de choferes sin caja dentro de la tarjeta (recuadro dentro de recuadro); el título del grupo lo agrupa. Y lo raro (cambiar la grabación, cancelar) en "More actions", plegado. */ .elegir-chofer { border: 0; padding: 0; } .elegir-chofer legend { padding: 0; margin-bottom: var(--e1); } .mas-acciones { border-top: 1px solid var(--linea); } .mas-acciones-cuerpo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e2); padding: var(--e1) 0 var(--e2); } .mas-acciones-cuerpo > .motivos-cancelar { flex-basis: 100%; } /* 6. EL TELÉFONO: UNA TARJETA, UNA ACCIÓN. "I bought it" sigue amarillo de 56; Call seller / Open in Maps / Play recording pasan de tres filas de 56 con borde de 2 px en tinta (tres botones que pesaban como el principal) a UNA fila de tres, icono encima de la palabra, borde de control de 1 px (--borde-boton: 3.9:1 claro, 5.6 oscuro, negro al sol). Siguen de 64 px de alto o más (el toque del chofer es 48). */ body.una-mano .envio-botones { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; } body.una-mano .envio-boton, body.una-mano .boton.envio-boton { flex-direction: column; justify-content: center; align-items: center; gap: 4px; min-height: 64px; padding: var(--e2) var(--e1); border-radius: var(--radio-chico); border: 1px solid var(--borde-boton); font-size: .9375rem; font-weight: 600; line-height: 1.15; text-align: center; white-space: normal; } body.una-mano .envio-boton.apagado { border-style: solid; border-color: var(--linea); } /* "New" en tinta y 800, sin la chapa negra: la tarjeta ya es la primera. */ .chapa-nuevo { padding: 0; background: transparent; color: var(--tinta); } /* "New car from the office: …" encima de la tarjeta repetía el nombre del carro en verde (el verde es "cuadra", no "llegó"): una línea gris. */ .aviso-envio.bien { border-left: 0; background: transparent; padding: 0; margin: 0; color: var(--tinta-suave); font-weight: 600; } /* "Didn't happen": la salida rara, tranquila (subrayada, sin borde), a lo ancho y de 48. El segundo toque sigue con su borde rojo. */ .carro-envio .no-paso-envio { min-height: 48px; } /* 7. SETTINGS: los atajos de arriba ("CDL places", "The company"…) eran seis píldoras con borde encima del conmutador Settings | Users | Audit log. Pasan a enlaces de texto en fila: se ven, pesan menos. Siguen de 44 px de alto. */ .atajos-ajustes button { border-color: transparent; background: transparent; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 600; padding-inline: var(--e2); } /* 8. CASH: LO QUE CUADRA NO LLEVA BANDA. Cada entrega contada llevaba una banda verde de 5 px además de su chapa verde "COUNTED": a 390, 30 rayas verdes seguidas que pesaban más que la única roja de arriba (la disputa). La banda se queda para lo que traba (roja) y lo que espera (gris), como dice la regla de las bandas; "COUNTED" sigue en verde. */ main .entrega:is(.confirmado, .devuelto) { border-left: 1px solid var(--borde-tarjeta); } } /* ========================================================================== CALMA 2 (8 oct 2026). La segunda pasada de lo mismo: "está muy saturado los menús, y se hace mucho estímulo visual". El bloque de arriba calmó Dispatch, el teléfono, Cash y Settings; aquí van Reports › Pay, Home, CDL trips y Drivers, más dos arreglos (la columna de secciones que no llegaba abajo y el estado de Working now cortado con "…"). Medido antes con Chromium y la semilla, dueño en claro (scratchpad calma2/): Pay a 1440 con 18 tamaños de letra, 152 textos en negrita y 91 cajas con borde (25 campos de tip a la vista con su "Save" al lado, un muro de pares Tip/Save); Home con 14 tamaños, un 8 de 108 px y cada cifra dentro de una caja blanca dentro de su tarjeta; CDL trips 13 tamaños con el importe a 96 px; Drivers 13 con el "3" a 96 px. Las reglas, una escala de CINCO tamaños en estas cuatro pantallas: 32 (2rem) el título de la pantalla y las cifras grandes; 20 (1.25rem) el título de una zona, la moneda y los centavos; 16 (1rem) el texto, los botones, los nombres; 14 (.875rem) el dato; 12 (.75rem) la chapa, las iniciales de una cara, la hora. Menos negrita (600 en las cifras de una línea, 700 en títulos y cifras grandes, 800 en ningún sitio), ninguna caja dentro de una caja, y lo que se usa una vez por fila (el "Save" de cada tip) solo a la vista donde se escribe. Todo en `@media screen`: la hoja impresa no cambia. ========================================================================== */ @media screen { /* 1. LA ESCALA. El prefijo `#principal [data-seccion=…]` deja fuera Dispatch, Cash y Settings (su escala es la del bloque de arriba) y los teléfonos. Con el id del
y no `main`: las reglas de Noche de más arriba (`:is([data-densidad="oficina"]:not([data-tema="claro"]), …) :not([data-sol]) .kpi-pozo`, 0-4-0) ganaban a `main [data-seccion] …` (0-2-1) y el pozo oscuro seguía dentro de cada tarjeta. */ #principal :is([data-seccion="inicio"], [data-seccion="semana"], [data-seccion="cdl"], [data-seccion="choferes"]) :is( h2.display, h2.display *, .casa-fecha) { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; } /* Las cifras grandes: el 8 de To do (108 px), el importe de Settle up y de CDL trips (96), el "3" de Drivers (96) y las de las tarjetas (35), todas a 32. La de Settle up sigue siendo la primera de su tarjeta: la señala el amarillo de al lado, no su tamaño. */ #principal :is([data-seccion="inicio"], [data-seccion="semana"], [data-seccion="cdl"], [data-seccion="choferes"]) :is( .hacer-n, .heroe-cifra, .heroe-cifra > b, .saldar-cifra, .kpi .cifra, .kpi .monto, .heroe-cifra .monto, .saldar-cifra .monto, .ahora-cuantos b, .anillo-centro > b) { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; } #principal :is([data-seccion="inicio"], [data-seccion="semana"], [data-seccion="cdl"], [data-seccion="choferes"]) :is(.moneda, .centavos) { font-size: 1.25rem; font-weight: 700; } #principal :is([data-seccion="inicio"], [data-seccion="semana"], [data-seccion="cdl"], [data-seccion="choferes"]) :is( .rotulo-bloque, .rotulo-bloque *, .casa-cabeza h3, .hacer-estado h3, .heroe-rotulo, .saldar-quien, .saldar-quien b, details.bloque > summary .que, .resumen-chofer b, .heroe-cifra > span:not(.monto), .kpi-par .cifra, .titular .cifra) { font-size: 1.25rem; font-weight: 700; letter-spacing: 0; line-height: 1.25; } #principal :is([data-seccion="inicio"], [data-seccion="semana"], [data-seccion="cdl"], [data-seccion="choferes"]) :is( .cual-periodo, button.saldar-cada, td, th, .casa-ahora .casa-nombre, .cdl-uno-cifra b) { font-size: 1rem; } /* El nombre de una tarjeta ("Pay this week", "Cars today"): 16/700, no 18/800; el título de la zona es el de 20. */ #principal :is([data-seccion="inicio"], [data-seccion="semana"], [data-seccion="cdl"], [data-seccion="choferes"]) .kpi .kpi-tapa .rotulo { font-size: 1rem; font-weight: 700; } #principal :is([data-seccion="inicio"], [data-seccion="semana"], [data-seccion="cdl"], [data-seccion="choferes"]) :is( .saldar-barras > .rotulo, .barras-chofer .cuanto, .casa-estado, .casa-fuera, .casa-nadie, .ahora-cuantos, .casa-ahora .casa-estado, .casa-ahora .casa-fuera, .casa-pagado, .anillo-centro > span) { font-size: .875rem; } #principal :is([data-seccion="inicio"], [data-seccion="semana"], [data-seccion="cdl"], [data-seccion="choferes"]) :is( .chip-estado, .hacer-parte, .cara.chica, .check.shell, .chip-abierto) { font-size: .75rem; } /* TO DO EN UNA LÍNEA (Taller): "8 To do [2 blocking] [6 waiting]". El 8 ocupaba dos renglones a la izquierda con 108 px; a 32 eso dejaba "To do" colgado encima de las chapas. En fila, con salto si no cabe (a 320 las chapas bajan solas, sin la container query de antes). El número de cada chapa, del tamaño de su chapa. */ body[data-tema="claro"] #principal [data-seccion="inicio"] .hacer-estado, body[data-tema="claro"] #principal [data-seccion="inicio"] .hacer-estado:has(.hacer-parte.traba:not([hidden])) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); } body[data-tema="claro"] #principal [data-seccion="inicio"] .hacer-total { display: flex; align-items: baseline; gap: var(--e2); margin-right: var(--e1); } body[data-tema="claro"] #principal [data-seccion="inicio"] .hacer-estado h3 { line-height: 1.1; } body[data-tema="claro"] #principal [data-seccion="inicio"] .hacer-parte .n { font-size: inherit; } #principal [data-seccion="inicio"] .hacer-n { line-height: 1; } /* Noche: las tres columnas (8 To do | 2 blocking | 6 waiting) se quedan, con las tres cifras a 32 (eran 112 y 48) y su nombre a 14. */ :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) #principal [data-seccion="inicio"] .hacer-parte { font-size: .875rem; } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) #principal [data-seccion="inicio"] .hacer-parte .n { font-size: 2rem; line-height: 1.1; } /* 2. MENOS NEGRITA. En una línea de dato la cifra pesa 600, no 700 u 800: en Pay eran 50 cifras en 700 solo en los tips ("Paid 150.00 of 550.00 400.00 under the offer", dos negritas por carro). */ #principal [data-seccion="semana"] :is(.fila-tip .pago b, .barras-chofer .cuanto b, .lleva b), #principal [data-seccion="inicio"] :is(.casa-hoy b, .casa-ahora .casa-nombre, .casa-texto b, .dias-barras .dia-n), #principal [data-seccion="choferes"] .resumen-chofer b { font-weight: 600; } #principal [data-seccion="inicio"] .dias-barras .dia-col.hoy .dia-nombre, #principal [data-seccion="semana"] button.saldar-cada, #principal :is([data-seccion="inicio"], [data-seccion="semana"], [data-seccion="cdl"], [data-seccion="choferes"]) .hacer-parte .n { font-weight: 700; } /* 3. NINGUNA CAJA DENTRO DE UNA CAJA. La cifra de cada tarjeta iba en un pozo blanco con borde dentro de la tarjeta (Taller): en Home tres, en Pay tres, en CDL trips cuatro y en Drivers tres, y en CDL trips y Drivers esas tarjetas estaban a su vez dentro de la del héroe. La tarjeta ya es la caja: el pozo, sin fondo ni borde (como ya era en Noche); las del héroe, una raya fina encima en vez de tarjeta. */ #principal :is([data-seccion="inicio"], [data-seccion="semana"], [data-seccion="cdl"], [data-seccion="choferes"]) .kpi-pozo { background: transparent; border-color: transparent; padding-top: var(--e1); } #principal :is([data-seccion="cdl"], [data-seccion="choferes"]) .heroe-pantalla .kpi { background: transparent; border: 0; border-top: 1px solid var(--linea); border-radius: 0; box-shadow: none; } /* "Shell" es un dato del carro, no una alarma: sin su recuadro rojo (9 a la vista en los tips a 1440). Sigue en mayúsculas y en rojo de texto. */ #principal [data-seccion="semana"] .check.shell { border-color: transparent; padding: 0; font-weight: 600; } /* Lo que falta de cada chofer en "Settle up with each driver": lo que es solo un dato ("21 WITHOUT TIP", "NOTHING MISSING") en gris y sin cápsula; con cápsula solo lo que traba (rojo) y lo que espera (gris con el reloj), la regla de las tres chapas. */ #principal [data-seccion="semana"] :is(.chip-abierto.dato, .chip-abierto.nada) { background: transparent; border-color: transparent; padding-inline: 0; font-weight: 600; } #principal [data-seccion="semana"] .chip-abierto.nada { color: var(--tinta-suave); } /* 4. EL MURO TIP/SAVE. Cada carro llevaba "Tip", un campo que también dice "Tip" y un "Save" con borde: a 1440, 25 pares a la vista (70 en la semana). El rótulo de al lado repetía lo que dice el campo (el campo se anuncia con su aria-label, "Tip for the driver"), y el "Save" solo hace falta en la fila donde se escribe: Enter guarda y salta al siguiente (oficina.js, data-tip-de). Se queda en su sitio (visibility y no display: la fila no salta al aparecer) y vuelve en cuanto el campo tiene el foco o un número. Con el ratón, al pulsar "Save" el foco pasa al botón, que sigue dentro de la fila (:focus-within). */ #principal [data-seccion="semana"] .fila-tip .poner .et { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #principal [data-seccion="semana"] .fila-tip .poner:not(:focus-within):has(input[data-tip-de]:placeholder-shown) [data-guardar-tip] { visibility: hidden; } /* 5. SETTLE UP: las cinco barras de "We pay them, by driver" eran cinco franjas negras de 14 px, lo más oscuro de la tarjeta después de la cifra. A 8 px y en --tinta-suave (7:1 sobre el panel en los dos temas, muy por encima de los 3:1 de un gráfico) se leen igual de largas. */ #principal [data-seccion="semana"] .barras-chofer .barra-fila { height: 8px; } #principal [data-seccion="semana"] .barras-chofer .barra-llena { background: var(--tinta-suave); } /* 6. HOME. To do: el pozo redondo del icono (rojo lleno con el icono blanco en lo que traba, hundido en lo demás) sobraba con el fondo rojo y la banda de la fila: dos rojos llenos por línea. El icono, solo, en su color. Working now: cada chofer era una caja hundida; ahora una línea de la lista con su raya, como To do. */ #principal [data-seccion="inicio"] .casa-hacer .casa-fila .casa-ico, body:not([data-sol]) #principal [data-seccion="inicio"] .casa-hacer .casa-fila:not(.grave) .casa-ico { background: transparent; padding: 8px; } #principal [data-seccion="inicio"] .casa-hacer .casa-fila.grave .casa-ico { background: transparent; color: var(--rojo-texto); } #principal [data-seccion="inicio"] .casa-ahora button.casa-chofer, body:not([data-sol]) #principal [data-seccion="inicio"] .casa-ahora button.casa-chofer { background: transparent; border-radius: 0; padding-inline: 0; } #principal [data-seccion="inicio"] .casa-ahora .casa-lista > li + li, body:not([data-sol]) #principal [data-seccion="inicio"] .casa-ahora .casa-lista > li + li { border-top: 1px solid var(--linea); margin-top: 0; } @media (hover: hover) { body:not([data-sol]) #principal [data-seccion="inicio"] .casa-ahora button.casa-chofer:hover { background: var(--hundido); box-shadow: none; } } /* 7. WORKING NOW, EL ESTADO ENTERO. A 390 "Out since 6:48 …" y "Heading to the y…": el estado iba en `nowrap` con "…" y la columna del nombre se llevaba el ancho. Ahora parte en dos líneas si no cabe, como ya hacía el de los CDL (.partida). */ #principal [data-seccion="inicio"] .casa-ahora .casa-estado { white-space: normal; text-overflow: clip; overflow: visible; line-height: 1.3; } /* 8. LA COLUMNA DE SECCIONES LLEGA ABAJO (escritorio). Era pegada (sticky) con el alto de la ventana y empezaba a 72: en una página más larga que la ventana se cortaba a 900 px y la crema seguía sola debajo (Dispatch y Settings a 1440; Pay mide 4603). Ahora la columna se estira a todo el alto de la rejilla del y lo pegado es la lista de dentro: el fondo y la raya llegan al final y los botones siguen a la vista al bajar. En Noche la columna es una tarjeta flotante con su margen: llega igual, hasta el margen de abajo. Con el id (#barra-pestanas) para ganar a la regla de Noche (`[data-densidad="oficina"]:not([data-tema="claro"]) .barra-pestanas`, 0-3-0), que le ponía el alto de la ventana. */ @media (min-width: 64rem) { body[data-densidad="oficina"] #barra-pestanas { align-self: stretch; position: relative; height: auto; top: auto !important; } /* Bajo la CABECERA, no bajo todo lo pegado (14 oct 2026): con "‹ Back to …" arriba de
el alto pegado crece y la lista saltaba hacia abajo (apilarBarras publica --alto-cabecera). */ body[data-densidad="oficina"] #barra-pestanas > .pestanas { position: sticky; top: calc(var(--alto-cabecera, 4.5rem) + var(--e2)); } } } /* ========================================================================== ASSIGN (8 OCT 2026). El dueño: "necesito solo una pantalla para ponerle los autos a los choferes, ésta debe estar dedicada". Dispatch en tres partes con el conmutador de Reports (Assign | New car | History), y Assign con dos columnas en escritorio: los carros por mandar a la izquierda, los choferes a la derecha (pegados al bajar, para no perderlos con una lista larga). En el teléfono una columna: los choferes con lugar salen debajo del carro tocado (oficina-despacho.js, pintarAsignar). Calma: un solo amarillo (Send, solo en la pregunta abierta); filas con el borde de cualquier tarjeta, sin cajas dentro de cajas (lo de cada chofer va con una raya, no en otra caja); el color solo dice estado (Full en rojo-texto, "Didn't happen" como en To send). Lo marcado, en tinta. Todo en @media screen: la hoja impresa no cambia. Escala de cinco tamaños (CALMA 2): 20 título, 16 texto, 14 dato. ========================================================================== */ @media screen { .partes-despacho { display: flex; width: 100%; gap: var(--e1); margin: 0 0 var(--e3); } .partes-despacho button { flex: 1 1 0; min-height: 48px; white-space: nowrap; } @media (min-width: 64rem) { .partes-despacho { width: 30rem; max-width: 100%; } } .partes-despacho:not([hidden]) { display: flex; gap: 4px; padding: 4px; border-radius: var(--pastilla); background: var(--hundido); } #partes-despacho button { border: 1px solid transparent; background: transparent; min-height: 44px; } #partes-despacho button.activo { background: var(--elegido-fondo); color: var(--elegido-texto); border-color: var(--elegido-fondo); } .asignar-arriba { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e5); margin-bottom: var(--e2); } .asignar-arriba button.tranquilo { min-height: 44px; padding-left: 0; padding-right: 0; font-weight: 600; } .asignar-columnas { display: flex; flex-direction: column; gap: var(--e5); } @media (min-width: 64rem) { .asignar-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--e6); } .asignar-choferes { position: sticky; top: calc(var(--alto-pegado, 4.5rem) + var(--e3)); max-height: calc(100vh - var(--alto-pegado, 4.5rem) - var(--e5)); overflow-y: auto; } } .asignar-despacho .titulo-lista-despacho { margin: 0 0 var(--e1); font-size: 1.25rem; } .asignar-despacho .titulo-lista-despacho .cuantos { background: transparent; color: var(--tinta-suave); font-size: 1rem; font-weight: 600; padding: 0; } .asignar-despacho .ayuda-campo:empty { display: none; } .filas-asignar { display: flex; flex-direction: column; gap: var(--e2); margin-top: var(--e2); } /* Un carro: una fila corta, todo el ancho se toca. */ .carro-asignar { border: 1px solid var(--borde-tarjeta); border-radius: var(--radio-chico); background: var(--panel); } .carro-asignar .tocar-carro { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; min-height: 56px; padding: var(--e2) var(--e3); text-align: left; border: 0; border-radius: inherit; background: transparent; color: var(--tinta); font-weight: 400; } .carro-asignar .tocar-carro:hover { filter: none; background: var(--hundido); } .carro-asignar.marcado { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); background: var(--hundido); } /* "✓ Selected" en tinta invertida (14 oct 2026; la raya de la marca, abajo en "LO ELEGIDO SE VE MÁS"). */ .elegido-asignar { display: inline-flex; align-items: center; gap: 4px; padding: 1px var(--e2) 1px 6px; border-radius: 999px; background: var(--tinta); color: var(--fondo); font-size: .875rem; font-weight: 700; white-space: nowrap; } /* "Details ›" (y "Cancel" del marcado) a la derecha de la fila, fuera del botón de elegir: tocar la fila elige, "Details ›" abre Car details. */ .carro-asignar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; } .botones-fila-asignar { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--linea); } .botones-fila-asignar button.tranquilo { min-height: 44px; padding: 0 var(--e3); font-weight: 600; white-space: nowrap; } /* En el teléfono, debajo y a la derecha: a 390 la columna apretaba el carro (con la hora de la cita, el nombre se partía en tres renglones). */ @media (max-width: 47.99rem) { .carro-asignar { grid-template-columns: minmax(0, 1fr); } .botones-fila-asignar { flex-direction: row; justify-content: flex-end; border-left: 0; border-top: 1px solid var(--linea); } } .carro-asignar.recien, .suyo-asignar.recien { box-shadow: 0 0 0 3px var(--tinta); } .linea-asignar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--e3); } .linea-asignar .nombre-asignar { font-size: 1rem; font-weight: 700; } .oferta-asignar { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .linea-asignar.sub { justify-content: flex-start; align-items: center; gap: 0 var(--e2); font-size: .875rem; color: var(--tinta-suave); } .linea-asignar.sub .no-paso { font-weight: 700; color: var(--rojo-texto); } .linea-asignar.sub > .donde-asignar + .no-paso::before { content: "·"; margin-right: var(--e2); color: var(--tinta-tenue); } /* En el teléfono "Didn't happen – …" va en su línea: partido, el punto quedaba solo al principio de la segunda. */ @media (max-width: 47.99rem) { .linea-asignar.sub > .no-paso { flex-basis: 100%; } .linea-asignar.sub > .donde-asignar + .no-paso::before { content: none; } } /* Un chofer: cara, nombre y estado, y los lugares a la derecha. */ .chofer-asignar { border: 1px solid var(--borde-tarjeta); border-radius: var(--radio-chico); background: var(--panel); } .chofer-asignar .tocar-chofer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--e3); width: 100%; min-height: 56px; padding: var(--e2) var(--e3); text-align: left; border: 0; border-radius: inherit; background: transparent; color: var(--tinta); font-weight: 400; } .chofer-asignar button.tocar-chofer { cursor: pointer; } .chofer-asignar button.tocar-chofer:hover { filter: none; background: var(--hundido); } .chofer-asignar.abierto { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); } .chofer-asignar.lleno .tocar-chofer { color: var(--tinta-suave); } .quien-asignar { display: flex; flex-direction: column; min-width: 0; } .quien-asignar .nombre-asignar { font-weight: 700; } .estado-asignar { font-size: .875rem; color: var(--tinta-suave); } .lugares-grua { display: inline-flex; align-items: center; gap: var(--e2); white-space: nowrap; font-variant-numeric: tabular-nums; } .lugares-grua .puntos { font-size: 1.25rem; letter-spacing: 2px; color: var(--tinta); line-height: 1; } .lugares-grua .cuenta-lugares { font-size: .875rem; color: var(--tinta-suave); font-weight: 600; } .lugares-grua.lleno .cuenta-lugares { color: var(--rojo-texto); font-weight: 700; } /* "Send Honda Accord to Marco?" en una línea, con Send (el amarillo). */ .confirmar-asignar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); padding: var(--e2) var(--e3) var(--e3); border-top: 1px solid var(--linea); } .confirmar-asignar .pregunta-asignar { flex: 1 1 100%; margin: 0; font-weight: 700; color: var(--tinta); } .confirmar-asignar button { min-height: 48px; } .confirmar-asignar .ayuda-campo { flex: 1 1 100%; margin: 0; } /* Lo que ya lleva: en chico, con una raya, sin otra caja. */ .suyos-asignar { list-style: none; margin: 0; padding: 0 var(--e3) var(--e1); border-top: 1px solid var(--linea); } .suyo-asignar { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); min-height: 44px; font-size: .875rem; color: var(--tinta-suave); border-radius: 8px; } .suyo-asignar .carro-suyo { color: var(--tinta); font-weight: 600; min-width: 0; } .suyo-asignar.quieto { min-height: 32px; } .suyo-asignar button.tranquilo { min-height: 44px; font-size: .875rem; padding: 0 var(--e1); } .suyo-asignar button.tranquilo.peligro { color: var(--rojo-texto); } /* "Move to…" y "Take back" juntos a la derecha (8 oct 2026). La línea que se mueve se marca como el carro marcado de To send. */ .suyo-asignar .botones-suyo { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--e3); flex: none; } .suyo-asignar.moviendo { background: var(--hundido); box-shadow: inset 0 0 0 2px var(--tinta); padding-left: var(--e2); } .suyo-asignar.moviendo .carro-suyo::before { content: "\2713\00a0"; font-weight: 700; } .suyo-asignar button[aria-pressed="true"] { color: var(--tinta); font-weight: 700; } /* EL ANILLO DE LA LÍNEA RECIÉN MANDADA, CON AIRE (8 oct 2026, usuario simulado): iba pegado a "2008 Honda Civic" y a "Take back", y arriba y abajo lo cortaba la raya de la tarjeta. Por dentro, un poco de relleno; por fuera, un margen del grueso del anillo. */ .suyo-asignar.recien { padding: 0 var(--e2); margin: 4px 0; } /* LO ELEGIDO SE VE MÁS, Y A QUIÉN SE PUEDE MANDAR TAMBIÉN (8 oct 2026, usuario simulado: el carro marcado se distinguía apenas por un borde de 1 px, y nada decía qué choferes tocar). El marcado lleva un ✓ y un borde de 2 px; con algo para elegir, los choferes con lugar llevan el borde de tinta y los demás bajan de tono. Sin amarillo: es de Send. */ /* MÁS FUERTE (14 oct 2026, usuario simulado: el carro que llegaba marcado de "Assign it" no se distinguía y un toque lo soltaba): una raya gruesa de tinta a la izquierda, el borde doble y "✓ Selected" con palabra (.elegido-asignar; el ✓ suelto del nombre se fue con ella). */ .carro-asignar.marcado { box-shadow: inset 0 0 0 2px var(--tinta); border-left: 6px solid var(--tinta); } .asignar-choferes.eligiendo .chofer-asignar.elegible, .choferes-en-linea .chofer-asignar.elegible { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); } .asignar-choferes.eligiendo .chofer-asignar:not(.elegible) .tocar-chofer { opacity: .6; } /* En el teléfono, los choferes con lugar debajo del carro tocado. */ .choferes-en-linea { display: flex; flex-direction: column; gap: var(--e2); margin: 0 0 var(--e2) var(--e3); padding-left: var(--e3); border-left: 2px solid var(--tinta); } .choferes-en-linea .vacio, .llenos-asignar { margin: 0; } } /* ========================================================================== DISPATCH EN HOME (8 OCT 2026). El dueño: "que en el Home se vea un resumen de los choferes activos y todo eso". Con las reglas de la calma: sin relleno ni color (el amarillo de Home no cambia), sin caja dentro de caja. ========================================================================== */ @media screen { /* La línea de arriba: una fila de texto con una raya fina, como un enlace de cabecera ("Drivers ›"), a todo el ancho y de 48 px para el dedo. */ .casa-despacho { margin: 0; } .casa-despacho[hidden] { display: none; } #principal .casa-despacho > button { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--e1) var(--e3); width: 100%; min-height: 48px; padding: var(--e2) var(--e3); margin: 0; border: 1px solid var(--linea); border-radius: var(--radio-chico); background: transparent; box-shadow: none; font: inherit; font-size: 1rem; font-weight: 400; color: var(--tinta-suave); text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; } .casa-despacho .icono { width: 20px; height: 20px; flex: none; color: var(--tinta); } .casa-despacho .casa-despacho-que { font-weight: 700; color: var(--tinta); } .casa-despacho .casa-despacho-n { flex: 1 1 auto; min-width: 0; } /* Cada trozo entero: "2 sent, not bought" no se parte. */ .casa-despacho .casa-despacho-n > span { white-space: nowrap; } .casa-despacho .casa-despacho-n b { font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; } .casa-despacho .casa-despacho-ir { margin-left: auto; font-weight: 700; color: var(--tinta); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; } @media (hover: hover) { .casa-despacho > button:hover { border-color: var(--tinta-suave); } } /* Los lugares en la fila de Working now: el dibujo de Assign, a la medida del texto de la fila. "Full" en gris: en Home no traba a nadie (rojo es traba), solo dice que no cabe otro carro. */ .casa-hoy .lugares-grua { gap: var(--e1); } .casa-hoy .lugares-grua .puntos { font-size: 1rem; letter-spacing: 1px; } .casa-hoy .lugares-grua .cuenta-lugares, .casa-hoy .lugares-grua.lleno .cuenta-lugares { font-size: .875rem; color: var(--tinta-suave); font-weight: 400; } /* Lo mandado y sin comprar puede ser largo: parte en palabras. */ .casa-hoy > span.mandados { white-space: normal; flex-basis: 100%; } } /* ========================================================================== LAS CITAS CON EL VENDEDOR (8 OCT 2026). El dueño: "programemos appointments que los clientes dicen, como: jueves 3pm, y que ese día le salga". En Assign la hora va grande a la izquierda de la fila (como un horario: lo primero que se lee es CUÁNDO), con "Late" en rojo-texto y "In 25 min" en tinta; nada amarillo (es de Send) ni colores nuevos. En New car y en More actions, los días como pastillas que se tocan (Today, Tomorrow, Sat…) y la hora en un selector. En el teléfono, una línea grande arriba del carro. Escala de la calma: 20 la hora, 16 el texto, 14 el dato. ========================================================================== */ @media screen { /* Assign: la fila con cita, la hora a la izquierda. */ .carro-asignar.con-cita .tocar-carro { flex-direction: row; align-items: center; gap: var(--e3); } .carro-asignar .cuerpo-asignar { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .cita-asignar { display: flex; flex-direction: column; align-items: flex-start; flex: none; min-width: 5.75rem; padding-right: var(--e3); border-right: 1px solid var(--linea); line-height: 1.2; } .cita-asignar .cita-hora { font-size: 1.25rem; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Un día sin hora (22 oct 2026): "Any time" en el sitio de la hora, a 16 y no a 20. No es un horario que haya que cumplir, y así una hora de verdad sigue siendo lo que más pesa en la columna. */ .cita-asignar .cita-hora.sin-hora { font-size: 1rem; } .cita-asignar .cita-dia { font-size: .875rem; font-weight: 600; color: var(--tinta-suave); white-space: nowrap; } .cita-asignar .cita-estado { font-size: .875rem; font-weight: 700; white-space: nowrap; } .cita-asignar .cita-estado.tarde { color: var(--rojo-texto); } .cita-asignar .cita-estado.pronto { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; } .cita-asignar.tarde { border-right-color: var(--rojo-texto); border-right-width: 3px; } /* Con la hora a la izquierda queda menos ancho: lo que sigue a la calle ("Sent to Marco", la ventana, "Didn't happen – …") va en su línea, sin el punto que, partido, quedaba solo al principio de la segunda. */ .carro-asignar.con-cita .linea-asignar.sub > .para-chofer, .carro-asignar.con-cita .linea-asignar.sub > .nota-cita, .carro-asignar.con-cita .linea-asignar.sub > .no-paso { flex-basis: 100%; } .carro-asignar.con-cita .linea-asignar.sub > .donde-asignar + .no-paso::before { content: none; } .carro-asignar.con-cita .linea-asignar.sub > .para-chofer { font-weight: 600; color: var(--tinta); } /* La cita de hoy ya mandada: se ve, pero no se toca (se mueve en su chofer). */ .carro-asignar.cita-mandada { background: transparent; border-style: dashed; } .carro-asignar .tocar-carro.quieto { cursor: default; } .carro-asignar .tocar-carro.quieto:hover { background: transparent; } .carro-asignar.cita-mandada .nombre-asignar { font-weight: 600; } .grupo-citas { margin-bottom: var(--e5); } .grupo-citas[hidden] { display: none; } #asignar-proximas { margin: var(--e5) 0 0; } /* En el chofer: la hora delante del carro mandado. */ .cita-suyo { font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; } .cita-suyo.tarde { color: var(--rojo-texto); } /* La ficha de New car y de History: "Appointment Fri, Oct 9 3:00 PM". */ .linea-despacho.sub .cita-despacho { font-weight: 700; color: var(--tinta); white-space: nowrap; } .linea-despacho.sub .cita-despacho.tarde { color: var(--rojo-texto); } /* Los campos de una cita: las pastillas de los días, el día y la hora. */ fieldset.cita-nuevo { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--e2); } fieldset.cita-nuevo > legend { padding: 0; margin-bottom: var(--e1); font-size: 1rem; font-weight: 600; color: var(--tinta); } .campos-cita { display: flex; flex-direction: column; gap: var(--e2); } .atajos-cita { display: flex; flex-wrap: wrap; gap: var(--e1); } .atajos-cita .atajo-cita { min-height: 44px; min-width: 44px; padding: 0 var(--e3); border-radius: var(--pastilla); border: 1px solid var(--borde-tarjeta); background: var(--panel); color: var(--tinta); font-weight: 600; } .atajos-cita .atajo-cita[aria-pressed="true"] { background: var(--elegido-fondo); color: var(--elegido-texto); border-color: var(--elegido-fondo); } .fila-cita { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--e2); } .fila-cita select, .fila-cita input { min-height: 48px; width: 100%; } .cita-editar { display: flex; flex-direction: column; gap: var(--e2); padding-bottom: var(--e3); border-bottom: 1px solid var(--linea); } .cita-editar .rotulo-despacho { margin: 0; } .cita-editar .acciones { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); margin: 0; } .cita-editar .ayuda-campo:empty { display: none; } /* Home: la línea de las citas, debajo de la de Dispatch. */ .casa-despacho.casa-citas { margin-top: var(--e2); } } /* El teléfono del chofer: "Appointment today 3:00 PM", grande, arriba del carro (tarjetaDelEnvio, chofer.js). La de hoy en 20 (el tamaño de los títulos), la de otro día en 16: la de hoy es la que manda la mañana. */ @media screen { .envio-cita { display: flex; align-items: center; gap: var(--e2); margin: var(--e1) 0 0; font-size: 1rem; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; } .envio-cita.hoy { font-size: 1.25rem; } .envio-cita .icono { flex: none; } .envio-cita .envio-cita-tarde { color: var(--rojo-texto); font-weight: 700; } .envio-cita-nota { margin: 0; font-size: .875rem; color: var(--tinta-suave); } } /* ========================================================================== EL RECORDATORIO DE LA CITA Y EL TÍTULO DICHO (9 OCT 2026). El dueño: "si ya se le asignó, se le debe enviar el recordatorio" y "él debe saber que es no title". - Teléfono: el recordatorio arriba de todo (public/recordatorio.js), un bloque grande con la banda amarilla (es lo que hay que mirar) que pasa a roja a 15 minutos; la hora en 20, el carro en 16. Call es el botón amarillo (lo que se toca); Maps, "See the car" y OK, calmados. - "NO TITLE" en la tarjeta del carro: en rojo-texto con su borde y en mayúsculas, como SHELL en Reports (cambia lo que se paga). "Has title", tranquilo. Nada de colores nuevos. - Oficina: la etiqueta chica del título y "Reminder sent 2:00 PM" en Assign y en To send/Sent, en 14 y en tinta suave. ========================================================================== */ @media screen { .recordatorio-cita { margin: 0 0 var(--e3); padding: var(--e3); display: flex; flex-direction: column; gap: var(--e2); border: 2px solid var(--tinta); border-left: var(--banda) solid var(--acento); border-radius: var(--radio-chico); background: var(--panel); color: var(--tinta); } .recordatorio-cita[hidden] { display: none; } .recordatorio-cita.urgente { border-left-color: var(--rojo); } .recordatorio-titulo { margin: 0; display: flex; align-items: flex-start; gap: var(--e2); font-size: 1rem; line-height: 1.35; } .recordatorio-titulo strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; } .recordatorio-titulo .icono { flex: none; margin-top: 3px; } .recordatorio-falta { margin: 0; font-size: .875rem; font-weight: 700; color: var(--tinta-suave); } .recordatorio-cita.urgente .recordatorio-falta { color: var(--rojo-texto); } .recordatorio-botones { display: flex; flex-wrap: wrap; gap: var(--e2); } .recordatorio-botones > .boton, .recordatorio-botones > button { min-height: 48px; flex: 1 1 auto; justify-content: center; } .permiso-recordatorio { margin: 0 0 var(--e3); border-left-color: var(--acento); color: var(--tinta); } .permiso-recordatorio[hidden] { display: none; } .permiso-recordatorio p { margin: 0; } /* La tarjeta tocada desde el recordatorio o la notificación, un momento. */ .carro-envio.recordada { outline: 3px solid var(--acento); outline-offset: 2px; } .envio-titulo { margin: 0; } .envio-titulo > span:first-child { display: inline-block; padding: .15rem .5rem; border: 2px solid currentColor; border-radius: var(--radio-chico); font-size: 1rem; font-weight: 700; letter-spacing: .02em; } .envio-titulo.sin-titulo { color: var(--rojo-texto); } .envio-titulo.con-titulo { color: var(--tinta-suave); } .envio-titulo.con-titulo > span:first-child { font-weight: 600; border-width: 1px; } .titulo-dicho { font-size: .875rem; font-weight: 700; white-space: nowrap; } .titulo-dicho.sin-titulo { color: var(--rojo-texto); } .titulo-dicho.con-titulo { color: var(--tinta-suave); font-weight: 600; } .recordatorio-enviado { font-size: .875rem; color: var(--tinta-suave); white-space: nowrap; } /* "Title" de New car y de More actions: tres pastillas, como los días. */ fieldset.titulo-nuevo-despacho { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--e1); } fieldset.titulo-nuevo-despacho > legend { padding: 0; margin-bottom: var(--e1); font-size: 1rem; font-weight: 600; color: var(--tinta); } .opciones-titulo-dicho { display: flex; flex-wrap: wrap; gap: var(--e1); } .opciones-titulo-dicho label { display: inline-flex; flex-direction: row; align-items: center; gap: var(--e1); min-height: 44px; padding: 0 var(--e3); border: 1px solid var(--borde-tarjeta); border-radius: var(--pastilla); background: var(--panel); color: var(--tinta); font-weight: 600; cursor: pointer; } .opciones-titulo-dicho input { margin: 0; width: auto; min-height: 0; flex: none; } .opciones-titulo-dicho label:has(input:checked) { background: var(--elegido-fondo); color: var(--elegido-texto); border-color: var(--elegido-fondo); } .opciones-titulo-dicho label:has(input:focus-visible) { outline: 3px solid var(--foco, var(--acento)); outline-offset: 2px; } .titulo-editar { display: flex; flex-direction: column; gap: var(--e2); padding-bottom: var(--e3); border-bottom: 1px solid var(--linea); } .titulo-editar .ayuda-campo:empty { display: none; } /* "WHERE DID IT COME FROM?" (11 oct 2026): las pastillas de "Title", siete en lugar de tres. A 360 caben en tres renglones sin cortar ninguna palabra; 44 px de alto, de un toque. Lo escrito en "Other" va debajo, a lo ancho, solo con Other marcado. Lo marcado lleva el mismo color que el día elegido de la cita: una sola manera de decir "esto está puesto". */ .opciones-origen label { padding: 0 var(--e3); } .origen-nuevo[aria-invalid="true"] .opciones-origen label { border-color: var(--rojo); } .origen-nuevo .ayuda-campo:empty, .origen-editar .ayuda-campo:empty { display: none; } .origen-otro, .origen-otro-editar label { display: flex; flex-direction: column; gap: var(--e1); } .origen-otro-editar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e2); } .origen-otro-editar[hidden], .origen-otro[hidden] { display: none; } .origen-otro-editar label { flex: 1 1 12rem; min-width: 0; } /* En la fila de Assign y de To send, en chico y en gris: un dato, no un aviso. */ .origen-chico { font-size: .875rem; color: var(--tinta-suave); white-space: nowrap; } } /* ========================================================================== EL DINERO EN HOME Y EN REPORTS (8 OCT 2026). El dueño: "debe estar en ambos el dinero, pero en los reports debe ser más a profundidad y con un mejor desglose, en el home hay resúmenes y cosas que ellos necesiten ver". Con las reglas de la calma: la escala de cinco tamaños (20 el título, 16 el texto, 14 el dato), nada en 800, sin caja dentro de caja (cada línea es una raya, como Working now) y un solo amarillo en la zona: "Give cash", que es lo que la secretaria hace cada mañana. Lo pinta oficina-dinero.js. ========================================================================== */ @media screen { /* ---- Home › Money today: la tarjeta, como las otras de Home ---- */ .casa-bloque.casa-dinero { background: var(--panel); border: 1px solid var(--borde-tarjeta); border-radius: var(--radio); padding: var(--e4); gap: var(--e2); } .casa-bloque.casa-dinero > .casa-cabeza { flex-wrap: wrap; padding-bottom: var(--e3); border-bottom: 1px solid var(--linea); } .casa-dinero .casa-cabeza h3 { margin-right: auto; } /* "Give cash": el botón de la casa, a la medida del dedo y no más. */ #principal .casa-dinero button.dar-efectivo { display: inline-flex; align-items: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e4); margin: 0; font-size: 1rem; font-weight: 700; } .casa-dinero button.dar-efectivo .icono { width: 20px; height: 20px; flex: none; } .dinero-lista { list-style: none; margin: 0; padding: 0; } .dinero-lista > li + li { border-top: 1px solid var(--linea); } /* Una línea: el rótulo y la cifra arriba, la nota debajo, la flecha a la derecha. Un botón a todo el ancho sin la píldora (como Working now). */ #principal .casa-dinero button.dinero-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; grid-template-areas: "r c f" "n n f"; align-items: center; column-gap: var(--e3); row-gap: 2px; width: 100%; min-height: 56px; padding: var(--e3) var(--e1); margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font: inherit; font-size: 1rem; font-weight: 400; color: var(--tinta); text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; } /* La misma línea, quieta (9 oct 2026: Expenses today de la oficina, que no lleva a ningún sitio): sin botón ni flecha, la columna de la flecha vacía para que las cifras sigan alineadas con las de arriba. */ #principal .casa-dinero div.dinero-fila.quieta { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; grid-template-areas: "r c f" "n n f"; align-items: center; column-gap: var(--e3); row-gap: 2px; min-height: 56px; padding: var(--e3) var(--e1); } #principal .casa-dinero button.dinero-fila:focus-visible { outline-offset: -3px; } .dinero-fila > .rotulo { grid-area: r; font-size: 1rem; font-weight: 600; color: var(--tinta); min-width: 0; } .dinero-fila > .cifra { grid-area: c; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap; } .dinero-fila > .cifra.falta, .dinero-fila .nota b.falta { color: var(--rojo-texto); } /* La nota parte ENTRE trozos ("Juan 700.00" entero), nunca dentro. */ .dinero-fila > .nota { grid-area: n; font-size: .875rem; color: var(--tinta-suave); min-width: 0; } .dinero-fila > .nota > span { white-space: nowrap; } .dinero-fila > .nota > span + span::before { content: "· "; } .dinero-fila > .nota b { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; } .dinero-fila > .casa-chev { grid-area: f; } @media (hover: hover) { #principal .casa-dinero button.dinero-fila:hover > .rotulo { text-decoration: underline; text-underline-offset: 3px; } } /* ---- Reports › Pay › Money in and out ---- */ .desglose-partes { display: grid; gap: var(--e5); } .desglose-parte { min-width: 0; } .desglose-titulo { margin: 0 0 var(--e2); font-size: 1rem; font-weight: 700; color: var(--tinta); } #desglose-dinero > .desglose-titulo { margin-top: var(--e5); } /* Lo que es parte de la fila de arriba (los tips dentro de lo pagado al saldar), un poco adentro y en gris: no se suma dos veces al leer. */ #desglose-dinero .cuenta tr.parte td { padding-left: var(--e4); color: var(--tinta-suave); font-weight: 400; font-size: .875rem; } #desglose-dinero .cuenta tr.parte td.n { padding-left: 0; } .desglose-lista { list-style: none; margin: 0; padding: 0; } .desglose-lista > li { display: flex; flex-direction: column; gap: 2px; padding: var(--e2) 0; } .desglose-lista > li + li { border-top: 1px solid var(--linea); } .desglose-lista .quien { font-size: 1rem; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; } .desglose-lista .cifras { font-size: .875rem; color: var(--tinta-suave); } .desglose-lista .cifras > span { white-space: nowrap; } .desglose-lista .cifras > span + span::before { content: "· "; } .desglose-lista .cifras b { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; } } /* En escritorio Money today va a la izquierda, bajo To do, y Cars by day debajo; Working now baja por la derecha a lo largo de los dos (en Noche, al revés, como el resto de Home). Y las tres cuentas de Reports lado a lado cuando caben. */ @media screen { @media (min-width: 64rem) { .casa-rejilla { grid-template-areas: "hacer cifras" "dinero ahora" "dias ahora"; } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) .casa-rejilla { grid-template-areas: "hacer cifras" "ahora dinero" "ahora dias"; } .casa-dinero { grid-area: dinero; } .casa-bloque.casa-dinero { padding: var(--e5); } .desglose-partes { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); align-items: start; } } } /* This week con dos tarjetas (el dueño, desde que Remaining balance vive en Money today): "Pay this week" y "Cars this week" una bajo otra en la columna de la derecha. Lado a lado, la de pago medía 220 px y partía "Drivers 6,240.00 · CDL 4,145.00" en tres renglones. */ @media screen { @media (min-width: 64rem) { .casa-kpis:not(.tres):has([data-clave="cifra-pago"]), .casa-kpis:has(> li:only-child) { grid-template-columns: minmax(0, 1fr); } } } /* ========================================================================== HOME VISUAL (8 OCT 2026). El dueño: "en el home busquemos la manera de agregar gráficos ... poner iconos de grúa o algo así y que salga prendido de los choferes activos y que salga el número de cuántos salen, pero que sea mucho más visual y no solo texto y números". La flota (una grúa por chofer, encendida si tiene el día abierto) y dos gráficos de la semana (pagado contra ofrecido, efectivo por chofer); los pinta public/inicio-visual.js. Con las reglas de la calma: la escala de cinco tamaños (32, 20, 16, 14, 12), nada en 800, ninguna caja dentro de la tarjeta, todo en `@media screen` (pruebas/peso-visual.js lee este bloque con el de CALMA 2, que llega hasta el final del archivo). ========================================================================== */ @media screen { /* Las dos tarjetas nuevas, como las de Home: panel, borde de tarjeta, radio 26 y la sombra de capa (PESO VISUAL 2). */ .casa-flota, .casa-grafico { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; background: var(--panel); border: 1px solid var(--borde-tarjeta); border-radius: var(--radio); box-shadow: var(--sombra-tarjeta); padding: var(--e4); } .casa-flota[hidden], .casa-graficos[hidden] { display: none; } .casa-graficos { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; } /* La cabecera: "Drivers" a la izquierda y "4 of 6 out" a la derecha, el número a 32 (el tope de la escala) y la frase en gris. */ .flota-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e3); } .flota-cabeza :is(h3, h4) { margin: 0 auto 0 0; } .flota-cdl .flota-cabeza h4 { font-size: 1rem; font-weight: 700; color: var(--tinta); } .flota-cuantos { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; font-size: 1rem; color: var(--tinta-suave); } .flota-cuantos b { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums; } .flota-cdl .flota-cuantos b { font-size: 1.25rem; } /* Los CDL aparte, con una raya encima (no otra caja dentro de la tarjeta). */ .flota-cdl { display: flex; flex-direction: column; gap: var(--e2); padding-top: var(--e3); border-top: 1px solid var(--linea); } /* LA FILA DE GRÚAS. Columnas de 56 px como mínimo: las cinco grúas de la empresa en UNA fila desde 360 (la tarjeta mide 294 por dentro; con 60 px eran cuatro y una sola abajo, y la tarjeta crecía 112 px). Más choferes parten en filas, nunca de lado. En una tableta, columnas de 104 px fijos: seis grúas no se estiran a lo ancho de la pantalla. */ .flota { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2) var(--e1); grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr)); } .flota > li { display: flex; min-width: 0; } @media (min-width: 48rem) { .flota { grid-template-columns: repeat(auto-fill, 6.5rem); gap: var(--e3) var(--e2); } } /* Cada grúa es un botón (lleva a la ficha): sin píldora ni relleno, la forma la da el dibujo. 48 px de toque como mínimo (mide más). */ #principal button.grua-flota, .grua-flota { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: var(--e2) 2px; border: 0; border-radius: var(--radio-chico); background: transparent; box-shadow: none; font: inherit; color: var(--tinta); text-align: center; text-transform: none; letter-spacing: 0; cursor: pointer; } span.grua-flota { cursor: default; } @media (hover: hover) { #principal button.grua-flota:hover { background: var(--dentro); } } #principal button.grua-flota:focus-visible { box-shadow: inset 0 0 0 3px var(--foco, var(--acento)); } /* Los lugares de la grúa: un punto por lugar, lleno en tinta, vacío con su aro en gris (el "●○" de Dispatch, dibujado). Lleno no es rojo: en Home no traba a nadie. */ .flota-lugares { display: flex; gap: 3px; min-height: 10px; } .flota-lugares i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--tinta-suave); box-sizing: border-box; } .flota-lugares i.lleno { background: var(--tinta); border-color: var(--tinta); } /* Los anchos van por 65/56 desde el 10 oct 2026: el viewBox creció 9 unidades a la izquierda para las llamas y la grúa mide lo mismo que antes (3.5, 2.75, 4.5 y 3.25rem). */ .dibujo-grua { display: block; width: 4.0625rem; height: auto; overflow: visible; } .flota.chica .dibujo-grua { width: 3.1875rem; } @media (min-width: 48rem) { .flota:not(.chica) .dibujo-grua { width: 5.25rem; } .flota.chica .dibujo-grua { width: 3.75rem; } } .flota-nombre { max-width: 100%; font-size: 1rem; font-weight: 700; line-height: 1.2; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flota.chica .flota-nombre { font-size: .875rem; } /* Los CDL son tres: columnas más anchas, que "Working" quepa entero (a 360, en 57 px, partía "Workin / g"). */ .flota.chica { grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); } /* El estado parte en dos renglones antes que cortarse ("To the / yard"). */ .flota-estado { font-size: .875rem; line-height: 1.2; color: var(--tinta-suave); } .grua-flota.encendida .flota-estado { color: var(--tinta); font-weight: 600; } /* LO DEL DÍA BAJO CADA GRÚA (13 oct 2026: Working now se fue de Home y lo esencial de su fila vive aquí). Un dato por renglón, a 12 px y entero (nowrap): "2 cars", "$700", "Cash claim" en rojo, "1 sent". */ .flota-hoy { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 100%; font-size: .75rem; line-height: 1.25; color: var(--tinta-suave); font-variant-numeric: tabular-nums; } .flota-hoy > span { white-space: nowrap; max-width: 100%; } .flota-hoy .flota-saldo { color: var(--tinta); font-weight: 600; } .flota-hoy .flota-saldo.falta, .flota-hoy .flota-reclamo { color: var(--rojo-texto); font-weight: 600; } .flecha-patio { width: 14px; height: 14px; margin-right: 2px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* EL DIBUJO. Apagada: todo en el gris de lo que no corre, la caja del color de lo de dentro (se lee vacía). Encendida: la caja en el amarillo C&A (el pedido del dueño: "que salga prendido"; es además un botón, así que el amarillo sigue siendo de lo que se toca), contorno en tinta (el amarillo solo sobre la tarjeta blanca da 1.46:1; con el contorno carbón la forma se lee a 17:1, y en Noche el contorno es crema), el vidrio y las ruedas en carbón. */ .dibujo-grua .g-linea { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .dibujo-grua :is(.g-cuerpo, .g-luz) { stroke-width: 2; stroke-linejoin: round; } .dibujo-grua .g-rueda { stroke-width: 1.5; } .apagada .dibujo-grua .g-cuerpo { fill: var(--dentro); stroke: var(--tinta-tenue); } .apagada .dibujo-grua .g-linea { stroke: var(--tinta-tenue); } .apagada .dibujo-grua .g-vidrio { fill: var(--grafico-resto); } .apagada .dibujo-grua .g-rueda { fill: var(--tinta-tenue); stroke: var(--tinta-tenue); } .apagada .dibujo-grua .g-cubo { fill: var(--dentro); } .apagada .dibujo-grua .g-luz { fill: var(--grafico-resto); stroke: var(--tinta-tenue); } .apagada .dibujo-grua .g-brillo { display: none; } .encendida .dibujo-grua .g-cuerpo { fill: var(--acento); stroke: var(--tinta); } .encendida .dibujo-grua .g-linea { stroke: var(--tinta); } .encendida .dibujo-grua .g-vidrio { fill: var(--carbon); } .encendida .dibujo-grua .g-rueda { fill: var(--carbon); stroke: var(--tinta); } .encendida .dibujo-grua .g-cubo { fill: var(--acento); } .encendida .dibujo-grua .g-luz { fill: var(--acento); stroke: var(--tinta); } /* LA LUZ DEL TECHO RESPIRA: un halo amarillo detrás que crece y se apaga cada 2.4 s, suave (de .15 a .55 de opacidad). Ningún texto va encima, así que no hay contraste que medir fotograma a fotograma. Con movimiento reducido, el halo quieto; al sol, sin halo (blanco y negro al máximo). */ .encendida .dibujo-grua .g-brillo { fill: var(--acento); opacity: .4; transform-box: fill-box; transform-origin: center; animation: luz-de-grua 2.4s ease-in-out infinite; } @keyframes luz-de-grua { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: .55; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .encendida .dibujo-grua .g-brillo { animation: none; opacity: .4; transform: none; } } [data-sol] .encendida .dibujo-grua .g-brillo { display: none; } /* LAS LLAMAS DE ATRÁS (10 oct 2026): nacieron con el emblema del águila, que el dueño quitó el mismo día ("quitemos esa águila y el camión", "de todas partes": el camión era el que el águila llevaba en las garras); las llamas de Home se quedaron, por decisión suya. El naranja #F26A1B por fuera, el amarillo C&A por dentro, con el contorno en tinta de toda la grúa, que es lo que las lee sobre la tarjeta blanca (el naranja solo da 3:1). Solo encendida: apagada no corre y no echa fuego. Se mueven poco, crecen y encogen desde la caja cada 0.9 s, y con movimiento reducido se quedan quietas. Ningún texto encima. */ .dibujo-grua .g-llamas { display: none; } .encendida .dibujo-grua .g-llamas { display: inline; transform-box: fill-box; transform-origin: right center; animation: llamas-de-grua .9s ease-in-out infinite alternate; } .encendida .dibujo-grua .g-llama { fill: #F26A1B; stroke: var(--tinta); stroke-width: 1; stroke-linejoin: round; } .encendida .dibujo-grua .g-llama-dentro { fill: var(--acento); } @keyframes llamas-de-grua { from { transform: scaleX(.8); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .encendida .dibujo-grua .g-llamas { animation: none; transform: none; } } /* CON LA FLOTA A LA VISTA, Working now no repite la cuenta: ni "3 of 5 working" grande en la cabecera ni el anillo de Noche (lo dice la fila de grúas, que va arriba). Una cosa, una vez (la calma). El enlace "Drivers ›" y las listas siguen. Con #principal: las reglas del anillo son :is(...) .anillo de fuerza 0-3-0. */ #principal .casa.con-flota .casa-ahora :is(.ahora-cuantos, .anillo) { display: none; } #principal .casa.con-flota .casa-ahora .con-anillo { display: block; } /* LOS GRÁFICOS. Debajo de la rejilla de Home; en escritorio, los dos lado a lado. El subtítulo dice de qué semana y de cuántos carros. */ .grafico-sub, .grafico-mas, .grafico-vacio { margin: 0; font-size: .875rem; color: var(--tinta-suave); } /* Pagado contra ofrecido: una barra de 24 px (el grueso máximo de una barra), los tramos con 2 px de aire entre ellos y los extremos con radio de 4. Lo pagado en tinta; lo ahorrado rayado en gris (el gris de "todavía corre" de Cars by day, con el rayado para que no se confunda con él ni dependa del color); lo pagado de más en rojo (es lo que hay que mirar). */ .barra-oferta { display: flex; gap: 2px; height: 24px; border-radius: 4px; overflow: hidden; } .barra-oferta .tramo { flex: var(--parte) 0 0; min-width: 2px; } .tramo.pagado, .muestra.pagado { background: var(--grafico); } .tramo.ahorro, .muestra.ahorro { background: repeating-linear-gradient(135deg, var(--grafico-parcial) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 2px var(--grafico-parcial); } .tramo.sobre, .muestra.sobre { background: var(--rojo); } /* La leyenda, siempre (dos series), con la cifra junto a su muestra; la cifra en tinta, nunca en el color de la serie. */ .leyenda-grafico { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); font-size: 1rem; color: var(--tinta-suave); } .leyenda-grafico li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .leyenda-grafico b { font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; } .leyenda-grafico b.falta { color: var(--rojo-texto); } .leyenda-grafico .pct { font-size: .875rem; } .leyenda-grafico .muestra { display: inline-block; width: 14px; height: 14px; border-radius: 3px; flex: none; } /* El efectivo por chofer: el nombre, la pista con la barra desde el cero y la cifra en su propia columna (nunca encima de la barra). Barras de 10 px en gris, como las de Settle up (CALMA 2): son un dato, no un estado. Lo negativo hacia la izquierda en rojo, como en Drivers, con una raya fina en el cero. La barra es `.tira` y no `.barra`: `.barra` es la barra carbón de arriba, y con ese nombre cada chofer salía con una franja amarilla debajo (visto en la primera captura). */ .barras-efectivo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); } .barras-efectivo li { display: grid; grid-template-columns: minmax(0, 6rem) minmax(0, 1fr) minmax(4.5rem, auto); align-items: center; gap: var(--e3); min-height: 24px; } .barras-efectivo .quien { font-size: .875rem; font-weight: 600; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barras-efectivo .pista { position: relative; height: 10px; } .barras-efectivo.con-negativo .pista::before { content: ""; position: absolute; top: -5px; bottom: -5px; left: calc(var(--cero) * 100%); width: 1px; background: var(--borde-tarjeta); } .barras-efectivo .tira { position: absolute; top: 0; bottom: 0; left: calc(var(--desde) * 100%); width: max(2px, calc(var(--ancho) * 100%)); background: var(--tinta-suave); border-radius: 0 4px 4px 0; } .barras-efectivo .tira.falta { background: var(--rojo); border-radius: 4px 0 0 4px; } .barras-efectivo b { font-size: 1rem; font-weight: 700; color: var(--tinta); text-align: right; font-variant-numeric: tabular-nums; } .barras-efectivo b.falta { color: var(--rojo-texto); } /* EL EFECTIVO DE CADA CHOFER DENTRO DE "MONEY TODAY" (fusión con el dinero de Home): las barras arriba de las líneas de la tarjeta, con una raya debajo, y la nota de "Remaining balance" ("Juan 700.00 · Pedro 450.00…") escondida mientras las barras están: decían lo mismo. El total sigue en su línea, que lleva a Cash. */ .dinero-barras { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e2) 0 var(--e3); border-bottom: 1px solid var(--linea); } .casa-dinero:has(> #casa-dinero-barras:not([hidden])) [data-clave="dinero-caja"] > .nota { display: none; } /* En escritorio, el relleno de las otras tarjetas de Home y los dos gráficos lado a lado. LA FLOTA ARRIBA A LA DERECHA, junto a To do; la rejilla de Home (con "Money today" desde la fusión del 8 oct 2026) queda en tres filas: "hacer flota" / "dinero cifras" / "dias ahora" (Noche, al revés abajo como siempre: "cifras dinero" / "ahora dias"). Money today en la columna ancha (sus líneas llevan nota y ahora las barras), Pay y Cars this week una bajo otra en la estrecha. Con To do en dos filas ("hacer cifras") quedaba una tarjeta estirada con 350 px vacíos bajo "4 more" (primera captura); con la flota encima de la rejilla, To do bajaba de y=271 a y=665 a 1440 (medido). Solo cambian las áreas: el DOM (y el Tab) va To do, flota, cifras, dinero. En la columna de 5/12 (unos 450 px por dentro), columnas de 72 px como mínimo: las cinco grúas en una fila. Con #principal: la regla de Noche de la rejilla es 0-3-0. */ @media (min-width: 64rem) { .casa-flota, .casa-grafico { padding: var(--e5); } .casa-graficos.dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .casa-flota { grid-area: flota; } #principal .casa-rejilla:has(> .casa-flota:not([hidden])) { grid-template-rows: auto auto auto; grid-template-areas: "hacer flota" "dinero cifras" "dias ahora"; } :is([data-densidad="oficina"]:not([data-tema="claro"]), [data-tema="oscuro"]) #principal .casa-rejilla:has(> .casa-flota:not([hidden])) { grid-template-areas: "hacer flota" "cifras dinero" "ahora dias"; } .casa-flota .flota:not(.chica) { grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); } .casa-flota .flota:not(.chica) .dibujo-grua { width: 4.625rem; } } } /* ========================================================================== HOME SIN HUECOS (9 OCT 2026). El dueño, mirando Home a 1440: "no debe haber espacios así en el de computadora". La rejilla de áreas alineaba cada fila a su tarjeta más alta: 225 px vacíos bajo Pay/Cars this week, 380 bajo Cars by day, Paid vs offered sola a todo el ancho (376,900 px² vacíos entre tarjetas a 1440 el dueño, 439,339 Vanessa; semilla). Ahora, desde 64rem, dos columnas IGUALES que se llenan solas: el reparto lo hace public/inicio-visual.js (acomodarColumnas: pone `.en-columnas`, la columna y cuántas filas de 1 px ocupa cada tarjeta) y aquí está la rejilla. Columnas iguales para que el alto de una tarjeta no dependa de en qué columna cae (con 7fr/5fr habría que medir cada una dos veces). Sin `.en-columnas` (antes de que corra el JS, o sin ResizeObserver) queda la rejilla de áreas de arriba. Con `#casa-rejilla`: las áreas de Noche son 1-5-0. El teléfono y la tableta no cambian. ========================================================================== */ @media screen { @media (min-width: 64rem) { #principal #casa-rejilla.en-columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; grid-template-areas: none; grid-auto-rows: 1px; grid-auto-flow: row dense; row-gap: 0; column-gap: var(--e4); align-items: start; /* Cada tarjeta lleva su hueco debajo (dentro de sus filas): el de la última sobraría antes de "How this works". */ margin-bottom: calc(-1 * var(--e4)); } /* La fila la pone el JS (span); el inicio, la primera libre de su columna. `grid-area: hacer` y compañía fijaban el inicio por nombre. */ #principal #casa-rejilla.en-columnas > *, #principal #casa-rejilla.en-columnas > .casa-graficos > * { grid-row-start: auto; align-self: start; margin-bottom: var(--e4); } /* Los gráficos (Paid vs offered y, sin Money today, Cash in hand) son tarjetas de la rejilla como las demás: su envoltorio no pinta caja. */ #principal #casa-rejilla.en-columnas > .casa-graficos { display: contents; } #principal #casa-rejilla.en-columnas > .casa-graficos[hidden] { display: none; } /* La última de la columna corta llega al pie: las dos terminan juntas. Su margen (el hueco) se queda dentro de sus filas, como el de las otras. */ #principal #casa-rejilla.en-columnas > .estirada, #principal #casa-rejilla.en-columnas > .casa-graficos > .estirada { align-self: stretch; } /* Sin el JS, los gráficos van a lo ancho bajo la rejilla, como antes. */ #principal #casa-rejilla:not(.en-columnas) > .casa-graficos { grid-column: 1 / -1; } /* "Mucho aire a la derecha de la flota": auto-fill dejaba columnas vacías (a 560 px por dentro caben 7 de 72 px y hay 5 grúas; los 3 CDL en la mitad izquierda). auto-fit las reparte a todo el ancho. */ .casa-flota .flota:not(.chica) { grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr)); } .casa-flota .flota.chica { grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); } } } /* ========================================================================== REPORTS › SOURCES (11 OCT 2026): "Where cars came from". El periodo en un conmutador (This week, This month, Last month, Dates), la cifra grande, las barras por canal (lo comprado en tinta, el resto rayado como "Paid vs offered" de Home), la tabla y la tendencia por semana. Las dos tablas van en .envoltorio: a 360 se deslizan dentro de su caja y la página no se mueve de lado. ========================================================================== */ @media screen { .cabeza-origenes { display: flex; flex-direction: column; gap: var(--e2); } .cabeza-origenes .conmutador { flex-wrap: wrap; } .rango-origenes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e2); } .rango-origenes[hidden] { display: none; } .rango-origenes label { display: flex; flex-direction: column; gap: var(--e1); } .rango-origenes .ayuda-campo { flex-basis: 100%; margin: 0; } .rango-origenes .ayuda-campo:empty { display: none; } .cuerpo-origenes { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; } .cifra-origenes { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e3); color: var(--tinta-suave); } .cifra-origenes b { font-size: 1.25rem; color: var(--tinta); } .barras-origen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); } .barras-origen li { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) minmax(7.5rem, auto); align-items: center; gap: var(--e3); min-height: 24px; } .barras-origen .quien { font-size: .875rem; font-weight: 600; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barras-origen .pista { position: relative; height: 14px; } .barras-origen .tira-origen { position: absolute; top: 0; bottom: 0; left: 0; width: max(4px, calc(var(--largo) * 100%)); border-radius: 0 4px 4px 0; overflow: hidden; background: repeating-linear-gradient(135deg, var(--grafico-parcial) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 2px var(--grafico-parcial); } .barras-origen .comprado { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--parte) * 100%); background: var(--grafico); } .barras-origen b { font-size: .875rem; font-weight: 700; color: var(--tinta); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 30rem) { .barras-origen li { grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr) auto; gap: var(--e2); } } .tabla-origen { max-width: 100%; } /* La cabeza de cada fila (el canal, la semana) como una celda más: sin esto heredaba el relleno y la raya gruesa de las cabezas de columna y quedaba un renglón más arriba que sus números (visto a 1440). */ .tabla-origen table.lista th[scope="row"] { font-family: inherit; font-size: .875rem; text-transform: none; letter-spacing: 0; white-space: nowrap; color: var(--tinta); padding: var(--fila) var(--e3) var(--fila) 0; border-bottom: 1px solid var(--linea); } .tabla-origen th, .tabla-origen td { vertical-align: middle; } .tabla-origen td.n, .tabla-origen th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .tabla-origen tr.subtotal th, .tabla-origen tr.subtotal td { font-style: italic; border-top: 1px dashed var(--linea); } .tabla-origen tfoot th, .tabla-origen tfoot td { font-weight: 700; } .tabla-origen .pct { font-size: .75rem; color: var(--tinta-suave); } /* La fila del mismo teléfono de la llamada (14 oct 2026): raya de tinta. */ .fila-asignar.mismo-telefono { box-shadow: inset 0 0 0 2px var(--tinta); border-left: 6px solid var(--tinta); } /* Que se desliza, dicho (14 oct 2026): solo donde la tabla no cabe. */ .pista-deslizar { display: none; margin: var(--e2) 0 0; font-size: .875rem; font-weight: 600; color: var(--tinta-suave); } @media (max-width: 47.99rem) { .pista-deslizar { display: block; } } } /* "ALL 119" ENTERA (14 oct 2026, usuario simulado: a 390 la tercera pastilla de Tips quedaba cortada en el borde y no se veía que se deslizaba). Son tres y caben en dos renglones: se parten en vez de deslizarse. */ @media screen { #estado-tips { flex-wrap: wrap; overflow-x: visible; } } /* ========================================================================== CAR DETAILS (13 OCT 2026). El dueño: "debemos dar la opción de editar el carro y entrar para agregar el audio o ver otras cosas". - La fila de un carro de Dispatch (To send, Sent, Bought today, Cancelled) es ahora un BOTÓN entero (.abrir-carro) que abre su ficha; antes era el summary de un
que se abría en su sitio. Se ve igual que antes: sin borde propio, el de la tarjeta. - El micrófono de la fila sale siempre en lo abierto: en tinta si tiene la grabación (.con-grabacion), tachado y en --tinta-tenue si falta (.sin-grabacion). Un dato, no un aviso: nada rojo ni amarillo. - La ficha (dialog#ficha-carro.ficha-carro-despacho): en el teléfono a pantalla completa (es "entrar" al carro, con "Back" arriba a la izquierda); desde 64rem un panel de 32rem a la derecha bajo la barra de arriba, como el de avisos pero más ancho (aquí se lee y se escribe). Cada zona separada por una raya, sin cajas dentro de cajas; UN amarillo por zona: "Add the recording" si falta, "Move to …" con un chofer elegido, "Save changes" con Edit abierto. Todo en `@media screen`: nada de esto se imprime. ========================================================================== */ @media screen { /* ---- la fila, un botón ---- */ .carro-despacho > button.abrir-carro { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--e1); width: 100%; min-height: var(--toque); margin: 0; padding: var(--e3); background: transparent; color: var(--tinta); border: 0; border-radius: inherit; text-align: left; font-weight: 400; cursor: pointer; } .carro-despacho > button.abrir-carro:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--foco, var(--acento)); } @media (hover: hover) { .carro-despacho > button.abrir-carro:hover { filter: none; background: var(--hundido); } } .linea-despacho.sub > .sin-grabacion + *::before { content: none; } .sin-grabacion { display: inline-flex; align-items: center; color: var(--tinta-tenue); } .linea-asignar.sub > :is(.con-grabacion, .sin-grabacion) { flex: none; } /* Assign: el nombre de un carro mandado se toca para abrir su ficha. */ .suyo-asignar .abrir-suyo { display: inline; min-height: 44px; margin: 0; padding: 0; background: transparent; border: 0; color: var(--tinta); font: inherit; font-weight: 600; text-align: left; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; } .suyo-asignar .abrir-suyo:focus-visible { outline: 3px solid var(--foco, var(--acento)); outline-offset: 2px; border-radius: 4px; } .carro-asignar.cita-mandada .tocar-carro[data-abrir-carro] { cursor: pointer; } @media (hover: hover) { .carro-asignar.cita-mandada .tocar-carro[data-abrir-carro]:hover { background: var(--hundido); } } /* ---- la ficha ---- */ dialog.ficha-carro-despacho { margin: 0; padding: 0; border: 0; color: var(--tinta); background: var(--fondo); position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; /* clip y no solo hidden: un hidden se deja correr por código, y al enfocar un campo de Edit el navegador corría el dialog entero y la cabecera con "Back" se salía por arriba (Chromium a 360). */ overflow: hidden; overflow: clip; border-radius: 0; } dialog.ficha-carro-despacho[open] { display: flex; flex-direction: column; } dialog.ficha-carro-despacho::backdrop { background: rgba(14, 17, 19, .45); } .ficha-carro-despacho > header { display: flex; align-items: center; gap: var(--e3); flex: none; padding: var(--e2) var(--e4) var(--e2) var(--e2); border-bottom: 1px solid var(--linea); background: var(--panel); } .ficha-carro-despacho > header h2 { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--tinta); } .ficha-carro-despacho > header h2:focus { outline: none; } .ficha-carro-despacho .volver-ficha { min-height: var(--toque); gap: var(--e1); padding: 0 var(--e3) 0 var(--e2); flex: none; } .ficha-carro-despacho .volver-ficha .icono { width: 22px; height: 22px; } .ficha-carro-despacho .solo-escritorio { display: none; } .ficha-carro-cuerpo { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--e4) var(--e4) calc(var(--e6, 48px) + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: var(--e4); } /* El aviso pasajero vive dentro mientras la ficha está abierta (si no, el modal lo tapa): abajo, sin barra de secciones debajo. */ .ficha-carro-despacho #aviso.aviso-oficina { bottom: calc(var(--e4) + env(safe-area-inset-bottom, 0px)); left: var(--e4); right: var(--e4); } .ficha-cabeza { display: flex; flex-direction: column; gap: var(--e1); } .ficha-cabeza h3.ficha-nombre { margin: 0; font-family: var(--titular); font-size: 1.25rem; font-weight: 700; line-height: 1.25; text-transform: none; letter-spacing: 0; color: var(--tinta); } .ficha-cabeza h3.ficha-nombre::before { content: none; } .ficha-oferta { margin: 0; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); } .ficha-estado { margin: 0; font-size: 1rem; color: var(--tinta-suave); } .ficha-estado.no-paso { color: var(--rojo-texto); font-weight: 700; } .ficha-zona { display: flex; flex-direction: column; gap: var(--e2); padding-top: var(--e4); border-top: 1px solid var(--linea); } .ficha-zona > p { margin: 0; } .ficha-zona h4.rotulo-despacho { margin: 0; font-family: var(--letra); font-size: 1rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--tinta); } .ficha-zona h4.rotulo-despacho::before { content: none; } .ficha-zona h4:focus { outline: none; } .ficha-zona .ayuda-campo:empty { display: none; } .ficha-carro-cuerpo .acciones { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); margin: 0; } .ficha-carro-cuerpo .acciones > * { flex: 0 1 auto; } /* La grabación: "Add the recording" amarillo, de una mano, a lo ancho en el teléfono. */ .ficha-carro-cuerpo .grabacion-despacho { align-items: stretch; } .ficha-carro-cuerpo .agregar-grabacion { justify-content: center; gap: var(--e2); min-height: 52px; font-size: 1rem; } .ficha-carro-cuerpo .cambiar-grabacion:focus-within { box-shadow: 0 0 0 3px var(--foco, var(--acento)); } .ficha-carro-cuerpo .acciones-grabacion button.tranquilo { min-height: var(--toque); } .ficha-carro-cuerpo .acciones-grabacion button.tranquilo.peligro { color: var(--rojo-texto); } /* Lo que se sabe: rótulo arriba (14, gris) y dato debajo (16). */ .datos-ficha { margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--e3); } .dato-ficha { min-width: 0; } .dato-ficha dt { font-size: .875rem; font-weight: 600; color: var(--tinta-suave); } .dato-ficha dd { margin: 0; font-size: 1rem; color: var(--tinta); overflow-wrap: anywhere; } .dato-ficha .dato-enlace { min-height: var(--toque); flex-wrap: wrap; gap: 0 var(--e2); } .dato-ficha .pista-enlace { font-size: .875rem; font-weight: 600; color: var(--tinta-suave); } .chofer-ficha { font-size: 1rem; color: var(--tinta-suave); } .chofer-ficha b { color: var(--tinta); } /* Edit: el formulario de New car, en columna. */ .editar-zona { align-items: flex-start; } .editar-carro { display: flex; flex-direction: column; gap: var(--e1); width: 100%; } .editar-carro[hidden] { display: none; } .editar-carro label { display: flex; flex-direction: column; gap: var(--e1); margin-top: var(--e2); } .editar-carro input, .editar-carro textarea { width: 100%; } .editar-carro .acciones { margin-top: var(--e3); } .editar-carro .aviso-local[hidden] { display: none; } .boton-editar { gap: var(--e2); } .boton-editar[hidden] { display: none; } .cerrado-ficha { padding: var(--e3); border-top: 0; } .cerrado-ficha .motivo-volver { display: flex; flex-direction: column; gap: var(--e1); font-weight: 600; color: var(--tinta); } .cerrado-ficha .motivo-volver input { width: 100%; } .cerrado-ficha > button { align-self: flex-start; } .ficha-carro-cuerpo .mas-acciones { border-top: 1px solid var(--linea); } /* La historia: hora a la izquierda (14 gris), qué pasó (16) y, de un Edit, lo cambiado debajo en chico. */ .historia-carro { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); } .linea-historia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; } .cuando-historia { font-size: .875rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; } .que-historia { font-size: 1rem; color: var(--tinta); overflow-wrap: anywhere; } .detalle-historia { margin: 2px 0 0; padding-left: var(--e4); font-size: .875rem; color: var(--tinta-suave); overflow-wrap: anywhere; } @media (min-width: 40rem) { .datos-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ficha-carro-cuerpo .agregar-grabacion { align-self: flex-start; } } @media (min-width: 64rem) { dialog.ficha-carro-despacho { inset: var(--alto-pegado, 71px) 0 0 auto; width: 32rem; height: calc(100dvh - var(--alto-pegado, 71px)); border-left: 1px solid var(--borde-tarjeta); box-shadow: -8px 0 32px rgba(0, 0, 0, .25); } dialog.ficha-carro-despacho::backdrop { background: rgba(14, 17, 19, .18); } .ficha-carro-despacho > header { flex-direction: row-reverse; justify-content: space-between; padding: var(--e2) var(--e2) var(--e2) var(--e4); } .ficha-carro-despacho .solo-telefono { display: none; } .ficha-carro-despacho .solo-escritorio { display: inline; } .ficha-carro-despacho svg.solo-escritorio { display: block; } .ficha-carro-despacho .volver-ficha { width: var(--toque); padding: 0; justify-content: center; } .ficha-carro-despacho .volver-ficha span.solo-escritorio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ficha-carro-despacho #aviso.aviso-oficina { left: auto; right: var(--e4); width: calc(32rem - 2 * var(--e4)); } /* PANEL QUE NO BLOQUEA (14 oct 2026): en escritorio se abre con show() (oficina-despacho.js), sin la capa de encima; z-index lo deja sobre la página y bajo la cabecera pegada no queda (empieza en --alto-pegado). */ #ficha-carro.ficha-carro-despacho:not(:modal) { z-index: 25; } } /* Con sitio (88rem: la columna, la lista y el panel de 32rem caben), lo de detrás deja libre el ancho del panel: la lista sigue entera a la vista y otra fila se toca sin cerrar la ficha. Más estrecho, el panel tapa la derecha de la lista y su parte izquierda sigue viva. */ @media (min-width: 88rem) { /* Relleno y no margen:
es una celda del grid del y su ancho no cede a un margen (medido en Chromium a 1440). */ body.con-ficha-carro main.ancho { padding-right: calc(32rem + var(--e5)); } } } /* El teléfono del chofer: lo que la oficina cambió y su nota (13 oct 2026, tarjetaDelEnvio en chofer.js). "Updated by the office" en tinta con el lápiz, sin color de estado (no traba ni espera: avisa). La nota con su rótulo en negrita, en una caja tranquila (es lo que la oficina le dice). */ @media screen { .envio-editado { display: flex; align-items: center; gap: var(--e2); margin: 0; font-size: 1rem; font-weight: 700; color: var(--tinta); } .envio-editado .icono { flex: none; } .envio-nota { margin: 0; padding: var(--e2) var(--e3); border: 1px solid var(--borde-tarjeta); border-radius: var(--radio-chico); background: var(--hundido); font-size: 1rem; color: var(--tinta); overflow-wrap: anywhere; } .envio-nota-rotulo { font-weight: 700; } } /* "LOG A CAR FOR …" EN EL SITIO (13 oct 2026, fase 1 de la navegación). Desde Drivers, #paso-anotar se abre dentro de dialog#anotar-en-sitio, con el aspecto de Car details (dialog.ficha-carro-despacho: pantalla completa con "Back" en el teléfono, panel de 32rem a la derecha en escritorio). La cabecera del panel ya dice "Log a car for a driver": el h2 del formulario no se repite. Sin borde ni aire propios: el cuerpo del panel ya los da. En @media screen, como todo lo de este final (no se imprime). */ @media screen { .anotar-en-sitio #paso-anotar > h2 { display: none; } .anotar-en-sitio #paso-anotar { margin: 0; padding-bottom: 0; border-bottom: 0; } } /* ========================================================================== DISPATCH › CARS, "ALREADY BOUGHT" Y LA COMPRA EN CAR DETAILS (13 oct 2026, fase 2 de la navegación; el dueño: "sí, un solo lugar" y "sí, todo en New car"). - Cars: el buscador a todo lo ancho, debajo el periodo, el estado y el chofer (las filas de chips de siempre, que se deslizan en el teléfono), y las filas con el dibujo de To send (.carro-despacho con su botón). La etiqueta del estado es la de All cars; "cancelled" (la oficina) en rojo como "not bought". - New car: "Already bought by a driver" es una casilla sola arriba del formulario, con su ayuda debajo. Marcada, el formulario de "Log a car" (#paso-anotar) vive dentro de la misma tarjeta: sin su h2 (la tarjeta ya dice New car y la casilla lo que es) y sin otra tarjeta dentro. - Car details: "The purchase" es una zona más, con los datos en la misma lista de rótulo y dato; las fotos, en fila. En @media screen, como todo lo de este final (no se imprime). ========================================================================== */ @media screen { .carros-despacho { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; } .carros-despacho .titulo-lista-despacho { margin: 0; } .buscar-cars { display: flex; flex-direction: column; } .buscar-cars input { width: 100%; min-height: var(--toque); font-size: 1rem; } .carros-despacho > .rango, .carros-despacho > .filtros { margin: 0; } .carros-despacho > .filtros:empty { display: none; } #estado-cars:empty { display: none; } #cars-lista { display: flex; flex-direction: column; gap: var(--e2); } #cars-lista > .ver-mas, #cars-lista > [data-cars-todas] { align-self: flex-start; } .fila-cars .nombre-despacho { flex: 1 1 auto; min-width: 0; } .fila-cars .linea-despacho .etiqueta { flex: none; } .fila-cars .oferta-despacho { flex: none; margin-left: auto; } .fila-cars .etiqueta.cancelado-oficina { color: var(--rojo-texto); } .fila-cars .numero-carro { font-variant-numeric: tabular-nums; } .fila-cars .chofer-cars { font-weight: 700; color: var(--tinta); } .carros-despacho > .filtros { padding-left: 0; } /* En el teléfono, el número del carro sobra en la fila (está en la ficha): la línea de abajo cabe en dos renglones sin empezar uno con "·". */ @media (max-width: 44rem) { .fila-cars .numero-carro { display: none; } } .fila-cars .fotos-chip { display: inline-flex; gap: 3px; align-items: center; } .fila-cars .linea-despacho.sub > .fotos-chip::before { content: none; } .carro-despacho.fila-cars.comprado { opacity: 1; } /* `label` de la app es una columna (rótulo encima del campo): esta casilla va en fila, la caja a la izquierda y su frase al lado, alineada a la izquierda como el resto del formulario. */ .nuevo-despacho .opcion-ya-comprado { display: flex; flex-direction: column; align-items: stretch; gap: var(--e1); margin: 0 0 var(--e3); padding-bottom: var(--e3); border-bottom: 1px solid var(--linea); text-align: left; } .nuevo-despacho .opcion-ya-comprado[hidden] { display: none; } .nuevo-despacho label.ya-comprado { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--e2); min-height: var(--toque); font-weight: 700; color: var(--tinta); cursor: pointer; } .nuevo-despacho label.ya-comprado::before { content: none; } .nuevo-despacho label.ya-comprado input { width: 22px; height: 22px; min-height: 0; flex: none; margin: 0; padding: 0; accent-color: var(--acento); } .nuevo-despacho #paso-anotar > h2 { display: none; } .nuevo-despacho #paso-anotar { margin: 0; padding: 0; border: 0; } /* Su párrafo de ayuda lo dice ya la ayuda de la casilla, justo encima. */ .nuevo-despacho #paso-anotar > .vacio { display: none; } .nuevo-despacho #form-anotar.tarjeta { padding: 0; border: 0; background: transparent; box-shadow: none; } #despacho-guardado > button { margin-left: var(--e2); } .compra-ficha .fotos-vistas a { width: 5.5rem; height: 4.5rem; background: var(--hundido); } .compra-ficha .checks { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); } } /* LO MANDADO SIN COMPRAR, TOCABLE (13 oct 2026, fase 2 de la navegación). En Home, debajo de la grúa de la flota (fuera de su botón), y en la ficha de Drivers ("Sent, not bought: …"): cada nombre abre Car details. Se ve como un enlace subrayado, como el carro mandado de Assign (.abrir-suyo), con 44 px de alto para el dedo. */ @media screen { /* El li de la grúa es una fila (.flota > li): con los nombres, columna, la grúa arriba y los carros debajo, a lo ancho de su columna. */ .flota > li:has(> .flota-mandados) { flex-direction: column; align-items: stretch; } .flota-mandados { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; min-width: 0; } .abrir-mandado { display: block; width: 100%; min-height: 44px; margin: 0; padding: var(--e2) 2px; text-align: center; line-height: 1.25; background: transparent; border: 0; color: var(--tinta); font: inherit; font-size: .75rem; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; overflow-wrap: anywhere; white-space: normal; } .abrir-mandado:focus-visible { outline: 3px solid var(--foco, var(--acento)); outline-offset: 2px; border-radius: 4px; } .mandados-ficha .abrir-mandado { display: inline; width: auto; min-height: 0; padding: var(--e1) 0; font-size: .875rem; text-align: left; } } /* ========================================================================== AUDITORÍA DE ESCRITORIO (21 OCT 2026) ========================================================================== Un auditor de UI recorrió la app a 1280, 1440 y 1920 en claro y oscuro. Lo de aquí arregla sus hallazgos; el teléfono (390) no cambia: todo lo que es de escritorio va en @media (min-width: 64rem). Medido con Chromium antes y después (scratchpad audit-ui/antes y /despues). */ @media screen { /* 1. HOME: "Pay this week" a media anchura. La tarjeta (button.kpi) y el enlace "Not in this total: … · Pay it ›" (button.kpi-extra) viven en el mismo
, que es flex en fila sin envolver: la tarjeta medía 291 px de los 560 del hueco y el enlace flotaba al lado en tres renglones. En columna, la tarjeta llena el hueco y el enlace va debajo, a la izquierda, con 44 px para el dedo (a 390 el li medía 358 y la tarjeta cabía solo porque el enlace se partía). acomodarColumnas (HOME SIN HUECOS) mide el alto de la tarjeta de fuera y no cambia. */ .kpi-fila > li:has(> .kpi-extra) { flex-direction: column; align-items: stretch; gap: var(--e2); } .kpi-fila > li > .kpi-extra { align-self: flex-start; text-align: left; min-height: 44px; padding: 0 var(--e2); } /* 7. "Which car is this call for?": el título lleva el foco al llegar (como la cabecera de Car details) y el anillo encima de un h2 que no se toca sobraba: el foco se queda, el anillo no. */ .asignar-grabacion h2.display:focus { outline: none; } /* 9. "Dodge Caravan" en "Sent, not bought: …" de la ficha de Drivers medía 28 px de alto. Como `inline` el alto no cuenta: inline-block con 14 px de relleno arriba y abajo y el mismo margen negativo, para que el renglón no crezca (la fila sigue en 28) y el dedo tenga 45. */ .mandados-ficha .abrir-mandado { display: inline-block; padding: 14px 0; margin: -14px 0; } /* 10. AUDIT LOG: cambios() pone `cuadra` (verde) al valor de después y `falta` (rojo) al de antes, las clases del dinero que cuadra o falta. En el registro un valor es un dato, no un estado: "Nissan" en verde decía "hecho" y "To send" en rojo decía "traba". Lo de después en tinta, lo de antes en tinta suave (es lo viejo). Medido: tinta 12.5:1 en oscuro y 16:1 en claro; tinta suave 7.9 / 8.1. */ #auditoria .cuenta td.cuadra { color: var(--tinta); } #auditoria .cuenta td.falta { color: var(--tinta-suave); } /* 9. "6 trips" de la lista de los CDL iba con nowrap: en un hueco corto no cedía y empujaba. Cede y parte (en escritorio la columna es de 5.5rem y "10 trips" cabe en un renglón). */ .cdl-uno-viajes { min-width: 0; white-space: normal; } } /* Todo dentro de @media screen: la hoja impresa no cambia (peso-visual.js). */ @media screen { /* 11. REPORTS › PAY › "Still to pay from earlier weeks" A 390: el nombre del CDL salía en vertical, letra por letra. En esa lista la segunda columna no es "6 trips" sino "Week Sat, Oct 10 – Fri, Oct 16" (199 px): con `minmax(0, 1fr) auto minmax(6.5rem, auto)` en 332 px, la del nombre resolvía a 0 px y la fila medía 266 de alto. En el teléfono la semana va en su propio renglón bajo el nombre y la cifra ocupa los dos; en escritorio la columna de la semana es `auto` (la de 5.5rem de "6 trips" la partía en cuatro renglones). Medido a 390: la fila de 266 a 76 px y el nombre en horizontal. */ @media (max-width: 44rem) { .pago-cdl-antes .cdl-uno { grid-template-columns: minmax(0, 1fr) minmax(6.5rem, auto); row-gap: 2px; } .pago-cdl-antes .cdl-uno-nombre { grid-column: 1; grid-row: 1; } .pago-cdl-antes .cdl-uno-viajes { grid-column: 1; grid-row: 2; } .pago-cdl-antes .cdl-uno-cifra { grid-column: 2; grid-row: 1 / span 2; } } @media (min-width: 44.01rem) { .pago-cdl-antes .cdl-uno { grid-template-columns: minmax(9rem, 14rem) auto minmax(0, 1fr) 9rem; } /* 6. DRIVERS › CDL: la lista, "Pay summary" y el informe tenían tope de 64rem y el héroe, "Add trips from the paper sheet" y los botones no: a 1440 el héroe acababa en x=1416 y la lista en 1304 (112 px antes). Un solo tope para todo lo de la sección (lo de dentro conserva el suyo, que ya no manda): medido a 1440, todo acaba en 1304. */ [data-seccion="cdl"] > section > * { max-width: 64rem; } } @media (min-width: 64rem) { /* 2 y 3. EL RIEL DE DISPATCH › NEW CAR Y DE CASH: pegado (sticky) con `max-height` de la pantalla y su propio scroll, cortaba el formulario de New car (1,693 px en 805 de pantalla a 1440) y "One driver's cash history" (10,194 px) por el pliegue, sin pista de que seguía: ni barra visible ni sombra. En esas dos secciones el riel es lo que se viene a HACER y a LEER, no un panel de apoyo: va con la página, a su alto. El riel de los demás (Pay) sigue pegado. */ [data-seccion="ordenes"] .riel, [data-seccion="efectivo"] .riel { position: static; max-height: none; overflow: visible; } /* 4. BOTONES ESTIRADOS A TODO LO ANCHO: `.acciones > * { flex: 1 }` es la regla del teléfono (dos botones a medias) y en un monitor daba "Save the dates" de 1,112 px, "Copy URL" de 547 y "Call…" de 546. En escritorio un botón mide lo que dice, con 10rem de piso. El riel (23rem) conserva su `width: 100%`; .ficha-carro, .entrega, .confirmar y .confirmar-borrado tienen reglas más específicas y no cambian. */ main .acciones > * { flex: 0 1 auto; min-width: 10rem; } .ficha .contacto > * { flex: 0 1 auto; min-width: 10rem; } /* "Go to this week" del CDL es hijo directo de la sección (flex en columna, estirado): 1,136 px para cinco palabras. */ #cdl-actual { width: auto; align-self: flex-start; } } /* 5. DISPATCH › CARS CON CAR DETAILS ABIERTO ENTRE 1216 Y 1407 px: el panel de 32rem tapaba los chips de filtro y media fila (main solo le deja sitio desde 88rem). Aquí el panel mide 28rem y main le deja el hueco: a 1280, la lista queda en 624 px enteros a la vista (antes el panel la cubría desde x=768). El aviso pasajero del panel sigue dentro de él. */ @media (min-width: 76rem) and (max-width: 87.99rem) { dialog.ficha-carro-despacho { width: 28rem; } body.con-ficha-carro main.ancho { padding-right: calc(28rem + var(--e4)); } .ficha-carro-despacho #aviso.aviso-oficina { width: calc(28rem - 2 * var(--e4)); } } } /* ========================================================================== CHEQUEO DE PIES A CABEZA (21 oct 2026). Reglas nuevas, al final a propósito: otro cambio del mismo día toca el CSS de escritorio más arriba, y así el merge no choca. Si alguna encaja mejor junto a su área, se mueve después. ========================================================================== */ /* Todo dentro de @media screen, como el resto de "CALMA 2": la hoja impresa no cambia (pruebas/peso-visual.js lo mira hasta el final del archivo). */ @media screen { /* 1. "Showing week Oct 3–9 · Back to this week ›" (oficina-cdl.js, pintarSemanaSaltada): el rótulo fijo encima de "Pay each CDL driver" mientras Pay está en una semana a la que se saltó con "Pay ›" de lo pendiente de antes. Una línea, en tinta suave, con el botón en frase. */ .semana-saltada { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); margin: 0 0 var(--e2); padding: var(--e2) var(--e3); border: 1px solid var(--linea); border-left: var(--banda) solid var(--acento); border-radius: var(--radio-chico); background: var(--panel); color: var(--tinta-suave); font-size: .875rem; } .semana-saltada .sep { color: var(--tinta-tenue); } .semana-saltada button.tranquilo { min-height: 0; padding: 0; font-size: inherit; } /* 4. El campo del tip es un CAMPO, no un botón (Reports › Pay › Tips). Con "Tip" de muestra dentro, 16 px de esquina y el mismo alto que "Save", la pastilla se leía como un botón "Tip". Esquina de 6 px (ni la píldora del botón ni la tarjeta), borde y fondo de campo, la muestra "0.00" pegada a la derecha como la cifra que se escribe, y en peso normal (la cifra escrita va en 600: así lo escrito se distingue de la muestra). A 390 la fila sigue en su rejilla (área "tip"); a 1440, en su flex. */ #principal [data-seccion="semana"] .fila-tip .poner input[data-tip-de] { border-radius: 6px; border: 1px solid var(--linea-fuerte); background: var(--campo-fondo, var(--fondo)); text-align: right; padding-right: var(--e3); } #principal [data-seccion="semana"] .fila-tip .poner input[data-tip-de]::placeholder { color: var(--tinta-tenue); font-weight: 400; text-align: right; } } /* LOS LUGARES SIN PRECIO DE LOS CDL (22 oct 2026, pedido del dueño: "el jefe debe poder poner los precios de ese lugar que no tiene registrado"). Una tarjeta bajo la cifra de Drivers › CDL y sobre "Pay each CDL driver" en Reports › Pay: un lugar por fila, con su nombre, sus viajes y su campo de precio. En el teléfono la fila es una columna (nombre, campo, casilla, botón); desde 40rem el campo y el botón van en una línea. Todo con los colores de la app: nada de amarillo suelto (el amarillo es lo que se toca). */ @media screen { .sin-precio-cdl:not([hidden]) { display: flex; flex-direction: column; gap: var(--e3); margin: 0 0 var(--e4); padding: var(--e4); background: var(--panel); border: 1px solid var(--borde-tarjeta); border-left: var(--banda, 4px) solid var(--espera, var(--acento)); border-radius: var(--radio); } .sin-precio-cdl h3 { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--tinta); } .sin-precio-cdl p { margin: 0; color: var(--tinta-suave); font-size: .875rem; } .sin-precio-cdl .lsp-hecho { color: var(--tinta); font-weight: 600; } .sin-precio-cdl ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); } .sin-precio-cdl form { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3); background: var(--marco); border-radius: var(--radio-chico); } .sin-precio-cdl .lsp-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e3); } .sin-precio-cdl .lsp-cabeza strong { font-size: 1rem; color: var(--tinta); overflow-wrap: anywhere; } .sin-precio-cdl .lsp-viajes { font-size: .875rem; color: var(--tinta-suave); } .sin-precio-cdl .lsp-campos { display: flex; flex-direction: column; gap: var(--e2); } .sin-precio-cdl .lsp-campos label { display: flex; flex-direction: column; gap: var(--e1); font-size: .875rem; font-weight: 600; } .sin-precio-cdl .lsp-campos label.lsp-casilla { flex-direction: row; align-items: center; gap: var(--e2); min-height: 44px; font-weight: 400; } .sin-precio-cdl .lsp-campos label.lsp-casilla input { width: 1.5rem; height: 1.5rem; flex: none; } .sin-precio-cdl .lsp-campos button { min-height: 44px; } .sin-precio-cdl .error-campo:empty { display: none; } .sin-precio-cdl .lsp-oficina { color: var(--tinta); font-weight: 600; } @media (min-width: 40rem) { .sin-precio-cdl .lsp-campos { flex-direction: row; flex-wrap: wrap; align-items: flex-end; } .sin-precio-cdl .lsp-campos label:not(.lsp-casilla) { width: 11rem; } .sin-precio-cdl .lsp-campos label.lsp-casilla { flex: 1 1 16rem; } } } /* ========================================================================== LOS REPARTIDORES DE VOLANTES (22 oct 2026, el dueño: "una nueva sección para la gente que camina dejando los flyers"). Tres piezas: 1. EL TELÉFONO (public/flyers.html, `body.una-mano`, como el del CDL): el reloj de hoy grande (la cosa grande de la pantalla), el estado en una línea, la semana en renglones que se tocan para corregir un día, y abajo, bajo el pulgar, UN botón: "Start walking" amarillo de 64 px o, caminando, "Stop walking" del mismo alto con borde crema sobre carbón (se ve de un vistazo en qué estado está, y el amarillo no se gasta en dos cosas). 2. LA HOJA DEL DUEÑO (Drivers › Flyers): una tabla por grupo como su Excel. `table-layout: fixed` con las mismas columnas en cada grupo, para que las horas de un grupo caigan bajo las del otro. Lo que se toca (una hora, un peaje) es una celda en `--dentro` con radio de control (16), nunca una píldora con borde (eran 63 píldoras a 1440 y se leía como un formulario de botones). En una pantalla estrecha la tabla se desliza DENTRO de su caja: la página no se corre. 3. PAY: "Flyers pay this week", una fila por persona (nombre y lo que se le paga, la cifra a la derecha, "Mark paid" al final). Todo dentro de @media screen: la hoja impresa usa las reglas de siempre (.hoja-pago, .carros-hoja). ========================================================================== */ @media screen { /* 1. El teléfono. La barra de abajo como la del CDL (#control-cdl). */ #control-flyers { padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom, 0px)); } /* Los tamaños, de la escala de cinco de "CALMA 2" (32, 20, 16, 14, 12): pruebas/peso-visual.js la mira en todo lo que está debajo de ese bloque. */ #caminar { min-height: 4rem; font-size: 1.25rem; letter-spacing: 0; } #caminar[data-accion="parar"] { background: transparent; color: var(--crema); border: 2px solid var(--crema); font-weight: 700; } @media (hover: hover) { #caminar[data-accion="parar"]:hover { background: rgba(232, 228, 218, .08); color: var(--crema); border-color: var(--crema); } } body.una-mano:has(#control-flyers:not([hidden])) .aviso-flotante { bottom: calc(var(--alto-control, 5rem) + var(--e2)); } body.una-mano:has(#control-flyers:not([hidden])) main { padding-bottom: calc(var(--alto-control, 5rem) + 5.5rem); } body.una-mano:has(#control-flyers:not([hidden])) .sin-red { bottom: var(--alto-control, 5rem); } body.una-mano:has(#control-flyers:not([hidden])):has(.sin-red:not([hidden])) .aviso-flotante { bottom: calc(var(--alto-control, 5rem) + 4.25rem); } #seccion-hoy, #seccion-semana { margin-bottom: var(--e4); } #t-hoy:focus { outline: none; } #t-hoy:focus-visible { outline: 3px solid var(--foco, var(--acento)); outline-offset: 2px; } .reloj-flyers { margin: var(--e2) 0 0; font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--tinta); letter-spacing: -.01em; } .estado-flyers { margin: var(--e1) 0 var(--e3); font-size: 1rem; font-weight: 600; color: var(--tinta-suave); } /* Caminando: la misma línea en tinta con un punto delante (el estado con forma y palabra, no solo con color). */ .estado-flyers.caminando { color: var(--tinta); } .estado-flyers.caminando::before { content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .45em; border-radius: 50%; background: currentColor; vertical-align: .05em; } .escribir-flyers { width: 100%; min-height: var(--toque); } .olvido-flyers { margin: 0 0 var(--e3); } .form-horas { margin-top: var(--e3); display: flex; flex-direction: column; gap: var(--e3); } .form-horas .montos-rapidos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e2); } .form-horas .montos-rapidos button { min-height: 48px; padding: 0 var(--e1); } .total-semana-flyers { margin: var(--e1) 0 var(--e3); font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; } .dias-flyers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); } /* Un día, un renglón: el nombre a la izquierda, las horas a la derecha y debajo la marca (escrito a mano, caminando, se olvidó de parar). Tocable (button) si todavía se puede cambiar; quieto (li) si la semana se pagó. */ .dias-flyers .dia-flyers { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n h" "m m"; align-items: center; column-gap: var(--e3); row-gap: 2px; width: 100%; min-height: 56px; margin: 0; padding: var(--e2) var(--e3); text-align: left; font: inherit; color: var(--tinta); background: var(--dentro, var(--hundido)); border: 1px solid transparent; border-radius: var(--radio-chico); box-shadow: none; } .dias-flyers li.dia-flyers { list-style: none; } .dias-flyers button.dia-flyers { cursor: pointer; } @media (hover: hover) { .dias-flyers button.dia-flyers:hover { border-color: var(--borde-boton); } } .dias-flyers .dia-flyers.hoy { border-color: var(--tinta); } .dia-flyers .nombre-dia { grid-area: n; font-weight: 600; } .dia-flyers .horas-dia { grid-area: h; font-weight: 700; font-variant-numeric: tabular-nums; } .dia-flyers .horas-dia.cero { font-weight: 400; color: var(--tinta-tenue); } .dia-flyers .marca-dia { grid-area: m; font-size: .875rem; font-weight: 400; color: var(--tinta-suave); } .dia-flyers .marca-dia.olvido { font-weight: 600; color: var(--rojo-texto); } /* 2. La hoja del dueño. Tres partes en Drivers: el conmutador crece para que "Tow trucks" no parta en dos renglones (con 22rem partía). */ @media (min-width: 64rem) { .partes-gente:has(button[data-panel="flyers"]:not([hidden])) { width: 30rem; } } .partes-gente button { white-space: nowrap; } .acciones-flyers { justify-content: flex-start; flex-wrap: wrap; gap: var(--e3); margin: var(--e4) 0; } .acciones-flyers > * { flex: none; } #flyers-heroe .heroe-cifra { margin: var(--e1) 0 var(--e3); font-size: 2rem; font-weight: 700; line-height: 1.1; } /* Las tres cifras de apoyo en una fila también en el teléfono: son cortas ("146.07", "7", "3 of 7") y apiladas empujaban la hoja dos pantallas abajo. */ #flyers-heroe .kpi-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); } .grupo-flyers { margin: 0 0 var(--hueco-seccion, 2rem); } .grupo-flyers .titulo-lista { display: flex; align-items: baseline; gap: var(--e2); margin: 0 0 var(--e2); font-size: 1.25rem; } .grupo-flyers .titulo-lista .cuantos { font-size: 1rem; font-weight: 600; color: var(--tinta-suave); } .tabla-flyers-caja { overflow-x: auto; max-width: 100%; border-radius: var(--radio-chico); } .tabla-flyers-caja:focus-visible { outline: 3px solid var(--foco, var(--acento)); outline-offset: 2px; } .tabla-flyers { width: 100%; min-width: 46rem; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; } .tabla-flyers th, .tabla-flyers td { padding: 4px 6px; vertical-align: middle; } .tabla-flyers thead th { font-size: .875rem; font-weight: 600; color: var(--tinta-suave); border-bottom: 2px solid var(--linea); text-align: left; } /* El nombre ancho y el total con sitio para "1,100.00" en negrita; el resto se reparte igual. */ .tabla-flyers thead th:first-child { width: 16%; } .tabla-flyers thead th:last-child { width: 6.5rem; } .tabla-flyers .n { text-align: right; } .tabla-flyers abbr { text-decoration: none; } .tabla-flyers .fecha-cab { display: block; font-size: .75rem; font-weight: 400; } .tabla-flyers tbody tr { border-bottom: 1px solid var(--linea); } .tabla-flyers tbody th { text-align: left; font-weight: 600; overflow-wrap: anywhere; } .tabla-flyers tbody th .chip-estado { display: flex; width: fit-content; margin-top: 4px; } .tabla-flyers .nombre-flyers { display: block; } .tabla-flyers .nota-celda { display: block; font-size: .75rem; color: var(--tinta-suave); } .tabla-flyers tfoot th, .tabla-flyers tfoot td { border-top: 2px solid var(--tinta-suave); font-weight: 700; padding-top: var(--e2); text-align: right; } .tabla-flyers tfoot th { text-align: left; } .tabla-flyers tr.pagada td { color: var(--tinta-suave); } /* Lo que se toca: una celda, no un botón píldora. */ .tabla-flyers .celda-flyers { display: block; width: 100%; min-height: 44px; margin: 0; padding: 0 var(--e2); text-align: right; font: inherit; font-weight: 600; color: var(--tinta); background: var(--dentro, var(--hundido)); border: 1px solid transparent; border-radius: var(--radio-chico); box-shadow: none; cursor: pointer; } @media (hover: hover) { .tabla-flyers .celda-flyers:hover { border-color: var(--borde-boton); } } .tabla-flyers .celda-flyers:focus-visible { outline: 3px solid var(--foco, var(--acento)); outline-offset: 1px; } .tabla-flyers .olvido-celda { margin-right: 4px; font-weight: 700; color: var(--rojo-texto); } .tabla-flyers .corre-celda { margin-right: 4px; font-size: .75rem; color: var(--tinta); } .tabla-flyers .fila-editor-flyers td { padding: var(--e3); background: var(--dentro, var(--hundido)); text-align: left; } .editor-flyers { display: flex; flex-direction: column; gap: var(--e3); max-width: 40rem; } .editor-flyers .titulo-editor { margin: 0; font-weight: 700; } .editor-flyers .par { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--e3); } .editor-flyers .acciones { justify-content: flex-start; } .editor-flyers .acciones > * { flex: none; } .total-flyers { margin: 0 0 var(--e4); font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* 3. Pay: "Flyers pay this week". */ .pago-flyers-grupo { margin: 0 0 var(--e4); } .pago-flyers-grupo .cabeza-grupo { display: flex; justify-content: space-between; gap: var(--e3); margin: 0; padding: 0 0 var(--e2); font-size: 1rem; font-weight: 700; border-bottom: 2px solid var(--linea); font-variant-numeric: tabular-nums; } .lista-pago-flyers { list-style: none; margin: 0; padding: 0; } .fila-pago-flyers { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "q c" "a a"; align-items: center; gap: var(--e1) var(--e3); padding: var(--e2) 0; border-bottom: 1px solid var(--linea); } @media (min-width: 48rem) { .fila-pago-flyers { grid-template-columns: minmax(0, 1fr) 8rem 16rem; grid-template-areas: "q c a"; } } .fila-pago-flyers .quien-pago { grid-area: q; display: flex; flex-direction: column; min-width: 0; } .fila-pago-flyers .quien-pago .nombre { font-weight: 600; } .fila-pago-flyers .quien-pago .detalle { font-size: .875rem; color: var(--tinta-suave); } .fila-pago-flyers .n { grid-area: c; text-align: right; font-variant-numeric: tabular-nums; } .fila-pago-flyers .accion-pago { grid-area: a; display: flex; align-items: center; justify-content: flex-end; gap: var(--e2); flex-wrap: wrap; } .fila-pago-flyers .accion-pago button { min-height: 44px; } .fila-pago-flyers.pagada .n { color: var(--tinta-suave); } } /* REPORTS SIEMPRE EN HOY (22 oct 2026, el dueño: "cuando estemos en Reports, que siempre se marque en el día de hoy"). Dos piezas: 1. La línea de Pay que dice dónde se está respecto a hoy (#reports-hoy): "Today · Wed, Oct 21 · 12 cars so far" o, en otra semana, "Showing week … · Back to today ›" (esta última con un filo amarillo a la izquierda: es lo que no debe pasar desapercibido el viernes). 2. La insignia "Today" (.marca-hoy) en la cabecera de cada día de hoy (Tips, carros), en las filas de Cash y en la semana de Sources. SIEMPRE con la palabra: el color solo no lo lee quien no distingue el amarillo ni el lector de pantalla. La fila de hoy, además, un filo a la izquierda (tampoco solo color: es un segundo indicio de posición). Colores del par acento/sobre-acento (12:1, ya medido en tema.js), así que valen igual en claro y oscuro. Solo en pantalla: el papel no los lleva. */ @media screen { .reports-hoy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); margin: 0 0 var(--e3); min-height: 44px; font-size: 1rem; line-height: 1.3; color: var(--tinta); } .reports-hoy[hidden] { display: none; } .reports-hoy .rotulo-hoy { font-weight: 600; } /* Los botones de la línea: de 44 px para el dedo, sin ocupar un renglón entero a 390. */ .reports-hoy button { flex: none; min-height: 44px; } .reports-hoy.saltada { padding: var(--e2) var(--e3); border-radius: 8px; background: var(--hundido); box-shadow: inset 4px 0 0 var(--acento); } .marca-hoy { display: inline-block; flex: none; margin-right: var(--e2); padding: 1px var(--e2); border-radius: 999px; background: var(--acento); color: var(--sobre-acento); font-family: var(--letra); font-size: .75rem; font-weight: 700; line-height: 1.5; vertical-align: middle; white-space: nowrap; } /* En el título de un día y en una fila de Cash, la insignia va pegada al texto, no a la cifra. */ button.dia-carros.es-hoy { box-shadow: inset 4px 0 0 var(--acento); } button.dia-carros.es-hoy .nombre { align-items: center; } tr.es-hoy > th, tr.es-hoy > td { background: var(--hundido); } tr.es-hoy > th { box-shadow: inset 4px 0 0 var(--acento); } .entrega .espera .marca-hoy { margin-right: var(--e2); } /* Con el salto del "Pay ›" de un CDL, la línea de arriba y la de junto al bloque CDL dicen lo mismo: si la de arriba está a la vista (vigilarReportsHoy, oficina.js), la de abajo cede (fusión del 22 oct 2026). */ body.reports-hoy-a-la-vista #pago-semana-saltada { display: none; } } /* ========================================================================== NEW CAR: LA TAREA EN LA COLUMNA ANCHA (rediseño del 22 oct 2026, fase D; ui-auditoria 3.3 y 13, usuario simulado fricción 8). Hasta hoy el formulario iba en el riel de la derecha (23 a 26rem) y "To send" se llevaba la columna ancha: la tarea de la pantalla quedaba en la columna secundaria. Ahora, desde 64rem, al revés: el formulario (y "Recordings to assign", que va con él) a la izquierda con un ancho de formulario (44rem), y "To send" en el riel de la derecha (20 a 28rem: una tarjeta de carro nunca bajo 320 px). Lo que sobra a 2000 px queda a la derecha de todo, no entre las dos (era la regla "DISPATCH EN UN MONITOR ANCHO" del mismo día, que esta reemplaza). El HTML no cambia de orden: en el teléfono lo que se HACE sigue arriba (EL RIEL, más arriba en esta hoja). ========================================================================== */ @media screen { @media (min-width: 64rem) { .con-riel.despacho { grid-template-columns: minmax(0, 44rem) minmax(20rem, 28rem); justify-content: start; } .con-riel.despacho > .riel { grid-column: 1; } .con-riel.despacho > .lo-principal { grid-column: 2; } /* El riel de 23rem apilaba los botones a todo lo ancho; en la columna ancha un botón mide lo que dice, como en el resto del escritorio. */ .con-riel.despacho > .riel .acciones { flex-direction: row; } .con-riel.despacho > .riel .acciones > * { width: auto; } } /* "SAVE THE CAR" SIEMPRE A LA VISTA: pegado al pie de la pantalla mientras el formulario pasa por ella (sticky dentro de su form: al acabar el formulario, se queda en su sitio). Fondo de la tarjeta y una raya arriba, para que lo que pasa por debajo no se lea a través. En el teléfono, encima de la barra de secciones (64 px, como el aviso). */ #form-despacho > .guardar-nuevo { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 3; margin: 0; padding: var(--e3) 0; background: var(--panel); border-top: 1px solid var(--linea); } @media (min-width: 64rem) { #form-despacho > .guardar-nuevo { bottom: 0; } } /* "More details": el pliegue de New car con lo que se pone pocas veces. La pista de lo que guarda, en gris y en su renglón. */ .mas-nuevo > summary { flex-wrap: wrap; column-gap: var(--e2); } .mas-nuevo .pista-mas-nuevo { font-size: .875rem; font-weight: 400; color: var(--tinta-suave); } .mas-nuevo[open] { display: flex; flex-direction: column; gap: var(--e2); } /* "Already bought by a driver", ahora al pie: la raya va encima (separa otra tarea), no debajo. */ .nuevo-despacho .opcion-ya-comprado { margin: var(--e3) 0 0; padding: var(--e3) 0 0; border-bottom: 0; border-top: 1px solid var(--linea); } } /* ========================================================================== CAR DETAILS A 1440 SIN APLASTAR LO DE DEBAJO (rediseño del 22 oct 2026, fase D; usuario simulado fricción 5). Con el panel abierto, `main` dejaba libre su ancho (padding-right, desde 88rem): Assign pasaba a dos columnas de 296 px ("2009 / Nissan / Altima" en tres renglones) y New car a una lista de 180 px con el texto fuera de las tarjetas. En Assign y New car, hasta 110rem (1,760 px), el panel va ENCIMA de la página (el mismo panel que no bloquea: la lista de carros de la izquierda sigue viva y otra fila cambia de carro); desde 110rem hay sitio para todo y vuelve a dejar su hueco (a 2000, dos columnas de unos 500 px). Cars (una lista de una columna) sigue como estaba. ========================================================================== */ @media screen { @media (min-width: 64rem) and (max-width: 109.99rem) { body.con-ficha-carro main.ancho:has([data-seccion="ordenes"]:not([hidden]) :is([data-parte="asignar"], [data-parte="nuevo"]):not([hidden])) { padding-right: var(--e5); } } } /* "Didn't happen – Pedro Solis" en una fila de Assign (fase D, fricción 10): en negrita y rojo dentro del botón de elegir el carro, el nombre del chofer parecía otro sitio que tocar. Es un dato del carro: rojo de aviso, peso normal. */ @media screen { .linea-asignar.sub .no-paso { font-weight: 400; } } /* CAR DETAILS (fase D): "Change" junto a la cita, su editor debajo de los datos, y "Cancel this car" aparte, al pie, con su raya (ficha-zona). La cita y su botón en un renglón que se parte si no cabe; el botón con su alto de toque, en voz baja (no es la acción de la ficha). */ @media screen { .dato-ficha dd:has(> .cambiar-cita) { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e2); } .dato-ficha .cambiar-cita { min-height: var(--toque); padding: 0 var(--e2); } .cita-ficha { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--linea); } .cita-ficha[hidden] { display: none; } .cancelar-ficha > .cancelar-despacho { align-self: flex-start; } /* La línea de lo que dijo Send o Take back, vacía, no deja un hueco entre zonas. */ .ficha-carro-cuerpo > .ayuda-campo:empty { display: none; } } /* "Attached to … · Undo" (fase D, fricción 10): la frase y su botón en una fila, el botón del alto de un toque. El aviso flotante no recibe toques (.aviso-oficina, pointer-events: none): el que lleva Undo sí. */ @media screen { .aviso-local.con-deshacer, #aviso .aviso.con-deshacer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e1) var(--e3); } :is(.aviso-local, .aviso).con-deshacer > button { min-height: var(--toque); padding: 0 var(--e3); flex: none; } #aviso.aviso-oficina .con-deshacer { pointer-events: auto; } } /* ========================================================================== "LISTEN" EN ASSIGN (22 oct 2026, el dueño: "mejor deja escuchar la llamada al momento de asignarla al chofer para así poder verificar de qué carro es"). Un botón más en la columna de "Details ›", con la misma voz tranquila (no es la acción de la pantalla: la amarilla sigue siendo "Send"); abierto dice "Hide", sin otro color. El reproductor va debajo de la fila, a todo su ancho (en el teléfono, entre el carro y los choferes con lugar), con el mismo bloque que la ficha. ========================================================================== */ @media screen { .carro-asignar .escuchar-asignar-caja { grid-column: 1 / -1; padding: var(--e2) var(--e3) var(--e3); border-top: 1px solid var(--linea); align-items: stretch; } .carro-asignar .escuchar-asignar-caja audio { max-width: none; min-height: 44px; } .carro-asignar .escuchar-asignar-caja .aviso-local { margin: 0; } .carro-asignar .escuchar-asignar-caja .bajar-grabacion { align-self: flex-start; } } /* ========================================================================== LA TARIFA POR HORA EN LA HOJA DE FLYERS (22 oct 2026, el dueño: "que el jefe ponga cuánto se paga la hora de la gente que camina"). La tarifa ya existía en Settings › Users y no la encontró: ahora se pone donde la mira. - La columna "Hr rate" del dueño es un poco más ancha que la de un día: lleva "21.50" o "Set" en un botón de celda (.celda-flyers, como las horas y los peajes), y a 46rem de tabla los días quedan en ~43px. - El chip "No rate" se toca: sigue gris con el reloj (lo que espera), con borde de control y 44px de alto para que se lea y se toque como botón. - El editor de una fila (horas, peajes, tarifa) se queda pegado al borde izquierdo de la caja que se desliza: en el teléfono la tabla mide 46rem y, sin esto, el formulario quedaba medio fuera de la pantalla. ========================================================================== */ @media screen { .tabla-flyers thead th.col-tarifa { width: 5rem; } .tabla-flyers .celda-flyers.sin-tarifa { color: var(--espera); text-decoration: underline; text-underline-offset: 3px; } .tabla-flyers tbody th button.chip-tarifa { min-height: var(--toque, 44px); margin-top: 4px; font-family: inherit; border: 1px solid var(--borde-boton); box-shadow: none; cursor: pointer; } @media (hover: hover) { .tabla-flyers tbody th button.chip-tarifa:hover { border-color: var(--tinta); } } .tabla-flyers tbody th button.chip-tarifa:focus-visible { outline: 3px solid var(--foco, var(--acento)); outline-offset: 1px; } .tabla-flyers .fila-editor-flyers .editor-flyers { position: sticky; left: var(--e3); max-width: min(40rem, calc(100vw - 4rem)); } #flyers-heroe .aviso-sin-tarifa .enlace { margin-inline-start: .25em; font-weight: 600; } } /* ========================================================================== VARIAS LLAMADAS POR CARRO (22 oct 2026, el dueño: "aunque ya se le asignó llamadas y el carro ya está con chofer, se le pueda agregar nuevos audios a ese carro"). Tres sitios, la misma lista: en Car details cada llamada en su renglón (número, título, quién y cuándo, su reproductor y su "Remove"), en Assign la lista compacta que abre "Listen (2)", y en el teléfono del chofer "2 calls from the office" con un botón grande por llamada. Las rayas finas separan una de otra sin hacer tarjetas dentro de la tarjeta; nada amarillo: el amarillo sigue siendo la acción de cada pantalla ("Add the recording" sin ninguna, "Send", "I bought it"). ========================================================================== */ @media screen { /* El número junto al micrófono de la fila (2 o más), en chico y en tinta. */ .con-grabacion .cuantas-grabaciones { margin-left: 2px; font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinta); } /* Car details: la lista. */ .lista-grabaciones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-self: stretch; } .una-grabacion { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2); padding: var(--e3) 0; min-width: 0; } .una-grabacion + .una-grabacion { border-top: 1px solid var(--linea); } .lista-grabaciones:not(.varias) .una-grabacion { padding-top: 0; } .una-grabacion audio { align-self: stretch; } .cabeza-grabacion { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .titulo-grabacion { margin: 0; font-size: 1rem; color: var(--tinta); overflow-wrap: anywhere; } .numero-grabacion { font-weight: 700; } .nombre-grabacion { color: var(--tinta-suave); } .quien-grabacion { margin: 0; font-size: .875rem; color: var(--tinta-suave); } .una-grabacion .quitar-grabacion { min-height: var(--toque); } .una-grabacion .quitar-grabacion.peligro { color: var(--rojo-texto); } .ficha-carro-cuerpo .otra-grabacion { margin-top: var(--e1); } /* Assign: "Listen (2)" abre la lista compacta, una llamada por renglón. */ .lista-escuchar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); } .una-escuchar { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; } .una-escuchar + .una-escuchar { padding-top: var(--e3); border-top: 1px solid var(--linea); } .cabeza-escuchar { margin: 0; font-size: .875rem; color: var(--tinta-suave); } .cabeza-escuchar .numero-grabacion { color: var(--tinta); } .una-escuchar audio { width: 100%; max-width: none; min-height: 44px; } /* El teléfono: "2 calls from the office", un botón grande por llamada. */ .envio-llamadas { display: flex; flex-direction: column; gap: var(--e2); } .envio-llamadas-titulo { margin: 0; font-size: 1rem; font-weight: 700; color: var(--tinta); } .envio-llamadas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); } .envio-llamada { display: flex; flex-direction: column; gap: var(--e1); } .envio-llamada-cabeza { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); font-size: .875rem; color: var(--tinta-suave); } .envio-llamada-cabeza b { color: var(--tinta); } .chapa-llamada-nueva { padding: .1rem .45rem; font-size: .875rem; font-weight: 700; background: var(--tinta); color: var(--fondo); } } /* ========================================================================== REDISEÑO DEL 22 OCT 2026, FASE B: LOS TRES TELÉFONOS (grúa, CDL y flyers) El dueño: "una mejora al diseño en cuanto a jerarquía visual, diagramación, pesos visuales". Los teléfonos ya funcionaban (usuarios simulados: chofer 4/5, CDL 5/5, flyers 4-5/5), así que aquí solo va CSS pequeño y seguro, todo bajo `body.una-mano` (las tres pantallas y nada de la oficina) y dentro de `@media screen` (la hoja impresa no cambia). Va detrás de CALMA 2: la escala de cinco tamaños de pruebas/peso-visual.js, más un paso propio del teléfono, la CIFRA DE CAMPO (3.25rem, 52 px). Medido a 390 en Chromium; antes/después en scratchpad/capturas/fase-b-*. ========================================================================== */ @media screen { /* 1. LA CIFRA DE CAMPO: UNA CIFRA GRANDE POR PANTALLA, Y SIEMPRE DEL MISMO TAMAÑO. Antes cada una medía con la ventana (clamp y vw) y con otra regla: el efectivo por contar de Today 41.6 px, el de My cash 66.3 y el reloj de los flyers 32. Ahora las tres a 52 (el "$" y los centavos van en em, encogen con ella) y en 700: el 800 sobraba con este tamaño. */ body.una-mano #por-confirmar .dato.mayor .valor, body.una-mano .sangrada, body.una-mano #caja .sangrada, body.una-mano .reloj-flyers { font-size: 3.25rem; font-weight: 700; line-height: 1.05; } /* 2. UNA ESCALA: EL TÍTULO DE UNA ZONA A 20/700 Y LA FILA QUE SE ABRE A 16/700. "From the office", "Where did you drop it?" y "Today · Thu" iban a 20.8/600 y el nombre del carro, que va DENTRO de esa zona, le ganaba (22.4/800). "This week" y "My account" del CDL y de los flyers eran h2 de 20.8 y el "My account" del chofer, de 16: el mismo pliegue con dos tamaños. Ahora: zona 20, carro 20, pliegue 16, en los tres teléfonos. */ body.una-mano .titulo-vista { font-size: 1.25rem; font-weight: 700; } body.una-mano .plegado-semana > summary .titulo-plegado, body.una-mano .mi-cara-plegada > summary { font-size: 1rem; font-weight: 700; } body.una-mano .carro-chofer h3.envio-carro { font-size: 1.25rem; font-weight: 700; } body.una-mano .envio-oferta, body.una-mano .envio-direccion { font-size: 1rem; } /* Los lugares del CDL, sin 800 (eran los doce textos en 800 de la pantalla), y el nombre ARRIBA de su tarjeta, bajo el renglón del contador: apoyado abajo, "Allied" (una línea) empezaba más abajo que "EMR Baby Yard" (tres) en la misma fila, y la rejilla se leía torcida. */ body.una-mano button.destino .nombre, body.una-mano button.destino.otro { font-weight: 700; } body.una-mano button.destino:not(.otro) .nombre { align-self: start; } /* 3. LOS BOTONES, 56 Y 48. 56 para la acción de una zona ("Save the car", "Save hours"); 48 para lo demás. "How this works" del CDL y de los flyers medía 44, bajo el mínimo del teléfono (pruebas/una-mano.js). */ body.una-mano .mas-del-carro > button[data-accion="comprar"], body.una-mano .form-horas button[type="submit"] { min-height: 56px; } body.una-mano .ayuda-plegable > summary { min-height: 48px; } /* 4. "SAVE THE CAR" SIEMPRE A MANO. Con varias fotos el formulario de "I bought it" pasaba de unos 1,300 a 2,527 px y el botón quedaba al fondo (Juan, 22 oct). Ahora va pegado abajo, sobre la barra del día, mientras se baja por la tarjeta abierta, como Back/Next de "Log a car" (.pie-paso). Tocarlo antes de tiempo no guarda nada: dice arriba lo que falta, con un enlace a cada cosa (faltasDeLaCompra). La sombra del color del panel tapa lo que pasa por detrás a su alrededor. */ body.una-mano .mas-del-carro > button[data-accion="comprar"] { position: sticky; bottom: calc(var(--alto-control, 4rem) + var(--e2)); z-index: 2; box-shadow: 0 0 0 var(--e2) var(--panel); } /* 5. LAS FOTOS YA TOMADAS, EN REJILLA DE DOS. Cada foto era una fila de unos 180 px (la miniatura y, al lado, "Retake", "Retake from phone" y "Remove" uno encima del otro), y cada "Add another photo" otra de 120: con dos del carro y dos del título, 2,527 px. Ahora la que FALTA sigue a todo el ancho, con "Take photo" y "Choose from phone" en palabras (es lo que hay que hacer); las tomadas y los "Add another photo" van de dos en dos: la miniatura arriba y debajo la cámara y la galería, de 48 px y con su icono (la palabra sigue ahí para el lector de pantalla). "Remove" va entero y con su palabra: su segundo toque dice "Tap again to remove" y eso tiene que leerse. Tocar la miniatura sigue volviendo a tomar la foto (es la etiqueta de la cámara). Lo que se guarda no cambia: son los mismos campos y botones, solo colocados de otra manera. El selector largo dice "una celda que no es la foto que falta" (sin `.pendiente` que no sea `.otra`): sin clase nueva, chofer.js no cambia. */ body.una-mano .mas-del-carro .fotos:has(> .foto-con-opciones) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } body.una-mano .mas-del-carro .fotos > .foto-con-opciones:has(> .hueco-foto.pendiente:not(.otra)) { grid-column: 1 / -1; } body.una-mano .mas-del-carro .fotos > .foto-con-opciones:not(:has(> .hueco-foto.pendiente:not(.otra))) { grid-template-columns: minmax(0, 1fr); } body.una-mano .mas-del-carro .fotos > .foto-con-opciones:not(:has(> .hueco-foto.pendiente:not(.otra))) > .hueco-foto { min-height: 0; aspect-ratio: 4 / 3; } body.una-mano .mas-del-carro .fotos > .foto-con-opciones:not(:has(> .hueco-foto.pendiente:not(.otra))) > .opciones-foto { flex-direction: row; flex-wrap: wrap; } body.una-mano .mas-del-carro .fotos > .foto-con-opciones:not(:has(> .hueco-foto.pendiente:not(.otra))) .boton-foto:not(.quitar-foto) { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0; } body.una-mano .mas-del-carro .fotos > .foto-con-opciones:not(:has(> .hueco-foto.pendiente:not(.otra))) .boton-foto:not(.quitar-foto) > span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } body.una-mano .mas-del-carro .fotos > .foto-con-opciones:not(:has(> .hueco-foto.pendiente:not(.otra))) .boton-foto:not(.quitar-foto) .icono { width: 1.25rem; height: 1.25rem; } body.una-mano .mas-del-carro .fotos > .foto-con-opciones:not(:has(> .hueco-foto.pendiente:not(.otra))) .quitar-foto { flex: 1 1 100%; min-height: 48px; } /* 6. "HOW MUCH DID YOU PAY?" EN DOS FILAS DE TRES. Desde el 22 oct las cifras son seis (lo ofrecido, 50 y 100 menos; y 200, 150 y 100 por debajo: cifrasDePagado en chofer.js). Sueltas partían 4 + 2 y "Paid" quedaba solo con la primera fila. En rejilla: "Paid" a la izquierda de las dos filas, arriba lo de cerca de lo ofrecido y abajo lo bajo; cada cifra en el mismo sitio en todos los carros. */ body.una-mano #rapidos-pagado, body.una-mano .carro-envio .montos-rapidos:not(.partes-rapidas) { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: center; } body.una-mano #rapidos-pagado[hidden] { display: none; } body.una-mano #rapidos-pagado:has(> button.rapido:nth-of-type(4)) > .rotulo-rapidos, body.una-mano .carro-envio .montos-rapidos:not(.partes-rapidas):has(> button.rapido:nth-of-type(4)) > .rotulo-rapidos { grid-row: span 2; } /* 7. MY ACCOUNT, LA FILA DEL TEMA CON SU RAYA, como la del PIN encima (es otra .mi-cuenta, fuera de la que pinta htmlMiCuenta). */ body.una-mano .mi-cuenta.tema-cuenta { border-top: 1px solid var(--linea); } /* 8. LAS HORAS DE LOS FLYERS, DE 4 h A 8 h EN UNA FILA. La regla de la rejilla de cinco (.form-horas .montos-rapidos) perdía contra la de `body.una-mano .montos-rapidos` (flex, más fuerte) y "8 h" caía solo a una segunda fila a todo el ancho: el botón más grande era el menos especial. */ body.una-mano .form-horas .montos-rapidos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } body.una-mano .form-horas .montos-rapidos button { padding: 0; } } /* ========================================================================== REDISEÑO, FASE A: NAVEGACIÓN Y NOMBRES DE LA OFICINA (22 OCT 2026) ========================================================================== El dueño: "los nombres de ciertas cosas no son claros y los caminos para llegar a algo se han extendido". Lo de aquí acompaña a tres cambios de oficina.html / oficina.js: la frase "Not in this total" dentro de su tarjeta de Home, "+ Add a user" arriba de Users y el grupo plegado "Phone and files" al final de Settings › Business. Todo en `@media screen`: la hoja impresa no cambia. */ @media screen { /* 1. HOME: "NOT IN THIS TOTAL", DENTRO DE "PAY THIS WEEK". El
pasa a ser la tarjeta (el marco, el borde y el radio de button.kpi.casa-cifra) y dentro van los dos botones: la cifra (que lleva a esta semana) sin su marco, y debajo la frase en gris con "Pay it ›" como enlace normal, en tinta subrayada como el "Pay ›" de la tarjeta. Iba fuera, en amarillo (.enlace, --acento-texto): el amarillo es lo que se toca, y esa frase es una nota con un enlace. */ .kpi-fila > li.con-extra { flex-direction: column; align-items: stretch; gap: 0; background: var(--marco); border: 1px solid var(--borde-tarjeta); border-radius: var(--radio); padding: 6px; } [data-densidad="oficina"]:not([data-tema="claro"]) .kpi-fila > li.con-extra, [data-tema="oscuro"] .kpi-fila > li.con-extra { background: var(--panel); padding: var(--e2); } .kpi-fila > li.con-extra > button.kpi.casa-cifra, [data-densidad="oficina"]:not([data-tema="claro"]) .kpi-fila > li.con-extra > button.kpi.casa-cifra, [data-tema="oscuro"] .kpi-fila > li.con-extra > button.kpi.casa-cifra { border: 0; padding: 0; background: transparent; } /* La sombra de tarjeta (PESO VISUAL) va en el
, no en la cifra: si no, se dibujaba una tarjeta dentro de la tarjeta. */ main .kpi-fila > li.con-extra { box-shadow: var(--sombra-tarjeta); } main .kpi-fila > li.con-extra > button.kpi.casa-cifra, main .kpi-fila > li.con-extra > button.kpi.casa-cifra:hover { box-shadow: none; } .kpi-fila > li.con-extra > button.kpi-extra { display: block; align-self: stretch; min-height: 44px; margin: 0; padding: var(--e2) var(--e3); background: transparent; border: 0; border-radius: var(--radio-chico); text-align: left; font-family: inherit; font-size: .875rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tinta-suave); } .kpi-fila > li.con-extra > button.kpi-extra:hover { filter: none; background: var(--hundido); } .kpi-extra-ir { color: var(--tinta); font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; } /* 2. USERS: "+ Add a user" EN LA CABECERA, junto al título. Plegado es un botón con borde a la derecha de "Users"; abierto ocupa la fila entera debajo del título, con el formulario, como cualquier pliegue. */ .cabecera-usuarios { align-items: flex-start; } .cabecera-usuarios > h2.display { margin-bottom: 0; } .cabecera-usuarios > details.bloque { margin-bottom: 0; } .cabecera-usuarios > details.bloque:not([open]) { flex: none; border-radius: var(--radio-chico); } .cabecera-usuarios > details.bloque:not([open]) > summary { padding: var(--e2) var(--e4); } .cabecera-usuarios > details.bloque:not([open]) > summary .que { font-size: 1rem; } .cabecera-usuarios > details.bloque:not([open]) > summary .que::before { display: none; } .cabecera-usuarios > details.bloque[open] { flex: 1 1 100%; } #seccion-usuarios > .cabecera-usuarios { margin-bottom: var(--e4); } /* 3. SETTINGS: "PHONE AND FILES", UN PLIEGUE CON CUATRO DENTRO. Los de dentro siguen siendo pliegues (con su pista: Ready, On…), sin la separación de abajo de cada bloque suelto y con raya fina entre uno y otro, para que no sean cajas dentro de una caja. */ .grupo-telefono > .cuerpo-telefono { gap: 0; } .grupo-telefono > .cuerpo-telefono > .bloque { margin-bottom: 0; border-width: 1px 0 0; background: transparent; } .grupo-telefono > .cuerpo-telefono > .bloque > summary { padding-left: 0; padding-right: 0; } .grupo-telefono > .cuerpo-telefono > .bloque > .cuerpo-bloque { padding-left: 0; padding-right: 0; } .ajustes-final { margin-top: var(--e5); } } /* ========================================================================== REDISEÑO, FASE C: REPORTS › PAY | TIPS | CASH | NUMBERS (22 OCT 2026) ========================================================================== Usuario simulado, fricciones 1 a 4: Pay medía 4,586 px a 1440 con diez bloques, pagar estaba partido por los 91 tips y el jefe no sabía qué semana ni qué cifra pagaba. Ahora Pay es solo lo que se paga ("Pay this week" y tres grupos: Tow drivers, CDL drivers, Flyers), Tips y Numbers son partes propias de Reports (vistas de la misma sección, oficina.js ponerVistaDeReports) y hay una sola forma de confirmar un pago (preguntaDePago). La escala de cinco tamaños de la auditoría (32, 20, 16, 14, 12; 700 en títulos y cifras, nunca 800). Todo en `@media screen`: la hoja impresa no cambia. */ @media screen { /* 1. LAS VISTAS DE `semana`: cada bloque dice de qué vistas es (`data-vista-de`, una lista); lo que no es de la vista no se pinta. `display: none` y no `hidden`: el atributo lo usa cada bloque para lo suyo (Tips sin dueño, los CDL sin semana) y no se pisa. */ [data-seccion="semana"][data-vista="pagar"] [data-vista-de]:not([data-vista-de~="pagar"]), [data-seccion="semana"][data-vista="tips"] [data-vista-de]:not([data-vista-de~="tips"]), [data-seccion="semana"][data-vista="numeros"] [data-vista-de]:not([data-vista-de~="numeros"]), [data-seccion="semana"][data-vista="informe"] [data-vista-de]:not([data-vista-de~="informe"]) { display: none !important; } /* En Tips el bloque ES la vista: su tapa es el título ("Tips · 91 of 91 cars still have no tip"), no un pliegue que la dejaría en blanco. */ [data-seccion="semana"][data-vista="tips"] details[data-abre="tips"] > summary { cursor: default; pointer-events: none; } [data-seccion="semana"][data-vista="tips"] details[data-abre="tips"] > summary .que::before { display: none; } /* Las cajas de la sección que quedan sin nada en la vista, sin su hueco. */ [data-seccion="semana"]:is([data-vista="tips"], [data-vista="numeros"]) > .lo-del-periodo:not(:has(> :not([data-vista-de]):not([hidden]))) { display: none; } [data-seccion="semana"][data-vista="pagar"] > .plegables { display: none; } /* 2. "PAY THIS WEEK": la cabeza. El título (20), la frase de qué semanas se pagan (16, en tinta: es LA respuesta a "¿qué estoy pagando?"), el total (32) con sus partes (14, gris) y, a la derecha desde 64rem, lo que falta y "Print the week" (las filas de Settle up de antes). */ main .pago-semana.pagar-semana { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); align-items: start; padding: var(--e4); background: var(--panel); border: 1px solid var(--borde-tarjeta); border-radius: var(--radio); } main .pago-semana.pagar-semana[hidden] { display: none; } .pagar-izq { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; } .pagar-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); } main .pagar-cabeza .rotulo-bloque { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; color: var(--tinta); } .que-semana { margin: 0; font-size: 1rem; color: var(--tinta); } .pagar-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--e3); margin: var(--e2) 0 0; } .pagar-total > .rotulo { font-size: 1rem; font-weight: 700; color: var(--tinta); } .pagar-total > .cifra { font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--tinta); } .pagar-total > .nota { flex-basis: 100%; font-size: .875rem; color: var(--tinta-suave); } .pagar-total + .def-palabra { margin: 0; } .pagar-falta { align-self: start; } @media (min-width: 64rem) { main .pago-semana.pagar-semana { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: var(--e4) var(--e5); } } /* 3. LOS TRES GRUPOS: su tapa es su fila. El nombre (20) a la izquierda, la cifra con su semana a la derecha (20 y 14), y el estado debajo (14). Abiertos, la lista de cada uno con su botón de pagar. */ main details.bloque.grupo-pago { margin-bottom: 0; border-radius: var(--radio); } details.grupo-pago > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "q c" "p p"; align-items: baseline; gap: 2px var(--e3); } main details.grupo-pago > summary .que { grid-area: q; font-size: 1.25rem; font-weight: 700; min-width: 0; } details.grupo-pago > summary .cifra-grupo { grid-area: c; display: flex; flex-direction: column; align-items: flex-end; text-align: right; } details.grupo-pago > summary .cifra-grupo[hidden] { display: none; } .cifra-grupo > b { font-size: 1.25rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--tinta); } .cifra-grupo > small { font-size: .875rem; color: var(--tinta-suave); } main details.grupo-pago > summary .pista { grid-area: p; font-size: .875rem; color: var(--tinta-suave); } /* La tarjeta Settle up, dentro del grupo de los choferes de grúa: sin otro marco (una caja dentro de una caja), con sus barras al lado desde 64rem (lo que falta se fue a la cabeza). */ main details.grupo-pago .viernes.liquidar-semana { border: 0; padding: 0; background: transparent; box-shadow: none; } main details.grupo-pago .liquidar-semana .rotulo-bloque { font-size: 1rem; font-weight: 700; } @media (min-width: 64rem) { main .viernes.liquidar-semana.sin-der { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "izq barras"; grid-template-rows: auto; } main .viernes.liquidar-semana.sin-der > .saldar-barras { border-top: 0; padding-top: 0; } } .partes-pago { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--e3); margin: 0; font-size: .875rem; color: var(--tinta-suave); } .partes-pago[hidden] { display: none; } .partes-pago > .rotulo { font-size: .875rem; font-weight: 600; color: var(--tinta); } /* "305.00 we pay them" y debajo "incl. Oct 10 – 16". */ .de-semanas { display: block; font-size: .75rem; font-weight: 400; color: var(--tinta-suave); } /* 4. UN SOLO PATRÓN DE PAGAR: la pregunta debajo del botón, igual en los tres grupos ("Pay Luis 960.00?", la semana, "Yes, pay" / "Not now"). */ .pregunta-pago .linea-pago { margin: 0; } .fila-pago-flyers > .pregunta-pago { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--e2); } .confirmar-pago-cdl.pregunta-pago { display: flex; flex-direction: column; gap: var(--e2); } .confirmar-pago-cdl.pregunta-pago[hidden] { display: none; } /* 5. "X › Y" EN UN AVISO ES UN ENLACE: el mismo texto, subrayado y en tinta (un enlace dentro de una frase, no un botón), y el aviso flotante recibe el toque solo cuando lleva uno. Sin el alto de 48 de un botón: es texto dentro de una línea (WCAG 2.5.8, la excepción de lo que va dentro de una frase). */ button.enlace-camino { display: inline; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font: inherit; font-weight: 700; letter-spacing: inherit; text-transform: none; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } button.enlace-camino:hover { filter: none; background: none; text-decoration-thickness: 2px; } #aviso.aviso-oficina .con-enlace { pointer-events: auto; } } /* ========================================================================== REDISEÑO, FASE E: EL SISTEMA VISUAL (22 OCT 2026) ========================================================================== El dueño: "una mejora al diseño en cuanto a jerarquía visual, diagramación, pesos visuales". Lo de la auditoría de UI (ui-auditoria.md §3 y §4) que quedaba tras las fases A a D, en el orden de su lista: el amarillo solo en lo que se toca, los enlaces en tinta, las cifras de apoyo por debajo de la clave, lo roto, un título de pantalla en cada parte, fuera el 800, el verde solo para "cuadra", los pliegues con radio de fila, Home y el escritorio ancho. Nada de aquí reordena bloques de antes (tema.js y peso-visual.js leen reglas literales y su orden): todo PISA desde el final, con la escala de cinco tamaños (32, 20, 16, 14, 12) y sin 800. Todo en `@media screen`: la hoja impresa no cambia. Medido en Chromium a 390, 1440 y 2000, claro y oscuro (y Sunlight en los teléfonos); antes y después en scratchpad/capturas/fase-e-*. */ @media screen { /* 1. "TODAY" SIN AMARILLO. La insignia de hoy (.marca-hoy), el filo de la fila de hoy (Tips, carros por día, Sources) y la línea "Showing week … · Back to today" iban en amarillo, en cosas que no se tocan o que no son la acción de su zona: de 5 a 8 amarillos por pantalla en Pay, Tips, Cash y Numbers, contra la regla del dueño del 1 oct (el amarillo es lo que hay que tocar). La insignia pasa a chip neutro (tinta sobre lo de dentro, con su filo para que se vea también sobre la fila de hoy, que ya es hundida) y los filos, a tinta. La palabra "Today" sigue: es lo que lo dice, no el color. */ .marca-hoy { background: var(--dentro); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--borde-tarjeta); } button.dia-carros.es-hoy { box-shadow: inset 4px 0 0 var(--tinta); } tr.es-hoy > th { box-shadow: inset 4px 0 0 var(--tinta); } .reports-hoy.saltada { border-radius: var(--radio-chico); box-shadow: inset 4px 0 0 var(--tinta); } /* 2. UN ENLACE EN UNA FRASE, EN TINTA. `.enlace` iba en --acento-texto: oliva #6B5400 en claro y amarillo puro en oscuro ("Earlier week: … still to pay · Pay ›" de Team › CDL, "Users ›" de Settings), el único texto amarillo de esas pantallas. Ahora como "Pay it ›" de Home (fase A) y "Reports › Cash" de los avisos (fase C): tinta, subrayado. */ .enlace, button.enlace { color: var(--tinta); } /* 3. LA CIFRA CLAVE GANA A LAS DE APOYO (1.6× o más). Las tarjetas de cifra de dentro de un héroe (Team › Tow drivers, CDL y Flyers) iban al tamaño del héroe (32, y las de Flyers 32/800 en un pozo blanco): "25 trips" pesaba lo mismo que "Still to pay $4,145.00". Ahora rótulo 14/600 gris arriba y cifra 20/600 (32/20 = 1.6). Flyers, sin su pozo, con la raya fina de arriba de CDL y Tow drivers: un solo dibujo. */ #principal .heroe-pantalla .kpi-fila .kpi .cifra { font-size: 1.25rem; font-weight: 600; letter-spacing: 0; line-height: 1.2; } #principal .heroe-pantalla .kpi-fila .kpi .kpi-tapa .rotulo { font-size: .875rem; font-weight: 600; color: var(--tinta-suave); } #principal [data-seccion="flyers"] .heroe-pantalla .kpi { background: transparent; border: 0; border-top: 1px solid var(--linea); border-radius: 0; } #principal [data-seccion="flyers"] .heroe-pantalla .kpi-pozo { background: transparent; border-color: transparent; padding-top: var(--e1); } /* Cash: "Remaining balance, all drivers" medía 48 a 390 y 77 a 1440 (--t-cifra-heroe), más que cualquier otra cifra clave de la oficina; y sus tres tarjetas (Not confirmed yet, Cash claims, Cash moves), 28-32 en 800. Ahora 32/700 la clave y 20/600 las de apoyo, con su rótulo 14/600 en gris como en Team. El "$" y los centavos, a 20, como en las demás cifras de 32 (CALMA 2). */ #principal [data-seccion="efectivo"] .caja-todos > .cifra, #principal [data-seccion="efectivo"] .caja-todos > .cifra .monto { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; } #principal [data-seccion="efectivo"] .caja-todos > .cifra :is(.moneda, .centavos) { font-size: 1.25rem; font-weight: 700; } #principal #cifras-entregas .titular .cifra { font-size: 1.25rem; font-weight: 600; letter-spacing: 0; line-height: 1.2; } #principal #cifras-entregas .titular .rotulo { font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tinta-suave); } /* 4. LO ROTO. a) El summary de un pliegue tarjeta ("Give or take back cash" de Cash, los grupos de Pay, Settings) pinta su fondo de :hover en un rectángulo, encima de las esquinas redondas del
: la caja se veía con los lados cortados. En el teléfono el :hover se queda pegado tras el toque, así que se veía siempre después de abrirlo o cerrarlo. El summary toma el radio de su pliegue (abierto, solo arriba) y en una pantalla táctil no pinta fondo al pasar. */ main details.bloque > summary { border-radius: inherit; } main details.bloque[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @media (hover: none) { main details.bloque > summary:hover { background: transparent; } } /* b) "Cash claims" de Cash: el filo rojo de 1 px (y la banda de 5 en escritorio) sobre una tarjeta de radio 26 asomaba solo como una uña roja en la esquina de abajo. El estado lo dicen el icono, la palabra y la cifra en rojo; la tarjeta de cifra, sin banda, como las de Team (un solo dibujo de tarjeta de cifra). Igual "Not confirmed yet": su reloj de arena y su palabra. */ #principal #cifras-entregas .titular { border-left-color: var(--borde-tarjeta); box-shadow: none; } /* c) Las iniciales de una cara chica (Cash, Assign) medían 10.64 px: nada bajo 12 en la oficina. */ #principal .cara.chica { font-size: .75rem; } /* 5. UN TÍTULO DE PANTALLA EN CADA PARTE. Había seis tratamientos: Pay y Cash sin título visible, Dispatch sin título, Team a 32, Flyers, Settings, Users y Audit log a 28, Cars a 20. Ahora cada parte dice su nombre (el de su botón del conmutador) a 32/700, a la izquierda, justo debajo del conmutador. En Cars el título es el de siempre, con su cuenta en gris a 20. Dentro de Settings › Business, "CDL places and prices" y "Company setup" son zonas de la pantalla: a 20/700, el tamaño de un título de zona. */ #principal :is(.titulo-pantalla, [data-seccion="choferes"] .cabecera-lista > h2.display, [data-seccion="cdl"] .cabecera-lista > h2.display, #titulo-flyers, #titulo-ajustes, .cabecera-usuarios > h2.display, [data-seccion="auditoria"] > section > h2.display, #titulo-cars) { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--tinta); } #principal #titulo-cars .cuantos { font-size: 1.25rem; font-weight: 600; } #principal :is(#titulo-destinos-cdl, #titulo-negocio) { font-size: 1.25rem; font-weight: 700; letter-spacing: 0; } /* Una palabra por vista o por parte (ver oficina.html): la que no es de la vista, fuera. Reports sin vista puesta todavía (al arrancar): Pay. */ [data-seccion="semana"]:not([data-vista]) .titulo-pantalla > span:not(:first-child) { display: none; } .titulo-despacho > span { display: none; } [data-seccion="ordenes"]:has(> [data-parte="asignar"]:not([hidden])) .titulo-despacho > [data-titulo-de="asignar"], [data-seccion="ordenes"]:has(> [data-parte="nuevo"]:not([hidden])) .titulo-despacho > [data-titulo-de="nuevo"] { display: inline; } [data-seccion="ordenes"]:has(> [data-parte="carros"]:not([hidden])) > .titulo-despacho { display: none; } /* EL MISMO HUECO: 12 del conmutador al título (ya lo era en todas) y 12 del título a lo siguiente, el `gap` de las secciones en columna de Team y Audit log. Medido a 1440 antes de igualarlo: Pay 4, Cash 16, Dispatch 16, CDL y Flyers 24 (el margen de arriba de su barra del periodo), Business 20 (el de los atajos), Users 37. */ #principal :is([data-seccion="efectivo"], [data-seccion="ordenes"]) > .titulo-pantalla { margin: 0 0 var(--e3); } #principal :is([data-seccion="cdl"], [data-seccion="flyers"]) .cabecera-lista ~ .periodo-barra { margin-top: 0; } #principal [data-seccion="ajustes"] #titulo-ajustes + .atajos-ajustes { margin-top: 0; } #principal #seccion-usuarios > .cabecera-usuarios { margin-bottom: 0; } /* "How this works" de Reports, en la primera línea bajo el título (con "Find a car" a la derecha), como "What do these words mean?" de Home: iba bajo la barra del periodo y la línea de hoy, a 60 px del título. */ .cabeza-pantalla { display: flex; flex-direction: column; gap: var(--e3); } .cabeza-pantalla > .titulo-pantalla { margin: 0; } /* La flecha de una tarjeta de cifra de héroe, alineada con su rótulo (el pozo llevaba 16 de relleno y un filo, el rótulo 12: la cifra salía 6 px a la derecha de su nombre). */ #principal .heroe-pantalla .kpi-fila .kpi-pozo { border: 0; padding-left: var(--e3); } /* 6. FUERA EL 800. Quedaban en pantalla el título de un bloque y de sus pliegues (Settings ×8, "Give or take back cash", "Add a user", los grupos de Flyers), las cuentas de Users, la fecha de Home y las tarjetas de cifra de Flyers. Todo a 700: se distinguen por tamaño, no por un peso más (ui-auditoria §3.1). Las mismas listas de selectores que los pusieron en 800, para ganarles por orden. */ .casa-cabeza h3, .liquidar-semana .rotulo-bloque, .pago-cdl > h4, .cdl-dias > h4, main .bloque > summary .que, .heroe-rotulo, h3.titulo-lista { font-weight: 700; } .cabeza-usuarios .n { font-weight: 700; } .casa-fecha { font-weight: 700; } .kpi .cifra { font-weight: 700; } /* En los teléfonos quedaban dos: la acción de un paso ("Yes, I got 700.00", "Save the car", 18/800) y el contador de hoy de un lugar del CDL. La cifra de campo (52/700) ya no era 800 desde la fase B. */ body.una-mano .pie-paso > button.principal, body.una-mano .pie-accion > button.principal, body.una-mano .confirmar .acciones > button.principal { font-weight: 700; } button.destino .hoy { font-weight: 700; } /* 7. EL VERDE SOLO DICE "CUADRA". "WhatsApp" de una ficha de Team iba con borde y letra verdes junto a "Call" en tinta: un botón como otro, no un estado. Como "Call". Los puntos de las fotos de Cars (hay / falta), verde y rojo: un dato del carro, no un estado de dinero; en tinta suave, lleno el que está y hueco el que falta (el nombre lo dice su aria-label). */ .contacto a.wasap, .contacto a.wasap:hover { border-color: var(--linea-fuerte); color: var(--tinta); } .chip-foto.hay { background: var(--tinta-suave); border-color: var(--tinta-suave); } .chip-foto.falta { background: transparent; border-color: var(--tinta-suave); } /* 8. UN PLIEGUE DE UNA LÍNEA ES UNA FILA, NO UNA PÍLDORA. Cerrados, los bloques de Settings, "Give or take back cash", "Pay summary" y "Add trips from the paper sheet" de CDL, o Sources y Download de Numbers, medían 51-55 px con radio 26: píldoras, la forma del botón. Con radio de fila (16), como la fila que se abre de la norma "LA FORMA DE ONE SPORT". Abiertos son una tarjeta con su contenido y vuelven a 26. Los grupos de Pay (dos renglones: nombre y cifra, y el estado) se quedan tarjeta. El alto no cambia: 48 o más también a 390. */ [data-densidad="oficina"] main details.bloque:not([open]):not(.grupo-pago) { border-radius: var(--radio-chico); } /* 9. HOME: UNA JERARQUÍA DE TARJETA. a) El nombre de cada tarjeta a 20/700, como "To do", "Tow drivers", "Money today" y "Cars by day": "Pay this week" y "Cars this week" iban a 16, un punto por encima de una fila. */ #principal [data-seccion="inicio"] .kpi-fila .kpi .kpi-tapa .rotulo { font-size: 1.25rem; font-weight: 700; letter-spacing: 0; color: var(--tinta); } /* b) "Pay ›" y "Cars and numbers ›" en la cabecera, a la derecha (como "Assign ›" de la línea de Dispatch): tarjetaKpi (oficina.js) los pone ya en `.kpi-tapa`. 16/700 en tinta subrayada, de un renglón. */ #principal [data-seccion="inicio"] .casa-cifra .kpi-tapa { justify-content: space-between; align-items: baseline; flex-wrap: wrap; } #principal [data-seccion="inicio"] .casa-cifra .kpi-tapa .kpi-ir { margin-left: auto; font-size: 1rem; } /* c) La flota con un renglón menos: "0 cars", "$700" y "1 sent" iban uno por renglón aunque cupieran juntos (a 1440 cada grúa mide 96 px). Ahora en una línea que parte cuando no cabe: a 1440, "0 cars $700" arriba y "1 sent" debajo; a 390 (56 px) como antes, uno por renglón. Y la grúa ocupa el alto de su fila, así los carros mandados ("Dodge Caravan") quedan todos a la misma altura, al pie. */ .flota-hoy { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: var(--e1); } .flota > li > .grua-flota { flex: 1 1 auto; } /* 10. ESCRITORIO ANCHO. a) Home en tres columnas desde 112rem (1,792 px): en dos, cada una medía 700 px o más (766 a 2000). El reparto lo hace el mismo JS (acomodarColumnas, con repartirEnTres en inicio-visual.js); aquí, la rejilla. */ @media (min-width: 112rem) { #principal #casa-rejilla.en-columnas { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* b) Desde 120rem (1,920 px), el contenido centrado en lo que deja la columna de secciones: a 2000 todo arrancaba en x=280 y dejaba 144 px a la derecha, pegado a la izquierda. El tope sigue en 100rem (con 90rem, las tres columnas de Home quedaban más estrechas a 2000, 448 px, que las dos de 1440, 560). Con Car details abierto, `main` sigue dejando el hueco del panel (padding-right): el panel no tapa nada. */ @media (min-width: 120rem) { main.ancho { margin-left: auto; margin-right: auto; } } /* 11. DISPATCH › CARS COMO TABLA CUANDO HAY SITIO. A 1440 eran 200 tarjetas de 73 px, una por carro, con la oferta a 1,000 px del nombre y el chofer, la hora y la dirección en un renglón gris debajo: para comparar dos carros había que leer en zigzag. Cuando la lista mide 52rem o más (832 px: a 1280 y a 1440 sin Car details abierto), una sola tarjeta con una fila por carro y las mismas columnas en todas: carro | estado | chofer | hora | dirección | fotos | número | cifra. Es CSS sobre el mismo HTML (el botón de cada fila sigue siendo el que abre Car details, en el mismo orden): los dos renglones de la fila se vuelven `display: contents` y cada dato toma su columna. Con una consulta de contenedor y no de pantalla: con Car details abierto la lista se estrecha (600 px a 1440) y vuelve sola a las tarjetas. Más estrecha (teléfono, 1024 px), como estaba. */ .carros-despacho { container: lista-cars / inline-size; } @container lista-cars (min-width: 52rem) { #cars-lista { gap: 0; padding: var(--e2) 0; background: var(--panel); border: 1px solid var(--borde-tarjeta); border-radius: var(--radio); box-shadow: var(--sombra-tarjeta); } #cars-lista > .fila-cars { border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; box-shadow: none; background: transparent; margin: 0; } #cars-lista > .fila-cars:last-of-type { border-bottom: 0; } #cars-lista > .ver-mas, #cars-lista > [data-cars-todas] { margin: var(--e3) var(--e4) var(--e2); } #cars-lista > .fila-cars > .abrir-carro { display: grid; align-items: baseline; column-gap: var(--e3); row-gap: 0; grid-template-columns: minmax(11rem, 1.5fr) 7rem minmax(7rem, 1fr) 5rem minmax(0, 2fr) 2rem 3.5rem 8.5rem; min-height: 48px; padding: var(--e2) var(--e4); border-radius: 0; } .fila-cars .linea-despacho { display: contents; } .fila-cars .linea-despacho > * { grid-row: 1; min-width: 0; margin: 0; } .fila-cars .linea-despacho.sub > *::before { content: none; } .fila-cars .nombre-despacho { grid-column: 1; font-size: 1rem; font-weight: 700; } .fila-cars .linea-despacho .etiqueta { grid-column: 2; justify-self: start; } .fila-cars .chofer-cars { grid-column: 3; } .fila-cars .cuando-cars { grid-column: 4; font-variant-numeric: tabular-nums; } /* La dirección parte en dos renglones antes que cortarse con "…": es lo que se busca. */ .fila-cars .donde-despacho { grid-column: 5; overflow-wrap: anywhere; } .fila-cars .fotos-chip { grid-column: 6; } .fila-cars .numero-carro { grid-column: 7; } .fila-cars .oferta-despacho { grid-column: 8; justify-self: end; text-align: right; font-variant-numeric: tabular-nums; } .fila-cars :is(.chofer-cars, .cuando-cars, .donde-despacho, .numero-carro) { font-size: .875rem; } } } /* ========================================================================== PULIDO TRAS LA SEGUNDA SIMULACIÓN (22 oct 2026, rediseño). Lo poco de CSS que pidió: el resto fue de comportamiento (oficina*.js, chofer.js). ========================================================================== */ @media screen { /* N1: "Change" de la cita trae el editor a la vista con 'nearest' (oficina-despacho.js). Sin margen, su borde de abajo quedaba pegado al de la ventana (medido a 1440×900: 900.5 de 900); un respiro de --e3. */ .cita-ficha { scroll-margin-bottom: var(--e3); } /* "RECORDING SAVED." NO TAPA "SAVE THE CAR". Con Car details abierto en escritorio, el aviso pasajero vive dentro del panel y la regla de arriba (.ficha-carro-despacho #aviso.aviso-oficina, "dentro del panel") lo ponía a la derecha; pero `body[data-densidad="oficina"] #aviso.aviso-oficina` (escritorio, a la izquierda junto a la barra lateral) pesa más y ganaba: a 1440×900 el aviso caía en x 280..760, y 843..892, encima de "Save the car" pegado al pie de New car (297..457, 844..888). Con el mismo peso más uno, el del panel gana donde hay panel. */ @media (min-width: 64rem) { body[data-densidad="oficina"] .ficha-carro-despacho #aviso.aviso-oficina { left: auto; right: var(--e4); width: calc(32rem - 2 * var(--e4)); margin: 0; } } @media (min-width: 76rem) and (max-width: 87.99rem) { body[data-densidad="oficina"] .ficha-carro-despacho #aviso.aviso-oficina { width: calc(28rem - 2 * var(--e4)); } } /* TEAM › CDL EN EL TELÉFONO: LAS CUATRO CIFRAS EN 2 × 2 (22 oct 2026, pulido del rediseño, del probador). Trips, Without a price, Paid y Working iban una por fila a 390 (97 px cada una, 450 px de alto en total): la lista de CDL empezaba en la segunda pantalla. Son cifras cortas ("25", "0", "0 of 3", "1 of 3"): en dos columnas caben, como las tres de Team › Tow drivers y Flyers (#heroe-tablero, #flyers-heroe). Ojo: la regla de 320 ("una por fila por debajo de 24.5rem") alcanza también a 390 (24.5rem = 392 px); ésta la pisa desde 360 (22.5rem). A 320 sigue una por fila: ahí se medían chips que se salían. */ @media (min-width: 22.5rem) and (max-width: 47.99rem) { #principal #cdl-heroe .kpi-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); } } } /* ========================================================================== LOS PRECIOS DE ESTE PAGO (23 oct 2026, el dueño: "al momento de pagar, poder editar los precios"). "Trips by place" del pago de un CDL, en Reports › Pay y en Team › CDL, con el precio de un viaje en un campo (oficina-cdl.js, htmlPreciosDelPagoCdl). Escala de cinco tamaños, sin 800. ========================================================================== */ @media screen { .precios-pago-cdl { margin: 0 0 var(--e4); } .precios-pago-cdl table.precios-pago { max-width: 44rem; } .precios-pago-cdl tfoot th, .precios-pago-cdl tfoot td { font-weight: 700; font-size: 1rem; } .precios-pago-cdl tbody th { font-size: 1rem; } /* El campo: 44 px de alto (se toca con el dedo), cifras alineadas a la derecha. */ .precios-pago-cdl .campo-precio-pago { width: 8.5rem; } .precios-pago-cdl input[data-precio-pago] { width: 7.5rem; min-height: 44px; text-align: right; font-variant-numeric: tabular-nums; font-size: 1rem; font-weight: 600; } /* Lo que falta se marca en el campo (borde grueso en rojo) y en su total (el reloj de lo que espera, como en toda la app): no solo por el color. */ .precios-pago-cdl tr.sin-precio input[data-precio-pago] { border: 2px solid var(--rojo); } .precios-pago-cdl tr.sin-precio th { color: var(--tinta); } .chapa-precio-pago { display: inline-block; margin-left: var(--e2); padding: 0 var(--e2); border-radius: var(--pastilla); border: 1px solid var(--linea-control); font-size: .75rem; font-weight: 600; color: var(--tinta-suave); white-space: nowrap; vertical-align: 1px; } .chapa-precio-pago.nuevo { border-color: var(--tinta); color: var(--tinta); } .precios-pago-cdl tr.guardar-lugar-pago td { border-top: 0; padding-top: 0; } .precios-pago-cdl tr.guardar-lugar-pago button { min-height: 44px; font-size: .875rem; } .precios-pago-cdl .nota-precios-pago { display: block; margin: var(--e2) 0 0; font-size: .875rem; } .estado-precios-pago { margin: var(--e2) 0 0; font-size: .875rem; font-weight: 600; } .estado-precios-pago:empty { display: none; } .estado-precios-pago.bien { color: var(--verde-texto); } .estado-precios-pago.error { color: var(--rojo-texto); } #cdl-imp-alerta:empty { display: none; } /* EN EL TELÉFONO la tabla no se sale: el nombre parte en dos renglones y el campo se queda de 6.5rem (390 px: 16 de margen a cada lado). */ @media (max-width: 47.99rem) { .precios-pago-cdl .campo-precio-pago { width: 6.5rem; } .precios-pago-cdl input[data-precio-pago] { width: 6rem; } .precios-pago-cdl table.precios-pago th, .precios-pago-cdl table.precios-pago td { padding-left: var(--e1, 4px); padding-right: var(--e1, 4px); } } } /* ========================================================================== DE QUIÉN ES EL VIAJE SIN PRECIO (23 oct 2026, el dueño: "agrega aquí de quién es el viaje para saber quién hace eso"). Una línea gris bajo el lugar con el nombre de cada CDL: dato de apoyo, no compite con el campo. ========================================================================== */ @media screen { .sin-precio-cdl .lsp-quien { margin: .25rem 0 0; font-size: .875rem; color: var(--tinta-suave); } } /* ========================================================================== LAS GRABACIONES DE MÁS (23 oct 2026, el dueño: "añade la opción de borrar audios si se llegan a subir de más"). "Remove" dentro de Listen de Assign, la chapa "Duplicate" (Assign, Car details y Recordings to assign) y "Select" / "Delete N recordings" de Recordings to assign. La chapa va con palabra y borde en tinta, sin amarillo (el amarillo es la acción de cada pantalla) y sin rojo (no es un error: es la candidata a quitar). Escala de cinco tamaños, sin 800. ========================================================================== */ @media screen { .etiqueta-duplicada { display: inline-block; margin-left: var(--e1, 4px); padding: 0 var(--e2); border-radius: var(--pastilla); border: 1px solid var(--tinta); font-size: .75rem; font-weight: 700; color: var(--tinta); white-space: nowrap; vertical-align: 1px; text-transform: none; letter-spacing: 0; } /* "Remove" de cada llamada en Listen: a la izquierda, del alto de un dedo. */ .escuchar-asignar-caja .quitar-grabacion { align-self: flex-start; min-height: var(--toque, 44px); margin-top: var(--e1, 4px); } .escuchar-asignar-caja .quitar-grabacion.peligro { color: var(--rojo-texto); } .una-escuchar.duplicada .cabeza-escuchar, .una-grabacion.duplicada .titulo-grabacion { color: var(--tinta); } /* Recordings to assign: "Select" y la barra de borrar varias. */ .lote-bandeja { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); } .lote-bandeja[hidden] { display: none; } .lote-bandeja button { min-height: var(--toque, 44px); } .lote-bandeja .cuenta-lote { font-size: .875rem; font-weight: 600; color: var(--tinta); margin-right: auto; } .fila-bandeja > .botones-bandeja { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: var(--e2); align-items: stretch; } .fila-bandeja .botones-bandeja .peligro { color: var(--rojo-texto); } /* Eligiendo: la casilla y el nombre en una etiqueta que se toca entera. */ .fila-bandeja.eligiendo { grid-template-columns: minmax(0, 1fr); } .marcar-bandeja { display: flex; align-items: center; gap: var(--e2); min-height: var(--toque, 44px); cursor: pointer; grid-column: 1; } .marcar-bandeja input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--tinta); } .fila-bandeja.marcada { outline: 2px solid var(--tinta); outline-offset: -2px; } @media (max-width: 47.99rem) { .fila-bandeja > .botones-bandeja { grid-column: 1; grid-row: auto; } .fila-bandeja > .botones-bandeja button { width: 100%; } .lote-bandeja .cuenta-lote { flex-basis: 100%; } .lote-bandeja button { flex: 1 1 auto; } } } /* ========================================================================== QUITAR CARROS DE TO SEND (23 oct 2026, el dueño: "agrega la opción de borrar carros que quedan en Dispatch"). La barra "Select" / "Remove N cars" de Assign y New car, la fila marcada para quitar y la chapa "Old" (pintarLoteCarros, etiquetaVieja en oficina-despacho.js). La marcada lleva la casilla con su ✓ y un borde en tinta, no solo color. Escala de cinco tamaños, sin 800. ========================================================================== */ @media screen { .lote-carros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: 0 0 var(--e2); } .lote-carros[hidden] { display: none; } .lote-carros button { min-height: var(--toque, 44px); } .lote-carros .cuenta-lote { font-size: .875rem; font-weight: 600; color: var(--tinta); margin-right: auto; } .lote-carros .motivo-quitar input { min-height: var(--toque, 44px); width: 14rem; max-width: 100%; font-size: 1rem; } .fila-para-quitar { display: flex; align-items: flex-start; gap: var(--e2); } .casilla-quitar { flex: none; width: 22px; height: 22px; margin-top: 2px; border: 2px solid var(--tinta); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 700; color: var(--tinta); } .para-quitar { outline: 2px solid var(--tinta); outline-offset: -2px; } .etiqueta-vieja { display: inline-block; padding: 0 var(--e2); border-radius: var(--pastilla); border: 1px solid var(--linea-control); font-size: .75rem; font-weight: 600; color: var(--tinta-suave); white-space: nowrap; text-transform: none; letter-spacing: 0; } @media (max-width: 47.99rem) { .lote-carros .cuenta-lote { flex-basis: 100%; } .lote-carros .motivo-quitar { flex-basis: 100%; } .lote-carros .motivo-quitar input { width: 100%; } .lote-carros button { flex: 1 1 auto; } } } /* ========================================================================== EL PENDIENTE EN LA FICHA DE CADA CDL (23 oct 2026, el dueño: "agrégalo a la ficha de los choferes y no lo pongas tan por fuera, sino como un pendiente en la ficha"). Va debajo de la fila del CDL, dentro de su
y con la sangría del nombre: se lee como parte de esa persona, no como una caja aparte. Cerrado es una línea con el reloj ("To do") y lo que falta; abierto, el campo de cada lugar. Sin amarillo suelto: el amarillo es lo que se toca (el botón "Set the price"). ========================================================================== */ @media screen { .cdl-todos > li.cdl-sin-fila > .cdl-uno-nombre { margin: 0; padding: var(--e2) var(--e2) 0 var(--e3); font-weight: 600; } .pendiente-cdl { padding: 0 var(--e2) var(--e2) var(--e3); } .pendiente-cdl .lsp-hecho { margin: 0 0 var(--e2); font-size: .875rem; font-weight: 600; color: var(--tinta); } .pendiente-cdl details > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); min-height: 44px; padding: var(--e1) var(--e2); cursor: pointer; border-radius: var(--radio-chico); background: var(--espera-fondo, var(--marco)); font-size: .875rem; color: var(--tinta); } .pendiente-cdl details > summary .psp-texto { overflow-wrap: anywhere; } /* Cerrado dice qué hace tocarlo (el triángulo solo no lo decía, como "See report" en la fila); abierto ya no hace falta. */ .pendiente-cdl details > summary .psp-ir { margin-left: auto; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .pendiente-cdl details[open] > summary .psp-ir { display: none; } .pendiente-cdl details[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .pendiente-cdl details > :not(summary) { margin: 0; } .pendiente-cdl .psp-nota { padding: var(--e2) var(--e2) 0; font-size: .875rem; color: var(--tinta-suave); } .pendiente-cdl ul { list-style: none; margin: 0; padding: var(--e2); display: flex; flex-direction: column; gap: var(--e2); } .pendiente-cdl form { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3); background: var(--marco); border-radius: var(--radio-chico); } .pendiente-cdl .lsp-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e3); } .pendiente-cdl .lsp-cabeza strong { font-size: 1rem; color: var(--tinta); overflow-wrap: anywhere; } .pendiente-cdl .lsp-viajes { font-size: .875rem; color: var(--tinta-suave); } .pendiente-cdl .lsp-campos { display: flex; flex-direction: column; gap: var(--e2); } .pendiente-cdl .lsp-campos label { display: flex; flex-direction: column; gap: var(--e1); font-size: .875rem; font-weight: 600; } .pendiente-cdl .lsp-campos label.lsp-casilla { flex-direction: row; align-items: center; gap: var(--e2); min-height: 44px; font-weight: 400; } .pendiente-cdl .lsp-campos label.lsp-casilla input { width: 1.5rem; height: 1.5rem; flex: none; } .pendiente-cdl .lsp-campos button { min-height: 44px; } .pendiente-cdl .error-campo:empty { display: none; } @media (min-width: 40rem) { .pendiente-cdl .lsp-campos { flex-direction: row; flex-wrap: wrap; align-items: flex-end; } .pendiente-cdl .lsp-campos label:not(.lsp-casilla) { width: 11rem; } .pendiente-cdl .lsp-campos label.lsp-casilla { flex: 1 1 16rem; } } } /* EL EQUIPO DEL JEFE DE FLYERS (23 oct 2026, public/flyers.js, tarjetaDeOtro). Una tarjeta por persona: nombre y horas de la semana en una línea, el grupo en gris y debajo una fila de días de 48 px (Sat … Fri), cada uno con su día y sus horas ("7", "6:30", "–"). A 390 caben siete: 358 px de ancho entre los márgenes de 16. El día de hoy con borde en tinta, como en su propia semana; el "Stop" olvidado en rojo con palabra en la tarjeta (no solo color). Escala de cinco tamaños (20, 16, 14, 12), sin 800. */ @media screen { #seccion-equipo { margin-bottom: var(--e4); } #seccion-equipo > .ayuda-campo { display: block; margin: var(--e1) 0 var(--e3); } .equipo-flyers { display: grid; gap: var(--e3); } @media (min-width: 48rem) { .equipo-flyers { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .persona-equipo { margin: 0; padding: var(--e3); border: 1px solid var(--linea); border-radius: var(--radio-chico); background: var(--panel); } .nombre-equipo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.2; } .nombre-equipo > span:first-child { min-width: 0; overflow-wrap: anywhere; } .total-equipo { flex: none; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta-suave); } .grupo-equipo { margin: 2px 0 0; font-size: .875rem; color: var(--tinta-suave); } .olvido-equipo { margin: var(--e1) 0 0; font-size: .875rem; font-weight: 600; color: var(--rojo-texto); } .dias-equipo { list-style: none; margin: var(--e2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(2.75rem, 1fr)); gap: 4px; } .dias-equipo li { list-style: none; margin: 0; } .dias-equipo .dia-equipo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 48px; margin: 0; padding: 4px 2px; font: inherit; color: var(--tinta); background: var(--dentro, var(--hundido)); border: 1px solid transparent; border-radius: var(--radio-chico); box-shadow: none; text-align: center; } .dias-equipo button.dia-equipo { cursor: pointer; } @media (hover: hover) { .dias-equipo button.dia-equipo:hover { border-color: var(--borde-boton); } } .dias-equipo .dia-equipo.hoy { border-color: var(--tinta); } .dias-equipo .dia-equipo.olvido { border: 2px solid var(--rojo); } .dias-equipo .dia-equipo.quieto { opacity: .75; } .dia-equipo .dia-corto { font-size: .75rem; font-weight: 600; color: var(--tinta-suave); white-space: nowrap; } .dia-equipo .horas-corto { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; } .dia-equipo .horas-corto.cero { font-weight: 400; color: var(--tinta-tenue); } .quien-horas { margin: 0; font-size: 1.25rem; font-weight: 700; } } /* ========================================================================== LOS PAGOS, SEMANA POR SEMANA (23 oct 2026, el dueño: "agrega un historial de los pagos, y que los pagos no se acumulen sino se separen por semanas"). Reports › Payments (#lista-pagos), las semanas de antes sin pagar en Pay (#semanas-antes-grua, la ficha de un chofer) y el historial plegado de cada persona en Team (oficina-pagos.js). Escala de cinco tamaños, sin 800, sin amarillo nuevo: el estado va en las chapas de siempre (.chip-estado: gris lo pagado, reloj lo que corre, rojo suave lo que se dejó pasar), nunca solo por el color: la palabra va dentro. ========================================================================== */ @media screen { /* Filtros: una fila que parte; campos de 44 px. */ .filtros-pagos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3); margin: 0 0 var(--e3); } .filtros-pagos label { display: flex; flex-direction: column; gap: var(--e1); font-size: .875rem; font-weight: 600; min-width: 9rem; } .filtros-pagos select, .filtros-pagos input[type="date"] { min-height: 44px; font-size: 1rem; } .filtros-pagos .solo-sin-pagar { flex-direction: row; align-items: center; gap: var(--e2); min-height: 44px; min-width: 0; } .filtros-pagos .solo-sin-pagar input { width: 22px; height: 22px; } .totales-pagos { margin: 0 0 var(--e2); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; } .totales-pagos:empty { display: none; } .acciones-pagos { margin: 0 0 var(--e4); } /* Una semana: su nombre con raya y lo pagado / lo que falta a la derecha. */ .semana-historial { margin: 0 0 var(--e5); } .cabeza-semana-pagos { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e1) var(--e3); margin: 0; padding: 0 0 var(--e2); font-size: 1.25rem; font-weight: 700; border-bottom: 2px solid var(--linea); font-variant-numeric: tabular-nums; } .cabeza-semana-pagos small { font-size: .875rem; font-weight: 600; color: var(--tinta-suave); } .cabeza-semana-pagos .resumen-semana { font-size: .875rem; font-weight: 600; color: var(--tinta-suave); align-self: flex-end; } /* Cada fila: quién · estado · cifra, y debajo cuándo/quién/cómo y el salto a Pay. En el teléfono, varios renglones; desde 48rem, columnas. */ .lista-historial, .lista-semanas-antes, .lista-semanas-aparte { list-style: none; margin: 0; padding: 0; } .fila-historial, .fila-semana-antes { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "q c" "e e" "d d" "a a"; align-items: center; gap: var(--e1) var(--e3); padding: var(--e3) 0; border-bottom: 1px solid var(--linea); } .fila-semana-antes { grid-template-areas: "q c" "e a"; } @media (min-width: 48rem) { .fila-historial { grid-template-columns: minmax(0, 1fr) 11rem 8rem 8rem; grid-template-areas: "q e c a" "d d d d"; } .fila-semana-antes { grid-template-columns: minmax(0, 1fr) 8rem 14rem 7rem; grid-template-areas: "q e c a"; } } .fila-historial .quien-pago, .fila-semana-antes .quien-pago { grid-area: q; display: flex; flex-direction: column; min-width: 0; } .fila-historial .quien-pago .nombre, .fila-semana-antes .quien-pago .nombre { font-size: 1rem; font-weight: 600; } .fila-historial .tipo-pago, .fila-semana-antes .quien-pago .detalle { font-size: .875rem; color: var(--tinta-suave); } .fila-historial .chip-estado, .fila-semana-antes .chip-estado { grid-area: e; justify-self: start; font-size: .75rem; white-space: normal; } .fila-historial .cifra-pago, .fila-semana-antes .n { grid-area: c; text-align: right; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; } /* "Paid with Oct 17 – 23": la cifra solo se dice, no suma (ya está en esa otra semana). */ .fila-historial .cifra-pago.informativa { font-weight: 400; color: var(--tinta-suave); } .fila-historial .detalle-pago { grid-area: d; font-size: .875rem; color: var(--tinta-suave); min-width: 0; overflow-wrap: anywhere; } .fila-historial .detalle-pago:empty { display: none; } .fila-historial .abrir-pago, .fila-semana-antes button, .fila-semana-antes > .vacio { grid-area: a; justify-self: end; } .fila-historial .abrir-pago, .fila-semana-antes button { min-height: 44px; font-size: .875rem; } .fila-semana-antes > .vacio { font-size: .875rem; margin: 0; } .fila-historial.estado-atrasada .cifra-pago { color: var(--rojo-texto); } .error-carga { color: var(--rojo-texto); } /* En Pay, arriba del Settle up: las semanas de antes, cada una aparte. */ .semanas-antes { margin: 0 0 var(--e4); } .semanas-antes .nota-semanas-antes { margin: 0 0 var(--e2); font-size: .875rem; } /* En la ficha de un chofer con semanas de antes: cada una en su fila con su chapa. */ .semanas-aparte .lista-semanas-aparte { margin: var(--e2) 0 var(--e4); } .semana-aparte { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "s e" "c c" "n n" "b b"; gap: var(--e1) var(--e3); padding: var(--e2) 0; border-bottom: 1px solid var(--linea); align-items: center; } .semana-aparte .cual { grid-area: s; font-size: 1rem; font-weight: 600; } .semana-aparte .chip-estado { grid-area: e; font-size: .75rem; } .semana-aparte .n { grid-area: c; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; } .semana-aparte .nota { grid-area: n; font-size: .875rem; color: var(--tinta-suave); } .semana-aparte button { grid-area: b; justify-self: start; min-height: 44px; font-size: 1rem; } /* El historial de una persona en Team, plegado. */ .historial-persona { margin: var(--e3) 0 0; } .historial-persona > summary { min-height: 44px; font-size: 1rem; font-weight: 600; } .historial-persona .lista-historial.persona .fila-historial { padding: var(--e2) 0; } .historial-persona .atrasado-persona { color: var(--rojo-texto); font-size: .875rem; font-weight: 600; } #flyers-historial { margin: var(--e5) 0 0; } #flyers-historial > .rotulo-bloque { font-size: 1.25rem; font-weight: 700; margin: 0 0 var(--e2); } /* EL CONMUTADOR DE REPORTS CON CINCO PARTES (Payments). En escritorio la píldora de 22rem no las cabe: 30rem, como Team con Flyers. En el teléfono los cinco nombres a 14 y sin relleno de lado: a 16 "Payments" y "Numbers" empujaban la página a 414 de ancho a 390 (medido). */ @media (min-width: 64rem) { .partes-dinero:has(button[data-panel="pagos"]:not([hidden])) { width: 30rem; } } @media (max-width: 47.99rem) { .partes-dinero:has(button[data-panel="pagos"]:not([hidden])) button { min-width: 0; padding-inline: 2px; font-size: .875rem; } } } /* "ASK TO START AGAIN" (23 oct 2026, src/reentrar.js). El chofer o el CDL que terminó su día pide volver a empezar; los jefes contestan con un toque desde To do, la campana o la ficha. Lo de abajo es poco a propósito: la línea de To do es la de siempre (filaDeHacer) y los dos botones van debajo, alineados con el texto (no con el icono), de 44 px como todo lo que se toca. En el teléfono, la línea del estado del pedido usa el .aviso de siempre encima del botón grande. */ @media screen { .fila-reentrar { display: flex; flex-direction: column; } .botones-reentrar { display: flex; flex-wrap: wrap; gap: var(--e2); padding: var(--e1) 0 var(--e3) calc(1.25rem + var(--e3)); } .botones-reentrar button { min-height: 44px; min-width: 6.5rem; font-size: 1rem; } /* En la ficha va con .pedido-ficha (la fila que se parte, como "Asked for a new PIN"): el texto a la izquierda y los dos botones a su lado o debajo si no caben. */ .reentrar-ficha p { font-size: 1rem; text-align: left; } .reentrar-ficha .botones-reentrar { padding: 0; } #control-cdl .botones-reentrar, .cdl-dia-control .botones-reentrar { padding-left: 0; } .control .estado-reentrar { margin: 0 0 var(--e2); font-size: .875rem; } } /* ========================================================================== LO YA PAGADO EN PAY (23 oct 2026, el dueño: "muestra qué pagos ya se han hecho para no marearse"). oficina-pagos.js. - "Paid this week": una tarjeta como la cabeza de Pay, justo debajo; cada pago en su fila (quién y su tipo · la semana pagada · la cifra · cuándo y quién), el total y "N of M paid". - La marca "Paid · Oct 23 · 960.00": verde con el visto y la palabra, que se lee sin distinguir colores; en las filas de cada grupo. - El rótulo que separa las pagadas de las que faltan, con "Show them". Tamaños de la escala (20, 16, 14, 12) y pesos 600/700. ========================================================================== */ @media screen { main .pagados-semana { display: flex; flex-direction: column; gap: var(--e3); width: 100%; align-self: stretch; box-sizing: border-box; padding: var(--e4); background: var(--panel); border: 1px solid var(--borde-tarjeta); border-radius: var(--radio); } main .pagados-semana[hidden] { display: none; } .pagados-semana .rotulo-bloque { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--tinta); } .pagados-seccion { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; } .pagados-seccion + .pagados-seccion { border-top: 1px solid var(--linea); padding-top: var(--e3); } .pagados-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e3); } .pagados-cuenta { font-size: 1rem; color: var(--tinta-suave); } .pagados-cuenta b { color: var(--tinta); } /* Con tope de ancho: a 1440 la cifra quedaba a un metro de su rótulo. */ .pagados-total, .lista-pagados, .mas-pagados { max-width: 64rem; } .pagados-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e3); margin: 0; } .pagados-total span { font-size: .875rem; font-weight: 600; color: var(--tinta-suave); } .pagados-total .n { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--verde-texto); } .pagados-semana .vacio { margin: 0; } .pagados-semana .acciones { margin: 0; } .pagados-semana .acciones button { min-height: 44px; font-size: 1rem; } .lista-pagados { list-style: none; margin: 0; padding: 0; } .fila-pagado { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "q c" "s s" "w w"; align-items: center; gap: 2px var(--e3); padding: var(--e2) 0; border-bottom: 1px solid var(--linea); } .fila-pagado:last-child { border-bottom: 0; } @media (min-width: 48rem) { .fila-pagado { grid-template-columns: minmax(0, 1fr) 9rem 8rem minmax(0, 1.2fr); grid-template-areas: "q s c w"; } } .fila-pagado .quien-pago { grid-area: q; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e2); min-width: 0; } .fila-pagado .nombre { font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; } /* Sin mayúsculas: esas son solo para los estados de dinero (pruebas/tema.js). */ .fila-pagado .tipo-pago { font-size: .875rem; font-weight: 600; color: var(--tinta-suave); } .fila-pagado .semana-pagada { grid-area: s; font-size: .875rem; color: var(--tinta); } .fila-pagado .n { grid-area: c; text-align: right; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; } .fila-pagado .cuando-pago { grid-area: w; font-size: .875rem; color: var(--tinta-suave); min-width: 0; overflow-wrap: anywhere; } .mas-pagados > summary { min-height: 44px; font-size: 1rem; font-weight: 600; } .marca-pagado { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px; border-radius: var(--pastilla); background: var(--verde-fondo); color: var(--verde-texto); font-size: .75rem; font-weight: 700; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; } .marca-pagado .icono { width: 16px; height: 16px; flex: none; } .tabla-choferes > .chofer-fila > summary .que .marca-pagado { flex: none; } /* En el teléfono el nombre no cabe junto a la marca ("Juan Pe…"): la marca baja a su propio renglón, bajo el nombre. */ @media (max-width: 44rem) { .tabla-choferes > .chofer-fila > summary .que:has(> .marca-pagado) { flex-wrap: wrap; } .tabla-choferes > .chofer-fila > summary .que > .marca-pagado { margin-left: 0; } } /* En el teléfono la columna de lugares del CDL no se ve: la marca sí. */ .cdl-uno-lugares:has(> .marca-pagado) { display: block; overflow: visible; } /* El rótulo entre las que faltan y las pagadas ("2 paid · 1,400.00"). */ .separa-pagados { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e3); list-style: none; margin: var(--e3) 0 0; padding: var(--e2) var(--e3); border-top: 2px solid var(--linea); font-size: .875rem; font-weight: 600; color: var(--tinta-suave); } .separa-pagados .todos-pagados { color: var(--verde-texto); font-weight: 700; } .separa-pagados button { min-height: 44px; font-size: .875rem; } .tabla-choferes > [data-pagado-de][hidden], .cdl-todos > [data-pagado-de][hidden], .lista-pago-flyers > [data-pagado-de][hidden] { display: none; } } @media screen { /* LAS NOTAS DE LOS CHOFERES (23 oct 2026). En el teléfono del CDL, "Note for the office" va debajo de Today con el mismo aire que las demás secciones (el bloque es el de grúa: .nota-dia). En Team › CDL, sus notas van separadas del control del día de encima. */ #seccion-nota-cdl { margin-top: var(--e4); } #cdl-notas { margin: var(--e4) 0 0; } } /* LOS GASTOS DEL CDL Y SU REMAINING BALANCE (23 oct 2026, src/cdl.js cdl_gasto). En el teléfono del CDL, "My money": el saldo grande (la UNA cifra grande del teléfono, 3.25rem, como el efectivo de Today del chofer de grúa), Fuel/Toll/Other en tres botones de pulgar y el formulario corto. En la ficha (Team › CDL), "Their money". La escala de cinco tamaños, nada en 800, todo dentro de @media screen. */ @media screen { body.una-mano .saldo-cdl b { font-size: 3.25rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .saldo-cdl { display: flex; flex-direction: column; gap: var(--e1); margin: var(--e2) 0 var(--e1); } .saldo-cdl .rotulo { font-size: 1rem; font-weight: 600; color: var(--tinta-suave); } .saldo-cdl.falta b { color: var(--rojo-texto); } .cuenta-dinero-cdl { margin: 0 0 var(--e3); font-size: 1rem; font-variant-numeric: tabular-nums; } .tipos-gasto-cdl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); margin: 0 0 var(--e3); } .tipos-gasto-cdl button { min-height: 56px; font-size: 1.25rem; font-weight: 700; } .tipos-gasto-cdl button[aria-pressed="true"] { background: var(--acento); color: var(--carbon); } .gasto-cdl { display: grid; gap: var(--e2); margin: 0 0 var(--e3); } .gasto-cdl .que-gasto-cdl { margin: 0; font-size: 1.25rem; font-weight: 700; } .gasto-cdl input[name="monto"] { font-size: 1.25rem; font-variant-numeric: tabular-nums; } .gasto-cdl .foto-gasto-cdl { font-size: 1rem; } .gastos-cdl li, .recibido-cdl li { grid-template-columns: auto minmax(0, 1fr) auto auto; } .gastos-cdl .monto, .recibido-cdl .monto { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; } .recibido-cdl li { color: var(--tinta-suave); } #pista-foto-viaje { margin: var(--e2) 0; } .dinero-cdl-ficha { margin: var(--e3) 0; } .dinero-cdl-ficha h4 { margin: 0 0 var(--e2); font-size: 1.25rem; font-weight: 700; } .saldo-ficha-cdl { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); margin: 0; font-size: 1rem; } .saldo-ficha-cdl b { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; } .saldo-ficha-cdl.falta b { color: var(--rojo-texto); } .dinero-cdl-ficha .cuenta { max-width: 40rem; } .dinero-cdl-ficha .cuenta td { font-size: .875rem; } .nota-saldo-cdl td { font-size: .875rem; color: var(--tinta-suave); padding-top: 0; } }