/* ficha-casca.css -- a casca nova da ficha de tipologia (redesenho de
   2026-09-22, spec docs/superpowers/specs/2026-09-22-ficha-tipologia-redesenho-design.md).
   Carregado DEPOIS de ficha.css: o que os dois declaram com a mesma
   especificidade, vence este. Consome só tokens do app (base.css :root) e os
   apelidos locais de ficha.css; NÃO declara token nenhum (a fumaça csst1 lê
   ficha.css e cem-dialogo.css e exige o mesmo conjunto). Valores fixos: o
   #0b0d10 do texto sobre o verde (spec §3.5), o #fff atrás do croqui
   (DESIGN.md, exceções) e as sombras rgba copiadas do .ctx de ficha.css.
   Verde como cor de ação é exceção registrada no DESIGN.md, só aqui dentro.
   Texto de chip e selo é sempre var(--tx): a cor vai na bolinha, na borda e
   no tingido -- verde como texto sobre o tema Claro não passa de 4,5:1.
   Alvo de toque 44px em todo botão, aba e item: obra, tablet, luva. */

/* 1. Barra superior (spec §3.1) */
#tool-ficha .titlebar{display:flex;align-items:center;gap:10px;height:48px;padding:0 8px 0 14px;flex:none;
  background:var(--card);border-bottom:1px solid var(--line);color:var(--tx)}
#tool-ficha .titlebar .marca-nome{font-weight:600;letter-spacing:.02em;white-space:nowrap}
#tool-ficha .titlebar .sep{width:1px;height:20px;background:var(--line);margin:0 4px}
#tool-ficha .titlebar .trilha{flex:1;min-width:0;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tool-ficha .chip-salvo{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;
  font-size:12px;font-weight:600;color:var(--tx);background:color-mix(in srgb, var(--green) 18%, transparent);white-space:nowrap}
#tool-ficha .chip-salvo::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--green)}
#tool-ficha .chip-salvo.sujo{background:color-mix(in srgb, var(--amber) 18%, transparent)}
#tool-ficha .chip-salvo.sujo::before{background:var(--amber)}

/* Botões da casca. `.ibtn` é o quadrado de ícone (44×44); os de texto têm
   44px de altura. O `.btn` de base.css não entra aqui de propósito. */
#tool-ficha .ibtn,#tool-ficha .btn-texto,#tool-ficha .btn-borda,#tool-ficha .btn-verde{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 14px;border:1px solid transparent;border-radius:var(--radius-sm);background:none;color:var(--tx);
  font:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap;transition:background-color 120ms}
#tool-ficha .ibtn{width:44px;padding:0;font-size:18px}
#tool-ficha .btn-texto{color:var(--mut)}
#tool-ficha .btn-borda{border-color:var(--line);background:var(--card)}
#tool-ficha .btn-verde{background:var(--green);border-color:var(--green);color:#0b0d10}
#tool-ficha .ibtn:hover,#tool-ficha .btn-texto:hover,#tool-ficha .btn-borda:hover{background:var(--card2);color:var(--tx)}
#tool-ficha .btn-verde:hover{background:color-mix(in srgb, var(--green) 85%, var(--tx))}
#tool-ficha .ibtn:disabled,#tool-ficha .btn-texto:disabled,#tool-ficha .btn-borda:disabled{opacity:.45;cursor:default}
#tool-ficha .btn-verde:disabled{background:var(--card2);border-color:var(--line);color:var(--mut);cursor:default}
#tool-ficha button:focus-visible,#tool-ficha [tabindex]:focus-visible,#tool-ficha summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  #tool-ficha .ibtn,#tool-ficha .btn-texto,#tool-ficha .btn-borda,#tool-ficha .btn-verde{transition:none}
}

/* 2. Cabeçalho (spec §3.2) */
#tool-ficha .cabecalho{flex:none;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line)}
#tool-ficha .cab-linha{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
#tool-ficha .cab-id{flex:1;min-width:240px}
#tool-ficha .cab-titulo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:44px}
#tool-ficha .cab-rotulo{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
#tool-ficha #fichaTitulo{margin:0;font:700 28px/1.1 var(--mono);color:var(--tx);letter-spacing:-.01em}
#tool-ficha .proj{margin:2px 0 0;color:var(--mut);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tool-ficha .selo{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;
  font-size:11.5px;font-weight:600;color:var(--tx);background:var(--card2);border:1px solid var(--line);white-space:nowrap}
#tool-ficha .selo::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--mut)}
#tool-ficha .selo[hidden]{display:none}
#tool-ficha .selo-verde{background:color-mix(in srgb, var(--green) 18%, transparent);border-color:color-mix(in srgb, var(--green) 45%, transparent)}
#tool-ficha .selo-verde::before{background:var(--green)}
#tool-ficha .selo-ambar{background:color-mix(in srgb, var(--amber) 18%, transparent);border-color:color-mix(in srgb, var(--amber) 45%, transparent)}
#tool-ficha .selo-ambar::before{background:var(--amber)}
#tool-ficha .selo-azul{background:color-mix(in srgb, var(--blue) 18%, transparent);border-color:color-mix(in srgb, var(--blue) 45%, transparent)}
#tool-ficha .selo-azul::before{background:var(--blue)}
/* .selo-cinza (status 40, Cancelada, e qualquer status desconhecido) é o .selo
   base: bolinha e borda na cor neutra. Existe como classe para fichaPintarSelo
   trocar sempre entre quatro nomes, sem regra própria. */
#tool-ficha #fichaBarra{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap}
#tool-ficha .mais{position:relative}
#tool-ficha .menu{position:absolute;right:0;top:calc(100% + 4px);z-index:70;min-width:260px;padding:4px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:0 12px 34px rgba(0,0,0,.32)}
#tool-ficha .menu[hidden]{display:none}
#tool-ficha .mi{display:block;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:6px;background:none;color:var(--tx);
  font:inherit;font-size:13px;text-align:left;cursor:pointer}
#tool-ficha .mi:hover{background:var(--card2)}
#tool-ficha .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 3. Abas e seletor (spec §3.3) */
#tool-ficha .ribbon{display:flex;flex-direction:row;align-items:center;gap:16px;flex:none;padding:0 16px;
  background:var(--card);border-bottom:1px solid var(--line)}
#tool-ficha .ribbon .grupos{display:flex;gap:4px;flex:none}
#tool-ficha .gbtn{display:inline-flex;flex-direction:row;align-items:center;gap:8px;min-width:0;min-height:44px;padding:0 12px;
  border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--mut);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
#tool-ficha .gbtn:hover{background:var(--card2);color:var(--tx)}
#tool-ficha .gbtn.active{background:none;border-color:var(--green);color:var(--tx)}
#tool-ficha .cnt{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;margin:0;border-radius:999px;
  background:var(--card2);border:1px solid var(--line);color:var(--mut);font-size:11px;font-weight:600}
#tool-ficha .gbtn.active .cnt,#tool-ficha .tab.active .cnt{color:var(--tx)}
#tool-ficha .seletores{display:flex;align-items:center;margin-left:auto;min-width:0;overflow-x:auto}
#tool-ficha .tabs{display:none;gap:2px;padding:3px;margin:6px 0;background:var(--card2);border:1px solid var(--line);border-radius:var(--radius-sm);flex:none;overflow:visible}
#tool-ficha .tabs.active{display:flex}
#tool-ficha .tab{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border:1px solid transparent;border-radius:6px;
  background:none;color:var(--mut);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
#tool-ficha .tab:hover{color:var(--tx)}
#tool-ficha .tab.active{background:var(--card);border-color:var(--line);color:var(--tx)}
#tool-ficha .seletores .tab{min-height:44px}
@media (max-width:900px){
  #tool-ficha .ribbon{flex-wrap:wrap;gap:0}
  #tool-ficha .seletores{margin-left:0;width:100%}
}

/* 4. Cartões e campos (spec §3.4) */
#tool-ficha .content{background:var(--page)}
#tool-ficha .panel{padding:16px}
#tool-ficha .cartao{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:0 16px 16px;margin-bottom:16px}
#tool-ficha .cartao > header{display:flex;align-items:center;gap:10px;min-height:52px;margin:0 -16px 14px;padding:0 16px;border-bottom:1px solid var(--line)}
#tool-ficha .cartao > header h3{margin:0;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--tx)}
#tool-ficha .num{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 6px;border-radius:6px;
  background:var(--card2);border:1px solid var(--line);color:var(--mut);font:600 12px var(--mono)}
#tool-ficha .modelo-grade{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1100px){#tool-ficha .modelo-grade{grid-template-columns:minmax(0,1fr)}}
#tool-ficha .campos{display:grid;gap:12px 14px;margin-bottom:12px}
#tool-ficha .campos.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
#tool-ficha .campos.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
#tool-ficha .campos .span4{grid-column:1 / -1}
@media (max-width:700px){#tool-ficha .campos.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
#tool-ficha .fld{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:0 0 12px}
#tool-ficha .campos .fld{margin:0}
#tool-ficha .fld label,#tool-ficha .fld .rotulo{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
#tool-ficha .opc{margin-left:auto;color:var(--mut);font-size:10.5px;font-weight:500;text-transform:none;letter-spacing:0}
#tool-ficha .fld input,#tool-ficha .fld select,#tool-ficha .fld textarea{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--card2);color:var(--tx);font-size:13px}
#tool-ficha .fld input[readonly]{color:var(--mut)}
#tool-ficha .fld input.mono{font-family:var(--mono)}
#tool-ficha .fld input:focus-visible,#tool-ficha .fld select:focus-visible,#tool-ficha .fld textarea:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
#tool-ficha .checks.chips{flex-direction:row;flex-wrap:wrap;gap:8px}
#tool-ficha .checks.chips label{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--card2);
  color:var(--tx);font-size:12.5px;font-weight:600;cursor:pointer}
#tool-ficha .checks.chips label:has(input:checked){border-color:var(--green);background:color-mix(in srgb, var(--green) 18%, transparent)}
#tool-ficha .checks.chips input{width:18px;height:18px;margin:0;accent-color:var(--green)}
#tool-ficha .seg-mini{margin:0 0 12px}
#tool-ficha .seg-mini .tab{min-height:44px;padding:0 10px}
#tool-ficha .zona-croqui{position:relative;display:flex;align-items:center;justify-content:center;height:320px;margin-bottom:12px;
  border:2px dashed var(--line);border-radius:var(--radius-sm);background:var(--card2);overflow:hidden;cursor:pointer}
#tool-ficha .zona-croqui.arrastando{border-color:var(--green);background:color-mix(in srgb, var(--green) 10%, transparent)}
#tool-ficha .zona-croqui img{max-width:100%;max-height:100%;object-fit:contain;display:none;background:#fff;border-radius:4px}
#tool-ficha .ph{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;color:var(--mut);font-size:12.5px;text-align:center}
#tool-ficha .ph svg{width:36px;height:36px;color:var(--mut);opacity:.7}
#tool-ficha .ph b{color:var(--tx);font-weight:600}
#tool-ficha .croqui-acoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
#tool-ficha .nota{margin-left:auto;color:var(--mut);font-size:12px}
#tool-ficha .uso{display:flex;align-items:center;gap:16px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card2)}
#tool-ficha .uso-num{min-width:48px;text-align:center;font:700 32px/1 var(--mono);color:var(--tx)}
#tool-ficha .uso-texto{display:flex;flex-direction:column;gap:2px;min-width:0}
#tool-ficha .uso-rotulo{color:var(--mut);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
#tool-ficha .uso-frase{margin:0;color:var(--tx)}
#tool-ficha .link{align-self:flex-start;min-height:44px;padding:0;border:0;background:none;color:var(--tx);font:inherit;font-size:13px;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#tool-ficha .link:disabled{color:var(--mut);text-decoration:none;cursor:default}
#tool-ficha #fichaTeste{flex:none;margin:0 16px 16px;padding:0;border-top:1px solid var(--line);background:var(--card)}
#tool-ficha #fichaTeste summary{min-height:56px;padding:0 16px;gap:12px;color:var(--tx)}
#tool-ficha #fichaTeste summary::before,#tool-ficha #fichaTeste[open] summary::before{content:none;margin:0}
#tool-ficha #fichaTeste .teste-tit{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
#tool-ficha #fichaTeste .teste-tit b{color:var(--tx);font-size:14px}
#tool-ficha #fichaTeste .teste-tit small{color:var(--mut);font-weight:400;font-size:12px;white-space:normal}
#tool-ficha #fichaTeste .teste-abrir{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);
  border-radius:var(--radius-sm);color:var(--tx);font-size:13px;font-weight:600}
#tool-ficha #fichaTeste .teste-abrir::before{content:'Abrir teste'}
#tool-ficha #fichaTeste[open] .teste-abrir::before{content:'Fechar teste'}
#tool-ficha .fichaTesteCorpo{padding:4px 16px 16px}

/* 6. Grades (spec §4): o host [data-grade] vira cartão; o cabeçalho, a
   busca, o seletor de colunas, a barra fixa e o rodapé são de
   ficha-grades.js (marcação) e ficha-busca.js (comportamento). */
#tool-ficha .grade-cartao{padding:0;margin:0;display:flex;flex-direction:column;min-height:0}
#tool-ficha .panel.flat.active > [data-grade]{margin:16px}
/* No painel MOB (não-flat), `.grade-cartao{margin:0}` vence `.cartao{margin-
   bottom:16px}` por especificidade igual + ordem -- as duas grades (Fabri-
   cação/Instalação) ficam coladas sem isto. */
#tool-ficha .panel:not(.flat) > .grade-cartao{margin-bottom:16px}
/* `min-height:220px`, não 0 (achado da mesma rodada de conserto do
   .navbar acima) -- mesmo seletor de ficha.css:49 (mesma especificidade,
   `#tool-ficha` + 4 classes/atributo), só que carregado DEPOIS: precisa
   vencer o `min-height:0` de lá, e uma regra menos específica (ex.:
   `.grade-cartao`) perde por especificidade, não por ordem. Sem piso, o
   cartão da grade encolhe para caber no que sobra de `.content` depois do
   `#fichaTeste` aberto -- numa aba com poucas linhas (opções de montagem,
   variáveis) e o painel de teste ocupando o resto, o que sobra é menor
   que o cabeçalho (~52px) + a barra fixa (~57px) somados, e o cartão vira
   mais baixo que o próprio cabeçalho+barra, que então pintam por cima do
   QUE VEM DEPOIS dele em `.content` (overflow:visible não corta -- só
   empurra o problema para o vizinho, e o achado foi exatamente esse: os
   botões da barra clicavam em cima do `<b>` do `#fichaTeste`, não da
   grade). O piso garante cabeçalho + barra + uma linha ou duas de tabela
   sempre visíveis; grade com muitas linhas (perfis) já passa disso de
   sobra, o piso não pesa. */
#tool-ficha .panel.flat.active > [data-grade]{min-height:220px}
#tool-ficha .grade-cartao > .grade-cab{margin:0;flex:none;flex-wrap:wrap;gap:10px;padding:8px 16px}
#tool-ficha .grade-acoes{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;position:relative}
#tool-ficha [data-busca]{min-height:40px;width:240px;max-width:100%;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--card2);color:var(--tx);font-size:13px}
#tool-ficha [data-busca]:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
#tool-ficha [data-colunas]{min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card2);
  color:var(--tx);font-size:13px;font-weight:600;cursor:pointer}
#tool-ficha [data-colunas][aria-expanded="true"]{border-color:var(--acc)}
#tool-ficha .btn-verde-borda{min-height:44px;padding:0 14px;border:1px solid var(--green);border-radius:var(--radius-sm);background:transparent;
  color:var(--tx);font-size:13px;font-weight:600;cursor:pointer}
#tool-ficha .btn-verde-borda:hover{background:color-mix(in srgb, var(--green) 18%, transparent)}
#tool-ficha .grade-cab button:focus-visible,#tool-ficha .navbar button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
#tool-ficha .aviso-leitura,#tool-ficha .aviso-sem-formula{margin:8px 16px}
#tool-ficha .grade-cartao .gridwrap{border:0;border-top:1px solid var(--line)}
#tool-ficha .grade-vazia{margin:0;padding:24px 16px;color:var(--mut);text-align:center}
#tool-ficha .grade-vazia[hidden]{display:none}
#tool-ficha tr[hidden],#tool-ficha th[hidden],#tool-ficha td[hidden]{display:none}
#tool-ficha thead th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;border-right:0;padding:8px}
#tool-ficha tbody td{border-right:0}
#tool-ficha tbody tr{height:36px}
#tool-ficha tbody tr:nth-child(even) td{background:var(--zebra)}
#tool-ficha tbody tr.sel td{background:var(--sel)}
#tool-ficha tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--green)}
#tool-ficha td[data-col="codigo"] input,#tool-ficha td[data-col="dim"] input,#tool-ficha td[data-col="corte"] input,
#tool-ficha td[data-col="tamanho"] input,#tool-ficha td[data-col="quantidade"] input,#tool-ficha td[data-col="minimo"] input,
#tool-ficha td[data-col="maximo"] input,#tool-ficha td[data-col="valorInicial"] input,#tool-ficha td[data-col="largura"] input,
#tool-ficha td[data-col="altura"] input,#tool-ficha td[data-col="folhas"] input,#tool-ficha td[data-da]{font-family:var(--mono)}
#tool-ficha tbody td input.etiqueta{text-align:center;font-family:var(--mono);background:var(--card2);border:1px solid var(--line);border-radius:4px}
/* `position:sticky` foi tentado e descartado (rodada de conserto do Task 5,
   achado no ft36/ft41/ft46): quando o cartão fica mais baixo que o
   `.content` que o envolve (grade com poucas linhas, ou viewport baixo,
   como o 1366×768 que boa parte da bateria usa), o navbar gruda no pé do
   `.content` inteiro -- não no pé do CARTÃO -- e sobe por cima do
   cabeçalho, cobrindo o botão "+ Novo". `.gridwrap` já rola por conta
   própria (overflow:auto, ficha.css:64); o navbar, `flex:none` no MESMO
   flex column do cartão, já fica logo abaixo dele sem precisar de sticky. */
#tool-ficha .navbar{flex:none;display:flex;align-items:center;gap:4px;min-height:56px;padding:6px 12px;
  background:var(--card);border:0;border-top:1px solid var(--line);flex-wrap:wrap}
#tool-ficha .navbar button{min-width:44px;min-height:44px;padding:0 10px;border:1px solid transparent;border-radius:var(--radius-sm);
  background:transparent;color:var(--tx);font-size:15px;cursor:pointer}
#tool-ficha .navbar button:hover{background:var(--card2);border-color:var(--line)}
#tool-ficha .navbar button.perigo{color:color-mix(in srgb, var(--red) 82%, var(--tx));font-size:13px;font-weight:600}
#tool-ficha .sel-chip{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;margin-right:8px;border:1px solid var(--line);border-radius:999px;
  color:var(--mut);font-size:11px;font-weight:600;white-space:nowrap}
#tool-ficha .sel-chip.com-linha{border-color:var(--green);background:color-mix(in srgb, var(--green) 18%, transparent);color:var(--tx);font-size:12px}
#tool-ficha .gridfoot{flex:none;display:flex;align-items:center;min-height:44px;padding:0 16px;border:0;border-top:1px solid var(--line);background:var(--card)}
#tool-ficha .rodape-info{margin-left:auto;color:var(--mut);font-size:12px;white-space:nowrap}
#tool-ficha .popover{position:absolute;right:0;top:calc(100% + 4px);z-index:70;min-width:240px;max-height:60vh;overflow:auto;padding:4px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:0 12px 34px rgba(0,0,0,.32)}
#tool-ficha .pop-item{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:6px;color:var(--tx);font-size:13px;cursor:pointer}
#tool-ficha .pop-item:hover{background:var(--card2)}
#tool-ficha .pop-item:focus-within{outline:2px solid var(--acc);outline-offset:-2px}
#tool-ficha .pop-item input{width:18px;height:18px;margin:0;accent-color:var(--green)}
#tool-ficha .pop-vazia{margin-left:auto;color:var(--mut);font-size:11px}