/* =============================================================================
   Superpox SEP — identidade visual (§10.11)

   O tema CLARO é o padrão (pedido do cliente). O escuro continua definido no
   :root porque é a base histórica da paleta, mas quem decide o padrão exibido
   é o App.razor: sem cookie, ele estampa data-theme="light".

   Nenhuma cor tem sua única definição dentro de um bloco de media ou [data-theme].
   ============================================================================= */

:root {
    /* Paleta — escuro (padrão) */
    --marca: #F4B64B;
    --marca-texto: #F4B64B;
    --ground: #0B0C0D;
    --paper: #141516;
    --paper-2: #1B1D1F;
    --ink: #F1F0EC;
    --ink-2: #A2A39F;
    --rule: #2A2D2F;

    /* Cores de dado — validadas para daltonismo e contraste */
    --dado-valor: #BC8A2C;
    --dado-pagamento: #5A8FC7;
    --dado-desconto: #CA4757;

    /* Bootstrap aponta para os tokens acima. Sem !important espalhado. */
    --bs-primary: var(--marca);
    --bs-primary-rgb: 244, 182, 75;
    --bs-body-bg: var(--ground);
    --bs-body-color: var(--ink);
    --bs-secondary-color: var(--ink-2);
    --bs-border-color: var(--rule);
    --bs-emphasis-color: var(--ink);
    --bs-link-color: var(--marca-texto);
    --bs-link-hover-color: var(--marca);
    --bs-code-color: var(--marca-texto);

    color-scheme: dark;
}

/* O claro NÃO é a inversão automática do escuro: é uma paleta escolhida, para o
   vendedor no sol. O contraste do texto sobe nele. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --marca-texto: #8A6209;
        --ground: #F1F1EE;
        --paper: #FFFFFF;
        --paper-2: #F6F6F3;
        --ink: #111213;
        --ink-2: #54585A;
        --rule: #DCDCD7;

        --dado-valor: #B07F00;
        --dado-pagamento: #2F6FA8;
        --dado-desconto: #B03A26;

        color-scheme: light;
    }
}

:root[data-theme="light"] {
    --marca-texto: #8A6209;
    --ground: #F1F1EE;
    --paper: #FFFFFF;
    --paper-2: #F6F6F3;
    --ink: #111213;
    --ink-2: #54585A;
    --rule: #DCDCD7;

    --dado-valor: #B07F00;
    --dado-pagamento: #2F6FA8;
    --dado-desconto: #B03A26;

    color-scheme: light;
}

/* =============================================================================
   Base
   ============================================================================= */

body {
    background-color: var(--ground);
    color: var(--ink);
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
}

/* O <FocusOnNavigate> põe o foco no h1 a cada navegação — é o que faz o leitor de tela
   anunciar a tela nova. O efeito colateral é o navegador desenhar o anel de foco em volta do
   título, que fica com cara de campo de formulário vazio.

   Tirar o outline aqui não custa navegação por teclado: um <h1> não está na ordem de
   tabulação, então o único jeito de ele receber foco é este, programático. O anúncio do
   leitor de tela continua igual. */
h1:focus,
h2:focus {
    outline: none;
}

.text-secundario {
    color: var(--ink-2);
}

a {
    color: var(--marca-texto);
}

/* Âmbar não vira texto no tema claro: #F4B64B sobre branco dá ~1,9:1. No claro ele
   continua sendo o PREENCHIMENTO da marca, e texto/link usam --marca-texto. */
.marca-texto {
    color: var(--marca-texto);
    font-weight: 600;
}

.marca-fundo {
    background-color: var(--marca);
    color: #0B0C0D;
}

/* =============================================================================
   Superfícies
   ============================================================================= */

.card,
.list-group-item,
.form-control,
.form-select,
.modal-content,
.offcanvas {
    background-color: var(--paper);
    color: var(--ink);
    border-color: var(--rule);
}

.card-header,
.table > thead th {
    background-color: var(--paper-2);
    color: var(--ink);
    border-color: var(--rule);
}

/* O acordeão do Bootstrap pinta o item aberto de azul (--bs-primary-bg-subtle). Azul é uma
   segunda cor de destaque, e aqui só existe uma: o âmbar. */
.accordion {
    --bs-accordion-bg: var(--paper);
    --bs-accordion-color: var(--ink);
    --bs-accordion-border-color: var(--rule);
    --bs-accordion-btn-color: var(--ink);
    --bs-accordion-btn-bg: var(--paper-2);
    --bs-accordion-active-color: var(--marca-texto);
    --bs-accordion-active-bg: var(--paper-2);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(244, 182, 75, .25);
}

/* A seta do acordeão é um SVG embutido de cor fixa; sem isto ela some no tema escuro. */
.accordion-button::after {
    filter: invert(1) grayscale(1) brightness(1.6);
}

:root[data-theme="light"] .accordion-button::after {
    filter: none;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .accordion-button::after {
        filter: none;
    }
}

.table {
    --bs-table-bg: var(--paper);
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--rule);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--paper);
    color: var(--ink);
    border-color: var(--marca);
    box-shadow: 0 0 0 .2rem rgba(244, 182, 75, .25);
}

.form-control::placeholder {
    color: var(--ink-2);
}

.form-text {
    color: var(--ink-2);
}

.btn-primary {
    background-color: var(--marca);
    border-color: var(--marca);
    color: #0B0C0D;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #E0A63C;
    border-color: #E0A63C;
    color: #0B0C0D;
}

.btn-outline-secondary {
    color: var(--ink);
    border-color: var(--rule);
}

.btn-outline-secondary:hover {
    background-color: var(--paper-2);
    color: var(--ink);
    border-color: var(--rule);
}

/* Abas (nav-pills): a ativa em âmbar, nunca o azul padrão do Bootstrap. */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--marca);
    --bs-nav-pills-link-active-color: #0B0C0D;
    --bs-nav-link-color: var(--ink-2);
    --bs-nav-link-hover-color: var(--ink);
}

hr {
    border-color: var(--rule);
    opacity: 1;
}

/* =============================================================================
   Cabeçalho e navegação (área do Vendedor — mobile-first)
   ============================================================================= */

.topo {
    background-color: var(--paper);
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.topo .logo {
    height: 32px;
}

/* Um logo por tema. Segue o tema do app (cookie estampado em data-theme) e, sem escolha,
   o do sistema — as mesmas três situações da paleta. */
.logo-claro { display: none; }
.logo-escuro { display: inline-block; }

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .logo-claro { display: inline-block; }
    :root:not([data-theme="dark"]) .logo-escuro { display: none; }
}

:root[data-theme="light"] .logo-claro { display: inline-block; }
:root[data-theme="light"] .logo-escuro { display: none; }
:root[data-theme="dark"] .logo-claro { display: none; }
:root[data-theme="dark"] .logo-escuro { display: inline-block; }

/* A trilha do wizard. No celular rola na horizontal em vez de quebrar em duas
   linhas e empurrar o formulário para baixo da dobra. */
.trilha {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: .5rem 0;
}

.trilha::-webkit-scrollbar {
    display: none;
}

.trilha a,
.trilha span {
    flex: 0 0 auto;
    padding: .35rem .7rem;
    border-radius: 999px;
    font-size: .8125rem;
    text-decoration: none;
    color: var(--ink-2);
    border: 1px solid var(--rule);
    white-space: nowrap;
}

.trilha .atual {
    background-color: var(--marca);
    border-color: var(--marca);
    color: #0B0C0D;
    font-weight: 600;
}

.trilha .concluido {
    color: var(--ink);
    border-color: var(--marca);
}

/* =============================================================================
   A barra do total — o vendedor negocia olhando o número (§10.10)
   ============================================================================= */

.barra-total {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    background-color: var(--paper-2);
    border-top: 1px solid var(--rule);
    padding: .6rem 1rem;
}

.barra-total .preco {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dado-valor);
    line-height: 1.1;
}

.barra-total .por-m2 {
    font-size: .8125rem;
    color: var(--ink-2);
}

/* Espaço para a barra fixa não cobrir o último botão do formulário. */
.com-barra-total {
    padding-bottom: 1rem;
}

/* =============================================================================
   Composição de preço (ResumoPreco) — de baixo para cima
   ============================================================================= */

.composicao {
    width: 100%;
}

.composicao td {
    padding: .35rem 0;
    border-bottom: 1px solid var(--rule);
}

.composicao td.valor {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.composicao tr.etapa td {
    color: var(--ink-2);
    font-size: .875rem;
}

.composicao tr.marco td {
    font-weight: 600;
    color: var(--ink);
}

.composicao tr.final td {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dado-valor);
    border-bottom: none;
}

.composicao .pagamento {
    color: var(--dado-pagamento);
}

.composicao .desconto {
    color: var(--dado-desconto);
}

/* =============================================================================
   Autocomplete (js/autocomplete.js) — SSR, sem framework
   ============================================================================= */

.autocomplete {
    position: relative;
}

.autocomplete-lista {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 15rem;
    overflow-y: auto;
    background-color: var(--paper);
    border: 1px solid var(--rule);
    border-radius: .375rem;
    margin-top: .15rem;
}

.autocomplete-lista:empty {
    display: none;
}

.autocomplete-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: .6rem .75rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
}

.autocomplete-vazio {
    padding: .75rem;
    color: var(--ink-2);
    font-size: .9rem;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item:focus {
    background-color: var(--paper-2);
}

.autocomplete-item .secundario {
    display: block;
    font-size: .8125rem;
    color: var(--ink-2);
}

/* =============================================================================
   Toque grande no celular (§10.2)
   ============================================================================= */

@media (max-width: 575.98px) {
    .form-control,
    .form-select,
    .btn {
        min-height: 44px;
    }

    /* 16px é o limiar abaixo do qual o iOS dá zoom ao focar o campo. */
    .form-control,
    .form-select {
        font-size: 16px;
    }
}

/* =============================================================================
   Rodapé
   ============================================================================= */

/* Rodapé no fim da tela quando o conteúdo é curto, e depois do conteúdo quando é longo —
   nunca por cima de nada. A página é uma coluna da altura da tela; o conteúdo cresce e
   empurra o rodapé para baixo. */
.pagina-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.conteudo-app {
    flex: 1 0 auto;
    width: 100%;
}

.rodape {
    flex-shrink: 0;
    text-align: center;
    font-size: .75rem;
    color: var(--ink-2);
    border-top: 1px solid var(--rule);
    padding: .75rem 1rem;
}

/* Gestão (Backoffice e Admin) — desktop-first, menu lateral a partir de lg. */
.menu-gestao-titulo {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-2);
    margin: 0 0 .25rem .75rem;
}

@media (min-width: 992px) {
    .menu-gestao {
        position: sticky;
        top: 49px;
        align-self: flex-start;
        min-height: calc(100vh - 49px);
    }
}

@media (max-width: 991.98px) {
    .menu-gestao {
        border: 0 !important;
        padding: 0 !important;
    }
}

/* Item ativo de lista (versões da proposta): âmbar, nunca o azul padrão do Bootstrap. */
.list-group-item.active {
    background-color: var(--marca);
    border-color: var(--marca);
    color: #0B0C0D;
}

/* Unidade ao lado do campo (%, R$) e chave liga/desliga: seguem o tema, nunca a caixa branca
   nem o azul padrão do Bootstrap. */
.input-group-text {
    background-color: var(--paper-2);
    border-color: var(--rule);
    color: var(--ink-2);
}

.form-check-input:checked {
    background-color: var(--marca);
    border-color: var(--marca);
}

.form-check-input:focus {
    border-color: var(--marca);
    box-shadow: 0 0 0 .2rem rgba(244, 182, 75, .25);
}