/* public/assets/css/app.css: específico deste sistema, construído em cima dos tokens/ materials/typography copiados do design system. Nunca redefine cor/tipografia com valor novo, só espaçamento/layout próprios da tela. */ * { box-sizing: border-box; } /* * Tema por área do sistema, sempre tons leves e suaves (color-mix, nunca a cor sólida), * usando só as cores que já existem em tokens.css (--color-purple/--color-blue/--color-red), * nunca um hex novo. Aplicado como classe no por layouts/base.php e layouts/minimo.php: * .tema-azul: dashboard, escala mensal, montagem de culto (área de liderança) * .tema-vermelho: minha escala (área do membro) * Login/onboarding fica **neutro de propósito** (pedido do usuário, 2026-08-22), sem classe * tema-*, então --tema-cor nunca é definida e tudo cai nos tokens neutros (--bg-secondary, * --fill-tertiary, --label-primary), nunca numa cor decorativa como fallback. */ body.app-body.tema-azul { --tema-cor: var(--color-blue); background: color-mix(in srgb, var(--color-blue) 6%, var(--bg-secondary)); } body.app-body.tema-vermelho { --tema-cor: var(--color-red); background: color-mix(in srgb, var(--color-red) 6%, var(--bg-secondary)); } body.app-body { margin: 0; background: var(--bg-secondary); color: var(--label-primary); font-family: var(--font-family); } /* Identidade visual de navegação (rework 2026-08-23, a partir dos templates de UI): header azul-marinho + nav de topo (desktop)/tab bar (mobile) em azul sólido - cor de marca fixa, não muda com prefers-color-scheme nem com o tema por área do conteúdo. As duas únicas exceções documentadas em 3.1-design-tokens-layout-base.md a "nunca redefinir cor com valor novo": hex lidos visualmente do mockup, ajustar se o usuário fornecer valores oficiais. */ :root { --header-bg: #1c2431; --navbar-bg: #3a5a94; } .app-header { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; /* --spacing scale do design system: 3=12, 4=16 */ background: var(--header-bg); color: #fff; } .app-header__titulo { color: #fff; } .app-header__avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, 0.15); color: #fff; } /* Sem isto o SVG de public/assets/icons/pessoa.svg (sem width/height próprios) cai no tamanho padrão do navegador (~300x150) e some dentro do círculo de 32px - bug visual encontrado por comparação com os templates (avatar aparecia como círculo vazio). */ .app-header__avatar svg { width: 18px; height: 18px; } .offline-banner { position: sticky; top: 0; z-index: 11; margin: 0; padding: 8px 16px; text-align: center; background: color-mix(in srgb, var(--color-yellow) 25%, var(--bg-secondary)); color: var(--label-primary); } .offline-banner[hidden] { display: none; } /* Nav de topo: só desktop (>=768px) */ .app-navbar { display: none; } @media (min-width: 768px) { .app-navbar { display: flex; gap: 24px; padding: 0 16px; background: var(--navbar-bg); position: sticky; top: 49px; /* altura aproximada do header */ z-index: 9; } .app-navbar__link { padding: 14px 4px; color: rgba(255, 255, 255, 0.8); text-decoration: none; } .app-navbar__link.is-ativo { color: #fff; border-bottom: 2px solid #fff; } } /* Tab bar: só mobile (<768px), spec "Tab Bar" do design system (49pt) */ .app-tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; height: 49px; background: var(--bg-secondary); border-top: 1px solid var(--separator); } @media (min-width: 768px) { .app-tabbar { display: none; } } .app-tabbar__link { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--label-secondary); text-decoration: none; } .app-tabbar__link svg { width: 24px; height: 24px; } .app-tabbar__link.is-ativo { color: var(--navbar-bg); } .app-content { padding: 16px; padding-bottom: 65px; /* espaço para a tab bar fixa não cobrir o fim do conteúdo no mobile */ max-width: 1024px; margin: 0 auto; min-height: 100vh; } @media (min-width: 768px) { .app-content { padding-bottom: 16px; } } /* Qualquer link dentro do conteúdo (nome do campus no card, "Editar escalação", "voltar") usa a cor do tema da tela em vez do azul padrão do navegador. :where() zera a especificidade do seletor, então .btn/.btn--tinted/.btn--plain (mais específicos) continuam decidindo a cor quando o link também é um botão. */ :where(.app-content) a { color: var(--tema-cor, var(--label-primary)); text-decoration: none; } .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 16px; } .dashboard-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; min-height: 44px; /* touch target mínimo do design system */ } .card-culto { background: var(--bg-grouped-secondary); border: 1px solid var(--separator); border-top: 3px solid color-mix(in srgb, var(--tema-cor, var(--separator)) 45%, var(--separator)); border-radius: 12px; /* radius lg do design system */ padding: 16px; margin-bottom: 12px; display: block; } .card-culto__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .card-culto__linha { display: flex; justify-content: space-between; padding: 4px 0; border-top: 1px solid var(--separator); } .card-culto__linha:first-of-type { border-top: none; } /* Tela de calendário: layout de 3 colunas em telas largas (Template-Calendario.jpg, rework 2026-08-23) - próximos cultos + cadastros em destaque à esquerda, calendário no meio, card do usuário à direita. No mobile empilha em coluna única com o calendário primeiro (order: -1); ao contrário de .home-layout (colunas laterais escondidas no mobile, conteúdo duplicado em .home-mobile-secoes), aqui as laterais continuam visíveis, só reordenadas. */ .calendario-layout { display: flex; flex-direction: column; } .calendario-coluna-central { order: -1; } .calendario-coluna-lateral { margin-top: 24px; } @media (min-width: 768px) { .calendario-layout { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 16px; align-items: start; } .calendario-coluna-central { order: 0; } .calendario-coluna-lateral { margin-top: 0; } } .destaque-pessoa { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--separator); } .destaque-pessoa:first-of-type { border-top: none; } .destaque-pessoa__nome { flex: 1; } .destaque-pessoa__avatar { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fill-tertiary); color: var(--label-secondary); flex-shrink: 0; } .destaque-pessoa__avatar svg { width: 18px; height: 18px; } .destaque-pessoa__avatar--grande { width: 56px; height: 56px; } .destaque-pessoa__avatar--grande svg { width: 28px; height: 28px; } /* Tela de calendário (grade de dias) antes da lista de polos, rework 2026-08-23. Mesmas variáveis de cor do resto do sistema (--tema-cor/--bg-grouped-secondary/--separator) - nunca um hex novo, mesma regra do topo do arquivo. */ .calendario-card { background: var(--bg-grouped-secondary); border: 1px solid var(--separator); border-radius: 12px; padding: 16px; margin-top: 16px; } .calendario-semana { display: grid; grid-template-columns: repeat(7, 1fr); padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--separator); color: var(--label-secondary); text-align: left; } .calendario-dias { display: grid; grid-template-columns: repeat(7, 1fr); border-left: 1px solid var(--separator); } /* Célula do dia (rework 2026-08-23, layout de tabela do Template-Calendario.jpg): número + pontinho colorido no topo, uma etiqueta por evento empilhada abaixo, sempre visível (sem depender de hover/tooltip). Cor de cada etiqueta/pontinho vem do tipo de evento (helpers.php corEventoValida(), nunca um hex fora de tokens.css). */ .calendario-dia { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 56px; padding: 4px; border-right: 1px solid var(--separator); border-bottom: 1px solid var(--separator); color: var(--label-primary); text-decoration: none; overflow: hidden; } .calendario-dia--fora { color: var(--label-tertiary); background: var(--bg-grouped-secondary); } .calendario-dia__topo { display: flex; align-items: center; justify-content: space-between; gap: 4px; } .calendario-dia__numero { display: flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 50%; flex-shrink: 0; } .calendario-dia--hoje .calendario-dia__numero { background: var(--tema-cor, var(--color-blue)); color: var(--white); font-weight: var(--weight-semibold); } .calendario-dia__ponto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* line-clamp (não nowrap): nomes de evento variam bastante de tamanho (vindos do banco), então deixa quebrar em até 2 linhas em vez de cortar quase tudo numa única linha estreita. */ .calendario-dia__etiqueta { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding: 2px 4px; border-radius: 6px; color: var(--label-primary); line-height: 1.2; word-break: break-word; } @media (min-width: 768px) { .calendario-dia { min-height: 76px; padding: 6px; } } .mes-header { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 8px; } .mes-header a { color: var(--label-primary); text-decoration: none; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; margin-bottom: 16px; } .badge--rascunho { background: var(--fill-tertiary); color: var(--label-secondary); } .badge--ativa { background: color-mix(in srgb, var(--color-yellow) 25%, transparent); color: var(--label-primary); } .badge--finalizada { background: color-mix(in srgb, var(--color-blue) 25%, transparent); color: var(--label-primary); } .badge--inativo { background: var(--fill-tertiary); color: var(--label-secondary); margin-bottom: 0; margin-left: 6px; } .funcao-bloco { margin-bottom: 16px; } .funcao-bloco__lista { list-style: none; padding: 0; margin: 8px 0; } .funcao-bloco__lista li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--separator); } .form-escalar { display: flex; gap: 8px; margin-top: 8px; } /* Text Field, components.md: 44pt altura, 10pt radius, outline ~separator */ .ios-input { display: block; width: 100%; flex: 1; min-height: 44px; border-radius: 10px; border: 1px solid var(--separator); background: var(--bg-primary); color: var(--label-primary); padding: 0 12px; font: inherit; } .ios-input:focus { outline: 2px solid var(--tema-cor, var(--label-primary)); outline-offset: 1px; } /* Button, components.md: Regular 44pt h/12pt radius, Large 50pt h/14pt radius, estilos filled/gray/plain/destructive. */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 20px; border-radius: 12px; border: none; background: none; font-family: var(--font-family); font-size: 17px; font-weight: 600; line-height: 22px; text-decoration: none; cursor: pointer; } .btn--large { min-height: 50px; border-radius: 14px; width: 100%; } .btn--filled { background: var(--tema-cor, var(--color-blue)); color: var(--white); } /* Estilo "tinted" do spec de botão (components.md): fundo leve da cor + texto colorido, em vez de preenchimento sólido. É o padrão usado neste sistema por pedido explícito do usuário (2026-08-22): "sempre em tons de cores leves e suaves". Sem tema (login/onboarding, pedido à parte do mesmo dia: "a tela de login, mantenha cores neutras"), cai em --label-primary, não numa cor decorativa; o resultado visual acaba idêntico ao .btn--gray, de propósito. */ .btn--tinted { background: color-mix(in srgb, var(--tema-cor, var(--label-primary)) 16%, transparent); color: var(--tema-cor, var(--label-primary)); } .btn--gray { background: var(--fill-tertiary); color: var(--label-primary); } .btn--plain { padding: 0 8px; color: var(--tema-cor, var(--label-primary)); } .btn--destructive { padding: 0 20px; background: color-mix(in srgb, var(--color-red) 16%, transparent); color: var(--color-red); } .botao-remover { background: none; border: none; color: var(--color-red); cursor: pointer; font: inherit; min-height: 44px; } /* Telas de autenticação (login/onboarding Google): layout mínimo, sem header/nav. */ .auth-card { max-width: 360px; margin: 48px auto; background: var(--bg-grouped-secondary); border: 1px solid var(--separator); border-top: 3px solid color-mix(in srgb, var(--tema-cor, var(--separator)) 45%, var(--separator)); border-radius: 14px; padding: 24px; } .auth-form { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; } /* Formulários fora do .auth-card (Novo evento, Novo/Editar cadastro): no mobile ocupam a largura toda (já era); no desktop, sem essa largura máxima, os /botão esticavam quase 1000px e ficavam difíceis de escanear (audit de responsividade 2026-08-23). Não se aplica dentro de .auth-card (tela de login) porque o card já é mais estreito que isso. */ @media (min-width: 768px) { .auth-form { max-width: 480px; } } /* Montagem de escalação (escala/culto.php): mesma lógica do .auth-form acima - lista de funções com tem width:100% - com flex-basis:auto o item herdaria isso como tamanho hipotético e tomaria a linha inteira sozinho, empurrando .escala-semanal__controles pra linha de baixo. */ flex: 1 1 0%; min-width: 180px; } } .segmented { display: inline-flex; border: 1px solid var(--separator); border-radius: 10px; overflow: hidden; } .segmented__item { padding: 0 14px; min-height: 40px; display: flex; align-items: center; color: var(--label-primary); text-decoration: none; white-space: nowrap; } .segmented__item.is-ativo { background: var(--tema-cor, var(--color-blue)); color: var(--white); } .escala-semanal__visao { display: none; /* alterna tabela/grade só faz sentido a partir do breakpoint em que a tabela aparece */ border: 1px solid var(--separator); border-radius: 10px; overflow: hidden; } .escala-semanal__visao-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: var(--bg-grouped-secondary); color: var(--label-secondary); cursor: pointer; } .escala-semanal__visao-btn svg { width: 18px; height: 18px; } .escala-semanal__visao-btn.is-ativo { background: var(--tema-cor, var(--color-blue)); color: var(--white); } .escala-semanal__grade { display: block; } .escala-semanal__tabela-wrap { display: none; } @media (min-width: 768px) { .escala-semanal__visao { display: flex; } /* Desktop respeita a alternância JS (data-visao no wrapper); sem JS, cai no padrão = tabela. */ .escala-semanal[data-visao='tabela'] .escala-semanal__grade { display: none; } .escala-semanal[data-visao='tabela'] .escala-semanal__tabela-wrap { display: block; } .escala-semanal[data-visao='grade'] .escala-semanal__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } } .escala-semanal__tabela-wrap { overflow-x: auto; border: 1px solid var(--separator); border-radius: 12px; } .escala-tabela { width: 100%; border-collapse: collapse; min-width: 720px; } .escala-tabela th, .escala-tabela td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--separator); } .escala-tabela thead th { background: var(--bg-grouped-secondary); color: var(--label-secondary); } .escala-tabela tbody tr:last-child td { border-bottom: none; } .escala-tabela tbody tr[hidden] { display: none; } .escala-tabela__linha-vazia { display: block; color: var(--label-tertiary); } .escala-tabela__pessoa { display: block; } .escala-tabela__pessoa + .escala-tabela__pessoa { margin-top: 4px; } .escala-semanal__grade .card-culto[hidden] { display: none; } .alertas-painel { margin-top: 20px; border: 1px solid var(--separator); border-radius: 12px; padding: 12px 16px; background: var(--bg-grouped-secondary); } .alertas-painel summary { cursor: pointer; display: flex; align-items: center; gap: 8px; list-style: none; } .alertas-painel summary::-webkit-details-marker { display: none; } .alertas-painel__lista { list-style: none; padding: 0; margin: 12px 0 0; } .alertas-painel__lista li { display: flex; gap: 8px; padding: 6px 0; border-top: 1px solid var(--separator); color: var(--label-primary); } .alertas-painel__lista li:first-child { border-top: none; } .badge--alerta { margin-bottom: 0; background: color-mix(in srgb, var(--color-yellow) 30%, transparent); color: var(--label-primary); }