/* ==========================================================================
   Central de RPAs — base: reset, tipografia e a casca do app
   (menu lateral por verbo + topo + área de conteúdo).
   Depende de tokens.css.
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte-texto);
    font-size: var(--fs-base);
    line-height: var(--altura-linha);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01", "cv11";
    /* Palavra longa sem espaço (caminho, comando, e-mail, URL) quebra em vez
       de vazar para fora do cartão ou da tela. */
    overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--e-2);
    font-family: var(--fonte-titulo);
    font-weight: var(--peso-titulo);
    line-height: var(--altura-titulo);
    letter-spacing: -0.015em;
    color: var(--texto);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }

p { margin: 0 0 var(--e-3); }

a {
    color: var(--primaria-texto);
    text-decoration: none;
    text-underline-offset: 3px;
}
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

code, kbd, pre, samp {
    font-family: var(--fonte-mono);
    font-size: 0.9em;
    overflow-wrap: anywhere;
}
pre { white-space: pre-wrap; }

hr {
    border: 0;
    border-top: 1px solid var(--borda);
    margin: var(--e-6) 0;
}

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--primaria-suave); }

:focus-visible {
    outline: 2px solid var(--primaria);
    outline-offset: 2px;
    border-radius: var(--raio-sm);
}

/* Números tabulares em tudo que é métrica */
.num,
td,
.kpi-valor { font-variant-numeric: tabular-nums; }

/* Texto só para leitor de tela */
.so-leitor {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* Pular para o conteúdo (teclado / leitor de tela) */
.pular-conteudo {
    position: absolute;
    left: var(--e-4);
    top: -100px;
    z-index: 100;
    padding: var(--e-2) var(--e-4);
    background: var(--primaria);
    color: var(--sobre-primaria);
    border-radius: var(--raio-md);
    font-weight: var(--peso-forte);
}
.pular-conteudo:focus { top: var(--e-3); text-decoration: none; }

/* ==========================================================================
   Casca do app
   ========================================================================== */
.app {
    display: grid;
    grid-template-columns: var(--largura-menu) minmax(0, 1fr);
    min-height: 100vh;
}

/* O menu fica preso na tela ao rolar a página (pedido de 02-10-2026). Se
   não couber na altura da janela, ganha rolagem própria. */
.app-menu {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Se ainda precisar rolar (janela muito baixa), a roda do mouse e o
       toque funcionam, sem a barra cinza grudada na borda do menu. */
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    padding: var(--e-5) var(--e-3) var(--e-4);
    background: var(--superficie);
    border-right: 1px solid var(--borda);
    z-index: var(--z-menu);
}

.marca {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: 0 var(--e-3) var(--e-4);
    color: var(--texto);
    font-family: var(--fonte-titulo);
    font-weight: var(--peso-titulo);
    font-size: var(--fs-lg);
    letter-spacing: -0.02em;
}
.marca:hover { text-decoration: none; }

.marca-simbolo {
    width: 36px;
    height: 36px;
    flex: none;
    filter: drop-shadow(0 2px 4px rgb(10 124 135 / 0.25));
}
/* Logo da RC4VC por extenso; o símbolo quadrado (o "4") só aparece com o
   menu compacto, onde o logo inteiro não cabe. */
.marca .marca-simbolo { display: none; }
.marca-logo { height: 26px; width: auto; flex: none; }
.marca > span {
    padding-left: var(--e-3);
    border-left: 1px solid var(--borda);
    line-height: 1.1;
    font-size: var(--fs-base);
}

.marca small {
    display: block;
    font-family: var(--fonte-texto);
    font-weight: var(--peso-normal);
    font-size: var(--fs-2xs);
    color: var(--texto-3);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.menu-grupo { margin-top: var(--e-3); }

.menu-grupo-titulo {
    margin: 0 0 var(--e-1);
    padding: 0 var(--e-3);
    font-family: var(--fonte-texto);
    font-size: var(--fs-xs);   /* era 11px em maiúsculas: pequeno demais */
    font-weight: var(--peso-forte);
    color: var(--texto-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-2) var(--e-3);
    border-radius: var(--raio-md);
    color: var(--texto-2);
    font-weight: var(--peso-medio);
    font-size: var(--fs-sm);
    transition: background var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva);
}
.menu-item i { font-size: 1.05rem; width: 1.25rem; text-align: center; }
.menu-item:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; }
.menu-item[aria-current="page"] {
    background: var(--primaria-suave);
    color: var(--primaria-texto);
}
.menu-item[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primaria);
}
.menu-item .contador {
    margin-left: auto;
    min-width: 1.5rem;
    padding: 0 var(--e-2);
    border-radius: var(--raio-pilula);
    background: var(--falha);
    color: var(--sobre-estado);
    font-size: var(--fs-2xs);
    font-weight: var(--peso-forte);
    line-height: 1.35rem;
    text-align: center;
}

.menu-rodape {
    /* Logo abaixo do último grupo (Manual), não empurrado para o fim da página. */
    margin-top: var(--e-4);
    padding-top: var(--e-4);
    border-top: 1px solid var(--borda);
    display: grid;
    /* Perfil e "Sair" na mesma linha: com o "Sair" embaixo, ele era o
       primeiro a ficar fora da tela. */
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--e-1);
}
/* "Sair" só com o ícone (o nome fica no aria-label/title). */
.menu-rodape [data-sair] { font-size: 0; gap: 0; padding: var(--e-2); }
.menu-rodape [data-sair] i { font-size: 1.05rem; }

.usuario-atual {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-2) var(--e-3);
    font-size: var(--fs-sm);
    color: var(--texto-2);
    min-width: 0;
}
a.usuario-atual { border-radius: var(--raio-md); color: inherit; }
a.usuario-atual:hover,
a.usuario-atual[aria-current="page"] { background: var(--superficie-2); text-decoration: none; }
.usuario-atual .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.usuario-atual .avatar {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--acento-suave);
    color: var(--acento-texto);
    font-weight: var(--peso-forte);
    font-size: var(--fs-sm);
}
/* Online: bolinha verde no canto da foto enquanto o sinal de presença é
   aceito (casca.js; some se a sessão cair). Sem overflow:hidden no avatar
   para a bolinha não ser cortada; a foto já é redonda pelo próprio img. */
.usuario-atual .avatar[data-online="sim"]::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 2px var(--superficie);
}
.usuario-atual .nome { color: var(--texto); font-weight: var(--peso-medio); }
.usuario-atual .papel { font-size: var(--fs-xs); color: var(--texto-3); }
.usuario-atual > div { min-width: 0; }
.usuario-atual .nome,
.usuario-atual .papel { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Área principal */
.app-principal { min-width: 0; display: flex; flex-direction: column; }

.app-topo {
    position: sticky;
    top: 0;
    z-index: var(--z-topo);
    display: flex;
    align-items: center;
    gap: var(--e-3);
    height: var(--altura-topo);
    padding: 0 var(--e-8);
    background: color-mix(in srgb, var(--fundo) 82%, transparent);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid color-mix(in srgb, var(--borda) 70%, transparent);
}

.app-topo .migalhas {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--fs-sm);
    color: var(--texto-3);
    min-width: 0;
}
.app-topo .migalhas a { color: var(--texto-3); }
.app-topo .migalha-grupo { white-space: nowrap; }
.app-topo .migalha-sep { font-size: 0.7em; color: var(--texto-3); }
/* Celular: o topo não cabe tudo (o "Painel ao vivo" cobria o título). Fica
   só o essencial: título, Painel ao vivo só com ícone, Ajuda, sino, tema. */
@media (max-width: 640px) {
    .app-topo .migalha-grupo, .app-topo .migalha-sep,
    .app-topo #ultima-atualizacao, .app-topo [data-copiar-link], .app-topo .rotulo-longo { display: none; }
    .app-topo .botao-sem-login { width: 38px; padding: 0; }
    .app-topo .acoes-topo { gap: 0; }
}
.app-topo .migalhas strong { color: var(--texto); font-weight: var(--peso-medio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-topo .acoes-topo { margin-left: auto; display: flex; align-items: center; gap: var(--e-2); }

.botao-menu { margin-left: calc(var(--e-2) * -1); }

.app-conteudo {
    width: 100%;
    max-width: var(--largura-conteudo);
    margin: 0 auto;
    padding: var(--e-8) var(--e-8) var(--e-16);
}

.fundo-menu { display: none; }

/* --- Menu só com ícones (data-menu="compacto" no <html>): escolha da
   pessoa pelo botão do topo (ou tecla "["), guardada no navegador; sem
   escolha, vale em tela estreita ou zoom alto (Ctrl +). O nome do item
   aparece ao lado ao passar o mouse ou focar pelo teclado. A regra que
   decide o modo está no <head> do layout.html e em casca.js. */
@media (min-width: 641px) {
    .app { transition: grid-template-columns var(--dur-media) var(--curva); }

    html[data-menu="compacto"] .app { grid-template-columns: var(--largura-menu-compacto) minmax(0, 1fr); }

    /* Sem rolagem própria: ela cortaria a etiqueta flutuante do item. */
    html[data-menu="compacto"] .app-menu { padding: var(--e-4) var(--e-2); gap: var(--e-1); overflow: visible; }
    html[data-menu="compacto"] .marca { justify-content: center; padding: 0 0 var(--e-3); }
    html[data-menu="compacto"] .marca > span { display: none; }
    html[data-menu="compacto"] .marca-logo { display: none; }
    html[data-menu="compacto"] .marca .marca-simbolo { display: block; }

    html[data-menu="compacto"] .menu-grupo { margin-top: var(--e-2); }
    html[data-menu="compacto"] .menu-grupo + .menu-grupo { padding-top: var(--e-2); border-top: 1px solid var(--borda); }
    html[data-menu="compacto"] .menu-grupo-titulo { display: none; }

    html[data-menu="compacto"] .menu-item { justify-content: center; padding: var(--e-2); }
    html[data-menu="compacto"] .menu-item[aria-current="page"]::before { left: -8px; }
    /* Nome do item: etiqueta flutuante à direita do ícone. */
    html[data-menu="compacto"] .menu-item > span:not(.contador) {
        position: absolute;
        left: calc(100% + var(--e-3));
        top: 50%;
        transform: translate(-4px, -50%);
        padding: var(--e-1) var(--e-3);
        border-radius: var(--raio-md);
        background: var(--texto);
        color: var(--fundo);
        font-size: var(--fs-xs);
        white-space: nowrap;
        box-shadow: var(--sombra-2);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva);
    }
    html[data-menu="compacto"] .menu-item:hover > span:not(.contador),
    html[data-menu="compacto"] .menu-item:focus-visible > span:not(.contador) {
        opacity: 1;
        transform: translate(0, -50%);
    }
    html[data-menu="compacto"] .menu-item .contador {
        position: absolute;
        top: 2px;
        right: 2px;
        min-width: 1.1rem;
        padding: 0 3px;
        line-height: 1.1rem;
    }

    html[data-menu="compacto"] .menu-rodape { padding-top: var(--e-3); justify-items: center; grid-template-columns: minmax(0, 1fr); }
    html[data-menu="compacto"] .usuario-atual { justify-content: center; padding: var(--e-2); }
    html[data-menu="compacto"] .usuario-atual > div { display: none; }
    html[data-menu="compacto"] .menu-rodape [data-sair] { font-size: 0; gap: 0; padding: var(--e-2); }
    html[data-menu="compacto"] .menu-rodape [data-sair] i { font-size: 1.05rem; }
}

/* Tela estreita: margens menores, com qualquer modo de menu. */
@media (max-width: 1100px) and (min-width: 641px) {
    .app-topo { padding: 0 var(--e-5); }
    .app-conteudo { padding: var(--e-6) var(--e-5) var(--e-12); }
}

/* --- Menu mais justo: notebook / zoom do Windows (125%, 150%) e celular.
   Com o espaçamento normal o menu completo pede ~900px de altura; abaixo
   disso aparecia a barra de rolagem e o perfil/Sair ficavam cortados. */
@media (max-height: 900px), (max-width: 640px) {
    .app-menu { gap: var(--e-1); padding: var(--e-4) var(--e-2) var(--e-3); }
    .marca { padding: 0 var(--e-2) var(--e-3); }
    .marca-logo { height: 22px; }
    .menu-grupo { margin-top: var(--e-2); }
    .menu-grupo-titulo { padding: 0 var(--e-2); }
    .menu-item { padding: 7px var(--e-2); }
    .menu-item[aria-current="page"]::before { left: -8px; }
    .menu-rodape { margin-top: var(--e-3); padding-top: var(--e-3); }
    .usuario-atual { padding: var(--e-2); }
}
@media (max-height: 700px) and (min-width: 641px) {
    .menu-grupo { margin-top: var(--e-1); }
    .menu-item { padding-top: 5px; padding-bottom: 5px; }
}

/* --- Celular: o menu vira gaveta */
@media (max-width: 640px) {
    .app { grid-template-columns: minmax(0, 1fr); }

    .app-menu {
        position: fixed;
        inset: 0 auto 0 0;
        /* Mesma largura do menu do computador: a gaveta não cobre quase a
           tela inteira e sobra uma faixa do fundo para tocar e fechar. */
        width: min(80vw, var(--largura-menu));
        overflow-y: auto;
        padding-bottom: max(var(--e-3), env(safe-area-inset-bottom));
        transform: translateX(-102%);
        transition: transform var(--dur-media) var(--curva);
        box-shadow: var(--sombra-3);
    }
    .app[data-menu-aberto="true"] .app-menu { transform: none; }
    .app[data-menu-aberto="true"] .fundo-menu {
        display: block;
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-menu) - 1);
        background: var(--sobreposicao);
    }

    .app-topo { padding: 0 var(--e-4); }
    .app-conteudo { padding: var(--e-5) var(--e-4) var(--e-12); }
}