:root { font-family: Inter, system-ui, sans-serif; color: var(--text-primary); background: var(--bg-page); }
* { box-sizing: border-box; }
/* Rede de segurança contra overflow horizontal -- nenhuma regra abaixo
   deveria mais deixar algo ultrapassar a viewport, mas isso trava
   qualquer resíduo (ex.: componente futuro esquecido) de virar barra
   de rolagem horizontal na página inteira. */
html { overflow-x: hidden; }
body { margin: 0; }
body.login { display: grid; place-items: center; min-height: 100vh; }
.panel { width: min(420px, 92vw); background: var(--bg-panel); padding: 32px; border-radius: 16px; box-shadow: 0 20px 60px #0008; border: 1px solid var(--border); }
.panel h1 { margin-top: 0; color: var(--text-primary); text-align: center; }
.app-footer { max-width: 1200px; margin: 32px auto 16px; padding: 0 20px; text-align: center; color: var(--text-faint); font-size: .76rem; }
label { display: grid; gap: 7px; margin: 18px 0; font-weight: 600; color: var(--text-primary); }
/* label { display: grid } acima tem a mesma especificidade do [hidden] padrão
   do navegador -- como regra de autor sempre vence a folha de estilo do
   navegador, um <label hidden> ficava visível mesmo assim. Precisa dessa
   regra explícita (usada no toggle Dias/Horas de Orçamento). */
label[hidden] { display: none; }
/* width:100% + min-width:0 aqui embaixo -- causa raiz do overflow horizontal
   visto no celular (Bipar código de barras, Produto, Quantidade, selects em
   geral): sem min-width:0, um <select> vira item de grid/flex e o navegador
   calcula seu "tamanho mínimo automático" pelo texto mais longo dentre as
   <option> (ex.: nome completo de produto), que pode ser bem maior que a
   tela -- isso empurra a coluna inteira do grid pra fora da viewport, mesmo
   com grid-template-columns em fr. Campos que precisam ficar estreitos de
   propósito (checkbox, .campo-compacto etc.) já têm override próprio abaixo. */
input { font: inherit; padding: 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); width: 100%; max-width: 100%; min-width: 0; }
input[readonly] { background: var(--bg-panel-alt); color: var(--text-secondary); cursor: not-allowed; }
/* Rede de segurança: qualquer <select> na página herda o tema escuro, mesmo
   fora de .operation-form/.search-row (que já têm sua própria regra igual). */
select { font: inherit; padding: 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); width: 100%; max-width: 100%; min-width: 0; }
/* O autopreenchimento do Chrome/Safari ignora o background: que a gente
   define e pinta o campo de branco por conta própria -- sem isso, o texto
   claro do tema escuro fica ilegível em cima desse branco forçado. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--text-primary);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset;
    box-shadow: 0 0 0 1000px var(--bg-input) inset;
    caret-color: var(--text-primary);
    transition: background-color 9999s ease-in-out 0s;
}
button { width: 100%; padding: 13px; border: 0; border-radius: 8px; background: var(--brand-orange); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
/* Pedido do usuário 01/10/2026: o fundo verde/vermelho a 14% de
   opacidade (herdado do rgba original) ficava ilegível/sem força.
   Primeira tentativa foi fundo escuro sólido + borda colorida, mas o
   usuário queria mesmo era o cartão com a cor cheia (print de
   referência que ele mandou) -- texto escuro em cima da cor viva,
   ícone circular escuro com o símbolo claro. */
.alert, .recovery, .success {
    padding: 13px 14px 13px 46px; border-radius: 8px; margin: 16px 0; position: relative;
    color: var(--bg-page); border: 1px solid transparent; font-weight: 600;
}
.alert::before, .recovery::before, .success::before {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    font-size: .8rem; font-weight: 900; line-height: 1; color: #fff; background: var(--bg-page);
}
.alert { background: var(--color-danger); }
.alert::before { content: '!'; }
.recovery { background: var(--color-warning); }
.recovery::before { content: '!'; }
.success { background: var(--color-success); }
.success::before { content: '\2713'; }
/* Toast centralizado (assets/app.js promove .success/.alert de topo de
   página pra isso, exceto quando estão dentro de um modal -- ver
   comentário no app.js). Pedido do usuário 29/09/2026: a mensagem de
   sucesso/erro no topo da página passava despercebida, sobretudo depois
   de ações sensíveis como cancelar/excluir. Cor/ícone/borda já vêm do
   .success/.alert base -- aqui só sobra posição/tamanho/sombra. */
.flash-toast {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 200; width: min(480px, calc(100vw - 32px)); margin: 0;
    padding-right: 40px; font-weight: 700; animation: flash-toast-entrar .18s ease-out;
    box-shadow: 0 24px 70px #000c;
}
.flash-toast-fechar { position: absolute; top: 6px; right: 8px; background: none; border: 0; width: auto; padding: 6px; font-size: 1.3rem; line-height: 1; color: inherit; cursor: pointer; }
@keyframes flash-toast-entrar { from { opacity: 0; transform: translate(-50%, -50%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.uri { display: block; overflow-wrap: anywhere; padding: 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); }
header { display: flex; gap: 12px; align-items: center; padding: 16px 24px; background: var(--brand-navy-dark); color: #fff; border-bottom: 1px solid var(--border); }
header span { margin-left: auto; }
header a { color: var(--text-primary); }
header .profile { margin-left: 8px; padding: 4px 8px; border: 1px solid #ffffff33; border-radius: 999px; font-size: .75rem; }
header a:not(.brand-header) { padding: 6px 16px; border: 1px solid #ffffff33; border-radius: 999px; font-size: .85rem; text-decoration: none; transition: background .15s ease, border-color .15s ease; }
header a:not(.brand-header):hover { background: #ffffff18; border-color: #ffffff55; }
main { max-width: 1200px; margin: 32px auto; padding: 0 20px; }
/* Sem justify-content:space-between de propósito -- só funciona bem
   com 2 filhos. O "Voltar" entra sempre como último filho do .hero,
   ao lado de qualquer outro botão de contexto que já exista ali (ex.:
   "← Escolher outro local") -- margin-left:auto no 2º filho empurra
   o grupo inteiro (2º + 3º, se houver) pra direita, mantendo os dois
   colados um no outro via gap, em vez de espalhados pela largura. */
.hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.hero > *:nth-child(2) { margin-left: auto; }
.hero h1 { margin: 0; color: var(--text-primary); }
.hero p { margin: 6px 0 0; color: var(--text-secondary); }
.actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0 32px; }
.actions div, .action-card { display: grid; gap: 6px; padding: 16px; background: var(--bg-panel); border: 1px solid var(--border); border-left: 4px solid var(--brand-orange); border-radius: 10px; box-shadow: 0 4px 20px #00000020; }
.action-card { color: inherit; text-decoration: none; }
.action-card:hover { transform: translateY(-1px); box-shadow: 0 6px 24px #00000030; }
.actions span { color: var(--text-secondary); font-size: .86rem; }
main > section { margin-bottom: 34px; }
.table-wrap { overflow: auto; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 4px 20px #00000020; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border); color: var(--text-primary); }
th { background: var(--bg-panel-alt); color: var(--text-secondary); }
/* Tabela de materiais do Orçamento: a Descrição vinha sem largura
   definida e ficava pequena de mais pra ler (especialmente as
   descrições longas montadas pelo seletor guiado de Fibra óptica). */
.tabela-materiais td:nth-child(1), .tabela-materiais th:nth-child(1) { width: 12%; }
.tabela-materiais td:nth-child(2), .tabela-materiais th:nth-child(2) { width: 56%; }
.tabela-materiais td:nth-child(3), .tabela-materiais th:nth-child(3) { width: 10%; }
.tabela-materiais td:nth-child(4), .tabela-materiais th:nth-child(4) { width: 10%; }
.tabela-materiais input:not(.campo-compacto) { width: 100%; min-width: 0; }
pre { white-space: pre-wrap; font-size: 1rem; color: var(--text-primary); }
.operation-form { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; background: var(--bg-panel); padding: 24px; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 4px 20px #00000020; max-width: 100%; }
/* min-width:0 no item do grid -- sem isso, o "tamanho mínimo automático"
   do item (herdado do conteúdo, ex.: select com opção longa) pode vencer
   o 1fr da coluna e estourar a largura da tela, mesmo já tendo corrigido
   o <select>/<input> em si logo acima. */
.operation-form label { margin: 10px 0; color: var(--text-primary); min-width: 0; }
.operation-form select, .operation-form textarea { font: inherit; padding: 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-input); color: var(--text-primary); width: 100%; max-width: 100%; min-width: 0; }
.operation-form small { font-weight: 400; color: var(--text-secondary); }
.operation-form .full { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 12px; }
.form-actions button { width: auto; min-width: 180px; }
/* Mesmo bug recorrente de [hidden] perdendo pro display:flex do
   author stylesheet (já visto em .material-guiado-lista/-campos) --
   os atalhos pós-confirmação do Switch (#pos-confirmar-switch) e do
   PVC (#pos-confirmar-pvc) usam .form-actions + hidden e ficavam
   visíveis o tempo todo sem isso. */
.form-actions[hidden] { display: none; }
.secondary-button { padding: 12px 18px; color: var(--text-primary); text-decoration: none; }
@media (max-width: 760px) {
    header { align-items: flex-start; flex-wrap: wrap; }
    header span { margin-left: 0; order: 3; width: 100%; }
    .actions { grid-template-columns: 1fr 1fr; }
    main { margin-top: 22px; }
}
@media (max-width: 650px) {
    .operation-form { grid-template-columns: 1fr; }
    .operation-form .full { grid-column: auto; }
    .form-actions { flex-direction: column-reverse; align-items: stretch; }
    .form-actions button { width: 100%; }
    .secondary-button { text-align: center; }
}
@media (max-width: 460px) { .actions { grid-template-columns: 1fr; } }

.secondary-button { background: var(--bg-panel-alt); border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer; display: inline-block; width: auto; }
.secondary-button:hover { background: var(--bg-elevated); }
/* Atalho de período selecionado (ex.: "Hoje" ativo em saidas-realizadas.php)
   -- mesma cor de destaque usada nos cards de ação do dashboard. */
.secondary-button.is-ativo { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff; }
/* Ação destrutiva e irreversível (ex.: excluir nota fiscal) -- precisa se
   destacar visualmente de um secondary-button comum, não só um botão a mais. */
.danger-button { background: var(--color-danger-bg); border: 1px solid var(--color-danger); color: var(--color-danger); border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer; padding: 12px 18px; }
.danger-button:hover { background: var(--color-danger); color: #fff; }
.modal-overlay { position: fixed; inset: 0; display: grid; place-items: center; background: #05090fcc; padding: 20px; z-index: 50; }
.modal-overlay[hidden] { display: none; }
.modal-panel { width: min(720px, 100%); max-height: 90vh; overflow: auto; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 16px; padding: 26px; box-shadow: 0 24px 60px #0009; }
/* Modal de confirmação genérico (assets/app.js, confirmarAcao) -- versão
   mais estreita e sem cabeçalho do .modal-panel comum, só texto + OK/Cancelar.
   Pedido do usuário 29/09/2026: como é pequeno e sem muito conteúdo, o
   fundo padrão (--bg-panel) ficava quase invisível contra o overlay
   escurecido -- borda mais forte + faixa colorida no topo pra destacar,
   e --bg-page (o tom mais escuro do tema, não --bg-elevated -- achou
   ainda muito claro) como fundo. */
.modal-panel-confirmacao {
    width: min(420px, 100%);
    text-align: center;
    background: var(--bg-page);
    border: 1px solid var(--border-strong);
    border-top: 4px solid var(--brand-orange);
    box-shadow: 0 24px 70px #000c;
}
.modal-confirmacao-texto { margin: 0 0 20px; font-weight: 700; font-size: 1.05rem; }
.modal-panel-confirmacao .form-actions { justify-content: center; }
.modal-confirmacao-campo { margin-bottom: 20px; text-align: left; }
.modal-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.modal-panel-header h2 { margin: 0; }
.modal-close { width: auto; padding: 6px 12px; background: transparent; color: var(--text-secondary); font-size: 1.4rem; line-height: 1; border: 0; }
.empty-hint { padding: 26px; text-align: center; color: var(--text-secondary); background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 4px 20px #00000020; }
.empty-hint[hidden] { display: none; }
.link-button { width: auto; padding: 0; background: none; border: 0; color: var(--brand-orange-light); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.link-button.danger-link { color: var(--color-danger); }
/* !important nas três -- dentro de .operation-form, a regra
   ".operation-form small" (mais específica: 1 classe + 1 elemento)
   vence uma classe sozinha (.field-warning/.field-success/.field-danger,
   1 classe só) e devolve tudo pro cinza padrão, mesmo problema que
   .filter-result (search.css) já resolvia do mesmo jeito. */
.field-warning { display: block; margin-top: 4px; color: var(--color-warning) !important; font-weight: 600 !important; }
.field-success { display: block; margin-top: 4px; color: var(--color-success) !important; font-weight: 700 !important; font-size: 1.05rem !important; }
/* Erro crítico em campo (ex.: código de barras já em uso, código não
   encontrado) -- mais forte que .field-warning (usada em avisos brandos
   como "Primeiro acesso pendente"), pra não passar despercebido numa
   tela de bipagem onde o estoquista está olhando pro produto físico,
   não pra tela. */
.field-danger { display: block; margin-top: 4px; color: var(--color-danger) !important; font-weight: 700 !important; font-size: 1.05rem !important; }
/* Utilitárias genéricas -- o CSP de produção (style-src 'self') bloqueia
   qualquer atributo style="..." inline, então esses ajustes pontuais
   (form inline, campo mais estreito, espaçamento entre botões) precisam
   de classe em vez de estilo direto na tag. */
.inline-form { display: inline; }
.campo-compacto { max-width: 100px; }
.botao-espacado { margin-right: 12px; }
/* Grupo de ações numa célula de tabela (Editar/Excluir etc.) -- gap
   em vez de só margin-right (que não dá espaço quando os botões
   quebram linha). Pedido do usuário: sempre lado a lado, nunca
   quebrando linha -- nowrap aqui, e `.table-wrap` (overflow: auto)
   já cuida de rolar a tabela na horizontal se precisar, em vez de
   deixar os botões um em cima do outro. */
.acoes-tabela { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; white-space: nowrap; }
.field-warning[hidden] { display: none; }
.checkbox-label { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 10px 0; color: var(--text-primary); }
/* Agrupa um bloco Dias/Horas do Orçamento (normal/sábado/domingo) numa
   caixa própria -- sem isso os 3 blocos se misturavam visualmente, com
   "Quantidade de dias" repetido 3x sem separação clara entre eles. */
.campo-horas-grupo { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 10px 0; background: var(--bg-panel-alt, transparent); }
.campo-horas-grupo label { margin: 10px 0 0; }
/* Prefixo/sufixo fixo ao lado de um campo (ex.: "R$" antes de um valor de
   taxa, "h"/"dias" depois de uma quantidade de tempo) -- deixa a unidade
   explícita junto do número, não só numa dica separada acima do campo. */
.campo-com-unidade { display: flex; align-items: center; gap: 8px; }
.campo-com-unidade span { color: var(--text-secondary); font-weight: 700; white-space: nowrap; }
.campo-com-unidade input { flex: 1; min-width: 0; }
/* Seletor guiado de materiais (Fibra óptica): categoria/atalhos e a
   lista de itens que abre embaixo, lado a lado na horizontal (botões
   de verdade, não links de texto). Caixa alta nos rótulos segue o
   mesmo padrão do resto do sistema (campos com data-uppercase). */
.material-atalhos { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.material-atalhos .secondary-button,
.material-guiado-lista .secondary-button { text-transform: uppercase; }
.material-guiado-lista[hidden], .material-guiado-form[hidden] { display: none; }
/* Cartão de ficha técnica dentro do modal "Consultar especificação"
   (resultado de busca ou de sugestão guiada). */
.cartao-ficha-especificacao { margin: 10px 0; }
.material-guiado-lista { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.material-guiado-form { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 10px 0; background: var(--bg-panel-alt, transparent); }
.material-guiado-campos { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.material-guiado-campos[hidden] { display: none; }
/* Rótulo ao lado do campo (não em cima) -- deixa o formulário de
   características mais compacto na horizontal, aproveitando a largura
   disponível em vez de empilhar rótulo+campo verticalmente. */
.material-guiado-campos label { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 600; min-width: 240px; }
.material-guiado-campos label > select,
.material-guiado-campos label > input:not([type="checkbox"]) { flex: 1; min-width: 0; }
.material-guiado-campos label.campo-largo { flex: 1 1 100%; }
.material-guiado-campos label.checkbox-label { flex-direction: row; }
.checkbox-label input { width: auto; }
.qrcode-box { display: flex; justify-content: center; align-items: center; margin: 16px 0; padding: 16px; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.qrcode-box svg { width: 220px; height: 220px; max-width: 100%; }
.panel details { margin: 14px 0; color: var(--text-secondary); font-size: .86rem; }
.panel details summary { cursor: pointer; color: var(--brand-orange-light); font-weight: 600; }
.panel details .uri { margin-top: 8px; }
/* Genérica pra texto secundário/discreto -- CSP bloqueia style="..." inline
   (ver comentário acima em .inline-form), então isso substitui qualquer
   style="color:var(--text-faint)" direto na tag. */
.texto-discreto { color: var(--text-faint); font-size: .85rem; }

/* Calendário de presença de Terceiros (terceiros.php) -- tabela de
   verdade (não CSS grid) com colunas fixas via <colgroup>, célula
   compacta e uniforme mesmo com muitos dias preenchidos: só número do
   dia + indicador de valor, nunca OS/KM/descrição (isso fica só no
   popup ao clicar) -- pedido do usuário 30/09/2026 ("layout mais limpo
   e profissional", "vai virar bagunça se tiver várias datas
   preenchidas"). */
.calendario-terc-tabela { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendario-terc-tabela th { text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); padding: 6px 0; }
.calendario-terc-tabela td { border: 1px solid var(--border); padding: 0; vertical-align: top; height: 62px; }
.calendario-terc-tabela td.dia-vazio { border-color: transparent; background: transparent; }
.dia-cel-terc { width: 100%; height: 100%; min-height: 58px; border: 0; background: var(--bg-panel-alt); padding: 6px 8px; cursor: pointer; text-align: left; font: inherit; color: var(--text-primary); display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.dia-cel-terc:hover { background: var(--bg-elevated); }
.dia-cel-terc.dia-marcado-terc { background: var(--color-success-bg); }
.dia-numero-terc { font-weight: 700; font-size: .85rem; }
.dia-valor-terc { font-size: .7rem; color: var(--color-success); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
    .calendario-terc-tabela td { height: 48px; }
    .dia-cel-terc { min-height: 44px; padding: 4px 5px; }
    .dia-numero-terc { font-size: .75rem; }
    .dia-valor-terc { font-size: .62rem; }
}

/* Página pública do recibo (recibo-assinar.php / privacidade.php):
   sem <main> (que já limita a 1200px em style.css), então precisa do
   próprio limite de largura -- CSP bloqueia <style> inline, por isso
   entra aqui. Tema claro (fundo branco) de propósito -- pedido do
   usuário 30/09/2026: diferente do tema escuro do admin, é uma página
   voltada pro prestador de serviço, não pra equipe interna. Redefine as
   variáveis de cor só dentro de .pagina-publica -- o resto do sistema
   (tema escuro) continua intocado. */
.pagina-publica {
    --bg-page: #f4f6f9;
    --bg-panel: #ffffff;
    --bg-panel-alt: #eef1f5;
    --bg-elevated: #e4e8ee;
    --bg-input: #ffffff;
    --text-primary: #1b2739;
    --text-secondary: #4a5a6e;
    --text-faint: #8694a6;
    --border: #d9dfe6;
    --border-strong: #c3cbd6;
    display: flex; justify-content: center; padding: 24px 16px;
    background: var(--bg-page); color: var(--text-primary);
    min-height: 100vh;
}
.recibo-publico { max-width: 640px; width: 100%; }
.recibo-publico .brand-header-publico { display: block; text-align: center; margin-bottom: 24px; }
.recibo-publico .brand-header-publico img { height: 48px; }
.recibo-total { text-align: right; font-size: 1.1rem; font-weight: 700; margin-top: 8px; }
.recibo-assinatura-box { margin-top: 24px; padding: 16px; border-radius: 8px; background: var(--bg-panel-alt); }
.recibo-assinatura-box .form-actions-publico { margin-top: 12px; }
@media (max-width: 650px) { .modal-panel { padding: 18px; } }