/* Réplica da janela de ficha de tipologia do CEM (Cadastro de Esquadria).
   Copiado de `Central-de-Ferramentas/Cadastro de Esquadria.html`, linhas 9-181
   do bloco <style> original. Duas mudanças mecânicas: cada seletor de topo
   ganhou o prefixo `#tool-ficha ` (para não vazar nas outras telas do app),
   e `data-grid` virou `data-grade`. As variáveis do protótipo (--surface-1 e
   companhia) não existem em css/base.css (o app usa --bg/--card/--tx etc.),
   então ficam declaradas aqui dentro de #tool-ficha, junto com o que no
   protótipo era `html,body{...}` — aqui vira o próprio #tool-ficha, que
   ocupa a janela toda (position:fixed;inset:0), no mesmo padrão que
   #catVisualizador em catalogos.css (z-index 60, acima do .sidebar). */
#tool-ficha {
    /* Redesenho de 2026-09-22 (spec §2): os dezoito nomes locais do protótipo
       continuam existindo -- todo o CSS abaixo os usa -- mas passam a APONTAR
       para os tokens do app (base.css :root), então a ficha troca de tema com
       o app (JR Projects, Claro, Escuro) em vez de seguir o claro/escuro do
       sistema operacional; o bloco prefers-color-scheme saiu por isso. A
       fumaça csst1 exige este bloco IDÊNTICO ao de cem-dialogo.css: mudar um,
       mudar o outro. */
    --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);

    position:fixed;inset:0;z-index:60;margin:0;
    background:var(--page);color:var(--text-primary);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:12.5px;line-height:1.4;display:flex;flex-direction:column;overflow:hidden}
#tool-ficha[hidden]{display:none}
  #tool-ficha *{box-sizing:border-box}
  #tool-ficha input,#tool-ficha select,#tool-ficha button,#tool-ficha textarea{font-family:inherit;font-size:12.5px}
  #tool-ficha .toolbar{display:flex;align-items:center;gap:3px;padding:5px 12px;background:var(--surface-1);
           border-bottom:1px solid var(--border);flex:none;flex-wrap:wrap}
  #tool-ficha .tbtn{border:1px solid transparent;background:none;color:var(--text-secondary);border-radius:6px;
        padding:4px 7px;cursor:pointer;font-size:14px;line-height:1}
  #tool-ficha .tbtn:hover{background:var(--head);border-color:var(--border);color:var(--text-primary)}
  #tool-ficha .tbtn.txt{font-size:12.5px}
  #tool-ficha .sep{width:1px;height:20px;background:var(--border);margin:0 5px}
  #tool-ficha .spacer{flex:1}

  #tool-ficha .content{flex:1;overflow:auto;background:var(--page);display:flex;flex-direction:column;min-height:0}
  #tool-ficha .panel{display:none;padding:12px 14px}
  #tool-ficha .panel.active{display:block}
  #tool-ficha .panel.flat{padding:0}
  /* Grades de composição ocupam TODA a altura livre: com altura fixa a tela
     mostrava só metade das linhas mesmo sobrando espaço embaixo. */
  #tool-ficha .panel.flat.active{display:flex;flex-direction:column;flex:1;min-height:0}
  #tool-ficha .panel.flat.active > [data-grade]{display:flex;flex-direction:column;flex:1;min-height:0}
  #tool-ficha .panel.flat.active .gridwrap{flex:1;min-height:0;max-height:none}

  #tool-ficha .row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
  #tool-ficha fieldset{border:1px solid var(--border);border-radius:8px;margin:0 0 10px;padding:8px 12px 10px;background:var(--group)}
  #tool-ficha legend{color:var(--text-secondary);font-weight:600;padding:0 6px}
  #tool-ficha .checks{display:flex;flex-direction:column;gap:4px}
  #tool-ficha .checks label{display:flex;align-items:center;gap:6px;color:var(--text-secondary)}
  #tool-ficha textarea{width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:6px;
           background:var(--surface-2);color:var(--text-primary);resize:vertical}
  #tool-ficha .info,#tool-ficha .aviso-sem-formula{display:flex;gap:8px;background:var(--info);border:1px solid var(--info-border);
        border-radius:8px;padding:8px 10px;max-width:520px;color:var(--text-secondary)}
  #tool-ficha .info .ic{flex:none;font-size:15px;line-height:1.1}

  /* grades editáveis */
  #tool-ficha .gridwrap{overflow:auto;border:1px solid var(--border);border-radius:0}
  #tool-ficha table{border-collapse:collapse;width:100%;white-space:nowrap}
  #tool-ficha 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)}
  #tool-ficha tbody td{padding:0;border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);vertical-align:middle}
  #tool-ficha tbody td.rownum{position:relative;padding:3px 8px;background:var(--head);color:var(--text-muted);text-align:right;width:34px}
  /* Tarefa 16 (marcador de linha incompleta): position:absolute tira o ponto do
     fluxo do <td>, então ele nunca soma à largura fixa de 34px nem empurra o
     número da linha. Cor vem de --danger (já declarada, não usada em nenhum
     outro lugar deste arquivo) -- mesmo semantismo de "falha/inválido" do
     DESIGN.md, sem depender só de cor: o title acompanha no HTML. */
  #tool-ficha .marcador-incompleta{position:absolute;left:1px;top:50%;transform:translateY(-50%);
        color:var(--danger);font-size:9px;line-height:1}
  #tool-ficha tbody tr.sel td{background:var(--sel)}
  #tool-ficha tbody td input,#tool-ficha tbody td select{width:100%;border:none;background:none;color:inherit;padding:4px 7px;outline:none}
  #tool-ficha tbody td input:focus,#tool-ficha tbody td select:focus{background:var(--surface-2);outline:2px solid var(--accent);outline-offset:-2px}
  #tool-ficha tbody td.ro{padding:4px 7px;color:var(--text-secondary)}
  #tool-ficha tbody td.ico{padding:2px;text-align:center;width:64px}
  #tool-ficha tbody td.ico img{height:34px;max-width:60px;object-fit:contain;display:none;background:#fff;border-radius:2px}
  #tool-ficha tbody td.chk{text-align:center}
  #tool-ficha .navbar,#tool-ficha .gridfoot{display:flex;align-items:center;gap:2px;padding:4px 8px;background:var(--head);border:1px solid var(--border);border-top:none}
  #tool-ficha .navbar button{border:1px solid transparent;background:none;color:var(--text-secondary);cursor:pointer;
                 border-radius:4px;padding:2px 6px;font-size:12px}
  #tool-ficha .navbar button:hover{background:var(--surface-2);border-color:var(--border);color:var(--text-primary)}
  #tool-ficha .navbar .cnt,#tool-ficha .gridfoot .cnt{margin-left:8px;color:var(--text-muted);font-size:11.5px}

  /* Tarefa 11: grade travada (dado do PDF, sem edição aqui) -- fundo
     riscado com o mesmo tom que `fieldset`/`.gridtitle` já usam para "área
     inerte" (--group), campo sem contorno e com texto apagado (--text-muted,
     igual ao `.navbar .cnt` acima), e o aviso que explica por quê. */
  #tool-ficha [data-somente-leitura="1"] table{background:var(--group)}
  #tool-ficha [data-somente-leitura="1"] input,#tool-ficha [data-somente-leitura="1"] select{border:0;background:transparent;color:var(--text-muted)}
  #tool-ficha .aviso-leitura{margin:0 0 6px;font-size:12px;color:var(--text-muted)}

  #tool-ficha .gridtitle{padding:5px 10px;background:var(--group);border:1px solid var(--border);
             border-bottom:none;color:var(--text-secondary);font-weight:600}

  /* menu de contexto */
  #tool-ficha .ctx{position:fixed;z-index:900;min-width:290px;background:var(--surface-2);border:1px solid var(--border);
       border-radius:6px;box-shadow:0 12px 34px rgba(0,0,0,.32);padding:4px 0;display:none}
  #tool-ficha .ctx.show{display:block}
  #tool-ficha .ctx .mi{display:flex;justify-content:space-between;gap:24px;padding:4px 14px;cursor:pointer;color:var(--text-primary)}
  #tool-ficha .ctx .mi:hover{background:var(--sel);color:var(--sel-text)}
  #tool-ficha .ctx .mi.off{color:var(--text-muted);cursor:default}
  #tool-ficha .ctx .mi.off:hover{background:none;color:var(--text-muted)}
  #tool-ficha .ctx .mi .k{color:var(--text-muted);font-size:11.5px}
  #tool-ficha .ctx .hr{height:1px;background:var(--border);margin:4px 0}

  /* diálogos (o de verdade é injetado por cem-dialogo.js/.css, fora de
     #tool-ficha — estes seletores ficam inertes aqui, copiados por
     completude do bloco original) */
  #tool-ficha .back{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:800;display:none}
  #tool-ficha .back.show{display:block}
  #tool-ficha .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}
  #tool-ficha .dlg.show{display:flex}
  #tool-ficha .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}
  #tool-ficha .dlg .dh button{background:none;border:none;color:#fff;font-size:15px;cursor:pointer}
  #tool-ficha .dlg .db{padding:12px 14px;overflow:auto}
  #tool-ficha .dlg .df{display:flex;justify-content:flex-end;gap:8px;padding:9px 14px;border-top:1px solid var(--border)}
  #tool-ficha .btn{border:1px solid var(--border);background:var(--surface-2);color:var(--text-primary);
       border-radius:6px;padding:5px 16px;cursor:pointer}
  #tool-ficha .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
  #tool-ficha .filelist{height:290px;overflow:auto;border:1px solid var(--border);border-radius:6px;background:var(--surface-2)}
  #tool-ficha .filelist div{padding:2px 8px;cursor:pointer}
  #tool-ficha .filelist div.sel{background:var(--sel);color:var(--sel-text)}

  /* janela "Opções de Montagem" (o F5 do CEM): painel fixo à esquerda + 3 abas */
  #tool-ficha .cw{display:flex;flex:1;min-height:0}
  #tool-ficha .cw .esq{flex:0 0 252px;overflow:auto;padding:10px;background:var(--group);border-right:1px solid var(--border)}
  #tool-ficha .cw .esq .sec{margin-top:10px;padding-top:6px;border-top:1px solid var(--border);color:var(--text-secondary);font-weight:600}
  #tool-ficha .cw .dir{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
  #tool-ficha .ctabs{display:flex;gap:2px;padding:6px 10px 0;background:var(--surface-1);border-bottom:1px solid var(--border);flex:none}
  #tool-ficha .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}
  #tool-ficha .ctab.active{background:var(--surface-2);color:var(--text-primary);font-weight:600}
  #tool-ficha .cpane{display:none;flex:1;min-height:0;overflow:auto;padding:10px 12px}
  #tool-ficha .cpane.active{display:block}
  #tool-ficha .cpane.split.active{display:flex;padding:0}
  #tool-ficha .opclist{flex:0 0 47%;min-width:0;overflow:auto;border-right:1px solid var(--border)}
  #tool-ficha .opclist table{white-space:nowrap;width:100%}
  #tool-ficha .opclist td{padding:3px 8px;cursor:pointer;border-bottom:1px solid var(--grid)}
  #tool-ficha .opclist td.v{color:var(--text-secondary);border-left:1px solid var(--grid)}
  #tool-ficha .opclist tr.sel td{background:var(--sel);color:var(--sel-text)}
  #tool-ficha .opcdet{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;padding:9px 11px;overflow:auto}
  #tool-ficha .opcdet .alts label{display:flex;align-items:center;gap:7px;padding:2px 0;color:var(--text-secondary)}
  #tool-ficha .atencao{flex:none;padding:7px 12px;border-top:1px solid var(--border);background:var(--info);
           color:var(--text-secondary);font-size:11.5px}

  #tool-ficha .statusbar{flex:none;display:flex;gap:16px;padding:5px 12px;background:var(--head);
             border-top:1px solid var(--border);color:var(--text-muted);font-size:11.5px}
  #tool-ficha .toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(20px);background:#111;color:#fff;
         padding:8px 16px;border-radius:8px;opacity:0;transition:.2s;pointer-events:none;z-index:950}
  #tool-ficha .toast.show{opacity:.95;transform:translateX(-50%) translateY(0)}

  /* Tarefa 17: painel de teste de cálculo. `flex:none` no <details> é o que
     mantém `.content` (flex:1, acima) dono do espaço que sobra -- sem isto o
     painel cresceria e empurraria a grade para fora da vista. Mesmos tokens
     do resto do arquivo, nenhuma cor nova.

     Alvo de toque conta aqui: ferramenta usada em obra, no tablet, de luva
     (brief da tarefa) -- por isso `summary`, o botão Calcular e as entradas
     do painel ganham geometria maior que o resto de `#tool-ficha` (campos de
     grade, ali, continuam do tamanho que já tinham: só o QUE é novo cresce,
     não a tela toda). */
  #tool-ficha #fichaTeste{flex:none;border-top:1px solid var(--border);background:var(--surface-1)}
  #tool-ficha #fichaTeste summary{padding:10px 14px;min-height:24px;display:flex;align-items:center;
        cursor:pointer;font-weight:600;color:var(--text-secondary);list-style:none;user-select:none}
  #tool-ficha #fichaTeste summary::-webkit-details-marker{display:none}
  #tool-ficha #fichaTeste summary::before{content:'▸';margin-right:8px;font-size:11px}
  #tool-ficha #fichaTeste[open] summary::before{content:'▾'}
  #tool-ficha #fichaTeste summary:hover{background:var(--head);color:var(--text-primary)}
  #tool-ficha .fichaTesteCorpo{padding:4px 14px 14px;max-height:46vh;overflow:auto;border-top:1px solid var(--border)}
  #tool-ficha #fichaTeste .fld input{min-height:40px;padding:8px 10px;font-size:14px}
  #tool-ficha #fichaTeste .fld label{font-size:12.5px}
  #tool-ficha #fichaTesteOpcoes{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px}
  #tool-ficha #fichaTesteCalcular{min-height:40px;padding:8px 20px;font-size:13.5px;font-weight:600;margin-bottom:10px}
  #tool-ficha #fichaTesteSaida table{white-space:normal}

  /* Entrega C2: aba Condições de Verificação. Monoespaçada e sem quebra, para
     a linha N da tela ser a linha N da regra (a lista abaixo aponta por
     número). Botão de 44px e checkbox de 22px: obra, tablet, luva. */
  #tool-ficha .ficha-cond{max-width:900px}
  #tool-ficha .ficha-cond-texto label{display:block;color:var(--text-secondary);margin-bottom:4px}
  #tool-ficha #fichaCondTexto{font-family:var(--mono);font-size:13px;line-height:1.5;white-space:pre;overflow:auto;min-height:44px}
  #tool-ficha .ficha-cond .checks{margin:8px 0}
  #tool-ficha .ficha-cond .checks label{min-height:44px;cursor:pointer}
  #tool-ficha .ficha-cond input[type=checkbox]{width:22px;height:22px}
  /* [hidden] TEM de vencer o display:flex de `.info` (mesmo caso de base.css:199-203). */
  #tool-ficha #fichaCondNaoEntendidas{flex-direction:column;max-width:none;margin-bottom:10px}
  #tool-ficha #fichaCondNaoEntendidas[hidden]{display:none}
  #tool-ficha #fichaCondNaoEntendidasResumo{margin:0 0 4px;font-weight:600}
  #tool-ficha .ficha-cond-linha{display:block;width:100%;text-align:left;min-height:44px;padding:8px 12px;margin-top:4px;
        border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text-primary);
        font-family:var(--mono);font-size:12.5px;cursor:pointer;white-space:pre;overflow-x:auto}
  #tool-ficha .ficha-cond-linha:hover{background:var(--head)}
  #tool-ficha .ficha-cond-linha:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  #tool-ficha .ficha-limites{border-collapse:collapse;width:100%;margin-bottom:8px}
  #tool-ficha .ficha-limites th{text-align:left;color:var(--text-secondary);font-weight:600;padding:4px 8px 4px 0;white-space:nowrap}
  #tool-ficha .ficha-limites td{padding:4px 8px 4px 0}
  #tool-ficha .ficha-limites input{min-height:44px;padding:6px 8px;border:1px solid var(--border);border-radius:6px;
        background:var(--surface-2);color:var(--text-primary);width:100%;box-sizing:border-box}
  #tool-ficha .ficha-limites input[type=number]{width:120px}

  /* Entrega C2: painel de teste com <select> nas opções, variáveis de fora e
     a caixa das regras. `.fld[hidden]` TEM de vencer o display:flex de
     `#tool-ficha .fld` (ficha-casca.css:115) -- base.css:203 perde por especificidade. */
  #tool-ficha #fichaTeste .fld input,#tool-ficha #fichaTeste .fld select{min-height:44px;padding:8px 10px;font-size:14px}
  #tool-ficha #fichaTeste .fld[hidden]{display:none}
  #tool-ficha #fichaTesteExternas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px}
  #tool-ficha .ficha-regras-aviso{max-width:900px;margin-bottom:10px}
  #tool-ficha .ficha-regras-aviso p{margin:0 0 4px}
  #tool-ficha .ficha-regras-impedido{color:color-mix(in srgb, var(--danger) 82%, var(--tx));font-weight:600}