/* Mapa da Frota (mod-frota-gps). Prefixo fg-.

   Só o que é deste ecrã: o par mapa + lista, os cartões das viaturas e os pinos do
   Leaflet. Cabeçalho, KPIs e estados vazios vêm do design system.

   Cor: as etapas distinguem-se por um ponto, e o vermelho da casa fica para os botões
   e para o que está selecionado - nada de fundos rosados. */

.fg-pagina { min-width: 0; }

.fg-corpo {
    display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 12px; min-width: 0;
}
@media (min-width: 1000px) {
    /* O mapa manda no ecrã e a lista acompanha-o de lado; abaixo disto empilham,
       porque um mapa com 300 px de largura não diz nada a ninguém. */
    .fg-corpo { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); align-items: start; }
}

.fg-mapa-caixa {
    border: 1px solid rgba(15, 12, 41, .07); border-radius: 18px; overflow: hidden;
    background: var(--surface, #fff); box-shadow: 0 1px 2px rgba(15, 12, 41, .04);
    position: relative;
}
/* O mapa a carregar (24/09/2026): uma camada POR CIMA da caixa do Leaflet, e não lá
   dentro — o Leaflet mede e enche a `.fg-mapa`, e um filho estranho lá dentro ficava
   por baixo dos mosaicos. Sai quando a página pinta. */
.fg-skel-mapa { position: absolute; inset: 0; border-radius: 0; z-index: 2; }
.fg-mapa { height: 62vh; min-height: 340px; width: 100%; }
@media (max-width: 999px) { .fg-mapa { height: 46vh; min-height: 280px; } }
.fg-mapa .leaflet-container { font: inherit; }

.fg-lista { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (min-width: 1000px) { .fg-lista { max-height: 62vh; overflow-y: auto; padding-right: 2px; } }

.fg-cartao {
    display: flex; flex-direction: column; gap: 5px;
    padding: 12px 14px; border-radius: 16px; cursor: pointer;
    background: var(--surface, #fff); border: 1px solid rgba(15, 12, 41, .07);
    box-shadow: 0 1px 2px rgba(15, 12, 41, .04), 0 4px 14px rgba(15, 12, 41, .04);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.fg-cartao:hover { border-color: rgba(15, 12, 41, .14); transform: translateY(-1px); }
.fg-cartao:focus-visible { outline: 2px solid var(--primary-500, #DA0A0D); outline-offset: 2px; }
.fg-cartao.is-sem-posicao { opacity: .72; cursor: default; }

.fg-cartao-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fg-ponto { width: 9px; height: 9px; border-radius: 9999px; flex-shrink: 0; }
.fg-matricula { font-size: 15px; font-weight: 800; letter-spacing: .02em; color: var(--text-1, #1B1618); }
.fg-estado { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-2, #4A4245); }
.fg-modelo { margin: 0; font-size: 12.5px; color: var(--text-3, #6E6668); }
.fg-morada { margin: 0; font-size: 13px; color: var(--text-1, #1B1618); overflow-wrap: anywhere; }

.fg-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-3, #6E6668); }
.fg-meta span { display: inline-flex; align-items: center; gap: 5px; }

.fg-kms { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 2px; }
.fg-km-gps { font-size: 13px; font-weight: 800; color: var(--text-1, #1B1618); font-variant-numeric: tabular-nums; }
.fg-km-dif {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px;
    font-size: 11px; font-weight: 700;
    background: var(--warning-50, #FFF7E6); color: var(--warning-700, #92400E);
}
.fg-km-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--success-700, #166534); }
.fg-ficha { align-self: flex-start; font-size: 12.5px; }

.fg-vazio { margin: 16px; font-size: 13px; color: var(--text-3, #6E6668); text-align: center; }

.fg-aviso {
    display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0;
    padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45;
    background: var(--warning-50, #FFF7E6); color: var(--warning-700, #92400E);
}
.fg-aviso svg { flex-shrink: 0; margin-top: 1px; }

/* ---------- pinos do mapa ---------- */
.fg-pin { background: transparent; border: 0; }
.fg-pin-bola {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9999px; color: #fff;
    border: 2px solid #fff; box-shadow: 0 2px 8px rgba(15, 12, 41, .35);
}
.fg-pin-txt {
    position: absolute; left: 50%; top: 32px; transform: translateX(-50%);
    padding: 1px 6px; border-radius: 9999px; white-space: nowrap;
    font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
    background: rgba(255, 255, 255, .92); color: var(--text-1, #1B1618);
    box-shadow: 0 1px 4px rgba(15, 12, 41, .25);
}
.fg-popup strong { font-size: 14px; }
.fg-popup-meta { font-size: 12px; color: var(--text-3, #6E6668); }
.fg-popup a { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--primary-500, #DA0A0D); }

/* ---------- ao vivo ---------- */
.fg-vivo .fg-vivo-bola {
    width: 9px; height: 9px; border-radius: 9999px; flex-shrink: 0;
    background: var(--ink-400, #9A9294);
}
.ds-btn.fg-vivo.is-on { background: var(--primary-500, #DA0A0D); border-color: var(--primary-500, #DA0A0D); color: #fff; }
.ds-btn.fg-vivo.is-on .fg-vivo-bola { background: #fff; animation: fg-pulsar 1.6s ease-in-out infinite; }
@keyframes fg-pulsar { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.fg-seguir {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
    min-height: 28px; padding: 0 10px; border-radius: 9999px; cursor: pointer;
    border: 1px solid var(--border, #E5E1E2); background: var(--surface, #fff);
    color: var(--text-2, #4A4245); font: inherit; font-size: 12px; font-weight: 700;
}
.fg-seguir:hover { border-color: var(--border-strong, #CFC9CB); }
.fg-seguir.is-on { background: var(--primary-500, #DA0A0D); border-color: var(--primary-500, #DA0A0D); color: #fff; }

/* A carrinha a andar: o pino respira, e uma seta diz para onde vai. */
.fg-pin-bola.is-movimento { animation: fg-respirar 1.8s ease-in-out infinite; }
@keyframes fg-respirar {
    0%, 100% { box-shadow: 0 2px 8px rgba(15, 12, 41, .35), 0 0 0 0 rgba(21, 128, 61, .45); }
    70% { box-shadow: 0 2px 8px rgba(15, 12, 41, .35), 0 0 0 12px rgba(21, 128, 61, 0); }
}
.fg-pin-seta {
    position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -22px 0 0 -5px;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-bottom: 8px solid var(--text-1, #1B1618);
    transform-origin: 50% 27px;
}

/* =====================================================================================
   O RESTO DA PÁGINA (24/09/2026) — «Hoje», a frota em tabela e o registo de eventos.

   O mapa e os cartões respondem a «onde está». Isto responde ao resto: quem vai ao
   volante, quanto andou hoje, a que velocidade chegou, o que aconteceu durante o dia.
   Tudo em cartões largos por baixo do mapa, para o par mapa+lista continuar a mandar
   no primeiro ecrã.
   ===================================================================================== */

.fg-cartao-largo {
    margin-top: 14px; padding: 14px 16px 16px; border-radius: 18px; min-width: 0;
    background: var(--surface, #fff); border: 1px solid rgba(15, 12, 41, .07);
    box-shadow: 0 1px 2px rgba(15, 12, 41, .04), 0 4px 14px rgba(15, 12, 41, .04);
}
.fg-cartao-largo:empty { display: none; }

.fg-cab-cartao { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fg-cab-tit {
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
    font-size: 14.5px; font-weight: 800; color: var(--text-1, #1B1618);
}
.fg-cab-tit svg { color: var(--primary-500, #DA0A0D); }
.fg-cab-nota { font-size: 12.5px; color: var(--text-3, #6E6668); }
.fg-cab-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.fg-procura { position: relative; display: inline-flex; align-items: center; }
.fg-procura-ico { position: absolute; left: 10px; display: inline-flex; color: var(--text-3, #6E6668); }
.fg-procura input {
    min-height: 34px; padding: 0 10px 0 30px; width: 230px; max-width: 46vw;
    border: 1px solid var(--border, #E5E1E2); border-radius: 9999px;
    background: var(--surface, #fff); color: var(--text-1, #1B1618); font: inherit; font-size: 13px;
}
.fg-procura input:focus { outline: 2px solid var(--primary-500, #DA0A0D); outline-offset: 1px; border-color: transparent; }

/* ---------- Hoje ---------- */
.fg-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.fg-tile {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
    border-radius: 14px; background: var(--surface-2, #FAF8F8); border: 1px solid rgba(15, 12, 41, .05);
}
.fg-tile-n { font-size: 20px; font-weight: 800; color: var(--text-1, #1B1618); font-variant-numeric: tabular-nums; }
.fg-tile-rot { font-size: 12.5px; font-weight: 700; color: var(--text-2, #4A4245); }
.fg-tile-nota { font-size: 11.5px; color: var(--text-3, #6E6668); }

/* ---------- tabela ---------- */
.fg-tabela-rolo { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.fg-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.fg-tabela th {
    text-align: left; padding: 6px 10px; white-space: nowrap;
    font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-3, #6E6668); border-bottom: 1px solid var(--border, #E5E1E2);
}
.fg-tabela td { padding: 9px 10px; border-bottom: 1px solid rgba(15, 12, 41, .05); vertical-align: middle; }
.fg-tabela tbody tr:hover { background: var(--surface-2, #FAF8F8); }
.fg-tabela .fg-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fg-td-sub { display: block; font-size: 11.5px; color: var(--text-3, #6E6668); }
.fg-td-nulo { color: var(--ink-400, #9A9294); }
/* A morada é o que mais cresce: dá-se-lhe um tecto para a tabela não ficar com uma
   coluna de meio metro e as outras esmagadas. */
.fg-td-morada { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fg-badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 9999px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
    color: var(--cor, #3B82F6); background: color-mix(in srgb, var(--cor, #3B82F6) 12%, transparent);
}
.fg-acoes { text-align: right; white-space: nowrap; }
.fg-ico-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
    border: 1px solid transparent; background: transparent; color: var(--text-2, #4A4245);
}
.fg-ico-btn:hover { background: var(--surface-2, #FAF8F8); border-color: var(--border, #E5E1E2); color: var(--text-1, #1B1618); }
.fg-ico-btn:focus-visible { outline: 2px solid var(--primary-500, #DA0A0D); outline-offset: 1px; }

/* ---------- eventos ---------- */
.fg-eventos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fg-evento { display: flex; gap: 10px; padding: 8px 10px; border-radius: 12px; }
.fg-evento + .fg-evento { border-top: 1px solid rgba(15, 12, 41, .05); }
.fg-evento:hover { background: var(--surface-2, #FAF8F8); }
.fg-evento-hora {
    flex-shrink: 0; width: 42px; font-size: 12.5px; font-weight: 800;
    color: var(--text-2, #4A4245); font-variant-numeric: tabular-nums;
}
.fg-evento-corpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fg-evento-tit { font-size: 13px; font-weight: 700; color: var(--text-1, #1B1618); }
.fg-evento-meta { font-size: 12px; color: var(--text-3, #6E6668); overflow-wrap: anywhere; }
/* O tom não pinta o fundo da linha: marca-se com um traço à esquerda, que se lê de
   relance sem transformar a lista num semáforo. */
.fg-evento[data-tom="mau"] { box-shadow: inset 3px 0 0 var(--danger-500, #DC2626); }
.fg-evento[data-tom="aviso"] { box-shadow: inset 3px 0 0 var(--warning-500, #F59E0B); }

.fg-tag {
    display: inline-flex; padding: 2px 8px; border-radius: 9999px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
    background: var(--surface-2, #FAF8F8); color: var(--text-2, #4A4245);
}
.fg-tag[data-tom="mau"] { background: var(--danger-50, #FEF2F2); color: var(--danger-700, #B91C1C); }
.fg-tag[data-tom="aviso"] { background: var(--warning-50, #FFF7E6); color: var(--warning-700, #92400E); }

/* A modal do registo: o corpo é que rola, e a tabela não empurra o rodapé para fora. */
.fg-modal-overlay .ds-modal-body { overflow-y: auto; }
.fg-modal-overlay .fg-tabela-rolo { margin: 0; padding: 0; }
.fg-td-matricula { white-space: nowrap; }
.fg-mau { color: var(--danger-600, #DC2626); }

/* =====================================================================================
   VIAGENS POR REGISTAR (24/09/2026) — a modal que transforma viagens do GPS em
   deslocações do CRM. Barra de período e agrupamento em cima, tabela no meio, e o
   rodapé com o que o GPS não sabe (abastecimento, interior, responsável) mais o total
   do que se vai registar — o número que interessa antes de carregar no botão.
   ===================================================================================== */

.fg-conta {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; margin-left: 2px; padding: 0 5px;
    border-radius: 9999px; font-size: 11px; font-weight: 800;
    background: var(--primary-500, #DA0A0D); color: #fff;
}
.fg-conta[hidden] { display: none; }

.fg-imp-barra {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
    padding: 12px 20px; border-bottom: 1px solid var(--border, #E5E1E2);
}
.fg-campo { display: inline-flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--text-3, #6E6668); }
.fg-campo input[type="date"], .fg-campo select {
    min-height: 34px; padding: 0 8px; border-radius: 10px; font: inherit; font-size: 13px;
    border: 1px solid var(--border, #E5E1E2); background: var(--surface, #fff); color: var(--text-1, #1B1618);
}
.fg-campo select { min-width: 150px; }
.fg-campo-check { flex-direction: row; align-items: center; gap: 6px; align-self: center; }

.fg-modos { display: inline-flex; border: 1px solid var(--border, #E5E1E2); border-radius: 9999px; overflow: hidden; }
.fg-modo {
    padding: 7px 13px; border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-2, #4A4245);
}
.fg-modo + .fg-modo { border-left: 1px solid var(--border, #E5E1E2); }
.fg-modo:hover { background: var(--surface-2, #FAF8F8); }
.fg-modo.is-on { background: var(--primary-500, #DA0A0D); color: #fff; }

.fg-modal-viagens .ds-modal-body { padding: 0; overflow-y: auto; }
.fg-tabela-viagens { min-width: 1080px; }
.fg-tabela-viagens th, .fg-tabela-viagens td { padding-left: 12px; padding-right: 12px; }
.fg-td-check { width: 34px; text-align: center; }
.fg-td-check input { width: 16px; height: 16px; accent-color: var(--primary-500, #DA0A0D); cursor: pointer; }
/* As linhas que não dão para registar ficam pálidas mas LEGÍVEIS: ver que a viagem
   existe e porque é que não entra vale mais do que escondê-la. */
.fg-tabela-viagens tr.is-fora { opacity: .6; }
.fg-tag[data-tom="ok"] { background: var(--success-50, #F0FDF4); color: var(--success-700, #166534); }

.fg-imp-rodape { flex-wrap: wrap; align-items: center; gap: 10px; }
.fg-imp-campos { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.fg-imp-total { margin-left: auto; font-size: 13.5px; color: var(--text-2, #4A4245); white-space: nowrap; }
@media (max-width: 720px) {
    .fg-imp-total { margin-left: 0; width: 100%; }
    .fg-campo select { min-width: 0; }
}

/* O seletor do trabalho de rua, na tabela da importação: é uma decisão por linha, e
   tem de caber sem empurrar as colunas dos números para fora do ecrã. */
.fg-td-trabalho { min-width: 210px; max-width: 280px; }
/* O condutor: nome numa linha, e por baixo com quem fica - sem quebrar a meio. */
.fg-td-condutor { min-width: 150px; white-space: nowrap; }
.fg-td-nome { font-weight: 600; color: var(--text-1, #1B1618); }
.fg-td-fica { cursor: help; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.fg-td-trabalho select {
    width: 100%; max-width: 270px; min-height: 30px; padding: 0 6px;
    border: 1px solid var(--border, #E5E1E2); border-radius: 9px;
    background: var(--surface, #fff); color: var(--text-1, #1B1618);
    font: inherit; font-size: 12.5px;
}
.fg-td-trabalho select:focus { outline: 2px solid var(--primary-500, #DA0A0D); outline-offset: 1px; }
.fg-imp-total .fg-td-sub { display: block; text-align: right; }

/* A importação automática (pedido interno c866c505): uma faixa de estado no topo da lista */
.fg-auto { margin: 0 20px 8px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2, #F5F3F3); font-size: 12.5px; line-height: 1.45; color: var(--text-2, #3D3537); overflow-wrap: anywhere; }
.fg-auto:empty { display: none; }
.fg-auto svg { vertical-align: -2px; }
.fg-auto .fg-td-sub { margin-top: 2px; }