/* Dois temas. `auto` (padrao) segue o sistema; `claro` e `escuro` sao escolha da pessoa,
   guardada em cookie e escrita em <html data-tema>. Os dois blocos escuros abaixo sao
   identicos de proposito: um responde a preferencia do sistema, o outro a escolha explicita.
   Sem preprocessador nao da para escrever a paleta uma vez so -- e duplicar 4 linhas custa
   menos que inventar indirecao. */
:root{
  color-scheme:light;
  --bg:#f6f7f9; --sup:#ffffff; --linha:#e6e8ec; --borda-card:transparent;
  --txt:#15181e; --fraco:#646d7c;
  /* azul SERRAF do logo: --cor e o fundo de acao (texto branco em cima, 5.9:1),
     --cor-txt e a marca usada como texto/borda e clareia no tema escuro */
  --cor:#1c63ac; --cor-txt:#1c63ac;
  --ok:#10b981; --alerta:#f59e0b; --erro:#ef4444; --erro-forte:#c81e1e;
  /* raio por tamanho de coisa: controle < caixa < container */
  --r-sm:7px; --r:11px; --r-lg:16px;
  /* Sombra ampla e rasa, nao o halo apertado de template. No claro e ela que separa o
     card do fundo, e por isso a borda do card e transparente ali. */
  --sombra:0 1px 2px rgba(16,24,40,.04), 0 6px 16px -8px rgba(16,24,40,.12);
  /* Tipografia. O corpo usa a fonte do sistema (rapida, zero download). O titulo usa
     Archivo, uma grotesca de contraforma quadrada que casa com o logotipo da SERRAF -
     e vem servida daqui (assets/fontes/), nao do que a maquina por acaso tem instalado. */
  --fonte:system-ui,-apple-system,"Segoe UI",sans-serif;
  --fonte-titulo:"Archivo","Bahnschrift","Segoe UI Variable Display",var(--fonte);
  /* 17 tamanhos viraram 6. Quantidade de tamanho sem escala e o que faz
     uma tela parecer montada aos pedacos. */
  --t-2xs:.72rem; --t-xs:.78rem; --t-sm:.85rem; --t-md:.92rem;
  --t-lg:1.05rem; --t-xl:1.75rem; --t-2xl:2.1rem;
}
/* escuro por preferencia do sistema, a menos que a pessoa tenha escolhido claro */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    color-scheme:dark;
    --bg:#0e1014; --sup:#171b23; --linha:#272d38; --borda-card:var(--linha);
    --txt:#e7eaef; --fraco:#8f98a8; --cor-txt:#5ca3e2; --erro-forte:#dc2626;
    --sombra:none;   /* no escuro sombra nao le; a borda e que separa */
  }
}
/* escuro por escolha explicita */
:root[data-tema="escuro"]{
  color-scheme:dark;
  --bg:#0e1014; --sup:#171b23; --linha:#272d38; --borda-card:var(--linha);
  --txt:#e7eaef; --fraco:#8f98a8; --cor-txt:#5ca3e2; --erro-forte:#dc2626;
  --sombra:none;
}
/* Archivo variavel (SIL OFL 1.1, licenca em assets/fontes/OFL.txt). Auto-hospedada:
   sem CDN, sem requisicao a terceiro, e sem depender de fonte instalada na maquina.
   Um arquivo por subconjunto - o navegador so baixa o que a pagina realmente usa. */
@font-face{
  font-family:"Archivo";
  src:url("fontes/archivo-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  src:url("fontes/archivo-latin-ext.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font:15px/1.55 var(--fonte)}
a{color:inherit;text-decoration:none}
h1,h2,h3,.kpi b,.marca{font-family:var(--fonte-titulo)}
h1{font-size:var(--t-xl);font-weight:600;letter-spacing:.005em;line-height:1.15;margin:0 0 1.25rem}
h2{font-size:var(--t-lg);font-weight:600;margin:0 0 .75rem}
.marca{letter-spacing:.01em}
/* numero de painel e de tabela alinha em coluna: sempre tabular */
.kpi b,.rank-n,.conta,.col-n,.tabela td{font-variant-numeric:tabular-nums}
small{color:var(--fraco)}

/* Fica grudada no topo: o painel e uma pagina longa e perder a navegacao no meio dela
   e o tipo de coisa que so aparece usando. */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.5rem;
  padding:0 1.5rem;height:56px;border-bottom:1px solid var(--linha);
  background:var(--sup);
  background:color-mix(in srgb,var(--sup) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(12px)}
.marca{display:flex;align-items:center;font-weight:600;white-space:nowrap}
.marca .amp{color:var(--cor-txt)}
/* O nome do departamento na barra e no chip do projeto usa a cor do proprio departamento,
   como ja fazem as etiquetas de area -- mesmo precedente, mesmo risco assumido: a cor sai
   de <input type=color> e ninguem garante contraste. O peso maior compensa um pouco. */
.marca .dep-marca{font-weight:600}
.tag.dep{font-weight:600}
/* Monograma: a marca deixa de ser so texto. E a unica coisa cheia de cor da barra. */
.monograma{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:.55rem;
  border-radius:var(--r-sm);background:var(--cor);color:#fff;
  font:600 var(--t-2xs)/1 var(--fonte-titulo);letter-spacing:.03em}
.topbar nav{display:flex;gap:1rem;margin-right:auto}
.topbar nav a{color:var(--fraco);font-size:var(--t-sm)}
.topbar nav a{position:relative;padding:.15rem 0}
.topbar nav a:hover{color:var(--txt)}
/* Onde estou: faltava por completo. Sem isso a barra e so uma fileira de links iguais. */
.topbar nav a[aria-current]{color:var(--txt);font-weight:600}
.topbar nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-18px;
  height:2px;background:var(--cor-txt);border-radius:2px}
.eu{display:flex;align-items:center;gap:.5rem;font-size:var(--t-sm)}
.sair{color:var(--fraco);font-size:var(--t-sm);margin-left:.5rem}
.avatar{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  color:#fff;font-size:var(--t-xs);font-weight:600}

.wrap{max-width:1080px;margin:0 auto;padding:2rem 1.5rem}
/* Tres superficies, nao uma. Conteudo e elevado (--sup + sombra), analise de apoio e
   rasa (.quieto), e formulario e recuado (fundo --bg): ler e preencher nao podem
   parecer a mesma coisa. Sem isso, oito blocos iguais empilhados nao tem para onde olhar. */
.card{background:var(--sup);border:1px solid var(--borda-card);border-radius:var(--r);
  box-shadow:var(--sombra);padding:1.25rem;margin-bottom:1rem;display:block}
.quieto{background:transparent;box-shadow:none;border-color:var(--linha)}
/* Formulario de criacao e acao, nao conteudo: mesma superficie recuada da .revelavel. */
form.card{background:var(--bg);box-shadow:none}
.projeto:hover{border-color:var(--cor-txt)}
.meta{color:var(--fraco);font-size:var(--t-sm);margin:.5rem 0}
/* Estado vazio ensina o proximo passo: uma frase que diz o que aconteceu,
   uma que diz o que fazer, e o botao da acao quando ela existe nesta tela. */
.vazio{color:var(--fraco);text-align:center;padding:2.5rem 1rem;font-size:var(--t-sm)}
.vazio b{display:block;color:var(--txt);font-size:var(--t-lg);font-weight:600;margin-bottom:.3rem}
.vazio .botao{display:inline-block;margin:1rem 0 0}
/* Coluna vazia. Era `.lista:empty::after`, que nunca disparou: o PHP deixa quebra de linha
   dentro da div e `:empty` nao casa com no de texto. Agora e elemento de verdade. */
.vazio-col{margin:0;padding:1.3rem .5rem;text-align:center;font-size:var(--t-2xs);
  color:var(--fraco);border:1px dashed var(--linha);border-radius:var(--r-sm)}

label{display:block;font-size:var(--t-xs);color:var(--fraco);margin-bottom:.75rem}
input,select,textarea{width:100%;margin-top:.25rem;padding:.55rem .7rem;font:inherit;
  color:var(--txt);background:var(--bg);border:1px solid var(--linha);border-radius:var(--r-sm)}
input:focus,select:focus{outline:2px solid var(--cor-txt);outline-offset:-1px;border-color:transparent}
/* flex, nao grid auto-fit: campo que so faz sentido em par (Inicio/Prazo) vai num .par,
   que quebra linha inteiro em vez de deixar o Prazo orfao numa fileira de baixo. */
.linha{display:flex;flex-wrap:wrap;gap:0 1rem}
.linha > label{flex:1 1 170px}
.par{display:flex;gap:0 1rem;flex:1 1 22rem}
.par > label{flex:1 1 9rem}
button{padding:.55rem 1.1rem;font:inherit;font-weight:500;color:#fff;background:var(--cor);
  border:0;border-radius:var(--r-sm);cursor:pointer}
button:hover{filter:brightness(1.1)}
.mini{padding:.3rem .6rem;font-size:var(--t-xs);background:transparent;color:var(--fraco);
  border:1px solid var(--linha)}

.tag{display:inline-block;padding:.15rem .5rem;border-radius:99px;font-size:var(--t-2xs);
  background:var(--bg);border:1px solid var(--linha);color:var(--fraco)}

/* Escala de intensidade. O peso visual diz quanto a coisa pede acao:
   fraco = nao pede nada | contorno = pede olhar | cheio = pede acao agora.
   Cheio e caro: so a prioridade critica ganha, senao nada mais chama atencao. */
.st-backlog,.st-a_fazer,.st-nao_iniciada{color:var(--fraco);border-color:var(--linha)}
.st-em_andamento{color:var(--cor-txt);border-color:currentColor}
.st-revisao{color:var(--cor-txt);border-color:currentColor;font-weight:600;
  background:color-mix(in srgb,var(--cor) 14%,transparent)}
.st-pausado{color:var(--alerta);border-color:currentColor}
.st-concluido,.st-concluida{color:var(--ok);border-color:currentColor}
.st-cancelado{color:var(--fraco);border-color:transparent;text-decoration:line-through}

/* Prioridade nao usa mais estas pilulas -- virou `.pri` (icone) em 01/09/2026. Sobrou a
   critica porque `admin.php` e `logs.php` a pegam emprestada para "Bloqueado +N min" e
   para acao destrutiva na trilha: e a pilula de "isto queima", nao a de prioridade. */
.pr-critica{background:var(--erro-forte);border-color:var(--erro-forte);color:#fff;font-weight:600}

.chip{display:inline-flex;align-items:center;gap:.3rem;margin:0 .3rem .3rem 0;padding:.2rem .55rem;
  border:1px solid var(--linha);border-radius:99px;font-size:var(--t-xs);cursor:pointer;
  white-space:nowrap}   /* rotulo de duas palavras nao pode quebrar dentro da pilula */
.chip.on{border-color:var(--cor-txt);color:var(--cor-txt)}
.tag.novo{color:var(--cor-txt);border-color:currentColor;font-weight:600}

/* Prioridade como sinal, nao como pilula de texto. Ocupa 17px numa linha que ja carrega
   prazo, projeto, area e status -- a palavra "Critica" era mais um bloco disputando
   espaco, e era ela que empurrava a linha para a terceira altura. */
.pri{display:inline-flex;align-items:center;flex:0 0 auto}
.pri-critica{color:var(--erro-forte)}
.pri-alta{color:var(--alerta)}

/* "+N" das etiquetas que nao couberam. Abre no hover e tambem no foco, para quem chega
   pelo teclado -- onde o container e focavel. Dentro do card de projeto ele nao e, porque
   o card inteiro ja e um <a>: la o `title` e que carrega os nomes. */
.mais-tags{position:relative;display:inline-flex}
.tag.mais{cursor:default;color:var(--fraco);border-style:dashed}
.mais-tags .escondidas{position:absolute;left:0;top:calc(100% + .3rem);z-index:30;
  display:none;gap:.3rem;padding:.45rem .5rem;border-radius:var(--r);
  background:var(--sup);border:1px solid var(--linha);box-shadow:var(--sombra);
  white-space:nowrap}
.mais-tags:hover .escondidas,.mais-tags:focus-within .escondidas{display:flex}

.chip input{width:auto;margin:0}

.barra{height:4px;background:var(--linha);border-radius:99px;overflow:hidden}
.barra i{display:block;height:100%;background:var(--ok)}

.tabela{width:100%;border-collapse:collapse;background:var(--sup);
  border:1px solid var(--linha);border-radius:var(--r-sm);overflow:hidden}
.tabela th,.tabela td{padding:.75rem;text-align:left;border-bottom:1px solid var(--linha);
  font-size:var(--t-sm);
  /* baseline, nao top: numa celula de varias linhas o `top` deixava o texto simples de uma
     coluna 20px acima do conteudo da vizinha. Baseline casa a PRIMEIRA linha de todas. */
  vertical-align:baseline}
.tabela th{font-size:var(--t-xs);color:var(--fraco);font-weight:500;text-transform:uppercase}
.inativo{opacity:.45}

.login{max-width:340px;margin:8vh auto}
.login h1{font-size:var(--t-xl)} .login span{color:var(--cor-txt)}
.login .sub,.dica{color:var(--fraco);font-size:var(--t-xs)}
.login button{width:100%;margin-top:.5rem}
.dica{margin:1rem 0 0;text-align:center}
.erro{color:var(--erro);font-size:var(--t-sm)}
.flash{background:var(--sup);border:1px solid var(--cor-txt);border-radius:var(--r-sm);
  padding:.6rem .9rem;font-size:var(--t-sm)}

/* ---- paginas de projeto / tarefa ---- */
.cabecalho{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1.25rem}
.cabecalho h1{margin:0}
.cabecalho h1 small{color:var(--fraco);font-weight:400;font-size:var(--t-sm)}
.botao{margin-left:auto;padding:.5rem 1rem;border-radius:var(--r-sm);background:var(--cor);color:#fff;font-size:var(--t-sm)}
.botao:hover{filter:brightness(1.12)}
.botao:focus-visible{outline:2px solid var(--cor-txt);outline-offset:2px}
.botao.sec{background:transparent;color:var(--cor-txt);border:1px solid currentColor}
.cabecalho .botao ~ .botao{margin-left:0}
/* Alternador de formato: nao e navegacao, e a mesma pagina com outro desenho.
   Por isso e um par de links com aria-current, nao um botao de acao. */
.alterna{display:flex;border:1px solid var(--linha);border-radius:var(--r-sm);overflow:hidden}
.alterna a{padding:.3rem .7rem;font-size:var(--t-xs);color:var(--fraco)}
.alterna a:hover{color:var(--txt)}
.alterna a[aria-current]{background:var(--sup);color:var(--txt);font-weight:600}

.acoes{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.acoes .botao{margin-left:0}

/* Acao primaria sem <details> e sem JS: um <a class="botao"> aponta para a secao,
   que so aparece quando e o :target. .aberto forca aberto (estado vazio da tela). */
.revelavel:not(:target):not(.aberto){display:none}
.revelavel{scroll-margin-top:1rem}
.card.revelavel{background:var(--bg);box-shadow:none}
.revelavel:not(.card),.editar-tarefa{margin:1rem -1.25rem 0;padding:1rem 1.25rem;
  background:var(--bg);border-block:1px solid var(--linha)}
.revelavel h2,.revelavel h3,.editar-tarefa h2{margin:0 0 .75rem;font-size:var(--t-md)}
.secao{margin:2rem 0 .75rem;font-size:var(--t-xs);color:var(--fraco);text-transform:uppercase;letter-spacing:.06em}
.trilha{color:var(--fraco);font-size:var(--t-sm);margin:0 0 .5rem}
.trilha a:hover{color:var(--cor-txt)}
.escopo{margin:0 0 1rem;white-space:pre-wrap}
.vermelho{color:var(--erro);font-weight:600}
.topo-card{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.topo-card h2,.topo-card h3{margin:0;font-size:var(--t-lg)}
.areas-linha,.stacks-area,.relacionados{margin:.6rem 0;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.resumo{margin:1rem 0;gap:1rem}
.resumo div{font-size:var(--t-md);flex:1 1 8rem}
.sugestao{color:var(--fraco);font-size:var(--t-xs);display:inline-flex;align-items:center;gap:.25rem;flex-wrap:wrap}
.mini-av{width:22px;height:22px;font-size:var(--t-2xs)}

/* Filtrar e Limpar sao um par: quebram juntos, em vez de o Limpar sobrar sozinho
   numa linha de baixo. */
.acoes-filtro{display:flex;align-items:center;gap:.5rem;margin-left:auto}

/* Linha horizontal de controles. `label` e `input` carregam margem vertical porque o
   formulario empilhado precisa dela -- mas aqui `align-items:center` conta a margem na
   caixa do item, e meio pixel de margem vira desalinhamento visivel. Espaco vem do gap. */
.filtros,.catalogo,.catalogo-form,.stacks{align-items:center}
.filtros > *,.catalogo > *,.catalogo-form > *,.stacks > *{margin-block:0}
.filtros{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.filtros{gap:.45rem}
.filtros input,.filtros select{width:auto;margin:0;flex:0 1 8.5rem;min-width:6rem}
/* `label` e block por padrao e vira item flex aqui, sem tamanho proprio: encolhia ate o
   texto "De"/"Ate" bater no campo vizinho e ser cortado. Flex proprio com gap resolve os
   dois -- o rotulo para de encolher e ganha respiro antes do campo. */
.filtros label{display:flex;align-items:center;gap:.4rem;flex:0 0 auto;margin:0}
.filtros input[type=search]{flex:1 1 11rem}
.filtros .chip input{margin:0;width:auto;min-width:0}   /* o min-width dos filtros esticava a caixa do chip */

.area{border-left:3px solid var(--area,var(--cor-txt))}
.timeline{list-style:none;margin:.75rem 0;padding:0;border-left:2px solid var(--linha);margin-left:.4rem}
.timeline li{display:flex;align-items:center;gap:.6rem;padding:.5rem 0 .5rem 1rem;position:relative;flex-wrap:wrap}
.timeline li::before{content:"";position:absolute;left:-6px;top:1.05rem;width:10px;height:10px;
  border-radius:50%;background:var(--linha);border:2px solid var(--sup)}
.timeline .tf-concluida::before,.timeline li.tf-concluida::before{background:var(--ok)}
.timeline .tf-em_andamento::before{background:var(--cor)}
.timeline time{flex:0 0 8.5rem;font-size:var(--t-xs);color:var(--fraco);font-variant-numeric:tabular-nums}
.timeline .titulo{flex:1;min-width:12rem;font-size:var(--t-md)}
.timeline .titulo:hover{color:var(--cor-txt)}
.tf-concluida .titulo{color:var(--fraco);text-decoration:line-through}
.timeline select{width:auto;margin:0;padding:.2rem .4rem;font-size:var(--t-xs)}
.vazio-mini{color:var(--fraco);font-size:var(--t-sm);margin:.75rem 0}

details{margin-top:.75rem}
summary{cursor:pointer;font-size:var(--t-xs);color:var(--fraco);padding:.35rem 0}
summary:hover{color:var(--cor-txt)}
details[open] summary{margin-bottom:.5rem}
.inline{display:inline}
.inline select{width:auto;margin:0;padding:.2rem .4rem;font-size:var(--t-xs)}
.x{background:none;border:0;color:var(--fraco);padding:0 .25rem;cursor:pointer;font-size:var(--t-lg)}
.x:hover{color:var(--erro);filter:none}
.perigo{color:var(--erro);border-color:var(--erro);margin-top:.5rem}

.post{display:flex;gap:.75rem;align-items:flex-start}
.post .meta{margin:0 0 .2rem}
.post p:last-child{margin:0;white-space:pre-wrap}
.post form{margin-left:auto}

/* ---- quadro kanban ---- */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(200px,1fr));gap:.75rem;align-items:stretch}
.kanban-proj{grid-template-columns:repeat(5,minmax(165px,1fr))}   /* STATUS_PROJ tem 5 */
@media (max-width:900px){ .kanban,.kanban-proj{grid-template-columns:1fr} }
/* Inverte o peso: a coluna e so o continente (recuada), o cartao e o objeto (elevado). */
.coluna{background:color-mix(in srgb,var(--linha) 35%,transparent);
  border:1px solid transparent;border-radius:var(--r);padding:.75rem;min-height:8rem}
.coluna h2{display:flex;align-items:center;gap:.4rem;font-size:var(--t-xs);color:var(--fraco);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 .6rem}
.conta{margin-left:auto;padding:.05rem .4rem;border-radius:99px;background:var(--bg);font-size:var(--t-2xs)}
.coluna.alvo{border-color:var(--cor-txt);background:color-mix(in srgb,var(--cor) 8%,transparent)}

/* Limite de WIP: sinal, nao cadeado. Estourar nao impede mover cartao -- travar o
   quadro quebraria o caminho sem JS e o de teclado por uma regra de processo. */
.wip{margin-left:auto;padding:.05rem .4rem;border-radius:99px;font-size:var(--t-2xs);
  font-variant-numeric:tabular-nums;border:1px solid var(--linha);color:var(--fraco)}
.coluna.cheia .wip{color:var(--alerta);border-color:currentColor}
.coluna.estourada .wip{background:var(--erro-forte);border-color:var(--erro-forte);color:#fff;font-weight:600}
.coluna.cheia{border-color:var(--alerta)}
.coluna.estourada{border-color:var(--erro-forte)}
.wip + .conta{margin-left:.35rem}
.aviso-wip[hidden]{display:none}
.aviso-wip{margin:0 0 .6rem;font-size:var(--t-2xs);color:var(--erro);line-height:1.35}
.lista{display:flex;flex-direction:column;gap:.5rem;min-height:3rem}

.card-tarefa{background:var(--bg);border:1px solid var(--linha);border-left:3px solid var(--area,var(--cor-txt));
  border-radius:var(--r-sm);padding:.6rem .7rem;cursor:grab}
.card-tarefa:active{cursor:grabbing}
.card-tarefa.arrastando{opacity:.4}
.card-tarefa > a{display:block;font-size:var(--t-sm);line-height:1.35}
.card-tarefa > a:hover{color:var(--cor-txt)}
.rodape-card{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.5rem 0 0}
/* sem margin-left:auto: quando as tags quebram, o avatar ficava sozinho numa
   linha so dele, encostado a direita, parecendo perdido */
.card-proj .barra{margin:.45rem 0 .3rem}
.card-proj .rodape-card{margin:.3rem 0 0}
.mover{margin-top:.4rem}
.mover select{width:100%;margin:0;padding:.18rem .3rem;font-size:var(--t-2xs);
  background:transparent;border-color:transparent;color:var(--fraco)}
.mover select:hover{border-color:var(--linha)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---- telas estreitas: a topbar nao pode empurrar a pagina ---- */
/* Faixa do meio (tablet e notebook pequeno): a barra e flex sem wrap, entao em 1024px
   ela nao quebrava -- vazava. O bloco do usuario saia 67px para fora da tela e levava
   "Perfil" e "Sair" junto, sem nenhum aviso: `scrollWidth` do documento continuava igual
   porque o estouro e do header, nao do conteudo. Some o nome (o avatar ja identifica) e
   a busca encolhe; o nav para de quebrar "Meu trabalho" no meio. */
@media (max-width:1150px){
  .nome-eu{display:none}
  .busca-topo input{width:9rem}
  .topbar{gap:1rem}
  .topbar nav a{white-space:nowrap}
}

@media (max-width:700px){
  .topbar{height:auto;flex-wrap:wrap;gap:.5rem 1rem;padding:.6rem 1rem}
  .topbar nav{order:3;width:100%;margin:0}
  .nome-eu{display:none}
  .eu{margin-left:auto;font-size:var(--t-sm)}
  .wrap{padding:1.25rem 1rem}
  .cabecalho .botao{margin-left:0}
  .filtros input,.filtros select{flex:1 1 8rem;min-width:0}
  .timeline time{flex:0 0 100%}
  .resumo div{flex:1 1 40%}
}
@media (max-width:700px){
  /* Tabela larga rola dentro de um contêiner proprio. `display:block` no <table>
     tambem rolava, mas vazava o scrollWidth para o documento e a pagina inteira
     ganhava rolagem horizontal -- alem de perder o layout de tabela. */
  .rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rolagem .tabela{min-width:34rem}
  .stacks .chips{grid-template-columns:repeat(auto-fill,minmax(7rem,1fr))}
}

/* Titulo colado (URL, id longo) nao pode esticar a coluna inteira. */
.card-tarefa > a,.timeline .titulo,.post p,.escopo{overflow-wrap:anywhere}
.tabela td{overflow-wrap:break-word}   /* break-word, nao anywhere: nao parte "Gestao" no meio */

.quando{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--fraco)}
.paginacao{display:flex;align-items:center;gap:1rem;justify-content:center;margin:1rem 0}
.rank{display:flex;align-items:center;gap:.6rem;padding:.4rem 0}
.rank-nome{flex:0 0 30%;font-size:var(--t-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .barra{flex:1}
.rank .barra i{background:var(--cor-txt)}   /* verde aqui leria como 'concluido' */
.rank-n{width:3rem;text-align:right;font-variant-numeric:tabular-nums;font-size:var(--t-sm)}
.catalogo{display:flex;align-items:center;gap:.5rem;margin:.35rem 0;flex-wrap:wrap}
.catalogo-form{display:flex;align-items:center;gap:.5rem}
.catalogo-form input[name=nome]{width:auto;flex:0 1 15rem;min-width:6rem;margin:0}
.catalogo-form input[type=color]{width:34px;height:30px;padding:2px;margin:0;flex:0 0 auto}
.catalogo small{color:var(--fraco);font-size:var(--t-xs)}
.catalogo > small{flex:0 0 auto}   /* era `1 0 100%`: a contagem tomava a linha toda e
   jogava o botao de remover para uma terceira, com a do meio vazia. O flex-wrap do
   .catalogo ja quebra sozinho quando a tela e estreita. */
/* A celula de stacks era um amontoado: chips quebrando linha com o botao no meio.
   Agora os chips ocupam a largura toda e a acao fica embaixo, alinhada a direita. */
/* Os chips vivem numa caixa propria: assim o botao alinha com o BLOCO de stacks e nao
   com a ultima linha quebrada -- que era o que fazia o Salvar parecer solto no ar. */
.stacks{display:flex;align-items:flex-start;gap:.75rem}   /* flex-end largava o Salvar
   sozinho no rodape da lista de chips, desalinhado do Editar/Desativar da mesma linha */
/* Malha, nao fileira: com `auto-fill` os chips formam colunas do tamanho do maior rotulo
   e quebram sozinhos conforme a largura. Sem isso viravam uma linha unica de 1800px que
   so cabia rolando de lado -- o catalogo cresce, a tela nao. */
.stacks .chips{flex:1;min-width:0;display:grid;gap:.35rem;
  grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr))}
.stacks .chips .chip{margin:0;justify-content:flex-start;overflow:hidden}
.stacks .chips .chip span{overflow:hidden;text-overflow:ellipsis}

.stacks button{flex:0 0 auto}
.chip-stack{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
/* Equipe: a celula mostra so as stacks da pessoa (tags + "+N"); o catalogo inteiro mudou
   para o painel revelavel #stk, numa caixa rolavel com busca, para nao esticar a linha. */
.stacks-cel{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.stack-lista{max-height:9.5em;overflow-y:auto;display:grid;gap:.35rem;margin:.5rem 0;
  grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));
  padding:.5rem;border:1px solid var(--linha);border-radius:var(--r)}
.stack-lista .chip{margin:0;justify-content:flex-start;overflow:hidden}
.stack-lista .chip span,.stack-lista .chip{overflow:hidden;text-overflow:ellipsis}
.stack-lista .chip.oculto{display:none}
.stacks-editor .stack-busca{width:100%;max-width:22rem}

.busca-topo{margin-left:auto;position:relative;display:flex;align-items:center}
.busca-topo .ico{position:absolute;left:.65rem;color:var(--fraco);pointer-events:none}
.busca-topo input{width:13rem;margin:0;padding:.35rem .6rem .35rem 2.1rem;font-size:var(--t-sm);border-radius:99px}
.topbar nav{margin-right:0}
mark{background:color-mix(in srgb,var(--alerta) 35%,transparent);color:inherit;
  padding:0 .1em;border-radius:3px}
@media (max-width:700px){
  .busca-topo{order:4;width:100%;margin:0}
  .busca-topo input{width:100%}
}

.historico ol{list-style:none;margin:.5rem 0 0;padding:0}
.historico li{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.4rem 0;border-top:1px solid var(--linha);font-size:var(--t-sm)}
.historico time{flex:0 0 9rem;color:var(--fraco);font-variant-numeric:tabular-nums;font-size:var(--t-xs)}

/* `position:relative` nao e enfeite: sem ele o contêiner nao e bloco conteiner dos
   filhos `position:absolute`, e o rotulo `.sr` (1px, para leitor de tela) fica parado
   na coordenada de dentro da tabela larga -- esticando o documento inteiro. Elemento
   absoluto so e recortado por ancestral que esteja na sua cadeia de bloco conteiner. */
.rolagem{position:relative;max-width:100%}

/* Largura de coluna declarada: no layout automatico a coluna de stacks crescia ate caber
   tudo numa linha so, e a tabela inteira estourava a tela. Travada, o conteudo quebra. */
.travada{table-layout:fixed}
.travada .c-pessoa{width:15rem}   /* 13rem nao cabia "testeclaude@serraf.com.br" com o avatar */
.travada .c-cargo{width:8rem}    /* 6rem partia "Programador" no meio: nao cabia nem a palavra */
.travada .c-acao{width:9rem}

/* Coluna de acao da tabela. O link de editar e `.botao` (que traz `margin-left:auto`) e os
   outros sao `<button class="mini">` dentro de `<form>`, que e bloco: cada um empilhava com
   largura e alinhamento proprios. O grid iguala a largura e o espacamento dos tres. */
/* Celula de pessoa: o nome numa linha, e-mail e etiquetas na seguinte, com o mesmo
   respiro sempre. Era `<br>` mais <small> e <span> soltos no fluxo inline: e-mail curto
   deixava a etiqueta na mesma linha, e-mail longo empurrava para uma terceira, e cada
   pessoa da tabela ficava com uma altura e um espacamento diferentes. */
.pessoa-cel{display:grid;gap:.35rem}
.pessoa-nome{display:flex;align-items:center;gap:.45rem}
.pessoa-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.pessoa-meta small{color:var(--fraco)}

.acoes-celula{display:grid;gap:.35rem}
.acoes-celula form{margin:0}
.acoes-celula .botao,.acoes-celula button{width:100%;margin:0;text-align:center}

/* Ver senha. O botao entra por JS (assets/app.js), entao estas regras so valem quando ele
   existe -- sem JS o campo fica como sempre foi, e o padding extra nao sobra do lado.
   `.com-olho .ver-senha` precisa dos dois niveis: `.login button{width:100%}` (0,1,1)
   ganharia de um `.ver-senha` (0,1,0) e o botao esticaria a largura do campo. */
.com-olho{position:relative}
.com-olho input{padding-right:2.6rem}
.com-olho .ver-senha{position:absolute;right:.3rem;bottom:.3rem;width:auto;margin:0;
  display:flex;align-items:center;padding:.35rem;background:transparent;border:0;
  border-radius:var(--r-sm);color:var(--fraco);font-size:var(--t-2xs);font-weight:400;
  cursor:pointer}
.com-olho .ver-senha:hover{color:var(--cor-txt)}

.sem-borda{border:0;background:transparent}
.num-carga{white-space:nowrap}
.carga-barra{display:inline-block;width:7rem;height:8px;background:var(--linha);
  border-radius:99px;overflow:hidden;vertical-align:middle;margin-right:.5rem}
.carga-barra i{display:block;height:100%;background:var(--cor-txt)}
.rank-n small{margin-left:.3rem;font-size:var(--t-2xs)}

.anexo{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.45rem 0;
  border-bottom:1px solid var(--linha)}
.anexo a{font-size:var(--t-sm)}
.anexo a:hover{color:var(--cor-txt);text-decoration:underline}
.anexo form{margin-left:auto}
input[type=file]{width:auto;flex:1 1 12rem;min-width:0;padding:.35rem;font-size:var(--t-xs)}
/* o botao nativo do file vem com a cor do sistema e estoura no tema escuro */
input[type=file]::file-selector-button{margin-right:.6rem;padding:.3rem .7rem;font:inherit;
  font-size:var(--t-xs);color:var(--txt);background:var(--sup);cursor:pointer;
  border:1px solid var(--linha);border-radius:var(--r-sm)}
input[type=file]::file-selector-button:hover{border-color:var(--cor-txt);color:var(--cor-txt)}
.sem-dono{border-color:var(--alerta)}
.sem-dono summary{color:var(--txt);font-size:var(--t-sm)}

/* ---- painel ---- */
/* Uma faixa continua dividida por fio, no lugar de quatro caixas identicas -- que e a
   assinatura visual de todo painel gerado. Numero a esquerda, rotulo embaixo dele. */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  background:var(--sup);border:1px solid var(--borda-card);border-radius:var(--r);
  box-shadow:var(--sombra);margin-bottom:1rem;overflow:hidden}
.kpi{padding:1rem 1.25rem;border-left:1px solid var(--linha)}
.kpi:first-child{border-left:0}
.kpi b{display:block;font-size:var(--t-2xl);font-weight:600;line-height:1.05;letter-spacing:-.015em}
.kpi small{display:block;margin-top:.15rem;color:var(--fraco);font-size:var(--t-2xs);
  text-transform:uppercase;letter-spacing:.05em}
.kpi i{font-size:var(--t-sm);font-style:normal;vertical-align:super}
.kpi.ruim b,.ruim{color:var(--erro)} .bom{color:var(--ok)}

.colunas{display:flex;align-items:flex-end;gap:.5rem;height:130px;margin-top:.5rem}
.col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:.25rem}
.col i{display:block;width:100%;background:var(--cor-txt);border-radius:4px 4px 0 0;min-height:2px}
.col-n{font-size:var(--t-xs);color:var(--fraco);font-variant-numeric:tabular-nums}
.col small{font-size:var(--t-2xs);color:var(--fraco)}

.duas{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:900px){ .duas{grid-template-columns:1fr} }
.duas h2 small{font-weight:400;text-transform:none;letter-spacing:0}

.risco{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--linha)}
.risco:hover .risco-nome{color:var(--cor-txt)}
.risco-nome{flex:1;font-size:var(--t-sm);min-width:0}
.prazo-chip{flex:0 0 auto;min-width:4.5rem;text-align:center;padding:.15rem .5rem;border-radius:99px;
  font-size:var(--t-2xs);background:var(--bg);border:1px solid var(--linha);color:var(--fraco)}
.prazo-chip.apertado{color:var(--alerta);border-color:currentColor}
.prazo-chip.vencido{color:var(--erro);border-color:currentColor;font-weight:600}

.historico-lista{list-style:none;margin:0;padding:0}
.historico-lista li{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.4rem 0;border-bottom:1px solid var(--linha);font-size:var(--t-sm)}
.historico-lista time{flex:0 0 5.5rem;color:var(--fraco);font-size:var(--t-xs);font-variant-numeric:tabular-nums}
.historico-lista a:hover{color:var(--cor-txt)}

.ico{display:block;flex:0 0 auto}
/* Tres estados, nao um interruptor: "sistema" e um valor de verdade e precisa ser
   alcancavel de volta depois que a pessoa escolheu claro ou escuro. */
.tema{display:flex;gap:1px;padding:2px;margin:0 .35rem 0 .1rem;
  border:1px solid var(--linha);border-radius:99px}
.tema button{display:grid;place-items:center;width:24px;height:24px;padding:0;
  background:transparent;color:var(--fraco);border-radius:50%}
.tema button:hover{background:var(--bg);color:var(--txt);filter:none}
.tema button[aria-pressed]{background:var(--bg);color:var(--cor-txt)}
.tema .ico{width:14px;height:14px}

.sino{position:relative;display:inline-flex;color:var(--fraco);padding:0 .2rem;margin-right:.65rem}
.sino:hover{color:var(--txt)}
.sino.tem{color:var(--cor-txt)}
.sino i{position:absolute;top:-.4rem;left:.75rem;background:var(--erro);color:#fff;
  font-style:normal;font-size:var(--t-2xs);font-weight:600;line-height:1;
  padding:.15rem .3rem;border-radius:99px}
.card .post{border-bottom:1px solid var(--linha);padding:.6rem 0;margin:0}
.card .post:last-child{border-bottom:0}

/* ---------- impressao ----------
   Papel nao tem barra, botao nem campo: o que sobra e o conteudo. Sem este bloco a
   .topbar estourava 375px alem da folha em TODAS as paginas -- era ela, e nao o conteudo,
   que empurrava o texto e comia a margem direita; "Meu trabalho" quebrava no meio e o
   bloco do usuario caia fora da pagina. A tabela de Equipe gastava uma folha por pessoa
   com uma coluna de 16 checkboxes, um por linha.

   A paleta e redefinida aqui em vez de espalhar `color:#000` pelas regras: quem imprime
   no tema escuro levaria o fundo #0e1014 para o papel. Mesma razao da regra 17 -- valor
   de cor sai de token, inclusive no print.

   O que NAO some: <select> e checkbox de stack carregam informacao (status da tarefa,
   stacks da pessoa). Eles perdem a aparencia de controle e viram texto. Esconder era
   mais curto e apagava dado do relatorio. */
@media print{
  :root{
    color-scheme:light;
    --bg:#fff; --sup:#fff; --linha:#c8ccd4; --borda-card:#c8ccd4;
    --txt:#000; --fraco:#3f4652; --cor:#000; --cor-txt:#000; --sombra:none;
  }
  @page{margin:14mm 12mm}
  body{background:#fff}

  /* 1. interacao nao vai para o papel */
  .topbar,.flash,.botao,button,.x,.sino,.tema,
  .revelavel,details:not(.card){display:none!important}
  /* campo em branco no papel e so um retangulo: o formulario inteiro sai fora.
     O de stacks fica (volta como tag na regra 3), e form so com <select> sobrevive
     porque o seletor pede um campo de digitacao. */
  /* !important porque `.card` (0,1,0) vence `form:has(textarea)` (0,0,2) -- o form do
     feed e um card, e voltava a aparecer sem isto */
  form:not(.stacks):not(.catalogo-form):has(input:not([type=hidden])),
  form:has(textarea){display:none!important}
  /* A excecao entra como :not() no proprio seletor, nao como regra depois:
     `form:has(input...)` pontua (0,1,2) e ganha de um `form.stacks` (0,1,1) escrito
     embaixo, por mais !important que leve. Foi assim que a coluna de stacks da pessoa
     saiu em branco na primeira tentativa. */
  .card > .catalogo-form{display:none!important}  /* o de criar area; o de editar mora em .catalogo */

  /* 2. controle que carrega dado vira texto */
  select,.catalogo-form input{appearance:none;border:0;padding:0;background:none;
         color:var(--txt);font:inherit;width:auto}
  input[type=color]{display:none}   /* a cor da area nao vira texto: some */
  /* a inicial e branca sobre o fundo colorido do avatar, e navegador nao imprime fundo:
     sem isto o responsavel some do papel. O fundo vem em style inline, dai o !important. */
  .avatar{background:none!important;color:var(--txt);border:1px solid var(--linha)}
  /* mesma armadilha: .tag de status/prioridade e texto claro sobre fundo colorido */
  .tag{background:none!important;color:var(--txt)!important;border:1px solid var(--linha)}

  /* 3. stacks da pessoa: so as marcadas, sem a caixa de marcar */
  .chip:not(.on){display:none}
  .chip input{display:none}
  .chip{border:1px solid var(--linha)}
  /* `.stacks .chips` e um grid de colunas iguais na tela; com 3 chips sobrando no papel
     cada um esticava para um terco da coluna. Precisa dos dois niveis para vencer (0,2,0). */
  .stacks .chips{display:inline}
  .stacks .chips .chip{overflow:visible}
  /* o nome da area encolhe ao texto, senao ocupa 15rem e joga a contagem para a linha seguinte */
  .catalogo-form input[name=nome]{flex:0 0 auto}

  /* 4. estrutura: sem sombra, com borda, e nada de rolagem no papel */
  .card{box-shadow:none;border:1px solid var(--linha)}
  .rolagem{overflow:visible}
  a{color:inherit;text-decoration:none}

  /* 5. onde a folha pode quebrar. Sem isto um card parte no meio e o titulo fica
     orfao no rodape da pagina anterior -- a "quebra repentina" mais visivel. */
  .card,tr,.item,.tarefa,.projeto{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  .wrap{max-width:none;padding:0}
}