/* ── Diseño «Taxímetro», en claro (desde el 27/09/2026) ─────────────── Nació como el salpicadero de noche. Ella lo pidió en claro, y desde el 12/10/2026 lleva los colores de **Madrid Group Taxi**: el marino del logotipo como tinta y su rojo para lo urgente. El oscuro NO se tira: sigue entero, debajo, y sale solo cuando el móvil está en modo oscuro. Con sol se lee el claro; de madrugada en el coche una pantalla blanca deslumbra, y el móvil ya sabe qué hora es. Lo que no cambia: todo texto pasa de 4,5 de contraste, los bordes de control de 3, y solo UNA cosa grita en rojo. OJO con el ámbar y el verde: los de la pantalla oscura (#ffb020 y #3ddc84) dan 1,8 sobre blanco — invisibles. En claro tienen que ser oscuros, y por eso el panel de día es más sobrio. Es aritmética, no gusto: si los aclaras «para que se vean más», dejan de verse. Nunito para el texto y Fira Sans para las cifras y los rótulos. Nunito no lleva las cifras cuadradas que hacen falta en una columna de importes; Fira Sans sí, con `tabular-nums`. Las dos OFL, empotradas y servidas desde aquí: ni Google ni CDN. */ @font-face { font-family: "Nunito"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("/panel/fuente/nunito-var.woff2") format("woff2"); } /* Fira Sans se queda SOLO para tres signos que Nunito no trae (flechas y los tres puntos). Con el unicode-range el navegador únicamente la baja si aparece uno; sin esto los dibujaría la letra del sistema, con otro grosor y otro estilo en cada móvil. */ @font-face { font-family: "Fira Flechas"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("/panel/fuente/fira-sans-400.woff2") format("woff2"); unicode-range: U+2190, U+2192, U+22EE; } /* Las CIFRAS. Fue de ancho fijo hasta el 15/10/2026, y se cambió por una razón concreta: **su cero lleva un punto dentro**. Es lo normal en las letras de programar (para no confundir 0 con O), pero en un panel de taxi queda raro y a ella no le gustaba. Esa letra **no trae ninguna alternativa** para quitarlo —solo tiene dnom/frac/locl/numr—, así que no había forma. La de ahora es de la MISMA familia, así que el aspecto apenas cambia, su cero es limpio, y con `tabular-nums` mantiene lo único que de verdad aportaba la de ancho fijo: que todas las cifras midan igual y las columnas de importes y horas queden cuadradas. Es la MISMA que ya se baja para las flechas: no pesa nada nuevo. */ @font-face { font-family: "Fira Cifras"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("/panel/fuente/fira-sans-400.woff2") format("woff2"); } /* Contrastes calculados (WCAG) sobre --fondo #ffffff / --panel #f4f5f6: tinta 16,0 / 14,7 · suave 6,1 / 5,5 · tenue 5,2 / 4,8 · mal 5,9 / 5,4 · ámbar 6,4 / 5,9 · verde 5,4 / 4,9 · linea-2 (borde de campo) 3,3 / 3,0 · blanco sobre la banda roja 5,9 · la chapa 9,0. Si tocas un color, recalcúlalo: con sol, 4,5 es el mínimo de verdad. */ :root { --fondo: #ffffff; /* el blanco del logotipo */ --panel: #f4f5f6; /* la caja de un contador y la barra de pestañas */ --linea: #e4e7e9; /* separador normal */ --linea-2: #868f95; /* separador que se ve, para bordes de campo (3,3) */ --hueco: #ffffff; /* fondo de un campo de formulario */ --tinta: #13213c; /* el marino del logotipo */ --suave: #5b6469; --tenue: #666e73; /* el gris más apagado que aún pasa 4,5 en panel */ --mal: #c8102e; /* el rojo de la marca, para texto */ /* El rojo de Madrid Group Taxi. Lo único que grita. Sobre él, blanco (5,9) o --mal-claro para el texto pequeño. */ --mal-banda: #c8102e; --mal-claro: #ffe1e3; --ojo: #8a5200; /* ámbar «pronto»: caduca esta semana */ --bien: #147a43; /* verde «libre»: dónde estás y lo que va bien */ /* Lo que se PULSA lleva el marino del logotipo, no el verde: un botón es una acción, no un estado. El verde se queda para los estados («libre»). Texto encima: 16,0. El botón contra el fondo: 16,0; contra el panel 14,7. */ --accion: #13213c; --sobre-accion: #ffffff; /* Lo que antes iba a pelo en su regla. Vive aquí para que el modo oscuro pueda cambiarlo en un sitio y no haya que perseguirlo por el fichero. */ --sobre-banda: #ffffff; /* texto encima de la franja roja */ --chapa-fondo: #ffffff; /* la chapa que va sobre la franja */ --chapa-tinta: #8f1a1f; --rampa-fondo: #eceff1; /* el aviso de «coche con rampa» */ --rampa-tinta: #4f5a5f; --burbuja-ent: #f1f3f4; /* lo que escribe el cliente */ --burbuja-sal: #dff0e6; /* lo que contestamos nosotros */ --burbuja-sal-ts:#4f5a5f; /* la hora dentro de nuestra burbuja */ --tipo: "Nunito", "Fira Flechas", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --cifra: "Fira Cifras", "Fira Sans", system-ui, sans-serif; } /* ── El salpicadero de noche ──────────────────────────────────────── Sale cuando el móvil está en modo oscuro. Desde el 12/10/2026 el fondo es el MARINO de Madrid Group Taxi y la tinta su crema, y el ámbar es por fin el amarillo del logotipo: sobre marino da 8,4, y sobre blanco daba 2,1 — por eso en claro sigue siendo un ocre oscuro. Contrastes sobre --fondo #0f1a2e / --panel #17263f: tinta 15,5 / 13,5 · suave 7,9 / 6,8 · tenue 5,7 / 5,0 · mal 7,7 / 6,7 · ámbar 8,4 / 7,3 · verde 9,8 / 8,5 · linea-2 3,7 / 3,2 · blanco sobre la banda roja 5,9. */ @media (prefers-color-scheme: dark) { :root { --fondo: #0f1a2e; --panel: #17263f; --linea: #22334f; --linea-2: #5f7496; --hueco: #17263f; --tinta: #f7f1e6; --suave: #9fb0c4; --tenue: #8595aa; --mal: #ff8a8a; --mal-banda: #c8102e; --mal-claro: #ffdbdc; --ojo: #e8a83a; --bien: #3ddc84; /* De noche el marino ES el fondo, así que el botón se da la vuelta: la crema del logotipo con la tinta marina encima, igual que el logotipo. Texto 14,3 · el botón contra el fondo 15,5, contra el panel 13,5. */ --accion: #f7f1e6; --sobre-accion: #13213c; --sobre-banda: #ffffff; --chapa-fondo: #ffffff; --chapa-tinta: #8f1a1f; --rampa-fondo: #263038; --rampa-tinta: #c9d0d4; --burbuja-ent: #1d2328; --burbuja-sal: #173b2a; --burbuja-sal-ts:#b9d4c4; } } * { box-sizing: border-box; } /* «hidden» manda siempre: si no, el display de los botones lo anula. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--fondo); } body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--tipo); font-size: 16px; line-height: 1.42; font-variant-numeric: tabular-nums; letter-spacing: -.015em; -webkit-font-smoothing: antialiased; } a { color: inherit; } :focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; } /* ── Cabecera compacta ───────────────────────────────────────────── Una app no gasta un tercio de la pantalla en decir dónde estás: marca en letra de taxímetro arriba, título y ya. Respeta la muesca del iPhone. */ header { padding: max(14px, env(safe-area-inset-top)) 16px 0; max-width: 460px; margin: 0 auto; } .marca { display: flex; align-items: center; gap: 9px; padding-bottom: 14px; } /* Solo se fija el ALTO: el logotipo lleva el nombre y el eslogan dentro, y a 24 px —el alto que tenía el logotipo anterior— «MADRID GROUP TAXI» no se leía y «CABEN TODOS» era una mancha roja. A 36 se lee entero. El ancho va automático para no aplastarlo: este logotipo es bastante menos apaisado que el anterior (2,42 contra 4,07). */ .logotipo { flex: none; height: 36px; width: auto; display: block; } .oficio { font-size: .8125rem; font-weight: 400; color: var(--tenue); letter-spacing: 0; } .marca .salir { margin-left: auto; } .marca .salir button { padding: 0 0 2px; border: 0; border-bottom: 1px solid var(--linea-2); background: none; font: inherit; font-size: .8125rem; font-weight: 600; color: var(--suave); cursor: pointer; min-height: 0; border-radius: 0; } header h1 { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; } header h1.nombre { font-size: 1.6rem; letter-spacing: -.025em; } header .cuenta { margin: 6px 0 0; font-size: .875rem; font-weight: 400; color: var(--suave); } .volver { display: inline-block; margin-bottom: 10px; font-size: .875rem; font-weight: 600; color: var(--suave); text-decoration: none; } /* ── Pestañas, ABAJO, con iconos ────────────────────────────────────── Donde llega el pulgar con el móvil en una mano. Cinco como mucho (lo que cabe con el dedo): Pendientes y Facturas viven en «Más». La activa se enciende en el verde de «libre». Deja sitio a la barra del iPhone. */ nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 4px max(4px, calc((100% - 460px) / 2)) calc(4px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--linea); } nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; font-size: .8125rem; font-weight: 600; color: var(--suave); text-decoration: none; } nav a svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } nav a.on { color: var(--bien); } /* El número va sobre el icono. Blanco y no rojo: el rojo es solo para la franja de lo urgente, y cinco números rojos gritarían todos a la vez. */ nav .chapa { position: absolute; top: 3px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--tinta); color: var(--fondo); font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: .8125rem; font-weight: 500; line-height: 18px; text-align: center; } main { max-width: 460px; margin: 0 auto; padding: 0 16px calc(90px + env(safe-area-inset-bottom)); } main.ancho { padding: 0 0 calc(90px + env(safe-area-inset-bottom)); } /* para que la franja llegue a los bordes */ main.ancho > *:not(.banda) { padding-left: 16px; padding-right: 16px; } /* ── Lo encendido: lo único que grita ───────────────────────────────── Una tarjeta roja con la cifra grande y su botón. NUNCA hay dos: o quien lleva un cuarto de hora esperando respuesta, o lo vencido (y si hay varios vencidos, un recuento). Si algún día hubiera dos cosas en rojo, ninguna gritaría. Blanco sobre este rojo: 5,8; botón: 9,0. */ .banda { display: block; margin: 6px 16px 0; padding: 16px; border-radius: 10px; background: var(--mal-banda); color: var(--sobre-banda); text-decoration: none; } .banda .est { font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: .8125rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mal-claro); } .banda .que { margin-top: 8px; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; } .banda .cifra { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; } .banda .cifra .n { font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: 3.6rem; font-weight: 500; letter-spacing: -.03em; line-height: .9; } .banda .cifra .t { font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: 1.2rem; } .banda .quien { margin-top: 8px; font-size: .95rem; line-height: 1.35; } .banda .quien b { font-weight: 700; } .banda .ir { display: flex; align-items: center; justify-content: center; margin-top: 14px; min-height: 48px; border-radius: 8px; background: var(--chapa-fondo); color: var(--chapa-tinta); font-size: 1rem; font-weight: 700; } .ir-hoy { margin-top: 20px; width: 100%; } .conservar { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: .875rem; line-height: 1.45; color: var(--suave); } .conservar p { margin: 0 0 10px; } .conservar b { color: var(--ojo); } .conservar button { width: 100%; } /* Quitarse una conversación de encima. Va al final del todo y en botones secundarios: no es lo que vienes a hacer a esta pantalla, y el de borrar no se deshace. El rojo solo en ese, que es el que muerde. */ .cerrar { margin-top: 14px; display: grid; gap: 8px; } .cerrar button { width: 100%; } .secundario.mal { color: var(--mal); border-color: var(--mal); } .salir-mas { margin-top: 20px; } .salir-mas button { width: 100%; } .avisos { margin-top: 12px; padding: 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--linea); } .avisos b { display: block; } .avisos p { margin: 6px 0 12px; font-size: .88rem; line-height: 1.45; color: var(--suave); } .avisos button, .avisos form { width: 100%; margin: 8px 0 0; } /* Instrucciones para instalar: se esconden si ya se abre como app. */ .instalar { margin-top: 12px; padding: 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--linea); font-size: .9rem; line-height: 1.5; color: var(--suave); } .instalar b { color: var(--tinta); } .instalar ol { margin: 8px 0 0; padding-left: 20px; } @media (display-mode: standalone) { .instalar { display: none; } } /* Portada guardada, vista sin conexión: que se sepa que no está al día. */ .sin-red { margin: 6px 16px 0; padding: 10px 14px !important; border-radius: 8px; background: var(--panel); box-shadow: inset 3px 0 0 var(--ojo); font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: .875rem; color: var(--tinta); } /* ── Contadores de la portada: se leen como el taxímetro ────────────── Cajas planas (sin sombra ni degradado): la excepción consciente al «sin tarjetas» de agosto, porque una cifra suelta necesita su sitio. */ .rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .cont { display: flex; flex-direction: column; min-height: 128px; padding: 14px 14px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--panel); color: inherit; text-decoration: none; } .cont .et { display: flex; align-items: center; gap: 6px; font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); } .cont .et svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .cont .num { margin: 12px 0 auto; font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: 3rem; font-weight: 500; letter-spacing: -.03em; line-height: 1; } .cont .num small { margin-left: 4px; font-size: 1.1rem; letter-spacing: 0; } .cont .pie { margin-top: 8px; font-size: .875rem; line-height: 1.3; color: var(--suave); } .cont .pie b { color: var(--tinta); font-weight: 600; } .cont.cero .num { color: var(--tenue); } .cont.pronto .num { color: var(--ojo); } .cont.ancho { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; min-height: 0; } .cont.ancho .et { grid-column: 1 / -1; margin-bottom: 8px; } .cont.ancho .num, .cont.ancho .pie { margin: 0; } /* Lo que va bien, dicho una vez y en pequeño, con la luz verde de «libre». */ .resto { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 12px 2px 0; border-top: 1px solid var(--linea); font-size: .875rem; color: var(--suave); } .resto i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bien); } /* ── Rótulo de sección ── */ /* Ojo: «grupo-lic» acompaña a «rot» en la lista de licencias y NO tiene estilo propio a propósito — es solo el gancho con el que el filtro sabe qué rótulos esconder cuando se queda sin filas debajo. */ .rot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 32px 0 10px; font-size: .8125rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); } /* ── Fila: la pieza con la que se construye casi todo ── */ .fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; padding: 14px 0; border-top: 1px solid var(--linea); text-decoration: none; color: inherit; } .fila .que { font-size: 1rem; font-weight: 700; letter-spacing: -.025em; } .fila .quien { grid-column: 1; font-size: .875rem; color: var(--tenue); margin-top: 3px; } .fila .cuando { font-size: .8125rem; font-weight: 700; color: var(--tenue); white-space: nowrap; padding-top: 3px; } .fila.pronto .cuando { color: var(--ojo); } .fila.vencido .cuando { color: var(--mal); } .fila.pronto .que::before, .fila.vencido .que::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; vertical-align: .18em; margin-right: 9px; } .fila.pronto .que::before { background: var(--ojo); } .fila.vencido .que::before { background: var(--mal); } .fila .imp { font-size: .95rem; font-weight: 800; color: var(--tinta); padding-top: 1px; } .mas { display: block; padding: 14px 0; border-top: 1px solid var(--linea); font-size: .875rem; font-weight: 700; color: var(--suave); text-decoration: none; } /* ── Estado vacío: no un párrafo en el vacío, sino qué pasa ahora ── */ .vacio { padding: 40px 0 0; color: var(--suave); line-height: 1.6; font-size: .95rem; } .vacio b { display: block; margin-bottom: 6px; color: var(--tinta); font-size: 1.15rem; font-weight: 800; letter-spacing: -.03em; } .despejado { padding: 34px 0 0; } .despejado .t { font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em; } .despejado .s { margin-top: 8px; font-size: .9rem; color: var(--suave); line-height: 1.55; } /* ── Botones ── */ button, .btn { font: inherit; font-weight: 700; font-size: .95rem; border: 0; border-radius: 8px; padding: 14px 20px; min-height: 48px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } /* El botón que confirma o emite va en el marino de la marca (texto encima: 16,0). El secundario lleva un borde que se ve: --tenue, 4,7 (mínimo 3). */ .principal { background: var(--accion); color: var(--sobre-accion); } .principal:active { filter: brightness(.9); } .secundario { background: none; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tenue); } .secundario:active { background: var(--hueco); } .peligro { background: none; color: var(--mal); box-shadow: inset 0 0 0 1.5px var(--mal); } /* ── Avisos ── */ .aviso { margin-top: 18px; padding: 13px 15px; background: var(--panel); border-radius: 8px; box-shadow: inset 3px 0 0 var(--bien); font-size: .88rem; font-weight: 600; color: var(--tinta); } .ojo { margin-top: 18px; padding: 13px 15px; background: var(--panel); border-radius: 8px; box-shadow: inset 3px 0 0 var(--ojo); font-size: .875rem; color: var(--suave); line-height: 1.55; } .ojo b { color: var(--tinta); } /* ── Lista de licencias ── */ .buscar { margin-top: 22px; } .buscar input { width: 100%; } .filtros { display: flex; gap: 16px; margin-top: 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--linea); } .filtros::-webkit-scrollbar { display: none; } .filtros button { padding: 0 0 11px; min-height: 0; background: none; font-size: .8125rem; font-weight: 700; color: var(--tenue); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; } .filtros button.on { color: var(--tinta); border-bottom-color: var(--tinta); } /* Las de Reservas son ENLACES (cada vista es otra consulta), pero tienen que verse exactamente igual que las de Licencias: dos pestañas que se parecen a medias se leen como dos cosas distintas. */ .filtros .pest { padding: 0 0 11px; font: inherit; font-weight: 700; font-size: .95rem; color: var(--tenue); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; } .filtros .pest.on { color: var(--tinta); border-bottom-color: var(--tinta); } .lic { display: grid; grid-template-columns: 3px minmax(0, 1fr) auto; column-gap: 13px; align-items: start; padding: 15px 0; border-top: 1px solid var(--linea); text-decoration: none; color: inherit; } .lic .bar { grid-row: 1 / 3; align-self: stretch; background: transparent; } .lic.vencido .bar { background: var(--mal); } .lic.pronto .bar { background: var(--ojo); } .lic .nom { font-size: 1.02rem; font-weight: 700; letter-spacing: -.025em; } .lic .det { grid-column: 2; margin-top: 3px; font-size: .875rem; color: var(--tenue); } .lic .det > span + span::before { content: " · "; } .lic .est { font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: .8125rem; font-weight: 500; white-space: nowrap; padding-top: 3px; color: var(--suave); } .lic.vencido .est { color: var(--mal); } .lic.pronto .est { color: var(--ojo); } .lic.bien .est { font-weight: 600; } .sin-resultado { padding: 30px 0; color: var(--tenue); font-size: .9rem; } /* ── Expediente de una licencia ── */ .ficha { padding: 16px 0 0; font-size: .875rem; color: var(--suave); line-height: 1.6; } .bloque { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linea-2); } .bloque h2 { margin: 0 0 14px; font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: .8125rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); } .grupo { margin-bottom: 20px; } .grupo:last-child { margin-bottom: 0; } .grupo h3 { margin: 0 0 2px; font-size: .8125rem; font-weight: 700; color: var(--suave); } /* La matrícula, en letra de taxímetro: se lee como la placa. */ .dato-fuerte { font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: 1.7rem; font-weight: 500; letter-spacing: .02em; } .dato-flojo { margin-top: 3px; font-size: .875rem; color: var(--tenue); } .historia { margin: 8px 0 0; padding-left: 18px; font-size: .875rem; color: var(--tenue); } /* ── Un papel o un conductor ── */ .papel, .persona { border-top: 1px solid var(--linea); } /* En «Quién lleva qué» cada fila es un enlace al ticket. Sin esto saldrían todas subrayadas, que en una lista de doce es ruido: el color y el borde ya dicen que se puede tocar. */ a.papel { display: block; padding-block: 13px; min-height: 44px; text-decoration: none; color: inherit; } .papel > summary, .persona > summary { list-style: none; cursor: pointer; padding: 13px 0; } .papel > summary::-webkit-details-marker, .persona > summary::-webkit-details-marker { display: none; } .papel-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .papel-nombre { font-weight: 700; font-size: .96rem; letter-spacing: -.02em; } .papel-estado { flex: none; font-size: .8125rem; font-weight: 700; white-space: nowrap; color: var(--tenue); } .papel.urgente .papel-estado { color: var(--ojo); } .papel.vencido .papel-estado { color: var(--mal); } .papel-pie { display: block; margin-top: 3px; font-size: .875rem; color: var(--tenue); } .quitar { margin: 12px 0 16px; } .quitar button { width: 100%; } .renovar { display: flex; gap: 8px; margin-top: 12px; align-items: start; } .renovar input[type=date] { flex: 1; min-width: 0; } /* `.bloque button.principal` va al 100 %, y aquí eso aplastaba el campo de fecha hasta 30 px: el sitio para escribir la fecha desaparecía y solo quedaba el botón. Lleva `.bloque` delante a propósito — con la misma puntuación que la otra regla ganaría la de abajo, que es esa. */ .bloque .renovar button.principal { width: auto; flex: none; margin-top: 0; } .tocar > summary { cursor: pointer; margin-top: 16px; font-size: .875rem; font-weight: 800; color: var(--tinta); list-style: none; } .tocar > summary::-webkit-details-marker { display: none; } .tocar > summary::before { content: "+ "; color: var(--tenue); } .tocar[open] > summary::before { content: "− "; } .sin-venc { margin: 0; font-size: .875rem; color: var(--tenue); } /* ── Formularios ── */ /* Borde --tenue (4,7): un campo tiene que verse con sol (mínimo 3). */ input, select, textarea { font: inherit; width: 100%; padding: 13px 14px; color: var(--tinta); background: var(--hueco); border: 1.5px solid var(--tenue); border-radius: 8px; } input::placeholder, textarea::placeholder { color: var(--tenue); } input:focus, select:focus, textarea:focus { border-color: var(--accion); outline: none; } input[type=date] { color-scheme: dark; } .campo { display: block; margin: 16px 0 6px; font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); } .bloque button.principal, .alta button { width: 100%; margin-top: 20px; } /* ── Facturas emitidas ── */ table { width: 100%; border-collapse: collapse; } thead th { padding: 0 0 10px; text-align: left; font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: .8125rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); border-bottom: 1px solid var(--linea); } tbody td { padding: 14px 0; font-size: .92rem; border-top: 1px solid var(--linea); } .cadena { margin-top: 26px; padding-top: 16px; font-size: .875rem; color: var(--tenue); line-height: 1.55; border-top: 1px solid var(--linea); } .cadena.mal { color: var(--mal); font-weight: 600; } .num, .col-imp, .col-fecha { font-family: var(--cifra); font-variant-numeric: tabular-nums; } .num { font-weight: 500; } .cli { font-weight: 700; } .nif { font-size: .8125rem; color: var(--tenue); } .imp, th.imp { text-align: right; font-weight: 800; white-space: nowrap; } /* Una rectificativa se distingue de un vistazo: va en ámbar, que aquí significa «esto no es una factura normal, míralo». */ tbody tr.rect .num { color: var(--ojo); } tbody td .btn + .btn, tbody td .btn + .nif { margin-left: 8px; } .rectificar .aviso-serie { margin: 18px 0 0; padding: 13px 15px; background: var(--hueco); box-shadow: inset 3px 0 0 var(--ojo); font-size: .875rem; color: var(--suave); line-height: 1.55; } .rectificar .aviso-serie b { color: var(--tinta); } .rectificar .original { padding: 16px 0 0; font-size: .9rem; color: var(--suave); line-height: 1.6; } .rectificar .original b { color: var(--tinta); } .opciones { margin-top: 8px; } .opciones label { display: flex; align-items: flex-start; gap: 11px; padding: 13px 0; border-top: 1px solid var(--linea); cursor: pointer; } .opciones input[type=radio] { width: 20px; height: 20px; margin-top: 2px; padding: 0; flex: none; accent-color: var(--tinta); } .opciones .q { font-weight: 700; font-size: .95rem; } .opciones .p { display: block; margin-top: 3px; font-size: .875rem; color: var(--tenue); } /* Los botones pequeños de la tabla (Descargar, Rectificar), iguales. */ .btn.pdf, tbody td a.btn { padding: 7px 12px; min-height: 36px; font-size: .875rem; background: none; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tenue); } /* Debajo de la pantalla ancha, cada factura es una ficha en vertical. El corte va a 900 px, el mismo que el resto del panel: entre 561 y 899 el ancho útil son 420 px y seis columnas no caben — se montaban unas encima de otras. */ @media (max-width: 899px) { thead { display: none; } tbody tr { display: block; padding: 14px 0; border-top: 1px solid var(--linea); } tbody td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; } tbody td::before { content: attr(data-l); font-family: var(--cifra); font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: .06em; font-size: .8125rem; font-weight: 600; color: var(--tenue); flex: none; } tbody td .cel { text-align: right; } } /* ── Los papeles escaneados ── */ .doc { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linea); font-size: .88rem; } .doc:first-child { border-top: 0; } .doc-ver { color: var(--tinta); font-weight: 700; flex: 1; min-width: 0; overflow-wrap: anywhere; } .doc-det { font-size: .8125rem; color: var(--tenue); flex: none; font-variant-numeric: tabular-nums; } .doc form { flex: none; } .doc-quitar { background: none; color: var(--tenue); padding: 0; min-height: 0; font-size: .8125rem; font-weight: 700; text-decoration: underline; } .subir input[type=file] { padding: 11px 12px; font-size: .875rem; color: var(--suave); } /* ── Pendientes de aprobar ── */ /* Cada solicitud en su caja plana, como los tickets de Reservas. */ .tarjeta { margin-top: 12px; padding: 14px; border: 1px solid var(--linea); border-radius: 10px; background: var(--panel); } .tarjeta.urgente .cliente::before, .tarjeta.atascada .cliente::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: .16em; margin-right: 9px; } .tarjeta.urgente .cliente::before { background: var(--mal); } .tarjeta.atascada .cliente::before { background: var(--ojo); } .cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .cliente { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; } .importe { font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 500; letter-spacing: -.03em; white-space: nowrap; } .meta { margin-top: 6px; font-size: .875rem; color: var(--tenue); line-height: 1.5; } .espera { margin-top: 9px; display: inline-block; font-size: .8125rem; font-weight: 700; color: var(--tenue); } .espera.tarde { color: var(--mal); } .nuevo { display: inline-block; margin-left: 8px; font-size: .8125rem; font-weight: 700; color: var(--ojo); } .dijo { margin-top: 10px; font-size: .875rem; color: var(--suave); line-height: 1.5; font-style: italic; } .historial { margin-top: 8px; font-size: .875rem; color: var(--tenue); } .palanca { display: flex; align-items: flex-start; gap: 11px; padding: 13px 0; border-top: 1px solid var(--linea); cursor: pointer; } .palanca input[type=checkbox] { width: 20px; height: 20px; margin-top: 2px; padding: 0; flex: none; accent-color: var(--tinta); } /* El aviso de «no puedes coger nada»: el mismo bloque que `.ojo` pero en rojo, porque aquí sí es un freno y no un consejo. Es lo único rojo de esta pantalla. */ .ojo.mal { border-left-color: var(--mal); } .ojo.mal b { color: var(--mal); } /* El botón de vaciar la lista de quien espera, dentro de su propio aviso. */ .atendidas { margin: 10px 0 0; } .atendidas button { margin: 0; } /* El precio al cliente, debajo de su campo: el botón y, cuando contesta, lo que ha dicho. El SÍ en verde y el NO en gris, no en rojo: que un cliente diga que no es una respuesta, no una avería. */ .env-precio { margin: 0; padding: 10px 14px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .env-precio button { margin: 0; } .env-precio .ya { font-size: .85rem; color: var(--tenue); } .resp-precio { margin: 0; padding: 12px 14px 0; font-size: .9rem; line-height: 1.5; color: var(--suave); } .resp-precio b { color: var(--bien); } .resp-precio.no b { color: var(--tenue); } .resp-precio span { display: block; color: var(--tenue); } /* La tarjeta en garantía, debajo del precio. El verde solo cuando está retenida de verdad: es lo único que significa «esta reserva está garantizada». */ .env-garantia { margin: 0; padding: 10px 14px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .env-garantia button { margin: 0; } .env-garantia .ya { font-size: .85rem; color: var(--tenue); } .garantia { margin: 0; padding: 12px 14px 0; font-size: .9rem; line-height: 1.5; color: var(--suave); } .garantia b { color: var(--tinta); } .garantia.ok b { color: var(--bien); } .garantia span { display: block; color: var(--tenue); } .garantia-acciones { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 0; } .garantia-acciones form { flex: 1 1 auto; margin: 0; } .garantia-acciones button { width: 100%; margin: 0; } /* La comisión: el campo, el «%» y el botón en una línea. El «%» al lado del número y no dentro del placeholder, porque el placeholder desaparece justo cuando escribes — que es cuando hace falta saber en qué unidad. */ .comision { margin: 0; padding-top: 13px; border-top: 1px solid var(--linea); } .porcien { display: flex; align-items: center; gap: 8px; } .porcien input { width: 5.5em; flex: none; margin: 0; text-align: right; font-family: var(--cifra); font-variant-numeric: tabular-nums; } .porcien span { font-weight: 700; margin-right: 4px; } .porcien button { margin: 0; } .donde { margin: 10px 0 0; font-size: .875rem; color: var(--tenue); overflow-wrap: anywhere; } .donde b { color: var(--tinta); font-weight: 700; } .tray { margin: 12px 0 0; padding-left: 18px; font-size: .9rem; line-height: 1.55; color: var(--suave); } .acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .acciones form { flex: 1 1 auto; margin: 0; } .acciones button { width: 100%; } .sel-licencia { margin-bottom: 8px; } /* ── Reservas: tickets ──────────────────────────────────────────────── La hora grande en letra de taxímetro y el trayecto de punto a punto, como se despacha un servicio. Lo leído va arriba; el mensaje original, siempre debajo (es lo que manda). Contrastes: texto del recuadro de la rampa 8,6 sobre #263038; borde de los botones 4,7 (controles: mínimo 3). */ .ticket { margin-top: 12px; overflow: hidden; border: 1px solid var(--linea); border-radius: 10px; background: var(--panel); } .ticket .tira { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; border-bottom: 1px dashed var(--linea-2); font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: .8125rem; letter-spacing: .04em; color: var(--suave); } .ticket .tira b { font-weight: 500; color: var(--tinta); white-space: nowrap; } .ticket .tira b.tarde { color: var(--ojo); } .ticket .med { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 14px; } .ticket .hora { margin: 0; font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: 1.9rem; font-weight: 500; letter-spacing: -.02em; line-height: 1; color: var(--tinta); } .ticket .hora small { display: block; margin-top: 6px; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); } .ticket .sin { color: var(--tenue); } .ruta { position: relative; padding-left: 18px; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; } .ruta::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; background: var(--linea-2); } .ruta p { position: relative; margin: 0; } .ruta p + p { margin-top: 10px; } .ruta p::before { content: ""; position: absolute; left: -18px; top: 5px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--panel); } .ruta p:last-of-type::before { background: var(--tinta); } .ruta.sin-ruta { padding-left: 0; } .ruta.sin-ruta::before, .ruta.sin-ruta p::before { display: none; } .ruta .pers { display: block; margin-top: 10px; font-size: .875rem; color: var(--suave); } .ticket .dijo { margin: 0 14px; padding: 10px 0 0; border-top: 1px solid var(--linea); font-size: .88rem; line-height: 1.45; color: var(--suave); white-space: pre-wrap; overflow-wrap: anywhere; } .ticket .dijo span { display: block; margin-bottom: 4px; font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); white-space: normal; font-style: normal; } .rampa { display: flex; gap: 10px; align-items: flex-start; margin: 12px 14px 0; padding: 10px 12px; border-radius: 8px; background: var(--rampa-fondo); font-size: .92rem; line-height: 1.35; } .rampa svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--ojo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .rampa b { display: block; font-weight: 700; } .rampa span, .rampa .meta { color: var(--rampa-tinta); } .rampa .meta { margin-top: 4px; font-size: .875rem; } /* Lo que el conductor toca en la calle: llegar, llamar, WhatsApp. Van en fila y se reparten el ancho; a 375 px caben los tres. */ .acciones-calle { display: flex; gap: 8px; padding: 0 14px 14px; } .acciones-calle .bt { flex: 1; min-height: 48px; font-size: .9375rem; } /* El paso del viaje: un botón grande y uno pequeño de deshacer. Se pulsa con el coche parado, a veces de noche. */ .marcha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 14px 14px; } .marcha form { margin: 0; flex: 1; } .marcha .va { width: 100%; font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); } .marcha .bt.no { flex: 0 0 auto; padding: 0 14px; } .botones { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; padding: 14px; } .botones.sin-contestar { grid-template-columns: 1fr; } .botones form { margin: 0; } .botones form.no { grid-column: 1 / -1; } .bt { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border-radius: 8px; border: 1.5px solid var(--tenue); background: transparent; color: var(--tinta); font-size: 1rem; font-weight: 700; text-decoration: none; } .bt svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .bt.si { background: var(--accion); border-color: var(--accion); color: var(--sobre-accion); } .bt.no { min-height: 44px; border: 0; color: var(--suave); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* ── Conversaciones (diseño Taxímetro, fase 4) ───────────────────────── Contrastes: tinta sobre la burbuja entrante 14,4 y sobre la saliente 11,2; la hora de la burbuja saliente 7,8. Esperar respuesta va en ámbar; si ya es tarde, el TEXTO pasa a rojo (no la fila: el rojo que grita es uno solo y está en la portada). */ .lista { margin-top: 8px; } .fila-conv { display: block; padding: 14px 0; border-top: 1px solid var(--linea); text-decoration: none; color: inherit; } .fila-conv.espera-persona { box-shadow: inset 3px 0 0 var(--ojo); padding-left: 14px; } .linea { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .tel { font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: .98rem; font-weight: 500; } .fila-conv .hora { font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: .8125rem; color: var(--suave); white-space: nowrap; } .pide { display: inline-block; margin-top: 6px; font-size: .8125rem; font-weight: 700; color: var(--ojo); } .fila-conv.espera-persona.tarde .pide { color: var(--mal); } .ext { margin-top: 5px; font-size: .88rem; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ext .yo { color: var(--tinta); font-weight: 600; } /* Cabecera de una conversación: volver, el número y de qué va. */ .cab-conv { display: flex; align-items: center; gap: 4px; margin-left: -12px; } .atras { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; color: var(--tinta); } .atras svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .cab-conv h1.nombre { font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 500; letter-spacing: 0; } .cab-conv .cuenta { margin: 2px 0 0; font-size: .875rem; } /* La ventana de 24 h de WhatsApp: una barra que se vacía. Verde mientras sobra; ámbar en las dos últimas horas; cerrada, vacía. */ .ventana { margin-top: 12px; padding: 10px 0 12px; border-bottom: 1px solid var(--linea); } .ventana .l { display: flex; justify-content: space-between; gap: 10px; font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); } .ventana .l b { font-weight: 500; color: var(--tinta); } .ventana svg { display: block; width: 100%; height: 6px; margin-top: 8px; } .ventana .fondo { fill: var(--linea); } .ventana .lleno { fill: var(--bien); } .ventana.poca .lleno { fill: var(--ojo); } .ventana.poca .l b { color: var(--ojo); } .ventana p { margin: 7px 0 0; font-size: .875rem; line-height: 1.35; color: var(--suave); } .chat { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 0; } .msg { display: flex; } .msg.sal { justify-content: flex-end; } .burbuja { max-width: 82%; padding: 9px 12px 7px; border-radius: 14px; font-size: .98rem; line-height: 1.38; white-space: pre-wrap; overflow-wrap: anywhere; } .msg.ent .burbuja { background: var(--burbuja-ent); border-bottom-left-radius: 4px; } .msg.sal .burbuja { background: var(--burbuja-sal); color: var(--tinta); border-bottom-right-radius: 4px; } .burbuja .ts { display: block; margin-top: 5px; font-family: var(--cifra); font-variant-numeric: tabular-nums; font-size: .8125rem; letter-spacing: .03em; text-align: right; color: var(--suave); } .msg.sal .burbuja .ts { color: var(--burbuja-sal-ts); } .estado { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linea-2); font-size: .88rem; color: var(--suave); } .estado .pausa { font-weight: 800; color: var(--ojo); } /* El reparto: una línea, dedo de 44 px, y el precio estrecho porque son cuatro cifras y así se ve que es un importe y no otro campo de texto. */ .reparto { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--linea); } .reparto select { flex: 1 1 10rem; min-height: 44px; } .reparto input { width: 5.5rem; min-height: 44px; text-align: right; font-family: var(--cifra); font-variant-numeric: tabular-nums; } .reparto button { min-height: 44px; } .bt.apuntar { display: inline-flex; margin-top: 10px; } .tira .mio, .botones .mio { color: var(--suave); font-size: .875rem; } .tira .lleva { flex: 1 1 auto; text-align: center; color: var(--suave); font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tira .lleva i { font-style: normal; color: var(--tenue); } .fila-conv .tuya { display: block; margin-top: .15rem; font-size: .8rem; font-weight: 700; color: var(--ojo); } .estado button { white-space: nowrap; padding: 10px 14px; min-height: 44px; font-size: .875rem; } /* Escribir: caja redonda y el botón de enviar, al alcance del pulgar. */ .responder { margin-top: 14px; } .responder .caja { display: flex; gap: 8px; align-items: flex-end; } .responder textarea { flex: 1; min-height: 48px; resize: vertical; border-radius: 24px; padding: 13px 16px; } .responder .enviar { flex: none; width: 48px; height: 48px; min-height: 0; padding: 0; border-radius: 50%; background: var(--accion); color: var(--sobre-accion); } .responder .enviar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .responder .nota { display: block; margin-top: 8px; font-size: .8125rem; color: var(--suave); line-height: 1.45; } .cerrada { margin-top: 16px; padding: 14px 15px; background: var(--hueco); box-shadow: inset 3px 0 0 var(--ojo); font-size: .875rem; line-height: 1.55; color: var(--suave); } .cerrada b { color: var(--tinta); } /* ── Entrar ── */ body.entrar { display: grid; place-items: center; min-height: 100svh; padding: 24px; } .acceso { width: 100%; max-width: 360px; } .acceso .marca { display: block; padding-bottom: 30px; } .acceso .oficio { display: block; margin-top: 8px; font-size: .875rem; } .acceso .rec { display: flex; align-items: center; gap: 11px; margin: 20px 0 24px; font-size: .88rem; color: var(--suave); } .acceso input[type=checkbox] { width: 20px; height: 20px; padding: 0; accent-color: var(--tinta); } .acceso button { width: 100%; } .acceso .campo { margin-top: 0; } /* La etiqueta va en mayúsculas y apretada; la pista no, que es una frase. */ .campo .pista { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .85; } .mal-acceso { margin-bottom: 20px; padding: 13px 15px; background: var(--hueco); box-shadow: inset 3px 0 0 var(--mal); color: var(--tinta); font-size: .875rem; font-weight: 600; } .alta-lic { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--linea-2); } .alta-lic > summary { cursor: pointer; font-size: .88rem; font-weight: 800; color: var(--tinta); list-style: none; } .alta-lic > summary::-webkit-details-marker { display: none; } .alta-lic > summary::before { content: "+ "; color: var(--tenue); } .alta-lic[open] > summary::before { content: "− "; } /* ── Pantalla grande ─────────────────────────────────────────────────── El móvil manda: por debajo de 900 px aquí no se toca NADA, así que este bloque no puede romper el uso de diario. En el Mac el panel es un vistazo mientras programa, no un puesto de trabajo: la única meta es que se vea todo de un golpe sin bajar. Por eso no hay menú lateral ni tablas editables — sería trabajo para algo que ahí no se hace. */ @media (min-width: 900px) { header, main { max-width: 1180px; padding-left: 40px; padding-right: 40px; } main.ancho > *:not(.banda) { padding-left: 40px; padding-right: 40px; } .banda { margin: 6px 40px 0; } header h1 { font-size: 2.4rem; } /* «Hoy»: las secciones dejan de ir en fila y se reparten en columnas. */ main.ancho { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; align-items: start; } main.ancho > .sin-red { margin: 6px 40px 0; } main.ancho > .banda, main.ancho > .rejilla, main.ancho > .sin-red, main.ancho > .resto { grid-column: 1 / -1; } .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cont.ancho { grid-column: auto; display: flex; } .cont.ancho .et { margin-bottom: 0; } .cont.ancho .num { margin: 12px 0 auto; } .cont.ancho .pie { margin-top: 8px; } main.ancho > .despejado { grid-column: 1 / -1; } .bh { min-width: 0; } .bh .rot { padding-top: 34px; } /* La lista de licencias pasa a columnas de verdad. Cada dato va a la suya por su clase: si a una licencia le falta el coche, las demás siguen cuadradas. */ /* Cada licencia es su PROPIA rejilla, así que las columnas solo quedan alineadas entre filas si todos los anchos son deterministas. Con la última en «auto» cambiaba de ancho según el texto del estado y descuadraba las de al lado. */ .lic { grid-template-columns: 3px minmax(0, 1.4fr) 120px minmax(0, 1fr) 130px 90px 140px; align-items: baseline; padding: 16px 0; } .lic .bar { grid-row: 1; } .lic .nom { grid-column: 2; } .lic .det { display: contents; } .lic .det > span + span::before { content: none; } .lic .d-mat { grid-column: 3; } .lic .d-coche { grid-column: 4; } .lic .d-cond { grid-column: 5; } .lic .d-com { grid-column: 6; font-family: var(--cifra); font-variant-numeric: tabular-nums; } .lic .d-vacio { grid-column: 3 / 7; } /* Sin fila explícita, un dato con columna asignada se cae a una fila nueva y la licencia ocupa el doble de alto. */ .lic .det > span { grid-row: 1; font-size: .875rem; color: var(--tenue); } .lic .est { grid-column: 7; text-align: right; padding-top: 0; } /* El expediente: coche y conductores a un lado, los papeles al otro. */ .ficha { grid-column: 1 / -1; } main.expediente { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; } main.expediente > .aviso { grid-column: 1 / -1; } .bloque.coche, .bloque.conductores { grid-column: 1; } .bloque.papeles { grid-column: 2; grid-row: 2 / span 3; } /* Los formularios anchos del todo se leen mal: se acotan. */ /* Las facturas, cuadradas. La tabla reparte los anchos ella sola según el contenido, así que cada pantalla salía con las columnas en un sitio distinto y Total y Pago acababan pegadas («1.350,75 €TARJETA»). Con anchos fijos las columnas caen siempre donde deben y el cliente se queda con lo que sobra. */ table { table-layout: fixed; } thead th { padding-right: 24px; } tbody td { padding-right: 24px; vertical-align: top; } thead th:last-child, tbody td:last-child { padding-right: 0; } .col-num { width: 72px; } /* Con varias licencias, el número solo no identifica nada: debajo va de quién es, y la columna necesita sitio para el nombre. */ .con-licencia .col-num { width: 200px; } .col-fecha { width: 122px; } .col-imp { width: 144px; } .col-pago { width: 132px; } .col-pdf { width: 250px; } /* El botón lleva su propio relleno arriba, así que sin esto su texto cae unos píxeles por debajo del de la fila y la línea se ve torcida. */ tbody td.col-pdf { padding-top: 7px; } .alta form, .bloque form { max-width: 460px; } .responder, .estado, .chat { max-width: 680px; } } @media (max-width: 380px) { header, main { padding-left: 16px; padding-right: 16px; } main.ancho > *:not(.banda) { padding-left: 16px; padding-right: 16px; } .banda { padding-left: 16px; padding-right: 16px; } nav { gap: 10px; } nav a { font-size: .8125rem; } header h1 { font-size: 2.6rem; } } /* ── Accesibilidad (21/09/2026) ───────────────────────────────────────── Letra: nada por debajo de 13 px (los rótulos) ni de 14 px (el texto): con sol y con prisa, 11 px no se lee. Dedo: todo lo que se toca mide al menos 44 px de alto, que es lo que pide Apple y WCAG 2.5.5. */ .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } nav .chapa { font-size: .75rem; } .marca .salir button { min-height: 44px; min-width: 44px; padding: 0 6px; border-bottom: 0; text-decoration: underline; text-decoration-color: var(--linea-2); text-underline-offset: 5px; } .volver { display: inline-flex; align-items: center; min-height: 44px; } summary { padding-block: 13px; } button, .btn, .btn.pdf, tbody td a.btn { min-height: 44px; } input[type=checkbox], .palanca input[type=checkbox], .acceso input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--accion); } label:has(> input[type=checkbox]) { min-height: 44px; } input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 2px var(--accion); } .novedades { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 10px 12px 10px 16px; border: 1.5px solid var(--bien); border-radius: 10px; background: var(--panel); font-weight: 600; } .novedades button { width: auto; flex: none; padding: 0 16px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }