/* Lista padrão do dashboard (components/lista_biomed.py, spec do design system §5.1).
   Cor só por token, com par próprio no tema escuro. Letras: 14 px na lista, 12,5 px em rótulo.
   Linha de 36 px igual a `ALTURA_LINHA_PX` de lista_nucleo.py: mudou lá, muda aqui. */
:root {
    --lista-linha: 36px;
    --lista-coluna-nome: 276px;
    --lista-acao: var(--bmd-action);
    --lista-acao-hover: var(--bmd-action-hover);
    --lista-acao-fundo: var(--bmd-action-bg);
    --lista-sobre-acao: var(--bs-white);
    --lista-link: var(--bmd-link);
    --lista-link-forte: var(--bmd-link-hover);  /* AA sobre o fundo teal claro */
    --lista-negativo: var(--bmd-danger);
    --lista-erro-fundo: var(--bmd-danger-bg);
    --lista-fundo: var(--biomed-card-bg);
    --lista-fundo-hover: var(--biomed-card-bg-hover);
    --lista-fundo-pe: var(--biomed-bg);
    --lista-borda: var(--biomed-border);
    --lista-borda-forte: var(--gray-300);
    --lista-texto: var(--biomed-text);
    --lista-apoio: var(--bmd-fg-muted);
}

.lista-biomed {
    position: relative;
    display: flex;
    flex-direction: column;
    /* --lista-topo vem do navegador: posição da lista na página. */
    height: calc(100vh - var(--lista-topo, 180px) - 16px);
    min-height: 420px;
    color: var(--lista-texto);
    background: var(--lista-fundo);
    border: 1px solid var(--lista-borda);
    border-radius: var(--radius-md);
    font-size: 14px;
}

/* Lista no meio de página analítica: uma tela de altura, não a sobra abaixo do que vem antes. */
.lista-em-pagina-longa .lista-biomed { height: calc(100vh - 96px); }

/* Barra */
.lista-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--lista-borda);
}
.lista-barra__direita { display: flex; gap: 8px; margin-left: auto; }
.lista-rotulo { margin: 0; }
.lista-biomed .lista-controle {
    height: 36px;
    min-height: 36px;
    padding-top: 0;
    padding-bottom: 0;
    border-color: var(--lista-borda-forte);
    font-size: 14px;
    width: auto;
}
.lista-busca { position: relative; flex: 1 1 240px; max-width: 340px; }
.lista-busca .lista-rotulo { display: block; }
.lista-biomed .lista-busca .lista-controle { width: 100%; padding-left: 32px; }
.lista-busca__icone {
    position: absolute;
    top: 10px;
    left: 11px;
    z-index: 1;
    color: var(--lista-apoio);
    pointer-events: none;
}

/* Botões: teal é a ação da área, o resto é contorno ou texto (design-system.md 4.5). */
.lista-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    color: var(--lista-texto);
    background: transparent;
    border: 1px solid var(--lista-borda-forte);
    border-radius: var(--radius-sm);
    font-size: var(--bmd-fs-texto);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.lista-btn:hover { background: var(--lista-fundo-hover); }
.lista-btn[aria-expanded="true"] { color: var(--lista-link-forte); background: var(--lista-acao-fundo); }
.lista-btn--leve { color: var(--lista-link); border-color: transparent; }
.lista-btn--acao { color: var(--lista-sobre-acao); background: var(--lista-acao); border-color: var(--lista-acao); }
.lista-btn--acao:hover { background: var(--lista-acao-hover); }

.lista-biomed button:focus-visible,
.lista-biomed a:focus-visible,
.lista-rolagem:focus-visible {
    outline: 2px solid var(--lista-link);
    outline-offset: 1px;
}
.lista-rolagem:focus-visible { outline-offset: -2px; }

/* Painéis por cima da tabela: abrir não muda a área e não refaz a consulta. */
.lista-paineis { position: relative; z-index: 6; }
.lista-painel-recolhe,
.lista-painel-recolhe.collapsing { position: absolute; top: 4px; left: 14px; }
.lista-painel-recolhe--direita,
.lista-painel-recolhe--direita.collapsing { left: auto; right: 14px; }
.lista-painel {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 640px;
    padding: 12px;
    background: var(--lista-fundo);
    border: 1px solid var(--lista-borda-forte);
    border-radius: var(--radius-md);
    box-shadow: var(--biomed-shadow-md);
}
.lista-campo { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 180px; }
.lista-biomed .lista-campo .lista-controle { width: 100%; }
.lista-campo--faixa { min-width: 280px; }
.lista-faixa { display: flex; gap: 6px; }
.lista-faixa .lista-rotulo { flex: 1; min-width: 0; }
.lista-campo__rotulo { color: var(--lista-apoio); font-size: 12.5px; font-weight: 600; }

.lista-aviso:empty { display: none; }
.lista-aviso {
    position: absolute;
    top: 4px;
    left: 50%;
    max-width: 70%;
    padding: 6px 14px;
    color: var(--lista-texto);
    background: var(--lista-acao-fundo);
    border: 1px solid var(--lista-borda-forte);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    transform: translateX(-50%);
}

/* Tabela */
.lista-rolagem { flex: 1; min-height: 0; overflow: auto; }
/* Carga: a tabela fica na tela, apagada, com o aro por cima a partir de 200 ms. É o atributo que o
   Dash põe em quem espera resposta: envolver a tabela em dcc.Loading tiraria o foco do botão. */
.lista-rolagem[data-dash-is-loading="true"] { opacity: 0.6; }
.lista-biomed:has(> .lista-rolagem[data-dash-is-loading="true"])::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid var(--lista-borda-forte);
    border-top-color: var(--lista-link);
    border-radius: 50%;
    opacity: 0;
    animation: lista-aparece 1ms linear 200ms forwards, lista-gira 0.8s linear infinite;
}
@keyframes lista-aparece { to { opacity: 1; } }
@keyframes lista-gira { to { transform: rotate(360deg); } }
.lista-tabela {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.lista-tabela th,
.lista-tabela td {
    height: var(--lista-linha);
    padding: 0 9px;
    color: var(--lista-texto);
    background: var(--lista-fundo);
    border-bottom: 1px solid var(--lista-borda);
    text-align: left;
    white-space: nowrap;
}
.lista-tabela .lista-num { text-align: right; }
.lista-tabela .lista-negativo { color: var(--lista-negativo); }
.lista-tabela td.lista-texto {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lista-tabela thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 2px solid var(--lista-borda);
    font-size: 12.5px;
    font-weight: 700;
}
.lista-ordem {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}
.lista-num .lista-ordem { flex-direction: row-reverse; }
.lista-ordem .bi { font-size: 12.5px; color: var(--lista-apoio); }
.lista-tabela thead th.lista-ordenada,
.lista-ordenada .lista-ordem .bi { color: var(--lista-link); }
.lista-tabela tbody tr:hover td { background: var(--lista-fundo-hover); }
.lista-biomed .lista-tabela td a.lista-link { color: var(--lista-link); font-weight: 600; text-decoration: none; }
.lista-biomed .lista-tabela td a.lista-link:hover { text-decoration: underline; }
/* Nome que age na própria tela (abre as notas do cliente): botão, com a cara do link. */
.lista-link--botao {
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    color: var(--lista-link);
    background: none;
    border: 0;
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-overflow: ellipsis;
    cursor: pointer;
}
.lista-link--botao:hover { text-decoration: underline; }
.lista-forte { font-weight: 700; }
/* Número que abre a janela no lugar do nome: corta como o nome, sem alargar a coluna. */
.lista-tabela td.lista-texto .numero-detalhe {
    max-width: 100%;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Texto que não pode sumir (`multilinha`): fica com a largura que sobra. Duas linhas cabem nos
   36 px da linha, então "Ajustar à tela" acerta a conta; de três em diante a linha cresce e a
   lista rola na vertical; na horizontal, nunca. */
.lista-tabela td.lista-multilinha {
    width: 100%;
    min-width: 180px;
    max-width: 0;
    padding-top: 2px;
    padding-bottom: 2px;
    overflow: visible;
    font-size: 12.5px;
    line-height: 1.2;
    overflow-wrap: anywhere;
    white-space: normal;
}
/* Nome que abre detalhe: quebra como o texto ao redor. O pontilhado acompanha cada linha. */
.lista-tabela td.lista-multilinha .numero-detalhe,
.lista-tabela td.lista-multilinha .lista-link--botao {
    max-width: 100%;
    overflow: visible;
    border-bottom: 0;
    text-align: left;
    text-overflow: clip;
    white-space: normal;
}
.lista-tabela td.lista-multilinha .numero-detalhe {
    text-decoration: underline dotted var(--gray-400);
    text-underline-offset: 2px;
}
.lista-tabela td.lista-multilinha .numero-detalhe:hover { text-decoration-color: var(--lista-link); }

/* Primeira coluna fixa; com seleção, a caixa vem antes e também fica. */
.lista-tabela th:first-child,
.lista-tabela td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 236px;
    min-width: 236px;
    max-width: 236px;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid var(--lista-borda);
}
/* Nome (`multilinha`) na coluna fixa: largura para duas linhas de um nome de NF-e (60 letras). */
.lista-tabela th.lista-multilinha:first-child,
.lista-tabela td.lista-multilinha:first-child {
    width: var(--lista-coluna-nome);
    min-width: var(--lista-coluna-nome);
    max-width: var(--lista-coluna-nome);
    overflow: visible;
}
.lista-tabela thead th:first-child { z-index: 3; }
.lista-tabela .lista-selecao,
.lista-tabela--selecao th:first-child,
.lista-tabela--selecao td:first-child {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    padding: 0 8px;
    border-right: 0;
}
.lista-selecao .form-check { display: flex; align-items: center; min-height: 0; margin: 0; padding: 0; }
.lista-selecao .form-check-input { float: none; margin: 0; }
.lista-tabela--selecao th:nth-child(2),
.lista-tabela--selecao td:nth-child(2) {
    position: sticky;
    left: 36px;
    z-index: 1;
    width: 236px;
    min-width: 236px;
    max-width: 236px;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid var(--lista-borda);
}
.lista-tabela--selecao th.lista-multilinha:nth-child(2),
.lista-tabela--selecao td.lista-multilinha:nth-child(2) {
    width: var(--lista-coluna-nome);
    min-width: var(--lista-coluna-nome);
    max-width: var(--lista-coluna-nome);
    overflow: visible;
}
.lista-tabela--selecao thead th:nth-child(2) { z-index: 3; }

.lista-tabela tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--lista-fundo-pe);
    border-top: 2px solid var(--lista-borda);
    border-bottom: 0;
    font-weight: 700;
}
.lista-tabela tfoot td:first-child,
.lista-tabela--selecao tfoot td:nth-child(2) { z-index: 2; }

.lista-tabela td.lista-vazio {
    position: static;
    width: auto;
    max-width: none;
    height: 96px;
    color: var(--lista-apoio);
    border-right: 0;
    text-align: center;
}
.lista-mensagem { padding: 32px; text-align: center; }
.lista-mensagem--erro { color: var(--lista-negativo); background: var(--lista-erro-fundo); }

/* Rodapé */
.lista-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    min-height: 52px;
    padding: 8px 14px;
    border-top: 1px solid var(--lista-borda);
}
.lista-contagem { font-variant-numeric: tabular-nums; }
.lista-tamanho { display: flex; align-items: center; gap: 8px; margin: 0; }
.lista-paginacao { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.lista-pagina {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    color: var(--lista-texto);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.lista-pagina:hover:not(:disabled) { background: var(--lista-fundo-hover); }
.lista-pagina[aria-current="page"],
.lista-pagina[aria-current="page"]:hover:not(:disabled) { color: var(--lista-sobre-acao); background: var(--lista-acao); }
.lista-pagina:disabled { color: var(--lista-apoio); opacity: 0.6; cursor: default; }
.lista-reticencias { padding: 0 4px; color: var(--lista-apoio); }

/* Recorte vindo de outra aba, acima da lista. */
.lista-recorte {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 8px;
    font-size: 12.5px;
}
.lista-recorte[hidden] { display: none; }