/* t85: Configurações do escritório em abas. Prefixo `.cf-`.

   ⚠️ Tokens: o projeto define APENAS --accent --accent-ink --accent-soft
   --display --green --ink --line --muted --paper --radius --s1..--s6
   --surface. Token inventado sem fallback vira currentColor e a borda sai
   preta sem a captura denunciar.

   ⚠️ Quem esconde o painel fechado é a regra GLOBAL de `style.css`,
   declarada uma vez só. Redeclarar aqui por seletor é o remendo que o teste
   do shell impede, e ele procura a string em QUALQUER folha. */

.cf-pagina{min-width:0;display:flex;flex-direction:column;gap:16px}
.cf-cabecalho{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.cf-cabecalho h1{margin:4px 0 6px;font-size:26px;letter-spacing:-.6px}
.cf-cabecalho .muted{margin:0;font-size:13px}
.cf-acoes-topo{display:flex;gap:10px;flex-wrap:wrap}
.cf-ultimo{margin:8px 0 0;font-size:12px;color:var(--muted)}

.cf-cartoes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cf-cartao{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px;min-width:0}
.cf-cartao>span{display:block;color:var(--muted);font-size:11px}
.cf-cartao strong{display:block;font-size:30px;font-weight:500;margin:10px 0 6px;letter-spacing:-1px;overflow-wrap:anywhere}
/* ⚠️ Cartão sem número não recebe zero grande: recebe a frase do que é
   verdade. Zero enorme parece defeito de carga. */
.cf-cartao strong.cf-frase{font-size:15px;letter-spacing:0;line-height:1.35;margin:8px 0 6px}
.cf-cartao small{display:block;color:var(--muted);font-size:11px;line-height:1.5}

.cf-abas{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.cf-aba{border:0;border-bottom:2px solid transparent;background:none;padding:10px 14px;font:inherit;
 font-size:13px;color:var(--muted);cursor:pointer;margin-bottom:-1px}
.cf-aba[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.cf-aba:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* O ponto de "não salvo" e o "!" de campo inválido: com a aba fechada, é a
   única pista de que há algo ali dentro esperando. */
.cf-sujo{color:var(--accent);font-weight:700;margin-left:6px}
.cf-erro-aba{color:#b42318;font-weight:700;margin-left:6px}

.cf-painel{padding:18px 0 0;min-width:0}
.cf-duas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.cf-campo{display:block;margin:0 0 14px}
.cf-campo input,.cf-campo select,.cf-campo textarea{display:block;width:100%;margin-top:6px;box-sizing:border-box}
.cf-campo input[type=color]{height:44px;padding:4px}
.cf-campo small{display:block;margin-top:4px;font-size:11px}
.cf-contador{color:var(--muted)}
.cf-contador-estourado{color:#b42318;font-weight:600}

.cf-consequencias{margin:0;padding-left:18px;color:var(--muted);font-size:12px;line-height:1.6}
.cf-consequencias li{margin-bottom:6px}
.cf-exemplo{margin:10px 0 0;font-size:13px}
.cf-exemplo strong{font-size:20px;letter-spacing:-.5px}
.cf-relogio{margin:12px 0 0;font-size:13px;color:var(--muted)}
.cf-relogio strong{font-size:22px;color:var(--ink);letter-spacing:-.5px}
.cf-amostras{margin:0 0 12px}
.cf-paleta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.cf-tom{width:28px;height:28px;border:1px solid var(--line);border-radius:6px;cursor:pointer;padding:0}
.cf-tom:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* A prévia usa a cor escolhida por variável LOCAL. Redefinir o token global
   de destaque pintaria o aplicativo inteiro antes de alguém salvar, e a
   pessoa veria a mudança valendo sem ter confirmado nada.
   ⚠️ O texto do botão é branco fixo aqui porque é branco fixo no produto
   (`.primary` em style.css): a prévia precisa mostrar o que vai acontecer,
   não a melhor combinação possível. */
.cf-previa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);
 border-radius:8px;padding:14px;background:var(--surface);margin-bottom:8px;
 /* ⚠️ O valor PADRÃO fica declarado aqui, e o JS o sobrescreve no atributo
    do elemento. Variável usada e nunca declarada em folha nenhuma vira
    `currentColor` na hora errada, e a prévia sairia preta sem a captura
    denunciar: é o que a varredura de folhas da t70 impede. */
 --cf-cor:var(--accent)}
.cf-previa-botao{background:var(--cf-cor);color:#fff;border:0;border-radius:6px;padding:9px 14px;font:inherit;font-size:13px}
.cf-previa-link{color:var(--cf-cor);font-size:13px;text-decoration:underline}
.cf-previa-badge{background:var(--cf-cor);color:#fff;font-size:11px;padding:3px 8px;border-radius:20px}
.cf-previa-foco{font-size:13px;padding:4px 8px;border-radius:4px;outline:2px solid var(--cf-cor);outline-offset:2px}
.cf-contraste{font-size:12px;margin:0 0 12px;line-height:1.5}
.cf-contraste-ok{color:var(--green)}
.cf-contraste-atencao{color:#8a6100}
.cf-contraste-ruim{color:#b42318;font-weight:600}
.cf-adotar{display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap}

/* O modelo de etapas: tabela à esquerda, editor à direita a partir de 1180px.
   ⚠️ Entre 900 e 1180px o editor desce e fica NO FLUXO, abaixo da tabela,
   nunca em painel fixo, que poderia cobrir o botão de salvar. */
.cf-etapas{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:1180px){.cf-etapas{grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr)}}
.cf-etapas-lista{min-width:0}
/* ⚠️ A altura é declarada AQUI, na própria caixa: `flex:1 1 0` sob pai que
   só tem `max-height` nasce com altura zero, e a tela fica vazia. */
.cf-rolagem{max-height:min(520px,calc(100vh - 380px));min-height:200px;overflow-y:auto;
 border:1px solid var(--line);border-radius:8px;min-inline-size:0;contain:layout paint}
.cf-tabela{width:100%;border-collapse:collapse;font-size:13px}
.cf-tabela th{position:sticky;top:0;background:var(--surface);text-align:left;font-size:11px;color:var(--muted);
 padding:10px;border-bottom:1px solid var(--line);z-index:1}
.cf-tabela td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.cf-tabela tr:last-child td{border-bottom:0}
.cf-tabela .cf-col-ordem{width:38px;color:var(--muted);font-variant-numeric:tabular-nums}
.cf-selecionada{background:var(--accent-soft)}
.cf-link{border:0;background:none;padding:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer;text-decoration:underline}
.cf-acoes-linha{white-space:nowrap;text-align:right}
.cf-icone{border:1px solid var(--line);background:var(--surface);border-radius:6px;width:30px;height:30px;
 cursor:pointer;font:inherit;line-height:1;margin-left:4px}
.cf-icone[disabled]{opacity:.4;cursor:not-allowed}
.cf-rodape-tabela{margin:8px 0 12px}
.cf-adicionar{margin-bottom:8px}
.cf-aviso-etapas:empty{display:none}
.cf-editor{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px;min-width:0}
.cf-editor h3{margin:0 0 14px;font-size:13px;color:var(--muted);letter-spacing:.4px}
.cf-editor-vazio{display:flex;align-items:center;justify-content:center;min-height:160px}
/* Em telas largas as duas partes convivem, então o "voltar" não existe. */
.cf-voltar{display:none}
.cf-vazio{border:1px dashed var(--line);border-radius:8px;padding:28px;text-align:center}
.cf-vazio strong{display:block;margin-bottom:6px}
.cf-vazio p{margin:0;color:var(--muted);font-size:13px}

.cf-conflito{margin-top:16px;border:1px solid var(--line);border-radius:8px;padding:16px;background:var(--surface)}
.cf-conflito h3{margin:0 0 10px;font-size:13px}
.cf-comparacao{width:100%;border-collapse:collapse;font-size:12px}
.cf-comparacao th,.cf-comparacao td{text-align:left;padding:8px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.cf-erro:empty{display:none}
.cf-so-celular{display:none}
.cf-oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ⚠️ MESTRE-DETALHE abaixo de 1180 px, que é onde a tabela e o editor deixam
   de caber lado a lado. Empilhados eles SOMAM: a aba media 3.425 px em 390 px
   e 1.912 px em 1024 px, pior que a tela antiga em um caso e perto no outro.
   Ou a lista, ou o editor. Quem manda é este CSS; o JS só declara em qual dos
   dois a pessoa está. */
@media (max-width:1179px){
 .cf-etapas[data-cf-modo=editor] .cf-etapas-lista{display:none}
 .cf-etapas[data-cf-modo=lista] .cf-etapas-editor{display:none}
 .cf-voltar{display:inline-block;margin-bottom:14px;min-height:44px}
 /* Nesta faixa os quatro cartões já cabem em duas colunas. */
 .cf-cartoes{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
 .cf-cartoes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cf-duas{grid-template-columns:minmax(0,1fr);gap:16px}
 .cf-cabecalho{flex-direction:column}
 .cf-acoes-topo{width:100%}
 .cf-acoes-topo button{flex:1 1 auto}
}
@media (max-width:600px){
 /* ⚠️ Quatro cartões empilhados custavam ~560 px antes do trabalho começar.
    Em duas colunas eles cabem, com o número menor para o código não quebrar. */
 .cf-cartoes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .cf-cartao{padding:12px}
 .cf-cartao strong{font-size:21px;margin:6px 0 4px}
 .cf-cartao strong.cf-frase{font-size:13px}
 /* ⚠️ No modo LISTA a caixa rola sozinha, e isso NÃO é caixa rolante dentro
    de página rolante: o editor está escondido, então a lista é a tela. No
    modo editor ela nem aparece. */
 .cf-rolagem{max-height:calc(100vh - 300px);min-height:140px}
 .cf-aba{min-height:44px;padding:12px 14px}
 .cf-icone{width:44px;height:44px}
 .cf-acoes-topo button{min-height:44px}
 /* O link do histórico e os tons da paleta também são alvos de toque. */
 .cf-ultimo .text-button{min-height:44px;padding:10px 0}
 .cf-tom{width:44px;height:44px}
 /* A tabela vira lista: sete colunas não cabem em 390px. */
 .cf-tabela thead{display:none}
 .cf-tabela,.cf-tabela tbody,.cf-tabela tr,.cf-tabela td{display:block;width:100%;box-sizing:border-box}
 .cf-tabela tr{border-bottom:1px solid var(--line);padding:9px 12px}
 .cf-tabela td.cf-so-celular{display:block}
 /* ⚠️ O nome da etapa é o que se toca para editar: 17 px de altura não é
    alvo de toque. Ele passa a ocupar a linha inteira do bloco. */
 .cf-tabela .cf-link{display:block;width:100%;min-height:44px;padding:12px 0;font-size:15px}
 .cf-tabela td[data-rotulo="Subtarefas"],.cf-tabela td[data-rotulo="Conferências"]{display:none}
 .cf-tabela tr:last-child{border-bottom:0}
 .cf-tabela td{border:0;padding:2px 0}
 .cf-tabela td::before{content:attr(data-rotulo) ": ";color:var(--muted);font-size:11px}
 .cf-tabela .cf-col-ordem{display:inline-block;width:auto;margin-right:8px}
 .cf-acoes-linha{text-align:left;padding-top:8px}
}