/* Tela fácil nas telas PÚBLICAS autenticadas (renderizarTelaFacil com 'publico' => true). Mesmas regras .tf-* de assets/admin-marca.css
   (que só o painel carrega); aqui só o necessário, com contraste AAA (7:1) e foco visível. Carregado pelo próprio componente. */
.tf-cab{margin:0 0 12px}
.tf-como{margin:0 0 12px}
.tf-como-painel{background:#fff; border:1px solid #cbd5e1; border-radius:16px; padding:16px; margin:10px 0 12px}
.tf-como-painel[hidden]{display:none}
.tf-passos{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:12px; list-style:none; margin:10px 0 0; padding:0}
.tf-passos li{display:flex; gap:10px; min-width:0}
.tf-passos b{flex:none; width:28px; height:28px; border-radius:50%; background:#ccfbf1; color:#134e4a; display:grid; place-items:center}
.tf-proximo{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; border:1px solid #fecaca; background:linear-gradient(90deg,#fff1f2,#fff); border-radius:16px; padding:18px 20px; margin:12px 0}
.tf-proximo--info{border-color:#99f6e4; background:linear-gradient(90deg,#f0fdfa,#fff)}
.tf-proximo small{display:block; font-weight:700; color:#7f1d1d; text-transform:uppercase; letter-spacing:.06em}
.tf-proximo--info small{color:#134e4a}
.tf-proximo strong{display:block; font-size:1.1rem; color:#0f172a}
.tf-proximo span{color:#334155}
.tf-progresso{background:#fff; border:1px solid #cbd5e1; border-radius:16px; padding:16px; margin:12px 0}
.tf-progresso-topo{display:flex; justify-content:space-between; gap:8px}
.tf-pct{font-weight:700; color:#134e4a}
.tf-barra{display:flex; height:14px; border-radius:999px; overflow:hidden; background:#f1f5f9; margin:10px 0 8px}
.tf-leg{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.85rem}
.tf-leg i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px}
.tf-seg--ok{background:#16a34a}.tf-seg--info{background:#3b82f6}.tf-seg--erro{background:#dc2626}.tf-seg--aviso{background:#d97706}.tf-seg--neutro{background:#cbd5e1}
.tf-filtros{margin:12px 0}
.tf-filtros-form{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px}
.tf-filtros-form .input-label{margin:0}
.tf-filtros-form .input-ds{width:auto; min-width:0; flex:0 1 180px}
.tf-filtros-form input[type=search]{flex:1 1 220px}
.tf-lista-titulo{font-size:1.05rem; margin:16px 0 8px}
.tf-lista{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.tf-item{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; background:#fff; border:1px solid #cbd5e1; border-left:5px solid #94a3b8; border-radius:14px; padding:12px 16px; min-width:0}
.tf-item--erro{border-left-color:#dc2626}.tf-item--aviso{border-left-color:#d97706}.tf-item--info{border-left-color:#3b82f6}.tf-item--ok{border-left-color:#16a34a}
.tf-item-corpo{display:grid; gap:4px; min-width:0; flex:1 1 280px}
.tf-item-corpo strong{overflow-wrap:anywhere}
.tf-item-meta{color:#334155; font-size:.9rem; overflow-wrap:anywhere}
.tf-item-acoes{display:flex; gap:8px; flex-wrap:wrap}
.tf-como-btn:focus-visible,.tf-item a:focus-visible,.tf-proximo a:focus-visible{outline:3px solid #0f172a; outline-offset:2px}