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: #667085; 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; }
/* O nome encolhe com "…"; a bolinha de pendentes fica sempre inteira à direita. */
.menu-filho-tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.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); }
/* Detalhe maior no computador (pedido do PMO: texto pequeno). zoom aumenta tudo junto — texto,
   botões e campos — e a largura/altura são compensadas para o quadro continuar cabendo na tela. */
@media (min-width: 900px) {
    .ns-modal.det-modal { zoom: 1.15; width: min(880px, calc(94vw / 1.15)); max-height: calc(92dvh / 1.15); }
}
.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: #667085; }
.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: #667085; 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: #667085; 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: #667085; 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: #667085; 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: #667085; 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: #667085; 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 */


/* SSO: botão Ativo/Inativo na edição (Setparças e Programas). */
.sso-ativo { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    border: 1px solid #e3e7ef; border-radius: 12px; padding: .65rem .85rem; background: #fafbfe; }
.sso-ativo-txt { display: grid; gap: .1rem; min-width: 0; }
.sso-ativo-txt b { color: #23304d; font-size: .9rem; }
.sso-ativo-txt small { color: #667085; font-size: .78rem; line-height: 1.35; }

/* "Pedir acesso" nas telas restritas. */
.pedir-acesso { margin-left: auto; flex-shrink: 0; border: none; border-radius: 999px; background: #2f6fe0; color: #fff;
    font-weight: 600; font-size: .85rem; padding: .45rem .95rem; cursor: pointer; }
.pedir-acesso:hover:not(:disabled) { background: #2458c5; }
.pedir-acesso:disabled { background: #9db6e8; cursor: default; }


/* Quadros: "Ver todos os N" quando o grupo tem mais itens do que os já carregados. */
.rfp-ver-grupo { display: block; margin: .3rem 0 .6rem 1.6rem; border: none; background: none; color: #2f6fe0;
    font-size: .85rem; font-weight: 600; cursor: pointer; padding: .25rem 0; }
.rfp-ver-grupo:hover { text-decoration: underline; }

/* Barra das telas: engrenagem de configurações sempre colada na direita (o sino, quando há, fica junto dela). */
.rfp-barra > .rfp-cfg, .rfp-barra > .rfp-sino { margin-left: auto; }
.rfp-barra > .rfp-sino + .rfp-cfg { margin-left: 0; }

/* Acompanhamento (só na tela do responsável): cursor "fantasma" semitransparente com a foto. */
.fantasma { position: absolute; z-index: 1500; pointer-events: none; display: flex; align-items: flex-start; gap: 2px;
    opacity: .95; transition: left .12s linear, top .12s linear; transform: translate(-2px, -2px); }
.fantasma img, .fantasma .fant-ini { width: 22px; height: 22px; border-radius: 50%; margin-top: 10px; border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(20,33,61,.25); object-fit: cover; }
.fantasma .fant-ini { display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #1f2a44; }
.fantasma .fant-nome { margin-top: 13px; background: rgba(31,42,68,.85); color: #fff; font-size: 10px; font-weight: 600;
    padding: 1px 6px; border-radius: 999px; white-space: nowrap; }

/* Acompanhamento (só o responsável): bolha de quem está online + painel + barra "acompanhando". */
/* Acompanhando = só olhar: cobre a página e os popups (1200), abaixo do painel (1400) e da barra (1450). */
.acp-trava { position: fixed; inset: 0; z-index: 1350; background: transparent; cursor: not-allowed; }
.acp { position: fixed; right: 18px; z-index: 1400; display: flex; align-items: flex-end; gap: 8px; }
.acp.cima { top: 12px; flex-direction: column-reverse; }   /* bolinha em cima, painel abre para baixo */
.acp.embaixo { bottom: 18px; flex-direction: column; }     /* bolinha embaixo, painel abre para cima */
.acp-mover { margin-left: auto; border: none; background: #f2f6ff; color: #2458c5; border-radius: 999px; font-size: .72rem; font-weight: 600; padding: .2rem .55rem; cursor: pointer; }
.acp-bolha { display: inline-flex; align-items: center; gap: 0; border: 1px solid #e3e7ef; background: #fff; border-radius: 999px;
    padding: 4px 10px 4px 4px; box-shadow: 0 8px 24px rgba(20,33,61,.16); cursor: pointer; }
.acp-bolha .acp-mini { margin-right: -8px; border: 2px solid #fff; border-radius: 50%; }
.acp-total { margin-left: 14px; font-size: .8rem; font-weight: 700; color: #2b3147; }
.acp-painel { width: min(360px, 86vw); max-height: 60vh; overflow-y: auto; background: #fff; border: 1px solid #e6e9f2; border-radius: 14px;
    box-shadow: 0 16px 48px rgba(20,33,61,.18); padding: .5rem; }
.acp-topo { display: flex; align-items: center; gap: .4rem; padding: .3rem .4rem .5rem; font-size: .9rem; color: #1f2a44; }
.acp-n { background: #eef4ff; color: #2458c5; border-radius: 999px; padding: 0 .45rem; font-size: .75rem; font-weight: 700; }
.acp-x { border: none; background: none; font-size: 1.2rem; line-height: 1; color: #667085; cursor: pointer; }
.acp-vazio { margin: .3rem .4rem .6rem; font-size: .82rem; color: #667085; }
.acp-pessoa { display: flex; align-items: center; gap: .55rem; padding: .45rem .4rem; border-radius: 10px; }
.acp-pessoa.on, .acp-pessoa:hover { background: #f5f8ff; }
.acp-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.acp-nome { font-size: .85rem; font-weight: 600; color: #2b3147; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acp-onde { font-size: .74rem; color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acp-btn { border: 1px solid #cfe0ff; background: #f2f6ff; color: #2458c5; border-radius: 999px; font-size: .74rem; font-weight: 600; padding: .25rem .6rem; cursor: pointer; flex-shrink: 0; }
.acp-btn.on { background: #2f6fe0; border-color: #2f6fe0; color: #fff; }
/* Texto que a pessoa acompanhada digita, por cima do mesmo campo (não altera o campo de verdade) */
.acp-fantasma { position: absolute; z-index: 1300; pointer-events: none; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis;
                background: #fffbe8; color: #6b4a00; outline: 2px solid #f2b705; transition: opacity .4s ease; }
.acp-fantasma.some { opacity: 0; }
.acp-barra { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1450; display: flex; align-items: center; gap: .5rem;
    background: #1f2a44; color: #fff; border-radius: 999px; padding: .3rem .4rem .3rem .35rem; font-size: .82rem; box-shadow: 0 8px 24px rgba(20,33,61,.3); }
.acp-barra button { border: none; background: #fff; color: #1f2a44; border-radius: 999px; font-size: .75rem; font-weight: 700; padding: .2rem .6rem; cursor: pointer; }
@media (max-width: 900px) { .acp { display: none; } }   /* acompanhar é coisa de computador */

/* Borda no que a pessoa acompanhada clicou / está editando / selecionou (só na tela do responsável). */
.acp-destaque { position: absolute; z-index: 1490; pointer-events: none; border: 2px solid #2f6fe0; border-radius: 8px;
    box-shadow: 0 0 0 4px rgba(47,111,224,.18); transition: left .15s, top .15s, width .15s, height .15s, opacity .4s; }
.acp-destaque.ponto { border-radius: 50%; }
.acp-destaque.some { opacity: 0; }
.acp-dest-tag { position: absolute; left: -2px; bottom: calc(100% + 4px); max-width: 320px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; background: #2f6fe0; color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.acp-pulso { position: absolute; z-index: 1491; pointer-events: none; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
    background: rgba(47,111,224,.55); animation: acp-pulso .9s ease-out forwards; }
@keyframes acp-pulso { to { transform: scale(5); opacity: 0; } }
.acp-cfg-btn { border: none; background: #f2f4f9; color: #4a5470; border-radius: 8px; width: 28px; height: 28px; cursor: pointer; font-size: .9rem; flex: 0 0 auto; }
.acp-cfg-btn.on, .acp-cfg-btn:hover { background: #e3ecff; color: #2458c5; }
.acp-config { margin: .1rem .5rem .6rem 2.6rem; padding: .5rem .7rem; background: #f8faff; border: 1px solid #e6ecf9; border-radius: 10px; font-size: .78rem; }
.acp-cfg-sec { font-weight: 700; color: #2458c5; margin: .35rem 0 .15rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.acp-cfg-sec:first-child { margin-top: 0; }
.acp-cfg-l { display: flex; justify-content: space-between; gap: .8rem; padding: .12rem 0; color: #59627a; }
.acp-cfg-l b { color: #1f2a44; font-weight: 600; text-align: right; }
.acp-cfg-l b.acp-sim { color: #1c7d43; }
.acp-cfg-l b.acp-nao { color: #d63a54; }

/* Configurações → Acompanhamento em tempo real (só o responsável vê). */
.acp-cfg-lista { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 .8rem; }
.acp-cfg-vazio { font-size: .82rem; color: #667085; }
.acp-cfg-chip { display: inline-flex; align-items: center; gap: .4rem; background: #f5f8ff; border: 1px solid #dfe7fb; border-radius: 999px;
    padding: .2rem .35rem .2rem .25rem; font-size: .82rem; color: #2b3147; }
.acp-cfg-chip button { border: none; background: none; color: #667085; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.acp-cfg-chip button:hover { color: #d63a54; }
.acp-cfg-add { display: flex; gap: .5rem; flex-wrap: wrap; }
.acp-cfg-add input { flex: 1 1 240px; min-width: 0; border: 1px solid #dfe3ec; border-radius: 8px; padding: .55rem .7rem; font-size: .9rem; }

/* F1 (auditoria 23/10/2026): linha/cartão que abre pelo teclado mostra onde está o foco. */
.rfp-linha-click:focus-visible, .bimc-card-click:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid #2f6fe0;
    outline-offset: 2px;
}

/* F1: o popup recebe o foco por script (para o teclado começar dentro); sem contorno nele mesmo. */
.ns-modal:focus { outline: none; }

/* Selo "Suporte conectado" (aviso LGPD do acompanhamento). Embaixo, no centro (menu fica à esquerda
   e os toasts à direita), discreto,
   abaixo dos popups (z-index menor que .ns-overlay = 1200) para nunca cobrir um formulário. */
.selo-acp {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 1100;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .32rem .7rem .32rem .55rem; border-radius: 999px;
    background: #fff; color: #2b3147; border: 1px solid #dfe3ec;
    box-shadow: 0 4px 14px rgba(15,23,42,.12); font-size: .76rem; font-weight: 600; text-decoration: none;
}
.selo-acp:hover { color: #2458c5; border-color: #b9c8ec; }
.selo-acp svg { width: 15px; height: 15px; }
.selo-acp-ponto { width: 7px; height: 7px; border-radius: 50%; background: #2e9e5b; box-shadow: 0 0 0 3px rgba(46,158,91,.18); }
@media print { .selo-acp { display: none; } }

/* ── C1 (auditoria): estilos que as páginas repetiam iguais, agora num lugar só ──
   Movidos sem mudar nada: mesmo seletor e mesmo conteúdo, na mesma ordem. */
.rfp-cabecalho { margin-bottom: 1rem; }
.rfp-busca-ic { color: #667085; display: flex; }
.flt-wrap { position: relative; }
.rfp-flt-btn { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid #e3e7ef; border-radius: 8px; color: #5a6178; font-size: .88rem; font-weight: 600; padding: .45rem .8rem; cursor: pointer; }
.rfp-flt-btn:hover { background: #f4f6fb; }
.rfp-flt-btn.ativo { border-color: #2f6fe0; color: #2458c5; }
.flt-badge { background: #2f6fe0; color: #fff; border-radius: 999px; font-size: .75rem; font-weight: 700; padding: 0 .4rem; min-width: 1.15rem; text-align: center; }
.flt-overlay { position: fixed; inset: 0; z-index: 1060; }
.flt-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1061; width: min(520px, 88vw); max-height: 78vh; overflow-y: auto; background: #fff; border: 1px solid #e6e9f2; border-radius: 12px; box-shadow: 0 16px 48px rgba(20,33,61,.16); padding: .4rem 1.1rem 1rem; }
.flt-sec { padding: .7rem 0; border-bottom: 1px solid #f0f2f7; }
.flt-sec:last-of-type { border-bottom: none; }
.flt-status-sel { width: 100%; border: 1px solid #e3e7ef; border-radius: 8px; padding: .5rem .6rem; font-size: .9rem; color: #3b4257; background: #fff; }
.flt-quick { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: .7rem; }
.flt-quick button { background: none; border: none; color: #2458c5; font-size: .85rem; cursor: pointer; padding: 0; }
.flt-quick button:hover { text-decoration: underline; }
.flt-foot { display: flex; align-items: center; justify-content: space-between; padding-top: .9rem; }
.rfp-grupo { margin-bottom: 1.6rem; }
.rfp-chev { color: var(--cor); display: flex; transition: transform .18s; }
.rfp-chev.fechado { transform: rotate(-90deg); }
.rfp-grupo-nome { color: var(--cor); font-weight: 700; font-size: 1rem; }
.rfp-grupo-qtd { color: #667085; font-size: .8rem; background: #eef1f7; border-radius: 999px; padding: 0 .5rem; }
.rfp-grade { border-left: 4px solid var(--cor); border-radius: 0 6px 6px 0; overflow: hidden; }
.rfp-head > div { font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #667085; background: #f7f8fb; position: relative; }
.rfp-linha:not(.rfp-head):hover { background: #f9fbff; }
.rfp-linha > .rfp-desc-cell { font-weight: 500; color: #23304d; }
.rfp-data { color: #5a6178; }
.rfp-solicitante { gap: .4rem; }
.rfp-avatar { color: #667085; display: flex; flex-shrink: 0; }
.rfp-resize::after { content: ""; position: absolute; right: 4px; top: 22%; height: 56%; width: 2px; border-radius: 2px; background: transparent; transition: background .12s; }
.rfp-head > div:hover .rfp-resize::after, .rfp-resize:hover::after { background: #b7c0d6; }
.bimc-grupo { margin-bottom: 1.4rem; }
.bimc-corpo { padding: .85rem 1rem 1rem; }
.bimc-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.bimc-desc-lbl { display: flex; align-items: center; gap: .35rem; color: var(--cor); font-size: .75rem; font-weight: 700; letter-spacing: .04em; margin-bottom: .25rem; }
.bimc-desc-txt { margin: 0; color: #3b4257; font-size: .9rem; line-height: 1.4; }
.bimc-chip { display: inline-flex; align-items: center; gap: .35rem; background: #f2f4f8; border: 1px solid #eceef4; color: #5a6178; font-size: .8rem; border-radius: 6px; padding: .22rem .55rem; }
.bimc-chip b { color: #2b3147; font-weight: 700; }
.bimc-chip svg { color: #626b80; }
.bimc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20,33,61,.10); }
.rfp-grupo-topo:hover { opacity: .82; }
.ns-campo select, .ns-campo textarea, .ns-campo input[type=date], .ns-campo input[type=text] { 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; }
.doc-anexar:hover { background: #eef4ff; }
.doc-anexar input[type=file] { display: none; }
.doc-anexar svg { width: 16px; height: 16px; }
.doc-pend { display: flex; flex-direction: column; gap: .35rem; margin-top: .6rem; }
.doc-pend-item { display: flex; align-items: center; gap: .5rem; background: #f5f7fb; border: 1px solid #eceef4; border-radius: 8px; padding: .4rem .55rem; }
.doc-pend-tam { font-size: .76rem; color: #667085; flex-shrink: 0; }
.doc-anx-ic { color: #2f6fe0; display: flex; flex-shrink: 0; }
.doc-anx-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.doc-anx-por { color: #667085; font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-anx-nome { flex: 1; min-width: 0; font-size: .85rem; color: #2b3147; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-anx-acts { display: flex; gap: .2rem; flex-shrink: 0; }
.doc-anx-btn:hover { background: #e5e9f2; }
.doc-anx-btn.danger:hover { background: #fdecef; color: #d63a54; }
.doc-anx-btn svg { width: 15px; height: 15px; }
.bimc-card-click { cursor: pointer; }
.det-vazio { color: #667085; font-size: .88rem; }
.det-item:hover { background: #eff4ff; border-color: #dbe6ff; transform: translateY(-1px); }
.det-obs .det-desc-lbl { color: #b26a00; }
.dv-card, .hist-item, .det-form { animation: detIn .22s ease both; }
.cfg-linha .cfg-user { flex: 1 1 auto; min-width: 0; }
.doc-perms { display: flex; gap: 1rem; align-items: center; flex-shrink: 0; }
.doc-perm { display: inline-flex; flex-direction: column; align-items: center; gap: .25rem; }
.doc-perm > span { font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #626b80; }
.flt-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.flt-pill { border: 1px solid #dfe3ec; background: #fff; color: #4a5169; border-radius: 999px; padding: .35rem .85rem; font-size: .85rem; cursor: pointer; }
.flt-pill:hover { background: #f4f6fb; }
.flt-pill.on { border-color: #1f2a44; color: #1f2a44; font-weight: 600; box-shadow: inset 0 0 0 1px #1f2a44; }
.rfp-tipo { background: #eef1f7; color: #4a5169; font-size: .8rem; font-weight: 600; padding: .16rem .55rem; border-radius: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bimc-chip.verde { background: #e9f8f0; border-color: #cdeeda; color: #1a7f4b; }
.bimc-chip.verde b { color: #146a3e; }
.bimc-chip.verde svg { color: #2e9e5b; }
.sso-kpi.clicavel { cursor:pointer; transition:transform .14s, box-shadow .14s, background .14s; }
.sso-kpi.clicavel:hover { background:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(20,33,61,.10); }
.sso-kpi:disabled { cursor:default; }
.sso-kpi.verde { border-left-color:#2e9e5b; }
.sso-kpi.amarelo { border-left-color:#b26a00; }
.sso-kpi.vermelho { border-left-color:#e0526b; }
.sso-sit.ok { background:#eef9f2; color:#1e7a45; }
.sso-sit.off { background:#f1f3f8; color:#6b7488; }

/* ── Frota: tanques 3D (Ui/Tanques3D.razor + js/frota3d.js). Um canvas WebGL por cima da grade
   desenha cada tanque no seu slot; pointer-events: none deixa clicar/selecionar o que está embaixo. ── */
.tq3d-wrap { position: relative; }
.tq3d-canvas { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: block; }
.tq3d-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 900px) { .tq3d-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tq3d-grade { grid-template-columns: 1fr; } }
.tq3d-card { background: #fff; border: 1px solid #e6eaf1; border-radius: 14px; padding: .45rem .6rem .55rem; display: flex; flex-direction: column; min-width: 0;
    box-shadow: 0 1px 2px rgba(31, 42, 68, .06), 0 6px 16px rgba(31, 42, 68, .10); }
.tq3d-topo { display: flex; align-items: stretch; gap: .35rem; }
/* tanque deitado (mais largo que alto): cartão baixo, sem sobra em cima e embaixo */
.tq3d-slot { flex: 1 1 auto; height: var(--tq-alt, 165px);position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; }
/* número de litros em cima da superfície do diesel (o JS move o "top" junto com o nível), como no BI */
.tq3d-litros-in { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
    font-size: 1.35rem; font-weight: 800; color: #fff; white-space: nowrap; letter-spacing: -.01em;
    text-shadow: 0 1px 2px rgba(90, 55, 0, .85), 0 0 8px rgba(120, 75, 0, .55); }
.tq3d-litros-in.baixo { color: #b3261e; text-shadow: 0 0 4px rgba(255, 255, 255, .9); }
.tq3d-regua { flex: 0 0 58px; display: flex; flex-direction: column; align-items: flex-start; padding: 2px 0 14px; }
.tq3d-regua-tit { font-size: .62rem; font-weight: 700; color: #8a93a6; margin-bottom: 4px; }
.tq3d-regua-barra { position: relative; flex: 1; width: 5px; margin-left: 4px; border-radius: 3px; background: #eef1f6; }
.tq3d-regua-fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 3px; background: linear-gradient(0deg, #b77a04, #f6c21c); transition: height .9s ease; }
.tq3d-regua-marca { position: absolute; left: -4px; width: 14px; height: 2px; background: #1f2a44; transform: translateY(1px); transition: bottom .9s ease; }
.tq3d-regua-v { position: absolute; left: 11px; transform: translateY(50%); font-size: .6rem; color: #6b7489; white-space: nowrap; }
.tq3d-regua-v::before { content: ""; position: absolute; left: -9px; top: 50%; width: 6px; height: 1px; background: #c9960f; }
.tq3d-info { display: flex; flex-direction: column; gap: 0; text-align: center; align-items: center; min-width: 0; margin-top: .15rem; }
.tq3d-nome { display: block; width: 100%; text-align: center; font-size: .84rem; color: #1f2a44; margin-top: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq3d-info small { font-size: .7rem; color: #8a93a6; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq3d-info em { font-style: normal; font-weight: 700; color: #a8690a; }
.tq3d-barra { width: 80%; height: 16px; background: #eef1f6; border-radius: 999px; overflow: hidden; border: 1px solid #dde3ec; }
.tq3d-barra span { display: block; height: 100%; background: linear-gradient(90deg, #d98e04, #ffd45c); }
/* clique no tanque → balança e abre "Informações do Tanque" (Ui/TanqueInfo.razor) */
.tq3d-card.clicavel { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.tq3d-card.clicavel:hover { border-color: #b9cdf3; box-shadow: 0 1px 2px rgba(31, 42, 68, .06), 0 10px 22px rgba(47, 111, 228, .16); }
.tq3d-card.clicavel:focus-visible { outline: 2px solid #2f6fe4; outline-offset: 2px; }
/* tanque grande (dentro do quadro de informações) */
.tq3d-wrap.destaque .tq3d-grade { grid-template-columns: 1fr; }
.tq3d-wrap.destaque .tq3d-card { border: 0; box-shadow: none; padding: 0; background: transparent; }
.tq3d-wrap.destaque .tq3d-slot { height: 230px; }
.tq3d-wrap.destaque .tq3d-litros-in { font-size: 1.8rem; }
.ns-modal.ti-modal { width: min(1040px, 96vw); }
.ti-cab { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem 1.2rem;
    background: linear-gradient(100deg, #1f5fc9 0%, #2f7ee6 55%, #5aa6f0 100%); color: #fff; }
.ti-tit { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: .01em; }
.ti-per { display: block; font-size: .78rem; opacity: .9; }
.ti-x { border: 0; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ti-x:hover { background: rgba(255, 255, 255, .3); }
.ti-corpo { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 1rem; padding: 1rem 1.2rem 1.2rem; overflow-y: auto; background: #f6f8fc; }
.ti-esq { background: #fff; border: 1px solid #e3e9f3; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.ti-nome { background: #2f7ee6; color: #fff; text-align: center; font-weight: 800; font-size: 1.02rem; padding: .55rem .6rem; line-height: 1.25; }
.ti-nome small { display: block; font-size: .8rem; font-weight: 700; opacity: .9; }
.ti-esq .tq3d-wrap { padding: .4rem .5rem 0; }
.ti-meta { display: flex; flex-direction: column; gap: .15rem; padding: .3rem .8rem .7rem; font-size: .76rem; color: #667085; text-align: center; }
.ti-dir { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.ti-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.ti-kpi { background: #fff; border: 1px solid #cfe0f7; border-radius: 14px; padding: .7rem 1rem .8rem; text-align: center; box-shadow: 0 2px 10px rgba(47, 126, 230, .08); }
.ti-kpi span { display: block; font-size: 1rem; font-weight: 800; color: #1f2a44; }
.ti-kpi b { display: block; font-size: 2rem; font-weight: 500; color: #2f7ee6; line-height: 1.2; margin-top: .2rem; }
.ti-kpi small { display: block; font-size: .74rem; color: #8a93a6; }
.ti-graficos { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.ti-carregando { display: flex; justify-content: center; padding: 2rem; }
@media (max-width: 820px) {
    .ti-corpo { grid-template-columns: 1fr; }
    .ti-graficos { grid-template-columns: 1fr; }
    .ti-kpi b { font-size: 1.5rem; }
}

/* Painel: altura dos tanques calculada pela altura da janela — título + 6 tanques cabem sem rolar
   (≈265 px são o título, a área dos tanques, os nomes e as bolinhas; o resto divide entre as 2 fileiras). */
.fr-tanques-card { --tq-alt: clamp(110px, calc((100dvh - 308px) / 2), 185px); }   /* 300 = título + abas + nomes + bolinhas + margens (medido 04/11) */

/* ── Painel da Frota: tanques em PÁGINAS de 6 (2 fileiras de 3). Setas redondas nas laterais, bolinhas
   embaixo; a última página centraliza o que sobrar (ex.: 3 tanques no meio). A grade mantém a altura das
   2 fileiras para a página não "pular" ao trocar. ── */
.tq3d-wrap.paginado { outline: none; }
.tq3d-wrap.paginado .tq3d-grade { display: flex; flex-wrap: wrap; justify-content: center; align-content: center;
    min-height: calc(2 * (var(--tq-alt, 165px) + 2.5rem) + .75rem); }   /* 2.5rem = nome + respiro do cartão (medido) */
.tq3d-wrap.paginado .tq3d-card { flex: 0 0 calc((100% - 1.5rem) / 3); }
@media (max-width: 900px) { .tq3d-wrap.paginado .tq3d-card { flex-basis: calc((100% - .75rem) / 2); } }
@media (max-width: 560px) { .tq3d-wrap.paginado .tq3d-card { flex-basis: 100%; } }
.tq3d-nav { position: absolute; top: calc(50% - 18px); z-index: 4; width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
    background: #fff; color: #1f5fbf; border: 1px solid #d5e1f3;
    box-shadow: 0 4px 14px rgba(31, 95, 191, .22); transition: transform .15s ease, background .15s, opacity .15s; }
.tq3d-nav.ant { left: -22px; }
.tq3d-nav.ant svg { transform: rotate(180deg); }
.tq3d-nav.prox { right: -22px; }
.tq3d-nav:hover:not(:disabled) { background: #1f5fbf; color: #fff; transform: scale(1.06); }
.tq3d-nav:focus-visible { outline: 2px solid #2f6fe4; outline-offset: 2px; }
.tq3d-nav:disabled { opacity: 0; pointer-events: none; }
.tq3d-paginas { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: .3rem; }
.tq3d-pg { width: 9px; height: 9px; padding: 0; border-radius: 999px; border: 0; background: #c9d6ea; cursor: pointer; transition: width .2s ease, background .2s; }
.tq3d-pg.on { width: 22px; background: #1f5fbf; }
.tq3d-pg:focus-visible { outline: 2px solid #2f6fe4; outline-offset: 2px; }
.tq3d-pg-txt { margin-left: 6px; font-size: .74rem; color: #8a93a6; }
/* fill "backwards" (não "both"): ao terminar, a grade não fica numa camada própria — senão o canvas 3D
   passa por cima dos números de litros (mesma lição das animações do SSO) */
.tq3d-grade.entra-dir { animation: tq3dEntraDir .35s cubic-bezier(.16, 1, .3, 1) backwards; }
.tq3d-grade.entra-esq { animation: tq3dEntraEsq .35s cubic-bezier(.16, 1, .3, 1) backwards; }
@keyframes tq3dEntraDir { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes tq3dEntraEsq { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .tq3d-nav.ant { left: -6px; } .tq3d-nav.prox { right: -6px; } }
@media (prefers-reduced-motion: reduce) { .tq3d-grade.entra-dir, .tq3d-grade.entra-esq { animation: none; } }

/* Título do Painel da Frota com a figura do tanque 3D ao lado */
.fr-titulo { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.fr-titulo-icone { width: 52px; height: 52px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(31, 42, 68, .14)); }
@media (max-width: 560px) { .fr-titulo-icone { width: 48px; height: 48px; } }

/* ── Painel da Frota: 3 ABAS no estilo do Chrome (Saldo dos Tanques | Consumo Total | Gestão de Estoque).
   A aba ativa é branca e "emenda" no conteúdo; as outras ficam na faixa cinza-azulada. A área tem a altura
   das 2 fileiras de tanques: trocar de aba não mexe no resto da tela e a página não rola. ── */
.fr-tanques-card.fr-abas-card { padding: 0; overflow: hidden; }
.fr-abas { display: flex; align-items: flex-end; gap: 0; padding: 5px 10px 0; background: #e9eef6; border-bottom: 1px solid #e1e7f0; }
.fr-aba { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem 1.05rem .5rem; margin-bottom: -1px;
    border: 0; border-radius: 11px 11px 0 0; background: transparent; color: #5b6578; font-size: .88rem; font-weight: 650;
    cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.fr-aba img { width: 20px; height: 20px; object-fit: contain; }
.fr-aba:not(.on):hover { background: rgba(255, 255, 255, .6); color: #1f2a44; }
.fr-aba + .fr-aba:not(.on)::before { content: ""; position: absolute; left: 0; top: 28%; height: 44%; width: 1px; background: #c9d3e1; }
.fr-aba.on + .fr-aba::before { display: none; }
.fr-aba.on { background: #fff; color: #1f2a44; box-shadow: 0 -1px 4px rgba(31, 42, 68, .06); z-index: 1; }
/* curvinhas na base da aba ativa (como no Chrome) */
.fr-aba.on::before, .fr-aba.on::after { content: ""; position: absolute; bottom: 0; width: 12px; height: 12px; background: transparent; pointer-events: none; }
.fr-aba.on::before { left: -12px; border-bottom-right-radius: 12px; box-shadow: 5px 5px 0 5px #fff; }
.fr-aba.on::after { right: -12px; border-bottom-left-radius: 12px; box-shadow: -5px 5px 0 5px #fff; }
.fr-aba:focus-visible { outline: 2px solid #2f6fe4; outline-offset: -3px; }
.fr-abas-info { margin-left: auto; padding: 0 .4rem .6rem; font-size: .82rem; color: #667085; white-space: nowrap; }
/* altura = 2 fileiras de tanques + bolinhas da paginação (a aba dos tanques não rola por dentro) */
.fr-aba-corpo { padding: .6rem 1rem .55rem; height: calc(2 * (var(--tq-alt, 165px) + 2.5rem) + .75rem + 2rem); overflow: auto; box-sizing: content-box; }
/* aba Consumo Total: período + 4 indicadores numa linha; embaixo 3 colunas (por dia, por obra, por equipamento) */
.fr-consumo-topo { display: flex; align-items: center; gap: .8rem 1rem; flex-wrap: wrap; }
.fr-consumo-topo .fr-periodo { margin: 0; }
.fr-consumo-topo .fr-kpis { flex: 1 1 520px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin: 0; }
.fr-consumo-topo .fr-kpi { padding: .5rem .75rem; }
.fr-consumo-topo .fr-kpi b { font-size: 1.15rem; }
.fr-consumo-topo .fr-kpi small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-consumo-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: .8rem; }
.fr-ranking .fr-tabela { font-size: .82rem; }
.fr-ranking .fr-mais { margin-top: .4rem; }
@media (max-width: 1150px) { .fr-consumo-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
    .fr-consumo-grade { grid-template-columns: 1fr; }
    .fr-consumo-topo .fr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fr-aba span { display: none; }               /* celular: só o ícone; o nome aparece no title/leitor de tela */
    .fr-aba-corpo { height: auto; min-height: 0; }
}
/* aba Gestão de Estoque: cartões maiores com entradas/saídas */
.fr-estoque-grande { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .7rem; margin-top: .4rem; }
.fr-estoque-grande .fr-est { padding: .9rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.fr-estoque-grande .fr-est b { font-size: 1.5rem; }
.fr-estoque-grande .fr-est small { color: #8a93a6; font-size: .76rem; }

/* Painel da Frota: título mais junto do cartão das abas (ganha altura para os tanques) */
.fr .rfp-topo:has(.fr-titulo-icone) { margin-bottom: .6rem; }
/* subtítulo SEMPRE embaixo do título, em todas as abas (cabe ao lado da figura, não aumenta a altura) */
.fr-titulo .rfp-sub { margin: 0; }

/* Painel: a aba dos tanques não rola por dentro (as setas ficam dentro da borda do cartão) e o cartão das abas
   não deixa margem sobrando embaixo (a página não rola). */
.fr-aba-corpo:has(.tq3d-wrap) { overflow: visible; }
.fr-abas-card .tq3d-nav.ant { left: -12px; }
.fr-abas-card .tq3d-nav.prox { right: -12px; }
.fr-tanques-card.fr-abas-card { margin-bottom: 0; }
/* sombra mais forte nos cartões (tanques, indicadores, estoque) — pedido do Julio, 04/11 */
.fr-abas-card .tq3d-card { box-shadow: 0 2px 4px rgba(31, 42, 68, .10), 0 10px 26px rgba(31, 42, 68, .20); border-color: #dde4ee; }
.fr-abas-card .tq3d-card.clicavel:hover { box-shadow: 0 3px 6px rgba(31, 42, 68, .12), 0 14px 32px rgba(47, 111, 228, .26); }
.fr-abas-card .fr-kpi, .fr-abas-card .fr-est, .fr-abas-card .gr-card { box-shadow: 0 2px 4px rgba(31, 42, 68, .08), 0 8px 22px rgba(31, 42, 68, .14); }
.fr-tanques-card.fr-abas-card { box-shadow: 0 4px 10px rgba(31, 42, 68, .08), 0 14px 34px rgba(31, 42, 68, .12); }
/* Painel: sem sobra embaixo do cartão das abas (a página não rola) */
.rfp.fr:has(.fr-abas-card) { padding-bottom: .4rem; }

/* Borda animada tipo "carregando" ao passar o mouse / focar um tanque (pedido do Julio, 04/11): um traço de luz
   azul SETPAR com rastro percorre a borda POR DENTRO de cada cartão de tanque (fina, 1,5 px). Só a variável de
   ângulo anima — leve; some com "reduzir movimento". */
@property --neon-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.fr-abas-card .tq3d-card.clicavel::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3;
    background: conic-gradient(from var(--neon-ang), transparent 0 62%, rgba(111, 177, 255, .35) 74%, #4f9bff 88%, #1f5fbf 96%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .25s ease;
}
/* só no cartão com o mouse em cima (ou focado pelo teclado): o traço aparece e gira devagar */
.fr-abas-card .tq3d-card.clicavel:hover::after, .fr-abas-card .tq3d-card.clicavel:focus-visible::after {
    opacity: 1; animation: neonGira 4.5s linear infinite;
}
.fr-abas-card .tq3d-card.clicavel:focus-visible { outline: none; }
@keyframes neonGira { to { --neon-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) {
    .fr-abas-card .tq3d-card.clicavel:hover::after, .fr-abas-card .tq3d-card.clicavel:focus-visible::after { animation: none; }
}
/* aba Consumo: tabela compacta dentro do cartão (nome do equipamento sempre visível) */
.fr-ranking .fr-tabela { overflow: hidden; }
.fr-ranking .fr-lin.fr-cons { grid-template-columns: minmax(0, 1.7fr) minmax(0, .9fr) minmax(0, .55fr) minmax(0, .6fr) minmax(0, .6fr); gap: .35rem; padding: .4rem .55rem; }
.fr-ranking .fr-lin.fr-cons > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-ranking .fr-lin.fr-cab { font-size: .68rem; }
/* a área dos tanques recebe foco (setas do teclado) mas não ganha contorno azul em volta de tudo */
.tq3d-wrap:focus, .tq3d-wrap:focus-visible, .fr-aba-corpo:focus { outline: none; box-shadow: none; }
/* cada cartão de tanque é a referência da borda animada (sem isto ela se estica até a área inteira) */
.tq3d-card { position: relative; }

/* ── Aba "Consumo Total" (Ui/FrotaConsumo.razor): ícones 3D Fluent, cores por indicador, entrada animada em
   sequência, gráficos SVG que se desenham, barras que crescem, ranking com medalhas e EXPANDIR em quadro grande.
   Ocupa a altura da aba (a página não rola). ── */
.fc { display: flex; flex-direction: column; gap: .65rem; height: 100%; min-height: 0; }
.fc-topo { display: flex; flex-direction: column; gap: .55rem; }
.fc-periodo { align-self: flex-start; display: inline-flex; align-items: center; gap: 3px; padding: 3px 4px 3px 8px; border-radius: 12px; background: #eef2f8; }
.fc-periodo img { width: 24px; height: 24px; margin-right: 4px; }
.fc-seg { border: 0; background: transparent; padding: .32rem .8rem; border-radius: 9px; font-size: .84rem; font-weight: 650; color: #5b6578; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.fc-seg:hover { color: #1f2a44; }
.fc-seg.on { background: #fff; color: #1f5fbf; box-shadow: 0 2px 6px rgba(31, 42, 68, .14); }
.fc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.fc-kpi { --cor: #2f7ee6; --tinta: rgba(47, 126, 230, .10); position: relative; display: flex; align-items: center; gap: .65rem; text-align: left;
    padding: .55rem .8rem; border-radius: 14px; border: 1px solid #e6ebf3; overflow: hidden; font: inherit; color: inherit;
    background: linear-gradient(135deg, var(--tinta), #fff 62%);
    box-shadow: 0 2px 4px rgba(31, 42, 68, .06), 0 8px 20px rgba(31, 42, 68, .10);
    transition: transform .2s ease, box-shadow .2s ease; animation: fcSobe .45s cubic-bezier(.16, 1, .3, 1) backwards; }
.fc-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cor); }
.fc-kpi img { width: 40px; height: 40px; flex: 0 0 auto; filter: drop-shadow(0 3px 5px rgba(31, 42, 68, .18)); transition: transform .25s ease; }
.fc-kpi div { display: flex; flex-direction: column; min-width: 0; }
.fc-kpi span { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #667085; }
.fc-kpi b { font-size: 1.32rem; font-weight: 800; color: #1f2a44; line-height: 1.15; font-variant-numeric: tabular-nums; }
.fc-kpi small { font-size: .74rem; color: #8a93a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-kpi:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(31, 42, 68, .08), 0 14px 28px color-mix(in srgb, var(--cor) 28%, transparent); }
.fc-kpi:hover img { transform: scale(1.1) rotate(-4deg); }
button.fc-kpi { cursor: pointer; }
.fc-kpi.azul  { --cor: #2f7ee6; --tinta: rgba(47, 126, 230, .12); }
.fc-kpi.verde { --cor: #22a06b; --tinta: rgba(34, 160, 107, .12); }
.fc-kpi.ambar { --cor: #f59e0b; --tinta: rgba(245, 158, 11, .14); }
.fc-kpi.roxo  { --cor: #7c5cff; --tinta: rgba(124, 92, 255, .12); }
.fc-kpi:nth-child(2) { animation-delay: .06s; }
.fc-kpi:nth-child(3) { animation-delay: .12s; }
.fc-kpi:nth-child(4) { animation-delay: .18s; }
.fc-kpi.pulsa { animation: fcSobe .45s cubic-bezier(.16, 1, .3, 1) .12s backwards, fcPulsa 2.2s ease-in-out 1s infinite; }
@keyframes fcPulsa { 0%, 100% { box-shadow: 0 2px 4px rgba(31, 42, 68, .06), 0 0 0 0 rgba(245, 158, 11, 0); } 50% { box-shadow: 0 2px 4px rgba(31, 42, 68, .06), 0 0 0 4px rgba(245, 158, 11, .22); } }
@keyframes fcSobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.fc-grade { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: .65rem; }
.fc-card { display: flex; flex-direction: column; min-height: 0; padding: .55rem .75rem .6rem; border-radius: 14px; background: #fff; border: 1px solid #e6ebf3;
    box-shadow: 0 2px 4px rgba(31, 42, 68, .06), 0 8px 20px rgba(31, 42, 68, .10);
    transition: transform .2s ease, box-shadow .2s ease; animation: fcSobe .5s cubic-bezier(.16, 1, .3, 1) .2s backwards; }
.fc-card:nth-child(2) { animation-delay: .28s; }
.fc-card:nth-child(3) { animation-delay: .36s; }
.fc-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(31, 42, 68, .08), 0 14px 30px rgba(31, 42, 68, .16); }
.fc-card-cab { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.fc-card-cab img { width: 28px; height: 28px; filter: drop-shadow(0 2px 4px rgba(31, 42, 68, .16)); }
.fc-card-cab h3 { flex: 1; margin: 0; font-size: .92rem; font-weight: 750; color: #1f2a44; }
.fc-expandir { width: 30px; height: 30px; border-radius: 9px; border: 1px solid #e1e7f0; background: #f6f8fc; color: #5b6578; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s, transform .15s; }
.fc-expandir:hover { background: #1f5fbf; color: #fff; border-color: #1f5fbf; transform: scale(1.06); }
.fc-card-corpo { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.fc-vazio { margin: auto; color: #8a93a6; font-size: .85rem; }
.fc-mais { margin: .3rem 0 0; font-size: .74rem; color: #2f7ee6; font-weight: 600; }

/* gráfico por dia (SVG) */
.fc-svg { width: 100%; flex: 1 1 auto; min-height: 90px; display: block; overflow: visible; }
.fc-svg.grande { height: min(380px, calc(90dvh - 170px)); flex: none; }
.fc-grade-linha { stroke: #edf1f6; stroke-width: 1; }
.fc-area { opacity: 0; animation: fcAparece .8s ease .5s forwards; }
.fc-linha { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fcDesenha 1.2s ease-out .3s forwards; }
.fc-linha.saida { stroke: #2f7ee6; }
.fc-linha.entrada { stroke: #22a06b; stroke-width: 2; animation-delay: .6s; }
.fc-ponto { fill: #fff; stroke: #2f7ee6; stroke-width: 2; opacity: 0; animation: fcAparece .3s ease 1.2s forwards; cursor: pointer; }
.fc-ponto:hover { fill: #2f7ee6; }
@keyframes fcDesenha { to { stroke-dashoffset: 0; } }
@keyframes fcAparece { to { opacity: 1; } }
.fc-eixo { display: flex; justify-content: space-between; font-size: .68rem; color: #8a93a6; margin-top: 2px; }
.fc-legenda { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: #5b6578; margin-top: 3px; }
.fc-legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.fc-legenda i.saida { background: #2f7ee6; }
.fc-legenda i.entrada { background: #22a06b; margin-left: .4rem; }
.fc-legenda em { margin-left: auto; font-style: normal; color: #8a93a6; }

/* barras por obra */
.fc-barras { display: flex; flex-direction: column; gap: .5rem; }
.fc-barra { animation: fcSobe .4s ease backwards; animation-delay: var(--atraso, 0ms); }
.fc-barra-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; align-items: baseline; font-size: .8rem; }
.fc-barra-cab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1f2a44; font-weight: 600; }
.fc-barra-cab b { font-variant-numeric: tabular-nums; color: #1f2a44; }
.fc-barra-cab em { font-style: normal; font-size: .72rem; color: #8a93a6; min-width: 2.6em; text-align: right; }
.fc-barra-trilho { height: 9px; border-radius: 999px; background: #eef2f8; overflow: hidden; margin-top: 3px; }
.fc-barra-trilho.fino { height: 6px; }
.fc-barra-trilho i { display: block; height: 100%; border-radius: 999px; transform-origin: left center;
    animation: fcCresce .9s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(var(--atraso, 0ms) + .35s);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .35)); }
@keyframes fcCresce { from { transform: scaleX(0); } }

/* quadro expandido */
.fc-overlay { position: fixed; inset: 0; z-index: 1300; background: rgba(15, 23, 42, .45); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 1.2rem; outline: none; animation: fcFundo .2s ease both; }
@keyframes fcFundo { from { opacity: 0; } to { opacity: 1; } }
.fc-grande { width: min(980px, 96vw); max-height: 90dvh; display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .3); animation: fcPop .32s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes fcPop { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }
.fc-grande-cab { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem; border-bottom: 1px solid #eef1f6;
    background: linear-gradient(100deg, #f3f7fd, #fff 60%); }
.fc-grande-cab h3 { margin: 0; font-size: 1.1rem; font-weight: 800; color: #1f2a44; }
.fc-grande-per { margin-left: auto; font-size: .82rem; color: #667085; }
.fc-fechar { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #f1f4f9; color: #5b6578; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fc-fechar:hover { background: #e3e9f2; }
.fc-grande-corpo { padding: 1rem 1.2rem 1.2rem; overflow: auto; }
.fc-grande-corpo .fc-barras, .fc-grande-corpo .fc-rank { gap: .7rem; }
.fc-grande-corpo .fc-barra-cab, .fc-grande-corpo .fc-rank-cab { font-size: .9rem; }

@media (max-width: 1150px) { .fc-grade { grid-template-columns: 1fr 1fr; } .fc-card.fc-uso { grid-column: 1 / -1; } }
@media (max-width: 720px) { .fc-kpis { grid-template-columns: 1fr 1fr; } .fc-grade { grid-template-columns: 1fr; } .fc-svg { min-height: 160px; } }
@media (prefers-reduced-motion: reduce) {
    .fc-kpi, .fc-card, .fc-barra, .fc-rank-lin, .fc-barra-trilho i, .fc-area, .fc-ponto, .fc-overlay, .fc-grande { animation: none !important; opacity: 1; }
    .fc-linha { animation: none; stroke-dashoffset: 0; }
}

/* Uso dos equipamentos: cartões como os do BI (cabeçalho azul + número grande), 2×2 no cartão; 4 lado a lado no expandido */
.fu-tiles { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: .5rem; }
.fu-tiles.grande { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; margin-bottom: 1rem; }
.fu-tile { --cor: #1f6fd6; display: flex; flex-direction: column; min-height: 0; border-radius: 12px; overflow: hidden; background: #fff;
    border: 1px solid color-mix(in srgb, var(--cor) 45%, #ffffff);
    box-shadow: 0 2px 4px rgba(31, 42, 68, .06), 0 6px 16px color-mix(in srgb, var(--cor) 18%, transparent);
    animation: fcSobe .4s ease backwards; transition: transform .2s ease, box-shadow .2s ease; }
.fu-tile:nth-child(2) { animation-delay: .07s; }
.fu-tile:nth-child(3) { animation-delay: .14s; }
.fu-tile:nth-child(4) { animation-delay: .21s; }
.fu-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(31, 42, 68, .08), 0 12px 24px color-mix(in srgb, var(--cor) 30%, transparent); }
.fu-tile.azul { --cor: #1f6fd6; }
.fu-tile.verde { --cor: #1f9a63; }
.fu-tile.roxo { --cor: #6d4fe6; }
.fu-tile.ambar { --cor: #d98a06; }
.fu-tile-cab { display: flex; align-items: center; justify-content: center; gap: .35rem; padding: .3rem .5rem; color: #fff; text-align: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 82%, #ffffff), var(--cor)); }
.fu-tile-cab img { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.fu-tile-cab span { font-size: .72rem; font-weight: 750; line-height: 1.15; }
.fu-tile-num { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .2rem .4rem .35rem; }
.fu-tile-num b { font-size: 1.35rem; font-weight: 800; color: color-mix(in srgb, var(--cor) 70%, #10213f); font-variant-numeric: tabular-nums; line-height: 1.1; }
.fu-tile-num small { font-size: .7rem; font-weight: 700; color: #8a93a6; text-transform: uppercase; letter-spacing: .04em; }
.fu-tiles.grande .fu-tile-cab span { font-size: .85rem; }
.fu-tiles.grande .fu-tile-num { padding: .9rem .5rem; }
.fu-tiles.grande .fu-tile-num b { font-size: 2rem; }
.fu-tabela { border: 1px solid #e6ebf3; border-radius: 12px; overflow: hidden; font-size: .84rem; }
.fu-lin { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(6, minmax(0, 1fr)); gap: .5rem; padding: .45rem .8rem; border-top: 1px solid #eef1f6; }
.fu-lin span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fu-lin span:not(:first-child) { text-align: right; }
.fu-lin.fu-cab { border-top: 0; background: #f4f7fb; font-size: .72rem; font-weight: 750; color: #667085; text-transform: uppercase; letter-spacing: .03em; }
.fu-lin:not(.fu-cab):hover { background: #f8fafd; }
@media (max-width: 720px) { .fu-tiles.grande { grid-template-columns: 1fr 1fr; } .fu-lin { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); } .fu-lin span:nth-child(n+5) { display: none; } }

/* Consumo: 3 indicadores (sem "Para conferir") e quadros de uso SIMÉTRICOS — mesma altura de cabeçalho, título numa linha */
.fc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fu-tile-cab { height: 30px; flex: 0 0 30px; padding: 0 .5rem; justify-content: center; }
.fu-tile-cab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .76rem; }
.fu-tiles.grande .fu-tile-cab { height: 38px; flex-basis: 38px; }
.fu-tile-num { justify-content: center; }
@media (max-width: 720px) { .fc-kpis { grid-template-columns: 1fr; } }
.fu-tile-cab { gap: .28rem; padding: 0 .35rem; }
.fu-tile-cab img { width: 18px; height: 18px; }
.fu-tile-cab span { font-size: .72rem; }
.fu-tiles.grande .fu-tile-cab img { width: 24px; height: 24px; }
.fu-tiles.grande .fu-tile-cab span { font-size: .88rem; }

/* Números que SEMPRE cabem numa linha: a letra diminui conforme a quantidade de dígitos (--dig, vem do C#) e a
   largura do cartão (unidades cqi do container). Com os números de hoje, o tamanho fica o mesmo de antes. */
.fc-kpi div { container-type: inline-size; }
.fc-kpi b { white-space: nowrap; font-size: min(1.32rem, calc(100cqi / (var(--dig, 6) * .6))); }
.fu-tile-num { container-type: inline-size; width: 100%; }
.fu-tile-num b { white-space: nowrap; font-size: min(1.35rem, calc(92cqi / (var(--dig, 4) * .62))); }
.fu-tiles.grande .fu-tile-num b { font-size: min(2rem, calc(92cqi / (var(--dig, 4) * .62))); }
.fc-kpi div { flex: 1 1 auto; min-width: 0; }

/* Filtros do Painel da Frota: botão "Filtros" no canto das abas e um popup pequeno e organizado — cabeçalho
   suave, Período (datas + régua de dois cursores + atalhos) e Obra / Equipamento / Tanque em linhas com ícone.
   Fecha clicando fora ou com Esc. Com o popup aberto, o cartão das abas deixa ele "vazar" para baixo. */
.ff-wrap { position: relative; align-self: center; margin: 0 .2rem 5px .3rem; }
.ff-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; padding: 0 .75rem; border-radius: 999px; cursor: pointer;
    background: #fff; border: 1px solid #d9e1ee; color: #34405a; font-size: .82rem; font-weight: 650;
    box-shadow: 0 1px 2px rgba(31, 42, 68, .06); transition: border-color .15s ease, box-shadow .15s ease, color .15s ease; }
.ff-btn:hover { border-color: #9db8e6; box-shadow: 0 2px 8px rgba(31, 111, 214, .14); }
.ff-btn:focus-visible { outline: 2px solid #2f6fe0; outline-offset: 2px; }
.ff-btn.ativo { border-color: #2f6fe0; color: #1f56b8; background: #f2f7ff; }
.ff-btn-ic { display: inline-flex; color: #2f6fe0; }
.fr-abas-card:has(.ff-pop) { overflow: visible; }
.fr-abas { border-top-left-radius: inherit; border-top-right-radius: inherit; }

.ff-pop { position: absolute; top: calc(100% + 9px); right: 0; z-index: 1061; width: min(318px, calc(100vw - 32px));
    max-height: calc(100dvh - 150px); overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding: .5rem;
    background: #fff; border: 1px solid #e3e8f1; border-radius: 18px;
    box-shadow: 0 20px 44px rgba(20, 33, 61, .2), 0 3px 10px rgba(20, 33, 61, .07); animation: ffAbre .18s cubic-bezier(.2, .9, .3, 1.2) backwards; }
@keyframes ffAbre { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.ff-topo { display: flex; align-items: center; gap: .55rem; padding: .55rem .65rem; border-radius: 13px;
    background: linear-gradient(135deg, #eaf2ff, #f4f0ff); }
.ff-topo-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; color: #fff;
    background: linear-gradient(135deg, #4c8cf0, #6d4fe6); box-shadow: 0 3px 8px rgba(76, 140, 240, .35); }
.ff-topo-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ff-topo-txt b { font-size: .92rem; color: #14213d; }
.ff-topo-txt small { font-size: .7rem; color: #6b7590; }
.ff-chip { margin-left: auto; padding: .15rem .55rem; border-radius: 999px; background: #fff; color: #1f56b8; font-size: .7rem; font-weight: 750;
    box-shadow: 0 1px 3px rgba(31, 42, 68, .1); white-space: nowrap; }

.ff-sec { display: flex; flex-direction: column; gap: .45rem; padding: .55rem .6rem .6rem; border-radius: 13px; background: #f7f9fc; border: 1px solid #edf1f7; }
.ff-sec-cab { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 750; color: #34405a; }
.ff-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; flex: none; }
.ff-ic svg { width: 14px; height: 14px; }
.ff-ic.azul { background: #e3eeff; color: #1f6fd6; }
.ff-ic.verde { background: #def5ea; color: #1f9a63; }
.ff-ic.roxo { background: #ece7ff; color: #6d4fe6; }
.ff-ic.ambar { background: #fff1d6; color: #c47a00; }

.ff-datas { display: flex; align-items: flex-end; gap: .3rem; }
.ff-data { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .12rem; margin: 0; }
.ff-data small { font-size: .64rem; font-weight: 700; color: #8a93a6; text-transform: uppercase; letter-spacing: .04em; padding-left: .2rem; }
.ff-data input { width: 100%; min-height: 30px; border: 1px solid #dfe5ef; border-radius: 9px; padding: .15rem .35rem; font-size: .78rem; color: #2b3147; background: #fff; }
.ff-data input:focus { outline: 2px solid #c9dafa; border-color: #2f6fe0; }
.ff-seta { color: #a3adc2; font-size: .8rem; padding-bottom: .4rem; }

/* Régua: dois <input range> sobrepostos; só as bolinhas recebem o mouse. */
.ff-regua { position: relative; height: 20px; margin: 0 .3rem; }
.ff-trilho { position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 4px; background: #e1e7f0; }
.ff-faixa { position: absolute; top: 0; bottom: 0; left: var(--a); right: calc(100% - var(--b)); border-radius: 4px; background: linear-gradient(90deg, #4c8cf0, #6d4fe6); }
.ff-regua input[type=range] { position: absolute; inset: 0; width: 100%; height: 20px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.ff-regua input[type=range]::-webkit-slider-runnable-track { background: none; border: 0; }
.ff-regua input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; cursor: grab;
    background: #fff; border: 2px solid #4c8cf0; box-shadow: 0 2px 5px rgba(20, 33, 61, .22); transition: transform .12s ease; }
.ff-regua input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.ff-regua input[type=range]::-moz-range-thumb { pointer-events: auto; width: 12px; height: 12px; border-radius: 50%; cursor: grab;
    background: #fff; border: 2px solid #4c8cf0; box-shadow: 0 2px 5px rgba(20, 33, 61, .22); }
.ff-regua input[type=range]::-moz-range-track { background: none; }
.ff-regua input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid #c9dafa; outline-offset: 2px; }

.ff-atalhos { display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: #e9eef6; }
.ff-atalhos button { flex: 1 1 0; min-height: 24px; border: 0; border-radius: 999px; background: none; color: #5a6680; font-size: .7rem; font-weight: 700;
    cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.ff-atalhos button:hover { color: #1f56b8; }
.ff-atalhos button.on { background: #fff; color: #1f56b8; box-shadow: 0 1px 3px rgba(31, 42, 68, .14); }

.ff-linhas { gap: .4rem; }
.ff-linha { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: .4rem; }
.ff-linha .cbx-campo { min-height: 30px; padding: .2rem .55rem; border-radius: 9px; font-size: .78rem; }
.ff-linha .cbx-campo > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-linha .cbx { min-width: 0; }

.ff-limpar { align-self: center; display: inline-flex; align-items: center; gap: .35rem; min-height: 28px; padding: 0 .8rem; border-radius: 999px; cursor: pointer;
    border: 1px solid #f3d2cf; background: #fff6f5; color: #c9372c; font-size: .74rem; font-weight: 700; transition: background .15s ease; }
.ff-limpar:hover { background: #ffe9e7; }
@media (max-width: 720px) { .ff-btn span:not(.ff-btn-ic):not(.flt-badge) { display: none; } }
@media (prefers-reduced-motion: reduce) { .ff-pop { animation: none; } }

/* Gestão de Estoque (painel da Frota): 3 números no topo (mesmo visual da aba Consumo) e os produtos em cartões
   que se marcam com um clique — galão na cor do produto, saldo grande, barra do que resta e a situação. */
.fe { display: flex; flex-direction: column; gap: .65rem; height: 100%; min-height: 0; }
.fc-kpi.vermelho { --cor: #e04545; --tinta: rgba(224, 69, 69, .1); }
.fc-kpi b.fe-mais { color: #15803d; }
.fc-kpi b.fe-menos { color: #c0392b; }
.fe-produtos { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .5rem; padding: .6rem .7rem .7rem;
    background: #fff; border: 1px solid #e3e9f2; border-radius: 14px;
    box-shadow: 0 2px 4px rgba(31, 42, 68, .05), 0 8px 22px rgba(31, 42, 68, .08); animation: fcSobe .45s cubic-bezier(.16, 1, .3, 1) .15s backwards; }
.fe-cab { display: flex; align-items: center; gap: .5rem; min-height: 28px; }
.fe-cab img { filter: drop-shadow(0 2px 3px rgba(31, 42, 68, .2)); }
.fe-cab h3 { margin: 0; font-size: .98rem; font-weight: 800; color: #1f2a44; }
.fe-dica { font-size: .76rem; color: #8a93a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fe-legenda { margin-left: auto; display: flex; gap: .7rem; font-size: .72rem; color: #667085; white-space: nowrap; }
.fe-legenda span { display: inline-flex; align-items: center; gap: .3rem; }
.fe-legenda i { width: 8px; height: 8px; border-radius: 50%; }
.fe-legenda i.ok { background: #22a06b; } .fe-legenda i.baixo { background: #f59e0b; } .fe-legenda i.zerado { background: #e04545; }
.fe-limpar { border: 1px solid #d9e1ee; background: #fff; color: #1f56b8; font-size: .74rem; font-weight: 700; border-radius: 999px; min-height: 26px; padding: 0 .7rem; cursor: pointer; }
.fe-limpar:hover { background: #f2f7ff; }

.fe-grade { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: .55rem; padding: 2px; }
.fe-prod { --cor: #64748b; --sit: #22a06b; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto auto;
    column-gap: .55rem; row-gap: .25rem; align-items: center; text-align: left; padding: .55rem .6rem .5rem; cursor: pointer; min-height: 0;
    border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--cor) 22%, #e6ebf3);
    background: linear-gradient(160deg, color-mix(in srgb, var(--cor) 9%, #ffffff), #ffffff 60%);
    box-shadow: 0 1px 2px rgba(31, 42, 68, .05), 0 4px 12px color-mix(in srgb, var(--cor) 12%, transparent);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .2s ease, filter .2s ease;
    animation: fcSobe .4s cubic-bezier(.16, 1, .3, 1) backwards; }
.fe-prod:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(31, 42, 68, .07), 0 12px 24px color-mix(in srgb, var(--cor) 26%, transparent); }
.fe-prod:hover .fe-galao { transform: rotate(-6deg) scale(1.06); }
.fe-prod:focus-visible { outline: 2px solid #2f6fe0; outline-offset: 2px; }
.fe-prod.marcado { border-color: #2f6fe0; box-shadow: 0 0 0 3px rgba(47, 111, 224, .16), 0 8px 20px rgba(47, 111, 224, .18); }
.fe-prod.apagado { opacity: .55; filter: saturate(.6); }
.fe-prod.apagado:hover { opacity: .85; }
.fe-prod.baixo { --sit: #f59e0b; }
.fe-prod.zerado { --sit: #e04545; }
.fe-marca { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid #c9d3e3; background: #fff; color: #fff; transition: background .15s ease, border-color .15s ease; }
.fe-marca svg { width: 12px; height: 12px; }
.fe-prod.marcado .fe-marca { background: #2f6fe0; border-color: #2f6fe0; }
.fe-galao { grid-row: 1 / span 2; display: inline-flex; color: var(--cor); filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--cor) 35%, transparent)); transition: transform .25s ease; }
.fe-nome { grid-column: 2; align-self: start; padding-right: 1.1rem; font-size: .76rem; font-weight: 700; color: #34405a; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fe-saldo { grid-column: 2; align-self: end; display: flex; align-items: baseline; gap: .25rem; min-width: 0; container-type: inline-size; }
.fe-saldo b { font-size: 1.45rem; font-weight: 800; line-height: 1; color: color-mix(in srgb, var(--sit) 55%, #10213f); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fe-saldo small { font-size: .68rem; font-weight: 700; color: #8a93a6; text-transform: uppercase; }
.fe-barra { grid-column: 1 / -1; height: 5px; border-radius: 5px; background: #edf1f7; overflow: hidden; }
.fe-barra i { display: block; height: 100%; border-radius: 5px; background: var(--sit); transform-origin: left; animation: feBarra .8s cubic-bezier(.16, 1, .3, 1) .2s backwards; }
@keyframes feBarra { from { transform: scaleX(0); } }
.fe-rodape { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: .3rem; font-size: .68rem; color: #8a93a6; white-space: nowrap; }
.fe-sit { font-style: normal; font-weight: 800; color: var(--sit); padding: .05rem .45rem; border-radius: 999px; background: color-mix(in srgb, var(--sit) 12%, transparent); }
.fe-prod.zerado .fe-sit { animation: fePisca 1.6s ease-in-out infinite; }
@keyframes fePisca { 50% { background: color-mix(in srgb, var(--sit) 26%, transparent); } }
@media (max-width: 1100px) { .fe-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; } .fe-legenda { display: none; } }
@media (max-width: 720px) { .fe-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .fe-prod, .fe-barra i, .fe-produtos, .fe-prod.zerado .fe-sit { animation: none; } }
.fe-galao svg { width: 46px; height: 50px; }
.fe-prod { column-gap: .65rem; }
.fe-saldo b { font-size: 1.6rem; }

/* Estoque com muitos produtos: páginas de 10 (setas nas laterais + bolinhas, como nos tanques) e busca no cabeçalho. */
.fe-pag { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; outline: none; }
.fe-pag .fe-grade { flex: 1 1 auto; }
.fe-pag .tq3d-nav.ant { left: -24px; }
.fe-pag .tq3d-nav.prox { right: -24px; }
.fe-grade.entra-dir { animation: tq3dEntraDir .35s cubic-bezier(.16, 1, .3, 1) backwards; }
.fe-grade.entra-esq { animation: tq3dEntraEsq .35s cubic-bezier(.16, 1, .3, 1) backwards; }
.fe-paginas { margin-top: 0; }
.fe-busca { display: inline-flex; align-items: center; gap: .3rem; margin: 0 0 0 .4rem; padding: 0 .55rem; min-height: 28px; border-radius: 999px;
    border: 1px solid #dfe5ef; background: #f7f9fc; color: #8a93a6; transition: border-color .15s ease, background .15s ease; }
.fe-busca:focus-within { border-color: #2f6fe0; background: #fff; }
.fe-busca svg { width: 14px; height: 14px; }
.fe-busca input { border: 0; outline: 0; background: none; width: 130px; font-size: .78rem; color: #2b3147; }
@media (prefers-reduced-motion: reduce) { .fe-grade.entra-dir, .fe-grade.entra-esq { animation: none; } }
/* Cada fileira centralizada (a última página com poucos produtos fica no meio, como nos tanques). */
.fe-pag .fe-grade { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; }
.fe-pag .fe-prod { flex: 0 0 calc((100% - 4 * .55rem) / 5); height: calc((100% - .55rem) / 2); }
@media (max-width: 1100px) { .fe-pag .fe-prod { flex-basis: calc((100% - 2 * .55rem) / 3); height: auto; } }
@media (max-width: 720px) { .fe-pag .fe-prod { flex-basis: calc((100% - .55rem) / 2); } }
/* Título do painel troca junto com a aba: entra suave (figura e texto). */
.fr-titulo { animation: frTituloEntra .35s cubic-bezier(.16, 1, .3, 1) backwards; }
@keyframes frTituloEntra { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .fr-titulo { animation: none; } }

/* Consumo por mês: barras verticais M01…M12, uma cor por mês, crescem de baixo para cima; valor curto em cima;
   meses que ainda não chegaram ficam tracejados; o maior mês ganha brilho. Ano num seletor ‹ 2026 › no cabeçalho. */
.fm-ano { margin-left: auto; margin-right: .35rem; display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: #eef2f8; }
.fm-ano b { min-width: 2.6rem; text-align: center; font-size: .8rem; font-weight: 800; color: #1f56b8; }
.fm-ano button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; color: #1f56b8; font-size: .95rem; line-height: 1; cursor: pointer;
    box-shadow: 0 1px 2px rgba(31, 42, 68, .12); transition: background .15s ease; }
.fm-ano button:hover:not(:disabled) { background: #1f6fd6; color: #fff; }
.fm-ano button:disabled { opacity: .35; cursor: default; box-shadow: none; }
.fc-grande-cab .fm-ano { margin-left: auto; }
.fc-card-cab .fm-ano + .fc-expandir { margin-left: 0; }
.fm { display: flex; flex-direction: column; height: 100%; min-height: 0; transition: opacity .2s ease; }
.fm.carregando { opacity: .55; }
.fm-barras { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: stretch; padding-top: .2rem; }
.fm-col { display: flex; flex-direction: column; align-items: center; min-width: 0; min-height: 0; cursor: default; }
.fm-val { height: 14px; font-size: .56rem; font-weight: 800; color: color-mix(in srgb, var(--cor) 70%, #10213f); white-space: nowrap; letter-spacing: -.02em;
    opacity: 0; animation: fmVal .3s ease calc(var(--atraso) + .55s) forwards; }
.fm-trilho { flex: 1 1 auto; width: 100%; min-height: 0; display: flex; align-items: flex-end; border-radius: 6px 6px 3px 3px; background: #f1f4f9; }
.fm-trilho i { display: block; width: 100%; min-height: 2px; border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 70%, #ffffff), var(--cor));
    box-shadow: 0 2px 6px color-mix(in srgb, var(--cor) 35%, transparent);
    transform-origin: bottom; animation: fmSobe .7s cubic-bezier(.34, 1.4, .64, 1) var(--atraso) backwards; transition: filter .15s ease; }
.fm-col:hover .fm-trilho i { filter: brightness(1.1) saturate(1.15); }
.fm-col.topo .fm-trilho i { box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor) 30%, transparent), 0 4px 12px color-mix(in srgb, var(--cor) 45%, transparent); }
.fm-col.futuro .fm-trilho { background: repeating-linear-gradient(-45deg, #f4f6fa 0 4px, #eceff5 4px 8px); }
.fm-mes { margin-top: 3px; font-size: .62rem; font-weight: 800; color: color-mix(in srgb, var(--cor) 75%, #34405a); }
.fm-col.futuro .fm-mes { color: #b6becd; }
@keyframes fmSobe { from { transform: scaleY(0); } }
@keyframes fmVal { to { opacity: 1; } }
.fm .fc-legenda { justify-content: space-between; }
.fm .fc-legenda b { color: #1f2a44; }
.fm.grande .fm-barras { gap: 10px; min-height: 320px; }
.fm.grande .fm-val { height: 18px; font-size: .78rem; }
.fm.grande .fm-mes { font-size: .8rem; }
@media (prefers-reduced-motion: reduce) { .fm-trilho i, .fm-val { animation: none; opacity: 1; } }
/* Cartão pequeno: título numa linha só ao lado do seletor de ano; valor da barra só ao passar o mouse (pílula por cima). */
.fc-mes .fc-card-cab { gap: .4rem; }
.fc-mes .fc-card-cab h3 { flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm:not(.grande) .fm-col { position: relative; }
.fm:not(.grande) .fm-val { position: absolute; top: -4px; left: 50%; z-index: 2; height: auto; padding: .1rem .4rem; border-radius: 999px;
    font-size: .66rem; color: #fff; background: var(--cor); box-shadow: 0 2px 6px color-mix(in srgb, var(--cor) 40%, transparent);
    opacity: 0; animation: none; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.fm:not(.grande) .fm-col:hover .fm-val { opacity: 1; transform: translate(-50%, 0); }
.fm:not(.grande) .fm-barras { padding-top: .5rem; }
.fm-trilho { background: #f5f7fb; }
.fm:not(.grande) .fm-val { border: 1.5px solid #fff; font-size: .68rem; }

/* Consumo: indicadores e quadros de uso são CLICÁVEIS (abrem o detalhe). Dica "ver lista ›" aparece no hover. */
button.fc-kpi { border: 0; font: inherit; width: 100%; cursor: pointer; }
.fc-kpi.clicavel { cursor: pointer; }
.fc-kpi .fc-ver { position: absolute; right: .7rem; bottom: .45rem; font-size: .68rem; font-weight: 750; color: var(--cor);
    opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; }
.fc-kpi.clicavel:hover .fc-ver, .fc-kpi.clicavel:focus-visible .fc-ver { opacity: 1; transform: none; }
.fc-kpi.clicavel:focus-visible { outline: 2px solid var(--cor); outline-offset: 2px; }
button.fu-tile { font: inherit; padding: 0; cursor: pointer; text-align: center; }
button.fu-tile:focus-visible { outline: 2px solid var(--cor); outline-offset: 2px; }
.fu-tile:active, .fc-kpi.clicavel:active { transform: scale(.98); }

/* Popup de detalhe (Saídas/Entradas, Uso por equipamento, Situação dos equipamentos) */
.fd { width: min(1080px, 96vw); height: min(86dvh, 760px); }
.fd .fc-grande-cab { flex-wrap: wrap; row-gap: .5rem; }
.fd-tit { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.fd-tit small { font-size: .76rem; color: #8a93a6; }
.fd-abas { margin-left: auto; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: #eef2f8; }
.fd-abas button { border: 0; background: none; border-radius: 999px; padding: .35rem .85rem; font-size: .8rem; font-weight: 700; color: #5a6680; cursor: pointer; white-space: nowrap; }
.fd-abas button:hover { color: #1f56b8; }
.fd-abas button.on { background: #fff; color: #1f56b8; box-shadow: 0 1px 3px rgba(31, 42, 68, .15); }
.fd-barra { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem 1.1rem; background: #f8fafd; border-bottom: 1px solid #eef1f6; }
.fd-resumo { display: inline-flex; flex-direction: column; padding: .3rem .75rem; border-radius: 10px; background: #fff; border: 1px solid #e6ebf3; line-height: 1.15; }
.fd-resumo small { font-size: .64rem; font-weight: 750; color: #8a93a6; text-transform: uppercase; letter-spacing: .04em; }
.fd-resumo b { font-size: .98rem; color: #1f2a44; font-variant-numeric: tabular-nums; }
.fd-resumo.azul b { color: #1f6fd6; } .fd-resumo.verde b { color: #15803d; } .fd-resumo.ambar b { color: #c47a00; }
.fd-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.fd-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid #c9dafa; background: #eef4ff; color: #1f56b8; border-radius: 999px;
    padding: .2rem .4rem .2rem .7rem; font-size: .74rem; font-weight: 700; cursor: pointer; }
.fd-chip i { font-style: normal; width: 16px; height: 16px; border-radius: 50%; background: #d6e4fd; display: inline-flex; align-items: center; justify-content: center; }
.fd-chip:hover i { background: #e5392f; color: #fff; }
.fd-busca { margin-left: auto; }
.fd-busca input { width: 170px; }
.fd-corpo { flex: 1 1 auto; min-height: 0; padding: .4rem 1.1rem 1rem; }

.fd-tabela { display: flex; flex-direction: column; font-size: .84rem; }
.fd-lin { display: grid; align-items: center; gap: .6rem; padding: .5rem .55rem; border-bottom: 1px solid #f0f3f8; }
.fd-tabela.saida .fd-lin { grid-template-columns: 82px minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 1.1fr) 96px minmax(0, 1fr) 96px; }
.fd-tabela.entrada .fd-lin { grid-template-columns: 82px minmax(0, 1.7fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .9fr) 106px; }
.fd-tabela.equip .fd-lin { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr) minmax(0, 1.2fr) 220px 150px; }
.fd-lin > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #34405a; }
.fd-lin .num { text-align: right; font-variant-numeric: tabular-nums; }
.fd-lin:not(.fd-cab):hover { background: #f6f9ff; }
.fd-lin:not(.fd-cab) { animation: fdLinha .3s ease backwards; }
@keyframes fdLinha { from { opacity: 0; transform: translateY(3px); } }
.fd-cab { position: sticky; top: -.4rem; z-index: 1; background: #fff; border-bottom: 2px solid #e6ebf3; font-size: .7rem; font-weight: 800; color: #667085;
    text-transform: uppercase; letter-spacing: .04em; padding-top: .7rem; }
.fd-cab button { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; text-align: left; }
.fd-cab button.num { text-align: right; }
.fd-cab button.ord { color: #1f56b8; }
.fd-data { display: flex; flex-direction: column; line-height: 1.1; }
.fd-data small { color: #8a93a6; font-size: .72rem; }
.fd-forte { font-weight: 700; color: #1f2a44 !important; }
.fd-lin small { color: #8a93a6; }
.fd-litros { font-weight: 800; color: #1f2a44 !important; }
.fd-tabela.saida .fd-litros { color: #1f6fd6 !important; }
.fd-tabela.entrada .fd-litros { color: #15803d !important; }
.fd-litros em { display: block; font-style: normal; font-size: .62rem; font-weight: 800; color: #c47a00; text-transform: uppercase; }
.fd-lin.conferir { background: #fffaf0; }
.fd-desde { display: flex; align-items: center; gap: .45rem; }
.fd-dias { font-style: normal; font-size: .7rem; font-weight: 800; padding: .1rem .5rem; border-radius: 999px; background: #eef2f8; color: #4a5672; }
.fd-dias.verde { background: #def5ea; color: #15803d; } .fd-dias.ambar { background: #fff1d6; color: #b45309; } .fd-dias.vermelho { background: #fde2e0; color: #c0392b; }
.fd-mais { display: block; margin: .8rem auto 0; border: 1px solid #d9e1ee; background: #fff; color: #1f56b8; font-weight: 700; font-size: .8rem; border-radius: 999px; padding: .4rem 1rem; cursor: pointer; }
.fd-mais:hover { background: #f2f7ff; }
.fd-nota { font-size: .76rem; color: #8a93a6; margin: .6rem 0 0; text-align: center; }
.fd-nota.topo { text-align: left; margin: .3rem 0 .6rem; }

.fd-rank { display: flex; flex-direction: column; gap: .35rem; }
.fd-rank-lin { display: grid; grid-template-columns: 34px minmax(0, 1.4fr) minmax(0, 2fr) 120px; align-items: center; gap: .7rem; width: 100%;
    padding: .5rem .6rem; border: 1px solid #edf1f7; border-radius: 12px; background: #fff; cursor: pointer; text-align: left; font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; animation: fdLinha .35s ease var(--atraso) backwards; }
.fd-rank-lin:hover { border-color: color-mix(in srgb, var(--cor) 40%, #ffffff); box-shadow: 0 4px 14px color-mix(in srgb, var(--cor) 18%, transparent); transform: translateX(2px); }
.fd-pos { font-weight: 800; color: color-mix(in srgb, var(--cor) 70%, #34405a); text-align: center; }
.fd-rank-lin:nth-child(-n+3) .fd-pos { background: color-mix(in srgb, var(--cor) 14%, #ffffff); border-radius: 8px; padding: .15rem 0; }
.fd-rank-nome { display: flex; flex-direction: column; min-width: 0; }
.fd-rank-nome b, .fd-rank-nome small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-rank-nome b { color: #1f2a44; font-size: .86rem; }
.fd-rank-nome small { color: #8a93a6; font-size: .72rem; }
.fd-rank-trilho { height: 10px; border-radius: 10px; background: #f0f3f8; overflow: hidden; }
.fd-rank-trilho i { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--cor) 60%, #ffffff), var(--cor));
    transform-origin: left; animation: feBarra .7s cubic-bezier(.16, 1, .3, 1) var(--atraso) backwards; }
.fd-rank-val { text-align: right; font-weight: 800; font-size: .95rem; color: color-mix(in srgb, var(--cor) 75%, #10213f); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fd-rank-val small { font-size: .7rem; color: #8a93a6; font-weight: 700; }
@media (max-width: 820px) {
    .fd-tabela.saida .fd-lin, .fd-tabela.entrada .fd-lin { grid-template-columns: 70px minmax(0, 1.5fr) minmax(0, 1fr) 90px; }
    .fd-tabela.saida .fd-lin > :nth-child(4), .fd-tabela.saida .fd-lin > :nth-child(5), .fd-tabela.saida .fd-lin > :nth-child(6),
    .fd-tabela.entrada .fd-lin > :nth-child(4), .fd-tabela.entrada .fd-lin > :nth-child(5) { display: none; }
    .fd-tabela.equip .fd-lin { grid-template-columns: minmax(0, 1.5fr) 150px 110px; }
    .fd-tabela.equip .fd-lin > :nth-child(2), .fd-tabela.equip .fd-lin > :nth-child(3) { display: none; }
    .fd-rank-lin { grid-template-columns: 30px minmax(0, 1fr) 90px; } .fd-rank-trilho { display: none; }
    .fd-busca input { width: 110px; }
}
@media (prefers-reduced-motion: reduce) { .fd-lin, .fd-rank-lin, .fd-rank-trilho i { animation: none; } }
/* Títulos dos cartões da aba Consumo sempre numa linha. */
.fc-card-cab h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fc-uso .fc-card-cab h3 { font-size: .88rem; }
/* Listas do detalhe em ZEBRA cinza bem claro (linha sim, linha não); a marcação "conferir" e o hover continuam por cima. */
.fd-tabela .fd-lin:not(.fd-cab):nth-of-type(odd) { background: #f8f9fb; }
.fd-tabela .fd-lin.conferir { background: #fffaf0; }
.fd-tabela .fd-lin:not(.fd-cab):hover { background: #eef4ff; }
.fd-rank-lin:nth-child(even) { background: #f8f9fb; }
.fd-rank-lin:hover { background: #fff; }

/* Popup de detalhe: linha de filtros à vista (Obra / Equipamento / Tanque), logo abaixo do cabeçalho. */
.fd-filtros { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; padding: .55rem 1.1rem .6rem; border-bottom: 1px solid #eef1f6; background: #fff; }
.fd-filtros-rot { display: inline-flex; align-items: center; gap: .3rem; align-self: center; font-size: .74rem; font-weight: 800; color: #1f56b8;
    text-transform: uppercase; letter-spacing: .04em; padding-top: .9rem; }
.fd-filtros-rot svg { width: 14px; height: 14px; }
.fd-f { display: flex; flex-direction: column; gap: .15rem; margin: 0; width: 230px; max-width: 100%; }
.fd-f small { font-size: .64rem; font-weight: 800; color: #8a93a6; text-transform: uppercase; letter-spacing: .04em; padding-left: .2rem; }
.fd-f .cbx-campo { min-height: 32px; padding: .2rem .6rem; border-radius: 9px; font-size: .8rem; }
.fd-f .cbx-campo > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-limpar { align-self: center; margin-top: .9rem; color: #c9372c; }
.fd .fc-grande-cab + .fd-filtros + .fd-barra { padding-top: .5rem; }
@media (max-width: 820px) { .fd-f { width: calc(50% - .3rem); } .fd-filtros-rot { display: none; } }

/* Filtros na aba Saldo: aviso de que o saldo é sempre o atual (sem período). */
.ff-aviso { margin: 0; padding: .5rem .65rem; border-radius: 11px; background: #eef6ff; border: 1px solid #d6e6fb; color: #34557e; font-size: .74rem; line-height: 1.35; }
.ff-aviso b { color: #1f56b8; }

/* Menu: "Gestão Abastecimento" não cabe numa linha — quebra em duas (só este item; os outros módulos ficam iguais). */
a[href="m/frota-abastecimento"] .menu-tx { white-space: normal; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ═══ Frota — Gestão Abastecimento ═══════════════════════════════════════════════════════════════════════════
   Botões grandes Abastecer/Entrada no topo, formulário inline que desliza, resumo colorido e as duas listas lado a
   lado (cada uma rola por dentro; a página não rola no computador). Mesmo visual do Painel da Frota. */
.fa .fa-topo { align-items: center; margin-bottom: .7rem; }
.fa-acoes { display: flex; gap: .6rem; flex-wrap: wrap; }
.fa-acao { --cor: #1f6fd6; --cor2: #4c8cf0; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .6rem;
    min-height: 54px; padding: .45rem 1.1rem .45rem .6rem; border: 0; border-radius: 16px; cursor: pointer; color: #fff; text-align: left;
    background: linear-gradient(135deg, var(--cor2), var(--cor));
    box-shadow: 0 4px 10px color-mix(in srgb, var(--cor) 35%, transparent), 0 12px 26px color-mix(in srgb, var(--cor) 22%, transparent);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; animation: fcSobe .45s cubic-bezier(.16, 1, .3, 1) backwards; }
.fa-acao.entrada { --cor: #15803d; --cor2: #34b36b; animation-delay: .06s; }
.fa-acao img { width: 38px; height: 38px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15); transition: transform .25s ease; }
.fa-acao span { display: flex; flex-direction: column; line-height: 1.1; }
.fa-acao b { font-size: 1rem; font-weight: 800; letter-spacing: .01em; }
.fa-acao small { font-size: .7rem; opacity: .9; }
.fa-acao::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: faBrilho 4.5s ease-in-out 1.2s infinite; }
.fa-acao.entrada::after { animation-delay: 3.4s; }
@keyframes faBrilho { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.fa-acao:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 6px 14px color-mix(in srgb, var(--cor) 40%, transparent), 0 18px 32px color-mix(in srgb, var(--cor) 28%, transparent); }
.fa-acao:hover:not(:disabled) img { transform: rotate(-8deg) scale(1.08); }
.fa-acao:active:not(:disabled) { transform: translateY(0) scale(.98); }
.fa-acao.on { outline: 3px solid color-mix(in srgb, var(--cor) 35%, #ffffff); outline-offset: 2px; }
.fa-acao:disabled { filter: grayscale(.7) opacity(.55); cursor: not-allowed; }
.fa-acao:focus-visible { outline: 3px solid #1f2a44; outline-offset: 2px; }

/* Formulário inline */
.fa-form { --cor: #1f6fd6; margin-bottom: .8rem; padding: .8rem 1rem 1rem; border-radius: 16px; background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--cor) 35%, #ffffff); border-top: 5px solid var(--cor);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--cor) 16%, transparent), 0 2px 4px rgba(31, 42, 68, .06);
    animation: faDesce .38s cubic-bezier(.16, 1, .3, 1) backwards; }
.fa-form.entrada { --cor: #15803d; }
@keyframes faDesce { from { opacity: 0; transform: translateY(-14px); } }
.fa-form-cab { display: flex; align-items: center; gap: .55rem; margin-bottom: .7rem; }
.fa-form-cab img { filter: drop-shadow(0 2px 4px rgba(31, 42, 68, .2)); }
.fa-form-cab h2 { margin: 0; font-size: 1.05rem; font-weight: 800; color: #1f2a44; }
.fa-form-dica { font-size: .78rem; color: #8a93a6; margin-right: auto; }
.fa-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem .9rem; }
.fa-campo { display: flex; flex-direction: column; gap: .25rem; margin: 0; min-width: 0; }
.fa-campo.larga { grid-column: span 2; }
.fa-campo > span { font-size: .7rem; font-weight: 800; color: #4a5672; text-transform: uppercase; letter-spacing: .04em; }
.fa-campo input:not([type=search]), .fa-campo .cbx-campo { min-height: 40px; border: 1px solid #dfe5ef; border-radius: 10px; padding: .35rem .6rem;
    font-size: .9rem; color: #1f2a44; background: #fff; width: 100%; }
.fa-campo input:focus { outline: 2px solid color-mix(in srgb, var(--cor) 30%, #ffffff); border-color: var(--cor); }
.fa-hint { font-size: .74rem; color: #667085; }
.fa-hint b { color: var(--cor); }
.fa-hint em { font-style: normal; font-weight: 800; color: #b45309; }
.fa-alerta { margin: .7rem 0 0; padding: .55rem .8rem; border-radius: 10px; background: #fff7e6; border: 1px solid #ffd591; color: #8a5300; font-size: .84rem; font-weight: 600;
    animation: faDesce .3s ease backwards; }
.fa-form-pe { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .85rem; }
.fa-form-pe small { color: #8a93a6; font-size: .74rem; }
.fa-salvar { display: inline-flex; align-items: center; gap: .4rem; min-height: 42px; padding: 0 1.2rem; border: 0; border-radius: 12px; cursor: pointer;
    color: #fff; font-weight: 800; font-size: .9rem; background: linear-gradient(135deg, color-mix(in srgb, var(--cor) 75%, #ffffff), var(--cor));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--cor) 32%, transparent); transition: transform .15s ease, filter .15s ease; }
.fa-salvar:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.05); }
.fa-salvar:disabled { opacity: .6; cursor: wait; }
.fa-salvar svg { width: 16px; height: 16px; }
.fa-cancelar { min-height: 42px; padding: 0 1rem; border: 1px solid #dfe5ef; border-radius: 12px; background: #fff; color: #4a5672; font-weight: 700; cursor: pointer; }
.fa-cancelar:hover { background: #f5f7fb; }

/* Resumo */
.fa-resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: .6rem; align-items: stretch; margin-bottom: .7rem; }
.fa-kpi { --cor: #2f7ee6; position: relative; overflow: hidden; display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--cor) 10%, #ffffff), #ffffff 70%); border: 1px solid color-mix(in srgb, var(--cor) 22%, #e8edf5);
    box-shadow: 0 2px 4px rgba(31, 42, 68, .05), 0 8px 18px color-mix(in srgb, var(--cor) 12%, transparent);
    animation: fcSobe .45s cubic-bezier(.16, 1, .3, 1) backwards; transition: transform .2s ease, box-shadow .2s ease; }
.fa-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cor); }
.fa-kpi:nth-child(2) { animation-delay: .05s; } .fa-kpi:nth-child(3) { animation-delay: .1s; } .fa-kpi:nth-child(4) { animation-delay: .15s; }
.fa-kpi:hover { transform: translateY(-2px); }
.fa-kpi:hover img { transform: scale(1.1) rotate(-4deg); }
.fa-kpi img { flex: none; filter: drop-shadow(0 3px 5px rgba(31, 42, 68, .18)); transition: transform .25s ease; }
.fa-kpi div { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.fa-kpi span { font-size: .66rem; font-weight: 800; color: #667085; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-kpi b { font-size: 1.25rem; font-weight: 800; color: color-mix(in srgb, var(--cor) 60%, #10213f); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fa-kpi small { font-size: .72rem; color: #8a93a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-kpi.azul { --cor: #1f6fd6; } .fa-kpi.verde { --cor: #15803d; } .fa-kpi.roxo { --cor: #6d4fe6; } .fa-kpi.ambar { --cor: #d98a06; }
.fa-kpi.pulsa { animation: fcSobe .45s cubic-bezier(.16, 1, .3, 1) .15s backwards, faPulsa 2.4s ease-in-out 1s infinite; }
@keyframes faPulsa { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor) 22%, transparent), 0 8px 18px color-mix(in srgb, var(--cor) 18%, transparent); } }
.fa-filtros { display: flex; align-items: center; }

/* As duas listas */
.fa-listas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; height: clamp(320px, calc(100dvh - 300px), 1200px); }
.fa-form ~ .fa-listas { height: clamp(320px, calc(100dvh - 560px), 1200px); }
.fa-lista { --cor: #1f6fd6; display: flex; flex-direction: column; min-height: 0; border-radius: 16px; background: #fff; overflow: hidden;
    border: 1px solid #e3e9f2; border-top: 4px solid var(--cor);
    box-shadow: 0 2px 4px rgba(31, 42, 68, .05), 0 10px 26px rgba(31, 42, 68, .09); animation: fcSobe .5s cubic-bezier(.16, 1, .3, 1) .12s backwards; }
.fa-lista.entrada { --cor: #15803d; animation-delay: .2s; }
.fa-lista-cab { display: flex; align-items: center; gap: .55rem; padding: .65rem .85rem; border-bottom: 1px solid #eef1f6;
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 7%, #ffffff), #ffffff); }
.fa-lista-cab img { filter: drop-shadow(0 2px 4px rgba(31, 42, 68, .2)); }
.fa-lista-tit { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; margin-right: auto; }
.fa-lista-tit h2 { margin: 0; font-size: .98rem; font-weight: 800; color: #1f2a44; white-space: nowrap; }
.fa-lista-tit small { font-size: .74rem; color: #8a93a6; }
.fa-lista-tit small b { color: var(--cor); }
.fa-lista .fe-busca input { width: 130px; }
.fa-lista-corpo { flex: 1 1 auto; min-height: 0; overflow: auto; padding: .3rem .4rem .6rem; }
.fa-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: .7rem; padding: .5rem .55rem; border-radius: 10px;
    animation: fdLinha .3s ease var(--atraso) backwards; transition: background .15s ease; }
.fa-lista.entrada .fa-item { grid-template-columns: 52px minmax(0, 1fr) auto; }
.fa-item:nth-child(even) { background: #f8f9fb; }
.fa-item:hover { background: color-mix(in srgb, var(--cor) 7%, #ffffff); }
.fa-item.conferir { background: #fffaf0; box-shadow: inset 3px 0 0 #f59e0b; }
.fa-item.novo { animation: faNovo 2.2s ease; }
@keyframes faNovo { 0%, 30% { background: color-mix(in srgb, var(--cor) 22%, #ffffff); } }
.fa-dia { display: flex; flex-direction: column; align-items: center; padding: .2rem 0; border-radius: 9px; line-height: 1.05;
    background: color-mix(in srgb, var(--cor) 10%, #ffffff); color: color-mix(in srgb, var(--cor) 75%, #10213f); }
.fa-dia b { font-size: .82rem; font-weight: 800; }
.fa-dia small { font-size: .66rem; opacity: .8; }
.fa-meio { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.fa-meio b { font-size: .86rem; color: #1f2a44; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-meio small { font-size: .74rem; color: #8a93a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-leitura { font-size: .78rem; color: #4a5672; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fa-litros { min-width: 72px; text-align: right; font-weight: 800; font-size: .92rem; color: var(--cor); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fa-litros em { display: block; font-style: normal; font-size: .6rem; font-weight: 800; color: #c47a00; text-transform: uppercase; }
.fa-lista-vazia { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; height: 100%; min-height: 180px; color: #8a93a6; font-size: .86rem; }
.fa-lista-vazia img { opacity: .55; filter: grayscale(.4); }
.fa-lista-vazia p { margin: 0; }
@media (max-width: 1100px) {
    .fa-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fa-filtros { grid-column: 1 / -1; justify-content: flex-end; }
    .fa-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .fa-listas, .fa-form ~ .fa-listas { grid-template-columns: 1fr; height: auto; }
    .fa-lista { height: 480px; }
    .fa-acoes { width: 100%; } .fa-acao { flex: 1 1 0; }
    .fa-grade { grid-template-columns: 1fr; } .fa-campo.larga { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .fa-acao, .fa-acao::after, .fa-form, .fa-kpi, .fa-lista, .fa-item { animation: none; } }
/* Listas ocupam o que sobra da altura da janela (título + botões + resumo ≈ 300px), nunca menos que 260px. */
.fa-listas { height: max(260px, calc(100dvh - 330px)); }
.fa-form ~ .fa-listas { height: max(260px, calc(100dvh - 600px)); }
/* Gestão Abastecimento: NADA de texto cortado com "…" — quebra linha (pedido do Julio, 04/11). */
.fa-meio b, .fa-meio small { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.fa-kpi span, .fa-kpi small { white-space: normal; overflow: visible; text-overflow: clip; }
.fa-lista-tit h2 { white-space: normal; }
.fa-item { align-items: start; }
.fa-item .fa-leitura, .fa-item .fa-litros { align-self: center; }
.fa-lista-cab .fc-expandir { flex: none; }

/* Gestão Abastecimento: botões de largura total (metade cada) e formulário em popup. */
.fa-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: .75rem; }
.fa-acao { width: 100%; justify-content: center; min-height: 60px; }
.fa-acao b { font-size: 1.1rem; }
.fa-overlay { align-items: flex-start; padding-top: 6dvh; }
.fa-modal { width: min(920px, 94vw); max-height: 88dvh; overflow: auto; margin: 0; animation: faPop .28s cubic-bezier(.16, 1, .3, 1) backwards; }
@keyframes faPop { from { opacity: 0; transform: translateY(-12px) scale(.98); } }
.fa-listas { height: max(260px, calc(100dvh - 400px)); }
@media (max-width: 560px) { .fa-acoes { gap: .5rem; } .fa-acao small { display: none; } }
/* Formulário Abastecer/Entrada GRANDE (pedido do Julio): ocupa quase toda a área, campos e letras maiores.
   Celular: tela cheia. */
.fa-overlay { align-items: center; padding: 3dvh 2vw; }
.fa-modal { width: min(1240px, calc(100vw - 48px)); max-height: 92dvh; min-height: min(560px, 90dvh); display: flex; flex-direction: column;
    padding: 1.3rem 1.6rem 1.5rem; border-radius: 22px; border-top-width: 6px; }
.fa-modal .fa-form-cab { gap: .75rem; margin-bottom: 1.2rem; padding-bottom: .9rem; border-bottom: 1px solid #eef1f6; }
.fa-modal .fa-form-cab img { width: 46px; height: 46px; }
.fa-modal .fa-form-cab h2 { font-size: 1.45rem; }
.fa-modal .fa-form-dica { font-size: .9rem; }
.fa-modal .fa-grade { gap: 1.1rem 1.3rem; flex: 1 1 auto; align-content: start; }
.fa-modal .fa-campo { gap: .4rem; }
.fa-modal .fa-campo > span { font-size: .8rem; }
.fa-modal .fa-campo input:not([type=search]), .fa-modal .fa-campo .cbx-campo { min-height: 52px; font-size: 1.02rem; padding: .5rem .85rem; border-radius: 12px; }
.fa-modal .fa-hint { font-size: .84rem; }
.fa-modal .fa-alerta { font-size: .92rem; padding: .7rem 1rem; }
.fa-modal .fa-form-pe { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid #eef1f6; gap: .8rem; }
.fa-modal .fa-salvar { min-height: 54px; padding: 0 1.8rem; font-size: 1.05rem; border-radius: 14px; }
.fa-modal .fa-salvar svg { width: 18px; height: 18px; }
.fa-modal .fa-cancelar { min-height: 54px; padding: 0 1.4rem; font-size: 1rem; border-radius: 14px; }
.fa-modal .fa-form-pe small { font-size: .84rem; }
.fa-modal .fc-fechar { width: 42px; height: 42px; }
@media (max-width: 1100px) { .fa-modal .fa-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .fa-overlay { padding: 0; }
    .fa-modal { width: 100vw; max-height: 100dvh; min-height: 100dvh; border-radius: 0; padding: 1rem 1rem 1.2rem; }
    .fa-modal .fa-grade { grid-template-columns: 1fr; }
    .fa-modal .fa-campo.larga { grid-column: auto; }
    .fa-modal .fa-form-dica { display: none; }
    .fa-modal .fa-form-pe { position: sticky; bottom: -1.2rem; background: #fff; padding-bottom: .6rem; }
    .fa-modal .fa-salvar, .fa-modal .fa-cancelar { flex: 1 1 0; justify-content: center; }
    .fa-modal .fa-form-pe small { flex-basis: 100%; }
}
/* Responsividade — celular (Gestão Abastecimento e Painel da Frota). */
.fa-meio b, .fa-meio small { overflow-wrap: break-word; word-break: normal; }
@media (max-width: 560px) {
    /* cabeçalho da lista: título na 1ª linha; busca + expandir na 2ª */
    .fa-lista-cab { flex-wrap: wrap; row-gap: .45rem; }
    .fa-lista-tit { flex: 1 1 calc(100% - 44px); margin-right: 0; }
    .fa-lista-cab .fe-busca { flex: 1 1 auto; margin-left: 0; }
    .fa-lista-cab .fe-busca input { width: 100%; }
    /* linha da lista: data | equipamento | litros; a leitura (horímetro/km) desce para baixo do nome */
    .fa-item, .fa-lista.entrada .fa-item { grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "dia meio litros" "dia leitura litros"; column-gap: .55rem; row-gap: .1rem; }
    .fa-item .fa-dia { grid-area: dia; } .fa-item .fa-meio { grid-area: meio; } .fa-item .fa-litros { grid-area: litros; min-width: 0; }
    .fa-item .fa-leitura { grid-area: leitura; align-self: start; font-size: .72rem; color: #8a93a6; }
    /* cartões do resumo: rótulo menor para caber */
    .fa-kpi { gap: .45rem; padding: .5rem .6rem; }
    .fa-kpi img { width: 28px; height: 28px; }
    .fa-kpi span { font-size: .58rem; letter-spacing: .02em; }
    .fa-kpi b { font-size: 1.1rem; }
    /* Painel: o texto "9 tanque(s) · …" sai da barra das abas para o botão Filtros caber */
    .fr-abas-info { display: none; }
}

/* Gestão Abastecimento: os 4 cartões do resumo são CLICÁVEIS (abrem o quadro de detalhe). */
button.fa-kpi { font: inherit; text-align: left; cursor: pointer; width: 100%; }
button.fa-kpi:hover { box-shadow: 0 4px 8px rgba(31, 42, 68, .08), 0 14px 28px color-mix(in srgb, var(--cor) 28%, transparent); }
button.fa-kpi:active { transform: scale(.98); }
button.fa-kpi:focus-visible { outline: 2px solid var(--cor); outline-offset: 2px; }
.fa-kpi .fa-ver { position: absolute; right: .6rem; bottom: .35rem; font-size: .66rem; font-weight: 800; color: var(--cor);
    opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; }
button.fa-kpi:hover .fa-ver, button.fa-kpi:focus-visible .fa-ver { opacity: 1; transform: none; }
@media (hover: none) { .fa-kpi .fa-ver { opacity: .8; transform: none; } }

/* Filtros só com o ícone (Gestão Abastecimento). */
.ff-btn.so-icone { width: 38px; height: 38px; min-height: 38px; padding: 0; justify-content: center; border-radius: 50%; position: relative; }
.ff-btn.so-icone .ff-btn-ic svg { width: 17px; height: 17px; }
.ff-btn.so-icone .flt-badge { position: absolute; top: -5px; right: -5px; }

/* Formulário inteligente: quadro do tanque (saldo agora → fica depois), barra com o nível, erro que bloqueia. */
.fa-tq { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin-top: 1.1rem; padding: .8rem 1rem;
    border-radius: 14px; background: color-mix(in srgb, var(--cor) 6%, #ffffff); border: 1px solid color-mix(in srgb, var(--cor) 20%, #e6ebf3);
    animation: faDesce .3s ease backwards; }
.fa-tq.erro { background: #fff5f5; border-color: #f5c2c0; }
.fa-tq-num { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.fa-tq-num:last-child { text-align: right; }
.fa-tq-num small { font-size: .7rem; font-weight: 800; color: #667085; text-transform: uppercase; letter-spacing: .04em; }
.fa-tq-num b { font-size: 1.3rem; font-weight: 800; color: #1f2a44; font-variant-numeric: tabular-nums; }
.fa-tq.erro .fa-tq-num:last-child b { color: #c0392b; }
.fa-tq-num em { font-style: normal; font-size: .76rem; color: #8a93a6; }
.fa-tq-barra { position: relative; height: 16px; border-radius: 10px; background: #e9eef6; overflow: hidden; }
.fa-tq-barra i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; transition: width .35s cubic-bezier(.16, 1, .3, 1); }
.fa-tq-barra .agora { background: repeating-linear-gradient(-45deg, #c9d3e3 0 6px, #dbe2ed 6px 12px); }
.fa-tq-barra .depois { background: linear-gradient(90deg, #f5b301, #e08a00); box-shadow: 0 0 10px rgba(224, 138, 0, .35); }
.fa-tq-barra .depois.entrada { background: linear-gradient(90deg, #34b36b, #15803d); box-shadow: 0 0 10px rgba(21, 128, 61, .3); }
.fa-erro { margin: .6rem 0 0; padding: .6rem .9rem; border-radius: 10px; background: #fde8e7; border: 1px solid #f5c2c0; color: #a8261c; font-size: .9rem; font-weight: 700;
    animation: faTreme .35s ease; }
@keyframes faTreme { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.fa-salvar:disabled:not([aria-busy]) { cursor: not-allowed; filter: grayscale(.5); }
@media (max-width: 640px) {
    .fa-tq { grid-template-columns: 1fr 1fr; }
    .fa-tq-barra { grid-column: 1 / -1; grid-row: 2; }
}

/* ═══ Frota — Equipamentos ═══════════════════════════════════════════════════════════════════════════════════
   Chips de tipo com ícone 3D e contagem, barra (busca/situação/obra) e cartões com foto ou ícone do tipo, placa
   Mercosul, obra e situação. Detalhe em popup com foto grande e envio de foto. */
.fq-tipos { display: flex; gap: .45rem; overflow-x: auto; padding: .2rem .1rem .6rem; scrollbar-width: thin; }
.fq-tipo { flex: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .25rem .7rem .25rem .35rem; border-radius: 999px;
    border: 1px solid #e3e9f2; background: #fff; color: #34405a; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(31, 42, 68, .05); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.fq-tipo img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(31, 42, 68, .18)); }
.fq-tipo b { min-width: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: #eef2f8; color: #4a5672; font-size: .72rem; text-align: center; }
.fq-tipo:hover { border-color: #9db8e6; transform: translateY(-1px); }
.fq-tipo.on { border-color: #2f6fe0; background: #eef4ff; color: #1f56b8; box-shadow: 0 0 0 3px rgba(47, 111, 224, .14); }
.fq-tipo.on b { background: #2f6fe0; color: #fff; }
.fq-barra { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.fq-busca { flex: 1 1 260px; margin: 0; min-height: 40px; }
.fq-busca input { width: 100%; font-size: .86rem; }
.fq-sitbar { flex: 0 1 auto; }
.fq-sitbar button { padding: 0 .75rem; min-height: 32px; font-size: .78rem; }
.fq-sitbar small { opacity: .7; margin-left: .2rem; }
.fq-obra { width: 240px; max-width: 100%; }
.fq-obra .cbx-campo { min-height: 40px; border-radius: 999px; }
.fq-grade-caixa { height: max(320px, calc(100dvh - 300px)); overflow: auto; padding: .2rem .2rem .8rem; }
.fq-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .8rem; }
.fq-card { --cor: #64748b; display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; cursor: pointer; font: inherit;
    border-radius: 16px; border: 1px solid #e3e9f2; background: #fff;
    box-shadow: 0 2px 4px rgba(31, 42, 68, .05), 0 8px 20px rgba(31, 42, 68, .07);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; animation: fcSobe .4s cubic-bezier(.16, 1, .3, 1) var(--atraso) backwards; }
.fq-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cor) 45%, #ffffff);
    box-shadow: 0 6px 12px rgba(31, 42, 68, .08), 0 16px 32px color-mix(in srgb, var(--cor) 22%, transparent); }
.fq-card:hover .fq-ic { transform: scale(1.08) rotate(-3deg); }
.fq-card:focus-visible { outline: 3px solid var(--cor); outline-offset: 2px; }
.fq-foto { position: relative; height: 140px; display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: #eef2f8; }
.fq-foto > img:not(.fq-ic) { width: 100%; height: 100%; object-fit: cover; }
.fq-foto.sem { background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--cor) 22%, #ffffff), color-mix(in srgb, var(--cor) 8%, #f6f8fc) 70%); }
.fq-ic { width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(31, 42, 68, .22)); transition: transform .3s ease; }
.fq-sit { position: absolute; top: 8px; left: 8px; font-style: normal; font-size: .66rem; font-weight: 800; padding: .15rem .55rem; border-radius: 999px;
    background: rgba(255, 255, 255, .92); color: #15803d; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.fq-card.manut .fq-sit { color: #b45309; } .fq-card.inativo .fq-sit { color: #64748b; }
.fq-card.inativo { opacity: .7; }
.fq-corpo { display: flex; flex-direction: column; gap: .3rem; padding: .65rem .8rem .75rem; border-top: 3px solid var(--cor); }
.fq-linha1 { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.fq-linha1 b { font-size: 1rem; font-weight: 800; color: #1f2a44; }
.fq-linha1 small { font-size: .66rem; font-weight: 800; color: color-mix(in srgb, var(--cor) 75%, #1f2a44); text-transform: uppercase; letter-spacing: .04em; text-align: right; }
.fq-modelo { font-size: .8rem; color: #4a5672; overflow-wrap: break-word; }
.fq-linha3 { min-height: 26px; display: flex; align-items: center; }
.fq-placa { display: inline-flex; flex-direction: column; align-items: center; min-width: 92px; padding: 0 .4rem .1rem; border-radius: 5px; border: 1.5px solid #1f2a44;
    background: #fff; color: #1f2a44; font: 800 .82rem/1.1 ui-monospace, "Consolas", monospace; letter-spacing: .06em; }
.fq-placa i { align-self: stretch; margin: 0 -.4rem .1rem; padding: 1px 0; background: #1f4fbf; color: #fff; font: 700 .48rem/1 system-ui, sans-serif;
    font-style: normal; letter-spacing: .14em; text-align: center; border-radius: 3px 3px 0 0; }
.fq-ano { font-size: .76rem; font-weight: 700; color: #667085; }
.fq-obra-l { display: flex; align-items: center; gap: .25rem; font-size: .74rem; color: #8a93a6; overflow-wrap: break-word; }
.fq-obra-l svg { flex: none; color: color-mix(in srgb, var(--cor) 70%, #667085); }

/* Detalhe */
.fq-det { width: min(1000px, 96vw); }
.fq-det .fc-grande-cab img { filter: drop-shadow(0 3px 5px rgba(31, 42, 68, .2)); object-fit: contain; }
.fq-sit-g { margin-left: auto; font-size: .76rem; font-weight: 800; padding: .25rem .7rem; border-radius: 999px; background: #def5ea; color: #15803d; }
.fq-sit-g.manut { background: #fff1d6; color: #b45309; } .fq-sit-g.inativo { background: #eef2f8; color: #64748b; }
.fq-det-corpo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.2rem; padding: 1.1rem 1.2rem 1.3rem; overflow: auto; }
.fq-det-foto { display: flex; flex-direction: column; gap: .6rem; }
.fq-det-img { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #eef2f8; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .3rem; }
.fq-det-img > img:not(.fq-ic) { width: 100%; height: 100%; object-fit: cover; }
.fq-det-img.sem { background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--cor) 22%, #ffffff), color-mix(in srgb, var(--cor) 6%, #f6f8fc) 70%); }
.fq-det-img .fq-ic { width: 180px; height: 180px; }
.fq-det-img small { color: #8a93a6; font-weight: 700; }
.fq-enviando { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .7); }
.fq-det-acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.fq-enviar { --cor: #1f6fd6; position: relative; overflow: hidden; }
.fq-enviar input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fq-dica { color: #8a93a6; font-size: .74rem; }
.fq-dados { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .9rem; margin: 0; align-content: start; }
.fq-dados > div { padding: .45rem .6rem; border-radius: 10px; background: #f8f9fb; min-width: 0; }
.fq-dados > div.larga { grid-column: 1 / -1; }
.fq-dados dt { font-size: .66rem; font-weight: 800; color: #8a93a6; text-transform: uppercase; letter-spacing: .04em; }
.fq-dados dd { margin: .1rem 0 0; font-size: .9rem; font-weight: 700; color: #1f2a44; overflow-wrap: anywhere; }
.fq-dados dd a { color: #1f6fd6; }
@media (max-width: 760px) {
    .fq-det-corpo { grid-template-columns: 1fr; }
    .fq-grade { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; }
    .fq-foto { height: 110px; } .fq-ic { width: 84px; height: 84px; }
    .fq-grade-caixa { height: auto; overflow: visible; }
    .fq-obra { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .fq-card { animation: none; } }
/* Ícones 3D dos tipos ocupam bem o cartão (veículos são compridos: largura manda). */
.fq-foto.sem .fq-ic { width: 88%; height: 92%; object-fit: contain; }
.fq-det-img.sem .fq-ic { width: 78%; height: 78%; object-fit: contain; }
.fq-tipo img { width: 34px; height: 30px; }
@media (max-width: 760px) { .fq-foto.sem .fq-ic { width: 90%; height: 90%; } }

/* Gestão Abastecimento: botão discreto de Tanques + popup (novo tanque | lista com ativar/inativar). */
.fa-topo-acoes { display: flex; align-items: center; gap: .45rem; }
.fa-tq-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e3e9f2; background: #fff; cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(31, 42, 68, .08); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.fa-tq-btn:hover { transform: translateY(-1px); border-color: #9db8e6; box-shadow: 0 4px 10px rgba(31, 111, 214, .16); }
.fa-tq-btn:focus-visible { outline: 2px solid #2f6fe0; outline-offset: 2px; }
.fa-tq-btn img { object-fit: contain; filter: drop-shadow(0 1px 2px rgba(31, 42, 68, .2)); }
.ft { width: min(980px, 96vw); }
.ft-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; padding: 1rem 1.1rem 1.2rem; overflow: auto; }
.ft h4 { display: flex; align-items: center; gap: .35rem; margin: 0 0 .7rem; font-size: .85rem; font-weight: 800; color: #34405a; text-transform: uppercase; letter-spacing: .04em; }
.ft h4 svg { width: 15px; height: 15px; color: #1f6fd6; }
.ft-novo { --cor: #1f6fd6; display: flex; flex-direction: column; gap: .65rem; padding: .9rem; border-radius: 14px; background: #f7f9fc; border: 1px solid #e6ebf3; align-self: start; }
.ft-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ft-salvar { justify-content: center; }
.ft-lista { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.ft-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: 12px;
    border: 1px solid #e6ebf3; background: #fff; transition: opacity .2s ease, background .2s ease; }
.ft-item:nth-child(odd) { background: #f8f9fb; }
.ft-item.off { opacity: .55; }
.ft-item img { object-fit: contain; }
.ft-info { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.ft-info b { font-size: .88rem; color: #1f2a44; overflow-wrap: break-word; }
.ft-info small { font-size: .74rem; color: #8a93a6; overflow-wrap: break-word; }
.ft-barra { height: 6px; border-radius: 6px; background: #e9eef6; overflow: hidden; }
.ft-barra i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #f5b301, #e08a00); }
@media (max-width: 760px) { .ft-corpo { grid-template-columns: 1fr; } }
.ft .fd-tit { margin-right: auto; }
.fa:not(:has(.fa-acoes)) .fa-listas { height: max(260px, calc(100dvh - 320px)); }

/* Tanque com saldo impossível (negativo/acima da capacidade): triângulo amarelo no canto inferior; clicar mostra o aviso. */
.tq3d-conferir { position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; display: grid; place-items: center; cursor: pointer; z-index: 2; transition: transform .15s; }
.tq3d-conferir:hover, .tq3d-conferir.on { transform: scale(1.15); }
.tq3d-conferir:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }
.tq3d-conferir-pop { position: absolute; right: 8px; bottom: 40px; z-index: 3; max-width: min(260px, calc(100% - 16px)); text-align: left;
  background: #fffbeb; color: #78350f; border: 1px solid #fcd34d; border-radius: 10px; padding: .5rem .65rem; font-size: .76rem; line-height: 1.35;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
.tq3d-conferir-pop b { display: block; font-size: .78rem; margin-bottom: .15rem; }

/* Equipamentos: Própria × Locados (mesmo visual dos atalhos de situação) e etiqueta "Locado" no cartão. */
.fq-origem { flex: 0 1 auto; }
.fq-origem button { padding: 0 .75rem; min-height: 32px; font-size: .78rem; }
.fq-origem small { opacity: .7; margin-left: .2rem; }
.fq-locado { position: absolute; top: 8px; right: 8px; font-style: normal; font-size: .66rem; font-weight: 800; padding: .15rem .55rem;
  border-radius: 999px; background: #ede9fe; color: #6d28d9; border: 1px solid #c4b5fd; }

/* Própria × Locado nos formulários (abastecer e detalhe do equipamento). */
.fa-origem { display: inline-block; margin-right: .35rem; padding: .05rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 800;
  background: #dcfce7; color: #166534; border: 1px solid #86efac; vertical-align: middle; }
.fa-origem.locado { background: #ede9fe; color: #6d28d9; border-color: #c4b5fd; }

/* Aba Gestão de Estoque: ícone discreto (setas verde/vermelha) que abre o popup simples de Entrada / Saída. */
.fe-lancar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e3e9f2; background: #fff; cursor: pointer; display: inline-grid;
  place-items: center; box-shadow: 0 1px 3px rgba(31, 42, 68, .08); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.fe-lancar:hover { transform: translateY(-1px); border-color: #9db8e6; box-shadow: 0 4px 10px rgba(31, 111, 214, .16); }
.fe-lancar:focus-visible { outline: 2px solid #2f6fe0; outline-offset: 2px; }
.fel { width: min(620px, 96vw); }
.fel-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .8rem 1.1rem 0; }
.fel-tipo button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 40px; border-radius: 10px;
  border: 1px solid #e3e9f2; background: #f7f9fc; color: #4a5672; font-weight: 800; font-size: .86rem; cursor: pointer; transition: all .15s ease; }
.fel-tipo button.ent.on { background: #dcfce7; border-color: #86efac; color: #166534; }
.fel-tipo button.sai.on { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.fel-saldo { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 0 1.1rem; padding: .55rem .8rem; border-radius: 10px;
  background: #f1f6ff; color: #34405a; font-size: .86rem; }
.fel-saldo b { font-size: 1.05rem; color: #1f2a44; }
.fel-saldo.erro { background: #fef2f2; color: #991b1b; }
.fel-seta { opacity: .6; }
@media (max-width: 560px) { .fel .fa-campo.larga { grid-column: auto; } }

/* Quem fez o lançamento (pedido do Julio, 04/11): operador + conta que lançou. */
.fd-quem { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.fd-quem b { font-size: .8rem; color: #1f2a44; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-quem small { font-size: .7rem; color: #6b7690; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-quem { display: inline-flex; align-items: center; gap: .25rem; color: #6b7690; }
.fa-quem svg { width: 12px; height: 12px; flex: none; opacity: .75; }

/* Aba Gestão de Estoque: lista de movimentações com quem fez (responsável + conta que lançou). */
.fem { margin-top: 1rem; }
.fem .fe-cab { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fem .fe-cab h3 { margin: 0; }
.fem-filtro { margin-left: auto; display: inline-flex; gap: .25rem; background: #f1f4f9; border-radius: 999px; padding: .2rem; }
.fem-filtro button { border: 0; background: transparent; border-radius: 999px; padding: .25rem .7rem; font-size: .76rem; font-weight: 700; color: #4a5672; cursor: pointer; }
.fem-filtro button.on { background: #fff; color: #1f2a44; box-shadow: 0 1px 3px rgba(31, 42, 68, .15); }
.fem-lista { display: flex; flex-direction: column; margin-top: .6rem; border: 1px solid #e6eaf1; border-radius: 12px; overflow: hidden; }
.fem-lin { display: grid; grid-template-columns: 54px minmax(0, 1.6fr) minmax(0, 1fr) 70px; align-items: center; gap: .7rem; padding: .5rem .8rem;
  border-left: 3px solid #16a34a; background: #fff; }
.fem-lin:nth-child(even) { background: #f8fafc; }
.fem-lin.saida { border-left-color: #dc2626; }
.fem-dia { display: flex; flex-direction: column; line-height: 1.1; }
.fem-dia b { font-size: .86rem; color: #1f2a44; } .fem-dia small { font-size: .68rem; color: #8a93a8; }
.fem-meio { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.fem-meio b, .fem-meio small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fem-meio b { font-size: .84rem; color: #1f2a44; } .fem-meio small { font-size: .74rem; color: #6b7690; }
.fem-obs { font-style: italic; }
.fem-quem { display: flex; align-items: center; gap: .35rem; min-width: 0; color: #6b7690; }
.fem-quem svg { width: 14px; height: 14px; flex: none; }
.fem-quem > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.fem-quem b { font-size: .78rem; color: #34405a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fem-quem small { font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fem-qtd { text-align: right; font-weight: 800; font-size: .95rem; color: #15803d; }
.fem-lin.saida .fem-qtd { color: #b91c1c; }
@media (max-width: 640px) {
  .fem-lin { grid-template-columns: 46px minmax(0, 1fr) 56px; }
  .fem-quem { grid-column: 2 / 4; grid-row: 2; }
  .fem-filtro { margin-left: 0; }
}
.fel .fa-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .fel .fa-grade { grid-template-columns: minmax(0, 1fr); } }

.fel-resp { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.fel-resp button { min-height: 36px; border-radius: 9px; border: 1px solid #e3e9f2; background: #f7f9fc; color: #4a5672; font-weight: 700; font-size: .8rem; cursor: pointer; }
.fel-resp button.on { background: #e8f0fe; border-color: #9db8e6; color: #1f4fa8; }
.fel-eu { font-size: .76rem; color: #6b7690; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* X do popup sempre no canto superior direito (mesmo sem a frase de dica no cabeçalho). */
.fa-form-cab .fc-fechar { margin-left: auto; }
.fel .fel-tipo { padding-left: 0; padding-right: 0; } .fel .fel-saldo { margin-left: 0; margin-right: 0; }
/* Popups da Frota: rola normalmente (roda do mouse, toque, teclado), mas sem a barra de rolagem aparecendo. */
.fa-modal { scrollbar-width: none; -ms-overflow-style: none; }
.fa-modal::-webkit-scrollbar { display: none; }

/* Cartão do equipamento: placa centralizada; obra(s) uma por linha com o pino alinhado no topo. */
.fq-linha3 { justify-content: center; }
.fq-obra-l { align-items: flex-start; }
.fq-obra-l svg { margin-top: .1rem; }
.fq-obras { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.fq-obras span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* "Quem criou" em todos os cadastros da Frota (pedido do Julio, 04/11). */
.fel-quem { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .78rem; color: #6b7690; }
.fel-quem svg, .fq-quem svg, .ft-quem svg { width: 13px; height: 13px; flex: none; opacity: .75; }
.fq-quem, .ft-quem { display: inline-flex; align-items: center; gap: .3rem; }
.ft-quem { font-size: .7rem; color: #8a93a6; }
.fel-tipo.tres { grid-template-columns: repeat(3, 1fr); }
.fel-prod { width: min(520px, 96vw); }
.fq .rfp-topo { align-items: center; }
/* "Frota 27" nunca quebra em duas linhas; o tipo comprido (ROLO PÉ DE CARNEIRO) é que quebra. */
.fq-linha1 b { white-space: nowrap; flex: none; }
.fq-linha1 small { min-width: 0; }

/* Anexos do equipamento (detalhe) e escolha de arquivos no "Novo equipamento". */
.fqa { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid #e6eaf1; }
.fqa-cab { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.fqa-cab h4 { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: .82rem; font-weight: 800; color: #34405a; text-transform: uppercase; letter-spacing: .04em; }
.fqa-cab h4 small { background: #eef2f8; border-radius: 999px; padding: 0 .45rem; font-size: .7rem; }
.fqa-add { position: relative; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .75rem; border-radius: 999px; border: 1px solid #c9d6ea;
  background: #f5f8fd; color: #1f4fa8; font-size: .78rem; font-weight: 700; cursor: pointer; }
.fqa-add svg { width: 14px; height: 14px; }
.fqa-add input, .fqn-arq input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fqa-add.ocupado { opacity: .6; pointer-events: none; }
.fqa-vazio { display: block; margin-top: .4rem; color: #8a93a6; font-size: .78rem; }
.fqa-lista { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.fqa-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 .5rem; padding: .4rem .55rem; border-radius: 9px; background: #f7f9fc; }
.fqa-lista a { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; color: #1f4fa8; font-weight: 700; font-size: .82rem; text-decoration: none; }
.fqa-lista a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fqa-lista a:hover span { text-decoration: underline; }
.fqa-lista small { grid-column: 1; font-size: .72rem; color: #6b7690; }
.fqa-rem { grid-column: 2; grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: #8a93a6; cursor: pointer; display: grid; place-items: center; }
.fqa-rem:hover { background: #fee2e2; color: #b91c1c; }
.fqa-rem svg { width: 14px; height: 14px; }
.fqn-arq { position: relative; display: flex; align-items: center; min-height: 44px; padding: 0 .8rem; border: 1px dashed #b9c6da; border-radius: 10px;
  background: #f8fafd; color: #4a5672; font-size: .84rem; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fqn-arq:hover { border-color: #1f6fd6; color: #1f4fa8; }
.fqn-lista { margin: 0; padding-left: 1.1rem; font-size: .76rem; color: #4a5672; }

/* ══ Frota — Pendências (quadro por status) ══ */
.fp-resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-bottom: .8rem; }
.fp-kpi { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .7rem; align-items: center; text-align: left;
  padding: .75rem .9rem; border-radius: 14px; border: 1px solid #e3e9f2; background: #fff; cursor: pointer; border-left: 4px solid var(--c);
  box-shadow: 0 1px 3px rgba(31, 42, 68, .06); transition: transform .15s ease, box-shadow .15s ease; }
.fp-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(31, 42, 68, .1); }
.fp-kpi.on { background: color-mix(in srgb, var(--c) 9%, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent); }
.fp-kpi b { grid-row: 1 / 3; font-size: 1.9rem; font-weight: 800; color: var(--c); line-height: 1; }
.fp-kpi span { font-weight: 800; font-size: .86rem; color: #1f2a44; }
.fp-kpi small { font-size: .72rem; color: #6b7690; }
.fp-kpi.azul { --c: #1f6fd6; } .fp-kpi.vermelho { --c: #dc2626; } .fp-kpi.ambar { --c: #d97706; } .fp-kpi.verde { --c: #16a34a; }
.fp-barra { margin-bottom: .8rem; }
.fp-abas { display: none; }
.fp-quadro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; align-items: start; }
.fp-col { background: #f4f6fa; border-radius: 16px; padding: .6rem; min-height: 200px; border-top: 4px solid var(--cor); }
.fp-col-cab { display: flex; align-items: center; gap: .45rem; padding: .15rem .3rem .55rem; }
.fp-col-cab i { width: 10px; height: 10px; border-radius: 50%; background: var(--cor); }
.fp-col-cab h2 { margin: 0; font-size: .86rem; font-weight: 800; color: #34405a; text-transform: uppercase; letter-spacing: .04em; flex: 1; }
.fp-col-cab span { font-size: .78rem; font-weight: 800; color: var(--cor); background: color-mix(in srgb, var(--cor) 12%, #fff); border-radius: 999px; padding: .05rem .55rem; }
.fp-col-corpo { display: flex; flex-direction: column; gap: .55rem; max-height: calc(100dvh - 380px); min-height: 120px; overflow: auto; scrollbar-width: thin; padding: 2px; }
.fp-vazio { margin: .8rem 0; text-align: center; color: #9aa3b5; font-size: .8rem; }
.fp-card { position: relative; background: #fff; border-radius: 12px; padding: .65rem .75rem .55rem; border: 1px solid #e3e9f2; border-left: 3px solid var(--cor);
  box-shadow: 0 1px 2px rgba(31, 42, 68, .06); cursor: pointer; animation: fp-entra .35s ease both; animation-delay: var(--atraso);
  transition: transform .15s ease, box-shadow .15s ease; }
.fp-card:hover, .fp-card:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(31, 42, 68, .12); outline: none; }
.fp-card.atrasada { border-left-color: #dc2626; background: linear-gradient(0deg, #fff, #fff6f6); }
@keyframes fp-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fp-card-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem; }
.fp-tit { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: color-mix(in srgb, var(--cor) 80%, #1f2a44); }
.fp-tag { font-style: normal; font-size: .66rem; font-weight: 800; padding: .05rem .45rem; border-radius: 999px; white-space: nowrap; }
.fp-tag.vermelho { background: #fee2e2; color: #b91c1c; } .fp-tag.ambar { background: #fef3c7; color: #92400e; }
.fp-desc { margin: .3rem 0 .4rem; font-size: .84rem; color: #1f2a44; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fp-eq { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; font-size: .72rem; color: #4a5672; background: #f1f4f9; border-radius: 999px;
  padding: .1rem .5rem; margin-bottom: .4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-eq svg { width: 13px; height: 13px; flex: none; }
.fp-card-pe { display: flex; align-items: center; justify-content: space-between; gap: .4rem; flex-wrap: wrap; }
.fp-resp { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 700; color: #34405a; }
.fp-resp i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .64rem; font-weight: 800; color: #fff;
  background: hsl(var(--h) 55% 48%); }
.fp-datas { display: inline-flex; align-items: center; gap: .5rem; font-size: .7rem; color: #6b7690; }
.fp-datas span { display: inline-flex; align-items: center; gap: .15rem; }
.fp-quem { margin-top: .35rem; font-size: .66rem; color: #9aa3b5; }
.fp-mover { position: absolute; top: .35rem; right: .35rem; display: none; gap: .2rem; }
.fp-card:hover .fp-mover, .fp-card:focus-within .fp-mover { display: inline-flex; }
.fp-card:hover .fp-tag, .fp-card:focus-within .fp-tag { visibility: hidden; }
.fp-mover button { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #d5deea; background: #fff; color: #1f4fa8; font-weight: 800; cursor: pointer; line-height: 1; }
.fp-mover button:hover { background: #e8f0fe; }
.fp-modal { width: min(700px, 96vw); }
.fp-modal textarea { width: 100%; resize: vertical; min-height: 90px; padding: .6rem .75rem; border: 1px solid #d5deea; border-radius: 10px; font: inherit; }
.fel-tipo.quatro { grid-template-columns: repeat(4, 1fr); }
.fel-tipo .st.on { background: color-mix(in srgb, var(--cor) 14%, #fff); border-color: var(--cor); color: color-mix(in srgb, var(--cor) 80%, #111); }
.fp-excluir { margin-left: auto; border: 1px solid #fecaca; background: #fff; color: #b91c1c; border-radius: 12px; padding: 0 1rem; font-weight: 700; cursor: pointer; min-height: 44px; }
.fp-excluir:hover { background: #fef2f2; }
@media (max-width: 1100px) { .fp-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .fp-abas { display: flex; gap: .3rem; overflow-x: auto; margin-bottom: .6rem; }
  .fp-abas button { flex: 1 0 auto; border: 1px solid #e3e9f2; background: #fff; border-radius: 999px; padding: .35rem .7rem; font-size: .76rem; font-weight: 700; color: #4a5672; }
  .fp-abas button.on { background: var(--cor); border-color: var(--cor); color: #fff; }
  .fp-quadro { grid-template-columns: minmax(0, 1fr); }
  .fp-col { display: none; } .fp-col.cel-on { display: block; }
  .fp-col-corpo { max-height: none; }
  .fp-mover { display: inline-flex; }
  .fel-tipo.quatro { grid-template-columns: repeat(2, 1fr); }
}

/* Anexos: imagem/PDF abrem no visualizador do site (pedido do Julio, 05/11). */
.fqa-abrir { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; padding: 0; border: 0; background: none; color: #1f4fa8;
  font-weight: 700; font-size: .82rem; cursor: pointer; text-align: left; }
.fqa-abrir span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fqa-abrir:hover span { text-decoration: underline; }
.fqa-ver-fundo { z-index: 1200; }
.fqa-ver { width: min(1100px, 96vw); height: min(88dvh, 900px); background: #fff; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.fqa-ver-cab { display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; border-bottom: 1px solid #e6eaf1; }
.fqa-ver-cab b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1f2a44; }
.fqa-ver-nova { font-size: .8rem; font-weight: 700; color: #1f4fa8; text-decoration: none; white-space: nowrap; }
.fqa-ver-corpo { flex: 1; min-height: 0; background: #f1f4f9; display: grid; place-items: center; }
.fqa-ver-corpo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fqa-ver-corpo iframe { width: 100%; height: 100%; border: 0; background: #fff; }
/* Gestão Abastecimento: linha clicável abre o lançamento; clipe quando tem anexo. */
.fa-item.clicavel { cursor: pointer; }
.fa-item.clicavel:hover { background: #f5f8fd; }
.fa-clipe { display: inline-flex; align-items: center; gap: .15rem; margin-left: .3rem; font-style: normal; font-size: .7rem; font-weight: 800;
  color: #1f4fa8; background: #e8f0fe; border-radius: 999px; padding: .05rem .4rem; }
.fa-lanc-dados { margin: .8rem 0 0; }

/* Gráficos (Ui/Grafico.razor) — antes só existiam dentro da página de SSO; agora valem em qualquer tela (ex.: Informações do Tanque). */
.gr-card { background: #fff; border: 1px solid #eef0f6; border-radius: 12px; padding: .75rem .85rem; min-width: 0; }
.gr-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; }
.gr-tit { font-size: .9rem; font-weight: 700; color: #1f2a44; margin: 0; }
.gr-dica { font-size: .72rem; color: #a3abbb; }
.gr-canvas { position: relative; }
.gr-vazio { color: #a3abbb; font-size: .86rem; text-align: center; padding: 1.6rem 0; margin: 0; }
/* Informações do Tanque: escolha do período no cabeçalho azul. */
.ti-periodos { display: inline-flex; gap: .25rem; margin-left: auto; margin-right: .6rem; background: rgba(255, 255, 255, .18); border-radius: 999px; padding: .2rem; }
.ti-periodos button { border: 0; background: transparent; color: #fff; font-weight: 700; font-size: .76rem; padding: .3rem .7rem; border-radius: 999px; cursor: pointer; }
.ti-periodos button.on { background: #fff; color: #1f4fa8; }
@media (max-width: 640px) { .ti-periodos { order: 3; width: 100%; margin: .4rem 0 0; justify-content: space-between; } }
.gr-tit { font-family: inherit; letter-spacing: 0; line-height: 1.3; }