/* SWOT · Ducon — folha única do app (layout, componentes e telas).
Tema "claro e leve" (tema A adotado; alternativas em public/css/temas/), com as telas no cinza Ducon (--ducon-cinza #EBF0F4, do manual da marca)
e cards/painéis/tabelas brancos por cima; o menu lateral (degradê marinho→índigo) fica fixo à esquerda no desktop.
Logo: isotipo + "ducon", sem "SEGUROS" (manual da marca, págs. 1 e 10), SVG vetorial — /img/logo-ducon-branca.svg (só sobre
fundo escuro: nav, login), /img/logo-ducon-escura.svg (#030511, papel: .so-impressao) e /img/isotipo-ducon.svg (branco, reserva).
Tokens da identidade Ducon (ver CLAUDE.md); nunca usar o azul do site. Fora dos tokens, cores derivadas só por rgba() da cor-base.
Fontes: Inter (texto) + Plus Jakarta Sans (títulos) — carregadas por nos Blades (layouts/hub, auth/login, errors/*). */
:root {
/* identidade Ducon (tokens obrigatórios) */
--ducon-indigo: #4B53FF;
--ducon-indigo-escuro: #3941D6;
--ducon-azul-forte: #3740FF;
--ducon-ciano: #04D9FB;
--ducon-marinho: #2A336C;
--ducon-preto: #030511;
--ducon-cinza: #EBF0F4; /* fundo das telas: cinza claro / off-white do manual da marca (marca-duconseg.css) */
--ducon-cinza-claro: #F3F6F8; /* segundo nível, derivado: #EBF0F4 a 60% sobre branco (fundos internos suaves) */
--tinta-1: #E9EBFF;
--tinta-2: #F0F1FF;
--tinta-3: #DCE0FF;
/* superfícies e texto: página no cinza Ducon, cards/painéis/tabelas brancos por cima (ver CLAUDE.md) */
--fundo: var(--ducon-cinza); /* página e área principal */
--fundo-2: var(--ducon-cinza-claro); /* dentro do branco: hover de linha/botão, notas, rodapés, formulário tracejado, trilhos */
--fundo-zebra: rgba(235, 240, 244, 0.35); /* --ducon-cinza a 35% sobre o branco da tabela ≈ #F8FAFB (entre o branco e o hover #F3F6F8) */
--superficie: #FFFFFF;
--texto: #1B1D21; /* 14,7:1 sobre o cinza */
--texto-2: #4B5058; /* 7,1:1 sobre o cinza, 7,5:1 sobre o cinza-claro */
--borda: #D7DDEA; /* borda neutra do manual da marca: contorno dos cards brancos sobre o cinza */
--borda-forte: #D3D7E6;
--borda-suave: var(--ducon-cinza); /* divisórias internas dos cards brancos */
--placeholder: #6B7079; /* = --cancelada, 4,98:1 sobre branco — só em campo branco (sobre o cinza cairia a 4,3:1) */
--borda-campo: rgba(42, 51, 108, 0.6); /* campo em repouso ≈ #7F85A7: 3,6:1 sobre branco, 3,3:1 sobre o cinza-claro do formulário tracejado (WCAG 1.4.11) */
/* status: cor-base + texto escuro (quando o texto vai sobre tinta); tintas, bordas e halos são rgba() da base */
--concluida: #2E7D4F;
--concluida-texto: #1F5A38; /* 8,2:1 sobre branco; a base ficaria em 4,3:1 sobre a tinta */
--concluida-fundo: rgba(46, 125, 79, 0.12);
--andamento: #2F5FA8; /* 5,3:1 sobre a própria tinta */
--andamento-fundo: rgba(47, 95, 168, 0.12);
--atrasada: #C9821A;
--atrasada-texto: #6E4700;
--atrasada-fundo: #FBEFD3;
--atrasada-borda: rgba(201, 130, 26, 0.45);
--atrasada-suave: rgba(201, 130, 26, 0.07);
--cancelada: #6B7079;
--cancelada-texto: var(--texto-2); /* --cancelada sobre tinta ficaria < 4,5:1 */
--cancelada-fundo: rgba(107, 112, 121, 0.14);
--perigo: #A33A2C; /* único vermelho: erro, ameaça, sinal grave (6,6:1 sobre branco, 5,6:1 sobre a tinta) */
--perigo-fundo: rgba(163, 58, 44, 0.10);
--perigo-borda: rgba(163, 58, 44, 0.35);
/* degradês da marca */
--degrade-nav: linear-gradient(180deg, #2A336C 0%, #3941D6 100%);
--brilho-nav: radial-gradient(140% 42% at 50% -6%, rgba(4, 217, 251, 0.30), rgba(4, 217, 251, 0) 70%);
--degrade-ativo: linear-gradient(90deg, #3740FF, #4B53FF);
--degrade-kpi: linear-gradient(90deg, #3740FF, #04D9FB);
--degrade-concluida: linear-gradient(90deg, #2E7D4F, #4CAF74);
--degrade-atrasada: linear-gradient(90deg, #C9821A, #E3A94D);
/* degradês "contidos" só para segmentos com número branco dentro (barra empilhada e sua legenda): ≥ 4,6:1 */
--degrade-concluida-contido: linear-gradient(90deg, #2E7D4F, #318451);
--degrade-andamento-contido: linear-gradient(90deg, #2F5FA8, #3740FF);
/* tipografia */
--fonte: 'Inter', system-ui, "Segoe UI", sans-serif;
--fonte-titulo: 'Plus Jakarta Sans', system-ui, "Segoe UI", sans-serif;
/* alturas de controle (botões, campos, abas, chip do usuário) */
--controle: 40px;
--controle-p: 32px;
/* raios e sombras (sobre o cinza o branco já separa o card: sombras leves, em rgba() do marinho) */
--raio: 16px;
--raio-m: 10px;
--raio-s: 8px;
--raio-pill: 999px;
--sombra-1: 0 1px 2px rgba(42, 51, 108, 0.06);
--sombra-2: 0 2px 4px rgba(42, 51, 108, 0.05), 0 6px 14px rgba(42, 51, 108, 0.08);
--sombra-3: 0 4px 8px rgba(42, 51, 108, 0.06), 0 14px 32px rgba(42, 51, 108, 0.14);
--sombra-primario: 0 1px 2px rgba(55, 64, 255, 0.25), 0 6px 14px rgba(75, 83, 255, 0.22);
--anel-foco: 0 0 0 4px rgba(75, 83, 255, 0.18);
--faixa: 3px; /* faixa lateral de status (reforço visual) */
--transicao: 150ms ease;
/* ícones da nav (SVG inline em máscara, pintados com currentColor); escolhidos por data-icone no Blade */
--icone-dashboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.5'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.5'/%3E%3C/svg%3E");
--icone-visao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
--icone-swot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3v18M3 12h18'/%3E%3C/svg%3E");
--icone-planos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l2 2 4-4M3 17l2 2 4-4M12 7h9M12 17h9'/%3E%3C/svg%3E");
--icone-admin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21v-1a7 7 0 0 1 14 0v1'/%3E%3Cpath d='M16 4a4 4 0 0 1 0 8M22 21v-1a7 7 0 0 0-5-6.7'/%3E%3C/svg%3E");
--icone-config: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
/* ícones das áreas de Configurações (cards do hub): e-mail, setores (prédio), usuários (= --icone-admin), anos (calendário) */
--icone-email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
--icone-setores: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16'/%3E%3Cpath d='M16 9h2a2 2 0 0 1 2 2v10'/%3E%3Cpath d='M3 21h18M8 7h4M8 11h4M8 15h4'/%3E%3C/svg%3E");
--icone-anos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4'/%3E%3C/svg%3E");
--icone-avisos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E");
/* menu da barra do topo (abaixo de 900px, ): três traços; aberto, um X */
--icone-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
--icone-fechar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
font-family: var(--fonte);
font-size: 14px;
line-height: 1.55;
color: var(--texto);
background: var(--fundo);
font-variant-numeric: tabular-nums; /* colunas numéricas alinham (KPIs, tabelas, datas) */
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ol, ul { margin: 0; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; transition: color var(--transicao); }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ducon-azul-forte); outline-offset: 2px; border-radius: 4px; }
.texto-secundario { font-size: 12px; color: var(--texto-2); }
/* ---------- Estrutura: nav 232px à esquerda + conteúdo que rola ---------- */
.hub { display: flex; height: 100vh; }
.nav {
width: 232px;
flex: none;
padding: 24px 14px;
display: flex;
flex-direction: column;
gap: 18px;
overflow-y: auto;
background: var(--brilho-nav), var(--degrade-nav);
color: #FFFFFF;
}
.nav :focus-visible { outline-color: var(--ducon-ciano); }
.nav-marca { padding: 0 10px; display: flex; flex-direction: column; gap: 2px; }
/* a logo é o link para o início (rota "inicio" → dashboard do ano atual); anel branco no foco. No HTML ela vem depois do
"SWOT" (ordem da barra do topo: menu · SWOT · logo); na coluna do desktop, order: -1 a põe acima do nome */
.nav-logo-link { order: -1; display: block; align-self: flex-start; margin: 0 0 10px; border-radius: 6px; line-height: 0; transition: opacity var(--transicao); }
.nav-logo-link:hover { opacity: 0.85; }
.nav .nav-logo-link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; }
.nav-logo { display: block; width: auto; height: 32px; } /* isotipo + "ducon" (viewBox 513,6×143,5) → ≈ 115×32; cabe nos 232px − 2×14 − 2×10 = 184px */
.nav-titulo { font-family: var(--fonte-titulo); font-size: 17px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: #FFFFFF; }
.nav-subtitulo { font-size: 11px; font-weight: 500; color: var(--tinta-3); letter-spacing: 0.06em; text-transform: uppercase; } /* 5,6:1 sobre o ponto mais claro do degradê */
.nav-links { display: flex; flex-direction: column; gap: 4px; }
.nav-links a {
display: flex;
align-items: center;
gap: 10px;
min-height: 38px;
padding: 8px 12px;
border-radius: var(--raio-pill);
color: var(--tinta-1); /* 6,1:1 sobre o ponto mais claro do degradê */
font-weight: 500;
transition: background var(--transicao), color var(--transicao);
}
/* ícone antes do texto, só quando o Blade informa data-icone (degrada para "sem ícone") */
.nav-links a[data-icone]::before {
content: "";
flex: none;
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: var(--icone) center / contain no-repeat;
mask: var(--icone) center / contain no-repeat;
opacity: 0.85;
}
.nav-links a[data-icone="dashboard"] { --icone: var(--icone-dashboard); }
.nav-links a[data-icone="visao-geral"] { --icone: var(--icone-visao); }
.nav-links a[data-icone="swot"] { --icone: var(--icone-swot); }
.nav-links a[data-icone="planos"] { --icone: var(--icone-planos); }
.nav-links a[data-icone="config"] { --icone: var(--icone-config); }
.nav-links a:hover { background: rgba(255, 255, 255, 0.1); color: #FFFFFF; text-decoration: none; }
.nav-links a:hover::before, .nav-links a.nav-ativo::before { opacity: 1; }
.nav-links a.nav-ativo { background: var(--degrade-ativo); color: #FFFFFF; font-weight: 600; box-shadow: 0 6px 16px rgba(3, 5, 17, 0.25); }
/* menu da barra do topo: só abaixo de 900px (ver @media); no desktop a coluna .nav > .nav-links fica sempre à vista */
.nav-movel { display: none; }
.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.principal { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 28px 40px; }
/* ---------- Cabeçalho: h1 Jakarta, abas de ano, resumo, ações, chip do usuário ---------- */
.cabecalho {
min-height: 68px;
flex: none;
padding: 12px 28px;
display: flex;
align-items: center;
gap: 16px;
border-bottom: 1px solid var(--borda);
background: var(--superficie);
}
.cabecalho-conteudo { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.cabecalho h1 { font-family: var(--fonte-titulo); font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--texto); }
.resumo { font-size: 13px; color: var(--texto-2); }
.acoes { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cabecalho .acoes .botao { height: var(--controle); }
/* abas (anos, filtro de setores…): controle segmentado com a ativa em pill índigo */
.abas {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
border: 1px solid var(--borda);
border-radius: var(--raio-pill);
font-size: 13px;
background: var(--fundo-2);
}
.abas > * { min-height: var(--controle-p); display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--raio-pill); color: var(--texto-2); font-weight: 500; white-space: nowrap; transition: background var(--transicao), color var(--transicao); }
.abas > a:hover { background: var(--superficie); color: var(--texto); text-decoration: none; }
.abas > .aba-ativa { background: var(--degrade-ativo); color: #FFFFFF; font-weight: 600; box-shadow: 0 2px 6px rgba(55, 64, 255, 0.28); }
.abas > .aba-nova { color: var(--ducon-azul-forte); font-weight: 600; }
.aba-sufixo { margin-left: 4px; font-size: 11px; font-weight: 400; opacity: .85; } /* "· encerrado" */
.menu-usuario { position: relative; flex: none; }
.menu-usuario > summary {
list-style: none;
width: var(--controle);
height: var(--controle);
border-radius: 50%;
background: var(--degrade-ativo);
color: #FFFFFF;
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
box-shadow: var(--sombra-primario);
transition: transform var(--transicao), box-shadow var(--transicao);
}
.menu-usuario > summary:hover { transform: translateY(-1px); }
.menu-usuario > summary::-webkit-details-marker { display: none; }
.menu-usuario-painel {
position: absolute;
right: 0;
top: calc(100% + 10px);
z-index: 20;
min-width: 240px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
background: var(--superficie);
border: 1px solid var(--borda);
border-radius: 12px;
box-shadow: var(--sombra-3);
}
/* ---------- Chip do usuário (componentes/avatar): foto sobre as iniciais — cabeçalho, tabela de usuários, ranking ----------
A foto é o original quando o PHP não tem gd (App\Servicos\FotosDeUsuario): o recorte redondo é o object-fit daqui.
Se a ![]()
falhar, o onerror a remove e as iniciais (já no chip, por baixo) aparecem. */
.avatar { position: relative; overflow: hidden; flex: none; border-radius: 50%; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; background: var(--superficie); }
.avatar-tabela, .avatar-previa, .avatar-menu, .avatar-grande { display: inline-flex; align-items: center; justify-content: center; background: var(--degrade-ativo); color: #FFFFFF; font-weight: 600; }
.avatar-tabela { width: 28px; height: 28px; font-size: 11px; }
.avatar-previa, .avatar-menu { width: 48px; height: 48px; font-size: 16px; box-shadow: var(--sombra-primario); }
.avatar-grande { width: 128px; height: 128px; font-family: var(--fonte-titulo); font-size: 40px; box-shadow: var(--sombra-primario); }
/* "Minha foto": a foto/iniciais do chip (painel do cabeçalho) é link para /minha-foto (MinhaFotoController) */
.menu-usuario-quem { display: flex; align-items: center; gap: 12px; min-width: 0; padding-bottom: 10px; margin-bottom: 2px; border-bottom: 1px solid var(--borda-suave); }
.menu-usuario-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: break-word; }
.menu-usuario-foto { flex: none; display: inline-flex; border-radius: 50%; transition: transform var(--transicao), filter var(--transicao); }
.menu-usuario-foto:hover { text-decoration: none; transform: translateY(-1px); filter: brightness(1.06); }
.menu-usuario-foto:focus-visible { outline: 2px solid var(--ducon-azul-forte); outline-offset: 2px; }
.menu-usuario-item { display: flex; align-items: center; min-height: var(--controle-p); margin: 0 -8px; padding: 0 8px; border-radius: var(--raio-s); color: var(--texto); font-weight: 500; }
.menu-usuario-item:hover { background: var(--fundo-2); text-decoration: none; }
.minha-foto { max-width: 640px; gap: 18px; }
.minha-foto-atual { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 20px; min-width: 0; }
.minha-foto-quem { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: break-word; }
.minha-foto .campo input[type="file"] { height: auto; min-height: var(--controle); padding: 6px 8px; font-size: 12px; color: var(--texto-2); }
.celula-usuario { display: flex; align-items: center; gap: 8px; min-width: 0; }
.celula-usuario > span:last-child { min-width: 0; overflow-wrap: break-word; } /* quebra entre palavras: "anywhere" (td:first-child) deixava a coluna com 1 letra de largura mínima */
.campos-linha .campo-foto { grid-column: 1 / -1; } /* linha inteira: o seletor de arquivo não cabe em meia coluna */
.campo-foto-linha { display: flex; align-items: center; gap: 12px; min-width: 0; }
.campo .campo-foto-linha input[type="file"] { flex: 1; height: auto; min-height: var(--controle); padding: 6px 8px; font-size: 12px; color: var(--texto-2); }
.campo input[type="file"]::file-selector-button {
margin-right: 10px;
height: var(--controle-p);
padding: 0 12px;
border-radius: var(--raio-pill);
border: 1px solid var(--borda-forte);
background: var(--fundo-2);
color: var(--texto);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.campo input[type="file"]::file-selector-button:hover { border-color: var(--cancelada); }
/* ---------- Botões ---------- */
.botao {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: var(--controle);
padding: 0 16px;
border-radius: var(--raio-m);
border: 1px solid var(--borda-forte);
background: var(--superficie);
color: var(--texto);
font-size: 13px;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
box-shadow: var(--sombra-1);
transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao), border-color var(--transicao), filter var(--transicao);
}
.botao:hover { text-decoration: none; background: var(--fundo-2); transform: translateY(-1px); box-shadow: var(--sombra-2); }
.botao:active { transform: translateY(0); box-shadow: var(--sombra-1); }
.botao-secundario { background: var(--superficie); }
.botao-primario { border-color: transparent; background: var(--degrade-ativo); color: #FFFFFF; padding: 0 18px; font-weight: 600; box-shadow: var(--sombra-primario); }
.botao-primario:hover { background: var(--degrade-ativo); border-color: transparent; filter: brightness(1.06); box-shadow: 0 2px 4px rgba(55, 64, 255, 0.25), 0 10px 22px rgba(75, 83, 255, 0.3); }
/* foco inequívoco sobre o degradê: anel branco + anel índigo */
.botao-primario:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 0; box-shadow: 0 0 0 6px var(--ducon-azul-forte); }
.botao-perigo { border-color: var(--perigo-borda); color: var(--perigo); }
.botao-perigo:hover { background: var(--perigo-fundo); border-color: rgba(163, 58, 44, 0.55); }
.botao-pequeno { height: var(--controle-p); padding: 0 12px; border-radius: var(--raio-s); font-size: 12px; font-weight: 500; }
.botao-bloco { width: 100%; }
.botao-icone {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: var(--controle-p);
height: var(--controle-p);
border-radius: var(--raio-s);
border: 1px solid var(--borda);
background: var(--superficie);
color: var(--texto-2);
cursor: pointer;
transition: border-color var(--transicao), color var(--transicao), background var(--transicao);
}
.botao-icone:hover { border-color: var(--borda-forte); background: var(--fundo-2); color: var(--texto); text-decoration: none; }
.botoes { display: flex; gap: 8px; }
.botoes .botao-primario { flex: 1; }
/* ---------- Cards, KPIs, notas ---------- */
.card {
background: var(--superficie);
border: 1px solid var(--borda);
border-radius: var(--raio);
box-shadow: var(--sombra-1);
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
.card h2 { font-family: var(--fonte-titulo); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.nota { font-size: 12px; color: var(--texto-2); padding: 10px 12px; border-radius: var(--raio-m); background: var(--fundo-2); border: 1px solid var(--borda-suave); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.kpi {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 18px;
border-radius: var(--raio);
border: 1px solid var(--borda);
box-shadow: var(--sombra-1);
background: var(--degrade-kpi) top / 100% 3px no-repeat, var(--superficie);
transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
a.kpi:hover { text-decoration: none; border-color: var(--borda-forte); transform: translateY(-1px); box-shadow: var(--sombra-2); }
.kpi-rotulo { font-size: 11px; font-weight: 500; color: var(--texto-2); text-transform: uppercase; letter-spacing: 0.06em; }
.kpi-valor { font-family: var(--fonte-titulo); font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.kpi-nota { font-size: 12px; color: var(--texto-2); }
.kpi-alerta { background: var(--degrade-atrasada) top / 100% 3px no-repeat, linear-gradient(var(--atrasada-suave), var(--atrasada-suave)), var(--superficie); border-color: var(--atrasada-borda); }
.kpi-alerta .kpi-rotulo, .kpi-alerta .kpi-valor { color: var(--atrasada-texto); }
.passos { display: flex; flex-direction: column; gap: 6px; padding: 0; list-style: none; font-size: 13px; }
.passos li { display: flex; gap: 10px; }
.passo-numero {
width: 22px;
height: 22px;
flex: none;
border-radius: 50%;
background: var(--degrade-ativo);
color: #FFFFFF;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
}
/* ---------- SWOT: quadrantes 2×2 + painel lateral ---------- */
.swot { display: flex; align-items: flex-start; gap: 18px; }
.quadrantes { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.quadrante {
display: flex;
flex-direction: column;
background: var(--superficie);
border: 1px solid var(--borda);
border-top: 3px solid var(--cor-quadrante, var(--ducon-indigo)); /* borda real: imprime sem "imprimir fundos" */
border-radius: var(--raio);
box-shadow: var(--sombra-1);
overflow: hidden;
}
.quadrante-forca { --cor-quadrante: var(--concluida); }
.quadrante-fraqueza { --cor-quadrante: var(--atrasada); }
.quadrante-oportunidade { --cor-quadrante: var(--ducon-indigo); }
.quadrante-ameaca { --cor-quadrante: var(--perigo); }
.quadrante-topo { display: flex; align-items: center; gap: 8px; padding: 13px 16px 11px; border-bottom: 1px solid var(--borda-suave); }
.quadrante-topo h2 { font-family: var(--fonte-titulo); font-size: 15px; font-weight: 600; }
.quadrante-conta { font-size: 12px; font-weight: 500; color: var(--texto-2); padding: 1px 8px; border-radius: var(--raio-pill); background: var(--fundo); }
.quadrante-topo .botao { margin-left: auto; }
.quadrante-itens { display: flex; flex-direction: column; gap: 6px; padding: 12px; font-size: 13px; }
.vazio { padding: 10px 12px; font-size: 13px; color: var(--texto-2); }
/* a linha quebra: se o texto ficaria com menos de 150px, pílula + lápis (.item-swot-fim) descem para a 2ª linha, à direita */
.item-swot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 12px; border-radius: var(--raio-m); border: 1px solid var(--borda); background: var(--superficie); transition: background var(--transicao), border-color var(--transicao), box-shadow var(--transicao); }
.item-swot:hover { background: var(--fundo-2); border-color: var(--borda-forte); }
.item-swot-sem { border-color: var(--atrasada-borda); background: var(--atrasada-suave); }
.item-swot-sem:hover { background: var(--atrasada-fundo); border-color: var(--atrasada-borda); }
.item-swot-ativo, .item-swot-ativo:hover { border-color: var(--ducon-azul-forte); background: var(--tinta-2); box-shadow: 0 0 0 3px rgba(75, 83, 255, 0.12); }
.cod { flex: none; min-width: 28px; font-size: 11px; font-weight: 600; color: var(--texto-2); letter-spacing: 0.02em; }
/* até 2 linhas (o texto completo fica no title e no painel de edição) */
.item-swot-texto { flex: 1 1 150px; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
/* pílulas: vínculo SWOT → plano e status de ação (badge com ponto colorido) */
.vinculo, .badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: var(--raio-pill);
font-size: 11px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; opacity: .9; }
.vinculo { background: var(--tinta-1); color: var(--ducon-marinho); }
.vinculo-sem { background: var(--atrasada-fundo); color: var(--atrasada-texto); }
.vinculo-acompanhar { background: var(--fundo); color: var(--texto-2); }
/* vínculos clicáveis: alvo de 32px sem engordar a linha (margem negativa compensa) */
.item-swot-fim { display: flex; align-items: center; gap: 10px; flex: none; max-width: 100%; margin-left: auto; }
.item-swot-fim > a.vinculo, .tabela a.vinculo { min-height: 32px; margin: -6px 0; }
.badge-a_fazer { background: var(--fundo); color: var(--texto-2); }
.badge-em_andamento { background: var(--andamento-fundo); color: var(--andamento); }
.badge-concluida { background: var(--concluida-fundo); color: var(--concluida-texto); }
.badge-atrasada { background: var(--atrasada-fundo); color: var(--atrasada-texto); }
.badge-cancelada { background: var(--cancelada-fundo); color: var(--cancelada-texto); }
.painel { width: 350px; flex: none; display: flex; flex-direction: column; gap: 14px; }
/* "Mover para outro setor" (só Gestão), no fim do painel de edição do item */
.mover-setor { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--borda-suave); }
.mover-setor .form-linha .campo { flex: 1; width: auto; }
/* ---------- Formulários ---------- */
.formulario { display: flex; flex-direction: column; gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 12px; font-weight: 500; color: var(--texto-2); }
.campo input:not([type="checkbox"]):not([type="radio"]),
.campo select,
.campo textarea {
width: 100%;
height: var(--controle);
padding: 0 12px;
border-radius: var(--raio-m);
border: 1px solid var(--borda-campo); /* ≥ 3:1: a borda é a única pista do campo (branco sobre card branco) */
background: var(--superficie);
color: var(--texto);
font-size: 13px;
font-weight: 400;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo input:not([type="checkbox"]):not([type="radio"]):hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--cancelada); }
.campo input:not([type="checkbox"]):not([type="radio"]):focus,
.campo select:focus,
.campo textarea:focus { outline: none; border-color: var(--ducon-indigo); box-shadow: var(--anel-foco); }
.campo input::placeholder, .campo textarea::placeholder { color: var(--placeholder); opacity: 1; }
.campo select { padding: 0 10px; }
.campo textarea { height: auto; min-height: 72px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.campo [aria-invalid="true"] { border-color: var(--perigo); box-shadow: 0 0 0 4px rgba(163, 58, 44, 0.14); }
.campo-ajuda { font-size: 11px; font-weight: 400; line-height: 1.35; color: var(--texto-2); } /* ajuda curta entre rótulo e campo (aria-describedby) */
.campo-erro { font-size: 12px; font-weight: 500; color: var(--perigo); }
.campos-linha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.opcoes {
display: flex;
flex-direction: column;
gap: 2px;
max-height: 184px;
overflow-y: auto;
padding: 6px;
border: 1px solid var(--borda-campo);
border-radius: var(--raio-m);
background: var(--superficie);
}
.opcoes:focus-within { border-color: var(--ducon-indigo); box-shadow: var(--anel-foco); }
.opcao { display: flex; align-items: flex-start; gap: 8px; min-height: 32px; padding: 6px 8px; border-radius: var(--raio-s); font-size: 13px; font-weight: 400; color: var(--texto); cursor: pointer; transition: background var(--transicao); }
.opcao:hover { background: var(--tinta-2); }
.opcao input { margin: 2px 0 0; flex: none; accent-color: var(--ducon-azul-forte); }
.link { font-size: 12px; font-weight: 600; color: var(--ducon-azul-forte); }
.link:hover { color: var(--ducon-indigo-escuro); }
/* ---------- Tabela e barras de progresso ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th {
text-align: left;
padding: 10px 10px;
font-size: 11px;
font-weight: 600;
color: var(--texto-2);
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
background: transparent;
border-bottom: 1px solid var(--borda);
}
.tabela td { padding: 11px 10px; border-top: 1px solid var(--borda-suave); vertical-align: top; }
.tabela th:first-child, .tabela td:first-child { padding-left: 18px; }
.tabela th:last-child, .tabela td:last-child { padding-right: 18px; }
.tabela tbody tr:nth-child(even) { background: var(--fundo-zebra); }
.tabela tbody tr { transition: background var(--transicao); }
.tabela tbody tr:hover { background: var(--fundo-2); }
/* "Abrir"/"Atualizar": pill de 32px (alvo de toque) sem engordar a linha */
.tabela .link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; margin: -6px 0; border-radius: var(--raio-pill); background: var(--tinta-2); }
.tabela .link:hover { background: var(--tinta-1); text-decoration: none; }
/* faixa lateral de status nas linhas (reforço visual; sem :has() a linha fica só com badge/fundo) */
.tabela tbody tr.linha-atrasada > td:first-child { box-shadow: inset var(--faixa) 0 0 var(--atrasada); }
.tabela tbody tr:has(.badge-concluida) > td:first-child { box-shadow: inset var(--faixa) 0 0 var(--concluida); }
.tabela tbody tr:has(.badge-em_andamento) > td:first-child { box-shadow: inset var(--faixa) 0 0 var(--andamento); }
.tabela tbody tr:has(.badge-cancelada) > td:first-child { box-shadow: inset var(--faixa) 0 0 var(--cancelada); }
.tabela tbody tr:has(.badge-atrasada) > td:first-child { box-shadow: inset var(--faixa) 0 0 var(--atrasada); }
.tabela tbody tr:has(.badge-vence) > td:first-child { box-shadow: inset var(--faixa) 0 0 var(--atrasada-borda); }
.barra { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--tinta-3); }
.barra > span { display: block; height: 100%; }
.barra-concluida { background: var(--degrade-concluida); }
.barra-andamento { background: var(--degrade-kpi); } /* filete da marca nas barras finas */
.barra-atrasada { background: var(--degrade-atrasada); }
/* ---------- Planejamento: lista de planos (400px acima de 1200px) + plano selecionado ---------- */
.planejamento { display: flex; align-items: flex-start; gap: 18px; }
.plano-lista { flex: none; display: flex; flex-direction: column; gap: 12px; }
.rotulo-secao { font-size: 12px; font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: 0.06em; }
.plano-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px 18px;
border-radius: var(--raio);
border: 1px solid var(--borda);
box-shadow: var(--sombra-1);
background: var(--degrade-kpi) top / 100% 3px no-repeat, var(--superficie);
transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao), background var(--transicao);
}
.plano-card:hover { text-decoration: none; border-color: var(--borda-forte); transform: translateY(-1px); box-shadow: var(--sombra-2); }
.plano-card-ativo, .plano-card-ativo:hover { background: var(--degrade-ativo) top / 100% 3px no-repeat, var(--tinta-2); border-color: var(--ducon-azul-forte); box-shadow: 0 0 0 3px rgba(75, 83, 255, 0.12); transform: none; }
.plano-card-topo { display: flex; align-items: baseline; gap: 8px; }
.plano-card-titulo { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.plano-card-resp { margin-left: auto; flex: none; max-width: 45%; font-size: 12px; color: var(--texto-2); text-align: right; }
.plano-card-progresso { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--texto-2); }
.plano-card-progresso .barra { flex: 1 1 60px; height: 6px; border-radius: 3px; background: var(--borda); }
.plano-card-progresso .barra > span { border-radius: 3px; }
/* chips dos itens de origem: F/O índigo, Fr âmbar, A vermelho */
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
display: inline-block;
max-width: 100%;
padding: 2px 9px;
border-radius: var(--raio-pill);
font-size: 11px;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: var(--tinta-1);
color: var(--ducon-marinho);
}
.chip-fraqueza { background: var(--atrasada-fundo); color: var(--atrasada-texto); }
.chip-ameaca { background: var(--perigo-fundo); color: var(--perigo); }
.aviso-sem-plano { padding: 10px 12px; border-radius: var(--raio-m); background: linear-gradient(var(--atrasada-suave), var(--atrasada-suave)), var(--superficie); border: 1px solid var(--atrasada-borda); font-size: 12px; color: var(--atrasada-texto); }
.aviso-sem-plano a { display: inline-flex; align-items: center; min-height: 32px; margin: -6px 0; padding: 0 9px; border-radius: var(--raio-pill); background: var(--atrasada-fundo); color: var(--atrasada-texto); font-weight: 600; }
.aviso-sem-plano a:hover { text-decoration: none; background: var(--atrasada-borda); }
.plano-detalhe {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
background: var(--superficie);
border: 1px solid var(--borda);
border-radius: var(--raio);
box-shadow: var(--sombra-1);
overflow: hidden;
}
.plano-detalhe-topo { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--borda-suave); }
.plano-detalhe-topo h2, .plano-vazio h2 { font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.plano-detalhe-topo .botao { margin-left: auto; height: 36px; font-weight: 500; }
.plano-vazio { padding: 32px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.plano-rodape { margin-top: 12px; padding: 12px 20px; border-top: 1px solid var(--borda-suave); font-size: 12px; color: var(--texto-2); background: var(--fundo-2); }
/* tabela de ações: descrição + linha secundária (observação / "Atrasada há N dias…"); abaixo de 640px vira cartões (.tabela-cartoes).
Regra das tabelas com table-layout: fixed: min-width = soma das colunas fixas + ≥ 140px para a coluna flexível, só no bloco
de tablet em diante (min-width 641px, em Responsivo) — senão a coluna flexível fica com 0px (defeito da tabela de usuários no celular). */
.tabela-rolagem { overflow-x: auto; }
.acoes-tabela { table-layout: fixed; }
.acoes-tabela .col-responsavel { width: 140px; }
.acoes-tabela .col-prazo { width: 96px; } /* "28/02/2027" (prazo de outro ano) numa linha */
.acoes-tabela .col-status { width: 124px; }
.acoes-tabela .col-abrir { width: 88px; }
.acao-titulo { display: block; font-weight: 500; overflow-wrap: anywhere; }
.acao-linha2 { display: block; font-size: 11px; color: var(--texto-2); overflow-wrap: anywhere; }
.tabela tbody tr.linha-atrasada { background: var(--atrasada-suave); }
.tabela tbody tr.linha-atrasada:hover { background: var(--atrasada-fundo); }
.linha-atrasada .acao-linha2 { color: var(--atrasada-texto); }
.prazo-atrasado { color: var(--perigo); font-weight: 600; }
.tabela tbody tr.linha-aberta, .tabela tbody tr.linha-edicao { background: var(--tinta-2); }
.tabela tbody tr.linha-edicao > td { border-top: 0; padding-top: 4px; padding-bottom: 16px; }
/* formulários em caixa tracejada (novo plano, nova ação) e grade 2fr 1fr 1fr do mockup */
.form-tracejado { margin: 14px 20px 0; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--borda-forte); background: var(--fundo-2); display: flex; flex-direction: column; gap: 10px; }
.form-titulo { font-family: var(--fonte-titulo); font-size: 13px; font-weight: 600; }
.campos-acao { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; align-items: end; }
.campos-acao-fim { align-items: end; }
.botoes-inicio .botao-primario { flex: none; }
/* ---------- Dashboard (d2-*): KPIs com sparkline, gráficos SVG do servidor (App\Servicos\Graficos), insights ----------
Os gráficos são