html, body {
margin: 0;
background: #f0f0f0;
max-width: 100%;
overflow-x: hidden;
}
body {
/*
A classe de tema escuro é alternada só em `document.body`
(base.js), nunca em `` — sem isso, quando a página tem
menos conteúdo que a altura da janela, o fundo escuro de `body`
cobre só a caixa do próprio body (do tamanho do conteúdo) e o
fundo claro de `html` (regra acima) aparece por baixo, sobrando
uma faixa clara no restante da tela.
*/
min-height: 100vh;
color: #222;
}
body.dark-theme {
background: #222;
color: #eee;
}
/*
:not(.btn) é essencial aqui: sem ele, esta regra (mais específica
que o simples ".btn { color: white }" de base.css, por ter um
seletor de elemento a mais) pintava o texto dos botões
(ex: "Emitir" na Carteirinha) da mesma cor do próprio fundo azul do
botão — deixando o texto praticamente invisível.
*/
.portal-content a:not(.btn),
.portal-content a:visited:not(.btn) {
color: var(--color-primary, #2a6f97);
}
.portal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 2rem;
background: white;
color: var(--color-primary, #007eb3);
}
.dark-theme .portal-header {
background: #2a2a2a;
}
.portal-brand {
display: flex;
align-items: center;
gap: 0.9rem;
min-width: 0;
}
.portal-logo {
height: 2.75rem;
width: auto;
object-fit: contain;
flex-shrink: 0;
}
.portal-brand-text {
display: flex;
flex-direction: column;
line-height: 1.3;
min-width: 0;
}
.portal-brand-text strong {
font-size: 1.6rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.portal-brand-text span {
font-size: 0.72rem;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.85;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.portal-header-actions {
display: flex;
align-items: center;
gap: 1.1rem;
flex-shrink: 0;
}
.portal-header-icon {
appearance: none;
background: transparent;
border: none;
outline: none;
cursor: pointer;
color: var(--color-primary, #007eb3);
transition: 0.2s;
flex-shrink: 0;
text-decoration: none;
display: flex;
}
.portal-header-icon:hover {
color: var(--color-primary-hover, #2693c2);
}
.portal-header-icon:active {
color: var(--color-primary-hold, #006f9e);
}
.portal-header-icon i {
font-size: 1.4rem;
}
.portal-avatar {
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 2px solid var(--color-primary, #007eb3);
}
/*
Vira uma "barra de abas" horizontalmente rolável em vez de quebrar em
várias linhas de texto — evita o cabeçalho comendo metade da tela em
celulares estreitos quando há muitos links (ver seção de mobile mais
abaixo, onde o padding/gap encolhem ainda mais).
*/
.portal-nav {
display: flex;
gap: 0.5rem;
padding: 0.6rem 2rem;
/*
Precisa ser uma cor sólida, não um rgba(preto) translúcido — o
rgba antigo era composto em cima do fundo da PÁGINA (esta barra
não fica sobreposta ao cabeçalho, é uma faixa separada logo
abaixo dele), que é claro (#f0f0f0), resultando num cinza claro
sem contraste nenhum com o texto branco dos links (relatado
pelo usuário como "ilegível").
*/
background: var(--color-primary-hold, #006f9e);
overflow-x: auto;
scrollbar-width: thin;
}
.portal-nav a {
color: white;
text-decoration: none;
font-size: 0.85rem;
white-space: nowrap;
padding: 0.35rem 0.9rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
transition: 0.2s;
}
.portal-nav a:hover {
background: rgba(255, 255, 255, 0.3);
}
.portal-content {
max-width: 60rem;
margin: 0 auto;
padding: 1.5rem 2rem 4rem;
}
.portal-content .btn-group {
margin-top: 1.5rem;
}
.portal-card {
background: white;
border-radius: 0.6rem;
padding: 1.5rem 2rem;
}
.dark-theme .portal-card {
background: #2a2a2a;
}
.portal-card-auth {
max-width: 28rem;
margin: 3rem auto;
}
.portal-erro {
color: #c0392b;
font-weight: bold;
}
.portal-sucesso {
color: #27ae60;
font-weight: bold;
}
.portal-link-secundario {
text-align: center;
margin-top: 1.5rem;
font-size: 0.9rem;
}
.portal-link-esqueci-senha {
text-align: right;
margin: 0.4rem 0 0;
font-size: 0.85rem;
}
.portal-desafio-pergunta {
margin-bottom: 1.5rem;
}
.portal-desafio-opcoes {
list-style: none;
margin: 0;
padding: 0;
}
.portal-desafio-opcoes li {
padding: 0.4rem 0;
}
.portal-desafio-opcoes label {
margin-left: 0.4rem;
cursor: pointer;
}
.portal-dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
gap: 1rem;
margin-top: 1.5rem;
}
.portal-dashboard-card {
background: white;
border-radius: 0.6rem;
padding: 1.5rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
text-align: center;
text-decoration: none;
color: inherit;
transition: 0.2s;
}
.dark-theme .portal-dashboard-card {
background: #2a2a2a;
}
.portal-dashboard-card i {
font-size: 1.8rem;
color: var(--color-primary, #2a6f97);
}
a.portal-dashboard-card:hover {
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15);
}
.portal-dashboard-card-disabled {
opacity: 0.55;
}
.portal-dashboard-card-disabled i {
color: #999;
}
.portal-dashboard-card-disabled small {
color: #999;
font-style: italic;
}
.portal-carteirinha-lista {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-top: 1.5rem;
}
.portal-carteirinha-item {
background: white;
border-radius: 0.6rem;
padding: 1rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.dark-theme .portal-carteirinha-item {
background: #2a2a2a;
}
.portal-lista-vazia {
color: var(--color-text-secondary, #666);
font-style: italic;
}
.dark-theme .portal-lista-vazia {
color: var(--color-text-secondary, #aaa);
}
.portal-status-badge {
display: inline-block;
padding: 0.2rem 0.7rem;
border-radius: 1rem;
font-size: 0.8rem;
font-weight: bold;
color: white;
white-space: nowrap;
}
/* Atendimento.Status: 1=Agendado, 2=Em andamento, 3=Finalizado, 4=Cancelado */
.portal-status-1 {
background: var(--color-quinary, #d17f33);
}
.portal-status-2 {
background: var(--color-primary, #007eb3);
}
.portal-status-3 {
background: var(--color-quaternary, #358d30);
}
.portal-status-4 {
background: var(--color-secondary, #af1a1f);
}
/*
Listas (Dependentes, Atendimentos) usam o mesmo componente de tabela
do sistema interno (.flex-table/.table-column), que só encolhe
colunas em telas estreitas em vez de reorganizar — em celulares
isso cortava colunas inteiras (Atendente/Motivo, CPF/Tipo) pra fora
da área visível, exigindo rolagem horizontal sem nenhuma pista disso.
Convertido pra cartões empilhados (rótulo à esquerda, valor à
direita) só dentro do Portal — não mexe no componente compartilhado
com o resto do sistema.
*/
@media (max-width: 700px) {
.portal-content .flex-table .table-header {
display: none;
}
.portal-content .flex-table .table-row {
flex-direction: column;
align-items: stretch;
gap: 0.4rem;
padding: 0.9rem 1rem;
border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}
.portal-content .flex-table .table-column {
flex-direction: column;
align-items: flex-start;
width: 100%;
max-width: 100%;
border: none;
padding: 0.2rem 0;
text-align: left;
}
.portal-content .flex-table .table-column[data-label]::before {
content: attr(data-label);
font-weight: bold;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
opacity: 0.65;
}
}
@media (max-width: 641px) {
.portal-header {
padding: 0.6rem 1rem;
}
.portal-logo {
height: 2.2rem;
width: auto;
}
.portal-brand-text strong {
font-size: 1.25rem;
}
.portal-header-actions {
gap: 0.7rem;
}
.portal-avatar {
width: 2.2rem;
height: 2.2rem;
}
.portal-nav {
padding: 0.5rem 1rem;
gap: 0.4rem;
}
.portal-content {
padding: 1rem 1rem 3rem;
}
}