/* Paleta clara do produto, baseada na opcao 7c. Estrutura em layout-usuario.css. */

/* ============================== TOKENS ============================== */
:root {
    color-scheme: light;
    /* Branco e a area de trabalho E a superficie das janelas: o cinza so as separa. */
    --shell-fundo: var(--udisoft-branco);
    --shell-superficie: var(--udisoft-branco);
    --shell-superficie-2: #f4f5f6;              /* faixa de apoio: cabecalho de grade, toolbar */
    --shell-borda: #e2e4e6;                     /* detalhe: divisoria discreta */
    --shell-borda-forte: #cbcecf;               /* detalhe: contorno de controle */
    --shell-texto: var(--udisoft-grafite);
    --shell-texto-suave: var(--udisoft-cinza);  /* cinza oficial no texto secundario */
    --shell-texto-fraco: #8a8d90;

    --shell-primaria: var(--udisoft-verde);
    --shell-primaria-texto: var(--udisoft-grafite);
    --shell-destaque: var(--udisoft-verde);

    --shell-acao: var(--udisoft-verde);
    --shell-acao-clara: var(--udisoft-verde-claro);
    --shell-acao-escura: #7ea637;
    --shell-acao-texto: var(--udisoft-grafite);

    --shell-foco: #5c8722;
    --shell-foco-halo: rgba(148, 193, 68, 0.32);

    --controle-altura: 32px;
    --controle-raio: 6px;
    --painel-raio: 10px;

    /* O proprio verde da marca com alfa: mesma cor, so mais transparente. */
    --acao-tinta: rgba(148, 193, 68, 0.16);
    --acao-tinta-forte: rgba(148, 193, 68, 0.30);

    /* Barra de titulo da janela, em ESCALA DE CINZA. O cromo da janela e cinza de ponta
       a ponta; o verde fica reservado ao chrome da aplicacao (topo e dock) e a acao.

         inativa  #eceef0             um degrau abaixo da faixa de apoio (#f4f5f6). Com
                                      corpo e area de trabalho brancos, barra branca
                                      sumia. E o mesmo cinza que o shell.css usa como
                                      fundo de workspace no classico.
         ativa    cinza oficial       o #545454 da paleta, com texto branco. Salto de
                                      claro para escuro: da para achar a janela ativa
                                      de relance, sem procurar borda. */
    --barra-janela: #eceef0;
    --barra-janela-ativa: var(--udisoft-cinza);

    /* Sombras leves: sobre branco, a sombra pesada da opcao 7 sujaria o fundo. */
    --sombra-1: 0 1px 2px rgba(47, 48, 52, 0.05);
    --sombra-2: 0 6px 20px rgba(47, 48, 52, 0.10), 0 1px 3px rgba(47, 48, 52, 0.05);
    --sombra-3: 0 18px 44px rgba(47, 48, 52, 0.18), 0 3px 10px rgba(47, 48, 52, 0.08);

    /* Dock: verde macico, texto grafite. Junto com a barra de topo, e todo o chrome. */
    --dock-fundo: var(--udisoft-verde);
    --dock-texto: rgba(47, 48, 52, 0.70);
    --dock-texto-forte: var(--udisoft-grafite);
    --dock-hover: var(--udisoft-verde-claro);
    --dock-ativo: var(--udisoft-branco);

    --cabecalho-altura: 46px;
}

/* ============================== BASE ============================== */
body.shell,
body.auth {
    font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

input[type="checkbox"],
input[type="radio"] { accent-color: var(--shell-foco); }

.painel-corpo,
.grade-scroll,
.grade-scroll-limitado,
.tela-legado-area,
.menu-suspenso {
    scrollbar-width: thin;
    scrollbar-color: #cbcecf transparent;
}

/* Marca sobre o verde: quadrado GRAFITE com o U em branco. Inverte o de sempre porque
   um quadrado verde sobre a barra verde desapareceria. */
.topbar-marca,
.auth-marca {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.topbar-marca::before {
    content: "";
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background:
        linear-gradient(var(--udisoft-branco), var(--udisoft-branco)) 7.5px 7px / 2.5px 9.5px no-repeat,
        linear-gradient(var(--udisoft-branco), var(--udisoft-branco)) 13.5px 7px / 2.5px 9.5px no-repeat,
        linear-gradient(var(--udisoft-branco), var(--udisoft-branco)) 7.5px 14px / 8.5px 2.5px no-repeat,
        var(--udisoft-grafite);
}

/* No login o fundo e branco, entao a marca volta ao quadrado verde com o U grafite. */
.auth-marca::before {
    content: "";
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background:
        linear-gradient(var(--udisoft-grafite), var(--udisoft-grafite)) 9.5px 9px / 3px 12px no-repeat,
        linear-gradient(var(--udisoft-grafite), var(--udisoft-grafite)) 17px 9px / 3px 12px no-repeat,
        linear-gradient(var(--udisoft-grafite), var(--udisoft-grafite)) 9.5px 18px / 10.5px 3px no-repeat,
        var(--udisoft-verde);
}

/* ============================== BARRA DE TOPO VERDE ============================== */
.topbar {
    min-height: var(--cabecalho-altura);
    gap: 18px;
    padding: 0 20px;
    background: var(--udisoft-verde);
    border-bottom: 0;
    color: var(--udisoft-grafite);
}

.topbar-marca {
    margin-right: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--udisoft-grafite);
}

.topbar-tenant,
.topbar-usuario,
.topbar-empresa { gap: 8px; }

.topbar-tenant strong,
.topbar-usuario strong { font-weight: 700; font-size: 13px; }

/* Rotulo: grafite rebaixado por alfa, nao um cinza novo. */
.topbar-rotulo {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    opacity: 1;
    color: rgba(47, 48, 52, 0.62);
}

.topbar-acao {
    background: transparent;
    border: 1px solid rgba(47, 48, 52, 0.28);
    border-radius: 999px;
    color: var(--udisoft-grafite);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
}

.topbar-acao:hover {
    background: var(--udisoft-branco);
    border-color: var(--udisoft-branco);
    color: var(--udisoft-grafite);
}

.topbar-empresa select {
    height: 30px;
    max-width: 300px;
    padding: 0 12px;
    background: var(--udisoft-branco);
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--udisoft-grafite);
    font-size: 12.5px;
    font-weight: 600;
}

.topbar-empresa select:hover { border-color: rgba(47, 48, 52, 0.28); }
.topbar-empresa select option { color: var(--shell-texto); background: var(--udisoft-branco); }

.topbar :focus-visible { outline-color: var(--udisoft-grafite); }

/* ============================== DOCK VERDE ============================== */
.menubar {
    position: fixed;
    left: 50%;
    bottom: 16px;
    z-index: 60;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    padding: 6px;
    background: var(--dock-fundo);
    border: 0;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(47, 48, 52, 0.22);
}

.menubar-lista {
    flex-wrap: nowrap;
    gap: 2px;
    overflow: visible;
}

.menubar-raiz { position: relative; }

.menubar-botao {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 64px;
    height: 54px;
    padding: 0 4px;
    border-radius: 14px;
    color: var(--dock-texto);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
}

.menubar-botao:hover {
    background: var(--dock-hover);
    color: var(--dock-texto-forte);
}

.menubar > .menubar-lista > .menubar-raiz > .menubar-botao:focus-visible { outline-color: var(--udisoft-grafite); }

/* Modulo aberto: pastilha branca sobre o verde. Verde e branco, de novo. */
.menubar-raiz.aberto > .menubar-botao {
    background: var(--dock-ativo);
    color: var(--udisoft-grafite);
    border-radius: 14px;
}

.menubar-icone {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.menubar-raiz.aberto > .menubar-botao .menubar-icone { color: var(--udisoft-grafite); }

.menubar-botao .menu-seta-baixo { display: none; }

/* Painel do modulo: folha branca acima do dock, com borda cinza (detalhe). */
.menubar-raiz > .menu-suspenso {
    top: auto;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 250px;
    max-height: calc(100vh - var(--cabecalho-altura) - 120px);
    overflow-y: auto;
    padding: 8px;
    background: var(--udisoft-branco);
    border: 1px solid var(--shell-borda);
    border-radius: 14px;
    box-shadow: var(--sombra-3);
}

/* Modulos das pontas: o painel nao pode sair da tela. */
.menubar-raiz:first-child > .menu-suspenso { left: 0; transform: none; }
.menubar-raiz:last-child > .menu-suspenso { left: auto; right: 0; transform: none; }

.menu-suspenso .menu-item,
.menu-suspenso .menu-grupo-botao {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--shell-texto);
    font-size: 13px;
}

.menu-suspenso .menu-item:hover,
.menu-grupo-flyout:hover > .menu-grupo-botao,
.menu-grupo-flyout.aberto > .menu-grupo-botao {
    background: var(--acao-tinta);
    color: var(--shell-texto);
}

.menu-suspenso li.menu-item { color: var(--shell-texto-fraco); font-style: italic; }

.menu-grupo-flyout:hover > .menu-suspenso { display: none; }
.menu-grupo-flyout.aberto > .menu-suspenso { display: block; }

.menu-grupo-flyout > .menu-suspenso {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    min-width: 0;
    max-height: none;
    margin: 2px 0 4px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.menu-grupo-flyout > .menu-suspenso .menu-item { padding-left: 28px; }

.menu-grupo-botao .menu-seta {
    display: block;
    width: 7px;
    height: 7px;
    font-size: 0;
    line-height: 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.6;
    transform: rotate(-45deg);
}

.menu-grupo-flyout.aberto > .menu-grupo-botao .menu-seta { transform: rotate(45deg); }

.menu-separador { margin: 6px 8px; background: var(--shell-borda); }

.menu-item-breve { opacity: 0.5; }
.menu-item-bloqueado { opacity: 0.4; }

/* ============================== AREA DE TRABALHO BRANCA ============================== */
.menu.favoritos { display: none; }
.statusbar { display: none; }

.shell-corpo { background: var(--udisoft-branco); }

.workspace-vazio {
    padding: 80px 24px;
    font-size: 14px;
    color: var(--shell-texto-fraco);
}

/* Margem de baixo reserva o espaco do dock. */
.workspace-paineis { margin: 16px 20px 96px; }

.divisor { flex-basis: 8px; }

.divisor:hover,
.divisor.redimensionando { background: var(--acao-tinta-forte); }

/* Janela: branca sobre branco. Quem a define e a borda CINZA e a sombra leve. */
.janela {
    background: var(--udisoft-branco);
    border: 1px solid var(--shell-borda);
    border-radius: var(--painel-raio);
    box-shadow: var(--sombra-1);
}

/* Janela ativa: moldura no cinza oficial, casando com a barra escura do titulo, mais
   sombra um degrau acima. O verde saiu daqui de proposito — ele fica no topo, no dock
   e na acao; na janela quem fala e o cinza. */
.janela.focada {
    border-color: var(--udisoft-cinza);
    box-shadow: var(--sombra-2);
}

/* Janela inativa: barra em cinza claro. Janela ativa: barra em cinza escuro (regra
   seguinte). A distincao e de VALOR — claro contra escuro — e nao de matiz, entao
   funciona de relance e nao depende de o usuario distinguir tons de verde. */
.janela-titulo {
    min-height: 40px;
    padding: 0 8px 0 16px;
    background: var(--barra-janela);
    border-bottom: 1px solid var(--shell-borda-forte);
    color: var(--shell-texto-suave);
    font-size: 13px;
    font-weight: 600;
}

.janela.focada .janela-titulo {
    background: var(--barra-janela-ativa);
    border-bottom-color: var(--barra-janela-ativa);
    color: var(--udisoft-branco);
}

.janela-acoes { gap: 4px; }

.janela-botao {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--shell-texto-suave);
}

/* Barra CLARA (janela inativa): o realce e o branco. Um cinza mais claro que a propria
   barra leria como falha de pintura, nao como botao sob o cursor. */
.janela-botao:hover {
    background: var(--udisoft-branco);
    color: var(--shell-texto);
}

/* Barra ESCURA (janela ativa e subtela): icone claro, e o realce vira um veu de branco
   — fundo branco solido ali daria um quadrado piscando no meio da faixa escura. */
.janela.focada .janela-titulo .janela-botao,
.subtela-titulo .janela-botao { color: rgba(255, 255, 255, 0.85); }

.janela.focada .janela-titulo .janela-botao:hover,
.subtela-titulo .janela-botao:hover {
    background: rgba(255, 255, 255, 0.20);
    color: var(--udisoft-branco);
}

.janela-botao .icone { width: 14px; height: 14px; }

.zona-drop { border-color: var(--udisoft-verde); background: var(--acao-tinta-forte); }

.painel-corpo {
    --painel-padding-topo: 16px;
    padding: var(--painel-padding-topo) 20px 20px;
}

.painel-corpo h2 {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Veu do modal: grafite com alfa, discreto — o fundo agora e claro. */
.subtela-overlay,
.msgbox-overlay {
    background: rgba(47, 48, 52, 0.28);
    backdrop-filter: blur(2px);
}

.subtela,
.msgbox {
    border: 1px solid var(--shell-borda);
    border-radius: 12px;
    box-shadow: var(--sombra-3);
}

/* A subtela e sempre a janela em foco do seu contexto: mesma barra escura da ativa. */
.subtela > .subtela-titulo {
    background: var(--barra-janela-ativa);
    color: var(--udisoft-branco);
    border-bottom: 1px solid var(--barra-janela-ativa);
}

.msgbox { width: min(420px, 100%); }

.msgbox-titulo {
    padding: 16px 20px 0;
    background: var(--udisoft-branco);
    color: var(--shell-texto);
    font-size: 14px;
    font-weight: 700;
}

.msgbox-perigo .msgbox-titulo { background: var(--udisoft-branco); color: var(--shell-erro); }

.msgbox-corpo { padding: 12px 20px 20px; }

.msgbox-icone {
    width: 34px;
    height: 34px;
    background: var(--udisoft-verde);
    color: var(--udisoft-grafite);
}

.msgbox-perigo .msgbox-icone { background: var(--shell-erro); color: var(--udisoft-branco); }

.msgbox-acoes { padding: 0 20px 20px; }

.toasts { bottom: 90px; right: 20px; }

/* Toast e passageiro e precisa peso: grafite, o texto forte da paleta. */
.toast {
    padding: 10px 14px;
    border: 0;
    border-radius: 12px;
    background: var(--udisoft-grafite);
    color: var(--udisoft-branco);
    box-shadow: var(--sombra-3);
    font-size: 13px;
}

.toast.sucesso { background: var(--udisoft-verde); color: var(--udisoft-grafite); }

/* ============================== BOTOES ============================== */
.botao {
    height: var(--controle-altura);
    padding: 0 12px;
    background: var(--udisoft-branco);
    border: 1px solid var(--shell-borda-forte);
    border-radius: var(--controle-raio);
    color: var(--shell-texto);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}

.botao .icone { width: 16px; height: 16px; }

.botao:hover:not([disabled]):not(.desabilitado) {
    background: var(--shell-superficie-2);
    border-color: var(--udisoft-verde);
    color: var(--shell-texto);
}

.botao:active:not([disabled]):not(.desabilitado) { background: var(--shell-borda); }

.botao.primario {
    background: var(--udisoft-verde);
    border-color: var(--udisoft-verde);
    color: var(--udisoft-grafite);
    font-weight: 700;
}

.botao.primario:hover:not([disabled]):not(.desabilitado) {
    background: var(--udisoft-verde-claro);
    border-color: var(--udisoft-verde-claro);
    color: var(--udisoft-grafite);
}

.botao.primario:active:not([disabled]):not(.desabilitado) { background: var(--shell-acao-escura); }

.botao.perigo { border-color: var(--shell-borda-forte); color: var(--shell-erro); }

.botao.perigo:hover:not([disabled]):not(.desabilitado) {
    background: var(--shell-erro-fundo);
    border-color: var(--shell-erro-borda);
}

/* Inerte: puro cinza de detalhe, sem verde nenhum. */
.botao[disabled],
.botao.desabilitado {
    background: var(--shell-superficie-2);
    border-color: var(--shell-borda);
    color: #adb0b2;
    font-weight: 500;
}

/* ============================== TOOLBAR ============================== */
.painel-corpo .toolbar {
    gap: 6px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--shell-borda);
}

.painel-corpo .toolbar .botao {
    height: 32px;
    min-width: 32px;
    padding: 0 10px;
}

.toolbar-sep { height: 20px; margin: 0 4px; background: var(--shell-borda); }

.toolbar-contador {
    margin-left: 6px;
    padding: 3px 10px;
    border: 0;
    border-radius: 999px;
    background: var(--acao-tinta);
    color: var(--shell-texto);
    font-size: 12px;
    font-weight: 600;
}

.toolbar-contador:empty { display: none; }

.toolbar-limite { font-size: 12px; font-weight: 500; color: var(--shell-texto-suave); }

.toolbar-limite input {
    width: 56px;
    height: 30px;
    border-color: var(--shell-borda-forte);
    border-radius: var(--controle-raio);
}

.painel-corpo .toolbar-aba { margin-bottom: 10px; }

/* ============================== FORMULARIO ============================== */
.form-campo > label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--shell-texto-suave);
}

.form-campo input,
.form-campo select,
.painel-corpo .form-campo textarea {
    background: var(--udisoft-branco);
    border-color: var(--shell-borda-forte);
    border-radius: var(--controle-raio);
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
}

.form-campo input,
.form-campo select { height: var(--controle-altura); }

.form-campo input:hover:not(:focus):not([readonly]):not([disabled]),
.form-campo select:hover:not(:focus):not([disabled]) { border-color: var(--shell-texto-suave); }

.painel-corpo input:focus,
.painel-corpo select:focus,
.painel-corpo textarea:focus,
.auth-campo input:focus {
    border-color: var(--udisoft-verde);
    box-shadow: 0 0 0 3px var(--shell-foco-halo);
}

.painel-corpo input[readonly] {
    background: var(--shell-superficie-2);
    border-color: var(--shell-borda);
    color: var(--shell-texto-suave);
}

.form-capa {
    gap: 10px 24px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom-color: var(--shell-borda);
}

.form-linha { gap: 10px 18px; margin-bottom: 10px; }

.form-secao .form-campo > label,
.form-cabecalho .form-campo > label {
    font-size: 12px;
    font-weight: 500;
    color: var(--shell-texto-suave);
}

/* Abas: a ativa em verde macico com texto grafite; as outras em cinza. */
.painel-corpo .form-abas {
    gap: 4px;
    margin: 0 0 12px;
    padding: 0;
    border-bottom: 0;
}

.painel-corpo .form-aba {
    margin: 0;
    padding: 7px 16px;
    background: var(--shell-superficie-2);
    border: 1px solid var(--shell-borda);
    border-radius: 999px;
    color: var(--shell-texto-suave);
    font-size: 13px;
    font-weight: 500;
}

.painel-corpo .form-aba:hover:not(.ativa) {
    background: var(--udisoft-branco);
    border-color: var(--shell-borda-forte);
    color: var(--shell-texto);
}

.painel-corpo .form-aba.ativa {
    background: var(--udisoft-verde);
    border-color: var(--udisoft-verde);
    color: var(--udisoft-grafite);
    font-weight: 700;
    box-shadow: none;
}

.painel-corpo .form-secao {
    padding: 18px 20px;
    background: var(--udisoft-branco);
    border-color: var(--shell-borda);
    border-radius: var(--painel-raio);
}

.painel-corpo .form-abas + .form-secao,
.painel-corpo .form-abas ~ .form-secao { border-top-left-radius: var(--painel-raio); }

.painel-corpo .form-secao h3,
.painel-corpo .aba-titulo { font-size: 13px; font-weight: 700; }

.painel-corpo .bloco-interruptor { font-size: 12.5px; border-bottom-color: var(--shell-borda); }

/* ============================== MENSAGENS ============================== */
[role="alert"],
.mensagem-sucesso,
.mensagem-aviso {
    border-radius: 8px;
    padding: 9px 32px 9px 12px;
    margin: 0 0 12px;
    font-size: 13px;
}

/* ============================== GRADE ============================== */
.painel-corpo table { font-size: 13px; }

.painel-corpo th,
.painel-corpo td { padding: 9px 12px; border-bottom-color: var(--shell-borda); }

/* Cabecalho de grade: faixa cinza clara, texto cinza. Detalhe puro. */
.painel-corpo th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--shell-texto-suave);
    background: var(--shell-superficie-2);
}

.painel-corpo .linha-registro:hover td,
.painel-corpo .subgrade-linha:hover td { background: var(--shell-superficie-2); }

.painel-corpo .linha-registro.selecionada td,
.painel-corpo .subgrade-linha.selecionada td {
    background: var(--acao-tinta);
    color: var(--shell-texto);
    font-weight: 600;
}

.painel-corpo .linha-registro.selecionada td:first-child,
.painel-corpo .subgrade-linha.selecionada td:first-child { box-shadow: inset 4px 0 0 var(--udisoft-verde); }

.painel-corpo .linha-registro.selecionada a { color: var(--shell-info); }

.painel-corpo tbody td[colspan] { padding: 18px 12px; color: var(--shell-texto-fraco); }

/* ============================== AUTENTICACAO ============================== */
/* Branco de ponta a ponta, com o verde entrando por uma faixa lateral: verde e
   branco de novo, e o cinza so na borda do card. */
body.auth {
    background: var(--udisoft-branco);
}

body.auth::before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 12px;
    background: var(--udisoft-verde);
}

.auth-card {
    width: 400px;
    padding: 32px 36px 28px;
    background: var(--udisoft-branco);
    border: 1px solid var(--shell-borda);
    border-radius: 14px;
    box-shadow: var(--sombra-2);
}

.auth-marca {
    justify-content: center;
    margin: 0 0 26px;
    padding-bottom: 0;
    color: var(--shell-texto);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.auth-marca::after { display: none; }

.auth-card h2 { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--shell-texto-suave); }

.auth-campo { margin-bottom: 16px; }

.auth-campo label { font-size: 12.5px; font-weight: 500; color: var(--shell-texto-suave); }

.auth-campo input {
    height: 38px;
    padding: 0 12px;
    border-color: var(--shell-borda-forte);
    border-radius: 8px;
}

.auth-card .auth-acao {
    height: 40px;
    margin-top: 6px;
    border-radius: 999px;
    font-size: 14px;
}

.auth-lista { gap: 8px; }

.auth-lista .botao.primario {
    height: 40px;
    background: var(--udisoft-branco);
    border-radius: 999px;
    border-color: var(--shell-borda-forte);
    color: var(--shell-texto);
    font-weight: 500;
}

.auth-lista .botao.primario:hover {
    background: var(--acao-tinta);
    border-color: var(--udisoft-verde);
    color: var(--shell-texto);
    box-shadow: none;
}

/* ============================== DEGRAUS ============================== */
@container (max-width: 860px) {
    .painel-corpo .toolbar .botao { padding: 0 8px; }
}

@container (max-width: 480px) {
    .form-campo input,
    .form-campo select { height: 28px; }
    .form-linha { gap: 8px 12px; }
}

@media (max-width: 900px) {
    .menubar-lista { overflow-x: auto; scrollbar-width: none; }
    .menubar-botao { width: 56px; }
    .workspace-paineis { margin: 10px 10px 90px; }
    body.auth::before { width: 8px; }
}

@media (prefers-reduced-motion: no-preference) {
    .janela { transition: box-shadow 0.15s ease, border-color 0.15s ease; }
    .menubar-botao { transition: background-color 0.12s ease, color 0.12s ease; }
}