/* Aba Guias.
   Tudo desta aba é desenhado por js/features/guias/page.js — o painel no index.html nasce vazio.

   AS CORES SÃO AS DO SISTEMA, não uma paleta própria: --primary-blue nas barras comuns e
   --primary-orange no que é urgente. A tela mostra lembrete, e lembrete pede destaque em um lugar
   só; se tudo fosse colorido, nada seria urgente.

   SÃO DUAS TELAS, e o seletor no topo troca entre elas: "Próximos envios" (o que sairia, calculado
   na hora e sem mandar nada) e "Guias já enviadas" (o histórico, lido do banco). As duas usam os
   mesmos blocos — tiles, painéis de barra, tabela —, e isso é de propósito: quem aprendeu a ler
   uma não reaprende a outra. */

.guias-corpo {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- cabeçalho e estado do automático ---------- */

.guias-cabecalho {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.guias-estado {
    flex: 1 1 320px;
    padding: 10px 14px;
    border-radius: 6px;
    border-left: 4px solid var(--primary-blue);
    background: var(--bg-light);
    font-size: 13.5px;
    line-height: 1.5;
}

.guias-estado-ok { border-left-color: #1d7a4f; }
.guias-estado-aviso { border-left-color: var(--primary-orange); }
.guias-estado-alerta {
    border-left-color: #b3261e;
    background: #fdecea;
    color: #7a1a14;
}

.guias-cabecalho-acoes {
    display: flex;
    align-items: center;
    gap: 12px;
}

.guias-periodo {
    font-size: 12.5px;
    color: #5a6270;
    white-space: nowrap;
}

/* ---------- tiles ---------- */

.guias-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.guias-tile {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 6px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.guias-tile-valor {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--primary-blue);
    font-variant-numeric: tabular-nums;
}

.guias-tile.atencao .guias-tile-valor { color: var(--primary-orange); }
.guias-tile.grave .guias-tile-valor { color: #b3261e; }

.guias-tile-rotulo {
    font-size: 12.5px;
    color: #5a6270;
    line-height: 1.35;
}

.guias-tile-rodape {
    margin-top: auto;
    padding-top: 6px;
    font-size: 11px;
    color: #8b929d;
}

/* ---------- painéis ---------- */

.guias-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 16px;
}

.guias-painel {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 6px;
    padding: 16px 18px 18px;
    min-width: 0;
}

.guias-painel h3 {
    margin: 0 0 14px;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #5a6270;
}

.guias-vazio {
    margin: 0;
    padding: 18px 4px;
    color: #5a6270;
    font-size: 13.5px;
    line-height: 1.55;
}

.guias-nota {
    margin: 0 0 8px;
    font-size: 12px;
    color: #8b929d;
    line-height: 1.5;
}

/* ---------- barras ---------- */

.guias-barras {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.guias-barra-linha {
    display: grid;
    grid-template-columns: minmax(120px, 42%) 1fr auto;
    gap: 10px;
    align-items: center;
}

/* O RÓTULO QUEBRA EM LINHA, E NÃO EM RETICÊNCIAS.
 *
 * Ele era `nowrap` com `text-overflow: ellipsis`, e o marco mais longo — "Venceu há 2 dias e
 * continua sem leitura" — chegava à tela como "Venceu há 2 dias e continua se...". Justamente o
 * fim da frase, que é o que a distingue das outras três: todas começam em "Vence".
 *
 * Reticências num gráfico custam mais do que numa tabela. A pessoa está comparando quatro barras
 * de relance; se o rótulo não se completa, ela precisa parar, passar o mouse e esperar o balão —
 * e a leitura de relance, que é a razão de existir do gráfico, já se perdeu.
 *
 * Duas linhas de rótulo crescem a altura da linha em poucos pixels. As barras continuam
 * alinhadas porque o `align-items: center` centra cada uma contra o seu rótulo. */
.guias-barra-rotulo {
    font-size: 13px;
    color: #1b1f27;
    line-height: 1.35;
    /* Razão social e CNPJ entram aqui também, e vêm da Acessorias sem garantia de espaço para
       quebrar: sem isto, um nome longo sem espaços estoura a coluna em vez de quebrar. */
    overflow-wrap: anywhere;
}

.guias-barra-trilho {
    background: #eef1f5;
    height: 12px;
    border-radius: 2px;
    overflow: hidden;
}

.guias-barra-preenchimento {
    height: 100%;
    background: var(--primary-blue);
    border-radius: 0 3px 3px 0;
    min-width: 2px;
}

.guias-barra-preenchimento.urgente { background: var(--primary-orange); }

.guias-barra-valor {
    font-size: 12.5px;
    color: #5a6270;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* ---------- colunas por dia ---------- */

.guias-colunas {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 150px;
    padding-top: 20px;
    border-bottom: 1px solid #d6dbe3;
}

.guias-coluna {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}

.guias-coluna-numero {
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    color: #5a6270;
    font-variant-numeric: tabular-nums;
}

.guias-coluna-preenchimento {
    background: var(--primary-blue);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
}

.guias-colunas-eixo {
    display: flex;
    gap: 2px;
    margin-top: 6px;
}

.guias-colunas-eixo span {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 10px;
    color: #8b929d;
    overflow: hidden;
}

/* ---------- filtros e tabela ---------- */

.guias-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.guias-filtros select,
.guias-filtros .guias-busca {
    font-size: 13px;
    padding: 6px 9px;
    border: 1px solid #cfd6e0;
    border-radius: 4px;
    background: #fff;
    color: #1b1f27;
    min-height: 32px;
}

.guias-filtros .guias-busca {
    flex: 1 1 220px;
    min-width: 170px;
}

.guias-contagem {
    margin: 0 0 8px;
    font-size: 12px;
    color: #5a6270;
    font-variant-numeric: tabular-nums;
}

/* A tabela é larga: rola dentro do próprio container, e nunca faz a página rolar de lado. */
.guias-tabela-rolagem {
    overflow-x: auto;
    border: 1px solid #e4e7ec;
    border-radius: 4px;
}

.guias-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.guias-tabela th,
.guias-tabela td {
    text-align: left;
    padding: 8px 11px;
    border-bottom: 1px solid #eef1f5;
    vertical-align: top;
}

.guias-tabela th {
    background: #f2f4f7;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #5a6270;
    font-weight: 600;
    white-space: nowrap;
}

.guias-tabela tbody tr:hover { background: #f8f9fb; }

.guias-td-empresa { min-width: 190px; }
.guias-td-data { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.guias-td-num { text-align: right; font-variant-numeric: tabular-nums; }

.guias-cnpj {
    font-size: 11px;
    color: #8b929d;
    font-variant-numeric: tabular-nums;
}

.guias-etiqueta {
    display: inline-block;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 3px;
    white-space: nowrap;
    background: #eef1f5;
    color: #5a6270;
}

.guias-etiqueta.ok { background: #e3f2e9; color: #1d7a4f; }
.guias-etiqueta.atencao { background: #fdeee2; color: #a34700; margin-left: 6px; }
.guias-etiqueta.grave { background: #fdecea; color: #b3261e; }

/* O erro vem de um servidor SMTP de terceiro: pode ser longo e não pode estourar a coluna. */
.guias-erro {
    margin-top: 4px;
    font-size: 11px;
    color: #b3261e;
    line-height: 1.4;
    max-width: 340px;
    overflow-wrap: anywhere;
}

.guias-paginacao {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    font-size: 12.5px;
    color: #5a6270;
}

@media (max-width: 720px) {
    .guias-cabecalho-acoes { width: 100%; justify-content: space-between; }
    .guias-barra-linha { grid-template-columns: minmax(100px, 46%) 1fr auto; }
}

/* ---------- o seletor das duas telas ---------- */

/* DOIS BOTÕES NUMA PEÇA SÓ, e não dois botões soltos. Encostados e dentro de uma moldura, eles se
   leem como "uma coisa em dois estados" — que é o que são. Soltos, pareceriam duas ações, e a
   pessoa ficaria procurando qual foi a que ela acabou de disparar. */
.guias-abas {
    display: inline-flex;
    align-self: flex-start;
    gap: 2px;
    padding: 3px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    background: var(--bg-light);
}

.guias-aba {
    border: 0;
    background: none;
    padding: 7px 16px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #5a6270;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.guias-aba:hover:not(.ativa) {
    color: var(--primary-blue);
}

/* A ATIVA É FUNDO BRANCO, E NÃO LARANJA. O laranja desta aba está reservado para o que é urgente
   — guia vencida, envio que falhou. Gastá-lo em "você está aqui" tiraria o significado dele nos
   dois lugares onde ele importa. */
.guias-aba.ativa {
    background: #fff;
    color: var(--primary-blue);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.guias-aba:focus-visible {
    outline: 2px solid var(--primary-orange);
    outline-offset: 2px;
}

/* ---------- legendas e cópias ---------- */

/* A frase abaixo de um título de painel. Existe para o número não ser lido como julgamento: o
   corte por analista, sem legenda, vira ranking de desempenho na cabeça de quem lê. */
.guias-legenda {
    margin: -4px 0 10px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #5a6270;
}

/* Quem entra em cópia na prévia. Endereço é longo e não pode esticar a coluna. */
.guias-copias {
    font-size: 11.5px;
    line-height: 1.5;
    color: #5a6270;
    overflow-wrap: anywhere;
    max-width: 320px;
}

/* A oculta é escrita mais apagada porque ela NÃO aparece para quem recebe o e-mail — só para quem
   administra o envio, que é quem está olhando esta tela. */
.guias-copias.oculta {
    color: #8a919c;
    font-style: italic;
}

/* Os momentos de um destinatário saem lado a lado; sem isto eles se encostam. */
.guias-tabela td .guias-etiqueta + .guias-etiqueta {
    margin-left: 6px;
}

.guias-etiqueta.neutro {
    background: #eef1f5;
    color: #5a6270;
}

/* ---------- o dia de referência da prévia ---------- */

/* Mesma gramática do seletor de telas, um degrau abaixo: peça única, encostados, o escolhido em
   branco. São controles irmãos e precisam parecer irmãos — o de cima escolhe O QUE se vê, este
   escolhe QUANDO. */
.guias-dias {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    background: var(--bg-light);
}

.guias-dia {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #5a6270;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.guias-dia:hover:not(.ativo) {
    color: var(--primary-blue);
}

.guias-dia.ativo {
    background: #fff;
    color: var(--primary-blue);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.guias-dia:focus-visible {
    outline: 2px solid var(--primary-orange);
    outline-offset: 2px;
}

/* O PONTO DIZ "ESTE RESPONDE NA HORA". Um dia já calculado volta do cache; um que não está custa
   quatro minutos de varredura. Sem a marca, as três opções parecem igualmente baratas e a espera
   pega a pessoa de surpresa depois do clique. */
.guias-dia-pronto {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary-green, #1d7a4f);
    flex: none;
}

/* O aviso de que um dia à frente é hipótese. Fica acima dos números, e não abaixo: depois deles,
   já teria sido lido como previsão. */
.guias-legenda-aviso {
    margin: 0;
    padding: 9px 12px;
    border-radius: 6px;
    border-left: 3px solid var(--primary-orange);
    background: #fdf6f0;
    color: #6b4a33;
}

/* ---------- o recorte do histórico ---------- */

/* Uma linha só, que quebra em telas estreitas. Fica ABAIXO do cabeçalho e ACIMA dos números: é o
   que decide o que os números querem dizer, e depois deles já teria sido lido tarde. */
.guias-periodo-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.guias-periodo-intervalo {
    display: flex;
    align-items: center;
    gap: 7px;
}

.guias-periodo-rotulo {
    font-size: 12.5px;
    color: #5a6270;
}

.guias-data {
    font-family: inherit;
    font-size: 13px;
    color: #1b1f27;
    padding: 6px 8px;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    background: #fff;
}

.guias-data:focus-visible {
    outline: 2px solid var(--primary-orange);
    outline-offset: 1px;
}

/* A FRASE DO RECORTE MUDA DE PESO QUANDO HÁ RECORTE. Em "Tudo" ela é só uma legenda; com filtro
   ligado, ela é a ressalva que impede o número de ser lido como total, e precisa ser vista. */
.guias-periodo.recortado {
    font-weight: 600;
    color: #a34700;
}

/* O rótulo do período empurra para a direita quando sobra espaço, e não gruda nos campos. */
.guias-periodo-barra .guias-periodo {
    margin-left: auto;
}

/* ---------- o cartão de média por momento ---------- */

/* Ele carrega quatro linhas, e não um número gigante. Ocupa duas colunas da grade porque os
   rótulos dos momentos são frases ("Venceu há 2 dias e continua sem leitura") — na largura de um
   tile comum cada linha quebraria em três, e a comparação entre os quatro, que é o ponto do
   cartão, se perderia. */
.guias-tile-lista {
    grid-column: span 2;
}

.guias-tile-lista .guias-tile-rotulo {
    font-weight: 600;
    color: #1b1f27;
    margin-bottom: 8px;
}

.guias-tile-linhas {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.guias-tile-linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: #5a6270;
}

.guias-tile-linha-nome {
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* O número é o que se compara, então ele é o que se lê primeiro: tabular para os quatro ficarem
   na mesma caixa e a vírgula alinhada de cima a baixo. */
.guias-tile-linha-valor {
    flex: none;
    font-size: 15px;
    font-weight: 600;
    color: #1b1f27;
    font-variant-numeric: tabular-nums;
}

/* Vencida e hoje são os dois momentos em que o cliente já perde dinheiro. Mesmo laranja das
   barras urgentes — e só no número, para a linha não virar um bloco colorido. */
.guias-tile-linha.urgente .guias-tile-linha-valor {
    color: var(--primary-orange);
}

@media (max-width: 720px) {
    .guias-tile-lista { grid-column: span 1; }
}