/* Trechos genéricos de ~/code/backlog/web/src/styles/backlog.css (Maestro, main de50a75): linhas 1-133, 285-325, 423-425. O resto do arquivo é das telas do Maestro. */
/* Extensões locais do Backlog EcomSmart (IDENTIDADE seção 15), só com tokens do kit v4. O primeiro bloco é o da
   IDENTIDADE, sem mudança; o resto são as peças das telas do backlog. O que o Geraldo aprovar volta para o kit. */

/* ---------------------------------------------------------------- IDENTIDADE seção 15 */
:root { --carregando-fundo: #F0F2F4; }                      /* splash no fundo da casca (splash.html:20) */
body { background: var(--fundo-3); }
.app { min-height: 100dvh; border-radius: 0; }               /* no kit o .app é um quadro (v4.css:802) */
.card > h2, .secao-titulo { font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.pagina-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } /* app.html:612 */
.voltar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: -12px; border-radius: var(--r-m); color: var(--texto); }
.voltar:hover { background: var(--fundo-2); color: var(--tinta); }
.layout-2-1, .mestre-detalhe { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .layout-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .mestre-detalhe { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .mestre-detalhe > :last-child { position: sticky; top: 12px; }
}
.grade-cartoes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.peca.sem-midia { grid-template-columns: minmax(0, 1fr); }  /* a .peca reserva 180 px para a capa (app.html:47) */
.progresso { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.progresso-trilho { height: 8px; border-radius: var(--r-pilula); background: var(--superficie-3); overflow: hidden; }
.progresso-barra { width: calc(var(--p, 0) * 100%); height: 100%; border-radius: inherit; background: var(--marca); }
.progresso.ok .progresso-barra { background: var(--ok); }
.progresso .numero { font-size: 14px; min-width: 4ch; text-align: right; }
.codigo { display: block; margin: 0; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--r-m); background: var(--fundo-2); color: var(--tinta); font: 14px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.btn-perigo { background: var(--erro); color: #fff; }
.btn-perigo:hover { background: #912018; }                   /* cor nova: não existe no kit */
.coluna { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--linha); border-radius: var(--r-l); background: var(--fundo-2); }
.coluna.alvo { border-color: var(--marca); background: var(--marca-suave); }
.projeto-ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c, var(--nevoa-ico)); }
@media (max-width: 767px) { .app.app-trilho:not(.app-demo) { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } } /* sem Clara (v4.css:1630 usa 132) */
@media (max-width: 719px) {
  .app-cab h1 { font-size: 20px; }
  .peca { gap: 12px; padding: 12px; } .peca h3 { font-size: 16px; line-height: 1.3; } .peca-tipo, .peca-meta { font-size: 14px; }
}

/* ---------------------------------------------------------------- casca */
.app-cab h1 { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.app-cab h1:focus { outline: none; }
.app-cab h1:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.app-cab .app-cab-acoes { flex: none; }
.conexao-selo { white-space: nowrap; }
.app-conteudo > * { min-width: 0; }
@media (max-width: 719px) {
  .app-cab h1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.25; }
}

/* ---------------------------------------------------------------- texto e utilidades */
.quebra { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; font-weight: 500; }
.corta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.corta-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.numero-peq { font-variant-numeric: tabular-nums; }
.numero-sessao { font-variant-numeric: tabular-nums; font-weight: 500; }
.selos { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.com-ponto { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.form-pilha { display: grid; gap: 16px; }
.campos-2 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .campos-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.campo .ajuda, .campo .msg-erro { font-size: 14px; line-height: 1.4; }
.campo .msg-erro { font-weight: 600; }
.campo-curto { width: 120px !important; max-width: 100%; }
.campo-unidade { display: inline-flex; align-items: center; gap: 10px; }
.previa-texto { font-size: 15px; line-height: 1.5; color: var(--texto); }
.itens-texto { list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--tinta); }
.itens-texto li { position: relative; padding-left: 16px; overflow-wrap: anywhere; }
.itens-texto li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--texto-3); }
.passos-lista { display: grid; gap: 8px; padding-left: 22px; font-size: 15px; line-height: 1.5; color: var(--texto); }
.passos-lista li::marker { color: var(--marca-forte); font-weight: 700; }
.trecho { display: grid; gap: 6px; }
.trecho h3 { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--tinta); }
.trecho-texto { margin: 0; font-size: 14px; line-height: 1.55; color: var(--tinta); white-space: pre-wrap; overflow-wrap: anywhere; }
.card-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.card-cab > h2 { font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.card-cab-link { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; font-size: 14px; font-weight: 600; }
.card-destaque { border-color: var(--marca); background: var(--marca-suave); }
.card-claro { background: var(--fundo); padding-block: 4px; }
.rodape-form { display: grid; gap: 12px; }
.form-ajustes { max-width: 880px; }
.atalhos-dica { font-size: 14px; color: var(--texto-2); }
@media (pointer: coarse) { .atalhos-dica { display: none; } }
.dica-campo { font-size: 14px; line-height: 1.4; color: var(--texto-2); }
.filtro-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--tinta); cursor: pointer; justify-self: start; }
.filtro-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--marca); }
.filtro-busca .campo-linha { width: 260px; }
.link-celula { display: inline; padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.link-celula:hover { text-decoration: underline; text-underline-offset: 3px; }
.celula-titulo { font-weight: 600; overflow-wrap: anywhere; }
.paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; }
.paginacao .btn[disabled] { opacity: .5; }

/* ---------------------------------------------------------------- avatar, selo de conexão, esqueleto */
.avatar.com-anel { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 4px var(--avatar-anel, var(--borda)); }
.avatar.avatar-g { width: 40px; height: 40px; font-size: 14px; }
.esqueleto-caixa { display: grid; gap: 12px; }
.esqueleto-bloco { padding: 16px; border: 1px solid var(--linha); border-radius: var(--r-l); background: var(--fundo); }
.esqueleto-tabela-linhas { padding: 12px 16px; border: 1px solid var(--linha); border-radius: var(--r-l); background: var(--fundo); gap: 14px; }
.esqueleto-cartoes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
@media (prefers-reduced-motion: reduce) { .esqueleto i { animation: none; } }

/* ---------------------------------------------------------------- menu ⋯ (camada fixa, fora do painel) */
.menu-mais { position: fixed; z-index: 50; min-width: 220px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 96px); overflow-y: auto; display: grid; padding: 6px; background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--r-m); box-shadow: var(--sombra-2); }
.menu-mais button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-s); background: none; color: var(--tinta); font-size: 15px; text-align: left; white-space: nowrap; cursor: pointer; }
.menu-mais button:hover { background: var(--fundo-2); }
.menu-mais button:focus-visible { outline-offset: -2px; }
.menu-mais button .ico { color: var(--texto-2); }
.menu-mais .perigo, .menu-mais .perigo .ico { color: var(--erro); }
.menu-mais button[aria-disabled="true"] { color: var(--texto-2); cursor: default; }
.menu-mais-grupo { padding: 10px 12px 4px; margin-top: 4px; border-top: 1px solid var(--linha); font-size: 13px; font-weight: 600; color: var(--texto-2); }
.menu-mais-grupo:first-child { margin-top: 0; border-top: 0; }

/* ---------------------------------------------------------------- tabela: cabeçalho que ordena e cartões abaixo de 720 px */
.tabela-bloco { display: grid; gap: 8px; min-width: 0; }
.ordenar-linha { display: none; }
.tabela th .th-ordenar { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.tabela th .th-ordenar:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.tabela td.c-titulo { min-width: 200px; }
.tabela td .selos { flex-wrap: wrap; }
.tabela-caixa .tabela td { overflow-wrap: anywhere; }
@media (max-width: 719px) {
  .ordenar-linha { display: flex; }
  .tabela-caixa .tabela.tabela-cartoes tr { padding: 12px 12px 12px 12px; }
  .tabela-caixa .tabela.tabela-cartoes tr:has(td.c-acao) { padding-right: 76px; }
  .tabela-caixa .tabela.tabela-cartoes td { order: 2; flex: 0 1 auto; position: static; transform: none; display: block; font-size: 14px; color: var(--texto-2); white-space: normal; -webkit-line-clamp: unset; font-weight: 400; }
  .tabela-caixa .tabela.tabela-cartoes td.c-titulo { order: 0; flex: 0 0 100%; min-width: 0; font-size: 15px; font-weight: 600; color: var(--tinta); }
  .tabela-caixa .tabela.tabela-cartoes td.c-situacao { order: 1; flex: 0 0 100%; color: var(--tinta); }
  .tabela-caixa .tabela.tabela-cartoes td.c-situacao:empty { display: none; }
  .tabela-caixa .tabela.tabela-cartoes td.c-meta:empty { display: none; }
  .tabela-caixa .tabela.tabela-cartoes td.c-oculta { display: none; }
  .tabela-caixa .tabela.tabela-cartoes td.c-acao { position: absolute; right: 12px; top: 12px; }
  .filtro-busca .campo-linha { width: auto; }
}


/* ---------------------------------------------------------------- entrar, página pública e sem conexão */
button.entrar-ajuda { border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.entrar-form .campo .msg-erro { font-size: 14px; }
/* "Mostrar senha" com 44 px de toque: o kit (v4.css) o põe 1 px dentro do campo de 44 px e ele fica com 42 px. Encosta
   nas bordas do campo com uma borda transparente de 1 px; o fundo do hover fica dentro dela, como antes. */
.entrar-olho { top: 0; right: 0; bottom: 0; border: 1px solid transparent; border-radius: 0 8px 8px 0; background-clip: padding-box; }
.entrar-olho:hover { background-clip: padding-box; }
.publica { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: 16px var(--calha) 24px; background: var(--fundo); }
.publica-topo, .publica-corpo, .publica-pe { width: min(100%, 560px); margin-inline: auto; }
.publica-corpo { display: grid; gap: 16px; align-content: start; }
.publica-pendencia { display: grid; gap: 14px; }
.publica-titulo { font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem); line-height: 1.2; }
.publica-titulo:focus { outline: none; }
.publica-pergunta { font-size: 19px; font-weight: 650; line-height: 1.35; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.publica-meta { list-style: none; display: grid; gap: 4px; font-size: 14px; color: var(--texto-2); overflow-wrap: anywhere; }
.publica-detalhes { padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--r-m); background: var(--fundo-2); font-size: 15px; line-height: 1.55; color: var(--tinta); white-space: pre-wrap; overflow-wrap: anywhere; }
.publica-texto { font-size: 15px; line-height: 1.5; color: var(--texto); }
.publica-form { display: grid; gap: 10px; }
.publica-form label { font-size: 16px; font-weight: 600; }
.publica-form textarea { font-size: 18px; min-height: 96px; }
/* Mobile first (pedido do Geraldo): a pergunta grande, botões de toque grandes, uma coisa por tela. */
.publica-quem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; color: var(--texto-2); overflow-wrap: anywhere; }
.publica-urgente { padding: 2px 10px; border-radius: 999px; background: var(--erro-fundo); color: var(--erro); font-size: 14px; font-weight: 650; }
.publica .publica-pergunta { font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem); line-height: 1.25; font-weight: 700; }
.publica-pergunta:focus { outline: none; }
.publica-opcoes { display: grid; gap: 12px; }
.publica .publica-grande { --btn-alt: 64px; width: 100%; font-size: 20px; font-weight: 650; border-radius: 14px; white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; }
.publica-outra { justify-self: center; min-height: 48px; padding: 0 16px; border: 0; background: none; color: var(--texto-2); font: inherit; font-size: 16px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.publica-mais > summary { min-height: 44px; display: flex; align-items: center; font-size: 15px; color: var(--texto-2); cursor: pointer; }
.publica-fim { display: grid; gap: 16px; justify-items: center; text-align: center; padding-top: 24px; }
.publica-fim .publica-grande { justify-self: stretch; }
.publica-fim-icone { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--fundo-2); color: var(--texto-2); }
.publica-fim-icone.ok { background: var(--ok-fundo); color: var(--ok); }
.publica-fim-icone svg { width: 40px; height: 40px; }
.publica-fim .publica-titulo { font-size: 30px; }
.publica-pe { font-size: 14px; color: var(--texto-2); text-align: center; }
.publica .peca-tipo { display: inline-flex; flex-wrap: wrap; gap: 6px 8px; }
.sem-conexao { min-height: 100dvh; display: grid; align-content: center; justify-items: start; gap: 16px; width: min(100% - 2 * var(--calha), 520px); margin-inline: auto; }
.sem-conexao h1 { font-size: 26px; }
.sem-conexao h1:focus { outline: none; }


/* ---------------------------------------------------------------- casca: o h1 recebe o foco para o leitor de tela, sem contorno */
.app-cab h1:focus-visible { outline: none; }