/* FB PRO — estilos scopeados bajo .fbpro-scope. Estética tech oscura. */
.fbpro-scope {
    --fbpro-bg: #070f0f;
    --fbpro-bg-alt: #0c1a1a;
    --fbpro-panel: #0e1f1f;
    --fbpro-card: #10221f;
    --fbpro-card-hover: #123028;
    --fbpro-border: #1d3735;
    --fbpro-border-soft: #16302d;
    --fbpro-cyan: #23e5c4;
    --fbpro-cyan-dim: rgba(35,229,196,.15);
    --fbpro-accent: #ff7a45;
    --fbpro-green: #2ee089;
    --fbpro-red: #ff5468;
    --fbpro-amber: #ffb648;
    --fbpro-text: #eaf6f4;
    --fbpro-text-muted: #7fa39c;
    --fbpro-text-dim: #4d6b66;
    --fbpro-sidebar-w: 232px;
    --fbpro-sidebar-w-collapsed: 60px;
    font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--fbpro-text);
    box-sizing: border-box;
    position: relative;
}
.fbpro-scope *, .fbpro-scope *::before, .fbpro-scope *::after { box-sizing: inherit; }
.fbpro-scope h1, .fbpro-scope h2, .fbpro-scope h3 { color: var(--fbpro-text) !important; font-weight: 700; letter-spacing: -.01em; }
.fbpro-scope a { text-decoration: none; color: inherit; }
.fbpro-scope ::selection { background: var(--fbpro-cyan-dim); }
.fbpro-icon { display: inline-block; vertical-align: -4px; flex-shrink: 0; }

/* ---------- FONDO GRID TECH ---------- */
.fbpro-bg-grid, .fbpro-login-bg-grid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
    background-image:
        linear-gradient(rgba(35,229,196,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(35,229,196,.055) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* ---------- LOGIN ---------- */
.fbpro-login-wrap {
    min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 0%, #0f2b28 0%, var(--fbpro-bg) 65%);
    padding: 24px; position: relative; z-index: 1;
}
.fbpro-login-card {
    background: linear-gradient(180deg, var(--fbpro-card) 0%, var(--fbpro-panel) 100%);
    border: 1px solid var(--fbpro-border); border-radius: 18px; padding: 44px 36px; width: 100%;
    max-width: 400px; text-align: center;
    box-shadow: 0 0 0 1px rgba(35,229,196,.06), 0 30px 60px rgba(0,0,0,.5), 0 0 40px rgba(35,229,196,.08);
}
.fbpro-login-logo { max-width: 140px; max-height: 100px; margin-bottom: 18px; filter: drop-shadow(0 0 18px rgba(35,229,196,.35)); }
.fbpro-login-logo.fbpro-topbar-brand-logo { margin-left: auto; margin-right: auto; }
.fbpro-login-card h1 { font-size: 22px; margin: 4px 0 4px; }
.fbpro-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.fbpro-login-tagline { margin: 0 0 22px; font-size: 12px; color: var(--fbpro-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.fbpro-login-form { text-align: left; display: flex; flex-direction: column; gap: 12px; }
.fbpro-login-form label { font-size: 12px; font-weight: 600; color: var(--fbpro-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.fbpro-login-form input {
    padding: 12px 14px; border: 1px solid var(--fbpro-border); border-radius: 9px; font-size: 14px;
    background: var(--fbpro-bg-alt); color: var(--fbpro-text); width: 100%; box-sizing: border-box;
}
.fbpro-login-form input:focus { outline: none; border-color: var(--fbpro-cyan); box-shadow: 0 0 0 3px var(--fbpro-cyan-dim); }
.fbpro-login-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; font-size: 13px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: normal !important; color: var(--fbpro-text-muted) !important; cursor: pointer; margin-top: -2px; }
.fbpro-login-check input { accent-color: var(--fbpro-cyan); width: 15px; height: 15px; cursor: pointer; }

/* ---------- DOCUMENTO A PANTALLA COMPLETA ---------- */
html, body.fbpro-fullpage-body {
    margin: 0; padding: 0; min-height: 100%; background: #070f0f;
}
/* En el celular, 100vh no es el alto realmente visible: incluye el espacio que ocupa la barra
   de direcciones del navegador aunque esté mostrándose, así que la página quedaba más alta que
   la pantalla y el conjunto html/body terminaba scrolleando esa diferencia — aunque .fbpro-app
   más abajo tiene overflow:hidden para SU contenido, nada le impedía a html/body scrollear el
   sobrante. Con eso, el topbar (que sí es parte del flujo normal de la página) se corría hacia
   arriba con el scroll, mientras el menú mobile (position:fixed más abajo, ver RESPONSIVE)
   quedaba anclado al viewport real en el offset viejo — de ahí el hueco entre ambos que reportó
   Mauricio. 100dvh sí tiene en cuenta la barra dinámica (soportado en todos los navegadores de
   celular modernos; donde no exista, la línea se ignora y queda el 100vh de respaldo de arriba).
   overflow:hidden por sí solo resultó insuficiente: Mauricio reportó que al entrar a una sección
   desde un link con #ancla (ej. "Rutas completadas · ver historial" del dashboard, que apunta a
   mi-ruta#fbpro-historial-rutas), el topbar aparecía cortado arriba, tapado por la barra de
   estado del teléfono. La causa: un elemento con overflow:hidden NO tiene scrollbar visible,
   pero el navegador igual puede asignarle un scrollTop (el salto automático a un #ancla al
   cargar la página es una de esas formas) — y como no hay scrollbar, el usuario no tiene forma
   de notarlo ni de corregirlo, solo ve el contenido de arriba recortado silenciosamente. Con
   position:fixed en cambio no existe scrollTop posible: el body queda clavado a los bordes
   reales del viewport pase lo que pase, así que ningún salto a #ancla ni descalce de 100dvh
   puede correrlo. Lo que sobre en altura (si 100dvh se calculó de más) sigue recortándose, pero
   siempre por ABAJO — nunca tapando el topbar. */
body.fbpro-fullpage-body {
    position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none;
}

/* ---------- LAYOUT APP ---------- */
/* height en 3 capas, de la más floja a la más confiable — cada una pisa a la anterior si el
   navegador la entiende: 100vh (universal, pero en mobile incluye la barra de direcciones
   aunque esté mostrándose) → 100dvh (tiene en cuenta la barra dinámica, pero varios WebView de
   Android instalados como PWA la calculan mal al navegar entre secciones, causa real detrás de
   3 bugs distintos que fuimos persiguiendo: v2.94.12, v2.94.17, v2.94.19) → var(--fbpro-vh-real)
   (medida directo con JS vía visualViewport.height, ver actualizarAltoViewportReal en fbpro.js
   — no depende de que el navegador calcule bien nada, es el alto que YA se sabe visible). Antes
   de que el JS corra (primer pintado) queda 100dvh como mejor estimación; apenas corre, gana la
   medida real y ya no se vuelve a desactualizar (se remide en resize/orientationchange/cambios
   de visualViewport). */
.fbpro-app {
    position: relative; min-height: 100vh; height: 100vh; min-height: 100dvh; height: 100dvh;
    min-height: var(--fbpro-vh-real, 100dvh); height: var(--fbpro-vh-real, 100dvh);
    background: var(--fbpro-bg);
    border-radius: 0; box-shadow: none; overflow: hidden; display: flex; flex-direction: column;
}
/* Modificador opcional para cuando el panel se embebe vía shortcode dentro de una página
   con el tema (uso alternativo; por defecto el sistema corre a pantalla completa). */
.fbpro-app.fbpro-app-embedded {
    min-height: 80vh; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--fbpro-border);
}
.fbpro-app.fbpro-app-embedded .fbpro-body { height: auto; }
.fbpro-app.fbpro-app-embedded .fbpro-main { overflow-y: visible; }
.fbpro-topbar {
    position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: linear-gradient(180deg, var(--fbpro-panel) 0%, var(--fbpro-bg-alt) 100%);
    border-bottom: 1px solid var(--fbpro-border); color: #fff; padding: 12px 18px;
}
/* Instalada como PWA no hay barra del navegador que separe el contenido del borde físico
   del teléfono (y en algunos, además, la franja del notch/cámara), así que el topbar queda
   pegado arriba de una forma que en el navegador normal no se nota. Unos px extra de aire
   arriba de cada mapa (+ el margen de seguridad del notch cuando el dispositivo lo reporta). */
@media (display-mode: standalone) {
    .fbpro-topbar { padding-top: max(24px, calc(env(safe-area-inset-top) + 12px)); }
}
/* Mismo motivo que la PWA de arriba, pero para F11 en PC: sin la barra del navegador, el
   topbar queda pegado al borde físico de la pantalla. La clase la pone fbpro.js (no hay
   forma de detectar F11 solo con CSS). */
html.fbpro-native-fullscreen .fbpro-topbar { padding-top: 22px; }
.fbpro-topbar-left { display: flex; align-items: center; gap: 12px; }
/* Le da al logo su propio "sector" dentro de la topbar (antes flotaba suelto contra el fondo
   oscuro y se perdía un poco) — misma tarjeta oscura + borde sutil que el resto de los
   controles de la barra (botones, burger), para que se sienta parte del mismo sistema y no
   un agregado. Se ilumina apenas en cian al pasar el mouse porque también es el link al
   inicio del panel. */
.fbpro-topbar-brand {
    display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px;
    background: var(--fbpro-card); border: 1px solid var(--fbpro-border); border-radius: 12px;
    padding: 6px 18px; transition: border-color .15s, background .15s;
}
.fbpro-topbar-brand:hover { border-color: var(--fbpro-cyan); background: var(--fbpro-card-hover); }
.fbpro-topbar-brand img { height: 28px; }
.fbpro-topbar-brand-logo { height: 70px !important; width: auto !important; max-width: none !important; display: block; }
/* Dentro de la topbar el logo se achica un poco respecto del login (70px), para que entre
   prolijo en su nueva tarjeta sin engordar de más la barra superior. La página de login usa
   la misma clase .fbpro-topbar-brand-logo pero fuera de .fbpro-topbar-brand, así que no la toca. */
.fbpro-topbar-brand .fbpro-topbar-brand-logo { height: 56px !important; }
.fbpro-brand-icon { color: var(--fbpro-cyan); display: flex; }
.fbpro-topbar-user { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.fbpro-role-pill { background: var(--fbpro-cyan-dim); color: var(--fbpro-cyan); border: 1px solid rgba(35,229,196,.3); padding: 3px 11px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.fbpro-burger { display: flex; align-items: center; justify-content: center; background: var(--fbpro-card); border: 1px solid var(--fbpro-border); color: var(--fbpro-text); border-radius: 8px; width: 36px; height: 36px; cursor: pointer; flex-shrink: 0; transition: border-color .15s, color .15s; }
.fbpro-burger:hover { border-color: var(--fbpro-cyan); color: var(--fbpro-cyan); }
.fbpro-hide-mobile { display: inline; }

.fbpro-body { position: relative; z-index: 1; display: flex; flex: 1; min-height: 0; height: 100%; }
.fbpro-sidebar-overlay { display: none; }
.fbpro-sidebar {
    width: var(--fbpro-sidebar-w); flex-shrink: 0; background: var(--fbpro-panel); border-right: 1px solid var(--fbpro-border);
    padding: 16px 10px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto;
    transition: width .2s ease, padding .2s ease, border-color .2s ease;
}
/* Colapso del menú en escritorio/PC (admin y chofer): el botón hamburguesa reduce el
   sidebar a una franja de íconos (no lo hace desaparecer del todo, así el usuario no
   pierde la referencia de en qué sección está ni tiene que reabrir el menú para navegar).
   En mobile el burger sigue abriendo el panel superpuesto de siempre (ver RESPONSIVE). */
@media (min-width: 881px) {
    .fbpro-app.fbpro-sidebar-collapsed .fbpro-sidebar {
        width: var(--fbpro-sidebar-w-collapsed); padding-left: 8px; padding-right: 8px;
    }
    .fbpro-app.fbpro-sidebar-collapsed .fbpro-nav-item {
        justify-content: center; padding: 12px 0; gap: 0;
    }
    .fbpro-app.fbpro-sidebar-collapsed .fbpro-nav-item span:not(.fbpro-nav-icon) {
        display: none;
    }
}
.fbpro-nav-item {
    display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-radius: 9px;
    color: var(--fbpro-text-muted); font-size: 14px; font-weight: 500; transition: background .15s, color .15s;
    border: 1px solid transparent; position: relative;
}
.fbpro-nav-item:hover { background: var(--fbpro-card-hover); color: var(--fbpro-text); }
.fbpro-nav-item.active {
    background: var(--fbpro-cyan-dim); color: var(--fbpro-cyan); border-color: rgba(35,229,196,.35);
    box-shadow: inset 3px 0 0 var(--fbpro-cyan);
}
/* "Salir" se mudó de la topbar (donde en mobile, con el botón de instalar app + la pastilla
   de rol + Actualizar, ya no entraba y quedaba cortado por el overflow:hidden de .fbpro-app)
   al fondo del menú lateral. margin-top:auto lo empuja al final del panel flex sin necesitar
   una segunda lista; el borde superior lo separa visualmente del resto de las secciones, y
   el tinte rojo al pasar el mouse marca que es una acción distinta (salir), no una más. */
.fbpro-nav-item-salir { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--fbpro-border); }
.fbpro-nav-item-salir:hover { background: rgba(255,84,104,.12); color: var(--fbpro-red); }
.fbpro-nav-icon { display: flex; flex-shrink: 0; }
/* overscroll-behavior:contain evita que, al llegar al final del scroll de una sección (ej. Mi
   Ruta con muchas paradas, o cualquier tabla larga) y seguir deslizando, el gesto se "encadene"
   a la página entera — en iOS Safari eso dispara el rebote elástico de toda la página, corriendo
   momentáneamente el topbar (que es parte del flujo normal) por fuera del menú mobile fijo. */
.fbpro-main { flex: 1; padding: 24px 28px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: flex; flex-direction: column; }
.fbpro-main > * { flex-shrink: 0; }

.fbpro-page-title { font-size: 23px; margin: 0 0 16px; }
.fbpro-title-uppercase { text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fbpro-toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; position: relative; }
/* Oculto visualmente pero no del DOM ni del teclado (display:none lo sacaba del orden de
   tabulación, así que ningún toggle del sistema se podía activar sin mouse/dedo). */
.fbpro-toggle input {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; opacity: 0;
}
.fbpro-toggle-track {
    width: 46px; height: 25px; background: var(--fbpro-border); border-radius: 999px;
    position: relative; flex-shrink: 0; transition: background .2s ease;
}
.fbpro-toggle input:focus-visible + .fbpro-toggle-track {
    outline: none; box-shadow: 0 0 0 3px var(--fbpro-cyan-dim);
}
.fbpro-toggle-thumb {
    position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; background: #fff;
    border-radius: 50%; transition: transform .2s ease; box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.fbpro-toggle input:checked + .fbpro-toggle-track { background: var(--fbpro-green); }
.fbpro-toggle input:checked + .fbpro-toggle-track .fbpro-toggle-thumb { transform: translateX(21px); }
.fbpro-toggle input:not(:checked) + .fbpro-toggle-track { background: var(--fbpro-red); }
.fbpro-toggle-label { font-size: 14px; font-weight: 600; }
/* Variante más grande, usada para activar/desactivar una integración completa (SMTP, WhatsApp)
   junto al título de su sección — se nota más de un vistazo que el toggle chico de una fila de
   tabla, y queda bien al lado de un <h2>. */
.fbpro-toggle-lg .fbpro-toggle-track { width: 60px; height: 32px; }
.fbpro-toggle-lg .fbpro-toggle-thumb { width: 26px; height: 26px; }
.fbpro-toggle-lg input:checked + .fbpro-toggle-track .fbpro-toggle-thumb { transform: translateX(28px); }
.fbpro-toggle-lg .fbpro-toggle-label { font-size: 15px; }
.fbpro-section-header-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.fbpro-section-header-toggle .fbpro-section-title { margin: 0; }
.fbpro-title-icon-glow {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--fbpro-cyan-dim); color: var(--fbpro-cyan); border: 1px solid rgba(35,229,196,.35);
    animation: fbproIconGlow 2.6s ease-in-out infinite;
}
@keyframes fbproIconGlow {
    0%, 100% { box-shadow: 0 0 6px rgba(35,229,196,.25); }
    50%      { box-shadow: 0 0 18px rgba(35,229,196,.75); }
}
.fbpro-live-dot {
    width: 11px; height: 11px; border-radius: 50%; background: var(--fbpro-green); flex-shrink: 0;
    box-shadow: 0 0 8px rgba(46,224,137,.8);
    animation: fbproDotPulse 2s ease-out infinite;
}
.fbpro-live-dot-blanco { border: 1.5px solid #fff; }
@keyframes fbproDotPulse {
    0%   { box-shadow: 0 0 8px rgba(46,224,137,.8), 0 0 0 0 rgba(46,224,137,.55); }
    70%  { box-shadow: 0 0 8px rgba(46,224,137,.8), 0 0 0 11px rgba(46,224,137,0); }
    100% { box-shadow: 0 0 8px rgba(46,224,137,.8), 0 0 0 0 rgba(46,224,137,0); }
}
/* Variante amarilla del punto destellante — ruta pausada. */
.fbpro-live-dot-amarillo {
    background: #ffb43c; box-shadow: 0 0 8px rgba(255,180,60,.8);
    animation: fbproDotPulseAmarillo 2s ease-out infinite;
}
@keyframes fbproDotPulseAmarillo {
    0%   { box-shadow: 0 0 8px rgba(255,180,60,.8), 0 0 0 0 rgba(255,180,60,.55); }
    70%  { box-shadow: 0 0 8px rgba(255,180,60,.8), 0 0 0 11px rgba(255,180,60,0); }
    100% { box-shadow: 0 0 8px rgba(255,180,60,.8), 0 0 0 0 rgba(255,180,60,0); }
}
.fbpro-dot-inactivo {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--fbpro-red);
    box-shadow: 0 0 7px rgba(255,84,104,.85); margin-right: 8px; vertical-align: middle;
    animation: fbproDotPulseRed 1.8s ease-out infinite;
}
@keyframes fbproDotPulseRed {
    0%   { box-shadow: 0 0 7px rgba(255,84,104,.85), 0 0 0 0 rgba(255,84,104,.55); }
    70%  { box-shadow: 0 0 7px rgba(255,84,104,.85), 0 0 0 9px rgba(255,84,104,0); }
    100% { box-shadow: 0 0 7px rgba(255,84,104,.85), 0 0 0 0 rgba(255,84,104,0); }
}
/* Destello sutil del pin de camión/chofer "en línea" — un glow que respira suave en vez del
   ping de radar de abajo (ese sí busca llamar la atención por un problema; acá es solo una
   confirmación silenciosa de que hay señal fresca). */
.fbpro-marker-conectado-glow { animation: fbproMarkerConectadoGlow 2.4s ease-in-out infinite; }
@keyframes fbproMarkerConectadoGlow {
    0%, 100% { box-shadow: 0 1px 4px rgba(0,0,0,.4), 0 0 0 0 rgba(46,224,137,.45); }
    50%      { box-shadow: 0 1px 4px rgba(0,0,0,.4), 0 0 9px 3px rgba(46,224,137,.55); }
}
/* "Ping" de radar bajo el pin del camión sin conexión en el detalle de ruta — marca la última
   ubicación registrada de forma bien visible, en gris (no rojo) para no confundirse con los
   pines rojos fijos de las paradas pendientes. */
.fbpro-marker-sin-conexion-halo {
    position: absolute; left: 3px; bottom: 2px; width: 20px; height: 20px; border-radius: 50%;
    background: #5c7874; animation: fbproMarkerSinConexionPing 1.6s ease-out infinite;
}
@keyframes fbproMarkerSinConexionPing {
    0%   { transform: scale(.5); opacity: .65; }
    70%  { transform: scale(2.4); opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
}
.fbpro-section-title { font-size: 15px; margin: 28px 0 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--fbpro-text-muted) !important; }
.fbpro-hint { color: var(--fbpro-text-muted); font-size: 13px; }
.fbpro-hint.fbpro-test-ok { color: var(--fbpro-green); font-weight: 600; }
.fbpro-hint.fbpro-test-error { color: var(--fbpro-red); font-weight: 600; }
.fbpro-flex-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.fbpro-flex-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fbpro-inline-form { display: inline-flex; }
.fbpro-filtros-bar {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
    background: var(--fbpro-card); border: 1px solid var(--fbpro-border); border-radius: 12px;
    padding: 14px 16px; margin-bottom: 16px;
}
.fbpro-filtros-bar .fbpro-form-field { min-width: 140px; flex: 1 1 140px; margin-bottom: 0 !important; }
.fbpro-filtros-bar .fbpro-form-field input, .fbpro-filtros-bar .fbpro-form-field select { margin-bottom: 0 !important; }
.fbpro-filtros-bar .fbpro-form-field label, .fbpro-filtros-bar p { margin: 0 !important; }
.fbpro-filtros-botones { margin-bottom: 0 !important; }
.fbpro-filtros-botones { display: flex; gap: 8px; flex: 0 0 auto; align-items: center; }
.fbpro-filtros-botones .fbpro-tag { align-self: center; display: inline-flex; align-items: center; }

/* ---------- BOTONES ---------- */
.fbpro-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 9px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity .15s, transform .1s, border-color .15s; white-space: nowrap; }
.fbpro-btn:active { transform: scale(.98); }
.fbpro-btn-primary { background: linear-gradient(135deg, var(--fbpro-accent), #ff5f2e); color: #08110f; box-shadow: 0 6px 18px rgba(255,122,69,.25); }
.fbpro-btn-primary:hover { opacity: .92; }
.fbpro-btn-ghost { background: var(--fbpro-card); border: 1px solid var(--fbpro-border); color: var(--fbpro-text); }
.fbpro-btn-ghost:hover { border-color: var(--fbpro-cyan); color: var(--fbpro-cyan); }
.fbpro-btn-ghost.fbpro-btn-activo { border-color: var(--fbpro-cyan); color: var(--fbpro-cyan); background: rgba(0,229,255,.08); }
.fbpro-btn-outline-warn { background: transparent; border: 1px solid rgba(255,180,60,.55); color: #ffb43c; }
.fbpro-btn-outline-warn:hover { background: rgba(255,180,60,.1); border-color: #ffb43c; }
.fbpro-hint-warn { color: #ffb43c; display: flex; align-items: center; gap: 6px; }
.fbpro-btn-block { width: 100%; justify-content: center; }
.fbpro-btn-sm { padding: 7px 11px; font-size: 12px; }
.fbpro-icon-btn { background: var(--fbpro-card); border: 1px solid var(--fbpro-border); color: var(--fbpro-text-muted); cursor: pointer; padding: 6px; border-radius: 7px; display: inline-flex; }
.fbpro-icon-btn:hover { color: var(--fbpro-cyan); border-color: var(--fbpro-cyan); }
/* Variante más grande, mejor blanco de toque en el celular (Gomerías: al sacar columnas de
   detalle, la fila de acciones queda con más lugar y conviene aprovecharlo). */
.fbpro-icon-btn-lg { padding: 9px; }
/* Destaca el botón de "Ver información" — con Responsable/RUT/Email/Horarios sacados de la
   tabla, es la única forma de ver esos datos sin entrar a Editar, así que conviene que se note
   más que el resto. Hasta la v2.94.13 pulsaba (mismo glow animado de .fbpro-title-icon-glow);
   en la v2.94.14 Mauricio pidió sacarle el destello y dejarlo fijo (sin animación) pero seguía
   viéndose como un "destello congelado" (el brillo difuso alrededor). Ahora es solo un borde
   resaltado, sin sombra/brillo — se nota por el color del borde, no por un halo. */
.fbpro-icon-btn-destacado {
    border: 2px solid var(--fbpro-cyan); color: var(--fbpro-cyan);
}
/* Mauricio pidió que el copyright se vea siempre sin depender de scrollear hasta el final —
   antes vivía DENTRO de .fbpro-main (el área que scrollea), así que en pantallas largas (ej.
   Mi Ruta con varias paradas) quedaba a cientos de píxeles de scroll y era fácil no llegar
   nunca a verlo. Ahora es hermano de .fbpro-body en vez de hijo de .fbpro-main (ver
   class-fbpro-panel.php), como una franja fija al pie de .fbpro-app — flex-shrink:0 para que
   no se achique en pantallas muy bajas, y ya no necesita margin-top:auto porque .fbpro-body
   (flex:1) ocupa todo el resto del alto por su cuenta. */
.fbpro-footer { flex-shrink: 0; padding: 10px 18px; border-top: 1px solid var(--fbpro-border); color: var(--fbpro-text-muted); font-size: 12px; text-align: center; }
.fbpro-historial-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; color: var(--fbpro-text); font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; padding: 0; }
.fbpro-historial-toggle:hover { color: var(--fbpro-cyan); }
.fbpro-historial-toggle-titulo { display: flex; align-items: center; gap: 8px; }
.fbpro-historial-toggle-icono { display: flex; transition: transform .2s ease; }
.fbpro-historial-toggle[aria-expanded="true"] .fbpro-historial-toggle-icono { transform: rotate(90deg); }
#fbproListaPausas { margin-top: 14px; }

/* ---------- CARDS / STATS ---------- */
.fbpro-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 10px; }
.fbpro-cards-grid-4 { grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: 18px; }
.fbpro-stat-card {
    background: linear-gradient(160deg, var(--fbpro-card) 0%, var(--fbpro-panel) 100%);
    border: 1px solid var(--fbpro-border); border-radius: 14px; padding: 22px; display: flex; align-items: center; gap: 16px;
}
.fbpro-stat-card.fbpro-stat-alert { border-color: rgba(255,84,104,.5); box-shadow: 0 0 24px rgba(255,84,104,.08) inset; }
.fbpro-stat-card-link { text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.fbpro-stat-card-link:hover { transform: translateY(-2px); border-color: var(--fbpro-cyan); }
.fbpro-stat-card-link.fbpro-stat-alert:hover { border-color: var(--fbpro-red); }
.fbpro-stat-icon { color: var(--fbpro-cyan); background: var(--fbpro-cyan-dim); width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fbpro-stat-alert .fbpro-stat-icon { color: var(--fbpro-red); background: rgba(255,84,104,.13); }
.fbpro-stat-num { display: block; font-size: 29px; font-weight: 800; color: var(--fbpro-text); font-variant-numeric: tabular-nums; }
.fbpro-stat-label { display: block; font-size: 12px; color: var(--fbpro-text-muted); }
.fbpro-stat-sublink { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--fbpro-amber); text-decoration: underline; }
.fbpro-stat-sublink:hover { color: var(--fbpro-cyan); }
.fbpro-panel-box { background: var(--fbpro-card); border: 1px solid var(--fbpro-border); border-radius: 14px; padding: 20px; margin-bottom: 16px; }

/* Tarjeta de "ruta activa" del chofer: un hilo animado sutil arriba, cyan si está en
   curso/pendiente, ámbar si está pausada — un pequeño toque tech sin sobrecargar la tarjeta. */
.fbpro-panel-box-ruta-activa,
.fbpro-panel-box-ruta-pausada { position: relative; overflow: hidden; }
.fbpro-panel-box-ruta-activa::before,
.fbpro-panel-box-ruta-pausada::before {
    content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 2px; border-radius: 2px;
    background-size: 200% 100%; animation: fbproScanline 3.2s linear infinite;
}
.fbpro-panel-box-ruta-activa { border-color: rgba(35,229,196,.3); }
.fbpro-panel-box-ruta-activa::before { background-image: linear-gradient(90deg, transparent, var(--fbpro-cyan), transparent); }
.fbpro-panel-box-ruta-pausada { border-color: rgba(255,180,60,.32); }
.fbpro-panel-box-ruta-pausada::before { background-image: linear-gradient(90deg, transparent, #ffb43c, transparent); }
@keyframes fbproScanline { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.fbpro-section-title-ruta { display: flex; align-items: center; gap: 10px; margin-top: 0; }

/* ---------- CTA FICHA DEL DÍA (panel del chofer) ---------- */
.fbpro-ficha-cta {
    display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 14px;
    margin-bottom: 18px; background: linear-gradient(160deg, var(--fbpro-card) 0%, var(--fbpro-panel) 100%);
    border: 1px solid var(--fbpro-border); transition: transform .15s ease, border-color .15s ease;
}
.fbpro-ficha-cta:hover { transform: translateY(-2px); }
.fbpro-ficha-cta-icon {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 48px; height: 48px; border-radius: 12px;
}
.fbpro-ficha-cta-texto { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }
.fbpro-ficha-cta-texto strong { font-size: 15px; color: var(--fbpro-text); }
.fbpro-ficha-cta-texto span { font-size: 12.5px; color: var(--fbpro-text-muted); }
.fbpro-ficha-cta-btn {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 10px 16px; border-radius: 9px; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.fbpro-ficha-cta-pending {
    border-color: rgba(255,122,69,.55);
    animation: fbproFichaCtaGlow 2.4s ease-in-out infinite;
}
.fbpro-ficha-cta-pending .fbpro-ficha-cta-icon { color: var(--fbpro-accent); background: rgba(255,122,69,.15); }
.fbpro-ficha-cta-pending .fbpro-ficha-cta-btn { background: linear-gradient(135deg, var(--fbpro-accent), #ff5f2e); color: #08110f; }
@keyframes fbproFichaCtaGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,69,.18); border-color: rgba(255,122,69,.55); }
    50%      { box-shadow: 0 0 22px 2px rgba(255,122,69,.28); border-color: rgba(255,122,69,.9); }
}
/* Ficha cargada (recibió el camión) pero todavía no cerrada (no entregó el camión): mismo
   tono naranja que "pendiente" para transmitir que la jornada sigue abierta, pero sin el
   parpadeo — ese se reserva para "todavía ni la empezaste". */
.fbpro-ficha-cta-abierta { border-color: rgba(255,122,69,.55); }
.fbpro-ficha-cta-abierta .fbpro-ficha-cta-icon { color: var(--fbpro-accent); background: rgba(255,122,69,.15); }
.fbpro-ficha-cta-abierta .fbpro-ficha-cta-btn { background: linear-gradient(135deg, var(--fbpro-accent), #ff5f2e); color: #08110f; }
.fbpro-ficha-cta-done { border-color: var(--fbpro-border); }
.fbpro-ficha-cta-done .fbpro-ficha-cta-icon { color: var(--fbpro-green); background: rgba(46,224,137,.13); }
.fbpro-ficha-cta-done .fbpro-ficha-cta-btn { background: var(--fbpro-card-hover); border: 1px solid var(--fbpro-border); color: var(--fbpro-text); }
.fbpro-ficha-cta-done:hover { border-color: var(--fbpro-cyan); }

/* ---------- TABLAS ---------- */
.fbpro-table-wrap { background: var(--fbpro-card); border: 1px solid var(--fbpro-border); border-radius: 14px; overflow-x: auto; }
/* Variante con encabezado sticky + alto máximo (Gomerías, Checklist): el scroll horizontal
   NO puede vivir en el mismo div que el scroll vertical + position:sticky, porque en Safari/
   WebKit mobile un mismo elemento con overflow en los dos ejes rompe el sticky y las filas
   terminan superponiéndose al hacer scroll (esto es lo que se veía roto en el celular). Por
   eso acá el scroll horizontal se le saca a .fbpro-table-wrap (overflow-x:visible) y se lo
   pasamos a un div interno nuevo (.fbpro-table-scroll-x); el sticky sigue funcionando porque
   su ancestro con scroll vertical (este div) sigue siendo el mismo de antes. */
.fbpro-table-wrap.fbpro-table-wrap-scroll { max-height: 520px; overflow-y: auto; overflow-x: visible; }
.fbpro-table-wrap-scroll .fbpro-table-scroll-x { overflow-x: auto; }
.fbpro-table-wrap-scroll thead th { position: sticky; top: 0; z-index: 2; }
/* Variante para Gomerías (ver .fbpro-map-fijo más arriba): en vez de un alto fijo de 520px,
   ocupa TODO el alto que quede libre dentro de .fbpro-main una vez descontado el título, los
   filtros y el mapa — así el mapa nunca queda compartiendo espacio de scroll con la tabla (no
   hay overlap posible porque .fbpro-main deja de necesitar scroll propio) y quien sí scrollea
   es esta tabla, con su propio scroll interno de siempre. .fbpro-main > * trae flex-shrink:0 por
   defecto (ver LAYOUT APP) — acá se pisa a propósito para que este elemento sea el que se achica
   y crezca según el espacio disponible, no los de arriba. min-height evita que en una pantalla
   muy baja termine colapsando a 0 y quedando inusable. */
.fbpro-main > .fbpro-table-wrap-fill.fbpro-table-wrap-scroll { max-height: none; flex: 1 1 auto; min-height: 220px; }
.fbpro-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
/* Gomerías quedó con solo 3 columnas de datos + acciones (el resto se ve en "Ver información")
   — ya no necesita el ancho mínimo de las tablas con más columnas, y forzarlo obligaba a
   scrollear horizontal en el celular sin necesidad. */
#fbproTablaGomerias { min-width: 0; }
.fbpro-table th { text-align: left; background: var(--fbpro-panel); color: var(--fbpro-text-muted); padding: 11px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--fbpro-border); }
.fbpro-table td { padding: 11px 14px; border-top: 1px solid var(--fbpro-border-soft); vertical-align: top; }
.fbpro-table tr:hover td { background: rgba(35,229,196,.03); }
.fbpro-table tr.fbpro-row-alert td { background: rgba(255,84,104,.07); }
.fbpro-table a { color: var(--fbpro-cyan); font-weight: 600; }
.fbpro-table-actions { display: flex; gap: 6px; }

/* ---------- BADGES / TAGS ---------- */
.fbpro-badge { padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.fbpro-badge-red { background: rgba(255,84,104,.16); color: var(--fbpro-red); border: 1px solid rgba(255,84,104,.3); }
.fbpro-badge-green { background: rgba(46,224,137,.14); color: var(--fbpro-green); border: 1px solid rgba(46,224,137,.3); }
.fbpro-badge-amber { background: rgba(255,182,72,.14); color: var(--fbpro-amber); border: 1px solid rgba(255,182,72,.3); }
.fbpro-badge-grey { background: rgba(127,163,156,.14); color: var(--fbpro-text-muted); border: 1px solid var(--fbpro-border); }
.fbpro-tag { background: var(--fbpro-panel); color: var(--fbpro-cyan); padding: 2px 9px; border-radius: 6px; font-size: 11px; border: 1px solid var(--fbpro-border); white-space: nowrap; }
.fbpro-tag-warn { background: rgba(255,182,72,.14); color: var(--fbpro-amber); border-color: rgba(255,182,72,.3); }
.fbpro-tag-prioridad-alta { background: rgba(255,84,104,.18); color: var(--fbpro-red); border: 1px solid rgba(255,84,104,.35); }
.fbpro-tag-prioridad-media { background: rgba(255,182,72,.18); color: var(--fbpro-amber); border: 1px solid rgba(255,182,72,.35); }
.fbpro-tag-prioridad-baja { background: rgba(127,163,156,.18); color: var(--fbpro-text-muted); border: 1px solid var(--fbpro-border); }
.fbpro-tag-live { background: rgba(46,224,137,.12); color: var(--fbpro-green); border: 1px solid rgba(46,224,137,.3); display: inline-flex; align-items: center; gap: 6px; }
.fbpro-tag-pausada { background: rgba(255,182,72,.14); color: var(--fbpro-amber); border: 1px solid rgba(255,182,72,.35); display: inline-flex; align-items: center; gap: 6px; }

/* ---------- MAPAS ---------- */
.fbpro-map { position: relative; width: 100%; height: 340px; border-radius: 14px; margin: 14px 0; border: 1px solid var(--fbpro-border); z-index: 1; filter: saturate(.9) brightness(.95); }
/* Mapa "fijo" (Gomerías: listado bajo el mapa) — hasta la v2.94.12 esto era position:sticky,
   pero un sticky pegado arriba de .fbpro-main hace justamente lo que Mauricio reportó: cuando
   .fbpro-main tenía que scrollear (título+filtros+mapa+tabla no entraban enteros en la
   pantalla), las primeras filas de la tabla pasaban VISUALMENTE por detrás del mapa al
   scrollear, en vez de quedar ocultas prolijamente arriba de él. La solución de fondo no es un
   mapa que se "pega" arriba mientras el resto pasa por atrás, sino que el mapa directamente
   nunca necesite compartir espacio de scroll con la tabla: ver .fbpro-table-wrap-fill más abajo,
   que hace que la tabla (con su propio scroll interno, ya armado en v2.94.7) ocupe el resto del
   alto disponible de .fbpro-main sin que éste llegue a necesitar scroll propio — el mapa queda
   fijo en pantalla simplemente porque nunca hay nada que lo empuje fuera de la vista. */
.fbpro-map-fijo { box-shadow: 0 10px 24px rgba(0,0,0,.35); flex-shrink: 0; }
/* El "+"/"−" del zoom de Leaflet es un <a> normal, y .fbpro-scope a { color: inherit } (arriba)
   les pisa el color oscuro que Leaflet les da por defecto, haciéndolos heredar el texto claro
   del tema oscuro del panel — sobre el fondo blanco propio del control de Leaflet, quedan
   invisibles (blanco sobre blanco). Se fija el color acá en vez de sacar la regla general,
   para no afectar el resto de los links del sistema. */
.fbpro-map .leaflet-control-zoom a { color: #1a1a1a; }
.fbpro-map .leaflet-control-zoom a:hover { color: #000; }

/* Popups de Leaflet (marcador de camión, gomería, etc.) con el tema oscuro del resto del
   panel — por defecto Leaflet los pinta blancos, que desentona fuerte con el resto de la
   interfaz. Vale para cualquier mapa del sistema (.fbpro-map), no solo Mapa en vivo. */
.fbpro-map .leaflet-popup-content-wrapper {
    background: var(--fbpro-card); color: var(--fbpro-text); border: 1px solid var(--fbpro-border);
    border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.fbpro-map .leaflet-popup-content { margin: 11px 14px; font-size: 13px; line-height: 1.5; }
.fbpro-map .leaflet-popup-tip { background: var(--fbpro-card); box-shadow: none; }
.fbpro-map .leaflet-popup-close-button { color: var(--fbpro-text-muted) !important; }
.fbpro-map .leaflet-popup-close-button:hover { color: var(--fbpro-text) !important; }
.fbpro-popup-camion-nombre { font-weight: 700; color: var(--fbpro-cyan); font-size: 14px; }
.fbpro-popup-camion-linea { margin-top: 3px; }
.fbpro-popup-camion-muted { color: var(--fbpro-text-muted); font-size: 12px; }

.fbpro-map-modal { height: 260px; margin: 10px 0 16px; }
.fbpro-map-armar-ruta { height: 280px; margin: 4px 0 16px; }
.fbpro-map-vivo { height: 480px; }
/* En PC, un toque más de alto para el mapa principal del listado de Gomerías (el de la
   captura) — solo desktop, para no empujar de más el contenido en pantallas angostas. */
@media (min-width: 881px) {
    .fbpro-map-fijo { height: 380px; }
}

/* Leyenda del "Recorrido sugerido" (ver FBPRO_Routing): la muestra de línea es un tramo
   corto con el mismo violeta oscuro punteado que dibuja Leaflet, para que el color se
   identifique de un vistazo con la línea real del mapa de arriba. Violeta oscuro en vez del
   flúo original (#c6ff00): sobre el mapa base claro de OpenStreetMap el flúo se lavaba y
   costaba distinguirlo — Mauricio pidió pasar a un color oscuro que se note más. */
.fbpro-recorrido-sugerido-leyenda {
    display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; padding: 8px 12px;
    background: var(--fbpro-card); border: 1px solid var(--fbpro-border); border-radius: 9px;
    font-size: 13px; color: var(--fbpro-text-muted);
}
.fbpro-recorrido-sugerido-muestra {
    display: inline-block; width: 28px; height: 0; border-top: 3px dashed #7b1fa2; flex-shrink: 0;
}
.fbpro-recorrido-real-muestra {
    display: inline-block; width: 28px; height: 0; border-top: 4px dashed #e53935; flex-shrink: 0;
}
/* Fila de estado bajo el mapa del detalle de ruta ("Centrar en el camión" + tags de
   "Actualizando cada X segundos" y "Última señal..."): la base .fbpro-flex-header usa
   space-between, que con 2-3 elementos de ancho distinto los estira a los extremos del
   contenedor con huecos grandes y dispares — acá se ven mejor agrupados y centrados, con un
   espacio parejo entre ellos, en vez de repartidos por todo el ancho. */
/* Antes centrada (justify-content:center); a pedido de Mauricio, vuelve a la izquierda, pero
   agrupada con un espacio parejo entre fichas en vez del space-between original de
   .fbpro-flex-header (que las estiraba a los extremos del ancho disponible). */
.fbpro-fila-estado-ruta {
    justify-content: flex-start; gap: 16px; row-gap: 10px; margin-top: 14px;
}

.fbpro-btn-limpiar-recorrido {
    margin-left: auto; background: none; border: none; color: var(--fbpro-text-muted); cursor: pointer;
    display: inline-flex; padding: 3px; border-radius: 6px; transition: color .15s, background .15s;
}
.fbpro-btn-limpiar-recorrido:hover { color: var(--fbpro-red); background: rgba(255,84,104,.12); }

/* Barra de controles del "Replay" (botón junto a Recorrido/Recorrido sugerido, detalle de
   ruta): reproduce el trayecto real punto a punto en vez de solo mostrar la línea fija. */
.fbpro-replay-barra {
    display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; padding: 8px 14px;
    background: var(--fbpro-card); border: 1px solid var(--fbpro-border); border-radius: 9px;
}
.fbpro-replay-play {
    flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    background: var(--fbpro-cyan-dim); border: 1px solid rgba(35,229,196,.35); color: var(--fbpro-cyan);
    border-radius: 50%; cursor: pointer; transition: background .15s;
}
.fbpro-replay-play:hover { background: rgba(35,229,196,.28); }
.fbpro-replay-slider { flex: 1; accent-color: var(--fbpro-cyan); cursor: pointer; }
.fbpro-replay-texto { flex-shrink: 0; font-size: 12px; color: var(--fbpro-text-muted); min-width: 190px; text-align: right; }
@media (max-width: 700px) { .fbpro-replay-texto { min-width: 0; text-align: left; flex-basis: 100%; order: 4; } }

/* Botón de pantalla completa, agregado por JS a cada mapa (fbproHabilitarFullscreenMapa()).
   Esquina superior derecha para no chocar con los controles +/- de Leaflet, que viven arriba
   a la izquierda. Mismo lenguaje visual que .fbpro-burger (tarjeta oscura, borde sutil, se
   ilumina en cian al pasar el mouse), para que se sienta parte del mismo sistema y no un
   control suelto de una librería externa. */
.fbpro-map-fullscreen-btn {
    position: absolute; top: 10px; right: 10px; z-index: 1000; /* mismo nivel que los controles propios de Leaflet (leaflet-control-container), por encima de cualquier pane, popup o tooltip del mapa */
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    background: var(--fbpro-card); border: 1px solid var(--fbpro-border); border-radius: 9px;
    color: var(--fbpro-text); cursor: pointer; padding: 0; box-shadow: 0 4px 14px rgba(0,0,0,.4);
    transition: border-color .15s, color .15s, background .15s, transform .15s;
}
.fbpro-map-fullscreen-btn:hover { border-color: var(--fbpro-cyan); color: var(--fbpro-cyan); background: var(--fbpro-card-hover); }
.fbpro-map-fullscreen-btn:active { transform: scale(.93); }

/* Botón de giro manual (ver comentario junto a GIRAR_HORIZONTAL_SVG en fbpro.js): mismo look que
   el de pantalla completa, un lugar a la izquierda suyo. Oculto por defecto — solo tiene sentido
   en mobile (en PC no hay pantalla que "girar") y solo mientras el mapa está expandido, así que
   se muestra nada más bajo esa combinación exacta. */
.fbpro-map-rotate-btn {
    display: none; position: absolute; top: 10px; right: 54px; z-index: 1000;
    width: 34px; height: 34px; align-items: center; justify-content: center;
    background: var(--fbpro-card); border: 1px solid var(--fbpro-border); border-radius: 9px;
    color: var(--fbpro-text); cursor: pointer; padding: 0; box-shadow: 0 4px 14px rgba(0,0,0,.4);
    transition: border-color .15s, color .15s, background .15s, transform .15s;
}
.fbpro-map-rotate-btn:hover { border-color: var(--fbpro-cyan); color: var(--fbpro-cyan); background: var(--fbpro-card-hover); }
.fbpro-map-rotate-btn:active { transform: scale(.93); }
@media (max-width: 880px) {
    .fbpro-map.fbpro-map-fullscreen .fbpro-map-rotate-btn { display: flex; }
}

/* Fondo oscurecido detrás del mapa expandido — mismo tratamiento que .fbpro-modal, para que
   la expansión se sienta coherente con el resto de los overlays del sistema en vez de un
   comportamiento aparte. Vive fuera de .fbpro-map porque es un único elemento compartido por
   los 7 mapas (lo crea fbproHabilitarFullscreenMapa() la primera vez que hace falta). */
.fbpro-map-fullscreen-backdrop {
    display: none; position: fixed; inset: 0; z-index: 99999;
    background: rgba(3,10,10,.82); backdrop-filter: blur(2px);
}
.fbpro-map-fullscreen-backdrop.fbpro-map-fullscreen-backdrop-open { display: block; animation: fbproFadeBg .18s ease; }

/* El mapa expandido en sí: pasa a fixed, ocupa casi toda la pantalla con un margen parejo
   (no borde a borde) para que se note que es un overlay "enmarcado" y no un cambio de página
   — mismo espíritu que el padding de .fbpro-modal-content. Los !important pisan el alto/ancho
   fijo o sticky que ese mapa tenga en su estado normal (340px, 380px, 480px, sticky, etc). */
.fbpro-map.fbpro-map-fullscreen {
    position: fixed !important; inset: 16px !important; top: 16px !important; right: 16px !important; bottom: 16px !important; left: 16px !important;
    width: auto !important; height: auto !important; margin: 0 !important;
    z-index: 100000; box-shadow: 0 30px 80px rgba(0,0,0,.6);
    animation: fbproPopIn .22s cubic-bezier(.2,.9,.3,1.2);
}
.fbpro-map.fbpro-map-fullscreen .fbpro-map-fullscreen-btn { top: 14px; right: 14px; }
.fbpro-map.fbpro-map-fullscreen .fbpro-map-rotate-btn { top: 14px; right: 58px; }
body.fbpro-map-fullscreen-activo { overflow: hidden; } /* que no se pueda scrollear el panel de atrás mientras el mapa está expandido */

/* Giro manual: en vez de esperar a que el sistema operativo rote la pantalla (que en la PWA
   instalada no pasa, queda fija en la orientación de su manifest), se gira directamente el
   RECUADRO del mapa 90° con transform. Ancho y alto se intercambian (100vh de ancho, 100vw de
   alto) para que, una vez rotado, el rectángulo vuelva a ocupar exactamente el mismo espacio en
   pantalla que ocupaba antes de girar — mismo truco que usan los reproductores de video con
   "forzar horizontal". Sin margen propio en este estado (a diferencia del inset:16px normal):
   el botón solo aparece en mobile, donde <640px ya usa inset:0 de todas formas, así que no se
   pierde nada. transform-origin queda en el centro por defecto, por eso el translate(-50%,-50%)
   además de centrar compensa que top/left:50% se miden desde la esquina del elemento, no su
   centro. */
.fbpro-map.fbpro-map-fullscreen.fbpro-map-forzado-horizontal {
    top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
    width: 100vh !important; height: 100vw !important;
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform .2s ease;
    border-radius: 0;
}

@media (max-width: 640px) {
    .fbpro-map.fbpro-map-fullscreen { inset: 0 !important; border-radius: 0; }
}

@keyframes fbproPulseLive { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
#fbproLiveEstado .fbpro-icon { animation: fbproPulseLive 1.8s ease-in-out infinite; }

/* ---------- FORMULARIOS / MODALES ---------- */
.fbpro-modal { display: none; position: fixed; inset: 0; background: rgba(3,10,10,.72); backdrop-filter: blur(2px); z-index: 99999; align-items: center; justify-content: center; padding: 20px; }
.fbpro-modal.fbpro-modal-open { display: flex; animation: fbproFadeBg .18s ease; }
.fbpro-modal-content { background: var(--fbpro-panel); border: 1px solid var(--fbpro-border); border-radius: 16px; padding: 30px 28px 28px; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; position: relative; color: var(--fbpro-text); box-shadow: 0 30px 70px rgba(0,0,0,.5); animation: fbproPopIn .22s cubic-bezier(.2,.9,.3,1.2); }
@keyframes fbproFadeBg { from { opacity: 0; } to { opacity: 1; } }
@keyframes fbproPopIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.fbpro-modal-lg { max-width: 640px; }
.fbpro-modal-content h2 { padding-right: 40px; }
.fbpro-modal-close {
    position: absolute; top: 18px; right: 18px; z-index: 3;
    background: var(--fbpro-card); border: 1px solid var(--fbpro-border); border-radius: 50%;
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--fbpro-text-muted);
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.fbpro-modal-close .fbpro-icon { transition: transform .28s cubic-bezier(.34,1.56,.64,1); }
.fbpro-modal-close:hover { background: rgba(255,84,104,.14); border-color: var(--fbpro-red); color: var(--fbpro-red); transform: scale(1.08); }
.fbpro-modal-close:hover .fbpro-icon { transform: rotate(90deg); }
.fbpro-modal-close:active { transform: scale(.9); }
.fbpro-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.fbpro-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.fbpro-form-field { display: flex; flex-direction: column; gap: 5px; }
.fbpro-span-2 { grid-column: span 2; }
.fbpro-form-field label { font-size: 11px; font-weight: 600; color: var(--fbpro-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.fbpro-checkbox-list { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 16px; }
.fbpro-checkbox-group-title { margin: 4px 0 -2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fbpro-cyan); }
.fbpro-checkbox-group-title:first-child { margin-top: 0; }
.fbpro-checkbox-row {
    display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--fbpro-text);
    text-align: left; cursor: pointer;
}
.fbpro-checkbox-row input[type="checkbox"] { flex-shrink: 0; width: 17px; height: 17px; accent-color: var(--fbpro-cyan); margin: 0; }
.fbpro-form-field input, .fbpro-form-field select, .fbpro-form-field textarea, .fbpro-input {
    padding: 10px 11px; border: 1px solid var(--fbpro-border); border-radius: 8px; font-size: 14px; width: 100%;
    background: var(--fbpro-bg-alt); color: var(--fbpro-text);
}
.fbpro-form-field input:focus, .fbpro-form-field select:focus, .fbpro-form-field textarea:focus, .fbpro-input:focus {
    outline: none; border-color: var(--fbpro-cyan); box-shadow: 0 0 0 3px var(--fbpro-cyan-dim);
}
.fbpro-input { margin-bottom: 10px; }
.fbpro-geoloc-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 4px; }
.fbpro-geoloc-row .fbpro-input { margin-bottom: 0; flex: 1; }
.fbpro-geoloc-row .fbpro-btn { white-space: nowrap; flex-shrink: 0; }
.fbpro-alert { padding: 11px 14px; border-radius: 9px; font-size: 13px; margin-bottom: 12px; background: var(--fbpro-card); border: 1px solid var(--fbpro-border); }
.fbpro-alert-error { background: rgba(255,84,104,.12); color: #ffb3bc; border-color: rgba(255,84,104,.35); }
.fbpro-alert-ok { background: rgba(46,224,137,.12); color: #9df3c8; border-color: rgba(46,224,137,.35); }
.fbpro-alert-amber { background: rgba(255,182,72,.12); color: #ffd699; border-color: rgba(255,182,72,.35); display: flex; align-items: center; gap: 8px; }
.fbpro-alert-amber svg { flex-shrink: 0; }
.fbpro-alerta-fichas { justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.fbpro-alerta-fichas-texto { display: flex; align-items: center; gap: 8px; }
.fbpro-alerta-fichas-texto a { color: #ffd699; text-decoration: underline; }
.fbpro-logo-preview { max-height: 60px; max-width: 220px; width: auto; height: auto; align-self: flex-start; object-fit: contain; margin-top: 8px; display: block; }

/* ---------- SELECCION CHECKLIST DE GOMERIAS ---------- */
.fbpro-checklist-select { max-height: 220px; overflow-y: auto; border: 1px solid var(--fbpro-border); border-radius: 10px; padding: 10px; margin-bottom: 14px; background: var(--fbpro-bg-alt); }
.fbpro-checklist-titulo { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--fbpro-text); }
.fbpro-check-item { display: flex; align-items: center; gap: 9px; padding: 7px 4px; font-size: 13px; cursor: pointer; }
.fbpro-checklist-grupo-titulo { margin: 10px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--fbpro-text-muted); }
.fbpro-checklist-grupo-titulo:first-child { margin-top: 0; }
.fbpro-select-departamentos { margin-bottom: 12px; max-height: 140px; }
.fbpro-check-item-dep { border-bottom: 1px solid var(--fbpro-border-soft); }
.fbpro-check-item-dep:last-child { border-bottom: none; }
.fbpro-check-item-bloqueada { opacity: .55; cursor: not-allowed; }

/* ---------- PARADAS RUTA (CHOFER) ---------- */
.fbpro-paradas-list { display: flex; flex-direction: column; gap: 10px; }
.fbpro-parada-card { display: flex; gap: 13px; align-items: flex-start; background: var(--fbpro-card); border: 1px solid var(--fbpro-border); border-radius: 14px; padding: 15px 17px; }
.fbpro-parada-status-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.fbpro-parada-pendiente .fbpro-parada-status-dot { background: var(--fbpro-red); box-shadow: 0 0 10px rgba(255,84,104,.6); }
.fbpro-parada-visitada .fbpro-parada-status-dot { background: var(--fbpro-green); box-shadow: 0 0 10px rgba(46,224,137,.6); }
.fbpro-parada-visitada { opacity: .8; }
.fbpro-parada-info h3 { margin: 0 0 4px; font-size: 15px; color: var(--fbpro-text) !important; }
.fbpro-parada-info p { margin: 0 0 8px; font-size: 13px; color: var(--fbpro-text-muted); }
.fbpro-parada-acciones-previas { display: flex; gap: 8px; margin-bottom: 8px; align-items: stretch; }
.fbpro-parada-acciones-previas .fbpro-btn { flex: 1 1 0; justify-content: center; text-align: center; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.fbpro-info-tabla { width: 100%; border-collapse: collapse; margin: 8px 0 4px; }
.fbpro-info-tabla td { padding: 7px 0; border-bottom: 1px solid var(--fbpro-border); font-size: 13px; }
.fbpro-info-tabla td:first-child { color: var(--fbpro-text-muted); width: 40%; font-weight: 600; }
.fbpro-parada-resultado { color: var(--fbpro-green) !important; font-weight: 600; font-size: 13px !important; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fbpro-parada-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px; }
.fbpro-parada-nota { display: block; margin: 0 0 8px; font-size: 12.5px; color: var(--fbpro-text-muted); }

/* ---------- INCIDENCIAS ---------- */
.fbpro-incidencias-list { display: flex; flex-direction: column; gap: 12px; }
.fbpro-incidencia-card { background: var(--fbpro-card); border: 1px solid var(--fbpro-border); border-left: 4px solid var(--fbpro-text-dim); border-radius: 12px; padding: 15px 17px; }
.fbpro-incidencia-card.fbpro-prioridad-alta { border-left-color: var(--fbpro-red); }
.fbpro-incidencia-card.fbpro-prioridad-media { border-left-color: var(--fbpro-amber); }
.fbpro-incidencia-card.fbpro-prioridad-baja { border-left-color: var(--fbpro-text-dim); }
.fbpro-incidencia-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.fbpro-incidencia-fecha { font-size: 12px; color: var(--fbpro-text-muted); }
.fbpro-fotos-grid { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.fbpro-fotos-grid img { width: 64px; height: 64px; object-fit: cover; border-radius: 9px; border: 1px solid var(--fbpro-border); }
.fbpro-incidencia-acciones { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ---------- CHECKLIST ---------- */
.fbpro-checklist-view { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fbpro-checklist-view li { padding: 11px 15px; background: var(--fbpro-card); border: 1px solid var(--fbpro-border); border-radius: 9px; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fbpro-tarea-done { color: var(--fbpro-text-muted); text-decoration: line-through; }
.fbpro-checklist-interactive label { display: flex; align-items: center; gap: 10px; cursor: pointer; width: 100%; flex-wrap: wrap; }
.fbpro-checklist-interactive input[type="checkbox"] { accent-color: var(--fbpro-cyan); width: 17px; height: 17px; }
.fbpro-checklist-admin li { display: flex; align-items: center; gap: 10px; }
.fbpro-btn-toggle-tarea { flex-shrink: 0; }
.fbpro-radio-row { display: flex; flex-direction: column; gap: 10px; }
.fbpro-radio-row label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--fbpro-text); cursor: pointer; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--fbpro-border); background: var(--fbpro-card); transition: border-color .15s ease, background .15s ease; }
.fbpro-radio-row label:hover { border-color: var(--fbpro-cyan); }
.fbpro-radio-row label:has(input:checked) { border-color: var(--fbpro-cyan); background: var(--fbpro-cyan-dim); }
.fbpro-radio-row input { accent-color: var(--fbpro-cyan); width: 15px; height: 15px; flex-shrink: 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 880px) {
    .fbpro-body { position: relative; }
    /* fixed (no absolute): así el menú se ancla siempre al viewport real del teléfono, sin
       depender de la altura de .fbpro-body/.fbpro-main — que varía según cuánto contenido
       tenga la sección abierta (ej. Mi Ruta, con mapa y tarjetas, es más alta que Inicio).
       Con absolute, en una sección larga el menú terminaba estirándose a la altura del
       contenido en vez de la del viewport, y "Salir" (empujado al fondo con margin-top:auto)
       quedaba fuera de la pantalla. top usa el alto real del topbar (medido por JS en
       --fbpro-topbar-h, ver actualizarAltoTopbar en fbpro.js) en vez de 0: como .fbpro-body
       tiene su propio z-index más bajo que el topbar, un top:0 acá hacía que el menú
       arrancara detrás del topbar y sus primeros ítems quedaran tapados e inaccesibles. */
    .fbpro-sidebar {
        position: fixed; left: 0; top: var(--fbpro-topbar-h, 61px); bottom: 0; z-index: 50; transform: translateX(-100%);
        transition: transform .2s ease; width: var(--fbpro-sidebar-w); box-shadow: 8px 0 30px rgba(0,0,0,.4);
    }
    .fbpro-sidebar.fbpro-sidebar-open { transform: translateX(0); }
    .fbpro-sidebar-overlay.fbpro-overlay-open { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: var(--fbpro-topbar-h, 61px); z-index: 40; background: rgba(0,0,0,.45); }
    /* padding-bottom con un extra de 16px sobre el alto real del pie (no solo lo justo): sin
       ese margen la última línea de contenido quedaba pegada directo contra el borde del pie,
       sin respiro (Mauricio lo señaló con una captura). */
    .fbpro-main { padding: 18px 16px; padding-bottom: calc(var(--fbpro-footer-h, 44px) + 16px); }
    /* El pie de copyright pasa a anclarse al viewport real del teléfono en vez de a la altura
       calculada de .fbpro-app (ver actualizarAltoFooter en fbpro.js, mismo motivo y mismo
       patrón que .fbpro-sidebar más arriba). Necesita fondo opaco porque ahora queda flotando
       ARRIBA del contenido scrolleado de .fbpro-main, no como una franja más del flujo normal.
       z-index por encima de .fbpro-body (que tiene z-index:1) para que el pie SIEMPRE gane
       contra el contenido normal de .fbpro-main que scrollea por debajo — de vuelta a como
       estaba antes de la 2.94.18, porque bajarlo a 0 corrigió que tapara al menú lateral pero
       rompió esto otro: el contenido scrolleado pasaba por delante del copyright en vez de
       quedar detrás (Mauricio lo reportó con otra captura). La solución real para el menú
       lateral es la regla de abajo, no bajar el z-index del pie. */
    .fbpro-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; background: var(--fbpro-bg); }
    /* Cuando el menú lateral mobile está abierto, .fbpro-body necesita pasar a estar por
       encima del pie (que si no, con su z-index:2 fijo, tapa el botón "Salir" del menú — el
       bug original de la 2.94.18). En vez de bajar el z-index del pie permanentemente (lo que
       rompe el caso normal de arriba), se sube el de .fbpro-body SOLO mientras el menú está
       abierto (clase que pone fbpro.js en el click del botón hamburguesa) — así cada caso
       gana en su momento: el pie de normal, el menú cuando está abierto. */
    .fbpro-app.fbpro-menu-movil-abierto .fbpro-body { z-index: 3; }
    .fbpro-form-grid { grid-template-columns: 1fr; }
    .fbpro-span-2 { grid-column: span 1; }
    .fbpro-hide-mobile { display: none; }
    .fbpro-topbar-user .fbpro-user-name { display: none; }
    .fbpro-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .fbpro-map-vivo { height: 320px; }
    .fbpro-parada-acciones-previas .fbpro-btn { font-size: 12px; padding-left: 6px; padding-right: 6px; gap: 4px; }
}
@media (max-width: 380px) {
    .fbpro-parada-acciones-previas .fbpro-btn { font-size: 11px; }
    /* Colchón por si el rol es largo ("Administrador") en un teléfono angosto: sin "Salir"
       (se movió al menú lateral) y con "Actualizar"/"Instalar app" ya reducidos a solo
       ícono, esto es nomás para los casos más extremos. */
    .fbpro-topbar { padding-left: 12px; padding-right: 12px; }
    .fbpro-topbar-user { gap: 6px; }
    .fbpro-role-pill { padding: 3px 9px; }
}
@media (max-width: 480px) {
    .fbpro-cards-grid { grid-template-columns: 1fr; }
    .fbpro-login-card { padding: 30px 22px; }
    .fbpro-geoloc-row { flex-direction: column; }
    .fbpro-filtros-bar { flex-direction: column; align-items: stretch; gap: 10px; }
    .fbpro-filtros-bar .fbpro-form-field { min-width: 0; flex: 0 0 auto; }
    .fbpro-filtros-botones { flex-direction: row; }
    .fbpro-filtros-botones .fbpro-btn { flex: 1 1 0; justify-content: center; padding: 10px 8px; font-size: 13px; white-space: normal; text-align: center; }
}

/* ---------- IMPORTACIÓN DE GOMERÍAS: BARRA DE PROGRESO ---------- */
.fbpro-progress-track { width: 100%; height: 10px; border-radius: 6px; background: var(--fbpro-border-soft); overflow: hidden; margin: 10px 0; }
.fbpro-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--fbpro-cyan), var(--fbpro-accent)); transition: width .2s ease; }
.fbpro-importar-lista { max-height: 160px; overflow-y: auto; font-size: 13px; color: var(--fbpro-text-muted); margin: 0 0 10px; padding-left: 18px; }
.fbpro-header-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- TOAST DE EXITO ---------- */
.fbpro-toast {
    position: fixed; top: 20px; right: 20px; z-index: 999999;
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(160deg, #103a2c 0%, #0c2a20 100%);
    border: 1px solid rgba(46,224,137,.4); border-left: 4px solid var(--fbpro-green);
    color: #eafff3; padding: 13px 18px; border-radius: 12px; font-size: 14px; font-weight: 600;
    font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
    box-shadow: 0 12px 30px rgba(0,0,0,.4), 0 0 20px rgba(46,224,137,.15);
    max-width: 340px; animation: fbproToastIn .25s cubic-bezier(.2,.9,.3,1.2);
}
.fbpro-toast.fbpro-toast-oculto { animation: fbproToastOut .25s ease forwards; }
.fbpro-toast-icon { color: var(--fbpro-green); flex-shrink: 0; display: flex; }
@keyframes fbproToastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fbproToastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(24px); } }
@media (max-width: 480px) {
    .fbpro-toast { left: 14px; right: 14px; top: 14px; max-width: none; }
}

/* ---------- INSTALAR COMO APP (PWA) ---------- */
.fbpro-btn-instalar-app { display: none; }
@media (max-width: 900px) {
    .fbpro-btn-instalar-app { display: inline-flex; }
}
.fbpro-pwa-banner {
    position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 999998;
    display: flex; flex-direction: row; align-items: center; gap: 10px;
    background: linear-gradient(160deg, var(--fbpro-bg-alt) 0%, #0a1414 100%);
    border: 1px solid rgba(46,224,137,.4); border-left: 4px solid var(--fbpro-green);
    color: var(--fbpro-text); padding: 12px 14px; border-radius: 12px;
    font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 13px; font-weight: 600; line-height: 1.3;
    box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 22px rgba(46,224,137,.25);
    animation: fbproPwaBannerIn .3s cubic-bezier(.2,.9,.3,1.2);
}
.fbpro-pwa-banner-texto { flex: 1; min-width: 0; }
.fbpro-pwa-banner-instalar {
    flex-shrink: 0; background: linear-gradient(135deg, #39f0a0, var(--fbpro-green));
    color: #06231a; font-weight: 700; font-size: 13px; font-family: inherit;
    border: none; border-radius: 8px; padding: 8px 14px; cursor: pointer;
    box-shadow: 0 4px 14px rgba(46,224,137,.4);
}
.fbpro-pwa-banner-cerrar {
    background: none; border: none; color: var(--fbpro-text-dim); font-size: 20px; line-height: 1;
    cursor: pointer; padding: 0 2px; flex-shrink: 0;
    font-family: inherit;
}
@keyframes fbproPwaBannerIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 901px) {
    .fbpro-pwa-banner { display: none; }
}

/* ---------- SALUDO DEL CHOFER: punto en línea + reloj digital ---------- */
.fbpro-saludo-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.fbpro-page-title-saludo { display: flex; align-items: center; gap: 10px; margin-bottom: 0; }
.fbpro-reloj-chip {
    display: flex; align-items: baseline; gap: 8px;
    font-family: 'Courier New', Courier, monospace; letter-spacing: .5px;
    background: var(--fbpro-bg-alt); border: 1px solid var(--fbpro-border); border-radius: 8px;
    padding: 6px 13px; box-shadow: inset 0 0 10px rgba(46,224,137,.08);
    flex-shrink: 0;
}
.fbpro-reloj-fecha { font-size: 11px; color: var(--fbpro-text-dim); }
.fbpro-reloj-hora { font-size: 15px; font-weight: 700; color: var(--fbpro-green); text-shadow: 0 0 8px rgba(46,224,137,.4); }