/* Bling · Regina Acessórios — identidade taupe/champagne (logo oficial) */
:root {
    --vermelho-2001: #4E453E; /* espresso — texto de destaque/preço/aba ativa (nomes mantidos p/ compat.) */
    --azul-2001:     #6E625A; /* taupe — botões, cabeçalho de tabela, topo */
    --dourado:       #B99653; /* dourado suave — filetes e sublinhado de aba */
    --champagne:     #E8D4AF; /* creme do logo, sobre o taupe */
    --taupe:         #6E625A;
    --cinza-fundo:   #F6F1EA; /* off-white quente */
    --branco:        #FFFFFF;
}

* { box-sizing: border-box; }

body {
    background-color: var(--cinza-fundo);
    font-family: 'Roboto', sans-serif;
    color: #333;
    margin: 0;
    /* Repõe o respiro que o rodapé dava no fim da página (tinha 22px de padding
       + 10px de margem). Sem isto o conteúdo cola na borda de baixo. */
    padding-bottom: 32px;
}

h1, h2, h3, .brand-font {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    letter-spacing: .5px;
}
.titulo-wrap h1 { text-transform: none; }
.kpi .valor { font-family: 'Jost', sans-serif; font-weight: 500; }

/* ---- Wordmark recriado (fallback quando não há logo oficial) ----
   Ajustado ao logo oficial: no original o "ACESSÓRIOS" tem o MESMO tom do
   "REGINA" (não é mais claro) e é espaçado a ponto de ocupar quase a mesma
   largura da palavra de cima. Por isso o subtítulo perdeu o opacity e ganhou
   tracking maior, e os dois ficam centrados um sobre o outro. */
.wordmark { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.wm-nome {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 1.9rem;
    letter-spacing: .2em;
    /* O tracking sobra à direita da última letra e desalinha o bloco. */
    text-indent: .2em;
    color: var(--champagne);
}
.wm-sub {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: .56rem;
    letter-spacing: .52em;
    text-indent: .52em;
    color: var(--champagne);
    margin-top: 5px;
}

/* ---- Topo ---- */
.topo {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--taupe);
    border-bottom: 4px solid var(--dourado);
    padding: 14px 22px;
    flex-wrap: wrap;
}
.logo-stack { display: flex; flex-direction: column; align-items: center; }
.logo { text-decoration: none; }
.logo img { height: 52px; display: block; }
.app-version {
    margin-top: 5px;
    font-size: .68rem;
    color: var(--champagne);
    background: rgba(255,255,255,.14);
    padding: 1px 8px;
    border-radius: 8px;
}
.divisor { width: 1px; align-self: stretch; background: rgba(255,255,255,.25); }
.titulo-wrap h1 { font-size: 1.4rem; margin: 0; color: #fff; font-weight: 300; letter-spacing: .5px; }
.dir { margin-left: auto; }
.dir a {
    text-decoration: none;
    color: var(--champagne);
    font-weight: 500;
    font-size: .9rem;
}

/* ---- Abas ---- */
.abas {
    display: flex;
    gap: 4px;
    background: var(--branco);
    padding: 0 14px;
    border-bottom: 1px solid #ddd;
    overflow-x: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.abas a {
    text-decoration: none;
    color: #555;
    font-weight: 600;
    font-size: .88rem;
    padding: 12px 16px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}
.abas a:hover { color: var(--azul-2001); }
.abas a.ativa {
    color: var(--vermelho-2001);
    border-bottom-color: var(--dourado);
}

/* ---- Sub-abas (área de Cadastro) ---- */
.subabas {
    display: flex;
    gap: 6px;
    margin: 0 0 18px;
    background: #fff;
    padding: 6px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    width: fit-content;
    flex-wrap: wrap;
}
.subabas a {
    text-decoration: none;
    color: #6b6058;
    font-weight: 600;
    font-size: .87rem;
    padding: 9px 20px;
    border-radius: 7px;
    white-space: nowrap;
}
.subabas a:hover { background: #f6f1ea; color: var(--vermelho-2001); }
.subabas a.ativa { background: var(--taupe); color: #fff; }
.subabas a.ativa:hover { background: var(--taupe); color: #fff; }

/* ---- Cards / KPIs ---- */
.card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.kpi {
    background: var(--branco);
    border-radius: 8px;
    border-left: 5px solid var(--azul-2001);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    padding: 16px 18px;
    height: 100%;
}
.kpi.vermelho { border-left-color: var(--vermelho-2001); }
.kpi .rotulo { font-size: .75rem; color: #888; text-transform: uppercase; letter-spacing: .4px; }
.kpi .valor  { font-family: 'Jost', sans-serif; font-weight:500; font-size: 1.7rem; color: #222; }

/* ---- Tabelas ---- */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.dados { width: 100%; background: #fff; border-radius: 8px; overflow: hidden; }
table.dados thead th {
    background: var(--azul-2001);
    color: #fff;
    font-weight: 600;
    font-size: .82rem;
    white-space: nowrap;
    padding: 10px 12px;
}
table.dados thead th a,
table.dados thead th a:link,
table.dados thead th a:visited {
    color: #fff !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
table.dados thead th a:hover { color: var(--champagne) !important; }
table.dados thead th .ord-idle { opacity: .38; font-size: .72rem; }
table.dados thead th.ord-ativa { background: #5c524b; }
table.dados thead th.text-end a { flex-direction: row-reverse; }
table.dados tbody td {
    font-size: .86rem;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
table.dados tbody tr:hover { background: #f7fbff; }
.text-money { color: var(--azul-2001); font-weight: 600; white-space: nowrap; }
.text-danger-2001 { color: var(--vermelho-2001); font-weight: 600; }

/* ---- Botões ---- */
.btn-2001 {
    background: var(--azul-2001);
    color: #fff;
    border: none;
    font-weight: 700;
    border-radius: 6px;
    padding: 10px 22px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-2001:hover { filter: brightness(92%); color: #fff; }
.btn-vermelho { background: var(--vermelho-2001); }
.btn-ghost {
    background: #fff;
    color: var(--azul-2001);
    border: 2px solid var(--azul-2001);
    font-weight: 700;
    border-radius: 6px;
    padding: 8px 18px;
    text-decoration: none;
}

/* ---- Badges de situação ---- */
.badge-sit { font-size: .72rem; padding: 4px 9px; border-radius: 20px; font-weight: 600; }
.sit-ok    { background: #e3f5ea; color: #1f7a45; }
.sit-warn  { background: #fff3d6; color: #97690a; }
.sit-off   { background: #f3e3e3; color: #a33; }

/* ---- Estado de conexão ---- */
.status-box {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    padding: 26px;
    max-width: 640px;
    margin: 10px auto;
}
.status-on  { color: #1f7a45; font-weight: 700; }
.status-off { color: var(--vermelho-2001); font-weight: 700; }

.alerta {
    background: #fff3d6;
    border-left: 5px solid #e0a800;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: .9rem;
    margin: 10px 0;
}
.erro-box {
    background: #f8d7da;
    border-left: 5px solid var(--vermelho-2001);
    padding: 12px 16px;
    border-radius: 6px;
    font-size: .9rem;
    margin: 10px 0;
    color: #842029;
}

/* ---- Rodapé ---- */
.busca-form { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.busca-form input, .busca-form select {
    border: 2px solid #ddd;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: .9rem;
}
.busca-form input:focus, .busca-form select:focus {
    border-color: var(--azul-2001);
    outline: none;
}

/* ====================================================================== *
 *  Componentes acrescentados na revisão de 31/07/2026                     *
 * ====================================================================== */

/* ---- KPI: variantes e linha de detalhe ---- */
.kpi.destaque { border-left-color: var(--dourado); }
.kpi .detalhe {
    font-size: .74rem;
    color: #999;
    margin-top: 4px;
    text-transform: none;   /* antes reusava .rotulo e saía em caixa alta */
    letter-spacing: 0;
}

/* ---- Botões: alinhar altura com o .btn-2001 ao lado ---- */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}
.btn-ghost:hover { background: #f6f1ea; color: var(--vermelho-2001); }
.btn-perigo {
    background: #fff; color: #a33; border: 2px solid #a33;
    font-weight: 700; border-radius: 6px; padding: 8px 18px;
    text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
.btn-perigo:hover { background: #a33; color: #fff; }

/* ---- Abas: estado ativo mais nítido e hover que escurece ---- */
.abas a:hover { color: var(--vermelho-2001); background: #faf7f2; }
.abas a.ativa { background: #faf7f2; }

/* ---- Barra de cache (idade dos dados + atualizar) ---- */
.barra-cache { font-size: .78rem; margin: -4px 0 14px; color: #999; }
.barra-cache a { color: var(--azul-2001); text-decoration: none; font-weight: 600; }
.barra-cache a:hover { text-decoration: underline; }

/* ---- Coluna de ações nas tabelas ---- */
td.acoes { white-space: nowrap; text-align: center; }
td.acoes a {
    color: var(--azul-2001);
    text-decoration: none;
    padding: 2px 5px;
    font-size: 1rem;
    display: inline-block;
}
td.acoes a:hover { color: var(--vermelho-2001); }

/* ---- Margens (usado em produtos, precificar, pendências) ---- */
.m-baixa { color: var(--vermelho-2001); font-weight: 700; }
.m-media { color: #97690a; font-weight: 600; }
.m-boa   { color: #1f7a45; font-weight: 600; }

/* ---- Caixas de estado: sucesso deixa de usar a caixa âmbar ---- */
.sucesso-box {
    background: #e3f5ea;
    border-left: 5px solid #1f7a45;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: .9rem;
    margin: 10px 0;
    color: #14532d;
}
.vazio-box {
    background: #fff;
    border: 1px dashed #d8cfc4;
    border-radius: 8px;
    padding: 26px;
    text-align: center;
    color: #999;
    font-size: .9rem;
}

/* ---- Overlay de carregamento (agora global, no rodapé) ---- */
.overlay-load {
    position: fixed; inset: 0;
    background: rgba(46,40,36,.62);
    display: none; align-items: center; justify-content: center;
    z-index: 9999;
}
.overlay-load.on { display: flex; }
.load-card {
    background: #fff; border-radius: 12px; padding: 30px 36px;
    text-align: center; box-shadow: 0 12px 44px rgba(0,0,0,.32); max-width: 380px;
}
.spinner {
    width: 48px; height: 48px;
    border: 5px solid #efe9e1; border-top-color: var(--azul-2001);
    border-radius: 50%; margin: 0 auto 18px;
    animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.load-card h3 { font-family: 'Jost', sans-serif; font-weight: 500; margin: 0 0 6px; color: #2e2824; }
.load-card p  { font-size: .85rem; color: #888; margin: 0; }

/* ---- Foco visível: a grade de preços é navegada por teclado ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--dourado);
    outline-offset: 1px;
    border-radius: 4px;
}

/* ---- Barra fixa de ação (precificar, cadastro) ---- */
.barra-fixa {
    position: sticky; bottom: 0;
    background: #fff; border-top: 2px solid var(--dourado);
    padding: 12px 16px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 10px;
    box-shadow: 0 -4px 14px rgba(0,0,0,.08);
    border-radius: 0 0 8px 8px;
    z-index: 10;
}

/* ====================================================================== *
 *  Responsivo — o app não tinha uma única media query                     *
 * ====================================================================== */

/* A PÁGINA nunca rola de lado: quem rola é a tabela, dentro do wrapper.
   Sem isto, uma tabela larga arrasta o layout inteiro e o cabeçalho some
   para a esquerda quando a pessoa desliza o dedo. */
html, body { max-width: 100%; overflow-x: hidden; }
.table-responsive { max-width: 100%; }

/* Tabela larga tem de avisar que rola. Sem pista visual, quem está no celular
   conclui que a coluna Margem simplesmente não existe. */
.table-responsive { scrollbar-width: thin; }
.table-responsive::-webkit-scrollbar { height: 7px; }
.table-responsive::-webkit-scrollbar-thumb { background: #cfc3b5; border-radius: 4px; }

@media (max-width: 820px) {
    .topo { padding: 10px 14px; gap: 12px; }
    .logo img { height: 40px; }
    .wm-nome { font-size: 1.45rem; letter-spacing: .16em; text-indent: .16em; }
    .wm-sub  { font-size: .48rem; letter-spacing: .38em; text-indent: .38em; }
    .titulo-wrap h1 { font-size: 1.1rem; }

    /* KPIs: 2 por linha, número que não estoura */
    .kpi { padding: 12px 14px; }
    .kpi .valor { font-size: 1.25rem; word-break: break-word; }
    .kpi .rotulo { font-size: .68rem; }

    /* Filtros ocupam a largura toda, um por linha */
    .busca-form { gap: 6px; }
    .busca-form input, .busca-form select { flex: 1 1 100%; min-width: 0 !important; width: auto !important; }
    .busca-form .btn-2001, .busca-form .btn-ghost { flex: 1 1 auto; justify-content: center; }

    .subabas { width: 100%; }
    .subabas a { flex: 1 1 auto; text-align: center; padding: 9px 12px; }

    /* Vale para TODAS as tabelas do app, não só .dados — as telas novas
       (fechamento, inventário, NCM, fornecedores) têm classe própria e
       ficavam de fora, com fonte de desktop no celular. */
    table.dados tbody td, table.dados thead th,
    table.fech  tbody td, table.fech  thead th,
    table.inv   tbody td, table.inv   thead th,
    table.ncmt  tbody td, table.ncmt  thead th,
    table.prec  tbody td, table.prec  thead th,
    table.grade tbody td, table.grade thead th { font-size: .8rem; padding: 7px 8px; }

    .barra-fixa { flex-direction: column; align-items: stretch; }
    .barra-fixa .btn-2001 { justify-content: center; }

    /* ---- Alvos de toque ----
       Ícone de 1rem dá ~16px de área: erra-se mais do que se acerta com o
       polegar. 44px é o mínimo recomendado e é o que a ação vira aqui. */
    td.acoes a, td.acoes button {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 40px; min-height: 40px; font-size: 1.15rem; padding: 0;
    }
    .abas a { padding: 14px 16px; }
    .subabas a { padding: 12px 14px; }

    /* ---- Painéis e caixas: menos margem, mais conteúdo ---- */
    .painel, .cx, .passo, .status-box, .bloco-analise, .leitura { padding: 12px 14px; }
    .status-box { margin: 6px 0; }
    details.bloco { padding: 10px 12px; }

    /* ---- Formulários ----
       Largura fixa em px estoura a tela; vira 100% e o rótulo vai por cima. */
    input[type=text], input[type=number], input[type=date],
    input[type=password], input[type=search], select, textarea {
        max-width: 100%;
    }
    .campo input, .campo select { width: 100% !important; }
    /* Grade de permissões (usuários): uma coluna só no celular. */
    .telas { grid-template-columns: 1fr !important; }
    /* Blocos de filtro que usam flex solto acompanham a largura. */
    .nav-dia { gap: 6px; }
    .nav-dia form { flex: 1 1 100%; }
    .nav-dia .btn-ghost, .nav-dia .btn-2001 { flex: 1 1 auto; justify-content: center; }
}

/* ---- iOS: campo com fonte < 16px faz o Safari DAR ZOOM ao focar ----
   O zoom desalinha a tela e obriga a pessoa a fechar e reabrir o teclado a
   cada campo. Vale para qualquer tela de toque, não só abaixo de 820px.

   O !important NÃO é preguiça, é o que faz a regra existir de fato. Ela foi
   escrita sem ele e não teve efeito em nenhum campo dentro de grade — medido
   em 13/08/2026: 322 campos ainda a 13,3–14,4px em 11 telas. O motivo é
   especificidade: cada tela dimensiona os próprios campos em regras COM CLASSE
   (.busca-form select, table.grade input, table.prec input.preco-novo,
   .cx-lote input), que valem (0,1,1) contra os (0,0,1) daqui. Media query não
   soma especificidade — a condição casa e a regra perde assim mesmo.

   É o uso legítimo do !important: um override de acessibilidade que precisa
   vencer todo componente, inclusive style inline. Se um dia um campo PRECISAR
   ser menor no celular, a exceção também terá de ser !important — de propósito,
   para ficar explícita. */
@media (max-width: 1024px) and (pointer: coarse) {
    input[type=text], input[type=number], input[type=date], input[type=password],
    input[type=search], input[type=email], input[type=tel], input[type=file],
    select, textarea {
        font-size: 16px !important;
    }
    /* A grade de inventário/precificação fica com o número legível junto. */
    input.declarado, input.ncm-novo, input.preco-novo, input.sug {
        font-size: 16px !important;
    }
}

/* Dica de rolagem horizontal nas abas quando não cabem */
@media (max-width: 1100px) {
    .abas { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
    .abas::after { content: ''; flex: 0 0 8px; }
}

/* ---- Menu principal no celular: duas linhas em vez de rolagem invisível ----
   Medido em 13/08/2026: 682px de menu numa tela de 375 = 307px (45%) fora da
   vista, nas 20 telas. Rolar FUNCIONAVA; o problema era não haver sinal de que
   rolava — "Vendas" cortava no meio da palavra, o que se lê como fim da lista,
   e Financeiro e Contatos eram invisíveis. Financeiro é onde mora o Fechamento
   de caixa, que é tarefa diária e feita justamente no celular.
   São 6 grupos curtos: mostrá-los todos custa uma linha e dispensa qualquer
   affordance de rolagem. */
@media (max-width: 700px) {
    .abas {
        flex-wrap: wrap;
        overflow-x: visible;
        justify-content: center;
        padding: 0 8px;
    }
    .abas a { padding: 11px 12px; font-size: .84rem; }
    .abas::after { content: none; }   /* espaçador que só servia ao modo rolagem */
}

/* ---- Área de toque mínima ----
   A referência é 44x44. Estes três estavam entre 15 e 19px de altura, e são
   controles de uso diário. O padding cria a área tocável e a margem negativa
   devolve o espaço ao layout — nada muda de tamanho na tela, só o alvo do dedo.
   Só em ponteiro grosso: no mouse, 15px já se acerta. */
@media (pointer: coarse) {
    /* "sair" tinha 21x15 colado ao nome do usuário: difícil de acertar de
       propósito e fácil de acertar sem querer, derrubando a sessão no meio de
       um lançamento. */
    .topo .sair { display: inline-block; padding: 15px 8px; margin: -15px -8px; }

    /* Ordenar é como se procura algo numa tabela de 12 colunas no celular, e
       era o alvo mais difícil da tela: 19px. */
    thead th a { padding-block: 12px; margin-block: -12px; }

    /* Links "Atualizar catálogo/fornecedores/saldos" da barra de cache. */
    .barra-cache a { display: inline-block; padding-block: 14px; margin-block: -14px; }
}

/* ---- Barra de carregamento no topo ----
   Acende no mesmo quadro do clique, antes de a navegação começar: é o sinal de
   que o toque foi recebido. Fina de propósito — por ser discreta, pode ser
   imediata sem incomodar nas telas que respondem rápido.

   A animação é só transform + opacity porque essas duas rodam no COMPOSITOR:
   continuam mesmo se a thread principal do navegador travar ou for
   despriorizada, que é justamente quando um aviso de carregamento importa.

   Nunca chega a 100%: quem termina a barra é a página nova ao carregar. Uma
   barra que enche e fica parada mente sobre o que está acontecendo. */
#barraCarga {
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    background: var(--dourado);
    transform: scaleX(0); transform-origin: 0 50%;
    opacity: 0; z-index: 10000; pointer-events: none;
}
#barraCarga.on {
    opacity: 1;
    animation: carregaBarra 14s cubic-bezier(.12,.72,.2,1) forwards;
}
@keyframes carregaBarra {
    0%   { transform: scaleX(0);   }
    12%  { transform: scaleX(.28); }
    40%  { transform: scaleX(.62); }
    75%  { transform: scaleX(.84); }
    100% { transform: scaleX(.96); }
}
@media (prefers-reduced-motion: reduce) {
    /* Sem crescimento animado: a barra simplesmente aparece cheia pela metade,
       cumprindo o papel de avisar sem movimento na tela. */
    #barraCarga.on { animation: none; transform: scaleX(.5); }
}

/* Aviso de que a tabela rola — inserido por JS (includes/layout.php) só quando
   há coluna escondida de verdade e o ponteiro é de toque. */
.dica-rolar {
    display: flex; align-items: center; gap: 6px;
    font-size: .74rem; color: #8a8078; padding: 2px 2px 6px;
}

/* ---- Impressão: etiquetas e relatórios ---- */
@media print {
    .abas, .subabas, .busca-form, .barra-cache, .barra-fixa,
    .overlay-load, td.acoes, .btn-2001, .btn-ghost { display: none !important; }
    .topo { background: #fff !important; border-bottom: 2px solid #000; }
    .titulo-wrap h1, .wm-nome, .wm-sub { color: #000 !important; }
    table.dados thead th { background: #eee !important; color: #000 !important; }
    .kpi { box-shadow: none; border: 1px solid #ccc; }
    body { background: #fff; }
}