/* Fleet Management - base styles, mobile first */ :root{ --bg: #f4f6f8; --card: #ffffff; --ink: #1c2530; --muted: #64748b; --line: #dde3ea; --brand: #0f4c81; --ok: #0f7b45; --miss: #b02a2a; --due: #b06a00; } *{ box-sizing: border-box; } body{ margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; } /* Top bar with the module name and the signed in user */ .fm-header{ background: var(--brand); color: #fff; padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; } .fm-header h1{ margin: 0; font-size: 19px; letter-spacing: .2px; } .fm-header-brand{ display: flex; align-items: center; gap: 10px; } .fm-header-logo{ width: 32px; height: 32px; border-radius: 7px; display: block; } /* flex + nowrap: username, badge, language flag and Log out always sit on one row, they never stack into their own lines like text would */ .fm-user{ font-size: 13px; opacity: .95; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; white-space: nowrap; } .fm-user a{ color: #fff; } /* The username itself is a button now (§2.4): opens the "change my password" modal. Styled to still read as plain text, not a normal button, so it doesn't visually compete with Log out. */ .fm-btn-mi-cuenta{ background: none; border: none; color: #fff; font: inherit; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .fm-btn-logout{ background: var(--miss); color: #fff; padding: 5px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 600; text-decoration: none; } .fm-btn-logout:hover{ background: #8f2222; } .fm-badge{ background: rgba(255,255,255,.22); border-radius: 10px; padding: 2px 8px; font-size: 11px; margin-left: 6px; white-space: nowrap; } /* Horizontal scrolling tab bar so it survives a 390px phone */ .fm-nav{ background: #fff; border-bottom: 1px solid var(--line); display: flex; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .fm-tab{ padding: 12px 16px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; border-bottom: 3px solid transparent; cursor: pointer; } .fm-tab-active{ color: var(--brand); border-bottom-color: var(--brand); } .fm-tab-group{ display: inline-flex; align-items: center; } /* Responsive tab bar. The data entry modules are flat tabs on a desktop and collapse into the "Capture" dropdown on a phone, where the bar would not fit. Both are printed in the HTML; only one set is ever visible. */ .fm-only-mobile{ display: none; } @media (max-width: 820px){ .fm-only-desktop{ display: none; } .fm-only-mobile{ display: inline-flex; } } .fm-caret{ font-size: 10px; margin-left: 5px; opacity: .75; } /* Dropdown panel. Fixed so the horizontally scrolling tab bar cannot clip it, positioned under its tab by the script. */ .fm-drop-menu{ position: fixed; display: none; z-index: 60; min-width: 176px; background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 10px 28px rgba(19,32,48,.16); padding: 6px; } .fm-drop-menu.fm-open{ display: block; } .fm-drop-item{ display: block; padding: 9px 12px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; } .fm-drop-item:hover{ background: #eef2f7; } .fm-drop-active{ background: #e9f0f7; color: var(--brand); font-weight: 700; } /* No side margin: the app is mostly wide tables, so it should use the full width it's given instead of the ~15% each side a centered max-width left empty. Mobile was already full width, this only changes desktop/PC. */ .fm-main{ padding: 16px; } /* Collapsible instruction panel at the top of every module */ .fm-help{ background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 16px; } .fm-help summary{ display: flex; align-items: center; gap: 9px; padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--brand); cursor: pointer; list-style: none; border-radius: 10px; -webkit-user-select: none; user-select: none; } /* Hide the default triangle so the caret can be styled */ .fm-help summary::-webkit-details-marker{ display: none; } .fm-help summary::marker{ content: ""; } .fm-help summary:hover{ background: #f6f9fc; } .fm-help-ico{ font-size: 11px; line-height: 1; transition: transform .18s ease; } .fm-help[open] .fm-help-ico{ transform: rotate(180deg); } .fm-help[open] summary{ border-radius: 10px 10px 0 0; } .fm-help-body{ border-top: 1px solid var(--line); padding: 12px 16px 14px; color: var(--muted); font-size: 14px; line-height: 1.65; } .fm-help-body strong{ color: var(--ink); } /* Content cards */ .fm-card{ background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px; } .fm-card h2{ margin: 0 0 10px; font-size: 16px; } .fm-card p{ margin: 0 0 8px; color: var(--muted); line-height: 1.55; } .fm-warn{ border-left: 4px solid #d98324; } /* The content area dims while an AJAX swap is in flight */ .fm-loading{ opacity: .45; pointer-events: none; transition: opacity .15s; } /* Inline feedback after an action */ .fm-notice, .fm-error{ border-radius: 8px; padding: 11px 14px; margin-bottom: 14px; font-size: 14px; } .fm-notice{ background: #e6f4ec; border: 1px solid #b6ddc7; color: #15613c; } .fm-error{ background: #fbeaea; border: 1px solid #eec4c4; color: #8f2222; } .fm-error a{ color: #8f2222; } /* Report's clock strip (§9.85): the live time in each timezone Fast Ice actually operates in, right at the top of the page. */ .fm-cintilla-horas{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .fm-hora-zona{ background: #eef2f7; border: 1px solid #d7dee6; border-radius: 8px; padding: 8px 12px; font-size: 13.5px; color: var(--muted); } .fm-hora-zona strong{ color: var(--ink); } /* Tables must scroll inside their own box, never push the page sideways */ .fm-table{ width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; margin-bottom: 14px; } /* §9.283 (cliente, 2026-10-14): "cuando la tabla crece mucho no hay scroll horizontal, me gustaría que siempre se viera la barra" — overflow-x:auto de arriba ya scrollea, pero el navegador puede pintarlo como una barra delgadísima tipo overlay que se esconde hasta que alguien le atina a pasar el mouse encima (normal en Mac/trackpad) — nadie se da cuenta de que hay más columnas. Estilo explícito para que SIEMPRE se vea una barra de verdad en cuanto la tabla de verdad se desborda, sin depender de la configuración de scrollbar del sistema operativo. Chrome/Safari/Edge (WebKit/Blink): */ .fm-table::-webkit-scrollbar, .fm-scroll-espejo::-webkit-scrollbar{ height: 10px; } .fm-table::-webkit-scrollbar-track, .fm-scroll-espejo::-webkit-scrollbar-track{ background: var(--line); border-radius: 6px; } .fm-table::-webkit-scrollbar-thumb, .fm-scroll-espejo::-webkit-scrollbar-thumb{ background: var(--muted); border-radius: 6px; } .fm-table::-webkit-scrollbar-thumb:hover, .fm-scroll-espejo::-webkit-scrollbar-thumb:hover{ background: var(--ink); } /* Firefox: */ .fm-table, .fm-scroll-espejo{ scrollbar-width: thin; scrollbar-color: var(--muted) var(--line); } /* §9.285 (cliente, 2026-10-14): "que se vea tanto abajo como arriba de la tabla" — la barra de overflow-x:auto de .fm-table de arriba nomás pinta hasta ABAJO de toda la tabla (que puede ser larguísima, cientos de filas), nunca a la vista sin bajar hasta el fondo primero. Esta es una segunda barra "espejo" ARRIBA, sincronizada con la de abajo por JS (fmSincronizarScrollEspejo()) — un div vacío tan ancho como el verdadero scrollWidth de la tabla, nomás para tener algo de qué agarrarse a esa altura.*/ .fm-scroll-espejo{ overflow-x: auto; overflow-y: hidden; height: 14px; margin-bottom: 2px; } .fm-scroll-espejo > div{ height: 1px; } .fm-table th, .fm-table td{ padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; vertical-align: middle; } .fm-table th{ color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; } /* Incidents' description is a mandatory free-text sentence, unlike every other column here — left as nowrap it stretches wide enough to push the Reply/Resolve buttons in the last column off-screen. Wrap and cap only this one cell instead of touching the shared nowrap rule every other module still relies on. */ .fm-table td.fm-td-wrap{ white-space: normal; max-width: 320px; } .fm-ok{ color: var(--ok); font-weight: 600; } .fm-miss{ color: var(--miss); font-weight: 600; } .fm-warn-text{ color: var(--due); font-weight: 600; } /* Report's Maintenance widget (§9.7): clickable, sortable column headers */ .fm-sortable th{ cursor: pointer; user-select: none; } .fm-sortable th:hover{ color: var(--brand); } /* Blacklane's totals row (§9.110): not a real header, no sort cursor/hover */ .fm-blacklane-totales th{ cursor: default; font-weight: 600; } .fm-blacklane-totales th:hover{ color: inherit; } /* Blacklane's Pickup/Dropoff cells (§9.110): truncated to 6 words by default, click expands to the full address stored in data-full. */ .fm-celda-truncable{ cursor: pointer; } .fm-celda-truncable:hover{ text-decoration: underline; } /* Prev/Next pager (§9.22), injected by JS right after any .fm-table with more than 50 rows — centered so it reads as the table's own footer. */ .fm-paginacion{ display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; } .fm-pagina-info{ font-size: 13px; color: var(--muted); } /* Report (§9.7): two columns of cards instead of one full-width stack. A card only grows up to 500px — short widgets (Trips, money) stay their own natural height instead of stretching to match a tall neighbor, and only a widget that actually exceeds 500px (Maintenance) scrolls internally. min-width: 0 overrides the grid/flex item default of min-width: auto — without it a wide table (long rows, many columns) forces the whole grid column to stretch past the card's own box instead of scrolling inside it, which is what was pushing the layout wider than the screen on mobile. */ .fm-report-grid{ display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; } @media (min-width: 900px){ .fm-report-grid{ grid-template-columns: 1fr 1fr; } } .fm-report-card{ max-height: 500px; display: flex; flex-direction: column; min-width: 0; } .fm-report-body{ flex: 1; overflow-y: auto; min-height: 0; min-width: 0; } /* Report's money widget: a row of simple stat tiles, no chart yet (§12) */ .fm-report-tiles{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (min-width: 640px){ .fm-report-tiles{ grid-template-columns: repeat(4, 1fr); } } .fm-report-tile{ display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; } .fm-report-tile-label{ font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); } .fm-report-tile-value{ font-size: 20px; font-weight: 700; } .fm-report-tile-pct{ font-size: 14px; font-weight: 600; opacity: .75; } /* Report's Performance widget: the driver/vehicle/location grouping toggle. The active choice keeps the normal brand-blue button; the other two get this muted look so it reads like a segmented control, not three buttons of equal weight. */ .fm-toggle-group{ display: flex; gap: 6px; flex-wrap: wrap; } .fm-btn-toggle{ background: #eef2f7; border-color: #eef2f7; color: var(--ink); } .fm-btn-toggle:hover{ background: #dde6ef; } /* Revenue calendar's "combined" toggle button (§9.88): car + plus + person drawn together, shrunk down so all three fit in one small button instead of a lone "+" that didn't read as "both totals combined" on its own. */ .fm-icono-combinado{ display: inline-flex; align-items: center; gap: 1px; } .fm-icono-combinado svg{ width: 10px; height: 10px; } /* Report's driver earnings calendar (§9.14) */ .fm-calendar-nav{ display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; } .fm-cal-dia{ text-align: center; } /* A day cell that jumps to Revenue/Expenses/Payroll filtered to that one date (§9.50) — the hover background is the only hint it's clickable, same quiet treatment as a table row hover elsewhere in the app. */ .fm-cal-dia-click{ cursor: pointer; } .fm-cal-dia-click:hover{ background: #eef2f7; } /* "Probably worked, never checked in" (§9.52) — the vehicle moved enough miles that day (FM_MILLAS_PROBABLE_TRABAJO) but no shift/pay exists for it. Same light-background-plus-hover convention as the click highlight above, just its own color so it never gets mistaken for "clickable". */ .fm-cal-dia-probable{ background: #fff6da; } .fm-cal-dia-probable.fm-cal-dia-click:hover{ background: #fdecb0; } /* Blacklane's confirm popup (§9.58): a guessed cell (scheduled but no real check-in yet) — same "double check this" yellow as .fm-cal-dia-probable above, for the same reason: an inference, not a confirmed fact. */ .fm-input-celda.fm-blacklane-guess{ background: #fff6da; border-color: #e8d78a; } /* §9.71: a genuinely blank day (a real scheduling conflict, or nothing to guess from at all) — stronger than the yellow "double check this" above, this one blocks the download outright until filled in. Kept in sync live as the admin types/clears a cell, see the JS input handler. */ .fm-input-celda.fm-celda-vacia{ background: #fde8e8; border-color: #e08a8a; } .fm-blacklane-guess-muestra{ display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #fff6da; border: 1px solid #e8d78a; vertical-align: middle; } /* §9.77: same swatch, red — the conflict state in the legend, next to the yellow "guess" one, so the three states are explained side by side. */ .fm-blacklane-conflicto-muestra{ display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #fde8e8; border: 1px solid #e08a8a; vertical-align: middle; } .fm-table-blacklane .fm-input-celda{ width: 110px; } /* §9.63: a row dropped by the vehicle checklist above the table — the download-splitting JS also skips its inputs, see the submit handler. */ .fm-table-blacklane tr.fm-fila-oculta{ display: none; } .fm-blacklane-vehiculos{ margin-bottom: 10px; } .fm-cal-daynum{ display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #eef2f7; color: var(--ink); font-size: 12px; font-weight: 700; margin-bottom: 4px; } .fm-cal-total, .fm-cal-total-row td{ text-align: center; background: #f7f9fb; } /* Schedule (§9.41): a driver-per-row, day-per-column checkbox grid. */ .fm-schedule-table th{ text-align: center; white-space: normal; } .fm-schedule-celda{ text-align: center; } .fm-schedule-celda input{ width: 18px; height: 18px; accent-color: #2e7d32; } /* §9.73 (cliente, 2026-09-21): red = not working that day, green = working (the native checkbox's own tick already reads fine on top of either). .fm-marcado is set at render time (checked) and kept in sync by JS on every toggle, same table markup for both Schedule and Recurring schedule (they share the .fm-schedule-celda class). */ .fm-schedule-celda{ background: #fde8e8; } .fm-schedule-celda.fm-marcado{ background: #d9ead3; } /* GPS-derived daily mileage (§9.32) — a quieter second line under the $ amount, never competing with it for attention. */ .fm-cal-millas{ color: var(--muted); font-size: 11px; } /* Generic quieter second line under a table cell's main value — e.g. the assigned driver's name under a vehicle's unit name (§9.49). */ .fm-subtexto{ color: var(--muted); font-size: 12px; } /* Schedule car per day (§9.45) — green/red next to the day number, only shown when the calendar is filtered to one specific route driver. */ .fm-cal-carrito{ display: inline-flex; vertical-align: middle; } .fm-cal-carrito-si{ color: var(--ok); } .fm-cal-carrito-no{ color: var(--miss); } /* Report's Trends chart (§12): now a grid item like every other widget (Ariel: put it to the right of Movements instead of full-width at the bottom), so it shares .fm-report-card's max-height. The box itself still needs an explicit pixel height regardless — Chart.js sizes its canvas off the height of its parent box, not off the SVG-style intrinsic sizing a table gets for free. */ .fm-chart-box{ position: relative; height: 400px; } /* Miles-by-vehicle/driver (§9.51): the "Unit — Driver" y-axis labels are long enough that Chart.js silently clips them from the left on a phone width instead of shrinking gracefully — same "scroll inside its own box, never push the page sideways" rule as .fm-table already uses, just applied to a chart instead of a table. */ .fm-chart-box-scroll{ overflow-x: auto; } .fm-chart-box-scroll .fm-chart-box{ min-width: 560px; } /* Forms */ .fm-form label, .fm-label-block{ display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; } .fm-label-block{ margin-top: 14px; } input[type="text"], input[type="email"], input[type="password"], input[type="month"], input[type="number"], select{ width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; background: #fff; color: var(--ink); font-family: inherit; } button{ padding: 9px 16px; border: 1px solid var(--brand); background: var(--brand); color: #fff; border-radius: 6px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; } button:not(:disabled):hover{ background: #0c3d68; } /* §9.303 (cliente, 2026-10-19): un botón deshabilitado se veía EXACTAMENTE igual que uno activo (no había estilo para :disabled en toda la hoja) — el admin le picaba a "Send invoice" en una reserva sin correo y no pasaba nada, sin ninguna pista de por qué. El title ya explicaba el motivo al pasar el mouse; faltaba que se notara a simple vista. */ button:disabled{ opacity: .45; cursor: not-allowed; } .fm-btn-sm{ padding: 6px 12px; font-size: 13px; } /* §9.260 (cliente, 2026-10-13): fila de descarga del widget "Reportes descargables" — fecha desde/hasta + los 2 botones, en una sola fila. */ .fm-form-descarga-reporte{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* Icon-only Edit/Delete (pencil/trash), used across every Lists module so a row with many actions (Documents, Reminders, Mark serviced...) doesn't grow wider every time one more text-labeled button gets added. */ .fm-btn-icon{ padding: 6px 9px; display: inline-flex; align-items: center; justify-content: center; } .fm-btn-icon svg{ display: block; } .fm-btn-danger{ background: var(--miss); border-color: var(--miss); } .fm-btn-danger:hover{ background: #8f2222; } /* §9.292 (cliente, 2026-10-17): lapicito de chofer en Bookings — a la izquierda del nombre, chiquito, azul, inline, nunca un botón. */ .fm-lapiz-chofer-rapido{ color: var(--brand); font-size: 12px; cursor: pointer; } .fm-lapiz-chofer-rapido:hover{ color: #0c3d68; } /* §9.293 (cliente, 2026-10-17): "+" que expande/colapsa el detalle de una reserva en Bookings — a diferencia del lapicito de arriba, este SÍ se quiere con cara de botón (misma clase fm-btn-icon que ya usan Payment/ Executed en esta misma tabla); solo se ajusta la tipografía del signo. */ .fm-toggle-detalle-reserva{ font-size: 14px; font-weight: 700; line-height: 1; } /* §9.295 (cliente, 2026-10-17): "una separación de cinco píxeles" entre los 5 botones fusionados en Actions (Payment/Executed/Cancelled/No-show/ Edit) — gap real en vez de los espacios de texto sueltos que cada botón ya traía (esos siguen ahí para las celdas simples de otras tablas que reusan las mismas funciones, pero el flex los colapsa). */ /* §9.305 (cliente, 2026-10-19): "la columna de actions, ancho fijo para que los 4 botones quepan en una fila" — se iban a un segundo renglón porque la columna se encogía al ancho del encabezado. nowrap evita el quiebre y el min-width le reserva el espacio de los 4 (34px cada uno + 5px de gap). Es min-width y no width a propósito: cuando la reserva ya trae reporte, ahí va una pastilla de texto ("Cancelled"/"No-show") en lugar de dos botones, y esa sí necesita poder crecer. */ .fm-acciones-reserva{ display: flex; align-items: center; flex-wrap: nowrap; gap: 5px; } .fm-col-acciones{ min-width: 175px; } /* La fila de detalle en sí: una sola celda ancha (colspan), fondo distinto para separarla visualmente de las filas normales de la tabla. */ .fm-fila-detalle-reserva{ display: none; } .fm-fila-detalle-reserva td{ background: #f8f9fb; white-space: normal; padding: 14px 20px; } /* §9.301 (cliente, 2026-10-18): "hasta el lado derecho... ahí únicamente el iframe del mapa" — los campos en rejilla a la izquierda, el mapa en su propia columna pegada a la derecha, estirado a lo alto del detalle. */ .fm-detalle-reserva-wrap{ display: flex; gap: 20px; align-items: stretch; } .fm-detalle-reserva-grid{ flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px; align-content: start; } .fm-detalle-mapa{ flex: 0 0 340px; } .fm-detalle-mapa iframe{ width: 100%; height: 100%; min-height: 280px; display: block; border: 0; border-radius: 8px; background: #eef1f5; } .fm-detalle-item label{ display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 2px; } .fm-detalle-item span{ font-size: 14px; color: var(--ink); } .fm-detalle-item-notas{ grid-column: 1 / -1; } /* Valor + lapicito en la misma línea; el lapicito igualito al de chofer. */ /* §9.302 (cliente, 2026-10-18): mapa en vivo del modal de nueva reserva. */ /* §9.309 (cliente, 2026-10-20): el panel de reserva nueva, colapsable. El se ve igual que el h2 que tenía antes, con una flechita que gira al abrir — mismo gesto que el panel de Instructions de arriba. */ .fm-nueva-reserva > summary{ display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; } .fm-nueva-reserva > summary::-webkit-details-marker{ display: none; } .fm-nueva-reserva > summary::marker{ content: ""; } .fm-nueva-reserva > summary::before{ content: "\25B8"; font-size: 11px; color: var(--brand); transition: transform .18s ease; } .fm-nueva-reserva[open] > summary::before{ transform: rotate(90deg); } .fm-nueva-reserva > summary:hover{ color: var(--brand); } .fm-nueva-reserva[open] > summary{ margin-bottom: 12px; } #fm-na-mapa-wrap{ margin: 0 0 14px; } #fm-na-mapa{ width: 100%; height: 260px; display: block; border: 0; border-radius: 8px; background: #eef1f5; } #fm-na-eta{ margin: 6px 0 0; } .fm-detalle-linea{ display: flex; align-items: center; gap: 6px; } .fm-lapiz-campo{ flex: 0 0 auto; color: var(--brand); font-size: 12px; cursor: pointer; } .fm-lapiz-campo:hover{ color: #0c3d68; } .fm-campo-edicion{ width: 100%; max-width: 230px; padding: 4px 6px; font-size: 13px; } @media (max-width: 820px){ .fm-detalle-reserva-wrap{ flex-direction: column; } .fm-detalle-reserva-grid{ grid-template-columns: repeat(2, 1fr); } .fm-detalle-mapa{ flex: 0 0 auto; width: 100%; } } /* Pause/Activate a driver's capture access (Drivers tab): yellow/green so neither is mistaken for a destructive action — red is reserved for Delete. */ .fm-btn-warn{ background: var(--due); border-color: var(--due); } .fm-btn-warn:hover{ background: #8a5300; } .fm-btn-ok{ background: var(--ok); border-color: var(--ok); } .fm-btn-ok:hover{ background: #0b5c34; } /* Card title with an action button on the right */ .fm-card-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; } .fm-card-head h2{ margin: 0; } .fm-btn-nuevo{ padding: 7px 14px; font-size: 13.5px; } /* Expenses/Payroll/Revenue's filter toolbar (§9.21): sits between the card head and the table itself, "hasta arriba" per Ariel. Each control gets a small label above it, same weight/size as a form label, so this reads as its own row instead of loose inputs floating under the title. */ .fm-filtros-lista{ display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 14px; } /* max-width caps this at a sane size regardless of screen width — a select with "width: auto" sizes itself to its widest/selected OPTION text (e.g. Trips' vehicle filter, where a van's option carries every driver's name too, §9.93), and flex-wrap alone doesn't help when a SINGLE item is already wider than the viewport: it just overflows the whole page sideways instead of wrapping. */ .fm-filtro-item{ display: flex; flex-direction: column; gap: 4px; max-width: 220px; } .fm-filtro-item label{ font-size: 12px; font-weight: 600; color: var(--muted); } .fm-filtro-item select, .fm-filtro-item input{ padding: 7px 9px; font-size: 13.5px; width: 100%; } .fm-filtro-item-grow{ flex: 1 1 200px; max-width: none; } .fm-filtro-item-grow input{ width: 100%; } /* §9.246 (cliente, 2026-10-12): dropdown compacto de checkboxes — mismo alto/ancho que un s made this row run off-screen). */ .fm-card-head form.fm-inline{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; } /* Report's Filters row (§9.24/§9.25): the date inputs are .fm-filtro-item now too (label above, same styling as the driver/vehicle/area selects), so Go needs flex-end here instead of the generic center above — center would float it against the middle of the label+input stack instead of sitting level with the actual input line. */ .fm-filtros-alineados{ align-items: flex-end; } /* Every "+New" form is a modal popup (Ariel, 2026-09-09) — .fm-panel-nuevo itself carries .fm-modal-overlay (see that rule below) so it opens/closes exactly like the password modal, no separate display rule needed here. The inner .fm-modal-caja just needs to be wider than the 420px default — these are full create forms (grids, checklists), not a two-field login. */ /* .fm-modal-caja itself stays a fixed-size flex column (never scrolls) so the × button — a plain child of the caja, not of the scrolling part below — always stays put in the corner. .fm-modal-scroll is the part that actually grows/scrolls: the title, the form, everything else. */ .fm-panel-nuevo .fm-modal-caja{ max-width: min(94vw, 720px); max-height: 90vh; display: flex; flex-direction: column; } /* Blacklane's confirm popup (§9.58) is a table with one column per day — the normal 720px cap clips it on anything but a phone-sized range. */ .fm-panel-nuevo .fm-modal-ancha.fm-modal-caja{ max-width: min(96vw, 1400px); } /* min-height: 0 overrides the flex item's implicit min-height:auto — without it, this would refuse to shrink below its content's natural size and the overflow would escape the capped .fm-modal-caja instead of scrolling here. */ .fm-panel-nuevo .fm-modal-scroll{ overflow-y: auto; min-height: 0; } .fm-badge-dark{ background: #dbe4ee; color: var(--brand); } /* Two column field grid that collapses on a phone */ /* margin-bottom so a button right after the grid (Save, Submit report...) never sits flush against the last input, everywhere this grid is used */ .fm-grid{ display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; } @media (min-width: 640px){ .fm-grid{ grid-template-columns: 1fr 1fr; } } .fm-grid > div{ position: relative; } /* §9.158 Travel Agents: dropdown de sugerencias de dirección (misma idea que .fb-suggest de booking-form.php, versión admin) y radios de comisión/descuento en una sola línea junto a su etiqueta. */ .fm-ta-suggest{ position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: #fff; border: 1px solid var(--line); border-top: none; border-radius: 0 0 6px 6px; max-height: 160px; overflow-y: auto; box-shadow: 0 4px 8px rgba(0,0,0,.1); } .fm-ta-suggest:empty{ display: none; } .fm-ta-suggest div{ padding: 7px 10px; font-size: 13px; cursor: pointer; } .fm-ta-suggest div:hover{ background: var(--bg); } .fm-radio-inline{ display: inline-flex; align-items: center; gap: 5px; margin-right: 16px; font-weight: 400; } .fm-agent-logo{ width: 28px; height: 28px; object-fit: cover; border-radius: 5px; vertical-align: middle; margin-right: 6px; } /* §9.165: logo + nombre del propio socio, junto a su saldo en el portal. */ .fm-agent-portal-identity{ flex-direction: row; align-items: center; gap: 10px; } .fm-agent-logo-big{ width: 44px; height: 44px; object-fit: cover; border-radius: 8px; margin-right: 0; flex-shrink: 0; } /* Travel Agents (§9.158): miniatura del vehículo junto al dropdown de categoría, mismo patrón que el formulario público (§9.153). */ .fm-ta-vehicle-row{ display: flex; gap: 10px; align-items: flex-end; } .fm-ta-vehicle-select{ flex: 1; } .fm-ta-vehicle-thumb{ width: 90px; height: 66px; object-fit: cover; border-radius: 8px; flex-shrink: 0; } /* Bookings (§9.158): distingue de un vistazo el nombre de un Travel Agent del de un pasajero real que reservó por el formulario público. */ .fm-agent-name-cell{ background: #fff6d6; font-weight: 600; } /* Bookings (§9.193): mismo criterio, rojo claro para las reservas que fm_bokun_procesar_evento() creó solas desde el webhook de Bokun/Viator. */ .fm-bokun-name-cell{ background: #ffe1e1; font-weight: 600; } /* Document upload form (§9.2, fm_render_documentos()): File + Comments + the Upload button on one row, boxed together so it visibly reads as a single small form instead of three controls scattered across the card. Wraps to its own stacked rows on a phone instead of squeezing everything sideways. */ .fm-doc-upload{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-top: 16px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; } .fm-doc-field{ display: flex; flex-direction: column; gap: 5px; } .fm-doc-field label{ font-size: 13px; font-weight: 600; } .fm-doc-field-grow{ flex: 1 1 240px; } .fm-doc-upload input[type="file"]{ max-width: 100%; } .fm-doc-upload button{ flex: 0 0 auto; } /* Module checkboxes */ .fm-checks{ display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; } .fm-check{ display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 400; margin: 0; cursor: pointer; } .fm-check input{ margin: 0; } /* One access row per user in the edit section */ .fm-perm{ border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; } .fm-perm strong{ display: block; margin-bottom: 8px; } .fm-inline{ display: inline; } /* Login screen */ .fm-login-body{ background: var(--brand); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; } .fm-login{ background: #fff; border-radius: 12px; padding: 28px 26px; width: 100%; max-width: 380px; box-shadow: 0 12px 34px rgba(0,0,0,.22); } .fm-login h1{ margin: 0; font-size: 21px; } .fm-login-sub{ margin: 2px 0 20px; color: var(--muted); font-size: 14px; } .fm-login label{ display: block; font-size: 13px; font-weight: 600; margin: 0 0 5px; } .fm-login input{ margin-bottom: 14px; } .fm-login button{ width: 100%; padding: 11px; } .fm-login-help{ margin: 18px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.5; } code{ background: #eef1f5; padding: 1px 5px; border-radius: 4px; font-size: 13px; } hr{ border: 0; border-top: 1px solid var(--line); margin: 12px 0; } /* Round language flag button, fixed in a corner on every screen (login too) */ .fm-lang-flag{ position: fixed; right: 16px; bottom: 16px; width: 42px; height: 42px; padding: 0; border-radius: 50%; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(19,32,48,.24); z-index: 80; } /* Same button, docked inline in the header next to "Log out" instead of fixed in a corner (used everywhere except the login screen, see §2.3) */ .fm-lang-flag.fm-lang-inline{ display: inline-flex; position: static; width: auto; height: auto; padding: 0; border-radius: 0; box-shadow: none; font-size: 15px; background: transparent; vertical-align: middle; } .fm-lang-flag.fm-lang-inline:hover{ background: transparent; opacity: .8; } .fm-lang-flag img{ display: block; border-radius: 50%; } /* Maintenance (§9.8): camera preview and the step-by-step capture flow */ .fm-maint-cam{ background: #000; border-radius: 8px; overflow: hidden; margin-bottom: 10px; } .fm-maint-cam video{ width: 100%; max-height: 60vh; display: block; } .fm-maint-step-label{ font-weight: 600; margin: 0 0 10px; } .fm-maint-controls{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } #fmMaintReview video{ width: 100%; max-height: 50vh; border-radius: 8px; background: #000; margin-bottom: 10px; } .fm-maint-fotos{ display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; } .fm-maint-fotos img{ width: 110px; height: 110px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; } .fm-maint-foto-item{ display: flex; flex-direction: column; align-items: center; gap: 4px; } /* Says exactly which shot each thumbnail is (video / dashboard / seats / trunk) on the review screen, so it's obvious they're the right ones */ .fm-maint-review-label{ font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 6px; } /* §9.273 (cliente, 2026-10-13): reporte de cancelación/no-show del chofer — tira de miniaturas de las fotos ya tomadas, cada una con su "x" para quitarla antes de enviar (a diferencia de Maintenance, aquí no son fotos fijas por nombre, puede ser cualquier cantidad). */ .fm-rep-fotos{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .fm-rep-foto-item{ position: relative; width: 90px; height: 90px; } .fm-rep-foto-item img{ width: 90px; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; } .fm-rep-foto-quitar{ position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--miss); color: #fff; border: none; font-size: 13px; line-height: 20px; padding: 0; cursor: pointer; } /* File viewer popup (§9.2): opens a video/photo from a Maintenance report without leaving the page or downloading the raw file. */ .fm-visor-overlay{ display: none; position: fixed; inset: 0; background: rgba(15,22,32,.78); z-index: 200; align-items: center; justify-content: center; padding: 24px; } .fm-visor-overlay.fm-abierto{ display: flex; } .fm-visor-caja{ background: #000; border-radius: 10px; max-width: min(94vw, 900px); max-height: 90vh; position: relative; display: flex; } .fm-visor-caja img, .fm-visor-caja video{ display: block; max-width: min(94vw, 900px); max-height: 90vh; border-radius: 10px; } .fm-visor-cerrar{ position: absolute; top: -14px; right: -14px; width: 32px; height: 32px; border-radius: 50%; padding: 0; line-height: 1; font-size: 16px; background: var(--brand); } /* Prev/next arrows (§9.2): pinned to the viewport edges, not next to the box, so they don't fight the box's own centering/max-width on a phone. */ .fm-visor-flecha{ position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; padding: 0; line-height: 1; font-size: 26px; background: rgba(255,255,255,.14); border-color: transparent; /* Without this, the prev arrow (before .fm-visor-caja in the HTML) paints underneath it: both are "positioned, z-index:auto", so stacking among them falls back to DOM order, and the caja comes after prev. */ z-index: 1; } .fm-visor-flecha:hover{ background: rgba(255,255,255,.28); } .fm-visor-prev{ left: 10px; } .fm-visor-next{ right: 10px; } .fm-visor-flecha.fm-oculto{ display: none; } /* Narrow phones: the box already uses almost the full width (94vw), so smaller arrows sitting closer to the edge overlap it less. */ @media (max-width: 480px){ .fm-visor-overlay{ padding: 6px; } .fm-visor-flecha{ width: 36px; height: 36px; font-size: 22px; } .fm-visor-prev{ left: 2px; } .fm-visor-next{ right: 2px; } } .fm-visor-pdf{ max-height: 90vh; overflow-y: auto; } .fm-visor-office, .fm-visor-mapa{ width: min(94vw, 900px); height: 80vh; border: 0; border-radius: 10px; background: #fff; } /* GPS tab (§9.16): frames the standalone gps-integration/ mini-app full-bleed inside its own card, no padding to fight its own edge-to-edge layout. */ .fm-card-gps{ padding: 0; overflow: hidden; } .fm-gps-iframe{ width: 100%; height: 75vh; border: 0; display: block; } .fm-visor-pdf canvas{ display: block; max-width: 100%; height: auto; margin: 0 auto 6px; } .fm-visor-msg{ color: #fff; padding: 40px; text-align: center; } .fm-visor-msg a{ color: #9ec7ff; } #fmMaintMsg{ margin-top: 10px; } /* Generic modal overlay (§2.4): the "change my password" popup and the driver's daily "you haven't filed Maintenance today" reminder both use this — same recipe as .fm-visor-overlay, but a plain white card instead of the black media box, since these hold text/forms, not a photo or video. */ .fm-modal-overlay{ display: none; position: fixed; inset: 0; background: rgba(15,22,32,.78); z-index: 210; align-items: center; justify-content: center; padding: 24px; } .fm-modal-overlay.fm-abierto{ display: flex; } .fm-modal-caja{ background: #fff; border-radius: 10px; max-width: min(94vw, 420px); width: 100%; padding: 24px; position: relative; } .fm-modal-caja h2{ margin-top: 0; } .fm-modal-cerrar{ position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; padding: 0; line-height: 1; font-size: 16px; background: var(--brand); color: #fff; border: none; cursor: pointer; } /* Two-button row (the daily Maintenance reminder, §2.6: "Later" / "Do it now") — "Later" reads as the lesser option on purpose, same brand color but outlined instead of filled, so "Do it now" stays the obvious pick. */ .fm-modal-botones{ display: flex; gap: 10px; flex-wrap: wrap; } .fm-btn-secundario{ background: #fff; color: var(--brand); } /* §9.249 (cliente, 2026-10-13): pill "Multi-stop (N)" en la celda de destino de Bookings cuando la reserva tiene paradas intermedias. */ .fm-pill-multistop{ display: inline-block; background: var(--brand); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; } /* §9.274 (cliente, 2026-10-13): fila de "Send invoice"/"Copy payment link" arriba del modal de Editar reserva. */ .fm-payment-actions{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; } /* §9.303 (cliente, 2026-10-19): un no hereda el estilo de button{}, así que el enlace del voucher necesita el suyo. Clase aparte a propósito: los otros de la app (el pin del mapa, por ejemplo) se ven como icono suelto y así deben quedarse. */ .fm-btn-enlace{ display: inline-flex; align-items: center; background: var(--brand); color: #fff; border: 1px solid var(--brand); border-radius: 6px; font-weight: 600; text-decoration: none; } .fm-btn-enlace:hover{ background: #0c3d68; color: #fff; } /* §9.277 (cliente, 2026-10-13): fila para agregar un destinatario del manifiesto — correo + una casilla por Location, todo en una sola fila que se envuelve si no cabe, a propósito minimalista (sin modal nuevo). */ .fm-form-agregar-destinatario-manifiesto{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .fm-check-inline{ display: inline-flex; width: auto; } /* Editor de paradas (forms públicos + modal New/Edit Booking): cada parada es una fila con su input de dirección y un botón "Quitar". */ .fm-stops-lista{ display: flex; flex-direction: column; gap: 8px; margin: 8px 0; } .fm-stop-fila{ display: flex; gap: 8px; align-items: center; position: relative; } .fm-stop-fila input{ flex: 1; } .fm-stop-quitar{ background: #fff; color: var(--miss); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 12.5px; cursor: pointer; white-space: nowrap; } .fm-stop-quitar:hover{ background: #fdecec; } .fm-btn-add-stop{ background: #fff; color: var(--brand); border: 1px dashed var(--brand); border-radius: 6px; padding: 7px 12px; font-size: 13.5px; cursor: pointer; align-self: flex-start; } .fm-btn-add-stop:hover{ background: #eef4fb; } .fm-btn-secundario:hover{ background: #f0f4f8; } /* §9.317 (cliente, 2026-10-21): los 7 días de "qué maneja cada día" dentro de la ficha del chofer. Una fila en escritorio; en un teléfono se parte solo en varias líneas, nunca se encoge tanto que el nombre del tipo no se lea. */ .fm-kind-semana{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;} .fm-kind-dia{display:flex;flex-direction:column;gap:4px;flex:1 1 84px;min-width:0;} .fm-kind-dia label{font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.3px;} /* min-width:0 en los dos: sin eso el