/* Raio X Estratégico: portal da cliente (usa os tokens de app.css, claro e escuro) */
.portal .faixa { position: sticky; top: 0; z-index: 5; }
.portal-abas { border-top: 1px solid var(--noite-linha); }
.portal-abas-dentro { max-width: 960px; margin: 0 auto; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 0 max(12px, env(safe-area-inset-left, 0px)); }
.portal-abas-dentro::-webkit-scrollbar { display: none; }
.portal-abas a { flex: none; color: var(--sobre-noite); opacity: 0.75; text-decoration: none; font-size: 14px; font-weight: 600; padding: 12px 12px 10px; border-bottom: 3px solid transparent; min-height: 44px; display: inline-flex; align-items: center; }
.portal-abas a:hover { opacity: 1; }
.portal-abas a[aria-current] { opacity: 1; border-bottom-color: var(--ambar); }

.portal-pagina { gap: 20px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.codigo-entrada { font-family: var(--font-display); font-size: 28px !important; letter-spacing: 0.3em; text-align: center; }

/* Início */
.portal-hero { gap: 16px; padding-bottom: 28px; }
.portal-progresso { display: grid; gap: 10px; }
.portal-progresso-numero { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; color: var(--sobre-noite); }
.portal-progresso-numero strong { font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--ambar); }
.portal-progresso-numero span { opacity: 0.85; }
.portal-barra { height: 10px; border-radius: var(--raio-pilula); background: var(--noite-linha); overflow: hidden; }
.portal-barra span { display: block; height: 100%; border-radius: var(--raio-pilula); background: var(--ambar); transition: width 0.4s ease; }
.portal-barra-fina { height: 6px; background: var(--superficie-2); }
.portal-proximo { text-decoration: none; color: inherit; border: 2px solid var(--ambar); gap: 10px; transition: transform 0.15s, box-shadow 0.15s; }
.portal-proximo:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(17, 27, 43, 0.35); }
.portal-proximo-linha { display: flex; align-items: center; gap: 14px; }
.portal-proximo-linha strong { display: block; font-family: var(--font-display); font-size: 20px; line-height: 26px; }
.portal-proximo-linha > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.portal-seta { font-size: 22px; color: var(--ambar); flex: none; }
.passo-num { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; background: var(--noite); color: var(--ambar); font-size: 15px; }
.portal-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; align-items: start; }
.portal-fases { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.portal-fases li { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--raio-md); }
.portal-fases li.atual { background: var(--ambar-suave); }
.portal-fase-topo { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.portal-prioridade { font-family: var(--font-display); font-size: 20px; line-height: 27px; font-weight: 700; }
.portal-mini-conversa { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.portal-mini-conversa li { display: grid; gap: 2px; padding: 8px 12px; border-radius: var(--raio-md); background: var(--superficie-2); }
.portal-mini-conversa li.dela { background: var(--ambar-suave); }

/* Cabeçalho das páginas */
.portal-cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.portal-cabeca > div:first-child { display: grid; gap: 4px; max-width: 60ch; }
.portal-cabeca-lado { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.portal-progresso-mini { display: grid; gap: 4px; min-width: 140px; }
.portal-progresso-mini strong { font-family: var(--font-display); font-size: 22px; }
.alternar { display: inline-flex; border: 1px solid var(--linha-forte); border-radius: var(--raio-md); overflow: hidden; }
.alternar a { padding: 8px 16px; min-height: 40px; display: inline-flex; align-items: center; color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 14px; }
.alternar a[aria-current] { background: var(--primario); color: var(--sobre-primario); }

/* Lista por fase */
.portal-fase { gap: 12px; }
.portal-fase-cabeca { display: flex; gap: 12px; align-items: flex-start; }
.portal-fase-cabeca h2 .legenda { font-family: var(--font-corpo); font-weight: 600; margin-left: 6px; }
.fase-selo { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ambar); color: var(--sobre-ambar); font-family: var(--font-display); font-weight: 700; display: grid; place-items: center; }
.portal-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.portal-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--linha); border-radius: var(--raio-md); padding: 6px 10px 6px 6px; background: var(--superficie); }
.portal-item-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 6px 0; }
.portal-item-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.portal-item-texto strong { font-weight: 600; }
.portal-item .passo-num { width: 34px; height: 34px; font-size: 13px; }
.portal-item.status-feito .portal-item-texto strong { text-decoration: line-through; text-decoration-color: var(--linha-forte); color: var(--tinta-suave); }
.portal-item.status-feito .passo-num { background: var(--feito); color: #fff; }
.portal-item.status-fazendo { border-color: var(--andamento); }
.portal-item.status-fazendo .passo-num { background: var(--andamento); color: #fff; }
.portal-check { position: relative; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; flex: none; }
.portal-check input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.portal-check span { width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--linha-forte); display: grid; place-items: center; transition: background 0.15s, border-color 0.15s; }
.portal-check input:checked + span { background: var(--feito); border-color: var(--feito); }
.portal-check input:checked + span::after { content: ""; width: 12px; height: 7px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.portal-check input:focus-visible + span { box-shadow: var(--anel-foco); }

/* Quadro */
.quadro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.quadro-coluna { background: var(--superficie-2); border-radius: var(--raio-lg); padding: 14px; display: grid; gap: 12px; min-height: 160px; transition: outline-color 0.15s; outline: 2px dashed transparent; outline-offset: -4px; }
.quadro-coluna.sobre { outline-color: var(--ambar); }
.quadro-coluna h2 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.quadro-conta { font-family: var(--font-corpo); font-size: 12px; font-weight: 600; background: var(--superficie); border-radius: var(--raio-pilula); padding: 0 8px; }
.quadro-cartoes { display: grid; gap: 10px; }
.quadro-cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-md); padding: 12px; display: grid; gap: 8px; cursor: grab; }
.quadro-cartao.arrastando { opacity: 0.5; }
.quadro-cartao a { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; color: inherit; }
.quadro-cartao .passo-num { width: 30px; height: 30px; font-size: 12px; }
.quadro-cartao strong { font-weight: 600; line-height: 22px; }
.quadro-mover { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.botao-mini { font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--linha-forte); background: transparent; color: var(--tinta); border-radius: var(--raio-sm); padding: 4px 10px; min-height: 32px; cursor: pointer; }
.botao-mini-forte { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); margin-left: auto; }
.quadro-coluna[data-status=feito] .passo-num { background: var(--feito); color: #fff; }
.quadro-coluna[data-status=fazendo] .passo-num { background: var(--andamento); color: #fff; }

/* Página do passo */
.tarefa-cabeca { display: grid; gap: 8px; }
.tarefa-cabeca h1 { font-size: 30px; line-height: 36px; }
.tarefa-cabeca .modalidade { justify-self: start; }
.segmentado { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--linha-forte); border-radius: var(--raio-md); overflow: hidden; }
.segmentado button { font: inherit; font-weight: 600; min-height: 48px; border: 0; background: var(--superficie); color: var(--tinta); cursor: pointer; border-left: 1px solid var(--linha); }
.segmentado button:first-child { border-left: 0; }
.segmentado button[aria-checked=true][data-status=a_fazer] { background: var(--superficie-2); }
.segmentado button[aria-checked=true][data-status=fazendo] { background: var(--andamento); color: #fff; }
.segmentado button[aria-checked=true][data-status=feito] { background: var(--feito); color: #fff; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: passo; }
.checklist li label { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--raio-md); background: var(--superficie-2); cursor: pointer; }
.checklist input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--feito); flex: none; }
.checklist input:checked + span { color: var(--tinta-suave); text-decoration: line-through; text-decoration-color: var(--linha-forte); }
.pronto-quando { border-left: 4px solid var(--feito); background: var(--feito-suave); border-radius: var(--raio-sm); padding: 10px 14px; display: grid; gap: 4px; }
.pronto-quando .rotulo { color: var(--feito); }
.tarefa-navegar { display: flex; justify-content: space-between; gap: 12px; }

/* Conversa */
.conversa { display: grid; gap: 12px; }
.conversa-vazia { padding: 4px 0; }
.balao { max-width: 88%; padding: 10px 14px; border-radius: 14px; display: grid; gap: 6px; }
.balao p { overflow-wrap: anywhere; }
.balao-meu { justify-self: end; background: var(--superficie-2); border-bottom-right-radius: 4px; }
.balao-outro { justify-self: start; background: var(--ambar-suave); border-bottom-left-radius: 4px; }
.balao-quem { font-size: 12.5px; color: var(--tinta-suave); font-weight: 600; }
.balao-imagem img { max-width: 100%; max-height: 280px; border-radius: var(--raio-md); display: block; }
.balao-arquivo { font-weight: 600; overflow-wrap: anywhere; }
.conversa-form { display: grid; gap: 10px; border-top: 1px solid var(--linha); padding-top: 14px; margin-top: 4px; }
.conversa-form textarea { width: 100%; resize: vertical; font: inherit; }
.conversa-acoes { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.anexar { position: relative; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--link); font-weight: 600; font-size: 14px; max-width: 100%; }
.anexar input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.anexar input:focus-visible + span { box-shadow: var(--anel-foco); border-radius: var(--raio-sm); }

/* Ferramentas */
.ferramentas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; align-items: start; }
.ferramenta { gap: 12px; }
.ferramenta-conteudo { display: grid; gap: 8px; }
.ferramenta-conteudo pre { margin: 0; max-height: 260px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--superficie-2); border-radius: var(--raio-md); padding: 12px 14px; font-size: 14px; line-height: 21px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.ferramenta-conteudo .botao { justify-self: start; }
.vazio { text-align: center; }

/* Aviso flutuante */
.portal-aviso { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--noite); color: var(--sobre-noite); padding: 10px 18px; border-radius: var(--raio-pilula); font-weight: 600; font-size: 14px; opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; z-index: 20; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); max-width: calc(100% - 32px); text-align: center; }
.portal-aviso.visivel { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 720px) {
  .quadro { grid-template-columns: 1fr; }
  .tarefa-cabeca h1 { font-size: 24px; line-height: 30px; }
  .balao { max-width: 96%; }
}

/* Painel: liberar e acompanhar */
.liberar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-color: var(--ambar); }
.liberar > div:first-child { display: grid; gap: 4px; }
.liberar-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.ferramenta-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.ferramenta-linha > div:first-child { display: grid; gap: 2px; min-width: 0; }
.ferramenta-form { gap: 14px; padding-top: 8px; }
.portal-painel-grade { align-items: start; }
.portal-painel-grade .portal-item { padding: 8px 10px; }
.portal-painel-grade select { font: inherit; font-size: 14px; padding: 6px 8px; border-radius: var(--raio-sm); border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--tinta); }
.ficha-grade.portal-painel-grade { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.quadro-coluna { align-content: start; }