html, body {
font-family: 'Inter', Helvetica, Arial, sans-serif;
}
:root {
--ibc-header-height: 48px;
--ibc-footer-height: 24px;
/* Cores de fábrica da marca; a igreja troca as suas em Configurações (MarcaService
injeta as variáveis no ). Tons claros e escuros derivam delas com color-mix. */
--ibc-laranja: #D06401;
--ibc-laranja-rgb: 208, 100, 1;
--ibc-azul: #1E0B67;
--ibc-azul-rgb: 30, 11, 103;
/* Medidas do formulário de edição (DialogFicha), base das janelas de aviso.
Largura: MaxWidth.Large com FullWidth. Altura: painel das abas + 176px fixos
(título, barra de registro, abas e rodapé, medidos no navegador). */
--ibc-ficha-largura: min(1280px, 100vw - 64px);
--ibc-ficha-paineis: clamp(300px, calc(100vh - 250px), 760px);
--ibc-ficha-altura: calc(var(--ibc-ficha-paineis) + 176px);
}
/* MudBlazor shrinks the app bar on small screens (e.g. 7/8 of the height); keep fixed even values */
.mud-appbar .mud-toolbar-appbar {
height: var(--ibc-header-height) !important;
min-height: var(--ibc-header-height) !important;
}
.mud-main-content {
padding-top: var(--ibc-header-height) !important;
padding-bottom: var(--ibc-footer-height);
}
.mud-drawer-fixed.mud-drawer-clipped-always {
top: var(--ibc-header-height) !important;
height: calc(100% - var(--ibc-header-height) - var(--ibc-footer-height)) !important;
}
/* Cabeçalho: logo e nome numa linha só; no celular fica só "IBC Vinea". */
.ibc-cabecalho-logo {
flex: none;
display: inline-flex;
margin-right: 16px;
border-radius: 4px;
}
.ibc-cabecalho-logo:focus-visible {
outline: 2px solid var(--ibc-laranja);
outline-offset: 3px;
}
.ibc-cabecalho-titulo {
display: flex;
align-items: center;
min-width: 0;
white-space: nowrap;
}
.ibc-cabecalho-sistema {
display: flex;
align-items: center;
}
/* Assinatura "Vinea" manuscrita (SVG branco): a letra cursiva é baixa, então pede mais
altura que o texto ao lado para ficar com o mesmo peso. A volta alta do "V" deixa as
letras na parte de baixo da imagem; centralizada, o "inea" ficaria abaixo da linha de
"Gestão de Membros". Sobe 4px para as duas assentarem na mesma linha de base. */
.ibc-cabecalho-assinatura {
display: block;
height: 30px;
width: auto;
position: relative;
top: -4px;
}
@media (max-width: 600px) {
.ibc-cabecalho-logo {
margin-right: 10px;
}
.ibc-cabecalho-sistema {
display: none;
}
}
/* Fio vertical entre "IBC Vinea" e "Gestão de Membros" (no lugar do pipe):
usa a cor do texto com opacidade, então fica branco translúcido no cabeçalho
azul e cinza claro nos rodapés das telas de conta. */
.ibc-divisor-vertical {
display: inline-block;
width: 1px;
height: 1.1em;
margin: 0 .75em;
background-color: currentColor;
opacity: .35;
vertical-align: middle;
}
/* Rodapé azul com o versículo da sessão (sorteado a cada login). */
.ibc-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: var(--ibc-footer-height);
padding: 0 16px;
z-index: var(--mud-zindex-appbar);
background-color: var(--ibc-azul);
color: #FFFFFF;
font-size: 12px;
white-space: nowrap;
}
.ibc-footer-texto {
min-width: 0;
overflow: hidden;
font-style: italic;
text-overflow: ellipsis;
}
.ibc-footer-ref {
flex: none;
font-weight: 600;
color: color-mix(in srgb, var(--ibc-laranja) 62%, white);
}
h1:focus {
outline: none;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid #e50000;
}
.validation-message {
color: #e50000;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
#blazor-error-ui {
color-scheme: light only;
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
/* Título da tela, no estilo do sistema que serviu de referência */
.ibc-titulo-tela {
color: var(--ibc-laranja);
font-weight: 600;
letter-spacing: .08em;
}
/* ---------------------------------------------------------------------------
Densidade "ERP": o MudBlazor dimensiona quase tudo em rem, então reduzir a
base encolhe campos, botões e espaçamentos de forma proporcional.
--------------------------------------------------------------------------- */
html {
font-size: 13.5px;
}
/* Nada de mexer no padding interno dos campos: o rótulo do MudBlazor é
posicionado pela altura padrão e desalinha. A redução vem da escala em rem. */
.mud-input-helper-text {
margin-top: 1px;
font-size: .68rem;
line-height: 1.2;
}
/* Tabela: linhas baixas, sem quebra de texto e ações agrupadas */
.mud-table-dense .mud-table-cell {
padding: 1px 8px;
white-space: nowrap;
}
/* Grids: tudo alinhado à esquerda, cabeçalho e conteúdo com o mesmo recuo (8px),
para o título ficar exatamente em cima do dado. O MudBlazor dá 16px/24px às
células de dados (regra mais específica que a nossa), o que deslocava os títulos.
Colunas de valores decimais vão à direita com a classe ibc-coluna-decimal, no
MudTh e no MudTd, para o título acompanhar o número. */
.mud-table-dense * .mud-table-row .mud-table-cell,
.mud-table-dense * .mud-table-row .mud-table-cell:last-child {
padding-left: 8px;
padding-right: 8px;
padding-inline-start: 8px;
padding-inline-end: 8px;
text-align: left;
}
.mud-table-dense * .mud-table-row .mud-table-cell.ibc-coluna-decimal {
text-align: right;
}
.mud-table-dense * .mud-table-row .mud-table-cell.ibc-coluna-decimal .mud-button-root {
flex-direction: row-reverse;
}
.mud-table-dense .mud-table-head .mud-table-cell {
padding: 4px 8px;
font-weight: 600;
text-transform: uppercase;
font-size: .7rem;
letter-spacing: .04em;
}
.mud-table-dense .mud-table-cell .mud-icon-button {
padding: 3px;
}
.mud-table-dense .mud-table-cell .mud-avatar {
width: 26px;
height: 26px;
font-size: .65rem;
}
.ibc-acoes {
display: flex;
gap: 2px;
flex-wrap: nowrap;
}
/* Rodapé da tabela e paginação */
.mud-table-pagination-toolbar {
height: 40px;
min-height: 40px;
}
/* Dialog: menos respiro vertical para caber em telas de 15" */
.mud-dialog-content {
padding-top: 8px;
padding-bottom: 8px;
}
/* Cabeçalho das seções do formulário */
/* Legenda de seção nos diálogos: laranja da marca, como os títulos. */
.ibc-secao {
color: var(--ibc-laranja);
text-transform: uppercase;
font-weight: 600;
letter-spacing: .06em;
}
/* Linha isolando o cabeçalho, como no sistema de referência */
.mud-dialog .mud-dialog-title,
.mud-dialog .mud-dialog-title .mud-typography {
color: var(--ibc-azul);
}
/* Fundo do dialog acinzentado (cara de tela de sistema); o painel das abas
fica branco para contrastar. */
.mud-dialog {
background-color: var(--mud-palette-background-gray);
}
.mud-dialog .mud-dialog-title {
background-color: rgba(var(--ibc-azul-rgb), .14);
border-bottom: 2px solid var(--ibc-laranja);
padding: 8px 24px 6px;
}
/* O rodapé vem com 8px de recuo e o conteúdo com 24px: os botões ficavam
desalinhados da moldura interna. */
.mud-dialog .mud-dialog-actions {
padding: 8px 24px 12px;
}
/* Título mais compacto: economiza altura sem perder o destaque */
.mud-dialog .mud-dialog-title .mud-typography {
font-size: 1rem;
line-height: 1.5;
}
.ibc-titulo-tela {
display: block;
border-bottom: 1px solid var(--mud-palette-lines-default);
padding-bottom: 6px;
}
/* Campo preenchido pelo sistema: fundo cinza indica que não é editável */
.ibc-campo-readonly .mud-input-outlined {
background-color: var(--mud-palette-background-gray);
border-radius: var(--mud-default-borderradius);
}
/* Nas janelas de aviso o fundo já é esse cinza: o campo somente leitura precisa de um tom acima. */
.ibc-janela-aviso ~ .mud-dialog .ibc-campo-readonly .mud-input-outlined {
background-color: color-mix(in srgb, var(--mud-palette-background-gray) 92%, #000);
}
/* Menu lateral levemente acinzentado, separando-o da área de conteúdo */
.mud-drawer {
background-color: var(--mud-palette-background-gray);
border-right: 1px solid var(--mud-palette-lines-default);
}
/* Recuo lateral de 12px, o mesmo dos vincos: campo e linha começam e terminam juntos. */
/* Marca da igreja no topo do menu: cartão branco com a logo colorida e o nome da igreja. */
.ibc-menu-marca {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin: 12px 12px 2px;
padding: 14px 10px 12px;
border-radius: 12px;
background: var(--mud-palette-surface);
box-shadow: 0 2px 8px rgba(var(--ibc-azul-rgb), .08);
color: var(--mud-palette-text-secondary);
font-size: .72rem;
font-weight: 600;
letter-spacing: .02em;
text-align: center;
text-decoration: none;
transition: box-shadow .2s ease, transform .2s ease;
}
.ibc-menu-marca:hover {
box-shadow: 0 4px 14px rgba(var(--ibc-azul-rgb), .16);
transform: translateY(-1px);
}
.ibc-menu-marca:focus-visible {
outline: 2px solid var(--ibc-laranja);
outline-offset: 2px;
}
.ibc-menu-marca img {
display: block;
width: 64px;
height: auto;
}
/* Menu recolhido (56px): só a logo, sem cartão. */
.ibc-menu-marca-mini {
margin: 10px 6px 0;
padding: 6px 0;
background: none;
box-shadow: none;
}
.ibc-menu-marca-mini:hover {
box-shadow: none;
}
.ibc-menu-marca-mini img {
width: 32px;
}
.ibc-cabecalho-nome {
display: flex;
min-width: 0;
color: inherit;
text-decoration: none;
border-radius: 4px;
}
.ibc-cabecalho-nome:focus-visible {
outline: 2px solid var(--ibc-laranja);
outline-offset: 3px;
}
/* Itens do menu ancorados no topo: o espaço elástico fica depois deles */
.ibc-menu {
display: flex;
flex-direction: column;
height: 100%;
}
.ibc-menu > .ibc-menu-marca,
.ibc-menu > .mud-navmenu {
flex: 0 0 auto;
}
.ibc-menu-espaco {
flex: 1 1 auto;
}
/* Menu recolhido (só ícones): a seta do grupo não cabe ao lado do ícone. */
.mud-drawer--closed.mud-drawer-mini .mud-nav-group .mud-nav-link-expand-icon {
display: none;
}
/* Grupo "Administração": o título segue o mesmo visual dos itens. */
.ibc-menu .mud-nav-group > .mud-nav-link .mud-nav-link-text {
font-weight: 500;
}
/* Copyright no pé do menu lateral, separado por uma linha em sulco:
traço escuro em cima e traço claro logo abaixo, como um vinco na superfície. */
.ibc-menu-rodape {
display: flex;
flex: 0 0 auto;
flex-direction: column;
align-items: center;
margin: 0 12px;
padding: 10px 0 12px;
border-top: 1px solid rgba(var(--ibc-azul-rgb), .16);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
font-size: 11px;
line-height: 1.5;
color: var(--mud-palette-text-secondary);
text-align: center;
}
/* Botão na mesma linha de campos: acompanha a altura deles */
.ibc-botao-campo {
align-self: stretch;
height: auto;
}
/* Barra de ícones do dialog mais baixa, para o conteúdo caber sem rolagem */
.mud-dialog .mud-toolbar {
height: 34px;
min-height: 34px;
}
/* ---------------------------------------------------------------------------
Abas em forma de ficha: inativas recuadas em cinza, ativa em destaque
cortando a linha da barra para se fundir com o painel.
--------------------------------------------------------------------------- */
.ibc-abas .mud-tabs-tabbar {
background-color: transparent;
min-height: 0;
}
/* A linha de base é desenhada DENTRO da caixa: o content tem overflow hidden e
cortaria qualquer borda que a aba tentasse cobrir por fora. */
.ibc-abas .mud-tabs-tabbar-content {
background-image: linear-gradient(to top, var(--ibc-laranja) 1px, transparent 1px);
}
/* O inner do MudBlazor tem min-height 48px e descolava a linha das abas.
A mesma linha de base corre aqui também, sob as setas de rolagem (celular): sem ela a
moldura laranja ficava interrompida embaixo das setas. A aba ativa cobre as duas. */
.ibc-abas .mud-tabs-tabbar-inner {
min-height: 0;
align-items: flex-end;
background-image: linear-gradient(to top, var(--ibc-laranja) 1px, transparent 1px);
}
.ibc-abas .mud-tab {
min-height: 28px;
margin-right: 4px;
margin-bottom: 1px;
padding: 0 18px;
border: 1px solid rgba(var(--ibc-azul-rgb), .2);
border-bottom: none;
border-radius: 6px 6px 0 0;
background-color: rgba(var(--ibc-azul-rgb), .07);
color: var(--ibc-azul);
font-size: .78rem;
font-weight: 500;
text-transform: none;
letter-spacing: normal;
}
.ibc-abas .mud-tab:hover {
background-color: rgba(var(--ibc-laranja-rgb), .08);
color: var(--ibc-laranja);
}
/* A ativa desce 1px e cresce 1px: cobre o trecho da linha sob ela sem ficar
mais baixa que as inativas. */
.ibc-abas .mud-tab.mud-tab-active {
background-color: var(--mud-palette-surface);
border: 1px solid var(--ibc-laranja);
border-bottom: none;
color: var(--ibc-laranja);
font-weight: 600;
min-height: 29px;
margin-bottom: 0;
padding-bottom: 1px;
}
.ibc-abas .mud-tab-slider {
display: none;
}
/* Altura acompanha a janela: o dialog ocupa a folga disponível em vez de um
valor fixo, o que evita rolagem interna em telas de 15". */
.ibc-abas .mud-tabs-panels {
height: var(--ibc-ficha-paineis);
overflow-y: auto;
background-color: var(--mud-palette-surface);
border: 1px solid var(--ibc-laranja);
border-top: none;
border-radius: 0 0 4px 4px;
padding: 16px;
}
/* Seletor de data dentro de tabela: sem largura mínima, a data fica cortada
pelo ícone do calendário. */
.mud-table-cell .mud-picker {
min-width: 150px;
}
/* Menu recolhido: só ícones. O MudBlazor mantém o texto renderizado e ele
transbordava na faixa de 56px. */
.mud-drawer-mini.mud-drawer--closed {
overflow-x: hidden;
}
.mud-drawer-mini.mud-drawer--closed .mud-nav-link-text {
display: none;
}
.mud-drawer-mini.mud-drawer--closed .mud-nav-link {
justify-content: center;
padding-left: 0;
padding-right: 0;
}
.mud-drawer-mini.mud-drawer--closed .mud-nav-link-icon {
margin-right: 0;
}
/* Itens do menu lateral como "pílulas" com respiro nas bordas.
Hover: o fundo azulado cresce da esquerda para a direita, uma barra laranja
cresce do centro na borda esquerda (logo depois do fundo) e o ícone desliza
3px. Tudo na mesma curva de desaceleração, rápido o bastante para não atrasar
quem já sabe onde vai clicar. Selecionado: pílula e barra fixas, mais fortes. */
.mud-drawer .mud-navmenu .mud-nav-link {
position: relative;
width: calc(100% - 16px);
margin: 2px 8px;
border-radius: 8px;
overflow: hidden;
isolation: isolate;
background-color: transparent !important;
transition: color 220ms cubic-bezier(.2, .8, .2, 1);
}
.mud-drawer .mud-navmenu .mud-nav-link::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: linear-gradient(90deg, rgba(var(--ibc-azul-rgb), .11) 0%, rgba(var(--ibc-azul-rgb), .04) 100%);
transform: scaleX(0);
transform-origin: left center;
transition: transform 280ms cubic-bezier(.2, .8, .2, 1);
}
.mud-drawer .mud-navmenu .mud-nav-link::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 3px;
height: 60%;
border-radius: 0 3px 3px 0;
background: var(--ibc-laranja);
transform: translateY(-50%) scaleY(0);
transition: transform 240ms cubic-bezier(.2, .8, .2, 1) 60ms;
}
.mud-drawer .mud-navmenu .mud-nav-link .mud-nav-link-icon {
transition: transform 240ms cubic-bezier(.2, .8, .2, 1), color 220ms ease;
}
.mud-drawer .mud-navmenu .mud-nav-link:hover,
.mud-drawer .mud-navmenu .mud-nav-link:hover .mud-nav-link-icon {
color: var(--ibc-azul);
}
.mud-drawer .mud-navmenu .mud-nav-link:hover::before,
.mud-drawer .mud-navmenu .mud-nav-link.active::before {
transform: scaleX(1);
}
.mud-drawer .mud-navmenu .mud-nav-link:hover::after,
.mud-drawer .mud-navmenu .mud-nav-link.active::after {
transform: translateY(-50%) scaleY(1);
}
.mud-drawer .mud-navmenu .mud-nav-link:hover .mud-nav-link-icon {
transform: translateX(3px);
}
.mud-drawer .mud-navmenu .mud-nav-link.active::before {
background: linear-gradient(90deg, rgba(var(--ibc-azul-rgb), .15) 0%, rgba(var(--ibc-azul-rgb), .06) 100%);
}
.mud-drawer .mud-navmenu .mud-nav-link.active::after {
height: 70%;
}
.mud-drawer .mud-navmenu .mud-nav-link.active .mud-nav-link-text {
font-weight: 600;
}
.mud-drawer .mud-navmenu .mud-nav-link:focus-visible {
outline: 2px solid rgba(var(--ibc-laranja-rgb), .6);
outline-offset: -2px;
}
/* Menu recolhido: pílula menor, só o ícone centralizado. */
.mud-drawer-mini.mud-drawer--closed .mud-navmenu .mud-nav-link {
width: calc(100% - 12px);
margin: 2px 6px;
}
@media (prefers-reduced-motion: reduce) {
.mud-drawer .mud-navmenu .mud-nav-link::before,
.mud-drawer .mud-navmenu .mud-nav-link::after,
.mud-drawer .mud-navmenu .mud-nav-link .mud-nav-link-icon {
transition: none;
}
}
/* Item selecionado: o MudBlazor usa a cor primária do tema (roxo padrão).
A regra dele (.mud-navmenu-default .mud-nav-link.active:not(...)) é mais
específica, então precisamos empatar para o azul da marca prevalecer. */
.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-text,
.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
color: var(--ibc-azul);
}
/* Sino com novidade: laranja da marca, sem badge flutuante para não escapar
da barra de 48px. */
.ibc-sino-ativo {
color: var(--ibc-laranja) !important;
}
/* Sino tocando: a cada 5s, um balanço curto preso pelo topo (como um sino de
verdade) e uma onda laranja que se expande em volta do botão. Para quando a
pessoa abre o sino (classe removida) e some para quem prefere menos movimento. */
.ibc-sino-tocando {
animation: ibc-sino-onda 5s ease-out infinite;
}
.ibc-sino-tocando .mud-icon-root {
transform-origin: 50% 8%;
animation: ibc-sino-balanco 5s ease-in-out infinite;
}
@keyframes ibc-sino-balanco {
0%, 22%, 100% { transform: rotate(0); }
3% { transform: rotate(16deg); }
7% { transform: rotate(-14deg); }
11% { transform: rotate(10deg); }
15% { transform: rotate(-6deg); }
19% { transform: rotate(3deg); }
}
@keyframes ibc-sino-onda {
0% { box-shadow: 0 0 0 0 rgba(var(--ibc-laranja-rgb), .65); }
25% { box-shadow: 0 0 0 12px rgba(var(--ibc-laranja-rgb), 0); }
100% { box-shadow: 0 0 0 0 rgba(var(--ibc-laranja-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
.ibc-sino-tocando,
.ibc-sino-tocando .mud-icon-root {
animation: none;
}
}
/* Campo de data: o calendário ancora no próprio campo */
.ibc-campo-data {
position: relative;
}
/* Coluna do checkbox de multisseleção: a classe mud-table-cell-checkbox fica
num div interno, não na célula, então a largura precisa ir na primeira
coluna da tabela marcada com .ibc-grid-selecao. */
.ibc-grid-selecao .mud-table-row > .mud-table-cell:first-child {
width: 38px;
padding-left: 6px;
padding-right: 0;
padding-inline-start: 6px;
padding-inline-end: 0;
}
.ibc-grid-selecao .mud-table-cell-checkbox {
width: auto;
margin: 0;
}
/* Separador tracejado: filtros do grid e cartões do painel */
.ibc-divisor-tracejado {
border-style: dashed;
}
/* Separador de seção nos diálogos (Contato, Endereço, Perfis...): tracejado.
O pontilhado foi testado e recusado. */
.ibc-divisor-secao {
border-style: dashed;
}
/* Bolo de aniversário próximo (7 dias antes até o dia): mesmo laranja do sino */
.ibc-bolo {
color: var(--ibc-laranja);
}
/* Aniversário chegando (ainda não é hoje): bolo no azul da marca. */
.ibc-bolo.ibc-bolo-proximo {
color: var(--ibc-azul);
}
/* ---------------------------------------------------------------------------
Painel inicial: indicadores e cartões dos próximos aniversariantes
--------------------------------------------------------------------------- */
.ibc-stat {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
height: 100%;
}
.ibc-stat-icone {
flex: none;
color: var(--ibc-laranja);
font-size: 1.8rem;
}
.ibc-stat-valor {
color: var(--ibc-azul);
font-size: 1.35rem;
font-weight: 600;
line-height: 1.2;
}
.ibc-stat-rotulo {
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--mud-palette-text-secondary);
}
.ibc-aniv {
padding: 10px 12px;
height: 100%;
cursor: pointer;
border-left: 3px solid var(--mud-palette-lines-default);
transition: box-shadow .15s, border-color .15s;
}
.ibc-aniv:hover {
border-left-color: var(--ibc-azul);
box-shadow: var(--mud-elevation-3);
}
/* Duas fases, cada uma com uma cor de fundo: hoje = laranja da marca (o destaque,
como o sino e o bolo do grid), próximos dias = azul da marca suave (ainda vem).
O que já passou não aparece: a janela vai de 7 dias antes até o próprio dia. */
.ibc-aniv-hoje {
border-left-color: var(--ibc-laranja);
background-color: color-mix(in srgb, var(--ibc-laranja) 15%, white);
}
.ibc-aniv-futuro {
border-left-color: color-mix(in srgb, var(--ibc-azul) 55%, white);
background-color: color-mix(in srgb, var(--ibc-azul) 8%, white);
}
.ibc-aniv-legenda {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: -4px 0 8px;
font-size: .75rem;
color: var(--mud-palette-text-secondary);
}
.ibc-aniv-legenda span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.ibc-aniv-legenda i {
width: 12px;
height: 12px;
border-radius: 3px;
}
.ibc-aniv-cor-hoje {
background: color-mix(in srgb, var(--ibc-laranja) 15%, white);
border-left: 3px solid var(--ibc-laranja);
}
.ibc-aniv-cor-futuro {
background: color-mix(in srgb, var(--ibc-azul) 8%, white);
border-left: 3px solid color-mix(in srgb, var(--ibc-azul) 55%, white);
}
.ibc-aniv-topo {
display: flex;
align-items: center;
gap: 10px;
}
.ibc-aniv-avatar {
width: 40px;
height: 40px;
font-size: .8rem;
background-color: var(--ibc-azul);
color: #fff;
flex: 0 0 auto;
}
.ibc-aniv-dados {
min-width: 0;
flex: 1 1 auto;
}
.ibc-aniv-nome {
font-weight: 600;
color: var(--ibc-azul);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ibc-aniv-idade {
font-size: .75rem;
color: var(--mud-palette-text-secondary);
}
.ibc-aniv-chip {
flex: 0 0 auto;
background-color: var(--ibc-laranja);
color: #fff;
font-size: .62rem;
font-weight: 700;
letter-spacing: .06em;
padding: 2px 6px;
border-radius: 3px;
}
.ibc-aniv-linha {
display: flex;
align-items: center;
gap: 6px;
font-size: .78rem;
color: var(--mud-palette-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ibc-aniv-linha + .ibc-aniv-linha {
margin-top: 2px;
}
.ibc-vazio {
display: flex;
flex-direction: column;
align-items: center;
padding: 28px;
color: var(--mud-palette-text-secondary);
}
/* ---------- Tela de login ----------
Página estática, fora do tema do MudBlazor: tamanhos em px porque o html
está em 13.5px para a densidade das telas internas. */
.ibc-login {
--login-tinta: #1B1733;
--login-suave: #6B6785;
--login-borda: #DAD7E8;
--login-campo: color-mix(in srgb, var(--ibc-azul) 2%, white);
min-height: 100vh;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
font-family: 'Inter', Helvetica, Arial, sans-serif;
color: var(--login-tinta);
background: #FFFFFF;
}
.ibc-icone {
width: 20px;
height: 20px;
flex: none;
fill: currentColor;
}
/* Lado da marca: fundo claro para a logo colorida respirar, com brilhos
laranja e azul e dois anéis decorativos. */
.ibc-login-marca {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
background:
radial-gradient(circle at 18% 18%, rgba(var(--ibc-laranja-rgb), .16), transparent 42%),
radial-gradient(circle at 82% 88%, rgba(var(--ibc-azul-rgb), .16), transparent 48%),
linear-gradient(160deg, color-mix(in srgb, var(--ibc-laranja) 6%, white) 0%, color-mix(in srgb, var(--ibc-azul) 5%, white) 100%);
}
.ibc-login-marca::before,
.ibc-login-marca::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.ibc-login-marca::before {
width: 520px;
height: 520px;
top: -220px;
right: -180px;
border: 2px solid rgba(var(--ibc-laranja-rgb), .18);
box-shadow: 0 0 0 40px rgba(var(--ibc-laranja-rgb), .04);
}
.ibc-login-marca::after {
width: 420px;
height: 420px;
bottom: -200px;
left: -140px;
border: 2px solid rgba(var(--ibc-azul-rgb), .14);
box-shadow: 0 0 0 36px rgba(var(--ibc-azul-rgb), .035);
}
.ibc-login-marca-conteudo {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
animation: ibc-login-surgir .6s ease-out both;
}
.ibc-login-logo {
width: 188px;
height: 188px;
filter: drop-shadow(0 14px 24px rgba(var(--ibc-azul-rgb), .16));
}
.ibc-login-nome {
margin: 20px 0 0;
font-size: 44px;
font-weight: 800;
letter-spacing: -.02em;
color: var(--ibc-azul);
line-height: 1.1;
}
.ibc-login-sistema {
margin-top: 8px;
font-size: 13px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--ibc-laranja);
}
.ibc-login-regua {
width: 48px;
height: 3px;
margin: 28px 0 24px;
border-radius: 3px;
background: var(--ibc-laranja);
}
.ibc-login-versiculo {
margin: 0;
max-width: 340px;
font-size: 17px;
font-style: italic;
line-height: 1.5;
color: #4A4470;
}
.ibc-login-versiculo cite {
display: block;
margin-top: 8px;
font-size: 12px;
font-style: normal;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ibc-laranja);
}
/* Lado do formulário */
.ibc-login-painel {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px 24px;
}
.ibc-login-cartao {
width: 100%;
max-width: 400px;
margin: auto 0;
animation: ibc-login-surgir .6s .08s ease-out both;
}
.ibc-login-logo-compacta {
display: none;
width: 76px;
height: 76px;
margin: 0 auto 20px;
}
.ibc-login-titulo {
margin: 0;
font-size: 30px;
font-weight: 700;
letter-spacing: -.02em;
color: var(--ibc-azul);
}
.ibc-login-subtitulo {
margin: 8px 0 28px;
font-size: 15px;
color: var(--login-suave);
}
.ibc-login-alerta {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 20px;
padding: 12px 14px;
border-radius: 12px;
font-size: 14px;
line-height: 1.4;
}
.ibc-login-alerta-erro {
background: #FDEEEE;
border: 1px solid #F4C7C7;
color: #9B1C1C;
}
.ibc-login-alerta-ok {
background: #EAF7EF;
border: 1px solid #BFE5CC;
color: #1E6B3A;
}
.ibc-login-form {
display: flex;
flex-direction: column;
}
.ibc-login-rotulo {
margin: 0 0 6px;
font-size: 13px;
font-weight: 600;
color: #2A2548;
}
.ibc-login-rotulo:not(:first-of-type) {
margin-top: 18px;
}
.ibc-login-campo {
display: flex;
align-items: center;
gap: 10px;
height: 50px;
padding: 0 8px 0 14px;
border: 1.5px solid var(--login-borda);
border-radius: 12px;
background: var(--login-campo);
color: #8A86A3;
transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.ibc-login-campo:hover {
border-color: #BDB8D6;
}
.ibc-login-campo:focus-within {
border-color: var(--ibc-azul);
background: #FFFFFF;
color: var(--ibc-azul);
box-shadow: 0 0 0 4px rgba(var(--ibc-azul-rgb), .12);
}
.ibc-login-campo:has(input.invalid) {
border-color: #E08A8A;
}
.ibc-login-campo input {
flex: 1;
min-width: 0;
height: 100%;
border: none;
outline: none !important;
background: transparent;
font: inherit;
font-size: 15px;
color: var(--login-tinta);
}
.ibc-login-campo input::placeholder {
color: #A9A5BF;
}
/* O preenchimento automático do Chrome pinta o fundo de amarelo/azul. */
.ibc-login-campo input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 40px var(--login-campo) inset;
-webkit-text-fill-color: var(--login-tinta);
}
.ibc-login-campo:focus-within input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 40px #FFFFFF inset;
}
.ibc-login-olho {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: transparent;
color: #8A86A3;
cursor: pointer;
}
.ibc-login-olho:hover {
background: rgba(var(--ibc-azul-rgb), .07);
color: var(--ibc-azul);
}
.ibc-login-olho .ibc-olho-fechado,
.ibc-login-olho.visivel .ibc-olho-aberto {
display: none;
}
.ibc-login-olho.visivel .ibc-olho-fechado {
display: block;
}
.ibc-login-form .validation-message {
margin-top: 6px;
font-size: 12.5px;
color: #C62828;
}
.ibc-login-caps {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 12.5px;
font-weight: 500;
color: var(--ibc-laranja);
}
.ibc-login-caps[hidden] {
display: none;
}
.ibc-login-caps .ibc-icone {
width: 16px;
height: 16px;
}
.ibc-login-lembrar {
display: flex;
align-items: center;
gap: 10px;
margin: 20px 0 24px;
font-size: 14px;
color: #4A4666;
cursor: pointer;
user-select: none;
}
.ibc-login-lembrar input {
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--ibc-azul);
outline: none !important;
cursor: pointer;
}
.ibc-login-botao {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 50px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, var(--ibc-azul) 0%, color-mix(in srgb, var(--ibc-azul) 82%, white) 100%);
box-shadow: 0 10px 22px -10px rgba(var(--ibc-azul-rgb), .7);
color: #FFFFFF;
font: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: transform .15s, box-shadow .15s, filter .15s;
}
.ibc-login-botao:hover {
transform: translateY(-1px);
filter: brightness(1.08);
box-shadow: 0 14px 26px -10px rgba(var(--ibc-azul-rgb), .75);
}
.ibc-login-botao:active {
transform: translateY(0);
}
.ibc-login-botao:focus-visible {
outline: 3px solid rgba(var(--ibc-laranja-rgb), .55);
outline-offset: 2px;
}
.ibc-login-botao-seta {
transition: transform .15s;
}
.ibc-login-botao:hover .ibc-login-botao-seta {
transform: translateX(3px);
}
.ibc-login-spinner {
display: none;
width: 20px;
height: 20px;
border: 2.5px solid rgba(255, 255, 255, .35);
border-top-color: #FFFFFF;
border-radius: 50%;
animation: ibc-login-girar .7s linear infinite;
}
.ibc-login-botao.enviando {
cursor: progress;
transform: none;
}
.ibc-login-botao.enviando .ibc-login-botao-seta {
display: none;
}
.ibc-login-botao.enviando .ibc-login-spinner {
display: block;
}
.ibc-login-ajuda {
margin: 24px 0 0;
font-size: 13.5px;
text-align: center;
color: var(--login-suave);
}
.ibc-login-ajuda strong {
color: #2A2548;
font-weight: 600;
}
.ibc-login-rodape {
margin-top: 32px;
font-size: 12px;
color: #A9A5BF;
}
a.ibc-login-botao {
text-decoration: none;
}
.ibc-senha-botao {
margin-top: 24px;
}
.ibc-login-link {
padding: 0;
border: none;
background: none;
font: inherit;
font-weight: 600;
color: var(--ibc-azul);
text-decoration: none;
cursor: pointer;
}
.ibc-login-link:hover {
color: var(--ibc-laranja);
text-decoration: underline;
}
/* Regras da nova senha: cinza até serem atendidas, verdes depois. */
.ibc-senha-regras {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 12px;
margin: 10px 0 0;
padding: 0;
list-style: none;
font-size: 12.5px;
color: var(--login-suave);
}
.ibc-senha-regras li {
display: flex;
align-items: center;
gap: 6px;
transition: color .15s;
}
.ibc-senha-regras li::before {
content: "";
width: 14px;
height: 14px;
flex: none;
border: 1.5px solid #C9C5DC;
border-radius: 50%;
transition: background-color .15s, border-color .15s;
}
.ibc-senha-regras li.ok {
color: #1E6B3A;
}
.ibc-senha-regras li.ok::before {
border-color: #2E9E5B;
background: #2E9E5B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.ibc-senha-ok {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.ibc-senha-ok .ibc-login-botao {
align-self: stretch;
}
.ibc-senha-ok-icone {
width: 64px;
height: 64px;
margin-bottom: 16px;
color: #2E9E5B;
}
/* MFA: selo do topo, QR code, código grande e códigos de recuperação. */
.ibc-mfa-cartao {
max-width: 440px;
}
.ibc-mfa-selo {
display: grid;
place-items: center;
width: 52px;
height: 52px;
margin-bottom: 16px;
border-radius: 14px;
background: rgba(var(--ibc-azul-rgb), .08);
color: var(--ibc-azul);
}
.ibc-mfa-selo .ibc-icone {
width: 28px;
height: 28px;
}
.ibc-mfa-selo-ok {
background: #EAF7EF;
color: #2E9E5B;
}
.ibc-login-campo input.ibc-mfa-codigo {
font-size: 22px;
font-weight: 600;
letter-spacing: .3em;
font-variant-numeric: tabular-nums;
}
.ibc-login-campo input.ibc-mfa-codigo::placeholder {
letter-spacing: .3em;
}
.ibc-mfa-ajuda-extra {
margin-top: 10px;
font-size: 12.5px;
}
.ibc-mfa-passos {
margin: 0 0 12px;
padding-left: 20px;
font-size: 14px;
line-height: 1.5;
color: #2A2548;
}
.ibc-mfa-passos li {
margin-bottom: 12px;
}
.ibc-mfa-passos b {
color: var(--ibc-azul);
}
.ibc-mfa-qr {
width: 184px;
height: 184px;
margin: 12px 0 8px;
padding: 8px;
border: 1.5px solid var(--login-borda);
border-radius: 12px;
background: #FFFFFF;
}
.ibc-mfa-qr svg {
display: block;
width: 100%;
height: 100%;
}
.ibc-mfa-chave summary {
font-size: 13px;
font-weight: 600;
color: var(--ibc-azul);
cursor: pointer;
}
.ibc-mfa-chave summary:hover {
color: var(--ibc-laranja);
}
.ibc-mfa-chave code {
display: block;
margin-top: 8px;
padding: 10px 12px;
border-radius: 10px;
background: var(--login-campo);
font-size: 14px;
letter-spacing: .08em;
word-break: break-all;
user-select: all;
}
.ibc-mfa-codigos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 16px;
margin: 0 0 16px;
padding: 14px 16px 14px 36px;
border: 1.5px dashed var(--login-borda);
border-radius: 12px;
background: var(--login-campo);
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
font-size: 14.5px;
color: #2A2548;
}
.ibc-mfa-codigos li::marker {
color: #A9A5BF;
font-size: 12px;
}
.ibc-mfa-baixar {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 16px;
font-size: 14px;
}
.ibc-mfa-baixar .ibc-icone {
width: 18px;
height: 18px;
}
.ibc-mfa-aviso {
background: color-mix(in srgb, var(--ibc-laranja) 7%, white);
border: 1px solid color-mix(in srgb, var(--ibc-laranja) 30%, white);
color: color-mix(in srgb, var(--ibc-laranja) 70%, black);
}
.ibc-mfa-status {
margin: 0 0 8px;
padding: 0;
list-style: none;
font-size: 14px;
color: #2A2548;
}
.ibc-mfa-status li {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid var(--login-borda);
}
.ibc-mfa-status li:last-child {
border-bottom: none;
}
.ibc-mfa-status .ibc-icone {
width: 20px;
height: 20px;
color: var(--ibc-azul);
}
.ibc-login-ajuda .ibc-divisor-vertical {
margin: 0 10px;
}
@keyframes ibc-login-surgir {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
@keyframes ibc-login-girar {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.ibc-login-marca-conteudo,
.ibc-login-cartao {
animation: none;
}
}
/* Celular e janelas estreitas: some o painel da marca, a logo vai para o cartão. */
@media (max-width: 900px) {
.ibc-login {
grid-template-columns: 1fr;
background:
radial-gradient(circle at 0% 0%, rgba(var(--ibc-laranja-rgb), .10), transparent 40%),
radial-gradient(circle at 100% 100%, rgba(var(--ibc-azul-rgb), .10), transparent 45%),
#FFFFFF;
}
.ibc-login-marca {
display: none;
}
.ibc-login-painel {
padding: 32px 16px 16px;
}
.ibc-login-logo-compacta {
display: block;
}
.ibc-login-titulo,
.ibc-login-subtitulo {
text-align: center;
}
.ibc-mfa-selo {
margin-inline: auto;
}
}
/* Senha provisória em destaque no diálogo, fácil de ditar ou copiar. */
.ibc-senha-provisoria {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 12px;
border: 1px dashed var(--ibc-laranja);
border-radius: 8px;
background: color-mix(in srgb, var(--ibc-laranja) 6%, white);
font-family: ui-monospace, Consolas, monospace;
font-size: 1.35rem;
font-weight: 600;
letter-spacing: .04em;
color: var(--ibc-azul);
}
/* A chave de API é longa: letra menor e quebra em qualquer ponto. */
.ibc-chave-api {
font-size: 1rem;
}
.ibc-chave-api span {
word-break: break-all;
}
.ibc-perfil-opcao {
display: flex;
flex-direction: column;
line-height: 1.25;
}
/* Formulários de edição: botões do rodapé à esquerda. */
.ibc-dialog-ficha .mud-dialog-actions {
justify-content: flex-start;
}
/* Confirmações, erros e avisos: 1/4 da área do formulário de edição, ou seja,
metade da largura e metade da altura dele. A classe vem de Janelas.Aviso e cai
no overlay, que é irmão anterior do .mud-dialog. O texto rola se não couber e
os botões ficam sempre no pé. Em telas estreitas o piso de 300px mantém a leitura. */
.ibc-janela-aviso ~ .mud-dialog {
display: flex;
flex-direction: column;
width: calc(var(--ibc-ficha-largura) / 2);
min-width: min(300px, 100vw - 32px);
max-width: none;
height: calc(var(--ibc-ficha-altura) / 2);
}
/* Botões dos avisos à esquerda, com uma linha cinza discreta acima. */
.ibc-janela-aviso ~ .mud-dialog .mud-dialog-actions {
justify-content: flex-start;
gap: 8px;
margin: 0 24px;
padding: 12px 0 16px;
border-top: 1px solid var(--mud-palette-lines-default);
}
.ibc-janela-aviso ~ .mud-dialog .mud-dialog-actions > * {
margin: 0 !important;
}
/* A caixa de confirmação do MudBlazor põe Cancelar antes da ação; invertida,
a ação principal fica primeiro, como nos formulários. */
.ibc-janela-aviso ~ .mud-message-box .mud-dialog-actions {
flex-direction: row-reverse;
justify-content: flex-end;
}
.ibc-janela-aviso ~ .mud-dialog .mud-dialog-content {
flex: 1;
overflow-y: auto;
font-size: 1rem;
line-height: 1.5;
}
/* Foto de perfil: redonda no cabeçalho (32px, dentro dos 48px da barra) e no menu. */
/* Usuário logado no cabeçalho: nome + foto (ou ícone) num botão só. */
.ibc-usuario-botao {
display: flex;
align-items: center;
gap: 10px;
height: 40px;
margin-left: 4px;
padding: 0 4px 0 12px;
border: none;
border-radius: 20px;
background: transparent;
color: #FFFFFF;
font: inherit;
cursor: pointer;
transition: background-color .15s;
}
.ibc-usuario-botao:hover {
background-color: rgba(255, 255, 255, .12);
}
.ibc-usuario-botao:hover .ibc-avatar {
box-shadow: 0 0 0 2px var(--ibc-laranja);
}
.ibc-usuario-nome {
max-width: 220px;
overflow: hidden;
font-size: .95rem;
font-weight: 500;
white-space: nowrap;
text-overflow: ellipsis;
}
.ibc-avatar-icone {
font-size: 32px !important;
}
/* No celular não cabe: fica só a foto. */
@media (max-width: 600px) {
.ibc-usuario-nome {
display: none;
}
}
.ibc-avatar {
box-shadow: 0 0 0 2px var(--ibc-laranja);
}
.ibc-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
transition: box-shadow .15s;
}
.ibc-avatar-grande {
width: 44px;
height: 44px;
box-shadow: none;
}
.ibc-foto-perfil {
display: flex;
align-items: center;
gap: 28px;
height: 100%;
}
.ibc-foto-perfil-circulo {
display: grid;
flex: none;
place-items: center;
width: 160px;
height: 160px;
overflow: hidden;
border: 3px solid #FFFFFF;
border-radius: 50%;
background: linear-gradient(135deg, var(--ibc-azul) 0%, color-mix(in srgb, var(--ibc-azul) 82%, white) 100%);
box-shadow: 0 0 0 2px var(--ibc-laranja), 0 10px 24px -12px rgba(var(--ibc-azul-rgb), .6);
color: #FFFFFF;
font-size: 3.2rem;
font-weight: 600;
}
.ibc-foto-perfil-circulo img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Matriz de permissões do perfil: módulo à esquerda, Ver e Editar em colunas. */
.ibc-permissoes {
width: 100%;
border-collapse: collapse;
}
.ibc-permissoes th {
padding: 4px 8px;
font-size: .7rem;
font-weight: 600;
letter-spacing: .06em;
text-align: left;
text-transform: uppercase;
color: var(--mud-palette-text-secondary);
}
.ibc-permissoes th:not(:first-child),
.ibc-permissoes td:not(:first-child) {
width: 90px;
text-align: center;
}
.ibc-permissoes td {
padding: 4px 8px;
border-top: 1px solid var(--mud-palette-lines-default);
}
.ibc-permissoes td .mud-checkbox {
justify-content: center;
}
.ibc-chip-leitura {
color: var(--ibc-laranja) !important;
border-color: var(--ibc-laranja) !important;
}
/* ---------- Agenda ----------
Calendário próprio (o MudBlazor não tem visão de mês). Cores dos eventos vêm
da categoria pela variável --cor; fundos e textos derivam dela com color-mix. */
.ibc-agenda-barra {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
padding: 4px 8px;
}
.ibc-agenda-visao .mud-toggle-item {
min-width: 64px;
padding: 3px 14px;
font-weight: 600;
}
.ibc-agenda-navegacao {
display: flex;
align-items: center;
}
.ibc-agenda-periodo {
min-width: 200px;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -.01em;
text-align: center;
color: var(--ibc-azul);
}
.ibc-agenda {
display: grid;
grid-template-columns: minmax(0, 1fr) 290px;
gap: 12px;
align-items: start;
}
@media (max-width: 1100px) {
.ibc-agenda {
grid-template-columns: 1fr;
}
}
/* Sem "to": a animação termina na opacidade própria do elemento. Com "to { opacity: 1 }"
e fill-mode both, ela anulava o esmaecimento (busca, dias de outro mês, arraste). */
@keyframes ibc-agenda-surgir {
from { opacity: 0; transform: translateY(6px); }
}
/* Mês: a grade usa gap de 1px sobre fundo cinza, que vira a linha entre os dias. */
.ibc-mes {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
grid-template-rows: 30px repeat(6, minmax(96px, 1fr));
gap: 1px;
height: calc(100vh - 214px);
min-height: 640px;
overflow: hidden;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 8px;
background: #E8E6F0;
animation: ibc-agenda-surgir .3s ease-out both;
}
.ibc-mes-cabecalho {
display: grid;
place-items: center;
background: #F7F6FB;
font-size: .7rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mud-palette-text-secondary);
}
.ibc-dia {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
padding: 4px 6px;
overflow: hidden;
background: #FFFFFF;
transition: background-color .18s ease;
}
.ibc-dia-domingo {
background: color-mix(in srgb, var(--ibc-azul) 2%, white);
}
.ibc-dia-fora {
background: #F8F8FA;
}
.ibc-dia-fora .ibc-dia-numero {
color: #B8B5C8;
}
.ibc-dia-fora .ibc-evento {
opacity: .6;
}
.ibc-dia-editavel {
cursor: pointer;
}
.ibc-dia-editavel:hover {
background: #F5F3FC;
}
.ibc-dia-topo {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 26px;
}
.ibc-dia-numero {
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
font-size: .8rem;
font-weight: 600;
color: #3A3656;
}
.ibc-dia-hoje {
background: color-mix(in srgb, var(--ibc-laranja) 5%, white);
}
.ibc-dia-hoje .ibc-dia-numero {
background: var(--ibc-laranja);
box-shadow: 0 2px 8px -1px rgba(var(--ibc-laranja-rgb), .5);
color: #FFFFFF;
}
/* "+" que aparece ao passar o mouse no dia: convite para marcar um evento ali. */
.ibc-dia-novo {
display: grid;
place-items: center;
width: 24px;
height: 24px;
padding: 0;
border: 1px dashed rgba(var(--ibc-azul-rgb), .35);
border-radius: 50%;
background: #FFFFFF;
color: var(--ibc-azul);
cursor: pointer;
opacity: 0;
transform: scale(.7);
transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1), background-color .15s, color .15s;
}
.ibc-dia:hover .ibc-dia-novo {
opacity: 1;
transform: scale(1);
}
.ibc-dia-novo:hover {
border-style: solid;
background: var(--ibc-azul);
color: #FFFFFF;
}
.ibc-evento {
display: flex;
flex: none;
align-items: center;
gap: 4px;
height: 20px;
padding: 0 6px;
overflow: hidden;
border-left: 3px solid var(--cor);
border-radius: 5px;
background: color-mix(in srgb, var(--cor) 14%, #FFFFFF);
color: color-mix(in srgb, var(--cor) 72%, #000000);
font-size: .72rem;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
animation: ibc-agenda-surgir .28s ease-out both;
transition: transform .15s ease, box-shadow .15s ease, background-color .15s;
}
.ibc-evento:hover {
background: color-mix(in srgb, var(--cor) 24%, #FFFFFF);
box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--cor) 60%, transparent);
transform: translateY(-1px);
}
/* Eventos de vários dias: a faixa entra e sai pelas bordas da célula. */
.ibc-evento-continua {
margin-left: -6px;
padding-left: 9px;
border-left-width: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.ibc-evento-segue {
margin-right: -6px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.ibc-evento-hora {
flex: none;
font-weight: 700;
opacity: .85;
}
.ibc-evento-titulo {
overflow: hidden;
text-overflow: ellipsis;
}
.ibc-dia-mais {
align-self: flex-start;
padding: 0 4px;
border: none;
background: none;
font: inherit;
font-size: .7rem;
font-weight: 600;
color: var(--ibc-azul);
cursor: pointer;
}
.ibc-dia-mais:hover {
text-decoration: underline;
}
/* Ano: 12 minicalendários, com pontinhos nas cores dos eventos do dia. */
.ibc-ano {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
animation: ibc-agenda-surgir .3s ease-out both;
}
@media (max-width: 1500px) {
.ibc-ano { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
.ibc-ano { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ibc-ano-mes {
padding: 10px;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 8px;
background: #FFFFFF;
transition: box-shadow .2s ease, transform .2s ease;
}
.ibc-ano-mes:hover {
box-shadow: 0 8px 20px -12px rgba(var(--ibc-azul-rgb), .45);
transform: translateY(-2px);
}
.ibc-ano-titulo {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 6px;
padding: 2px 4px;
border: none;
border-radius: 6px;
background: none;
font: inherit;
font-size: .85rem;
font-weight: 700;
color: var(--ibc-azul);
cursor: pointer;
}
.ibc-ano-titulo:hover {
background: rgba(var(--ibc-azul-rgb), .06);
}
.ibc-ano-total {
min-width: 20px;
padding: 0 6px;
border-radius: 10px;
background: var(--ibc-laranja);
font-size: .68rem;
line-height: 18px;
color: #FFFFFF;
}
.ibc-ano-grade {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 2px;
text-align: center;
}
.ibc-ano-semana {
font-size: .62rem;
font-weight: 600;
color: var(--mud-palette-text-secondary);
}
.ibc-ano-dia {
position: relative;
aspect-ratio: 1;
padding: 0;
border: none;
border-radius: 6px;
background: none;
font: inherit;
font-size: .72rem;
color: #3A3656;
cursor: pointer;
transition: background-color .15s;
}
.ibc-ano-dia:hover {
background: rgba(var(--ibc-azul-rgb), .08);
}
.ibc-ano-com-evento {
font-weight: 700;
color: var(--ibc-azul);
}
.ibc-ano-hoje {
background: var(--ibc-laranja);
color: #FFFFFF;
}
.ibc-ano-hoje:hover {
background: var(--ibc-laranja);
}
.ibc-ano-pontos {
position: absolute;
bottom: 2px;
left: 50%;
display: flex;
gap: 2px;
transform: translateX(-50%);
}
.ibc-ano-pontos i {
width: 4px;
height: 4px;
border-radius: 50%;
}
.ibc-ano-hoje .ibc-ano-pontos i {
box-shadow: 0 0 0 1px #FFFFFF;
}
/* Painel lateral: próximos eventos e categorias (legenda que também filtra). */
.ibc-agenda-lateral {
display: flex;
flex-direction: column;
gap: 12px;
}
.ibc-agenda-painel {
padding: 10px 12px 12px;
}
.ibc-agenda-painel-titulo {
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--mud-palette-lines-default);
font-size: .72rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ibc-laranja);
}
.ibc-agenda-dica {
margin: -2px 0 6px;
font-size: .7rem;
color: var(--mud-palette-text-secondary);
}
.ibc-agenda-vazio {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px 0;
font-size: .8rem;
color: var(--mud-palette-text-secondary);
}
.ibc-proximo {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
width: 100%;
padding: 6px;
border: none;
border-radius: 8px;
background: none;
font: inherit;
text-align: left;
cursor: pointer;
transition: background-color .15s, transform .2s cubic-bezier(.2, .8, .2, 1);
}
.ibc-proximo:hover {
background: rgba(var(--ibc-azul-rgb), .05);
transform: translateX(2px);
}
.ibc-proximo-data {
display: flex;
flex: none;
flex-direction: column;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-left: 3px solid var(--cor);
border-radius: 6px;
background: color-mix(in srgb, var(--cor) 14%, #FFFFFF);
color: color-mix(in srgb, var(--cor) 72%, #000000);
line-height: 1.05;
}
.ibc-proximo-data b {
font-size: 1rem;
}
.ibc-proximo-data small {
font-size: .6rem;
font-weight: 600;
letter-spacing: .04em;
}
.ibc-proximo-barra {
flex: none;
align-self: stretch;
width: 4px;
border-radius: 2px;
background: var(--cor);
}
.ibc-proximo-texto {
display: flex;
flex-direction: column;
min-width: 0;
}
.ibc-proximo-titulo {
overflow: hidden;
font-size: .82rem;
font-weight: 600;
white-space: nowrap;
text-overflow: ellipsis;
color: #2A2548;
}
.ibc-proximo-detalhe {
overflow: hidden;
font-size: .72rem;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--mud-palette-text-secondary);
}
.ibc-dia-lista {
display: flex;
flex-direction: column;
gap: 2px;
}
.ibc-categoria {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
width: 100%;
padding: 5px 6px;
border: none;
border-radius: 6px;
background: none;
font: inherit;
font-size: .8rem;
text-align: left;
color: #2A2548;
cursor: pointer;
transition: background-color .15s, opacity .2s;
}
.ibc-categoria:hover {
background: rgba(var(--ibc-azul-rgb), .05);
}
.ibc-categoria i {
flex: none;
width: 12px;
height: 12px;
border: 2px solid var(--cor);
border-radius: 3px;
background: var(--cor);
transition: background-color .2s;
}
.ibc-categoria small {
margin-left: auto;
font-size: .7rem;
color: var(--mud-palette-text-secondary);
}
.ibc-categoria-oculta {
opacity: .5;
}
.ibc-categoria-oculta i {
background: transparent;
}
.ibc-categoria-opcao {
display: inline-flex;
align-items: center;
}
.ibc-categoria-opcao i {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 8px;
border-radius: 50%;
}
@media (prefers-reduced-motion: reduce) {
.ibc-mes, .ibc-ano, .ibc-evento {
animation: none;
}
}
/* Amostra da etiqueta de evento (grid e prévia de categorias). */
.ibc-evento-amostra {
display: inline-flex;
max-width: 260px;
cursor: default;
animation: none;
}
.ibc-evento-amostra:hover {
box-shadow: none;
transform: none;
}
.ibc-categoria-previa {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
}
.ibc-categoria-previa .ibc-evento {
width: 220px;
cursor: default;
}
/* Repetição de eventos: ícone na etiqueta, dias da semana e resumo da regra. */
/* Cadeado do evento privado: do tamanho do texto, antes do nome. */
.ibc-evento-privado {
display: inline-flex;
flex: none;
margin-right: 3px;
vertical-align: -1px;
opacity: .75;
}
.ibc-evento-privado .mud-icon-root {
font-size: .8rem;
}
.ibc-evento-repete {
flex: none;
font-size: .8rem !important;
opacity: .8;
}
.ibc-semana-escolha {
display: flex;
align-items: center;
gap: 6px;
font-size: .8rem;
color: var(--mud-palette-text-secondary);
}
.ibc-semana-dia {
display: grid;
place-items: center;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid rgba(var(--ibc-azul-rgb), .25);
border-radius: 50%;
background: #FFFFFF;
font: inherit;
font-size: .75rem;
font-weight: 600;
color: var(--ibc-azul);
cursor: pointer;
transition: background-color .15s, color .15s, transform .15s;
}
.ibc-semana-dia:hover:not(:disabled) {
transform: translateY(-1px);
}
.ibc-semana-dia.ativo {
border-color: var(--ibc-azul);
background: var(--ibc-azul);
color: #FFFFFF;
}
.ibc-semana-dia:disabled {
cursor: default;
}
.ibc-repeticao-resumo {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 14px;
background: rgba(var(--ibc-azul-rgb), .06);
font-size: .8rem;
color: var(--ibc-azul);
}
/* Arrastar eventos: a etiqueta "pega" mostra a mãozinha, fica esmaecida
enquanto é levada, e o dia de destino ganha contorno tracejado. */
.ibc-evento[draggable=true] {
cursor: grab;
}
.ibc-evento[draggable=true]:active {
cursor: grabbing;
}
.ibc-arrastando {
opacity: .45;
}
.ibc-dia.ibc-dia-alvo {
background: #EFEBFB;
box-shadow: inset 0 0 0 2px rgba(var(--ibc-azul-rgb), .45);
}
.ibc-cor-em-uso {
margin-left: 8px;
font-size: .72rem;
font-style: italic;
color: var(--mud-palette-text-secondary);
}
/* Busca da agenda: campo na barra, resultados passados esmaecidos, eventos que
não batem com a busca apagados no calendário e o encontrado piscando. */
.ibc-agenda-busca {
width: 260px;
}
/* Celular: a busca ocupa a linha inteira em vez de vazar para fora da tela. */
@media (max-width: 600px) {
.ibc-agenda-barra > div:first-child {
flex-wrap: wrap;
width: 100%;
}
.ibc-agenda-busca {
flex: 1 1 100%;
width: auto;
margin-left: 0 !important;
}
.ibc-agenda-periodo {
min-width: 0;
font-size: 1.05rem;
}
}
/* Visão Lista: um cartão por dia com evento, eventos em linhas largas e fáceis de tocar. */
.ibc-lista-agenda {
display: flex;
flex-direction: column;
gap: 8px;
}
.ibc-lista-dia {
overflow: hidden;
animation: ibc-agenda-surgir .25s ease-out both;
}
.ibc-lista-passado {
opacity: .7;
}
.ibc-lista-hoje {
border-color: var(--ibc-laranja) !important;
box-shadow: 0 0 0 1px var(--ibc-laranja);
}
.ibc-lista-dia-topo {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px 6px 12px;
border-bottom: 1px solid var(--mud-palette-lines-default);
background-color: rgba(var(--ibc-azul-rgb), .04);
}
.ibc-lista-dia-numero {
color: var(--ibc-azul);
font-size: 1.1rem;
font-weight: 700;
}
.ibc-lista-dia-nome {
color: var(--mud-palette-text-secondary);
font-size: .8rem;
}
.ibc-lista-dia-hoje {
padding: 1px 6px;
border-radius: 4px;
background-color: var(--ibc-laranja);
color: #fff;
font-size: .62rem;
font-weight: 700;
}
.ibc-lista-novo {
margin-left: auto;
opacity: 1;
}
.ibc-lista-dia-recolhido .ibc-lista-dia-topo {
border-bottom: none;
}
.ibc-lista-acoes {
display: flex;
justify-content: flex-end;
margin-bottom: -4px;
}
.ibc-lista-recolher {
display: grid;
place-items: center;
width: 24px;
height: 24px;
margin-left: -4px;
padding: 0;
border: none;
border-radius: 50%;
background: none;
color: var(--ibc-azul);
cursor: pointer;
}
.ibc-lista-recolher:hover {
background-color: rgba(var(--ibc-azul-rgb), .08);
}
.ibc-lista-resumo {
display: flex;
align-items: center;
gap: 4px;
margin-left: 8px;
padding: 0;
border: none;
background: none;
color: var(--mud-palette-text-secondary);
font: inherit;
font-size: .78rem;
cursor: pointer;
}
.ibc-lista-resumo i {
width: 8px;
height: 8px;
border-radius: 50%;
}
.ibc-lista-resumo span {
margin-left: 4px;
}
.ibc-lista-evento {
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 12px;
width: 100%;
padding: 10px 12px;
border: none;
border-left: 4px solid var(--cor);
border-bottom: 1px solid var(--mud-palette-lines-default);
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.ibc-lista-evento:last-child {
border-bottom: none;
}
.ibc-lista-evento:hover {
background-color: rgba(var(--ibc-laranja-rgb), .05);
}
.ibc-lista-hora {
flex: none;
width: 62px;
padding-top: 1px;
color: var(--ibc-azul);
font-size: .8rem;
font-weight: 600;
}
.ibc-lista-textos {
display: flex;
flex-direction: column;
min-width: 0;
}
.ibc-lista-titulo {
display: flex;
align-items: center;
gap: 4px;
font-size: .9rem;
font-weight: 600;
}
.ibc-lista-detalhe {
color: var(--mud-palette-text-secondary);
font-size: .78rem;
}
.ibc-proximo-passado {
opacity: .6;
}
.ibc-evento-apagado {
opacity: .18;
}
@keyframes ibc-evento-pulsar {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor) 55%, transparent); transform: scale(1); }
50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cor) 0%, transparent); transform: scale(1.04); }
}
.ibc-evento-destaque {
position: relative;
z-index: 1;
animation: ibc-evento-pulsar .85s ease-in-out 3;
}
/* Item do sino: o ícone diz o tipo da notificação (agenda, aniversário...). */
.ibc-notificacao {
display: flex;
align-items: center;
gap: 10px;
max-width: 340px;
}
.ibc-notificacao > span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Ações dos grids: editar (ou visualizar) no azul da marca, excluir no laranja da
marca. Desativados ficam no cinza do MudBlazor, para ler "indisponível". */
.ibc-acao-editar:not(:disabled) {
color: var(--ibc-azul);
}
.ibc-acao-excluir:not(:disabled) {
color: var(--ibc-laranja);
}
/* Histórico de alterações: linha do tempo na aba das fichas e lista compacta no grid. */
.ibc-historico {
margin: 0;
padding: 4px 0 0 18px;
list-style: none;
border-left: 2px solid var(--mud-palette-lines-default);
margin-left: 10px;
}
.ibc-historico-item {
position: relative;
padding: 0 0 14px 0;
}
.ibc-historico-item::before {
content: "";
position: absolute;
left: -24px;
top: 7px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--ibc-laranja);
box-shadow: 0 0 0 3px #fff;
}
.ibc-historico-cabecalho {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
font-size: .8125rem;
}
.ibc-historico-quando {
font-weight: 600;
color: var(--ibc-azul);
}
.ibc-historico-quem,
.ibc-historico-registro {
color: var(--mud-palette-text-secondary);
}
.ibc-historico-campos {
margin: 4px 0 0;
padding-left: 18px;
font-size: .8125rem;
line-height: 1.6;
}
.ibc-historico-campos-grid {
margin: 0;
padding-left: 14px;
}
.ibc-historico-campo {
margin-right: 4px;
color: var(--mud-palette-text-secondary);
}
.ibc-historico-antes {
color: var(--mud-palette-text-secondary);
text-decoration: line-through;
text-decoration-color: rgba(0, 0, 0, .25);
}
.ibc-historico-seta {
margin: 0 4px;
color: var(--ibc-laranja);
}
.ibc-historico-depois {
font-weight: 500;
}
/* Painel lateral do histórico nas fichas: desliza da direita por cima das abas. */
.ibc-ficha-corpo {
position: relative;
overflow: hidden;
}
.ibc-painel-historico {
position: absolute;
top: 8px;
right: 0;
bottom: 0;
z-index: 2;
display: flex;
flex-direction: column;
width: min(440px, 100%);
background-color: var(--mud-palette-surface);
border: 1px solid var(--ibc-laranja);
border-radius: 4px 0 0 4px;
box-shadow: -8px 0 24px rgba(var(--ibc-azul-rgb), .12);
transform: translateX(calc(100% + 32px));
visibility: hidden;
transition: transform .22s ease-out, visibility 0s linear .22s;
}
.ibc-painel-historico.aberto {
transform: none;
visibility: visible;
transition: transform .22s ease-out;
}
.ibc-painel-historico-topo {
display: flex;
align-items: center;
padding: 6px 8px 6px 16px;
border-bottom: 1px dashed var(--mud-palette-lines-default);
}
.ibc-painel-historico-conteudo {
flex: 1;
overflow-y: auto;
padding: 12px 16px 4px 8px;
}
/* Botão de alternância ligado (ex.: histórico aberto). */
.ibc-botao-ligado {
color: var(--ibc-laranja) !important;
background-color: rgba(var(--ibc-laranja-rgb), .1);
}
/* Botões com texto na barra das fichas (Desligar, Redefinir senha...): mesma cor
cinza dos ícones ao lado; os destrutivos mantêm a cor própria. */
.ibc-dialog-ficha .mud-toolbar .mud-button-text-default {
color: var(--mud-palette-action-default);
}
@media (prefers-reduced-motion: reduce) {
.ibc-painel-historico,
.ibc-painel-historico.aberto {
transition: none;
}
}
/* Contato: número que liga ao tocar e atalhos do WhatsApp (verde da marca WhatsApp). */
.ibc-link-telefone {
color: inherit;
text-decoration: none;
}
.ibc-link-telefone:hover {
color: var(--ibc-laranja);
text-decoration: underline;
}
.ibc-acao-whatsapp {
color: #25D366 !important;
}
.ibc-aniv-whatsapp {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: auto;
padding: 2px 10px 2px 8px;
border-radius: 999px;
background-color: #25D366;
color: #fff;
font-size: 12px;
font-weight: 600;
text-decoration: none;
transition: background-color .15s, transform .15s;
}
.ibc-aniv-whatsapp:hover {
background-color: #1DA851;
transform: translateY(-1px);
}
.ibc-aniv-whatsapp .mud-icon-root {
color: #fff;
}
/* Configurações da igreja: logos com prévia e a prévia da marca nas cores em edição. */
.ibc-config-logo {
display: flex;
gap: 12px;
align-items: flex-start;
}
.ibc-config-logo-caixa {
display: grid;
flex: none;
place-items: center;
width: 88px;
height: 88px;
padding: 8px;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 8px;
background: #fff;
}
.ibc-config-logo-caixa img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.ibc-config-logo-escura {
border-color: transparent;
}
.ibc-config-logo-info {
display: flex;
flex-direction: column;
gap: 2px;
font-size: .8125rem;
}
.ibc-config-logo-info span {
color: var(--mud-palette-text-secondary);
}
.ibc-previa-cabecalho {
display: flex;
align-items: center;
gap: 10px;
height: 48px;
padding: 0 14px;
border-radius: 6px 6px 0 0;
background-color: var(--previa-azul);
color: #fff;
overflow: hidden;
white-space: nowrap;
}
.ibc-previa-redes {
display: inline-flex;
flex: none;
align-items: center;
gap: 10px;
margin-left: auto;
color: #fff;
}
.ibc-previa-redes svg {
flex: none;
}
.ibc-previa-cabecalho img {
height: 28px;
}
.ibc-previa-nome {
font-size: 1.05rem;
font-weight: 500;
}
.ibc-previa-divisor {
width: 1px;
height: 1.1em;
background: currentColor;
opacity: .35;
}
.ibc-previa-sistema {
min-width: 0;
overflow: hidden;
font-size: 1.05rem;
white-space: nowrap;
text-overflow: ellipsis;
opacity: .95;
}
.ibc-previa-tela {
padding: 12px 14px 14px;
border: 1px solid var(--mud-palette-lines-default);
border-top: none;
border-radius: 0 0 6px 6px;
}
.ibc-previa-titulo {
padding-bottom: 4px;
border-bottom: 1px solid var(--mud-palette-lines-default);
color: var(--previa-laranja);
font-size: .8rem;
font-weight: 600;
letter-spacing: .08em;
}
.ibc-previa-botao {
padding: 4px 14px;
border-radius: 4px;
background-color: var(--previa-azul);
color: #fff;
font-size: .8rem;
font-weight: 500;
text-transform: uppercase;
}
.ibc-previa-chip {
padding: 1px 6px;
border-radius: 4px;
background-color: var(--previa-laranja);
color: #fff;
font-size: .65rem;
font-weight: 700;
}
.ibc-previa-relatorio {
margin-top: 4px;
padding: 12px 14px;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 6px;
background: #fff;
}
.ibc-previa-relatorio-topo {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 6px;
border-bottom: 2px solid var(--previa-laranja);
}
.ibc-previa-relatorio-topo img {
width: 30px;
height: 30px;
object-fit: contain;
}
.ibc-previa-relatorio-nome {
color: var(--previa-azul);
font-size: .95rem;
font-weight: 700;
}
.ibc-previa-relatorio-sub {
color: #6F6F6F;
font-size: .65rem;
}
.ibc-previa-relatorio-titulo {
margin-left: auto;
color: var(--previa-laranja);
font-size: .75rem;
font-weight: 700;
}
.ibc-previa-relatorio-rodape {
margin-top: 10px;
padding-top: 4px;
border-top: 1px solid #DDDDDD;
color: #6F6F6F;
font-size: .65rem;
}
/* Painel: indicadores numa faixa que se ajusta à largura (5 no computador, 1 a 2 no celular). */
.ibc-indicadores {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 8px;
}
/* Celular: dois por linha, mais enxutos. */
@media (max-width: 600px) {
.ibc-indicadores {
grid-template-columns: 1fr 1fr;
}
.ibc-indicadores .ibc-stat {
gap: 8px;
padding: 8px 10px;
}
.ibc-indicadores .ibc-stat-icone {
font-size: 1.4rem;
}
.ibc-indicadores .ibc-stat-seta {
display: none;
}
}
.ibc-stat-textos {
min-width: 0;
}
.ibc-stat-detalhe {
margin-top: 1px;
font-size: .72rem;
color: var(--mud-palette-text-secondary);
}
.ibc-stat-link {
color: inherit;
text-decoration: none;
transition: border-color .15s, box-shadow .15s;
}
.ibc-stat-link:hover {
border-color: var(--ibc-laranja);
box-shadow: 0 2px 8px rgba(var(--ibc-azul-rgb), .08);
}
.ibc-stat-seta {
margin-left: auto;
color: var(--mud-palette-text-disabled);
}
.ibc-stat-link:hover .ibc-stat-seta {
color: var(--ibc-laranja);
}
/* Pendências e agenda da semana: listas compactas e clicáveis. */
.ibc-pendencia,
.ibc-semana-evento {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--mud-palette-lines-default);
transition: background-color .15s;
}
.ibc-pendencia:last-child,
.ibc-semana-evento:last-of-type {
border-bottom: none;
}
.ibc-pendencia:hover,
.ibc-semana-evento:hover {
background-color: rgba(var(--ibc-laranja-rgb), .06);
}
.ibc-pendencia-icone {
color: var(--ibc-laranja);
}
.ibc-pendencia-texto {
flex: 1;
font-size: .85rem;
}
.ibc-pendencia-qtd {
min-width: 24px;
padding: 1px 8px;
border-radius: 999px;
background-color: rgba(var(--ibc-laranja-rgb), .12);
color: color-mix(in srgb, var(--ibc-laranja) 75%, black);
font-size: .75rem;
font-weight: 700;
text-align: center;
}
.ibc-pendencia-seta {
color: var(--mud-palette-text-disabled);
}
.ibc-pendencia-ok {
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
color: #1E6B3A;
font-size: .85rem;
}
.ibc-agenda-vazia {
color: var(--mud-palette-text-secondary);
}
.ibc-semana-data {
display: flex;
flex: none;
flex-direction: column;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-left: 3px solid;
border-radius: 4px;
background-color: rgba(var(--ibc-azul-rgb), .05);
line-height: 1.05;
}
.ibc-semana-data b {
color: var(--ibc-azul);
font-size: .95rem;
}
.ibc-semana-data small {
color: var(--mud-palette-text-secondary);
font-size: .62rem;
text-transform: uppercase;
}
.ibc-semana-textos {
display: flex;
flex-direction: column;
min-width: 0;
}
.ibc-semana-titulo {
overflow: hidden;
font-size: .85rem;
font-weight: 600;
white-space: nowrap;
text-overflow: ellipsis;
}
.ibc-semana-detalhe {
overflow: hidden;
color: var(--mud-palette-text-secondary);
font-size: .75rem;
white-space: nowrap;
text-overflow: ellipsis;
}
.ibc-semana-mais {
display: block;
padding: 8px 12px;
border-top: 1px solid var(--mud-palette-lines-default);
color: var(--ibc-azul);
font-size: .8rem;
font-weight: 600;
text-decoration: none;
}
.ibc-semana-mais:hover {
color: var(--ibc-laranja);
}
/* Grid de membros: miniatura da foto (ou iniciais) ao lado do nome. */
.ibc-membro-nome {
display: flex;
align-items: center;
gap: 10px;
}
.ibc-membro-avatar {
flex: none;
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 0 1px var(--mud-palette-lines-default);
}
.ibc-membro-iniciais {
display: inline-grid;
place-items: center;
background-color: rgba(var(--ibc-azul-rgb), .1);
color: var(--ibc-azul);
font-size: .65rem;
font-weight: 700;
letter-spacing: .02em;
box-shadow: none;
}
/* Ficha do membro: tabela de ministérios e cartões dos filhos. */
.ibc-tabela-ficha th {
font-size: .7rem !important;
text-transform: uppercase;
letter-spacing: .04em;
}
.ibc-tabela-ficha .mud-input-control {
margin-top: 0;
}
.ibc-ponto-ministerio {
display: inline-block;
width: 8px;
height: 8px;
margin-right: 8px;
border-radius: 50%;
background-color: var(--ibc-laranja);
}
.ibc-filhos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 8px;
}
.ibc-filho {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 6px;
}
.ibc-filho-dados {
min-width: 0;
}
.ibc-filho-nome {
overflow: hidden;
font-size: .85rem;
font-weight: 600;
white-space: nowrap;
text-overflow: ellipsis;
}
.ibc-filho-info {
font-size: .75rem;
color: var(--mud-palette-text-secondary);
}
/* Ministérios e cargos: lista simples com renomear e ativar. */
.ibc-lista-cadastro {
max-height: calc(100vh - 290px);
overflow-y: auto;
}
.ibc-lista-item {
display: flex;
align-items: center;
gap: 6px;
min-height: 42px;
padding: 0 4px 0 8px;
border-bottom: 1px solid var(--mud-palette-lines-default);
}
.ibc-lista-item:last-child {
border-bottom: none;
}
.ibc-lista-nome {
flex: 1;
font-size: .875rem;
}
.ibc-lista-item-inativo .ibc-lista-nome {
color: var(--mud-palette-text-secondary);
text-decoration: line-through;
}
.ibc-lista-qtd {
color: var(--mud-palette-text-secondary);
font-size: .75rem;
white-space: nowrap;
}
/* Centrais: cor na agenda (bolinha que abre a paleta) e a marca da igreja toda. */
.ibc-cor-central {
flex: none;
width: 18px;
height: 18px;
padding: 0;
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px var(--mud-palette-lines-default);
cursor: pointer;
}
.ibc-cor-central:disabled {
cursor: default;
}
.ibc-paleta {
display: grid;
grid-template-columns: repeat(5, 28px);
gap: 6px;
padding: 4px 12px 8px;
}
.ibc-paleta-cor {
position: relative;
width: 28px;
height: 28px;
padding: 0;
border: 2px solid #fff;
border-radius: 6px;
box-shadow: 0 0 0 1px var(--mud-palette-lines-default);
cursor: pointer;
}
.ibc-paleta-atual {
box-shadow: 0 0 0 2px var(--ibc-laranja);
}
.ibc-paleta-usada {
position: absolute;
right: 3px;
bottom: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
.ibc-tag-geral {
margin-left: 6px;
padding: 0 6px;
border-radius: 4px;
background-color: rgba(var(--ibc-azul-rgb), .1);
color: var(--ibc-azul);
font-size: .68rem;
font-weight: 600;
}
/* Endereço (membro e célula): duas linhas com larguras proporcionais, até a borda. */
.ibc-endereco {
display: flex;
flex-direction: column;
gap: 4px;
}
.ibc-endereco-linha {
display: flex;
align-items: flex-start;
gap: 4px;
}
.ibc-endereco-linha > div {
min-width: 0;
}
.ibc-endereco-cep { flex: 0 0 12.5%; }
.ibc-endereco-naosei { flex: none; display: flex; align-items: center; min-height: 40px; }
.ibc-endereco-logradouro { flex: 0 0 30%; }
.ibc-endereco-numero { flex: 0 0 8.3%; }
.ibc-endereco-complemento { flex: 1 1 0; }
.ibc-endereco-bairro { flex: 0 0 40%; }
.ibc-endereco-uf { flex: 0 0 14%; }
.ibc-endereco-municipio { flex: 1 1 0; }
.ibc-endereco .mud-input-control {
margin-top: 0;
}
/* Celular: um campo por linha. */
@media (max-width: 600px) {
.ibc-endereco-linha {
flex-wrap: wrap;
}
.ibc-endereco-linha > div {
flex: 1 1 100%;
}
}
/* Importação de membros: os três passos e as observações da prévia. */
.ibc-passo {
display: flex;
gap: 12px;
height: 100%;
font-size: .85rem;
}
.ibc-passo p {
margin: 4px 0 10px;
color: var(--mud-palette-text-secondary);
}
.ibc-passo-numero {
display: grid;
flex: none;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: var(--ibc-laranja);
color: #fff;
font-weight: 700;
}
.ibc-import-obs {
margin: 0;
padding-left: 16px;
font-size: .78rem;
color: color-mix(in srgb, var(--ibc-laranja) 70%, black);
}
.ibc-import-erro {
color: #C62828;
}
.ibc-import-dup {
color: var(--mud-palette-text-secondary);
}
/* Indicadores coloridos do painel: cada cartão tem o seu tom (--tom), suave e com o número na cor da marca. */
.ibc-stat-icone-caixa {
display: inline-flex;
flex: none;
}
.ibc-stat-tom .ibc-stat-icone {
color: var(--tom);
font-size: 1.5rem;
}
.ibc-stat-tom .ibc-stat-icone-caixa {
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: color-mix(in srgb, var(--tom) 13%, transparent);
}
.ibc-stat-tom.ibc-stat-link:hover {
border-color: var(--tom);
}
.ibc-stat-tom.ibc-stat-link:hover .ibc-stat-seta {
color: var(--tom);
}
/* Barra fina no topo e um leve degradê que some para baixo. */
.ibc-stat-tom {
border-top: 3px solid var(--tom);
background: linear-gradient(180deg, color-mix(in srgb, var(--tom) 8%, var(--mud-palette-surface)), var(--mud-palette-surface) 70%);
}
/* Aniversário das crianças: mesmo cartão dos membros, com avatar laranja para diferenciar. */
.ibc-aniv-crianca .ibc-aniv-avatar {
background-color: var(--ibc-laranja);
}
.ibc-aniv-pais {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* Redes sociais da igreja no cabeçalho (YouTube, Instagram): ícones oficiais em branco,
que acendem na cor oficial ao passar o mouse (a versão colorida fica por cima, invisível). */
.ibc-redes {
display: inline-flex;
align-items: center;
gap: 4px;
}
.ibc-redes a {
display: inline-grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
color: #fff;
transition: background-color .15s;
}
.ibc-redes a:hover,
.ibc-redes a:focus-visible {
background-color: rgba(255, 255, 255, .12);
}
.ibc-redes a > svg {
grid-area: 1 / 1;
transition: opacity .15s;
}
.ibc-redes a > svg + svg,
.ibc-redes a:hover > svg:first-child,
.ibc-redes a:focus-visible > svg:first-child {
opacity: 0;
}
.ibc-redes a:hover > svg + svg,
.ibc-redes a:focus-visible > svg + svg {
opacity: 1;
}
.ibc-redes-separador {
width: 1px;
height: 22px;
margin: 0 10px 0 8px;
background: rgba(255, 255, 255, .35);
}
/* Cabeçalho decorado (CabecalhoFundo): degradê do azul da marca para um tom mais claro à
direita e linhas fluindo por trás do conteúdo. */
/* O MudAppBar já é fixo (position: fixed): serve de referência para o fundo sem mudar isso. */
.ibc-cabecalho-decorado {
overflow: hidden;
background: linear-gradient(90deg, var(--ibc-azul) 0%, var(--ibc-azul) 45%,
color-mix(in srgb, var(--ibc-azul) 82%, white) 100%) !important;
}
/* Logo, títulos e ícones por cima das linhas. */
.ibc-cabecalho-decorado .mud-toolbar > :not(.ibc-cabecalho-fundo) {
position: relative;
z-index: 1;
}
.ibc-cabecalho-fundo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.ibc-onda-fio,
.ibc-onda-fio-claro {
fill: none;
stroke-width: 1.5;
vector-effect: non-scaling-stroke;
}
.ibc-onda-fio {
stroke: var(--ibc-laranja);
}
.ibc-onda-fio-claro {
stroke: rgba(255, 255, 255, .35);
}
/* ======================================================================
Celular e tablet
====================================================================== */
/* Tabelas viram cartões abaixo de 960px (Breakpoint.Sm). O "sem quebra de linha" do computador
alargava a tabela pelo conteúdo mais longo (alterações, permissões) e empurrava os valores para
fora da tela. No cartão o texto quebra; as células com listas (ibc-celula-bloco) põem o rótulo
em cima e o conteúdo embaixo, alinhado à esquerda. */
@media (max-width: 959.98px) {
.mud-table-dense.mud-sm-table .mud-table-cell {
white-space: normal;
overflow-wrap: anywhere;
gap: 12px;
}
.mud-sm-table .mud-table-cell.ibc-celula-bloco {
display: block;
text-align: left;
}
.mud-sm-table .mud-table-cell.ibc-celula-bloco::before {
display: block;
margin-bottom: 2px;
}
.mud-sm-table .ibc-celula-bloco .mud-chip {
margin: 2px 4px 2px 0 !important;
}
}
@media (max-width: 599.98px) {
/* Formulários de edição (DialogFicha) ocupam a tela inteira. */
.mud-dialog.mud-dialog-width-lg {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
margin: 0;
border-radius: 0;
}
:root {
--ibc-ficha-paineis: calc(100dvh - 215px);
}
/* Barra de registro (novo, recarregar, navegação, ações): quebra em vez de cortar. */
.ibc-dialog-ficha .mud-toolbar {
flex-wrap: wrap;
height: auto;
min-height: 40px;
row-gap: 2px;
}
.ibc-dialog-ficha .mud-toolbar .mud-typography-body2 {
white-space: nowrap;
}
/* Avisos e janelas pequenas: a regra de 1/4 da área vale no computador; no celular,
quase a largura toda e a altura do conteúdo. */
.ibc-janela-aviso ~ .mud-dialog {
width: calc(100vw - 24px);
min-width: 0;
height: auto;
max-height: calc(100dvh - 24px);
margin: 12px;
}
.ibc-janela-aviso ~ .mud-dialog .mud-dialog-content {
padding-left: 16px;
padding-right: 16px;
}
.ibc-janela-aviso ~ .mud-dialog .mud-dialog-actions {
margin: 0 16px;
flex-wrap: wrap;
}
/* Foto de perfil: foto em cima, texto e botões embaixo. */
.ibc-foto-perfil {
flex-direction: column;
align-items: stretch;
gap: 16px;
height: auto;
}
.ibc-foto-perfil-circulo {
width: 128px;
height: 128px;
align-self: center;
}
/* Centrais e cargos: nome, ações e chave numa linha; a contagem na linha de baixo. */
.ibc-lista-item {
flex-wrap: wrap;
padding-top: 4px;
padding-bottom: 4px;
}
.ibc-lista-qtd {
order: 10;
flex-basis: 100%;
padding-left: 24px;
}
.ibc-lista-item .mud-switch {
margin-right: 0;
}
}