/* ============================================================================= Eklesia — complemento do Design System do Lumina (lumina-ds.css, prefixo "ui-"). Carregado DEPOIS dos CSS do Lumina. Só contém o que o Eklesia precisa e o Lumina não tem (grades de formulário, wizard, linha do tempo, autocomplete, calendário). Tudo usa os mesmos tokens (--ui-*) para seguir o tema claro/escuro e a cor da marca. Prefixo "ek-" para não colidir com o Lumina. ============================================================================= */ /* Até o Alpine iniciar, esconde o que depende dele (submenus, x-show) — mesmo truque do Lumina, com nome próprio (o ".ui-carregando" do DS é um componente). */ .ek-iniciando [x-show]:not([style*="display"]), .ek-iniciando [x-cloak], .ek-iniciando .overflow-hidden.transform.translate { display: none !important; } [x-cloak] { display: none !important; } /* O atributo hidden precisa vencer classes como .ui-btn (display:inline-flex). */ [hidden] { display: none !important; } body { color: var(--ui-texto); } .ui-pagina a:not(.ui-btn):not(.ui-pilula):not(.ui-item):not(.ui-kpi):not(.ui-link) { color: var(--ui-brand); } .ui-pagina a:not(.ui-btn):not(.ui-pilula):not(.ui-item):not(.ui-kpi):not(.ui-link):hover { text-decoration: underline; } .ui-pagina code { font-family: var(--ui-mono); font-size: 12px; padding: 1px 5px; border-radius: 6px; background: var(--ui-superficie-2); border: 1px solid var(--ui-borda); } /* ---------- Cabeçalho de tela (hero) ---------- */ .ek-trilha { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ui-texto-3); margin-bottom: 4px; } .ek-trilha a { color: var(--ui-texto-2) !important; } .ek-hero-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* ---------- Grades ---------- */ .ek-grade { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 1024px) { .ek-grade.duas { grid-template-columns: 1fr 1fr; } .ek-grade.lateral { grid-template-columns: 320px minmax(0, 1fr); } .ek-grade.perfil { grid-template-columns: 340px minmax(0, 1fr); } } .ek-coluna { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .ek-centro { width: 100%; max-width: 760px; margin: 0 auto; } .ek-centro.largo { max-width: 1040px; } /* Formulário em 12 colunas (substitui o row/col-md-* do Bootstrap) */ .ek-form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; } .ek-form > * { grid-column: span 12; min-width: 0; } @media (min-width: 768px) { .ek-form > .c2 { grid-column: span 2; } .ek-form > .c3 { grid-column: span 3; } .ek-form > .c4 { grid-column: span 4; } .ek-form > .c5 { grid-column: span 5; } .ek-form > .c6 { grid-column: span 6; } .ek-form > .c8 { grid-column: span 8; } .ek-form > .c9 { grid-column: span 9; } } .ek-ajuda { font-size: 11.5px; color: var(--ui-texto-2); margin-top: 5px; } .ek-erro-campo { display: none; font-size: 11.5px; color: var(--ui-erro); margin-top: 5px; } .ui-campo.invalido { border-color: var(--ui-erro); box-shadow: 0 0 0 3px rgba(240,68,56,.12); } .ui-campo.invalido ~ .ek-erro-campo, .ek-check-grupo.invalido .ek-erro-campo { display: block; } select.ui-campo { appearance: auto; padding-right: 8px; } input[type="file"].ui-campo { padding: 8px 10px; height: auto; font-size: 12.5px; } input[type="file"].ui-campo::file-selector-button { border: 1px solid var(--ui-borda); background: var(--ui-superficie-2); color: var(--ui-texto); border-radius: 8px; padding: 5px 10px; margin-right: 10px; font-weight: 600; cursor: pointer; } input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-brand); width: 16px; height: 16px; } .ek-radios { display: flex; gap: 18px; align-items: center; min-height: 42px; } .ek-secao-titulo { font-size: 14px; font-weight: 700; color: var(--ui-texto); margin: 4px 0 2px; grid-column: 1 / -1; } .ek-divisor { height: 1px; background: var(--ui-borda); border: 0; margin: 18px 0; } .ek-rodape-form { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 22px; } /* Interruptor (substitui o form-switch do Bootstrap) */ .ek-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; min-height: 42px; user-select: none; } .ek-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .ek-switch .trilho { width: 38px; height: 22px; border-radius: 9999px; background: var(--ui-borda); position: relative; transition: background .15s; flex: none; } .ek-switch .trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 9999px; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(16,24,40,.2); } .ek-switch input:checked + .trilho { background: var(--ui-brand); } .ek-switch input:checked + .trilho::after { transform: translateX(16px); } .ek-switch input:focus-visible + .trilho { box-shadow: 0 0 0 3px var(--ui-brand-suave); } /* ---------- Wizard (cadastro em etapas) ---------- */ .ek-etapas { list-style: none; margin: 0 0 22px; padding: 0; display: flex; gap: 8px; counter-reset: etapa; } .ek-etapas li { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--ui-borda); border-radius: var(--ui-raio-2); background: var(--ui-superficie); color: var(--ui-texto-2); font-size: 12.5px; font-weight: 600; } .ek-etapas li::before { counter-increment: etapa; content: counter(etapa); flex: none; width: 26px; height: 26px; border-radius: 9999px; display: grid; place-items: center; background: var(--ui-superficie-2); border: 1px solid var(--ui-borda); font-size: 12px; } .ek-etapas li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ek-etapas li.ativa { border-color: var(--ui-brand); color: var(--ui-brand); background: var(--ui-brand-suave); } .ek-etapas li.ativa::before { background: var(--ui-brand); border-color: var(--ui-brand); color: #fff; } .ek-etapas li.feita { color: var(--ui-texto); } .ek-etapas li.feita::before { content: "✓"; background: var(--ui-ok); border-color: var(--ui-ok); color: #fff; } @media (max-width: 767px) { .ek-etapas li span { display: none; } .ek-etapas li { justify-content: center; } } .ek-etapa[hidden] { display: none !important; } fieldset.ek-etapa { border: 0; margin: 0; padding: 0; min-width: 0; } /* Foto do cadastro */ .ek-foto { display: flex; flex-direction: column; align-items: center; gap: 10px; } .ek-foto img { width: 120px; height: 120px; border-radius: 9999px; object-fit: cover; border: 1px solid var(--ui-borda); background: var(--ui-superficie-2); } .ek-foto-vazia { width: 120px; height: 120px; border-radius: 9999px; display: grid; place-items: center; font-size: 42px; background: var(--ui-brand-suave); border: 1px solid var(--ui-borda); } /* Assinatura */ .ek-assinatura { border: 1px dashed var(--ui-borda); border-radius: var(--ui-raio-2); background: #fff; touch-action: none; overflow: hidden; max-width: 720px; } .ek-assinatura canvas { width: 100%; display: block; cursor: crosshair; } .ek-assinatura-img { border: 1px solid var(--ui-borda); border-radius: var(--ui-raio-2); background: #fff; padding: 8px; max-width: 400px; } .ek-assinatura-img img { max-width: 100%; } /* Linhas de anexo */ .ek-anexo { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px; border: 1px solid var(--ui-borda); border-radius: var(--ui-raio-2); background: var(--ui-superficie-2); } @media (min-width: 768px) { .ek-anexo { grid-template-columns: 220px minmax(0, 1fr) auto; align-items: center; } } /* ---------- Avatar com foto ---------- */ .ui-avatar img { width: 100%; height: 100%; border-radius: 9999px; object-fit: cover; } .ek-avatar-grande { width: 112px; height: 112px; border-radius: 9999px; display: grid; place-items: center; margin: 0 auto; overflow: hidden; background: var(--ui-brand-suave); color: #3538cd; font-size: 36px; font-weight: 700; border: 1px solid var(--ui-borda); } .ek-avatar-grande img { width: 100%; height: 100%; object-fit: cover; } .dark .ek-avatar-grande { color: #c7d2fe; } /* Pares rótulo/valor (telas de detalhe) */ .ek-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 18px; } .ek-dado small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ui-texto-3); margin-bottom: 3px; } .ek-dado span { font-size: 13.5px; font-weight: 500; color: var(--ui-texto); word-break: break-word; } /* ---------- Linha do tempo (jornada espiritual) ---------- */ .ek-timeline { list-style: none; margin: 0; padding: 0 0 0 8px; position: relative; } .ek-timeline::before { content: ""; position: absolute; left: 21px; top: 6px; bottom: 6px; width: 2px; background: var(--ui-borda); } .ek-timeline li { position: relative; display: flex; align-items: center; gap: 14px; padding: 8px 0; } .ek-timeline .marco { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 9999px; display: grid; place-items: center; font-size: 14px; background: var(--ui-superficie); border: 2px solid var(--ui-borda); flex: none; } .ek-timeline li.feito .marco { border-color: var(--ui-ok); background: rgba(18,183,106,.12); } .ek-timeline strong { display: block; font-size: 13px; font-weight: 600; } .ek-timeline small { font-size: 12px; color: var(--ui-texto-2); } /* ---------- Abas dentro de modal/card ---------- */ .ek-aba[hidden] { display: none !important; } .ek-abas { margin-bottom: 16px; } /* ---------- Autocomplete (substitui o select2) ---------- */ .ek-busca { position: relative; } .ek-busca .ui-campo { padding-right: 34px; } .ek-busca-limpar { position: absolute; right: 8px; top: 21px; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--ui-texto-3); cursor: pointer; font-size: 13px; line-height: 1; } .ek-busca-limpar:hover { background: var(--ui-superficie-2); color: var(--ui-texto); } .ek-busca-lista { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; max-height: 260px; overflow-y: auto; list-style: none; margin: 0; padding: 6px; border: 1px solid var(--ui-borda); border-radius: 12px; background: var(--ui-superficie); box-shadow: var(--ui-sombra-2); } .dark .ek-busca-lista { background: #101828; } .ek-busca-lista li { padding: 8px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; } .ek-busca-lista li.ativo, .ek-busca-lista li:hover { background: var(--ui-brand-suave); color: var(--ui-brand); } .ek-busca-lista li.info { cursor: default; color: var(--ui-texto-2); background: none; } /* ---------- Tabelas: seleção e ações ---------- */ .ui-tabela td.ek-sel, .ui-tabela th.ek-sel { width: 36px; } .ek-acoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .ui-tabela td .ui-btn.mini { height: 30px; } .ui-btn.ok { background: rgba(18,183,106,.12); color: #027a48; border-color: rgba(18,183,106,.35); } .ui-btn.ok:hover:not(:disabled) { background: rgba(18,183,106,.2); } .ui-btn.alerta { background: rgba(240,68,56,.08); color: #b42318; border-color: rgba(240,68,56,.3); } .ui-btn.alerta:hover:not(:disabled) { background: rgba(240,68,56,.14); } .dark .ui-btn.ok { color: #6ce9a6; } .dark .ui-btn.alerta { color: #fda29b; } .ek-barra-tabela { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } /* Data table (componente do Lumina) dentro de ui-card */ .ui-card .dt-toolbar { margin-bottom: 14px; } .ui-card .dt-footer { margin-top: 14px; } .dt-pagination span { font-size: 12.5px; color: var(--ui-texto-2); } /* ---------- Calendário (FullCalendar) no tema do Lumina ---------- */ .ek-calendario { --fc-border-color: var(--ui-borda); --fc-page-bg-color: transparent; --fc-neutral-bg-color: var(--ui-superficie-2); --fc-today-bg-color: var(--ui-brand-suave); --fc-event-bg-color: var(--ui-brand); --fc-event-border-color: var(--ui-brand); --fc-button-bg-color: var(--ui-superficie); --fc-button-border-color: var(--ui-borda); --fc-button-text-color: var(--ui-texto); --fc-button-hover-bg-color: var(--ui-superficie-2); --fc-button-hover-border-color: var(--ui-brand); --fc-button-active-bg-color: var(--ui-brand); --fc-button-active-border-color: var(--ui-brand); font-size: 12.5px; } .ek-calendario .fc .fc-toolbar-title { font-size: 16px; font-weight: 700; color: var(--ui-texto); text-transform: capitalize; } .ek-calendario .fc .fc-button { border-radius: 10px; font-size: 12.5px; font-weight: 600; text-transform: capitalize; box-shadow: none !important; } .ek-calendario .fc .fc-button-primary:not(:disabled).fc-button-active { color: #fff; } .ek-calendario .fc .fc-col-header-cell-cushion, .ek-calendario .fc .fc-daygrid-day-number, .ek-calendario .fc .fc-timegrid-slot-label-cushion { color: var(--ui-texto-2); text-decoration: none; } .ek-calendario .fc-theme-standard .fc-scrollgrid { border-radius: 12px; overflow: hidden; } .ek-calendario .fc-event { border-radius: 6px; padding: 1px 3px; } .ek-voluntario { cursor: grab; } .ek-voluntario:active { cursor: grabbing; } /* ---------- Gráficos (ApexCharts) ---------- */ .ek-grafico { min-height: 260px; } .ek-rodape-grafico { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ui-borda); text-align: center; } .ek-rodape-grafico strong { display: block; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; } .ek-rodape-grafico small { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ui-texto-2); } .apexcharts-tooltip.apexcharts-theme-light { border-color: var(--ui-borda) !important; box-shadow: var(--ui-sombra-2) !important; } .dark .apexcharts-tooltip.apexcharts-theme-light { background: #101828 !important; color: #fff; } .dark .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { background: #1d2939 !important; border-color: #344054 !important; } .dark .apexcharts-text, .dark .apexcharts-legend-text { fill: #98a2b3 !important; color: #98a2b3 !important; } /* ---------- QR Code ---------- */ .ek-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .ek-qr img { width: 260px; max-width: 100%; border-radius: 12px; border: 1px solid var(--ui-borda); background: #fff; padding: 8px; } /* ---------- Menu: itens ainda não disponíveis ---------- */ .ek-menu-embreve { opacity: .55; cursor: not-allowed; } .ek-menu-embreve:hover { background: transparent !important; } .ek-menu-selo { margin-left: auto; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; background: var(--ui-superficie-2); border: 1px solid var(--ui-borda); color: var(--ui-texto-2); } /* ---------- Notificações do cabeçalho ---------- */ .ek-notif { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; color: inherit; text-decoration: none !important; } .ek-notif:hover { background: var(--ui-superficie-2); } .ek-notif .icone { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--ui-brand-suave); flex: none; font-size: 14px; } .ek-notif p { font-size: 12.5px; line-height: 1.4; color: var(--ui-texto); margin: 0; } .ek-notif small { font-size: 11px; color: var(--ui-texto-3); } /* ---------- Documentos públicos (termos) ---------- */ .ek-doc { max-width: 860px; margin: 0 auto; } .ek-doc h1 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; } .ek-doc h2 { font-size: 15px; font-weight: 700; margin: 22px 0 6px; } .ek-doc p { font-size: 14px; line-height: 1.7; color: var(--ui-texto); } .ek-doc .ui-legenda { margin-bottom: 8px; } /* Utilitários pequenos (não dependem do Tailwind compilado) */ .ek-mt { margin-top: 14px; } .ek-mb { margin-bottom: 14px; } .ek-m0 { margin: 0; } .ek-texto-2 { color: var(--ui-texto-2); } .ek-centralizado { text-align: center; } .ek-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ek-linha.entre { justify-content: space-between; } .ek-lista-simples { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ui-texto-2); line-height: 1.8; list-style: disc; } .ek-paragrafo { font-size: 13px; line-height: 1.6; color: var(--ui-texto-2); } /* ---------- Diálogos (alerta/confirmação) — substituem o SweetAlert2 ---------- */ .ek-dialogo { max-width: 440px; text-align: center; } .ek-dialogo h3 { padding-right: 0 !important; margin-top: 4px; } .ek-dialogo .ek-dialogo-texto { font-size: 13.5px; line-height: 1.55; color: var(--ui-texto-2); } .ek-dialogo .ek-dialogo-texto p { margin: 0 0 4px; color: var(--ui-texto); } .ek-dialogo .ui-modal-rodape { justify-content: center; } .ek-dialogo textarea { text-align: left; } .ek-dialogo-icone { width: 56px; height: 56px; margin: 4px auto 10px; border-radius: 9999px; display: grid; place-items: center; font-size: 26px; background: var(--ui-brand-suave); } .ek-dialogo-icone.ok { background: rgba(18,183,106,.12); } .ek-dialogo-icone.aviso { background: rgba(247,144,9,.14); } .ek-dialogo-icone.erro { background: rgba(240,68,56,.12); } .ui-modal-fechar.ui-btn { width: 36px; padding: 0; } /* Voluntário arrastável: faixa lateral com a cor do ministério */ .ek-voluntario::before { background: var(--ek-cor, var(--ui-brand)) !important; } .ek-voluntario:hover { border-color: var(--ek-cor, var(--ui-brand)); } /* Ícones do menu do Eklesia são de traço (stroke); o CSS do TailAdmin aplica "fill" nos ícones ativos/inativos, o que os deixava preenchidos. */ .sidebar nav svg, .sidebar nav svg * { fill: none !important; } /* Itens de lista montados com (válido dentro de /