/* Modo claro/escuro: mesmo mecanismo do admin do Django (data-theme no
, guardado em localStorage sob a chave "theme") — continuamos
reaproveitando o admin/js/theme.js dele pra aplicar o tema, sem
reescrever essa parte. Só dois modos (claro/escuro, sem "auto"/sistema)
e o padrão é escuro — por isso o bloco escuro é o que casa com :root
(sem data-theme definido cai no escuro), e "light" é a exceção
explícita. A escolha em si mora no menu de engrenagem
(core/_cabecalho.html), não num botão solto no cabeçalho. */
html[data-theme="dark"],
:root {
--cor-primaria: #5B9BE0;
--cor-primaria-clara: #7FB1E8;
--cor-secundaria: #5B9BE0;
--cor-fundo: #12181F;
--cor-secao: #1B222C;
--cor-borda: #2B3543;
--cor-texto: #E7ECF2;
--cor-texto-suave: #9AA7B5;
--cor-erro: #E5837B;
--cor-sucesso: #6FCB84;
--fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--raio: 6px;
color-scheme: dark;
}
html[data-theme="light"] {
--cor-primaria: #0B1F3A;
--cor-primaria-clara: #132C4D;
--cor-secundaria: #1E73BE;
--cor-fundo: #FFFFFF;
--cor-secao: #F4F6F8;
--cor-borda: #E1E5EA;
--cor-texto: #1F2933;
--cor-texto-suave: #5A6672;
--cor-erro: #B3261E;
--cor-sucesso: #1E7B34;
color-scheme: light;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--fonte);
color: var(--cor-texto);
background: var(--cor-fundo);
line-height: 1.5;
}
header.topo {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 2rem;
border-bottom: 1px solid var(--cor-borda);
}
header.topo a {
display: inline-flex;
line-height: 0;
}
.topo-direita {
display: flex;
align-items: center;
gap: 0.5rem;
}
header.topo img {
height: 32px;
}
/* Logo troca de versão conforme o tema — mesma lógica de data-theme das
cores acima. Os dois ![]()
ficam sempre no DOM, só a visibilidade muda. */
header.topo img.logo-escuro { display: block; }
header.topo img.logo-claro { display: none; }
@media (prefers-color-scheme: dark) {
header.topo img.logo-escuro { display: none; }
header.topo img.logo-claro { display: block; }
}
html[data-theme="dark"] header.topo img.logo-escuro { display: none; }
html[data-theme="dark"] header.topo img.logo-claro { display: block; }
html[data-theme="light"] header.topo img.logo-escuro { display: block; }
html[data-theme="light"] header.topo img.logo-claro { display: none; }
.topo-bemvindo {
font-size: 0.9rem;
color: var(--cor-texto-suave);
white-space: nowrap;
}
/* Menu do usuário (avatar/iniciais), canto superior direito — mesmo
dropdown / do menu de engrenagem, só que o "resumo"
é redondo (foto ou iniciais) em vez de um ícone. "Sair" mora dentro
dele agora, junto com o resto (regra do Daniel: um botão só). */
.menu-usuario {
position: relative;
}
.menu-usuario summary {
list-style: none;
cursor: pointer;
user-select: none;
display: block;
border-radius: 50%;
}
.menu-usuario summary::-webkit-details-marker {
display: none;
}
.menu-usuario-avatar {
width: 2rem;
height: 2rem;
border-radius: 50%;
object-fit: cover;
display: block;
}
.menu-usuario-iniciais {
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--cor-secundaria);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 600;
}
.menu-usuario summary:hover .menu-usuario-iniciais,
.menu-usuario[open] .menu-usuario-iniciais {
background: var(--cor-primaria);
}
.menu-usuario summary:hover .menu-usuario-avatar,
.menu-usuario[open] .menu-usuario-avatar {
outline: 2px solid var(--cor-secundaria);
outline-offset: 1px;
}
.menu-usuario .menu-engrenagem-itens form {
margin: 0;
}
/* Menu de engrenagem (Administração / Saúde), canto superior direito.
/ dá um dropdown nativo, sem precisar de JavaScript. */
.menu-engrenagem {
position: relative;
}
.menu-engrenagem summary {
list-style: none;
cursor: pointer;
font-size: 1.3rem;
line-height: 1;
padding: 0.4rem 0.6rem;
border-radius: var(--raio);
user-select: none;
}
.menu-engrenagem summary::-webkit-details-marker {
display: none;
}
.menu-engrenagem summary:hover,
.menu-engrenagem[open] summary {
background: var(--cor-secao);
}
.menu-engrenagem-itens {
position: absolute;
right: 0;
top: 100%;
margin-top: 0.4rem;
background: var(--cor-fundo);
border: 1px solid var(--cor-borda);
border-radius: var(--raio);
min-width: 160px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
overflow: hidden;
z-index: 10;
}
.menu-engrenagem-itens a,
.menu-engrenagem-itens button {
display: block;
width: 100%;
text-align: left;
padding: 0.6rem 1rem;
background: transparent;
border: none;
color: var(--cor-texto);
text-decoration: none;
font-size: 0.9rem;
cursor: pointer;
}
.menu-engrenagem-itens a:hover,
.menu-engrenagem-itens button:hover {
background: var(--cor-secao);
}
/* Layout com barra lateral, usado em toda tela pós-login/2FA. */
.layout {
display: flex;
align-items: flex-start;
}
.barra-lateral {
width: 220px;
flex-shrink: 0;
border-right: 1px solid var(--cor-borda);
padding: 1.5rem 1rem;
min-height: calc(100vh - 65px);
overflow: hidden;
transition: width 0.15s ease;
}
.barra-lateral.encolhida {
width: 44px;
padding: 1.5rem 0.5rem;
}
.barra-lateral.encolhida .barra-lateral-links {
display: none;
}
.barra-lateral-toggle {
display: block;
background: none;
border: none;
cursor: pointer;
font-size: 1rem;
color: var(--cor-texto-suave);
padding: 0.3rem 0.5rem;
margin-bottom: 1rem;
border-radius: var(--raio);
}
.barra-lateral-toggle:hover {
background: var(--cor-secao);
}
.barra-lateral a {
display: block;
padding: 0.5rem 0.75rem;
border-radius: var(--raio);
color: var(--cor-texto);
text-decoration: none;
font-size: 0.95rem;
margin-bottom: 0.2rem;
white-space: nowrap;
}
.barra-lateral a:hover {
background: var(--cor-secao);
}
/* Módulos com sub-menu () — ver
comentário em _barra_lateral.html com o padrão a copiar. */
.barra-lateral-links summary {
display: block;
padding: 0.5rem 0.75rem;
border-radius: var(--raio);
color: var(--cor-texto);
cursor: pointer;
font-size: 0.95rem;
list-style: none;
user-select: none;
white-space: nowrap;
}
.barra-lateral-links summary::-webkit-details-marker {
display: none;
}
.barra-lateral-links summary::before {
content: '▸';
display: inline-block;
width: 1em;
transition: transform 0.1s ease;
}
.barra-lateral-links details[open] summary::before {
transform: rotate(90deg);
}
.barra-lateral-links summary:hover {
background: var(--cor-secao);
}
.barra-lateral-links .submenu {
padding-left: 1.3rem;
}
.barra-lateral-links .submenu a {
font-size: 0.88rem;
}
.conteudo-principal {
flex: 1;
padding: 2rem;
}
/* Sem sessão autenticada+verificada (login, 2FA): sem barra lateral,
volta a ser um cartão único centralizado — só troca via CSS, o HTML é
o mesmo em toda tela (ver base.html). */
body:not(.logado) .barra-lateral {
display: none;
}
body:not(.logado) .conteudo-principal {
flex: none;
width: 100%;
max-width: 480px;
margin: 3rem auto;
padding: 0 1.5rem;
}
.grade-metricas {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
margin-top: 1.5rem;
}
.grade-metricas h2 {
font-size: 1rem;
color: var(--cor-primaria);
margin: 0 0 0.5rem;
}
.grade-metricas p {
margin: 0.2rem 0;
}
h1 {
font-size: 1.5rem;
font-weight: 700;
color: var(--cor-texto);
margin-bottom: 0.5rem;
}
/* Tabelas de listagem (projetos, membros etc.) — nenhuma tinha estilo
próprio até aqui, só o padrão sem formatação do navegador. */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1.5rem;
}
th,
td {
text-align: left;
padding: 0.65rem 0.9rem;
border-bottom: 1px solid var(--cor-borda);
}
th {
color: var(--cor-texto-suave);
font-weight: 600;
font-size: 0.8rem;
}
/* Caixa alta SÓ em cabeçalho de COLUNA (thead) — célula-cabeçalho de
LINHA () carrega DADOS (ex.: e-mails na tela de
adicionar vários usuários) e não pode ser transformada (issue #14). */
thead th {
text-transform: uppercase;
letter-spacing: 0.03em;
}
tbody tr:hover {
background: var(--cor-secao);
}
p {
color: var(--cor-texto-suave);
}
.cartao {
background: var(--cor-fundo);
border: 1px solid var(--cor-borda);
border-radius: var(--raio);
padding: 1.5rem;
/* Nomes de arquivo (ex.: do último backup) não têm espaço pra quebrar
naturalmente — sem isso, uma string longa empurra a borda do cartão. */
overflow-wrap: break-word;
min-width: 0;
}
label {
display: block;
font-size: 0.9rem;
color: var(--cor-texto);
margin-bottom: 0.3rem;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 0.6rem 0.75rem;
border: 1px solid var(--cor-borda);
border-radius: var(--raio);
font-family: inherit;
font-size: 1rem;
margin-bottom: 1rem;
}
input:focus {
outline: 2px solid var(--cor-secundaria);
outline-offset: 1px;
}
button,
.botao {
display: inline-block;
padding: 0.35rem 0.9rem;
border-radius: var(--raio);
font-size: 0.9rem;
font-family: inherit;
cursor: pointer;
border: 1px solid var(--cor-secundaria);
background: var(--cor-secundaria);
color: #FFFFFF;
text-decoration: none;
}
button:hover,
.botao:hover {
background: var(--cor-primaria);
border-color: var(--cor-primaria);
}
.botao-secundario {
background: var(--cor-fundo);
color: var(--cor-secundaria);
}
.botao-secundario:hover {
background: var(--cor-secao);
color: var(--cor-primaria);
}
/* Botão só com o logotipo (sem texto) — pedido do Daniel, mesmo padrão
visual do ícone "G" oficial do Google, num botão quadrado/arredondado
compacto, centralizado, em vez do botão de largura total com texto. */
.botao-google {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin: 0 auto 1rem;
border-radius: var(--raio);
border: 1px solid var(--cor-borda);
background: #FFFFFF;
text-decoration: none;
}
.botao-google:hover {
background: var(--cor-secao);
}
.login-separador {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 1rem 0;
color: var(--cor-texto-suave);
font-size: 0.85rem;
}
.login-separador::before,
.login-separador::after {
content: '';
flex: 1;
height: 1px;
background: var(--cor-borda);
}
/* Issue #31: formulário de e-mail/senha recolhido atrás de um link
discreto — o Google é o caminho principal. Cores só por variáveis,
valendo igual nos dois temas. */
.login-detalhes summary {
cursor: pointer;
text-align: center;
color: var(--cor-texto-suave);
font-size: 0.9rem;
list-style: none;
}
.login-detalhes summary::-webkit-details-marker {
display: none;
}
.login-detalhes summary:hover,
.login-detalhes summary:focus-visible {
color: var(--cor-primaria);
text-decoration: underline;
}
.login-detalhes[open] summary {
margin-bottom: 0.8rem;
}
/* Aviso dentro do formulário recolhido (pedido do Daniel, 2026-07-21):
quase ninguém tem senha local — quem expandir por engano é orientado
de volta pro Google. */
.login-aviso {
margin: 0 0 0.8rem;
padding: 0.6rem 0.8rem;
border: 1px solid var(--cor-borda);
border-radius: var(--raio);
color: var(--cor-texto-suave);
font-size: 0.85rem;
}
.abana-excluir-projeto {
background: var(--cor-fundo);
border-color: var(--cor-erro);
color: var(--cor-erro);
}
.abana-excluir-projeto:hover {
background: var(--cor-erro);
border-color: var(--cor-erro);
color: #FFFFFF;
}
.abana-excluir-projeto-discreto {
padding: 0.3rem 0.7rem;
font-size: 0.8rem;
}
/* Abas das configurações do projeto (Geral / Membros e Permissões) —
páginas separadas de verdade (URLs distintas), isto aqui é só a
navegação entre elas. */
.abana-abas-config {
display: flex;
gap: 1.5rem;
border-bottom: 1px solid var(--cor-borda);
margin-bottom: 1.5rem;
}
.abana-abas-config a {
display: inline-block;
padding: 0.6rem 0;
color: var(--cor-texto-suave);
text-decoration: none;
border-bottom: 2px solid transparent;
font-size: 0.95rem;
}
.abana-abas-config a:hover {
color: var(--cor-texto);
}
.abana-abas-config a.ativa {
color: var(--cor-texto);
border-bottom-color: var(--cor-secundaria);
font-weight: 600;
}
/* Papel de um membro já existente, editado direto na linha da tabela. */
.abana-form-papel-membro {
display: inline-flex;
gap: 0.4rem;
align-items: center;
}
/* Mensagens do framework messages do Django (django.contrib.messages) —
a cor segue message.tags (success/error/warning/info), não é sempre
vermelho: antes disso era um bug (base.html usava sempre a mesma classe
"erro" pra qualquer mensagem, inclusive as de sucesso). */
.mensagem {
border-radius: var(--raio);
padding: 0.6rem 0.9rem;
margin-bottom: 1rem;
font-size: 0.9rem;
border: 1px solid;
}
.mensagem-error {
background: #FBEAE9;
color: var(--cor-erro);
border-color: var(--cor-erro);
}
.mensagem-success {
background: #EAF7ED;
color: var(--cor-sucesso);
border-color: var(--cor-sucesso);
}
.mensagem-warning {
background: #FFF6E5;
color: #8A6300;
border-color: #8A6300;
}
.mensagem-info {
background: var(--cor-secao);
color: var(--cor-texto);
border-color: var(--cor-borda);
}
/* Erros de campo dos formulários do Django (ex.: senha atual errada) —
mesmo estilo do .erro acima, só que o Django gera isso sozinho como
, então precisa de uma regra própria. */
.errorlist {
list-style: none;
background: #FBEAE9;
color: var(--cor-erro);
border: 1px solid var(--cor-erro);
border-radius: var(--raio);
padding: 0.6rem 0.9rem;
margin: 0 0 0.5rem;
font-size: 0.9rem;
}
.errorlist li {
margin: 0;
}
code {
background: var(--cor-secao);
padding: 0.2rem 0.4rem;
border-radius: 4px;
font-size: 0.9rem;
}
.foto-perfil-atual {
max-width: 120px;
border-radius: 50%;
border: 1px solid var(--cor-borda);
}
ul {
padding-left: 1.2rem;
}
a {
color: var(--cor-secundaria);
}
/* Quadro Kanban do Abana — renderizado em React (abana/frontend), estas
classes são compartilhadas com o CSS puro do resto do sistema de
propósito (mesmos tokens --cor-*, sem CSS duplicado no bundle do React).
Reordenar é por @dnd-kit: mouse/toque na alça (.abana-alca-arrastar) OU
teclado (Tab até a alça, Espaço pra pegar, setas pra mover, Espaço pra
soltar) — a alternativa acessível ao arrastar vem de graça da lib. */
.abana-cabecalho-quadro {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.abana-cabecalho-quadro h1 {
margin-bottom: 0;
}
/* Menu "Configurações" do quadro: mesmo .menu-engrenagem do cabeçalho
global, mas discreto (texto, não emoji) — pedido explícito de não
ficar chamativo do lado do título. */
.abana-cabecalho-quadro .menu-engrenagem summary {
font-size: 0.85rem;
color: var(--cor-texto-suave);
border: 1px solid var(--cor-borda);
padding: 0.4rem 0.8rem;
}
.abana-cabecalho-quadro .menu-engrenagem summary:hover,
.abana-cabecalho-quadro .menu-engrenagem[open] summary {
color: var(--cor-texto);
}
.abana-quadro {
display: flex;
gap: 1rem;
align-items: flex-start;
overflow-x: auto;
padding-bottom: 1rem;
}
.abana-coluna {
background: var(--cor-secao);
border: 1px solid var(--cor-borda);
border-radius: var(--raio);
padding: 0.8rem;
/* Largura FIXA (issue #55, referência Asana): sem ela a coluna
esticava pra caber a pílula/título mais compridos e o quadro
inteiro transbordava na horizontal — o conteúdo é quem quebra
linha, não a coluna que cresce. */
width: 300px;
min-width: 300px;
flex-shrink: 0;
cursor: grab;
}
.abana-coluna:active {
cursor: grabbing;
}
.abana-coluna-vazia {
color: var(--cor-texto-suave);
font-size: 0.9rem;
}
/* Último item da fileira do quadro — mesmo tamanho de uma coluna, pra
ficar visualmente na mesma fileira em vez de um formulário separado
embaixo do quadro. */
.abana-adicionar-secao {
min-width: 220px;
flex-shrink: 0;
align-self: flex-start;
}
button.abana-adicionar-secao {
background: transparent;
border: 1px dashed var(--cor-borda);
border-radius: var(--raio);
color: var(--cor-texto-suave);
padding: 0.8rem;
text-align: left;
cursor: pointer;
font-size: 0.9rem;
}
button.abana-adicionar-secao:hover,
button.abana-adicionar-secao:focus {
background: var(--cor-secao);
color: var(--cor-texto);
outline: none;
}
.abana-adicionar-secao-editando input {
width: 100%;
box-sizing: border-box;
padding: 0.75rem;
border: 1px solid var(--cor-borda);
border-radius: var(--raio);
background: var(--cor-secao);
color: var(--cor-texto);
font-size: 0.9rem;
}
/* Cartões de tarefa dentro da coluna. */
.abana-lista-tarefas {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0.6rem 0;
}
/* O cartão empilha linhas (linha principal, rodapé com prazo/subtarefas,
lista expandida de subtarefas) — a linha principal é .abana-tarefa-linha. */
.abana-tarefa {
display: flex;
flex-direction: column;
gap: 0.3rem;
background: var(--cor-fundo);
border: 1px solid var(--cor-borda);
border-radius: var(--raio);
padding: 0.5rem 0.6rem;
cursor: grab;
/* Issue #26: sem isto, no toque o navegador dispara zoom de duplo
toque e atrapalha o pressionar-e-segurar que inicia o arraste.
"manipulation" mantém a rolagem normal e só corta esses atalhos. */
touch-action: manipulation;
}
.abana-tarefa-linha {
display: flex;
align-items: center;
gap: 0.3rem;
}
/* Alinhamento vertical explícito de tudo dentro da linha (check, título,
selo do responsável, menu ⋮) — Daniel reportou o check desalinhado do
título; além do align-items do pai, cada filho declara o próprio
align-self pra nenhum estilo futuro (ou de user-agent) desalinhar de
novo sem ser de propósito. */
.abana-tarefa-linha > * {
align-self: center;
margin-top: 0;
margin-bottom: 0;
}
/* Rodapé do cartão: prazo à esquerda, indicador de subtarefas à direita
(como no Asana de referência do Daniel). */
.abana-rodape-tarefa {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
min-height: 1.2rem;
}
.abana-prazo-mini {
display: inline-flex;
align-items: center;
gap: 0.25rem;
background: transparent;
border: none;
color: var(--cor-texto-suave);
font-size: 0.75rem;
cursor: pointer;
padding: 0.1rem 0.2rem;
}
.abana-prazo-mini.vazio {
border: 1px dashed var(--cor-borda);
border-radius: 50%;
padding: 0.25rem;
}
.abana-prazo-mini:hover {
color: var(--cor-texto);
border-color: var(--cor-texto-suave);
}
.abana-chip-comentarios,
.abana-chip-subtarefas {
display: inline-flex;
align-items: center;
gap: 0.25rem;
background: transparent;
border: none;
color: var(--cor-texto-suave);
font-size: 0.75rem;
cursor: pointer;
padding: 0.1rem 0.2rem;
}
.abana-chip-comentarios:hover,
.abana-chip-subtarefas:hover {
color: var(--cor-texto);
}
.abana-cadeado-mini {
display: inline-flex;
color: var(--cor-erro);
flex-shrink: 0;
}
/* Lista de subtarefas expandida dentro do cartão. */
.abana-subtarefas-expandido {
display: flex;
flex-direction: column;
gap: 0.3rem;
border-top: 1px solid var(--cor-borda);
padding-top: 0.4rem;
cursor: default;
}
.abana-linha-subtarefa {
display: flex;
align-items: center;
gap: 0.4rem;
}
.abana-linha-subtarefa .abana-painel-subtarefa-titulo {
flex: 1;
}
/* Sugestões de menção (@) nos comentários. */
.abana-mencoes {
position: relative;
}
.abana-mencoes-sugestoes {
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 10;
list-style: none;
margin: 0.1rem 0 0;
padding: 0.2rem;
background: var(--cor-fundo);
border: 1px solid var(--cor-borda);
border-radius: var(--raio);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
max-height: 10rem;
overflow-y: auto;
}
.abana-mencoes-sugestoes button {
display: block;
width: 100%;
text-align: left;
background: transparent;
border: none;
color: var(--cor-texto);
font-size: 0.9rem;
padding: 0.35rem 0.5rem;
border-radius: var(--raio);
cursor: pointer;
}
.abana-mencoes-sugestoes button:hover,
.abana-mencoes-sugestoes button.ativa {
background: var(--cor-secao);
}
.abana-tarefa .abana-titulo-tarefa,
.abana-tarefa .abana-titulo-tarefa-texto {
line-height: 1.2;
}
.abana-tarefa:active {
cursor: grabbing;
}
.abana-tarefa-completa .abana-titulo-tarefa-texto,
.abana-tarefa-completa .abana-titulo-tarefa {
text-decoration: line-through;
color: var(--cor-texto-suave);
}
.abana-titulo-tarefa-texto {
flex: 1;
font-size: 0.9rem;
}
.abana-titulo-tarefa {
flex: 1;
width: 100%;
box-sizing: border-box;
border: 1px solid transparent;
background: transparent;
color: var(--cor-texto);
border-radius: var(--raio);
padding: 0.3rem 0.4rem;
font-size: 0.9rem;
cursor: text;
}
.abana-titulo-tarefa:hover,
.abana-titulo-tarefa:focus {
border-color: var(--cor-borda);
background: var(--cor-secao);
outline: none;
}
/* Fora da edição (readonly), o título é área de "pega" do arraste
(2026-07-20): a mãozinha avisa que dá pra arrastar dali; o cursor de
texto volta quando a edição liga (foco). */
.abana-titulo-tarefa[readonly] {
cursor: grab;
}
/* Pé da coluna com carregamento parcial (issue #54): traz o próximo
lote de cartões. Discreto como o "+ Adicionar tarefa", mas
centralizado — é continuação da lista, não criação. */
.abana-mostrar-mais {
display: block;
width: 100%;
background: transparent;
border: 1px dashed var(--cor-borda);
border-radius: var(--raio);
color: var(--cor-texto-suave);
text-align: center;
padding: 0.4rem 0.2rem;
cursor: pointer;
font-size: 0.8rem;
margin-top: 0.4rem;
}
.abana-mostrar-mais:hover,
.abana-mostrar-mais:focus {
color: var(--cor-texto);
background: var(--cor-secao);
outline: none;
}
.abana-adicionar-tarefa {
display: block;
width: 100%;
background: transparent;
border: none;
color: var(--cor-texto-suave);
text-align: left;
padding: 0.4rem 0.2rem;
cursor: pointer;
font-size: 0.85rem;
margin-top: 0.4rem;
}
.abana-adicionar-tarefa:hover,
.abana-adicionar-tarefa:focus {
color: var(--cor-texto);
outline: none;
}
.abana-menu-titulo {
display: block;
padding: 0.5rem 1rem 0.2rem;
color: var(--cor-texto-suave);
font-size: 0.75rem;
font-weight: 600;
}
/* Só indicador visual agora — a coluna/tarefa inteira é que arrasta (ver
useSortable em SortableColumn.jsx/TaskCard.jsx), não só esta alcinha. */
.abana-alca-arrastar {
color: var(--cor-texto-suave);
font-size: 1rem;
padding: 0.1rem 0.2rem;
}
/* Selo do responsável — foto (se tiver) ou iniciais, pequeno e discreto
de propósito: não deve competir visualmente com o título do cartão. */
.abana-responsavel {
width: 1.1rem;
height: 1.1rem;
min-width: 1.1rem;
border-radius: 50%;
flex-shrink: 0;
object-fit: cover;
}
.abana-responsavel-iniciais {
background: var(--cor-secao);
border: 1px solid var(--cor-borda);
color: var(--cor-texto-suave);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.02em;
}
/* Botão de concluir tarefa. Preenche e ganha uma "pulsada" ao concluir —
feedback visual imediato e otimista (regra do briefing: não pedir
confirmação pra conclusão comum, e mostrar o resultado na hora). */
.abana-check-tarefa {
width: 1.4rem;
height: 1.4rem;
min-width: 1.4rem;
border-radius: 50%;
border: 2px solid var(--cor-borda);
background: transparent;
color: transparent;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
line-height: 1;
position: relative;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.abana-check-tarefa:hover {
border-color: var(--cor-sucesso);
}
.abana-check-tarefa.concluida {
background: var(--cor-sucesso);
border-color: var(--cor-sucesso);
color: #FFFFFF;
animation: abana-check-pop 0.35s ease;
}
.abana-check-tarefa.concluida::after {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid var(--cor-sucesso);
opacity: 0;
animation: abana-check-anel 0.5s ease-out;
}
@keyframes abana-check-pop {
0% { transform: scale(0.6); }
60% { transform: scale(1.3); }
100% { transform: scale(1); }
}
@keyframes abana-check-anel {
0% { opacity: 0.6; transform: scale(0.5); }
100% { opacity: 0; transform: scale(1.7); }
}
@media (prefers-reduced-motion: reduce) {
.abana-check-tarefa.concluida,
.abana-check-tarefa.concluida::after {
animation: none;
}
}
/* Campo de nome da coluna: parece texto normal até ganhar foco/hover —
é o que fica editável direto, sem precisar de botão de confirmar. */
.abana-nome-coluna {
font-weight: bold;
font-size: 1rem;
width: 100%;
border: 1px solid transparent;
background: transparent;
color: var(--cor-texto);
border-radius: var(--raio);
padding: 0.2rem 0.3rem;
box-sizing: border-box;
cursor: text;
}
.abana-nome-coluna:hover,
.abana-nome-coluna:focus {
border-color: var(--cor-borda);
background: var(--cor-fundo);
outline: none;
}
.abana-coluna-cabecalho {
display: flex;
align-items: center;
gap: 0.2rem;
}
.abana-coluna-cabecalho .abana-nome-coluna {
flex: 1;
}
/* Menu de ações da coluna (mover, clonar, excluir) — mesmo padrão
/ do menu de engrenagem do cabeçalho global
(.menu-engrenagem), só que com |