/* =============================================================================================
   LOCAFÁCIL — DESIGN SYSTEM (v1)   ·   public/estilos/locafacil-ds.css
   =============================================================================================
   O QUE É ISTO
     A camada visual nova do LOCAFÁCIL: tokens, casca (menu + topo + conteúdo) e componentes.
     Escrito à mão, SEM build e SEM framework — de propósito: o projeto é publicado copiando
     arquivos (deploy/atualizar-vps.ps1 manda a pasta public/ inteira) e o sistema roda no
     computador da locadora e no pátio, onde a internet pode não estar boa. Introduzir Tailwind
     (CDN ou build) é decisão do dono: proposta registrada em Documentacao/DECISIONS.md.

   COMO ELE CONVIVE COM O SISTEMA QUE JÁ ESTÁ NO AR
     1. Tudo aqui vive dentro de `.lcf-ds` (a casca nova). Nada vaza para o index.html antigo:
        ligar esta folha no sistema NÃO muda nenhuma tela existente enquanto as telas novas
        não forem migradas uma por uma.
     2. Toda classe começa com `lcf-`. As classes do sistema atual (`.card`, `.btn-acao`,
        `.badge`, `.sidebar`, `.lista-card`...) continuam intocadas — não há colisão.
     3. As cores são as da MARCA (Documentacao/MARCA.md): azul #2563eb, indigo #4f46e5,
        violeta #7c3aed, verde #22c55e, tinta #1e1b4b. O design system NÃO inventa paleta.

   REGRA DE OURO (DECISIONS.md #8 — nada de botão falso)
     Componente nenhum simula sucesso. Sem credencial a tela diz "Integração não configurada";
     sem dado, estado vazio honesto; o que é demonstração vai marcado como exemplo na tela.

   CONTRASTE (uso no pátio, sob sol — exigência do dono; medido por ferramentas/checar-design.js)
     tinta #1e1b4b sobre branco .......... 14,4:1  (AAA)
     branco sobre violeta #7c3aed ........  5,7:1  (AA)
     branco sobre verde-escuro #15803d ...  5,0:1  (AA)
     texto fraco #64748b sobre branco ....  4,8:1  (AA)
     `--lcf-verde` (#22c55e) é cor de MARCA: só preenchimento/ícone. Como texto sobre branco
     dá 2,3:1 e reprova — para texto verde use `--lcf-verde-700`. O modo `.lcf-contraste-alto`
     (botão "Pátio" no topo) escurece texto, engorda borda e aumenta o alvo de toque.
   ============================================================================================= */

/* ---------------------------------------------------------------------------------------------
   1) TOKENS
   --------------------------------------------------------------------------------------------- */
:root {
    /* Marca (não alterar sem passar pela MARCA.md) */
    --lcf-azul: #2563eb;
    --lcf-indigo: #4f46e5;
    --lcf-violeta: #7c3aed;
    --lcf-violeta-700: #6d28d9;
    --lcf-violeta-900: #4c1d95;
    --lcf-verde: #22c55e;
    --lcf-tinta: #1e1b4b;
    --lcf-tinta-900: #17153a;

    /* Superfícies e texto */
    --lcf-fundo: #f4f5f7;
    --lcf-superficie: #ffffff;
    --lcf-superficie-2: #f8fafc;
    --lcf-borda: #e2e8f0;
    --lcf-borda-forte: #cbd5e1;
    --lcf-texto: #1e1b4b;
    --lcf-texto-medio: #475569;
    --lcf-texto-fraco: #64748b;
    --lcf-texto-inverso: #ffffff;

    /* Semânticos (sempre em quarteto: fundo, texto, traço, forte) */
    --lcf-ok-fundo: #dcfce7;      --lcf-ok-texto: #166534;      --lcf-ok-traco: #22c55e;    --lcf-ok-forte: #15803d;
    --lcf-aviso-fundo: #fef3c7;   --lcf-aviso-texto: #92400e;   --lcf-aviso-traco: #d97706; --lcf-aviso-forte: #b45309;
    --lcf-erro-fundo: #fee2e2;    --lcf-erro-texto: #991b1b;    --lcf-erro-traco: #dc2626;  --lcf-erro-forte: #b91c1c;
    --lcf-info-fundo: #dbeafe;    --lcf-info-texto: #1e40af;    --lcf-info-traco: #2563eb;  --lcf-info-forte: #1d4ed8;
    --lcf-neutro-fundo: #eef2f7;  --lcf-neutro-texto: #334155;  --lcf-neutro-traco: #94a3b8; --lcf-neutro-forte: #475569;

    /* Tipografia — Sora é a fonte do projeto (o index.html já carrega com fallback offline) */
    --lcf-fonte: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, Helvetica, sans-serif;
    --lcf-fonte-num: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
    --lcf-t-xs: 0.75rem;  --lcf-t-sm: 0.82rem;  --lcf-t-md: 0.9rem;  --lcf-t-lg: 1.02rem;
    --lcf-t-xl: 1.25rem;  --lcf-t-2xl: 1.6rem;  --lcf-t-3xl: 2rem;

    /* Espaçamento — escala de 4px (é o que dá o ritmo limpo) */
    --lcf-e-1: 4px;  --lcf-e-2: 8px;  --lcf-e-3: 12px; --lcf-e-4: 16px;
    --lcf-e-5: 20px; --lcf-e-6: 24px; --lcf-e-7: 32px; --lcf-e-8: 40px;

    /* Raios e sombras — suaves, nunca pesadas (estilo clean dashboard) */
    --lcf-r-sm: 6px; --lcf-r-md: 9px; --lcf-r-lg: 12px; --lcf-r-xl: 16px; --lcf-r-pill: 999px;
    --lcf-sombra-1: 0 1px 2px rgba(15, 23, 42, 0.06);
    --lcf-sombra-2: 0 1px 3px rgba(15, 23, 42, 0.10), 0 1px 2px rgba(15, 23, 42, 0.06);
    --lcf-sombra-3: 0 10px 24px rgba(15, 23, 42, 0.12);

    /* Medidas da casca */
    --lcf-menu-largura: 256px;
    --lcf-menu-rail: 72px;
    --lcf-topo-altura: 60px;
    --lcf-toque: 44px;                /* alvo mínimo de toque (celular, pátio, luva) */

    --lcf-foco: 2px solid var(--lcf-violeta);
    --lcf-transicao: 140ms ease;
}

/* Modo pátio: contraste alto + alvo maior. Ligado pelo botão "Pátio" (classe no <html>). */
.lcf-contraste-alto {
    --lcf-texto-fraco: #334155;
    --lcf-texto-medio: #1e293b;
    --lcf-borda: #94a3b8;
    --lcf-borda-forte: #64748b;
    --lcf-toque: 52px;
    --lcf-sombra-1: 0 1px 2px rgba(15, 23, 42, 0.18);
    --lcf-sombra-2: 0 2px 6px rgba(15, 23, 42, 0.22);
}
@media (prefers-contrast: more) {
    :root { --lcf-texto-fraco: #334155; --lcf-borda: #94a3b8; }
}

/* ---------------------------------------------------------------------------------------------
   2) BASE (só dentro da casca nova)
   --------------------------------------------------------------------------------------------- */
.lcf-ds {
    font-family: var(--lcf-fonte);
    color: var(--lcf-texto);
    background: var(--lcf-fundo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 15px;
    line-height: 1.45;
}
.lcf-ds *, .lcf-ds *::before, .lcf-ds *::after { box-sizing: border-box; }
.lcf-ds h1, .lcf-ds h2, .lcf-ds h3, .lcf-ds h4, .lcf-ds p, .lcf-ds ul, .lcf-ds ol { margin: 0; }
.lcf-ds ul, .lcf-ds ol { padding: 0; list-style: none; }
.lcf-ds a { color: var(--lcf-violeta-700); }
.lcf-ds :focus-visible { outline: var(--lcf-foco); outline-offset: 2px; border-radius: var(--lcf-r-sm); }
.lcf-ds ::selection { background: #ddd6fe; color: var(--lcf-tinta); }

/* Leitor de tela + atalho "pular para o conteúdo". */
.lcf-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lcf-pular { position: absolute; left: -999px; top: 0; z-index: 60; background: var(--lcf-tinta); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--lcf-r-md) 0; }
.lcf-pular:focus { left: 0; }

/* Dinheiro, km e placa: monoespaçada com números tabulares (alinha em coluna). */
.lcf-num { font-family: var(--lcf-fonte-num); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.lcf-placa { font-family: var(--lcf-fonte-num); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------------------------------------------------------------------------------------------
   3) CASCA — menu lateral + topo + conteúdo
   Desktop: menu fixo de 256px, recolhível para 72px (só ícones).
   Tablet/celular (<=1024px): o menu vira gaveta e o topo ganha o botão hambúrguer.
   --------------------------------------------------------------------------------------------- */
.lcf-app {
    display: grid;
    grid-template-columns: var(--lcf-menu-largura) 1fr;
    min-height: 100vh;
    background: var(--lcf-fundo);
    transition: grid-template-columns var(--lcf-transicao);
}
.lcf-app--recolhido { grid-template-columns: var(--lcf-menu-rail) 1fr; }

.lcf-menu {
    background: linear-gradient(180deg, var(--lcf-tinta) 0%, var(--lcf-tinta-900) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.lcf-menu__marca { display: flex; align-items: center; gap: var(--lcf-e-3); padding: var(--lcf-e-4) var(--lcf-e-4) var(--lcf-e-3); }
.lcf-menu__marca img { width: 34px; height: 34px; flex-shrink: 0; }
.lcf-menu__nome { font-weight: 800; letter-spacing: 0.04em; font-size: var(--lcf-t-md); line-height: 1.1; }
.lcf-menu__assinatura { display: block; font-size: var(--lcf-t-xs); font-weight: 400; color: #a5b4fc; letter-spacing: 0.02em; }
.lcf-app--recolhido .lcf-menu__nome,
.lcf-app--recolhido .lcf-menu__assinatura,
.lcf-app--recolhido .lcf-menu__grupo,
.lcf-app--recolhido .lcf-menu__texto,
.lcf-app--recolhido .lcf-menu__rodape-texto { display: none; }
.lcf-app--recolhido .lcf-menu__marca,
.lcf-app--recolhido .lcf-menu__item { justify-content: center; }

.lcf-menu__busca {
    margin: 0 var(--lcf-e-3) var(--lcf-e-3);
    display: flex; align-items: center; gap: var(--lcf-e-2);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e2e8f0;
    border-radius: var(--lcf-r-md);
    padding: 9px 11px;
    font: inherit; text-align: left; cursor: pointer;
    min-height: var(--lcf-toque);
}
.lcf-menu__busca:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.lcf-menu__busca kbd { margin-left: auto; font-family: var(--lcf-fonte-num); font-size: var(--lcf-t-xs); background: rgba(255, 255, 255, 0.16); border-radius: 4px; padding: 2px 6px; }

.lcf-menu__grupo { padding: var(--lcf-e-4) var(--lcf-e-4) var(--lcf-e-2); font-size: var(--lcf-t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: #818cf8; font-weight: 700; }
.lcf-menu__lista { padding: 0 var(--lcf-e-2); }
.lcf-menu__item {
    display: flex; align-items: center; gap: var(--lcf-e-3);
    padding: 10px 12px; margin-bottom: 2px;
    border: 0; width: 100%; text-align: left;
    background: transparent; color: #cbd5e1;
    font: inherit; font-size: var(--lcf-t-md);
    border-radius: var(--lcf-r-md);
    cursor: pointer; text-decoration: none;
    min-height: var(--lcf-toque);
    transition: background var(--lcf-transicao), color var(--lcf-transicao);
}
.lcf-menu__item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.lcf-menu__item[aria-current="page"], .lcf-menu__item--ativo { background: var(--lcf-violeta); color: #fff; font-weight: 700; }
.lcf-menu__item[aria-current="page"] .lcf-menu__icone, .lcf-menu__item--ativo .lcf-menu__icone { color: #fff; }
.lcf-menu__icone { width: 20px; text-align: center; font-size: 1rem; flex-shrink: 0; }
.lcf-menu__texto { flex: 1; }
.lcf-menu__contador {
    font-size: var(--lcf-t-xs); font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--lcf-erro-forte); color: #fff; border-radius: var(--lcf-r-pill); padding: 1px 7px;
}
.lcf-menu__contador--aviso { background: var(--lcf-aviso-forte); }
.lcf-menu__contador--ok { background: var(--lcf-ok-forte); }
/* Ponto de status em tempo real da frota (disponível/alugado/manutenção). */
.lcf-menu__ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--lcf-ok-traco); box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25); }

.lcf-menu__rodape { margin-top: auto; padding: var(--lcf-e-3) var(--lcf-e-4); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: var(--lcf-t-xs); color: #94a3b8; }
.lcf-menu__rodape-texto b { color: #fff; font-weight: 600; display: block; font-size: var(--lcf-t-sm); }

/* ---- Topo ---- */
.lcf-principal { display: flex; flex-direction: column; min-width: 0; }
.lcf-topo {
    display: flex; align-items: center; gap: var(--lcf-e-3);
    height: var(--lcf-topo-altura);
    padding: 0 var(--lcf-e-5);
    background: var(--lcf-superficie);
    border-bottom: 1px solid var(--lcf-borda);
    position: sticky; top: 0; z-index: 30;
}
.lcf-topo__icone-btn {
    width: var(--lcf-toque); height: var(--lcf-toque);
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; background: transparent;
    border-radius: var(--lcf-r-md); cursor: pointer;
    color: var(--lcf-texto-medio); font-size: 1.05rem;
}
.lcf-topo__icone-btn:hover { background: var(--lcf-superficie-2); border-color: var(--lcf-borda); color: var(--lcf-texto); }
.lcf-topo__busca {
    display: flex; align-items: center; gap: var(--lcf-e-2);
    flex: 1; max-width: 520px;
    background: var(--lcf-superficie-2);
    border: 1px solid var(--lcf-borda);
    border-radius: var(--lcf-r-md);
    padding: 0 var(--lcf-e-3);
    min-height: 40px;
}
.lcf-topo__busca input { border: 0; background: transparent; flex: 1; font: inherit; font-size: var(--lcf-t-md); color: var(--lcf-texto); outline: none; min-width: 0; }
.lcf-topo__busca:focus-within { border-color: var(--lcf-violeta); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14); }
.lcf-topo__espaco { flex: 1; }
.lcf-topo__empresa {
    display: inline-flex; align-items: center; gap: var(--lcf-e-2);
    border: 1px solid var(--lcf-borda); background: var(--lcf-superficie-2);
    border-radius: var(--lcf-r-md); padding: 6px 10px; font: inherit; font-size: var(--lcf-t-sm);
    font-weight: 600; color: var(--lcf-texto); cursor: pointer; min-height: 40px;
}
.lcf-topo__empresa:hover { border-color: var(--lcf-borda-forte); }
.lcf-topo__usuario { display: flex; align-items: center; gap: var(--lcf-e-2); border: 0; background: transparent; cursor: pointer; padding: 4px; border-radius: var(--lcf-r-md); font: inherit; color: var(--lcf-texto); }
.lcf-topo__usuario:hover { background: var(--lcf-superficie-2); }
.lcf-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--lcf-violeta); color: #fff; font-weight: 700; font-size: var(--lcf-t-sm); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lcf-topo__notif { position: relative; }
.lcf-sino--novo::after {
    content: ''; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--lcf-erro-forte); border: 2px solid var(--lcf-superficie);
}

/* ---- Conteúdo ---- */
.lcf-conteudo { padding: var(--lcf-e-6); width: 100%; max-width: 1500px; }
.lcf-conteudo--estreito { max-width: 900px; }
.lcf-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--lcf-e-4); flex-wrap: wrap; margin-bottom: var(--lcf-e-5); }
.lcf-cabecalho__titulo { font-size: var(--lcf-t-2xl); font-weight: 700; letter-spacing: -0.01em; }
.lcf-cabecalho__sub { color: var(--lcf-texto-fraco); font-size: var(--lcf-t-md); margin-top: 2px; }
.lcf-migalhas { display: flex; align-items: center; gap: var(--lcf-e-2); font-size: var(--lcf-t-sm); color: var(--lcf-texto-fraco); margin-bottom: var(--lcf-e-2); }
.lcf-migalhas b { color: var(--lcf-texto-medio); font-weight: 600; }

/* Grades — a base do "clean dashboard": 2/3/4 colunas que viram 1 no celular. */
.lcf-grade { display: grid; gap: var(--lcf-e-4); }
.lcf-grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lcf-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lcf-grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lcf-grade--auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.lcf-grade--laterais { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.lcf-pilha { display: flex; flex-direction: column; gap: var(--lcf-e-4); }
.lcf-linha { display: flex; align-items: center; gap: var(--lcf-e-3); flex-wrap: wrap; }
.lcf-afasta { margin-left: auto; }
.lcf-secao-titulo { font-size: var(--lcf-t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lcf-texto-fraco); margin-bottom: var(--lcf-e-3); }
.lcf-mt-4 { margin-top: var(--lcf-e-4); } .lcf-mt-6 { margin-top: var(--lcf-e-6); }

/* ---- Celular/tablet: menu vira gaveta (não empurra o conteúdo) ---- */
.lcf-veu {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5);
    z-index: 45; border: 0; padding: 0; display: none;
}
@media (max-width: 1024px) {
    .lcf-app { grid-template-columns: 1fr; }
    .lcf-menu {
        position: fixed; left: 0; top: 0; z-index: 50;
        width: var(--lcf-menu-largura); height: 100vh;
        transform: translateX(-102%); transition: transform 180ms ease;
        box-shadow: var(--lcf-sombra-3);
    }
    .lcf-app--gaveta .lcf-menu { transform: none; }
    .lcf-app--gaveta .lcf-veu { display: block; }
    .lcf-app--recolhido { grid-template-columns: 1fr; }
    .lcf-conteudo { padding: var(--lcf-e-4); padding-bottom: var(--lcf-e-8); }
    .lcf-topo { padding: 0 var(--lcf-e-4); gap: var(--lcf-e-2); }
    .lcf-cabecalho__titulo { font-size: var(--lcf-t-xl); }
}
@media (max-width: 900px) {
    .lcf-grade--4, .lcf-grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lcf-grade--laterais { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .lcf-grade--4, .lcf-grade--3, .lcf-grade--2 { grid-template-columns: 1fr; }
    .lcf-topo__busca--opcional { display: none; }
    .lcf-topo__empresa span.lcf-topo__empresa-nome { display: none; }
}

/* ---------------------------------------------------------------------------------------------
   4) COMPONENTES — cartão, métrica, selo
   --------------------------------------------------------------------------------------------- */
.lcf-card {
    background: var(--lcf-superficie);
    border: 1px solid var(--lcf-borda);
    border-radius: var(--lcf-r-lg);
    box-shadow: var(--lcf-sombra-1);
    overflow: hidden;
}
.lcf-card--clicavel { cursor: pointer; transition: box-shadow var(--lcf-transicao), transform var(--lcf-transicao), border-color var(--lcf-transicao); }
.lcf-card--clicavel:hover { box-shadow: var(--lcf-sombra-2); border-color: var(--lcf-borda-forte); transform: translateY(-1px); }
.lcf-card__cabecalho { display: flex; align-items: center; gap: var(--lcf-e-3); padding: var(--lcf-e-4) var(--lcf-e-5); border-bottom: 1px solid var(--lcf-borda); }
.lcf-card__titulo { font-size: var(--lcf-t-lg); font-weight: 700; }
.lcf-card__sub { font-size: var(--lcf-t-sm); color: var(--lcf-texto-fraco); }
.lcf-card__acoes { margin-left: auto; display: flex; align-items: center; gap: var(--lcf-e-2); }
.lcf-card__corpo { padding: var(--lcf-e-5); }
.lcf-card__corpo--denso { padding: var(--lcf-e-3) var(--lcf-e-5); }
.lcf-card__rodape { padding: var(--lcf-e-3) var(--lcf-e-5); border-top: 1px solid var(--lcf-borda); background: var(--lcf-superficie-2); font-size: var(--lcf-t-sm); color: var(--lcf-texto-fraco); display: flex; align-items: center; gap: var(--lcf-e-3); flex-wrap: wrap; }
.lcf-card--faixa { border-top: 3px solid var(--lcf-violeta); }
.lcf-card--ok { border-top-color: var(--lcf-ok-traco); }
.lcf-card--aviso { border-top-color: var(--lcf-aviso-traco); }
.lcf-card--erro { border-top-color: var(--lcf-erro-traco); }
.lcf-card--info { border-top-color: var(--lcf-info-traco); }

/* Métrica do dashboard: número grande + rótulo + contexto (nunca número solto). */
.lcf-metrica { display: flex; flex-direction: column; gap: 2px; padding: var(--lcf-e-5); }
.lcf-metrica__rotulo { font-size: var(--lcf-t-sm); color: var(--lcf-texto-fraco); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.lcf-metrica__valor { font-size: var(--lcf-t-3xl); font-weight: 800; letter-spacing: -0.02em; font-family: var(--lcf-fonte-num); font-variant-numeric: tabular-nums; line-height: 1.15; }
.lcf-metrica__valor--sm { font-size: var(--lcf-t-2xl); }
.lcf-metrica__contexto { font-size: var(--lcf-t-sm); color: var(--lcf-texto-fraco); }
.lcf-metrica__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--lcf-t-sm); font-weight: 700; }
.lcf-metrica__delta--sobe { color: var(--lcf-ok-forte); }
.lcf-metrica__delta--desce { color: var(--lcf-erro-forte); }
.lcf-metrica__delta--neutro { color: var(--lcf-texto-fraco); }
.lcf-metrica--linha { flex-direction: row; align-items: center; gap: var(--lcf-e-4); justify-content: space-between; }
.lcf-metrica__fracao { font-size: var(--lcf-t-sm); color: var(--lcf-texto-fraco); }
.lcf-metrica__fracao b { color: var(--lcf-texto); }

/* Selo de status — o vocabulário é o do sistema (Disponível/Alugado/Manutenção/Reservado/Inativo). */
.lcf-selo {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: var(--lcf-r-pill);
    font-size: var(--lcf-t-xs); font-weight: 700; white-space: nowrap;
}
.lcf-selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lcf-selo--sem-ponto::before { display: none; }
.lcf-selo--ok { background: var(--lcf-ok-fundo); color: var(--lcf-ok-texto); }
.lcf-selo--aviso { background: var(--lcf-aviso-fundo); color: var(--lcf-aviso-texto); }
.lcf-selo--erro { background: var(--lcf-erro-fundo); color: var(--lcf-erro-texto); }
.lcf-selo--info { background: var(--lcf-info-fundo); color: var(--lcf-info-texto); }
.lcf-selo--marca { background: #ede9fe; color: #5b21b6; }
.lcf-selo--neutro { background: var(--lcf-neutro-fundo); color: var(--lcf-neutro-texto); }

/* ---------------------------------------------------------------------------------------------
   4b) COMPONENTES — alerta do dia, atalhos rápidos, barra de progresso
   --------------------------------------------------------------------------------------------- */
.lcf-alerta {
    display: flex; gap: var(--lcf-e-3); align-items: flex-start;
    padding: var(--lcf-e-3) var(--lcf-e-4);
    border-radius: var(--lcf-r-md);
    border: 1px solid var(--lcf-borda);
    background: var(--lcf-superficie);
    border-left: 4px solid var(--lcf-neutro-traco);
}
.lcf-alerta--aviso { border-left-color: var(--lcf-aviso-traco); background: #fffbeb; }
.lcf-alerta--erro { border-left-color: var(--lcf-erro-traco); background: #fef2f2; }
.lcf-alerta--ok { border-left-color: var(--lcf-ok-traco); background: #f0fdf4; }
.lcf-alerta--info { border-left-color: var(--lcf-info-traco); background: #eff6ff; }
.lcf-alerta__icone { font-size: 1.1rem; line-height: 1.3; }
.lcf-alerta__conteudo { flex: 1; min-width: 0; }
.lcf-alerta__titulo { font-weight: 700; font-size: var(--lcf-t-md); }
.lcf-alerta__texto { font-size: var(--lcf-t-sm); color: var(--lcf-texto-medio); margin-top: 2px; }
.lcf-alerta__acao { margin-top: var(--lcf-e-2); display: flex; gap: var(--lcf-e-2); flex-wrap: wrap; }

/* Atalhos rápidos do dashboard (Nova locação, Cobrar via PIX, Vistoria...). */
.lcf-atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--lcf-e-3); }
.lcf-atalho {
    display: flex; align-items: center; gap: var(--lcf-e-3);
    padding: var(--lcf-e-3) var(--lcf-e-4);
    background: var(--lcf-superficie); border: 1px solid var(--lcf-borda);
    border-radius: var(--lcf-r-md); cursor: pointer; font: inherit; text-align: left;
    color: var(--lcf-texto); font-weight: 600; font-size: var(--lcf-t-md);
    min-height: var(--lcf-toque);
    transition: border-color var(--lcf-transicao), box-shadow var(--lcf-transicao);
}
.lcf-atalho:hover { border-color: var(--lcf-violeta); box-shadow: var(--lcf-sombra-2); }
.lcf-atalho__icone { width: 32px; height: 32px; border-radius: var(--lcf-r-sm); display: inline-flex; align-items: center; justify-content: center; background: #ede9fe; color: var(--lcf-violeta-700); font-size: 1rem; flex-shrink: 0; }
.lcf-atalho--destaque { background: linear-gradient(135deg, var(--lcf-indigo), var(--lcf-violeta)); color: #fff; border-color: transparent; }
.lcf-atalho--destaque .lcf-atalho__icone { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* Barra de progresso (ocupação da frota, parcelas pagas, etapa do contrato). */
.lcf-barra { height: 8px; background: var(--lcf-neutro-fundo); border-radius: var(--lcf-r-pill); overflow: hidden; }
.lcf-barra__preenche { height: 100%; background: var(--lcf-violeta); border-radius: var(--lcf-r-pill); transition: width 220ms ease; }
.lcf-barra__preenche--ok { background: var(--lcf-ok-forte); }
.lcf-barra__preenche--aviso { background: var(--lcf-aviso-forte); }
.lcf-barra__preenche--erro { background: var(--lcf-erro-forte); }

/* ---------------------------------------------------------------------------------------------
   5) BOTÕES
   Regra: uma ação principal por tela (violeta). Verde é dinheiro entrando (PIX/receber).
   Vermelho é destrutivo. Botão que dispara rede SEMPRE passa por LCF.carregando() — é o que
   impede duplo clique de gerar duas locações ou duas cobranças.
   --------------------------------------------------------------------------------------------- */
.lcf-btn {
    --_fundo: var(--lcf-superficie); --_texto: var(--lcf-texto); --_borda: var(--lcf-borda);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--lcf-e-2);
    background: var(--_fundo); color: var(--_texto); border: 1px solid var(--_borda);
    border-radius: var(--lcf-r-md); padding: 0 var(--lcf-e-4);
    font: inherit; font-size: var(--lcf-t-md); font-weight: 700;
    min-height: var(--lcf-toque); cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: filter var(--lcf-transicao), box-shadow var(--lcf-transicao), transform var(--lcf-transicao);
}
.lcf-btn:hover { filter: brightness(0.96); }
.lcf-btn:active { transform: translateY(1px); }
.lcf-btn[disabled], .lcf-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; filter: none; }
.lcf-btn--primario { --_fundo: var(--lcf-violeta); --_texto: #fff; --_borda: var(--lcf-violeta); }
.lcf-btn--primario:hover { --_fundo: var(--lcf-violeta-700); --_borda: var(--lcf-violeta-700); filter: none; }
.lcf-btn--destaque { --_texto: #fff; --_borda: transparent; background: linear-gradient(135deg, var(--lcf-indigo), var(--lcf-violeta)); }
.lcf-btn--sucesso { --_fundo: var(--lcf-ok-forte); --_texto: #fff; --_borda: var(--lcf-ok-forte); }
.lcf-btn--perigo { --_fundo: var(--lcf-erro-forte); --_texto: #fff; --_borda: var(--lcf-erro-forte); }
/* PIX: verde escuro (não o verde da marca, que reprova contraste como fundo de texto branco). */
.lcf-btn--pix { --_fundo: var(--lcf-ok-forte); --_texto: #fff; --_borda: var(--lcf-ok-forte); }
.lcf-btn--contorno { --_fundo: transparent; --_borda: var(--lcf-violeta); --_texto: var(--lcf-violeta-700); }
.lcf-btn--sutil { --_fundo: var(--lcf-superficie-2); --_borda: var(--lcf-borda); --_texto: var(--lcf-texto-medio); }
.lcf-btn--fantasma { --_fundo: transparent; --_borda: transparent; --_texto: var(--lcf-texto-medio); }
.lcf-btn--fantasma:hover { --_fundo: var(--lcf-superficie-2); filter: none; }
.lcf-btn--sm { min-height: 34px; font-size: var(--lcf-t-sm); padding: 0 var(--lcf-e-3); }
.lcf-btn--lg { min-height: 54px; font-size: var(--lcf-t-lg); padding: 0 var(--lcf-e-6); }
.lcf-btn--bloco { width: 100%; }
.lcf-btn--icone { padding: 0; width: var(--lcf-toque); }
.lcf-btn__icone { font-size: 1.05rem; line-height: 1; }

/* Carregamento: gira um anel e trava o clique (aria-busy posto pelo JS). */
.lcf-btn--carregando { pointer-events: none; }
.lcf-btn--carregando::before {
    content: ''; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent; opacity: 0.85;
    animation: lcf-girar 700ms linear infinite; flex-shrink: 0;
}
@keyframes lcf-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .lcf-btn--carregando::before { animation-duration: 2400ms; }
    .lcf-ds * { transition-duration: 0ms !important; }
}
.lcf-btn-grupo { display: inline-flex; gap: var(--lcf-e-2); flex-wrap: wrap; }
/* No celular os botões de ação ocupam a linha toda — dedo não é mouse. */
@media (max-width: 620px) {
    .lcf-btn-grupo--mobile-bloco .lcf-btn { width: 100%; }
}

/* ---------------------------------------------------------------------------------------------
   6) AVISO RÁPIDO (TOAST), TOOLTIP E MODAL
   --------------------------------------------------------------------------------------------- */
.lcf-toasts {
    position: fixed; right: var(--lcf-e-5); bottom: var(--lcf-e-5); z-index: 80;
    display: flex; flex-direction: column; gap: var(--lcf-e-3);
    width: min(380px, calc(100vw - 32px));
}
.lcf-toast {
    display: flex; gap: var(--lcf-e-3); align-items: flex-start;
    background: var(--lcf-tinta); color: #fff;
    border-radius: var(--lcf-r-lg); padding: var(--lcf-e-3) var(--lcf-e-4);
    box-shadow: var(--lcf-sombra-3);
    border-left: 4px solid var(--lcf-neutro-traco);
    opacity: 0; transform: translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease;
}
.lcf-toast--visivel { opacity: 1; transform: none; }
.lcf-toast--ok { border-left-color: var(--lcf-verde); }
.lcf-toast--aviso { border-left-color: var(--lcf-aviso-traco); }
.lcf-toast--erro { border-left-color: #f87171; }
.lcf-toast--info { border-left-color: #60a5fa; }
.lcf-toast__icone {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--lcf-t-xs); font-weight: 800;
    background: var(--lcf-verde); color: #04240f;
}
.lcf-toast--erro .lcf-toast__icone { background: #fca5a5; color: #450a0a; }
.lcf-toast--aviso .lcf-toast__icone { background: #fcd34d; color: #451a03; }
.lcf-toast--info .lcf-toast__icone { background: #93c5fd; color: #0c2340; }
.lcf-toast__corpo { flex: 1; min-width: 0; }
.lcf-toast__texto { font-weight: 700; font-size: var(--lcf-t-md); }
.lcf-toast__detalhe { font-size: var(--lcf-t-sm); color: #cbd5e1; margin-top: 2px; }
.lcf-toast__fechar { background: transparent; border: 0; color: #cbd5e1; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.lcf-toast__fechar:hover { color: #fff; }
.lcf-toast__acao {
    margin-top: var(--lcf-e-2); background: rgba(255, 255, 255, 0.16); color: #fff; border: 0;
    border-radius: var(--lcf-r-sm); padding: 6px 10px; font: inherit; font-size: var(--lcf-t-sm);
    font-weight: 700; cursor: pointer;
}
.lcf-toast__acao:hover { background: rgba(255, 255, 255, 0.26); }
@media (max-width: 620px) {
    .lcf-toasts { left: var(--lcf-e-3); right: var(--lcf-e-3); bottom: var(--lcf-e-3); width: auto; }
}

.lcf-tooltip {
    position: absolute; z-index: 90; max-width: 280px;
    background: var(--lcf-tinta); color: #fff;
    font-size: var(--lcf-t-sm); line-height: 1.35;
    padding: 6px 10px; border-radius: var(--lcf-r-sm);
    box-shadow: var(--lcf-sombra-3);
    opacity: 0; pointer-events: none; transition: opacity 120ms ease;
}
.lcf-tooltip--visivel { opacity: 1; }

.lcf-modal-veu {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: var(--lcf-e-4); overflow-y: auto;
}
.lcf-modal {
    background: var(--lcf-superficie); border-radius: var(--lcf-r-xl);
    box-shadow: var(--lcf-sombra-3); width: min(760px, 100%);
    max-height: 92vh; overflow-y: auto; padding: var(--lcf-e-6);
}
.lcf-modal--estreito { width: min(460px, 100%); }
.lcf-modal__titulo { font-size: var(--lcf-t-xl); font-weight: 700; margin-bottom: var(--lcf-e-2); }
.lcf-modal__texto { color: var(--lcf-texto-medio); font-size: var(--lcf-t-md); }
.lcf-modal__rodape { display: flex; gap: var(--lcf-e-3); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--lcf-e-5); }
.lcf-modal__rodape .lcf-btn { min-width: 130px; }
@media (max-width: 620px) {
    .lcf-modal-veu { align-items: flex-end; padding: 0; }
    .lcf-modal { width: 100%; max-height: 94vh; border-radius: var(--lcf-r-xl) var(--lcf-r-xl) 0 0; }
    .lcf-modal__rodape .lcf-btn { flex: 1; }
}

/* ---------------------------------------------------------------------------------------------
   7) BUSCA GLOBAL, CHIPS DE FILTRO E FORMULÁRIOS
   --------------------------------------------------------------------------------------------- */
.lcf-busca { position: relative; flex: 1; max-width: 520px; }
.lcf-busca__painel {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
    background: var(--lcf-superficie); border: 1px solid var(--lcf-borda);
    border-radius: var(--lcf-r-lg); box-shadow: var(--lcf-sombra-3);
    max-height: 420px; overflow-y: auto; padding: var(--lcf-e-2);
}
.lcf-busca__grupo { padding: var(--lcf-e-2) var(--lcf-e-3) var(--lcf-e-1); font-size: var(--lcf-t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lcf-texto-fraco); }
.lcf-busca__item {
    display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
    background: transparent; border: 0; border-radius: var(--lcf-r-md);
    padding: var(--lcf-e-2) var(--lcf-e-3); cursor: pointer; font: inherit;
    min-height: var(--lcf-toque);
}
.lcf-busca__item:hover, .lcf-busca__item--ativo { background: var(--lcf-superficie-2); }
.lcf-busca__item--ativo { box-shadow: inset 0 0 0 1px var(--lcf-violeta); }
.lcf-busca__rotulo { font-weight: 600; font-size: var(--lcf-t-md); color: var(--lcf-texto); }
.lcf-busca__detalhe { font-size: var(--lcf-t-sm); color: var(--lcf-texto-fraco); }
.lcf-busca__vazio { padding: var(--lcf-e-4); display: flex; flex-direction: column; gap: 4px; font-size: var(--lcf-t-sm); color: var(--lcf-texto-fraco); }
.lcf-busca__vazio b { color: var(--lcf-texto-medio); font-size: var(--lcf-t-md); }

.lcf-chips { display: flex; gap: var(--lcf-e-2); flex-wrap: wrap; }
.lcf-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--lcf-superficie); border: 1px solid var(--lcf-borda);
    color: var(--lcf-texto-medio); border-radius: var(--lcf-r-pill);
    padding: 7px 14px; font: inherit; font-size: var(--lcf-t-sm); font-weight: 600;
    cursor: pointer; min-height: 38px; white-space: nowrap;
    transition: border-color var(--lcf-transicao), background var(--lcf-transicao), color var(--lcf-transicao);
}
.lcf-chip:hover { border-color: var(--lcf-borda-forte); color: var(--lcf-texto); }
.lcf-chip--ativo { background: var(--lcf-tinta); border-color: var(--lcf-tinta); color: #fff; }
.lcf-chip__conta { font-size: var(--lcf-t-xs); font-variant-numeric: tabular-nums; opacity: 0.75; }

.lcf-form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lcf-e-4); }
.lcf-form-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lcf-campo--largo { grid-column: 1 / -1; }
.lcf-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lcf-campo__rotulo { font-size: var(--lcf-t-sm); font-weight: 700; color: var(--lcf-texto-medio); }
.lcf-campo__rotulo--obrigatorio::after { content: ' *'; color: var(--lcf-erro-forte); }
.lcf-campo__dica { font-size: var(--lcf-t-xs); color: var(--lcf-texto-fraco); }
.lcf-campo__erro { font-size: var(--lcf-t-xs); color: var(--lcf-erro-forte); font-weight: 700; display: none; }
.lcf-campo input, .lcf-campo select, .lcf-campo textarea {
    width: 100%; font: inherit; font-size: var(--lcf-t-md); color: var(--lcf-texto);
    background: var(--lcf-superficie); border: 1px solid var(--lcf-borda-forte);
    border-radius: var(--lcf-r-md); padding: 11px 12px; min-height: var(--lcf-toque);
}
.lcf-campo textarea { min-height: 96px; resize: vertical; }
.lcf-campo input:focus, .lcf-campo select:focus, .lcf-campo textarea:focus {
    outline: none; border-color: var(--lcf-violeta); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16);
}
.lcf-campo input:disabled, .lcf-campo select:disabled, .lcf-campo textarea:disabled { background: var(--lcf-superficie-2); color: var(--lcf-texto-fraco); }
.lcf-campo--erro input, .lcf-campo--erro select, .lcf-campo--erro textarea { border-color: var(--lcf-erro-forte); background: #fff5f5; }
.lcf-campo--erro .lcf-campo__erro { display: block; }
.lcf-campo input[type="checkbox"], .lcf-campo input[type="radio"] { width: 20px; height: 20px; min-height: 0; accent-color: var(--lcf-violeta); }
.lcf-campo--caixa { flex-direction: row; align-items: flex-start; gap: var(--lcf-e-3); }
.lcf-campo--caixa .lcf-campo__rotulo { font-weight: 600; }

/* Segmento (nível de combustível, tipo de cobrança, prazo) — alvo grande para o dedo. */
.lcf-segmento { display: inline-flex; border: 1px solid var(--lcf-borda-forte); border-radius: var(--lcf-r-md); overflow: hidden; }
.lcf-segmento__opcao {
    border: 0; background: var(--lcf-superficie); color: var(--lcf-texto-medio);
    font: inherit; font-size: var(--lcf-t-sm); font-weight: 700;
    padding: 10px 14px; min-height: var(--lcf-toque); cursor: pointer; border-right: 1px solid var(--lcf-borda);
}
.lcf-segmento__opcao:last-child { border-right: 0; }
.lcf-segmento__opcao[aria-pressed="true"] { background: var(--lcf-violeta); color: #fff; }

/* ---------------------------------------------------------------------------------------------
   8) TELAS, TABELA, ABAS, ESTADO VAZIO, ESQUELETO E PAGINAÇÃO
   --------------------------------------------------------------------------------------------- */
.lcf-tela { display: none; }
.lcf-tela--ativa { display: block; }

.lcf-tabela-caixa { overflow-x: auto; }
.lcf-tabela { width: 100%; border-collapse: collapse; font-size: var(--lcf-t-md); }
.lcf-tabela thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--lcf-superficie-2);
    text-align: left; font-size: var(--lcf-t-xs); font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--lcf-texto-fraco);
    padding: var(--lcf-e-3) var(--lcf-e-4); border-bottom: 1px solid var(--lcf-borda);
    white-space: nowrap;
}
.lcf-tabela tbody td { padding: var(--lcf-e-3) var(--lcf-e-4); border-bottom: 1px solid var(--lcf-borda); vertical-align: middle; }
.lcf-tabela tbody tr:hover { background: var(--lcf-superficie-2); }
.lcf-tabela tbody tr:last-child td { border-bottom: 0; }
.lcf-tabela [data-coluna="numero"], .lcf-tabela [data-coluna="valor"] { text-align: right; font-family: var(--lcf-fonte-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lcf-tabela [data-coluna="acoes"] { text-align: right; white-space: nowrap; }
.lcf-tabela [data-coluna="placa"] { font-family: var(--lcf-fonte-num); font-weight: 700; letter-spacing: 0.05em; }
.lcf-tabela__principal { font-weight: 700; }
.lcf-tabela__secundario { font-size: var(--lcf-t-sm); color: var(--lcf-texto-fraco); }
.lcf-tabela tfoot td { padding: var(--lcf-e-3) var(--lcf-e-4); font-weight: 700; background: var(--lcf-superficie-2); border-top: 1px solid var(--lcf-borda); }

/* No celular/tablet a tabela vira uma lista de cartões "Rótulo: valor" (LCF.prepararTabelas()
   copia o texto do <th> para data-rotulo). Nada de tabela rolando de lado no pátio. */
@media (max-width: 900px) {
    .lcf-tabela, .lcf-tabela tbody, .lcf-tabela tr, .lcf-tabela td { display: block; width: 100%; }
    .lcf-tabela thead { display: none; }
    .lcf-tabela tbody tr {
        border: 1px solid var(--lcf-borda); border-radius: var(--lcf-r-lg);
        background: var(--lcf-superficie); box-shadow: var(--lcf-sombra-1);
        margin-bottom: var(--lcf-e-3); padding: var(--lcf-e-2) var(--lcf-e-4);
    }
    .lcf-tabela tbody td {
        display: flex; align-items: center; justify-content: space-between; gap: var(--lcf-e-3);
        border-bottom: 1px dashed var(--lcf-borda); padding: var(--lcf-e-2) 0;
        text-align: right;
    }
    .lcf-tabela tbody td:last-child { border-bottom: 0; }
    .lcf-tabela tbody td::before {
        content: attr(data-rotulo);
        font-size: var(--lcf-t-xs); font-weight: 700; letter-spacing: 0.04em;
        text-transform: uppercase; color: var(--lcf-texto-fraco); text-align: left;
    }
    .lcf-tabela tbody td[data-coluna="acoes"] { justify-content: flex-end; }
    .lcf-tabela tbody td[data-coluna="acoes"]::before { content: none; }
}

.lcf-abas { display: flex; gap: var(--lcf-e-4); border-bottom: 1px solid var(--lcf-borda); overflow-x: auto; }
.lcf-aba {
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    font: inherit; font-size: var(--lcf-t-md); font-weight: 600; color: var(--lcf-texto-fraco);
    padding: var(--lcf-e-3) 2px; cursor: pointer; white-space: nowrap; min-height: var(--lcf-toque);
}
.lcf-aba:hover { color: var(--lcf-texto); }
.lcf-aba--ativa { color: var(--lcf-violeta-700); border-bottom-color: var(--lcf-violeta); font-weight: 700; }

.lcf-vazio { display: flex; flex-direction: column; align-items: center; gap: var(--lcf-e-2); text-align: center; padding: var(--lcf-e-8) var(--lcf-e-5); }
.lcf-vazio__icone { width: 44px; height: 44px; border-radius: 50%; background: var(--lcf-neutro-fundo); color: var(--lcf-neutro-forte); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.lcf-vazio__titulo { font-weight: 700; font-size: var(--lcf-t-lg); }
.lcf-vazio__texto { font-size: var(--lcf-t-md); color: var(--lcf-texto-fraco); max-width: 46ch; }
.lcf-vazio__acao { margin-top: var(--lcf-e-2); }

/* Esqueleto de carregamento (não é rodinha girando no meio da tela em branco). */
.lcf-esqueleto {
    background: linear-gradient(90deg, var(--lcf-neutro-fundo) 25%, #e2e8f0 37%, var(--lcf-neutro-fundo) 63%);
    background-size: 400% 100%; border-radius: var(--lcf-r-sm);
    animation: lcf-brilho 1400ms ease-in-out infinite; height: 14px;
}
.lcf-esqueleto--titulo { height: 22px; width: 42%; }
.lcf-esqueleto--linha { height: 14px; margin-top: var(--lcf-e-3); }
.lcf-esqueleto--bloco { height: 96px; }
@keyframes lcf-brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.lcf-paginacao { display: flex; align-items: center; gap: var(--lcf-e-3); flex-wrap: wrap; padding: var(--lcf-e-3) var(--lcf-e-4); }
.lcf-paginacao__info { font-size: var(--lcf-t-sm); color: var(--lcf-texto-fraco); }

/* ---------------------------------------------------------------------------------------------
   9) CARD DE VEÍCULO · CALENDÁRIO DE RECEBIMENTOS · PASSOS (contrato em etapas)
   --------------------------------------------------------------------------------------------- */
.lcf-veiculo__topo { display: flex; gap: var(--lcf-e-3); align-items: flex-start; padding: var(--lcf-e-4) var(--lcf-e-5); }
.lcf-veiculo__foto {
    width: 68px; height: 50px; border-radius: var(--lcf-r-md); flex-shrink: 0;
    background: var(--lcf-neutro-fundo); color: var(--lcf-texto-fraco);
    display: flex; align-items: center; justify-content: center; font-size: var(--lcf-t-xs); text-align: center;
}
.lcf-veiculo__ident { flex: 1; min-width: 0; }
.lcf-veiculo__nome { font-weight: 700; font-size: var(--lcf-t-lg); }
.lcf-veiculo__dados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lcf-e-2); padding: 0 var(--lcf-e-5) var(--lcf-e-4); }
.lcf-veiculo__dado { font-size: var(--lcf-t-xs); color: var(--lcf-texto-fraco); }
.lcf-veiculo__dado b { display: block; font-size: var(--lcf-t-md); color: var(--lcf-texto); font-family: var(--lcf-fonte-num); }
.lcf-veiculo--reservado { border-left: 4px solid var(--lcf-violeta); }
.lcf-veiculo--alugado { border-left: 4px solid var(--lcf-info-traco); }
.lcf-veiculo--manutencao { border-left: 4px solid var(--lcf-aviso-traco); }
.lcf-veiculo--disponivel { border-left: 4px solid var(--lcf-ok-traco); }
.lcf-veiculo--inativo { border-left: 4px solid var(--lcf-neutro-traco); }

.lcf-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--lcf-e-2); }
.lcf-cal__dia-semana { text-align: center; font-size: var(--lcf-t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lcf-texto-fraco); }
.lcf-cal__dia {
    min-height: 76px; display: flex; flex-direction: column; gap: 2px;
    background: var(--lcf-superficie); border: 1px solid var(--lcf-borda);
    border-radius: var(--lcf-r-md); padding: var(--lcf-e-2);
    font: inherit; text-align: left; cursor: pointer;
}
.lcf-cal__dia:hover { border-color: var(--lcf-violeta); }
.lcf-cal__dia--fora { background: var(--lcf-superficie-2); border-style: dashed; }
.lcf-cal__dia--hoje { box-shadow: inset 0 0 0 2px var(--lcf-violeta); }
.lcf-cal__dia--selecionado { background: #f5f3ff; border-color: var(--lcf-violeta-700); }
.lcf-cal__numero { font-size: var(--lcf-t-xs); font-weight: 700; color: var(--lcf-texto-medio); }
.lcf-cal__valor { font-family: var(--lcf-fonte-num); font-size: var(--lcf-t-sm); font-weight: 700; }
.lcf-cal__valor--ok { color: var(--lcf-ok-forte); }
.lcf-cal__valor--pendente { color: var(--lcf-aviso-forte); }
.lcf-cal__valor--atraso { color: var(--lcf-erro-forte); }
.lcf-cal__pontos { display: flex; gap: 3px; margin-top: auto; }
.lcf-cal__pontos i { width: 5px; height: 5px; border-radius: 50%; background: var(--lcf-aviso-forte); display: block; }
.lcf-cal__pontos i.ok { background: var(--lcf-ok-forte); }
.lcf-cal__pontos i.erro { background: var(--lcf-erro-forte); }
@media (max-width: 620px) {
    .lcf-cal { gap: 4px; }
    .lcf-cal__dia { min-height: 58px; padding: 6px; }
    .lcf-cal__valor { font-size: var(--lcf-t-xs); }
}

.lcf-passos { display: flex; align-items: center; gap: var(--lcf-e-2); flex-wrap: wrap; }
.lcf-passo { display: flex; align-items: center; gap: var(--lcf-e-2); font-size: var(--lcf-t-sm); font-weight: 600; color: var(--lcf-texto-fraco); }
.lcf-passo__numero {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--lcf-neutro-fundo); color: var(--lcf-neutro-forte); font-weight: 700; font-size: var(--lcf-t-xs);
}
.lcf-passo--atual { color: var(--lcf-texto); }
.lcf-passo--atual .lcf-passo__numero { background: var(--lcf-violeta); color: #fff; }
.lcf-passo--feito .lcf-passo__numero { background: var(--lcf-ok-forte); color: #fff; }
.lcf-passo__traco { width: 22px; height: 2px; background: var(--lcf-borda); }

/* ---------------------------------------------------------------------------------------------
   10) PRÉVIA DO CONTRATO (A4) · VISTORIA · IMPRESSÃO
   --------------------------------------------------------------------------------------------- */
.lcf-doc {
    background: var(--lcf-superficie); border: 1px solid var(--lcf-borda);
    border-radius: var(--lcf-r-md); box-shadow: var(--lcf-sombra-2);
    padding: 32px; font-size: 13px; line-height: 1.5; overflow-y: auto; max-height: 70vh;
}
.lcf-doc__marca { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--lcf-e-4); border-bottom: 2px solid var(--lcf-tinta); padding-bottom: var(--lcf-e-3); margin-bottom: var(--lcf-e-4); }
.lcf-doc__titulo { font-weight: 800; letter-spacing: 0.06em; font-size: 0.95rem; }
.lcf-doc__clausula { margin-top: var(--lcf-e-3); }
.lcf-doc__clausula h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
/* Variável preenchida automaticamente: fica marcada para o operador conferir antes de enviar. */
.lcf-doc__var { background: #fff7ed; border-bottom: 1px dashed var(--lcf-aviso-traco); padding: 0 2px; border-radius: 2px; }
.lcf-doc__assinatura { margin-top: var(--lcf-e-6); border-top: 1px solid var(--lcf-texto-medio); width: 60%; padding-top: 4px; font-size: 0.75rem; color: var(--lcf-texto-fraco); }
@media (max-width: 900px) {
    .lcf-doc { padding: 18px; max-height: none; }
    .lcf-doc__assinatura { width: 100%; }
}

.lcf-vistoria-lista { display: flex; flex-direction: column; gap: var(--lcf-e-2); }
.lcf-item-vistoria {
    display: flex; align-items: center; gap: var(--lcf-e-3);
    background: var(--lcf-superficie); border: 1px solid var(--lcf-borda);
    border-radius: var(--lcf-r-md); padding: var(--lcf-e-3) var(--lcf-e-4);
    min-height: var(--lcf-toque);
}
.lcf-item-vistoria__nome { flex: 1; font-weight: 600; font-size: var(--lcf-t-md); }
.lcf-item-vistoria__obs { font-size: var(--lcf-t-sm); color: var(--lcf-texto-fraco); }

.lcf-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--lcf-e-3); }
.lcf-foto {
    position: relative; aspect-ratio: 4 / 3; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px; text-align: center;
    background: var(--lcf-superficie-2); border: 1.5px dashed var(--lcf-borda-forte);
    border-radius: var(--lcf-r-md); color: var(--lcf-texto-fraco);
    font-size: var(--lcf-t-xs); cursor: pointer; padding: var(--lcf-e-2);
}
.lcf-foto:hover { border-color: var(--lcf-violeta); color: var(--lcf-violeta-700); }
.lcf-foto__apagar { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(15, 23, 42, 0.72); color: #fff; cursor: pointer; font-size: var(--lcf-t-xs); }

/* Impressão: laudo, contrato e promissória saem sem menu, sem topo e sem botão no papel. */
@media print {
    .lcf-menu, .lcf-topo, .lcf-toasts, .lcf-veu, .lcf-btn, .lcf-chips { display: none !important; }
    .lcf-app { display: block; }
    .lcf-conteudo { padding: 0; max-width: none; }
    .lcf-card { box-shadow: none; border-color: #94a3b8; break-inside: avoid; }
    .lcf-doc { border: 0; box-shadow: none; max-height: none; padding: 0; }
}
.lcf-so-tela { display: initial; }
@media print { .lcf-so-tela { display: none !important; } }

/* FIM-PARCIAL-7C */