/* =====================================================================
Painel de Atendimento — folha de estilo única
Direção: console de operação. Fundo grafite-azulado, superfícies em
camadas, tipografia monoespaçada para todo dado numérico (o cronômetro
é o herói da tela). Âmbar para ocupado, menta para livre, lavanda para
pausa, turquesa/anil para afastamento e ausência, brasa só para o que
exige ação.
Sem recursos externos: nenhuma fonte, script ou imagem de terceiros.
Os poucos ícones são SVG em data-URI, cobertos por `img-src 'self' data:`
na CSP. Não há `@import` nem `url()` remoto.
Contraste: toda combinação de texto/fundo usada aqui foi conferida
contra WCAG 2.1 AA (>= 4.5:1 em texto normal, >= 3:1 em texto grande e
em bordas de componente). Cor nunca é o único sinal — todo estado
carrega rótulo textual.
Sumário
01. Tokens
02. Reset e base
03. Acessibilidade
04. Tipografia utilitária
05. Estrutura (topo, navegação, conteúdo, seções)
06. Botões
07. Formulários
08. Avisos
09. Selos e pontos de estado
10. Métricas
11. Faixa de ocupação
12. Cartões da equipe
13. Estação do colaborador
14. Tabelas
15. Estado vazio
16. Entrada (login, 2FA, redefinição)
17. Páginas de erro
18. Jornadas (escalas, sobreaviso)
19. Chamados (fila e detalhe)
20. Responsivo
21. Movimento reduzido
===================================================================== */
/* ---------------------------------------------------------------------
01. Tokens
--------------------------------------------------------------------- */
:root {
color-scheme: dark;
/* Superfícies, da mais profunda à mais elevada. */
--tinta: #0B1017;
--painel: #141B26;
--painel-2: #1B2432;
--painel-3: #243040;
/* Traços DECORATIVOS: separam superfícies (cartão, tabela, seção). Não
delimitam controle, então não estão sujeitos ao mínimo de 3:1 da
WCAG 1.4.11 — o que permite mantê-los discretos. */
--traco: #2A3546;
--traco-forte: #3C4A63;
/* Traço de CONTROLE: contorno de campo, seletor e botão. Aqui o 3:1 de
1.4.11 vale, porque é a borda que diz onde o controle começa — o
preenchimento do campo (--tinta) e a superfície ao redor (--painel)
diferem só 1,4:1 entre si. Confere >= 3:1 sobre --tinta, --painel,
--painel-2 e --painel-3. */
--borda-campo: #6B7CA3;
/* Texto. --nevoa-suave é terciário e só se aplica sobre --tinta,
--painel e --painel-2 (>= 5:1, AA até nos 10px do rótulo de versão).
Sobre --painel-3 cairia para 4,35:1 — por isso ali usa-se --nevoa. */
--gelo: #EDF2F9;
--nevoa: #9DACC4;
--nevoa-suave: #8494AF;
/* Acentos de estado. */
--ambar: #F5B453; /* em atendimento */
--menta: #4FE0A8; /* livre, sucesso */
--brasa: #FF7A7D; /* alerta, erro */
--lavanda: #C79CF2; /* pausa */
--turquesa: #5CC0DE; /* afastado (saúde) */
--anil: #93A3E0; /* ausente (planejado) */
/* Versão translúcida dos acentos, para fundo de selo e realce. */
--ambar-veu: rgba(245, 180, 83, 0.14);
--menta-veu: rgba( 79, 224, 168, 0.14);
--brasa-veu: rgba(255, 122, 125, 0.14);
--lavanda-veu: rgba(199, 156, 242, 0.14);
--turquesa-veu: rgba( 92, 192, 222, 0.14);
--anil-veu: rgba(147, 163, 224, 0.14);
--neutro-veu: rgba(157, 172, 196, 0.10);
--ambar-borda: rgba(245, 180, 83, 0.38);
--menta-borda: rgba( 79, 224, 168, 0.38);
--brasa-borda: rgba(255, 122, 125, 0.42);
--lavanda-borda: rgba(199, 156, 242, 0.38);
--turquesa-borda: rgba( 92, 192, 222, 0.38);
--anil-borda: rgba(147, 163, 224, 0.42);
/* Tipografia. */
--mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, "Courier New", monospace;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--txt-xs: 0.6875rem; /* 11px — overline mono */
--txt-sm: 0.8125rem; /* 13px */
--txt-md: 0.9375rem; /* 15px — corpo */
--txt-lg: 1.0625rem; /* 17px */
--txt-xl: 1.375rem; /* 22px */
--txt-2xl: 1.75rem; /* 28px */
/* Espaçamento: escala de 4px, sempre por token. */
--e-1: 0.25rem;
--e-2: 0.5rem;
--e-3: 0.75rem;
--e-4: 1rem;
--e-5: 1.5rem;
--e-6: 2rem;
--e-7: 2.5rem;
--e-8: 3.5rem;
/* Raios. */
--raio-sm: 6px;
--raio: 10px;
--raio-lg: 16px;
--raio-pill: 999px;
/* Elevação. */
--sombra-1: 0 1px 2px rgba(0, 0, 0, 0.32);
--sombra-2: 0 4px 16px -4px rgba(0, 0, 0, 0.45);
--sombra-3: 0 18px 48px -12px rgba(0, 0, 0, 0.62);
/* Foco: halo em dois anéis, visível sobre qualquer fundo — inclusive
sobre os botões âmbar e menta, onde um outline âmbar sumiria. */
--foco: 0 0 0 2px var(--tinta), 0 0 0 4px var(--gelo);
--transicao: 140ms ease;
/* Largura útil do conteúdo. */
--largura: 1240px;
/* Alvo mínimo de toque. */
--toque: 44px;
}
/* ---------------------------------------------------------------------
02. Reset e base
--------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scrollbar-color: var(--traco-forte) var(--tinta);
}
body {
margin: 0;
min-height: 100vh;
background-color: var(--tinta);
/* Brilho discreto no topo: dá profundidade sem custo de imagem. */
background-image:
radial-gradient(900px 420px at 12% -8%, rgba(79, 224, 168, 0.07), transparent 62%),
radial-gradient(760px 380px at 88% -12%, rgba(245, 180, 83, 0.06), transparent 60%);
background-repeat: no-repeat;
color: var(--gelo);
font-family: var(--sans);
font-size: var(--txt-md);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 {
margin: 0;
line-height: 1.25;
font-weight: 650;
letter-spacing: -0.01em;
}
p { margin: 0 0 var(--e-3); }
p:last-child { margin-bottom: 0; }
a { color: var(--menta); text-underline-offset: 3px; }
a:hover { color: var(--gelo); }
img, svg { max-width: 100%; }
svg { display: block; }
code {
font-family: var(--mono);
font-size: 0.9em;
background: var(--painel-3);
border: 1px solid var(--traco);
border-radius: var(--raio-sm);
padding: 0.1em 0.4em;
}
hr {
border: 0;
border-top: 1px solid var(--traco);
margin: var(--e-5) 0;
}
::selection { background: rgba(79, 224, 168, 0.28); }
/* ---------------------------------------------------------------------
03. Acessibilidade
--------------------------------------------------------------------- */
/* Um só anel de foco para tudo: previsível e sempre visível. */
:focus-visible {
outline: none;
box-shadow: var(--foco);
}
.visualmente-oculto {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Salto para o conteúdo: primeiro tabulável da página, some fora do foco. */
.pular {
position: absolute;
left: var(--e-3);
top: var(--e-3);
z-index: 100;
transform: translateY(-200%);
background: var(--menta);
color: #07130D;
font-weight: 700;
padding: var(--e-2) var(--e-4);
border-radius: var(--raio-sm);
text-decoration: none;
transition: transform var(--transicao);
}
.pular:focus {
transform: translateY(0);
color: #07130D;
}
/* ---------------------------------------------------------------------
04. Tipografia utilitária
--------------------------------------------------------------------- */
/* Sobretítulo: rótulo curto acima de um valor. Nunca é o título da seção. */
.rotulo {
font-family: var(--mono);
font-size: var(--txt-xs);
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--nevoa);
margin: 0;
font-weight: 500;
}
/* Todo dado numérico: largura de dígito fixa, para o número não "dançar". */
.numero {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.silencioso {
color: var(--nevoa);
font-size: var(--txt-sm);
}
.silencioso strong { color: var(--gelo); font-weight: 600; }
/* ---------------------------------------------------------------------
05. Estrutura
--------------------------------------------------------------------- */
.topo {
position: sticky;
top: 0;
z-index: 20;
background: linear-gradient(180deg, var(--painel-2), var(--painel));
border-bottom: 1px solid var(--traco);
box-shadow: var(--sombra-1);
}
.topo__linha {
max-width: var(--largura);
margin: 0 auto;
padding: var(--e-3) var(--e-5);
display: flex;
align-items: center;
gap: var(--e-4);
}
/* --- Marca --- */
.marca {
display: inline-flex;
align-items: center;
gap: var(--e-3);
text-decoration: none;
color: var(--gelo);
flex: none;
border-radius: var(--raio-sm);
}
.marca:hover { color: var(--gelo); }
.marca__glifo {
width: 34px;
height: 34px;
flex: none;
display: grid;
place-items: center;
border-radius: var(--raio-sm);
background: linear-gradient(145deg, rgba(79, 224, 168, 0.22), rgba(245, 180, 83, 0.18));
border: 1px solid var(--traco-forte);
color: var(--menta);
}
.marca__glifo svg { width: 18px; height: 18px; }
.marca__texto {
display: block;
font-size: var(--txt-sm);
font-weight: 650;
letter-spacing: 0.02em;
line-height: 1.2;
}
.marca__versao {
display: block;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--nevoa-suave);
line-height: 1.4;
}
/* --- Navegação --- */
.topo__nav {
display: flex;
align-items: center;
gap: var(--e-1);
margin-left: auto;
flex-wrap: wrap;
}
.nav__link {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 var(--e-3);
border-radius: var(--raio-sm);
color: var(--nevoa);
font-size: var(--txt-sm);
font-weight: 550;
text-decoration: none;
white-space: nowrap;
border: 1px solid transparent;
transition: background var(--transicao), color var(--transicao);
}
.nav__link:hover {
background: var(--painel-3);
color: var(--gelo);
}
/* Estado atual: cor + fundo + traço inferior. Três sinais, não só cor. */
.nav__link--ativo {
color: var(--gelo);
background: var(--painel-3);
border-color: var(--traco-forte);
box-shadow: inset 0 -2px 0 var(--menta);
}
/* --- Sub-navegação (abas de Jornadas) ---
Mora DENTRO do conteúdo, abaixo do , e é secundária ao menu do topo:
sem caixa, sem fundo, item atual marcado por sublinhado espesso + peso +
cor. Repetir o visual de `.nav__link` aqui faria dois menus disputarem a
mesma hierarquia. A régua inferior contínua diz onde termina o grupo. */
.subnav {
display: flex;
flex-wrap: wrap;
gap: var(--e-1);
margin-bottom: var(--e-5);
border-bottom: 1px solid var(--traco);
}
.subnav__link {
display: inline-flex;
align-items: center;
min-height: var(--toque);
padding: 0 var(--e-3);
margin-bottom: -1px;
border-bottom: 2px solid transparent;
border-radius: var(--raio-sm) var(--raio-sm) 0 0;
color: var(--nevoa);
font-size: var(--txt-sm);
font-weight: 550;
text-decoration: none;
white-space: nowrap;
transition: background var(--transicao), color var(--transicao);
}
.subnav__link:hover {
background: var(--painel-2);
color: var(--gelo);
}
/* Aba atual: cor + peso + traço de 2px. Cor nunca é o único sinal — e o
`aria-current="page"` da marcação cobre quem não vê nenhum dos três. */
.subnav__link--ativo {
color: var(--gelo);
font-weight: 650;
border-bottom-color: var(--menta);
}
.subnav__link--ativo:hover { background: transparent; }
/* --- Conta e sair --- */
.topo__conta {
display: flex;
align-items: center;
gap: var(--e-3);
padding-left: var(--e-4);
margin-left: var(--e-1);
border-left: 1px solid var(--traco);
flex: none;
}
.topo__usuario {
display: flex;
align-items: center;
gap: var(--e-2);
font-size: var(--txt-sm);
color: var(--nevoa);
min-width: 0;
}
.topo__nome {
max-width: 15ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inicial {
width: 30px;
height: 30px;
flex: none;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--painel-3);
border: 1px solid var(--traco-forte);
color: var(--gelo);
font-size: var(--txt-sm);
font-weight: 700;
text-transform: uppercase;
line-height: 1;
}
/* Botão do menu em telas estreitas. Fica oculto até o JS assumir; sem JS
a navegação continua inteira na tela, nunca escondida atrás dele. */
.topo__menu {
display: none;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex: none;
padding: 0;
background: var(--painel-2);
border: 1px solid var(--borda-campo);
border-radius: var(--raio-sm);
color: var(--gelo);
cursor: pointer;
}
.topo__menu svg { width: 20px; height: 20px; }
.topo__menu .icone-fechar { display: none; }
.topo__menu[aria-expanded="true"] .icone-abrir { display: none; }
.topo__menu[aria-expanded="true"] .icone-fechar { display: block; }
/* --- Conteúdo --- */
.conteudo {
max-width: var(--largura);
margin: 0 auto;
padding: var(--e-6) var(--e-5) var(--e-8);
}
/* Alvo do link "pular para o conteúdo": recebe foco programático, mas um
anel em volta da página inteira não comunica nada. */
.conteudo:focus,
.conteudo:focus-visible { outline: none; box-shadow: none; }
/* Cabeçalho da página: o da tela, renderizado pelo layout a partir
de $titulo. Fica fora do fluxo de seções para não competir com elas. */
.pagina__cabecalho {
margin-bottom: var(--e-5);
}
.pagina__titulo {
font-size: var(--txt-xl);
font-weight: 700;
letter-spacing: -0.02em;
margin: 0;
}
.secao + .secao { margin-top: var(--e-7); }
.secao__cabecalho {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--e-2) var(--e-4);
margin-bottom: var(--e-4);
padding-bottom: var(--e-3);
border-bottom: 1px solid var(--traco);
}
/* Título de seção de verdade: legível, com peso. O `.rotulo` mono ficou
reservado a sobretítulo de valor, que era o uso que fazia sentido. */
.secao__titulo {
font-size: var(--txt-lg);
font-weight: 650;
color: var(--gelo);
margin: 0;
}
.secao__subtitulo {
font-size: var(--txt-md);
font-weight: 650;
color: var(--gelo);
margin: 0;
}
.secao__apoio {
font-size: var(--txt-sm);
color: var(--nevoa);
margin: 0;
}
/* Bloco de superfície reutilizável (formulários, blocos de texto). */
.painel {
background: var(--painel);
border: 1px solid var(--traco);
border-radius: var(--raio);
padding: var(--e-5);
box-shadow: var(--sombra-1);
}
.painel + .painel { margin-top: var(--e-4); }
.colunas {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: var(--e-5);
align-items: start;
}
/* Nota de rodapé de uma seção: explica a regra sem competir com o dado. */
.nota {
color: var(--nevoa);
font-size: var(--txt-sm);
margin: var(--e-4) 0 0;
padding-left: var(--e-3);
border-left: 2px solid var(--traco);
}
.nota strong { color: var(--gelo); }
/* Linha de ações (botões lado a lado, quebrando em telas estreitas). */
.acoes {
display: flex;
flex-wrap: wrap;
gap: var(--e-3);
align-items: center;
}
.acoes--fim { justify-content: flex-end; }
/* ---------------------------------------------------------------------
06. Botões
--------------------------------------------------------------------- */
.botao {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--e-2);
min-height: var(--toque);
padding: var(--e-3) var(--e-5);
border: 1px solid var(--borda-campo);
border-radius: var(--raio-sm);
background: var(--painel-3);
color: var(--gelo);
font-family: inherit;
font-size: var(--txt-sm);
font-weight: 650;
letter-spacing: 0.01em;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.botao:hover {
background: #2C394C;
border-color: var(--nevoa);
color: var(--gelo);
}
.botao:active { transform: translateY(1px); }
.botao svg { width: 16px; height: 16px; flex: none; }
.botao--principal {
background: var(--menta);
border-color: var(--menta);
color: #07130D;
font-weight: 700;
}
.botao--principal:hover { background: #6FEBBB; border-color: #6FEBBB; color: #07130D; }
.botao--encerrar {
background: var(--ambar);
border-color: var(--ambar);
color: #1A1204;
font-weight: 700;
}
.botao--encerrar:hover { background: #FAC576; border-color: #FAC576; color: #1A1204; }
.botao--perigo {
background: transparent;
border-color: var(--brasa-borda);
color: var(--brasa);
}
.botao--perigo:hover { background: var(--brasa-veu); border-color: var(--brasa); color: var(--brasa); }
.botao--largo { width: 100%; }
.botao--pequeno {
min-height: 34px;
padding: var(--e-1) var(--e-3);
font-size: var(--txt-xs);
}
.botao[disabled],
.botao[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
/* Botão em forma de link. Mantém área de toque de 44px de altura: um
"Cancelar" de 13px sem preenchimento é praticamente inalcançável no
toque, e era o caso de toda a navegação e das ações da tabela. */
.botao--texto {
display: inline-flex;
align-items: center;
gap: var(--e-2);
min-height: 36px;
padding: var(--e-1) var(--e-2);
margin-left: calc(var(--e-2) * -1);
background: none;
border: 1px solid transparent;
border-radius: var(--raio-sm);
color: var(--menta);
font-family: inherit;
font-size: var(--txt-sm);
font-weight: 550;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background var(--transicao), color var(--transicao);
}
.botao--texto:hover {
background: var(--painel-3);
color: var(--gelo);
}
.botao--texto--neutro { color: var(--nevoa); }
.botao--texto--neutro:hover { color: var(--gelo); }
.botao--texto--perigo { color: var(--brasa); }
.botao--texto--perigo:hover { background: var(--brasa-veu); color: var(--brasa); }
/* ---------------------------------------------------------------------
07. Formulários
--------------------------------------------------------------------- */
.campo { margin-bottom: var(--e-4); }
.campo:last-child { margin-bottom: 0; }
.campo > label,
.campo__rotulo {
display: block;
font-size: var(--txt-sm);
font-weight: 600;
color: var(--gelo);
margin-bottom: var(--e-2);
}
.campo__ajuda {
font-size: var(--txt-sm);
color: var(--nevoa);
margin: var(--e-2) 0 0;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="search"],
input[type="tel"],
select,
textarea {
width: 100%;
min-height: var(--toque);
background: var(--tinta);
border: 1px solid var(--borda-campo);
border-radius: var(--raio-sm);
color: var(--gelo);
font-family: inherit;
font-size: var(--txt-md);
line-height: 1.4;
padding: var(--e-3);
transition: border-color var(--transicao), background var(--transicao);
}
input::placeholder,
textarea::placeholder { color: var(--nevoa-suave); opacity: 1; }
input:hover:not([readonly]),
select:hover,
textarea:hover:not([readonly]) { border-color: var(--nevoa); }
input[readonly] {
background: var(--painel-2);
color: var(--nevoa);
cursor: default;
}
textarea {
resize: vertical;
min-height: 88px;
padding: var(--e-3);
}
/* Seta própria: a nativa some ou destoa em fundo escuro. */
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: var(--e-7);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239DACC4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--e-3) center;
background-size: 16px 16px;
}
select option { background: var(--painel-2); color: var(--gelo); }
input[type="checkbox"],
input[type="radio"] {
width: 20px;
height: 20px;
accent-color: var(--menta);
margin: 0;
flex: none;
cursor: pointer;
}
/* Caixa de seleção com rótulo em frase, não em maiúsculas mono: aqui o
texto é uma pergunta, não uma etiqueta de campo. */
.campo--opcao > label {
display: flex;
align-items: center;
gap: var(--e-3);
min-height: var(--toque);
font-weight: 500;
margin-bottom: 0;
cursor: pointer;
}
/* Campo de código (2FA): dígito grande, espaçado, centralizado. */
.campo__codigo {
font-family: var(--mono);
font-size: var(--txt-2xl);
letter-spacing: 0.35em;
text-align: center;
text-indent: 0.35em;
padding-block: var(--e-3);
}
/* Campo somente leitura com botão de copiar ao lado. */
.campo__copiavel {
display: flex;
gap: var(--e-2);
align-items: stretch;
}
.campo__copiavel input {
flex: 1 1 auto;
min-width: 0;
font-family: var(--mono);
font-size: var(--txt-sm);
}
.copiar {
flex: none;
min-height: var(--toque);
padding-inline: var(--e-4);
}
/* Grade de filtros: uma coluna por campo no desktop, empilha no celular.
O padrão anterior — um campo full-width por linha — obrigava a rolar
para ver quatro filtros de data. */
.grade-campos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: var(--e-4);
align-items: start;
}
.grade-campos .campo { margin-bottom: 0; }
.grade-campos__largo { grid-column: 1 / -1; }
/* Revelar senha: botão dentro do campo, criado só quando há JS. O recuo
extra só entra quando o botão existe — sem JS o campo é normal. */
.campo__senha { position: relative; }
.campo__senha--com-botao input { padding-right: 46px; }
.revelar {
position: absolute;
top: 0;
right: 0;
width: 44px;
height: 44px;
display: grid;
place-items: center;
background: none;
border: 0;
border-radius: var(--raio-sm);
color: var(--nevoa);
cursor: pointer;
}
.revelar:hover { color: var(--gelo); }
.revelar svg { width: 18px; height: 18px; }
.revelar .icone-oculto { display: none; }
.revelar[aria-pressed="true"] .icone-visivel { display: none; }
.revelar[aria-pressed="true"] .icone-oculto { display: block; }
/* ---------------------------------------------------------------------
08. Avisos
--------------------------------------------------------------------- */
.aviso {
display: flex;
gap: var(--e-3);
align-items: flex-start;
border: 1px solid var(--traco-forte);
border-left: 3px solid var(--nevoa);
border-radius: var(--raio-sm);
background: var(--painel-2);
color: var(--gelo);
padding: var(--e-3) var(--e-4);
margin: 0 0 var(--e-4);
font-size: var(--txt-sm);
line-height: 1.5;
}
/* Ícone por pseudo-elemento: o JS reescreve className do #aviso, então
nenhum elemento filho sobreviveria à troca de estado. */
.aviso::before {
content: "";
flex: none;
width: 18px;
height: 18px;
margin-top: 1px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239DACC4' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M10 6.6v.1M10 9.2v4.2'/%3E%3C/svg%3E");
}
.aviso--erro {
border-left-color: var(--brasa);
border-color: var(--brasa-borda);
background: var(--brasa-veu);
}
.aviso--erro::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FF7A7D' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M10 2.6 18.4 17H1.6z'/%3E%3Cpath d='M10 7.6v3.8M10 14.2v.1'/%3E%3C/svg%3E");
}
.aviso--sucesso {
border-left-color: var(--menta);
border-color: var(--menta-borda);
background: var(--menta-veu);
}
.aviso--sucesso::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234FE0A8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='m6.6 10.2 2.3 2.3 4.5-4.7'/%3E%3C/svg%3E");
}
.aviso[hidden] { display: none; }
/* O app.js move o foco para o aviso quando uma ação falha. `:focus-visible`
é inconsistente em foco programático, então o anel vem do `:focus`. */
.aviso:focus {
outline: none;
box-shadow: var(--foco);
}
/* Faixa de contexto (afastamento vigente na estação). */
.faixa-contexto {
border: 1px solid var(--anil-borda);
border-left: 3px solid var(--anil);
border-radius: var(--raio);
padding: var(--e-4);
margin-bottom: var(--e-4);
background: var(--anil-veu);
}
.faixa-contexto--afastado {
border-color: var(--turquesa-borda);
border-left-color: var(--turquesa);
background: var(--turquesa-veu);
}
.faixa-contexto .rotulo { margin-bottom: var(--e-1); }
/* ---------------------------------------------------------------------
09. Selos e pontos de estado
--------------------------------------------------------------------- */
.selo {
display: inline-flex;
align-items: center;
gap: var(--e-2);
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 5px var(--e-3) 5px var(--e-2);
border-radius: var(--raio-pill);
border: 1px solid var(--traco-forte);
background: var(--neutro-veu);
color: var(--nevoa);
white-space: nowrap;
line-height: 1.4;
}
.selo--ocupado { color: var(--ambar); border-color: var(--ambar-borda); background: var(--ambar-veu); }
.selo--livre { color: var(--menta); border-color: var(--menta-borda); background: var(--menta-veu); }
.selo--alerta { color: var(--brasa); border-color: var(--brasa-borda); background: var(--brasa-veu); }
.selo--pausa { color: var(--lavanda); border-color: var(--lavanda-borda); background: var(--lavanda-veu); }
.selo--afastado { color: var(--turquesa); border-color: var(--turquesa-borda); background: var(--turquesa-veu); }
.selo--ausente { color: var(--anil); border-color: var(--anil-borda); background: var(--anil-veu); }
/* Selo sem carga de estado: classifica (modalidade, enquadramento legal)
sem sequestrar uma das cores de status, que significam outra coisa. */
.selo--neutro { color: var(--nevoa); border-color: var(--traco-forte); background: var(--neutro-veu); }
.ponto {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--nevoa);
flex: none;
}
.ponto--ocupado { background: var(--ambar); }
.ponto--livre { background: var(--menta); }
.ponto--alerta { background: var(--brasa); }
.ponto--pausa { background: var(--lavanda); }
.ponto--afastado { background: var(--turquesa); }
.ponto--ausente { background: var(--anil); }
.ponto--neutro { background: var(--nevoa); }
/* Só o que está correndo pulsa: atendimento em curso e alerta. Pausa e
afastamento são estáticos de propósito — não pedem ação. */
.selo--ocupado .ponto,
.selo--alerta .ponto { animation: pulsar 2.2s ease-in-out infinite; }
@keyframes pulsar {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
50% { opacity: 0.45; box-shadow: 0 0 0 4px transparent; }
}
/* ---------------------------------------------------------------------
10. Métricas
--------------------------------------------------------------------- */
.metricas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--e-3);
margin: 0;
}
.metrica {
background: var(--painel);
border: 1px solid var(--traco);
border-radius: var(--raio);
padding: var(--e-4);
display: flex;
flex-direction: column;
gap: var(--e-1);
min-width: 0;
}
.metrica__valor {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: var(--txt-2xl);
font-weight: 600;
line-height: 1.1;
color: var(--gelo);
margin: 0;
overflow-wrap: anywhere;
}
.metrica--ocupado .metrica__valor { color: var(--ambar); }
.metrica--pausa .metrica__valor { color: var(--lavanda); }
.metrica--livre .metrica__valor { color: var(--menta); }
.metrica--fora .metrica__valor { color: var(--anil); }
/* Destaque: a métrica que resume a tela inteira. */
.metrica--destaque {
background: linear-gradient(145deg, var(--painel-2), var(--painel));
border-color: var(--traco-forte);
}
/* ---------------------------------------------------------------------
11. Faixa de ocupação
--------------------------------------------------------------------- */
.faixa { margin-bottom: var(--e-6); }
.faixa__barra {
display: flex;
gap: 3px;
height: 14px;
margin: var(--e-4) 0 var(--e-3);
padding: 3px;
background: var(--painel);
border: 1px solid var(--traco);
border-radius: var(--raio-sm);
}
.faixa__segmento {
flex: 1 1 0;
min-width: 4px;
background: var(--traco-forte);
border-radius: 2px;
}
.faixa__segmento--ocupado { background: var(--ambar); }
.faixa__segmento--livre { background: var(--menta); opacity: 0.55; }
.faixa__segmento--alerta { background: var(--brasa); }
.faixa__segmento--pausa { background: var(--lavanda); opacity: 0.8; }
.faixa__segmento--afastado { background: var(--turquesa); opacity: 0.6; }
.faixa__segmento--ausente { background: var(--anil); opacity: 0.6; }
.faixa__legenda {
display: flex;
gap: var(--e-2) var(--e-5);
flex-wrap: wrap;
margin: 0;
}
.legenda__item {
display: inline-flex;
align-items: center;
gap: var(--e-2);
font-size: var(--txt-sm);
color: var(--nevoa);
}
/* Selo de frescor do painel: diz quando foi a última leitura e avisa
quando a atualização falhou, em vez de deixar dado velho sem aviso. */
.frescor {
display: inline-flex;
align-items: center;
gap: var(--e-2);
font-size: var(--txt-sm);
color: var(--nevoa);
margin: 0;
}
.frescor__ponto {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--menta);
flex: none;
animation: respirar 2.6s ease-in-out infinite;
}
.frescor--falha { color: var(--brasa); }
.frescor--falha .frescor__ponto { background: var(--brasa); animation: none; }
@keyframes respirar {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* ---------------------------------------------------------------------
12. Cartões da equipe
--------------------------------------------------------------------- */
.grade {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--e-4);
}
.cartao {
position: relative;
background: var(--painel);
border: 1px solid var(--traco);
border-radius: var(--raio);
padding: var(--e-4);
box-shadow: var(--sombra-1);
display: flex;
flex-direction: column;
min-width: 0;
transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
/* Barra de estado no topo do cartão: mais legível que a borda esquerda
fina, e não desloca o conteúdo. */
.cartao::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
border-radius: var(--raio) var(--raio) 0 0;
background: var(--traco-forte);
}
.cartao:hover {
border-color: var(--traco-forte);
box-shadow: var(--sombra-2);
transform: translateY(-1px);
}
.cartao--ocupado::before { background: var(--ambar); }
.cartao--livre::before { background: var(--menta); }
.cartao--pausa::before { background: var(--lavanda); }
.cartao--afastado::before { background: var(--turquesa); }
.cartao--ausente::before { background: var(--anil); }
.cartao--alerta::before { background: var(--brasa); }
.cartao--alerta {
border-color: var(--brasa-borda);
background: linear-gradient(180deg, var(--brasa-veu), var(--painel) 46%);
}
.cartao__topo {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--e-3);
}
.cartao__nome {
margin: 0;
font-size: var(--txt-md);
font-weight: 650;
min-width: 0;
overflow-wrap: anywhere;
}
.cartao__cronometro {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 2rem;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.1;
margin: var(--e-4) 0 var(--e-2);
color: var(--gelo);
}
.cartao--livre .cartao__cronometro { color: var(--nevoa-suave); }
.cartao--ocupado .cartao__cronometro { color: var(--ambar); }
.cartao--pausa .cartao__cronometro { color: var(--lavanda); }
.cartao--alerta .cartao__cronometro { color: var(--brasa); }
/* Afastamento não tem cronômetro: o texto é "até 15/08", e em 32px
ficaria desproporcional ao peso da informação. */
.cartao--afastado .cartao__cronometro,
.cartao--ausente .cartao__cronometro {
color: var(--nevoa);
font-size: var(--txt-xl);
}
.cartao__atividade {
font-size: var(--txt-sm);
margin: 0;
min-height: 20px;
color: var(--gelo);
overflow-wrap: anywhere;
}
.cartao--livre .cartao__atividade,
.cartao--afastado .cartao__atividade,
.cartao--ausente .cartao__atividade { color: var(--nevoa); }
.cartao__descricao {
font-size: var(--txt-sm);
color: var(--nevoa);
margin: var(--e-1) 0 0;
overflow-wrap: anywhere;
}
.cartao__rodape {
margin-top: auto;
padding-top: var(--e-3);
border-top: 1px solid var(--traco);
display: flex;
justify-content: space-between;
gap: var(--e-3);
}
/* Antes o rodapé eram dois números sem rótulo ("3 hoje" e "01:12:04").
O segundo não dizia de que era o tempo. */
.cartao__stat {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.cartao__stat:last-child { text-align: right; }
.cartao__stat-rotulo {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--nevoa);
}
.cartao__stat-valor {
font-size: var(--txt-sm);
font-weight: 600;
color: var(--gelo);
}
.cartao__rodape { margin-top: var(--e-4); }
/* ---------------------------------------------------------------------
13. Estação do colaborador
--------------------------------------------------------------------- */
.estacao {
position: relative;
overflow: hidden;
background: linear-gradient(160deg, var(--painel-2), var(--painel) 58%);
border: 1px solid var(--traco);
border-radius: var(--raio-lg);
padding: var(--e-5);
box-shadow: var(--sombra-2);
}
.estacao::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--traco-forte);
}
.estacao--ocupado::before { background: var(--ambar); }
.estacao--livre::before { background: var(--menta); }
.estacao--pausa::before { background: var(--lavanda); }
.estacao--alerta::before { background: var(--brasa); }
.estacao--alerta { border-color: var(--brasa-borda); }
.estacao__cabecalho {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--e-2) var(--e-3);
margin-bottom: var(--e-4);
}
.estacao__desde {
font-size: var(--txt-sm);
color: var(--nevoa);
}
/* O cronômetro é um número grande sem unidade; o rótulo diz do que é. */
.estacao__rotulo { margin-bottom: var(--e-1); }
.estacao__cronometro {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: clamp(3rem, 11vw, 4.75rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.04em;
margin: var(--e-3) 0 var(--e-2);
overflow-wrap: anywhere;
}
.estacao--ocupado .estacao__cronometro { color: var(--ambar); }
.estacao--alerta .estacao__cronometro { color: var(--brasa); }
.estacao--pausa .estacao__cronometro { color: var(--lavanda); }
/* Antes o cronômetro em repouso usava a cor de borda (~1.4:1): 76px de
texto praticamente invisível. Agora é legível e continua discreto. */
.estacao--livre .estacao__cronometro { color: var(--nevoa-suave); }
.estacao--afastado .estacao__cronometro,
.estacao--ausente .estacao__cronometro { color: var(--nevoa); }
.estacao__atividade {
font-size: var(--txt-lg);
font-weight: 600;
margin: 0 0 var(--e-1);
overflow-wrap: anywhere;
}
.estacao hr { margin: var(--e-5) 0; }
/* Bloco de formulário dentro da estação. */
.estacao form { margin-top: var(--e-5); }
.estacao form .secao__subtitulo { margin-bottom: var(--e-3); }
.estacao .aviso { margin-top: var(--e-4); }
/* Segundo nível de cabeçalho dentro de uma coluna já iniciada. */
.estacao__resumo-cabecalho { margin-top: var(--e-5); }
/* ---------------------------------------------------------------------
14. Tabelas
--------------------------------------------------------------------- */
/* Envoltório rolável: em telas estreitas a tabela rola dentro dele em vez
de estourar a página. tabindex="0" torna a rolagem alcançável pelo
teclado — sem isso, quem não usa mouse não vê as colunas da direita. */
.tabela-envoltorio {
/* Bloco contentor dos descendentes absolutos. Sem isto, todo
`.visualmente-oculto` dentro da tabela (rótulo de campo, complemento
de botão) se posiciona em relação ao DOCUMENTO: fica na coordenada
que teria no fluxo — dezenas ou centenas de pixels à direita, quando
a tabela é larga — e passa a esticar a rolagem horizontal da PÁGINA
inteira, não a do envoltório. */
position: relative;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--traco);
border-radius: var(--raio);
background: var(--painel);
}
.tabela-envoltorio:focus-visible { box-shadow: var(--foco); }
.tabela {
width: 100%;
border-collapse: collapse;
font-size: var(--txt-sm);
}
.tabela th {
text-align: left;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--nevoa);
background: var(--painel-2);
padding: var(--e-3);
border-bottom: 1px solid var(--traco-forte);
white-space: nowrap;
}
.tabela td {
padding: var(--e-3);
border-bottom: 1px solid var(--traco);
vertical-align: top;
color: var(--gelo);
}
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr { transition: background var(--transicao); }
.tabela tbody tr:hover { background: var(--painel-2); }
.tabela td .silencioso { display: inline-block; }
/* Barra de participação no relatório. A largura vem de uma classe em
degraus de 5% porque `style="width:42%"` seria descartado pela CSP
(`style-src 'self'`, sem unsafe-inline) — e assim funciona sem JS.
O número por extenso fica ao lado: a barra é reforço, não o dado. */
.participacao {
display: flex;
align-items: center;
gap: var(--e-3);
min-width: 128px;
}
.participacao__trilho {
flex: 1 1 auto;
height: 6px;
min-width: 48px;
background: var(--painel-3);
border-radius: var(--raio-pill);
overflow: hidden;
}
.participacao__preenchimento {
display: block;
height: 100%;
width: 0;
border-radius: var(--raio-pill);
background: linear-gradient(90deg, var(--turquesa), var(--menta));
}
.p0 { width: 0; }
.p5 { width: 5%; }
.p10 { width: 10%; }
.p15 { width: 15%; }
.p20 { width: 20%; }
.p25 { width: 25%; }
.p30 { width: 30%; }
.p35 { width: 35%; }
.p40 { width: 40%; }
.p45 { width: 45%; }
.p50 { width: 50%; }
.p55 { width: 55%; }
.p60 { width: 60%; }
.p65 { width: 65%; }
.p70 { width: 70%; }
.p75 { width: 75%; }
.p80 { width: 80%; }
.p85 { width: 85%; }
.p90 { width: 90%; }
.p95 { width: 95%; }
.p100 { width: 100%; }
/* Situação de um lançamento na tabela: texto sempre, cor como reforço. */
.situacao {
display: inline-block;
font-size: var(--txt-sm);
font-weight: 600;
color: var(--nevoa);
white-space: nowrap;
}
.situacao--vigente {
color: var(--menta);
background: var(--menta-veu);
border: 1px solid var(--menta-borda);
border-radius: var(--raio-pill);
padding: 1px var(--e-3);
}
.situacao--cancelado { color: var(--nevoa-suave); text-decoration: line-through; }
/* Coluna de ações: empilha os formulários sem colar um no outro. */
.tabela__acoes {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--e-1);
}
.tabela__acoes form { margin: 0; }
/* Alinhamento numérico à direita quando a célula é só número. */
.tabela .numero { white-space: nowrap; }
/* Grade de códigos de recuperação: leitura em blocos, não em tabela. */
.codigos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--e-2);
list-style: none;
padding: 0;
margin: 0 0 var(--e-4);
}
.codigos li {
font-family: var(--mono);
font-size: var(--txt-md);
letter-spacing: 0.08em;
background: var(--painel-2);
border: 1px solid var(--traco);
border-radius: var(--raio-sm);
padding: var(--e-3);
text-align: center;
}
/* Bloco expansível (remover 2FA de outra pessoa). É um controle: borda
com o contraste de controle, não a decorativa. */
details {
border: 1px solid var(--borda-campo);
border-radius: var(--raio-sm);
background: var(--painel-2);
padding: 0;
}
details[open] { padding-bottom: var(--e-3); }
details > summary {
list-style: none;
cursor: pointer;
min-height: 36px;
display: flex;
align-items: center;
padding: var(--e-1) var(--e-3);
font-size: var(--txt-sm);
font-weight: 550;
color: var(--brasa);
border-radius: var(--raio-sm);
}
details > summary::-webkit-details-marker { display: none; }
details > summary:hover { background: var(--brasa-veu); }
details > summary:focus-visible { box-shadow: var(--foco); }
details > form { padding: 0 var(--e-3); }
/* ---------------------------------------------------------------------
15. Estado vazio
--------------------------------------------------------------------- */
.vazio {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--e-2);
color: var(--nevoa);
font-size: var(--txt-sm);
text-align: center;
padding: var(--e-6) var(--e-4);
background: var(--painel);
border: 1px dashed var(--traco-forte);
border-radius: var(--raio);
margin: 0;
}
.vazio::before {
content: "";
width: 28px;
height: 28px;
opacity: 0.7;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DACC4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2.5'/%3E%3Cpath d='M3 9.5h18M8 14h8'/%3E%3C/svg%3E");
}
/* ---------------------------------------------------------------------
16. Entrada (login, 2FA, redefinição)
--------------------------------------------------------------------- */
.entrada {
min-height: 100vh;
min-height: 100dvh;
display: grid;
place-items: center;
padding: var(--e-5) var(--e-4);
}
.entrada__caixa {
width: 100%;
max-width: 420px;
background: linear-gradient(170deg, var(--painel-2), var(--painel) 55%);
border: 1px solid var(--traco);
border-radius: var(--raio-lg);
padding: var(--e-6);
box-shadow: var(--sombra-3);
position: relative;
overflow: hidden;
}
.entrada__caixa::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--menta), var(--ambar));
}
.entrada__marca {
display: flex;
align-items: center;
gap: var(--e-3);
margin: 0 0 var(--e-4);
}
.entrada__glifo {
width: 42px;
height: 42px;
flex: none;
display: grid;
place-items: center;
border-radius: var(--raio-sm);
background: linear-gradient(145deg, rgba(79, 224, 168, 0.24), rgba(245, 180, 83, 0.2));
border: 1px solid var(--traco-forte);
color: var(--menta);
}
.entrada__glifo svg { width: 22px; height: 22px; }
.entrada__titulo {
font-size: var(--txt-lg);
font-weight: 650;
margin: 0;
line-height: 1.2;
}
.entrada__texto {
color: var(--nevoa);
font-size: var(--txt-sm);
margin: 0 0 var(--e-5);
}
.entrada__rodape {
margin: var(--e-5) 0 0;
padding-top: var(--e-4);
border-top: 1px solid var(--traco);
font-size: var(--txt-sm);
color: var(--nevoa);
}
.entrada form + .entrada__rodape { margin-top: var(--e-5); }
.entrada__caixa .botao--largo { margin-top: var(--e-5); }
/* ---------------------------------------------------------------------
17. Páginas de erro
--------------------------------------------------------------------- */
.erro-pagina {
min-height: 100vh;
min-height: 100dvh;
display: grid;
place-items: center;
padding: var(--e-5) var(--e-4);
text-align: center;
}
.erro-pagina__caixa {
max-width: 480px;
width: 100%;
background: linear-gradient(170deg, var(--painel-2), var(--painel) 55%);
border: 1px solid var(--traco);
border-radius: var(--raio-lg);
padding: var(--e-6);
box-shadow: var(--sombra-3);
}
.erro-pagina__codigo {
font-family: var(--mono);
font-size: clamp(3rem, 14vw, 4.5rem);
font-weight: 600;
letter-spacing: -0.04em;
color: var(--ambar);
margin: 0 0 var(--e-2);
line-height: 1;
}
.erro-pagina__mensagem {
font-size: var(--txt-lg);
font-weight: 600;
margin: 0 0 var(--e-3);
}
.erro-pagina .botao { margin-top: var(--e-4); }
.erro-pagina__versao {
margin: var(--e-5) 0 0;
font-family: var(--mono);
font-size: var(--txt-xs);
letter-spacing: 0.1em;
color: var(--nevoa-suave);
}
/* ---------------------------------------------------------------------
18. Jornadas (escalas, sobreaviso)
--------------------------------------------------------------------- */
/* Agrupamento de campos com legenda visível. `min-width: 0` é necessário:
o