/* ===== Sistema de Skins (01/09/2026, pedido do Eder — "já fizemos isso na
   calculadora top") — mesma ideia e mesmos 3 nomes/paletas emprestados de
   lá (Claro, Rosa Cristal, Nível Ouro), portados pros componentes PRÓPRIOS
   do Smartec (aqui não existe .hero-card/.rd-card/.verse-card como lá — é
   .card/.panel/table/.sidebar). A skin "Azul" (classe vazia, padrão) é a
   cara atual do Smartec, só com bordas mais definidas e um fundo com leve
   profundidade em vez de chapado — pedido explícito do Eder.
   Todo token de cor mora em variável CSS pra dar pra trocar em bloco por
   skin, e pro "regulador" de intensidade (JS, ver app.js) poder sobrescrever
   pontualmente sem precisar duplicar regra nenhuma daqui. */
:root {
  --bg:#eef2f8; --surface:#ffffff; --surface-2:#eef4fb;
  --border:#d7e3f0; --border-strong:#b7cbe0;
  --ink:#17212f; --ink-dim:#526277;
  --primary:#123a63; --primary-hover:#215782; --primary-ink:#ffffff;
  --field-bg:#ffffff; --danger:#b42318; --ok:#166534;
  --warn-bg:#fff8e8; --warn-border:#e0a125; --warn-ink:#7a4a05;
  --sidebar-bg:#123a63; --sidebar-ink:#dceafd; --sidebar-hover-bg:#215782; --sidebar-active-ink:#ffffff;
  color-scheme: light; font-family: Inter, system-ui, sans-serif; color: var(--ink); background: var(--bg);
}
/* Claro (mesma paleta teal da skin "Claro" do Cal.Top). */
body.light {
  --bg:#eef6f5; --surface:#ffffff; --surface-2:#eaf5f4;
  --border:#cfe6e3; --border-strong:#b8d9d6;
  --ink:#16302e; --ink-dim:#4a6864;
  --primary:#0e8a8a; --primary-hover:#0b6e6e; --primary-ink:#ffffff;
  --field-bg:#f7fbfa; --danger:#c0392b; --ok:#2f7d40;
  --warn-bg:#fff3d6; --warn-border:#c77d2e; --warn-ink:#5c3a12;
  --sidebar-bg:#0e8a8a; --sidebar-ink:#e3fbfa; --sidebar-hover-bg:#0b6e6e; --sidebar-active-ink:#ffffff;
}
/* Rosa Cristal (mesma paleta da skin "Rosa Cristal" do Cal.Top) — escura,
   acento rosa vivo só em botão/destaque, nunca preenchendo área grande
   (por isso a barra lateral usa um tom de superfície escura, não o rosa). */
body.skin-rosa-cristal {
  --bg:#1D171F; --surface:#32202E; --surface-2:#3C2937;
  --border:rgba(255,207,231,.18); --border-strong:rgba(255,207,231,.32);
  --ink:#FFF9FC; --ink-dim:#D0C1CB;
  --primary:#FF91C9; --primary-hover:#ff7dbe; --primary-ink:#3c1428;
  --field-bg:#241820; --danger:#F2545B; --ok:#6FCF97;
  --warn-bg:#3C2937; --warn-border:#FF91C9; --warn-ink:#FFF9FC;
  --sidebar-bg:#2b1a26; --sidebar-ink:#FFF9FC; --sidebar-hover-bg:#3C2937; --sidebar-active-ink:#FF91C9;
  color-scheme: dark;
}
/* Nível Ouro (mesma paleta da skin "Nível Ouro" do Cal.Top) — navy escuro
   com dourado só de acento (mesmo raciocínio da Rosa Cristal). */
body.skin-placo {
  --bg:#05070c; --surface:#0e1526; --surface-2:#16203a;
  --border:#223252; --border-strong:#2e4370;
  --ink:#f7f6ee; --ink-dim:#97a2ba;
  --primary:#f7c948; --primary-hover:#e0b93f; --primary-ink:#1f1502;
  --field-bg:#0a1020; --danger:#e0645c; --ok:#7bcf7a;
  --warn-bg:#16203a; --warn-border:#f7c948; --warn-ink:#f7f6ee;
  --sidebar-bg:#0e1526; --sidebar-ink:#f7f6ee; --sidebar-hover-bg:#16203a; --sidebar-active-ink:#f7c948;
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* achado real (24/08/2026, reportado pelo Eder): no celular, a tela inteira
   (até o cabeçalho "Smartec Gestão") aparecia cortada/deslocada pra esquerda
   em "Funcionário" e "Ordem de Serviço" — causa: nada travava o overflow-x
   da PÁGINA inteira, então bastava UM elemento largo (ex: a tabela de
   "Produtos da ordem", que tem min-width:620px) estourar por 1px que a
   página inteira ganhava rolagem horizontal, mesmo a tabela já tendo seu
   próprio scroll interno (.table-wrap{overflow:auto}). html/body travados
   em overflow-x:hidden agora — qualquer estouro pontual fica contido no
   próprio elemento, não arrasta mais a página inteira junto. */
html { overflow-x: hidden; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--bg); color: var(--ink); transition: background-color .15s ease, color .15s ease; }
/* fundo com leve profundidade (pedido do Eder, 01/09/2026: "melhorar o
   plano de fundo") — um brilho suave no topo em vez de cor chapada, mesmo
   truque das skins do Cal.Top (radial-gradient bem discreto, cor do
   --primary de cada skin). */
body::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: radial-gradient(ellipse 900px 500px at 50% -10%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 60%);
}
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px 1fr; }
.topbar { display: none; }
.sidebar { padding: 28px 16px; background: var(--sidebar-bg); color: var(--sidebar-ink); display: flex; flex-direction: column; gap: 7px; transition: background-color .15s ease; }
.sidebar::before { content: 'SMARTEC'; font-weight: 800; letter-spacing: .14em; padding: 8px 12px 26px; color: var(--sidebar-ink); }
.sidebar a { color: var(--sidebar-ink); text-decoration: none; padding: 12px; border-radius: 8px; }
.sidebar a:hover, .sidebar a[aria-current='page'] { background: var(--sidebar-hover-bg); color: var(--sidebar-active-ink); }
.content { padding: 42px; max-width: 1200px; width: 100%; margin: 0 auto; }
.page-header-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
h1 { margin: 0 0 8px; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.subtitle { margin: 0 0 28px; color: var(--ink-dim); }
/* botão de trocar skin na Home (01/09/2026, pedido do Eder — "igual a
   calculadora top, na tela inicial") — mesmo componente visual e mesma
   interação (clique ou arraste pro lado) do Cal.Top; a bolinha de dentro
   mostra a cor --primary da skin ativa. */
.skin-swipe-box { width:44px; height:44px; min-width:44px; border-radius:13px; background:var(--surface); border:1px solid var(--border-strong); display:grid; place-items:center; cursor:grab; touch-action:pan-y; -webkit-tap-highlight-color:transparent; flex-shrink:0; }
.skin-swipe-box::after { content:''; width:26px; height:26px; border-radius:9px; background:var(--primary); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px color-mix(in srgb, var(--primary) 45%, black 20%); }
.skin-swipe-box:active { cursor:grabbing; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
/* "trabalhar as bordas e o plano de fundo" (pedido do Eder) — achado real
   testando ao lado do Cal.Top: lá NENHUM card é cor sólida neutra, todos
   têm um gradiente leve puxando pra --primary (por isso as skins coloridas
   "aparecem" nos cards, não só no texto/sidebar). Antes aqui era
   `background: var(--surface)` chapado — corrigido com o mesmo tipo de
   gradiente (mais forte nos cards de destaque da Home, mais sutil no
   resto, igual lá: .home-quick-card 12%/4% vs .rd-card 3%). */
.card, .panel { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, var(--primary) 3%) 0%, var(--surface) 55%, color-mix(in srgb, var(--surface) 97%, var(--ink) 3%) 100%); border: 1px solid color-mix(in srgb, var(--border-strong) 85%, var(--primary) 15%); border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); }
.cards .card { background: linear-gradient(160deg, color-mix(in srgb, var(--surface-2) 88%, var(--primary) 12%), color-mix(in srgb, var(--surface) 96%, var(--primary) 4%)); border-color: color-mix(in srgb, var(--border-strong) 84%, var(--primary) 16%); }
.card strong { display:block; font-size: 1.9rem; color: var(--primary); margin-bottom: 4px; }
.card span { color: var(--ink-dim); }
.card-icon { display:block; font-size:1.7rem; line-height:1; margin-bottom:8px; }
.panel { margin-top: 24px; }
.panel h2 { font-size: 1.1rem; margin-top: 0; }
.panel-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.panel-title span { color:var(--ink-dim); font-size:.9rem; }
.form-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
label { display:grid; gap:6px; font-size:.9rem; font-weight:650; color:var(--ink); }
/* mesma regra do .card/.panel (pedido do Eder, 01/09/2026: "a caixinha
   está praticamente a mesma cor" — reclamação real sobre telas como
   Funcionários/Ordem de Serviço, que só têm campo de formulário e
   tabela, nenhum .card colorido) — campo de formulário TAMBÉM ganha um
   tingimento leve da cor da skin, não só a borda. */
input, select, textarea { width:100%; border:1px solid color-mix(in srgb, var(--border-strong) 82%, var(--primary) 18%); border-radius:8px; padding:10px 11px; font:inherit; color:var(--ink); background:color-mix(in srgb, var(--field-bg) 94%, var(--primary) 6%); }
input:focus, select:focus, textarea:focus { outline:3px solid color-mix(in srgb, var(--primary) 30%, transparent); border-color:var(--primary); }
/* achado real 2 (24/08/2026) — a correção de overflow-x:hidden acima só
   escondia o estouro, não resolvia a causa: `.full` (grid item que envolve
   cada tabela dentro de um formulário, ex: "Proventos e descontos" em
   Funcionários) tinha `min-width` no padrão do navegador (`auto`), que
   RECUSA encolher menor que o conteúdo de dentro (a tabela de 620px),
   mesmo com `.form-grid` já em coluna única no celular. `min-width:0`
   força o grid item a respeitar o espaço disponível de verdade, deixando
   o `.table-wrap { overflow:auto }` (que já existia) rolar só a tabela,
   sem esconder nem estourar a página inteira. */
textarea { resize:vertical; }.full { grid-column:1 / -1; min-width:0; }.form-actions { display:flex; justify-content:flex-end; }
button { font:inherit; cursor:pointer; }.primary { border:0; border-radius:8px; padding:11px 16px; background:var(--primary); color:var(--primary-ink); font-weight:700; }.primary:hover { background:var(--primary-hover); }.primary:disabled { opacity:.55; cursor:not-allowed; }
.table-wrap { overflow:auto; border:1px solid color-mix(in srgb, var(--border-strong) 82%, var(--primary) 18%); border-radius:8px; } table { width:100%; border-collapse:collapse; min-width:620px; } th, td { text-align:left; padding:12px; border-bottom:1px solid var(--border); font-size:.92rem; vertical-align:top; color:var(--ink); } th { background:color-mix(in srgb, var(--surface-2) 88%, var(--primary) 12%); color:var(--ink-dim); } tr:last-child td { border-bottom:0; }.empty { color:var(--ink-dim); text-align:center; }.text-button { border:0; background:transparent; padding:0; font-weight:700; color:var(--primary); }.danger { color:var(--danger); }.status { display:inline-block; padding:4px 8px; border-radius:999px; font-size:.78rem; font-weight:700; background:var(--surface-2); color:var(--ink); }.status.aberta { background:color-mix(in srgb, #1d4ed8 20%, var(--surface)); color:#1d4ed8; }.status.em-andamento { background:color-mix(in srgb, #92400e 20%, var(--surface)); color:#92400e; }.status.concluida { background:color-mix(in srgb, #166534 20%, var(--surface)); color:#166534; }.status.aguardando-aprovacao { background:color-mix(in srgb, #7e22ce 20%, var(--surface)); color:#7e22ce; }.status.agendado { background:color-mix(in srgb, #1d4ed8 20%, var(--surface)); color:#1d4ed8; }.status.confirmado { background:color-mix(in srgb, #92400e 20%, var(--surface)); color:#92400e; }.status.concluido { background:color-mix(in srgb, #166534 20%, var(--surface)); color:#166534; }.status.cancelado { background:color-mix(in srgb, #b42318 20%, var(--surface)); color:var(--danger); }.status.aguardando-pagamento { background:color-mix(in srgb, #92400e 20%, var(--surface)); color:#92400e; }.status.paga { background:color-mix(in srgb, #166534 20%, var(--surface)); color:#166534; }.status.cancelada { background:color-mix(in srgb, #b42318 20%, var(--surface)); color:var(--danger); }
/* Agenda (24/08/2026) — lista agrupada por dia, cada dia com seu próprio
   título + tabela (min-width:0 já herdado de .full pro caso mobile). */
.agenda-day { margin-bottom:20px; } .agenda-day h3 { margin:0 0 8px; font-size:.95rem; color:var(--ink); text-transform:capitalize; }
.actions { white-space:nowrap; }.actions a,.button-link { color:var(--primary); font-weight:700; text-decoration:none; margin-right:10px; }.detail dl { display:grid; grid-template-columns:150px 1fr; gap:12px; margin:0; }.detail dt { font-weight:700; color:var(--ink-dim); }.detail dd { margin:0; white-space:pre-wrap; color:var(--ink); }
.order-photo { display:block; max-width:100%; max-height:360px; margin-top:20px; border-radius:8px; }
.secondary { border:1px solid var(--primary); border-radius:8px; padding:9px 14px; background:var(--surface); color:var(--primary); font-weight:700; }
.secondary:hover { background:var(--surface-2); }
.line-builder-block { border-top:1px solid var(--border); padding-top:16px; margin-top:4px; }
.line-builder-block h3 { margin:0 0 10px; font-size:1rem; }
.line-builder { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; }
.line-builder select, .line-builder input { width:auto; flex:1 1 140px; }
.line-builder > span { display:contents; }
.photo-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; margin:10px 0; }
.photo-grid figure { margin:0; border:1px solid var(--border-strong); border-radius:8px; overflow:hidden; background:var(--surface); }
.photo-grid img { display:block; width:100%; height:110px; object-fit:cover; }
.photo-grid figcaption { display:flex; align-items:center; justify-content:space-between; padding:6px 8px; font-size:.78rem; color:var(--ink-dim); }
.photo-grid figcaption button { font-size:1rem; line-height:1; color:var(--danger); }
.thumb { display:block; max-width:160px; max-height:120px; margin-top:8px; border-radius:8px; }
.order-total { font-weight:700; color:var(--primary); font-size:1.05rem; }
.detail h3 { margin:18px 0 8px; font-size:1rem; }
label small { font-weight:500; color:var(--ink-dim); }
@media print { .topbar,.sidebar,.subtitle,.form-grid,.table-wrap,.notice,.actions,.button-link { display:none !important; } .content { padding:0; } .panel { border:0; box-shadow:none; } }
.notice { border-left: 4px solid var(--warn-border); background: var(--warn-bg); color: var(--warn-ink); padding: 14px; border-radius: 4px; }
.module-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; padding: 0; list-style: none; }
.module-list li { padding: 14px; border: 1px solid var(--border-strong); border-radius: 8px; }
.module-list strong { display: block; margin-bottom: 4px; }
.install-button { border: 0; border-radius: 7px; padding: 8px 12px; background: var(--surface); color: var(--primary); font-weight: 700; }
.legal-footer { margin-top: 36px; padding: 16px 0 4px; border-top: 1px solid var(--border); color: var(--ink-dim); font-size: .9rem; }
.legal-footer a { color: var(--primary); font-weight: 700; }
.privacy-page { max-width: 860px; margin: 0 auto; padding: 42px 24px 64px; }
.privacy-page h1 { margin-bottom: 6px; }.privacy-page h2 { margin-top: 30px; font-size: 1.2rem; }.privacy-page p, .privacy-page li { color: var(--ink); line-height: 1.65; }.privacy-page li { margin: 7px 0; }.privacy-page .back-link { color: var(--primary); font-weight: 700; }
.menu-button { display: none; }
@media (max-width: 720px) {
  .app-shell { display:block; }
  .topbar { padding: 12px 16px; display:flex; align-items:center; gap:12px; justify-content:space-between; background:var(--sidebar-bg); color:var(--sidebar-ink); position:sticky; top:0; z-index:2; }
  .topbar div { display:grid; margin-right:auto; }.topbar span { font-size:.75rem; color:var(--sidebar-ink); opacity:.75; }
  .menu-button { display:block; border:0; background:transparent; color:var(--sidebar-ink); font-size:1.5rem; }
  .sidebar { display:none; padding:12px; }.sidebar.open { display:flex; }.sidebar::before { display:none; }
  .content { padding:24px 16px; }
  .form-grid { grid-template-columns:1fr; }.full { grid-column:auto; }.form-actions { justify-content:stretch; }.form-actions .primary { width:100%; }
  .line-builder select, .line-builder input { flex:1 1 100%; }
}

/* 01/09/2026 (pedido do Eder) — Contas a Pagar/Receber: cores dos status
   "A vencer"/"Vencida" que faltavam (só existiam Paga/Cancelada — sem
   cor, caía no cinza genérico) + "Recebida" (Contas a Receber). */
.status.a-vencer { background:color-mix(in srgb, var(--warn-border) 30%, var(--surface)); color:var(--warn-ink); }
.status.vencida { background:color-mix(in srgb, var(--danger) 22%, var(--surface)); color:var(--danger); }
.status.recebida { background:color-mix(in srgb, var(--ok) 22%, var(--surface)); color:var(--ok); }

/* Código de pagamento (boleto/Pix) guardado numa parcela — badge + botão
   copiar, junto com a ação de colar/escanear quando ainda não tem código. */
.payment-code-badge { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--ink-dim); }
.payment-code-actions { display:flex; flex-direction:column; gap:4px; align-items:flex-start; }

/* Modal de escanear (QR do Pix / código de barras do boleto). Câmera nativa
   via BarcodeDetector quando o navegador suporta (Chrome/Android — inclusive
   o app instalado, que é TWA sobre Chrome); jsQR como reforço só pra QR nos
   navegadores sem BarcodeDetector. Sem suporte nenhum, some o botão de
   escanear e sobra só colar manual, que sempre funciona. */
.scanner-overlay { position:fixed; inset:0; background:rgba(15,23,32,.82); display:flex; align-items:center; justify-content:center; z-index:1000; padding:16px; }
.scanner-box { background:var(--surface); color:var(--ink); border-radius:12px; padding:16px; width:min(420px,100%); display:flex; flex-direction:column; gap:10px; }
.scanner-box video { width:100%; border-radius:8px; background:#000; max-height:60vh; }
.scanner-hint { font-size:.85rem; color:var(--ink-dim); text-align:center; }
.scanner-actions { display:flex; justify-content:flex-end; gap:8px; }

/* ===== Skins — seletor + regulador de intensidade (01/09/2026) ===== */
.skin-picker { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.skin-swatch { display:flex; flex-direction:column; align-items:center; gap:6px; border:2px solid transparent; border-radius:12px; padding:8px; background:transparent; cursor:pointer; min-width:84px; }
.skin-swatch.active { border-color:var(--primary); }
.skin-swatch .swatch-dot { width:36px; height:36px; border-radius:50%; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(0,0,0,.08); }
.skin-swatch span { font-size:.78rem; font-weight:700; color:var(--ink); }
.skin-intensidade-row { padding:10px 0; border-bottom:1px solid var(--border); }
.skin-intensidade-row.ativa { background:color-mix(in srgb, var(--primary) 6%, transparent); border-radius:8px; padding-left:8px; padding-right:8px; }
.skin-intensidade-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.skin-intensidade-head strong { flex:1; font-size:.88rem; }
.skin-intensidade-controls { display:flex; align-items:center; gap:10px; }
.skin-intensidade-controls input[type="range"] { flex:1; }
.skin-intensidade-valor { min-width:38px; text-align:right; font-size:.8rem; color:var(--ink-dim); font-variant-numeric:tabular-nums; }