/* ============================================================
   Leilão do Bem — Hospital de Amor de Barretos
   Paleta oficial derivada do logotipo e do site hospitaldeamor.com.br
   (ver .claude/skills/padrao-layout-leilao)
   ============================================================ */

:root {
    --cor-primaria:        #2364c2; /* azul do logotipo */
    --cor-primaria-escura: #114591; /* azul escuro */
    --cor-azul-noite:      #0a1f42; /* azul-noite: base da topbar/hero editorial */
    --cor-azul-noite-2:    #0d2b57;
    --cor-menu-lateral:    #2b3648; /* ardósia escura do menu lateral (ref. dashboard) */
    --cor-acento:          #e31661; /* rosa CTA */
    --cor-acento-escura:   #c11152; /* rosa hover */
    --cor-texto:           #505050;
    --cor-suave:           #6f7780;
    --cor-borda:           #dfe4ea;
    --cor-fundo:           #f3f6f9;
    --cor-card:            #ffffff;
    --cor-campo:           #eef4fb; /* fundo azul-claro dos campos preenchíveis (nunca branco) */
    --cor-campo-foco:      #ffffff; /* campo em foco fica branco (contraste ao digitar) */
    --radius:              12px;
    --sombra:              0 6px 24px rgba(17, 69, 145, 0.10);
    --sombra-forte:        0 24px 60px rgba(10, 31, 66, 0.28);
    /* Gradientes da marca (azul institucional -> rosa da causa) */
    --grad-marca:          linear-gradient(90deg, var(--cor-primaria) 0%, var(--cor-acento) 100%);
    --grad-noite:          linear-gradient(150deg, var(--cor-azul-noite) 0%, var(--cor-primaria-escura) 100%);
    --altura-topbar:       60px; /* altura aproximada do cabeçalho fixo */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: "Rethink Sans", "Open Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-size: 16px;
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--cor-primaria); text-decoration: none; }
a:hover { color: var(--cor-primaria-escura); text-decoration: underline; }

h1, h2, h3 { color: var(--cor-primaria-escura); line-height: 1.25; }

/* ------------------------------------------------------------ Topbar */

.topbar {
    background: var(--grad-noite);
    color: #fff;
    box-shadow: var(--sombra);
    position: relative;
}
/* Fio rosa da marca sob o cabeçalho (detalhe-título do site oficial) */
.topbar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--grad-marca);
}

/* Nas páginas com menu lateral (evento/administração), o cabeçalho fica fixo
   no topo para que o menu lateral possa "colar" logo abaixo dele ao rolar. */
.topbar-fixo {
    position: sticky;
    top: 0;
    z-index: 100;
}
/* Nessas páginas o cabeçalho ocupa toda a largura (não centralizado), para o
   logotipo/título e o botão do menu ficarem colados à esquerda, alinhados com
   o menu lateral. */
.topbar-fixo .topbar-inner { max-width: none; }

.topbar-inner {
    max-width: 1024px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.marca {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}
.marca:hover { color: #fff; text-decoration: none; }

.marca-logo {
    background: #fff;
    border-radius: 10px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
}
.marca-logo img { height: 34px; display: block; }

.marca-texto strong { display: block; font-size: 1.05rem; color: #fff; }
.marca-texto small  { display: block; font-size: 0.75rem; color: #cfe0f7; }
/* Coração da marca (rosa) ao lado do nome, como no logotipo */
.marca-coracao { color: var(--cor-acento); font-size: 0.95em; }

/* Navegação primária (logado): pílulas rotuladas — "Minha área",
   "Administração". Dá ao painel uma porta de entrada SEMPRE visível, sem
   depender do clique no logotipo. */
.topnav-primaria {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}
.topnav-primaria a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #cfe0f7;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.topnav-primaria a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    text-decoration: none;
}
.topnav-primaria a.ativo {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.24);
}
.topnav-primaria a svg { width: 16px; height: 16px; }

/* Bloco de ações à direita do cabeçalho (empurrado para o canto). */
.topbar-acoes {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Link translúcido "Ver site" — devolve o site público ao usuário logado. */
.link-ver-site {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #cfe0f7;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    white-space: nowrap;
}
.link-ver-site:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    text-decoration: none;
}

.topnav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.topnav a { color: #dbe7fa; font-weight: 600; font-size: 0.95rem; }
.topnav a:hover { color: #fff; text-decoration: none; }

/* Botão do usuário (menu da direita): avatar redondo com as iniciais +
   nome de usuário. No celular o nome some e fica só o avatar (media query). */
.btn-usuario {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 14px 5px 5px;
}
.usuario-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: var(--cor-primaria-escura);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
}
.usuario-avatar { overflow: hidden; }
/* Quando o usuário tem foto, ela preenche o círculo do avatar (no lugar das iniciais). */
.usuario-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.usuario-nome { white-space: nowrap; }

/* O seletor .topbar .btn-sair é mais específico que a regra .btn (definida
   mais abaixo); sem ele, o botão do topo ficava branco com texto branco. */
.topbar .btn-sair {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
}
.topbar .btn-sair:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    text-decoration: none;
}

/* ------------------------------------------------------------ PWA: instalar */

/* Atalho "Instalar app" no cabeçalho. Fica oculto até o navegador indicar
   que o portal é instalável (ver assets/js/pwa-install.js). */
.pwa-oculto { display: none !important; }

.topbar .btn-instalar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--cor-acento) !important;
    border: 1px solid var(--cor-acento) !important;
    color: #fff !important;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    white-space: nowrap;
}
.topbar .btn-instalar:hover {
    background: var(--cor-acento-escura) !important;
    border-color: var(--cor-acento-escura) !important;
    text-decoration: none;
}
.pwa-icone { font-size: 1.05rem; }

/* Janela de instruções de instalação no iPhone/iPad */
.pwa-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(17, 69, 145, 0.45);
    padding: 20px;
    align-items: center;
    justify-content: center;
}
.pwa-modal.aberto { display: flex; }

.pwa-modal-caixa {
    background: var(--cor-card);
    border-radius: 14px;
    max-width: 380px;
    width: 100%;
    padding: 24px 22px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.pwa-modal-caixa h2 { margin-top: 0; }
.pwa-modal-caixa ol { padding-left: 20px; line-height: 1.6; }
.pwa-modal-caixa li { margin-bottom: 6px; }

.pwa-modal-fechar {
    position: absolute;
    top: 8px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--cor-fundo);
    font-size: 1.7rem;
    line-height: 1;
    color: var(--cor-primaria-escura);
    cursor: pointer;
}
.pwa-modal-fechar:hover {
    background: var(--cor-primaria-escura);
    color: #fff;
}

/* Em telas bem estreitas, mostra só o ícone para não competir com o menu */
@media (max-width: 400px) {
    .topbar .btn-instalar .pwa-texto { display: none; }
    .topbar .btn-instalar { padding: 8px 11px; }
}

/* Menu do usuário logado (clique no nome de usuário) */
.menu-usuario { position: relative; display: inline-block; }

.menu-usuario-lista {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 230px;
    background: var(--cor-card);
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    border: 1px solid var(--cor-borda);
    z-index: 50;
    overflow: hidden;
}
.menu-usuario-lista.aberto { display: block; }

.menu-usuario-nome {
    padding: 12px 16px;
    font-weight: 700;
    color: var(--cor-primaria-escura);
    border-bottom: 1px solid var(--cor-borda);
    white-space: normal;
}
.menu-usuario-nome small {
    display: block;
    font-weight: 400;
    color: var(--cor-suave);
    font-size: 0.8rem;
    margin-top: 2px;
    word-break: break-all;
}

.menu-usuario-lista a {
    display: block;
    padding: 10px 16px;
    color: var(--cor-texto);
    font-weight: 600;
    font-size: 0.92rem;
}
.menu-usuario-lista a:hover {
    background: var(--cor-fundo);
    color: var(--cor-primaria-escura);
    text-decoration: none;
}

/* ------------------------------------------ Foto de perfil (perfil.php) */

.perfil-avatar-atual {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 4px 0 22px;
}
.perfil-avatar-preview {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--cor-primaria-escura);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
    box-shadow: var(--sombra);
}
.perfil-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.perfil-avatar-iniciais {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.perfil-avatar-info strong {
    display: block;
    color: var(--cor-primaria-escura);
    font-size: 1.05rem;
}
.perfil-avatar-info small { color: var(--cor-suave); }

.perfil-remover { margin-top: 14px; }
.btn-remover-foto { color: var(--cor-acento-escura); }
.btn-remover-foto:hover { color: var(--cor-acento); }

/* ------------------------------------------------------------ Estrutura */

.conteudo {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 28px 16px;
    flex: 1;
}

.rodape {
    text-align: center;
    color: var(--cor-suave);
    font-size: 0.85rem;
    padding: 18px 16px 26px;
}

/* ------------------------------------------------------------ Telas públicas (login) */

.tela-centralizada {
    justify-content: center;
    align-items: center;
    padding: 24px 16px;
}

.tela-login {
    background: linear-gradient(135deg, #2364c2 0%, #114591 100%);
}

.card {
    background: var(--cor-card);
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    padding: 28px;
    width: 100%;
    max-width: 420px;
}

.card-largo { max-width: 720px; }
.card-form  { max-width: 560px; }

.login-marca { text-align: center; margin-bottom: 18px; }
.login-logo  { height: 90px; margin-bottom: 10px; }

.login-marca h1 {
    font-size: 1.5rem;
    color: var(--cor-primaria-escura);
}
.login-marca h1::after {
    content: "";
    display: block;
    width: 46px;
    height: 5px;
    border-radius: 3px;
    background: var(--grad-marca);
    margin: 8px auto 0;
}

.subtitulo { color: var(--cor-suave); font-size: 0.92rem; margin-top: 8px; }

.login-links { text-align: center; margin-top: 16px; font-size: 0.95rem; }

/* ------------------------------------------------- Página inicial pública */

.colunas-inicio {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.coluna-principal { flex: 2 1 480px; min-width: 0; }
.coluna-lateral   { flex: 1 1 280px; }

.card-acesso { max-width: none; }
.card-acesso h2 { font-size: 1.15rem; }
.card-acesso h2::after {
    content: "";
    display: block;
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: var(--grad-marca);
    margin-top: 8px;
}

/* ---------------------------------- Migalha de pão (você está em: ...) */

.migalha {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--cor-suave);
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.migalha a { color: var(--cor-suave); font-weight: 600; }
.migalha a:hover { color: var(--cor-primaria-escura); }
.migalha b { color: var(--cor-acento-escura); font-weight: 700; }
.migalha .sep { color: var(--cor-borda); }

/* ------------------------------------- Hero editorial da home pública */

.inicio-hero {
    position: relative;
    overflow: hidden;
    background: var(--grad-noite);
    border-radius: var(--radius);
    box-shadow: var(--sombra-forte);
    padding: 42px 34px;
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 30px;
    align-items: center;
}
/* Logado (sem o card de acesso): o texto ocupa a largura toda */
.inicio-hero.inicio-hero-sozinho { grid-template-columns: 1fr; }

/* Brilho rosa da causa no canto (mesma assinatura do topo) */
.inicio-hero::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(227, 22, 97, 0.32) 0%, rgba(227, 22, 97, 0) 66%);
    pointer-events: none;
}

.inicio-hero-texto { position: relative; z-index: 1; }
.inicio-eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ff86b0;
    margin-bottom: 12px;
}
.inicio-hero h1 {
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.12;
    max-width: 18ch;
}
.inicio-hero h1::after {
    content: "";
    display: block;
    width: 58px;
    height: 5px;
    border-radius: 3px;
    background: var(--grad-marca);
    margin-top: 16px;
}
.inicio-lead {
    color: #d7e3f6;
    margin-top: 18px;
    font-size: 1.05rem;
    max-width: 52ch;
}
.inicio-hero-acoes { margin-top: 24px; }

/* Card de acesso dentro do hero (visitante) */
.inicio-acesso {
    position: relative;
    z-index: 1;
    max-width: none;
    margin: 0;
}

/* --------------------------------- Acessos do evento: inclusão em lote */

.filtros-acesso {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.filtros-acesso > div { flex: 1 1 200px; }

.lista-usuarios {
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
}

.usuario-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    margin: 0;
    border-bottom: 1px solid var(--cor-borda);
    font-weight: 400;
    color: var(--cor-texto);
    cursor: pointer;
}
.usuario-item:last-of-type { border-bottom: none; }
.usuario-item:hover { background: var(--cor-fundo); }
.usuario-item input { width: auto; flex: none; }

.usuario-info strong { display: block; font-size: 0.95rem; color: var(--cor-primaria-escura); }
.usuario-info small  { display: block; color: var(--cor-suave); font-size: 0.8rem; }

/* Usuário pré-selecionado ao voltar da criação (cadastro já existente) */
.usuario-item-destaque { background: var(--cor-campo); }

/* Lista de cadastros já existentes no aviso do formulário "Criar novo usuário"
   (Gestão de Acesso da diretoria): cada linha oferece um botão "Selecionar". */
.existente-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.existente-item small { color: var(--cor-suave); }

.selecao-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.selecao-acoes .ajuda { margin-top: 0; }

/* ------------------------------------------------------------ Hero e atalhos */

.hero {
    background: var(--cor-card);
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    padding: 28px;
    margin-bottom: 22px;
}

.hero h1 { font-size: 1.6rem; }
.hero h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 5px;
    border-radius: 3px;
    background: var(--grad-marca);
    margin-top: 10px;
}
.hero p { margin-top: 12px; max-width: 62ch; }

.cards-atalho {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.atalho {
    background: var(--cor-card);
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    padding: 20px;
    flex: 1 1 240px;
}
.atalho h2 { font-size: 1.1rem; margin-bottom: 8px; }
.atalho p  { color: var(--cor-suave); font-size: 0.95rem; margin-bottom: 12px; }

/* Card de cidade clicável (agrupa os eventos da cidade; abre o modal) */
.secao-eventos { margin-bottom: 24px; }

.titulo-secao {
    font-size: 1.15rem;
    color: var(--cor-primaria-escura);
    margin: 18px 0 12px;
}

button.atalho-cidade {
    font-family: inherit;
    font-size: inherit;
    text-align: left;
    border: 1px solid transparent;
    cursor: pointer;
}
button.atalho-cidade:hover,
button.atalho-cidade:focus {
    border-color: var(--cor-primaria);
    outline: none;
    box-shadow: 0 0 0 3px rgba(35, 100, 194, 0.18);
}
.atalho-cidade h2 {
    color: var(--cor-primaria-escura);
    display: flex;
    align-items: center;
    gap: 8px;
}
.atalho-cidade .cidade-nome { flex: 1 1 auto; }

/* Card da CIDADE TESTE: fixado no topo da lista, com destaque âmbar tracejado
   deixando claro que é um ambiente de teste (resultados fora dos totais). */
button.atalho-cidade-teste {
    background: #fffaf0;
    border: 2px dashed #d8a625;
}
button.atalho-cidade-teste h2 { color: #8a6100; }
button.atalho-cidade-teste:hover,
button.atalho-cidade-teste:focus {
    border-color: #b98b12;
    box-shadow: 0 0 0 3px rgba(216, 166, 37, 0.22);
}
.tag-teste { background: #fef7e6; color: #8a6100; border: 1px dashed #d8a625; }

/* Balão vermelho com a quantidade de eventos que o usuário vê naquela cidade */
.balao-contagem {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #d92d20;                 /* vermelho */
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(217, 45, 32, 0.35);
}

/* Campo de filtro por cidade (filtragem em tela) */
.filtro-cidade { margin-bottom: 16px; max-width: 360px; }
.filtro-cidade label { margin-top: 0; }
.filtro-cidade input[type="text"] { margin: 0; }

.filtro-sem-resultado { margin-top: 12px; }

/* ---------------------------------------------- Painel "Minha área" (novo) */

/* Saudação enxuta: mantém o hero, só reduz a folga vertical e apoia o subtítulo */
.hero-compacto { padding-top: 18px; padding-bottom: 18px; }
.hero-compacto p { margin-top: 8px; color: var(--cor-suave); max-width: none; }

/* Cabeçalho da seção + filtro na mesma linha (aproveita a largura) */
.secao-eventos-topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.secao-eventos-topo .titulo-secao { margin: 0; }
.secao-eventos-topo .filtro-cidade { margin: 0; width: 320px; max-width: 100%; }

/* Próximos eventos: lista compacta, um evento por linha */
.proximos-lista {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.proximos-item {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 18px;
    font-size: 0.95rem;
}
.proximos-item + .proximos-item { border-top: 1px solid var(--cor-borda); }
.proximos-data { white-space: nowrap; }
.proximos-nome { color: var(--cor-primaria-escura); font-weight: 600; }
.proximos-local { color: var(--cor-suave); font-size: 0.92rem; margin-left: auto; white-space: nowrap; }

/* Grade de cidades: cards compactos de uma linha, grade mais densa */
.grade-cidades {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 4px;
}
.grade-cidades .atalho-cidade { padding: 10px 14px; }
.grade-cidades .atalho-cidade h2 {
    margin: 0;
    font-size: 1rem;
}
.grade-cidades .atalho-cidade .cidade-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ Modal */

.modal-fundo {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(17, 69, 145, 0.55); /* azul escuro translúcido da marca */
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal-fundo.aberto { display: flex; }

.modal-caixa {
    background: var(--cor-card);
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    padding: 22px;
    width: 100%;
    max-width: 560px;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* Cola o cabeçalho no topo enquanto o conteúdo do modal rola, mantendo o
       botão fechar sempre visível. As margens negativas cobrem o padding da
       caixa para o fundo branco esconder o conteúdo que passa por baixo. */
    position: sticky;
    top: -22px;
    z-index: 1;
    margin: -22px -22px 6px;
    padding: 22px 22px 10px;
    background: var(--cor-card);
    border-bottom: 1px solid var(--cor-borda);
}
.modal-cabecalho h2 { font-size: 1.2rem; color: var(--cor-primaria-escura); }

/* Dentro do cabeçalho flex, o botão fechar não precisa (e não deve) escapar
   com position:absolute — o flex já o alinha à direita. Sem isto ele se
   posiciona relativo ao .modal-fundo e vai parar no canto da tela. */
.modal-cabecalho .pwa-modal-fechar {
    position: static;
    flex: 0 0 auto;
}

.evento-item {
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 10px;
}
.evento-item h3 { font-size: 1.02rem; margin-bottom: 4px; }
/* Evento de teste dentro do modal de eventos da cidade */
.evento-item.evento-item-teste { background: #fffaf0; border: 1px dashed #d8a625; }
.evento-periodo { color: var(--cor-suave); font-size: 0.9rem; margin-bottom: 6px; }
.evento-perfis .tag { margin: 2px 4px 2px 0; }

/* ------------------------------------------------------------ Formulários */

label {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    margin: 14px 0 5px;
    color: var(--cor-primaria-escura);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--cor-texto);
    /* Campos preenchíveis nunca são brancos: recebem um azul-claro sutil que
       sinaliza "aqui se digita" sem competir com o conteúdo (ver skill
       padrao-layout-leilao). */
    background: var(--cor-campo);
}

textarea { resize: vertical; min-height: 48px; }

/* Seletor de cor: swatch de largura total, mesma altura dos demais campos, para
   não ficar "solto" na grade (ex.: cor do tipo de pulseira na Portaria). */
input[type="color"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 43px;
    padding: 4px;
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    background: var(--cor-campo);
    cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 5px; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(35, 100, 194, 0.18);
    /* Ao focar, o campo clareia para branco: melhora o contraste do texto
       digitado e confirma qual campo está ativo. */
    background: var(--cor-campo-foco);
}

.linha-dupla {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.linha-dupla > div { flex: 1 1 200px; }

.campo-com-botao { display: flex; gap: 8px; }
.campo-com-botao input { flex: 1; }

/* Formulário em grade larga — aproveita telas amplas distribuindo os campos
   em várias colunas (base de 12). Recolhe para 2 colunas em tablets e 1 em
   celulares. Cada campo vai em <div class="campo gc-N"> com N = nº de colunas. */
.card-form-completo { max-width: none; }

.form-grade {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px 20px;
    align-items: start;
}
.form-grade .campo { min-width: 0; }
.form-grade .campo > label:first-child { margin-top: 10px; }

.gc-2  { grid-column: span 2; }
.gc-3  { grid-column: span 3; }
.gc-4  { grid-column: span 4; }
.gc-5  { grid-column: span 5; }
.gc-6  { grid-column: span 6; }
.gc-7  { grid-column: span 7; }
.gc-8  { grid-column: span 8; }
.gc-12 { grid-column: span 12; }

/* Tablets e telas médias: duas colunas (campos largos ocupam a linha toda) */
@media (max-width: 900px) {
    .gc-2, .gc-3, .gc-4, .gc-5, .gc-6 { grid-column: span 6; }
    .gc-7, .gc-8 { grid-column: span 12; }
}
/* Celulares: uma coluna (acompanha o recolhimento do restante da página) */
@media (max-width: 640px) {
    .form-grade > * { grid-column: span 12; }
}

/* Par de campos que devem ficar SEMPRE lado a lado (ex.: Retirada/Redoado,
   Quantidade/Valor sugerido) — mantêm as duas colunas mesmo no celular, quando
   o restante da grade recolhe para uma coluna. */
.par-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 14px;
    align-items: start;
}
.par-campos > .campo { min-width: 0; }

/* Combobox pesquisável de cidade (lista filtrável do IBGE) */
.combo-cidade { position: relative; }
.combo-lista {
    display: none;
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 2px;
    max-height: 240px;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    box-shadow: var(--sombra);
}
.combo-item {
    padding: 9px 12px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--cor-texto);
}
.combo-item:hover,
.combo-item.ativo {
    background: var(--cor-fundo);
    color: var(--cor-primaria-escura);
}

/* Campos que devem aparecer sempre em CAIXA ALTA */
.entrada-maiuscula { text-transform: uppercase; }
.entrada-minuscula { text-transform: lowercase; }

fieldset.bloco-senha {
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 4px 16px 16px;
    margin-top: 18px;
}
fieldset.bloco-senha legend {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--cor-primaria-escura);
    padding: 0 6px;
}

label.checkbox {
    font-weight: 400;
    color: var(--cor-texto);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}
label.checkbox input { width: auto; }

.form-acoes {
    margin-top: 22px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.ajuda { color: var(--cor-suave); font-size: 0.85rem; margin-top: 8px; }

/* -------- Rótulo com botão de ajuda "?" ao lado --------
   Padrão do site: no lugar de um texto de ajuda fixo, o rótulo ganha um botão
   "?" (.ajuda-toggle) que abre/fecha uma caixa explicativa (.ajuda-caixa).
   Ver assets/js/ajuda_campo.js. */
.rotulo-linha {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 14px 0 5px;
    flex-wrap: wrap;
}
.rotulo-linha label { margin: 0; }
/* Dentro da grade de formulário o rótulo abre com folga menor (igual ao label). */
.form-grade .campo > .rotulo-linha:first-child { margin-top: 10px; }

.ajuda-toggle {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--cor-borda);
    background: var(--cor-campo);
    color: var(--cor-primaria);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ajuda-toggle:hover,
.ajuda-toggle[aria-expanded="true"] {
    background: var(--cor-primaria);
    color: #fff;
    border-color: var(--cor-primaria);
}
.ajuda-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(35, 100, 194, 0.25);
}

.ajuda-caixa {
    margin: 2px 0 4px;
    padding: 9px 12px;
    background: #e9f1fc;
    border: 1px solid #c6dbf5;
    border-radius: 8px;
    color: #114591;
    font-size: 0.85rem;
    line-height: 1.5;
}
.ajuda-caixa a { color: var(--cor-primaria-escura); font-weight: 700; }
.ajuda-caixa[hidden] { display: none; }

/* Botão de exibir/ocultar senha (assets/js/senha_toggle.js) */
.senha-wrap { position: relative; display: block; }
.senha-toggle:hover { color: var(--cor-primaria) !important; }
.senha-toggle:focus { outline: none; }

/* ------------------------------------------------------------ Botões */

.btn {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    background: #fff;
    color: var(--cor-primaria-escura);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
}
.btn:hover { background: var(--cor-fundo); text-decoration: none; }
.btn:disabled,
.btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(35%);
}
/* Desabilitado não muda de cor no hover (mantém a aparência do próprio botão). */
.btn-primario:disabled:hover,
.btn-primario[disabled]:hover { background: var(--cor-acento); border-color: var(--cor-acento); }

.btn-primario {
    background: var(--cor-acento);
    border-color: var(--cor-acento);
    color: #fff;
}
.btn-primario:hover {
    background: var(--cor-acento-escura);
    border-color: var(--cor-acento-escura);
    color: #fff;
}

.btn-link {
    border-color: transparent;
    background: transparent;
    color: var(--cor-primaria);
}
.btn-link:hover { background: transparent; text-decoration: underline; }

.btn-mini { padding: 5px 10px; font-size: 0.82rem; }

/* Botões de ação por ícone (usados nas listagens). Cores próprias por função:
   editar = azul institucional, excluir = vermelho de perigo. */
.btn-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid transparent;
}
.btn-icone svg { width: 17px; height: 17px; }

.btn-editar { background: #e9f1fc; color: #114591; border-color: #c6dbf5; }
.btn-editar:hover { background: #114591; color: #fff; border-color: #114591; }

.btn-excluir { background: #fdecec; color: #a52834; border-color: #f5c6cb; }
.btn-excluir:hover { background: #a52834; color: #fff; border-color: #a52834; }

.btn-bloco { display: block; width: 100%; margin-top: 20px; }

/* ------------------------------------------------------------ Alertas e tags */

.alert {
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 0.95rem;
    border: 1px solid transparent;
}
.alert-sucesso { background: #e8f6ec; color: #1d6f3c; border-color: #bfe5cb; }
.alert-erro    { background: #fdecec; color: #a52834; border-color: #f5c6cb; }
.alert-aviso   { background: #fef7e6; color: #8a6100; border-color: #f2e0a8; }
.alert-info    { background: #e9f1fc; color: #114591; border-color: #c6dbf5; }

.tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--cor-fundo);
    color: var(--cor-suave);
}
.tag-admin    { background: #e9f1fc; color: #114591; }
.tag-pendente { background: #fef7e6; color: #8a6100; }
.tag-inativo  { background: #fdecec; color: #a52834; }
.tag-ativo    { background: #e8f6ec; color: #1d6f3c; }

/* ------------------------------------------------------------ Listagens */

.pagina-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.pagina-cabecalho h1 { font-size: 1.4rem; }

.barra-busca {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.barra-busca input { flex: 1 1 220px; }
.barra-busca select,
.barra-busca input[type="date"] { flex: 0 1 auto; width: auto; }

/* Barra de ação em massa acima de uma listagem (ex.: normalizar tipos). */
.barra-acoes-tabela {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.barra-acoes-tabela p { flex: 1 1 320px; }
.barra-acoes-tabela form { flex: 0 0 auto; }

.tabela-wrap {
    background: var(--cor-card);
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    overflow-x: auto;
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}
.tabela th, .tabela td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--cor-borda);
    vertical-align: middle;
    white-space: nowrap;
}
.tabela th {
    color: var(--cor-primaria-escura);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #f7fafd;
}
.tabela tr:last-child td { border-bottom: none; }
.tabela td.quebra { white-space: normal; }

.acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.acoes form { display: inline; }

/* ----------------------------------------- Listagem de compradores (resumida) */

.tabela-compradores .col-acoes { width: 1%; white-space: nowrap; }
.tabela-compradores .col-acoes .acoes { flex-wrap: nowrap; }
.tabela-compradores .col-codigo { white-space: nowrap; }

.linha-comprador { cursor: pointer; transition: background 0.12s ease; }
.linha-comprador:hover,
.linha-comprador:focus { background: #f7fafd; outline: none; }
.linha-comprador:focus-visible { box-shadow: inset 0 0 0 2px var(--cor-primaria); }

.linha-comprador .codigo-valor { font-weight: 700; color: var(--cor-primaria-escura); }

.comprador-detalhe {
    display: grid;
    /* min(200px, 100%): em telas estreitas a trilha encolhe até caber, evitando
       que o grid exija duas colunas de 200px e estoure a largura do celular. */
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 10px 22px;
    margin: 0;
    padding: 14px 16px;
}
.comprador-detalhe dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cor-suave);
    font-weight: 700;
    margin-bottom: 2px;
}
.comprador-detalhe dd { margin: 0; color: var(--cor-texto); }

/* Dentro do modal a caixa já tem padding próprio; zera o do dl para não duplicar. */
.modal-caixa .comprador-detalhe { padding: 4px 0 0; }

/* ------------------------------------------------ Detalhes/painel do evento */

/* Evento clicável no modal da cidade (leva ao painel de operações) */
.evento-item-link {
    display: block;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.evento-item-link:hover,
.evento-item-link:focus {
    color: inherit;
    text-decoration: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 8px 22px rgba(17, 69, 145, 0.14);
    transform: translateY(-2px);
    outline: none;
}
.evento-item-abrir {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cor-acento);
}

/* Estrutura: menu lateral de operações + painel central */
.evento-shell {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Menu lateral (ardósia escura = estrutura/navegação, inspirado no dashboard) */
.evento-menu {
    flex: 0 0 236px;
    background: var(--cor-menu-lateral);
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    overflow: hidden;
    position: sticky;
    top: 16px;
    transition: flex-basis 0.18s ease;
}

/* O controle de recolher/expandir passou para o botão do cabeçalho (ao lado do
   logotipo). A barra de topo interna do menu (rótulo + hambúrguer) fica oculta
   para o menu começar direto nos itens, como no dashboard de referência.
   (seletor mais específico para vencer a definição base de .evento-menu-topo) */
.evento-menu .evento-menu-topo { display: none; }
.evento-menu-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.evento-menu-rotulo {
    color: #cfe0f7;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
}

/* Botão hambúrguer de recolher/expandir — mesmo estilo do botão do cabeçalho */
.evento-menu-toggle {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 34px;
    padding: 0 9px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    cursor: pointer;
}
.evento-menu-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.evento-menu-toggle:hover,
.evento-menu-toggle:focus {
    background: rgba(255, 255, 255, 0.26);
    outline: none;
}
/* Expandido = vira "X" (igual ao cabeçalho); recolhido = três traços */
.evento-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.evento-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.evento-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------- Estado RECOLHIDO: só ícones (economiza espaço, ideal no celular).
   No DESKTOP o padrão é expandido; recolhe quando o usuário força (.forcar-recolhido).
   No CELULAR o padrão é recolhido — isso é definido por media query mais abaixo,
   SEM depender de JavaScript (à prova de falhas de cache/timing). */
.evento-shell.forcar-recolhido .evento-menu { flex-basis: 60px; }
.evento-shell.forcar-recolhido .evento-menu-rotulo,
.evento-shell.forcar-recolhido .evento-menu-texto { display: none; }
.evento-shell.forcar-recolhido .evento-menu-topo {
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
}
.evento-shell.forcar-recolhido .evento-menu-item {
    justify-content: center;
    gap: 0;
    padding: 8px;
}
/* Menu recolhido (só ícones): o balão vira um badge no canto do ícone */
.evento-shell.forcar-recolhido .evento-menu-contador {
    position: absolute;
    top: 2px;
    right: 6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.6rem;
}
.evento-menu-lista { display: flex; flex-direction: column; padding: 10px 8px; gap: 10px; }

/* Link "‹ Minha área": porta de saída no topo do menu lateral (evento e
   administração) de volta ao painel — encerra o "beco sem saída" em que o
   usuário ficava preso dentro de um evento. */
.evento-menu-voltar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #cfe0f7;
    font-size: 0.9rem;
    font-weight: 700;
    border: 1px dashed rgba(255, 255, 255, 0.24);
}
.evento-menu-voltar:hover,
.evento-menu-voltar:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    outline: none;
}
.evento-menu-voltar .voltar-seta { color: var(--cor-acento); font-size: 1.1rem; line-height: 1; }
.evento-menu-voltar .evento-menu-icone svg { width: 18px; height: 18px; }
/* Separador de seção do menu (rótulo pequeno) */
.evento-menu-secao {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8ba6cc;
    padding: 8px 12px 2px;
}
/* Recolhido (só ícones): esconde o texto do voltar e do separador */
.evento-shell.forcar-recolhido .evento-menu-voltar { justify-content: center; gap: 0; }
.evento-shell.forcar-recolhido .evento-menu-voltar .voltar-texto,
.evento-shell.forcar-recolhido .evento-menu-secao { display: none; }

.evento-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px;
    border-radius: 8px;
    color: #dbe7fa;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
}
/* Ícone monocromático (SVG inline, ver includes/icones.php): herda a cor do
   texto do item via currentColor */
.evento-menu-icone { display: inline-flex; flex: 0 0 auto; }
.evento-menu-icone svg { width: 18px; height: 18px; display: block; }
.evento-menu-texto { flex: 1 1 auto; }

.evento-menu-item.ativo {
    background: var(--cor-primaria);
    color: #fff;
}
.evento-menu-item.indisponivel { color: #9fbce6; cursor: not-allowed; }

/* Itens que são links (menu da administração): preservam o visual do item
   sobre o fundo azul-marinho, sem o azul/sublinhado padrão dos links */
a.evento-menu-item:hover,
a.evento-menu-item:focus {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
    outline: none;
}
a.evento-menu-item.ativo:hover,
a.evento-menu-item.ativo:focus { background: var(--cor-primaria); }

/* Grupo tipo árvore no menu lateral (ex.: "Diretoria"): disclosure nativo
   (<details>/<summary>) — abre/fecha sem depender de JavaScript. */
.evento-menu-grupo { display: block; }
.evento-menu-grupo > summary {
    list-style: none;         /* remove o triângulo padrão do <summary> */
    cursor: pointer;
}
.evento-menu-grupo > summary::-webkit-details-marker { display: none; }
.evento-menu-grupo-titulo .evento-menu-seta {
    flex: 0 0 auto;
    color: #8ba6cc;
    font-size: 1.15rem;
    line-height: 1;
    transition: transform 0.15s ease;
}
.evento-menu-grupo[open] > .evento-menu-grupo-titulo .evento-menu-seta { transform: rotate(90deg); }
/* Subárvore: itens recuados com uma guia vertical à esquerda */
.evento-menu-sub {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px 0 2px 18px;
    padding-left: 12px;
    border-left: 2px solid rgba(255, 255, 255, 0.12);
}
.evento-menu-subitem { font-size: 0.98rem; }
/* Recolhido (só ícones): esconde a seta e desfaz o recuo da subárvore */
.evento-shell.forcar-recolhido .evento-menu-grupo-titulo .evento-menu-seta { display: none; }
.evento-shell.forcar-recolhido .evento-menu-sub {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}

/* Balão vermelho — contador de registros da etapa (em frente ao item) */
.evento-menu-contador {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e02424;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

/* Fundo escuro do menu de operações no celular (drawer). No desktop nunca
   aparece; no celular só quando o menu está aberto (atributo hidden removido
   pelo JS). */
.evento-menu-backdrop {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 110; /* sob o drawer (120), sobre cabeçalho e conteúdo */
    background: rgba(15, 32, 60, 0.5);
}
.evento-menu-backdrop[hidden] { display: none; }
@media (min-width: 761px) {
    .evento-menu-backdrop { display: none !important; }
}

/* Botão do menu de operações do evento — fica à ESQUERDA do logotipo, no
   cabeçalho. Presente no desktop E no celular: expande/recolhe o menu lateral
   (que fica sempre colado à esquerda e ao cabeçalho). */
.evento-menu-abrir {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 40px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    cursor: pointer;
    flex: 0 0 auto;
}
.evento-menu-abrir span {
    display: block;
    height: 2px;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.evento-menu-abrir[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.evento-menu-abrir[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.evento-menu-abrir[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Painel central */
.evento-painel { flex: 1 1 auto; min-width: 0; }

/* -------- DESKTOP: menu lateral como barra de aplicativo --------
   Na página de evento e nas telas de administração, o menu lateral fica
   COLADO na borda esquerda da tela e no topo (logo abaixo do cabeçalho fixo),
   ocupando toda a altura visível. O painel central ocupa o restante da largura
   (o conteúdo deixa de ser centralizado nessas páginas). */
@media (min-width: 761px) {
    /* main.conteudo-evento (0,1,1) vence a regra .conteudo do @media
       (max-width: 1024px), que reintroduzia padding entre 761px e 1024px. */
    main.conteudo-evento {
        max-width: none;
        padding: 0;
    }
    .conteudo-evento .evento-shell {
        gap: 0;
        align-items: stretch;
    }
    .conteudo-evento .evento-menu {
        position: sticky;
        top: var(--altura-topbar);
        height: calc(100vh - var(--altura-topbar));
        overflow-y: auto;
        border-radius: 0;      /* flush com o canto da tela */
        z-index: 1;
    }
    .conteudo-evento .evento-painel {
        padding: 28px 24px;
    }
    /* Mensagens (flash) não ficam grudadas nas bordas quando o conteúdo é
       full-bleed nessas páginas. */
    .conteudo-evento > .alert {
        margin: 16px 24px 0;
    }
}

.evento-cabecalho {
    background: var(--cor-card);
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    padding: 22px 24px;
    margin-bottom: 18px;
}
.evento-cabecalho h1 { font-size: 1.45rem; }
.evento-cabecalho h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 5px;
    border-radius: 3px;
    background: var(--grad-marca);
    margin-top: 10px;
}
.evento-local { color: var(--cor-suave); font-size: 0.95rem; margin-top: 12px; }
.evento-tags { margin-top: 10px; }
.evento-tags .tag { margin: 2px 4px 2px 0; }

/* Cartões do dashboard do evento */
.painel-cards {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.painel-card {
    background: var(--cor-card);
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    overflow: hidden;
    flex: 1 1 260px;
}
.painel-card-largo { flex-basis: 100%; }

.painel-card-cabecalho {
    padding: 12px 18px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.painel-rosa  { background: var(--cor-acento); }
.painel-azul  { background: var(--cor-primaria); }
.painel-cinza { background: var(--cor-primaria-escura); }

.painel-card-corpo { padding: 18px; }
.painel-card-vazio { color: var(--cor-suave); }

.painel-metrica-rotulo {
    color: var(--cor-suave);
    font-size: 0.88rem;
    margin-bottom: 4px;
}
.painel-metrica-valor {
    color: var(--cor-primaria-escura);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 8px;
}
.painel-metrica-sub {
    color: var(--cor-suave);
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 8px;
}
.painel-metrica-sub strong { color: var(--cor-texto); }

/* Barra de progresso da meta de arrecadação (dashboard do evento). */
.painel-progresso {
    height: 9px;
    border-radius: 6px;
    background: var(--cor-borda);
    overflow: hidden;
    margin: 2px 0 8px;
}
.painel-progresso-barra {
    display: block;
    height: 100%;
    border-radius: 6px;
    background: var(--grad-marca);
    transition: width 0.4s ease;
}

/* ---------------------------------------------- Dashboard do evento (Início) */
.dash-metricas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.dash-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.painel-card + .painel-card { margin-top: 0; }
.dash-metricas > .painel-card, .dash-linha > .painel-card { margin: 0; }

.dash-grande { color: var(--cor-primaria-escura); font-size: 2rem; font-weight: 800; line-height: 1.1; margin: 0 0 6px; }

/* Barra de progresso da meta */
.dash-progresso { height: 10px; background: var(--cor-fundo); border-radius: 999px; overflow: hidden; margin: 8px 0 6px; }
.dash-progresso-fill { height: 100%; background: linear-gradient(90deg, var(--cor-acento), var(--cor-acento-escura)); border-radius: 999px; }

/* Anel (donut) das contagens */
.dash-donut-corpo { text-align: center; }
.dash-donut {
    width: 128px; height: 128px; border-radius: 50%;
    border: 13px solid var(--cor-borda);
    display: flex; align-items: center; justify-content: center;
    margin: 4px auto 10px;
}
.dash-donut span { font-size: 2.3rem; font-weight: 800; color: var(--cor-texto); }
.dash-donut-verde { border-color: #22c55e; }
.dash-donut-verde span { color: #166534; }
.dash-donut-roxo { border-color: #7b52b8; }
.dash-donut-roxo span { color: #5b3a94; }

/* Barras horizontais (situação financeira / prendas / vendas por categoria) */
.dash-bar-linha { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 10px; margin: 8px 0; }
.dash-bar-rot { color: var(--cor-suave); font-size: 0.85rem; }
.dash-bar-rot-larga { font-weight: 600; color: var(--cor-texto); }
.dash-bar-trilho { display: block; background: var(--cor-fundo); border-radius: 999px; height: 16px; overflow: hidden; }
.dash-bar-fill { display: block; height: 100%; border-radius: 999px; min-width: 2px; }
.dash-bar-azul  { background: var(--cor-primaria); }
.dash-bar-verde { background: #22c55e; }
.dash-bar-ambar { background: #e0a516; }
.dash-bar-ciano { background: #38b6d4; }
.dash-bar-val { font-weight: 700; color: var(--cor-primaria-escura); font-size: 0.9rem; white-space: nowrap; }

/* Lista de barras longa (ex.: visitantes por cidade): rola na vertical dentro
   do card em vez de esticar a linha e desconfigurar o gráfico ao lado. */
.dash-bar-scroll { max-height: 300px; overflow-y: auto; }

/* Tabelas compactas do dashboard */
.dash-tabela-corpo { padding: 8px 0 0; max-height: 340px; overflow-y: auto; }
.dash-tabela { width: 100%; border-collapse: collapse; }
.dash-tabela th, .dash-tabela td { padding: 7px 18px; font-size: 0.9rem; text-align: left; border-bottom: 1px solid var(--cor-borda); }
.dash-tabela th { color: var(--cor-suave); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.03em; position: sticky; top: 0; background: var(--cor-card); }
.dash-tabela td.dir, .dash-tabela th.dir { text-align: right; white-space: nowrap; }
.dash-tabela tr:last-child td { border-bottom: 0; }

@media (max-width: 760px) {
    .dash-metricas, .dash-linha { grid-template-columns: 1fr; }
    .dash-bar-linha { grid-template-columns: 90px 1fr auto; }
}

/* --- Gráficos clicáveis das telas de portaria (Espaço Kids | Voluntários e
   Visitantes). Um card de métrica (donut) ou uma barra vira um BOTÃO; clicar
   abre o modal com o detalhe (pulseiras, horário e nomes). */

/* Card de métrica que também é botão (donut Kids/Voluntários e total). */
.ptipo-metrica {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--cor-borda);
    text-align: inherit;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: box-shadow .15s, transform .1s, border-color .15s;
}
.ptipo-metrica:hover, .ptipo-metrica:focus-visible {
    box-shadow: 0 6px 18px rgba(17, 69, 145, 0.18);
    border-color: var(--cor-primaria);
    transform: translateY(-2px);
    outline: none;
}
/* Duas colunas fixas (Espaço Kids x Voluntários). */
.ptipo-metricas-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .ptipo-metricas-2 { grid-template-columns: 1fr; } }

/* Barra clicável (visitantes por cidade): mantém o grid de .dash-bar-linha. */
.dash-bar-clic {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
}
.dash-bar-clic:hover, .dash-bar-clic:focus-visible { background: var(--cor-fundo); outline: none; }
.ptipo-vazio { padding: 6px 2px; color: var(--cor-suave); }

/* Tabela do detalhe dentro do modal */
.ptipo-det-tabela { width: 100%; border-collapse: collapse; }
.ptipo-det-tabela th, .ptipo-det-tabela td { padding: 8px 10px; font-size: 0.9rem; text-align: left; border-bottom: 1px solid var(--cor-borda); }
.ptipo-det-tabela th { color: var(--cor-suave); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; letter-spacing: .03em; }
.ptipo-det-tabela td.dir, .ptipo-det-tabela th.dir { text-align: right; white-space: nowrap; }
.ptipo-det-sub { display: block; color: var(--cor-suave); font-size: 0.78rem; }
.ptipo-modal-cabecalho { display: flex; align-items: center; gap: 10px; }
.ptipo-modal-tag { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--cor-primaria); flex: 0 0 auto; }

/* ------------------------------------------------------- Portaria (pulseiras) */
.portaria-atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.portaria-leitura { margin-bottom: 16px; }
.portaria-leitura-rot { display: block; font-weight: 700; color: var(--cor-primaria-escura); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em; font-size: 0.8rem; }
.portaria-form { display: flex; gap: 8px; flex-wrap: wrap; }
.portaria-form #codigo {
    flex: 1 1 320px; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.06em;
    text-align: center; padding: 14px 16px;
}
.portaria-feedback { margin-top: 10px; padding: 0 14px; border-radius: 8px; font-weight: 700; max-height: 0; overflow: hidden; transition: max-height .15s ease, padding .15s ease; }
.portaria-feedback.vis { padding: 12px 14px; max-height: 80px; }
.portaria-feedback.ok    { background: #e8f6ec; color: #1d6f3c; border: 1px solid #bfe5cb; }
.portaria-feedback.aviso { background: #fef7e6; color: #8a6100; border: 1px solid #f2e0a8; }
.portaria-feedback.erro  { background: #fdecec; color: #a52834; border: 1px solid #f5c6cb; }
.portaria-cam { margin-top: 12px; }
.portaria-cam[hidden] { display: none; }
/* Leitura de pulseira (portaria, visitantes e Espaço Kids | Voluntários): a
   notificação E a câmera ficam num container fixo (sticky) JUNTOS no topo, logo
   abaixo do cabeçalho, enquanto o restante da tela rola por baixo. O sticky é do
   container; a câmera dentro dele não precisa (nem deve) ter sticky próprio,
   para não aninhar. */
.portaria-fixo { position: sticky; top: calc(var(--altura-topbar) + 6px); z-index: 15; }
.portaria-fixo .portaria-cam.cam-ativa { position: static; top: auto; z-index: auto; }
.portaria-fixo .portaria-feedback.vis,
.portaria-fixo .alert:not([hidden]) { box-shadow: var(--sombra); }
.portaria-video, #portaria-qr-region, .portaria-cam video { width: 100%; max-width: 420px; border-radius: 10px; overflow: hidden; margin: 0 auto; display: block; background: #000; }
/* Câmera de leitura CONTÍNUA: permanece aberta até o operador fechar. Para não
   esconder os registros/notificações/contadores no mobile, quando ativa vira um
   "preview compacto" fixo logo abaixo do cabeçalho — a tela continua rolável e
   as demais informações seguem visíveis enquanto se lê várias pulseiras. */
.portaria-cam.cam-ativa {
    position: sticky; top: calc(var(--altura-topbar) + 6px); z-index: 15;
    background: var(--cor-card); padding: 8px;
    border: 1px solid var(--cor-borda); border-radius: 12px; box-shadow: var(--sombra);
}
.portaria-cam.cam-ativa .portaria-video,
.portaria-cam.cam-ativa #portaria-qr-region,
.portaria-cam.cam-ativa video { max-height: 46vh; object-fit: cover; }
@media (max-width: 760px) {
    .portaria-cam.cam-ativa .portaria-video,
    .portaria-cam.cam-ativa #portaria-qr-region,
    .portaria-cam.cam-ativa video { max-height: 34vh; }
}
.pulseira-cor { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; margin-right: 6px; border: 1px solid var(--cor-borda); }
/* Campo de município (todas as cidades do Brasil): dropdown pesquisável. */
.muni-campo { position: relative; }
.muni-lista {
    position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
    background: var(--cor-card); border: 1px solid var(--cor-borda); border-radius: 8px;
    box-shadow: var(--sombra); max-height: 280px; overflow-y: auto; margin-top: 2px;
}
.muni-item {
    display: block; width: 100%; text-align: left; cursor: pointer; border: 0;
    background: transparent; padding: 8px 12px; color: var(--cor-texto); font-size: 0.95rem;
}
.muni-item:hover { background: var(--cor-campo); }
.muni-item span { color: var(--cor-suave); font-size: 0.82rem; }
.muni-manual { display: flex; gap: 8px; margin-top: 6px; }

.campo-check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-weight: 600; line-height: 1.35; }
.campo-check input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.campo-check > span { flex: 1 1 auto; }
.pulseira-nao-conta { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #fef7e6; color: #8a6100; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; vertical-align: middle; }

/* Telão: painel em tela cheia para exibição pública. */
.telao { min-height: 100vh; background: linear-gradient(160deg, #0e2a52, #114591); color: #fff; padding: 22px 26px; }
.telao-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.telao-topo img { width: 56px; height: 56px; background: #fff; border-radius: 10px; padding: 4px; }
.telao-topo h1 { margin: 0; font-size: 1.8rem; }
.telao-topo p { margin: 2px 0 0; opacity: .8; }
.telao-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.telao-card { background: rgba(255,255,255,.08); border-radius: 16px; padding: 20px; text-align: center; }
.telao-card .rot { text-transform: uppercase; letter-spacing: .05em; opacity: .85; font-size: 1rem; }
.telao-card .num { font-size: 4.5rem; font-weight: 800; line-height: 1.1; }
.telao-lista { margin-top: 18px; background: rgba(255,255,255,.08); border-radius: 16px; padding: 18px 22px; }
.telao, .telao h1, .telao h2, .telao p, .telao span, .telao strong { color: #fff; }
.telao-lista h2 { margin: 0 0 10px; font-size: 1.2rem; }
.telao-barra { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 12px; margin: 10px 0; font-size: 1.1rem; }
.telao-barra .trilho { background: rgba(255,255,255,.15); border-radius: 999px; height: 20px; overflow: hidden; }
.telao-barra .fill { height: 100%; border-radius: 999px; background: #22c55e; }
@media (max-width: 760px) { .telao-grade { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Responsivo */

/* Tablets e telas médias: reduz a folga lateral do conteúdo */
@media (max-width: 1024px) {
    .conteudo { padding: 24px 16px; }
}

/* Menu recolhido em hambúrguer (celulares e tablets pequenos) */
@media (max-width: 760px) {
    /* No celular tudo fica numa ÚNICA linha: hambúrguer + marca à esquerda e o
       avatar ancorado à direita, centralizado na vertical. Sem isto o bloco de
       ações (avatar) quebrava para uma segunda linha e ficava flutuando solto
       abaixo do título, no canto direito. */
    .topbar-inner {
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    /* A marca encolhe (min-width:0) e trunca com reticências para nunca empurrar
       o avatar para fora nem forçar a quebra de linha em telas estreitas. */
    .marca-texto { min-width: 0; }
    .marca-texto strong,
    .marca-texto small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Bloco do avatar não encolhe nem quebra: fica coeso no canto direito. */
    .topbar-acoes {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 8px;
    }

    /* No celular a navegação primária e o "Ver site" saem do cabeçalho para
       não competir com a marca e o botão do menu — o painel continua a um
       toque pelo logotipo, e "Ver site"/"Administração" vivem no menu do
       usuário (dropdown à direita). */
    .topnav-primaria,
    .link-ver-site { display: none; }

    /* Painel do evento no CELULAR:
       - PADRÃO/RECOLHIDO = menu TOTALMENTE OCULTO (fora da tela, à esquerda),
         para o painel aproveitar toda a largura. Vale mesmo sem JavaScript.
       - EXPANDE como painel deslizante (drawer) SOBRE o conteúdo ao tocar no
         botão do cabeçalho (à esquerda do logotipo); fecha ao tocar fora
         (backdrop), num item do menu ou no próprio botão. */
    .evento-shell { display: block; }        /* o painel ocupa a largura toda */
    .evento-menu {
        position: fixed;
        top: 0;                              /* cobre a tela toda ao abrir */
        left: 0;
        bottom: 0;
        width: 82%;
        max-width: 300px;
        flex-basis: auto;
        border-radius: 0;
        overflow-y: auto;
        transform: translateX(-100%);        /* recolhido = fora da tela */
        transition: transform 0.25s ease;
        box-shadow: 2px 0 18px rgba(0, 0, 0, 0.28);
        z-index: 120;                        /* sobre o cabeçalho ao abrir */
    }
    .evento-shell.forcar-expandido .evento-menu { transform: translateX(0); }
    .evento-shell.forcar-recolhido .evento-menu { transform: translateX(-100%); }

    /* Marca ocupa a linha de cima junto do botão; texto encolhe sem estourar */
    .marca { flex: 1 1 auto; min-width: 0; }

    /* Menu da direita no celular: fica só o AVATAR REDONDO (o nome some);
       o dropdown continua flutuante, ancorado à direita, sobre o conteúdo. */
    .topnav { flex: 0 0 auto; }
    .usuario-nome { display: none; }
    .topbar .btn-usuario {
        padding: 4px;
        border-radius: 50%;
    }
    .usuario-avatar { width: 34px; height: 34px; }
}

/* Celulares */
@media (max-width: 640px) {
    body { font-size: 15px; }

    .conteudo { padding: 18px 12px; }
    .card { padding: 20px; }
    .hero { padding: 22px 18px; }
    .hero h1 { font-size: 1.35rem; }

    /* Cards de atalho ocupam a largura toda, um por linha */
    .cards-atalho { gap: 12px; }
    .atalho { flex-basis: 100%; }
    .colunas-inicio { gap: 14px; }

    /* Hero editorial da home empilha: texto em cima, card de acesso abaixo */
    .inicio-hero { grid-template-columns: 1fr; padding: 30px 22px; gap: 22px; }

    /* Painel "Minha área": grade em uma coluna e filtro em linha própria */
    .grade-cidades { grid-template-columns: 1fr; gap: 12px; }
    .secao-eventos-topo { align-items: stretch; }
    .secao-eventos-topo .filtro-cidade { width: 100%; }

    /* Cabeçalho de página e busca empilham */
    .pagina-cabecalho { align-items: stretch; }
    .pagina-cabecalho .btn { width: 100%; }
    .barra-busca input,
    .barra-busca select,
    .barra-busca input[type="date"] { flex: 1 1 100%; width: 100%; }
    .barra-busca .btn { width: 100%; }

    /* Ações da tabela: botões maiores, mais fáceis de tocar */
    .acoes { gap: 8px; }
    .acoes .btn-mini,
    .acoes form { flex: 1 1 auto; }
    .acoes form .btn-mini { width: 100%; }
    /* Ações por ícone permanecem compactas (não esticam) */
    .acoes .btn-icone,
    .col-acoes .acoes form { flex: 0 0 auto; }

    /* Formulários com colunas passam a uma coluna */
    .linha-dupla > div,
    .filtros-acesso > div { flex-basis: 100%; }

    .form-acoes { flex-direction: column; align-items: stretch; }
    .form-acoes .btn { width: 100%; }

    .modal-caixa { padding: 18px; max-height: 86vh; }
}

/* Celulares muito estreitos */
@media (max-width: 380px) {
    .marca-texto strong { font-size: 0.95rem; }
    .marca-texto small  { font-size: 0.68rem; }
    .marca-logo img { height: 28px; }
}

/* ============================================================ Cadastro de lotes
   Módulo de cadastro de lotes/prendas (lotes.php, lote_form.php e afins). */

/* Cabeçalho com mais de um botão de ação (ex.: Reservas + Novo lote) */
.cabecalho-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Botões-interruptor (toggle) do formulário de lote ---- */
.lote-toggles {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    margin: 4px 0 6px;
}
.switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
    color: var(--cor-primaria-escura);
    user-select: none;
}
/* Esconde o checkbox nativo sem perder a acessibilidade/teclado */
.switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}
.switch-trilho {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #c3ccd6;
    transition: background 0.15s ease;
}
.switch-bolinha {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}
.switch input:checked + .switch-trilho { background: var(--cor-primaria); }
.switch input:checked + .switch-trilho .switch-bolinha { transform: translateX(18px); }
.switch input:focus-visible + .switch-trilho {
    box-shadow: 0 0 0 3px rgba(35, 100, 194, 0.25);
}
.switch-texto { font-size: 0.95rem; }

.lote-reserva-bloco { margin: 6px 0 2px; max-width: 520px; }
.lote-reserva-bloco[hidden] { display: none; }

/* ---- Valor total sugerido (visor calculado) ---- */
.lote-total {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px dashed var(--cor-borda);
    border-radius: 8px;
    background: var(--cor-fundo);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--cor-primaria-escura);
}

/* ---- Cadastro em lote (planilha de tipos/quantidades) ---- */
.massa-replicar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 6px;
}
.massa-replicar-rotulo {
    font-weight: 600;
    color: var(--cor-suave);
    font-size: 0.9rem;
}
.massa-wrap { margin-top: 6px; }
.massa-tabela { table-layout: fixed; }
.massa-tabela th,
.massa-tabela td { vertical-align: middle; padding: 6px 8px; }
.massa-tabela input,
.massa-tabela select { width: 100%; margin: 0; }
.massa-col-num {
    width: 40px;
    text-align: center;
    color: var(--cor-suave);
    font-weight: 700;
}
.massa-col-tipo  { width: 22%; }
.massa-col-qtd   { width: 96px; }
.massa-col-valor { width: 120px; }
.massa-col-pre   { width: 76px; text-align: center; }
.massa-col-pre input { width: 18px; height: 18px; }
.massa-col-acao  { width: 44px; text-align: center; }
.massa-tabela .massa-qtd { text-align: center; }
.massa-remover {
    color: var(--cor-acento);
    font-size: 1.2rem;
    line-height: 1;
    padding: 4px 8px;
}
.massa-remover:hover { color: var(--cor-acento-escura); }

.massa-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 4px;
}
.massa-add-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.massa-resumo {
    padding: 8px 14px;
    border: 1px dashed var(--cor-borda);
    border-radius: 8px;
    background: var(--cor-fundo);
    font-size: 1rem;
    color: var(--cor-primaria-escura);
}
.massa-resumo strong { color: var(--cor-acento-escura); }

@media (max-width: 720px) {
    .massa-tabela { table-layout: auto; }
    .massa-col-tipo { width: auto; }
    .massa-rodape { flex-direction: column; align-items: stretch; }
}

/* ---- Combo pesquisável de categoria (reutiliza .combo-lista/.combo-item) ---- */
.combo-categoria { position: relative; }
.combo-categoria .combo-lista { display: none; }
/* Campo de lista pesquisável: deixa espaço para a setinha à direita */
.combo-categoria .combo-entrada { padding-right: 34px; }
.combo-caret {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--cor-suave);
    font-size: 0.9rem;
    cursor: pointer;
}
.combo-caret:hover { color: var(--cor-primaria); }

/* ---- Foto do lote ---- */
.bloco-foto {
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 4px 16px 16px;
    margin-top: 20px;
}
.bloco-foto legend {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--cor-primaria-escura);
    padding: 0 6px;
}
/* "?" de ajuda ao lado do título do fieldset (alinhado ao texto da legenda) */
.legenda-com-ajuda .ajuda-toggle { vertical-align: middle; margin-left: 6px; }
.foto-linha {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 8px;
}
.foto-preview {
    flex: 0 0 auto;
    width: 160px;
    height: 160px;
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    background: var(--cor-fundo);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.foto-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* O <img> de prévia começa oculto (sem foto): sem esta regra o
   ".foto-preview img { display:block }" acima venceria o atributo [hidden] do
   navegador e mostraria o ícone de "imagem quebrada". */
.foto-preview img[hidden] { display: none; }
/* Estado vazio: ícone discreto + texto, com cara de espaço reservado (não de erro) */
.foto-vazia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--cor-suave);
    font-size: 0.9rem;
}
.foto-vazia svg { width: 34px; height: 34px; opacity: 0.55; }
/* Prévia do logotipo da boleta: como é uma marca (não uma foto), a imagem deve
   caber inteira (contain) sobre fundo branco, sem recorte. */
.bloco-boleta .foto-preview { background: #fff; }
.bloco-boleta .foto-preview img { object-fit: contain; padding: 10px; }
.foto-controles { flex: 1 1 260px; min-width: 220px; }
.foto-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
/* Botão-arquivo: o <input file> fica escondido dentro do <label class="btn"> */
.foto-botoes .btn { cursor: pointer; position: relative; overflow: hidden; margin: 0; }
.foto-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
/* Botões da foto: câmera em destaque (ação principal no celular) */
.foto-botoes .foto-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.foto-btn-icone { font-size: 1.05em; line-height: 1; }
.foto-camera {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
}
.foto-camera:hover {
    background: var(--cor-primaria-escura);
    border-color: var(--cor-primaria-escura);
    color: #fff;
}

/* ---- Seletor de quantidade com botões +/- (toque fácil no celular) ---- */
.qtd-stepper { display: flex; align-items: stretch; }
.qtd-stepper .qtd-input {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    -moz-appearance: textfield;
}
.qtd-stepper .qtd-input::-webkit-outer-spin-button,
.qtd-stepper .qtd-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qtd-btn {
    flex: 0 0 auto;
    width: 44px;
    border: 1px solid var(--cor-borda);
    background: var(--cor-fundo);
    color: var(--cor-primaria-escura);
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.qtd-btn:first-child { border-radius: 8px 0 0 8px; }
.qtd-btn:last-child  { border-radius: 0 8px 8px 0; }
.qtd-btn:hover  { background: #e9f1fc; }
.qtd-btn:active { background: #d6e6fb; }

/* ---- Tabela de lotes ---- */
.tabela-lotes .col-acoes { width: 1%; white-space: nowrap; }
/* Editar e excluir sempre na MESMA linha (não quebram para baixo) */
.tabela-lotes .col-acoes .acoes { flex-wrap: nowrap; }
.tabela-lotes .col-foto  { width: 56px; }
.tabela-lotes .col-nro   { white-space: nowrap; text-align: center; }
.tabela-lotes .col-versao { text-align: center; white-space: nowrap; width: 74px; }
.tabela-lotes .col-qtd   { text-align: center; white-space: nowrap; }
.tabela-lotes .col-valor { white-space: nowrap; text-align: right; }
/* Colunas de texto QUEBRAM em várias linhas em vez de esticar a tabela — assim
   a lista cabe na largura da tela sem exigir rolagem horizontal. As colunas
   numéricas/de valores acima continuam em linha única. */
.tabela-lotes .col-descricao { white-space: normal; min-width: 180px; }
.tabela-lotes .col-categoria { white-space: normal; min-width: 90px; }
.tabela-lotes .col-situacao  { white-space: normal; max-width: 160px; }
/* Na coluna de situação as tags embrulham (empilham) em vez de ir numa só linha */
.tabela-lotes .col-situacao .tag { margin: 2px 4px 2px 0; }

/* Linha do lote que está EM LEILÃO — destacada em âmbar (mesmo tom da etiqueta
   "Em leilão") com uma barra à esquerda, para o controlador localizar de imediato
   ao voltar à lista. */
.tabela-lotes tr.linha-em-leilao td { background: #fff5da; }
.tabela-lotes tr.linha-em-leilao td:first-child {
    box-shadow: inset 4px 0 0 0 #e0a500;
}
.tabela-lotes tr.linha-em-leilao:hover td { background: #ffefc4; }

/* Linha do lote já VENDIDO (com o pisteiro ou na contabilidade) — destacada em
   azul (mesmo tom da etiqueta "Vendido") com uma barra à esquerda, para separar
   de imediato o que já foi arrematado no cadastro de lotes. */
.tabela-lotes tr.linha-vendido td { background: #eef4fc; }
.tabela-lotes tr.linha-vendido td:first-child {
    box-shadow: inset 4px 0 0 0 #114591;
}
.tabela-lotes tr.linha-vendido:hover td { background: #e2ecfa; }

/* Coluna "Redoado" do cadastro de lotes: "Não" em tom suave para deixar o
   "Sim" (etiqueta) em evidência. */
.tabela-lotes .redoado-nao { color: var(--cor-suave); }
.lote-thumb {
    display: block;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--cor-borda);
    background: var(--cor-fundo);
}
.lote-thumb-vazia {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--cor-suave);
}

/* ------------------------------------------------------ Contabilidade
   Tela "Boletas pendentes de impressão": tabela de vendas já vinculadas,
   com ações de estorno/exclusão/redoar, conferência e impressão da boleta. */
.contab-subtitulo {
    margin: -6px 0 14px;
    color: var(--cor-suave);
    font-size: 0.95rem;
    font-weight: 600;
}

.tabela-contabilidade .col-comprador  { white-space: normal; min-width: 170px; }
.tabela-contabilidade .col-observacao { white-space: normal; min-width: 120px; }
.tabela-contabilidade .col-pisteiro,
.tabela-contabilidade .col-impressao  { white-space: nowrap; }
.tabela-contabilidade .col-conferida,
.tabela-contabilidade .col-redoado    { text-align: center; white-space: nowrap; }
.tabela-contabilidade .col-acoes .acoes { flex-wrap: nowrap; gap: 5px; }

/* Linha com a venda já conferida: leve realce verde. */
.tabela-contabilidade tr.linha-conferida td { background: #f0f9f2; }
.tabela-contabilidade tr.linha-conferida:hover td { background: #e6f4ea; }

/* Ícones de ação por função (espelham o modelo do sistema legado). */
.btn-estornar-c { background: #e9f1fc; color: #114591; border-color: #c6dbf5; }
.btn-estornar-c:hover { background: #114591; color: #fff; border-color: #114591; }
.btn-redoar-c { background: #fdecec; color: #a52834; border-color: #f5c6cb; }
.btn-redoar-c:hover { background: #a52834; color: #fff; border-color: #a52834; }
.btn-boleta { background: #eef1f5; color: #3f4650; border-color: #d7dde5; }
.btn-boleta:hover { background: #3f4650; color: #fff; border-color: #3f4650; }
.btn-boleta.impressa { background: #3f4650; color: #fff; border-color: #3f4650; }
/* Confirmar impressão da boleta (verde: segue para Boletas Pendentes). */
.btn-confirmar-boleta { background: #e8f6ec; color: #1d6f3c; border-color: #bfe5cb; }
.btn-confirmar-boleta:hover { background: #1d6f3c; color: #fff; border-color: #1d6f3c; }

/* Botão de conferência (marca/desmarca) — ícone puro, sem moldura de .btn. */
.contab-conf-form { margin: 0; }
.contab-conf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
}
.contab-conf svg { width: 20px; height: 20px; }
.contab-conf.conferida-sim { background: #e8f6ec; color: #1d6f3c; border-color: #bfe5cb; }
.contab-conf.conferida-sim:hover { background: #1d6f3c; color: #fff; border-color: #1d6f3c; }
.contab-conf.conferida-nao { color: var(--cor-suave); border-color: var(--cor-borda); }
.contab-conf.conferida-nao:hover { color: #1d6f3c; border-color: #bfe5cb; background: #f0f9f2; }

/* Comprador em destaque (mesmo papel do "botão" verde-água do modelo). */
.contab-comprador {
    display: block;
    font-weight: 700;
    color: var(--cor-primaria-escura);
}
.contab-comprador-tel {
    display: block;
    font-size: 0.78rem;
    color: var(--cor-suave);
}

/* "Usuário Impressão": destaca quem já imprimiu (em âmbar, como no modelo). */
.contab-impresso {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: #fef7e6;
    color: #8a6100;
    font-weight: 700;
    font-size: 0.78rem;
    white-space: nowrap;
}

/* Contas a Receber: coluna de seleção (checkbox) e linha desabilitada. */
.tabela-contas-receber .col-sel { width: 1%; text-align: center; white-space: nowrap; }
.tabela-contas-receber .col-sel input { width: 18px; height: 18px; cursor: pointer; }
.tabela-contas-receber tr.cr-desabilitada td { opacity: 0.45; }
.tabela-contabilidade .col-parcelas,
.tabela-contabilidade .col-forma,
.tabela-contabilidade .col-lotes,
.tabela-contabilidade .col-cod { white-space: nowrap; }
.tabela-contabilidade .col-lotes { min-width: 90px; white-space: normal; }
#cr-modal .cr-resumo { background: var(--cor-campo); border-radius: 8px; padding: 10px 12px; }

/* Edição da venda (contabilidade_editar.php): seletor de comprador. */
.ced-comprador { border: 1px solid var(--cor-borda); border-radius: 8px; padding: 10px 14px 14px; margin-top: 14px; }
.ced-comprador legend { padding: 0 6px; font-weight: 700; color: var(--cor-primaria-escura); }
.ced-atual { margin-bottom: 8px; }
.ced-atual .ced-tel { color: var(--cor-suave); margin-left: 6px; }
.ced-busca input { width: 100%; }
.ced-lista { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.ced-item {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: 8px 12px; border: 1px solid var(--cor-borda); border-radius: 8px;
    background: var(--cor-card); color: var(--cor-texto);
}
.ced-item:hover { background: var(--cor-campo); border-color: var(--cor-primaria); }
.ced-item span { color: var(--cor-suave); font-size: 0.85rem; }

/* Venda avulsa: blocos, itens selecionados (lote/comprador). */
.va-bloco { margin-bottom: 14px; }
.va-bloco legend { font-weight: 700; color: var(--cor-primaria-escura); }
.va-selecionado {
    background: var(--cor-campo);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 8px 12px;
}
.va-lote-sel-desc { display: block; color: var(--cor-suave); font-size: 0.9rem; margin-top: 2px; }
.va-bloco .ced-item small { color: var(--cor-suave); font-weight: 400; }
/* Quantidade da venda avulsa: somente exibida (vem do cadastro do lote). */
.va-qtd-visor {
    padding: 9px 12px;
    border: 1px dashed var(--cor-borda);
    border-radius: 8px;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-weight: 700;
}

/* Linha de total arrecadado no rodapé da tabela. */
.tabela-contabilidade tfoot .contab-total td,
.tabela-lancamentos tfoot .contab-total td {
    background: #eef4fb;
    font-weight: 700;
    color: var(--cor-primaria-escura);
    border-top: 2px solid var(--cor-borda);
}
.tabela-contabilidade tfoot .contab-total-rotulo,
.tabela-lancamentos tfoot .contab-total-rotulo { text-align: right; }
.tabela-contabilidade .redoado-nao,
.tabela-lancamentos .redoado-nao { color: var(--cor-suave); }

/* -------------------------------------- Lançamentos Financeiros (receitas/despesas) */
/* Resumo em três cartões: receitas, despesas e saldo. */
.lanc-resumo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0;
}
.lanc-resumo-card {
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    padding: 14px 16px;
    background: #fff;
    border-left-width: 5px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lanc-resumo-rot { font-size: .82rem; color: var(--cor-suave); text-transform: uppercase; letter-spacing: .02em; }
.lanc-resumo-val { font-size: 1.35rem; font-weight: 800; color: var(--cor-texto); }
.lanc-resumo-card.lanc-receita   { border-left-color: #1f9d55; }
.lanc-resumo-card.lanc-despesa   { border-left-color: #d64545; }
.lanc-resumo-card.lanc-saldo-pos { border-left-color: var(--cor-primaria); background: #f2f8f2; }
.lanc-resumo-card.lanc-saldo-neg { border-left-color: #d64545; background: #fbf1f1; }

/* Etiquetas e valores por natureza na tabela. */
.tag.lanc-tag-receita { background: #e6f4ec; color: #1f7a44; }
.tag.lanc-tag-despesa { background: #fbe9e9; color: #b23636; }
.lanc-val-receita { color: #1f7a44; font-weight: 700; white-space: nowrap; }
.lanc-val-despesa { color: #b23636; font-weight: 700; white-space: nowrap; }

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

/* -------------------------------------- Segregação financeira no dashboard do evento */
.dash-segreg { display: flex; flex-direction: column; gap: 2px; }
.dash-segreg-linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 2px;
    border-bottom: 1px dashed var(--cor-borda);
}
.dash-segreg-rot { color: var(--cor-texto); }
.dash-segreg-val { font-weight: 700; white-space: nowrap; }
.dash-segreg-val.dash-segreg-pos { color: #1f7a44; }
.dash-segreg-val.dash-segreg-neg { color: #b23636; }
.dash-segreg-total {
    border-bottom: none;
    border-top: 2px solid var(--cor-borda);
    margin-top: 4px;
    padding-top: 12px;
}
.dash-segreg-total .dash-segreg-rot { font-weight: 800; }
.dash-segreg-total .dash-segreg-val { font-size: 1.2rem; color: var(--cor-primaria-escura); }
.dash-segreg-atalho { margin-top: 12px; }

@media (max-width: 640px) {
    /* Interruptores: cada um em linha inteira — rótulo à esquerda, botão à
       direita — com alvo de toque generoso. */
    .lote-toggles { flex-direction: column; gap: 0; margin: 0 0 4px; }
    .lote-toggles .switch {
        width: 100%;
        justify-content: space-between;
        padding: 13px 2px;
        border-bottom: 1px solid var(--cor-borda);
    }
    .lote-toggles .switch-texto { order: -1; font-size: 1rem; }
    .switch-trilho { width: 52px; height: 30px; }
    .switch-bolinha { width: 24px; height: 24px; }
    .switch input:checked + .switch-trilho .switch-bolinha { transform: translateX(22px); }

    /* Foto: prévia grande no topo e botões em bloco (câmera em destaque). */
    .foto-linha { flex-direction: column; align-items: stretch; gap: 12px; }
    .foto-preview { width: 100%; height: 220px; }
    .foto-controles { width: 100%; min-width: 0; flex-basis: auto; }
    .foto-botoes { flex-direction: column; gap: 10px; }
    .foto-botoes .foto-btn {
        width: 100%;
        justify-content: center;
        padding: 15px;
        font-size: 1.02rem;
    }

    /* Lista de categoria com itens maiores para o toque. */
    .combo-item { padding: 14px 12px; }
    .combo-lista { max-height: 260px; }
    .combo-caret { width: 44px; }
    .combo-categoria .combo-entrada { padding-right: 46px; }

    /* Botões do stepper de quantidade um pouco maiores. */
    .qtd-btn { width: 48px; }

    /* Ações do lote: "Salvar lote" full-width e destacado, com divisória. */
    .form-acoes-lote {
        gap: 8px;
        margin-top: 20px;
        padding-top: 14px;
        border-top: 1px solid var(--cor-borda);
    }
    .form-acoes-lote .btn-primario {
        flex: 1 1 auto;
        padding: 15px;
        font-size: 1.05rem;
    }
    .form-acoes-lote .btn-link { flex: 0 0 auto; padding: 15px 12px; }
}

/* ---- Tabelas ordenáveis + filtráveis (assets/js/tabela_interativa.js) ---- */
.th-ordenavel { cursor: pointer; user-select: none; white-space: nowrap; }
.th-ordenavel:hover { color: var(--cor-primaria); }
.th-ordenavel:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: -2px;
}
.th-seta { font-size: 0.8em; color: var(--cor-primaria); }
/* Dá uma pista visual de que o título é clicável (setas ⇅ discretas) */
.th-ordenavel .th-seta:empty::before { content: " ⇅"; color: var(--cor-borda); }

.linha-filtros th { padding: 4px 6px 8px; background: inherit; }
.filtro-coluna {
    width: 100%;
    padding: 5px 8px;
    font-size: 0.82rem;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
}
.tabela-dica { margin-top: 10px; }

/* ---- Lightbox de foto do lote (assets/js/foto_modal.js) ---- */
[data-foto-modal] { cursor: zoom-in; }
.foto-modal[hidden] { display: none; }
.foto-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.foto-modal-fundo {
    position: absolute;
    inset: 0;
    background: rgba(10, 31, 66, 0.82);
}
.foto-modal-caixa {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
}
.foto-modal-img {
    display: block;
    max-width: 95vw;
    max-height: 95vh;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--sombra-forte);
}
.foto-modal-fechar {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--cor-texto);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--sombra);
}
.foto-modal-fechar:hover { color: var(--cor-acento); }
body.foto-modal-aberto { overflow: hidden; }

/* ---------------------------------------------------- Exportar listagens */

/* Barra de botões "Exportar: Excel · PDF · Imprimir" sobre cada listagem. */
.barra-exportacao {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: -4px 0 16px;
}
.barra-exportacao-rotulo {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--cor-suave);
}
.btn-exportar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    font-size: 0.88rem;
}
.btn-exportar svg { width: 16px; height: 16px; vertical-align: middle; }
.btn-exportar-excel { color: #1d6f3c; border-color: #bfe5cb; background: #eefaf1; }
.btn-exportar-excel:hover { background: #1d6f3c; color: #fff; border-color: #1d6f3c; }
.btn-exportar-pdf { color: #a52834; border-color: #f5c6cb; background: #fdecec; }
.btn-exportar-pdf:hover { background: #a52834; color: #fff; border-color: #a52834; }
.btn-exportar-print { color: #114591; border-color: #c6dbf5; background: #e9f1fc; }
.btn-exportar-print:hover { background: #114591; color: #fff; border-color: #114591; }

@media (max-width: 640px) {
    .barra-exportacao .btn-exportar { flex: 1 1 auto; justify-content: center; }
}

/* Página de impressão / PDF (exportar.php: formato=pdf|imprimir). */
.corpo-exportacao {
    background: #fff;
    color: #222;
}
.doc-exportacao {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}
.doc-exportacao-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.doc-exportacao-dica {
    font-size: 0.85rem;
    color: var(--cor-suave);
}
.doc-exportacao-cabecalho {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--cor-primaria-escura);
}
.doc-exportacao-logo { width: 64px; height: auto; }
.doc-exportacao-cabecalho h1 { font-size: 1.35rem; margin: 0; }
.doc-exportacao-sub {
    margin: 2px 0 0;
    font-weight: 600;
    color: var(--cor-primaria);
}
.doc-exportacao-meta {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: var(--cor-suave);
    line-height: 1.5;
}
.tabela-exportacao { width: 100%; }
.tabela-exportacao th, .tabela-exportacao td { white-space: normal; }

/* Regras de impressão: some tudo o que for de tela (.no-print) e imprime só
   a tabela/documento, economizando tinta. Vale para a página de impressão E
   para a impressão direta (Ctrl+P) de qualquer listagem do portal. */
@media print {
    .no-print,
    .topbar,
    .rodape,
    .evento-menu,
    .migalha,
    .barra-busca,
    .barra-exportacao,
    .doc-exportacao-barra,
    .col-acoes,
    .acoes,
    .pwa-modal { display: none !important; }

    body { background: #fff; color: #000; }
    .conteudo, .doc-exportacao { margin: 0; padding: 0; max-width: none; box-shadow: none; }
    .tabela-wrap { box-shadow: none; overflow: visible; }
    .tabela { font-size: 11px; }
    .tabela th, .tabela td { white-space: normal; padding: 5px 7px; }
    a[href]:after { content: ""; }
}

/* ------------------------------------------------ Controlador do leilão */

/* Título do lote + etiqueta de situação lado a lado */
.controlador-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.controlador-topo h1 { font-size: 1.4rem; margin: 0; }

/* Dados do lote (à direita) + foto (à esquerda) */
.controlador-lote {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 14px 0 6px;
}
.controlador-foto { flex: 0 0 auto; }
/* Foto do lote no pregão: escala com a largura da tela (fluida) mantendo o
   quadrado, sem ultrapassar a largura disponível no dispositivo. */
.controlador-foto .foto-preview {
    width: clamp(180px, 26vw, 300px);
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 100%;
}
/* No detalhe do leilão mostramos a foto INTEIRA (sem cortar), pois o controlador
   precisa reconhecer o lote — diferente da miniatura do cadastro (que usa "cover"). */
.controlador-foto .foto-preview img { object-fit: contain; }
/* Coluna à direita da foto: dados do lote + venda + histórico de lances, todos
   empilhados logo abaixo dos dados (antes ficavam "lá embaixo", após a foto). */
.controlador-lado {
    flex: 1 1 340px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.controlador-dados { padding: 0; }

.controlador-marca-tempo {
    margin: 6px 0 0;
    padding: 8px 12px;
    background: var(--cor-fundo);
    border-radius: 8px;
}

.controlador-acao-bloco { margin-top: 18px; }

/* Botão de destaque para "Colocar em leilão" */
.btn-grande { padding: 13px 26px; font-size: 1.05rem; }

/* Interruptor "Redoar?" alinhado como os demais campos */
.controlador-redoar { margin-top: 10px; }

/* "Retirar do leilão": ação de desfazer o pregão, destacada em vermelho de alerta */
.controlador-retirar {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--cor-borda);
}
.btn-retirar {
    background: #fdecec;
    border-color: #f0b8bd;
    color: #a52834;
    font-weight: 700;
}
.btn-retirar:hover {
    background: #a52834;
    border-color: #a52834;
    color: #fff;
}
.btn-retirar:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(165, 40, 52, 0.25);
}

/* ---------------------------------------- Histórico de lances narrados */
.controlador-lances {
    margin-top: 4px;
    padding: 12px 14px;
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
}
.controlador-lances-titulo {
    font-size: 0.95rem;
    margin: 0;
    color: var(--cor-primaria-escura);
}
/* Linha de entrada: campo do valor + botão "Registrar lance" */
.lance-entrada {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.lance-entrada input {
    flex: 1 1 auto;
    min-width: 0;
}
.lance-entrada .btn { flex: 0 0 auto; }

.lance-erro {
    margin: 8px 0 0;
    color: #a52834;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Lista dos lances (mais recente no topo) */
.lance-lista {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
}
.lance-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
}
/* Destaque do ÚLTIMO lance (o que será assumido como lance final) */
.lance-item-ultimo {
    border-color: var(--cor-primaria);
    box-shadow: inset 3px 0 0 var(--cor-primaria);
}
.lance-valor { font-weight: 700; font-size: 1.02rem; }
.lance-item-ultimo .lance-valor { color: var(--cor-primaria); }
.lance-meta {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--cor-suave);
}
.lance-remover {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    line-height: 1;
    font-size: 1.1rem;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    background: transparent;
    color: var(--cor-suave);
    cursor: pointer;
}
.lance-remover:hover {
    background: #fdecec;
    border-color: #f0b8bd;
    color: #a52834;
}
.lance-vazio { margin: 10px 0 0; }

@media (max-width: 640px) {
    .controlador-lote { flex-direction: column; align-items: stretch; }
    /* No celular os dados viram uma coluna só e podem encolher (sem min-width),
       para não empurrar a largura do painel além da tela. */
    .controlador-lado { min-width: 0; }
    .controlador-dados { grid-template-columns: 1fr; }
    /* Em telas pequenas a foto ocupa a largura toda, mas fica limitada à altura
       da tela do aparelho (70vh) para caber sem rolagem — e centralizada. */
    .controlador-foto { align-self: center; width: 100%; }
    .controlador-foto .foto-preview {
        width: 100%;
        max-width: 420px;
        height: auto;
        aspect-ratio: 4 / 3;
        max-height: 70vh;
        margin: 0 auto;
    }
}

/* Etiqueta "REDOADO" e "vN" (versão) — usadas no controlador e no pisteiro */
.tag-redoado { background: #fdecec; color: #c0261a; letter-spacing: 0.04em; }
.pist-versao {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.7em;
    font-weight: 700;
    background: #e9f1fc;
    color: #114591;
}
/* Selo "vN" em COLUNA própria (número e versão separados nas tabelas de lotes).
   Versão original discreta; versão redoada (v2+) destacada em azul. */
.lote-versao {
    display: inline-block;
    min-width: 34px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--cor-fundo);
    color: var(--cor-suave);
    border: 1px solid var(--cor-borda);
}
.lote-versao-redoada {
    background: #e9f1fc;
    color: #114591;
    border-color: #cfe0f6;
}
/* ------------------------------------------- Assistente pisteiro (celular) */

/* Lista de cards: uma coluna estreita, centralizada (pensada para o celular). */
.pist-lista {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 460px;
    margin: 4px auto 0;
}

.pist-vazio {
    background: var(--cor-card);
    border: 1px dashed var(--cor-borda);
    border-radius: var(--radius);
    padding: 22px 18px;
    text-align: center;
    color: var(--cor-suave);
}

.pist-card {
    background: #c8ccd2; /* cinza-azulado do modelo de UX */
    border-radius: var(--radius);
    box-shadow: var(--sombra);
    padding: 20px 18px;
    text-align: center;
}

.pist-card-topo { margin-bottom: 6px; }
/* Número do lote e versão em DUAS COLUNAS: número à esquerda, selo da versão
   à direita — separados para leitura mais rápida no celular. */
.pist-lote-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.pist-lote {
    font-size: 1.35rem;
    font-weight: 800;
    color: #1b2530;
    margin: 0;
}
.pist-versao-col { font-size: 0.82rem; }
.pist-desc {
    margin: 2px 0 0;
    font-size: 1.02rem;
    color: #2a333d;
    word-break: break-word;
}

/* Foto do lote: miniatura (abre ampliada ao tocar via foto_modal.js) */
.pist-foto-wrap { margin: 12px 0 4px; }
.pist-foto {
    width: 108px;
    height: 108px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(10, 31, 66, 0.18);
    cursor: zoom-in;
}

.pist-redoado {
    margin: 12px 0 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #c0261a;
}

/* Caixa escura com o pisteiro comprador / informação (modelo de UX) */
.pist-comprador-pisteiro {
    display: inline-block;
    margin: 14px 0 0;
    padding: 10px 22px;
    background: #2f333a;
    color: #fff;
    border-radius: 8px;
    font-weight: 800;
    font-size: 1.15rem;
    word-break: break-word;
    max-width: 100%;
}

.pist-tempo {
    margin: 14px 0 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #c0261a;
}

.pist-valor {
    margin: 12px 0 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #1b2530;
}

.pist-acoes { margin-top: 18px; }
.pist-acoes .btn-bloco { width: 100%; }
.pist-acoes > .btn-bloco { margin-top: 0; }
.pist-acoes-linha {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.pist-form-inline { flex: 1 1 0; margin: 0; }
.pist-acoes-linha .btn-bloco { margin-top: 0; }

/* Estornar (vermelho/coral do modelo) e Redoar (neutro escuro) */
.btn-estornar {
    background: #d9584f;
    color: #fff;
    border-color: #d9584f;
}
.btn-estornar:hover { background: #c0463d; border-color: #c0463d; color: #fff; }
.btn-redoar {
    background: #3f4650;
    color: #fff;
    border-color: #3f4650;
}
.btn-redoar:hover { background: #2f353d; border-color: #2f353d; color: #fff; }

/* ------- Modal "Vincular comprador" (reaproveita .modal-fundo/.modal-caixa) */
.mv-busca { margin-top: 8px; }
.mv-busca input { width: 100%; }

.mv-lista {
    margin-top: 10px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    background: var(--cor-card);
}
.mv-lista-dica { margin: 0; padding: 12px 14px; }

.mv-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--cor-borda);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}
.mv-item:last-child { border-bottom: 0; }
.mv-item:hover { background: var(--cor-fundo); }
.mv-item.ativo { background: #e9f1fc; }
.mv-item-nome { display: block; font-weight: 700; color: var(--cor-primaria-escura); }
.mv-item-sub  { display: block; font-size: 0.85rem; color: var(--cor-suave); }

.mv-escolhido {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #e8f6ec;
    color: #1d6f3c;
}
.mv-escolhido-rotulo { font-weight: 700; margin-right: 4px; }
.mv-escolhido-tel { color: #2a333d; margin-left: 6px; }

.mv-novo { margin-top: 14px; }
.mv-novo-form {
    margin-top: 8px;
    padding: 14px;
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    background: var(--cor-fundo);
}

.mv-rodape {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--cor-borda);
}
.mv-rodape .btn-bloco { width: 100%; }
.mv-rodape .btn-bloco + .btn-bloco { margin-top: 8px; }

/* ============================================================================
   Número do lote clicável + modal "Informações do Lote"
   (assets/js/lote_detalhe.js / lote_detalhe.php). Reaproveita .modal-fundo e
   .modal-caixa; disponível em todo o portal via includes/footer.php.
   ========================================================================== */

/* Gatilho: o número do lote vira um "chip" claramente clicável (button
   acessível) — fundo azul-claro, borda, lupa e cursor de link deixam evidente
   que dá para tocar/clicar e abrir os detalhes. */
.lote-num-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border: 1px solid rgba(35, 100, 194, 0.35);
    border-radius: 999px;
    background: var(--cor-campo);
    color: var(--cor-primaria);
    font: inherit;
    font-weight: 700;
    line-height: 1.35;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.lote-num-texto { white-space: nowrap; }
.lote-num-icone {
    width: 0.9em;
    height: 0.9em;
    flex: none;
    opacity: 0.75;
}
.lote-num-link:hover,
.lote-num-link:focus-visible {
    background: #dbe8fb;
    border-color: var(--cor-primaria);
    color: var(--cor-primaria-escura);
    box-shadow: 0 1px 4px rgba(35, 100, 194, 0.18);
}
.lote-num-link:hover .lote-num-icone,
.lote-num-link:focus-visible .lote-num-icone { opacity: 1; }
.lote-num-link:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
}
.lote-num-link:active { transform: translateY(1px); }

.lote-num-forte  { font-size: 0.95rem; }
.lote-num-titulo { font-size: 1.4rem; font-weight: 800; padding: 2px 12px; }

/* ---- Conteúdo do modal de detalhe ---- */
.lote-det-caixa { max-width: 620px; }
.lote-det-corpo { margin-top: 6px; }
.lote-det-carregando { padding: 22px 4px; text-align: center; }

.lote-det-secao {
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 14px;
}
.lote-det-secao:first-child { margin-top: 8px; }

.lote-det-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 14px;
    font-size: 0.98rem;
    font-weight: 700;
    color: #fff;
}
.lote-det-titulo span { font-size: 1.05rem; line-height: 1; }
/* Cabeçalho cinza para os dados do lote, azul da marca para o comprador, e um
   azul mais suave para a linha do tempo (espelha o padrão da imagem-referência,
   sempre com hexes/variáveis da identidade). */
.lote-det-titulo-lote      { background: #64707d; }
.lote-det-titulo-comprador { background: var(--cor-primaria); }
.lote-det-titulo-tempo     { background: var(--cor-primaria-escura); }

.lote-det-grade { padding: 12px 14px; }

.lote-det-linha {
    display: grid;
    grid-template-columns: minmax(120px, 40%) 1fr;
    gap: 6px 14px;
    padding: 7px 0;
    border-bottom: 1px solid var(--cor-borda);
}
.lote-det-linha:last-child { border-bottom: 0; }
.lote-det-rot {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cor-suave);
    font-weight: 700;
    align-self: center;
}
.lote-det-val { color: var(--cor-texto); font-weight: 700; align-self: center; }
.lote-det-val.quebra { font-weight: 600; }
.lote-det-obs { margin: 8px 0 0; }

/* ---- Linha do tempo (timeline vertical) ---- */
.lote-det-grade-tempo { padding: 14px 16px 10px; }

.lote-tl {
    list-style: none;
    margin: 0;
    padding: 0;
}
.lote-tl-item {
    position: relative;
    padding: 0 0 16px 26px;
    min-height: 22px;
}
/* Linha vertical que conecta os marcadores (some no último item). */
.lote-tl-item::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 4px;
    bottom: -2px;
    width: 2px;
    background: var(--cor-borda);
}
.lote-tl-item:last-child { padding-bottom: 2px; }
.lote-tl-item:last-child::before { display: none; }

/* Bolinha do marcador (cor por etapa). */
.lote-tl-marca {
    position: absolute;
    left: 0;
    top: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--cor-primaria);
    box-shadow: 0 0 0 2px #fff;
}
.lote-tl-cadastro .lote-tl-marca { border-color: var(--cor-suave); }
.lote-tl-leilao   .lote-tl-marca { border-color: #d98b16; }   /* âmbar: em pregão */
.lote-tl-venda    .lote-tl-marca { border-color: var(--cor-primaria); }
.lote-tl-pisteiro .lote-tl-marca { border-color: #7b52b8; }   /* roxo: etapa do pisteiro */
.lote-tl-vinculo  .lote-tl-marca { border-color: #1d8a4c; }   /* verde: concluído */
.lote-tl-boleta   .lote-tl-marca { border-color: #3f4650; }   /* grafite: boleta */
.lote-tl-pago     .lote-tl-marca { border-color: #1d6f3c; }   /* verde: pago */
.lote-tl-redoar   .lote-tl-marca { border-color: var(--cor-acento); }

.lote-tl-corpo {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.lote-tl-acao {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--cor-primaria-escura);
    line-height: 1.25;
}
.lote-tl-quem {
    color: var(--cor-texto);
    font-weight: 600;
    font-size: 0.92rem;
    word-break: break-word;
}
.lote-tl-quando {
    color: var(--cor-suave);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.lote-det-foto-secao {
    border: 0;
    padding: 0;
    text-align: center;
}
.lote-det-foto {
    max-width: 100%;
    max-height: 320px;
    border-radius: 10px;
    border: 1px solid var(--cor-borda);
    cursor: zoom-in;
}

@media (max-width: 480px) {
    .lote-det-linha { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
    .lote-det-rot { align-self: start; }
}

/* ------------------------------------------------------------ Kanban do evento
   Painel que monitora TODA a operação do leilão: uma coluna por etapa do fluxo
   dos lotes. Técnicas: grid horizontal com scroll-snap, cabeçalho de coluna
   sticky, cor de destaque por etapa via custom property (--kb-accent), relógio
   de permanência com níveis ok/aviso/crítico e "ponto vivo" pulsando para quem
   está na operação agora (respeita prefers-reduced-motion). */

.kanban-cabecalho { display: block; }
.kanban-resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.kanban-resumo-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--cor-suave);
}
.kanban-resumo-item strong { color: var(--cor-primaria-escura); }
.kanban-resumo-alerta {
    background: #fdecec;
    border-color: #f3c2c7;
    color: #a52834;
}
.kanban-resumo-alerta strong { color: #a52834; }
.kanban-resumo-atualizacao { font-style: italic; }

/* Quadro — DESKTOP: grade responsiva que QUEBRA LINHA (auto-fill): as colunas
   preenchem a largura e as que não couberem descem para a linha de baixo,
   aproveitando o espaço VERTICAL da página, SEM rolagem horizontal. Cada
   coluna limita a própria altura e rola os cards internamente. No celular
   (media query no fim da seção) vira um deck horizontal com scroll-snap. */
.kanban-quadro-wrap {
    margin: 14px 0 6px;
}
.kanban-quadro {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    align-items: start;
}

/* Coluna: superfície própria com faixa de cor da etapa no topo */
.kanban-col {
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    max-height: 72vh;
    overflow: hidden;
    --kb-accent: var(--cor-primaria);
    --kb-accent-suave: #e9f1fc;
}
.kanban-col-disponivel      { --kb-accent: #2364c2; --kb-accent-suave: #e9f1fc; }
.kanban-col-em_leilao       { --kb-accent: #8a6100; --kb-accent-suave: #fef7e6; }
.kanban-col-com_pisteiro    { --kb-accent: #e31661; --kb-accent-suave: #fdecf3; }
.kanban-col-contabilidade   { --kb-accent: #114591; --kb-accent-suave: #e9f1fc; }
.kanban-col-boleta_pendente { --kb-accent: #8a6100; --kb-accent-suave: #fef7e6; }
.kanban-col-conta_receber   { --kb-accent: #8a6100; --kb-accent-suave: #fef7e6; }
.kanban-col-conta_recebida  { --kb-accent: #1d6f3c; --kb-accent-suave: #e8f6ec; }

.kanban-col-topo {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 8px;
    background: var(--cor-card);
    border-bottom: 3px solid var(--kb-accent);
}
.kanban-col-titulo {
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--kb-accent);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
.kanban-col-qtde {
    min-width: 26px;
    text-align: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--kb-accent);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
}
.kanban-col-soma {
    margin: 0;
    padding: 6px 12px;
    background: var(--cor-card);
    border-bottom: 1px solid var(--cor-borda);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cor-suave);
    font-variant-numeric: tabular-nums;
}

.kanban-col-cards {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}
.kanban-col-vazia {
    margin: 0;
    padding: 16px 10px;
    text-align: center;
    color: var(--cor-suave);
    font-size: 0.85rem;
    border: 1px dashed var(--cor-borda);
    border-radius: 10px;
}
.kanban-col-mais {
    margin: 0;
    padding: 8px 10px;
    text-align: center;
    color: var(--cor-suave);
    font-size: 0.82rem;
    font-weight: 700;
}

/* Card do lote */
.kanban-card {
    background: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-left: 4px solid var(--kb-accent);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 1px 4px rgba(10, 31, 66, 0.06);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.kanban-card:hover {
    box-shadow: var(--sombra);
    transform: translateY(-1px);
}
/* Níveis de permanência: o próprio card muda de tom quando está parado demais */
.kanban-card.kanban-nivel-aviso   { background: #fffdf5; border-color: #eeddb0; border-left-color: #8a6100; }
.kanban-card.kanban-nivel-critico { background: #fff8f7; border-color: #f3c2c7; border-left-color: #a52834; }

.kanban-card-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.kanban-lote-btn { font-size: 0.95rem; }

/* Relógio de permanência na etapa */
.kanban-tempo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.kanban-tempo svg { width: 13px; height: 13px; }
.kanban-tempo-ok      { background: var(--cor-fundo); color: var(--cor-suave); }
.kanban-tempo-aviso   { background: #fef7e6; color: #8a6100; }
.kanban-tempo-critico { background: #fdecec; color: #a52834; }
.kanban-card.kanban-nivel-critico .kanban-tempo-critico { animation: kanban-piscar 1.6s ease-in-out infinite; }

.kanban-card-desc {
    margin: 6px 0 0;
    font-size: 0.88rem;
    color: var(--cor-texto);
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kanban-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}
.kanban-card-valor {
    margin-left: auto;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--cor-primaria-escura);
    font-variant-numeric: tabular-nums;
}
.kanban-selo-redoado {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #a52834;
    background: #fdecec;
    border-radius: 6px;
    padding: 2px 6px;
}

/* Quem está na operação: chip com as iniciais + login. "Vivo" = agora. */
.kanban-operador {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--cor-borda);
}
.kanban-avatar {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--kb-accent-suave);
    color: var(--kb-accent);
    font-size: 0.72rem;
    font-weight: 800;
}
.kanban-operador-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.kanban-operador-rotulo {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cor-suave);
}
.kanban-operador-login {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--cor-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kanban-operador-vivo .kanban-avatar { background: var(--kb-accent); color: #fff; }
.kanban-operador-vivo .kanban-operador-login { color: var(--kb-accent); }
.kanban-operador .kanban-ponto-vivo { margin-left: auto; }

/* Ponto "vivo" (verde pulsando): alguém está na operação AGORA */
.kanban-ponto-vivo {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #1d9e50;
    box-shadow: 0 0 0 0 rgba(29, 158, 80, 0.45);
    animation: kanban-pulso 1.8s ease-out infinite;
}

/* Lote em pregão: destaque âmbar suave pulsando (o momento mais quente) */
.kanban-card-pregao {
    background: #fffbf0;
    animation: kanban-pregao 2.4s ease-in-out infinite;
}

@keyframes kanban-pulso {
    0%   { box-shadow: 0 0 0 0 rgba(29, 158, 80, 0.45); }
    70%  { box-shadow: 0 0 0 7px rgba(29, 158, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(29, 158, 80, 0); }
}
@keyframes kanban-piscar {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
@keyframes kanban-pregao {
    0%, 100% { border-color: #eeddb0; }
    50%      { border-color: #8a6100; border-left-color: #8a6100; }
}
@media (prefers-reduced-motion: reduce) {
    .kanban-ponto-vivo,
    .kanban-card-pregao,
    .kanban-card.kanban-nivel-critico .kanban-tempo-critico { animation: none; }
    .kanban-card, .kanban-card:hover { transition: none; transform: none; }
}

.kanban-dica { margin-top: 4px; }

/* Celular: deck horizontal com "encaixe" coluna a coluna (uma etapa por vez
   na tela estreita; desliza para o lado para ver as demais). */
@media (max-width: 640px) {
    .kanban-quadro-wrap {
        overflow-x: auto;
        padding-bottom: 10px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .kanban-quadro {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 84vw;
    }
    .kanban-col { max-height: none; }
    .kanban-col-cards { max-height: 62vh; }
}

/* Aviso "EM ATENDIMENTO" nos cards do Assistente pisteiro (outro pisteiro —
   ou você — já abriu o vínculo deste lote) */
.pist-atendimento {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px auto 0;
    padding: 8px 14px;
    background: #fdecf3;
    border: 1px solid #e31661;
    border-radius: 999px;
    color: #c11152;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.pist-atendimento-meu {
    background: #e8f6ec;
    border-color: #1d6f3c;
    color: #1d6f3c;
}
.pist-atendimento-tempo { font-weight: 700; opacity: 0.85; }