/* Lunarco Tabelão: mesma paleta e mesmos controles do Broker (tema.css). Aqui só o que é desta tela: a planilha e o painel do registro.
   A planilha é número em cima de número, então tudo tem contorno: grade nas células, linhas alternadas, cabeçalho com fundo. */
:root { --contorno: #b4bfd1; --grade-l: #cdd5e2; --cab: #e2e8f3; --cab2: #d3dcea; --zebra: #f4f6fa; --fixa: #eef1f7; --linha-sel: #d5e3fb; }
:root[data-tema="dark"] { --contorno: #3a4766; --grade-l: #2c3757; --cab: #1f2945; --cab2: #19223b; --zebra: #141c33; --fixa: #1b2440; --linha-sel: #24345f; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="light"]) { --contorno: #3a4766; --grade-l: #2c3757; --cab: #1f2945; --cab2: #19223b; --zebra: #141c33; --fixa: #1b2440; --linha-sel: #24345f; } }

.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.barra-app .marca { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: .01em; }
.barra-app .marca:hover { text-decoration: none; }
.barra-app a.botao-barra { display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px; border: 1px solid var(--barra-l); border-radius: 8px; font-weight: 500; white-space: nowrap; } .barra-app a.botao-barra:hover { text-decoration: none; opacity: .85; }
.estado-leitura { font-size: .9em; opacity: .85; }
main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 20px 14px; }
.topo { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.topo-titulo { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.topo-acoes { display: flex; gap: 8px; }
.ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; margin-right: 5px; flex: none; }
button.ico-so { padding: 0 6px; min-width: var(--campo); } button.ico-so .ico { margin: 0; }
button { border-color: var(--contorno); }
a.botao { display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px; border: 1px solid var(--contorno); border-radius: 8px; background: var(--sup); color: var(--t); font-weight: 500; white-space: nowrap; }
a.botao:hover { background: var(--a-sel); border-color: var(--a); color: var(--a); text-decoration: none; }
.vazio { color: var(--m); padding: 32px 12px; text-align: center; border: 1px dashed var(--campo-borda); border-radius: var(--raio); background: var(--sup2); margin: 16px; }
#aviso { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: color-mix(in srgb, var(--ok) 14%, var(--sup)); color: var(--ok); border: 1px solid var(--ok); padding: 8px 14px; border-radius: 8px; display: none; max-width: 90vw; z-index: 30; box-shadow: 0 6px 20px rgba(16, 24, 40, .15); }
#erro { z-index: 30; }

/* etiquetas, como no Broker */
.etq { display: inline-flex; align-items: center; gap: 4px; font-size: .8em; font-weight: 500; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--contorno); color: var(--m); background: var(--sup2); white-space: nowrap; line-height: 1.5; }
.etq.alerta { color: var(--esc); border-color: var(--esc); background: color-mix(in srgb, var(--esc) 10%, transparent); }
.etq.ok { color: var(--ok); border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.etq.ruim { color: var(--ruim); border-color: var(--ruim); background: var(--ruim-bg); }
.etq.azul { color: var(--a); border-color: var(--a); background: var(--a-sel); }

/* avisos sobre os PDFs do mês */
.avisos { display: grid; gap: 8px; margin-bottom: 10px; max-height: 30vh; overflow: auto; }
.aviso-pdf { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 9px 12px; border: 1px solid var(--esc); border-left: 5px solid var(--esc); border-radius: var(--raio); background: color-mix(in srgb, var(--esc) 9%, var(--sup)); }
.aviso-pdf.grave { border-color: var(--ruim); background: var(--ruim-bg); }
.aviso-pdf .txt { flex: 1 1 380px; min-width: 0; } .aviso-pdf .txt b { display: block; } .aviso-pdf .txt span { color: var(--t); opacity: .85; font-size: .93em; }
.aviso-pdf .arqs { display: grid; gap: 4px; } .aviso-pdf .arq { display: flex; align-items: center; gap: 6px; font-size: .9em; } .aviso-pdf .arq > span:first-child { width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.aviso-pdf .arq .botao, .aviso-pdf .arq button { min-height: 28px; padding: 0 9px; font-size: .92em; }

.avisos details > summary { cursor: pointer; display: flex; gap: 12px; align-items: baseline; padding: 8px 12px; border: 1px solid var(--esc); border-left: 5px solid var(--esc); border-radius: var(--raio); background: color-mix(in srgb, var(--esc) 9%, var(--sup)); }
.avisos details > summary.grave { border-color: var(--ruim); background: var(--ruim-bg); }
.avisos details > summary span { color: var(--t); opacity: .8; font-size: .92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avisos details[open] > summary { margin-bottom: 8px; } .avisos details .aviso-pdf { margin-bottom: 8px; }

/* resumo: os cartões são os filtros */
.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.cartao { background: var(--sup); border: 1px solid var(--contorno); border-left: 4px solid var(--contorno); border-radius: var(--raio); box-shadow: var(--sombra); padding: 8px 12px; text-align: left; min-height: 0; display: block; line-height: 1.3; }
.cartao b { display: block; font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
.cartao span { color: var(--m); font-size: .86em; font-weight: 500; }
.cartao[data-sit="conferir"] { border-left-color: var(--a); } .cartao[data-sit="diverge"] { border-left-color: var(--ruim); } .cartao[data-sit="salto"] { border-left-color: var(--ruim); } .cartao[data-sit="novo"] { border-left-color: var(--a); } .cartao[data-sit="alerta"] { border-left-color: var(--ruim); } .cartao[data-sit="sempreco"] { border-left-color: var(--esc); } .cartao[data-sit="conferido"] { border-left-color: var(--ok); }
.cartao:hover { background: var(--sup2); }
.cartao.on { background: var(--a-sel); border-color: var(--a); box-shadow: 0 0 0 1px var(--a); color: var(--t); font-weight: inherit; }
.cartao.on span { color: var(--a); font-weight: 600; }
.cartao .barra-p { display: block; height: 5px; border-radius: 4px; background: var(--cab2); margin-top: 5px; overflow: hidden; } .cartao .barra-p i { display: block; height: 100%; background: var(--ok); }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 10px; background: var(--sup); border: 1px solid var(--contorno); border-radius: var(--raio); margin-bottom: 10px; box-shadow: var(--sombra); }
.filtros input[type=search] { min-width: 260px; } .filtros select { max-width: 200px; } .filtros .esp { flex: 1; }
.filtros input, .filtros select { border-color: var(--contorno); }
.chave { display: inline-flex; align-items: center; gap: 6px; color: var(--t); cursor: pointer; } .chave input { min-height: 0; }

/* a planilha */
.area { flex: 1; min-height: 0; display: flex; gap: 12px; }
.grade { flex: 1; min-width: 0; overflow: auto; background: var(--sup); border: 1px solid var(--contorno); border-radius: var(--raio); box-shadow: var(--sombra); outline: none; }
#tabela { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
#tabela th, #tabela td { padding: 0 10px; height: 34px; white-space: nowrap; border-bottom: 1px solid var(--grade-l); border-right: 1px solid var(--grade-l); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
#tabela thead th { position: sticky; z-index: 3; background: var(--cab); color: var(--t); }
#tabela thead tr.grupos th { top: 0; height: 26px; font-size: .72em; letter-spacing: .07em; padding-top: 0; padding-bottom: 0; text-align: center; background: var(--cab2); border-right: 2px solid var(--contorno); border-bottom: 1px solid var(--contorno); }
#tabela thead tr.titulos th { top: 26px; height: 34px; padding-top: 0; padding-bottom: 0; border-bottom: 2px solid var(--contorno); cursor: pointer; user-select: none; }
#tabela thead tr.titulos th:hover { color: var(--a); } #tabela thead th.ordem::after { content: " ↑"; color: var(--a); } #tabela thead th.ordem.desc::after { content: " ↓"; }
#tabela td.g, #tabela th.g { border-left: 1px solid var(--contorno); }
#tabela td.num, #tabela th.num { text-align: right; }
#tabela td.centro, #tabela th.centro { text-align: center; }
#tabela tbody tr:nth-child(even) td { background: var(--zebra); }
/* empreendimento cujo PDF saiu da pasta: a linha fica marcada até a pessoa decidir */
#tabela tbody tr.sem-arq td, #tabela tbody tr.sem-arq:nth-child(even) td { background: color-mix(in srgb, var(--ruim) 11%, var(--sup)); }
#tabela tbody tr.sem-arq td.f0 { box-shadow: inset 4px 0 0 var(--ruim); }
button.perigo { color: var(--ruim); border-color: var(--ruim); }
/* três colunas presas à esquerda: conferido + PDF, construtora e projeto */
#tabela .f0, #tabela .f1, #tabela .f2 { position: sticky; z-index: 2; background: var(--fixa); }
#tabela tbody tr:nth-child(even) .f0, #tabela tbody tr:nth-child(even) .f1, #tabela tbody tr:nth-child(even) .f2 { background: var(--fixa); }
#tabela thead .f0, #tabela thead .f1, #tabela thead .f2 { z-index: 5; background: var(--cab); } #tabela thead tr.grupos .f0, #tabela thead tr.grupos .f1, #tabela thead tr.grupos .f2 { background: var(--cab2); border-right-width: 1px; border-right-color: var(--grade-l); }
#tabela .f0 { left: 0; width: 74px; min-width: 74px; max-width: 74px; padding: 0 6px; text-align: center; }
#tabela .f1 { left: 74px; width: 124px; min-width: 124px; max-width: 124px; font-size: .92em; }
#tabela .f2 { left: 198px; width: 236px; min-width: 236px; max-width: 236px; font-weight: 600; border-right: 2px solid var(--contorno); }
#tabela tbody tr { cursor: pointer; }
#tabela tbody tr:hover td { background: var(--a-sel); }
#tabela tbody tr.sel td { background: var(--linha-sel); } #tabela tbody tr.sel .f0 { box-shadow: inset 4px 0 var(--a); }
#tabela td.nao, #tabela td.vz { color: var(--m); }
#tabela td.sim { color: var(--ok); font-weight: 600; }
#tabela td.edit { box-shadow: inset 0 -2px var(--a); }
#tabela td.diverge { box-shadow: inset 0 0 0 2px var(--ruim); background: var(--ruim-bg) !important; }
/* comparação com o mês anterior: discreta no que mudou, forte só no que salta aos olhos */
#tabela td.cmp { border-right: 2px solid var(--contorno); }
#tabela td.mud { background-image: linear-gradient(135deg, var(--esc) 0 7px, transparent 7px); background-repeat: no-repeat; }
#tabela td.salto { box-shadow: inset 0 0 0 2px var(--ruim); color: var(--ruim); font-weight: 600; }
#tabela td.herd { color: var(--m); font-style: italic; }
#tabela td .var { font-size: .82em; font-weight: 600; margin-right: 6px; color: var(--esc); } #tabela td .var.cai { color: var(--ok); } #tabela td .var.era { color: var(--m); text-decoration: line-through; margin: 0; }
#tabela td.editando { padding: 0; overflow: visible; } #tabela td.editando input, #tabela td.editando select { width: 100%; min-width: 96px; min-height: 33px; border-radius: 0; border-color: var(--a); }
.marca-c { width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%; border: 1.5px solid var(--campo-borda-forte); background: var(--sup); display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.marca-c svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.marca-c:hover svg { opacity: .35; }
.marca-c.feito { background: var(--ok); border-color: var(--ok); color: #fff; } .marca-c.feito svg { opacity: 1; }
.marca-c.alerta { border-color: var(--ruim); box-shadow: 0 0 0 3px var(--ruim-bg); }
.abre-pdf { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 6px; border-radius: 6px; color: var(--m); vertical-align: middle; }
.abre-pdf .ico { margin: 0; } .abre-pdf:hover { background: var(--sup); color: var(--a); box-shadow: 0 0 0 1px var(--a); }

/* painel do registro */
.painel { width: min(560px, 46vw); flex: none; background: var(--sup); border: 1px solid var(--contorno); border-radius: var(--raio); box-shadow: var(--sombra); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.painel[hidden] { display: none; }
.p-cab { padding: 10px 14px 10px; border-bottom: 1px solid var(--contorno); background: var(--cab); }
.p-cab .linha1 { display: flex; align-items: center; gap: 6px; } .p-cab .linha1 .sub { flex: 1; color: var(--t); opacity: .8; }
.p-cab h2 { font-size: 17px; margin: 2px 0 6px; font-weight: 650; }
.p-cab .etqs { display: flex; gap: 6px; flex-wrap: wrap; } .p-cab .etq { background: var(--sup); }
.p-corpo { flex: 1; overflow: auto; padding: 12px 14px; }
.p-pdf { border: 1px solid var(--contorno); border-radius: 8px; overflow: hidden; background: var(--sup2); margin-bottom: 12px; }
.p-pdf .tira { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; font-size: .88em; color: var(--m); border-bottom: 1px solid var(--contorno); background: var(--cab); }
.p-pdf .tira b { color: var(--t); } .p-pdf .tira .esp { flex: 1; } .p-pdf .tira button { min-height: 28px; padding: 0 8px; }
.p-pdf .folha { max-height: 300px; overflow: auto; cursor: zoom-in; } .p-pdf .folha img { display: block; width: 100%; }
.p-pdf.alto .folha { max-height: 62vh; }
.p-pdf .atalhos { display: flex; align-items: center; gap: 8px; padding: 8px; border-top: 1px solid var(--contorno); background: var(--sup); } .p-pdf .atalhos .sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85em; }
.notas { margin: 0 0 12px; padding: 0; list-style: none; font-size: .93em; }
.notas li { padding: 6px 10px; border-radius: 8px; margin-bottom: 4px; border: 1px solid color-mix(in srgb, var(--esc) 45%, transparent); background: color-mix(in srgb, var(--esc) 10%, transparent); color: var(--esc); }
.notas li.n { border-color: var(--grade-l); background: var(--sup2); color: var(--m); }
.notas li.a { border-color: color-mix(in srgb, var(--ruim) 45%, transparent); background: var(--ruim-bg); color: var(--ruim); }
.mudancas { margin-bottom: 12px; border: 1px solid var(--contorno); border-radius: 8px; overflow: hidden; }
.mudancas[hidden] { display: none; }
.mudancas h3 { padding: 7px 10px; background: var(--cab); border-bottom: 1px solid var(--contorno); display: flex; align-items: center; gap: 8px; }
.mudancas .m { display: grid; grid-template-columns: 128px 1fr auto; gap: 8px; align-items: center; padding: 5px 10px; border-top: 1px solid var(--grade-l); font-size: .93em; } .mudancas h3 + .m { border-top: 0; }
.mudancas .m.um { display: block; padding: 7px 10px; } .mudancas .m.salto { color: var(--ruim); background: var(--ruim-bg); font-weight: 600; }
.mudancas .m .de { color: var(--m); text-decoration: line-through; margin-right: 8px; } .mudancas .m .para { font-weight: 600; }
.mudancas .m button { min-height: 26px; padding: 0 8px; font-size: .86em; }
label.f.mud input, label.f.mud select { border-color: var(--esc); } label.f.herd input, label.f.herd select { font-style: italic; color: var(--m); }
.tips { max-height: 190px; overflow: auto; }
.tip { display: grid; grid-template-columns: 1fr 96px 110px; gap: 8px; padding: 4px 10px; border-top: 1px solid var(--grade-l); font-size: .92em; align-items: center; } .tip:first-child { border-top: 0; }
.tip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tip .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.tip.zerou { color: var(--m); } .tip.zerou .num { font-weight: 400; }
.mudancas h3 .sub { margin-left: auto; font-size: .92em; }
.form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 10px; }
.form h3 { grid-column: 1 / -1; margin-top: 8px; padding: 5px 8px; font-size: .74em; text-transform: uppercase; letter-spacing: .07em; color: var(--t); background: var(--cab); border-radius: 6px; }
.form .c2 { grid-column: span 2; } .form .c3 { grid-column: span 3; } .form .c4 { grid-column: span 4; } .form .c6 { grid-column: span 6; }
label.f { display: block; font-size: .82em; color: var(--m); font-weight: 500; min-width: 0; }
label.f input, label.f select { display: block; width: 100%; margin-top: 3px; color: var(--t); font-size: 13.5px; font-weight: 400; min-height: 34px; padding: 0 8px; border-color: var(--contorno); }
label.f.edit input, label.f.edit select { box-shadow: inset 0 -2px var(--a); }
.precos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px 8px; }
.precos .t { font-size: .82em; color: var(--m); font-weight: 600; } .precos label.f { font-size: 0; } .precos label.f input { text-align: right; }
.p-pe { padding: 10px 14px; border-top: 1px solid var(--contorno); background: var(--sup2); display: flex; gap: 8px; align-items: center; } .p-pe .esp { flex: 1; }
.p-pe kbd { font: inherit; font-size: .78em; opacity: .75; margin-left: 6px; }

dialog { background: var(--sup); color: var(--t); border: 1px solid var(--contorno); box-shadow: 0 16px 48px rgba(16, 24, 40, .28); border-radius: 14px; width: min(1040px, calc(100vw - 24px)); padding: 18px 20px; max-height: 92vh; }
dialog::backdrop { background: rgba(16, 24, 40, .45); backdrop-filter: blur(2px); }
dialog.pequeno { width: min(460px, calc(100vw - 24px)); } dialog.cheio { width: calc(100vw - 24px); padding: 8px; } dialog.cheio img { display: block; width: 100%; }
dialog h2 { font-size: 16px; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } dialog h2 .esp { flex: 1; }
dialog .acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
dialog table { border: 1px solid var(--grade-l); } dialog table th { background: var(--cab); color: var(--t); padding: 8px; } dialog table td { padding: 7px 8px; border-bottom-color: var(--grade-l); } dialog tbody tr:nth-child(even) td { background: var(--zebra); }
dialog table button { min-height: 28px; padding: 0 9px; font-size: .9em; }
dialog .campo { display: block; margin-bottom: 10px; color: var(--m); font-size: .9em; } dialog .campo input, dialog .campo select { display: block; width: 100%; margin-top: 3px; color: var(--t); }

@media (max-width: 1100px) { .resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); } .painel { position: fixed; right: 8px; top: 56px; bottom: 8px; width: min(560px, calc(100vw - 16px)); z-index: 20; box-shadow: 0 16px 48px rgba(16, 24, 40, .3); } }

/* celular e janela baixa: a página rola inteira e a planilha ganha altura própria (antes ela ficava com altura zero) */
@media (max-width: 760px), (max-height: 640px) {
  .app { height: auto; min-height: 100dvh; }
  main { flex: none; padding: 10px 12px 14px; }
  .area { flex: none; display: block; }
  .grade { height: 82dvh; }
  .avisos { max-height: none; }
}
@media (max-width: 760px) {
  .topo { flex-direction: column; align-items: stretch; gap: 8px; }
  .topo-acoes button { flex: 1; justify-content: center; }
  .resumo { gap: 6px; } .cartao { padding: 6px 8px; } .cartao b { font-size: 17px; } .cartao span { font-size: .78em; overflow-wrap: anywhere; }
  .filtros input[type=search] { min-width: 0; flex: 1 1 100%; } .filtros select { flex: 1 1 40%; max-width: none; min-width: 0; } .filtros .esp { display: none; }
  .aviso-pdf .arq > span:first-child { width: auto; flex: 1; min-width: 0; }
  /* na tela estreita só o nome do projeto fica preso à esquerda; as três colunas juntas tomariam a tela toda */
  #tabela .f0, #tabela .f1 { left: auto; }
  #tabela .f2 { left: 0; width: 150px; min-width: 150px; max-width: 150px; }
}

[hidden] { display: none !important; }