/*
* Facilita Desenvolve — CSS base do tema "app"
*
* Dois eixos independentes e combináveis (ver docs/decisao-temas-layout-completo.md):
*
* data-layout "light" | "cards" — ESTRUTURA da tela + claro/escuro.
* light: lista com contorno. cards: cards grandes
* preenchidos de cor. Chrome sempre claro no light,
* sempre escuro no cards. Troca também a pasta de view
* renderizada (themes/app/views/{layout}/home.php).
* Cabeçalho (.fd-app-topbar), busca (.fd-app-search) e
* navegação inferior (.fd-app-nav) existem nos dois
* layouts — funcionalidade não muda por layout, só cor.
*
* data-theme "crescimento_calmo" | "jornada_vibrante" | "familia_essencial"
* — só COR de destaque (primária, estudo, recompensa) e
* personalidade tipográfica. Não muda estrutura nem
* claro/escuro — isso é papel do layout.
*
* Os 6 blocos abaixo (2 layout × 3 tema) definem o conjunto completo de
* tokens para cada combinação. Os componentes .fd-* mais adiante neste
* arquivo são os mesmos em qualquer combinação — só os tokens mudam.
*/
/* ════════════════════════════════════════════════════════════════════
FONTES — auto-hospedadas (2026-08-18)
════════════════════════════════════════════════════════════════════
Antes carregadas via pro Google Fonts em _theme_default.php.
Tirado de lá porque, testando localmente, a rede da Cristiane não
conseguia completar a conexão com fonts.googleapis.com/fonts.gstatic.com
(Console: "net::ERR_CONNECTION_CLOSED" nas duas requisições de fonte) —
com a fonte de ícone nunca chegando, o texto de fallback (o nome do
ícone por extenso, ex. "notifications") ficava visível PERMANENTEMENTE
em vez de só durante o carregamento; foi o efeito "tradutor" que ela
reportou continuar mesmo depois do ajuste de display:block (que só
ajuda em conexão lenta, não em conexão que nunca completa). Também
tirava um RTT extra pra fonts.googleapis.com + fonts.gstatic.com do
caminho crítico de carregamento — daí a demora.
Arquivos em ../fonts/ (extraídos dos mesmos pacotes que o Google Fonts
serve, via pacotes @fontsource/* — mesma fonte, mesma licença OFL,
hospedada no próprio servidor). Só os pesos realmente usados no
projeto (--font-heading/--font-body mais abaixo, e os --font-family
antigos de light/cards). Ícone: variante "fill" do Material Symbols
Outlined variável (~1.1MB, eixos wght+FILL — os 2 que este projeto usa
via .fd-icon-fill; GRAD/opsz não são suportados nessa variante mais
leve, mas não fazem falta aqui) em vez da variável "full" (~4MB, todos
os 4 eixos) — mais rápida de carregar. */
@font-face {
font-family: "Nunito Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/nunito-sans-400.woff2") format("woff2");
}
/* Perfil: separação semântica entre pessoas cuidadas e cuidadores. */
.fd-vinculo-grupo-titulo{display:flex;align-items:center;gap:7px;margin:14px 0 2px;padding:9px 3px 6px;color:var(--primary);border-bottom:1px solid var(--outline-variant);font-size:11px;font-weight:800}.fd-vinculo-grupo-titulo:first-child{margin-top:0}.fd-vinculo-grupo-titulo .material-symbols-outlined{font-size:18px}.fd-vinculo-acesso-confirmado{display:flex;align-items:center;gap:5px;width:max-content;max-width:100%;margin:5px 0;padding:4px 7px;color:var(--primary);background:var(--primary-container);border-radius:99px;font-size:8px;font-weight:800}.fd-vinculo-acesso-confirmado .material-symbols-outlined{font-size:14px;font-variation-settings:'FILL' 1}.fd-cuidador-pessoas{margin:0;padding:0;border:0}.fd-cuidador-pessoas-opcoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.fd-cuidador-pessoas-opcoes label{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:8px;min-height:48px;padding:9px 10px;background:var(--surface-container-low);border:1px solid var(--outline-variant);border-radius:11px;cursor:pointer}.fd-cuidador-pessoas-opcoes input{position:absolute;width:1px;height:1px;opacity:0;clip-path:inset(50%)}.fd-cuidador-pessoas-opcoes .material-symbols-outlined{display:grid;place-items:center;width:28px;height:28px;color:transparent;background:var(--surface-container-lowest);border:2px solid var(--outline);border-radius:8px;font-size:17px}.fd-cuidador-pessoas-opcoes label:has(input:checked){color:var(--on-primary-container);background:var(--primary-container);border-color:var(--primary)}.fd-cuidador-pessoas-opcoes label:has(input:checked) .material-symbols-outlined{color:var(--on-primary);background:var(--primary);border-color:var(--primary)}.fd-cuidador-pessoas-opcoes label:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--primary) 25%,transparent);outline-offset:2px}@media(max-width:520px){.fd-cuidador-pessoas-opcoes{grid-template-columns:1fr}}
.fd-perfil-grid.fd-vinculos-grid{grid-template-columns:minmax(0,1fr)}.fd-vinculos-grid>.fd-perfil-col:empty{display:none}
/* Ação primária disponível diretamente na agenda da tela Hoje. */
.fd-hoje-agenda-concluir {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-height: 34px;
padding: 0 12px;
color: var(--on-primary);
background: var(--primary);
border: 1px solid var(--primary);
border-radius: 999px;
font-size: 10px;
font-weight: 850;
text-decoration: none;
white-space: nowrap;
transition: filter .18s ease, transform .18s ease;
}
.fd-hoje-agenda-concluir .material-symbols-outlined { font-size: 17px; }
.fd-hoje-agenda-concluir:hover { filter: brightness(.92); transform: translateY(-1px); }
.fd-hoje-agenda-concluir:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); outline-offset: 2px; }
@media (max-width: 600px) {
.fd-hoje-agenda-item > .fd-hoje-agenda-concluir { grid-column: 3; grid-row: 1; }
}
@font-face {
font-family: "Nunito Sans";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/nunito-sans-600.woff2") format("woff2");
}
@font-face {
font-family: "Nunito Sans";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/nunito-sans-700.woff2") format("woff2");
}
@font-face {
font-family: "Nunito Sans";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/nunito-sans-800.woff2") format("woff2");
}
@font-face {
font-family: "DM Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/dm-sans-400.woff2") format("woff2");
}
@font-face {
font-family: "DM Sans";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/dm-sans-500.woff2") format("woff2");
}
@font-face {
font-family: "DM Sans";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/dm-sans-700.woff2") format("woff2");
}
@font-face {
font-family: "Quicksand";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/quicksand-600.woff2") format("woff2");
}
@font-face {
font-family: "Quicksand";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/quicksand-700.woff2") format("woff2");
}
@font-face {
font-family: "Material Symbols Outlined";
font-style: normal;
font-weight: 100 700;
font-display: block;
src: url("../fonts/material-symbols-outlined.woff2") format("woff2-variations");
}
/* ════════════════════════════════════════════════════════════════
LAYOUT: light — chrome sempre claro
════════════════════════════════════════════════════════════════ */
/* ─── light + Crescimento Calmo (padrão/recomendado) ─────────────── */
:root,
:root[data-layout="light"][data-theme="crescimento_calmo"] {
--font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-weight-heading: 700;
--radius-card: 16px;
--radius-button: 12px;
--color-bg: #F6F9F8;
--color-surface: #FFFFFF;
--color-border: #DDE6E3;
--color-text-primary: #17211F;
--color-text-secondary: #3F4C48;
--color-primary: #176B5B;
--color-primary-contrast: #FFFFFF;
--color-primary-tint: #DDF3ED;
--color-primary-tint-text: #176B5B;
--color-study: #2563EB;
--color-study-tint: #E6F1FB;
--color-reward: #F59E0B;
--color-reward-tint: #FFFBEF;
--color-reward-tint-border: #F3E3BE;
--color-reward-tint-text: #412402;
}
/* ─── light + Jornada Vibrante ────────────────────────────────────── */
:root[data-layout="light"][data-theme="jornada_vibrante"] {
--font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-weight-heading: 800;
--radius-card: 20px;
--radius-button: 14px;
--color-bg: #F7F7FF;
--color-surface: #FFFFFF;
--color-border: #EEF2FF;
--color-text-primary: #1E1B4B;
--color-text-secondary: #4F4F78;
--color-primary: #4338CA;
--color-primary-contrast: #FFFFFF;
--color-primary-tint: #EEF2FF;
--color-primary-tint-text: #4338CA;
--color-study: #0284C7;
--color-study-tint: #DBEAFE;
--color-reward: #EA580C;
--color-reward-tint: #FEE2CC;
--color-reward-tint-border: #FEE2CC;
--color-reward-tint-text: #7C2D12;
}
/* ─── light + Família Essencial ───────────────────────────────────── */
:root[data-layout="light"][data-theme="familia_essencial"] {
--font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-weight-heading: 700;
--radius-card: 10px;
--radius-button: 10px;
--color-bg: #FFFBF5;
--color-surface: #FFFFFF;
--color-border: #F0E4D4;
--color-text-primary: #292524;
--color-text-secondary: #57504C;
--color-primary: #9A3412;
--color-primary-contrast: #FFFFFF;
--color-primary-tint: #F4E3D3;
--color-primary-tint-text: #9A3412;
--color-study: #0F766E;
--color-study-tint: #E1F0EE;
--color-reward: #D97706;
--color-reward-tint: #FBEEDD;
--color-reward-tint-border: #F0E4D4;
--color-reward-tint-text: #78350F;
}
/* ════════════════════════════════════════════════════════════════
LAYOUT: cards — chrome sempre escuro
════════════════════════════════════════════════════════════════ */
/* ─── cards + Crescimento Calmo ───────────────────────────────────── */
:root[data-layout="cards"][data-theme="crescimento_calmo"] {
--font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-weight-heading: 700;
--radius-card: 16px;
--radius-button: 12px;
--color-bg: #0F1E19;
--color-surface: #1B2E27;
--color-border: #2A4038;
--color-text-primary: #EAF5F1;
--color-text-secondary: #B8CEC7;
--color-primary: #22B396;
--color-primary-contrast: #06231B;
--color-primary-tint: #16332A;
--color-primary-tint-text: #6EE7C9;
--color-study: #38BDF8;
--color-study-tint: #14293B;
--color-reward: #F5A623;
--color-reward-tint: #3A2B12;
--color-reward-tint-border: #56421C;
--color-reward-tint-text: #FBD48A;
}
/* ─── cards + Jornada Vibrante ────────────────────────────────────── */
:root[data-layout="cards"][data-theme="jornada_vibrante"] {
--font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-weight-heading: 800;
--radius-card: 20px;
--radius-button: 14px;
--color-bg: #17132B;
--color-surface: #241E42;
--color-border: #362D5C;
--color-text-primary: #F5F3FF;
--color-text-secondary: #C3BCE0;
--color-primary: #6D5AE0;
--color-primary-contrast: #FFFFFF;
--color-primary-tint: #2E2657;
--color-primary-tint-text: #C9C2FF;
--color-study: #38BDF8;
--color-study-tint: #1B2A42;
--color-reward: #EA580C;
--color-reward-tint: #3A2412;
--color-reward-tint-border: #5C3A1D;
--color-reward-tint-text: #FDBA74;
}
/* ─── cards + Família Essencial ───────────────────────────────────── */
:root[data-layout="cards"][data-theme="familia_essencial"] {
--font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-weight-heading: 700;
--radius-card: 10px;
--radius-button: 10px;
--color-bg: #1C130E;
--color-surface: #2A1D15;
--color-border: #3D2A1D;
--color-text-primary: #FBEEE2;
--color-text-secondary: #D7C1AA;
--color-primary: #F0713F;
--color-primary-contrast: #2A1005;
--color-primary-tint: #3D2313;
--color-primary-tint-text: #FBAE86;
--color-study: #2DD4BF;
--color-study-tint: #12332E;
--color-reward: #F2A73B;
--color-reward-tint: #3D2C12;
--color-reward-tint-border: #5C4420;
--color-reward-tint-text: #F8D9A0;
}
/*
* ─── Chrome externo (fora do "aparelho") ────────────────────────────
* Página que envolve a prévia — status de ambiente, seletores de
* layout/tema/densidade. SEMPRE clara, não segue data-layout/data-theme
* — é ferramenta de protótipo, não parte da tela do app. Só o que fica
* dentro de .fd-phone-frame usa os tokens --color-* (que aí sim variam
* por layout/tema, inclusive escuro no layout cards).
*/
:root {
--devtool-bg: #F1F2F5;
--devtool-surface: #FFFFFF;
--devtool-border: #E1E3E8;
--devtool-text: #1F2430;
--devtool-text-secondary: #4B5563;
}
/* ════════════════════════════════════════════════════════════════════
NOVO SISTEMA DE DESIGN (2026-08-18) — Fase 0 da migração visual
════════════════════════════════════════════════════════════════════
Tokens extraídos de "Novos designers/facilita_desenvolve/DESIGN.md"
(ver plano de migração entregue à Cristiane). Camada ADITIVA: não
mexe nos tokens antigos (--color-*, blocos [data-layout]) acima —
eles continuam servindo as telas ainda não migradas. Estes tokens
novos (nomes sem prefixo "color-", estilo Material Design 3) são
usados só pelo novo cabeçalho/nav responsivo (.fd-shell-*, mais
abaixo) e pelos componentes de estado global (skeleton/erro). Cada
tela migrada nas próximas fases passa a usar ESTES tokens; quando a
última tela sair do sistema antigo, os blocos [data-layout] acima e
as classes .fd-app-* e .fd-phone-frame somem.
Eixo agora é só `data-theme` (light/cards foi descontinuado — decisão
da Cristiane em 2026-08-18, ver [[project-facilita-desenvolve-migracao-visual-novos-designers]]
na memória do projeto). O que antes era o eixo `layout` (claro/escuro)
passou a viver dentro do tema Jornada Vibrante.
Fidelidade dos 3 temas ao DESIGN.md:
- Crescimento Calmo: valores exatos do DESIGN.md (alta confiança).
- Família Essencial: valores exatos onde o DESIGN.md nomeia
explicitamente ("surface-white", "text-main", "blue-support" —
batem com a descrição "branco de alto contraste + navy + azul de
apoio"); resto herda os tokens neutros da base.
- Jornada Vibrante: NENHUM dos 44 mockups mostra este tema (todos
usam a mesma paleta clara) — os valores abaixo foram derivados
aplicando a convenção padrão do Material Design 3 aos tokens
"inverse-*"/"*-fixed-dim" que o próprio DESIGN.md já define pra
esse fim, não inventados do zero. Ainda assim, é a parte com menor
confiança de fidelidade — recomendo revisão visual da Cristiane (ou
do designer) assim que a primeira tela nesse tema for construída.
════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="crescimento_calmo"] {
--font-heading: "Quicksand", "Nunito Sans", system-ui, sans-serif;
--font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--surface: #f7fafd;
--surface-dim: #d7dadd;
--surface-bright: #f7fafd;
--surface-container-lowest: #ffffff;
--surface-container-low: #f1f4f7;
--surface-container: #ebeef1;
--surface-container-high: #e5e8eb;
--surface-container-highest: #e0e3e6;
--on-surface: #181c1e;
--on-surface-variant: #3c4a46;
--inverse-surface: #2d3133;
--inverse-on-surface: #eef1f4;
--outline: #6b7a76;
--outline-variant: #bacac5;
--primary: #006b5d;
--on-primary: #ffffff;
--primary-container: #12c9b0;
--on-primary-container: #004f44;
--secondary: #49607c;
--on-secondary: #ffffff;
--secondary-container: #c7dfff;
--on-secondary-container: #4b637e;
--tertiary: #a53c00;
--on-tertiary: #ffffff;
--tertiary-container: #ff996e;
--on-tertiary-container: #7b2b00;
--error: #ba1a1a;
--on-error: #ffffff;
--error-container: #ffdad6;
--on-error-container: #93000a;
--aqua-light: #bdf4e8;
}
[data-theme="familia_essencial"] {
--font-heading: "Quicksand", "Nunito Sans", system-ui, sans-serif;
--font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
/* Fundo branco de alto contraste + navy/azul de apoio — tokens
"surface-white"/"text-main"/"blue-support" do DESIGN.md, nomeados
especificamente pra este tema.
--surface começava igual a --surface-container-lowest (#ffffff
nos dois) — bug de fidelidade encontrado em 2026-08-18: com o
cabeçalho/cards usando surface-container-lowest e o conteúdo
usando surface, ficarem idênticos fazia o conteúdo parecer "sem
cor de fundo" (Cristiane reportou isso testando com este tema
ativo). Ajustado pra um branco levemente acinzentado — ainda leal
ao "alto contraste" do DESIGN.md, mas distinguível do branco puro
do cabeçalho/cards, no mesmo espírito do crescimento_calmo (onde
surface #f7fafd já era diferente de container-lowest #ffffff). */
--surface: #f4f6f7;
--surface-dim: #d7dadd;
--surface-bright: #f4f6f7;
--surface-container-lowest: #ffffff;
--surface-container-low: #f1f4f7;
--surface-container: #ebeef1;
--surface-container-high: #e5e8eb;
--surface-container-highest: #e0e3e6;
--on-surface: #172b3a;
--on-surface-variant: #3c4a46;
--inverse-surface: #2d3133;
--inverse-on-surface: #eef1f4;
--outline: #6b7a76;
--outline-variant: #bacac5;
/* Turquesa/laranja usados com conservadorismo (só destaque
pontual — "uso conservador de navy e azul de apoio" no DESIGN.md) */
--primary: #006b5d;
--on-primary: #ffffff;
--primary-container: #12c9b0;
--on-primary-container: #004f44;
--secondary: #356ae6;
--on-secondary: #ffffff;
--secondary-container: #c7dfff;
--on-secondary-container: #172b3a;
--tertiary: #a53c00;
--on-tertiary: #ffffff;
--tertiary-container: #ff996e;
--on-tertiary-container: #7b2b00;
--error: #ba1a1a;
--on-error: #ffffff;
--error-container: #ffdad6;
--on-error-container: #93000a;
--aqua-light: #bdf4e8;
}
[data-theme="jornada_vibrante"] {
/* PROVISÓRIO — ver nota de confiança no topo deste bloco. Superfície
escura via inverse-surface/inverse-on-surface; acentos via
*-fixed-dim/*-fixed (tokens M3 já pensados pra essa finalidade). */
--font-heading: "Quicksand", "Nunito Sans", system-ui, sans-serif;
--font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--surface: #2d3133;
--surface-dim: #181c1e;
--surface-bright: #3c4144;
--surface-container-lowest: #181c1e;
--surface-container-low: #22262a;
--surface-container: #282c2f;
--surface-container-high: #333739;
--surface-container-highest: #3e4244;
--on-surface: #eef1f4;
--on-surface-variant: #bacac5;
--inverse-surface: #f7fafd;
--inverse-on-surface: #181c1e;
--outline: #8a9d97;
--outline-variant: #3c4a46;
--primary: #3cddc3;
--on-primary: #00201b;
--primary-container: #005045;
--on-primary-container: #62fadf;
--secondary: #b0c9e8;
--on-secondary: #011d35;
--secondary-container: #314863;
--on-secondary-container: #d1e4ff;
--tertiary: #ffb598;
--on-tertiary: #360f00;
--tertiary-container: #7e2c00;
--on-tertiary-container: #ffdbcd;
--error: #ffb4ab;
--on-error: #690005;
--error-container: #93000a;
--on-error-container: #ffdad6;
--aqua-light: #1c332e;
}
:root {
/* Espaçamento e forma — DESIGN.md `spacing`/`rounded` (fixos, não
variam por tema). */
--fd-unit: 4px;
--fd-touch-target: 44px;
--fd-gutter: 16px;
--fd-margin-mobile: 20px;
--fd-stack-sm: 8px;
--fd-stack-md: 16px;
--fd-stack-lg: 24px;
--fd-rounded-sm: 0.25rem;
--fd-rounded: 0.5rem;
--fd-rounded-md: 0.75rem;
--fd-rounded-lg: 1rem;
--fd-rounded-xl: 1.5rem;
--fd-rounded-full: 9999px;
--fd-shell-desktop-breakpoint: 768px;
--fd-shell-sidebar-width: 260px;
--fd-shell-header-height: 64px;
--fd-shell-bottomnav-height: 72px;
}
* {
box-sizing: border-box;
}
/* Foco consistente em todo o app: o clique não herda o contorno preto
do navegador; quem navega por teclado continua vendo um indicador
acessível na cor primária do tema. `:where()` mantém especificidade
baixa para componentes com tratamento próprio continuarem valendo. */
:where(
a[href],
button,
input,
select,
textarea,
summary,
[tabindex]:not([tabindex="-1"]),
[contenteditable="true"]
):focus {
outline: none;
}
:where(
a[href],
button,
input,
select,
textarea,
summary,
[tabindex]:not([tabindex="-1"]),
[contenteditable="true"]
):focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* Rolagem suave pra links de âncora dentro da mesma tela (ex.:
"Adicionar Vínculo" → #convidar-alguem em config.php) — sem isso o
salto era instantâneo e, quando a seção-alvo já cabia na tela sem
precisar rolar, o clique parecia não fazer nada (reportado pela
Cristiane em 2026-08-22). Ver .fd-perfil-card (scroll-margin-top) e
FD_APP.initAncoraDestaque em app.js pro resto da correção. */
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font-family);
background: var(--devtool-bg);
color: var(--devtool-text);
}
/* ─── Ícones (Material Symbols Outlined) — Fase 1 ────────────────────
O endpoint css2 do Google Fonts (ver link em _theme_default.php) só
entrega o @font-face da fonte variável — a classe abaixo (font-family
+ as propriedades de renderização) é o snippet oficial do Google
Fonts pra essa fonte e precisa ser definida aqui; sem ela os spans
.material-symbols-outlined caem pra fonte padrão e mostram o nome do
ícone como texto (ex: "today") em vez do glifo. */
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
/* Trava a caixa no tamanho quadrado de 1 glifo (ver
font-display:block no @font-face acima) — reportado pela
Cristiane em 2026-08-25: ao voltar de Editar/Ver pra Cursos, o
botão Excluir "pulava" pra linha de baixo e depois voltava a se
alinhar. Causa: antes da fonte carregar, o navegador ainda
reserva espaço como se o texto do ícone (ex.: "delete",
"visibility") fosse renderizado por extenso na fonte de
fallback — bem mais largo que 1 glifo — e só DEPOIS que o glifo
fica invisível (font-display:block); a caixa larga-mas-invisível
empurrava o Excluir pra 2ª linha do footer, que depois
encolhia de volta assim que a fonte carregava. `width: 1em` +
`overflow: hidden` prende a caixa no tamanho final do glifo
desde o 1º frame, então não sobra texto invisível pra
"estourar" a largura da linha. */
width: 1em;
overflow: hidden;
}
.fd-app {
max-width: 420px;
margin: 0 auto;
padding: 24px 20px;
}
/* ─── Checagem de ambiente (tela inicial, fase atual) — chrome externo, sempre claro ─── */
.fd-status-card {
border: 1px solid var(--devtool-border);
background: var(--devtool-surface);
border-radius: 16px;
padding: 20px;
margin-bottom: 24px;
}
.fd-status-list {
list-style: none;
padding: 0;
margin: 12px 0;
}
.fd-status-list li {
padding: 8px 0;
border-bottom: 1px solid var(--devtool-border);
font-size: 14px;
}
.fd-status-hint {
color: var(--devtool-text-secondary);
font-size: 14px;
margin: 0;
}
/* ─── Seletor de layout/tema/densidade — chrome externo, sempre claro ─── */
.fd-theme-switcher {
display: flex;
gap: 8px;
margin-bottom: 24px;
}
.fd-theme-option {
flex: 1;
text-align: center;
padding: 10px 6px;
border-radius: 12px;
border: 2px solid var(--devtool-border);
font-size: 13px;
font-weight: 600;
color: var(--devtool-text-secondary);
text-decoration: none;
background: var(--devtool-surface);
}
/*
* Estado ativo é a EXCEÇÃO proposital: usa a cor do tema/layout
* selecionado (var(--color-*)) pra dar uma prévia da cor de destaque
* escolhida, mesmo esse botão estando fora do "aparelho".
*/
.fd-theme-option.is-active {
border-color: var(--color-primary);
color: var(--color-primary-tint-text);
background: var(--color-primary-tint);
}
/* ─── Prévia "Tela Hoje" (demonstra o tema aplicado) ────────────── */
.fd-preview-label {
margin: 0 0 12px;
font-size: 13px;
font-weight: 600;
color: var(--devtool-text-secondary);
}
.fd-greeting {
display: flex;
align-items: center;
gap: 10px;
margin: 20px 18px 18px;
}
.fd-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-primary-tint);
color: var(--color-primary-tint-text);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--font-weight-heading);
font-size: 14px;
flex-shrink: 0;
}
.fd-greeting-name {
margin: 0;
font-size: 16px;
font-weight: var(--font-weight-heading);
color: var(--color-text-primary);
}
.fd-streak {
margin: 0;
font-size: 13px;
color: var(--color-text-secondary);
}
.fd-next-card {
background: var(--color-primary-tint);
border-radius: var(--radius-card);
padding: 16px;
margin: 0 18px 16px;
}
.fd-next-label {
margin: 0 0 4px;
font-size: 13px;
font-weight: 600;
color: var(--color-primary-tint-text);
}
/*
* Curso a que o capítulo em destaque pertence — pedido pela Cristiane
* em 2026-08-11: o card de "próxima ação" mostrava só o nome do
* capítulo, sem deixar claro de qual curso ele fazia parte (mesmo
* problema nas linhas da lista "Hoje", ver .fd-row-meta em
* views/{light,cards}/home.php). Etiqueta pequena, cor do rótulo
* "Próxima ação", entre o rótulo e o título do capítulo.
*/
.fd-next-curso {
margin: 0 0 6px;
font-size: 12px;
font-weight: 700;
color: var(--color-primary-tint-text);
}
.fd-next-title {
margin: 0 0 2px;
font-size: 15px;
font-weight: var(--font-weight-heading);
color: var(--color-text-primary);
}
.fd-next-meta {
margin: 0 0 12px;
font-size: 13px;
color: var(--color-text-secondary);
}
.fd-btn-primary {
width: 100%;
height: 46px;
border-radius: var(--radius-button);
background: var(--color-primary);
color: var(--color-primary-contrast);
border: none;
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
}
/* Migrado pros tokens Material Design 3 em 2026-08-25 (mesmo motivo da
correção de `.fd-form-*` em 24/08, ver PENDENCIAS.md): `--color-*`
só responde ao Tema Escuro sob `[data-layout="cards"]`, atributo que
as telas novas via `_app_shell` (aprovacoes.php, compromissos_index.php,
cursos_conteudo.php, tarefas_hub.php — os 4 usuários ao vivo desta
classe) nunca mais passam — então esse título sempre saía na cor
clara, mesmo com Tema Escuro selecionado. */
.fd-section-title {
margin: 0 18px 10px;
font-size: 14px;
font-weight: 600;
color: var(--on-surface);
}
/* Só "Módulos e capítulos" em cursos_conteudo.php (2026-08-25, pedido
da Cristiane) — depois que o card de Habilidades saiu de cima dela,
ficou pedindo mais destaque como título de seção. Modificador em vez
de mudar `.fd-section-title` base, usado também em aprovacoes.php/
compromissos_index.php/tarefas_hub.php. */
.fd-section-title--grande {
font-size: 18px;
}
.fd-row-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
padding: 12px 14px;
margin: 0 18px 10px;
display: flex;
align-items: center;
gap: 10px;
}
.fd-row-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.fd-row-dot--study {
background: var(--color-study);
}
.fd-row-dot--task {
background: var(--color-primary);
}
.fd-row-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary);
}
.fd-row-meta {
margin: 0;
font-size: 13px;
color: var(--color-text-secondary);
}
.fd-row-main {
flex: 1;
min-width: 0;
}
.fd-badge-neutral {
font-size: 12px;
font-weight: 600;
color: var(--color-text-secondary);
background: var(--color-bg);
border-radius: 8px;
padding: 4px 8px;
white-space: nowrap;
flex-shrink: 0;
}
.fd-btn-chip {
font-size: 13px;
font-weight: 600;
color: var(--color-primary-tint-text);
background: var(--color-primary-tint);
border: none;
border-radius: 8px;
padding: 6px 10px;
font-family: inherit;
cursor: pointer;
flex-shrink: 0;
}
.fd-week-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
padding: 14px;
margin: 0 18px 14px;
}
.fd-week-label {
margin: 0 0 6px;
font-size: 13px;
font-weight: 600;
color: var(--color-text-secondary);
}
.fd-week-value {
margin: 0 0 10px;
font-size: 20px;
font-weight: var(--font-weight-heading);
color: var(--color-text-primary);
}
.fd-week-value small {
font-size: 13px;
font-weight: 600;
color: var(--color-text-secondary);
}
/*
* Lista nomeada dos capítulos concluídos na semana, dentro do card
* "Essa semana" — pedido pela Cristiane em 2026-08-11: o número
* agregado sozinho ("1 de 2 no total") não dizia qual curso/capítulo
* foi concluído. Ver CursoCapitulo::concluidosDesde() e
* AppHome::index(). Última linha ganha margem maior pra respirar antes
* da barra de progresso.
*/
.fd-week-item {
margin: 0 0 3px;
font-size: 12px;
color: var(--color-text-secondary);
}
.fd-week-item:last-of-type {
margin-bottom: 10px;
}
.fd-progress-track {
height: 8px;
border-radius: 4px;
background: var(--color-border);
overflow: hidden;
display: flex;
}
.fd-progress-study {
background: var(--color-study);
}
.fd-progress-reward {
background: var(--color-reward);
}
/*
* ─── Alerta de aprovação pendente — Tela Hoje ───────────────────────
* Card real (não mocado, ver AppHome::index()) que aparece quando o
* responsável tem diário de aprendizado esperando validação — leva
* pra /aprovacoes (AppAprovacoes). Pedido pela Cristiane em 2026-08-09
* como destaque na Tela Hoje, em vez de item na nav. Cor primária
* (não --color-reward, usado em .fd-achievement) pra diferenciar
* "precisa de ação" de "conquista".
*/
.fd-alerta-aprovacao {
display: flex;
align-items: center;
gap: 10px;
background: var(--color-primary-tint);
border-radius: 14px;
padding: 12px 14px;
margin: 0 18px 16px;
text-decoration: none;
}
.fd-alerta-aprovacao-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-primary-contrast);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
.fd-alerta-aprovacao-title {
margin: 0;
font-size: 14px;
font-weight: 700;
color: var(--color-primary-tint-text);
}
.fd-alerta-aprovacao-meta {
margin: 2px 0 0;
font-size: 13px;
color: var(--color-primary-tint-text);
opacity: .85;
}
.fd-achievement {
display: flex;
align-items: center;
gap: 10px;
background: var(--color-reward-tint);
border: 1px solid var(--color-reward-tint-border);
border-radius: 14px;
padding: 10px 12px;
margin: 0 18px 20px;
}
.fd-achievement-icon {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--color-reward);
color: var(--color-reward-tint-text);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 14px;
font-weight: 700;
}
.fd-achievement-text {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
}
/*
* ─── Densidade: Essencial (7–10 anos) vs Completa (11+/adulto) ────
* Segunda dimensão, independente do tema — ver guia visual, seção 10.
* "Guiada" (até 6 anos) não é densidade, é um modelo de interação
* diferente e fica fora deste arquivo até existir essa fase.
*/
[data-density="essencial"] .fd-row-meta,
[data-density="essencial"] .fd-badge-neutral,
[data-density="essencial"] .fd-week-value small,
[data-density="essencial"] .fd-progress-reward {
display: none;
}
[data-density="essencial"] .fd-btn-primary,
[data-density="essencial"] .fd-btn-chip {
min-height: 52px;
}
[data-density="essencial"] .fd-row-title,
[data-density="essencial"] .fd-next-title {
font-size: 16px;
}
/* Densidade também se aplica ao layout cards — mesma ideia, classes diferentes. */
[data-density="essencial"] .fd-cards-card-meta,
[data-density="essencial"] .fd-cards-week .fd-week-value small,
[data-density="essencial"] .fd-progress-reward {
display: none;
}
[data-density="essencial"] .fd-cards-card-title,
[data-density="essencial"] .fd-cards-hero-title {
font-size: 16px;
}
[data-density="essencial"] .fd-cards-card {
padding: 16px;
}
/*
* ─── Densidade Essencial também como modo de conforto visual ───────
* Pedido pela Cristiane em 2026-08-10: além do piso mínimo de fonte
* ter subido em toda a tela (bloco acima do bloco de tokens, "letras
* muito pequenas e apagadas"), a densidade Essencial passou a cobrir
* TODA a tela — não só a Tela Hoje — como modo de conforto extra pra
* quem quiser fonte ainda maior, independente de ser criança
* (7–10 anos, motivo original do eixo) ou adulto com dificuldade de
* visão. Mesma regra de sempre: +2px sobre o valor base de cada
* seletor. Não duplica os blocos acima (que já cobrem row-title,
* next-title, cards-card-title, cards-hero-title, cards-card padding
* e os "display: none" de itens secundários) — só estende pro resto
* do app: formulários, listas de curso, tags, badges, Aprovações,
* Recompensas.
*/
[data-density="essencial"] .fd-form-label,
[data-density="essencial"] .fd-form-hint,
[data-density="essencial"] .fd-curso-row-meta,
[data-density="essencial"] .fd-curso-row-link,
[data-density="essencial"] .fd-curso-actions a,
[data-density="essencial"] .fd-curso-actions button,
[data-density="essencial"] .fd-cards-curso-meta,
[data-density="essencial"] .fd-cards-curso-actions a,
[data-density="essencial"] .fd-cards-curso-actions button,
[data-density="essencial"] .fd-tag-chip,
[data-density="essencial"] .fd-tag-chip-remove,
[data-density="essencial"] .fd-resumo-ia-label,
[data-density="essencial"] .fd-alerta-aprovacao-meta,
[data-density="essencial"] .fd-achievement-text,
[data-density="essencial"] .fd-streak,
[data-density="essencial"] .fd-next-label,
[data-density="essencial"] .fd-next-meta,
[data-density="essencial"] .fd-week-label,
[data-density="essencial"] .fd-week-value small,
[data-density="essencial"] .fd-balance-label,
[data-density="essencial"] .fd-cards-balance-label,
[data-density="essencial"] .fd-reward-row-meta,
[data-density="essencial"] .fd-cards-reward-meta,
[data-density="essencial"] .fd-cards-reward-btn,
[data-density="essencial"] .fd-btn-whatsapp,
[data-density="essencial"] .fd-app-topbar-link,
[data-density="essencial"] .fd-cards-section-label {
font-size: 15px;
}
[data-density="essencial"] .fd-curso-badge,
[data-density="essencial"] .fd-cards-curso-badge,
[data-density="essencial"] .fd-status-badge,
[data-density="essencial"] .fd-aprovacao-estudante-avatar {
font-size: 14px;
}
[data-density="essencial"] .fd-aprovacao-estudante,
[data-density="essencial"] .fd-alerta-aprovacao-title,
[data-density="essencial"] .fd-cards-curso-title,
[data-density="essencial"] .fd-reward-row-title,
[data-density="essencial"] .fd-reward-row-price,
[data-density="essencial"] .fd-cards-reward-price,
[data-density="essencial"] .fd-empty-state,
[data-density="essencial"] .fd-app-search,
[data-density="essencial"] .fd-flash,
[data-density="essencial"] .fd-section-title {
font-size: 16px;
}
/* Componentes atuais: mantém a adaptação etária perceptível nas telas
migradas para o design system novo. */
[data-density="essencial"] {
--fd-touch-target: 52px;
}
[data-density="essencial"] .fd-rotina-card h3,
[data-density="essencial"] .fd-ativ-config-card h3,
[data-density="essencial"] .fd-hoje-agenda-item h3,
[data-density="essencial"] .fd-perfil-vinculo-nome {
font-size: 18px;
}
[data-density="essencial"] .fd-rotina-card p,
[data-density="essencial"] .fd-hoje-agenda-item p,
[data-density="essencial"] .fd-hoje-agenda-item > time,
[data-density="essencial"] .fd-hoje-agenda-vazio,
[data-density="essencial"] .fd-perfil-hint,
[data-density="essencial"] .fd-perfil-label {
font-size: 14px !important;
}
[data-density="essencial"] .fd-hoje-agenda-item,
[data-density="essencial"] .fd-rotina-card,
[data-density="essencial"] .fd-ativ-config-card {
padding: 16px;
}
/*
* Moldura de "aparelho" — usada pelos dois layouts (light e cards).
* Bezel sempre claro e neutro, igual em qualquer tema — é o corpo do
* celular, não a tela. Só o miolo (background: var(--color-bg)) muda
* de cor por layout/tema; a borda em volta, não.
*/
.fd-phone-frame {
max-width: 380px;
margin: 0 auto;
background: var(--color-bg);
border-radius: 40px;
border: 10px solid var(--devtool-surface);
outline: 1px solid var(--devtool-border);
box-shadow: 0 20px 40px rgba(17, 24, 39, .12);
overflow: hidden;
position: relative;
}
/* Espaço reservado pra nav inferior fixa (usada nos dois layouts). */
.fd-phone-frame--nav {
padding-bottom: 88px;
}
/*
* ─── Navegação inferior fixa — compartilhada entre light e cards ────
* Mesma estrutura/comportamento nos dois layouts (funcionalidade não
* muda por layout — só a cor, via os tokens --color-* de cada
* combinação layout×tema). Ver docs/decisao-temas-layout-completo.md.
*/
.fd-app-nav {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-around;
padding: 10px 8px;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
}
.fd-app-nav-item {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary);
font-size: 16px;
text-decoration: none;
}
.fd-app-nav-item.is-active {
width: 52px;
height: 52px;
margin-top: -26px;
background: var(--color-reward);
color: #FFFFFF;
box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}
/*
* ─── Cabeçalho (logo + alertas) e busca — compartilhados ────────────
* Mesma estrutura/comportamento nos dois layouts (funcionalidade não
* muda por layout — só a cor, via os tokens --color-* de cada
* combinação layout×tema). Ver "Correção 2026-08-09" em
* docs/decisao-temas-layout-completo.md.
*/
.fd-app-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 18px 4px;
}
.fd-app-logo {
margin: 0;
font-size: 15px;
font-weight: var(--font-weight-heading);
color: var(--color-text-primary);
}
.fd-app-logo span {
color: var(--color-reward);
}
.fd-app-logo-image {
display: block;
width: 190px;
max-width: 58vw;
height: auto;
}
.fd-app-icon-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-surface);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
.fd-app-search {
display: flex;
align-items: center;
gap: 8px;
margin: 14px 18px 20px;
padding: 12px 14px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 14px;
color: var(--color-text-secondary);
font-size: 14px;
}
/*
* ─── Cabeçalho mínimo — telas de conta pós-login sem menu real ainda ─
* onboarding e "convidar estudante" (2026-08-09): não têm nav inferior
* (não são telas do dashboard), então usam só .fd-app-topbar (logo) +
* este link discreto de "Sair" — de propósito pouco chamativo, texto
* simples sem fundo, pra não repetir o problema do menu de protótipo
* que parecia navegação e desviava de onde a pessoa estava indo.
*/
.fd-app-topbar-link {
font-size: 13px;
font-weight: 600;
color: var(--color-text-secondary);
text-decoration: none;
flex-shrink: 0;
}
/* Título de tela sem formulário único (onboarding tem 2 forms, convite tem form + lista) — mesma pele de .fd-form-card-title, fora do card. */
.fd-page-title {
margin: 20px 18px 14px;
font-size: 17px;
font-weight: var(--font-weight-heading);
color: var(--color-text-primary);
}
/*
* ─── Layout Cards — componentes exclusivos ──────────────────────────
* Usados só em themes/app/views/cards/*.php. Ao contrário dos blocos
* .fd-* acima (compartilhados, só trocam de token), estes .fd-cards-*
* existem porque a ESTRUTURA da tela muda neste layout (cards grandes
* preenchidos de cor em vez de lista com contorno, chrome sempre
* escuro) — funciona com os 3 temas, ver docs/decisao-temas-layout-completo.md.
*/
.fd-cards-section-label {
margin: 0 0 10px;
padding: 0 18px;
font-size: 13px;
font-weight: 700;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: .04em;
}
.fd-cards-greeting {
display: flex;
align-items: center;
gap: 10px;
margin: 0 18px 18px;
}
.fd-cards-hero {
margin: 0 18px 20px;
padding: 18px;
border-radius: var(--radius-card);
background: var(--color-primary);
color: var(--color-primary-contrast);
position: relative;
}
.fd-cards-hero-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, .18);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin-bottom: 14px;
}
.fd-cards-hero-fav {
position: absolute;
top: 16px;
right: 16px;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, .18);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
.fd-cards-hero-label {
margin: 0 0 4px;
font-size: 13px;
font-weight: 700;
opacity: .85;
}
/* Equivalente cards de .fd-next-curso — ver comentário lá. */
.fd-cards-hero-curso {
margin: 0 0 6px;
font-size: 12px;
font-weight: 700;
opacity: .75;
}
.fd-cards-hero-title {
margin: 0 0 2px;
font-size: 16px;
font-weight: var(--font-weight-heading);
}
.fd-cards-hero-meta {
margin: 0 0 14px;
font-size: 13px;
opacity: .85;
}
.fd-cards-hero .fd-btn-primary {
background: #FFFFFF;
color: var(--color-primary);
}
.fd-cards-card {
display: flex;
align-items: center;
gap: 12px;
margin: 0 18px 12px;
padding: 14px 16px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 16px;
}
.fd-cards-card-icon {
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: #FFFFFF;
}
.fd-cards-card-icon--study {
background: var(--color-study);
}
.fd-cards-card-icon--task {
background: var(--color-primary);
}
.fd-cards-card-main {
flex: 1;
min-width: 0;
}
.fd-cards-card-title {
margin: 0;
font-size: 14px;
font-weight: 700;
color: var(--color-text-primary);
}
.fd-cards-card-meta {
margin: 0;
font-size: 13px;
color: var(--color-text-secondary);
}
.fd-cards-week {
margin: 4px 18px 14px;
padding: 16px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 16px;
}
.fd-cards-achievement {
display: flex;
align-items: center;
gap: 10px;
margin: 0 18px 4px;
padding: 12px 14px;
background: var(--color-reward-tint);
border: 1px solid var(--color-reward-tint-border);
border-radius: 14px;
color: var(--color-reward-tint-text);
}
[data-density="essencial"] .fd-row-card {
padding: 16px;
}
/*
* ─── Recompensas — layout Light ─────────────────────────────────────
* Cards de recompensa na linguagem do layout light: fundo claro,
* ícone colorido, sem preencher o card inteiro de cor (ao contrário
* do layout cards). "--primary/--study/--reward" reaproveitam os 3
* papéis de cor que cada tema já define.
*/
.fd-balance-card {
background: var(--color-primary-tint);
border-radius: var(--radius-card);
padding: 16px;
margin: 20px 18px 18px;
}
.fd-balance-label {
margin: 0 0 4px;
font-size: 13px;
font-weight: 600;
color: var(--color-primary-tint-text);
}
.fd-balance-value {
margin: 0;
font-size: 22px;
font-weight: var(--font-weight-heading);
color: var(--color-text-primary);
}
.fd-reward-row {
display: flex;
align-items: center;
gap: 12px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
padding: 14px;
margin: 0 18px 12px;
}
.fd-reward-row-icon {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
color: #FFFFFF;
}
.fd-reward-row-icon--primary {
background: var(--color-primary);
}
.fd-reward-row-icon--study {
background: var(--color-study);
}
.fd-reward-row-icon--reward {
background: var(--color-reward);
}
.fd-reward-row-main {
flex: 1;
min-width: 0;
}
.fd-reward-row-title {
margin: 0;
font-size: 14px;
font-weight: 700;
color: var(--color-text-primary);
}
.fd-reward-row-meta {
margin: 2px 0 0;
font-size: 13px;
color: var(--color-text-secondary);
}
.fd-reward-row-footer {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
flex-shrink: 0;
}
.fd-reward-row-price {
font-size: 14px;
font-weight: 700;
color: var(--color-text-primary);
white-space: nowrap;
}
/*
* ─── Recompensas — layout Cards ─────────────────────────────────────
* Aqui sim o card é preenchido inteiro pela cor de destaque (como no
* mockup original) — condiz com a linguagem mais gamificada do cards.
*/
.fd-cards-balance {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 18px 16px;
padding: 12px 16px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 14px;
}
.fd-cards-balance-label {
margin: 0;
font-size: 13px;
color: var(--color-text-secondary);
font-weight: 600;
}
.fd-cards-balance-value {
margin: 0;
font-size: 16px;
color: var(--color-text-primary);
font-weight: var(--font-weight-heading);
}
.fd-cards-reward {
position: relative;
margin: 0 18px 14px;
padding: 18px;
border-radius: var(--radius-card);
color: #FFFFFF;
overflow: hidden;
}
.fd-cards-reward--primary {
background: var(--color-primary);
}
.fd-cards-reward--study {
background: var(--color-study);
}
.fd-cards-reward--reward {
background: var(--color-reward);
}
.fd-cards-reward-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, .22);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin-bottom: 14px;
}
.fd-cards-reward-fav {
position: absolute;
top: 16px;
right: 16px;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, .22);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
.fd-cards-reward-title {
margin: 0 0 2px;
font-size: 15px;
font-weight: var(--font-weight-heading);
}
.fd-cards-reward-meta {
margin: 0 0 14px;
font-size: 13px;
opacity: .85;
}
.fd-cards-reward-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.fd-cards-reward-price {
display: flex;
align-items: center;
gap: 4px;
font-size: 14px;
font-weight: 700;
}
.fd-cards-reward-btn {
background: #FFFFFF;
color: var(--color-text-primary);
border: none;
border-radius: 999px;
padding: 8px 14px;
font-size: 13px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
white-space: nowrap;
}
[data-density="essencial"] .fd-reward-row-meta,
[data-density="essencial"] .fd-cards-reward-meta {
display: none;
}
[data-density="essencial"] .fd-reward-row {
padding: 16px;
}
/*
* ─── Flash message — chrome externo, sempre claro ───────────────────
* Aparece via helper flash() global, populada por Message::flash()
* nos controllers (ex.: AppCursos::salvar()).
*/
.fd-flash {
padding: 12px 16px;
border-radius: 12px;
margin-bottom: 16px;
font-size: 14px;
font-weight: 600;
}
.fd-flash--success {
background: #DCFCE7;
color: #166534;
}
.fd-flash--error {
background: #FEE2E2;
color: #991B1B;
}
.fd-flash--warning {
background: #FEF3C7;
color: #92400E;
}
.fd-flash--info {
background: #DBEAFE;
color: #1E3A8A;
}
/*
* ─── Apresentação do app — telas de primeiro contato ────────────────
* cadastro/login/convite (_auth_apresentacao.php). Redesenho de
* 2026-08-09 ("Rodada 5" — a 1ª versão, cards brancos com emoji,
* ficou genérica; ver docs/decisao-temas-layout-completo.md): faixa
* cheia da cor primária no topo do "aparelho" (mesma linguagem visual
* de .fd-cards-hero), com a "trilha de crescimento" — os 3 passos
* reais do produto conectados por uma linha, ícones em traço único
* (sem emoji). Layout/tema fixos em light + Crescimento Calmo nessas
* telas (AppAuth::contextoFixo()), então usar --color-* aqui é
* seguro — sempre resolve pro mesmo bloco claro.
*/
.fd-auth-hero {
background: var(--color-primary);
color: var(--color-primary-contrast);
padding: 28px 22px 26px;
}
.fd-auth-hero-mark {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 6px;
}
.fd-auth-hero-badge {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, .16);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fd-auth-hero-badge svg {
width: 18px;
height: 18px;
}
.fd-auth-hero-logo {
margin: 0;
font-size: 17px;
font-weight: var(--font-weight-heading);
letter-spacing: -.01em;
}
.fd-auth-hero-tagline {
margin: 0 0 24px;
font-size: 14px;
line-height: 1.5;
color: rgba(255, 255, 255, .82);
max-width: 30ch;
}
/*
* Trilha de crescimento: os 3 passos reais do ciclo do produto (estuda
* → registra/valida → recompensa), não uma lista genérica — por isso
* a linha conectando os nós faz sentido aqui (é uma sequência de
* verdade, não decoração).
*/
.fd-auth-trilha {
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
}
.fd-auth-trilha::before {
content: "";
position: absolute;
left: 15px;
top: 16px;
bottom: 16px;
width: 1px;
background: rgba(255, 255, 255, .28);
}
.fd-auth-trilha-item {
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
}
.fd-auth-trilha-node {
position: relative;
width: 31px;
height: 31px;
border-radius: 50%;
background: var(--color-primary);
border: 1px solid rgba(255, 255, 255, .5);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fd-auth-trilha-node svg {
width: 15px;
height: 15px;
}
.fd-auth-trilha-title {
margin: 0;
font-size: 14px;
font-weight: 700;
}
.fd-auth-trilha-desc {
margin: 2px 0 0;
font-size: 13px;
line-height: 1.4;
color: rgba(255, 255, 255, .75);
}
/*
* Título dentro do form-card (substitui o antigo .fd-preview-label de
* fora do "aparelho" — chrome-externo — que não fazia sentido nessas
* telas depois que o hero passou a representar a tela inteira).
*/
.fd-form-card-title {
margin: 0 0 18px;
font-size: 17px;
font-weight: var(--font-weight-heading);
color: var(--color-text-primary);
}
/* Divisor "Já tenho conta" entre os 2 formulários do convite. */
.fd-form-divider {
margin: 4px 18px 12px;
font-size: 13px;
font-weight: 600;
color: var(--color-text-secondary);
text-align: center;
}
/* Flash dentro do "aparelho" (cadastro/login/convite) precisa da margem lateral que o .fd-app externo dava antes. */
.fd-phone-frame .fd-flash {
margin: 16px 18px;
}
/*
* ─── Cursos — layout Light ───────────────────────────────────────────
*/
.fd-list-actions {
margin: 20px 18px 16px;
}
.fd-list-actions .fd-btn-primary {
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
/* Migrado pros tokens Material Design 3 em 2026-08-25 — mesma causa
raiz de `.fd-section-title` logo acima (`--color-*` preso ao Tema
Claro fora de `[data-layout="cards"]`). */
.fd-empty-state {
margin: 0 18px 18px;
padding: 24px 16px;
text-align: center;
color: var(--on-surface-variant);
font-size: 14px;
background: var(--surface-container-lowest);
border: 1px dashed var(--outline-variant);
border-radius: var(--fd-rounded-lg);
}
.fd-curso-row {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
padding: 14px;
margin: 0 18px 12px;
}
/*
* ─── Capa do curso — miniatura na listagem ──────────────────────────
* Upload real de arquivo (Source\Support\Upload), pedido pela
* Cristiane em 2026-08-10. .fd-curso-row-capa mesmo tamanho/raio nos
* dois estados (imagem real ou emoji de fallback quando não há capa
* cadastrada) — pra não pular o layout da linha dependendo do curso.
*/
.fd-curso-row-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.fd-curso-row-capa {
width: 48px;
height: 48px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
}
.fd-curso-row-capa--vazia {
background: var(--color-primary-tint);
color: var(--color-primary-tint-text);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.fd-curso-row-main {
min-width: 0;
flex: 1;
}
.fd-curso-row-title {
margin: 0 0 4px;
font-size: 14px;
font-weight: 700;
color: var(--color-text-primary);
}
.fd-curso-row-meta {
margin: 0 0 10px;
font-size: 13px;
color: var(--color-text-secondary);
}
/*
* ─── % de evolução do curso — cards de listagem ─────────────────────
* Capítulos concluídos / total cadastrado (CursoCapitulo::progressoDoCurso(),
* AppCursos::index()), pedido pela Cristiane em 2026-08-11. Reaproveita
* .fd-progress-track/.fd-progress-study já usados na Tela Hoje — 1
* classe só, compartilhada pelos dois layouts (light e cards), porque
* já usa os tokens --color-* que variam sozinhos por combinação. Fica
* de fora do `.fd-curso-row-footer`/`.fd-cards-curso-footer` de
* propósito — aquela linha já disputa espaço entre selo de nível e
* botões de ação (ver correção de "Intermediario" quebrando linha,
* 2026-08-11), então a barra vai numa linha própria, entre o meta e o
* footer.
*/
.fd-curso-progresso {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
}
.fd-curso-progresso .fd-progress-track {
flex: 1;
}
.fd-curso-progresso-label {
font-size: 12px;
font-weight: 700;
color: var(--color-text-secondary);
white-space: nowrap;
}
.fd-curso-row-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 10px;
}
.fd-curso-badge {
font-size: 12px;
font-weight: 700;
padding: 3px 9px;
border-radius: 8px;
background: var(--color-primary-tint);
color: var(--color-primary-tint-text);
text-transform: capitalize;
white-space: nowrap;
}
.fd-curso-actions {
display: flex;
gap: 8px;
}
.fd-curso-actions a,
.fd-curso-actions button {
font-size: 13px;
font-weight: 600;
padding: 6px 10px;
border-radius: 8px;
border: none;
font-family: inherit;
cursor: pointer;
text-decoration: none;
}
/* Migrado pros tokens Material Design 3 em 2026-08-25 — mesma causa
raiz de .fd-section-title/.fd-modulo-card acima (`--color-*` preso
ao Tema Claro fora de `[data-layout="cards"]`). Usado ao vivo em
compromissos_index.php, cursos_conteudo.php e tarefas_hub.php. */
.fd-curso-actions .fd-acao-editar {
background: var(--primary-container);
color: var(--on-primary-container);
}
.fd-curso-actions .fd-acao-excluir {
background: transparent;
color: var(--on-surface-variant);
border: 1px solid var(--outline-variant);
}
/*
* Botão "Excluir" só com ícone, sem texto — usado na listagem de
* cursos (light e cards), onde ele divide linha com o selo de nível
* (.fd-curso-badge/.fd-cards-curso-badge). Com nível "Intermediario"
* (palavra longa), o texto "Excluir" ficava espremido contra "Editar"
* (reportado pela Cristiane em 2026-08-10). Continua com a mesma
* classe .fd-acao-excluir (cor/borda), só troca o texto por 🗑️ +
* aria-label — quadrado em vez de retangular, ocupa bem menos largura.
* Módulo/capítulo (cursos_conteudo.php) mantêm o botão com texto —
* não competem por espaço com um selo ao lado, sem o mesmo problema.
*
* Seletor combinado (.fd-acao-excluir.fd-acao-excluir--icone, 2
* classes) de propósito — corrigido em 2026-08-11: com só 1 classe,
* a especificidade perdia pra ".fd-curso-actions button"/
* ".fd-cards-curso-actions button" (classe + elemento), então o
* padding menor daqui nunca era aplicado de fato (ver
* [[project-facilita-desenvolve-menu-configuracao]] pro ajuste
* irmão de largura no selo de nível, mesmo problema de "Intermediario"
* quebrando linha no layout cards).
*/
.fd-acao-excluir.fd-acao-excluir--icone {
padding: 6px 8px;
line-height: 1;
font-size: 12px;
transition: background-color .15s ease, border-color .15s ease;
}
/* Hover só no ícone (sem texto visível) — reforça a ação destrutiva
com o mesmo par de cor já usado em .fd-flash--error. O texto some
do botão, então usa o tooltip customizado abaixo (data-tooltip) em
vez do title="" nativo — o title não estava aparecendo de forma
confiável (atraso e comportamento inconsistente entre navegadores). */
.fd-acao-excluir--icone:hover {
background: #FEE2E2;
border-color: #FCA5A5;
}
/*
* ─── Tooltip customizado (qualquer botão/ícone sem texto visível) ───
* Substitui o title="" nativo (lento, inconsistente, não estava
* aparecendo pra Cristiane em 2026-08-10) por um balão próprio via
* CSS puro, com a pele do app. Uso: `data-tooltip="texto"` no
* elemento — não precisa de JS nem de position:relative manual (já
* incluso aqui). Some no touch (sem :hover) mas continua acessível
* via `aria-label` no próprio botão.
*/
[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: var(--color-text-primary);
color: var(--color-bg);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
padding: 5px 9px;
border-radius: 6px;
opacity: 0;
pointer-events: none;
transition: opacity .15s ease, transform .15s ease;
z-index: 5;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after,
[data-tooltip].fd-dica-visivel::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Atualização 2026-08-24 (3): variante controlada por JS (classe, não
só :hover/:focus-visible) — usada pelo auto-save de
cursos_conteudo.php pra confirmar o salvamento (ou avisar erro) sem
reload, direto no campo editado (FD_APP.mostrarDicaCampo() em
app.js). .fd-dica-erro troca a cor do balão pro vermelho de erro já
usado em .fd-flash--error/.fd-acao-excluir, em vez do balão neutro
padrão. */
[data-tooltip].fd-dica-erro::after {
background: #991B1B;
color: #FEE2E2;
}
/* Atualização 2026-08-24 (6): o balão de SUCESSO do auto-save estava
usando a cor neutra padrão do [data-tooltip] (--color-text-primary/
--color-bg — na prática, preto com texto branco), sem nenhuma
relação com a identidade visual do app; a Cristiane pediu uma cor
mais "padronizada". Trocado pro mesmo par --color-primary/
--color-primary-contrast já usado em TODO botão/destaque primário do
app (.fd-form-btn-primary, .fd-cards-hero, os avatares de ícone
etc.) — dessa forma o balão de sucesso combina com a cor de destaque
de cada tema (verde/roxo/laranja conforme o tema visual escolhido),
em vez de preto fixo. Escopado só pro auto-save (.fd-dica-sucesso) —
não muda o balão neutro padrão usado noutras telas (compromissos_index.php,
tarefas_hub.php, o próprio botão Excluir aqui do lado). */
[data-tooltip].fd-dica-sucesso::after {
background: var(--color-primary);
color: var(--color-primary-contrast);
}
/*
* ─── Hover consistente pra todo botão/link clicável ─────────────────
* Pedido pela Cristiane em 2026-08-10: só o ícone de excluir tinha
* feedback de hover — nenhum outro botão do app tinha. `brightness()`
* cobre qualquer fundo sólido ou tintado sem precisar de token de cor
* novo por tema (funciona igual nos 6 combos de layout×tema). Botões
* só-texto ou só-ícone sem fundo próprio (link "Sair", olho de
* mostrar senha, nav inferior) usam um tratamento à parte logo abaixo,
* já que brightness() não muda nada visível sem cor de fundo.
*/
.fd-btn-primary,
.fd-btn-chip,
.fd-btn-whatsapp,
.fd-btn-add-capitulo,
.fd-app-icon-btn,
.fd-curso-actions .fd-acao-editar,
.fd-cards-curso-actions .fd-acao-editar,
.fd-form-btn-primary,
.fd-form-btn-secondary,
.fd-form-btn-secondary--opaco,
.fd-file-upload-btn,
.fd-theme-option {
transition: filter .15s ease;
}
.fd-btn-primary:hover,
.fd-btn-chip:hover,
.fd-btn-whatsapp:hover,
.fd-btn-add-capitulo:hover,
.fd-app-icon-btn:hover,
.fd-curso-actions .fd-acao-editar:hover,
.fd-cards-curso-actions .fd-acao-editar:hover,
.fd-form-btn-primary:hover,
.fd-form-btn-secondary:hover,
.fd-form-btn-secondary--opaco:hover,
.fd-file-upload-btn:hover,
.fd-theme-option:hover {
filter: brightness(0.93);
}
.fd-app-topbar-link {
transition: color .15s ease;
}
.fd-app-topbar-link:hover {
text-decoration: underline;
color: var(--color-text-primary);
}
.fd-app-nav-item {
transition: background-color .15s ease;
}
.fd-app-nav-item:not(.is-active):hover {
background: var(--color-border);
}
.fd-toggle-senha,
.fd-tag-chip-remove {
transition: opacity .15s ease, background-color .15s ease;
}
.fd-toggle-senha:hover {
opacity: .65;
}
.fd-tag-chip-remove:hover {
background: rgba(0, 0, 0, .22);
}
/*
* ─── Modal de confirmação com a pele do app ──────────────────────────
* Substitui o confirm() nativo do navegador (caixa do sistema
* operacional, sem relação visual com o app — reportado pela
* Cristiane em 2026-08-10) nos forms de exclusão (curso, módulo,
* capítulo). Ver FD_APP.initConfirmacao() em assets/js/app.js —
* criado 1x via JS e reaproveitado. Cor do botão de confirmar é a
* mesma dupla "perigo" já usada em .fd-flash--error e no hover de
* .fd-acao-excluir--icone.
*/
.fd-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .5);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 50;
}
.fd-modal-overlay[hidden] {
display: none;
}
.fd-vinculo-modal [data-mostrar-para][hidden] { display: none !important; }
.fd-modal-dialog {
width: 100%;
max-width: 340px;
background: var(--surface-container-lowest);
border-radius: var(--fd-rounded-lg);
padding: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.fd-modal-texto {
margin: 0 0 18px;
font-size: 14px;
line-height: 1.4;
color: var(--on-surface);
}
.fd-modal-actions {
display: flex;
gap: 10px;
}
/*
* ─── Modal "Adicionar Vínculo" (variante --form do modal genérico) ──
* Reaproveita `.fd-modal-overlay`/`.fd-modal-dialog` acima (mesmo
* backdrop, mesma sombra), mas o conteúdo é um form completo com vários
* campos — não cabe no `max-width: 340px` pensado pra 1-2 frases de
* confirmação, e pode passar da altura da tela em telas baixas (com
* teclado virtual aberto, por exemplo). Aberto/fechado via
* FD_APP.initModal() (app.js) através de `data-modal-abrir`/
* `data-modal-fechar` — diferente do modal de confirmação, que é
* criado e destruído via JS a cada uso. Pedido da Cristiane em
* 2026-08-22 (substitui o antigo botão "Adicionar Vínculo" que só
* rolava a tela até o card de convite).
*/
.fd-modal-dialog--form {
max-width: 480px;
max-height: 90vh;
overflow-y: auto;
}
.fd-modal-form-cabecalho {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--fd-stack-md);
margin-bottom: var(--fd-stack-md);
}
.fd-modal-fechar-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--on-surface-variant);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}
.fd-modal-fechar-btn:hover {
background: var(--surface-container-high);
}
/* Campos do form dentro do modal — mesma pilha vertical de
.fd-perfil-editar-campos, mas SEM a borda/margem superior de lá (que
existe pra separar o form do resumo do perfil acima dele; aqui o
form é o conteúdo inteiro do modal, não precisa de divisória). */
.fd-modal-form-campos {
display: flex;
flex-direction: column;
gap: var(--fd-stack-md);
}
.fd-vinculo-modal-dialog {
width: min(100%, 620px);
max-width: 620px;
padding: 0;
overflow: hidden;
}
.fd-vinculo-modal-cabecalho {
align-items: flex-start;
padding: 21px 24px 17px;
margin: 0;
background: color-mix(in srgb, var(--primary-container) 48%, var(--surface-container-lowest));
border-bottom: 1px solid var(--outline-variant);
}
.fd-vinculo-modal-cabecalho > div {
min-width: 0;
}
.fd-vinculo-modal-cabecalho h2 {
margin: 6px 0 0;
color: var(--on-surface);
font-family: var(--font-heading);
font-size: 22px;
line-height: 1.15;
}
.fd-vinculo-modal-cabecalho p {
margin: 5px 0 0;
color: var(--on-surface-variant);
font-size: 11px;
line-height: 1.4;
}
.fd-vinculo-modal-cabecalho .fd-modal-fechar-btn {
flex: 0 0 40px;
width: 40px;
height: 40px;
margin: -4px -6px 0 0;
background: var(--surface-container-lowest);
border: 1px solid var(--outline-variant);
}
.fd-vinculo-modal-corpo {
gap: 14px;
max-height: calc(90vh - 112px);
padding: 18px 24px 24px;
overflow-y: auto;
}
.fd-vinculo-modal-corpo .fd-perfil-label {
font-size: 11px;
}
.fd-vinculo-modal-corpo .fd-perfil-hint {
font-size: 9px;
line-height: 1.3;
}
.fd-vinculo-modal-corpo .fd-perfil-erro,
.fd-vinculo-modal-corpo .fd-perfil-obrigatorio-marca {
font-size: 10px;
line-height: 1.35;
}
.fd-vinculo-modal-corpo .fd-perfil-input,
.fd-vinculo-modal-corpo .fd-perfil-select {
min-height: 42px;
padding: 9px 12px;
font-size: 12px;
}
.fd-vinculo-modal-corpo .fd-avatar-picker {
gap: 9px;
}
.fd-vinculo-modal-corpo .fd-avatar-preset {
width: 46px;
height: 46px;
}
.fd-vinculo-modal-corpo .fd-avatar-preset .material-symbols-outlined {
font-size: 23px;
}
@media (max-width: 620px) {
.fd-vinculo-modal-dialog {
width: calc(100% - 24px);
max-height: calc(100vh - 24px);
border-radius: 20px;
}
.fd-vinculo-modal-cabecalho {
padding: 18px 18px 15px;
}
.fd-vinculo-modal-corpo {
max-height: calc(100vh - 126px);
padding: 16px 18px 20px;
}
}
.fd-modal-actions .fd-form-btn-secondary,
.fd-modal-btn-perigo {
flex: 1;
height: 44px;
border-radius: var(--fd-rounded);
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: filter .15s ease;
}
.fd-modal-btn-perigo {
border: none;
background: #FEE2E2;
color: #991B1B;
}
.fd-modal-btn-perigo:hover {
filter: brightness(0.95);
}
/*
* Link de convite (URL longa, sem espaços) — precisa quebrar dentro do
* card em vez de estourar a largura da tela. `overflow-wrap: anywhere`
* deixa o navegador quebrar em qualquer caractere só quando necessário
* (preserva palavras inteiras quando cabe). Fundo leve + fonte
* monoespaçada deixa claro que é um valor pra copiar, não texto comum.
*/
.fd-curso-row-link {
margin: 0 0 10px;
padding: 8px 10px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 8px;
font-family: "SFMono-Regular", Consolas, Menlo, monospace;
font-size: 13px;
line-height: 1.5;
color: var(--color-text-secondary);
overflow-wrap: anywhere;
word-break: break-word;
}
/*
* ─── Compartilhar convite no WhatsApp ────────────────────────────────
* Botão em auth_convite.php, ao lado do link de cada convite pendente.
* Usa https://wa.me/ (link universal, funciona em mobile e WhatsApp
* Web) com a mensagem + link já preenchidos. Verde fixo (não segue
* --color-*) porque é a cor de identificação do WhatsApp, reconhecível
* independente do tema escolhido — mesmo raciocínio de manter ícone
* monoline no mesmo estilo dos ícones da trilha de crescimento.
*/
.fd-curso-row-share {
margin-top: 10px;
}
.fd-btn-whatsapp {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 999px;
background: #25D366;
color: #FFFFFF;
font-size: 13px;
font-weight: 700;
text-decoration: none;
}
.fd-btn-whatsapp svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/*
* ─── Cursos — layout Cards ───────────────────────────────────────────
*/
.fd-cards-curso {
margin: 0 18px 12px;
padding: 14px 16px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 16px;
}
.fd-cards-curso-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.fd-cards-curso-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-primary);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
/* Capa real do curso (upload) no lugar do emoji de fallback — mesma
caixa 36px, só troca círculo colorido por miniatura recortada. */
.fd-cards-curso-icon--img {
object-fit: cover;
background: none;
}
.fd-cards-curso-title {
margin: 0;
font-size: 14px;
font-weight: 700;
color: var(--color-text-primary);
}
.fd-cards-curso-meta {
margin: 2px 0 0;
font-size: 13px;
color: var(--color-text-secondary);
}
.fd-cards-curso-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 8px;
}
/*
* Selo de nível — "Intermediario" (13 caracteres) é bem mais largo que
* "Avancado"/"Iniciante" e, junto com os 3 botões de ação, ficava
* espremido demais na largura do card e quebrava linha (reportado pela
* Cristiane em 2026-08-11). Reduzido o padding aqui e o padding/gap dos
* botões de ação logo abaixo — soma o suficiente pra caber tudo numa
* linha só nos 3 níveis, sem precisar truncar texto nem empilhar.
*/
.fd-cards-curso-badge {
font-size: 12px;
font-weight: 700;
padding: 3px 7px;
border-radius: 8px;
background: var(--color-primary-tint);
color: var(--color-primary-tint-text);
text-transform: capitalize;
white-space: nowrap;
}
.fd-cards-curso-actions {
display: flex;
gap: 6px;
}
.fd-cards-curso-actions a,
.fd-cards-curso-actions button {
font-size: 12px;
font-weight: 700;
padding: 6px 8px;
border-radius: 999px;
border: none;
font-family: inherit;
cursor: pointer;
text-decoration: none;
}
.fd-cards-curso-actions .fd-acao-editar {
background: var(--color-primary);
color: #FFFFFF;
}
.fd-cards-curso-actions .fd-acao-excluir {
background: transparent;
color: var(--color-text-secondary);
border: 1px solid var(--color-border);
}
.fd-cards-list-actions {
margin: 0 18px 16px;
}
.fd-cards-list-actions .fd-btn-primary {
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
/*
* ─── Resumo/mapeamento por IA (cursos_conteudo.php) ──────────────────
* Card de destaque com o que a IA gerou (objetivo, tempo recomendado,
* motivação) — mesmo par de cor "tint" usado em .fd-next-card e
* .fd-balance-card pra elementos de destaque suave.
*
* Migrado pros tokens Material Design 3 em 2026-08-25, junto com o
* resto desta seção (`.fd-tag-*`/`.fd-modulo-card`/`.fd-capitulo-row`/
* `.fd-aprovacao-estudante*` logo abaixo) — mesma causa raiz da
* correção de `.fd-form-*` em 24/08 (`--color-*` só responde ao Tema
* Escuro sob `[data-layout="cards"]`, que as telas novas via
* `_app_shell` não passam mais). Reportado pela Cristiane com print:
* "as seções de módulos está totalmente fora do padrão" no Tema
* Escuro. `--color-primary-tint`/`--color-primary-tint-text` (par
* "tint" de destaque suave) viram `--primary-container`/
* `--on-primary-container` (mesmo par já usado em
* `.fd-form-btn-secondary--opaco`).
*/
.fd-resumo-ia {
background: var(--primary-container);
border-radius: var(--fd-rounded-lg);
padding: 12px 14px;
margin: 0 0 14px;
}
.fd-resumo-ia-label {
margin: 0 0 6px;
font-size: 13px;
font-weight: 700;
color: var(--on-primary-container);
text-transform: uppercase;
letter-spacing: .03em;
}
.fd-resumo-ia .fd-curso-row-meta {
color: var(--on-primary-container);
}
.fd-resumo-ia .fd-curso-row-meta:last-child {
margin-bottom: 0;
}
/*
* ─── Conteúdo do curso (habilidades, módulos, capítulos) — compartilhado ─
* Tela cursos_conteudo.php — 1 template só, não duplicado por layout
* (mesmo raciocínio do formulário de curso). Usava --color-* e
* --radius-* dentro de .fd-phone-frame (ver "Correção 2026-08-09" em
* docs/decisao-temas-layout-completo.md) — migrado pros tokens
* Material Design 3 em 2026-08-25, ver comentário acima de
* .fd-resumo-ia.
*/
.fd-tag-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 8px 0;
}
.fd-tag-chip {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 6px 5px 10px;
border-radius: 999px;
background: var(--primary-container);
color: var(--on-primary-container);
font-size: 13px;
font-weight: 600;
}
.fd-tag-chip form {
display: contents;
}
.fd-tag-chip-remove {
width: 18px;
height: 18px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, .12);
color: inherit;
font-size: 13px;
line-height: 1;
cursor: pointer;
font-family: inherit;
}
.fd-modulo-card {
background: var(--surface-container-lowest);
border: 1px solid var(--outline-variant);
border-radius: var(--fd-rounded-lg);
padding: 16px;
margin: 0 18px 14px;
}
.fd-modulo-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
/*
* ─── Módulo em modo leitura (estudante atribuído, não-dono) ─────────
* Pedido implícito de "Atribuir curso" (2026-08-25): cursos_conteudo.php
* sempre foi só uma tela de administração (cadastro/edição de módulo e
* capítulo) — com atribuição, um estudante não-dono também pode abri-la
* pra ver o conteúdo (ver AppCursoConteudo::index(), $podeAdministrar),
* mas sem os controles de edição/exclusão, que continuam exclusivos do
* dono. Substitui .fd-item-edicao-bloco quando !$podeAdministrar.
*/
.fd-modulo-leitura {
margin-bottom: 4px;
}
.fd-modulo-leitura-titulo {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 4px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 15px;
color: var(--on-surface);
}
/* Fundo em --surface-container (1 degrau "acima" de
--surface-container-lowest usado por .fd-modulo-card) em vez de
repetir a mesma superfície do card pai — mesmo raciocínio de
elevação tonal do Material Design 3 já usado alhures no app,
garante que a linha do capítulo continue visível dentro do card do
módulo nos 2 temas (a versão antiga usava --color-bg, o fundo da
PÁGINA — coincidência de valores que só funcionava por acaso no
Tema Claro original). */
.fd-capitulo-row {
background: var(--surface-container);
border: 1px solid var(--outline-variant);
border-radius: var(--fd-rounded-md);
padding: 12px;
margin: 0 0 10px;
}
/* Os campos editáveis precisam se destacar da superfície acinzentada
do capítulo. O token equivale ao branco no tema claro e mantém o
contraste correto no tema escuro. */
.fd-capitulo-row .fd-form-input {
background: var(--surface-container-lowest);
}
/*
* ─── Identificador do estudante — tela de Aprovações ────────────────
* Um responsável pode ter mais de 1 filho, e a lista de aprovações
* agora junta as pendências de todos — este selo deixa claro de quem
* é cada item (pedido pela Cristiane em 2026-08-10, relevante inclusive
* pro controle de mesada, que é individual por estudante). Fica no
* topo de cada .fd-capitulo-row, antes do nome do curso/módulo.
*/
.fd-aprovacao-estudante {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 700;
color: var(--on-surface);
margin: 0 0 8px;
}
.fd-aprovacao-estudante-avatar {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--primary-container);
color: var(--on-primary-container);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
.fd-status-badge {
flex-shrink: 0;
font-size: 12px;
font-weight: 700;
padding: 3px 9px;
border-radius: 8px;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: .03em;
}
.fd-status-badge--pendente {
background: var(--color-bg);
color: var(--color-text-secondary);
border: 1px solid var(--color-border);
}
.fd-status-badge--concluido {
background: var(--color-reward-tint);
color: var(--color-reward-tint-text);
border: 1px solid var(--color-reward-tint-border);
}
/*
* ─── Variantes de status de execução — Tarefas/Atividades Físicas ───
* Mesmo selo de .fd-status-badge--pendente/--concluido (2026-08-11,
* ver tarefas_hub.php/AppAprovacoes) — reaproveita os mesmos 2 pares
* de cor já usados em .fd-flash--warning/--error, em vez de inventar
* tokens novos só pra esses 2 estados.
*/
.fd-status-badge--aguardando {
background: #FEF3C7;
color: #92400E;
border: 1px solid #F3E3BE;
}
.fd-status-badge--rejeitado {
background: #FEE2E2;
color: #991B1B;
border: 1px solid #F3C9C9;
}
.fd-diario-form,
.fd-diario-pendente {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--color-border);
}
/* Diário já aprovado, capítulo concluído — histórico permanente, não
transitório como .fd-diario-pendente, por isso o traço contínuo em
vez de tracejado e um leve tom de fundo (mesma família de "conquista"
de .fd-achievement, sem competir com o selo de status ao lado). */
.fd-diario-aprovado {
margin-top: 10px;
padding: 10px;
border-top: 1px solid var(--color-border);
background: var(--color-bg);
border-radius: 8px;
}
.fd-diario-form {
display: flex;
flex-direction: column;
gap: 8px;
}
.fd-diario-form textarea.fd-form-input {
resize: vertical;
}
/*
* "+ Novo capítulo" (rodapé do card de módulo) — usava .fd-acao-editar
* sozinho, mas essa classe só tem estilo dentro de .fd-curso-actions
* (`.fd-curso-actions .fd-acao-editar` no CSS), então ficava sem
* formatação nenhuma aqui. Classe própria, standalone.
*/
/* Migrado pra --primary-container/--on-primary-container em 2026-08-25
— mesma causa raiz das outras classes desta seção. */
.fd-btn-add-capitulo {
display: inline-block;
margin-top: 4px;
padding: 8px 12px;
border-radius: 999px;
background: var(--primary-container);
color: var(--on-primary-container);
font-size: 13px;
font-weight: 700;
text-decoration: none;
}
/*
* ─── Formulário — dentro do "aparelho", segue o tema visual ─────────
* Atualização 2026-08-24: migrado dos tokens ANTIGOS (--color-*/
* --radius-*, presos ao eixo `data-layout` — que nas telas do
* `_app_shell` novo NUNCA sai de "light" (`_theme_default.php` cai no
* default `'light'` quando `$layout` não é passado, e as telas
* migradas pro shell novo não passam mais essa variável), então
* `.fd-form-*` sempre renderizava a pele CLARA de `--color-*`, mesmo
* com o Tema Escuro (`jornada_vibrante`) selecionado — a variante
* escura só existia sob `[data-layout="cards"]`, que nunca mais é
* atingida) pros tokens NOVOS (Material Design 3, resolvidos só por
* `data-theme`, sem depender de `data-layout`) — mesmo padrão já usado
* em `.fd-perfil-input`/`.fd-auth2-input`. Reportado pela Cristiane com
* print: card/campos brancos fixos mesmo no Tema Escuro, e borda PRETA
* ao focar um campo (o navegador aplicava o anel de foco padrão do
* sistema operacional, porque `.fd-form-input` nunca tinha tido um
* `:focus` próprio — corrigido junto, mesmo `outline: 2px solid
* var(--primary)` já usado em `.fd-perfil-input:focus`).
*
* Afeta TODAS as telas que usam `.fd-form-*` (não só Cursos/Módulos/
* Capítulos, que foi o pedido concreto dela) — são classes
* compartilhadas: `aprovacoes.php`, `atividade_formulario.php`,
* `atividade_concluir_formulario.php`, `auth_convite.php`,
* `compromissos_index.php`, `compromisso_formulario.php`,
* `cursos_conteudo.php`, `cursos_formulario.php`,
* `curso_capitulo_formulario.php`, `curso_modulo_formulario.php`,
* `tarefa_concluir_formulario.php`, `tarefa_formulario.php` — conferido
* via grep que NENHUMA delas é uma das 3 telas de protótipo layout×tema
* remanescentes em `views/{light,cards}/` (essas não usam `.fd-form-*`
* — usam `--devtool-*`), então a troca de tokens é segura pra todas de
* uma vez, sem quebrar o protótipo antigo. Isso adianta uma fatia do
* pendente "migração completa de `.fd-form-*` pros tokens novos" da
* Fase 3 (ver PENDENCIAS.md) — o resto da Fase 3 (toggle Colar
* link/Manualmente, seletor de Estudante Vinculado etc.) continua sem
* começar.
*/
.fd-form-card {
background: var(--surface-container-lowest);
border: 1px solid var(--outline-variant);
border-radius: var(--fd-rounded-lg);
padding: 20px;
margin: 20px 18px 16px;
}
/* Distância das bordas no mobile (2026-08-24, pedido da Cristiane em
cursos_formulario.php) — mesmo padrão de `.fd-perfil-grid`/
`.fd-cursos-content` (ver docblock de `.fd-perfil-grid`): reforça só
a margem lateral do card de formulário e do bloco de ação logo
abaixo dele (`.fd-form-actions`) em telas pequenas, sem tocar
margin-top/bottom já corretos. */
@media (max-width: 767px) {
.fd-form-card,
.fd-form-actions {
margin-left: var(--fd-margin-mobile);
margin-right: var(--fd-margin-mobile);
}
}
.fd-form-field {
margin-bottom: 16px;
}
.fd-form-field:last-child {
margin-bottom: 0;
}
/* Pares de metadados relacionados no formulário de curso. A grade
reduz a varredura vertical no desktop sem apertar os controles no
mobile, onde a ordem semântica volta naturalmente para uma coluna. */
.fd-form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
/* `:last-child` global zera a margem do segundo campo de cada dupla,
mas a dupla não é necessariamente o fim do formulário. Mantém o
mesmo ritmo vertical de 16px usado pelos campos individuais. */
.fd-form-row > .fd-form-field:last-child {
margin-bottom: 16px;
}
@media (max-width: 767px) {
.fd-form-row {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
}
.fd-form-label {
display: block;
margin: 0 0 6px;
font-size: 13px;
font-weight: 600;
color: var(--on-surface);
}
/* Só o label "Habilidades desenvolvidas" em cursos_formulario.php
(2026-08-25, pedido da Cristiane) — sem card próprio envolvendo-o,
ficava colado no campo Nível acima. Modificador em vez de mudar
`.fd-form-label` base, usado em todo formulário do app. */
.fd-form-label--espacada {
margin-top: 20px;
}
.fd-form-input,
.fd-form-select {
width: 100%;
padding: 10px 12px;
border-radius: var(--fd-rounded-md);
border: 1px solid var(--outline-variant);
font-size: 14px;
font-family: inherit;
background: var(--surface-container-low);
color: var(--on-surface);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Destaque da opção selecionada/hover dentro da lista suspensa do