/* Componentes do Painel Inovação. Nenhuma cor literal fora do :root abaixo:
   tudo sai de tokens.css (padrão da casa). */
:root {
  --sobre-marca: #ffffff;              /* texto sobre botão/área de cor da marca */
  --vidro: rgba(11, 18, 32, .45);      /* fundo atrás do modal                    */
}

/* ------------------------------------------------------------------ base */
a { color: var(--marca-500); }
h1, h2, h3 { color: var(--texto); }
.icone { flex: none; vertical-align: -3px; }
.texto-2 { color: var(--texto-2); }
.texto-3 { color: var(--texto-3); }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pular { position: absolute; left: -999px; top: var(--e-2); z-index: 10; background: var(--superficie);
         padding: var(--e-2) var(--e-4); border-radius: var(--raio-1); }
.pular:focus { left: var(--e-2); }

/* ------------------------------------------------------------------ moldura */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }

.lateral { background: var(--marca-900); color: var(--marca-100); padding: var(--e-4) 0;
           display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.logo { display: flex; gap: var(--e-3); align-items: center; padding: 0 var(--e-4) var(--e-5);
        font-size: var(--t-md); font-weight: 700; }
.logo small { display: block; font-size: var(--t-xs); font-weight: 400; opacity: .7; }
.logo-marca { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
              border-radius: var(--raio-2); background: var(--marca-500); color: var(--sobre-marca); flex: none; }
.nav { display: flex; flex-direction: column; }
.nav a, .nav-botao { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4);
                     color: var(--marca-100); text-decoration: none; font: inherit; font-size: var(--t-sm);
                     border: 0; border-left: 3px solid transparent; background: none; width: 100%;
                     text-align: left; cursor: pointer; }
.nav a:hover, .nav-botao:hover { background: var(--marca-800); }
.nav a[aria-current="page"] { background: var(--marca-800); border-left-color: var(--marca-400); font-weight: 600; }
.nav-grupo { padding: var(--e-4) var(--e-4) var(--e-2); font-size: var(--t-xs); text-transform: uppercase;
             letter-spacing: .06em; opacity: .55; }
.nav-rodape { margin-top: auto; border-top: 1px solid var(--marca-800); padding-top: var(--e-2); }

.principal { min-width: 0; display: flex; flex-direction: column; }
.topo { height: var(--topo); display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
        padding: 0 var(--e-5); background: var(--superficie); border-bottom: 1px solid var(--borda);
        position: sticky; top: 0; z-index: 2; }
.topo-titulo { font-size: var(--t-md); }
.usuario { display: flex; align-items: center; gap: var(--e-4); font-size: var(--t-sm); color: var(--texto-2); }
.usuario-nome { display: inline-flex; align-items: center; gap: var(--e-2); }
.atualizado { font-size: var(--t-xs); color: var(--texto-3); }

.conteudo { padding: var(--e-5); max-width: 1440px; width: 100%; }
.cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-4);
             margin-bottom: var(--e-5); }
.cabecalho h1 { margin: 0 0 var(--e-1); font-size: var(--t-xl); }
.cabecalho p { margin: 0; color: var(--texto-2); max-width: 72ch; }
.cabecalho-acoes { display: flex; gap: var(--e-2); flex: none; }
.trilha { font-size: var(--t-xs); color: var(--texto-3); margin-bottom: var(--e-2); }
.trilha a { color: var(--texto-2); }

/* ------------------------------------------------------------------ botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
       padding: var(--e-2) var(--e-4); min-height: 36px; border: 1px solid var(--borda-forte);
       border-radius: var(--raio-1); background: var(--superficie); color: var(--texto);
       font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--superficie-2); }
.btn--primario { background: var(--marca-500); border-color: var(--marca-500); color: var(--sobre-marca); }
.btn--primario:hover { background: var(--marca-600); border-color: var(--marca-600); }
.btn--perigo { background: var(--erro); border-color: var(--erro); color: var(--sobre-marca); }
.btn--perigo:hover { background: var(--erro); opacity: .9; }
.btn--discreto { border-color: transparent; background: none; color: var(--texto-2); }
.btn--largo { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn[data-ocupado] { cursor: progress; }
.btn-icone { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
             border: 1px solid transparent; border-radius: var(--raio-1); background: none;
             color: var(--texto-2); cursor: pointer; padding: 0; }
.btn-icone:hover:not([disabled]) { background: var(--superficie-2); color: var(--texto); }
.btn-icone[disabled] { opacity: .3; cursor: default; }

/* ------------------------------------------------------------------ cartões e KPIs */
.grade { display: grid; gap: var(--e-4); margin-bottom: var(--e-5); }
.grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.grade--form { grid-template-columns: minmax(0, 640px) minmax(240px, 320px); align-items: start; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-2);
          box-shadow: var(--sombra-1); padding: var(--e-4); }
.kpi-rotulo { font-size: var(--t-xs); color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; }
.kpi-valor { font-size: var(--t-2xl); font-weight: 700; text-align: left; line-height: 1.25; }
.kpi-valor--texto { font-size: var(--t-xl); padding: var(--e-1) 0; }
.kpi-nota { font-size: var(--t-xs); color: var(--texto-2); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ tabelas */
.tabela-caixa { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-2);
                overflow: hidden; margin-bottom: var(--e-5); }
.tabela-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
               padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--borda); }
.contagem { font-size: var(--t-xs); color: var(--texto-3); }
.tabela-rolagem { max-height: calc(100vh - 280px); overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
thead th { position: sticky; top: 0; z-index: 1; background: var(--superficie-2); text-align: left;
           padding: var(--e-3) var(--e-4); font-size: var(--t-xs); color: var(--texto-2); font-weight: 600;
           text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
thead th.num { text-align: right; }
tbody td { padding: var(--e-3) var(--e-4); border-top: 1px solid var(--borda); vertical-align: middle; }
tbody tr:hover { background: var(--superficie-2); }
.linha-clicavel { cursor: pointer; }
.linha-clicavel a, tbody td a { color: var(--texto); font-weight: 600; text-decoration: none; }
tbody td a:hover { color: var(--marca-500); text-decoration: underline; }
.ordenar { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: var(--e-1); }
th[aria-sort="none"] .ordenar .icone { opacity: .35; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--texto); }
.acoes-linha { display: flex; gap: var(--e-1); justify-content: flex-end; }
.acoes-linha form { margin: 0; }
.celula-valor { max-width: 260px; overflow-wrap: anywhere; }
.rodape-caixa { margin: 0; padding: var(--e-3) var(--e-4); border-top: 1px solid var(--borda);
                font-size: var(--t-xs); color: var(--texto-3); }
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
             padding: var(--e-3) var(--e-4); border-top: 1px solid var(--borda); }

/* ------------------------------------------------------------------ badges: sempre com palavra */
.badge { display: inline-block; padding: 2px var(--e-2); border-radius: 999px; font-size: var(--t-xs);
         font-weight: 600; white-space: nowrap; }
.badge--ok      { color: var(--ok);      background: var(--ok-fundo); }
.badge--atencao { color: var(--atencao); background: var(--atencao-fundo); }
.badge--erro    { color: var(--erro);    background: var(--erro-fundo); }
.badge--neutro  { color: var(--neutro);  background: var(--neutro-fundo); }

/* ------------------------------------------------------------------ etapas (início) */
.etapas-lista { list-style: none; margin: 0; padding: 0; }
.etapas-lista li { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4);
                   border-top: 1px solid var(--borda); }
.etapas-lista li:first-child { border-top: 0; }
.etapa-numero { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
                border-radius: 999px; background: var(--marca-100); color: var(--marca-600);
                font-size: var(--t-xs); font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }
.etapa-texto { flex: 1; min-width: 0; }
.etapa-texto small { display: block; color: var(--texto-3); font-size: var(--t-xs); }

/* ------------------------------------------------------------------ formulários */
.formulario { max-width: 640px; display: flex; flex-direction: column; gap: var(--e-4); margin-bottom: var(--e-5); }
.formulario h2 { margin: 0; font-size: var(--t-md); }
.formulario--linha { max-width: none; }
.linha-campos { display: flex; gap: var(--e-3); align-items: flex-end; flex-wrap: wrap; }
.campo { display: flex; flex-direction: column; gap: var(--e-1); border: 0; padding: 0; margin: 0; min-width: 0; }
.campo > span:first-child, .campo legend { font-size: var(--t-xs); font-weight: 600; color: var(--texto-2); padding: 0; }
.campo small { font-size: var(--t-xs); color: var(--texto-3); }
.campo--largo { flex: 1; min-width: 240px; }
.campo--curto { width: 120px; }
.campo--busca { min-width: 260px; flex: 1; max-width: 420px; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"],
input[type="date"], select, textarea {
  font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: var(--raio-1); padding: var(--e-2) var(--e-3); min-height: 36px; width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--marca-500); }
textarea { resize: vertical; }
.campo-senha { position: relative; display: block; }
.campo-senha input { padding-right: 44px; }
.campo-senha .btn-icone { position: absolute; right: 2px; top: 2px; }
.campo-com-icone { position: relative; display: block; color: var(--texto-3); }
.campo-com-icone .icone { position: absolute; left: var(--e-3); top: 10px; }
.campo-com-icone input { padding-left: 36px; }
.formulario-acoes { display: flex; justify-content: flex-end; gap: var(--e-2); padding-top: var(--e-2); }

.opcoes-perfil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); margin-top: var(--e-1); }
.opcao { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3); border: 1px solid var(--borda);
         border-radius: var(--raio-1); cursor: pointer; }
.opcao:has(input:checked) { border-color: var(--marca-500); background: var(--marca-100); }
.opcao input { margin-top: 3px; accent-color: var(--marca-500); }
.opcao small { display: block; color: var(--texto-2); font-size: var(--t-xs); }

.filtros { display: flex; gap: var(--e-3); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--e-4); }
.filtros .campo { min-width: 160px; }
.filtros-acoes { display: flex; gap: var(--e-2); }

.alerta { display: flex; gap: var(--e-2); align-items: flex-start; padding: var(--e-3); border-radius: var(--raio-1);
          font-size: var(--t-sm); }
.alerta--erro    { color: var(--erro);    background: var(--erro-fundo); }
.alerta--ok      { color: var(--ok);      background: var(--ok-fundo); }
.alerta--atencao { color: var(--atencao); background: var(--atencao-fundo); }
.alerta--neutro  { color: var(--neutro);  background: var(--neutro-fundo); }

/* ------------------------------------------------------------------ painel lateral do usuário */
.painel-lateral h2 { margin: 0 0 var(--e-3); font-size: var(--t-md); }
.detalhes { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2) var(--e-4); margin: 0 0 var(--e-4);
            font-size: var(--t-sm); }
.detalhes dt { color: var(--texto-3); }
.detalhes dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.acoes-empilhadas { display: flex; flex-direction: column; gap: var(--e-2); }
.acoes-empilhadas form { margin: 0; }

.senha-temporaria { display: flex; gap: var(--e-3); align-items: center; padding: var(--e-4);
                    background: var(--superficie-2); border: 1px dashed var(--borda-forte); border-radius: var(--raio-2); }
.senha-temporaria code { font-size: var(--t-xl); font-weight: 700; letter-spacing: .06em; flex: 1;
                         font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* ------------------------------------------------------------------ estados */
.estado { padding: var(--e-7) var(--e-5); text-align: center; color: var(--texto-2); }
.estado h3 { margin: 0 0 var(--e-2); color: var(--texto); font-size: var(--t-md); }
.estado p { margin: 0 auto; max-width: 56ch; }
.estado--pagina { max-width: 640px; margin: var(--e-7) auto; }
.estado-icone { display: inline-flex; padding: var(--e-3); border-radius: 999px; background: var(--erro-fundo);
                color: var(--erro); margin-bottom: var(--e-3); }
.estado-acoes { display: flex; gap: var(--e-2); justify-content: center; margin-top: var(--e-5); }
.codigo-erro { margin-top: var(--e-3) !important; font-size: var(--t-sm); }
.esqueleto { height: 14px; border-radius: var(--raio-1); background: var(--superficie-2);
             animation: pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: .45; } }

/* ------------------------------------------------------------------ aviso (toast) e modal */
.aviso { position: fixed; right: var(--e-5); bottom: var(--e-5); z-index: 20; display: flex; align-items: center;
         gap: var(--e-2); padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4); border-radius: var(--raio-2);
         background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra-2);
         font-weight: 600; transition: opacity .3s, transform .3s; }
.aviso--ok { color: var(--ok); }
.aviso--erro { color: var(--erro); }
.aviso--atencao { color: var(--atencao); }
.aviso span { color: var(--texto); }
.aviso[data-saindo] { opacity: 0; transform: translateY(8px); }
.aviso-fechar { border: 0; background: none; color: var(--texto-3); cursor: pointer; padding: var(--e-1); display: inline-flex; }

.modal { border: 1px solid var(--borda); border-radius: var(--raio-3); padding: var(--e-5); max-width: 460px;
         width: calc(100% - var(--e-6)); background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-2); }
.modal::backdrop { background: var(--vidro); }
.modal h2 { margin: 0 0 var(--e-2); font-size: var(--t-lg); }
.modal p { margin: 0 0 var(--e-5); color: var(--texto-2); }
.modal-acoes { display: flex; justify-content: flex-end; gap: var(--e-2); }

/* ------------------------------------------------------------------ login */
.pagina-login { min-height: 100vh; display: grid; place-items: center;
                background: linear-gradient(160deg, var(--marca-900), var(--marca-700)); }
.login { width: 100%; max-width: 420px; padding: var(--e-4); }
.login-marca { display: flex; gap: var(--e-3); align-items: center; color: var(--marca-100); margin-bottom: var(--e-5); }
.login-marca .logo-marca { width: 44px; height: 44px; }
.login-marca strong { display: block; font-size: var(--t-lg); color: var(--sobre-marca); }
.login-marca small { font-size: var(--t-xs); opacity: .8; }
.login-cartao { padding: var(--e-6); display: flex; flex-direction: column; gap: var(--e-4); box-shadow: var(--sombra-2); }
.login-cartao h1 { margin: 0; font-size: var(--t-xl); }
.login-cartao > p { margin: calc(var(--e-3) * -1) 0 0; }
.login-ajuda { display: flex; gap: var(--e-2); margin: 0; font-size: var(--t-xs); color: var(--texto-3); }

/* ------------------------------------------------------------------ telas menores (1366x768 e abaixo) */
@media (max-width: 1280px) {
  .grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .grade--2, .grade--form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; height: auto; }
  .atualizado { display: none; }
  .usuario-nome { display: none; }
  .topo { padding: 0 var(--e-4); }
  .topo-titulo { font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .opcoes-perfil { grid-template-columns: minmax(0, 1fr); }
  .cabecalho { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .esqueleto { animation: none; }
  .aviso { transition: none; }
}

/* ================================================================== Fase 2: projetos */
.badge--marca { color: var(--marca-600); background: var(--marca-100); }
.cartao--link { display: block; color: inherit; text-decoration: none; }
.cartao--link:hover { border-color: var(--marca-400); box-shadow: var(--sombra-2); }
.cartao--atencao { border-color: var(--atencao); background: var(--atencao-fundo); }
.celula-projeto { min-width: 220px; }
.linha-sobre { display: block; font-size: var(--t-xs); color: var(--texto-3); font-weight: 600; letter-spacing: .02em; }
.linha-sub { display: block; font-size: var(--t-xs); color: var(--texto-3); font-weight: 400; }
.linha-feita td { color: var(--texto-3); }
.linha-feita td a { color: var(--texto-3); text-decoration: line-through; }
.texto-livre { white-space: pre-line; overflow-wrap: anywhere; }
.faixa { margin-bottom: var(--e-4); }
.faixa a { color: inherit; font-weight: 700; margin-left: var(--e-2); }
.form-inline { display: inline-flex; gap: var(--e-1); align-items: center; margin: 0; }
.btn--mini { min-height: 28px; padding: 2px var(--e-2); font-size: var(--t-xs); }
.formulario--largo { max-width: 880px; }
.duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.campo-grupo { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.opcao--compacta { padding: var(--e-2) var(--e-3); align-items: center; min-height: 36px; }
.opcao--compacta input { margin-top: 0; }

/* barra de avanço: <progress> nativo, pintado com os tokens (a CSP não deixa usar style=) */
.avanco { display: inline-flex; align-items: center; gap: var(--e-2); min-width: 120px; }
.avanco-barra { appearance: none; -webkit-appearance: none; width: 80px; height: 8px; border: 0;
                border-radius: 999px; background: var(--superficie-2); overflow: hidden; flex: none; }
.avanco-barra::-webkit-progress-bar { background: var(--superficie-2); border-radius: 999px; }
.avanco-barra::-webkit-progress-value { background: var(--marca-500); border-radius: 999px; }
.avanco-barra::-moz-progress-bar { background: var(--marca-500); border-radius: 999px; }
.avanco-valor { font-variant-numeric: tabular-nums; font-size: var(--t-xs); font-weight: 600; min-width: 4ch; text-align: right; }

/* cabeçalho do projeto e abas */
.projeto-topo { display: flex; justify-content: space-between; gap: var(--e-5); align-items: flex-start;
                margin-bottom: var(--e-4); flex-wrap: wrap; }
.projeto-titulo { min-width: 0; flex: 1 1 420px; }
.projeto-titulo h1 { margin: var(--e-1) 0; font-size: var(--t-xl); }
.projeto-titulo p { margin: 0; }
.projeto-codigo { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-xs); color: var(--texto-2);
                  font-weight: 600; flex-wrap: wrap; }
.projeto-resumo { display: flex; gap: var(--e-5); align-items: center; flex-wrap: wrap; }
.projeto-resumo-item { display: flex; flex-direction: column; gap: var(--e-1); }
.abas { display: flex; gap: var(--e-1); border-bottom: 1px solid var(--borda); margin-bottom: var(--e-5);
        overflow-x: auto; overflow-y: hidden; }
.abas a { display: inline-flex; align-items: center; gap: var(--e-2); padding: var(--e-3) var(--e-4);
          color: var(--texto-2); text-decoration: none; font-weight: 600; white-space: nowrap; }
.abas a:hover { color: var(--texto); }
.abas a[aria-current="page"] { color: var(--marca-500); box-shadow: inset 0 -2px 0 var(--marca-500); }
.aba-alerta { color: var(--atencao); display: inline-flex; }

/* trilho de etapas (visão geral) */
.bloco { margin-bottom: var(--e-5); }
.bloco-titulo { margin: 0 0 var(--e-4); font-size: var(--t-md); }
.trilho { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--e-2); overflow-x: auto; }
.trilho-passo { flex: 1 1 0; min-width: 140px; display: flex; flex-direction: column; gap: var(--e-1);
                padding: var(--e-3); border-radius: var(--raio-1); border: 1px solid var(--borda); }
.trilho-marca { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
                border-radius: 999px; font-size: var(--t-xs); font-weight: 700; background: var(--superficie-2);
                color: var(--texto-2); font-variant-numeric: tabular-nums; }
.trilho-nome { font-weight: 600; }
.trilho-info { font-size: var(--t-xs); color: var(--texto-3); }
.trilho-passo--em_andamento { border-color: var(--marca-500); background: var(--marca-100); }
.trilho-passo--em_andamento .trilho-marca { background: var(--marca-500); color: var(--sobre-marca); }
.trilho-passo--concluida .trilho-marca { background: var(--ok-fundo); color: var(--ok); }

/* listas: próximos passos e feed de atualizações */
.lista-tarefas, .feed { list-style: none; margin: 0; padding: 0; }
.lista-tarefas li { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3);
                    padding: var(--e-3) var(--e-4); border-top: 1px solid var(--borda); }
.lista-tarefas li:first-child, .feed li:first-child { border-top: 0; }
.lista-tarefas-texto { min-width: 0; }
.lista-tarefas-texto a { color: var(--texto); text-decoration: none; }
.lista-tarefas-texto small { display: block; font-size: var(--t-xs); color: var(--texto-3); margin-top: 2px; }
.feed li { padding: var(--e-4); border-top: 1px solid var(--borda); }
.feed-cabeca { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-2); }
.feed p { margin: 0 0 var(--e-2); }
.feed--compacto li { padding: var(--e-3) var(--e-4); }
.feed--compacto p { color: var(--texto-2); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
                    -webkit-box-orient: vertical; overflow: hidden; }
.feed-item { display: flex; gap: var(--e-3); align-items: baseline; }
.feed-rotulo { flex: none; font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
               color: var(--marca-600); min-width: 72px; }
.feed-rotulo--trava { color: var(--erro); }
.estado--compacto { padding: var(--e-5) var(--e-4); }
.detalhes--largo { grid-template-columns: 160px 1fr; }

/* filtro em segmentos (tarefas) e tipo de atualização */
.barra-filtro { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3);
                margin-bottom: var(--e-4); flex-wrap: wrap; }
.segmentos { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: var(--raio-1); overflow: hidden;
             background: var(--superficie); }
.segmentos a, .segmentos label span { display: inline-block; padding: var(--e-2) var(--e-4); color: var(--texto-2);
                                      text-decoration: none; font-weight: 600; cursor: pointer; }
.segmentos a + a, .segmentos label + label span { border-left: 1px solid var(--borda); }
.segmentos a[aria-current="page"], .segmentos input:checked + span { background: var(--marca-100); color: var(--marca-600); }
.segmentos--radio label { position: relative; }
.segmentos--radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmentos--radio input:focus-visible + span { outline: 2px solid var(--marca-500); outline-offset: -2px; }

.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cartao--erro { border-color: var(--erro); background: var(--erro-fundo); }

/* ================================================================== Fase 3 */
/* saúde */
.selo-saude { display: inline-flex; align-items: center; gap: var(--e-1); }
.saude-ponto { width: 8px; height: 8px; border-radius: 999px; background: currentColor; flex: none; }
.saude { border-left-width: 4px; }
.saude--vermelho { border-left-color: var(--erro); }
.saude--amarelo { border-left-color: var(--atencao); }
.saude--verde { border-left-color: var(--ok); }
.saude-cabeca { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-2); }
.saude-cabeca .bloco-titulo { margin: 0; }
.saude-motivos { margin: 0 0 var(--e-3); padding-left: var(--e-5); }
.saude-motivos li { margin-bottom: var(--e-1); }
.saude-regra { margin: 0; font-size: var(--t-xs); color: var(--texto-3); }
.contagem--erro { color: var(--erro); font-weight: 700; }

/* minha mesa */
.grupo-titulo { padding: var(--e-2) var(--e-4); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
                letter-spacing: .04em; color: var(--texto-2); background: var(--superficie-2); border-top: 1px solid var(--borda); }
.grupo-titulo:first-of-type { border-top: 0; }
.grupo-titulo--vencidas { color: var(--erro); }
.lista-projetos { list-style: none; margin: 0; padding: 0; }
.lista-projetos li + li { border-top: 1px solid var(--borda); }
.lista-projetos-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-3);
                       padding: var(--e-3) var(--e-4); color: inherit; text-decoration: none; align-items: center; }
.lista-projetos-link:hover { background: var(--superficie-2); }
.lista-projetos-nome { font-weight: 600; min-width: 0; }
.lista-projetos-nome small { display: block; font-size: var(--t-xs); color: var(--texto-3); font-weight: 600; }
.lista-projetos-info { display: inline-flex; gap: var(--e-1); justify-content: flex-end; flex-wrap: wrap; }

.campo-leitura { margin: 0; padding: var(--e-2) 0; font-weight: 600; }
.campo-leitura small { display: block; font-weight: 400; color: var(--texto-3); font-size: var(--t-xs); }
.faixa--acao { align-items: center; }
.faixa--acao > span { flex: 1; }

/* ações do projeto e menu "Mudar situação" (<details>: funciona sem JS e por teclado) */
.projeto-acoes { display: flex; gap: var(--e-2); align-items: center; }
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--superficie-2); }
.menu-lista { position: absolute; right: 0; top: calc(100% + var(--e-1)); z-index: 5; min-width: 200px;
              display: flex; flex-direction: column; padding: var(--e-1); background: var(--superficie);
              border: 1px solid var(--borda); border-radius: var(--raio-2); box-shadow: var(--sombra-2); }
.menu-item { text-align: left; font: inherit; font-weight: 600; color: var(--texto); background: none; border: 0;
             border-radius: var(--raio-1); padding: var(--e-2) var(--e-3); cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--superficie-2); }
.menu-item--perigo { color: var(--erro); }
.modal form { display: flex; flex-direction: column; gap: var(--e-4); }
.modal form p { margin: 0; }
.modal form .modal-acoes { margin-top: var(--e-1); }

@media (max-width: 1100px) {
  .duas-colunas { grid-template-columns: minmax(0, 1fr); }
  .grade--3, .grade--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* linha do tempo (SVG: as cores vêm daqui, a CSP não deixa style= no HTML) */
.gantt-rolagem { overflow-x: auto; }
.gantt { width: 100%; min-width: 720px; height: auto; display: block; font-family: var(--fonte); }
.gantt-grade { stroke: var(--borda); stroke-width: 1; }
.gantt-divisa { stroke: var(--superficie-2); stroke-width: 1; }
.gantt-mes { fill: var(--texto-3); font-size: 12px; }
.gantt-nome { fill: var(--texto); font-size: 13px; font-weight: 600; }
.gantt-sem { fill: var(--texto-3); font-size: 12px; font-style: italic; }
.gantt-previsto { fill: var(--marca-100); stroke: var(--marca-400); stroke-width: 1; }
.gantt-previsto--atrasada { fill: var(--erro-fundo); stroke: var(--erro); }
.gantt-real { fill: var(--marca-500); }
.gantt-real--concluida { fill: var(--ok); }
.gantt-hoje { stroke: var(--atencao); stroke-width: 2; stroke-dasharray: 4 3; }
.legenda { display: inline-flex; gap: var(--e-4); flex-wrap: wrap; font-size: var(--t-xs); color: var(--texto-2); margin-left: auto; }
.legenda-item { display: inline-flex; align-items: center; gap: var(--e-1); }
.legenda-cor { width: 14px; height: 8px; border-radius: 2px; display: inline-block; }
.legenda-cor--previsto { background: var(--marca-100); border: 1px solid var(--marca-400); }
.legenda-cor--real { background: var(--marca-500); }
.legenda-cor--atrasada { background: var(--erro-fundo); border: 1px solid var(--erro); }
.legenda-cor--hoje { background: var(--atencao); width: 3px; height: 12px; }

/* quadro (kanban) */
.barra-filtro-grupo { display: flex; gap: var(--e-3); flex-wrap: wrap; }
.segmentos a { display: inline-flex; align-items: center; gap: var(--e-1); }
.quadro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); align-items: start; }
.quadro-coluna { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-2);
                 min-height: 200px; display: flex; flex-direction: column; }
.quadro-coluna[data-alvo] { border-color: var(--marca-500); background: var(--marca-100); }
.quadro-cabeca { padding: var(--e-3) var(--e-4); font-weight: 700; display: flex; gap: var(--e-2); align-items: center;
                 border-bottom: 1px solid var(--borda); }
.quadro-coluna--fazendo .quadro-cabeca { color: var(--marca-600); }
.quadro-coluna--feito .quadro-cabeca { color: var(--ok); }
.quadro-cartoes { padding: var(--e-3); display: flex; flex-direction: column; gap: var(--e-2); flex: 1; }
.quadro-cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-1);
                 padding: var(--e-3); box-shadow: var(--sombra-1); display: flex; flex-direction: column; gap: var(--e-2); }
.quadro-cartao[draggable="true"] { cursor: grab; }
.quadro-cartao[data-arrastando] { opacity: .5; }
.quadro-titulo { color: var(--texto); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.quadro-meta { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); font-size: var(--t-xs); color: var(--texto-3); align-items: center; }
.quadro-coluna--feito .quadro-titulo { color: var(--texto-3); text-decoration: line-through; }
.quadro-vazio { margin: var(--e-4) 0; text-align: center; font-size: var(--t-xs); color: var(--texto-3); }
.dica { margin: var(--e-3) 0 0; font-size: var(--t-xs); }
@media (max-width: 900px) { .quadro { grid-template-columns: minmax(0, 1fr); } }

/* saúde: ícone + palavra, com balão explicativo (mouse, foco do teclado ou toque) */
.saude-dica { position: relative; display: inline-flex; cursor: help; border-radius: var(--raio-1); }
.saude-selo { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-xs); font-weight: 700;
              padding: 2px var(--e-2) 2px var(--e-1); border-radius: 999px; white-space: nowrap; }
.saude-selo .icone { vertical-align: 0; }
.saude-selo--vermelho { color: var(--erro); background: var(--erro-fundo); }
.saude-selo--amarelo  { color: var(--atencao); background: var(--atencao-fundo); }
.saude-selo--verde    { color: var(--ok); background: var(--ok-fundo); }
.saude-selo--sem      { color: var(--neutro); background: var(--neutro-fundo); }
.saude-selo--grande { font-size: var(--t-sm); padding: var(--e-1) var(--e-3) var(--e-1) var(--e-2); }
.saude-balao { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: 320px;
               flex-direction: column; gap: var(--e-2); padding: var(--e-3) var(--e-4); text-align: left;
               background: var(--superficie); color: var(--texto); border: 1px solid var(--borda-forte);
               border-radius: var(--raio-2); box-shadow: var(--sombra-2); font-size: var(--t-xs); font-weight: 400;
               white-space: normal; line-height: 1.45; cursor: default; }
.saude-dica:hover .saude-balao, .saude-dica:focus .saude-balao, .saude-dica:focus-within .saude-balao { display: flex; }
.saude-balao[data-fixo] { position: fixed; }
.saude-balao-titulo { display: inline-flex; align-items: center; gap: var(--e-1); align-self: flex-start;
                      font-size: var(--t-sm); font-weight: 700; padding: 2px var(--e-2); border-radius: 999px; }
.saude-balao-texto { color: var(--texto-2); }
.saude-balao-sub { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); margin-top: var(--e-1); }
.saude-balao-lista { display: flex; flex-direction: column; gap: var(--e-1); }
.saude-balao-lista span { padding-left: var(--e-3); position: relative; }
.saude-balao-lista span::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px;
                                  border-radius: 999px; background: var(--texto-3); }
/* bloco de saúde na visão geral */
.saude-resumo { display: flex; gap: var(--e-4); align-items: flex-start; }
.saude-resumo .bloco-titulo { margin: 0 0 var(--e-1); }
.saude-resumo p { margin: 0; }
.saude-icone-grande { display: inline-flex; padding: var(--e-3); border-radius: 999px; flex: none; }
.saude-resumo + .saude-motivos { margin-top: var(--e-4); }

/* saúde por item: ícones pequenos ao lado do selo geral */
.saude-linha { display: inline-flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.saude-itens { display: inline-flex; gap: 3px; }
.saude-item { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
              border-radius: var(--raio-1); flex: none; }
.saude-item .icone { vertical-align: 0; }
.saude-item--vermelho { color: var(--erro); background: var(--erro-fundo); }
.saude-item--amarelo  { color: var(--atencao); background: var(--atencao-fundo); }
.saude-item--verde    { color: var(--ok); background: var(--ok-fundo); }
.saude-item--sem      { color: var(--texto-3); background: var(--superficie-2); }
.saude-item-estado { font-style: normal; font-size: var(--t-xs); font-weight: 700; }
.saude-item-estado--vermelho { color: var(--erro); }
.saude-item-estado--amarelo { color: var(--atencao); }
.saude-item-estado--verde { color: var(--ok); }
.saude-item-estado--sem { color: var(--texto-3); }
.saude-balao { width: 360px; }
.saude-balao-itens { display: flex; flex-direction: column; gap: var(--e-2); }
.saude-balao-item { display: flex; gap: var(--e-2); align-items: flex-start; color: var(--texto-2); }
.saude-balao-item strong { color: var(--texto); }
.saude-balao-rodape { color: var(--texto-3); border-top: 1px solid var(--borda); padding-top: var(--e-2); }
/* visão geral: um cartão por item */
.saude-cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-3); margin: var(--e-4) 0 var(--e-3); }
.saude-cartao { border: 1px solid var(--borda); border-radius: var(--raio-2); padding: var(--e-3); border-top-width: 3px; }
.saude-cartao--vermelho { border-top-color: var(--erro); }
.saude-cartao--amarelo { border-top-color: var(--atencao); }
.saude-cartao--verde { border-top-color: var(--ok); }
.saude-cartao--sem { border-top-color: var(--borda-forte); }
.saude-cartao-cabeca { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-2); flex-wrap: wrap; }
.saude-cartao p { margin: 0 0 var(--e-1); font-size: var(--t-xs); color: var(--texto-2); }
@media (max-width: 1100px) { .saude-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .saude-cartoes { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ painel do gestor */
.grade--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.badge--icone { display: inline-flex; align-items: center; gap: var(--e-1); }
.badge--icone .icone { flex: none; }

.tags-filtro { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin: calc(-1 * var(--e-2)) 0 var(--e-5); }
.tags-filtro-rotulo { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-xs); font-weight: 600; color: var(--texto-2); margin-right: var(--e-1); }
.chip { display: inline-block; padding: 2px var(--e-3); border-radius: 999px; border: 1px solid var(--borda);
        background: var(--superficie); color: var(--texto-2); font-size: var(--t-xs); text-decoration: none; }
.chip:hover { border-color: var(--marca-500); color: var(--marca-600); }
.chip--ativo { background: var(--marca-100); border-color: var(--marca-500); color: var(--marca-600); font-weight: 600; }
.tag { font-size: var(--t-xs); color: var(--marca-600); }

.graficos { margin-bottom: var(--e-2); }
.grafico-titulo { font-size: var(--t-sm); margin: 0 0 var(--e-3); color: var(--texto); }
.grafico-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.grafico-linha { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) 2.5ch; gap: var(--e-2);
                 align-items: center; color: var(--texto-2); text-decoration: none; font-size: var(--t-xs);
                 border-radius: var(--raio-1); }
a.grafico-linha:hover { background: var(--superficie-2); color: var(--texto); }
.grafico-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grafico-svg { width: 100%; height: 14px; display: block; border-radius: 3px; overflow: hidden; }
.grafico-fundo { fill: var(--superficie-2); }
.grafico-seg--vermelho { fill: var(--erro); }
.grafico-seg--amarelo  { fill: var(--atencao-grafico); }
.grafico-seg--verde    { fill: var(--ok); }
.grafico-seg--sem      { fill: var(--borda-forte); }
.grafico-total { text-align: right; color: var(--texto); font-variant-numeric: tabular-nums; }
.grafico-legenda { display: flex; flex-wrap: wrap; gap: var(--e-4); font-size: var(--t-xs); color: var(--texto-3); margin: 0 0 var(--e-5); }
.grafico-legenda span { display: inline-flex; align-items: center; gap: var(--e-1); }
.legenda-cor { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legenda-cor--vermelho { background: var(--erro); }
.legenda-cor--amarelo  { background: var(--atencao-grafico); }
.legenda-cor--verde    { background: var(--ok); }
.legenda-cor--sem      { background: var(--borda-forte); }

.painel-quadro-topo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-3); }
.painel-quadro-topo h2 { font-size: var(--t-lg); margin: 0; }
.painel-agrupar { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
/* Colunas lado a lado com rolagem horizontal: 5 etapas cabem numa tela larga, mais que isso rola. */
.painel-quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: var(--e-3);
                 overflow-x: auto; padding-bottom: var(--e-3); align-items: start; }
.painel-coluna { background: var(--superficie-2); border: 1px solid var(--borda); border-top: 3px solid var(--marca-500);
                 border-radius: var(--raio-2); display: flex; flex-direction: column; min-height: 160px; }
.painel-coluna--vermelho { border-top-color: var(--erro); }
.painel-coluna--amarelo  { border-top-color: var(--atencao-grafico); }
.painel-coluna--verde    { border-top-color: var(--ok); }
.painel-coluna--sem      { border-top-color: var(--borda-forte); }
.painel-coluna-cabeca { padding: var(--e-3); font-weight: 700; display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; }
.painel-cartoes { padding: 0 var(--e-2) var(--e-2); display: flex; flex-direction: column; gap: var(--e-2); }
/* O cartão inteiro é clicável (o link do título se estende por cima), mas o selo de saúde fica acima
   para o balão explicativo continuar funcionando. */
.painel-cartao { position: relative; background: var(--superficie); border: 1px solid var(--borda);
                 border-left: 4px solid var(--borda-forte); border-radius: var(--raio-1); padding: var(--e-3);
                 display: flex; flex-direction: column; gap: var(--e-2); box-shadow: var(--sombra-1); }
.painel-cartao:hover { box-shadow: var(--sombra-2); border-color: var(--borda-forte); }
.painel-cartao--vermelho { border-left-color: var(--erro); }
.painel-cartao--amarelo  { border-left-color: var(--atencao-grafico); }
.painel-cartao--verde    { border-left-color: var(--ok); }
.painel-cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); }
.painel-cartao-topo .saude-dica { position: relative; z-index: 2; }
.painel-cartao-titulo { color: var(--texto); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; line-height: 1.3; }
.painel-cartao-titulo::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--raio-1); }
.painel-cartao-titulo:focus-visible { outline: none; }
.painel-cartao:focus-within { outline: 2px solid var(--marca-500); outline-offset: 2px; }
.painel-cartao-selos, .painel-cartao-tags { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); }
.painel-cartao .avanco-barra { width: 100%; flex: 1; }
.painel-cartao .avanco { width: 100%; }

@media (max-width: 1280px) { .grade--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .grade--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                             .grafico-linha { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 2.5ch; } }
/* No cartão só o selo (o item a item continua no balão): o código não quebra em duas linhas. */
.painel-cartao .saude-itens { display: none; }
.painel-cartao-topo .linha-sobre { white-space: nowrap; }

/* ------------------------------------------------------------------ status report */
.texto-atencao { color: var(--atencao); }
.relatorio { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-2);
             padding: var(--e-6); box-shadow: var(--sombra-1); }
.relatorio-cabeca { border-bottom: 3px solid var(--marca-800); padding-bottom: var(--e-4); margin-bottom: var(--e-5); }
.relatorio-sobre { margin: 0; font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--marca-500); }
.relatorio-titulo { margin: var(--e-1) 0; font-size: var(--t-xl); color: var(--texto); }
.relatorio-secao { margin-bottom: var(--e-6); break-inside: avoid-page; }
.relatorio-secao h3 { font-size: var(--t-md); color: var(--marca-800); margin: 0 0 var(--e-3);
                      padding-bottom: var(--e-1); border-bottom: 1px solid var(--borda); }
.relatorio-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e-3); margin-bottom: var(--e-3); }
.relatorio-kpi { border: 1px solid var(--borda); border-top: 3px solid var(--marca-500); border-radius: var(--raio-1);
                 padding: var(--e-3); display: flex; flex-direction: column; gap: var(--e-1); }
.relatorio-kpi strong { font-size: var(--t-2xl); line-height: 1; color: var(--texto); font-variant-numeric: tabular-nums; }
.relatorio-kpi span { font-size: var(--t-xs); color: var(--texto-2); }
.relatorio-kpi--vermelho { border-top-color: var(--erro); }
.relatorio-kpi--amarelo  { border-top-color: var(--atencao-grafico); }
.relatorio-kpi--verde    { border-top-color: var(--ok); }
.relatorio-linha { font-size: var(--t-sm); color: var(--texto-2); margin: 0; line-height: 1.7; }
.relatorio-atencao { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.relatorio-atencao-item { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3);
                          border: 1px solid var(--borda); border-left: 4px solid var(--atencao-grafico); border-radius: var(--raio-1); }
.relatorio-atencao-item--vermelho { border-left-color: var(--erro); }
.relatorio-atencao-item p { margin: var(--e-1) 0 0; font-size: var(--t-sm); color: var(--texto-2); }
.relatorio-atencao-item .texto-3 { font-size: var(--t-xs); margin-left: var(--e-2); }
.relatorio-atencao-item .saude-selo { flex: none; }
.relatorio-tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.relatorio-tabela th { text-align: left; background: var(--superficie-2); color: var(--texto-2); font-size: var(--t-xs);
                       padding: var(--e-2); border-bottom: 1px solid var(--borda-forte); }
.relatorio-tabela td { padding: var(--e-2); border-bottom: 1px solid var(--borda); vertical-align: top; }
.relatorio-tabela tr { break-inside: avoid; }
.relatorio-tabela .avanco { min-width: 0; margin-top: var(--e-1); }
.relatorio-tabela .avanco-barra { width: 60px; }
.relatorio-tabela--compacta td { padding: var(--e-1) var(--e-2); }
.relatorio-vazio { display: flex; align-items: center; gap: var(--e-2); color: var(--texto-3); font-size: var(--t-sm); margin: 0; }
.relatorio-lista { margin: 0; padding-left: var(--e-5); font-size: var(--t-sm); line-height: 1.7; }
.relatorio-rodape { margin-top: var(--e-5); padding-top: var(--e-3); border-top: 1px solid var(--borda);
                    font-size: var(--t-xs); color: var(--texto-3); }
@media (max-width: 1100px) { .relatorio-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .relatorio { padding: var(--e-4); } .relatorio-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Impressão / "Salvar como PDF": só o relatório, A4 deitado, cores preservadas. */
@page { size: A4 landscape; margin: 12mm; }
@media print {
  .lateral, .topo, .nao-imprimir, .aviso, .pular { display: none !important; }
  .app, .principal, .conteudo { display: block; margin: 0; padding: 0; }
  body { background: var(--superficie); }
  .relatorio { border: 0; box-shadow: none; padding: 0; }
  .relatorio a { color: inherit; text-decoration: none; }
  .tabela-rolagem { overflow: visible; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Arrastar para ordenar (quadro de tarefas e Painel do gestor): a linha mostra onde o cartão vai cair. */
.marcador-soltar { height: 3px; border-radius: 2px; background: var(--marca-500); margin: calc(-1 * var(--e-1)) 0; flex: none; }
.quadro-cartao[draggable="true"]:active, .painel-cartao[draggable="true"]:active { cursor: grabbing; }

/* Menu de prioridade no cartão (tarefa e projeto): fica acima do link que cobre o cartão. */
.menu-prioridade { display: inline-block; position: relative; z-index: 3; }
.menu-prioridade > summary { cursor: pointer; border-radius: 999px; }
.menu-prioridade > summary:focus-visible { outline: 2px solid var(--marca-500); outline-offset: 2px; }
.menu-prioridade .menu-lista { left: 0; right: auto; min-width: 210px; }
.menu-prioridade .menu-item { display: flex; align-items: center; gap: var(--e-2); width: 100%; }
.menu-prioridade .menu-item[disabled] { color: var(--texto-3); cursor: default; }
.menu-nota { display: block; padding: var(--e-2) var(--e-3) var(--e-1); color: var(--texto-3); font-size: var(--t-xs); }
/* Menu aberto fica na frente do selo de prioridade dos cartões de baixo (que também têm z-index). */
.menu-prioridade[open] { z-index: 30; }
.quadro-cartao:has(.menu-prioridade[open]), .painel-cartao:has(.menu-prioridade[open]) { z-index: 30; position: relative; }