/*
 * Shell desktop-like (#86): CSS base, denso e funcional (estilo ERP operacional).
 * Sem framework; variaveis no :root para o tema evoluir num lugar so.
 *
 * Revisao visual (#194): tokens semanticos ampliados (neutros, foco e estados),
 * foco visivel consistente, chrome refinado e responsividade da shell — sem
 * mudar nenhum seletor/contrato usado por shell.js, crud.js ou pelos templates.
 */
:root {
    /* Paleta oficial da Udisoft (#125) — fonte: Cerebro, "Identidade Visual da
       Udisoft". As cores da marca ficam como tokens reutilizaveis; os tokens
       semanticos da shell (--shell-*) mapeiam para elas, centralizando a
       identidade num unico lugar (nada de hex de marca espalhado nos templates).
         grafite  #2f3034 -> barras, navegacao, textos fortes, fundos escuros
         verde    #94c144 -> acao principal, marca e pontos de confirmacao
         v. claro #b4cc4a -> estados leves / apoio (hover da acao)
         branco   #ffffff -> superficies e contraste
         cinza    #545454 -> textos secundarios, bordas, apoio */
    --udisoft-grafite: #2f3034;
    --udisoft-verde: #94c144;
    --udisoft-verde-claro: #b4cc4a;
    --udisoft-branco: #ffffff;
    --udisoft-cinza: #545454;

    /* Superficies e texto (escala neutra: o verde/grafite pontuam, nao dominam) */
    --shell-fundo: #eceef0;                     /* fundo do workspace: cinza claro neutro */
    --shell-superficie: var(--udisoft-branco);  /* janelas, cards, formularios */
    --shell-superficie-2: #f4f5f6;              /* cabecalhos de grade, barras internas */
    --shell-borda: #d6d8db;                     /* bordas discretas */
    --shell-borda-forte: #b9bcc0;               /* bordas de estrutura (th, divisores) */
    --shell-texto: var(--udisoft-grafite);      /* texto forte */
    --shell-texto-suave: var(--udisoft-cinza);  /* texto secundario / apoio */
    --shell-texto-fraco: #75787c;               /* apoio terciario (ajuda, placeholders) */

    /* Chrome (barras, navegacao, titulos, selecao) = grafite */
    --shell-primaria: var(--udisoft-grafite);
    --shell-primaria-texto: var(--udisoft-branco);
    --shell-destaque: var(--udisoft-grafite);   /* foco/hover/selecao (acento escuro) */

    /* Acao principal e marca = verde institucional (usado com parcimonia) */
    --shell-acao: var(--udisoft-verde);
    --shell-acao-clara: var(--udisoft-verde-claro);
    --shell-acao-escura: #7ea637;               /* estado active/pressed da acao */
    --shell-acao-texto: var(--udisoft-grafite); /* texto escuro sobre o verde (contraste) */

    /* Foco visivel: verde escuro (contraste AA sobre superficies claras) + halo */
    --shell-foco: #5c8722;
    --shell-foco-halo: rgba(148, 193, 68, 0.30);

    /* Estados semanticos (erro/sucesso/aviso/info): cores proprias, fora da marca */
    --shell-erro: #b3261e;
    --shell-erro-fundo: #fcedeb;
    --shell-erro-borda: #e0a49e;
    --shell-sucesso: #2e7d32;
    --shell-sucesso-fundo: #ebf4ec;
    --shell-sucesso-borda: #afd0b1;
    --shell-aviso: #8a6d00;
    --shell-aviso-fundo: #fdf6e2;
    --shell-aviso-borda: #e0cd92;
    --shell-info: #17637f;
    --shell-info-fundo: #e9f3f7;
    --shell-info-borda: #a9cbd8;

    /* Metricas dos controles operacionais (densidade de ERP) */
    --controle-altura: 30px;
    --controle-raio: 4px;
    --painel-raio: 6px;
}

* { box-sizing: border-box; }

html, body.shell {
    height: 100%;
    margin: 0;
}

body.shell {
    display: flex;
    flex-direction: column;
    font: 14px/1.45 "Segoe UI Variable Text", "Segoe UI", system-ui, Arial, sans-serif;
    color: var(--shell-texto);
    background: var(--shell-fundo);
}

/* Foco visivel consistente em toda a shell (teclado): substitui o outline
   default do navegador. :focus-visible nao dispara no clique do mouse. */
:focus-visible {
    outline: 2px solid var(--shell-foco);
    outline-offset: 1px;
}

/* Sobre o chrome grafite o anel verde-escuro some: anel claro. */
.topbar :focus-visible,
.menubar > .menubar-lista > .menubar-raiz > .menubar-botao:focus-visible {
    outline-color: var(--shell-acao-clara);
}

/* Animacoes curtas e funcionais; quem prefere menos movimento nao ve nenhuma. */
@media (prefers-reduced-motion: no-preference) {
    .botao, .topbar-acao, .menubar-botao, .menu-item, .menu-grupo-botao,
    .janela-botao, .form-aba {
        transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    }
}

/* ---------- Telas de autenticacao (login e selecao de tenant/empresa) ----------
   Fluxo pre-shell (#26/#27): card centralizado com a mesma identidade visual
   (variaveis, botoes .botao vem de crud.css, mensagens idem). Objetivo: marca
   como primeiro sinal, formulario curto e direto — nada de landing page. */
html { height: 100%; }

body.auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    margin: 0;
    padding: 16px;
    font: 14px/1.45 "Segoe UI Variable Text", "Segoe UI", system-ui, Arial, sans-serif;
    color: var(--shell-texto);
    background: var(--shell-fundo);
}

.auth-card {
    width: 380px;
    max-width: 100%;
    background: var(--shell-superficie);
    border: 1px solid var(--shell-borda);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(47, 48, 52, 0.10);
    padding: 28px 32px 24px;
}

/* Marca: grafite com o acento verde institucional por baixo (sinal da Udisoft,
   discreto — nao e elemento decorativo de landing). */
.auth-marca {
    margin: 0 0 20px;
    padding-bottom: 12px;
    font-size: 21px;
    font-weight: 700;
    text-align: center;
    color: var(--shell-primaria);
    position: relative;
}

.auth-marca::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: var(--shell-acao);
}

.auth-card h2 {
    margin: 0 0 14px;
    font-size: 15px;
}

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

.auth-campo label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--shell-texto-suave);
}

.auth-campo input {
    width: 100%;
    height: 34px;
    box-sizing: border-box;
    border: 1px solid var(--shell-borda-forte);
    border-radius: var(--controle-raio);
    padding: 0 10px;
    font: inherit;
    background: var(--shell-superficie);
    color: var(--shell-texto);
}

.auth-campo input:focus {
    outline: none;
    border-color: var(--shell-foco);
    box-shadow: 0 0 0 2px var(--shell-foco-halo);
}

/* Acao de largura total dentro do card (Entrar / Entrar em <tenant> / Sair).
   .auth-card no seletor: vence o empate com o .botao do crud.css (que carrega
   depois) sem depender da ordem dos stylesheets. */
.auth-card .auth-acao {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    padding: 8px 12px;
    margin-top: 4px;
}

.auth-lista {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-lista form { margin: 0; }

/* Lista de tenants/empresas: cada opcao e neutra (o verde e para A acao
   principal; numa lista de escolhas equivalentes ele viraria papel de parede).
   O hover devolve o acento da marca. */
.auth-lista .botao.primario {
    background: var(--shell-superficie);
    border: 1px solid var(--shell-borda-forte);
    color: var(--shell-texto);
    font-weight: 600;
}

.auth-lista .botao.primario:hover {
    background: var(--shell-superficie);
    border-color: var(--shell-acao-escura);
    color: var(--shell-acao-texto);
    box-shadow: inset 3px 0 0 var(--shell-acao);
}

/* ---------- Topbar: contexto sempre visivel ---------- */
.topbar {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 42px;
    padding: 4px 14px;
    background: var(--shell-primaria);
    color: var(--shell-primaria-texto);
}

.topbar-marca {
    font-size: 15px;
    font-weight: 700;
    /* Marca em verde institucional sobre a barra grafite (#125). */
    color: var(--shell-acao);
    white-space: nowrap;
}

/* ESTUDO VISUAL: seletor de tema. Fica de proposito com aparencia neutra e fora dos
   tokens dos temas — e ferramenta de comparacao, nao elemento do produto. */
.topbar-tema {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.topbar-tema select {
    height: 26px;
    border: 1px solid rgba(128, 128, 128, 0.5);
    border-radius: 4px;
    background: #fff;
    color: #2f3034;
    font: inherit;
    font-size: 12px;
    padding: 0 6px;
}

.topbar-tenant { flex: 1; }

.topbar-tenant, .topbar-usuario, .topbar-empresa {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.topbar-rotulo {
    font-size: 10px;
    text-transform: uppercase;
    opacity: 0.65;
}

.topbar-sair { display: inline; margin: 0; }

.topbar-acao {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--controle-raio);
    color: var(--shell-primaria-texto);
    cursor: pointer;
    font-size: 12px;
    line-height: 1.3;
    padding: 3px 10px;
    text-decoration: none;
}

.topbar-acao:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.65);
}

/* Combo de empresa (#128) integrado ao chrome grafite (nao um select branco
   "colado" na barra): mesma familia visual dos .topbar-acao. */
.topbar-empresa select {
    max-width: 260px;
    height: 26px;
    background: #3c3d42;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--controle-raio);
    color: var(--shell-primaria-texto);
    font: inherit;
    font-size: 12px;
    padding: 0 6px;
}

.topbar-empresa select:hover { border-color: rgba(255, 255, 255, 0.65); }

/* ---------- Menubar suspensa (menu principal, fiel ao MainMenu do legado) ----------
   Barra na cor primaria; o modulo aberto vira uma "aba" branca conectada ao
   dropdown (como no legado). Modulo SO abre no clique (shell.js); submenus
   abrem em flyout ao lado. */
.menubar {
    background: var(--shell-primaria);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0 8px;
}

.menubar-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.menubar-raiz { position: relative; }

.menubar-botao {
    display: flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--shell-primaria-texto);
    padding: 9px 14px;
    cursor: pointer;
}

.menubar-botao .menu-seta-baixo {
    font-size: 9px;
    opacity: 0.7;
}

.menubar-botao:hover { background: rgba(255, 255, 255, 0.12); }

/* Modulo aberto: aba branca conectada ao dropdown (visual do legado). */
.menubar-raiz.aberto > .menubar-botao {
    background: var(--shell-superficie);
    color: var(--shell-texto);
    border-radius: 6px 6px 0 0;
}

.menubar-raiz.aberto > .menubar-botao .menu-seta-baixo { opacity: 0.6; }

/* Icones dos modulos (menu.html): reservados aos temas com navegacao por icone, que os
   exibem; na menubar suspensa ficam escondidos. */
.menubar-icone { display: none; }

/* Dropdown do modulo / painel de flyout. */
.menu-suspenso {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: var(--shell-superficie);
    border: 1px solid var(--shell-borda);
    border-radius: 0 8px 8px 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    z-index: 60;
}

.menubar-raiz.aberto > .menu-suspenso { display: block; }

.menu-suspenso .menu-item {
    padding: 8px 18px;
    font-size: 13px;
    white-space: nowrap;
}

/* Submenu em flyout ao lado (o CRM > do legado): abre por hover ou clique. */
.menu-grupo-flyout { position: relative; }

.menu-grupo-botao {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: 0;
    font: inherit;
    font-size: 13px;
    text-align: left;
    color: var(--shell-texto);
    padding: 8px 14px 8px 18px;
    cursor: pointer;
    white-space: nowrap;
}

.menu-grupo-botao .menu-seta { font-size: 10px; opacity: 0.7; }

/* Linha do grupo destacada quando o flyout esta aberto (faixa do legado). */
.menu-grupo-flyout:hover > .menu-grupo-botao,
.menu-grupo-flyout.aberto > .menu-grupo-botao {
    background: var(--shell-destaque);
    color: var(--shell-primaria-texto);
}

.menu-grupo-flyout > .menu-suspenso {
    top: -7px;
    left: 100%;
    border-radius: 8px;
}

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

/* Separador entre blocos de itens de um dropdown (o separator do legado). */
.menu-separador {
    height: 1px;
    margin: 6px 0;
    background: var(--shell-borda);
}

/* Tela ainda nao construida: presente no menu (organizacao do legado), com
   aparencia atenuada; o clique avisa "Em breve" (shell.js). */
.menu-item-breve { opacity: 0.55; }

/* Tela sem permissao de acesso (#109): visivel mas inerte (disabled), atenuada e
   com tooltip. Nao escondida, para o usuario saber que a tela existe. */
.menu-item-bloqueado { opacity: 0.4; cursor: not-allowed; }

/* ---------- Corpo: lateral de favoritos + workspace ---------- */
.shell-corpo {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Lateral reservada para favoritos (#89): placeholder discreto ate a fatia
   de atalhos por usuario; os itens usarao o mesmo contrato de menu-item. */
.favoritos-vazio {
    margin: 4px 12px;
    font-size: 12px;
    color: var(--shell-texto-fraco);
}

.menu {
    width: 200px;
    flex-shrink: 0;
    background: var(--shell-superficie);
    border-right: 1px solid var(--shell-borda);
    overflow-y: auto;
    padding: 8px 0;
}

.menu-grupo {
    margin: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--shell-texto-suave);
}

.menu-lista {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.menu-item {
    display: block;
    width: 100%;
    padding: 6px 16px;
    background: none;
    border: 0;
    color: var(--shell-texto);
    cursor: pointer;
    font: inherit;
    text-align: left;
    text-decoration: none;
}

.menu-item:hover {
    background: var(--shell-superficie-2);
    color: var(--shell-destaque);
}

/* ---------- Workspace: tiling automatico de janelas ---------- */
.workspace {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.workspace-vazio {
    color: var(--shell-texto-fraco);
    padding: 32px 24px;
    text-align: center;
}

.workspace-paineis {
    display: flex;
    flex: 1;
    min-height: 0;
    min-width: 0;
    margin: 10px;
    position: relative;
}

/* ---------- Tiling em arvore (estilo sway): splits + divisorias ----------
   O shell.js renderiza a arvore de layout como flex aninhado: split-h poe os
   filhos lado a lado, split-v empilha. As proporcoes viram flex-grow inline;
   as divisorias entre filhos sao os handles de resize (Pointer Events). */
.split {
    display: flex;
    min-width: 0;
    min-height: 0;
}

.split-h { flex-direction: row; }
.split-v { flex-direction: column; }

.divisor {
    flex: 0 0 6px;
    align-self: stretch;
    background: transparent;
    border-radius: 3px;
    touch-action: none;
}

.split-h > .divisor { cursor: col-resize; }
.split-v > .divisor { cursor: row-resize; }

.divisor:hover,
.divisor.redimensionando { background: var(--shell-borda-forte); }

/* Janela: chrome com barra de titulo; o corpo e o painel de conteudo da tela.
   position: relative ancora a zona de drop do drag. */
.janela {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    position: relative;
    background: var(--shell-superficie);
    border: 1px solid var(--shell-borda-forte);
    border-radius: var(--painel-raio);
    box-shadow: 0 1px 3px rgba(47, 48, 52, 0.08);
    overflow: hidden;
}

/* Zona de drop do drag: metade (esq/dir/topo/baixo) ou miolo (troca) do alvo. */
.zona-drop {
    position: absolute;
    background: rgba(148, 193, 68, 0.25);
    border: 2px dashed var(--shell-acao);
    border-radius: var(--painel-raio);
    pointer-events: none;
    z-index: 5;
}

/* Foco estilo sway: borda destacada na janela ativa. */
.janela.focada {
    border-color: var(--shell-acao-escura);
    box-shadow: 0 0 0 1px var(--shell-acao-escura), 0 2px 8px rgba(47, 48, 52, 0.10);
}

.janela.maximizada {
    position: absolute;
    inset: 0;
    z-index: 10;
}

.janela-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 6px 4px 10px;
    background: var(--shell-superficie-2);
    border-bottom: 1px solid var(--shell-borda);
    color: var(--shell-texto-suave);
    font-size: 12px;
    font-weight: 600;
    user-select: none;
    /* Arrastavel: troca de posicao no tiling (shell.js). */
    cursor: move;
}

/* Feedback do drag: origem esmaecida (o destino mostra a .zona-drop). */
.janela.arrastando { opacity: 0.5; }

.janela.focada .janela-titulo {
    background: var(--shell-destaque);
    color: var(--shell-primaria-texto);
}

.janela-acoes {
    display: inline-flex;
    gap: 2px;
}

.janela-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    background: none;
    border: 0;
    border-radius: var(--controle-raio);
    color: inherit;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
}

.janela-botao:hover { background: rgba(0, 0, 0, 0.10); }

.janela.focada .janela-titulo .janela-botao:hover,
.subtela-titulo .janela-botao:hover { background: rgba(255, 255, 255, 0.18); }

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

.painel-corpo {
    flex: 1;
    overflow: auto;
    /* Exposto como variavel porque o cabecalho grudado da grade precisa cobrir
       exatamente esta faixa (crud.css): quando o painel e quem rola, o topo do
       scrollport fica depois do padding. */
    --painel-padding-topo: 12px;
    padding: var(--painel-padding-topo) 16px;
    /* Cada janela e um container: os campos escalam pela largura DELA
       (tiling com muitas janelas), nao pela largura da pagina. */
    container-type: inline-size;
    /* Largura unica do formulario (#172): capa, abas e secoes compartilham o MESMO
       envelope, entao o cabecalho (capa) e o card das abas alinham pela direita.
       Fonte unica — antes cada zona caia num fallback proprio (860 vs 760) e
       desalinhavam. */
    --form-largura: 860px;
}

/* ---------- Conteudo das telas dentro do painel ---------- */
/* A estrutura visual das telas de cadastro (toolbar, formulario em grade de
   ancoragem, grade de consulta, mensagens, degraus) vive em crud.css. */
.painel-corpo h2 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 650;
}

/* ---------- Subtela: janela modal ancorada na janela-mae ----------
   Overlay com escopo na .janela pai (position:relative): cobre a mae por
   inteiro (inset:0), centraliza a subtela e trava a interacao SO com a mae —
   as demais janelas do tiling seguem vivas. Reaproveita o chrome
   (.janela-titulo/.painel-corpo) sem ser uma .janela do tiling. */
.subtela-overlay {
    position: absolute;
    inset: 0;
    /* Acima do painel e da .zona-drop (z-index 5) da propria janela. */
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(31, 41, 51, 0.40);
}

.subtela {
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    max-height: 100%;
    max-width: 100%;
    background: var(--shell-superficie);
    border: 1px solid var(--shell-borda-forte);
    border-radius: var(--painel-raio);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.30);
    overflow: hidden;
}

/* Subtela que hospeda uma TELA LEGADA tem a largura DELA, nao os 560 do padrao: no
   legado a janela nasce do tamanho do formulario (@FormInfo), e uma janela mais
   estreita que os campos CORTA a direita do formulario.

   O `.painel-corpo` da subtela e um container de scroll (`overflow: auto`), e scroll
   container nao propaga a largura do CONTEUDO para o intrinsic sizing do pai: um
   `max-content` na subtela a colapsava para ~75px em vez de expandi-la.

   O `max-width: 100%` da regra acima continua valendo: em janela-mae estreita a
   subtela encolhe e quem rola e a `.tela-legado-area` la dentro.
   Quem recebe a largura e o PROPRIO painel, em `content-box`: assim o numero do
   @FormInfo e a area util, e o padding e a borda entram por fora. A subtela entao
   usa `max-content` com seguranca — o painel tem largura explicita e propaga.

   O `+ var(--barra-rolagem)` nao e folga arbitraria: o painel rola na vertical, e o
   Chrome DESCONTA a barra da largura declarada, mesmo em content-box. Sem somar de
   volta, a area util fica 15px menor que o formulario e nasce uma barra HORIZONTAL
   num painel que caberia inteiro. Onde a barra e sobreposta (macOS), sobra a folga —
   fundo vazio a direita, invisivel. */
.subtela:has(.tela-legado) { width: max-content; }

.subtela:has(.tela-780) > .painel-corpo {
    box-sizing: content-box;
    width: calc(780px + var(--barra-rolagem, 15px));
}

.subtela:has(.tela-794) > .painel-corpo {
    box-sizing: content-box;
    width: calc(794px + var(--barra-rolagem, 15px));
}

/* Barra de titulo da subtela: destacada (como o modal do legado) e NAO
   arrastavel — a subtela e centrada na mae, nao participa do tiling. */
.subtela > .subtela-titulo {
    cursor: default;
    background: var(--shell-destaque);
    color: var(--shell-primaria-texto);
}

/* ---------- MsgBox: confirmacao modal (#119) ----------
   Substitui o window.confirm nativo. Ancorado na janela ativa (ou subtela) que
   contem a origem, no mesmo molde do .subtela-overlay: cobre so aquele contexto
   e trava so ele. Fica acima da subtela (z 20). Estilo do MsgBox legado. */
.msgbox-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(31, 41, 51, 0.40);
}

/* Sem janela-mae (raro): overlay preso na viewport inteira. */
.msgbox-overlay-fixo { position: fixed; z-index: 200; }

.msgbox {
    display: flex;
    flex-direction: column;
    width: min(400px, 100%);
    background: var(--shell-superficie);
    border: 1px solid var(--shell-borda-forte);
    border-radius: var(--painel-raio);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.30);
    overflow: hidden;
}

.msgbox-titulo {
    padding: 6px 12px;
    background: var(--shell-destaque);
    color: var(--shell-primaria-texto);
    font-size: 12px;
    font-weight: 600;
}

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

.msgbox-corpo {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 18px 16px;
}

.msgbox-icone {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--shell-primaria-texto);
    background: var(--shell-destaque);
}

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

.msgbox-mensagem { margin: 0; }

.msgbox-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 16px 16px;
}

.msgbox-acoes .botao { min-width: 84px; }

/* ---------- Statusbar e toasts ---------- */
.statusbar {
    display: flex;
    gap: 24px;
    padding: 4px 14px;
    background: var(--shell-superficie);
    border-top: 1px solid var(--shell-borda);
    color: var(--shell-texto-suave);
    font-size: 12px;
}

.toasts {
    position: fixed;
    right: 16px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
}

.toast {
    background: var(--shell-texto);
    border-radius: var(--painel-raio);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
    padding: 9px 14px;
}

.toast.erro { background: var(--shell-erro); }
/* Mesmo verde das .mensagem-sucesso do crud.css, para o desfecho ter uma cor so. */
.toast.sucesso { background: var(--shell-sucesso); }

/* ---------- Shell em viewport estreita ----------
   O desktop e o cenario principal; aqui so garantimos que nada quebre:
   topbar compacta, menubar em UMA linha com rolagem horizontal (em vez de
   quebrar em varias linhas comendo o workspace) e lateral de favoritos
   recolhida (e um placeholder ate a fatia de atalhos). */
@media (max-width: 760px) {
    .topbar {
        flex-wrap: wrap;
        gap: 6px 12px;
        padding: 6px 10px;
    }

    .topbar-tenant { flex: 1 1 auto; }
    .topbar-empresa select { max-width: 44vw; }

    .menubar-lista {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .menubar-botao { padding: 8px 10px; white-space: nowrap; }

    .menu.favoritos { display: none; }

    .workspace-paineis { margin: 6px; }

    .statusbar { gap: 12px; }
}