* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: #f2f3f5;
    color: #1d1d1f;
}

.cabecalho {
    background: #14213d;
    color: #fff;
    padding: 16px 24px;
}

.cabecalho-conteudo {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.4rem;
    font-weight: 700;
}

.logo-icone {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

.logo-auto {
    color: #ffc400;
}

.subtitulo {
    font-size: 0.9rem;
    color: #c7cedd;
}

.cabecalho-botoes {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.botao-admin {
    background: transparent;
    border: 1px solid #c7cedd;
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    /* Também usado como <a> (link "Favoritos", index.html) - reset pra
       não herdar sublinhado; alinha verticalmente igual aos botões
       irmãos no .cabecalho-botoes (flex). */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.botao-admin:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Mesmo achado real de .card-selo-editado[hidden] (29/07): a classe
   define display explícito, que teria prioridade sobre o `display:
   none` que o atributo `hidden` normalmente aplicaria - #link-favoritos
   (unificação do login, 04/08) ficava visível pra visitante deslogado
   mesmo com `hidden` presente. */
.botao-admin[hidden] {
    display: none;
}

/* --- Menu do usuário (Perfil/Favoritos/Assinatura, 18/08) --- */

.menu-usuario {
    position: relative;
}

.menu-usuario[hidden] {
    display: none;
}

.botao-menu-usuario {
    font-size: 1rem;
    line-height: 1;
    padding: 6px 12px;
}

.menu-usuario-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    min-width: 160px;
    padding: 6px;
    z-index: 20;
}

.menu-usuario-dropdown[hidden] {
    display: none;
}

.menu-usuario-dropdown a {
    padding: 8px 10px;
    border-radius: 6px;
    color: #1d1d1f;
    text-decoration: none;
    font-size: 0.9rem;
}

.menu-usuario-dropdown a:hover {
    background: #f2f3f5;
}

/* --- Abas de tipo de veiculo + navegacao (Home/Radar/Alertas/Favoritos) --- */

.abas-secao {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

.abas-veiculo {
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
}

.abas-espaco {
    margin-left: auto;
}

/* .aba-veiculo troca a aba de tipo de veiculo (carro/moto/pesado, JS em
   configurarAbasVeiculo) - .aba-link só navega pra outra página (Home/
   Radar/Alertas/Favoritos), mesmo visual mas classe própria pra não
   entrar no querySelectorAll(".aba-veiculo") do app.js por engano. */
.aba-veiculo,
.aba-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border: none;
    background: none;
    font-size: 0.95rem;
    color: #555;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    text-decoration: none;
}

.aba-veiculo:hover,
.aba-link:hover {
    color: #14213d;
}

.aba-veiculo.aba-ativa,
.aba-link.aba-ativa {
    color: #14213d;
    font-weight: 600;
    border-bottom-color: #14213d;
}

/* Mesmo achado real de .botao-admin[hidden] (04/08): .aba-link define
   display explícito, que teria prioridade sobre o `display: none` que
   o atributo `hidden` normalmente aplicaria. */
.aba-link[hidden] {
    display: none;
}

.aba-icone {
    font-size: 1.1rem;
}

/* --- Busca dentro de um filtro --- */

.filtro-busca {
    width: 100%;
    padding: 6px 8px;
    margin-bottom: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.9rem;
}

.layout {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    align-items: start;
}

/* Mesmo achado real de .botao-admin[hidden]/.aba-link[hidden]: .layout
   define display explícito, que ganha do `display: none` que o
   atributo `hidden` normalmente aplicaria - a aba "Home" (07/08)
   escondia o catálogo via `hidden`, mas o grid continuava ocupando a
   altura inteira da página por baixo da agenda. */
.layout[hidden] {
    display: none;
}

/* --- Faixa de contexto da Home (12/08, landing page) --- */

.home-intro-secao {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px 8px;
    text-align: center;
}

.home-intro-secao[hidden] {
    display: none;
}

.home-intro-texto {
    max-width: 640px;
    margin: 0 auto 8px;
    color: #333;
    font-size: 1rem;
    line-height: 1.5;
}

.home-intro-contagem {
    margin: 0;
    color: #14213d;
    font-weight: 600;
    font-size: 0.9rem;
}

/* --- "Inicie sua busca" (12/08) - 3 cards grandes por tipo de
   veículo, mesma navegação de Carros/Motos/Pesados (data-aba, ver
   configurarAbasVeiculo em app.js). --- */

.home-busca-secao {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 24px 0;
}

.home-busca-secao[hidden] {
    display: none;
}

.home-busca-secao h2 {
    margin: 0 0 12px;
    font-size: 1.1rem;
    text-align: center;
}

.home-busca-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.home-busca-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.home-busca-card:hover {
    border-color: #14213d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.home-busca-icone {
    font-size: 2rem;
}

.home-busca-label {
    font-weight: 700;
    color: #1d1d1f;
}

.home-busca-contagem {
    font-size: 0.8rem;
    color: #8a8f98;
}

@media (max-width: 700px) {
    .home-busca-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Radar BidAuto (carrossel de destaque na home, 08/08) --- */

.radar-destaque-secao {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 24px 0;
}

.radar-destaque-secao[hidden] {
    display: none;
}

.radar-destaque-secao h2 {
    margin: 0 0 4px;
    font-size: 1.1rem;
}

.radar-destaque-descricao {
    color: #777;
    font-size: 0.8rem;
    margin: 0 0 12px;
}

/* --- Mais vistos (ranking da home) --- */

.mais-vistos-secao {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 24px 0;
}

.mais-vistos-secao[hidden] {
    display: none;
}

.mais-vistos-secao h2 {
    margin: 0 0 12px;
    font-size: 1.1rem;
}

/* Carrossel de uma linha só (pedido do Ricardo, 03/08) - os cards em
   si continuam vindo de criarCard(veiculo, "pequeno") (mesmo .card
   .card-pequeno de sempre), só o container virou flex+overflow em vez
   de grid, e cada .card ganha uma largura fixa (o grid antigo dava
   isso de graça via minmax da coluna). */
.mais-vistos-carrossel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.mais-vistos-carrossel .card {
    flex: 0 0 160px;
}

/* 11º item do carrossel, sempre presente - mesmo tratamento visual do
   "ver mais" dos carrosséis da página de lote (.carrossel-ver-mais). */
.mais-vistos-ver-mais {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #14213d;
    background: #f2f3f5;
    border: 1px dashed #b8bcc4;
    text-decoration: none;
}

.mais-vistos-ver-mais:hover {
    background: #e5e7eb;
}

/* --- Agenda de leilões (home) --- */

.agenda-secao {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 24px 0;
}

.agenda-secao[hidden] {
    display: none;
}

.agenda-secao h2 {
    margin: 0 0 12px;
    font-size: 1.1rem;
}

/* Uma seção por dia (próximos 7), empilhadas - cada uma com seus
   cards de leiloeiro logo abaixo. Bem mais simples que o esquema
   anterior (tira de dias clicável + carrossel de veículos por
   leiloeiro): aqui o card É a navegação, não existe pré-visualização
   de veículos na própria home. */
.agenda-dia-secao {
    margin-bottom: 20px;
}

.agenda-dia-cabecalho {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 1rem;
}

.agenda-dia-semana {
    font-weight: 700;
    text-transform: uppercase;
    color: #14213d;
}

.agenda-dia-numero {
    font-size: 0.85rem;
    color: #8a8f98;
}

.agenda-dia-leiloeiros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.agenda-leiloeiro-cartao {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 120px;
    padding: 14px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.agenda-leiloeiro-cartao:hover {
    border-color: #14213d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.agenda-leiloeiro-logo {
    height: 28px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
}

.agenda-leiloeiro-nome {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1d1d1f;
    text-align: center;
}

.agenda-leiloeiro-total {
    font-size: 0.75rem;
    color: #8a8f98;
}

/* --- Página de lote (nova aba por lote) --- */

.lote-pagina {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
}

.lote-nao-encontrado {
    text-align: center;
    padding: 48px 24px;
}

.lote-nao-encontrado[hidden] {
    display: none;
}

/* --- Página de privacidade (Fase 3 do deploy, 12/08) --- */

.pagina-texto {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px;
    line-height: 1.6;
}

.pagina-texto h2 {
    margin: 0 0 4px;
}

.pagina-texto h3 {
    margin: 32px 0 8px;
}

.pagina-texto-atualizado {
    color: #888;
    font-size: 0.85rem;
    margin: 0 0 24px;
}

/* --- FAQ (18/08, pedido do Ricardo): duas colunas fixas na tela (lista
   de perguntas + painel de resposta), mesmo grid de .layout (sidebar +
   conteúdo) já usado em index.html/radar.html - sem modal, a resposta
   aparece direto no painel ao lado. --- */
.faq-layout {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 800px) {
    .faq-layout {
        grid-template-columns: 1fr;
    }
}

.faq-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.faq-lista li {
    border-bottom: 1px solid #e5e7eb;
}

.faq-pergunta {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 16px 4px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    color: #1d1d1f;
    cursor: pointer;
}

.faq-pergunta:hover {
    color: #14213d;
}

.faq-pergunta-ativa {
    color: #14213d;
}

.faq-resposta-painel {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 32px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
}

.faq-resposta-conteudo {
    flex: 1;
    line-height: 1.6;
}

.faq-resposta-conteudo h3 {
    margin: 0 0 16px;
}

.faq-resposta-vazio {
    color: #888;
}

.faq-resposta-rodape {
    color: #888;
    font-size: 0.85rem;
    margin: 24px 0 0;
}

/* --- Banner de cookies (Fase 3 do deploy, 12/08) - compartilhado pelas
   6 páginas via comum.js, informativo (sem gerenciador de consentimento
   granular - ver privacidade.html, ainda não há cookie de rastreamento). --- */

.cookies-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    background: #14213d;
    color: #fff;
    padding: 16px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
}

.cookies-banner[hidden] {
    display: none;
}

.cookies-banner p {
    margin: 0;
    font-size: 0.9rem;
    color: #c7cedd;
}

.cookies-banner a {
    color: #ffd700;
    font-weight: 600;
}

.cookies-banner-botao {
    background: #ffd700;
    color: #14213d;
    border: none;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

/* --- Página de favoritos (roadmap de cadastro/favoritos, fase 2, 03/08) --- */

.favoritos-pagina {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
}

.favoritos-pagina h2 {
    margin: 0 0 16px;
}

.favoritos-nao-logado,
.favoritos-vazio {
    text-align: center;
    padding: 48px 24px;
    color: #555;
}

/* --- Alertas: tema "bilhete de leilão" (15/08) ---
   Cada alerta é tratado como um bilhete perfurado: você registra um
   pedido (marca/modelo/ano) e fica "vigiando" até um lote compatível
   aparecer - o mesmo gesto de pegar uma senha e esperar ser chamado.
   Fraunces (título) + IBM Plex Mono (rótulos/critérios, como uma
   numeração de bilhete) carregados só em alertas.html - o resto do
   site continua no stack de sistema. Paleta reaproveita o navy
   (--bilhete-tinta = #14213d) e o dourado (#ffd700) que o cabeçalho/
   rodapé do site já usam; só o tom de papel é novo, e fica restrito
   aos cartões/modal desta página. */
:root {
    --bilhete-papel: #fbf5e7;
    --bilhete-papel-borda: #e6dcc0;
    --bilhete-tinta: #14213d;
    --bilhete-ouro: #b8860f;
    --bilhete-ouro-vivo: #ffd700;
    --bilhete-pausado: #9a978c;
    --bilhete-fundo-pagina: #f2f3f5;
}

.alertas-pagina {
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 24px 72px;
}

.alertas-eyebrow {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bilhete-ouro);
    margin: 0 0 10px;
}

.alertas-masthead {
    padding-bottom: 32px;
    margin-bottom: 40px;
    border-bottom: 1px dashed var(--bilhete-papel-borda);
}

.alertas-titulo {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: clamp(2.1rem, 5vw, 3rem);
    letter-spacing: -0.01em;
    color: var(--bilhete-tinta);
    margin: 0 0 14px;
}

.alertas-subtitulo {
    max-width: 540px;
    color: #5b5b5b;
    line-height: 1.6;
    margin: 0 0 24px;
}

.alertas-botao-criar {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    background: var(--bilhete-tinta);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 13px 24px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.alertas-botao-criar span {
    font-size: 1.1rem;
    line-height: 1;
}

.alertas-botao-criar:hover {
    background: #1f3157;
    transform: translateY(-1px);
}

.alertas-botao-criar:focus-visible {
    outline: 2px solid var(--bilhete-ouro-vivo);
    outline-offset: 3px;
}

.alertas-confirmacao {
    margin: 16px 0 0;
}

.alertas-estado {
    max-width: 460px;
    margin: 24px auto;
    text-align: center;
    padding: 36px 28px;
    border: 1px dashed var(--bilhete-papel-borda);
    border-radius: 14px;
    background: var(--bilhete-papel);
}

.alertas-estado-selo {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bilhete-ouro);
    margin: 0 0 10px;
}

.alertas-estado-texto {
    color: #5b5b5b;
    line-height: 1.55;
    margin: 0 0 12px;
}

.alertas-estado-link {
    font-size: 0.85rem;
    color: var(--bilhete-tinta);
}

.pro-beneficios {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    text-align: left;
    color: #5b5b5b;
    line-height: 1.55;
}

.pro-beneficios li {
    padding-left: 22px;
    position: relative;
}

.pro-beneficios li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--bilhete-ouro);
    font-weight: 700;
}

/* --- Ticket Pro: cartão de upsell no mesmo idioma visual dos bilhetes
   de alerta (19/08) - em vez de um cartão neutro de preço, é um ingresso
   com canhoto de verdade (mesma técnica de picote de .bilhete-canhoto),
   reaproveitado em radar.html, alertas.html e assinatura.html. A borda
   dourada (em vez do tracejado neutro de .alertas-estado) e o selo
   diferenciam este cartão dos outros estados (vazio/não-logado), que
   continuam simples de propósito. */
.ticket-pro {
    display: grid;
    grid-template-columns: 1fr minmax(200px, 260px);
    align-items: stretch;
    background: var(--bilhete-papel);
    border: 1.5px solid var(--bilhete-ouro);
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(184, 134, 15, 0.15);
    text-align: left;
    position: relative;
    margin: 24px auto;
    max-width: 640px;
}

.ticket-pro[hidden] {
    display: none;
}

.ticket-pro-selo {
    position: absolute;
    top: -14px;
    left: 24px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bilhete-tinta);
    color: var(--bilhete-ouro-vivo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transform: rotate(-10deg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.ticket-pro-corpo {
    padding: 32px 28px 24px;
}

.ticket-pro-titulo {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--bilhete-tinta);
    margin: 4px 0 10px;
}

.ticket-pro-texto {
    color: #5b5b5b;
    line-height: 1.55;
    margin: 0 0 14px;
}

.ticket-pro-canhoto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 20px;
    border-left: 1.5px dashed var(--bilhete-ouro);
    position: relative;
    text-align: center;
}

/* "Furos" da perfuração - mesma técnica de .bilhete-canhoto, entalhados
   na cor do fundo da página (#f2f3f5, igual em todas as páginas). */
.ticket-pro-canhoto::before,
.ticket-pro-canhoto::after {
    content: "";
    position: absolute;
    left: -9px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bilhete-fundo-pagina);
}

.ticket-pro-canhoto::before {
    top: -8px;
}

.ticket-pro-canhoto::after {
    bottom: -8px;
}

.ticket-pro-preco {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--bilhete-tinta);
    margin: 0;
}

.ticket-pro-preco span {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 500;
    color: #6b6656;
}

.ticket-pro-cta {
    width: 100%;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    background: var(--bilhete-tinta);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 16px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.ticket-pro-cta:hover {
    background: #1f3157;
    transform: translateY(-1px);
}

.ticket-pro-cta:focus-visible {
    outline: 2px solid var(--bilhete-ouro-vivo);
    outline-offset: 3px;
}

.ticket-pro-nota {
    font-size: 0.72rem;
    color: #999;
    margin: 0;
}

.ticket-pro-form {
    width: 100%;
}

@media (max-width: 640px) {
    .ticket-pro {
        grid-template-columns: 1fr;
    }

    .ticket-pro-canhoto {
        border-left: none;
        border-top: 1.5px dashed var(--bilhete-ouro);
        padding-top: 22px;
    }

    .ticket-pro-canhoto::before,
    .ticket-pro-canhoto::after {
        left: 50%;
        top: -8px;
        bottom: auto;
        transform: translateX(-50%);
    }

    .ticket-pro-canhoto::after {
        top: auto;
        bottom: -8px;
    }
}

/* --- Lista de bilhetes --- */

.bilhetes-lista {
    display: grid;
    gap: 18px;
}

.bilhete {
    position: relative;
    display: grid;
    grid-template-columns: 68px 1fr 108px;
    align-items: center;
    column-gap: 20px;
    background: var(--bilhete-papel);
    border: 1px solid var(--bilhete-papel-borda);
    border-radius: 14px;
    padding: 18px 22px;
}

.bilhete-estampa {
    justify-self: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px dashed var(--bilhete-ouro);
    background: transparent;
    color: var(--bilhete-ouro);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transform: rotate(-7deg);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bilhete-estampa-anel {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.bilhete-estampa[aria-pressed="true"] .bilhete-estampa-anel {
    animation: bilhete-pulso 2.4s ease-in-out infinite;
}

.bilhete-estampa-texto {
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.bilhete-estampa[aria-pressed="false"] {
    border-style: solid;
    border-color: var(--bilhete-pausado);
    color: var(--bilhete-pausado);
    opacity: 0.7;
}

.bilhete-estampa:disabled {
    cursor: wait;
    opacity: 0.5;
}

.bilhete-estampa:focus-visible {
    outline: 2px solid var(--bilhete-tinta);
    outline-offset: 3px;
}

.bilhete-corpo {
    min-width: 0;
}

.bilhete-nome {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--bilhete-tinta);
    margin: 0 0 4px;
}

.bilhete-criterios {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.8rem;
    color: #6b6656;
    margin: 0 0 4px;
    overflow-wrap: break-word;
}

.bilhete-data {
    font-size: 0.78rem;
    color: #999;
    margin: 0;
}

.bilhete-canhoto {
    justify-self: end;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    border-left: 1px dashed var(--bilhete-papel-borda);
    position: relative;
}

/* "Furos" da perfuração - dois semicírculos na cor do fundo da página
   entalhados na borda do canhoto, como um bilhete de verdade arrancado
   de um talão. */
.bilhete-canhoto::before,
.bilhete-canhoto::after {
    content: "";
    position: absolute;
    left: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bilhete-fundo-pagina);
}

.bilhete-canhoto::before {
    top: -9px;
}

.bilhete-canhoto::after {
    bottom: -9px;
}

.bilhete-excluir {
    background: none;
    border: none;
    color: #b5473a;
    font-size: 0.8rem;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    cursor: pointer;
    padding: 4px;
}

.bilhete-excluir:hover {
    text-decoration: underline;
}

.bilhete-excluir:focus-visible {
    outline: 2px solid var(--bilhete-tinta);
    outline-offset: 2px;
}

@keyframes bilhete-pulso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(184, 134, 15, 0.45); }
    50% { box-shadow: 0 0 0 5px rgba(184, 134, 15, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .bilhete-estampa[aria-pressed="true"] .bilhete-estampa-anel {
        animation: none;
    }
}

@media (max-width: 640px) {
    .bilhete {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        row-gap: 12px;
    }

    .bilhete-canhoto {
        border-left: none;
        border-top: 1px dashed var(--bilhete-papel-borda);
        padding-left: 0;
        padding-top: 14px;
        width: 100%;
    }

    .bilhete-canhoto::before,
    .bilhete-canhoto::after {
        left: 50%;
        top: -7px;
        bottom: auto;
        transform: translateX(-50%);
    }

    .bilhete-canhoto::after {
        top: auto;
        bottom: -7px;
    }
}

/* --- Modal "Criar alerta" --- */

.alerta-form-modal {
    max-width: 560px;
    grid-template-columns: 1fr;
}

.alerta-form-titulo {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 1.9rem;
    color: var(--bilhete-tinta);
    margin: 0 0 10px;
}

.alerta-form-intro {
    color: #5b5b5b;
    line-height: 1.55;
    margin: 0 0 20px;
    font-size: 0.92rem;
}

.bilhete-trilho {
    position: relative;
    padding-left: 18px;
    margin-bottom: 4px;
}

.bilhete-trilho::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 30px;
    border-left: 1px dashed var(--bilhete-ouro);
}

.bilhete-passo {
    position: relative;
}

.bilhete-passo::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 30px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bilhete-ouro);
    transform: translateX(-3px);
}

.alerta-criar-ano {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.alerta-criar-grupo {
    margin-bottom: 16px;
}

.alerta-criar-grupo h3 {
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #555;
}

.alerta-criar-grupo h3 span {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #999;
}

.alerta-criar-submit {
    width: 100%;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    background: var(--bilhete-tinta);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 13px 20px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.alerta-criar-submit:hover {
    background: #1f3157;
}

.alerta-criar-submit:focus-visible {
    outline: 2px solid var(--bilhete-ouro-vivo);
    outline-offset: 3px;
}

.favoritos-nao-logado[hidden],
.favoritos-vazio[hidden] {
    display: none;
}

.radar-pagina {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
}

.radar-pagina h2 {
    margin: 0 0 4px;
}

.radar-descricao {
    color: #555;
    margin: 0 0 16px;
}

/* .radar-abas reaproveita o visual de .abas-veiculo (mesma "linguagem"
   de categoria com emoji do resto do site), mas sem o max-width/padding
   pensados pro cabeçalho fixo - aqui já está dentro de .radar-pagina,
   que já tem o próprio max-width/padding. */
.radar-abas {
    max-width: none;
    padding: 0;
    margin: 0 0 16px;
    border-bottom: 1px solid #e5e7eb;
}

#radar-filtros .select-ordenacao {
    width: 100%;
}

/* Categorias/filtros do radar são a própria feature premium (07/08) -
   quem não é premium ainda VÊ as abas/marca/modelo reais (prova de que
   o recurso existe), só não consegue usar. .radar-overlay-premium é um
   irmão posicionado por cima (não um filho, que herdaria o blur do
   pai) - backdrop-filter embaça só o que está atrás dele, deixando o
   próprio texto do cadeado nítido. O bloqueio de verdade é o atributo
   disabled nos botões/selects (aplicado via JS) - o overlay é só a
   pista visual. */
.radar-secao-premium {
    position: relative;
}

.radar-overlay-premium {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #14213d;
}

.radar-overlay-premium[hidden] {
    display: none;
}

/* Toggle "Leilão mais próximo/distante" (08/08, pedido do Ricardo) -
   controle separado do select "Ordenar por" (só desconto), posicionado
   em cima da lista pra dar destaque; mesma paleta navy do resto do
   site, no espírito de .aba-veiculo mas compacto (pill), já que aqui
   não compete por espaço com ícone/rótulo grande. */
.radar-ordenar-leilao {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 16px;
}

.radar-leilao-botao {
    padding: 6px 14px;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    background: #fff;
    color: #555;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.radar-leilao-botao:hover:not(:disabled) {
    background: #f2f3f5;
}

.radar-leilao-botao.radar-leilao-ativo {
    background: #14213d;
    border-color: #14213d;
    color: #fff;
}

.radar-leilao-botao:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.card-selo-desconto {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #16a34a;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* .modal já traz o grid galeria+conteúdo (ver .modal mais abaixo) -
   aqui só tiramos o que era específico de estar dentro de um overlay
   (altura travada em 90vh com scroll interno próprio) pra virar
   conteúdo normal de página, que rola junto com o resto. */
/* Especificidade maior que ".modal" sozinho (mesma ordem no arquivo
   perderia empate de especificidade pra ".modal", que vem depois) -
   isso garante que o max-height/overflow do modal-overlay (pensado pra
   caber em 90vh dentro de um popup) não vaze pra cá, onde o conteúdo
   deve rolar junto com a página normal, sem barra de rolagem própria. */
.modal.lote-conteudo {
    max-height: none;
    overflow-y: visible;
    margin-bottom: 32px;

    /* .modal trava em max-width:900px (pensado pro popup) - aqui a
       largura deve "conversar" com os carrosséis abaixo, que ocupam a
       largura inteira de .lote-pagina (pedido do Ricardo). */
    max-width: none;
    width: 100%;
}

/* --- Carrosséis (mesmo modelo/mesma marca/faixa de lance) --- */

.carrossel-secao {
    margin-bottom: 32px;
}

.carrossel-secao[hidden] {
    display: none;
}

.carrossel-secao h3 {
    margin: 0 0 12px;
    font-size: 1.05rem;
}

.carrossel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.carrossel-card {
    flex: 0 0 180px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.carrossel-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.carrossel-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #e5e7eb;
}

/* Só o carrossel "Radar BidAuto" (home, 08/08) precisa de um wrapper -
   os outros carrosséis (relacionados, lote.js) usam <img> direto sem
   selo por cima. position:relative aqui é o que ancora o
   .card-selo-desconto (position:absolute) corretamente. */
.carrossel-card-imagem-container {
    position: relative;
}

.carrossel-titulo {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 8px 8px 2px;
    line-height: 1.3;
}

.carrossel-valor {
    font-size: 0.9rem;
    font-weight: 700;
    color: #14213d;
    margin: 0 8px 8px;
}

.carrossel-ver-mais {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #14213d;
    background: #f2f3f5;
    border: 1px dashed #b8bcc4;
}

.carrossel-ver-mais:hover {
    background: #e5e7eb;
}

/* --- Filtros (barra lateral) --- */

.filtros {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

/* --- Filtros no celular (bottom-sheet, 11/08) - fora de
   @media(max-width:800px) de propósito: esses elementos só existem
   pro layout mobile, então ficam escondidos por padrão no desktop e a
   media query só liga o que muda. `.filtros-backdrop` some via
   `hidden` (atributo, alternado por JS) - sem display próprio aqui,
   então nem precisa do reforço `[hidden]` que .modal-overlay usa. --- */

.filtros-mobile-abrir,
.filtros-mobile-cabecalho,
.filtros-mobile-aplicar {
    display: none;
}

.filtro-grupo {
    margin-bottom: 20px;
}

.filtro-grupo h3 {
    margin: 0 0 8px;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.filtro-grupo h3::after {
    content: "▾";
    font-size: 0.8rem;
    color: #999;
    transition: transform 0.15s;
}

.filtro-grupo.filtro-grupo-recolhido h3 {
    margin-bottom: 0;
}

.filtro-grupo.filtro-grupo-recolhido h3::after {
    transform: rotate(-90deg);
}

.filtro-grupo.filtro-grupo-recolhido > *:not(h3) {
    display: none;
}

.filtro-opcoes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
}

.filtro-opcoes-colunas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 8px;
}

.filtro-contagem {
    color: #999;
    font-size: 0.85em;
}

.filtro-opcoes label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

.filtro-logo {
    height: 16px;
    width: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.filtro-ano-intervalo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #555;
}

.filtro-ano-input {
    width: 70px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
}

.filtro-dica {
    font-size: 0.85rem;
    color: #888;
    margin: 0;
}

.botao-limpar {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 0.9rem;
}

.botao-limpar:hover {
    background: #f2f3f5;
}

/* Botão quadrado só de ícone (ex.: ↻ "atualizar status", Sincronizador
   > FIPE, 08/08) - width:100% de .botao-limpar espremeria isso numa
   faixa fina e feia dentro de .admin-sync-botoes-gerais (flex row). */
.botao-icone {
    width: auto;
    padding: 6px 10px;
    font-size: 1.1rem;
    line-height: 1;
}

/* --- Conteúdo / cards --- */

.barra-resultados {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

/* Chip "Leilão em DD/MM ×" (agenda da home) - só aparece com filtro de
   data ativo (atualizarChipDataAgenda, app.js). */
.filtro-data-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 0 0 12px;
    padding: 6px 8px 6px 14px;
    border-radius: 20px;
    background: #14213d;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}

.filtro-data-chip[hidden] {
    display: none;
}

.filtro-data-chip-remover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.filtro-data-chip-remover:hover {
    background: rgba(255, 255, 255, 0.3);
}

.resultado-contagem {
    color: #555;
    margin: 0;
    font-size: 0.9rem;
}

.barra-controles {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.ordenacao-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #555;
}

.select-ordenacao {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    font-size: 0.9rem;
}

.visualizacao-toggle {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
}

.visualizacao-botao {
    padding: 6px 12px;
    border: none;
    border-right: 1px solid #ccc;
    background: #fff;
    color: #555;
    font-size: 0.85rem;
    cursor: pointer;
}

.visualizacao-botao:last-child {
    border-right: none;
}

.visualizacao-botao:hover {
    background: #f2f3f5;
}

.visualizacao-botao.visualizacao-ativa {
    background: #14213d;
    color: #fff;
}

.cards {
    display: grid;
    gap: 16px;
}

.cards-mensagem-erro {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 16px;
    color: #666;
}

.cards.cards-grande {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.cards.cards-pequeno {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.cards.cards-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- Paginação --- */

.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 24px 0 8px;
}

.paginacao-botao {
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    font-size: 0.9rem;
    cursor: pointer;
}

.paginacao-botao:hover:not(:disabled) {
    background: #f2f3f5;
}

.paginacao-botao:disabled {
    opacity: 0.4;
    cursor: default;
}

.paginacao-info {
    font-size: 0.9rem;
    color: #555;
}

.card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    /* .card normalmente é um <div> (criarCard, app.js), mas a página de
       favoritos usa <a> direto pro lote (favoritos.js) - reset pra não
       herdar sublinhado/cor de link. Não afeta o <div> em nada. */
    text-decoration: none;
    color: inherit;
}

.card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.card-imagem {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #e5e7eb;
}

.card-corpo {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.card-titulo {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.card-selo {
    display: inline-block;
    align-self: flex-start;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
}

.card-selo-editado {
    display: inline-block;
    align-self: flex-start;
    background: #dbeafe;
    color: #1e3a8a;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
    margin-top: 4px;
}

/* Achado real (29/07, reportado pelo Ricardo): o atributo `hidden` do
   HTML normalmente vira `display: none` via a folha de estilo padrão
   do navegador, mas a regra acima ("display: inline-block" numa
   classe) tem prioridade sobre isso - #modal-selo-editado ficava
   visível em TODO lote, mesmo com `hidden` presente, porque nada
   nunca sobrescrevia o display de volta pra none. */
.card-selo-editado[hidden] {
    display: none;
}

.card-local {
    font-size: 0.85rem;
    color: #555;
    margin: 0;
}

.card-km {
    font-size: 0.85rem;
    color: #555;
    margin: 0;
}

.card-extra {
    font-size: 0.78rem;
    color: #888;
    margin: 0;
}

.card-imagem-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
}

.card-watermark {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.8);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Variante com logo real (criarWatermarkLeiloeiro, comum.js) - troca o
   badge de texto por uma miniatura do logo, com o mesmo fundo escuro
   translúcido (a maioria dos logos tem letras escuras/coloridas, sem
   fundo, então precisam de contraste contra a foto do veículo). */
.card-watermark-logo {
    background: rgba(255, 255, 255, 0.85);
    padding: 3px 6px;
    height: 22px;
    width: auto;
    max-width: 90px;
    object-fit: contain;
}

.card-visualizacoes {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.9);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Coração de favorito (roadmap de cadastro/favoritos, fase 2, 03/08) -
   sobreposto no canto superior direito da imagem, tanto no card da
   listagem (.card-imagem-container) quanto na galeria da página de
   lote (.modal-imagem-container) - os dois já são position:relative,
   então o mesmo botão funciona nos dois sem CSS específico de onde
   está encaixado. */
.favorito-botao {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.favorito-botao:hover {
    background: rgba(0, 0, 0, 0.7);
}

.favorito-botao.favoritado {
    color: #ef4444;
}

.card-valor-container {
    margin-top: auto;
}

.card-valor-label {
    display: block;
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.card-valor {
    font-size: 1.25rem;
    font-weight: 700;
    color: #14213d;
    margin: 0;
}

.card-data {
    font-size: 0.75rem;
    color: #aaa;
    margin-top: 4px;
}

.card-data-leilao {
    font-size: 0.75rem;
    color: #999;
    margin: 4px 0 0 0;
    text-transform: capitalize;
}

.card-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    margin-top: 8px;
    padding: 8px;
    background: #14213d;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
}

.card-link:hover {
    background: #24345c;
}

.modal-link-logo {
    height: 20px;
    width: auto;
    max-width: 70px;
    object-fit: contain;
    border-radius: 3px;
    /* Fundo branco - vários logos têm traço escuro sobre fundo
       transparente e ficariam ilegíveis contra o azul-marinho do
       botão (#14213d). */
    background: #fff;
    padding: 2px 4px;
}

.compartilhar-wrapper {
    position: relative;
    margin-top: 8px;
}

.compartilhar-painel {
    position: relative;
    margin-top: 10px;
    /* Espaço suficiente pro × (.compartilhar-painel-fechar, top:6 +
       altura 22px) não encostar no botão de copiar da linha do link
       logo abaixo. */
    padding-top: 32px;
}

.compartilhar-painel-fechar {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #999;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compartilhar-painel-fechar:hover {
    background: #f2f3f5;
    color: #14213d;
}

.compartilhar-link-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.compartilhar-link-input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #f8f9fa;
    color: #555;
    font-size: 0.8rem;
}

.compartilhar-copiar-botao {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #14213d;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compartilhar-copiar-botao:hover {
    background: #f2f3f5;
}

.compartilhar-copiar-botao.copiado {
    color: #16a34a;
    border-color: #16a34a;
}

.compartilhar-redes-row {
    display: flex;
    gap: 8px;
}

.compartilhar-rede {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: #14213d;
    font-size: 0.7rem;
    text-align: center;
}

.compartilhar-rede-icone {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.compartilhar-rede-letra {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

/* Variante da página de lote (07/08): o botão "Compartilhar" mora
   dentro de .lote-acoes-topo (canto superior direito, empilhado com
   "Editar lote"), então o painel vira um dropdown flutuante ancorado
   nele em vez do bloco em fluxo normal (mais larga - o container
   ficaria só do tamanho do botão, curto demais pra caber as 4 redes
   numa linha só). Não mexe no uso original do modal da listagem
   (index.html), que continua em fluxo normal, empurrando o resto do
   conteúdo pra baixo. */
.lote-acoes-topo .compartilhar-wrapper {
    position: relative;
}

.lote-acoes-topo .compartilhar-painel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    margin-top: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 32px 12px 12px;
}

/* --- Variante "pequeno" --- */

.card.card-pequeno .card-corpo {
    padding: 8px;
    gap: 4px;
}

.card.card-pequeno .card-titulo {
    font-size: 0.85rem;
}

.card.card-pequeno .card-selo {
    font-size: 0.7rem;
}

.card.card-pequeno .card-local,
.card.card-pequeno .card-km,
.card.card-pequeno .card-extra,
.card.card-pequeno .card-data-leilao {
    font-size: 0.7rem;
}

.card.card-pequeno .card-valor {
    font-size: 1rem;
}

.card.card-pequeno .card-link {
    padding: 6px;
    font-size: 0.8rem;
}

/* --- Variante "lista" --- */

.card.card-lista {
    flex-direction: row;
    align-items: stretch;
}

.card.card-lista .card-imagem-container {
    width: 220px;
    flex-shrink: 0;
}

.card.card-lista .card-imagem {
    height: 100%;
    aspect-ratio: unset;
}

.card.card-lista .card-corpo {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 24px;
    padding: 12px 16px;
}

.card.card-lista .card-titulo {
    flex: 1 1 220px;
}

.card.card-lista .card-valor-container {
    margin-top: 0;
    margin-left: auto;
    text-align: right;
}

.card.card-lista .card-link {
    margin-top: 0;
    width: auto;
}

@media (max-width: 700px) {
    .card.card-lista {
        flex-direction: column;
    }

    .card.card-lista .card-imagem-container {
        width: 100%;
    }

    .card.card-lista .card-imagem {
        aspect-ratio: 4 / 3;
    }

    .card.card-lista .card-valor-container {
        margin-left: 0;
        text-align: left;
    }
}

/* --- Modal de detalhe do lote --- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 100;
}

.modal-overlay[hidden] {
    display: none;
}

.modal {
    background: #fff;
    border-radius: 10px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 24px;
    position: relative;
}

/* Lightbox só de fotos (Revisão FIPE, 08/08, pedido do Ricardo: às
   vezes a definição do candidato certo depende de olhar as fotos, e
   abrir o lote em outra aba pra isso quebrava o ritmo da fila). Mesmo
   .modal usado no catálogo, só de 1 coluna (sem painel de detalhes ao
   lado - aqui é só a galeria). */
.modal-somente-galeria {
    grid-template-columns: 1fr;
    max-width: 640px;
}

.modal-fechar {
    position: absolute;
    top: 12px;
    right: 12px;
    border: none;
    background: #f2f3f5;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.modal-fechar:hover {
    background: #e5e7eb;
}

/* Canto superior direito da página de lote (07/08) - mesmo canto de
   .modal-fechar nos outros modais, que aqui não existe (a página não
   tem "fechar"). Empilha os botões que só existem aqui em cima da
   imagem (editar admin, compartilhar) - quando só um está visível
   (visitante comum: só compartilhar), ocupa sozinho essa posição. */
.lote-acoes-topo {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.botao-editar-lote-admin {
    border: none;
    background: #f2f3f5;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.botao-editar-lote-admin:hover {
    background: #e5e7eb;
}

/* Painel de edição no topo da página de lote (06/08, pedido do
   Ricardo) - fica dentro da coluna de conteúdo (não ocupa a linha
   inteira: fotos continuam do lado, mesma decisão de app.js/index.html).
   margin-top extra afasta do .lote-acoes-topo logo acima, que é
   position:absolute e flutua por cima do topo do card (altura de até
   3 botões empilhados - editar, compartilhar e reportar erro - quando
   admin, ajustado em 17/08 com a chegada do "Reportar erro"). */
.lote-conteudo .modal-conteudo > #modal-edicao-admin {
    margin-top: 118px;
}

.modal-galeria {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-imagem-container {
    position: relative;
}

.modal-imagem-principal {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    background: #e5e7eb;
}

.modal-miniaturas {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.modal-miniatura {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
}

.modal-miniatura:hover {
    border-color: #14213d;
}

/* Seletor de foto de capa (admin, 17/08) - estrela sobreposta no canto
   da miniatura, mesmo espírito posicional do .favorito-botao na imagem
   principal. */
.modal-miniatura-wrapper {
    position: relative;
}

.modal-miniatura-capa-botao {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.modal-miniatura-capa-botao:hover {
    background: rgba(0, 0, 0, 0.8);
}

.modal-miniatura-capa-atual {
    color: #fbbf24;
}

.modal-conteudo h2 {
    margin: 0 0 8px;
}

.modal-resumo {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #444;
}

.modal-resumo:empty {
    display: none;
}

.modal-detalhes {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 16px 0;
    font-size: 0.9rem;
}

.modal-detalhes dt {
    color: #777;
}

.modal-detalhes dd {
    margin: 0;
    font-weight: 600;
}

.dd-texto-truncavel {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dd-texto-truncavel.expandido {
    -webkit-line-clamp: unset;
    overflow: visible;
}

.texto-destacado {
    background: #fff3cd;
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
    cursor: help;
}

.btn-mostrar-mais {
    display: block;
    margin-top: 4px;
    background: none;
    border: none;
    padding: 0;
    color: #14213d;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 600;
    text-decoration: underline;
}

.modal-checklist-lista {
    margin: 8px 0 16px;
    padding-left: 20px;
    font-size: 0.9rem;
    color: #333;
}

.modal-checklist-lista.truncavel {
    max-height: 168px;
    overflow: hidden;
}

.modal-checklist-lista.truncavel.expandida {
    max-height: none;
    overflow: visible;
}

#modal-fipe {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.fipe-carregando {
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
}

/* Botão "Buscar FIPE" manual (admin, 08/08) - substitui o disparo
   automático da busca ao vivo só por reabrir a página. */
.fipe-manual {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.fipe-resultado h4,
.fipe-candidatos h4 {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: #14213d;
}

.fipe-detalhes {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 8px 0;
    font-size: 0.9rem;
}

.fipe-detalhes dt {
    color: #777;
}

.fipe-detalhes dd {
    margin: 0;
    font-weight: 600;
}

.desconto-positivo {
    color: #059669;
}

.desconto-negativo {
    color: #dc2626;
}

.fipe-dica {
    font-size: 0.85rem;
    color: #666;
    margin: 8px 0;
}

.fipe-lista {
    list-style: none;
    padding: 0;
    margin: 8px 0;
}

.fipe-item {
    padding: 8px 12px;
    margin: 4px 0;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.fipe-item:hover {
    background: #f3f4f6;
    border-color: #14213d;
}

.fipe-item strong {
    display: block;
    color: #14213d;
}

.fipe-item small {
    display: block;
    color: #666;
    font-size: 0.85rem;
    margin-top: 4px;
}

.fipe-palavra-diferente {
    background: #fde68a;
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
}

.fipe-cenario {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
}

.fipe-cenario:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.fipe-cenario h5 {
    margin: 0 0 4px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #777;
}

.fipe-simulacao label {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 4px;
}

.fipe-input-lance {
    width: 100%;
    max-width: 200px;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.fipe-link-botao {
    background: none;
    border: none;
    padding: 0;
    color: #14213d;
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
}

.fipe-confirmar {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.fipe-confirmado {
    color: #059669;
    font-weight: 600;
    font-size: 0.9rem;
}

.fipe-nao-encontrada,
.fipe-sucata,
.fipe-erro {
    padding: 12px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #92400e;
}

.fipe-erro {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #7f1d1d;
}

/* --- Login e edição manual (admin, task #109 fatia 1) --- */

.login-modal {
    grid-template-columns: 1fr;
    max-width: 380px;
}

.login-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.login-termos {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.8rem;
    margin-bottom: 12px;
}

.login-termos[hidden] {
    display: none;
}

.login-termos input {
    margin-top: 3px;
}

.login-campo input,
.login-campo select,
.login-campo textarea {
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
}

.login-campo textarea {
    resize: vertical;
}

/* "Reportar erro" (17/08) - mensagem de sucesso, mesmo esquema visual
   de .login-erro só que em verde. */
.reportar-erro-sucesso {
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #14532d;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
}

.reportar-erro-subtitulo {
    color: #666;
    font-size: 0.9rem;
    margin: -4px 0 12px;
}

.login-botao-entrar {
    width: 100%;
}

.login-erro {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #7f1d1d;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-top: 8px;
}

/* --- Login público (roadmap de cadastro/favoritos, fase 1, 02/08) --- */

.google-botao-container {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.entrar-divisor {
    text-align: center;
    color: #999;
    font-size: 0.8rem;
    margin: 0 0 12px;
}

.entrar-trocar-modo {
    text-align: center;
    font-size: 0.85rem;
    margin: 12px 0 0;
}

#modal-edicao-admin {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 12px;
    margin: 12px 0;
}

#modal-edicao-admin h4 {
    margin: 0 0 8px;
    font-size: 0.9rem;
    color: #1e3a8a;
}

.edicao-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    margin-bottom: 8px;
}

.edicao-campo input,
.edicao-campo select {
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9rem;
}

.edicao-cadeado {
    font-size: 0.8rem;
}

.edicao-mensagem {
    font-size: 0.8rem;
    margin-top: 8px;
    color: #1e3a8a;
}

.remocao-bloco {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #bfdbfe;
}

.botao-remover-lote {
    width: 100%;
    background: #fee2e2;
    color: #7f1d1d;
    border: 1px solid #fca5a5;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
}

.botao-remover-lote:hover {
    background: #fecaca;
}

/* --- Rodapé --- */

.rodape {
    background: #14213d;
    color: #fff;
    margin-top: 48px;
    padding: 48px 24px 24px;
    border-top: 1px solid #24345c;
}

.rodape-conteudo {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 32px;
}

/* Bloco de marca espelha o lockup do .cabecalho (logo + subtitulo) -
   mesmo tamanho/peso do .logo do header, pra reconhecer a mesma marca
   em cima e embaixo da página. */
.rodape-marca {
    flex: 1 1 240px;
    max-width: 320px;
}

.rodape-logo {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
}

.rodape-logo-risco {
    display: block;
    width: 28px;
    height: 3px;
    margin: 10px 0 14px;
    background: #ffd700;
    border-radius: 2px;
}

.rodape-marca p {
    margin: 0 0 8px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #c7cedd;
}

.rodape-marca .rodape-powered {
    font-size: 0.8rem;
    color: #888;
}

.rodape-links {
    flex: 2 1 320px;
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 200px));
    gap: 32px 48px;
    padding-left: 40px;
    border-left: 1px solid #24345c;
}

.rodape-secao h3 {
    margin: 0 0 8px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffd700;
}

.rodape-secao p {
    margin: 0 0 8px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #c7cedd;
}

.rodape-secao p:last-child {
    margin: 0;
}

.rodape-secao a {
    color: #ffd700;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.rodape-secao a:hover,
.rodape-secao a:focus-visible {
    color: #ffed4e;
    text-decoration: underline;
}

.rodape-icone-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rodape-bottom {
    max-width: 1280px;
    margin: 0 auto;
    padding-top: 24px;
    border-top: 1px solid #24345c;
    text-align: center;
    font-size: 0.85rem;
    color: #888;
}

.rodape-bottom p {
    margin: 0;
}

/* --- Painel administrativo (polimentos pré-deploy, 04/08) --- */

/* max-width + margin:auto igual a .cabecalho-conteudo - sem isso o
   header fica centralizado numa coluna de 1280px enquanto o shell (sidebar
   + página) fica colado na borda esquerda da viewport inteira, e as duas
   margens esquerdas nunca se encontram em telas mais largas que 1280px. */
.admin-shell {
    min-height: 70vh;
    max-width: 1680px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
}

/* Mesmo achado real de .botao-admin[hidden] (04/08): a classe define
   display explícito, que teria prioridade sobre o `display: none` que
   o atributo `hidden` normalmente aplicaria - o shell inteiro (sidebar
   + dashboard) ficava visível pra quem não é admin mesmo com o JS
   marcando `conteudo.hidden = true` em carregarPainelAdmin (admin.js). */
.admin-shell[hidden] {
    display: none;
}

/* Botão de abrir o menu (08/08, pedido do Ricardo) - reaproveita o
   visual de .botao-admin (mesmo estilo do "Entrar/Sair" no cabeçalho),
   só ajusta o tamanho da fonte pro caractere do ícone (☰) ficar
   proporcional aos outros botões do cabeçalho. */
.admin-menu-toggle {
    font-size: 1.1rem;
    line-height: 1;
    padding: 6px 10px;
}

/* Menu lateral empurra o conteúdo em vez de sobrepor (08/08, pedido do
   Ricardo: "acho que ao acionar o botão do menu, ele empurrar o
   conteúdo vai ser mais fácil de se orientar") - item flex com
   width real, escondido (width: 0) por padrão e revelado pelo
   #admin-menu-toggle no cabeçalho; `.admin-pagina` (flex: 1) reflui
   sozinho conforme a largura muda, sem cálculo nenhum em JS. */
.admin-sidebar {
    width: 0;
    flex-shrink: 0;
    overflow: hidden;
    background: #14213d;
    display: flex;
    flex-direction: column;
    padding: 0;
    transition: width 0.2s ease, padding 0.2s ease;
}

.admin-sidebar.admin-sidebar-aberta {
    width: 220px;
    padding: 24px 0;
}

.admin-sidebar-item {
    background: none;
    border: none;
    color: #c7cedd;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    padding: 14px 24px;
    cursor: pointer;
    white-space: nowrap;
}

.admin-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.admin-sidebar-item.admin-sidebar-ativo {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* Grupo com submenu (Sincronizador/Data, 08/08) - o título do grupo
   não navega sozinho, só expande/recolhe as folhas dentro dele. */
.admin-sidebar-grupo-titulo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-sidebar-grupo-titulo::after {
    content: "▸";
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.admin-sidebar-grupo-titulo.admin-sidebar-grupo-aberto::after {
    transform: rotate(90deg);
}

.admin-sidebar-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

.admin-sidebar-submenu.admin-sidebar-submenu-aberto {
    max-height: 200px;
}

.admin-sidebar-subitem {
    background: none;
    border: none;
    color: #98a1b5;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 10px 24px 10px 40px;
    cursor: pointer;
    width: 100%;
    white-space: nowrap;
}

.admin-sidebar-subitem:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.admin-sidebar-subitem.admin-sidebar-ativo {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.admin-pagina {
    flex: 1;
    min-width: 0;
    max-width: 1680px;
    padding: 24px;
}

.admin-pagina h2 {
    margin: 0 0 16px;
}

.admin-sem-acesso {
    text-align: center;
    padding: 48px 24px;
    color: #555;
}

.admin-sem-acesso[hidden] {
    display: none;
}

.admin-secao {
    margin-bottom: 40px;
}

/* Dashboard Início em 2 colunas (08/08, pedido do Ricardo com mockup
   próprio - "aproveita melhor os espaços da página"). Favoritos fica
   FORA dessa grade, de propósito (pedido explícito: "pode manter a
   listagem de favoritos no final da página", largura cheia). */
.admin-inicio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.admin-inicio-coluna .admin-secao:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .admin-inicio-grid {
        grid-template-columns: 1fr;
    }
}

.admin-checkbox-linha {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #52514e;
    margin-bottom: 8px;
    cursor: pointer;
}

.admin-secao h3 {
    margin: 0 0 16px;
}

.admin-secao h4 {
    margin: 24px 0 12px;
}

.admin-cards-estatistica {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.admin-card-estatistica {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e6ee;
    border-radius: 8px;
    padding: 12px 20px;
    min-width: 140px;
}

.admin-numero {
    font-size: 1.5rem;
    font-weight: 700;
    color: #16233f;
}

.admin-rotulo {
    font-size: 0.8rem;
    color: #666;
}

.admin-tabela-container {
    overflow-x: auto;
}

/* Controles acima da tabela de revisão FIPE (11/08) - botão de carregar
   + filtro de leiloeiro, lado a lado. */
.admin-fipe-candidatos-controles {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-fipe-candidatos-filtro {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #444;
}

.admin-fipe-candidatos-filtro select {
    padding: 6px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 4px;
    font-size: 0.9rem;
}

/* Miniatura clicável na fila de revisão FIPE (08/08) - abre a galeria
   completa (.modal-somente-galeria) sem sair da página. Aumentada em
   11/08 (pedido do Ricardo) pra ficar perto da altura da coluna de
   candidatos (6 opções + "nenhum serve"), em vez de minúscula. */
.admin-fipe-foto-miniatura {
    display: block;
    width: 250px;
    height: 188px;
    padding: 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: #e5e7eb;
}

.admin-fipe-foto-miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.admin-fipe-opcoes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 260px;
}

.admin-fipe-opcoes .botao-limpar {
    width: auto;
    font-size: 0.85rem;
    padding: 6px 10px;
    text-align: left;
}

/* Candidato FIPE: tecla (atalho 1-6) + texto + score, em uma linha
   (09/08, pedido do Ricardo pra agilizar a triagem). */
.admin-fipe-opcao {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-fipe-opcao-texto {
    flex: 1;
}

.admin-fipe-tecla {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #e5e7eb;
    color: #555;
    font-size: 0.7rem;
    font-weight: 600;
}

.admin-fipe-opcao-score {
    flex: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
}

/* Candidato de maior score - guia o olho direto pra opção mais
   provável, sem esconder as outras. */
.admin-fipe-opcao-melhor {
    border-color: #2f7d4f;
    background: #eaf6ee;
}

.admin-fipe-opcao-melhor .admin-fipe-tecla {
    background: #2f7d4f;
    color: #fff;
}

.admin-fipe-opcao-melhor .admin-fipe-opcao-score {
    color: #2f7d4f;
}

.admin-fipe-nenhum {
    color: #b91c1c;
    border-color: #f3c9c9;
    margin-top: 2px;
}

.admin-fipe-nenhum:hover {
    background: #fdf0f0;
}

.admin-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.admin-tabela th,
.admin-tabela td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid #e2e6ee;
    white-space: nowrap;
}

.admin-tabela th {
    color: #666;
    font-weight: 600;
}

/* Gráficos do dashboard Início (redesenho, 08/08) - SVG feito na mão,
   specs de traço/cor seguindo a skill de dataviz (barra ≤24px com
   ponta arredondada, linha 2px, área a ~10% de opacidade, texto nunca
   herda a cor da série). */
.admin-grafico {
    max-width: 600px;
    margin-top: 8px;
}

.admin-grafico-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Legenda dos gráficos de múltiplas séries (08/08) - identidade nunca
   fica só na cor, cada série também tem o nome escrito ao lado. */
.admin-grafico-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #52514e;
}

.admin-grafico-legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.admin-grafico-legenda-cor {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.admin-grafico-rotulo {
    font-size: 12px;
    fill: #52514e;
}

/* Linha do gráfico "Ativos por leiloeiro" (09/08): gráfico à esquerda,
   3 caixas de origem do FIPE à direita, lado a lado - encolhe pra
   coluna única se a coluna da aba Início ficar estreita demais. */
.admin-leiloeiro-grafico-linha {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.admin-leiloeiro-grafico-linha .admin-grafico {
    flex: 1 1 320px;
    min-width: 0;
}

.admin-origem-fipe-caixas {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 150px;
}

.admin-origem-fipe-titulo {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: #7a7a76;
    font-weight: 600;
}

/* Linha clicável do gráfico agrupado (09/08, "3 caixas" de origem do
   FIPE) - fundo transparente por padrão, destaca ao selecionar. Só
   ganha esse comportamento quando a opção `aoClicarGrupo` é passada
   (ver criarGraficoBarrasAgrupadas). */
.admin-grafico-grupo-clicavel {
    cursor: pointer;
}

.admin-grafico-grupo-fundo {
    fill: transparent;
}

.admin-grafico-grupo-clicavel:hover .admin-grafico-grupo-fundo {
    fill: #f5f6f9;
}

.admin-grafico-grupo-ativo .admin-grafico-grupo-fundo {
    fill: #eef2fb;
}

.admin-grafico-grupo-ativo .admin-grafico-rotulo {
    fill: #16233f;
    font-weight: 700;
}

.admin-grafico-rotulo-eixo {
    font-size: 11px;
    fill: #898781;
}

.admin-grafico-valor {
    font-size: 12px;
    font-weight: 600;
    fill: #0b0b0b;
}

.admin-grafico-eixo {
    stroke: #c3c2b7;
    stroke-width: 1;
}

.admin-grafico-linha {
    fill: none;
    stroke: #2a78d6;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.admin-grafico-area {
    fill: #2a78d6;
    opacity: 0.1;
    stroke: none;
}

.admin-grafico-ponto {
    fill: #2a78d6;
    stroke: #fff;
    stroke-width: 2;
}

.admin-sync-mini-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-sync-mini-item {
    display: grid;
    grid-template-columns: 1fr 100px 120px;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}

.admin-sync-mini-nome {
    font-weight: 600;
    color: #14213d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-sync-mini-data {
    color: #666;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.admin-fipe-barra-container {
    width: 100%;
    height: 10px;
    background: #e2e6ee;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 4px;
}

.admin-fipe-barra {
    height: 100%;
    width: 0%;
    background: #2f7d4f;
    transition: width 0.4s ease;
}

.admin-fipe-progresso-resumo {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: #666;
}

/* --- Sincronizador (painel admin, Fase B, 08/08) --- */

.admin-sync-botoes-gerais {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

/* Checkbox de seleção dos cards de "lotes mortos" (Fase D, 08/08) -
   sobreposto no canto do .card-imagem-container (já é position:relative,
   ver regra existente), com stopPropagation no JS pra não disparar o
   link do card ao marcar. */
.admin-lote-morto-checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    padding: 4px;
    display: flex;
}

.admin-lote-morto-checkbox input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Abas de tipo de veículo dentro de Data/Lotes (08/08, pedido do
   Ricardo: navegação idêntica à do catálogo público - Carros/Motos/
   Pesados, mais Diversos/Removidos aqui). Mesmo visual de .aba-veiculo/
   .aba-ativa (style.css:95-119), classe própria de propósito - aquela é
   reservada pro querySelectorAll(".aba-veiculo") de configurarAbasVeiculo
   (app.js), que esta página não carrega. */
.abas-lote-admin {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 16px;
}

.aba-lote-admin {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border: none;
    background: none;
    font-size: 0.95rem;
    color: #555;
    cursor: pointer;
    border-bottom: 3px solid transparent;
}

.aba-lote-admin:hover {
    color: #14213d;
}

.aba-lote-admin.aba-ativa {
    color: #14213d;
    font-weight: 600;
    border-bottom-color: #14213d;
}

.admin-sync-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.admin-sync-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid #e2e6ee;
    border-radius: 8px;
    padding: 14px 16px;
}

.admin-sync-card h4 {
    margin: 0;
    font-size: 0.95rem;
}

.admin-sync-status {
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e2e6ee;
    color: #444;
}

.admin-sync-status-executando {
    background: #fff3cd;
    color: #8a6500;
}

.admin-sync-status-concluido {
    background: #d4edda;
    color: #1e6b34;
}

.admin-sync-status-erro {
    background: #f8d7da;
    color: #92222c;
}

.admin-sync-status-interrompido {
    background: #e2e3e5;
    color: #555;
}

.admin-sync-detalhe {
    margin: 0;
    font-size: 0.8rem;
    color: #666;
}

/* Barra de progresso menor por card (08/08, pedido do Ricardo) -
   mesma cor/lógica da .admin-fipe-barra-container, só mais fina pra
   caber dentro de um card de 220px. */
.admin-sync-card-barra-container {
    width: 100%;
    height: 6px;
    background: #e2e6ee;
    border-radius: 4px;
    overflow: hidden;
}

.admin-sync-card-barra {
    height: 100%;
    width: 0%;
    background: #2f7d4f;
    transition: width 0.4s ease;
}

.admin-sync-card-botoes {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.admin-sync-card-botoes .botao-limpar {
    width: auto;
    font-size: 0.85rem;
    padding: 6px 12px;
}

/* Log de erro por lote (14/08, pedido do Ricardo) - botão discreto tipo
   link, lista escondida por padrão logo abaixo dele. */
.admin-sync-falhas-toggle {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    margin: -2px 0 0;
    font-size: 0.78rem;
    color: #2a78d6;
    cursor: pointer;
    text-decoration: underline;
}

.admin-sync-falhas-toggle:hover {
    color: #1c5a9c;
}

.admin-sync-falhas-log {
    margin: 0;
    padding: 6px 10px;
    list-style: none;
    background: #fdf3f3;
    border: 1px solid #f3d4d6;
    border-radius: 6px;
    max-height: 160px;
    overflow-y: auto;
    font-size: 0.75rem;
    color: #92222c;
}

.admin-sync-falhas-log li {
    padding: 3px 0;
    border-bottom: 1px solid #f3d4d6;
    word-break: break-word;
}

.admin-sync-falhas-log li:last-child {
    border-bottom: none;
}

/* --- Responsivo --- */

@media (max-width: 800px) {
    .layout {
        grid-template-columns: 1fr;
    }

    .admin-sidebar.admin-sidebar-aberta {
        width: 80vw;
        max-width: 260px;
    }

    .filtros {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        max-height: 82vh;
        border-radius: 16px 16px 0 0;
        z-index: 200;
        transform: translateY(110%);
        transition: transform 0.25s ease;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
    }

    .filtros.filtros-aberta {
        transform: translateY(0);
    }

    .filtros-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 150;
    }

    .filtros-mobile-abrir {
        display: block;
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: 16px;
        z-index: 140;
        background: #14213d;
        color: #fff;
        border: none;
        border-radius: 999px;
        padding: 14px;
        font-size: 0.95rem;
        font-weight: 600;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }

    .filtros-mobile-cabecalho {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        background: #fff;
        padding: 14px 16px;
        margin: -16px -16px 12px;
        border-bottom: 1px solid #e5e7eb;
        font-size: 1rem;
    }

    .filtros-mobile-fechar {
        border: none;
        background: #f2f3f5;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 1.2rem;
        line-height: 1;
        cursor: pointer;
    }

    .filtros-mobile-aplicar {
        display: block;
        width: calc(100% + 32px);
        margin: 16px -16px -16px;
        padding: 14px;
        border: none;
        background: #14213d;
        color: #fff;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        position: sticky;
        bottom: 0;
    }

    .modal {
        grid-template-columns: 1fr;
    }

    .rodape-conteudo {
        flex-direction: column;
        gap: 24px;
    }

    .rodape-marca {
        max-width: none;
    }

    .rodape-links {
        border-left: none;
        padding-left: 0;
        grid-template-columns: repeat(2, 1fr);
    }

    .rodape {
        padding: 32px 16px 16px;
    }
}