html {
  font-size: 12px;
}

@media (min-width: 768px) {
  html {
    font-size: 12px;
  }
}

.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;
}

main {
    min-height: calc(100vh - 150px);

}
html,
body {
    min-height: 100%;
    margin:0;
}

:root {
    /* ===== Paleta da CoreBox (marinho, petróleo, aço, gelo, ouro) — CoreBox ADM, 29/09/2026 =====
    Casca e telas copiadas do EVMWeb; as cores trocadas pelas da marca (as mesmas do
    CoreBox Academy). Nomes --evm-* mantidos porque regras da folha os usam.
    Abaixo, o comentário original da paleta do EVMWeb:
    Era a opcao 5 das cinco apresentadas em
    Documents/Clientes/JR_EVM/EVMWeb - Opcoes de cor 2026-09-21.pdf.
    O vermelho e o roxo sao as cores lidas dos PIXELS do logotipo (evm.jpeg);
    o azul-ardosia e o da barra que o sistema ja tinha, um tom mais fechado. */
    --evm-vermelho:  #F3A125;
    --evm-roxo:      #0A2C42;
    --ardosia:       #2F5F73;
    --ardosia-clara: #3F7489;

    /* Cores por PAPEL. As regras usam ESTAS, nunca a cor da marca direto: o
    tema escuro so redefine esta lista (bloco :root[data-tema="escuro"] no fim
    do arquivo). Regra com cor fixa no meio da folha quebra o tema escuro. */
    --fundo-pagina:     #EEF2F5;
    --superficie:       #FFFFFF;   /* cartoes, tabelas, paineis, campos */
    --superficie-alta:  #FFFFFF;   /* menus e dialogos por cima da pagina */
    --superficie-suave: #F4F7F9;   /* painel dentro de cartao, rodape de tabela */
    --texto-forte:      #0A2C42;   /* titulos e valores */
    --texto:            #14222D;
    --texto-apoio:      #5B6B77;   /* rotulos, dicas, datas */
    --borda:            #D6E1EF;
    --borda-campo:      #BFCFDA;
    --zebra:            #F1F5F8;
    --realce-linha:     #E3ECF2;   /* hover da linha da tabela (era vermelho) */
    --tabela-cab:       #2F5F73;
    --sobre-tabela-cab: #FFFFFF;
    /* A barra usa o MESMO tom do titulo das telas (#22293A, o --texto-forte):
       pedido do usuario em 21/09/2026, apontando as letras de "MODULO
       PEDIDOS". Era #3C4A6B, um azul mais claro — que virou o hover. */
    --barra-fundo:      #0A2C42;   /* barra lateral */
    --barra-texto:      #C3D5DE;
    --barra-hover:      #2F5F73;
    --acao:             #F3A125;   /* botao principal e item ativo da barra */
    --sobre-acao:       #1B1406;
    --acao-hover:       #D9860A;
    /* Link: o azul do Bootstrap destoava da marca; aqui e o petroleo. */
    --bs-link-color-rgb: 47,95,115;
    --bs-link-hover-color-rgb: 10,44,66;
    --sombra:           0 1px 2px rgba(34,41,58,.06), 0 6px 18px rgba(34,41,58,.08);
    --sombra-forte:     0 10px 30px rgba(34,41,58,.18);

    /* A arte dos cards do painel e um glifo #243044 sobre fundo transparente
   (regra da skill padrao-visual-evmweb). Ela e monocromatica, entao no tema
   escuro o card acompanha as outras superficies e o desenho e clareado por
   filtro — veja .dash-card-arte e o bloco do tema escuro. */
--carta-fundo: #FFFFFF;
--carta-texto: #0A2C42;
--carta-tinta: #EAF0F4;
--carta-tinta-forte: #D6E1EF;

/* Acentos dos paineis de numeros (Inicio, Contas a Pagar e a Receber). Sao
   SEMANTICOS, nao decorativos: ambar = vence hoje, vermelho = em atraso. Os
   tons claros ficam no bloco do tema escuro. */
--ds-ambar: #B45309;
--ds-vermelho: #B42318;
--ds-azul: #2C5FAD;
--ds-verde: #0F766E;
--ds-roxo: #6D28D9;
--ds-indigo: #0A2C42;

/* Avisos: toast e dialogo da casa (o SweetAlert2 saiu em 21/09/2026). Os tons
   sao os mesmos que as etiquetas de situacao ja usavam. */
--ok-fundo: #EAF7F0;
--ok-texto: #157347;
--ok-vivo: #1A8A55;
--alerta-fundo: #FDF1DC;
--alerta-texto: #7A4E08;
--erro-fundo: #FEF0F0;
--erro-borda: #F8C7C7;
--erro-texto: #B42318;

--dre-border: var(--borda);               /* cor padrao das linhas do DRE */
    --dre-border-strong: var(--evm-roxo);     /* cabecalho/linhas fortes do DRE */
}

body {
    background-color: var(--fundo-pagina);
    color: var(--texto);


    overflow-x: hidden;
    overflow-y: auto;
}


@keyframes pulseCNC {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.6);
    }
}
.trail {
    border-radius: 50%;
    pointer-events: none;
    animation: trailFade 0.8s ease-out forwards;
    background: radial-gradient(circle, rgba(172,132,164,0.95) 0%, rgba(172,132,164,0.25) 40%, rgba(172,132,164,0) 70%);
    box-shadow: 0 0 12px rgba(172,132,164,0.7), 0 0 24px rgba(172,132,164,0.35);
}

@keyframes trailFade {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(2);
    }
}


.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;
}
.floating-logo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(2); /* Começa grande e centralizada */
    opacity: 0; /* começa invisível */
    z-index: 1000;
    transition: all 1s ease-in-out;
    pointer-events: auto;
}

    .floating-logo.ativo {
        top: -8px; /* posição final no topo */
        left: 50%;
        transform: translateX(-50%) scale(1); /* volta ao tamanho normal */
        opacity: 1; /* visível */


    }

    .floating-logo img {
        height: 90px;
        border-radius: 10px;
        box-shadow: 0 15px 8px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease;
        background: white;
        padding: 18px;

    }

    .floating-logo:hover {
        transform: translateX(-50%) scale(1.1);
        filter: brightness(1.2) saturate(1.4) drop-shadow(0 4px 10px rgba(255, 165, 0, 0.6));
    }

/* Links do menu */

    .navbar-nav .nav-link:hover,

/* Brand da empresa */

/* Botão de logout, se houver */


/* Responsividade - colapsado */
@media (max-width: 768px) {
    .navbar {
        border-radius: 0;
        padding: 1rem;
    }

}


    footer spam {
        display: block; /* Garante que o texto ocupe toda a largura */
        font-size: 10px; /* Tamanho da fonte */
    }

    footer a {
        color: white; /* Cor dos links */
        text-decoration: none; /* Remove sublinhado */
    }

        footer a:hover {
            text-decoration: underline; /* Sublinha ao passar o mouse */
        }


/* Dá um “lift” nos cards */
.card.shadow-glass {
    transition: transform .15s ease, box-shadow .15s ease;
}

    .card.shadow-glass:hover {
        transform: translateY(-2px);
    }

.shadow-glass {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 1.3rem 1.8rem;
    box-shadow: var(--sombra);
    color: var(--texto);
}

.table-glass-container {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    box-shadow: var(--sombra);
    color: var(--texto);
    margin-top: 20px;
}
.table-glass {
    width: 100%;
    color: var(--texto);
    background-color: var(--superficie);
    border-radius: 6px;
    overflow: hidden;
}

    .table-glass thead th {
        background: var(--tabela-cab);
        padding: 0.8rem;
        font-size: .82rem;
        font-weight: 700;
        letter-spacing: .5px;
        border: none;
        text-transform: uppercase;
        color: var(--sobre-tabela-cab);
    }

    /* Cabecalho ordenavel (Html.OrdenarPor): na cor do texto do cabecalho, nao no vermelho do EVMWeb. */
    .table-glass thead th .link-ordenar { color: var(--sobre-tabela-cab); }
    .table-glass thead th .link-ordenar:hover { color: var(--acao); }

    /* Linhas padrão */
    .table-glass tbody tr > td {
        padding: 0.6rem;
        border: none;
        border-top: 1px solid var(--borda);
        text-transform: none;   /* no EVMWeb era capitalize; aqui os titulos vem como a CoreBox escreveu */
        font-size: 1rem;
        background: var(--superficie);
        color: var(--texto);
        transition: 0.25s ease;
    }

    /* Linhas alternadas - striped */
    .table-glass tbody tr:nth-child(even) > td {
        background: var(--zebra);
    }

    /* Hover */
    .table-glass tbody tr:hover > td {
        background: var(--realce-linha) !important;
        color: var(--texto-forte) !important;
        cursor: pointer;
    }

    /* Caso tenha links, ícones ou spans dentro da tabela */
    .table-glass tbody tr:hover a,
    .table-glass tbody tr:hover i,
    .table-glass tbody tr:hover span {
        color: var(--texto-forte) !important;
    }

.h1-novo {
    color: var(--texto-forte) !important;
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(2rem, 3vw, 4rem);
    line-height: .88;
    letter-spacing: -.06em;
    font-weight: 500;
    max-width: 820px;
    text-shadow: 1px 1px 1px rgba(255,255,255,.25), -1px -1px 2px rgba(0,0,0,.50);

}

.btn-padrao {
    color: var(--texto-forte) !important;
    background-color: var(--superficie) !important;
    border: 1px solid var(--borda-campo) !important;
    border-radius: 6px;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease;
}

















.btn-voltar-icon img {
    transition: all 0.3s ease;
    filter: brightness(0.9);
    height: 50px;
}

.btn-voltar-icon:hover img {
    transform: translateX(-5px) scale(1.08);
    filter: brightness(1.5);
}

.btn-voltar-icon:hover {
    cursor: pointer;
    box-shadow: 0 0 120px rgba(255, 180, 0, 0.45);
}
/* Animação suave de pulo */
@keyframes bounceArrow {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-6px);
    }

    100% {
        transform: translateX(0);
    }
}

/* Ajuste base */
.btn-voltar-icon img {
    transition: filter 0.3s ease;
    filter: brightness(0.9);
}

/* Hover com animação */
.btn-voltar-icon:hover img {
    animation: bounceArrow 0.6s ease-in-out infinite;
    filter: brightness(1.25);
    cursor: pointer;
}

@keyframes moveGrid {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 60px 60px;
    }
}

.grecaptcha-badge {
    bottom: 150px !important; /* sobe o selo */
    z-index: 9999 !important;
}

/* Logotipo com rotação */
.spinner-logo {
    width: 120px; /* Ajuste o tamanho conforme necessário */
    height: auto;
    animation: blink 1.5s linear infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3; /* Tornar semi-transparente */
    }

    100% {
        opacity: 1; /* Voltar ao normal */
    }
}
.spinner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 30, 0.35);
    display: grid;
    place-items: center;
    z-index: 2000;
}

.spinner-card {
    background: var(--superficie);
    padding: 22px 26px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    gap: 12px;
}

.spinner-gif {
    width: 64px; /* ajuste conforme tamanho do seu GIF */
    height: 64px;
}

.spinner-text {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--texto-apoio);
}
.pagination {
    gap: 6px;
    margin-top:20px;
}

    .pagination .page-item .page-link {
        border: none;
        color: var(--texto-forte);
        background: var(--superficie);
        border: 1px solid var(--borda);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 10px;
        padding: 8px 14px;
        transition: all 0.25s ease;
        box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    }

        /* Hover */
        .pagination .page-item .page-link:hover {
            background: var(--realce-linha);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.3);
        }

    /* Ativo */
    .pagination .page-item.active .page-link {
        background: var(--acao);
        color: var(--sobre-acao);
        font-weight: bold;
        box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    }

    /* Desabilitado */
    .pagination .page-item.disabled .page-link {
        opacity: 0.4;
        pointer-events: none;
    }

/* Responsivo */
@media (max-width: 576px) {
    .pagination .page-link {
        padding: 6px 10px;
        font-size: 0.85rem;
    }
}


.info-group {
    margin-bottom: 15px;
}

    .info-group label {
        display: block;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--texto-apoio);
        margin-bottom: .35rem;
    }

    .info-group div {
        font-size: 1rem;
        font-weight: 500;
        color: var(--texto-forte);
        background: var(--superficie-suave);
        padding: 8px 10px;
        border-radius: 8px;
    }

.info-group {
    margin-bottom: 1rem;
}

.form-modern {
    margin-bottom: 15px;

}

    .form-modern label {
        font-size: 0.8rem;
        color: var(--texto-apoio);
        margin-bottom: 4px;
        display: block;
    }

    .form-modern input,
    .form-modern select,
    .form-modern textarea
    {
        background: var(--superficie);
        border: 1px solid var(--borda-campo);
        color: var(--texto-forte);
        border-radius: 8px;
        padding: 12px;
    }
        /* placeholder correto */
        .form-modern input::placeholder {
            color: var(--texto-apoio);
            opacity: 0.8;
            font-size: 1rem;
            font-weight: 500;
        }
        .form-modern input:focus,
        .form-modern select:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(182,28,34,.25);
            background: var(--superficie);
            color: var(--texto-forte);
        }

/* Select2 largura total */
/* ===== Campos de formulário no mesmo padrão dos selects =====
   O select2 do sistema é escuro, arredondado e tem 42px (regra logo abaixo),
   enquanto o .form-control é o padrão do Bootstrap: branco, reto e 29px. Lado a
   lado num formulário isso fica visivelmente desencontrado. Aqui os inputs
   passam a seguir o MESMO tratamento, e só dentro do cartão de formulário
   (.shadow-glass) — para não mexer nas telas de login e nos filtros que já têm
   estilo próprio. */
/* Desde 21/09/2026 a tela de entrar usa o mesmo cartão e os mesmos campos
   do resto do sistema, então o antigo body:not(.tela-login) saiu daqui.
   ⚠️ O :not(textarea) NÃO é decoração. Sem ele esta regra vence a de baixo por
   especificidade (4 classes contra 3) e IMPÕE 42px de altura ao textarea — o
   rows="4" do HTML não tem chance contra CSS. Era por isso que o campo de
   observação do Pedido ficava do tamanho de uma linha. */
.shadow-glass .form-control:not(.form-control-sm):not(textarea),
.shadow-glass .form-select:not(.js-select2) {
    height: 42px;
    background-color: var(--superficie);
    border: 1px solid var(--borda-campo);
    border-radius: 8px;
    color: var(--texto-forte);
    padding: 0 10px;
}

/* O textarea herda cor/fundo/borda da regra acima, mas a altura é do rows=. */
.shadow-glass textarea.form-control {
    height: auto;
    min-height: 42px;
    background-color: var(--superficie);
    border: 1px solid var(--borda-campo);
    border-radius: 8px;
    color: var(--texto-forte);
    padding: 8px 10px;
}

    .shadow-glass .form-control:focus,
    .shadow-glass .form-select:not(.js-select2):focus {
        background-color: var(--superficie);
        color: var(--texto-forte);
        box-shadow: none;
    }

    .shadow-glass .form-control::placeholder {
        color: var(--texto-apoio);
    }

    /* O seletor de data desenha o ícone em preto, que some no fundo escuro. */
    .shadow-glass input[type="date"]::-webkit-calendar-picker-indicator {
        opacity: 0.7;
    }

.select2-container {
    width: 100% !important;
}

/* Container geral */
.select2-container--default .select2-selection--single {
    background-color: var(--superficie) !important;
    border: 1px solid var(--borda-campo) !important;
    border-radius: 8px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    color: var(--texto-forte) !important;
}

    /* Texto selecionado */
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--texto-forte) !important;
        line-height: 42px !important;
        padding-left: 0 !important;
    }

    /* Placeholder */
    .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: var(--texto-apoio) !important;
        opacity: 0.8 !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
    }

    /* Seta */
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 42px !important;
    }

        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-color: var(--texto-apoio) transparent transparent transparent !important;
            border-style: solid !important;
            border-width: 6px 5px 0 5px !important;
        }

/* Dropdown */
.select2-dropdown {
    background-color: var(--superficie-alta) !important;
    border: 1px solid var(--borda) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* Opções */
.select2-results__option {
    color: var(--texto) !important;
    background-color: transparent !important;
}

/* Hover opção */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--acao) !important;
    color: var(--sobre-acao) !important;
}

/* Item selecionado dentro do dropdown */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--realce-linha) !important;
    color: var(--texto-forte) !important;
}

/* Focus */
.select2-container--default.select2-container--focus .select2-selection--single {
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.35) !important;
}



#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.toast {
    min-width: 220px;
    max-width: 320px;
    padding: 12px 16px;
    border-radius: 8px;
    color: var(--sobre-acao);
    background: var(--ardosia);
    box-shadow: var(--sombra-forte);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .3s ease, transform .3s ease;
}

    .toast.show {
        opacity: 1;
        transform: translateX(0);
    }

    .toast.success {
        border-left: 4px solid #28a745;
    }

    .toast.error {
        border-left: 4px solid var(--acao);
    }

    .toast.info {
        border-left: 4px solid #17a2b8;
    }
.video-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-controls {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 18px;
    background: rgba(10,44,66,.42);
    backdrop-filter: blur(18px);
    z-index: 20;
}

.video-btn {
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    color: white;
    cursor: pointer;
    transition: .3s;
    font-size: 15px;
}

    .video-btn:hover {
        background: rgba(255,255,255,.24);
    }

.progress-bar {
    flex: 1;
    appearance: none;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    cursor: pointer;
}

    .progress-bar::-webkit-slider-thumb {
        appearance: none;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #f3a125;
        cursor: pointer;
    }

.page-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2rem;
}

.page-heading-line {
    width: 5px;
    height: 30px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--acao), var(--acao-hover));
    box-shadow: none;
    animation: pulseLine 1.6s ease-in-out infinite;
}

.page-heading-line1 {
    width: 5px;
    height: 30px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--acao), var(--acao-hover));
    box-shadow: none;

}

.page-kicker {
    display: block;
    margin-bottom: 4px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--texto-apoio);
}

.page-title {
    margin: 0;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: clamp(2rem, 3vw, 4rem);
    font-weight: 800;
    letter-spacing: -.06em;
    line-height: .9;
    color: var(--texto-forte);
    text-shadow: 1px 1px 1px rgba(255,255,255,.35), -1px -1px 1px rgba(0,0,0,.45);
    text-transform:uppercase;
}
.icon-documento {
    font-size: 22px;
    background: var(--acao);
    color: var(--sobre-acao);
    padding: 10px;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
}

    .icon-documento:hover {
        background: var(--acao-hover);
        color: var(--sobre-acao);
        transform: scale(1.08);
    }

#upload-container {
    display: inline-block;
    text-align: center;
    max-width: 100%;
    cursor: pointer;
    border: none;
}

.upload-wrapper {
    position: relative;
    display: inline-block;
    width: 120px;
    max-width: 120px;
    max-height: 120px;
    height: 120px;
    background-color: transparent;
    border-radius: 8px;
    overflow: hidden;
    border: none;
}

#upload-trigger {
    cursor: pointer;
    width: 120px;
    height: 120px;
    border-radius: 88px;
    transition: transform 0.2s ease;
    display: block;
    background-color: transparent;
}

    #upload-trigger:hover {
        box-shadow: 0 0 12px #FFA500;
    }

.remove-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    transform: translate(50%, -50%);
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: none;

}

.overlay-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 88px;
    font-size: 10px;
    pointer-events: none;
    text-align: center;
}

#file-info {
    font-size: 14px;
    margin-top: 6px;
    text-align: center;
    color: #444;
}

#arquivo {
    display: none;
}
.tipo-card {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
    transition: all .2s ease;
}

    .tipo-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, .10);
        border-color: rgba(220, 53, 69, .25);
    }

.tipo-card-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 20px;
}

    .tipo-card-icon.fornecedor {
        background: rgba(13, 110, 253, .10);
        color: #0d6efd;
    }

    .tipo-card-icon.prospect {
        background: rgba(255, 193, 7, .18);
        color: #b58100;
    }

    .tipo-card-icon.cliente {
        background: rgba(25, 135, 84, .12);
        color: #198754;
    }

.tipo-card-content {
    width: 100%;
}

    .tipo-card-content small {
        display: block;
        margin-top: 4px;
        color: #6c757d;
        font-size: 12px;
        line-height: 1.3;
    }

.tipo-card .form-check {
    margin-bottom: 0;
}

.tipo-card .form-check-input {
    cursor: pointer;
}

.tipo-card .form-check-label {
    cursor: pointer;
    color: #2b2b2b;
}

.upload-container-insumo {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.upload-wrapper-insumo {
    width: 80%;
    height: 80%;
    border-radius: 18px;
    background: var(--superficie-suave);
    border: 1px dashed var(--borda-campo);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .25s ease;
}

    .upload-wrapper-insumo:hover {
        border-color: var(--acao);
        background: var(--realce-linha);
        opacity: 0.8;
    }

.upload-preview-insumo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.overlay-message-insumo {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: 13px;
    text-align: center;
    padding: 8px 10px;
}

.remove-btn-insumo {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: none;
    z-index: 5;
}

.file-info-insumo {
    margin-top: 8px;
    font-size: 12px;
    color: #6c757d;
    text-align: center;
    max-width: 260px;
    word-break: break-word;
}

.col-descricao {
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.status-badge__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background-color: currentColor;
}

/* Normal */
.status-badge--success {
    color: #157347;
    background-color: #eaf7f0;
    border-color: #b7e4ca;
}

/* Cancelada */
.status-badge--danger {
    color: #b42318;
    background-color: #fef0f0;
    border-color: #f8c7c7;
}

/* Denegada */
.status-badge--dark {
    color: #344054;
    background-color: #f2f4f7;
    border-color: #d0d5dd;
}

/* Não informada */
.status-badge--neutral {
    color: #667085;
    background-color: #f9fafb;
    border-color: #e4e7ec;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.01em;
    cursor: default;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .status-badge:hover {
        transform: translateY(-1px);
    }

.status-badge__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background-color: currentColor;
    transition: transform 0.2s ease;
}

.status-badge:hover .status-badge__dot {
    transform: scale(1.2);
}

/* Normal */
.status-badge--success {
    color: #157347;
    background-color: #eaf7f0;
    border-color: #b7e4ca;
}

    .status-badge--success:hover {
        color: #0f5132;
        background-color: #d8f1e3;
        border-color: #8fd3ad;
        box-shadow: 0 4px 12px rgba(21, 115, 71, 0.15);
    }

/* Cancelada */
.status-badge--danger {
    color: #b42318;
    background-color: #fef0f0;
    border-color: #f8c7c7;
}

    .status-badge--danger:hover {
        color: #842029;
        background-color: #fde2e2;
        border-color: #f1aeb5;
        box-shadow: 0 4px 12px rgba(180, 35, 24, 0.15);
    }

/* Denegada */
.status-badge--dark {
    color: #344054;
    background-color: #f2f4f7;
    border-color: #d0d5dd;
}

    .status-badge--dark:hover {
        color: #1d2939;
        background-color: #e4e7ec;
        border-color: #98a2b3;
        box-shadow: 0 4px 12px rgba(52, 64, 84, 0.15);
    }

/* Não informada */
.status-badge--neutral {
    color: #667085;
    background-color: #f9fafb;
    border-color: #e4e7ec;
}

    .status-badge--neutral:hover {
        color: #475467;
        background-color: #f2f4f7;
        border-color: #cfd4dc;
        box-shadow: 0 4px 12px rgba(102, 112, 133, 0.12);
    }

/* Acessibilidade: desativa movimentos quando solicitado pelo usuário */
@media (prefers-reduced-motion: reduce) {
    .status-badge,
    .status-badge__dot {
        transition: none;
    }

        .status-badge:hover,
        .status-badge:hover .status-badge__dot {
            transform: none;
        }
}

/* ===========================
   BARRA DO TOPO: "Olá, Nome" + avatar (foto ou inicial), ao lado do Logout.
   Mesmo desenho do AnalisePlan e do CoreBoxCRM. Usado também no cadastro de usuários.
   =========================== */
.navbar-usuario {
    display: flex; align-items: center; gap: .55rem;
    color: #fff; white-space: nowrap; min-width: 0;
}
.navbar-usuario-ola { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }
.navbar-usuario-ola strong { font-weight: 600; }

.avatar-usuario {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #243044;
    font-size: .9rem; font-weight: 700; line-height: 1;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(255,255,255,.55);
    user-select: none;
}
.avatar-usuario.avatar-lista { width: 30px; height: 30px; flex-basis: 30px; font-size: .8rem; background: #dfe4ee; box-shadow: none; }
.avatar-usuario.avatar-grande { width: 96px; height: 96px; flex-basis: 96px; font-size: 2.2rem; background: #dfe4ee; box-shadow: none; }

/* O avatar da barra é um botão: clicar troca a foto do próprio usuário. */
.avatar-botao {
    position: relative; padding: 0; border: 0; background: none;
    border-radius: 50%; cursor: pointer; line-height: 0;
}
.avatar-botao:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.avatar-botao-camera {
    position: absolute; right: -3px; bottom: -3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #243044; color: #fff; font-size: 9px; line-height: 16px; text-align: center;
    opacity: 0; transition: opacity .15s ease;
}
.avatar-botao:hover .avatar-botao-camera,
.avatar-botao:focus-visible .avatar-botao-camera { opacity: 1; }
.avatar-botao:hover .avatar-usuario { box-shadow: 0 0 0 2px #fff; }
.avatar-botao.enviando { opacity: .55; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .avatar-botao-camera { transition: none; } }

/* =====================================================================
   ITENS EM CARD NO CELULAR (17/09/2026)
   Pedido do usuário: no celular a grade de itens do orçamento/pedido não cabe
   na tela — some com o rótulo da coluna e a pessoa digita no campo errado (foi
   junto da reclamação do valor). Até 767px cada linha vira um CARD com os
   rótulos em cima de cada campo (vêm do data-rotulo, posto no _PedidoFormScripts).
   O HTML continua sendo uma <table>: os names dos itens (Itens[i].Campo) e todo
   o JS do formulário seguem iguais.
   ===================================================================== */
.rotulo-excluir { display: none; }

@media (max-width: 767.98px) {
    #tabelaItens thead { display: none; }

    #tabelaItens, #tabelaItens tbody, #tabelaItens tfoot,
    #tabelaItens tr, #tabelaItens td { display: block; width: 100%; }

    #tabelaItens tbody tr.item-row {
        background: #fff;
        border-radius: .5rem;
        padding: .6rem .7rem .7rem;
        margin-bottom: .85rem;
        box-shadow: 0 4px 10px rgba(0,0,0,.28);
    }

    #tabelaItens tbody tr > td {
        background: transparent;
        padding: .3rem 0;
        text-transform: none;
        text-align: left !important;
    }

    /* Rótulo da coluna acima do campo. */
    #tabelaItens tbody td[data-rotulo]::before {
        content: attr(data-rotulo);
        display: block;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .3px;
        text-transform: uppercase;
        color: #6c757d;
        margin-bottom: .15rem;
    }

    /* Total da linha em destaque, na mesma linha do rótulo. */
    #tabelaItens tbody td.item-total {
        display: flex; align-items: baseline; justify-content: space-between;
        border-top: 1px solid #e9ecef;
        margin-top: .35rem; padding-top: .45rem;
        font-size: 1.05rem; font-weight: 700;
    }
    #tabelaItens tbody td.item-total::before { margin-bottom: 0; }

    #tabelaItens tbody td.item-acoes { text-align: center !important; padding-top: .5rem; }
    #tabelaItens tbody td.item-acoes .btn { width: 100%; }
    .rotulo-excluir { display: inline; }

    /* Rodapé (totais e desconto): rótulo à esquerda, valor à direita. */
    #tabelaItens tfoot tr {
        display: flex; align-items: center; justify-content: space-between; gap: .6rem;
        background: var(--superficie-suave);
        border-radius: .4rem;
        padding: .35rem .6rem;
        margin-bottom: .35rem;
        color: var(--texto-forte);
    }
    #tabelaItens tfoot td {
        background: transparent !important;
        color: var(--texto-forte);
        border: 0;
        padding: .15rem 0;
        width: auto;
        text-align: right !important;
    }
    #tabelaItens tfoot td:first-child { text-align: left !important; flex: 1; }
    #tabelaItens tfoot td:empty { display: none; }
    #tabelaItens tfoot input { min-width: 8rem; }

    /* Sem a barra de rolagem horizontal: em card nada estoura a largura. */
    .table-responsive:has(#tabelaItens) { overflow-x: visible; }
}

/* ==========================================================================
   BARRA LATERAL, TEMA CLARO/ESCURO E O QUE O VIDRO DEIXOU PARA TRAS
   21/09/2026 — pedido do usuario: "o layout do Friday" (CoreBox Projetos),
   na paleta "Cinza suave" que o Sinval escolheu entre as cinco.

   O sistema deixou de ter navbar no topo: o menu virou a barra da esquerda,
   com os mesmos 13 modulos de Meus Modulos, cada um preso ao seu claim.
   ========================================================================== */

.app {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.barra {
    width: 236px;
    flex: 0 0 236px;
    background: var(--barra-fundo);
    display: flex;
    flex-direction: column;
    padding: 16px 10px 12px;
    position: sticky;
    top: 0;
    height: 100vh;
    transition: width .16s ease, flex-basis .16s ease;
}

.barra-marca {
    display: block;
    text-align: center;
    padding: 2px 0 16px;
    text-decoration: none;
}

    /* O logo da EVM e um retangulo claro: fundo branco e canto arredondado
       para ele nao brigar com o azul da barra. So a altura e fixa. */
    .barra-marca img {
        height: 54px;
        width: auto;
        border-radius: 8px;
        background: #fff;
        padding: 5px 7px;
    }

.barra-nome {
    display: block;
    margin-top: 8px;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: #fff;
    text-transform: uppercase;
}

/* A lista de modulos e longa (13 + Home): rola por dentro, para o rodape da
   barra com o usuario e os botoes nunca sair da tela. */
.barra-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
    scrollbar-width: thin;
}

.barra-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border-radius: 8px;
    color: var(--barra-texto);
    text-decoration: none;
    font-size: .9rem;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}

    .barra-item i {
        font-size: 1.02rem;
        width: 20px;
        flex: 0 0 20px;
        text-align: center;
    }

    .barra-item:hover {
        background: var(--barra-hover);
        color: #fff;
    }

    /* O vermelho da marca e o unico tom quente da paleta: fica reservado ao
       item aberto. Branco por cima passa em contraste (6,6:1). */
    .barra-item.ativo {
        background: var(--acao);
        color: var(--sobre-acao);
        font-weight: 600;
    }

        .barra-item.ativo:hover {
            background: var(--acao-hover);
            color: var(--sobre-acao);
        }

/* Os botoes do pe: tema a esquerda, recolher a direita. */
.barra-botoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding-top: 10px;
}

.barra-tema,
.barra-alternar {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--barra-texto);
    opacity: .75;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
}

.barra-alternar {
    margin-left: auto;
}

    .barra-tema:hover,
    .barra-alternar:hover {
        background: var(--barra-hover);
        color: #fff;
        opacity: 1;
    }

    .barra-tema svg,
    .barra-alternar svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
        transition: transform .16s ease;
    }

/* O icone mostra para onde o clique leva: lua no claro, sol no escuro. */
.barra-tema .icone-sol,
:root[data-tema="escuro"] .barra-tema .icone-lua {
    display: none;
}

:root[data-tema="escuro"] .barra-tema .icone-sol {
    display: block;
}

.barra-usuario {
    padding-top: 12px;
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.barra-usuario-dados {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.barra-usuario-nome {
    font-size: .84rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barra-usuario form {
    margin: 0;
}

.barra-sair {
    background: none;
    border: none;
    padding: 0;
    font-size: .76rem;
    color: var(--barra-texto);
    cursor: pointer;
    text-align: left;
}

    .barra-sair:hover {
        color: #fff;
        text-decoration: underline;
    }

.conteudo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--fundo-pagina);
}

    .conteudo main {
        padding: 20px 22px 24px;
        flex: 1 1 auto;
        min-width: 0;
    }

.rodape-app {
    padding: 0 22px 16px;
    color: var(--texto-apoio);
    font-size: .78rem;
    text-align: center;
}

/* --- barra recolhida: so os icones --- */
.barra-recolhida .barra {
    width: 62px;
    flex: 0 0 62px;
    padding-left: 7px;
    padding-right: 7px;
}

.barra-recolhida .barra-item {
    justify-content: center;
    padding: 9px 0;
    gap: 0;
}

    .barra-recolhida .barra-item span {
        display: none;
    }

.barra-recolhida .barra-marca img {
    height: 36px;
}

.barra-recolhida .barra-nome {
    display: none;
}

.barra-recolhida .barra-botoes {
    flex-direction: column;
}

.barra-recolhida .barra-alternar {
    margin-left: 0;
}

    .barra-recolhida .barra-alternar svg {
        transform: rotate(180deg);
    }

.barra-recolhida .barra-usuario {
    justify-content: center;
}

    .barra-recolhida .barra-usuario-dados {
        display: none;
    }

/* --- tela estreita: a barra vira uma faixa no topo --- */
@media (max-width: 900px) {
    .app {
        flex-direction: column;
    }

    .barra {
        width: 100%;
        flex: none;
        height: auto;
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        overflow-x: auto;
    }

    .barra-marca {
        padding: 0 8px 0 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .barra-marca img {
            height: 32px;
        }

    .barra-nome {
        margin-top: 0;
        font-size: .82rem;
    }

    .barra-menu {
        flex-direction: row;
        gap: 3px;
        overflow-y: visible;
    }

    .barra-usuario {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    .barra-botoes {
        padding-top: 0;
    }

    /* Em faixa horizontal, recolher nao faz sentido. */
    .barra-alternar {
        display: none;
    }

    .barra-recolhida .barra {
        width: 100%;
        flex: none;
    }

        .barra-recolhida .barra-item span {
            display: inline;
        }

    .conteudo main {
        padding: 14px 14px 20px;
    }
}

/* ==========================================================================
   O QUE O CARTAO DE VIDRO DEIXOU NAS TELAS
   O cartao antigo era escuro com `color:#fff`, e por isso 331 pontos das
   telas pedem .text-white e outros 354 pedem .text-white-50. Com a superficie
   clara esse texto sumiria. Em vez de mexer em 200 arquivos .cshtml, as duas
   classes passam a significar "texto sobre a superficie" — menos o que tem
   fundo proprio (botao, etiqueta, cabecalho de modal, .bg-*), que continua
   branco de verdade.
   ========================================================================== */
.conteudo .text-white:not(.btn):not(.badge):not(.modal-header):not([class*="bg-"]),
.conteudo .text-white:not(.btn):not(.badge):not(.modal-header):not([class*="bg-"]) *,
body.tela-login .text-white:not(.btn):not(.badge):not([class*="bg-"]) {
    color: var(--texto-forte) !important;
}

.conteudo .text-white-50:not([class*="bg-"]),
body.tela-login .text-white-50:not([class*="bg-"]) {
    color: var(--texto-apoio) !important;
}

/* O contrario tambem existe: 227 pontos das telas escrevem .text-dark, porque
   no vidro antigo o texto precisava ser forcado a escuro. No tema escuro isso
   vira preto sobre fundo escuro. Mesma leitura das de cima: a classe significa
   "texto sobre a superficie", nao "texto preto". */
:root[data-tema="escuro"] .conteudo .text-dark:not([class*="bg-"]) {
    color: var(--texto-forte) !important;
}

/* Dentro do card, a cor do texto vem do token do proprio card. */
:root[data-tema="escuro"] .dash-card-inner .text-dark {
    color: var(--carta-texto) !important;
}

/* .bg-light, .bg-white e .table-light NAO viram com o data-bs-theme: claro
   continua claro. Num painel desses o texto ja neutralizado acima ficaria
   claro sobre claro, entao eles passam a ser a superficie de apoio. */
:root[data-tema="escuro"] .conteudo .bg-light,
:root[data-tema="escuro"] .conteudo .bg-white,
:root[data-tema="escuro"] .conteudo .table-light > *,
:root[data-tema="escuro"] .conteudo .table-light {
    background-color: var(--superficie-suave) !important;
    --bs-table-bg: var(--superficie-suave);
    color: var(--texto-forte);
}

/* Etiqueta e cabecalho de modal continuam com fundo colorido: ali o branco e
   o certo, e o seletor acima nao alcanca os filhos deles. */
.conteudo .badge.text-white,
.conteudo .badge.text-white *,
.conteudo .modal-header.text-white,
.conteudo .btn.text-white {
    color: #fff !important;
}

/* ==========================================================================
   TEMA ESCURO
   So redefine as cores por PAPEL. Nada de regra nova aqui dentro: componente
   que precise de ajuste ganha uma linha no fim do bloco, com o porque.
   ========================================================================== */
:root[data-tema="escuro"] {
    --fundo-pagina: #071B28;
    --superficie: #0D2A3D;
    --superficie-alta: #12364D;
    --superficie-suave: #0A2233;
    --texto-forte: #EAF0F4;
    --texto: #EAF0F4;
    --texto-apoio: #A6B7C2;
    --borda: #1E3E52;
    --borda-campo: #2B5068;
    --zebra: #0F3046;
    --realce-linha: #15405A;
    --tabela-cab: #1E3E52;
    --sobre-tabela-cab: #E6EAF2;
    /* A barra continua sendo a coisa mais escura da tela, como no claro. */
    --barra-fundo: #041522;
    --barra-texto: #A1C4CE;
    --barra-hover: #12364D;
    /* O vermelho da marca fecha demais sobre fundo escuro: acende um tom. */
    --acao: #F3A125;
    --acao-hover: #FFB84D;
    --bs-link-color-rgb: 161,196,206;
    --bs-link-hover-color-rgb: 214,225,239;
    --sombra: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.42);
    --sombra-forte: 0 12px 34px rgba(0,0,0,.55);
    /* O card de modulo tambem escurece: placa branca no tema escuro era um
       facho de luz no meio da tela. A arte dele vira branca pelo filtro
       logo abaixo. */
    --carta-fundo: #0D2A3D;
    --carta-texto: #EAF0F4;
    --carta-tinta: #12364D;
    --carta-tinta-forte: #1E3E52;
    /* Os acentos dos paineis clareiam: o tom que le sobre branco nao le sobre
       fundo escuro. Estes sao os que a tela ja usava antes da virada. */
    --ds-ambar: #F0C674;
    --ds-vermelho: #FF8C85;
    --ds-azul: #8CC2FF;
    --ds-verde: #74E3C2;
    --ds-roxo: #C9ADFF;
    --ds-indigo: #AAB9FF;

    /* Avisos no tema escuro: mesmo significado, tom fechado. */
    --ok-fundo: #16301F;
    --ok-texto: #7FD69F;
    --ok-vivo: #5FC98A;
    --alerta-fundo: #3A2F14;
    --alerta-texto: #F0C674;
    --erro-fundo: #351A1D;
    --erro-borda: #5A2A2E;
    --erro-texto: #FF9AA0;
}

/* A arte do card e monocromatica (#233045 com antialias). O brightness(0)
   achata tudo para preto e o invert(1) devolve branco puro — e o jeito de
   clarear glifo de uma cor so sem gerar 57 arquivos novos. */
:root[data-tema="escuro"] .dash-card-arte {
    filter: brightness(0) invert(1);
    opacity: .92;
}

/* As etiquetas de situacao eram pasteis claras: no escuro viravam manchas
   brancas no meio da tabela. Mesmo significado, tom fechado. */
:root[data-tema="escuro"] .status-badge--success {
    color: #7FD69F;
    background-color: #16301F;
    border-color: #245334;
}

:root[data-tema="escuro"] .status-badge--danger {
    color: #FF9AA0;
    background-color: #351A1D;
    border-color: #5A2A2E;
}

:root[data-tema="escuro"] .status-badge--dark {
    color: #C3CCDC;
    background-color: #242D3C;
    border-color: #38445A;
}

:root[data-tema="escuro"] .status-badge--neutral {
    color: #9AA6BC;
    background-color: #1D2431;
    border-color: #303B4D;
}

/* Restos claros que o vidro escondia: o card de tipo de cliente, a linha de
   item do pedido no celular e as legendas cinzas. */
:root[data-tema="escuro"] .tipo-card,
:root[data-tema="escuro"] #tabelaItens tbody tr.item-row {
    background: var(--superficie);
    border-color: var(--borda);
}

:root[data-tema="escuro"] .tipo-card .form-check-label,
:root[data-tema="escuro"] .tipo-card-content small,
:root[data-tema="escuro"] .file-info-insumo,
:root[data-tema="escuro"] #file-info,
:root[data-tema="escuro"] #tabelaItens tbody td[data-rotulo]::before {
    color: var(--texto-apoio);
}

:root[data-tema="escuro"] .avatar-usuario {
    background: var(--superficie-alta);
    color: var(--texto-forte);
}

/* ==========================================================================
   TELA DE ENTRAR  (refeita em 30/09/2026, no padrão do Agileiro, como o EVMWeb)
   Um filme passa por trás da tela inteira, um véu escuro por cima, o cartão de
   vidro escuro no centro e a assinatura da marca no canto de baixo. A tela é
   sempre escura (data-tema="escuro" no _AccountLayout): ainda não há pessoa
   para escolher tema, e o filme só funciona com o texto claro por cima.
   Vale para entrar, esqueci a senha, redefinir e as confirmações.
   ========================================================================== */
body.tela-login {
    margin: 0;
    min-height: 100vh;
    background: #06131D;      /* o que aparece antes do primeiro quadro */
    color: var(--texto);
    overflow-x: hidden;
}

/* O filme cobre a tela sem distorcer (object-fit) e fica atrás de tudo. */
.login-filme {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* Véu azul-profundo da marca: escurece o filme e um pouco mais embaixo, onde
   fica a assinatura. */
.login-veu {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4, 16, 26, .45) 0%, rgba(4, 16, 26, .38) 45%, rgba(4, 16, 26, .75) 100%);
}

.login-centro {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px 120px;
}

.login-painel { width: 100%; display: flex; justify-content: center; }

/* O cartão de vidro escuro. Vence o .shadow-glass (superfície opaca) só aqui. */
.tela-login .login-cartao {
    width: 100%;
    max-width: 380px;
    background: rgba(8, 24, 38, .70);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    padding: 30px 28px 24px;
}

/* Campos translúcidos: o vidro continua aparecendo. */
.tela-login .shadow-glass .form-control:not(.form-control-sm):not(textarea) {
    background-color: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    color: #F1F4F9;
}

.tela-login .form-control::placeholder { color: #7F93A6; }

.tela-login .shadow-glass .form-control:focus {
    background-color: rgba(255, 255, 255, .09);
    border-color: var(--acao);
    box-shadow: 0 0 0 3px rgba(243, 161, 37, .22);
}

.tela-login .form-label { color: #C4D2DE; font-size: .84rem; font-weight: 600; }
.tela-login .form-check, .tela-login .form-check span { color: #C4D2DE; font-size: .88rem; }
.tela-login input[type="checkbox"] { accent-color: var(--acao); }
.tela-login .login-centro a { color: #C4D2DE; }
.tela-login .login-centro a:hover { color: #fff; }
.tela-login .login-centro p { color: #C4D2DE; }

/* O logotipo já é o quadrado azul-profundo com letras claras: entra como está. */
.login-marca {
    display: flex;
    justify-content: center;
    margin: 2px 0 18px;
}

    .login-marca img {
        height: 84px;
        width: auto;
        border-radius: 6px;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
    }

.login-titulo {
    font-size: 1.25rem;
    font-weight: 600;
    color: #F1F4F9;
    text-align: center;
    margin: 0 0 3px;
}

.tela-login .login-centro .login-sub {
    font-size: .85rem;
    color: #93A7B9;
    text-align: center;
    margin: 0 0 22px;
}

/* Botão principal: o dourado da marca, com texto escuro por cima. */
.btn-entrar {
    width: 100%;
    background: var(--acao);
    color: var(--sobre-acao);
    border: none;
    border-radius: 8px;
    padding: 11px;
    font-weight: 600;
    transition: background .15s ease;
}

    .btn-entrar:hover,
    .btn-entrar:focus {
        background: var(--acao-hover);
        color: var(--sobre-acao);
    }

/* Assinatura da marca no canto de baixo, sobre o véu mais escuro. */
.login-assinatura {
    position: fixed;
    left: 32px;
    bottom: 34px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
}

    .login-assinatura strong {
        color: #fff;
        font-size: 2.4rem;
        font-weight: 800;
        letter-spacing: .02em;
        line-height: 1;
    }

    .login-assinatura span {
        color: var(--acao);
        font-size: .78rem;
        font-weight: 600;
        letter-spacing: .16em;
        text-transform: uppercase;
    }

.login-rodape {
    position: fixed;
    right: 24px;
    bottom: 18px;
    z-index: 2;
    font-size: .72rem;
    color: #8499AB;
}

/* Botão de pausar o filme, no canto de cima (onde o exemplo põe o som). */
.login-pausa {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(8, 24, 38, .55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #E6EEF4;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}

    .login-pausa:hover { background: rgba(8, 24, 38, .8); color: #fff; }
    .login-pausa:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }

@media (max-width: 700px) {
    .login-centro { align-items: flex-start; padding: 64px 14px 110px; }
    .tela-login .login-cartao { padding: 24px 20px 20px; }
    .login-marca img { height: 68px; }
    .login-assinatura { left: 18px; bottom: 40px; }
    .login-assinatura strong { font-size: 1.8rem; }
    .login-assinatura span { font-size: .68rem; letter-spacing: .12em; }
    .login-rodape { left: 18px; right: auto; bottom: 14px; }
    .login-pausa span { display: none; }
}

/* Tela baixa (notebook com zoom): a assinatura sai do caminho do cartão. */
@media (max-height: 700px) {
    .login-assinatura, .login-rodape { position: absolute; }
}

.dash-card-link {
    text-decoration: none;
    display: block;
}

.dash-card-inner {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 14px 16px;
    background: var(--carta-fundo);
    border: 1px solid var(--borda);
    border-radius: 10px;
    box-shadow: var(--sombra);
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.dash-card-arte-caixa {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border-radius: 14px;
    background: var(--carta-tinta);
    display: flex;
    align-items: center;
    justify-content: center;
    /* A arte entra MAIOR que a caixa (veja abaixo) e o que passa e cortado. */
    overflow: hidden;
}

.dash-card-arte {
    /* ⚠️ O .webp tem 512px, mas o glifo ocupa so 27% a 36% dele — o resto e
       margem transparente, herdada de quando a arte era o FUNDO do card. Se a
       imagem entrar do tamanho da caixa, o desenho sai com um terco do espaco
       e parece minusculo (foi a queixa de 21/09).

       Por isso ela entra em 130px dentro de uma caixa de 60: o corte tira
       vazio, nao desenho. Conta: 60 x 0,78 / 0,36 (a arte mais cheia das 57,
       a card-extratos) = 130. Arte nova gerada pelo tools/cards/gerar.js cai
       na mesma faixa e nao precisa de ajuste. */
    width: 130px;
    height: 130px;
    flex: 0 0 130px;
    object-fit: contain;
    /* As 57 artes tem o mesmo defeito de origem: o glifo nasce ~8,6% ABAIXO do
       centro do arquivo (medido em todas; entre 7,5% e 10,8%). Com o zoom
       acima isso vira uns 11px de desalinhamento dentro da caixa. O -8,6%
       devolve o desenho ao centro — o pior caso fica a 2,2% dele. No eixo X as
       artes ja nascem centradas (mediana 0,0%). */
    transform: translateY(-8.6%);
}

.dash-card-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--carta-texto);
    margin: 0;
    /* "Logs do Sistema" e "Contas a Pagar" quebram em duas linhas sem mexer
       na altura do icone, que tem tamanho proprio. */
    min-width: 0;
}

.dash-card-inner:hover,
.dash-card-link:focus-visible .dash-card-inner {
    transform: translateX(3px);
    border-color: var(--acao);
    box-shadow: 0 6px 16px rgba(34, 41, 58, .16);
}

.dash-card-inner:hover .dash-card-arte-caixa {
    background: var(--carta-tinta-forte);
}


/* ==========================================================================
   AVISOS DA CASA: TOAST E DIALOGO   (21/09/2026)
   Mesmas regras do Friday (CoreBoxProjetos), com os tokens daqui. Saiu o
   SweetAlert2 do CDN: aviso vira toast no canto (nao trava a tela) e o que
   pede RESPOSTA abre o <dialog> nativo, que o navegador poe na camada de cima
   e deixa o resto da pagina inerte.

   O wwwroot/js/avisos.js ainda expoe um "Swal" compativel, porque 114 chamadas
   em 53 telas seguem escrevendo Swal.fire — o desenho e nosso, a fachada e a
   antiga.

   ⚠️ As regras de tela estreita ficam DENTRO do @media, como no Friday. Na
   primeira tentativa elas vieram soltas e o toast ocupou a largura inteira.
   ========================================================================== */

/* O <dialog> em volta e transparente: o clique fora da caixa cai NELE, e e
   assim que o JS reconhece "clicou no fundo". O ::backdrop e quem escurece. */
dialog.dialogo {
    padding: 0; border: none; background: transparent; color: var(--texto);
    width: min(440px, calc(100vw - 32px)); max-width: none;
    max-height: calc(100dvh - 32px); overflow: visible;}
dialog.dialogo::backdrop { background: rgba(6, 26, 40, .55); backdrop-filter: blur(2px);}
/* ===== Botões e formulários ===== */
.botao-primario, .botao-secundario, .botao-limpo, .botao-perigo {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 6px;
    padding: 9px 16px; font-size: .9rem; font-weight: 600;
    text-decoration: none; cursor: pointer; white-space: nowrap;}
/* No Friday o fundo deste botão era ouro e o texto, escuro. Aqui o fundo e o
   vermelho da marca: quem passa em contraste sobre ele e o branco (6,6:1). */
.botao-primario { background: var(--acao); color: var(--sobre-acao);}
.botao-primario:hover { filter: brightness(.92); color: var(--sobre-acao);}
.botao-secundario { background: var(--zebra); color: var(--texto-forte); border-color: var(--borda-campo);}
.botao-secundario:hover { background: var(--realce-linha); color: var(--texto-forte);}
.botao-perigo { background: var(--superficie); color: var(--acao); border-color: var(--erro-borda);}
.botao-perigo:hover { background: var(--erro-fundo);}
/* O filete de cima diz o tom: ardosia na pergunta comum, vermelho no que
   apaga. Vermelho onde nao ha perigo ensina a ignorar o vermelho onde ha. */
.dialogo-neutro { --dialogo-cor: var(--tabela-cab); --dialogo-icone-fundo: var(--zebra); --dialogo-icone: var(--texto-forte);}
.dialogo-perigo { --dialogo-cor: var(--acao); --dialogo-icone-fundo: var(--erro-fundo); --dialogo-icone: var(--acao);}
.dialogo-caixa {
    background: var(--superficie-alta); color: var(--texto);
    border: 1px solid var(--borda); border-top: 4px solid var(--dialogo-cor);
    border-radius: 14px; padding: 20px 22px 18px;
    box-shadow: 0 24px 60px rgba(36, 47, 68, .35);
    max-height: calc(100dvh - 32px); overflow: auto;
    animation: dialogo-entrar .16s ease-out;}
.dialogo-cabeca { display: flex; align-items: center; gap: 12px;}
.dialogo-icone {
    width: 38px; height: 38px; flex: 0 0 38px; padding: 8px; border-radius: 50%;
    background: var(--dialogo-icone-fundo); fill: var(--dialogo-icone);}
.dialogo-titulo { margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: var(--texto-forte);}
/* O texto começa onde começa o título (38 do ícone + 12 do vão). */
.dialogo-texto { margin: 6px 0 0 50px; font-size: .92rem; line-height: 1.5; color: var(--texto); overflow-wrap: anywhere;}
.dialogo-corpo { margin: 14px 0 0 50px;}
.dialogo-entrada { width: 100%;}
/* Vários campos (Avisos.campos): rótulo em cima, campo embaixo. */
.dialogo-campos { display: flex; flex-direction: column; gap: 10px;}
.dialogo-campo { display: flex; flex-direction: column; gap: 4px; margin: 0;}
.dialogo-campo > span { font-size: .78rem; font-weight: 600; color: var(--texto-apoio);}
.dialogo-entrada[aria-invalid="true"] { border-color: var(--acao);}
.dialogo-erro {
    margin: 10px 0 0 50px; padding: 6px 10px; border-radius: 6px; font-size: .84rem;
    background: var(--erro-fundo); border: 1px solid var(--erro-borda); color: var(--erro-texto);}
.dialogo-pe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px;}
.dialogo-pe button:focus-visible { outline: 3px solid rgba(182, 28, 34, .45); outline-offset: 2px;}
/* O vermelho cheio fica só aqui, no botão que confirma o que apaga; na página
   o .botao-perigo segue vazado. Texto na cor da superfície: branco no claro,
   azul-escuro no escuro (onde o vermelho é claro) — os dois passam em contraste. */
.botao-perigo.botao-cheio { background: var(--acao); border-color: var(--acao); color: var(--superficie);}
.botao-perigo.botao-cheio:hover { background: var(--acao); filter: brightness(.92);}
.dialogo-balanca .dialogo-caixa { animation: dialogo-balanca .32s ease-in-out;}
/* Botão desabilitado tem de parecer desabilitado: sem isto o "Salvar" sem
   nada para salvar e o "Marcar todas" sem nada por ler pareciam clicáveis. */
.botao-primario:disabled, .botao-secundario:disabled, .botao-limpo:disabled,
.botao-perigo:disabled { opacity: .5; cursor: default; pointer-events: none;}
.caixa-pdf-topo .botao-secundario {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.45);}
.caixa-pdf-topo .botao-secundario:hover { background: rgba(255,255,255,.12);}
/* ===== Toasts: os avisos do sistema (19/09/2026) =====
   ok, aviso e erro do Avisos (avisos.js). Acima do modal do Bootstrap e do
   diálogo do SweetAlert: um erro que nasce de uma ação dentro deles tem de
   aparecer por cima. Cores pelas variáveis de papel: valem nos dois temas. */
.toasts {
    position: fixed; top: 16px; right: 16px; z-index: 1080;
    display: flex; flex-direction: column; gap: 10px;
    width: 360px; max-width: calc(100vw - 32px);
    pointer-events: none;}
/* "toast-caixa", e não "toast": essa o Bootstrap esconde (display:none sem .show). */
.toast-caixa {
    position: relative; overflow: hidden; pointer-events: auto;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 12px 14px 14px;
    background: var(--superficie); color: var(--texto);
    border: 1px solid var(--borda); border-left: 4px solid var(--toast-cor);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(36, 47, 68, .22);
    animation: toast-entrar .18s ease-out;
    transition: opacity .18s ease, transform .18s ease;}
.toast-caixa.toast-saindo { opacity: 0; transform: translateX(24px);}
.toast-caixa.toast-ok { --toast-cor: var(--ok-vivo); --toast-fundo: var(--ok-fundo);     --toast-icone: var(--ok-texto);}
.toast-caixa.toast-aviso { --toast-cor: var(--acao);    --toast-fundo: var(--alerta-fundo); --toast-icone: var(--alerta-texto);}
.toast-caixa.toast-erro { --toast-cor: var(--acao);  --toast-fundo: var(--erro-fundo);   --toast-icone: var(--erro-texto);}
.toast-icone {
    width: 28px; height: 28px; flex: 0 0 28px; padding: 5px; border-radius: 50%;
    background: var(--toast-fundo); fill: var(--toast-icone);}
.toast-corpo { flex: 1; min-width: 0; padding-top: 3px; font-size: .88rem; line-height: 1.4; overflow-wrap: anywhere;}
.toast-titulo { font-weight: 700; color: var(--texto-forte); margin-bottom: 2px;}
.toast-texto { color: var(--texto);}
.toast-fechar {
    flex: 0 0 auto; background: none; border: none; cursor: pointer;
    font-size: 1.2rem; line-height: 1; padding: 2px 4px; border-radius: 4px;
    color: var(--texto-apoio);}
.toast-fechar:hover { background: var(--zebra); color: var(--texto-forte);}
/* A barrinha embaixo mostra quanto falta; para quando o ponteiro está em cima. */
.toast-tempo {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
    background: var(--toast-cor); opacity: .55; transform-origin: left;
    animation: toast-tempo linear forwards;}
.toast-pausado .toast-tempo { animation-play-state: paused;}

@keyframes dialogo-entrar { from { opacity: 0; transform: translateY(8px) scale(.98); } }

@keyframes dialogo-balanca {
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

@keyframes toast-entrar { from { opacity: 0; transform: translateX(24px); } }

@keyframes toast-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
    .dialogo-caixa, .dialogo-balanca .dialogo-caixa { animation: none;}
}

@media (max-width: 520px) {
    .dialogo-caixa { padding: 18px 16px 16px;}
    .dialogo-texto, .dialogo-corpo, .dialogo-erro { margin-left: 0;}
    .dialogo-pe { flex-direction: column-reverse;}
    .dialogo-pe > button { width: 100%;}
}

@media (prefers-reduced-motion: reduce) {
    .toast-caixa { animation: none; transition: none;}
    .toast-tempo { animation: none;}
}

@media (max-width: 760px) {
    .toasts { top: 8px; right: 8px; left: 8px; width: auto; max-width: none;}
}

/* ---------------------------------------------------------------------------
   btn-outline-light (25/09/2026): herança do vidro escuro — texto e borda
   brancos. No fundo claro o botão SUMIA (o "Editar" do orçamento, reportado
   pelo usuário), e a classe está em 89 telas. Dentro do conteúdo ele passa a
   seguir as cores por papel: escuro no tema claro, claro no escuro. Mesmo
   conserto que o ERP da Lapin recebeu.
   --------------------------------------------------------------------------- */
.conteudo .btn-outline-light {
    color: var(--texto-forte);
    border-color: var(--borda-campo);
    background: transparent;
}
.conteudo .btn-outline-light:hover,
.conteudo .btn-outline-light:focus-visible,
.conteudo .btn-outline-light.active {
    color: var(--texto-forte);
    background: var(--realce-linha);
    border-color: var(--borda-campo);
}

/* CoreBox ADM: texto de apoio fora de tabela (subtítulo da Início, dicas). */
.texto-apoio { color: var(--texto-apoio); }

/* ===== CoreBox ADM: histórico do registro (comentários, e-mails, anexos) ===== */
.historico-item {
    background: var(--superficie-suave);
    border: 1px solid var(--borda);
    border-left: 3px solid var(--ardosia);
    border-radius: 8px;
    padding: .6rem .8rem;
}
.historico-item.historico-email { border-left-color: var(--acao); }
.historico-item.historico-sistema { border-left-color: var(--borda-campo); }
.historico-cab { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; font-size: .95rem; }
.historico-texto { margin-top: .3rem; overflow-wrap: anywhere; }
.historico-texto p { margin-bottom: .35rem; }
.historico-texto img { max-width: 100%; height: auto; }

/* Ficha de detalhe (fornecedor, faturamento): rótulo em cima, valor embaixo. */
.ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem 1.2rem; padding: .5rem; }
.ficha dt { font-weight: 600; font-size: .85rem; color: var(--texto-apoio); margin: 0; }
.ficha dd { margin: 0; color: var(--texto-forte); overflow-wrap: anywhere; white-space: pre-line; }
.valor-positivo { color: var(--ok-texto); }
.valor-negativo { color: var(--erro-texto); }