/* Estilo das janelas do CEM injetadas por esquadria-escolher.js e
   esquadria-opcoes.js. Fica num arquivo só porque as MESMAS janelas abrem em
   telas diferentes (Cadastro de Esquadria e Cadastro de Obra), que têm folhas
   de estilo próprias. Tudo aqui é escopado em .cem-dlg para não mexer na tela host —
   o Cadastro de Obra, por exemplo, tem .btn e tabelas com outra aparência.
   Prefixo "cem-" em vez de .back/.dlg puro: este app já tem um .back de
   verdade (base.css, links "← Menu") e um .dlg de verdade (catalogos.css,
   <dialog> nativo dos admins) -- nome sem prefixo colidia com os dois e
   apagava (display:none) todo link "← Menu" da aplicação inteira, calado,
   só por este arquivo estar carregado. Achado rodando a bateria da Tarefa 7.

   As var(--surface-1)/--accent/--border/etc. abaixo são os MESMOS apelidos
   de ficha.css:19-25, e desde o redesenho de 2026-09-22 apontam para os
   tokens do app (base.css :root). O diálogo deste arquivo
   abre direto em document.body (cem-dialogo.js: injetar), fora da ficha, e
   por isso precisa da própria cópia dos tokens -- só ficha.css declara este
   conjunto (grep confirmado em toda a pasta css/), a repetição é por escopo
   CSS mesmo, não por gosto de duplicar. */
.cem-dlg,.cem-back{
    --surface-1:var(--card2); --surface-2:var(--card); --page:var(--bg);
    --text-primary:var(--tx); --text-secondary:var(--mut); --text-muted:var(--mut);
    --grid:var(--line); --border:var(--line); --accent:var(--acc); --accent-strong:var(--accd);
    --sel:color-mix(in srgb, var(--green) 10%, transparent); --sel-text:var(--tx);
    --head:var(--card2); --zebra:var(--card2); --group:var(--card2);
    --danger:var(--red); --info:color-mix(in srgb, var(--blue) 12%, transparent);
    --info-border:color-mix(in srgb, var(--blue) 35%, transparent);
}
.cem-back{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:800;display:none}
.cem-back.show{display:block}
.cem-dlg{position:fixed;z-index:801;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--surface-1);
     border:1px solid var(--border);border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.5);display:none;
     flex-direction:column;max-height:88vh;color:var(--text-primary);
     font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:12.5px;line-height:1.4;text-align:left}
.cem-dlg.show{display:flex}
.cem-dlg *{box-sizing:border-box}
.cem-dlg .dh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 12px;
         background:var(--accent);color:#fff;border-radius:9px 9px 0 0;font-weight:600}
.cem-dlg .dh button{background:none;border:none;color:#fff;font-size:15px;cursor:pointer;padding:0 4px}
.cem-dlg .db{padding:12px 14px;overflow:auto}
.cem-dlg .df{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:9px 14px;border-top:1px solid var(--border)}
.cem-dlg .spacer{flex:1}
.cem-dlg .btn{border:1px solid var(--border);background:var(--surface-2);color:var(--text-primary);
          border-radius:6px;padding:5px 16px;cursor:pointer;font:inherit;width:auto}
.cem-dlg .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.cem-dlg input,.cem-dlg select,.cem-dlg textarea{font:inherit;padding:4px 8px;border:1px solid var(--border);border-radius:6px;
     background:var(--surface-2);color:var(--text-primary)}
.cem-dlg textarea{width:100%;resize:vertical}
.cem-dlg .row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.cem-dlg .fld{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.cem-dlg .fld label{color:var(--text-secondary);white-space:nowrap}
.cem-dlg fieldset{border:1px solid var(--border);border-radius:8px;margin:0 0 10px;padding:8px 12px 10px;background:var(--group)}
.cem-dlg legend{color:var(--text-secondary);font-weight:600;padding:0 6px}
.cem-dlg .checks{display:flex;flex-direction:column;gap:4px}
.cem-dlg .checks label{display:flex;align-items:flex-start;gap:6px;color:var(--text-secondary)}
.cem-dlg .ph{color:#999;font-size:11.5px}
.cem-dlg .info{display:flex;gap:8px;background:var(--info);border:1px solid var(--info-border);
           border-radius:8px;padding:8px 10px;color:var(--text-secondary)}
.cem-dlg .info .ic{flex:none;font-size:15px;line-height:1.1}
.cem-dlg .prevbox{border:1px solid var(--border);border-radius:6px;background:#fff;
              display:flex;align-items:center;justify-content:center;overflow:hidden}
.cem-dlg .prevbox img{max-width:100%;max-height:100%;object-fit:contain;display:none}

.cem-dlg .gridwrap{overflow:auto;border:1px solid var(--border);border-radius:0}
.cem-dlg table{border-collapse:collapse;width:100%;white-space:nowrap;margin:0}
.cem-dlg thead th{position:sticky;top:0;z-index:2;background:var(--head);color:var(--text-secondary);text-align:left;
              font-weight:600;padding:5px 8px;border-right:1px solid var(--grid);border-bottom:1px solid var(--border)}
.cem-dlg tbody td{padding:0;border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);vertical-align:middle}
.cem-dlg tbody td.ro{padding:4px 7px;color:var(--text-secondary)}
.cem-dlg tbody td input{width:100%;border:none;background:none;color:inherit;padding:4px 7px;outline:none}
.cem-dlg .num{text-align:right}
.cem-dlg tbody tr.sel td{background:var(--sel);color:var(--sel-text)}

/* janela "Opções de Montagem": painel fixo à esquerda + 3 abas */
.cem-dlg .cw{display:flex;flex:1;min-height:0}
.cem-dlg .cw .esq{flex:0 0 252px;overflow:auto;padding:10px;background:var(--group);border-right:1px solid var(--border)}
.cem-dlg .cw .esq .sec{margin-top:10px;padding-top:6px;border-top:1px solid var(--border);
                   color:var(--text-secondary);font-weight:600}
.cem-dlg .cw .dir{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.cem-dlg .ctabs{display:flex;gap:2px;padding:6px 10px 0;background:var(--surface-1);
            border-bottom:1px solid var(--border);flex:none}
.cem-dlg .ctab{padding:5px 13px;border:1px solid var(--border);border-bottom:none;border-radius:6px 6px 0 0;
           background:var(--head);color:var(--text-secondary);cursor:pointer;font:inherit}
.cem-dlg .ctab.active{background:var(--surface-2);color:var(--text-primary);font-weight:600}
.cem-dlg .cpane{display:none;flex:1;min-height:0;overflow:auto;padding:10px 12px}
.cem-dlg .cpane.active{display:block}
.cem-dlg .cpane.split.active{display:flex;padding:0}
.cem-dlg .opclist{flex:0 0 47%;min-width:0;overflow:auto;border-right:1px solid var(--border)}
.cem-dlg .opclist td{padding:3px 8px;cursor:pointer;border-bottom:1px solid var(--grid)}
.cem-dlg .opclist td.v{color:var(--text-secondary);border-left:1px solid var(--grid)}
.cem-dlg .opcdet{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;padding:9px 11px;overflow:auto}
.cem-dlg .opcdet .alts label{display:flex;align-items:center;gap:7px;padding:2px 0;color:var(--text-secondary)}
.cem-dlg .atencao{flex:none;padding:7px 12px;border-top:1px solid var(--border);background:var(--info);
              color:var(--text-secondary);font-size:11.5px}

/* janela do cem-seletor.js (Tarefa 6): tabela + coluna lateral de filtros.
   A cor da linha selecionada não repete aqui -- ".cem-dlg tbody tr.sel td"
   ali em cima (linha 78) já é genérica e alcança #cemSelRows por herança de
   .cem-dlg#cemSel. */
.cemsel{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px;align-items:start}
.cemsel-tabela{min-width:0}
.cemsel-tabela table{width:100%}
.cemsel-tabela tbody{display:block;max-height:46vh;overflow-y:auto}
.cemsel-tabela thead,.cemsel-tabela tbody tr{display:table;width:100%;table-layout:fixed}
.cemsel-tabela tbody tr{cursor:pointer}
.cemsel-lado fieldset{margin:0 0 12px}
.cemsel-lado .fld{margin-bottom:8px}
.cemsel-lado select{width:100%}
/* Rádio de ordenação: mesmo alinhamento flex+gap que .fld já usa acima --
   sem regra própria o rádio e o texto não alinham (a única .chk existente,
   base.css:527, é o composto .fld.chk, fora do escopo .cem-dlg). */
.cemsel-lado .chk{display:flex;align-items:center;gap:6px;margin-bottom:4px;color:var(--text-secondary);cursor:pointer}
/* Coluna de imagem do seletor (croquis, Entrega 1): 40x40 e papel branco
   constante, independente do tema. Ver DESIGN.md, Excecoes deliberadas. */
.cemsel-img{box-sizing:content-box;height:40px}
.cemsel-img img{display:block;width:40px;height:40px;object-fit:contain;background:#fff}
@media (max-width:720px){.cemsel{grid-template-columns:1fr}}

/* Redesenho da ficha (2026-09-22): a tabela da janela "ver obras". Fora de
   #tool-ficha porque o diálogo abre em document.body. */
.cem-dlg .obras-lista{border-collapse:collapse;width:100%;min-width:420px}
.cem-dlg .obras-lista th,.cem-dlg .obras-lista td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left}
.cem-dlg .obras-lista th{color:var(--text-secondary);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}

/* Biblioteca de desenhos (Configurações). A janela usa a casca .cem-dlg
   (véu, Esc, ✕), mas no TEMA DO APP, como .cem-dlg.octip (orcamento.css):
   14px e alvos de 44×44. Os seletores levam .cem-dlg.bib para ganhar de
   .cem-dlg .btn e .cem-dlg input em qualquer ordem de carga. */
#bibCartao .btn{min-height:44px}
.bib-resumo{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:0 28px;margin:14px 0 0}
.bib-resumo div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}
.bib-resumo dt{color:var(--mut)}
.bib-resumo dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}

.cem-dlg.bib{width:min(760px,96vw);font-size:14px;line-height:1.5}
.cem-dlg.bib .dh{padding:0 4px 0 18px;font-size:15px}
.cem-dlg.bib .dh button{min-height:44px;min-width:44px}
.cem-dlg.bib .btn{min-height:44px;font-size:14px;font-weight:600;padding:10px 16px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center}
.cem-dlg.bib .btn.pri{background:var(--acc);border-color:transparent;color:#fff}
.cem-dlg.bib :is(button,summary):focus-visible,.cem-dlg.bib label.btn:focus-within{outline:2px solid var(--acc);outline-offset:2px}
.cem-dlg.bib .db{padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.cem-dlg.bib .db>*{flex-shrink:0}
.cem-dlg.bib .df{gap:10px;flex-wrap:wrap;padding:12px 18px}
.cem-dlg.bib .hint{margin:0}

.bib-passos{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:10px 14px;list-style:none;
  border-bottom:1px solid var(--line);background:var(--card)}
.bib-passos li{display:flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border-radius:999px;color:var(--mut);font-size:12.5px}
.bib-passos b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line);font-size:11.5px;font-variant-numeric:tabular-nums}
.bib-passos li.feito b{border-color:var(--green);color:var(--green)}
.bib-passos li[aria-current="step"]{color:var(--tx);background:color-mix(in srgb,var(--acc) 16%,transparent)}
.bib-passos li[aria-current="step"] b{background:var(--acc);border-color:var(--acc);color:#fff}
@media (max-width:640px){.bib-passos li:not([aria-current]) span{display:none}.bib-passos li:not([aria-current]){padding-right:4px}}

.bib-arm{margin:0;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card)}
.bib-arm.ok{box-shadow:inset 3px 0 0 var(--green)}
.bib-arm.falha{border-color:color-mix(in srgb,var(--red) 45%,transparent);box-shadow:inset 3px 0 0 var(--red);
  background:color-mix(in srgb,var(--red) 9%,var(--card2))}
.bib-arm.falha strong{display:block;color:#ff9d96}
.bib-arm.falha span{display:block;margin-top:4px;color:var(--mut);font-size:12.5px}

.bib-pasta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.bib-pasta .hint{flex:1 1 280px;max-width:62ch}
.bib-pasta label.btn{position:relative}
.bib-arquivo{position:absolute;inset:0;opacity:0;width:1px;height:1px;overflow:hidden}

.bib-grupos{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.bib-grupos li+li{border-top:1px solid var(--line)}
.bib-grupos label{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;min-height:44px;padding:4px 14px 4px 0;cursor:pointer}
.bib-grupos input[type=checkbox]{justify-self:center;width:18px;height:18px;margin:0;padding:0}
.bib-rot{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;min-width:0}
.bib-cam{font-family:var(--mono);font-size:12px;color:var(--mut)}
.bib-n{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.bib-grupos li.zero{box-shadow:inset 3px 0 0 var(--red);background:color-mix(in srgb,var(--red) 7%,transparent)}
.bib-grupos li.zero .bib-n{color:#ff9d96}

.bib-prog{display:flex;flex-direction:column;gap:8px}
.bib-prog progress{-webkit-appearance:none;appearance:none;width:100%;height:12px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);overflow:hidden}
.bib-prog progress::-webkit-progress-bar{background:var(--card)}
.bib-prog progress::-webkit-progress-value{background:var(--acc)}
.bib-prog progress::-moz-progress-bar{background:var(--acc)}
.bib-prog-num{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;font-variant-numeric:tabular-nums}
.bib-aberta{margin:0;font-weight:600}

.bib-totais{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0}
.bib-totais div{padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card)}
.bib-totais dt{color:var(--mut);font-size:12.5px}
.bib-totais dd{margin:2px 0 0;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.bib-totais .ok dd{color:var(--green)}
.bib-pulados{border:1px solid var(--line);border-radius:var(--radius-sm)}
.bib-pulados details+details{border-top:1px solid var(--line)}
.bib-pulados summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;cursor:pointer}
/* display:flex tira o triângulo nativo do summary: sem este marcador, nada
   diz que "Vazio 81" abre a lista. */
.bib-pulados summary::before{content:'▸';color:var(--mut)}
.bib-pulados details[open] summary::before{content:'▾'}
.bib-pulados summary .bib-n{margin-left:auto}
.bib-pulados details.falhou summary{box-shadow:inset 3px 0 0 var(--red)}
.bib-pulados ul{margin:0;padding:2px 14px 12px 30px;max-height:160px;overflow:auto;columns:2 170px;
  font-family:var(--mono);font-size:12.5px;color:var(--mut)}
/* Passos 4 e 5 (Task 9): o login que a sessão caída pede dentro da janela, e
   o respiro entre os blocos do relatório. */
.bib-login{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card)}
.bib-login .hint{flex:1 1 100%}
.bib-login label{display:flex;flex-direction:column;gap:4px;flex:1 1 180px;color:var(--mut);font-size:12.5px}
.cem-dlg.bib .bib-login input{min-height:44px;font-size:14px}
#bibRelatorio>*+*{margin-top:14px}
/* Por último: o [hidden] tem de vencer o display:flex/grid/inline-flex das
   regras acima (mesmo caso de .fld[hidden], base.css:203). */
.cem-dlg.bib [hidden]{display:none}