/* Só a estrutura do layout do sistema (cabeçalho em duas faixas + conteúdo).
   Cores, fontes e componentes vêm do Radix Themes (variáveis --accent-*, --gray-*). */
* { box-sizing: border-box; }
html, body { margin: 0; }

.radix-themes { --default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
/* Painéis sólidos: o padrão do Radix desfoca o fundo (blur 64px) de cada cartão, menu e janela, o que trava a rolagem
   em computador sem placa de vídeo. Vale para todas as telas, sem mudar cada <Theme>. */
.radix-themes { --color-panel: var(--color-panel-solid); --backdrop-filter-panel: none; }
.pagina { min-height: 100vh; background: var(--gray-2); }

/* Faixa de cima: cor primária, logo, abas dos componentes e ícones da conta */
.cabecalho { position: sticky; top: 0; z-index: 10; }
.cabecalho-topo {
    height: 60px;
    background: var(--accent-9);
    color: #fff;
    display: flex;
    align-items: stretch;
    padding: 0 24px;
    gap: 16px;
}
.cabecalho-logo { display: flex; align-items: center; flex-shrink: 0; }
.cabecalho-logo img { height: 30px; display: block; }

.abas-componentes {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    margin-left: 28px;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
}
.abas-componentes button {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .8);
    font: inherit;
    font-size: 14px;
    white-space: nowrap;
    padding: 8px 13px;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
}
.abas-componentes button:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.abas-componentes button[data-state="active"] { background: var(--color-panel-solid); color: var(--gray-11); }

.cabecalho-acoes { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cabecalho-acoes .rt-IconButton { color: #fff; margin: 0; }
.cabecalho-acoes .rt-IconButton:hover { background: rgba(255, 255, 255, .12); }
.conta { display: flex; align-items: center; gap: 12px; margin-left: 8px; text-align: right; line-height: 1.2; }

/* Faixa de baixo: botões dos módulos do componente selecionado */
.cabecalho-modulos {
    min-height: 60px;
    background: var(--color-panel-solid);
    border-bottom: 1px solid var(--gray-a4);
    display: flex;
    align-items: center;
    padding: 10px 24px;
}
.cabecalho-modulos [role="tabpanel"]:focus { outline: none; }
.modulo { position: relative; }
.divisor-modulos { align-self: center; margin: 0 4px; }
.menu-mobile__rotulo { padding: 4px 12px; }
.modulo .rt-Badge { position: absolute; top: -9px; right: -6px; }

.conteudo { padding: 12px 16px; }


@media (max-width: 767px) {
    .cabecalho-topo, .cabecalho-modulos { padding-left: 16px; padding-right: 16px; }
    .abas-componentes { margin-left: 8px; }
    .conta-nome { display: none; }
    .cabecalho-acoes .opcional { display: none; }
}

/* Cartões tracejados (endereços, contatos e anexo), como no sistema */
.caixa-tracejada {
    border: 1px dashed var(--gray-a7);
    border-radius: var(--radius-4);
    padding: var(--space-5);
}

/* Seta dos selects: fa-chevron-down do sistema no lugar da seta do Radix */
.lista-com-seta { position: relative; }
.lista-com-seta .rt-SelectIcon { visibility: hidden; }
.lista-com-seta > i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--gray-11);
}

/* Card do cadastro (size 4) com espaçamento interno menor */
.rt-Card:where(.rt-r-size-4) {
    --card-padding: var(--space-4);
    --card-border-radius: var(--radius-5);
}

/* Rodapé fixo, como no sistema */
.pagina { padding-bottom: 64px; }
.rodape {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    min-height: 48px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 16px;
    background: var(--gray-2);
    border-top: 1px solid var(--gray-a5);
}

/* Cabeçalho da tabela da listagem: maiúsculas e ordenação por clique */
.cabecalho-coluna, .cabecalho-ordenavel {
    font-size: var(--font-size-1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--gray-10);
}
.cabecalho-ordenavel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    padding: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}
.cabecalho-ordenavel:hover { color: var(--gray-12); }
.cabecalho-ordenavel i { font-size: 9px; }

/* Modo visualizar: campos bloqueados com fundo cinza e texto apagado, como no sistema */
body[data-modo="visualizar"] .rt-TextFieldRoot,
body[data-modo="visualizar"] .rt-TextAreaRoot,
body[data-modo="visualizar"] .rt-SelectTrigger,
body[data-modo="visualizar"] .rt-PopoverTrigger.rt-Button,
body[data-modo="visualizar"] button.rt-Button:disabled {
    background-color: var(--gray-a4) !important;
    box-shadow: inset 0 0 0 1px var(--gray-a5) !important;
    color: var(--gray-10) !important;
}
body[data-modo="visualizar"] .rt-TextFieldInput,
body[data-modo="visualizar"] .rt-TextAreaInput,
body[data-modo="visualizar"] .rt-TextFieldSlot,
body[data-modo="visualizar"] .rt-SelectTrigger .rt-SelectTriggerInner,
body[data-modo="visualizar"] .lista-com-seta > i {
    color: var(--gray-10) !important;
    -webkit-text-fill-color: var(--gray-10);
    cursor: default;
}

/* Janela de ação aberta na tela de visualizar (ex.: coletar assinatura): os campos dela continuam editáveis. */
body[data-modo="visualizar"] .janela-livre .rt-TextFieldRoot,
body[data-modo="visualizar"] .janela-livre .rt-SelectTrigger,
body[data-modo="visualizar"] .janela-livre .rt-PopoverTrigger.rt-Button:not(:disabled),
body[data-modo="visualizar"] .lista-livre.rt-Button:not(:disabled) {
    background-color: var(--color-surface) !important;
    box-shadow: inset 0 0 0 1px var(--gray-a7) !important;
    color: var(--gray-12) !important;
}
body[data-modo="visualizar"] .janela-livre .rt-TextFieldInput,
body[data-modo="visualizar"] .janela-livre .rt-SelectTrigger .rt-SelectTriggerInner,
body[data-modo="visualizar"] .janela-livre .lista-com-seta > i {
    color: var(--gray-12) !important;
    -webkit-text-fill-color: var(--gray-12);
    cursor: auto;
}

/* Aviso rápido depois de uma ação (ex.: "Parceiro removido."): no topo, à direita, abaixo do cabeçalho */
.aviso-flutuante {
    position: fixed;
    right: 16px;
    top: 72px;
    z-index: 20;
    background: var(--color-panel-solid);
    box-shadow: var(--shadow-4);
}

/* Switch do status do parceiro: verde quando ativo, vermelho quando inativo */
.switch-inativo.rt-SwitchRoot::before { background-color: var(--red-9) !important; }

/* Tudo que é clicável usa cursor-pointer (o Radix usa "default" nos botões por padrão). */
.radix-themes {
    --cursor-button: pointer;
    --cursor-checkbox: pointer;
    --cursor-link: pointer;
    --cursor-menu-item: pointer;
    --cursor-radio: pointer;
    --cursor-slider-thumb: pointer;
    --cursor-switch: pointer;
}
a[href], button:not(:disabled), [role="button"], [role="tab"], [role="menuitem"], [role="option"], [role="switch"],
[role="checkbox"], [role="combobox"], summary, label:has(input:not(:disabled)), label:has(button:not(:disabled)) {
    cursor: pointer;
}
button:disabled, [aria-disabled="true"], [data-disabled] { cursor: not-allowed; }

/* Opções da lista pesquisável (grupo do parceiro), no lugar do select2 */
.opcao-lista {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--radius-2);
    background: none;
    color: var(--gray-12);
    font: inherit;
    font-size: var(--font-size-2);
    text-align: left;
}
.opcao-lista:hover, .opcao-lista:focus-visible { background: var(--accent-a4); outline: none; }
.opcao-lista[data-selecionada="true"] { background: var(--accent-a3); font-weight: 500; }
/* Opção marcada pelas setas do teclado (select com busca, formulario.js › Lista) */
.opcao-lista[data-marcada="true"] { background: var(--accent-a4); }

/* Anexos (assets/js/anexos.js): área de envio e cartões dos arquivos */
.anexo-envio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 16px;
    text-align: center;
    border: 1px dashed var(--gray-a7);
    border-radius: var(--radius-4);
    background: var(--gray-a2);
    transition: background .15s, border-color .15s;
}
.anexo-envio:hover, .anexo-envio:focus-visible, .anexo-envio[data-sobre="true"] {
    border-color: var(--accent-9);
    background: var(--accent-a2);
    outline: none;
}
.anexo-card {
    min-width: 0;
    border: 1px solid var(--gray-a5);
    border-radius: var(--radius-4);
    background: var(--color-panel-solid);
    overflow: hidden;
}
.anexo-card[data-principal="true"] { border-color: var(--amber-8); box-shadow: 0 0 0 1px var(--amber-8); }
.anexo-miniatura {
    position: relative;
    display: block;
    width: 100%;
    height: 120px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--gray-a4);
    background: var(--gray-a2);
}
.anexo-miniatura-imagem { width: 100%; height: 100%; object-fit: cover; display: block; }
.anexo-selo { position: absolute; top: 6px; left: 6px; }
.anexo-visualizar-imagem { display: block; max-width: 100%; max-height: 65vh; margin: 0 auto; border-radius: var(--radius-3); }
.anexo-visualizar-pdf { width: 100%; height: 65vh; border: 0; border-radius: var(--radius-3); background: #fff; }

/* Switch bloqueado (ex.: visualizar): mantém as cores (verde, vermelho, azul) e só impede a troca */
.rt-SwitchRoot[data-disabled] { mix-blend-mode: normal; }
.rt-SwitchRoot[data-disabled]::before {
    background-image: linear-gradient(to right, var(--accent-track) 40%, transparent 60%) !important;
    box-shadow: inset 0 0 0 1px var(--gray-a5) !important;
}
.rt-SwitchRoot[data-disabled]:not(.switch-inativo)::before { background-color: var(--gray-a3); }
.rt-SwitchRoot[data-disabled] .rt-SwitchThumb { background-color: #fff; }


/* Ícone de informação ao lado do rótulo do campo (no lugar de texto embaixo do input) */
.icone-ajuda { display: inline-flex; align-items: center; cursor: help; border-radius: 50%; }
.icone-ajuda:focus-visible { outline: 2px solid var(--accent-8); outline-offset: 2px; }

.rotulo-maiusculo { text-transform: uppercase; letter-spacing: .02em; }

/* Resumo dos pagamentos (assets/js/pagamentos.js) */
.resumo-pagamento { padding: 10px 12px; border: 1px dashed var(--gray-a6); border-radius: var(--radius-3); }

/* Etiqueta com botão de remover (ex.: destinatários do e-mail) */
.botao-remover-etiqueta { border: 0; background: none; padding: 0 0 0 4px; color: inherit; font-size: 10px; }

/* Kanban (compras): colunas lado a lado com rolagem horizontal */
.kanban-area { position: relative; }
.kanban-trilho { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.kanban-coluna {
    flex: 0 0 290px;
    min-height: 60vh;
    padding: 12px;
    border-radius: var(--radius-4);
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor-coluna) 14%, transparent) 0, var(--gray-a2) 120px);
    border: 1px solid var(--gray-a4);
    scroll-snap-align: start;
    transition: border-color .15s, background .15s;
}
.kanban-coluna[data-alvo="true"] { border-color: var(--cor-coluna); background: color-mix(in srgb, var(--cor-coluna) 12%, var(--gray-a2)); }
.kanban-contador { padding: 1px 8px; border-radius: 99px; background: var(--gray-a4); }
.kanban-cartao { cursor: grab; border-left: 3px solid var(--cor-coluna); }
.kanban-cartao:active { cursor: grabbing; }
.kanban-cartao-rodape { padding-top: 8px; border-top: 1px dashed var(--gray-a6); display: grid; gap: 2px; }
.kanban-vazio { padding: 16px; text-align: center; border: 1px dashed var(--gray-a6); border-radius: var(--radius-3); }
.kanban-seta { position: absolute; top: 45%; box-shadow: var(--shadow-3); background: var(--color-panel-solid); }
.kanban-seta-direita { right: -6px; }
.kanban-seta-esquerda { left: -6px; }

/* Compras: seções recolhíveis e linha do tempo */
.secao-topo { all: unset; box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; }
.secao-topo:focus-visible { outline: 2px solid var(--accent-8); outline-offset: 4px; border-radius: var(--radius-2); }
.linha-tempo-item { position: relative; }
.linha-tempo-item:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--gray-a5); }
.linha-tempo-ponto { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--cor-status); background: color-mix(in srgb, var(--cor-status) 14%, transparent); }
/* Compra rápida: total no topo e etapas embaixo */
.rapida-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rapida-etapas { position: sticky; bottom: 56px; z-index: 5; }
/* Campo de etiquetas (notas referenciadas), no lugar do Tagify do sistema */
.campo-etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: var(--space-7); padding: 4px 8px; border-radius: var(--radius-2); box-shadow: inset 0 0 0 1px var(--gray-a7); background: var(--color-surface); cursor: text; }
.campo-etiquetas:focus-within { box-shadow: inset 0 0 0 1px var(--accent-8), 0 0 0 1px var(--accent-8); }
.campo-etiquetas input { flex: 1 1 260px; min-width: 120px; border: 0; outline: 0; background: transparent; color: var(--gray-12); font: inherit; font-size: var(--font-size-2); height: 32px; }
.campo-etiquetas.somente-leitura { background: var(--gray-a3); cursor: default; }
.etiqueta-chave { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* Pagamentos: separador tracejado e o "R$" que usa o saldo como valor */
.separador-tracejado { border-top: 1px dashed var(--gray-a6); }
.botao-saldo { all: unset; cursor: pointer; font-weight: 700; color: var(--accent-11); }
.botao-saldo:focus-visible { outline: 2px solid var(--accent-8); border-radius: 2px; }
/* Campos bloqueados (ex.: parcelas e juros sem forma a prazo) e somente leitura com fundo cinza, como no sistema */
.rt-TextFieldRoot.campo-bloqueavel:has(input:disabled),
.rt-TextFieldRoot.campo-somente-leitura { background-color: var(--gray-a4); box-shadow: inset 0 0 0 1px var(--gray-a5); }
.rt-TextFieldRoot.campo-bloqueavel:has(input:disabled) input,
.rt-TextFieldRoot.campo-somente-leitura input { color: var(--gray-10); -webkit-text-fill-color: var(--gray-10); }
/* Campo numérico com − e + (ex.: parcelas): esconde as setas do navegador e centraliza o número */
.campo-contador input { text-align: center; -moz-appearance: textfield; }
.campo-contador input::-webkit-outer-spin-button,
.campo-contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.linha-editando { background: var(--accent-a3); }
/* Boletos: link para o documento de origem e QR Code do PIX */
.link-documento { color: var(--accent-11); font-weight: 500; text-decoration: none; }
.link-documento:hover { text-decoration: underline; }
.qrcode-pix { width: 220px; height: 220px; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: var(--radius-3); }
/* Fechamento de caixa: cartão de "fechar pelo sistema" com borda tracejada vermelha e linhas tracejadas */
.cartao-alerta { box-shadow: none; border: 1px dashed var(--red-8); }
.linha-tracejada:not(:last-child) { border-bottom: 1px dashed var(--gray-a6); }
/* Calendário financeiro: filtros marcáveis, legenda, grade do mês/semana, eventos e lista */
.cal-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-filtro { position: relative; cursor: pointer; }
.cal-filtro input { position: absolute; opacity: 0; pointer-events: none; }
.cal-filtro span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--gray-a6); border-radius: var(--radius-3); font-size: var(--font-size-2); font-weight: 500; color: var(--gray-10); transition: border-color .15s, background-color .15s, color .15s; }
.cal-filtro[data-marcado="true"] span { border-color: var(--accent-8); background: var(--accent-a3); color: var(--gray-12); }
.cal-filtro input:focus-visible + span { outline: 2px solid var(--accent-8); outline-offset: 2px; }
.cal-legenda { font-size: var(--font-size-1); color: var(--gray-10); }
.cal-cor { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--cal-cor); }
.cal-receber { --cal-cor: var(--green-9); --cal-fundo: var(--green-a3); }
.cal-pagar { --cal-cor: var(--red-9); --cal-fundo: var(--red-a3); }
.cal-mensalidade { --cal-cor: var(--cyan-9); --cal-fundo: var(--cyan-a3); }
.cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--gray-a5); border-left: 1px solid var(--gray-a5); user-select: none; }
.cal-cabecalho { padding: 6px 8px; text-align: center; font-size: var(--font-size-1); font-weight: 600; text-transform: capitalize; color: var(--gray-11); background: var(--gray-a3); border-right: 1px solid var(--gray-a5); border-bottom: 1px solid var(--gray-a5); }
.cal-dia { min-height: 112px; padding: 4px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--gray-a5); border-bottom: 1px solid var(--gray-a5); cursor: pointer; min-width: 0; }
.cal-semana .cal-dia { min-height: 360px; }
.cal-dia[data-fora="true"] { background: var(--gray-a2); }
.cal-dia[data-fora="true"] .cal-numero { opacity: .45; }
.cal-dia[data-hoje="true"] { background: var(--accent-a3); }
.cal-dia[data-selecionado="true"] { background: var(--accent-a4); box-shadow: inset 0 0 0 1px var(--accent-8); }
.cal-numero { align-self: flex-end; font-size: var(--font-size-1); color: var(--gray-11); padding: 0 4px; }
.cal-evento { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 1px 5px; border-left: 3px solid var(--cal-cor); background: var(--cal-fundo); border-radius: 3px; font-size: 11px; font-weight: 600; color: var(--gray-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cal-evento:focus-visible { outline: 2px solid var(--accent-8); }
.cal-pago { opacity: .55; }
.cal-evento.cal-pago { text-decoration: line-through; }
.cal-evento.cal-vencido { box-shadow: inset 0 0 0 1px var(--cal-cor); }
.cal-mais { all: unset; font-size: 11px; font-weight: 600; color: var(--accent-11); padding: 0 4px; cursor: pointer; }
.cal-lista { max-height: 46vh; overflow-y: auto; }
.cal-linha { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--gray-a6); color: inherit; text-decoration: none; }
.cal-linha:last-child { border-bottom: 0; }
a.cal-linha:hover { background: var(--gray-a2); }
/* Painéis (admin, revenda, contador): a linha sob o mouse fica destacada nas listas. */
.pagina-painel .rt-TableBody > .rt-TableRow:hover { background: var(--gray-a3); }
/* Admin › Estrutura: a linha sob o mouse fica marcada (a árvore é longa e as ações ficam na ponta direita). */
.linha-estrutura { border-radius: 6px; transition: background-color .12s; }
.linha-estrutura:hover { background: var(--accent-a3); }
.cal-lista-mes { border: 1px solid var(--gray-a5); border-radius: var(--radius-3); overflow: hidden; }
.cal-lista-cabecalho { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; width: 100%; padding: 8px 12px; background: var(--gray-a3); font-weight: 600; font-size: var(--font-size-2); cursor: pointer; }
.cal-lista-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border-top: 1px solid var(--gray-a4); font-size: var(--font-size-2); cursor: pointer; }
.cal-lista-item:hover { background: var(--gray-a2); }
.cal-lista-item.cal-pago .cal-lista-texto { text-decoration: line-through; }
.cal-ponto { width: 10px; height: 10px; border-radius: 50%; border: 3px solid var(--cal-cor); flex: 0 0 auto; }
.cal-lista-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767.98px) { .cal-dia { min-height: 72px; } .cal-evento { font-size: 10px; } }
/* Indicadores financeiros: destaque com gradiente (claro e escuro), barras, pontos e ícones dos cartões */
.ind-destaque { position: relative; overflow: hidden; margin-bottom: var(--space-4); padding: var(--space-6); border-radius: var(--radius-5);
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 44%, #ccfbf1 100%); color: #0f172a; box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, .15); }
.dark .ind-destaque, .dark-theme .ind-destaque { background: linear-gradient(135deg, #0f172a 0%, #1e293b 48%, #0f766e 100%); color: #fff; }
.ind-destaque::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, .16), transparent 32%), radial-gradient(circle at bottom left, rgba(14, 165, 233, .14), transparent 28%); }
.ind-destaque > * { position: relative; }
.ind-suave { opacity: .72; }
@media (min-width: 1024px) { .ind-destaque-saldo { text-align: right; } }
.ind-barra { height: 8px; border-radius: 999px; background: var(--gray-a4); overflow: hidden; }
.ind-barra > div { height: 100%; border-radius: 999px; transition: width .3s; }
.ind-ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.ind-legenda { font-size: var(--font-size-1); color: var(--gray-10); }
.ind-icone { flex: 0 0 48px; width: 48px; height: 48px; border-radius: var(--radius-4); display: inline-flex; align-items: center; justify-content: center; }
.ind-conta { display: block; color: inherit; text-decoration: none; }
.ind-conta:hover { border-color: var(--accent-8); }
/* NF-e: ações rápidas do modal, chave na lista e fonte monoespaçada */
.nfe-acao { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-3);
    border: 1px solid color-mix(in srgb, var(--cor-acao) 30%, transparent); background: var(--fundo-acao); color: var(--cor-acao); cursor: pointer; }
.nfe-acao:hover { border-color: var(--cor-acao); }
.nfe-acao:focus-visible { outline: 2px solid var(--cor-acao); outline-offset: 2px; }
.nfe-acao span { display: flex; flex-direction: column; min-width: 0; }
.nfe-acao b { color: var(--gray-12); font-size: var(--font-size-2); }
.nfe-acao small { color: var(--gray-10); font-size: var(--font-size-1); }
.nfe-chave { all: unset; cursor: pointer; font-family: var(--code-font-family, monospace); font-size: var(--font-size-1); color: var(--gray-11); }
.nfe-chave:hover { color: var(--accent-11); }
.fonte-mono input { font-family: var(--code-font-family, monospace); letter-spacing: .02em; }
/* Tributações: UFs por região, cartões de regra e mapa da conferência */
.uf-chip { all: unset; box-sizing: border-box; cursor: pointer; min-width: 46px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: var(--radius-2); border: 1px solid var(--gray-a7); background: var(--color-surface); color: var(--gray-12); font-size: 13px; font-weight: 600; position: relative; }
.uf-chip:hover:not(:disabled) { border-color: var(--accent-8); background: var(--accent-a3); }
.uf-chip:focus-visible { outline: 2px solid var(--accent-8); outline-offset: 2px; }
.uf-chip[data-marcada="true"] { background: var(--accent-9); border-color: var(--accent-9); color: var(--accent-contrast); }
.uf-chip[data-empresa="true"]::after { content: ''; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--amber-9); }
.uf-chip:disabled { cursor: not-allowed; border-style: dashed; background: var(--gray-a2); color: var(--gray-9); }
.uf-chip:disabled[data-marcada="true"] { border-style: solid; background: var(--accent-a5); color: var(--accent-11); }
.uf-chip small { font-size: 10px; font-weight: 500; }
.uf-regiao { all: unset; cursor: pointer; font-size: var(--font-size-2); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.uf-regiao:hover:not(:disabled) { color: var(--accent-11); }
.uf-regiao:disabled { cursor: not-allowed; color: var(--gray-9); }
.uf-regiao, .uf-mapa, .uf-chip { white-space: nowrap; }
.cartao-regra-corpo { all: unset; cursor: pointer; flex: 1; min-width: 0; }
.cartao-regra:hover { box-shadow: inset 0 0 0 1px var(--accent-7); }
.cartao-regra-erro { box-shadow: inset 0 0 0 1px var(--red-8); }
.dialogo-regra-corpo { min-height: 52vh; }
.abas-rolagem { overflow-x: auto; }
.uf-mapa { all: unset; box-sizing: border-box; cursor: pointer; width: 74px; padding: 6px 4px; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; border-radius: var(--radius-2); border: 1px solid var(--green-a6); background: var(--green-a3); color: var(--green-11); }
.uf-mapa small { font-size: 10px; }
.uf-mapa[data-sem-regra="true"] { border-color: var(--red-a6); background: var(--red-a3); color: var(--red-11); }
.uf-mapa[data-escolhida="true"] { outline: 2px solid var(--accent-9); outline-offset: 1px; }
.uf-mapa:focus-visible { outline: 2px solid var(--accent-8); }
/* Filtro com várias opções: mesma altura e largura do select dos filtros */
.filtro-multiplo { width: 100%; justify-content: space-between; font-weight: 400; cursor: pointer; }
/* Classificações: indicadores em cartões ligáveis */
.cartao-indicador { display: block; cursor: pointer; padding: 12px; border-radius: var(--radius-3); border: 1px solid var(--gray-a6); background: var(--color-surface); }
.cartao-indicador[data-ligado="true"] { border-color: var(--green-a7); background: var(--green-a2); }
body[data-modo="visualizar"] .cartao-indicador { cursor: default; }
/* Relatórios: catálogo em cartões, resumo, gráfico de barras e tabela */
.rel-grupo-titulo { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: var(--font-size-5); font-weight: 700; color: var(--gray-12); }
.rel-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.rel-item { display: block; height: 100%; text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow .15s ease; }
.rel-item:hover, .rel-item:focus-visible { box-shadow: inset 0 0 0 1px var(--accent-8), 0 6px 18px rgba(15, 23, 42, .08); outline: none; }
.rel-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.rel-resumo-rotulo { text-transform: uppercase; letter-spacing: .02em; }
.rel-resumo-numero { font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-barra-linha { display: grid; grid-template-columns: minmax(90px, 220px) 1fr auto; align-items: center; gap: 10px; }
.rel-barra-fundo { height: 10px; border-radius: 999px; background: var(--gray-a3); overflow: hidden; }
.rel-barra { height: 100%; border-radius: 999px; background: var(--accent-9); }
.rel-barra[data-negativa="true"] { background: var(--red-9); }
.rel-barra-valor { font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; }
.rel-rolagem { overflow-x: auto; }
.rel-tabela th, .rel-tabela td { white-space: nowrap; }
.rel-tabela td.rel-texto { white-space: normal; min-width: 7rem; }
.rel-tabela .rel-num { font-variant-numeric: tabular-nums; }
.rel-tabela .rel-destaque td { color: var(--red-11); }
.rel-tabela tfoot td { border-top: 2px solid var(--gray-a6); }
@media (max-width: 520px) { .rel-barra-linha { grid-template-columns: 1fr auto; } .rel-barra-fundo { grid-column: 1 / -1; grid-row: 2; } }
/* Ferramentas > Arquivo da balança: prévia do arquivo e etiqueta de teste */
.previa-arquivo { max-height: 360px; overflow: auto; border: 1px solid var(--gray-a6); border-radius: var(--radius-3); background: var(--gray-a2); }
.previa-arquivo pre { margin: 0; padding: 8px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.6; white-space: pre; }
.previa-regua { position: sticky; top: 0; color: var(--gray-10); background: var(--gray-3); border-bottom: 1px dashed var(--gray-a6); }
.etiqueta-ean { width: 260px; max-width: 100%; height: auto; border-radius: var(--radius-2); box-shadow: 0 0 0 1px var(--gray-a6); }
.item-modelo { height: auto; padding-top: 8px; padding-bottom: 8px; cursor: pointer; }
.previa-controle { color: var(--accent-11); background: var(--accent-a4); border-radius: 2px; }
/* Etiqueta de gôndola (prévia): 1em = 1 mm de uma etiqueta de 30 mm de altura, na escala da prévia; fundo amarelo, como a etiqueta de prateleira */
.eg-area { padding: 16px; border-radius: var(--radius-3); background: var(--gray-a3); overflow: hidden; }
.eg { position: relative; box-sizing: border-box; display: flex; flex-direction: column; padding: 1.4em 1.8em; background: #ffe14d; color: #111;
    border: 1px dashed #b39a1a; font-family: Inter, Arial, sans-serif; line-height: 1.1; overflow: hidden; }
.eg-nome { font-size: 3.2em; font-weight: 700; text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 0; }
.eg-oferta + .eg-nome { padding-right: 3.6em; }
.eg-oferta { position: absolute; top: 1.2em; right: 1.4em; padding: .3em .7em; border-radius: .5em; background: #d92d20; color: #fff; font-size: 2em; font-weight: 800; letter-spacing: .04em; }
.eg-meio { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; margin-top: auto; }
.eg-de { font-size: 2.5em; color: #444; line-height: 1.2; }
.eg-de s { color: #666; }
.eg-preco { font-size: 7.5em; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; line-height: .95; }
.eg-preco small { font-size: .37em; font-weight: 700; margin: 0 .15em; vertical-align: .9em; }
.eg-preco small:last-child { vertical-align: 0; }
.eg-medida { font-size: 2.6em; font-weight: 600; text-align: right; min-height: 1.2em; margin-top: .2em; }
.eg-rodape { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; font-size: 2em; color: #333; min-height: 1em; margin-top: .2em; }
.eg-barras { display: flex; flex-direction: column; align-items: center; }
.eg-barras svg { width: 10em; height: 2.5em; }
.eg-barras span { font-size: .8em; letter-spacing: .08em; }
@media (min-width: 1024px) { .coluna-fixa { position: sticky; top: 120px; } }
/* Etiqueta larga (105 × 30 e 89 × 30 mm): duas colunas, 1em = 1 mm */
.eg.eg-larga { flex-direction: row; justify-content: space-between; gap: 2em; }
.eg-larga .eg-esq { display: flex; flex-direction: column; min-width: 0; }
.eg-larga .eg-nome { font-size: 4em; line-height: 1.1; padding-right: 0; }
.eg-larga .eg-de { font-size: 2.8em; margin-top: .3em; }
.eg-larga .eg-info { font-size: 2em; color: #333; margin-top: .4em; }
.eg-larga .eg-barras { margin-top: auto; align-items: flex-start; }
.eg-larga .eg-barras svg { width: 24em; height: 5.5em; }
.eg-larga .eg-barras span { font-size: 1.5em; letter-spacing: .12em; }
.eg-larga .eg-dir { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; min-width: 0; }
.eg-larga .eg-oferta { position: static; font-size: 2.3em; margin-bottom: auto; }
.eg-larga .eg-preco { display: flex; align-items: flex-start; line-height: .9; }
.eg-larga .eg-preco small { font-size: .2em; vertical-align: baseline; margin: .15em .2em 0 0; }
.eg-larga .eg-preco small:not(:first-child) { align-self: flex-end; margin: 0 0 .1em .15em; }
.eg-larga .eg-medida { font-size: 3em; margin-top: .9em; }
.eg-larga .eg-preco:last-child { margin-bottom: .1em; }
/* Etiquetas térmicas: prévia do rolo (papel de fundo e etiquetas brancas nas posições reais) */
.et-area { padding: 16px; border-radius: var(--radius-3); background: var(--gray-a3); overflow-x: auto; }
.et-rolo { position: relative; flex-shrink: 0; background: #efe7d6; border-radius: 2px; }
.et { position: absolute; background: #fff; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.et.et-contorno { box-shadow: inset 0 0 0 1px #555; }
.et-texto { position: absolute; left: 0; right: 0; text-align: center; line-height: 1; white-space: nowrap; font-family: Helvetica, Arial, sans-serif; }
/* Folha A4 da prévia das etiquetas adesivas: as já usadas em cinza, as que sobram em branco com contorno leve. */
.et-folha { position: relative; flex-shrink: 0; background: #fff; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.et-folha .et { box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.et-folha .et.et-contorno { box-shadow: inset 0 0 0 1px #555; }
.et.et-usada { background: repeating-linear-gradient(45deg, #ddd, #ddd 3px, #eee 3px, #eee 6px); }
/* Configurações: chaves com ajuda e cartões de opção (radio/checkbox em cartão) */
.chave-config { cursor: pointer; }
.cartao-opcao { all: unset; box-sizing: border-box; display: block; width: 100%; height: 100%; padding: 14px 16px; border-radius: var(--radius-3); border: 1px dashed var(--gray-a7); background: var(--color-surface); cursor: pointer; }
.cartao-opcao:hover:not(:disabled) { border-color: var(--accent-8); }
.cartao-opcao:focus-visible { outline: 2px solid var(--accent-8); outline-offset: 2px; }
.cartao-opcao[data-selecionado="true"] { border-style: solid; border-color: var(--accent-8); background: var(--accent-a3); }
.cartao-opcao:disabled { cursor: default; }
/* Configurações: prévia de ícone, cor, totem, cardápio, KDS, semana e chips de status */
.icone-previa { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-2); border: 1px solid var(--gray-a6); font-size: 18px; }
.seletor-cor { width: 40px; height: 40px; padding: 2px; border: 1px solid var(--gray-a7); border-radius: var(--radius-2); background: var(--color-surface); cursor: pointer; flex-shrink: 0; }
.seletor-cor:disabled { cursor: not-allowed; opacity: .6; }
.kds-linha { height: 32px; border-radius: var(--radius-2); overflow: hidden; font-size: 11px; }
.kds-linha span { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; color: var(--gray-12); }
/* Prévia do totem (Configurações › Autoatendimento): as telas iniciais reais do app do totem, em escala (medidas em cqw/cqh). */
.totem-moldura { display: flex; justify-content: center; padding: 14px 10px 10px; border-radius: 26px; background: linear-gradient(180deg, #2b2d31, #17181b); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); width: fit-content; }
.totem-tela { position: relative; width: 252px; aspect-ratio: 9 / 16; container-type: size; overflow: hidden; border-radius: 10px; background: #000; user-select: none; }
.totem-tela * { box-sizing: border-box; }
.totem-tela .foto-fake { display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, var(--f1), var(--f2)); color: rgba(255, 255, 255, .92); }
.totem-tela .foto-fake i { font-size: 1em; --fa-secondary-opacity: .55; }
.previa-descanso { position: absolute; inset: 0; display: flex; flex-direction: column; color: #fff; background: linear-gradient(160deg, var(--marca), #1a1a1a 85%); }
.previa-descanso__fotos { position: absolute; inset: 0; }
.previa-descanso__foto { position: absolute; inset: 0; font-size: 60cqw; opacity: 0; transition: opacity 1.6s ease; }
.previa-descanso__foto.atual { opacity: 1; }
.previa-descanso__fotos::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .15) 35%, rgba(0, 0, 0, .85) 78%); }
.previa-descanso__marca { position: relative; z-index: 2; align-self: center; margin-top: 9cqw; padding: 2cqw; }
.previa-descanso__marca img { display: block; height: 16cqw; max-width: 64cqw; object-fit: contain; filter: drop-shadow(0 .4cqw 1.6cqw rgba(0, 0, 0, .45)); }
.previa-descanso__chamada { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2cqw; padding: 0 6cqw 16cqw; text-align: center; }
.previa-descanso__titulo { font-size: 17cqw; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.previa-descanso__subtitulo { font-size: 4.6cqw; opacity: .9; }
.previa-descanso__toque { display: inline-flex; align-items: center; gap: 2cqw; margin-top: 6cqw; padding: 3.4cqw 7cqw; border-radius: 99cqw; background: var(--marca); color: var(--contraste); font-size: 4.2cqw; font-weight: 700; animation: previa-pulsar 2s ease-in-out infinite; }
.previa-cartaz { --creme: #f7efe2; --tinta: #161616; position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--marca); color: var(--contraste); font-family: 'Bricolage Grotesque', system-ui, sans-serif; }
.previa-cartaz__sol { position: absolute; top: 41cqh; right: -30cqw; width: min(118cqw, 66cqh); aspect-ratio: 1; border-radius: 50%; background: var(--creme); }
.previa-cartaz__arco { position: absolute; left: -24cqw; bottom: -24cqw; width: 70cqw; aspect-ratio: 1; border-radius: 50%; background: var(--tinta); }
.previa-cartaz__pontos { position: absolute; top: 13cqh; right: 5cqw; width: 19.5cqw; height: 10.5cqw; background-image: radial-gradient(circle, var(--contraste) .55cqw, transparent .6cqw); background-size: 3.25cqw 3.5cqw; opacity: .55; }
.previa-cartaz__topo { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; padding: 5cqw 6cqw 0; }
.previa-cartaz__topo img { display: block; height: 10cqw; max-width: 44cqw; object-fit: contain; object-position: left center; }
.previa-cartaz__selo { padding: 1cqw 2.6cqw; border: .35cqw solid currentColor; border-radius: 99cqw; font-family: Inter, system-ui, sans-serif; font-size: 2.2cqw; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.previa-cartaz__corpo { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: 19cqw 0 5cqh; }
.previa-cartaz__titulo { display: flex; flex-direction: column; padding: 0 6cqw; font-size: min(33cqw, 17.5cqh); font-weight: 800; line-height: .8; letter-spacing: -.045em; text-transform: lowercase; }
.previa-cartaz__vazado { align-self: flex-end; margin-right: 2cqw; color: transparent; -webkit-text-stroke: .55cqw var(--contraste); }
.previa-cartaz__palco { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.previa-cartaz__prato { position: relative; width: min(62cqw, 33cqh); aspect-ratio: 1; margin-left: 12cqw; }
.previa-cartaz__prato > .foto-fake { position: absolute; inset: 9%; width: 82%; height: 82%; border-radius: 50%; border: 1cqw solid var(--tinta); box-shadow: 1.6cqw 1.6cqw 0 var(--tinta); font-size: 22cqw; animation: previa-entrar .7s cubic-bezier(.2, .9, .3, 1.2); }
.previa-cartaz__anel { position: absolute; inset: -9%; width: 118%; height: 118%; animation: previa-girar 38s linear infinite; }
.previa-cartaz__anel text { fill: var(--tinta); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; }
.previa-cartaz__mini { position: absolute; top: 2%; left: 6cqw; width: min(24cqw, 13.5cqh); aspect-ratio: 1; transform: rotate(-8deg); }
.previa-cartaz__mini .foto-fake { width: 100%; height: 100%; border-radius: 3cqw; border: .8cqw solid var(--tinta); box-shadow: 1cqw 1cqw 0 var(--tinta); font-size: 11cqw; animation: previa-entrar .7s .12s cubic-bezier(.2, .9, .3, 1.2) backwards; }
.previa-cartaz__adesivo { position: absolute; left: 5cqw; bottom: 3%; width: min(31cqw, 17cqh); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4cqw; padding: 2.4cqw; border-radius: 50%; background: var(--tinta); color: var(--creme); text-align: center; transform: rotate(-12deg); animation: previa-balancar 5s ease-in-out infinite; }
.previa-cartaz__adesivo small { font-size: 2cqw; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.previa-cartaz__adesivo strong { font-size: 4.6cqw; line-height: 1; white-space: nowrap; }
.previa-cartaz__adesivo span { font-family: Inter, system-ui, sans-serif; font-size: 1.9cqw; font-weight: 600; line-height: 1.15; }
.previa-cartaz__faixa { display: block; width: 112cqw; margin: 0 -6cqw; padding: 1.9cqw 0; overflow: hidden; background: var(--tinta); color: var(--creme); transform: rotate(-3deg); }
.previa-cartaz__letreiro { display: inline-flex; white-space: nowrap; font-size: 4.4cqw; letter-spacing: .02em; text-transform: uppercase; animation: previa-correr 22s linear infinite; }
.previa-cartaz__letreiro i { margin: 0 3cqw; font-style: normal; color: var(--marca); }
.previa-cartaz__botao { align-self: center; display: inline-flex; align-items: center; gap: 3cqw; margin-top: 5.5cqw; padding: 2cqw 2cqw 2cqw 6cqw; border-radius: 99cqw; background: var(--creme); color: var(--tinta); box-shadow: 1.2cqw 1.2cqw 0 var(--tinta); font-size: 4.4cqw; font-weight: 800; animation: previa-pulsar 2.2s ease-in-out infinite; }
.previa-cartaz__seta { display: grid; place-items: center; width: 9.4cqw; height: 9.4cqw; border-radius: 50%; background: var(--tinta); color: var(--creme); font-size: 4cqw; }
@keyframes previa-pulsar { 50% { transform: scale(1.05); } }
@keyframes previa-girar { to { transform: rotate(360deg); } }
@keyframes previa-entrar { from { transform: scale(.6) rotate(-14deg); opacity: 0; } }
@keyframes previa-correr { to { transform: translateX(-50%); } }
@keyframes previa-balancar { 50% { transform: rotate(-6deg) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .totem-tela * { animation: none !important; } }
.cardapio-previa { max-width: 100%; border-radius: var(--radius-3); overflow: hidden; border: 1px solid var(--gray-a6); }
/* Mesma proporção do topo do site de pedidos no computador (1168 × 320). */
.cardapio-capa { height: auto; aspect-ratio: 1168 / 320; min-height: 120px; background: var(--cor) center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .85); font-size: 13px; }
.cardapio-barra { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--color-panel-solid); border-top: 3px solid var(--cor); }
.cardapio-barra span { display: flex; gap: 10px; color: var(--cor); font-size: 18px; }
/* Banner do celular: prévia na largura de um celular, com a proporção do banner (3 × 1). */
.cardapio-previa-celular { max-width: 420px; }
.cardapio-previa-celular .cardapio-capa { height: auto; aspect-ratio: 3 / 1; text-align: center; padding: 0 12px; }
.semana-dia { padding: 10px; border-radius: var(--radius-2); border: 1px solid var(--green-a6); background: var(--green-a2); display: flex; flex-direction: column; align-items: flex-start; }
.semana-dia[data-fechado="true"] { border-color: var(--gray-a5); background: var(--gray-a2); }
.chip-status { all: unset; cursor: pointer; }
.chip-status:disabled { cursor: default; }
.chip-status:focus-visible { outline: 2px solid var(--accent-8); outline-offset: 2px; border-radius: var(--radius-2); }
.etiqueta-remover { all: unset; cursor: pointer; margin-left: 4px; opacity: .7; }
.etiqueta-remover:hover { opacity: 1; }
.cargo-modulo { padding: 10px 12px; border-radius: var(--radius-2); background: var(--gray-a2); }
/* Status: aba Transições (fluxo e cartões dos destinos) */
.fluxo-status { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.fluxo-seta { color: var(--gray-9); font-size: 18px; padding-top: 4px; }
.fluxo-destinos { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 200px; }
.cartao-transicao { all: unset; box-sizing: border-box; display: block; padding: 10px 12px; border-radius: var(--radius-3); border: 1px solid var(--gray-a6); background: var(--color-surface); cursor: pointer; }
.cartao-transicao:hover:not(:disabled) { border-color: var(--accent-8); }
.cartao-transicao:focus-visible { outline: 2px solid var(--accent-8); outline-offset: 2px; }
.cartao-transicao[data-marcado="true"] { border-color: var(--accent-8); background: var(--accent-a3); }
.cartao-transicao:disabled { cursor: default; }
.cartao-transicao-texto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
button.link-documento { all: unset; cursor: pointer; color: var(--accent-11); font-size: var(--font-size-2); }
button.link-documento:hover { text-decoration: underline; }
button.link-documento:focus-visible { outline: 2px solid var(--accent-8); outline-offset: 2px; border-radius: 2px; }
.cartao-opcao[data-desabilitado="true"] { opacity: .45; cursor: not-allowed; }
/* Transições compactas: uma linha por destino (marcar, selo, efeitos em ícones e a ordem) */
.linha-transicao { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 6px 10px; border-radius: var(--radius-2); border: 1px solid var(--gray-a5); background: var(--color-surface); cursor: pointer; }
.linha-transicao:hover:not(:disabled) { border-color: var(--accent-8); }
.linha-transicao:focus-visible { outline: 2px solid var(--accent-8); outline-offset: 2px; }
.linha-transicao[data-marcado="true"] { border-color: var(--accent-7); background: var(--accent-a2); }
.linha-transicao:disabled { cursor: default; }
.linha-transicao-selo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-transicao-fim { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; flex-shrink: 0; }
.linha-transicao-fim small { color: var(--gray-10); font-variant-numeric: tabular-nums; min-width: 18px; text-align: right; }
/* Transições (versão em duas colunas): Voltar para / Avançar para */
.coluna-transicao { padding: 12px; border-radius: var(--radius-3); background: var(--gray-a2); border: 1px solid var(--gray-a4); }
.lista-transicao { display: flex; flex-direction: column; gap: 2px; }
.item-transicao { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-2); cursor: pointer; min-width: 0; }
.item-transicao:hover { background: var(--gray-a3); }
.item-transicao[data-marcado="true"] { background: var(--accent-a3); }
.item-transicao-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-transicao-vazia { padding: 8px; }
.info-ao-lado-do-campo { display: flex; align-items: flex-end; padding-bottom: 10px; }

/* Notificações: painel lateral do sino (como o drawer do sistema) e os cartões, também usados na página de notificações */
.cabecalho:has(.painel-notificacoes) { z-index: 100; }
.painel-notificacoes__fundo { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .35); animation: notificacoes-fundo .15s ease-out; }
.painel-notificacoes { position: fixed; z-index: 1001; top: 0; right: 0; bottom: 0; width: min(500px, 100vw); display: flex; flex-direction: column; background: var(--color-background); color: var(--gray-12); box-shadow: -12px 0 32px rgba(0, 0, 0, .3); animation: notificacoes-entrar .2s ease-out; text-align: left; }
.painel-notificacoes__topo { padding: 20px 24px; background: #1e2129; color: #fff; }
.painel-notificacoes__sino { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #1e2129; }
.painel-notificacoes__corpo { flex: 1; overflow-y: auto; padding: 20px 24px; }
.cartao-notificacao { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: var(--radius-4); border: 1px solid var(--gray-a5); background: var(--color-panel-solid); }
.cartao-notificacao.nao-lida { border-color: var(--blue-a6); background: var(--blue-a2); }
.cartao-notificacao.nao-lida::before { content: ''; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue-9); }
.cartao-notificacao__icone { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-size: 18px; }
.cartao-notificacao.compacto { padding: 12px 14px; gap: 12px; }
.cartao-notificacao.compacto .cartao-notificacao__icone { width: 36px; height: 36px; font-size: 16px; }
.cartao-notificacao p { margin: 0; }
.sem-notificacoes { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 16px; border: 1px dashed var(--gray-a6); border-radius: var(--radius-4); color: var(--gray-9); text-align: center; }
.grupo-notificacoes { text-transform: uppercase; letter-spacing: .06em; }
@keyframes notificacoes-entrar { from { transform: translateX(100%); } }
@keyframes notificacoes-fundo { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .painel-notificacoes, .painel-notificacoes__fundo { animation: none; } }

/* Mensalidades (Minhas Faturas) */
.icone-redondo { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-a3); color: var(--accent-11); font-size: 17px; }
.icone-redondo.solido { background: var(--accent-9); color: #fff; }
.bloco-mensalidade { padding: 14px 16px; border: 1px solid var(--gray-a5); border-radius: var(--radius-4); }
.bloco-mensalidade.destaque { background: var(--gray-a2); }
.consumo-mensalidade { padding: 12px 14px; border-radius: var(--radius-3); }
.linha-topo { border-top: 1px solid var(--gray-a5); }
.barra-uso { height: 8px; border-radius: 99px; background: var(--gray-a4); overflow: hidden; }
.barra-uso span { display: block; height: 100%; border-radius: 99px; }
.tabela-sem-quebra td, .tabela-sem-quebra th { white-space: nowrap; }

/* Central de ajuda e o painel do botão Ajuda */
.ajuda-topo { padding: 32px 20px 24px; margin-bottom: 16px; border-radius: var(--radius-5); background: linear-gradient(135deg, var(--accent-9), #1d3f8f); color: #fff; }
.ajuda-topo__busca { max-width: 640px; margin-left: auto; margin-right: auto; }
.sugestao-ajuda { padding: 4px 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 99px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.sugestao-ajuda:hover { background: rgba(255, 255, 255, .22); }
.categoria-ajuda { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; border: 1px solid var(--gray-a5); border-radius: var(--radius-4); background: var(--color-panel-solid); color: var(--gray-12); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.categoria-ajuda:hover { border-color: var(--accent-a7); }
.categoria-ajuda.selecionada { border-color: var(--accent-9); background: var(--accent-a2); }
.categoria-ajuda .icone-redondo { margin-bottom: 6px; }
.categoria-ajuda__nome { font-weight: 700; font-size: 15px; }
.categoria-ajuda__texto { font-size: 13px; color: var(--gray-11); }
.pergunta-ajuda { border: 1px solid var(--gray-a5); border-radius: var(--radius-3); background: var(--color-panel-solid); scroll-margin-top: 140px; }
.pergunta-ajuda.aberta { border-color: var(--accent-a7); }
.pergunta-ajuda__titulo { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 0; background: none; color: var(--gray-12); font: inherit; font-weight: 600; font-size: 14px; text-align: left; cursor: pointer; }
.pergunta-ajuda__titulo i { flex: none; font-size: 12px; color: var(--gray-10); transition: transform .15s; }
.pergunta-ajuda.aberta .pergunta-ajuda__titulo i { transform: rotate(180deg); }
.pergunta-ajuda__resposta { padding: 0 14px 14px; color: var(--gray-11); }
.pergunta-ajuda__resposta p { margin: 0; }
.pergunta-ajuda__resposta ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.pergunta-ajuda.compacto .pergunta-ajuda__titulo { padding: 10px 12px; font-size: 13px; }
.pergunta-ajuda.compacto .pergunta-ajuda__resposta { padding: 0 12px 12px; }
.contato-ajuda { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--gray-a5); border-radius: var(--radius-3); background: var(--color-panel-solid); color: var(--gray-12); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.contato-ajuda:hover { border-color: var(--accent-a7); background: var(--accent-a2); }
.contato-ajuda strong { display: block; font-size: 14px; }
.contato-ajuda small { display: block; font-size: 12px; color: var(--gray-11); }
.contato-ajuda__icone { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; }
.avatar-iris { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--accent-a3); }
.avatar-iris.pequeno { width: 20px; height: 20px; }
.avatar-iris.grande { width: 72px; height: 72px; }
.conversa-iris { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; padding: 4px; }
.balao-iris { max-width: 85%; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--gray-a3); }
.balao-iris.voce { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--accent-a4); }
.fale-conosco { position: sticky; top: 140px; }

/* Integrações: logos, cartões do catálogo e o menu "Minhas Integrações" do cabeçalho */
.logo-integracao { display: inline-flex; align-items: center; gap: 10px; min-height: var(--altura, 30px); }
.logo-integracao img { height: var(--altura, 30px); width: auto; max-width: 130px; object-fit: contain; }
.logo-integracao__iniciais { display: inline-grid; place-items: center; width: var(--altura, 30px); height: var(--altura, 30px); border-radius: 8px; color: #fff; font-weight: 800; font-size: 12px; }
.dark .logo-integracao img.logo-escuro, .dark-theme .logo-integracao img.logo-escuro { filter: invert(1) hue-rotate(180deg); }
.cartao-integracao { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 16px; border: 1px solid var(--gray-a5); border-radius: var(--radius-4); background: var(--color-panel-solid); transition: border-color .15s, box-shadow .15s; scroll-margin-top: 140px; }
.cartao-integracao:hover { border-color: var(--accent-a8); }
.cartao-integracao.destacado { border-color: var(--accent-9); box-shadow: 0 0 0 3px var(--accent-a5); }
.menu-integracoes__lista { max-height: min(560px, 70vh); overflow-y: auto; margin-right: -8px; padding-right: 8px; }
.menu-integracoes__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.menu-integracoes__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px; border-radius: var(--radius-3); color: var(--gray-12); text-align: center; text-decoration: none; }
.menu-integracoes__item:hover { background: var(--accent-a3); }
.linha-forma-integracao { border-bottom: 1px solid var(--gray-a4); }

/* Minha conta: painel lateral do avatar, upgrade de plano e verificação em duas etapas */
.painel-conta { width: min(520px, 100vw); }
.painel-conta__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px; border-bottom: 1px solid var(--gray-a5); }
.painel-conta__rodape { padding: 16px 24px; border-top: 1px solid var(--gray-a5); }
.bloco-mensalidade.tracejado { border-style: dashed; }
.separador-tracejado { border-top: 1px dashed var(--gray-a6); }
.plano-upgrade { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 20px; border: 1px dashed var(--gray-a7); border-radius: var(--radius-4); background: var(--color-panel-solid); color: var(--gray-12); font: inherit; text-align: left; cursor: pointer; }
.plano-upgrade:hover:not(:disabled) { border-color: var(--accent-8); }
.plano-upgrade.escolhido { border-style: solid; border-color: var(--accent-9); background: var(--accent-a3); }
.plano-upgrade:disabled { opacity: .55; cursor: not-allowed; }
.plano-upgrade__radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--gray-a8); }
.plano-upgrade.escolhido .plano-upgrade__radio { border: 6px solid var(--accent-9); }
.plano-upgrade__nome { flex: 1; min-width: 0; }
.plano-upgrade__nome strong { font-size: 18px; }
.plano-upgrade__nome small { display: block; color: var(--gray-11); font-size: 13px; }
.plano-upgrade__preco { text-align: right; white-space: nowrap; }
.plano-upgrade__preco s { display: block; font-size: 12px; color: var(--gray-10); }
.plano-upgrade__preco strong { font-size: 22px; }
.plano-upgrade__preco small { font-size: 12px; color: var(--gray-11); }
.qr-autenticador { border-radius: 8px; border: 1px solid var(--gray-a5); image-rendering: pixelated; background: #fff; }
.texto-documento { max-height: 60vh; overflow: auto; white-space: normal; font-size: var(--font-size-2); line-height: 1.6; padding: 14px; border: 1px solid var(--gray-a5); border-radius: var(--radius-3); background: var(--gray-a2); }
/* Termos e contratos: o HTML do editor do admin (já limpo no servidor). */
.texto-documento h1, .texto-documento h2 { font-size: var(--font-size-4); margin: 0 0 10px; }
.texto-documento h3, .texto-documento h4 { font-size: var(--font-size-3); margin: 16px 0 6px; }
.texto-documento p { margin: 0 0 8px; }
.texto-documento ul, .texto-documento ol { margin: 0 0 8px; padding-left: 22px; }
.texto-documento table { border-collapse: collapse; margin: 8px 0; }
.texto-documento td, .texto-documento th { border: 1px solid var(--gray-a6); padding: 4px 8px; }
.codigos-recuperacao { padding: 14px; border: 1px dashed var(--gray-a7); border-radius: var(--radius-3); background: var(--gray-a2); }

/* Tema: fundo da página antes de o React montar (o <head> já marcou html[data-tema]) */
html[data-tema="dark"], html[data-tema="dark"] body { background: #111113; }

/* Status das impressoras (cabeçalho) */
.ponto-status { position: absolute; top: 6px; right: 5px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--accent-9); pointer-events: none; }
.ponto-status.green { background: var(--green-9); }
.ponto-status.amber { background: var(--amber-9); }
.ponto-status.red { background: var(--red-9); }
.impressora-status { padding: 10px 12px; border: 1px solid var(--gray-a5); border-radius: var(--radius-3); }

/* Menu mobile: abaixo de 992px (o d-lg-none do sistema) as duas faixas do menu viram o botão de menu e o painel */
.botao-menu-mobile { display: none !important; align-self: center; color: #fff !important; margin: 0 -4px 0 -8px !important; }
@media (max-width: 991.98px) {
    .botao-menu-mobile { display: inline-flex !important; }
    .abas-componentes, .cabecalho-modulos { display: none !important; }
    .cabecalho-topo { gap: 10px; }
    .cabecalho-acoes { margin-left: auto; }
}
.cabecalho:has(.menu-mobile) { z-index: 100; }
.menu-mobile__fundo { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .4); animation: notificacoes-fundo .15s ease-out; }
.menu-mobile { position: fixed; z-index: 1001; top: 0; left: 0; bottom: 0; width: min(420px, 100vw); display: flex; flex-direction: column; background: var(--color-background); color: var(--gray-12); box-shadow: 12px 0 32px rgba(0, 0, 0, .3); animation: menu-mobile-entrar .2s ease-out; }
.menu-mobile__topo { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--gray-a5); }
.menu-mobile__topo img { height: 34px; display: block; }
.menu-mobile__corpo { flex: 1; overflow-y: auto; padding: 16px; overscroll-behavior: contain; }
.menu-mobile__atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.menu-mobile__atalho { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border: 1px solid var(--gray-a5); border-radius: var(--radius-4); color: var(--gray-12); font-weight: 600; font-size: 14px; text-align: center; text-decoration: none; }
.menu-mobile__atalho i { color: var(--accent-9); }
.menu-mobile__atalho.atual, .menu-mobile__atalho:hover { border-color: var(--accent-8); background: var(--accent-a3); }
.menu-mobile__divisor { border: 0; border-top: 1px solid var(--gray-a5); margin: 16px 0; }
.menu-mobile__grupo + .menu-mobile__grupo { margin-top: 6px; }
.menu-mobile__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid transparent; border-radius: var(--radius-3); background: none; color: var(--gray-12); font: inherit; font-size: 15px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.menu-mobile__item > span { flex: 1; min-width: 0; }
.menu-mobile__item:hover { background: var(--gray-a3); }
.menu-mobile__item[aria-expanded="true"] { border-color: var(--gray-a5); }
.menu-mobile__item.atual { background: var(--accent-a3); color: var(--accent-11); font-weight: 600; }
.menu-mobile__item.folha { font-size: 14px; min-height: 40px; }
.menu-mobile__seta { color: var(--gray-10); transition: transform .15s; }
.menu-mobile__item[aria-expanded="true"] .menu-mobile__seta { transform: rotate(180deg); }
.menu-mobile__sub { padding: 4px 0 4px 18px; margin-left: 10px; border-left: 1px dashed var(--gray-a6); }
@keyframes menu-mobile-entrar { from { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .menu-mobile, .menu-mobile__fundo { animation: none; } }
/* No celular o rodapé deixa de ser fixo (quebrava em 3 linhas e cobria o fim da página) */
@media (max-width: 767.98px) {
    .pagina { padding-bottom: 0; }
    .rodape { position: static; padding: 12px 16px; font-size: 12px; }
    .rapida-etapas { bottom: 0; }
    .aviso-flutuante { top: 16px; left: 16px; right: 16px; }
    .avisos { top: 16px; left: 16px; right: 16px; max-width: none; }
}

/* Barra de progresso do topo (assets/js/progresso.js). Fica fora do <Theme>: usa um tom escuro da cor do layout
   (--cor-layout-escura, que a identidade visual põe no <html>), para aparecer sobre o cabeçalho colorido; azul de reserva. */
.barra-progresso {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10000;
    pointer-events: none; opacity: 0; transition: opacity .3s ease .1s;
}
.barra-progresso--ativa { opacity: 1; transition: none; }
.barra-progresso--ativa.barra-progresso--fim { opacity: 0; transition: opacity .3s ease .15s; }
.barra-progresso__trilha {
    height: 100%; transform: scaleX(0); transform-origin: left;
    background: var(--cor-layout-escura, #003d80); box-shadow: 0 0 8px var(--cor-layout-escura, #003d80);
    transition: transform .2s ease;
}

/* Avisos (toasts) do layout: pilha no topo, à direita (abaixo do cabeçalho), o mais novo embaixo. */
.avisos {
    position: fixed; right: 16px; top: 72px; z-index: 30;
    display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}
.aviso {
    position: relative; padding-right: 40px; pointer-events: auto;
    background: var(--color-panel-solid); box-shadow: var(--shadow-4);
    animation: aviso-entrar .25s ease-out;
}
.aviso__fechar { position: absolute; top: 10px; right: 10px; }
@keyframes aviso-entrar { from { opacity: 0; transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) {
    .aviso { animation: none; }
    .barra-progresso__trilha { transition: none; }
}

/* Telas de acesso (login, recuperar senha, nova senha e verificação em duas etapas) */
/* Login do app Nota de Serviço Nacional: a cor do segmento Serviço sobre o "teal" do Radix (igual a nota-servico/css). */
.radix-themes.tema-servico { --teal-9: #0f9b8e; --teal-10: #0b7a70; }
.radix-themes.tema-servico.light { --teal-2: #f5fbfa; --teal-3: #e3f7f4; --teal-11: #0b7a70; }
.radix-themes.tema-servico.dark { --teal-10: #12ab9c; }
.auth { display: flex; min-height: 100vh; background: var(--color-background); }
.auth__lado-form { flex: 1 1 50%; display: flex; flex-direction: column; padding: 40px; }
.auth__form { width: 100%; max-width: 440px; margin: auto; padding: 24px 0; }
.auth__logo { display: flex; justify-content: center; margin-bottom: 32px; }
.auth__logo img { height: 64px; }
.auth__rodape { width: 100%; max-width: 440px; margin: 0 auto; }
.auth__lado-iris { flex: 1 1 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px; background-size: cover; background-position: center; color: #fff; text-align: center;
    /* Na cor do layout escolhida no admin (azul, laranja, verde...): degradê com formas claras, sem imagem fixa. */
    background-color: var(--accent-9);
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .10) 0 20%, transparent 20.3%),
        radial-gradient(circle at 92% 30%, rgba(255, 255, 255, .07) 0 17%, transparent 17.3%),
        radial-gradient(circle at 85% 92%, rgba(255, 255, 255, .08) 0 24%, transparent 24.3%),
        radial-gradient(circle at 5% 95%, rgba(255, 255, 255, .06) 0 16%, transparent 16.3%),
        linear-gradient(160deg, var(--accent-9), var(--accent-10));
}
.auth__lado-iris h2 { margin: 0 0 12px; font-size: 32px; font-weight: 800; }
.auth__lado-iris p { margin: 0; max-width: 440px; font-size: 16px; line-height: 1.5; }
.auth__iris { width: min(400px, 60%); margin-bottom: 40px; filter: drop-shadow(0 1.5rem 2rem rgba(0, 0, 0, .25)); }
.auth__selo { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--green-a3); color: var(--green-11); }
.auth__selo.vermelho { background: var(--red-a3); color: var(--red-11); }
.auth__celular { max-height: 125px; }
/* Banner do login do contador (/contador/login), no lugar da Íris: o painel ilustrado com selos flutuantes e as funções. */
.auth__contador > * { max-width: 540px; width: 100%; }
.auth__contador h2 { font-size: 30px; line-height: 1.2; margin-bottom: 8px; }
.auth__contador-selo { display: inline-flex; width: auto !important; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .16); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.auth__contador-arte { position: relative; height: 410px; margin: 24px 0 20px; }
.auth__contador-painel { position: absolute; inset: 30px 26px 44px 26px; padding: 18px; border-radius: 18px; background: #fff; color: #0f172a; text-align: left;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45); transform: rotate(-2deg); }
.auth__contador-topo { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.auth__contador-topo span { width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; }
.auth__contador-topo b { margin-left: 8px; font-size: 12px; color: #64748b; font-weight: 600; }
.auth__contador-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* Cores fixas (é a "foto" de uma tela clara), iguais no tema claro e no escuro. */
.auth__contador-numeros div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #eef6ff; }
.auth__contador-numeros i { color: var(--accent-9); font-size: 18px; }
.auth__contador-numeros small { font-size: 12px; color: #64748b; font-weight: 600; }
.auth__contador-numeros b { font-size: 20px; font-weight: 800; }
.auth__contador-barras { display: flex; align-items: flex-end; gap: 8px; height: 66px; margin: 14px 0 12px; padding: 0 4px; border-bottom: 2px solid #e2e8f0; }
.auth__contador-barras span { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--accent-9), #cfe6ff); }
.auth__contador-linhas { display: grid; gap: 6px; }
.auth__contador-linhas div { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-radius: 8px; background: #f8fafc; font-size: 12px; }
.auth__contador-linhas span { display: inline-flex; align-items: center; gap: 6px; color: #334155; font-weight: 600; }
.auth__contador-linhas i { color: #94a3b8; }
.auth__contador-linhas em { font-style: normal; font-weight: 700; color: #b45309; }
.auth__contador-linhas em.ok { color: #15803d; }
.auth__contador-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: #fff; color: #0f172a;
    font-size: 13px; font-weight: 700; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .45); }
.auth__contador-chip i { font-size: 16px; }
.auth__contador-chip--zip { right: 0; top: 0; transform: rotate(3deg); }
.auth__contador-chip--zip i { color: #16a34a; }
.auth__contador-chip--simples { right: 0; bottom: 0; transform: rotate(-3deg); }
.auth__contador-chip--simples i { color: #f59e0b; }
.auth__contador-chip--sefaz { left: 0; top: 168px; transform: rotate(-4deg); }
.auth__contador-chip--sefaz i { color: var(--accent-9); }
.auth__contador-funcoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.auth__contador-funcoes span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); font-size: 13px; font-weight: 600; }
.medidor-senha { display: flex; gap: 6px; margin-top: 10px; }
.medidor-senha span { flex: 1; height: 5px; border-radius: 3px; background: var(--gray-a4); transition: background .2s; }
.digitos-2fa { display: flex; justify-content: space-between; gap: 8px; }
.digitos-2fa input { flex: 1; min-width: 0; max-width: 60px; height: 60px; border: 1px solid var(--gray-a7); border-radius: var(--radius-3); background: transparent; color: var(--gray-12); font: inherit; font-size: 28px; font-weight: 600; text-align: center; }
.digitos-2fa input:focus { outline: 2px solid var(--accent-8); outline-offset: 1px; border-color: var(--accent-8); }
.digitos-2fa input.erro { border-color: var(--red-8); }
@media (max-width: 991.98px) {
    .auth { flex-direction: column-reverse; }
    .auth__lado-iris { flex: none; padding: 20px 16px; }
    .auth__lado-iris .auth__iris, .auth__lado-iris h2, .auth__lado-iris p { display: none; }
    .auth__contador-arte, .auth__contador-funcoes { display: none; }
    .auth__lado-form { padding: 24px 16px; }
    .auth__logo img { height: 52px; }
}

/* Telas de erro (404 e 500), como as do sistema: texto à esquerda e imagem ou cartão à direita */
/* Página de erro (erros/js/erro.js): classe própria, para não pegar campos e avisos com a classe "erro". */
.pagina-erro { display: flex; min-height: 100vh; background: var(--color-background); }
.erro__lado { flex: 1 1 50%; display: flex; align-items: center; padding: 60px 40px; }
.erro__conteudo { width: 100%; max-width: 620px; margin: 0 auto; }
.erro__logo { height: 80px; display: block; margin-bottom: 48px; }
.erro__numero { font-size: 88px; line-height: 1; font-weight: 800; color: var(--gray-12); }
.erro__titulo { margin: 16px 0 12px; font-size: 40px; line-height: 1.1; font-weight: 800; color: var(--gray-12); }
.erro__texto { max-width: 550px; line-height: 1.7; }
.erro__lado-imagem { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--accent-a2); }
.erro__lado-imagem.com-cartao { background: var(--red-a2); }
.erro__imagem { width: 100%; max-width: 600px; border-radius: 16px; }
.erro__cartao { max-width: 440px; padding: 36px 32px; border: 1px solid var(--gray-a5); border-radius: 20px; background: var(--color-panel-solid); text-align: center; box-shadow: 0 16px 40px rgba(0, 0, 0, .08); }
.erro__icone { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--red-a3); color: var(--red-11); font-size: 36px; }
.erro__codigo { width: fit-content; max-width: 100%; padding: 10px 14px; border: 1px dashed var(--gray-a6); border-radius: 12px; }
.erro__lado-imagem.codigo-500 { background: var(--red-a2); }
@media (max-width: 991.98px) {
    .pagina-erro { flex-direction: column; }
    .erro__lado { padding: 32px 16px; }
    .erro__logo { height: 56px; margin-bottom: 28px; }
    .erro__numero { font-size: 64px; }
    .erro__titulo { font-size: 30px; }
    .erro__lado-imagem { padding: 24px 16px; }
}
/* 403: fundo âmbar à direita, como a tela do sistema, e o motivo do bloqueio */
.erro__lado-imagem.codigo-403 { background: var(--amber-a2); }
.erro__motivo { max-width: 550px; }

/* 503: manutenção (cartão central, como errors/manutencao.blade.php) */
.manutencao { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(circle at 85% 10%, var(--accent-a4) 0, transparent 35%), radial-gradient(circle at 10% 90%, var(--green-a3) 0, transparent 35%), var(--color-background); }
.manutencao__cartao { width: 100%; max-width: 560px; padding: 48px 36px; text-align: center; background: var(--color-panel-solid); border: 1px solid var(--gray-a5); border-radius: 24px; box-shadow: 0 30px 60px rgba(15, 23, 42, .08); }
.manutencao__logo { display: block; height: 44px; margin: 0 auto 32px; }
.manutencao__icone { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 20px; background: var(--accent-a3); color: var(--accent-11); font-size: 32px; }
.manutencao h1 { margin: 0 0 12px; font-size: clamp(1.6rem, 4vw, 2rem); letter-spacing: -.03em; color: var(--gray-12); }
.manutencao p { margin: 0 auto; max-width: 440px; line-height: 1.65; }
.manutencao__contagem { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; padding: 12px 16px; border: 1px dashed var(--gray-a6); border-radius: 14px; color: var(--gray-11); }
.manutencao__contatos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.manutencao__contatos a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--accent-11); background: var(--accent-a3); }
.manutencao__contatos a.whatsapp { color: #fff; background: #25d366; }
@media (max-width: 480px) { .manutencao__cartao { padding: 36px 20px; } }
.erro__exemplos { padding-top: 12px; border-top: 1px dashed var(--gray-a6); }

/* Janela de ajuda das telas (assets/js/faq.js): perguntas do FAQ em acordeão (details/summary). */
.faq-acordeao {
    border: 1px solid var(--gray-a6);
    border-radius: var(--radius-4);
    overflow: hidden;
}
.faq-item + .faq-item {
    border-top: 1px solid var(--gray-a6);
}
.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary:hover,
.faq-item[open] summary {
    background: var(--gray-a3);
}
.faq-item summary i {
    color: var(--gray-10);
    transition: transform .2s;
}
.faq-item[open] summary i {
    transform: rotate(180deg);
}
.faq-item summary:focus-visible {
    outline: 2px solid var(--accent-8);
    outline-offset: -2px;
}
.faq-resposta {
    padding: var(--space-3) var(--space-4) var(--space-2);
}
.faq-lista {
    margin: 0 0 var(--space-2);
    padding-left: var(--space-5);
}
.faq-lista li + li {
    margin-top: var(--space-1);
}
/* Editor dos termos no admin: a barra de formatação sobre a área editável. */
.editor-documento { border: 1px solid var(--gray-a6); border-radius: var(--radius-3); overflow: hidden; }
.editor-documento__barra { border-bottom: 1px solid var(--gray-a5); background: var(--gray-a2); }
.editor-documento__area { outline: none; }
.editor-documento__area:focus { box-shadow: inset 0 0 0 2px var(--accent-a7); }
/* Modelo de contrato: os marcadores ({cliente.nome}) realçados no texto (CSS Custom Highlight, sem mudar o HTML salvo) e em chips. */
::highlight(marcador-contrato) { background-color: var(--accent-a3); color: var(--accent-11); }
.chip-marcador { font-family: var(--code-font-family); font-size: 12.5px; font-weight: 600; color: var(--accent-11); background: var(--accent-a3); border: 0; border-radius: var(--radius-2); padding: 3px 7px; cursor: pointer; }
.chip-marcador:hover:not(:disabled) { background: var(--accent-a5); }
.chip-marcador:disabled { cursor: default; }
.quadro-ia { border: 1px solid var(--iris-a5); background: linear-gradient(180deg, var(--iris-a2), transparent 70%); }
.quadro-ia[data-bloqueado="true"] { border-color: var(--gray-a5); background: var(--gray-a2); }

/* Íris (assets/js/iris.js), no lado direito ou no esquerdo (classe "esquerda"): fechada (o botão redondo), minimizada (só a barra de título), flutuante
   (o painel no canto) e integrada (coluna no lado escolhido; a página, o rodapé e os avisos encolhem ao lado dela). */
:root { --iris-coluna: clamp(340px, 25vw, 480px); }
.iris-lancador {
    position: fixed; right: 20px; bottom: 64px; z-index: 40; width: 56px; height: 56px; padding: 0; border-radius: 50%;
    border: 2px solid var(--accent-9); background: var(--color-panel-solid); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); cursor: pointer; overflow: hidden;
    transition: transform .15s;
}
.iris-lancador:hover { transform: scale(1.06); }
.iris-lancador img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; }
/* Arrastável: o toque arrasta o botão em vez de rolar a página. */
.iris-lancador { touch-action: none; cursor: grab; }
.iris-lancador:active { cursor: grabbing; }
.iris-painel {
    position: fixed; right: 20px; bottom: 64px; z-index: 40; width: 380px; height: min(600px, calc(100vh - 140px)); display: flex; flex-direction: column;
    background: var(--color-panel-solid); border: 1px solid var(--gray-a5); border-radius: var(--radius-5); box-shadow: 0 12px 40px rgba(0, 0, 0, .3); overflow: hidden;
}
.iris-painel.minimizado { height: auto; }
.iris-painel.minimizado > :not(.iris-painel__topo) { display: none; }
.iris-painel.minimizado .iris-painel__topo { border-bottom: 0; cursor: pointer; }
.iris-painel.integrado { top: 0; right: 0; bottom: 0; width: var(--iris-coluna); height: 100vh; border-radius: 0; border-width: 0 0 0 1px; box-shadow: none; z-index: 15; }
.iris-painel.integrado .iris-painel__topo { height: 60px; flex: 0 0 60px; }
body[data-iris-integrada="true"] .pagina { margin-right: var(--iris-coluna); }
body[data-iris-integrada="true"] .rodape { right: var(--iris-coluna); }
body[data-iris-integrada="true"] .avisos { right: calc(var(--iris-coluna) + 16px); }
.iris-lancador.esquerda, .iris-painel.esquerda { right: auto; left: 20px; }
.iris-painel.integrado.esquerda { left: 0; border-width: 0 1px 0 0; }
body[data-iris-lado="esquerda"] .pagina { margin-right: 0; margin-left: var(--iris-coluna); }
body[data-iris-lado="esquerda"] .rodape { right: 0; left: var(--iris-coluna); }
body[data-iris-lado="esquerda"] .avisos { right: 16px; }
.iris-painel__topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--gray-a4); }
.iris-painel__titulo { flex: 1; min-width: 0; }
.iris-painel__modos { display: flex; gap: 4px; padding: 8px 12px 0; }
.iris-painel__modos button {
    flex: 1; padding: 8px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--gray-11); font: inherit; font-size: 13px; cursor: pointer;
}
.iris-painel__modos button[data-ativo="true"] { color: var(--accent-11); border-bottom-color: var(--accent-9); font-weight: 600; }
.iris-painel__conversa.conversa-iris { flex: 1; max-height: none; padding: 12px; }
.iris-painel__entrada { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--gray-a4); }
/* Caminho do menu citado pela Íris ("Configurações › Nota fiscal"): link para a tela. */
.iris-caminho { color: var(--accent-11); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.iris-caminho:hover { color: var(--accent-12); }
/* Microfone gravando: pulsa para lembrar que a Íris está ouvindo. */
.iris-gravando { animation: iris-ouvindo 1.2s ease-in-out infinite; }
@keyframes iris-ouvindo { 50% { box-shadow: 0 0 0 6px var(--red-a4); } }
@media (prefers-reduced-motion: reduce) { .iris-gravando { animation: none; } }
.iris-link { display: flex; gap: 6px; align-items: baseline; text-align: left; }
/* Telas estreitas: sem coluna (a integrada vira a tela cheia, como a flutuante no celular). */
@media (max-width: 900px) {
    .iris-integrar { display: none; }
    body[data-iris-integrada="true"] .pagina { margin-right: 0; }
    body[data-iris-integrada="true"] .rodape { right: 0; }
    body[data-iris-integrada="true"] .avisos { right: 16px; }
    body[data-iris-lado="esquerda"] .pagina { margin-left: 0; }
    body[data-iris-lado="esquerda"] .rodape { left: 0; }
}
@media (max-width: 640px) {
    .iris-lancador { right: 12px; bottom: 60px; width: 50px; height: 50px; }
    .iris-lancador.esquerda { right: auto; left: 12px; }
    .iris-painel:not(.minimizado), .iris-painel.integrado { top: 0; right: 0; left: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; z-index: 60; }
    .iris-painel.minimizado { right: 12px; left: 12px; width: auto; bottom: 60px; }
}

/* PDF do contrato, dos termos ou da privacidade no modal do primeiro acesso (assets/js/termos.js). */
.documento-pdf { display: block; width: 100%; height: 55vh; min-height: 320px; border: 1px solid var(--gray-a6); border-radius: var(--radius-3); background: #fff; }

/* Assinatura na tela (O.S. e contrato): quadro de desenho e a imagem gravada. */
.quadro-assinatura { width: 100%; height: 220px; display: block; touch-action: none; background: #fff; border: 1px dashed var(--gray-a8); border-radius: var(--radius-3); cursor: crosshair; }
.imagem-assinatura { width: 100%; height: 90px; object-fit: contain; background: #fff; border-radius: var(--radius-2); margin: 6px 0; }
.linha-checklist { padding: 6px 10px; border: 1px solid var(--gray-a4); border-radius: var(--radius-2); }

/* Agenda dos técnicos: uma coluna por dia e um cartão por atendimento. */
.coluna-agenda { min-height: 160px; padding: 10px; border: 1px solid var(--gray-a4); border-radius: var(--radius-3); background: var(--gray-a2); }
.coluna-agenda--hoje { border-color: var(--accent-8); background: var(--accent-a2); }
.cartao-agenda { display: block; padding: 8px 10px; border-radius: var(--radius-2); background: var(--color-panel-solid); border: 1px solid var(--gray-a5); border-left: 3px solid var(--accent-9); color: inherit; text-decoration: none; }
.cartao-agenda:hover { border-color: var(--accent-8); }

/* Agenda (agendamentos): grade por hora com uma coluna por profissional (Dia) ou por dia (Semana). As linhas da grade
   vêm do fundo da coluna (--altura-slot e --altura-hora); os blocos ficam por cima, posicionados pelo minuto. */
.agenda-grade { overflow: auto; max-height: max(480px, calc(100vh - 300px)); border: 1px solid var(--gray-a5); border-radius: var(--radius-3); background: var(--color-panel-solid); }
.agenda-tabela { display: grid; min-width: fit-content; }
.agenda-cabecalho { position: sticky; top: 0; z-index: 4; padding: 8px 6px; min-width: 0; text-align: center; background: var(--color-panel-solid); border-bottom: 1px solid var(--gray-a5); border-left: 1px solid var(--gray-a4); box-shadow: inset 0 3px 0 var(--cor-profissional, transparent); }
.agenda-cabecalho--dia { all: unset; box-sizing: border-box; position: sticky; top: 0; z-index: 4; padding: 6px; text-align: center; cursor: pointer; background: var(--color-panel-solid); border-bottom: 1px solid var(--gray-a5); border-left: 1px solid var(--gray-a4); }
.agenda-cabecalho--dia:hover { background: var(--gray-a3); }
.agenda-cabecalho--dia[data-hoje="true"] { box-shadow: inset 0 3px 0 var(--accent-9); color: var(--accent-11); }
.agenda-cabecalho--dia:focus-visible { outline: 2px solid var(--accent-8); outline-offset: -2px; }
.agenda-canto { left: 0; z-index: 5; border-left: 0; }
.agenda-horas { position: sticky; left: 0; z-index: 3; background: var(--color-panel-solid); border-right: 1px solid var(--gray-a5); }
.agenda-hora { position: absolute; right: 6px; margin-top: -7px; font-size: 11px; line-height: 14px; color: var(--gray-9); }
.agenda-hora[data-cheia="true"] { color: var(--gray-11); font-weight: 600; }
.agenda-hora:first-child { margin-top: 2px; }
.agenda-coluna {
    position: relative; border-left: 1px solid var(--gray-a4);
    background-image: linear-gradient(to bottom, var(--gray-a5) 1px, transparent 1px), linear-gradient(to bottom, var(--gray-a3) 1px, transparent 1px);
    background-size: 100% var(--altura-hora), 100% var(--altura-slot);
}
.agenda-coluna[data-criar="true"] { cursor: cell; }
.agenda-coluna[data-hoje="true"] { background-color: var(--accent-a2); }
.agenda-fora { position: absolute; left: 0; right: 0; background: var(--gray-a3); pointer-events: none; }
.agenda-bloqueio {
    position: absolute; left: 2px; right: 2px; z-index: 1; box-sizing: border-box; padding: 2px 6px; overflow: hidden; cursor: pointer;
    font-size: 11px; color: var(--orange-11); border: 1px dashed var(--orange-a7); border-radius: var(--radius-2);
    background: repeating-linear-gradient(135deg, var(--orange-a3) 0 6px, transparent 6px 12px);
}
.agenda-bloco {
    position: absolute; z-index: 2; box-sizing: border-box; padding: 2px 6px; overflow: hidden; cursor: pointer;
    font-size: 12px; line-height: 1.35; text-align: left; color: var(--gray-12); border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--cor-situacao) 16%, var(--color-panel-solid));
    border: 1px solid color-mix(in srgb, var(--cor-situacao) 45%, transparent); border-left: 4px solid var(--cor-profissional);
    transition: box-shadow .15s;
}
.agenda-bloco:hover, .agenda-bloco:focus-visible { box-shadow: var(--shadow-3); z-index: 3; outline: none; }
.agenda-bloco[draggable="true"] { cursor: grab; }
.agenda-bloco[draggable="true"]:active { cursor: grabbing; }
.agenda-bloco[data-encerrado="true"] { opacity: .55; text-decoration: line-through; }
.agenda-bloco--os { border-style: dashed; border-left-style: solid; background: repeating-linear-gradient(135deg, var(--gray-a2) 0 8px, var(--gray-a4) 8px 16px), var(--color-panel-solid); }
.agenda-bloco__linha { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-bloco__hora { font-weight: 600; display: flex; gap: 4px; align-items: center; }
.agenda-bloco__situacao { margin-left: auto; font-weight: 500; font-size: 10px; color: color-mix(in srgb, var(--cor-situacao) 80%, var(--gray-12)); }
.agenda-bloco__detalhe { color: var(--gray-11); font-size: 11px; }
.agenda-fantasma { position: absolute; left: 2px; right: 2px; z-index: 1; box-sizing: border-box; padding: 2px 6px; pointer-events: none; font-size: 11px; color: var(--accent-11); border: 2px dashed var(--accent-8); border-radius: var(--radius-2); background: var(--accent-a3); }
.agenda-agora { position: absolute; left: 0; right: 0; height: 2px; z-index: 3; pointer-events: none; background: var(--red-9); }
.agenda-agora::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red-9); }
.agenda-legenda { font-size: 12px; color: var(--gray-11); }
.agenda-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.agenda-legenda__cor { display: inline-block; width: 14px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--cor-situacao) 25%, var(--color-panel-solid)); border: 1px solid var(--cor-situacao); }
.agenda-legenda__cor--os { background: repeating-linear-gradient(135deg, var(--gray-a3) 0 3px, var(--gray-a6) 3px 6px); border: 1px dashed var(--gray-a8); }
.agenda-legenda__cor--bloqueio { background: repeating-linear-gradient(135deg, var(--orange-a4) 0 3px, transparent 3px 6px); border: 1px dashed var(--orange-a7); }
.agenda-legenda__cor--fora { background: var(--gray-a4); border: 1px solid var(--gray-a5); }
.ponto-cor { display: inline-block; border-radius: 50%; flex-shrink: 0; }
.horarios-livres { max-height: 96px; overflow-y: auto; }
/* Horários de atendimento por dia (profissionais e Configurações › Agenda) */
.horario-dia { padding: 8px 12px; border: 1px solid var(--gray-a4); border-radius: var(--radius-3); }
.horario-dia[data-fechado="true"] { background: var(--gray-a2); }
.horario-dia__nome { min-width: 170px; }
.amostra-cor { all: unset; box-sizing: border-box; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid var(--color-panel-solid); box-shadow: 0 0 0 1px var(--gray-a6); }
.amostra-cor[data-marcada="true"] { box-shadow: 0 0 0 2px var(--gray-12); }
.amostra-cor:focus-visible { box-shadow: 0 0 0 2px var(--accent-8); }
.seletor-cor { width: 44px; height: 32px; padding: 0; border: 1px solid var(--gray-a6); border-radius: var(--radius-2); background: none; cursor: pointer; }

/* Indicadores da O.S. */
.icone-indicador { width: 42px; height: 42px; border-radius: var(--radius-3); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.barra-indicador { height: 8px; border-radius: 4px; background: var(--gray-a3); overflow: hidden; margin: 4px 0 2px; }
.barra-indicador > div { height: 100%; background: var(--accent-9); border-radius: 4px; }

/* Campo com erro (formulario.js › Campo nome=...): borda vermelha no campo; a aba com erro ganha a marca vermelha. */
.campo-com-erro .rt-TextFieldRoot,
.campo-com-erro .rt-TextAreaRoot,
.campo-com-erro .rt-SelectTrigger,
.campo-com-erro .lista-pesquisavel { box-shadow: inset 0 0 0 1px var(--red-8) !important; }
.campo-com-erro .rt-TextFieldRoot:focus-within { outline-color: var(--red-8); }
.marca-erro { color: var(--red-9); display: inline-flex; margin-left: 2px; }
/* Aba sempre montada (formulario.js › AbaConteudo): a fechada fica escondida. */
.aba-montada[data-state="inactive"] { display: none; }
/* Avisos e confirmações (AlertDialog): no mínimo a largura de um SweetAlert (32em), mesmo com maxWidth menor na tela;
   no celular, a largura disponível. */
.rt-AlertDialogContent { min-width: min(32em, 100%); }
/* Os botões dos avisos e confirmações ficam centralizados, como no SweetAlert (a barra é o Flex à direita com botões). */
.rt-AlertDialogContent .rt-Flex.rt-r-jc-end:has(> .rt-BaseButton) { justify-content: center; }
/* Ícone no topo dos avisos e confirmações, como no SweetAlert, pelo que os botões dizem: só "Fechar" é atenção (laranja),
   confirmação é pergunta (azul) e a de ação perigosa (excluir, cancelar: botão com data-acao="perigo" ou o último em
   vermelho) é perigo. */
.rt-AlertDialogContent::before {
    content: ''; display: block; width: 76px; height: 76px; margin: 4px auto 14px; background: no-repeat center / contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='37' fill='none' stroke='%23f8bb86' stroke-width='4'/%3E%3Crect x='36' y='17' width='8' height='31' rx='4' fill='%23f8bb86'/%3E%3Ccircle cx='40' cy='59' r='5' fill='%23f8bb86'/%3E%3C/svg%3E");
}
.rt-AlertDialogContent:has(.rt-BaseButton + .rt-BaseButton)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='37' fill='none' stroke='%2387adbd' stroke-width='4'/%3E%3Ctext x='40' y='57' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='48' font-weight='700' fill='%2387adbd'%3E%3F%3C/text%3E%3C/svg%3E");
}
.rt-AlertDialogContent:has(.rt-BaseButton[data-acao="perigo"])::before,
.rt-AlertDialogContent:has(.rt-BaseButton + .rt-BaseButton[data-accent-color="red"]:last-child)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='37' fill='none' stroke='%23f27474' stroke-width='4'/%3E%3Crect x='36' y='17' width='8' height='31' rx='4' fill='%23f27474'/%3E%3Ccircle cx='40' cy='59' r='5' fill='%23f27474'/%3E%3C/svg%3E");
}
/* Título e texto centralizados embaixo do ícone; listas (os erros dos campos) continuam alinhadas à esquerda. */
.rt-AlertDialogContent > .rt-Heading, .rt-AlertDialogContent > .rt-Text { text-align: center; }
.rt-AlertDialogContent > .rt-Text ul { display: inline-block; text-align: left; }

/* Faixa do acesso do suporte ("Acessar o sistema" do admin): fica no topo enquanto a sessão do suporte durar. */
.faixa-suporte {
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 16px; font-size: 14px; text-align: center;
    background: var(--violet-a3); color: var(--violet-11); border-bottom: 1px solid var(--violet-a6);
}

/* Cartões marcáveis (CheckboxCards) com cara de cartão: o fundo vem da variável do Radix (pintada no ::before), com borda
   própria, e o marcado na cor de destaque. */
.cartoes-marcaveis .rt-CheckboxCardsItem {
    --checkbox-cards-item-background-color: var(--gray-3);
    box-shadow: inset 0 0 0 1px var(--gray-a7), var(--shadow-2);
}
.cartoes-marcaveis .rt-CheckboxCardsItem:hover { --checkbox-cards-item-background-color: var(--gray-4); }
.cartoes-marcaveis .rt-CheckboxCardsItem:has([data-state="checked"]) {
    --checkbox-cards-item-background-color: var(--accent-3);
    box-shadow: inset 0 0 0 1px var(--accent-8), var(--shadow-2);
}
.cartoes-marcaveis .rt-CheckboxCardsItem:has([data-state="checked"]):hover { --checkbox-cards-item-background-color: var(--accent-4); }