/* Command D — identidade da Bil's, preta e amarela (da marca), tema escuro único.
   Layout: trilho lateral preto + área de trabalho; documentos em "papel" claro. */
:root {
  color-scheme: dark;
  --bg: #0b0b0a; --painel: #151513; --painel2: #1d1d1a; --painel3: #262622; --linha: #2e2e29; --linha2: #3b3b35;
  --fg: #f2f0e6; --mudo: #a3a093; --fraco: #75736a;
  --am: #ffe100; --am-tinta: #141200; --am-esc: #3a3400; --am-borda: #6b5f00;
  --ok: #5fd18b; --aviso: #ffb547; --erro: #ff6b5b; --info: #7cc4ff; --rosa: #ff9de2;
  --f-tit: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-txt: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --raio: 8px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: var(--f-txt); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--am); }
:focus-visible { outline: 2px solid var(--am); outline-offset: 2px; }
[hidden] { display: none !important; }
.tab { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-size: 12px; }
.mudo { color: var(--mudo); }
.fraco { color: var(--fraco); }
.pequeno { font-size: 12px; }

/* ---------- estrutura ---------- */
.app { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100%; }
.trilho { background: #000; border-right: 1px solid var(--linha); padding: 18px 14px; display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.trilho .logo { width: 150px; display: block; margin: 2px 4px 6px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; color: var(--mudo); text-decoration: none; font-weight: 500; }
.nav a:hover { background: var(--painel); color: var(--fg); }
.nav a.on { background: var(--am); color: var(--am-tinta); }
.nav a .n { margin-left: auto; font-family: var(--f-mono); font-size: 11px; opacity: .85; }
.nav .grupo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--fraco); padding: 12px 10px 4px; }
.trilho .rodape { margin-top: auto; font-size: 12px; color: var(--mudo); border-top: 1px solid var(--linha); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
main { min-width: 0; padding: 22px 28px 70px; }
.topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
h1 { font-family: var(--f-tit); font-stretch: 80%; font-weight: 800; font-size: 32px; line-height: 1.05; margin: 0; text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
h2 { font-family: var(--f-tit); font-stretch: 85%; font-weight: 700; font-size: 17px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .03em; }
h3 { font-size: 14px; margin: 0 0 8px; }
.sub { color: var(--mudo); margin: 4px 0 0; max-width: 75ch; }

/* ---------- blocos ---------- */
.grade { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-12 { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
.cartao { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; min-width: 0; }
.cartao.fino { padding: 12px 14px; }
.cartao > h2:first-child { margin-top: 0; }
.numero .rot { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--mudo); }
.numero .val { font-family: var(--f-tit); font-stretch: 80%; font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); white-space: nowrap; line-height: 1.1; color: var(--am); font-variant-numeric: tabular-nums; }
.numero .nota { font-size: 12px; color: var(--mudo); }
.alerta { display: flex; gap: 14px; align-items: center; border: 1px solid var(--am); background: linear-gradient(90deg, var(--am-esc), transparent 80%); border-radius: var(--raio); padding: 12px 16px; }
.alerta .grande { font-family: var(--f-tit); font-stretch: 70%; font-weight: 800; font-size: 40px; color: var(--am); line-height: 1; }
.aviso-caixa { border: 1px solid var(--linha2); border-left: 3px solid var(--aviso); background: var(--painel2); padding: 10px 12px; border-radius: 6px; font-size: 13px; }
.aviso-caixa.erro { border-left-color: var(--erro); }
.aviso-caixa.ok { border-left-color: var(--ok); }
.aviso-caixa.info { border-left-color: var(--info); }
.vazio { padding: 28px; text-align: center; color: var(--mudo); }

/* ---------- tabelas ---------- */
.rolar { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--mudo); font-weight: 500; padding: 8px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
td { padding: 8px; border-bottom: 1px solid var(--linha); vertical-align: top; }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: var(--painel2); }
td.dir, th.dir { text-align: right; white-space: nowrap; }
.pecas { color: var(--mudo); font-size: 11.5px; margin-top: 2px; }

/* ---------- controles ---------- */
.linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.linha.fim { justify-content: flex-end; }
.entre { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--linha2); background: var(--painel2); padding: 8px 14px; border-radius: 6px; cursor: pointer; font-weight: 500; text-decoration: none; color: var(--fg); white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: var(--mudo); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.pri { background: var(--am); color: var(--am-tinta); border-color: var(--am); font-weight: 600; }
.btn.pri:hover:not(:disabled) { filter: brightness(1.08); }
.btn.perigo { border-color: #6b2a24; color: var(--erro); }
.btn.ok { border-color: #245c3a; color: var(--ok); }
.btn.peq { padding: 4px 10px; font-size: 12px; }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--mudo); }
.btn.fantasma:hover { color: var(--fg); }
input[type=text], input[type=search], input[type=date], input[type=datetime-local], input[type=number], input[type=email], input[type=tel], input[type=password], select, textarea {
  background: var(--bg); border: 1px solid var(--linha2); border-radius: 6px; padding: 8px 10px; min-width: 0; width: 100%; }
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--am); outline: none; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--mudo); min-width: 0; }
.campo > span { white-space: nowrap; }
.campos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--linha2); background: transparent; border-radius: 99px; padding: 4px 12px; font-size: 12px; cursor: pointer; color: var(--mudo); }
.chip.on { border-color: var(--am); color: var(--am); }
.selo { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 1px 8px; border-radius: 99px; border: 1px solid currentColor; white-space: nowrap; line-height: 1.6; }
.s-orcamento { color: var(--mudo); } .s-aprovado { color: var(--ok); } .s-em_preparacao { color: var(--info); } .s-em_locacao { color: var(--am); }
.s-devolvido { color: var(--rosa); } .s-faturado { color: #8f8d82; } .s-cancelado { color: var(--erro); }
.s-ok { color: var(--ok); } .s-aviso { color: var(--aviso); } .s-erro { color: var(--erro); } .s-info { color: var(--info); }
.paginacao { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; font-size: 12px; color: var(--mudo); }

/* ---------- gráficos ---------- */
.barras .l { display: grid; grid-template-columns: minmax(0, 1fr) 110px 40px; gap: 10px; align-items: center; padding: 4px 0; font-size: 12.5px; }
.barras .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barras .trilha { height: 8px; background: var(--painel3); border-radius: 4px; overflow: hidden; }
.barras .ench { height: 100%; background: var(--am); }
svg text { fill: var(--mudo); font-family: var(--f-txt); }
.evento { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linha); align-items: center; cursor: pointer; }
.evento:last-child { border-bottom: 0; }
.data { font-family: var(--f-tit); font-stretch: 80%; text-align: center; border: 1px solid var(--linha2); border-radius: 6px; padding: 3px 0; line-height: 1.1; }
.data b { display: block; font-size: 19px; color: var(--am); }
.data span { font-size: 10px; text-transform: uppercase; color: var(--mudo); }

.forma-mini { padding: 0 4px; font-size: 12px; height: 22px; background: transparent; border: 1px solid transparent; color: inherit; }
.forma-mini:hover { border-color: var(--linha2); }

/* conciliação */
.conc-item { border-top: 1px solid var(--linha); padding: 10px 0; }
.conc-item:first-of-type { border-top: 0; }
.conc-acoes { margin-top: 6px; display: grid; gap: 6px; }
.conc-sug { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--linha2); border-radius: 6px; }
.conc-sug.forte { border-color: var(--ok); }

/* barra do desenvolvedor */
.barra-dev { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 6px 16px; background: #1a1033; border-bottom: 1px solid #3b2a6b; font-size: 13px; }
.barra-dev b { color: #b69cff; letter-spacing: .1em; }
.barra-dev a { color: #e4dbff; text-decoration: none; }
.barra-dev a:hover, .barra-dev a.on { color: #fff; text-decoration: underline; }
.barra-dev select { width: auto; max-width: 220px; height: 26px; padding: 0 6px; font-size: 12px; background: #261845; border-color: #3b2a6b; color: #e4dbff; }
.barra-dev .ver-como { display: inline-flex; gap: 6px; align-items: center; color: #b69cff; margin-left: auto; white-space: nowrap; }
.barra-dev .aviso-dev { color: #ffd166; }
.barra-dev.manutencao { background: #3a1014; border-bottom-color: #7a2630; }
.barra-dev.manutencao b { color: #ff8a8a; }

/* números nas abas */
.chip .chip-n { margin-left: 6px; font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }

/* colunas que ordenam */
th.ordenavel button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; white-space: nowrap; }
th.ordenavel button:hover, th.ordenavel[aria-sort=ascending] button, th.ordenavel[aria-sort=descending] button { color: var(--am); }
th.ordenavel .seta-ord { opacity: .7; font-size: 10px; }

/* agenda */
.gantt { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--painel); }
.gantt .dentro { min-width: 1500px; }
.g-cab, .g-lin { display: grid; grid-template-columns: 280px 1fr; }
.g-dias { display: grid; font-size: 11px; color: var(--mudo); }
.g-dias div { text-align: center; padding: 6px 0; border-left: 1px solid var(--linha); display: flex; flex-direction: column; line-height: 1.25; }
.g-dias .g-n { font-size: 14px; color: var(--fg); }
.g-dias .g-sem { font-size: 10px; text-transform: uppercase; }
.g-dias .g-mes { font-size: 10px; color: var(--am); text-transform: uppercase; font-weight: 700; }
.g-dias .hoje .g-n, .g-dias .hoje.g-n { color: var(--am); }
.g-dias .fds { background: rgba(255,255,255,.025); }
.g-dias .hoje { color: var(--am); font-weight: 600; }
.g-lin { border-top: 1px solid var(--linha); cursor: pointer; }
.g-lin:hover { background: var(--painel2); }
.g-lin .rot { padding: 10px 10px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-lin .pista { position: relative; height: 40px; background-image: linear-gradient(to right, var(--linha) 1px, transparent 1px); background-size: var(--dia, 0) 100%; }
.g-barra { position: absolute; top: 8px; height: 24px; border-radius: 5px; font-size: 12px; padding: 3px 8px; white-space: nowrap; overflow: hidden; color: var(--am-tinta); font-weight: 600; }
.b-em_locacao { background: var(--am); } .b-em_preparacao { background: var(--info); } .b-aprovado { background: var(--ok); }
.b-orcamento { background: transparent; border: 1px dashed var(--mudo); color: var(--mudo); }
.linha-hoje { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--erro); opacity: .7; }
.g-barra { cursor: pointer; }
.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 99px; margin-right: 6px; vertical-align: middle; }
/* agenda: mês, semana e lista */
.cal-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: var(--painel); }
.cal-sem { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--mudo); padding: 6px 0; border-bottom: 1px solid var(--linha); }
.cal-dia { min-height: 130px; border-top: 1px solid var(--linha); border-left: 1px solid var(--linha); padding: 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-dia:nth-child(7n + 1) { border-left: 0; }
.cal-dia .n { font-weight: 600; font-size: 12px; }
.cal-dia.fora-mes { opacity: .4; }
.cal-dia.fds, .cal-col.fds { background: rgba(255,255,255,.02); }
.cal-dia.hoje { box-shadow: inset 0 0 0 2px var(--am); }
.cal-dia.hoje .n { color: var(--am); }
.ev { display: flex; gap: 4px; align-items: center; width: 100%; text-align: left; border: 0; border-radius: 4px; padding: 2px 5px; font-size: 11px; cursor: pointer; min-width: 0; color: var(--am-tinta); font-weight: 600; }
.ev .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ev .h { font-variant-numeric: tabular-nums; opacity: .8; }
.ev .seta { font-weight: 800; }
.ev-em_locacao { background: var(--am); } .ev-em_preparacao { background: var(--info); } .ev-aprovado { background: var(--ok); }
.ev-orcamento { background: transparent; border: 1px dashed var(--mudo); color: var(--mudo); }
.ev:hover { filter: brightness(1.1); }
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(140px, 1fr)); gap: 0; border: 1px solid var(--linha); border-radius: var(--raio); overflow-x: auto; background: var(--painel); }
.cal-col { border-left: 1px solid var(--linha); padding: 6px; display: flex; flex-direction: column; gap: 3px; min-height: 360px; min-width: 140px; }
.cal-col:first-child { border-left: 0; }
.cal-col.hoje { box-shadow: inset 0 3px 0 var(--am); }
.cal-col-cab { display: flex; gap: 6px; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; color: var(--mudo); font-size: 12px; }
.cal-col-cab b { font-size: 20px; color: var(--fg); }
.cal-col.hoje .cal-col-cab b { color: var(--am); }
.cal-grupo { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--mudo); margin-top: 6px; }
.lista-ev { display: grid; grid-template-columns: 92px 52px 1fr auto; gap: 10px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--linha); cursor: pointer; font-size: 13px; }
.lista-ev:hover { background: var(--painel2); }
@media (max-width: 700px) {
  .cal-dia { min-height: 70px; padding: 2px; }
  .ev .t, .ev .h { display: none; }
  .ev { justify-content: center; padding: 1px; }
  .lista-ev { grid-template-columns: 1fr auto; }
  .lista-ev > :nth-child(2) { display: none; }
}

/* orçamento */
.resultados { max-height: 360px; overflow: auto; border: 1px solid var(--linha); border-radius: 6px; }
.res { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--linha); align-items: center; font-size: 12.5px; }
.res:last-child { border-bottom: 0; }
.res img, .miniatura { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 4px; }
.miniatura.vazia { background: var(--painel3); }
.resumo .l { display: flex; justify-content: space-between; padding: 5px 0; font-variant-numeric: tabular-nums; }
.resumo .total { border-top: 1px solid var(--linha); margin-top: 6px; padding-top: 10px; font-family: var(--f-tit); font-stretch: 80%; font-weight: 800; font-size: 28px; color: var(--am); }
.conflito { color: var(--erro); font-size: 11.5px; display: block; }
.livre { color: var(--ok); font-size: 11.5px; display: block; }
.fixo { position: sticky; top: 76px; }
tr.sel td { background: var(--am-esc); }
input.qtd { width: 64px; } input.preco { width: 110px; }

/* modal */
.fundo-modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: var(--painel); border: 1px solid var(--linha2); border-radius: 10px; width: min(720px, 100%); max-height: 90vh; overflow: auto; padding: 20px; }
.modal.largo { width: min(1000px, 100%); }
.aviso-flutuante { position: fixed; bottom: 20px; right: 20px; background: var(--am); color: var(--am-tinta); padding: 12px 16px; border-radius: 8px; font-weight: 600; max-width: 420px; box-shadow: 0 8px 30px rgba(0,0,0,.6); z-index: 60; }
.aviso-flutuante.erro { background: var(--erro); color: #1b0503; }

/* login */
.login { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.login .arte { background: #fff; display: grid; place-items: center; padding: 40px; }
.login .arte img { max-width: 80%; max-height: 70vh; }
.login .form { display: grid; place-items: center; padding: 32px; }
.login .form form { width: min(360px, 100%); display: flex; flex-direction: column; gap: 14px; }

/* passos (status da ficha) */
.passos { display: flex; gap: 0; flex-wrap: wrap; }
.passo { padding: 6px 12px; font-size: 12px; border: 1px solid var(--linha2); color: var(--fraco); margin-right: -1px; }
.passo:first-child { border-radius: 6px 0 0 6px; } .passo:last-child { border-radius: 0 6px 6px 0; }
.passo.feito { color: var(--mudo); background: var(--painel2); }
.passo.atual { color: var(--am-tinta); background: var(--am); border-color: var(--am); font-weight: 600; }

/* ---------- casca: área, barra do topo, busca, menu do celular ---------- */
.area { min-width: 0; display: flex; flex-direction: column; }
.barra-topo { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 28px; background: rgba(11,11,10,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha); }
.barra-topo .acoes-topo { margin-left: auto; display: flex; gap: 8px; }
.busca-rapida { position: relative; flex: 1 1 auto; max-width: 520px; }
.busca-rapida input { width: 100%; }
.busca-res { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--painel); border: 1px solid var(--linha2); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.6); max-height: 70vh; overflow: auto; padding: 6px; z-index: 40; }
.busca-res .grupo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--fraco); padding: 8px 8px 4px; }
.busca-res button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; background: none; border: 0; padding: 7px 8px; border-radius: 6px; cursor: pointer; color: var(--fg); }
.busca-res button:hover, .busca-res button:focus-visible { background: var(--painel2); }
.corta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-grupo { display: flex; flex-direction: column; gap: 2px; }
.trilho .marca { display: block; }
.so-celular { display: none !important; }
.cortina { display: none; }
.btn.fantasma { background: transparent; border-color: transparent; }
.btn.fantasma:hover:not(:disabled) { border-color: var(--linha2); }
.btn.grande { font-size: 18px; padding: 16px 28px; width: 100%; }

/* ---------- abas (mudam o conteúdo) ---------- */
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--linha); margin-bottom: 16px; overflow-x: auto; scrollbar-width: thin; }
.aba { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; color: var(--mudo); cursor: pointer; font-weight: 500; white-space: nowrap; margin-bottom: -1px; }
.aba:hover { color: var(--fg); }
.aba.on { color: var(--am); border-bottom-color: var(--am); }
.aba .n { margin-left: 6px; font-family: var(--f-mono); font-size: 11px; color: var(--fraco); }

/* ---------- andamento da ficha (não é aba: só mostra em que etapa está) ---------- */
.etapas { list-style: none; display: flex; padding: 0; margin: 0 0 16px; gap: 0; }
.etapa { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; font-size: 12px; color: var(--fraco); min-width: 0; }
.etapa::before { content: ''; position: absolute; top: 13px; left: -50%; right: 50%; height: 2px; background: var(--linha2); z-index: 0; }
.etapa:first-child::before { display: none; }
.etapa .bola { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--linha2); background: var(--bg); font-weight: 700; font-size: 12px; position: relative; z-index: 1; }
.etapa .rot { text-align: center; white-space: nowrap; }
.etapa.feita { color: var(--mudo); }
.etapa.feita .bola { border-color: var(--am); color: var(--am); }
.etapa.feita::before, .etapa.atual::before { background: var(--am); }
.etapa.atual { color: var(--fg); font-weight: 600; }
.etapa.atual .bola { background: var(--am); border-color: var(--am); color: var(--am-tinta); }

/* ---------- ponto ---------- */
.ponto-relogio { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 28px 20px; }
.ponto-relogio .hora, .comprovante .hora { font-family: var(--f-tit); font-stretch: 75%; font-weight: 800; font-size: clamp(48px, 9vw, 76px); line-height: 1; color: var(--am); font-variant-numeric: tabular-nums; }
.marcas-hoje { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.comprovante { text-align: center; display: flex; flex-direction: column; gap: 6px; padding: 10px 0; }
.tabela-ponto td { padding: 6px 8px; }
.tabela-ponto tr.descanso td { background: rgba(255,255,255,.025); }
.tabela-ponto tr.futuro td { opacity: .45; }
.tabela-ponto tfoot td { border-top: 2px solid var(--linha2); font-weight: 700; color: var(--am); }
.marcacao { font-family: var(--f-mono); font-size: 12px; background: var(--painel2); border: 1px solid var(--linha2); color: var(--fg); border-radius: 4px; padding: 1px 6px; margin: 0 4px 2px 0; cursor: pointer; }
.marcacao:disabled { cursor: default; }
.marcacao.manual { border-color: var(--aviso); }
.marcacao.anulada { text-decoration: line-through; opacity: .45; }
.barra-saldo { height: 8px; background: var(--painel2); border-radius: 4px; overflow: hidden; }
.barra-saldo span { display: block; height: 100%; border-radius: 4px; }
.assinaturas { display: none; }

/* ---------- relatórios ---------- */
.rel { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; }
.rel-lista { position: sticky; top: 76px; max-height: calc(100vh - 90px); overflow-y: auto; display: flex; flex-direction: column; }
.rel-lista a { display: block; padding: 5px 8px; border-radius: 6px; color: var(--mudo); text-decoration: none; font-size: 13px; line-height: 1.35; }
.rel-lista a:hover { background: var(--painel2); color: var(--fg); }
.rel-lista a.on { background: var(--am); color: var(--am-tinta); font-weight: 600; }
.rel-lista .grupo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--fraco); padding: 10px 8px 3px; }
.rel-cartao { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; margin: 0 -10px; border-radius: 6px; color: var(--fg); text-decoration: none; }
.rel-cartao:hover { background: var(--painel2); }
.rel-cartao b { color: var(--am); font-weight: 600; }
.filtros-rel { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.filtros-rel .campo { min-width: 150px; }
.filtros-rel .atalhos { gap: 6px; padding-bottom: 2px; }
th.ordenavel { cursor: pointer; user-select: none; }
th.ordenavel:hover { color: var(--fg); }
.tabela-rel tfoot td { border-top: 2px solid var(--linha2); border-bottom: none; color: var(--am); }
.nw { white-space: nowrap; }
.so-impressao { display: none; }
@media (max-width: 1150px) { .rel { grid-template-columns: minmax(0, 1fr); } .rel-lista { position: static; max-height: 260px; } }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  :root { color-scheme: light; }
  body { background: #fff; color: #000; font-size: 10px; }
  .trilho, .nao-imprimir { display: none !important; }
  .app, .rel { display: block; }
  main { padding: 0; }
  .cartao { background: none; border: none; padding: 0; margin: 0 !important; }
  .so-impressao { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; font-size: 11px; }
  th, td { color: #000 !important; border-color: #bbb; padding: 2px 4px; font-size: 9.5px; }
  .tabela-rel tfoot td { color: #000; border-top: 1.5px solid #000; }
  .selo { border: none; padding: 0; color: #000 !important; background: none !important; }
  .rolar { overflow: visible; }
  a { color: #000; text-decoration: none; }
  tr { break-inside: avoid; }
  thead { display: table-header-group; }
}

@media (max-width: 1150px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-21, .g-12, .g3 { grid-template-columns: minmax(0, 1fr); } .fixo { position: static; } }
@media (max-width: 760px) {
  h1 { font-size: 26px; } .g2, .g4 { grid-template-columns: minmax(0, 1fr); }
  .login { grid-template-columns: minmax(0, 1fr); } .login .arte { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .trilho { position: fixed; inset: 0 auto 0 0; width: 260px; height: 100vh; z-index: 70; transform: translateX(-100%); transition: transform .2s ease; flex-direction: column; flex-wrap: nowrap; align-items: stretch; padding: 18px 14px; }
  .trilho .logo { width: 140px; } .nav { flex-direction: column; } .trilho .rodape { display: flex; } .nav .grupo { display: block; } .nav a .n { display: inline; }
  .app.menu-aberto .trilho { transform: none; box-shadow: 0 0 60px rgba(0,0,0,.8); }
  .app.menu-aberto .cortina { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 65; }
  .so-celular { display: inline-flex !important; }
  .marca-topo img { height: 24px; display: block; }
  .barra-topo { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .barra-topo .busca-rapida { order: 3; flex-basis: 100%; max-width: none; }
  .barra-topo .acoes-topo .btn { padding: 7px 10px; font-size: 13px; }
  main { padding: 16px 14px 60px; }
  .etapa .rot { font-size: 10.5px; white-space: normal; }
  .etapa .bola { width: 24px; height: 24px; font-size: 11px; }
  .etapa::before { top: 11px; }
}
@media print {
  .barra-topo { display: none !important; }
  .so-impressao { display: flex !important; }
  .assinaturas { display: flex !important; justify-content: space-around; margin-top: 48px; }
  .assinaturas div { border-top: 1px solid #000; padding-top: 4px; width: 40%; text-align: center; }
}

/* Equipamentos e kits: foto do item (editor) */
.foto-item img, .foto-item .foto-vazia { width: 100%; max-width: 260px; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 6px; display: block; }
.foto-item .foto-vazia { background: var(--painel3); display: flex; align-items: center; justify-content: center; color: var(--mudo); font-size: 13px; }
.foto-item label.btn { cursor: pointer; }
.campos > label.linha { flex-wrap: nowrap; align-self: end; padding-bottom: 8px; }
/* Conferência de saída e devolução peça a peça (fichas.tsx) */
.conf-lista { max-height: 55vh; overflow-y: auto; border: 1px solid var(--linha); border-radius: var(--raio); }
.conf-kit { padding: 6px 10px; font-weight: 700; background: var(--painel); border-bottom: 1px solid var(--linha); }
.conf-peca { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 7px 10px; border-bottom: 1px solid var(--linha); }
.conf-peca.no-kit { padding-left: 24px; }
.conf-peca.feita { background: color-mix(in srgb, var(--ok) 9%, transparent); }
.conf-marca { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; min-width: 200px; }
.conf-marca input { width: 20px; height: 20px; }
.conf-serie { max-width: 190px; }
.conf-botoes { gap: 4px; }
.conf-botoes .btn.ativo.conf-ok { background: var(--ok); color: #fff; border-color: var(--ok); }
.conf-botoes .btn.ativo.conf-avaria { background: var(--aviso); color: #000; border-color: var(--aviso); }
.conf-botoes .btn.ativo.conf-falta { background: var(--erro); color: #fff; border-color: var(--erro); }
.conf-qtds { padding: 4px 10px 8px 24px; gap: 12px; }
.conf-qtds input { width: 64px; }
.conf-avaria { padding: 6px 10px 10px 24px; display: grid; gap: 6px; border-bottom: 1px solid var(--linha); }
.conf-foto { position: relative; display: inline-flex; align-items: flex-start; padding: 0; border: 1px solid var(--linha); border-radius: 6px; background: none; cursor: pointer; overflow: hidden; }
.conf-foto img { width: 64px; height: 64px; object-fit: cover; display: block; }
.conf-foto .btn { position: absolute; top: 0; right: 0; padding: 0 4px; background: var(--bg); }
.conf-erro { color: var(--erro); }
.conf-mov { border-bottom: 1px solid var(--linha); padding: 6px 0; }
.conf-mov summary { cursor: pointer; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.conf-mov table { margin: 6px 0; }
@media (max-width: 600px) { .conf-serie { max-width: none; width: 100%; } .conf-botoes { width: 100%; } }
/* ---------- painel do dia ---------- */
.painel-dia .atalhos { display: flex; gap: 8px; flex-wrap: wrap; }
.erro-txt { color: var(--erro); } .ok-txt { color: var(--ok); }
.cab-cartao { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.cab-cartao h2 { margin: 0; }
.cab-cartao a { color: var(--mudo); text-decoration: none; } .cab-cartao a:hover { color: var(--am); }
.sec-tit { margin: 6px 0 10px; color: var(--mudo); }
.sub-tit { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--mudo); margin: 16px 0 6px; font-weight: 600; }
.mov { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linha); }
.mov:last-child { border-bottom: 0; }
.mov-hora { font-family: var(--f-tit); font-stretch: 80%; text-align: center; border: 1px solid var(--linha2); border-radius: 6px; padding: 3px 0; line-height: 1.15; }
.mov-hora b { display: block; font-size: 17px; color: var(--am); }
.mov-hora span { font-size: 10px; text-transform: uppercase; color: var(--mudo); }
.mov.atrasado .mov-hora { border-color: var(--erro); } .mov.atrasado .mov-hora b { color: var(--erro); }
.mov-corpo { min-width: 0; cursor: pointer; }
.mov-corpo:hover b { color: var(--am); }
.mov-tit { display: flex; gap: 8px; align-items: center; min-width: 0; }
.mov-tit b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mov-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mov-acoes { display: flex; gap: 6px; }
.btn.zap-forte { border-color: #245c3a; color: var(--ok); }
.bloco-atraso { border: 1px solid #6b2a24; background: rgba(255, 107, 91, .06); border-radius: 6px; padding: 4px 10px; margin-bottom: 10px; }
.rotulo-atraso { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--erro); font-weight: 700; padding-top: 6px; }
.aviso-acao { display: block; }
.aviso-link { color: var(--fg); text-decoration: none; display: block; }
.aviso-link:hover { color: var(--am); }
.aviso-n { font-family: var(--f-tit); font-stretch: 80%; font-size: 18px; color: var(--am); margin-right: 2px; }
.aviso-acao.erro .aviso-n { color: var(--erro); }
.aviso-itens { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; }
.aviso-itens li { padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aviso-itens a { color: var(--fg); text-decoration: none; } .aviso-itens a:hover { color: var(--am); }
.ocup-topo { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: 18px; align-items: end; }
.ocup-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; }
.ocup-dia { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ocup-trilha { width: 100%; max-width: 38px; height: 70px; background: var(--painel3); border-radius: 4px; display: flex; align-items: flex-end; overflow: hidden; }
.ocup-ench { width: 100%; background: var(--am); border-radius: 4px 4px 0 0; }
.ocup-pct { font-size: 11px; font-variant-numeric: tabular-nums; }
.ocup-rot { font-size: 10px; text-transform: uppercase; color: var(--mudo); }
.barras .l.disputa { grid-template-columns: minmax(0, 1fr) auto auto; }
@media (max-width: 760px) {
  .painel-dia .atalhos { width: 100%; } .painel-dia .atalhos .btn { flex: 1 1 auto; }
  .mov { grid-template-columns: 46px minmax(0, 1fr); }
  .mov-acoes { grid-column: 2; }
  .mov-tit { flex-wrap: wrap; row-gap: 2px; }
  .mov-sub { white-space: normal; }
  .ocup-topo { grid-template-columns: minmax(0, 1fr); }
  .barras .l.disputa { grid-template-columns: minmax(0, 1fr) auto; } .barras .l.disputa > :last-child { display: none; }
}
/* Mensagens e lembretes */
.msg-lista { display: flex; flex-direction: column; gap: 10px; }
.msg-item { border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 12px; background: var(--painel2); }
.msg-item.enviada { opacity: .7; border-color: var(--linha2); }
.msg-texto { white-space: pre-wrap; font-size: 13px; color: var(--mudo); margin-top: 8px; padding: 8px 10px; background: var(--painel3); border-radius: 6px; cursor: text; overflow-wrap: anywhere; }
.msg-envio { border-bottom: 1px solid var(--linha); padding: 6px 0; font-size: 13px; }
.msg-envio summary { cursor: pointer; }
.erro-txt { color: var(--erro); }
.conf-leitor { margin-bottom: 8px; gap: 8px; flex-wrap: nowrap; }
.conf-leitor input { flex: 1; min-width: 0; }
.conf-msg { margin: -2px 0 8px; font-weight: 600; }
.conf-msg.ok { color: var(--ok); }
.conf-msg.erro { color: var(--erro, #e5484d); }
.conf-camera { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--raio); margin-bottom: 8px; background: #000; }