/* ============================================================
Tema (claro/escuro) — variáveis CSS, trocadas via [data-theme]
no (ver theme.js e Components/Shared/ThemeToggle.razor).
============================================================ */
:root {
--cor-fundo: #f4f6f8;
--cor-fundo-cartao: #ffffff;
--cor-fundo-sidebar-topo: #17324d;
--cor-texto: #17212b;
--cor-texto-secundario: #52606d;
--cor-texto-sobre-superficie: #ffffff;
--cor-borda: #d7dee6;
--cor-primaria: #245ea8;
--cor-primaria-hover: #1d4f8f;
--cor-sucesso: #1f7a54;
--cor-sucesso-fundo: #e7f5ee;
--cor-sucesso-superficie: #1f7a54;
--cor-erro: #b42318;
--cor-erro-fundo: #fdecec;
--cor-erro-superficie: #b42318;
--cor-erro-hover: #941d28;
--cor-aviso: #8a5b00;
--cor-aviso-fundo: #fff5d6;
--cor-info: #1f5f8b;
--cor-info-fundo: #e8f2f8;
--cor-overlay: rgba(15, 23, 42, 0.58);
--espaco-recuo-grupo: 1rem;
/* ------------------------------------------------------------------
Escala de espaçamento (item 10 — densidade).
Antes, todo espaçamento era hardcoded em ~55 pontos do arquivo, com
valores generosos herdados de layout de página de conteúdo. Num
sistema de operação B2B, onde o operador confere rol item a item,
isso empurrava o conteúdo para fora da dobra e forçava rolagem — a
queixa principal dos usuários. A escala abaixo é densa de propósito.
------------------------------------------------------------------ */
--espaco-1: .2rem;
--espaco-2: .4rem;
--espaco-3: .6rem;
--espaco-4: .8rem;
--espaco-5: 1rem;
--espaco-6: 1.2rem;
--espaco-8: 1.6rem;
/* Altura única de todo controle interativo (input, select, botão), para
que campo e botão lado a lado alinhem. Antes os botões não tinham
min-height nenhum e ficavam mais baixos que os campos. */
--altura-controle: 2.25rem;
/* ------------------------------------------------------------------
Densidade das listas (segunda queixa do cliente sobre rolagem).
O passe anterior encolheu margens de bloco mas deixou a célula de
tabela em .75rem de padding vertical: com line-height 1.5 isso dava
~44px por linha, e é a LINHA DE TABELA que domina a altura das telas
operacionais — são elas que têm dezenas de itens, não os títulos.
.3rem + line-height 1.35 põe a linha em ~30px, um terço a menos,
sem encostar texto em borda.
------------------------------------------------------------------ */
--celula-padding-y: .3rem;
--celula-padding-x: .65rem;
--sombra-cartao: 0 2px 7px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
--sombra-cartao-elevada: 0 10px 24px rgba(15, 23, 42, 0.09), 0 3px 8px rgba(15, 23, 42, 0.05);
--raio-borda: 12px;
--cor-sidebar-texto: #f6f8fb;
--cor-sidebar-texto-secundario: rgba(246, 248, 251, 0.76);
--cor-sidebar-overlay: rgba(246, 248, 251, 0.13);
--cor-sidebar-overlay-ativo: rgba(246, 248, 251, 0.22);
/* Zebrado das listas — branco / cinza mais evidente, sem matiz de cor,
para dar destaque real às linhas sem competir com os indicadores de
cor (saldo devedor, cancelado etc.). */
--cor-zebra-par: #e9edf2;
--cor-linha-hover: #d8dee6;
}
[data-theme="dark"] {
--cor-fundo: #111827;
--cor-fundo-cartao: #182231;
--cor-fundo-sidebar-topo: #0d1c2b;
--cor-texto: #edf2f7;
--cor-texto-secundario: #b0bbc8;
--cor-texto-sobre-superficie: #182231;
--cor-borda: #334155;
--cor-primaria: #78a9e6;
--cor-primaria-hover: #8bb8ed;
--cor-sucesso: #75d6a6;
--cor-sucesso-fundo: #163427;
--cor-sucesso-superficie: #75d6a6;
--cor-erro: #ff8a85;
--cor-erro-fundo: #3b1d20;
--cor-erro-superficie: #ff8a85;
--cor-erro-hover: #e27470;
--cor-aviso: #ffd27a;
--cor-aviso-fundo: #3d2e12;
--cor-info: #8fc4ee;
--cor-info-fundo: #172f45;
--cor-overlay: rgba(2, 8, 23, 0.72);
--espaco-recuo-grupo: 1rem;
--sombra-cartao: 0 4px 12px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.25);
--sombra-cartao-elevada: 0 12px 30px rgba(0, 0, 0, 0.38), 0 4px 10px rgba(0, 0, 0, 0.25);
--cor-zebra-par: #202c3a;
--cor-linha-hover: #2b3a4d;
--cor-sidebar-texto: #f6f8fb;
--cor-sidebar-texto-secundario: rgba(246, 248, 251, 0.76);
--cor-sidebar-overlay: rgba(246, 248, 251, 0.13);
--cor-sidebar-overlay-ativo: rgba(246, 248, 251, 0.22);
}
html, body {
font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1rem;
/* 1.5 é entrelinha de texto corrido. Numa tela de operação, onde quase todo
texto é rótulo curto ou célula de tabela, ela só produz rolagem. */
line-height: 1.38;
background: var(--cor-fundo);
color: var(--cor-texto);
}
a, .btn-link {
color: var(--cor-primaria);
text-underline-offset: 0.16em;
transition: color .15s ease;
}
a:hover, .btn-link:hover {
color: var(--cor-primaria-hover);
}
a.btn:hover {
text-decoration: none;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus,
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
box-shadow: 0 0 0 0.16rem var(--cor-fundo-cartao), 0 0 0 0.34rem var(--cor-primaria);
}
.content {
padding-top: var(--espaco-3);
padding-bottom: var(--espaco-4);
}
h1, h2, h3 {
color: var(--cor-texto);
letter-spacing: -0.018em;
}
/* Títulos reduzidos em ~25% na escala e nas margens. O tamanho anterior era de
página de conteúdo, não de tela operacional: um h1 de 2.25rem mais margem de
1rem consumia altura útil em telas que o operador usa o dia inteiro. */
h1 {
margin: 0 0 var(--espaco-2);
font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.6rem);
line-height: 1.15;
font-weight: 700;
}
h2 {
margin: var(--espaco-4) 0 var(--espaco-2);
font-size: clamp(1.1rem, 1.02rem + 0.3vw, 1.25rem);
line-height: 1.2;
font-weight: 700;
}
h3 {
margin: var(--espaco-3) 0 var(--espaco-1);
font-size: 1rem;
line-height: 1.25;
font-weight: 650;
}
p {
margin: 0 0 var(--espaco-2);
line-height: 1.45;
}
small, .small {
font-size: .875rem;
line-height: 1.35;
}
h1:focus {
outline: none;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid var(--cor-sucesso);
}
.invalid {
outline: 1px solid var(--cor-erro);
}
.validation-message {
color: var(--cor-erro);
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: var(--cor-texto-sobre-superficie);
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
border-color: var(--cor-borda);
}
/* ============================================================
Componentes de negócio genéricos (tabelas, cards, formulários)
============================================================ */
h1, h2, h3 {
color: var(--cor-texto);
}
.table {
color: var(--cor-texto);
background-color: var(--cor-fundo-cartao);
border-radius: var(--raio-borda);
overflow: hidden;
box-shadow: var(--sombra-cartao-elevada);
border-collapse: separate;
border-spacing: 0;
margin-bottom: var(--espaco-4);
/* A entrelinha da célula é o multiplicador da altura da tela: cada 0.1 aqui
vira dezenas de pixels numa lista de 30 itens. */
line-height: 1.35;
}
.table > :not(caption) > * > * {
background-color: var(--cor-fundo-cartao);
color: var(--cor-texto);
border-bottom-color: var(--cor-borda);
padding: var(--celula-padding-y) var(--celula-padding-x);
vertical-align: middle;
/* O Bootstrap pinta o fundo das células com
"box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)" — um shadow
interno gigante que cobre o background-color. Hoje essa variável vem
transparente, mas basta uma classe/versão do Bootstrap definir uma cor
para o zebrado abaixo virar invisível. Neutralizado aqui de propósito. */
box-shadow: none;
}
.table thead {
font-weight: 600;
font-size: .8125rem;
letter-spacing: .02em;
}
/* Cabeçalho com leve separação visual do corpo — evita que a primeira
linha de dados "grude" no título das colunas. */
.table thead > tr > * {
background-color: var(--cor-fundo);
border-bottom: 2px solid var(--cor-borda);
}
/* ============================================================
Zebrado das listas (REQ-04) — padrão reutilizável via .table,
aplicado só a linhas de tbody (nunca em formulários/cards/menus).
Especificidade (0,2,2) > a regra base (0,1,1) acima; a ordem no
arquivo garante hover > zebrado e foco-por-teclado > hover.
============================================================ */
.table tbody tr:nth-child(even) > * {
background-color: var(--cor-zebra-par);
}
.table tbody tr:hover > * {
background-color: var(--cor-linha-hover);
}
.table tbody tr:focus-within > * {
outline: 2px solid var(--cor-primaria);
outline-offset: -2px;
}
/* Evita scroll horizontal da página inteira — tabelas largas rolam só dentro
do próprio contêiner, mantendo o layout responsivo em qualquer tamanho de
janela (celular, tablet, monitor ultrawide). */
.table-responsive-wrapper {
overflow-x: auto;
width: 100%;
}
/* ------------------------------------------------------------------
Controles DENTRO de linha de tabela.
Encolher o padding da célula não adianta se a célula contém um de 2.25rem: quem manda na altura da linha passa a ser o
controle. Nas telas de lançamento e de cadastro (que são justamente as
mais longas) quase toda linha tem um. Aqui o controle usa uma métrica
compacta própria; fora de tabela ele continua com a altura cheia.
A altura vem por --altura-controle redefinida no escopo da célula: a regra
base dos botões já lê essa variável, então não é preciso duplicar seletor
para ela. O padding, esse sim, é literal na regra base — e aquela regra usa
oito :not(), especificidade (0,8,1). Uma tentativa ingênua com ".table td
button" (0,1,2) PERDE em silêncio: foi o que aconteceu na primeira medição,
onde a linha continuou em 46px. Por isso os seletores abaixo repetem a mesma
cadeia de :not() e acrescentam o contexto da tabela.
Não vale para dispositivo de toque — ver @media (pointer: coarse).
------------------------------------------------------------------ */
@media (pointer: fine) {
.table td {
--altura-controle: 1.85rem;
}
.table td button:not(.navbar-toggler):not(.toast-fechar):not(.modal-fechar):not(.theme-toggle):not(.btn-primary):not(.btn-danger):not(.btn-secondary):not(.btn-link),
.table td .btn-secondary,
.table td .btn-primary,
.table td .btn-danger,
.table td a.btn-primary,
.table td a.btn-danger,
.table td input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.table td select {
min-height: 1.85rem;
padding-top: .1rem;
padding-bottom: .1rem;
line-height: 1.3;
}
.table td textarea {
min-height: 2.2rem;
padding-top: .15rem;
padding-bottom: .15rem;
}
}
.table-spaced {
margin-top: var(--espaco-3);
}
.col-selecao {
width: 2.5rem;
}
.col-quantidade {
width: 7.5rem;
}
.col-valor {
width: 8rem;
}
.table-total > * {
border-top: 2px solid var(--cor-borda);
background-color: var(--cor-fundo) !important;
font-weight: 700;
}
.alert-success {
background-color: var(--cor-sucesso-fundo);
color: var(--cor-sucesso);
border-color: color-mix(in srgb, var(--cor-sucesso) 22%, transparent);
}
.alert-danger {
background-color: var(--cor-erro-fundo);
color: var(--cor-erro);
border-color: color-mix(in srgb, var(--cor-erro) 22%, transparent);
}
.alert-warning {
background-color: var(--cor-aviso-fundo);
color: var(--cor-aviso);
border-color: color-mix(in srgb, var(--cor-aviso) 22%, transparent);
}
/* Formulário em grade — responsivo por padrão: quantas colunas couberem,
nunca menos de ~220px de largura cada (empilha em 1 coluna no celular). */
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
/* gap menor na vertical que na horizontal: campos empilhados não precisam
do mesmo respiro que colunas vizinhas, e é a vertical que gera rolagem. */
gap: var(--espaco-2) var(--espaco-3);
margin-bottom: var(--espaco-3);
}
.form-grid label {
display: flex;
flex-direction: column;
font-size: .875rem;
font-weight: 600;
color: var(--cor-texto-secundario);
}
.form-grid .full-width {
grid-column: 1 / -1;
}
/* Meio-termo entre uma coluna e a linha inteira.
Campos como "Cliente / Fornecedor" e "Observação" precisam de mais
largura que um campo comum, mas usar .full-width para isso força uma
quebra de linha e deixa o resto da linha VAZIO — duas linhas de rolagem
compradas por nada. Com span 2 eles convivem na mesma linha dos campos
curtos.
ATENÇÃO ao celular: `span 2` numa grade de UMA coluna não é reduzido pelo
navegador — ele CRIA uma segunda coluna implícita, dimensionada por
`auto`. Medido: com `grid-template-columns: 1fr` a 375px, o computado
virava `224px 109px`, ou seja, um formulário torto de duas colunas em vez
da coluna única pretendida. Por isso o reset explícito no breakpoint. */
.form-grid .campo-duplo {
grid-column: span 2;
}
.form-grid input, .form-grid select, .form-grid textarea {
margin-top: var(--espaco-1);
padding: .35rem .6rem;
border: 1px solid var(--cor-borda);
border-radius: 8px;
background: var(--cor-fundo-cartao);
color: var(--cor-texto);
min-height: var(--altura-controle);
}
/* textarea não deve ser esticada até a altura de controle — ela tem a sua. */
.form-grid textarea {
min-height: 3.4rem;
}
/* Exceção: textarea que DIVIDE A LINHA com campos normais.
Em repouso ela precisa ter a altura dos vizinhos. Mais alta, ela estica a
linha inteira do grid e sobra um vão embaixo de cada campo ao lado — a
borda inferior da linha deixa de ser uma reta, que é o que dá o aspecto
desalinhado. Ao receber foco ela cresce, então quem for realmente
escrever não fica espremido, e o resize manual continua disponível. */
.form-grid .campo-duplo textarea {
min-height: var(--altura-controle);
height: var(--altura-controle);
transition: height .15s ease;
}
.form-grid .campo-duplo textarea:focus {
height: 5.5rem;
}
/* Foco sempre visível (REQ-05, regra 7) — reforça o outline nativo do
navegador para garantir contraste consistente nos dois temas. */
.form-grid input:focus-visible, .form-grid select:focus-visible, .form-grid textarea:focus-visible {
outline: 2px solid var(--cor-primaria);
outline-offset: 1px;
}
input, select, textarea, button {
font-family: inherit;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select, textarea {
border: 1px solid var(--cor-borda);
border-radius: 8px;
background: var(--cor-fundo-cartao);
color: var(--cor-texto);
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select {
min-height: var(--altura-controle);
padding: .35rem .6rem;
}
/* 7rem (112px) era quase um terço da altura útil de um notebook só para o campo
de observação, que quase sempre fica vazio. 4.5rem ainda mostra 3 linhas e o
usuário pode arrastar para ampliar (resize: vertical). */
textarea {
min-height: 3.4rem;
padding: .35rem .6rem;
resize: vertical;
}
input::placeholder, textarea::placeholder {
color: var(--cor-texto-secundario);
opacity: .8;
}
.form-actions, .action-row {
display: flex;
align-items: center;
gap: var(--espaco-2);
flex-wrap: wrap;
}
.form-actions {
align-self: end;
}
.action-row-section {
margin-top: var(--espaco-2);
}
.pagination-row {
display: flex;
align-items: center;
gap: var(--espaco-2);
flex-wrap: wrap;
margin: var(--espaco-2) 0 0;
}
.field-full-width {
width: 100%;
}
.alert-inline {
margin: 0;
}
.subsection-block {
margin-top: var(--espaco-2);
}
.result-actions {
margin-top: var(--espaco-3);
}
.table-total-summary {
margin-top: var(--espaco-3);
font-size: 1.05rem;
font-weight: 700;
}
button:not(.navbar-toggler):not(.toast-fechar):not(.modal-fechar):not(.theme-toggle):not(.btn-primary):not(.btn-danger):not(.btn-secondary):not(.btn-link),
.btn-secondary {
/* min-height igual ao dos campos: sem isso o botão fica mais baixo que o
input ao lado, que era a origem da sensação de desalinhamento. */
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--altura-controle);
border: 1px solid var(--cor-borda);
border-radius: 8px;
padding: .35rem .8rem;
background: var(--cor-fundo-cartao);
color: var(--cor-texto);
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
button:not(.navbar-toggler):not(.toast-fechar):not(.modal-fechar):not(.theme-toggle):not(.btn-primary):not(.btn-danger):not(.btn-secondary):not(.btn-link):hover,
.btn-secondary:hover {
background: var(--cor-fundo);
border-color: var(--cor-texto-secundario);
}
button:not(.navbar-toggler):not(.toast-fechar):not(.modal-fechar):not(.theme-toggle):not(.btn-primary):not(.btn-danger):not(.btn-secondary):not(.btn-link):active,
.btn-secondary:active {
transform: translateY(1px);
}
button:not(.navbar-toggler):not(.toast-fechar):not(.modal-fechar):not(.theme-toggle):disabled,
.btn:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
/* Altura/padding únicos para TODOS os botões de ação, inclusive quando são
. Sem isto, .btn-primary e .btn-danger herdavam a métrica do
Bootstrap e ficavam com altura diferente dos botões genéricos acima — dois
botões na mesma linha não batiam. */
.btn-primary, .btn-danger, a.btn-primary, a.btn-danger {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--altura-controle);
padding: .35rem .8rem;
border-radius: 8px;
}
.btn-primary {
color: var(--cor-texto-sobre-superficie);
background-color: var(--cor-primaria);
border-color: var(--cor-primaria);
box-shadow: 0 2px 4px rgba(15, 23, 42, 0.14);
transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-primary:hover {
color: var(--cor-texto-sobre-superficie);
background-color: var(--cor-primaria-hover);
border-color: var(--cor-primaria-hover);
box-shadow: var(--sombra-cartao);
}
.btn-primary:active {
color: var(--cor-texto-sobre-superficie);
box-shadow: none;
}
.btn-danger {
background-color: var(--cor-erro-superficie) !important;
border-color: var(--cor-erro-superficie) !important;
color: var(--cor-texto-sobre-superficie) !important;
box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12);
}
.btn-danger:hover {
background-color: var(--cor-erro-hover) !important;
border-color: var(--cor-erro-hover) !important;
}
/* ============================================================
Tema — botão de alternância claro/escuro
============================================================ */
.theme-toggle {
border: none;
background: var(--cor-sidebar-overlay);
color: var(--cor-sidebar-texto);
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
}
.theme-toggle:hover {
background: var(--cor-sidebar-overlay-ativo);
}
.login-theme-toggle {
position: fixed;
top: 1rem;
right: 1rem;
}
.login-theme-toggle .theme-toggle {
background: color-mix(in srgb, var(--cor-texto) 8%, transparent);
color: var(--cor-texto);
}
/* ============================================================
Toast — mensageria global de sucesso/erro (ver NotificationService)
============================================================ */
/* Toast centralizado na viewport. z-index acima do modal (1500) e do
diálogo de confirmação (2000) para que erros de formulário dentro de
modal continuem visíveis por cima do backdrop. pointer-events: none no
container para não bloquear cliques na página; os itens reativam os
cliques (botão de fechar). */
.toast-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2500;
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
max-width: min(92vw, 460px);
pointer-events: none;
}
.toast-item {
display: flex;
align-items: center;
gap: .65rem;
padding: .85rem 1rem;
border-radius: var(--raio-borda);
box-shadow: var(--sombra-cartao-elevada);
animation: toast-entrar .2s ease-out;
color: var(--cor-texto-sobre-superficie);
pointer-events: auto;
}
.toast-sucesso {
background: var(--cor-sucesso-superficie);
}
.toast-erro {
background: var(--cor-erro-superficie);
}
.toast-icone {
font-weight: bold;
}
.toast-texto {
flex: 1;
font-size: .9rem;
}
.toast-fechar {
background: none;
border: none;
color: inherit;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
padding: 0 .25rem;
}
@keyframes toast-entrar {
from { opacity: 0; transform: scale(.92); }
to { opacity: 1; transform: scale(1); }
}
/* ============================================================
Modal — cadastro/edição e resultados de busca
============================================================ */
.modal-backdrop-custom {
position: fixed;
inset: 0;
background: var(--cor-overlay);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
z-index: 1500;
overflow-y: auto;
}
.modal-box {
background: var(--cor-fundo-cartao);
color: var(--cor-texto);
border-radius: var(--raio-borda);
box-shadow: var(--sombra-cartao-elevada);
width: 100%;
max-width: 720px;
max-height: calc(100vh - 4rem);
display: flex;
flex-direction: column;
}
.modal-header-custom {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--espaco-3) var(--espaco-5);
border-bottom: 1px solid var(--cor-borda);
}
.modal-header-custom h3 {
margin: 0;
font-size: 1.1rem;
}
.modal-fechar {
background: none;
border: none;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
color: var(--cor-texto-secundario);
}
.modal-body-custom {
padding: var(--espaco-5);
overflow-y: auto;
}
.modal-actions {
display: flex;
gap: var(--espaco-2);
margin-top: var(--espaco-4);
flex-wrap: wrap;
}
/* Diálogo de confirmação (keyboard-nav.js). Substitui o window.confirm nativo,
que o navegador ancora no topo da viewport e não permite estilizar. Classes
próprias — e não .modal-box — porque ele pode abrir POR CIMA de um modal
Blazor já aberto (ex.: salvar edição dentro do modal de rol), e os handlers
de Esc/Tab do keyboard-nav.js buscam o primeiro .modal-box do documento. */
.confirmacao-backdrop {
position: fixed;
inset: 0;
background: var(--cor-overlay);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
z-index: 2000;
}
.confirmacao-box {
background: var(--cor-fundo-cartao);
color: var(--cor-texto);
border-radius: var(--raio-borda);
box-shadow: var(--sombra-cartao-elevada);
width: 100%;
max-width: 420px;
padding: 1.75rem;
text-align: center;
}
.confirmacao-box p {
margin: 0 0 1.25rem;
font-size: 1.05rem;
}
.confirmacao-acoes {
display: flex;
gap: .5rem;
justify-content: center;
}
@media (max-width: 640px) {
.modal-backdrop-custom {
padding: 0;
align-items: stretch;
}
.modal-box {
max-width: 100%;
max-height: 100vh;
border-radius: 0;
}
}
/* Relatório analítico agrupado (GrupoAnalitico.razor) */
.grupo-analitico {
margin-top: var(--espaco-3);
margin-left: calc(var(--grupo-nivel, 0) * var(--espaco-recuo-grupo));
}
.grupo-analitico-cabecalho {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--espaco-4);
padding: var(--espaco-2) var(--espaco-3);
border-bottom: 1px solid var(--cor-borda);
background: var(--cor-fundo);
}
.grupo-analitico-rotulo {
font-weight: 600;
}
.grupo-analitico-subtotal {
color: var(--cor-texto-secundario);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.grupo-analitico-itens {
margin: .25rem 0 0;
}
.grupo-analitico-itens td {
border-top: none;
padding-top: .2rem;
padding-bottom: .2rem;
}
.agrupamento-opcoes {
display: flex;
flex-wrap: wrap;
gap: var(--espaco-2) var(--espaco-5);
align-items: center;
margin-top: var(--espaco-2);
}
.agrupamento-opcoes label {
display: flex;
align-items: center;
gap: .35rem;
margin: 0;
}
/* ============================================================
Lavanderia Cislav - estilos das telas de negócio
============================================================ */
.login-page {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: var(--cor-fundo);
padding: 1rem;
}
.login-box {
background: var(--cor-fundo-cartao);
color: var(--cor-texto);
padding: 2.25rem 2.5rem;
border-radius: var(--raio-borda);
box-shadow: var(--sombra-cartao-elevada);
width: 100%;
max-width: 380px;
}
.login-box h1 { font-size: 1.65rem; color: var(--cor-primaria); margin-bottom: .25rem; }
.login-subtitulo { color: var(--cor-texto-secundario); margin-bottom: 1.25rem; font-size: .95rem; }
.login-box label { display: block; margin-bottom: 1rem; font-size: .9rem; font-weight: 600; color: var(--cor-texto-secundario); }
.login-box input {
display: block;
width: 100%;
padding: .6rem .75rem;
margin-top: .35rem;
border: 1px solid var(--cor-borda);
border-radius: 8px;
background: var(--cor-fundo-cartao);
color: var(--cor-texto);
}
.login-box button { width: 100%; padding: .7rem; background: var(--cor-primaria); color: var(--cor-texto-sobre-superficie); border: none; border-radius: 8px; margin-top: .5rem; font-weight: 700; }
.login-box button:hover { background: var(--cor-primaria-hover); }
.login-box .alert { background: var(--cor-erro-fundo); color: var(--cor-erro); padding: .65rem .8rem; border-radius: 8px; margin-bottom: 1rem; font-size: .875rem; }
/* ============================================================
Seleção de empresa — lista de opções em estilo cartão
============================================================ */
.login-box-empresa {
max-width: 440px;
}
.selecionar-empresa-ajuda {
color: var(--cor-texto-secundario);
font-size: .85rem;
margin-bottom: 1.25rem;
}
.empresa-lista {
display: flex;
flex-direction: column;
gap: .6rem;
max-height: 45vh;
overflow-y: auto;
margin-bottom: 1.25rem;
}
.empresa-opcao {
display: flex;
align-items: center;
gap: .75rem;
padding: .85rem 1rem;
margin: 0;
border: 1px solid var(--cor-borda);
border-radius: var(--raio-borda);
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease;
}
.empresa-opcao:hover {
border-color: var(--cor-primaria);
background: var(--cor-fundo);
}
.empresa-opcao:has(input:checked) {
border-color: var(--cor-primaria);
background: color-mix(in srgb, var(--cor-primaria) 10%, transparent);
}
.empresa-opcao input[type="radio"] {
width: 1.05rem;
height: 1.05rem;
margin: 0;
accent-color: var(--cor-primaria);
flex-shrink: 0;
}
.empresa-opcao-nome {
font-size: .95rem;
color: var(--cor-texto);
}
/* ============================================================
Saldo Devedor — REQ-07: cor + texto (não só cor) para cada
situação, legível nos dois temas via variáveis CSS.
============================================================ */
/* Especificidade de elemento+classe: precisa empatar (e vencer por ordem no
arquivo) a regra ".table > :not(caption) > * > *" que já fixa a cor padrão
das células — uma classe sozinha (0,1,0) perde para ela (0,1,1). */
td.saldo-falta-devolver { color: var(--cor-erro); font-weight: bold; }
td.saldo-entregou-a-mais { color: var(--cor-info); font-weight: bold; }
td.saldo-zero { color: var(--cor-texto); font-weight: normal; }
.status-cancelado {
color: var(--cor-erro);
font-weight: 650;
}
.mensagem-erro {
color: var(--cor-erro);
}
.status-badge {
display: inline-block;
margin-left: .35rem;
padding: .2rem .55rem;
border-radius: 999px;
font-size: .78rem;
font-weight: 700;
line-height: 1.25;
vertical-align: middle;
}
.status-fechado {
color: var(--cor-erro);
background: var(--cor-erro-fundo);
}
.status-aberto {
color: var(--cor-info);
background: var(--cor-info-fundo);
}
/* ============================================================
SeletorEmpresas (REQ-08) — linha inteira destacada quando a
empresa está selecionada, legível nos dois temas.
============================================================ */
tr.linha-selecionada > * {
background-color: var(--cor-info-fundo) !important;
}
/* ============================================================
Administração de usuários — ações padronizadas (mesmo tamanho,
alinhadas) e badge compacto de empresas vinculadas (evita distorcer
a linha quando o usuário acessa muitas empresas).
============================================================ */
/* Ações de linha: uma linha só, larguras iguais.
Com flex-wrap e min-width de 108px os tres botoes nao cabiam na coluna e
quebravam para uma segunda linha, dobrando a altura de TODO registro da
lista. Sem quebra e com fonte menor eles cabem lado a lado; a largura igual
e o que faz a coluna parecer alinhada de cima a baixo. */
.acoes-linha {
display: flex;
flex-wrap: nowrap;
gap: var(--espaco-1);
justify-content: flex-end;
}
/* 7.25rem é a largura do maior rótulo ("Redefinir senha") na fonte de
.8125rem. Como piso comum, os três saem idênticos — que é o que faz a
coluna ler como alinhada. Um valor menor deixaria só esse botão maior. */
.acoes-linha button {
flex: 0 0 auto;
min-width: 7.25rem;
padding-left: var(--espaco-2);
padding-right: var(--espaco-2);
font-size: .8125rem;
white-space: nowrap;
text-align: center;
}
/* No celular a coluna some junto com a tabela rolavel; ali a quebra ajuda. */
@media (max-width: 640px) {
.acoes-linha {
flex-wrap: wrap;
justify-content: flex-start;
}
}
/* Identidade em duas alturas: nome em destaque, login abaixo em tom menor.
Elimina uma coluna inteira sem esconder informacao. */
.celula-identidade {
display: flex;
flex-direction: column;
line-height: 1.25;
}
.identidade-login {
font-size: .8125rem;
color: var(--cor-texto-secundario);
}
.identidade-inativo {
color: var(--cor-erro);
font-weight: 600;
}
/* Base unica de badge — .badge-empresas e .status-badge vinham com paddings e
raios diferentes, e era isso que dava o aspecto desalinhado da lista. */
.badge-papel {
display: inline-block;
padding: .1rem .5rem;
border-radius: 999px;
font-size: .78rem;
font-weight: 600;
line-height: 1.35;
white-space: nowrap;
background: var(--cor-fundo);
color: var(--cor-texto-secundario);
border: 1px solid var(--cor-borda);
}
.badge-papel-admin {
background: var(--cor-info-fundo);
color: var(--cor-info);
border-color: transparent;
}
.col-acoes {
width: 1%;
text-align: right;
white-space: nowrap;
}
/* Mesma métrica de .badge-papel: os dois aparecem em colunas vizinhas da
mesma linha, e paddings diferentes desalinhavam visualmente a lista. */
.badge-empresas {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: .1rem .5rem;
border-radius: 999px;
border: 1px solid var(--cor-borda);
background: var(--cor-fundo-cartao);
color: var(--cor-texto);
font-size: .78rem;
font-weight: 600;
line-height: 1.35;
white-space: nowrap;
}
button.badge-empresas {
cursor: pointer;
}
button.badge-empresas:hover {
background: var(--cor-borda);
}
.badge-empresas-todas {
background: var(--cor-info-fundo);
color: var(--cor-info);
border-color: transparent;
font-weight: 600;
}
/* Ação de impressão do painel de saldo: fica acima da legenda, na mesma
faixa horizontal, para não gastar uma linha só dela. */
.saldo-acoes {
margin-bottom: var(--espaco-2);
}
.saldo-legenda {
display: flex;
flex-wrap: wrap;
gap: var(--espaco-1) var(--espaco-5);
margin: 0 0 var(--espaco-3);
font-size: .85rem;
}
.saldo-legenda-item {
display: flex;
align-items: center;
gap: .4rem;
}
.saldo-legenda-marcador {
display: inline-block;
width: .75rem;
height: .75rem;
border-radius: 50%;
flex-shrink: 0;
}
.saldo-legenda-marcador.saldo-falta-devolver {
background: var(--cor-erro);
}
.saldo-legenda-marcador.saldo-entregou-a-mais {
background: var(--cor-info);
}
.saldo-legenda-marcador.saldo-zero {
background: var(--cor-texto);
}
/* Saldo exibido como badge: o fundo semântico deixa a cor inequívoca mesmo em
telas de baixo contraste ou impressão, sem recorrer a sinais +/- (que o
usuário pediu para não usar). O significado continua reforçado pelo texto
acessível em .visually-hidden dentro da célula. */
.saldo-valor {
display: inline-block;
min-width: 3.25rem;
padding: .2rem .6rem;
border-radius: 999px;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: center;
}
td.saldo-falta-devolver .saldo-valor {
background: var(--cor-erro-fundo);
color: var(--cor-erro);
}
td.saldo-entregou-a-mais .saldo-valor {
background: var(--cor-info-fundo);
color: var(--cor-info);
}
td.saldo-zero .saldo-valor {
background: var(--cor-fundo);
color: var(--cor-texto);
font-weight: 600;
}
.th-ordenavel {
cursor: pointer;
user-select: none;
}
.th-ordenavel:hover {
color: var(--cor-primaria);
}
.lista-toolbar {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: var(--espaco-3);
}
.lista-toolbar-filtro {
flex: 1;
min-width: 220px;
}
.input-moeda {
text-align: right;
}
.input-unidade {
width: 4rem;
text-transform: uppercase;
}
.linha-clicavel, .table-row-label {
cursor: pointer;
}
.seletor-empresas-filtro {
margin-bottom: var(--espaco-2);
}
.seletor-empresas-resumo {
margin: .5rem 0 0;
}
.section-alert {
margin-top: 1rem;
}
.modal-section-title {
margin-top: 0;
}
.status-cancelado,
.texto-erro {
color: var(--cor-erro) !important;
}
.text-danger {
color: var(--cor-erro) !important;
}
.text-success {
color: var(--cor-sucesso) !important;
}
.text-warning {
color: var(--cor-aviso) !important;
}
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active {
color: var(--cor-texto-sobre-superficie);
}
.blazor-error-boundary {
background-color: var(--cor-erro-superficie);
color: var(--cor-texto-sobre-superficie);
}
/* O conteúdo é mantido no DOM para o JS interop, mas só é exibido no iframe
isolado criado por print-local.js. Assim a tela normal não é afetada. */
.impressao-epson-local {
display: none;
}
/* ============================================================
Responsividade e toque (item 10)
Antes desta seção o arquivo tinha UM único breakpoint (640px),
usado só para o modal. Não havia faixa de tablet, e nenhum ajuste
de alvo de toque — o que tornava o sistema desconfortável no
celular, uma das queixas relatadas.
============================================================ */
/* Tablet / notebook estreito: a grade de formulário com minmax(220px)
gera colunas espremidas nessa faixa. Reduzir o mínimo mantém duas
colunas legíveis em vez de forçar uma só. */
@media (max-width: 1024px) {
.form-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
}
/* Celular: uma coluna, e tabelas largas rolam DENTRO do próprio
contêiner em vez de estourar a página horizontalmente. */
@media (max-width: 640px) {
.content {
padding-top: var(--espaco-3);
padding-bottom: var(--espaco-4);
}
.form-grid {
grid-template-columns: 1fr;
gap: var(--espaco-3);
}
/* Sem isto o span 2 gera uma coluna implícita e desmonta a coluna única. */
.form-grid .campo-duplo {
grid-column: auto;
}
/* A altura reduzida da observação existe para alinhar a base da LINHA com
os campos vizinhos. Em coluna única não há linha para alinhar, então a
restrição perde o motivo e só atrapalha quem digita no celular. */
.form-grid .campo-duplo textarea,
.form-grid .campo-duplo textarea:focus {
height: auto;
min-height: 3.4rem;
}
/* Botão de ação ocupa a linha inteira: alvo maior e sem botões
colados lado a lado, que erram o toque. */
.form-actions, .action-row {
gap: var(--espaco-2);
}
.form-actions > .btn-primary,
.form-actions > .btn-danger,
.form-actions > .btn-secondary {
flex: 1 1 100%;
}
/* Nunca deixar a página rolar na horizontal (regra de responsivo):
o overflow fica na tabela, não no body. */
.table-responsive-wrapper {
-webkit-overflow-scrolling: touch;
}
/* No celular a toolbar de filtro não pode exigir 220px fixos. */
.lista-toolbar-filtro {
min-width: 0;
}
}
/* Dispositivo de toque (independente da largura): 44px é o mínimo
recomendado para alvo de toque; 2.5rem (40px) ficava abaixo. */
@media (pointer: coarse) {
:root {
--altura-controle: 2.75rem;
}
}
/* Respeita quem pediu menos movimento no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
Largura de campos e scroll horizontal (item 10)
CAUSA RAIZ do scroll lateral relatado: itens de grid/flex têm
min-width:auto por padrão, ou seja, NÃO encolhem abaixo da largura
do próprio conteúdo. Um com uma opção de texto longo
(nome de enxoval, razão social) esticava a coluna e estourava a
largura da página. min-width:0 devolve o direito de encolher, e o
texto longo passa a ser truncado com reticências em vez de empurrar
o layout.
Segundo fator: nenhum campo tinha max-width, então um campo de UF
(2 caracteres) ocupava a mesma largura de um de razão social —
caixas exageradamente grandes, como relatado.
============================================================ */
/* 1. Deixar os itens da grade encolherem. */
.form-grid > label,
.form-grid > .full-width,
.form-actions,
.action-row,
.lista-toolbar-filtro {
min-width: 0;
}
.form-grid input,
.form-grid select,
.form-grid textarea {
min-width: 0;
max-width: 100%;
}
/* 2. Texto longo em trunca, não estica. */
select {
text-overflow: ellipsis;
}
/* 3. Teto de largura por natureza do campo. Um campo não deve ficar mais
largo do que o dado que ele guarda — é o que dava a sensação de
"caixas grandes demais". Aplicar via classe no markup da página. */
.campo-curto { max-width: 7rem; } /* UF, CEP, quantidade, horário */
.campo-medio { max-width: 14rem; } /* data, telefone, CPF/CNPJ, código */
.campo-longo { max-width: 28rem; } /* nome, razão social, e-mail */
/* 4. Rede de segurança: nada dentro do conteúdo pode estourar a largura
da página. Se algo ainda tentar, quem rola é o contêiner, não o body. */
.content {
overflow-x: clip;
}
.table-responsive-wrapper {
max-width: 100%;
}
/* 5. Limite de largura de leitura em monitores largos. Sem isto, a grade
espalha os campos por toda a tela de um ultrawide e o olho precisa
varrer distâncias grandes entre rótulo e campo. */
.form-grid {
max-width: 1200px;
}
/* ============================================================
Correção do scroll horizontal no nível do layout (item 10)
Achado na validação em navegador: o scroll lateral persistia mesmo
depois do min-width:0 nos campos. Medindo, .page (flex) tinha 1265px,
a .sidebar 249px e o 1220px — somando 1469px, ou seja, 204px
além da viewport.
Motivo: é flex item com flex:1 1 0%, e flex items também
nascem com min-width:auto. Ele não conseguia encolher abaixo da
largura do próprio conteúdo, então empurrava a página para o lado
em TODAS as telas, não só no formulário.
============================================================ */
.page > main,
.page > .sidebar {
min-width: 0;
}
/* O conteúdo dentro do main também não pode forçar largura. */
.page > main > .content {
max-width: 100%;
}
/* ============================================================
Ajuda de tela compacta (item 10)
As telas operacionais abriam com parágrafos que explicavam decisões de
implementação e do sistema legado ("confirmado no áudio 2", "REQ-09",
referências a células do Excel antigo). Era nota de desenvolvimento
exposta ao operador, e empurrava o primeiro controle para baixo da
dobra. Trocados por uma linha curta e útil, com peso visual menor.
============================================================ */
/* 80ch quebrava frases curtas em duas linhas sem necessidade — e a segunda
linha empurra o primeiro campo para baixo em toda tela operacional. 120ch
acomoda a ajuda de uma linha; o texto continua tendo de ser curto. */
.ajuda-tela {
margin: calc(var(--espaco-1) * -1) 0 var(--espaco-3);
max-width: 120ch;
font-size: .875rem;
line-height: 1.45;
color: var(--cor-texto-secundario);
}
/* As classes de largura precisam vencer o "width:100%" que o campo herda
dentro da grade; sem isto, o teto não surte efeito no controle. */
.form-grid label.campo-curto,
.form-grid label.campo-medio,
.form-grid label.campo-longo { max-width: 100%; }
.form-grid .campo-curto input, .form-grid .campo-curto select,
.form-grid input.campo-curto, .form-grid select.campo-curto { max-width: 7rem; }
.form-grid .campo-medio input, .form-grid .campo-medio select,
.form-grid input.campo-medio, .form-grid select.campo-medio { max-width: 14rem; }
.form-grid .campo-longo input, .form-grid .campo-longo select,
.form-grid input.campo-longo, .form-grid select.campo-longo { max-width: 28rem; }
/* No celular o teto atrapalha: campo estreito demais é pior que largo. */
@media (max-width: 640px) {
.form-grid .campo-curto input, .form-grid .campo-curto select,
.form-grid .campo-medio input, .form-grid .campo-medio select,
.form-grid .campo-longo input, .form-grid .campo-longo select,
.form-grid input.campo-curto, .form-grid select.campo-curto,
.form-grid input.campo-medio, .form-grid select.campo-medio,
.form-grid input.campo-longo, .form-grid select.campo-longo {
max-width: 100%;
}
}
/* Cartões de seleção de rotina especial (item 3). */
.lista-rotinas {
display: grid;
gap: var(--espaco-2);
}
.cartao-rotina {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--espaco-1);
width: 100%;
padding: var(--espaco-3) var(--espaco-4);
text-align: left;
border: 1px solid var(--cor-borda);
border-radius: 8px;
background: var(--cor-fundo-cartao);
color: var(--cor-texto);
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease;
}
.cartao-rotina:hover {
border-color: var(--cor-primaria);
background: var(--cor-linha-hover);
}
.cartao-rotina span {
font-size: .875rem;
line-height: 1.45;
color: var(--cor-texto-secundario);
}
/* Marcador de enxoval compartilhado entre empresas (etapa 4 do multi-tenancy).
O catálogo é recortado por vínculo, não copiado: alterar um item marcado
assim muda também para as outras empresas que o enxergam. */
.marcador-compartilhado {
display: inline-block;
margin-left: .5rem;
padding: .05rem .4rem;
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .02em;
border: 1px solid currentColor;
border-radius: 999px;
opacity: .75;
cursor: help;
vertical-align: middle;
}