/**
 * exportacao.css — bloco de exportação da barra lateral do mapa e acabamento
 * da mini-tabela de registros.
 *
 * Carregado DEPOIS de extras.css: as poucas regras que repetem seletores de lá
 * (.registro-table-wrap, .td-desc) existem para corrigir defeitos apontados na
 * auditoria (cabeçalho fixo que não grudava, truncamento em 100 px) sem editar
 * o arquivo de outro agente.
 *
 * Tudo sai dos tokens de variables.css — funciona nos dois temas.
 */

/* ------------------------------------------------------------------ */
/* Utilitário: texto só para leitor de tela                            */
/* ------------------------------------------------------------------ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------ */
/* Bloco "Exportar dados"                                              */
/* ------------------------------------------------------------------ */
.export-bloco {
    font-size: 12px;
}

.export-campo {
    margin-bottom: 8px;
}

.export-campo > label {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--cor-texto-terciario);
}

.export-select {
    width: 100%;
    padding: 7px 8px;
    font-size: 13px;
    color: var(--cor-texto);
    background: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.export-select:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 1px;
}

/* Linha de ajuda: para que serve o formato / o que o escopo significa. */
.export-ajuda {
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--cor-texto-secundario);
}

.export-ajuda.aviso {
    color: var(--cor-aviso);
    font-weight: 600;
}

.export-opcao {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 7px 0;
    line-height: 1.4;
}

.export-opcao input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    accent-color: var(--cor-primaria);
    cursor: pointer;
}

.export-opcao label {
    font-size: 12px;
    color: var(--cor-texto);
    cursor: pointer;
}

/* Contagem prévia: quantos registros o arquivo vai ter, antes do clique. */
.export-contagem {
    margin: 8px 0 6px;
    padding: 7px 9px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--cor-texto);
    background: var(--cor-fundo-input);
    border-left: 3px solid var(--cor-primaria);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.export-contagem strong {
    font-weight: 700;
    color: var(--cor-primaria);
}

.btn-exportar {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--cor-sobre-primaria);
    background: var(--cor-primaria);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.btn-exportar:hover:not(:disabled) {
    background: var(--cor-primaria-hover);
}

.btn-exportar:disabled {
    opacity: .6;
    cursor: progress;
}

.export-progresso {
    display: block;
    width: 100%;
    height: 6px;
    margin-top: 6px;
}

.btn-exportar-secundario {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 7px 10px;
    font-family: inherit;
    font-size: 12px;
    color: var(--cor-texto-secundario);
    background: none;
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.btn-exportar-secundario:hover {
    background: var(--cor-fundo-input);
}

/* Resultado da última exportação: fica na tela (o toast some em 4 s). */
.export-resultado {
    margin-top: 9px;
    padding: 8px 10px;
    font-size: 11.5px;
    line-height: 1.5;
    background: var(--cor-fundo-input);
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius-sm);
}

.export-resultado h4 {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--cor-texto-terciario);
}

.export-resultado ul {
    margin: 0;
    padding-left: 16px;
}

.export-resultado li {
    margin-bottom: 2px;
    color: var(--cor-texto-secundario);
}

.export-resultado li.ok {
    color: var(--cor-texto);
}

.export-resultado li.alerta {
    color: var(--cor-aviso);
    font-weight: 600;
}

.export-resultado li.falha {
    color: var(--cor-erro);
    font-weight: 600;
}

/* Botão da barra de ferramentas que abre o bloco. */
.btn-export-abrir {
    font-weight: 700;
    color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

.link-registros {
    display: inline-block;
    text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Mini-tabela da barra lateral                                        */
/* ------------------------------------------------------------------ */

/*
 * Achados #51/#114: o `position:sticky` do <th> se ancora no ancestral que
 * rola. Com `overflow:auto` e altura automática, o wrapper virava esse
 * ancestral e nunca rolava — o cabeçalho subia junto. Dando altura ao wrapper,
 * é ele quem rola e o cabeçalho gruda de verdade.
 */
.sidebar-scroll {
    display: flex;
    flex-direction: column;
}

.registro-list {
    flex: 0 0 auto;
}

.registro-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.registro-table {
    min-width: 560px;   /* 6 colunas legíveis; o wrapper rola na horizontal */
}

.registro-table caption {
    padding: 0;
    text-align: left;
}

.registro-table th {
    z-index: 2;
    box-shadow: inset 0 -2px 0 var(--cor-borda);
}

.registro-table th[aria-sort] {
    white-space: nowrap;
}

/* Zebra: em 12 px com linhas baixas, o olho pula de linha sem ela. */
.registro-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--cor-texto) 4%, var(--cor-fundo-card));
}

/* O hover precisa vencer a zebra (fundo pintado na célula, não na linha). */
.registro-table tbody tr:hover td {
    background: color-mix(in srgb, var(--cor-primaria) 9%, var(--cor-fundo-card));
}

.registro-table tbody tr:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: -2px;
}

.registro-table tbody tr.linha-ativa td {
    background: color-mix(in srgb, var(--cor-primaria) 14%, var(--cor-fundo-card));
}

/* Achados #42/#109: 100 px cortava "Chrysocyon brachyurus" em 12 caracteres. */
.registro-table .td-desc,
.td-desc {
    max-width: 200px;
}

.td-cientifico {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Achados #71/#109: o bloco inteiro era itálico, então "— Espécie" e o "sp."
 * saíam em itálico junto com o binômio — erro de nomenclatura elementar. Agora
 * o itálico vem só do <em>, e o rank é um selo em romano.
 */
.registro-list-item .item-titulo-cientifico,
.td-cientifico {
    font-style: normal;
}

.registro-list-item .item-titulo-cientifico em,
.td-cientifico em {
    font-style: italic;
}

.rank-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 0 4px;
    font-size: 9.5px;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--cor-texto-terciario);
    border: 1px solid var(--cor-borda-forte);
    border-radius: 3px;
    vertical-align: 1px;
}

.td-observador {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.td-coord {
    font-family: var(--font-mono);
    font-size: 10.5px;
    white-space: nowrap;
    text-align: right;
}

.td-vazio {
    color: var(--cor-texto-terciario);
}

/* Ponto colorido da categoria: mesma cor do pino no mapa. */
.cat-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
    vertical-align: 0;
}

.td-categoria {
    white-space: nowrap;
}

/* Badge de status, com as mesmas cores dos cartões do painel. */
.badge-status {
    display: inline-block;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: #757575;
    border-radius: 999px;
    white-space: nowrap;
}

.badge-status-pendente { background: #8a7a4f; }
.badge-status-revisado { background: #1565c0; }
.badge-status-aprovado { background: #2e7d32; }
.badge-status-rejeitado { background: #c62828; }

/* Estado vazio e rodapé de paginação dentro da tabela. Ambos precisam vencer
   a zebra e o hover (que pintam o fundo na célula). */
.registro-table tbody tr.linha-mensagem td {
    padding: 18px 10px;
    text-align: left;
    color: var(--cor-texto-terciario);
    background: var(--cor-fundo-card);
}

.registro-table tbody tr.linha-rodape td {
    padding: 10px 8px;
    text-align: left;
    background: var(--cor-fundo-card);
}

/* Dentro da célula o botão não pode virar uma barra cheia (width:100% herdado).
   Alinhado à esquerda para continuar visível sem rolar na horizontal. */
.registro-table tbody tr.linha-rodape .btn-carregar-mais {
    width: auto;
    min-width: 150px;
    padding: 7px 18px;
}

/* Item da lista: agora focável por teclado (achados #30/#124). */
.registro-list-item:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: -2px;
}

.registro-list-item.linha-ativa {
    background: color-mix(in srgb, var(--cor-primaria) 12%, var(--cor-fundo-card));
}

/* ------------------------------------------------------------------ */
/* Botão flutuante "Registrar aqui" (achado #32)                       */
/* ------------------------------------------------------------------ */
.btn-registrar-aqui {
    position: absolute;
    top: 58px;
    right: 14px;
    z-index: 1050;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--cor-primaria);
    background: var(--cor-fundo-card);
    border: 1px solid var(--cor-primaria);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
    cursor: pointer;
}

.btn-registrar-aqui:hover {
    background: color-mix(in srgb, var(--cor-primaria) 12%, var(--cor-fundo-card));
}

@media (max-width: 768px) {
    .btn-registrar-aqui {
        top: auto;
        bottom: 68px;
        right: 14px;
        z-index: 1500;
        min-height: 44px;
    }

    /* Alvos de toque confortáveis nos controles da barra (achado #24). */
    .btn-exportar { min-height: 46px; }
    .export-select { min-height: 40px; font-size: 16px; }
    .btn-export-abrir { min-height: 34px; }
}