html, body {
    font-family: Inter, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

/* Azul primário único do app (#2f6fe0 — branco em cima passa de 4.5:1; hover #2458c5). */
.btn-primary {
    color: #fff;
    background-color: #2f6fe0;
    border-color: #2458c5;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #2458c5;
    border-color: #2458c5;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ── Tela de carregamento: bolinha girando + "Carregando" ── */

.tela-carregando {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    background: #ffffff;
}

.spinner-carregando {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 4px solid #e4e8f0;
    border-top-color: #2f6fe0;
    animation: girar-spinner 0.8s linear infinite;
}

.texto-carregando {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #5b6478;
}

@keyframes girar-spinner {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .spinner-carregando { animation-duration: 2s; }
}

/* ── Tela de login: cartão único centralizado, sem menu ── */

.login-wrap {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;          /* celular: altura real visível (sem a barra do navegador) */
    display: flex;
    padding: 1.5rem 16px;
    overflow-x: hidden;
    isolation: isolate;
    /* Céu de dia: o mesmo do hero da tela Início (sol no canto, azul que clareia no horizonte) */
    background:
        radial-gradient(60% 55% at 88% -12%, rgba(255, 226, 150, .55), transparent 60%),
        linear-gradient(180deg, var(--dia-1) 0%, var(--dia-2) 55%, var(--dia-3) 100%);
}

/* ── CÉU DE DIA (pedido do PMO, out/2026): substitui o céu estrelado no menu, no login e no
   Início. Calmo de propósito: nuvens que andam devagar e morros suaves — nada chamativo. ── */
:root {
    --dia-1: #1f5fbf;   /* topo: azul de céu limpo — texto branco com contraste >= 4.5:1 */
    --dia-2: #3b82d9;
    --dia-3: #8ec5f0;   /* horizonte, mais claro */
}
/* Nuvem: 4 elipses brancas sobrepostas num só elemento (leve: sem imagem). */
.nuvem {
    position: absolute;
    width: var(--w, 220px);
    aspect-ratio: 3.4;
    opacity: var(--o, .7);
    pointer-events: none;
    background:
        radial-gradient(ellipse 28% 46% at 28% 64%, #fff 55%, transparent 72%),
        radial-gradient(ellipse 26% 62% at 50% 46%, #fff 55%, transparent 72%),
        radial-gradient(ellipse 24% 44% at 72% 62%, #fff 55%, transparent 72%),
        radial-gradient(ellipse 48% 28% at 50% 78%, #fff 55%, transparent 72%);
    filter: blur(1.5px);
    animation: nuvemVai var(--t, 140s) linear infinite alternate;
}
@keyframes nuvemVai { to { transform: translateX(var(--d, 140px)); } }
/* Morros no horizonte: um SVG inline (2 camadas, cores apagadas). */
.morros {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: var(--h, 90px);
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70C200 30 380 40 560 62S900 95 1100 60 1350 35 1440 50V120H0Z' fill='%23d6ecfa' fill-opacity='.55'/%3E%3Cpath d='M0 95C180 70 340 72 520 88S860 112 1060 90 1320 74 1440 86V120H0Z' fill='%23a8d5a6' fill-opacity='.8'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
@media (prefers-reduced-motion: reduce) { .nuvem { animation: none; } }

/* fixed: o céu cobre a tela inteira mesmo quando a tela é baixa e o cartão rola */
.login-espaco { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

/* Bolinha SETPAR: grande, branca semitransparente, no CENTRO exato da tela (o cartão fica
   centralizado por cima). Flutua e gira bem devagar — parece um planeta no espaço. */
.lg-bolinha {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(86vmin, 640px);
    aspect-ratio: 1;
    background: url('../images/logo_bolinha_branca.webp') center / contain no-repeat;
    opacity: .3;   /* fica visível através do vidro do cartão */
    filter: drop-shadow(0 0 40px rgba(140, 190, 255, .45));
    transform: translate(-50%, -50%);
    animation: lgBolinha 14s ease-in-out infinite alternate;
}
@keyframes lgBolinha {
    from { transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
    to   { transform: translate(-50%, -52%) rotate(4deg) scale(1.03); }
}

.login-card {
    position: relative;
    margin: auto;                /* centro exato em qualquer tela; se não couber, rola sem cortar o topo */
    width: 100%;
    max-width: 400px;
    /* GLASSMORPHISM: vidro bem transparente com desfoque forte — a bolinha e o céu aparecem
       por trás, desfocados. Um leve tom azul-escuro no vidro garante o contraste do texto
       branco, seja o que for que estiver passando atrás (bolinha, estrela, aurora). */
    color: #fff;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)),
        rgba(12, 40, 100, .34);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    backdrop-filter: blur(18px) saturate(1.35);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 22px;
    padding: 2.4rem 2.2rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),       /* brilho na borda de cima (vidro) */
        0 30px 80px -24px rgba(0, 0, 0, .6);
}

/* ── Textos e controles sobre o vidro: tudo claro, com contraste AA ── */
.login-card .login-sub      { color: rgba(255, 255, 255, .78); }
.login-card .login-titulo   { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.login-card .login-conta-btn,
.login-card .login-outra    { color: #fff; }
.login-card .login-conta-txt small { color: rgba(255, 255, 255, .74); }
.login-card .login-conta-btn:hover:not(:disabled),
.login-card .login-outra:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.login-card .login-avatar   { background: rgba(255, 255, 255, .92); color: #14213d; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.login-card .login-avatar.outra { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: none; }
.login-card .login-lixeira  { color: rgba(255, 255, 255, .78); }
.login-card .login-lixeira:hover:not(:disabled) { background: rgba(240, 86, 122, .22); color: #ffd0da; }
.login-card .login-nota     { color: rgba(255, 255, 255, .74); }
.login-card .login-nota strong { color: #fff; }
.login-card .login-voltar   { color: #a9c8ff; }

/* Campo de e-mail em vidro (texto branco) */
.login-card .login-campo-flutuante .form-control {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .32);
}
.login-card .login-campo-flutuante .form-control:focus {
    background: rgba(255, 255, 255, .16);
    border-color: #8fb6ff;
    box-shadow: 0 0 0 .22rem rgba(120, 165, 255, .28);
}
.login-card .login-campo-flutuante label { color: rgba(255, 255, 255, .74); }
/* Autopreenchimento do Chrome pinta o campo de branco/amarelo: mantém o vidro e o texto branco */
.login-card .login-campo-flutuante .form-control:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px rgba(30, 45, 95, .95) inset;
    caret-color: #fff;
}

/* Erro sobre o vidro: vermelho translúcido, texto claro legível */
.login-card .login-erro {
    background: rgba(240, 86, 122, .2);
    border-color: rgba(255, 150, 170, .5);
    color: #ffe1e7;
}

/* Sem suporte a backdrop-filter (navegador antigo): vidro mais opaco para manter a leitura */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .login-card { background: rgba(16, 28, 66, .92); }
}

.login-brand {
    margin-bottom: 1.6rem;
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Logo horizontal azul da SETPAR, logo abaixo do selo da Engenharia */
.login-marca {
    width: 220px;
    max-width: 75%;
    height: auto;
    display: block;
    margin: .2rem 0 .4rem;
}

.login-sub {
    font-size: .9rem;
    font-weight: 600;
    color: #6b7488;
    margin: 0;
}

.nav-logo {
    height: 26px;
    width: auto;
    /* logo é escuro; inverte para branco no menu escuro */
    filter: brightness(0) invert(1);
}

.login-titulo {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2b3245;
    text-align: center;
    margin: 0 0 1.2rem;
}

/* Reserva a altura enquanto lê a conta lembrada (evita "pulo" do layout). */
.login-reserva { height: 104px; }

/* ── Conta lembrada neste aparelho (estilo "Sienge ID") ── */
.login-conta {
    display: flex;
    align-items: center;
    gap: .25rem;
    border-radius: 12px;
}

.login-conta-btn, .login-outra {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 56px;              /* alvo de toque confortável */
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .45rem .6rem;
    background: none;
    border: none;
    border-radius: 12px;
    text-align: left;
    color: #2b3245;
    cursor: pointer;
    transition: background-color .15s;
}

    .login-conta-btn:hover:not(:disabled), .login-outra:hover:not(:disabled) { background: #f3f5f9; }
    .login-conta-btn:focus-visible, .login-outra:focus-visible, .login-lixeira:focus-visible {
        outline: 3px solid #4f7df9; outline-offset: 2px;
    }
    .login-conta-btn:disabled, .login-outra:disabled { cursor: progress; opacity: .75; }

.login-conta-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .login-conta-txt strong, .login-conta-txt small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;       /* e-mail longo não estoura no celular */
    }
    .login-conta-txt strong { font-size: .95rem; }
    .login-conta-txt small { font-size: .8rem; color: #6b7488; }

.login-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #14213d;
    color: #fff;
    font-weight: 700;
}

    .login-avatar-foto { object-fit: cover; padding: 0; }
    .login-avatar.outra { background: #c4c8d0; }

.login-outra { font-weight: 600; font-size: .92rem; margin-top: .25rem; }

.login-lixeira {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 10px;
    color: #6b7488;
    cursor: pointer;
}

    .login-lixeira:hover:not(:disabled) { background: #fdecec; color: #a12626; }

/* ── Campo com rótulo flutuante + CONTINUAR ── */
.login-campo-flutuante {
    position: relative;
    margin-bottom: 1rem;
}

    .login-campo-flutuante .form-control {
        height: 50px;
        border-radius: 9px;
        padding: 1.15rem .85rem .35rem;
        font-size: 1rem;
    }

    .login-campo-flutuante label {
        position: absolute;
        left: .9rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: .95rem;
        color: #6b7488;
        pointer-events: none;
        transition: top .15s, font-size .15s;
    }

    .login-campo-flutuante .form-control:focus + label,
    .login-campo-flutuante .form-control:not(:placeholder-shown) + label {
        top: .95rem;
        font-size: .72rem;
    }

.login-continuar {
    width: 100%;
    min-height: 46px;
    border-radius: 9px;
    font-weight: 700;
    letter-spacing: .04em;
}

.login-voltar {
    display: block;
    width: 100%;
    margin-top: .9rem;
    min-height: 40px;
    background: none;
    border: none;
    color: #4f7df9;
    font-size: .88rem;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .login-voltar:hover { text-decoration: underline; }

.login-nota {
    font-size: .8rem;
    color: #6b7488;
    margin: 1.2rem 0 0;
    text-align: center;
}

.login-erro {
    background: #fdecec;
    border: 1px solid #f5c2c2;
    color: #a12626;
    border-radius: 9px;
    padding: .55rem .75rem;
    font-size: .88rem;
    margin-bottom: .9rem;
}

/* Celular: o logo de fundo vai para trás do cartão (centro). */
@media (max-width: 560px) {
    .login-card { padding: 1.9rem 1.3rem 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lg-bolinha { animation: none; }
}

/* ── Modal "Liberar acesso" estilo Power Apps ── */
.pa-overlay {
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(20, 25, 40, .45);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.pa-modal {
    width: 100%; max-width: 470px; background: #fff;
    border-radius: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.35);
    display: flex; flex-direction: column; max-height: 88vh;
}
.pa-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #eceef3;
}
.pa-modal-title { font-size: .98rem; color: #3f4a63; }
.pa-modal-body { padding: 16px 18px; overflow-y: auto; }
.pa-modal-foot {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 12px 18px; border-top: 1px solid #eceef3;
}

.pa-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; color: #626b80; cursor: pointer; padding: 4px; border-radius: 6px;
}
.pa-icon-btn:hover { background: #f1f3f8; color: #3f4a63; }
.pa-icon-btn.sm { padding: 2px; }

/* Linha de adicionar (input + ícone pessoa + seletor de permissão) */
.pa-add {
    position: relative;
    display: flex; align-items: center; gap: .5rem;
    border: 1px solid #cfd6e4; border-radius: 8px; padding: 3px 6px 3px 10px;
}
.pa-add:focus-within { border-color: #1b6ec2; box-shadow: 0 0 0 3px rgba(27,110,194,.12); }
.pa-add-lead { display: inline-flex; color: #626b80; }
.pa-add-input { flex: 1; border: none; outline: none; padding: 7px 2px; font-size: .92rem; background: transparent; }
.pa-perm-toggle {
    display: inline-flex; align-items: center; gap: .3rem;
    background: none; border: none; border-left: 1px solid #e3e8f0;
    color: #3f4a63; font-size: .82rem; padding: 4px 6px 4px 10px; cursor: pointer; white-space: nowrap;
}
.pa-perm-toggle:hover { color: #1b6ec2; }

.pa-perm-menu {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 20;
    width: 300px; background: #fff; border: 1px solid #e3e8f0; border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 4px;
}
.pa-perm-item {
    display: flex; align-items: flex-start; gap: .5rem; width: 100%;
    background: none; border: none; text-align: left; padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
.pa-perm-item:hover { background: #f4f6fb; }
.pa-perm-check { width: 16px; flex: 0 0 16px; color: #1b6ec2; margin-top: 2px; }
.pa-perm-txt { display: flex; flex-direction: column; line-height: 1.25; }
.pa-perm-nome { font-weight: 600; color: #16213e; font-size: .9rem; }
.pa-perm-desc { font-size: .78rem; color: #626b80; }

/* Autocomplete */
.pa-drop {
    margin-top: 4px; border: 1px solid #eceef3; border-radius: 8px;
    max-height: 230px; overflow-y: auto; box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.pa-drop-vazio { padding: 10px 12px; font-size: .85rem; color: #626b80; }
.pa-drop-item {
    display: flex; align-items: center; gap: .6rem; width: 100%;
    background: none; border: none; text-align: left;
    padding: 8px 10px; cursor: pointer; font-size: .9rem;
}
.pa-drop-item:hover { background: #f4f6fb; }
.pa-drop-item.sel { opacity: .7; }
.pa-drop-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.pa-drop-nome { font-weight: 600; color: #16213e; }
.pa-drop-sub { font-size: .78rem; color: #626b80; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-drop-sel { display: inline-flex; align-items: center; gap: .2rem; font-size: .75rem; color: #1c7d43; font-weight: 600; }

.pa-avatar {
    width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
    background: #dfe5f5; color: #4f5b86; font-size: .75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.pa-avatar.sm { width: 24px; height: 24px; flex-basis: 24px; font-size: .75rem; }

/* Selecionados: até 2 colunas */
.pa-sel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; margin-top: .7rem; }
.pa-sel-item {
    display: flex; align-items: center; gap: .4rem; min-width: 0;
    background: #eef1f8; border: 1px solid #dfe5f1; border-radius: 8px; padding: .25rem .35rem;
}
.pa-sel-nome { flex: 1; min-width: 0; font-size: .82rem; color: #3f4a63; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .pa-sel-grid { grid-template-columns: 1fr; } }

.pa-lista-titulo { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #626b80; margin: 1.2rem 0 .5rem; }
.pa-lista { display: flex; flex-direction: column; }
.pa-lista-row { display: flex; align-items: center; gap: .6rem; padding: 7px 0; border-bottom: 1px solid #f2f4f8; }
.pa-lista-text { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pa-nivel-sm { border: 1px solid #cfd6e4; border-radius: 6px; padding: 4px 6px; font-size: .8rem; color: #3f4a63; }
.pa-mini { border: 1px solid #cfd6e4; background: #fff; border-radius: 6px; padding: 3px 8px; font-size: .78rem; cursor: pointer; }
.pa-mini.danger { color: #a12626; border-color: #f0c4c4; }
.pa-mini.ok { color: #1c7d43; border-color: #bfe3cb; }

/* Marca + botões do rodapé (estilo mock #29) */
.pa-brand { color: #1b4b91; font-weight: 800; }
.pa-modal.wide { max-width: 520px; }
.pa-foot-split { justify-content: space-between; }
.pa-ghost-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    background: none; border: none; color: #3f4a63; font-size: .88rem; font-weight: 600; cursor: pointer; padding: 6px 4px;
}
.pa-ghost-btn:hover { color: #1b4b91; }
.pa-primary-btn {
    background: #2f6fe0; color: #fff; border: none; border-radius: 8px;
    padding: 9px 20px; font-weight: 600; font-size: .9rem; cursor: pointer;
}
.pa-primary-btn:hover:not(:disabled) { background: #2458c5; }
.pa-primary-btn:disabled { opacity: .5; cursor: default; }

/* Abas do "Gerenciar acesso" */
.pa-tabs { display: flex; gap: 1.4rem; border-bottom: 1px solid #eceef3; margin-bottom: .9rem; }
.pa-tab {
    background: none; border: none; padding: 4px 2px 10px; cursor: pointer;
    font-size: .88rem; color: #6b7488; border-bottom: 2px solid transparent; margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: .45rem;
}
.pa-tab.on { color: #1b4b91; border-bottom-color: #1b4b91; font-weight: 600; }
.pa-badge { background: #eef1f8; color: #4f5b86; border-radius: 999px; padding: 0 .45rem; font-size: .75rem; font-weight: 700; }
.pa-search-row { margin-bottom: .7rem; }
.pa-lista-scroll { max-height: 46vh; overflow-y: auto; }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===================== Sidebar dupla (favoritos + menu) ===================== */
:root {
    --nav-1: #163a86;      /* azul escuro (topo) */
    --nav-2: #0f2a63;      /* azul escuro (base) */
    --nav-accent: #4285f4; /* azul das letras "Engenharia" */
    --nav-txt: rgba(255, 255, 255, .82);
    --nav-txt-soft: rgba(255, 255, 255, .68); /* >=4.5:1 sobre o azul escuro do menu */
}

.side {
    display: flex;
    position: sticky;
    top: 0;
    height: 100vh;
    flex-shrink: 0;
    z-index: 1040;
    /* Céu de dia: começa no mesmo azul do topo do hero do Início (peça só) e escurece um pouco
       para baixo, para o texto branco do menu continuar legível. */
    background:
        radial-gradient(90% 30% at 0% 0%, rgba(255, 255, 255, .12), transparent 70%),
        linear-gradient(180deg, var(--dia-1) 0%, #1b55ad 55%, #174a98 100%);
}

/* Céu do menu (nuvens discretas do céu de dia) atrás do conteúdo */
.side-ceu { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.side > .rail, .side > .menu { position: relative; z-index: 1; }

/* ----- Trilho de favoritos ----- */
.rail {
    width: 66px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, .16);   /* o céu passa por trás; leve sombra separa do painel */
    border-right: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0 16px;
    gap: 10px;
}

.rail-marca {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform .15s ease;
}
.rail-marca img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* bolinha flutuando, sem fundo */
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .28));
}
.rail-marca:hover { transform: translateY(-1px) scale(1.04); }

.rail-toggle {
    width: 38px;
    height: 34px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, .66);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.rail-toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.rail-favs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex: 1;
    width: 100%;
    overflow-y: auto;
}

.rail-fav {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .07);
    text-decoration: none;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.rail-fav:hover { background: rgba(255, 255, 255, .16); color: #fff; transform: translateY(-1px); }
.rail-fav.active { color: #fff; background: var(--nav-accent); }

.rail-vazio {
    color: rgba(255, 255, 255, .6);
    margin-top: 6px;
}

.rail-avatar {
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .22);   /* anel claro em volta da foto */
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .02em;
}

/* ----- Painel do menu ----- */
.menu {
    width: 286px;
    flex-shrink: 0;
    background: transparent;          /* o céu do .side aparece contínuo */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width .22s ease, opacity .18s ease;
}
.side.recolhido .menu {
    width: 0;
    opacity: 0;
    pointer-events: none;
}

.menu-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 18px 14px;
}
.menu-logo {
    height: 30px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    display: block;
}
.menu-acao {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .68);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.menu-acao:hover, .menu-acao.active { background: rgba(255, 255, 255, .12); color: #fff; }

.menu-lista {
    flex: 1;
    overflow-y: auto;
    padding: 4px 12px 12px;
}
.menu-lista::-webkit-scrollbar { width: 6px; }
.menu-lista::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 10px; }

.menu-secao {
    color: var(--nav-txt-soft);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 16px 10px 6px;
    white-space: nowrap;
}

.menu-linha {
    position: relative;
    display: flex;
    align-items: center;
}

.menu-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--nav-txt);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.menu-item:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.menu-item .menu-ic { display: flex; color: rgba(255, 255, 255, .58); transition: color .15s ease; flex-shrink: 0; }
.menu-item:hover .menu-ic { color: #fff; }
.menu-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.menu-item.active {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}
.menu-item.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--nav-accent);
}
.menu-item.active .menu-ic { color: var(--nav-accent); }

/* ── Ícones 3D (Fluent 3D, sem fundo): volume próprio + sombra suave para "descolar" do céu do menu ── */
.menu-ic3d { width: 26px; height: 26px; flex-shrink: 0; object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(5, 20, 60, .35)); transition: transform .15s ease; }
.menu-item:hover .menu-ic3d, .rail-fav:hover .menu-ic3d, .menu-acao:hover .menu-ic3d { transform: translateY(-1px) scale(1.08); }
.menu-item.active .menu-ic3d { transform: scale(1.06); filter: drop-shadow(0 0 6px rgba(255, 255, 255, .45)) drop-shadow(0 2px 3px rgba(5, 20, 60, .35)); }
.rail-fav .menu-ic3d { width: 28px; height: 28px; }
.menu-acao .menu-ic3d { width: 24px; height: 24px; }

/* Botão de recolher os subitens (seta ▸/▾ ao lado do item) */
.menu-filhos-tg { border: none; background: transparent; color: rgba(255, 255, 255, .6); width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s; }
.menu-filhos-tg svg { width: 14px; height: 14px; transition: transform .2s ease; }
.menu-filhos-tg.on svg { transform: rotate(90deg); }
.menu-filhos-tg:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ── Cartão da conta (clique na foto) ── */
.conta-fundo { position: fixed; inset: 0; z-index: 1190; }
.conta-pop {
    position: fixed; left: 74px; bottom: 14px; z-index: 1200; width: 290px; max-width: calc(100vw - 90px);
    background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 18px 50px rgba(15, 30, 70, .28), 0 2px 8px rgba(15, 30, 70, .12);
    animation: contaIn .18s cubic-bezier(.16, 1, .3, 1) both; transform-origin: bottom left;
}
@keyframes contaIn { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
.conta-topo { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; border-bottom: 1px solid #eef0f5; margin-bottom: 6px; }
.conta-id { display: flex; flex-direction: column; min-width: 0; }
.conta-id strong { color: #1f2a44; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conta-id span { color: #667085; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conta-id small { color: #8a94a6; font-size: .74rem; margin-top: 1px; }
.conta-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0 10px; border: none; background: transparent;
    border-radius: 9px; color: #2b3147; font-size: .88rem; font-weight: 600; text-decoration: none; cursor: pointer; text-align: left; }
.conta-item svg { color: #5a6178; flex-shrink: 0; }
.conta-item:hover { background: #f2f5fb; }
.conta-item.sair { color: #d63a54; }
.conta-item.sair svg { color: #d63a54; }
.conta-item.sair:hover { background: #fdecef; }

/* Toque (celular/tablet): alvos de no mínimo 40–44px e a estrela de favorito sempre visível
   (no toque não existe "passar o mouse"). */
@media (pointer: coarse) {
    .menu-item { min-height: 44px; }
    .menu-filho { min-height: 42px; }
    .menu-filhos-tg { width: 40px; height: 40px; }
    .menu-estrela { color: rgba(255, 255, 255, .32); min-width: 40px; min-height: 40px; justify-content: center; }
}
/* Quem pede menos animação no sistema não vê ícones pulando nem o cartão deslizando. */
@media (prefers-reduced-motion: reduce) {
    .menu-ic3d, .conta-pop, .menu-filhos-tg svg { transition: none; animation: none; }
    .menu-item:hover .menu-ic3d, .rail-fav:hover .menu-ic3d { transform: none; }
}

/* Subitens (ex.: PMO por tipo) — linha fina à esquerda, recuados sob o item pai */
.menu-filhos { display: flex; flex-direction: column; margin: 0 0 4px 30px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .18); }
.menu-filho {
    display: flex; align-items: center; min-height: 36px; padding: 6px 10px; border-radius: 8px;
    color: rgba(255, 255, 255, .72); font-size: .86rem; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background .15s ease, color .15s ease;
}
.menu-filhos .menu-filho { flex: 1; min-width: 0; }
.menu-filho:hover { background: rgba(255, 255, 255, .09); color: #fff; }
/* Item pai (só abre/fecha os subitens): botão com cara de item do menu + seta à direita */
.menu-pai { border: none; background: transparent; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.menu-pai-ch { margin-left: auto; display: flex; color: rgba(255, 255, 255, .6); }
.menu-pai-ch svg { width: 14px; height: 14px; transition: transform .2s ease; }
.menu-pai-ch.on svg { transform: rotate(90deg); }
.menu-filho.active { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }

.menu-estrela {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, .0);
    padding: 4px;
    margin-right: 2px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color .15s ease, background .15s ease;
}
.menu-linha:hover .menu-estrela { color: rgba(255, 255, 255, .4); }
.menu-estrela:hover { color: var(--nav-accent) !important; background: rgba(255, 255, 255, .1); }
.menu-estrela.on { color: var(--nav-accent); }

.menu-rodape {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.menu-user {
    color: rgba(255, 255, 255, .75);
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-sair {
    align-self: flex-start;
    padding: .5rem .7rem;
    margin-left: -.7rem;
    min-height: 40px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}
.menu-sair:hover { color: #fff; text-decoration: underline; }

/* ----- Mobile ----- */
.side-hamburguer {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1055;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 11px;
    background: var(--nav-1);
    color: #fff;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
.side-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 45, .5);
    z-index: 1035;
}

@media (max-width: 900px) {
    .side-hamburguer { display: flex; }
    .side {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        transition: transform .22s ease;
    }
    .side.aberto { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
    .side-backdrop { display: block; }

    /* Celular: o ☰ abre o menu COMPLETO de uma vez. O "recolhido" (trilho estreito) é coisa do
       computador — aqui ele obrigava um 2º toque para ver os nomes das telas. Sem largura útil
       no celular, o botão de recolher também sai. */
    .side.aberto .menu { width: min(286px, calc(100vw - 66px - 24px)); opacity: 1; pointer-events: auto; }
    .rail-toggle { display: none; }
}

/* ===================== ComboBox (dropdown com busca) ===================== */
.cbx { width: 100%; position: relative; }
.cbx.cbx-open { z-index: 5; }
.cbx-campo { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; border: 1px solid #dfe3ec; border-radius: 8px; padding: .6rem .7rem; font-size: .9rem; color: #23304d; background: #fff; cursor: pointer; text-align: left; font-family: inherit; }
.cbx-campo:hover { border-color: #c7cede; }
.cbx-campo.aberto { border-color: #2f6fe0; box-shadow: 0 0 0 3px rgba(66,133,244,.14); }
.cbx-ph { color: #667085; }
.cbx-chev { color: #667085; display: flex; flex-shrink: 0; }
.cbx-overlay { position: fixed; inset: 0; z-index: 4; }
/* Painel NO FLUXO: empurra o conteúdo e o container rola — nunca é cortado. */
/* Flutua por cima de tudo (posição calculada no app.js); invisível até ser posicionado */
.cbx-panel { position: fixed; z-index: 1400; visibility: hidden; background: #fff; border: 1px solid #e3e7ef; border-radius: 10px; box-shadow: 0 12px 32px rgba(20,33,61,.14); display: flex; flex-direction: column; overflow: hidden; max-height: 260px; animation: cbxPop .14s ease both; }
.cbx-busca { display: flex; align-items: center; gap: .4rem; padding: .5rem .6rem; border-bottom: 1px solid #eef0f5; flex-shrink: 0; }
.cbx-busca-ic { color: #667085; display: flex; }
.cbx-busca input { border: none; outline: none; font-size: .88rem; width: 100%; background: transparent; }
.cbx-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .25rem; }
.cbx-panel.cbx-pos { visibility: visible; }
.cbx-panel.cbx-cima { box-shadow: 0 -12px 32px rgba(20,33,61,.14); }
.cbx-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; border: none; background: none; text-align: left; font-size: .88rem; color: #3b4257; padding: .5rem .6rem; border-radius: 6px; cursor: pointer; }
.cbx-item:hover, .cbx-item.hl { background: #f2f6ff; }
.cbx-item.hl { outline: 2px solid rgba(66,133,244,.35); outline-offset: -2px; }
.cbx-item.sel { color: #2458c5; font-weight: 600; }
.cbx-check { color: #2458c5; display: flex; }
.cbx-vazio { padding: .7rem .6rem; color: #667085; font-size: .85rem; text-align: center; }
@keyframes cbxPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ═══════════════ Componentes reutilizáveis ═══════════════ */

/* Toggle (switch) */
.sw { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; user-select: none; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw-track { position: relative; width: 40px; height: 22px; background: #cbd3e1; border-radius: 999px; transition: background .18s; flex-shrink: 0; }
.sw-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(20,33,61,.3); transition: transform .18s; }
.sw input:checked + .sw-track { background: #2f6fe0; }
.sw input:checked + .sw-track .sw-thumb { transform: translateX(18px); }
.sw input:focus-visible + .sw-track { box-shadow: 0 0 0 3px rgba(66,133,244,.3); }
.sw-lbl { font-size: .9rem; color: #3b4257; }
.sw-desab { opacity: .55; cursor: not-allowed; }

/* Spinner */
.spin { display: inline-flex; align-items: center; gap: .5rem; color: #6b7488; font-size: .88rem; }
.spin-ic { width: 16px; height: 16px; border: 2px solid #d7deea; border-top-color: #2f6fe0; border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; }
.spin-bloco { width: 100%; justify-content: center; padding: 1.6rem 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Toasts */
.toast-host { position: fixed; right: 1rem; bottom: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; max-width: min(92vw, 380px); }
.toast { display: flex; align-items: center; gap: .55rem; background: #fff; border-radius: 10px; padding: .7rem .8rem; box-shadow: 0 12px 32px rgba(20,33,61,.18); border-left: 4px solid #8a94a6; animation: toastIn .22s cubic-bezier(.16,1,.3,1) both; }
.toast-ic { display: flex; flex-shrink: 0; }
.toast-msg { font-size: .88rem; color: #2b3242; flex: 1; word-break: break-word; }
.toast-x { border: none; background: none; color: #667085; cursor: pointer; display: flex; padding: 2px; border-radius: 6px; }
.toast-x:hover { background: #f0f2f7; color: #5a6178; }
.toast-sucesso { border-left-color: #2e9e5b; } .toast-sucesso .toast-ic { color: #2e9e5b; }
.toast-erro { border-left-color: #e0526b; } .toast-erro .toast-ic { color: #e0526b; }
.toast-info { border-left-color: #2f6fe0; } .toast-info .toast-ic { color: #2f6fe0; }
@keyframes toastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* ═══════════════ Configurações BIM ═══════════════ */
.cfg { padding-bottom: 2rem; animation: rfpIn .35s cubic-bezier(.16,1,.3,1) both; }
.cfg-cabecalho { margin-bottom: 1.1rem; }
.cfg-titulo { font-size: 1.5rem; font-weight: 700; color: #1f2a44; margin: 0; }
.cfg-sub { color: #6b7488; margin: .2rem 0 0; font-size: .92rem; }
.cfg-negado { background: #fff4f5; border: 1px solid #f4c9d1; color: #a3374a; border-radius: 12px; padding: 1.1rem 1.2rem; }
.cfg-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cfg-grid { grid-template-columns: 1.4fr 1fr; align-items: start; } .cfg-acesso { grid-row: span 2; } }
.cfg-card { background: #fff; border: 1px solid #eceef4; border-radius: 14px; padding: 1.1rem 1.2rem; box-shadow: 0 1px 2px rgba(20,33,61,.04); }
.cfg-card-topo { display: flex; align-items: center; gap: .55rem; margin-bottom: .3rem; }
.cfg-card-ic { display: flex; color: #2f6fe0; }
.cfg-card-nome { font-size: 1.05rem; font-weight: 700; color: #23304d; }
.cfg-card-desc { color: #626b80; font-size: .84rem; margin: 0 0 1rem; }
.cfg-busca { display: flex; align-items: center; gap: .45rem; padding: .5rem .7rem; border: 1px solid #e3e7ef; border-radius: 10px; margin-bottom: .7rem; }
.cfg-busca-ic { color: #667085; display: flex; }
.cfg-busca input { border: none; outline: none; font-size: .9rem; width: 100%; background: transparent; }
.cfg-lista { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }
.cfg-linha { display: flex; align-items: center; gap: .7rem; padding: .6rem .2rem; border-bottom: 1px solid #f1f3f8; }
.cfg-linha:last-child { border-bottom: none; }
.cfg-user { min-width: 0; flex: 1; }
.cfg-user-nome { font-weight: 600; color: #2b3242; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-user-email { color: #626b80; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-tag-copro { font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: #2f6fe0; background: #eaf1fe; border-radius: 999px; padding: .08rem .45rem; }
.cfg-opcoes { display: flex; flex-direction: column; gap: .95rem; }
.cfg-opcao { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cfg-opcao-txt { font-size: .9rem; color: #3b4257; }
.cfg-opcao-sub { display: block; color: #667085; font-size: .76rem; }
.cfg-rodape { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; margin-top: 1rem; }
.cfg-salvar { background: #2f6fe0; color: #fff; border: none; border-radius: 9px; padding: .55rem 1.1rem; font-weight: 600; font-size: .9rem; cursor: pointer; transition: filter .15s; }
.cfg-salvar:hover { filter: brightness(1.05); } .cfg-salvar:disabled { opacity: .6; cursor: default; }
.cfg-gerenciar { display: inline-flex; align-items: center; gap: .45rem; }
.cfg-gerenciar svg { width: 16px; height: 16px; }
/* Botão de ação por linha no popup "Gerenciar permissões" (Remover / Conceder) */
.cfg-acao-btn { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; font-weight: 600; }
.cfg-acao-btn svg { width: 14px; height: 14px; }
.cfg-acao-btn:hover:not(:disabled) { filter: brightness(.97); }
.cfg-acao-btn:disabled { opacity: .55; cursor: default; }

/* ═══════════════ Detalhe: abas, ações, dúvidas, histórico ═══════════════ */
.det-tabs { display: flex; flex-wrap: wrap; gap: .2rem; border-bottom: 1px solid #eceef4; margin-bottom: 1rem; }
.det-tab { border: none; background: none; min-height: 40px; padding: .55rem .8rem; font-size: .88rem; font-weight: 600; color: #626b80; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: .35rem; }
.det-tab:hover { color: #4a5169; }
.det-tab.on { color: #23304d; border-bottom-color: #2f6fe0; }
.det-tab-badge { font-size: .75rem; background: #eef1f7; color: #6b7488; border-radius: 999px; padding: 0 .4rem; font-weight: 700; }

/* ── Chrome de modal global (overlay flutuante centralizado) ──
   Os boards (BIM/Troca) já definem .ns-* num <style> inline; aqui replicamos
   as regras de estrutura no CSS global para as demais telas (ex.: popup
   "Gerenciar permissões" nas Configurações) abrirem como popup e não como
   bloco no rodapé. */
.ns-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(15,23,42,.45); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 1.2rem; animation: nsFade .2s ease both; }
.ns-modal { width: min(780px, 94vw); max-height: 92dvh; display: flex; flex-direction: column; background: #fff; border-radius: 14px; box-shadow: 0 24px 64px rgba(15,23,42,.28); overflow: hidden; animation: nsPop .28s cubic-bezier(.16,1,.3,1) both; }
.ns-modal.det-modal { width: min(880px, 94vw); }
.ns-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid #eef0f5; }
.ns-titulo { font-size: 1.1rem; font-weight: 800; color: #1f2a44; }
.ns-x { border: none; background: #f3f5fa; color: #5a6178; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ns-x:hover { background: #e7ebf3; }
.ns-body { padding: 1.1rem 1.2rem; overflow-y: auto; }
@keyframes nsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nsPop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 620px) { .ns-modal, .ns-modal.det-modal { width: 100%; max-width: 100%; max-height: 100dvh; border-radius: 0; } }
/* Campos de formulário dentro de modais (ns-campo) + rodapé — globais, para todo modal
   (Novo/Cadastro) ficar consistente sem depender do <style> inline de cada página. */
.ns-campo { margin-bottom: 1rem; }
.ns-campo > label { display: flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 700; color: #2b3147; margin-bottom: .4rem; }
.ns-campo > label svg { color: #2f6fe0; }
.ns-campo > label i { color: #e0526b; font-style: normal; }
.ns-campo select, .ns-campo textarea, .ns-campo input[type=date], .ns-campo input[type=text], .ns-campo input[type=number], .ns-campo input[type=email], .ns-campo input[type=tel], .ns-campo input[type=time] { width: 100%; border: 1px solid #dfe3ec; border-radius: 8px; padding: .6rem .7rem; font-size: .9rem; color: #23304d; background: #fff; outline: none; font-family: inherit; box-sizing: border-box; }
.ns-campo select:focus, .ns-campo textarea:focus, .ns-campo input:focus { border-color: #2f6fe0; box-shadow: 0 0 0 3px rgba(66,133,244,.14); }
.ns-campo textarea { resize: vertical; min-height: 74px; }
.ns-hint { font-weight: 400; color: #667085; font-size: .78rem; }
.ns-radios { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .1rem; }
.ns-radio { display: inline-flex; align-items: center; min-height: 40px; gap: .35rem; font-size: .9rem; color: #3b4257; cursor: pointer; }
.ns-erro { background: #fdecef; color: #b3243c; border: 1px solid #f7cdd6; border-radius: 8px; padding: .55rem .7rem; font-size: .85rem; margin-top: .3rem; }
.ns-foot { display: flex; justify-content: flex-end; gap: .6rem; padding: .9rem 1.2rem; border-top: 1px solid #eef0f5; background: #fafbfd; }
.ns-cancelar { border: 1px solid #dfe3ec; background: #fff; color: #5a6178; font-weight: 600; font-size: .9rem; border-radius: 8px; padding: .55rem 1.1rem; cursor: pointer; }
.ns-cancelar:hover { background: #f4f6fb; }
.ns-salvar { display: inline-flex; align-items: center; gap: .4rem; border: none; background: #2f6fe0; color: #fff; font-weight: 600; font-size: .9rem; border-radius: 8px; padding: .55rem 1.3rem; cursor: pointer; transition: background .15s; }
.ns-salvar:hover { background: #2458c5; }
.ns-salvar:disabled { opacity: .6; cursor: default; }
.ns-salvar svg { width: 16px; height: 16px; }
/* Banner "Olá, ..." no topo dos modais de criação */
.ns-ola { display: flex; gap: .7rem; align-items: flex-start; background: #eef4ff; border: 1px solid #dce8ff; border-radius: 10px; padding: .7rem .85rem; margin-bottom: 1.1rem; }
.ns-ola-ic { color: #2f6fe0; display: flex; flex-shrink: 0; }
.ns-ola-tx strong { display: block; color: #1f2a44; font-size: .92rem; }
.ns-ola-tx span { color: #6b7286; font-size: .82rem; line-height: 1.4; }

/* Rodapé de ações do detalhe */
.det-acoes { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1rem; margin-top: .3rem; border-top: 1px solid #eceef4; }
.det-btn { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid transparent; border-radius: 9px; padding: .5rem .95rem; font-weight: 600; font-size: .88rem; cursor: pointer; transition: filter .15s, background .15s, transform .12s, box-shadow .15s; }
.det-btn:hover:not(:disabled) { transform: translateY(-1px); }
.det-btn:active:not(:disabled) { transform: translateY(0); }
.det-btn:disabled { opacity: .55; cursor: default; }
.det-tab svg, .det-btn svg, .dv-resp-btn svg { width: 16px; height: 16px; }
.det-btn-aprovar { background: #2e9e5b; color: #fff; } .det-btn-aprovar:hover { filter: brightness(1.06); }
.det-btn-reprovar { background: #fff; color: #d63a54; border-color: #f0c2cb; } .det-btn-reprovar:hover { background: #fff4f5; }
.det-btn-concluir { background: #2f6fe0; color: #fff; } .det-btn-concluir:hover { filter: brightness(1.06); }
.det-btn-duvida { background: #fff; color: #4a5169; border-color: #dde2ec; } .det-btn-duvida:hover { background: #f5f7fb; }

/* Formulário de ação inline (sem popup dentro de popup) */
.det-form { background: #f7f9fc; border: 1px solid #eaeef5; border-radius: 12px; padding: 1rem; margin-top: .4rem; animation: nsFade .18s ease both; }
.det-form-titulo { display: flex; align-items: center; gap: .45rem; font-weight: 700; color: #23304d; margin: 0 0 .8rem; font-size: 1rem; }
.det-form-titulo svg { width: 18px; height: 18px; color: #2f6fe0; }
.det-form label { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: #5a6178; margin: 0 0 .35rem; }
.det-form label svg { width: 15px; height: 15px; color: #7a839c; }
.det-form .obrig { color: #d63a54; }
.det-form input[type=date], .det-form textarea { width: 100%; border: 1px solid #d7deea; border-radius: 9px; padding: .55rem .65rem; font-size: .9rem; font-family: inherit; background: #fff; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.det-form input[type=date]:focus, .det-form textarea:focus { outline: none; border-color: #2f6fe0; box-shadow: 0 0 0 3px rgba(66,133,244,.14); }
.det-form textarea { resize: vertical; min-height: 70px; }
.det-form-campo { margin-bottom: .8rem; }
.det-form-erro { display: flex; align-items: center; gap: .35rem; color: #d63a54; font-size: .82rem; margin: 0 0 .6rem; }
.det-form-erro svg { width: 15px; height: 15px; flex-shrink: 0; }
.det-form-acoes { display: flex; justify-content: flex-end; gap: .6rem; }
.det-form-cancelar { background: none; border: 1px solid #dde2ec; color: #5a6178; border-radius: 9px; padding: .5rem 1rem; font-weight: 600; font-size: .88rem; cursor: pointer; }
.det-form-cancelar:hover { background: #eef1f6; }

/* Dúvidas (chat de 1 ciclo) */
.dv-vazio, .hist-vazio { color: #667085; font-size: .88rem; padding: .8rem 0; }
.dv-lista { display: flex; flex-direction: column; gap: .8rem; }
.dv-card { border: 1px solid #eceef4; border-radius: 12px; overflow: hidden; }
.dv-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .7rem; background: #f7f9fc; }
.dv-situacao { font-size: .75rem; font-weight: 700; letter-spacing: .02em; padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; }
.dv-situacao.aguardando { color: #b26a00; background: #fdf1dd; }
.dv-situacao.encerrada { color: #2e7d4f; background: #e6f7ee; }
.dv-msg { padding: .6rem .7rem; }
.dv-msg + .dv-msg { border-top: 1px dashed #eceef4; }
.dv-quem { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: #6b7488; margin-bottom: .25rem; }
.dv-quem .dv-av { color: #7a839c; display: flex; }
.dv-quem b { color: #3b4257; font-weight: 600; }
.dv-quem .dv-quando { margin-left: auto; color: #667085; }
.dv-texto { font-size: .9rem; color: #2b3242; white-space: pre-wrap; word-break: break-word; }
.dv-resp-btn { margin: .2rem .7rem .7rem; }

/* Histórico */
.hist-lista { display: flex; flex-direction: column; gap: 0; }
.hist-item { display: flex; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid #f1f3f8; }
.hist-item:last-child { border-bottom: none; }
.hist-marca { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.hist-dot { width: 9px; height: 9px; border-radius: 50%; background: #2f6fe0; margin-top: .35rem; }
.hist-linha-v { flex: 1; width: 2px; background: #eceef4; margin-top: .2rem; }
.hist-corpo { min-width: 0; flex: 1; }
.hist-tipo { font-weight: 700; color: #23304d; font-size: .86rem; }
.hist-desc { color: #4a5169; font-size: .86rem; white-space: pre-wrap; word-break: break-word; margin-top: .1rem; }
.hist-meta { color: #667085; font-size: .76rem; margin-top: .15rem; }

/* Engrenagem discreta na barra do board (só admin BIM) */
.rfp-cfg { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; color: #626b80; border: 1px solid #e3e7ef; background: #fff; cursor: pointer; transition: color .15s, background .15s, border-color .15s; text-decoration: none; }
.rfp-cfg:hover { color: #2f6fe0; background: #f2f6ff; border-color: #cfe0ff; }

/* Sino de pendências (admin BIM) */
.rfp-sino { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; color: #626b80; border: 1px solid #e3e7ef; background: #fff; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.rfp-sino:hover { color: #2f6fe0; background: #f2f6ff; border-color: #cfe0ff; }
.rfp-sino-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: #e0526b; color: #fff; font-size: .75rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }

/* Carregar mais (paginação do board) */
.rfp-mais { display: flex; justify-content: center; padding: 1rem 0 .3rem; }
.rfp-mais-btn { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #dde2ec; background: #fff; color: #4a5169; font-weight: 600; font-size: .88rem; border-radius: 9px; padding: .55rem 1.2rem; cursor: pointer; transition: background .15s, border-color .15s; }
.rfp-mais-btn:hover { background: #f2f6ff; border-color: #cfe0ff; color: #2458c5; }
.rfp-mais-btn:disabled { opacity: .6; cursor: default; }
@media (prefers-reduced-motion: reduce) { .cbx-panel { animation: none; } }

/* ═══════════════ Acessibilidade e toque (globais) ═══════════════ */

/* Foco visível universal (navegação por teclado): nenhum controle interativo fica sem
   indicação de foco — inclusive os botões próprios que não são .btn do Bootstrap. */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, label:focus-visible, [role=button]:focus-visible {
    outline: 2px solid #2f6fe0;
    outline-offset: 2px;
}

/* Alvo de toque mínimo (regra do projeto: >=40px em qualquer aparelho).
   Botões "de verdade" ganham min-height; os controles de barra/ícone viram 40x40. */
.ns-salvar, .ns-cancelar, .cfg-salvar, .det-btn, .det-form-cancelar, .rfp-mais-btn,
.pa-primary-btn, .pa-ghost-btn, .pa-perm-toggle, .cbx-campo, .cbx-item, .det-tab, .pa-tab,
.pa-drop-item, .pa-perm-item, .menu-item, .menu-sair, .flt-limpar,
.rfp-nova, .rfp-flt-btn, .rfp-vista button, .flt-pill, .flt-quick button,
.flt-status-sel, .flt-datas input, .ic-sel, .ic-datas input,
.ns-campo select, .ns-campo input[type=date], .ns-campo input[type=text], .ns-campo input[type=number], .ns-campo input[type=email], .ns-campo input[type=tel], .ns-campo input[type=time] {
    min-height: 40px;
}
.pa-mini, .pa-nivel-sm { display: inline-flex; align-items: center; min-height: 40px; }
.sw { min-height: 40px; }
.pa-icon-btn, .ns-x, .menu-acao { min-width: 40px; min-height: 40px; }
.rail-toggle { width: 42px; height: 42px; }
.rfp-cfg, .rfp-sino { width: 40px; height: 40px; }
/* Ícones pequenos que não podem crescer visualmente: área de clique estendida (::after). */
.pa-icon-btn.sm { min-width: 0; min-height: 0; }
.pa-icon-btn.sm, .toast-x, .menu-estrela, .ns-arq-x, .det-anexo-rm, .doc-anx-btn { position: relative; }
.pa-icon-btn.sm::after, .toast-x::after, .menu-estrela::after, .ns-arq-x::after, .doc-anx-btn::after {
    content: ""; position: absolute; inset: -6px;
}

/* ═══════════════ Estado vazio dos boards (busca/filtro sem resultado) ═══════════════ */
.rfp-vazio-estado { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; padding: 2.6rem 1rem 2rem; }
.rfp-vazio-estado .rfp-vazio-ic { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 18px; background: #eef4ff; color: #2f6fe0; margin-bottom: .45rem; }
.rfp-vazio-estado .rfp-vazio-ic svg { width: 28px; height: 28px; }
.rfp-vazio-estado strong { color: #1f2a44; font-size: 1.02rem; }
.rfp-vazio-estado p { color: #626b80; font-size: .9rem; margin: 0; }
.rfp-vazio-btn { margin-top: .7rem; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; border: 1px solid #dde2ec; background: #fff; color: #2f6fe0; font-weight: 600; font-size: .88rem; border-radius: 9px; padding: .5rem 1.2rem; cursor: pointer; transition: background .15s, border-color .15s; }
.rfp-vazio-btn:hover { background: #f2f6ff; border-color: #cfe0ff; }
/* ─────────────────────────────────────────────────────────────────────────────
   BOARD PADRÃO (global) — cabeçalho, toolbar, painel de filtros e tabela.
   Até aqui cada board redefinia isso no próprio <style>, o que fez a tela nova
   de SSO nascer sem estilo (botão virava caixa com borda do navegador). Agora o
   visual base é global: board novo já nasce no padrão. Páginas antigas que
   declaram as mesmas classes continuam vencendo (o <style> da página vem depois),
   então nada muda para elas.
   ───────────────────────────────────────────────────────────────────────────── */
.rfp { padding: .2rem .1rem 2rem; }
.rfp-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rfp-titulo { font-size: 1.6rem; font-weight: 800; color: #1f2a44; margin: 0; letter-spacing: -.01em; }
.rfp-sub { color: #6b7488; margin: .2rem 0 0; font-size: .92rem; }

/* Toolbar: uma linha no desktop, quebra no celular */
.rfp-barra { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; margin-bottom: 1rem; }
.rfp-barra > * { flex-shrink: 0; }
.rfp-busca { display: flex; align-items: center; gap: .45rem; background: #fff; border: 1px solid #e3e7ef; border-radius: 10px; padding: 0 .75rem; min-width: 140px; flex: 1 1 auto; min-height: 40px; transition: border-color .15s, box-shadow .15s; }
.rfp-busca:focus-within { border-color: #b9d0ff; box-shadow: 0 0 0 3px rgba(47,111,224,.12); }
.rfp-busca svg { width: 16px; height: 16px; color: #8a94a6; flex-shrink: 0; }
.rfp-busca input { align-self: stretch; min-height: 40px; border: none; outline: none; font-size: .9rem; width: 100%; background: transparent; color: #2b3147; }
.rfp-filtro, .rfp-link { display: inline-flex; align-items: center; gap: .4rem; background: #fff; color: #4a5169; border: 1px solid #e3e7ef; border-radius: 10px; padding: .5rem .85rem; font-size: .88rem; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 40px; transition: background .15s, border-color .15s, color .15s; }
.rfp-filtro:hover, .rfp-link:hover { background: #f2f6ff; border-color: #cfe0ff; color: #2458c5; }
.rfp-filtro.on { background: #eef4ff; border-color: #b9d0ff; color: #2458c5; }
.rfp-filtro svg, .rfp-link svg { width: 16px; height: 16px; }
@media (max-width: 980px) { .rfp-barra { flex-wrap: wrap; } }

/* Painel de filtros */
.flt-painel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .9rem; background: #f7f9fc; border: 1px solid #eaeef5; border-radius: 12px; padding: .9rem 1rem; margin-bottom: 1rem; animation: nsFade .18s ease both; }
.flt-campo { display: flex; flex-direction: column; gap: .3rem; min-width: 190px; }
.flt-lbl { font-size: .72rem; font-weight: 700; color: #7a839c; text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.flt-datas { display: flex; align-items: flex-end; gap: .45rem; }
.flt-datas > div { display: flex; flex-direction: column; gap: .2rem; }
.flt-datas label { font-size: .7rem; color: #8a94a6; margin: 0; }
.flt-datas input { min-height: 40px; border: 1px solid #e3e7ef; border-radius: 9px; padding: .4rem .55rem; font-size: .88rem; background: #fff; color: #2b3147; }
.flt-seta { color: #b6becd; padding-bottom: .6rem; }
.flt-limpar { margin-left: auto; align-self: flex-end; background: none; border: none; color: #2f6fe0; font-weight: 600; font-size: .86rem; cursor: pointer; min-height: 40px; padding: 0 .3rem; }
.flt-limpar:hover { text-decoration: underline; }

/* Tabela do board (colunas automáticas, redimensionáveis) */
.rfp-scroll { overflow-x: auto; border: 1px solid #eef0f6; border-radius: 12px; background: #fff; }
.rfp-tabela { display: flex; flex-direction: column; min-width: 100%; }
.rfp-linha { display: grid; grid-template-columns: var(--rfp-cols, repeat(auto-fit, minmax(90px, 1fr))); gap: .6rem; align-items: center; padding: .6rem .9rem; border-bottom: 1px solid #f2f4f9; }
.rfp-linha > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; color: #3b4257; }
.rfp-linha:last-child { border-bottom: none; }
.rfp-cab { position: sticky; top: 0; z-index: 1; background: #fbfcfe; border-bottom: 1px solid #e9edf5; }
.rfp-cab > div { font-size: .72rem; font-weight: 700; color: #7a839c; text-transform: uppercase; letter-spacing: .04em; position: relative; }
.rfp-linha-click { cursor: pointer; transition: background .13s; }
.rfp-linha-click:hover { background: #f7faff; }
.rfp-clip2 { white-space: normal; word-break: break-word; display: block; max-width: 460px; }
.rfp-resize { position: absolute; right: -.3rem; top: 0; bottom: 0; width: .6rem; cursor: col-resize; touch-action: none; }
.rfp-vazio { color: #8a94a6; font-size: .9rem; text-align: center; padding: 1.2rem 0; }

@media (prefers-reduced-motion: reduce) { .flt-painel { animation: none; } }

/* Botão primário do board (antes só existia por página — board novo caía no default do navegador). */
.rfp-nova { display: inline-flex; align-items: center; gap: .4rem; background: #2f6fe0; color: #fff; border: none; border-radius: 10px; font-weight: 600; font-size: .9rem; padding: .5rem 1rem; cursor: pointer; transition: background .15s, transform .12s, box-shadow .15s; box-shadow: 0 2px 8px rgba(47,111,224,.28); }
.rfp-nova:hover { background: #2458c5; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(47,111,224,.34); }
.rfp-nova:active { transform: translateY(0); }
.rfp-nova svg { width: 16px; height: 16px; }

/* Voltar: seta com animação infinita (substitui os botões "Painel" nas telas internas). */
.rfp-voltar { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; border:1px solid #e3e7ef; background:#fff; color:#4a5169; text-decoration:none; flex-shrink:0; transition:background .15s, border-color .15s, color .15s; }
.rfp-voltar:hover { background:#f2f6ff; border-color:#cfe0ff; color:#2458c5; }
.rfp-voltar svg { width:18px; height:18px; animation: voltarSeta 1.5s ease-in-out infinite; }
@keyframes voltarSeta { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .rfp-voltar svg { animation: none; } }


/* ─────────────────────────────────────────────────────────────────────────────
   MENU — busca global + grupos sanfonados (inspirado no Sienge, com a nossa cor).
   Grupos nascem FECHADOS: a seta ▸ aponta para a direita e gira para ▾ ao abrir,
   expandindo os itens para baixo. "Início" fica solto (não tem subitens).
   ───────────────────────────────────────────────────────────────────────────── */
.menu-busca { display:flex; align-items:center; gap:.45rem; margin:.2rem .7rem .6rem; padding:0 .65rem; min-height:40px; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); transition:background .16s, border-color .16s, box-shadow .16s; }
.menu-busca:focus-within { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); box-shadow:0 0 0 3px rgba(255,255,255,.07); }
.menu-busca svg { width:15px; height:15px; color:#9fb4dd; flex-shrink:0; }
.menu-busca input { flex:1 1 auto; min-width:0; align-self:stretch; min-height:40px; border:none; outline:none; background:transparent; color:#fff; font-size:.86rem; font-family:inherit; }
.menu-busca input::placeholder { color:#8fa4cd; }
.menu-busca-x { display:flex; align-items:center; justify-content:center; width:22px; height:22px; border:none; border-radius:6px; background:rgba(255,255,255,.12); color:#cfe0ff; cursor:pointer; padding:0; }
.menu-busca-x:hover { background:rgba(255,255,255,.22); }
.menu-busca-x svg { width:11px; height:11px; }
.menu-nada { color:#8fa4cd; font-size:.83rem; padding:.8rem 1rem; margin:0; }

/* Cabeçalho do grupo */
.menu-grupo { display:flex; align-items:center; gap:.45rem; width:100%; background:none; border:none; cursor:pointer; padding:.5rem .8rem; margin-top:.15rem; color:#9fb4dd; font-size:.68rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; text-align:left; min-height:40px; border-radius:9px; transition:background .15s, color .15s; }
.menu-grupo:hover { background:rgba(255,255,255,.07); color:#fff; }
.menu-grupo.on { color:#fff; }
.menu-grupo-tx { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-grupo-ch { display:flex; align-items:center; justify-content:center; width:16px; height:16px; flex-shrink:0; transition:transform .22s cubic-bezier(.16,1,.3,1); }
.menu-grupo-ch svg { width:13px; height:13px; }
.menu-grupo-ch.on { transform:rotate(90deg); }            /* ▸ fechado → ▾ aberto */

/* Itens do grupo: entram deslizando (animação curta, sem custo) */
.menu-sub { display:flex; flex-direction:column; padding-left:.55rem; margin-left:1.05rem; border-left:1px solid rgba(255,255,255,.10); animation:menuAbre .2s cubic-bezier(.16,1,.3,1) both; }
@keyframes menuAbre { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }

/* Legenda do departamento no resultado da busca */
.menu-tx-sec { display:block; font-size:.68rem; font-weight:600; color:#8fa4cd; letter-spacing:.02em; }

@media (prefers-reduced-motion: reduce) {
    .menu-sub { animation:none; }
    .menu-grupo-ch { transition:none; }
}

/* Carregando GLOBAL: cobre a tela e bloqueia cliques enquanto há requisição em voo. */
.carregando-overlay { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; background:rgba(20,33,61,.14); backdrop-filter:blur(1.5px); cursor:progress; animation:carFade .16s ease both; }
.carregando-caixa { display:flex; align-items:center; gap:.6rem; background:#fff; border:1px solid #eef0f6; border-radius:12px; padding:.7rem 1.1rem; box-shadow:0 10px 30px rgba(20,33,61,.18); }
.carregando-spin { width:18px; height:18px; border:2.5px solid #dfe6f5; border-top-color:#2f6fe0; border-radius:50%; animation:carGira .7s linear infinite; }
.carregando-tx { font-size:.9rem; font-weight:600; color:#3b4257; }
@keyframes carGira { to { transform:rotate(360deg); } }
@keyframes carFade { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .carregando-overlay { animation:none; } .carregando-spin { animation-duration:1.6s; } }

/* ── Tipografia premium (self-hosted, CSP font-src 'self') ────────────────────
   Sora = títulos (geométrica, com personalidade) · Inter = corpo (legibilidade).
   Variáveis: um arquivo por família cobre todos os pesos. ~82KB no total. */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('../fonts/sora-var.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-var.woff2') format('woff2');
}
body { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; }
h1, h2, h3, .rfp-titulo, .ns-titulo, .menu-logo-titulo { font-family: 'Sora', 'Inter', 'Segoe UI', sans-serif; }

/* ===================== Avatar (foto do Microsoft 365 ou iniciais) ===================== */
.avt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    user-select: none;
}

/* Pessoa na lista do ComboBox: avatar + nome + e-mail (padrão do seletor de pessoas do Microsoft) */
.cbx-pessoa { display: flex; align-items: center; gap: .65rem; min-width: 0; text-align: left; }
.cbx-pessoa-tx { display: flex; flex-direction: column; min-width: 0; }
.cbx-pessoa-tx b { font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbx-pessoa-tx small { font-size: .8rem; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===================== Popup aberto: fundo intocável ===================== */
/* Reserva o espaço da barra de rolagem: travar não faz a página "pular" para o lado. */
html { scrollbar-gutter: stable; }

/* app.js liga "sol-travado" enquanto houver overlay: a página de baixo não rola de jeito nenhum */
html.sol-travado,
html.sol-travado body { overflow: hidden; }

/* Rolagem dentro do popup não vaza para a página quando chega no topo/fim (roda e toque) */
.ns-overlay, .ns-overlay *, .pa-overlay, .pa-overlay *, .img-overlay, .img-overlay *,
.flt-pop, .flt-pop *, .cbx-panel, .cbx-panel *, .side.aberto, .side.aberto * { overscroll-behavior: contain; }

/* O overlay em si engole gestos de rolagem no celular (o fundo não "arrasta" por baixo) */
.ns-overlay, .pa-overlay, .img-overlay, .side-backdrop, .flt-overlay, .cbx-overlay { touch-action: none; }
.ns-overlay > *, .pa-overlay > *, .img-overlay > * { touch-action: auto; }   /* ...mas o popup rola normal */