/* Convênios — versão para computador. Só entra a partir de 900px: no
   celular nada aqui vale e a tela continua igual.

   É no computador que a recepção lança o mês inteiro, então aqui os
   atendimentos viram TABELA (como a aba do plano na planilha) e o
   formulário abre no meio da tela. O resto é o padrão dos apps Covais e
   Financeiro: a navegação de baixo vira uma coluna fixa à esquerda.

   ⚠️ Só CSS, carregado por último. */
@media screen and (min-width:900px){
:root{--coluna:236px;--faixa-larga:1180px}

body{background:var(--papel)}
.app{max-width:none;margin:0 0 0 var(--coluna);background:transparent;box-shadow:none;padding-bottom:40px}

.nav{top:0;right:auto;bottom:0;width:var(--coluna);max-width:none;margin:0;
flex-direction:column;gap:4px;padding:18px 12px;border-top:0;border-right:1px solid var(--linha);
background:var(--cartao);backdrop-filter:none}
.nav button{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;height:46px;
padding:0 14px;border-radius:11px;font-size:15px}
.nav button svg{width:21px;height:21px}
.nav button[aria-current]{background:var(--cor-claro)}
.nav button:hover{background:var(--papel)}
.nav button[aria-current]:hover{background:var(--cor-claro)}

.topo{padding:22px 28px 18px}
.topo-linha{max-width:var(--faixa-larga);margin:0 auto}
.meses{margin-left:max(0px,calc((100% - var(--faixa-larga))/2))}
.topo-tit{font-size:26px}
.corpo{max-width:calc(var(--faixa-larga) + 56px);margin:0 auto;padding:22px 28px}
.faixa-demo{padding-left:28px}

.numeros{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.num{padding:15px 16px}
.num-val{font-size:24px}
.duas-colunas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start;margin-top:22px}
.duas-colunas>.bloco{margin-top:0}

/* Atendimentos: a tabela no lugar dos cartões, com as colunas na mesma
   largura em todos os convênios (um embaixo do outro, como na planilha). */
.so-largo{display:block}
.tabela-atend{table-layout:fixed}
.tabela-atend td{overflow:hidden;text-overflow:ellipsis}
.tabela-atend th:nth-child(1){width:21%}.tabela-atend th:nth-child(2){width:8%}
.tabela-atend th:nth-child(3){width:19%}.tabela-atend th:nth-child(4){width:5%}
.tabela-atend th:nth-child(5){width:13%}.tabela-atend th:nth-child(6),.tabela-atend th:nth-child(7),
.tabela-atend th:nth-child(8){width:8%}.tabela-atend th:nth-child(9){width:10%}
.tabela-atend td.esq{white-space:nowrap;min-width:0}
.tabela-atend td:last-child{white-space:normal}
.so-celular{display:none!important}
.filtros{grid-template-columns:220px 220px minmax(0,1fr)}
.filtros input{grid-column:auto}

/* Fechamento: os cartões em grade. */
.grade-fech{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.grade-fech .fech{margin-bottom:0}
.fech:hover{border-color:var(--cor);box-shadow:var(--sombra-alta)}

.faixa{left:calc(var(--coluna) + 20px);right:auto;bottom:20px;width:420px;max-width:none;margin:0}
.aviso{left:calc(var(--coluna) + (100% - var(--coluna))/2);bottom:28px}
.folha{max-width:640px}
#folha-ficha{max-width:860px}

/* O balão vai para o canto da tela: a barra de baixo virou a coluna da esquerda. */
:root,body:has(#faixa:not([hidden])){--as-sobe:24px;--as-direita:24px}
body:has(#as-raiz) .app,body:has(#as-raiz):has(#faixa:not([hidden])) .app{padding-bottom:100px}
}