/**
 * Portal Tabernáculo de Deus (TDARUJA) – TD Jovens
 * Paleta: navbar e telas de login/troca de senha #01162F; fundo das páginas #001028; destaque #DB9535.
 */

:root {
    --azul-portal: #DB9535;
    --azul-portal-hover: #c4842d;
    --fundo: #001028;
    --texto: #ffffff;
    --fundo-card: rgba(219, 149, 53, 0.2);
    --destaque: #DB9535;
    --destaque-hover: #c4842d;
    --card-gradient-start: #DB9535;
    --card-gradient-end: #b87620;
    --card-inner: #ffffff;
    --borda: rgba(255, 255, 255, 0.15);
    --erro: #c0392b;
    --sucesso: #27ae60;
    --top-bar-bg: #01162F;
    --top-bar-text: #ffffff;
    --bottom-nav-bg: #01162F;
    --bottom-nav-text: rgba(255, 255, 255, 0.9);
    --bottom-nav-active: #ffffff;
}

/* Tema claro */
[data-theme="light"] {
    --fundo: #f0f2f5;
    --texto: #1c1e21;
    --borda: rgba(0, 0, 0, 0.1);
    --fundo-card: rgba(219, 149, 53, 0.15);
    --bottom-nav-bg: #01162F;
    --top-bar-bg: #01162F;
    --bottom-nav-text: rgba(255, 255, 255, 0.9);
    --bottom-nav-active: #ffffff;
}

[data-theme="light"] .card {
    background: rgba(219, 149, 53, 0.9);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(219, 149, 53, 0.35);
}

[data-theme="light"] .card .text {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

[data-theme="light"] .card .card-desc {
    color: rgba(255, 255, 255, 0.9);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .aviso-placeholder {
    color: rgba(0, 0, 0, 0.5);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--fundo);
    color: var(--texto);
    line-height: 1.5;
    min-height: 100vh;
}

a {
    color: var(--destaque);
    text-decoration: none;
}
a:hover {
    color: var(--destaque-hover);
    text-decoration: underline;
}

/* ---- Login e Troca de senha ---- */
.pagina-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
    background-color: #01162F;
}

.login-container {
    width: 100%;
    max-width: 400px;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.logo-login {
    max-width: 280px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.login-main {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 2rem;
}

.form-login .campo {
    margin-bottom: 1.25rem;
}

.form-login label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 500;
}

.form-login input[type="email"],
.form-login input[type="password"] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--borda);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto);
}
.form-login input:focus {
    outline: none;
    border-color: var(--destaque);
    box-shadow: 0 0 0 2px rgba(219, 149, 53, 0.3);
}

.form-login .btn {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

.msg-erro {
    background: rgba(192, 57, 43, 0.2);
    border: 1px solid var(--erro);
    color: #ffb3b3;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.msg-sucesso {
    background: rgba(39, 174, 96, 0.2);
    border: 1px solid var(--sucesso);
    color: #a8e6cf;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* ---- Botões ---- */
.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.btn:hover {
    text-decoration: none;
}

.btn-primario {
    background: var(--destaque);
    color: var(--texto);
}
.btn-primario:hover {
    background: var(--destaque-hover);
    color: var(--texto);
}

.btn-secundario {
    background: transparent;
    color: var(--destaque);
    border: 1px solid var(--destaque);
}
.btn-secundario:hover {
    background: rgba(219, 149, 53, 0.2);
    color: var(--texto);
}

.btn-saida {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--borda);
}
.btn-saida:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto);
}

.btn-pequeno {
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
}

/* ---- Barra superior (mobile) ---- */
.home-top-bar {
    background-color: #01162F;
    color: var(--top-bar-text);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    min-height: 52px;
    box-sizing: border-box;
}

.home-top-bar-esquerda {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    min-width: 0;
}

.home-top-bar-esquerda .logo-link {
    display: flex;
    align-items: center;
}

.nav-voltar {
    color: var(--top-bar-text);
    text-decoration: none;
    font-size: 0.95rem;
    white-space: nowrap;
    opacity: 0.95;
}

.nav-voltar:hover {
    color: #fff;
    text-decoration: none;
    opacity: 1;
}

.home-top-bar .logo-dashboard {
    max-height: 36px;
    width: auto;
    vertical-align: middle;
}

.home-top-bar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.home-top-bar .nav-administrar-label,
.home-top-bar .nav-administrar-link {
    color: rgba(255, 255, 255, 0.95);
}
.home-top-bar .nav-administrar-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

.home-top-bar .dashboard-nav .usuario-trigger-link,
.home-top-bar .dashboard-nav .usuario-header-link,
.home-top-bar .usuario-trigger-link,
.home-top-bar .usuario-header-link {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}
.home-top-bar .dashboard-nav .usuario-trigger-link:hover,
.home-top-bar .dashboard-nav .usuario-header-link:hover,
.home-top-bar .usuario-trigger-link:hover,
.home-top-bar .usuario-header-link:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
}
.home-top-bar .usuario-avatar {
    background: rgba(255, 255, 255, 0.3);
}

.home-theme-toggle {
    background: none;
    border: none;
    color: var(--top-bar-text);
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    font-size: 1.1rem;
    opacity: 0.9;
}
.home-theme-toggle:hover {
    opacity: 1;
}

/* Ícone de tema no desktop (igual ao mobile) */
.theme-toggle-icon {
    padding: 0.35rem 0.5rem;
    font-size: 1.1rem;
    min-width: auto;
}
.theme-toggle-icon:hover {
    opacity: 1;
}

/* ---- Bottom navigation (mobile) ---- */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bottom-nav-bg);
    border-top: 1px solid var(--borda);
    padding: 0.5rem 0;
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .bottom-nav {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.bottom-nav-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 480px;
    margin: 0 auto;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 1rem;
    color: var(--bottom-nav-text);
    text-decoration: none;
    font-size: 0.75rem;
    border-radius: 8px;
    transition: color 0.2s, opacity 0.2s;
    opacity: 0.85;
}

.bottom-nav-item:hover {
    color: #ffffff;
    text-decoration: none;
}

/* Item ativo: destaque visível (barra inferior + cor + peso) */
.bottom-nav-item.ativo {
    color: var(--bottom-nav-active);
    font-weight: 600;
    position: relative;
    opacity: 1;
}

.bottom-nav-item.ativo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: var(--bottom-nav-active);
    border-radius: 2px;
}

.bottom-nav-item .bn-icon {
    font-size: 1.35rem;
}

.bottom-nav-item .bn-icon .fa {
    color: inherit;
}

.bottom-nav-item .bn-item-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

/* Badge de mensagens não lidas (Chat) – navbar desktop e bottom nav */
.chat-unread-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.1rem;
    text-align: center;
    color: #fff;
    background: #c0392b;
    border-radius: 10px;
    box-sizing: border-box;
}
.chat-unread-badge[aria-hidden="true"] {
    display: none;
}
.bottom-nav .chat-unread-badge {
    top: -2px;
    right: 50%;
    transform: translate(50%, 0);
    margin-right: -18px;
}

/* Espaço para não ficar atrás do bottom nav */
.pagina-com-bottom-nav {
    padding-bottom: 70px;
}

/* ---- Página Eventos: calendário e próximos ---- */
.pagina-eventos .eventos-main {
    padding: 0 1rem 1.5rem;
}
.eventos-calendario-wrap {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.eventos-calendario-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.eventos-mes-ano {
    font-weight: 600;
    font-size: 1.1rem;
}
.eventos-nav-btn {
    padding: 0.4rem 0.75rem;
}
.eventos-calendario {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.eventos-calendario th,
.eventos-calendario td {
    padding: 0.4rem;
    text-align: center;
    border: 1px solid var(--borda);
}
.eventos-calendario th {
    background: rgba(0, 0, 0, 0.2);
    font-weight: 600;
}
.eventos-cal-dia-vazio {
    background: rgba(255, 255, 255, 0.03);
}
.eventos-cal-dia-num {
    display: inline-block;
}
.eventos-cal-dia-com-evento .eventos-cal-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--azul-portal);
    margin-left: 2px;
    vertical-align: middle;
}
.eventos-cal-dia-hoje {
    background: var(--azul-portal);
    color: #fff;
    font-weight: 600;
}
.eventos-cal-dia-hoje .eventos-cal-dot {
    background: #fff;
}
.eventos-proximos-titulo {
    font-size: 1.1rem;
    margin: 0 0 0.75rem 0;
}
.eventos-proximos-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
}
.eventos-proximos-scroll::-webkit-scrollbar {
    height: 6px;
}
.eventos-proximos-scroll::-webkit-scrollbar-thumb {
    background: var(--borda);
    border-radius: 3px;
}
.evento-card {
    flex: 0 0 420px;
    min-width: 420px;
    background: var(--fundo-card);
    border: 1px solid var(--borda);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    min-height: 200px;
}
.evento-card-arte {
    flex: 0 0 180px;
    width: 180px;
    min-height: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}
.evento-card-arte img {
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
    display: block;
}
.evento-card-arte-placeholder {
    width: 100%;
    height: 100%;
    min-height: 200px;
    background: rgba(0, 0, 0, 0.15);
}
.evento-card-conteudo {
    flex: 1;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
.evento-card-data {
    display: block;
    font-size: 0.85rem;
    color: var(--azul-portal);
    font-weight: 600;
    margin: 0;
}
.evento-card-titulo {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
    flex: 0 0 auto;
}
.evento-card-local,
.evento-card-endereco,
.evento-card-responsavel {
    margin: 0;
    font-size: 0.82rem;
    opacity: 0.9;
    line-height: 1.35;
}
.evento-card-acoes {
    margin-top: auto;
    padding-top: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.evento-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.8rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    transition: opacity 0.15s, background 0.15s;
}
.evento-card-btn:hover {
    opacity: 0.95;
}
.evento-card-btn-rota {
    background: rgba(255, 255, 255, 0.12);
    color: var(--texto);
    border: 1px solid var(--borda);
}
.evento-card-btn-lembrete {
    background: var(--azul-portal);
    color: #fff;
    border: 1px solid transparent;
}
.evento-card-btn-lembrete:hover {
    background: var(--azul-portal);
    filter: brightness(1.1);
}
.eventos-vazio {
    margin: 0;
    padding: 1rem;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .bottom-nav {
        display: block;
    }
    .home-top-bar {
        display: flex;
        min-height: 44px;
        padding: 0.5rem 0.75rem;
    }
    .home-top-bar .logo-dashboard {
        max-height: 32px;
    }
    .home-top-bar .header-usuario-admin,
    .home-top-bar .header-usuario-sair-desktop {
        display: none !important;
    }
    .home-top-bar .header-usuario-container {
        justify-content: flex-end;
    }
    .home-top-bar .home-theme-toggle {
        display: none;
    }
    .dashboard-header.dashboard-header-desktop {
        display: none;
    }
}

@media (min-width: 769px) {
    .home-top-bar {
        display: none;
    }
    .dashboard-header.dashboard-header-desktop {
        display: flex;
    }
    .dashboard-header-desktop .usuario-dropdown {
        display: none !important;
    }
    /* Desktop: exibir botão Administrar no header (no mobile fica só no dropdown) */
    .dashboard-header-desktop .header-usuario-admin {
        display: flex;
        align-items: center;
    }
}

/* ---- Dashboard ---- */
.pagina-dashboard,
.pagina-admin {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--borda);
    flex-wrap: wrap;
    gap: 1rem;
}

.dashboard-header.dashboard-header-desktop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: #01162F;
    min-height: 60px;
    box-sizing: border-box;
}

/* Menu superior desktop: Home, Chat, Eventos */
.dashboard-header-desktop .portal-top-links {
    flex: 1;
    justify-content: center;
    gap: 0.5rem;
}
.dashboard-header-desktop .portal-top-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    color: var(--texto);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: background 0.2s, color 0.2s;
}
.dashboard-header-desktop .portal-top-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto);
}
.dashboard-header-desktop .portal-top-link.ativo {
    background: var(--azul-portal);
    color: #fff;
}
.dashboard-header-desktop .portal-top-link .fa {
    font-size: 1.1rem;
}
.dashboard-header-desktop .portal-top-link-inner {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.dashboard-header-desktop .dashboard-nav-right {
    flex: 0 0 auto;
}

.logo-dashboard {
    max-height: 48px;
    width: auto;
}

.logo-link {
    display: inline-block;
}

.dashboard-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

/* Container: Administrar à esquerda, perfil e Sair à direita */
.header-usuario-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.nav-administrar {
    display: flex;
    align-items: center;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
}
.nav-administrar-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--texto);
    margin-right: 0.25rem;
}
.nav-administrar-link {
    font-size: 0.9rem;
    color: var(--texto);
    text-decoration: none;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
}
.nav-administrar-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto);
}

/* Menu do usuário no topo: link perfil (avatar + nome) + Sair */
.usuario-menu-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.usuario-trigger-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: transparent;
    border: 1px solid var(--borda);
    border-radius: 999px;
    color: var(--texto);
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.usuario-trigger-link:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}

.usuario-header-link {
    font-size: 0.9rem;
    color: var(--texto);
    text-decoration: none;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
}
.usuario-header-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto);
}
.usuario-header-sair {
    color: #f5a0a0;
}
.usuario-header-sair:hover {
    color: #ffb3b3;
    background: rgba(245, 160, 160, 0.12);
}

.usuario-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    max-width: 32px;
    max-height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--card-gradient-start), var(--card-gradient-end));
    color: var(--texto);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    overflow: hidden;
}
.usuario-avatar-foto {
    padding: 0;
    overflow: hidden;
}
.usuario-avatar-foto img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
}

.usuario-nome {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usuario-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.35rem;
    min-width: 160px;
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 101;
    padding: 0.35rem 0;
}
.usuario-dropdown.is-open {
    display: block;
}
.usuario-dropdown-item {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--texto);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s;
}
button.usuario-dropdown-item {
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}
.usuario-dropdown-item:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--texto);
}
body[data-theme="dark"] .usuario-dropdown-item:hover,
body:not([data-theme="light"]) .usuario-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--texto);
}
.usuario-dropdown-theme {
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Tema atual = dark → botão mostra "Light": fundo claro, letra cinza escura */
body[data-theme="dark"] .usuario-dropdown-theme,
body:not([data-theme="light"]) .usuario-dropdown-theme {
    background: #f0f2f5;
    color: #1c1e21;
}
body[data-theme="dark"] .usuario-dropdown-theme:hover,
body:not([data-theme="light"]) .usuario-dropdown-theme:hover {
    background: #e4e6eb;
    color: #1c1e21;
}
/* Tema atual = light → botão mostra "Dark": fundo escuro, letra clara */
body[data-theme="light"] .usuario-dropdown-theme {
    background: #313233;
    color: #ffffff;
}
body[data-theme="light"] .usuario-dropdown-theme:hover {
    background: #3d3f41;
    color: #ffffff;
}
.usuario-dropdown-theme-icon {
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.9;
}
.usuario-dropdown-sair {
    color: #f5a0a0;
}
.usuario-dropdown-sair:hover {
    color: #ffb3b3;
    background: rgba(245, 160, 160, 0.12);
}
.header-theme-toggle-hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.usuario-info {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.dashboard-main {
    flex: 1;
    padding: 2rem 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

/* Garantir espaço abaixo do navbar fixo + 50px de folga (sobrescreve o padding do .dashboard-main e .chat-lista-main) */
body.pagina-dashboard .dashboard-main {
    padding-top: 114px;
}
body.pagina-chat .chat-lista-main {
    padding: 114px 1.5rem 1rem 1.5rem;
}
body.pagina-admin .admin-main {
    padding-top: 114px;
}
@media (max-width: 768px) {
    body.pagina-dashboard .dashboard-main {
        padding-top: 102px;
    }
    body.pagina-chat .chat-lista-main {
        padding: 102px 1rem 1rem 1rem;
        max-width: 100%;
        box-sizing: border-box;
    }
    body.pagina-admin .admin-main {
        padding-top: 102px;
    }
}
@media (min-width: 769px) {
    body.pagina-dashboard .dashboard-main {
        padding-top: 130px;
    }
    body.pagina-chat .chat-lista-main {
        padding: 130px 1.5rem 1rem 1.5rem;
    }
    body.pagina-admin .admin-main {
        padding-top: 130px;
    }
}

.home-greeting {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1.25rem;
    color: var(--texto);
}

.home-content {
    padding-top: 0.5rem;
}

.home-numeros-section {
    margin-bottom: 1.5rem;
}

.home-numeros-titulo {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--texto);
}

.home-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 502px;
}

.card-stat {
    background: var(--fundo-card);
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    color: var(--texto);
}

.card-stat-icon {
    font-size: 1.75rem;
    color: var(--destaque);
    flex-shrink: 0;
}

.card-stat-icon .fa {
    color: inherit;
}

.card-stat-texto {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.card-stat-rotulo {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--texto);
    opacity: 0.95;
}

.card-stat-valor {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--texto);
}

@media (max-width: 480px) {
    .home-stats-grid {
        grid-template-columns: 1fr;
    }
}

.pagina-home .cards-grid {
    margin-bottom: 1.5rem;
}

.titulo-cards {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}

/* Card no tom de destaque #DB9535, ícone e texto brancos */
.card {
    background: rgba(219, 149, 53, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(219, 149, 53, 0.95);
    border-radius: 15px;
    padding: 20px;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(219, 149, 53, 0.35);
    display: flex;
    align-items: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.card-link {
    text-decoration: none;
    color: inherit;
}
.card-link:hover {
    text-decoration: none;
    color: inherit;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(219, 149, 53, 0.45);
}

.card .icon {
    margin-right: 12px;
    font-size: 1.5em;
    color: #ffffff;
    line-height: 1;
}
.card .icon .fa {
    color: inherit;
}

.card .text {
    flex: 1;
    color: #ffffff;
    font-size: 1.25em;
    font-weight: 600;
}

.card .card-desc {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85em;
    font-weight: 400;
    margin-top: 0.25rem;
}

.aviso-placeholder {
    margin-top: 2rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ---- Admin: usuários ---- */
.admin-main {
    flex: 1;
    padding: 2rem 1.5rem;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
}

.admin-main h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.form-container {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.form-container .campo {
    margin-bottom: 1rem;
}

.form-container label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 500;
}

.form-container .campo-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.form-container .campo-row .campo {
    flex: 1;
    min-width: 140px;
    margin-bottom: 0;
}

.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="password"],
.form-container input[type="tel"],
.form-container input[type="date"],
.form-container input[type="time"] {
    width: 100%;
    max-width: 400px;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--borda);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto);
}
.form-container input[type="date"],
.form-container input[type="time"] {
    color-scheme: dark;
}
.form-container textarea {
    width: 100%;
    max-width: 400px;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--borda);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto);
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
}
.form-container textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.form-container input[type="file"] {
    padding: 0.4rem 0;
    font-size: 0.95rem;
    color: var(--texto);
}
.form-container input:focus,
.form-container textarea:focus {
    outline: none;
    border-color: var(--destaque);
}

.campo-check label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.campo-check input {
    width: auto;
}

.botoes-form {
    margin-top: 1rem;
    display: flex;
    gap: 0.75rem;
}

.tabela-usuarios {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--borda);
    border-radius: 4px;
    overflow: hidden;
}

.tabela-usuarios th,
.tabela-usuarios td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--borda);
}

.tabela-usuarios th {
    background: rgba(0, 0, 0, 0.3);
    font-weight: 600;
}

.tabela-usuarios tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.tabela-usuarios .btn-editar {
    margin: 0;
}
.celula-acoes .form-acao-inline {
    display: inline;
}
.celula-acoes .form-acao-inline + .form-acao-inline,
.celula-acoes .form-acao-inline + .btn-disabled {
    margin-left: 0.5rem;
}
.tabela-usuarios .btn-resetar-senha {
    margin: 0;
}

/* Tabela eventos (admin): thumb da arte, botão excluir */
.tabela-eventos .tabela-evento-arte-thumb {
    display: block;
    object-fit: cover;
    border-radius: 4px;
}
.form-excluir-inline {
    display: inline;
    margin-left: 0.5rem;
}
.form-excluir-inline button {
    margin: 0;
}
.btn-perigo {
    background: var(--erro);
    color: #fff;
    border: none;
}
.btn-perigo:hover {
    background: #a52828;
    color: #fff;
}
.evento-arte-preview-wrap {
    margin-bottom: 0.5rem;
}
.evento-arte-preview-wrap .evento-arte-preview {
    display: block;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--borda);
}

.btn-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Botões de ação apenas ícones */
.celula-acoes .btn-acao-icon {
    padding: 0.4rem 0.5rem;
    min-width: 2rem;
}
.celula-acoes .btn-acao-icon .fa {
    margin: 0;
    font-size: 1rem;
}

.btn-editar {
    background: #16a34a;
    color: #fff;
    border: none;
}
.btn-editar:hover {
    background: #15803d;
    color: #fff;
}

.btn-resetar-senha {
    background: #eab308;
    color: #1c1917;
    border: none;
}
.btn-resetar-senha:hover {
    background: #ca8a04;
    color: #1c1917;
}
.btn-resetar-senha-disabled {
    background: #a16207;
    color: rgba(28, 25, 23, 0.6);
}

/* ---- Administrar: abas ---- */
.administrar-page .admin-tabs {
    display: flex;
    gap: 0;
    margin: 1.5rem 0 1rem;
    border-bottom: 1px solid var(--borda);
}

.administrar-page .admin-tab-link {
    padding: 0.75rem 1.25rem;
    color: var(--texto);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    opacity: 0.8;
}

.administrar-page .admin-tab-link:hover {
    opacity: 1;
}

.administrar-page .admin-tab-link.ativo {
    opacity: 1;
    border-bottom-color: var(--destaque);
    font-weight: 600;
}

.administrar-page .admin-tab-panel {
    display: none;
}

.administrar-page .admin-tab-panel.ativo {
    display: block;
}

/* Formulários em Administrar: mesmo estilo do input normal para todos os campos (descrição, data, horário, etc.) */
.administrar-page .form-container input[type="text"],
.administrar-page .form-container input[type="email"],
.administrar-page .form-container input[type="password"],
.administrar-page .form-container input[type="tel"],
.administrar-page .form-container input[type="date"],
.administrar-page .form-container input[type="time"],
.administrar-page .form-container select {
    width: 100%;
    max-width: 400px;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--borda);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--texto) !important;
}
.administrar-page .form-container select,
.administrar-page .form-container select option {
    background: rgba(30, 30, 32, 0.98) !important;
    background-color: rgba(30, 30, 32, 0.98) !important;
    color: var(--texto) !important;
}
.administrar-page .form-container input[type="date"],
.administrar-page .form-container input[type="time"] {
    color-scheme: dark;
}
.administrar-page .form-container textarea {
    width: 100%;
    max-width: 400px;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid var(--borda);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--texto) !important;
    resize: vertical;
    min-height: 80px;
}
/* Título e descrição do evento em largura total (col-12) */
.administrar-page .form-container .campo.col-12 input[type="text"],
.administrar-page .form-container .campo.col-12 textarea {
    max-width: 100%;
}
.administrar-page .form-container textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.administrar-page .form-container textarea:focus,
.administrar-page .form-container input:focus,
.administrar-page .form-container select:focus {
    outline: none;
    border-color: var(--destaque);
}
/* Força tema escuro em date/time (navegadores aplicam fundo branco por padrão) */
.administrar-page .form-container input[type="date"],
.administrar-page .form-container input[type="time"] {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--texto) !important;
}

.evento-local-select-wrap {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}
.evento-local-select-wrap select {
    flex: 1;
    min-width: 200px;
}

.administrar-page .evento-endereco-readonly-wrap input:disabled {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--texto);
    cursor: default;
}

/* Modal cadastrar novo local */
.administrar-page .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.administrar-page .modal-box {
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: 12px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.administrar-page .modal-titulo {
    margin: 0;
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
    border-bottom: 1px solid var(--borda);
}
.administrar-page .modal-body {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
}
.administrar-page .modal-body .campo {
    margin-bottom: 0.75rem;
}
.administrar-page .modal-body input[type="text"] {
    width: 100%;
    max-width: none;
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--texto) !important;
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}
.administrar-page .modal-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--borda);
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ---- Responsivo (mobile-first) ---- */
@media (max-width: 768px) {
    .dashboard-header {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }

    .logo-dashboard {
        max-height: 40px;
    }

    .usuario-nome {
        max-width: 100px;
    }

    .dashboard-main,
    .admin-main {
        padding: 1rem;
    }

    .titulo-cards {
        font-size: 1.25rem;
    }

    .cards-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .card-link {
        min-height: 0;
    }

    .form-container input[type="text"],
    .form-container input[type="email"],
    .form-container input[type="password"],
    .form-container input[type="tel"],
    .form-container input[type="date"],
    .form-container input[type="time"] {
        max-width: none;
    }
    .form-container textarea {
        max-width: none;
    }

    .tabela-usuarios {
        font-size: 0.9rem;
    }
    .tabela-usuarios th,
    .tabela-usuarios td {
        padding: 0.5rem 0.6rem;
    }
}

@media (max-width: 480px) {
    .usuario-nome {
        display: none;
    }
    .usuario-trigger-link {
        padding: 0.35rem;
    }
    .usuario-header-link {
        font-size: 0.85rem;
        padding: 0.3rem 0.4rem;
    }
}

/* ---- Página Configurações ---- */
.config-page .config-section {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.config-page .config-section h2 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}
.config-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}
.config-notificacoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
.config-status {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}
.config-status.ok {
    color: var(--sucesso);
}
.config-status.erro {
    color: #f5a0a0;
}

/* ---- Página Perfil ---- */
.perfil-page .perfil-section {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.perfil-page .perfil-section h2 {
    font-size: 1.15rem;
    margin-bottom: 1rem;
}
.perfil-foto-wrap {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    overflow: hidden;
}
.perfil-foto-preview,
.perfil-foto-placeholder {
    width: 120px;
    height: 120px;
    min-width: 120px;
    min-height: 120px;
    max-width: 120px;
    max-height: 120px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: 2px solid var(--borda);
    box-sizing: border-box;
}
.perfil-foto-preview {
    display: block;
}
.perfil-foto-placeholder {
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}
.perfil-page .campo {
    margin-bottom: 1.25rem;
}
.perfil-page .campo label {
    display: block;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.4rem;
}
/* Campos do perfil: mesmo tema escuro do restante do portal */
.perfil-page .form-perfil input[type="text"],
.perfil-page .form-perfil input[type="email"],
.perfil-page .form-perfil input[type="tel"],
.perfil-page .form-perfil input[type="date"],
.perfil-page .form-perfil select,
.perfil-page .form-perfil textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.perfil-page .form-perfil select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}
.perfil-page .form-perfil input[type="file"] {
    padding: 0.4rem 0;
    font-size: 0.95rem;
    color: var(--texto);
}
.perfil-page .form-perfil input:focus,
.perfil-page .form-perfil select:focus,
.perfil-page .form-perfil textarea:focus {
    outline: none;
    border-color: var(--destaque);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}
.perfil-page .form-perfil textarea {
    min-height: 100px;
    resize: vertical;
}

[data-theme="light"] .perfil-page .form-perfil input[type="text"],
[data-theme="light"] .perfil-page .form-perfil input[type="email"],
[data-theme="light"] .perfil-page .form-perfil input[type="tel"],
[data-theme="light"] .perfil-page .form-perfil input[type="date"],
[data-theme="light"] .perfil-page .form-perfil select,
[data-theme="light"] .perfil-page .form-perfil textarea {
    background: rgba(0, 0, 0, 0.06);
    color: var(--texto);
}

.perfil-page .campo:last-child {
    margin-bottom: 0;
}
.campo-cep {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.campo-cep input {
    max-width: 140px;
}
.perfil-cep-msg {
    font-size: 0.9rem;
    margin: -0.5rem 0 0.75rem 0;
}
.perfil-cep-msg.ok {
    color: var(--sucesso);
}
.perfil-cep-msg.erro {
    color: #f5a0a0;
}
.campo-inline {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.campo-inline .campo {
    flex: 1;
    min-width: 120px;
}
/* Datas no perfil: sempre empilhadas (nascimento em cima, batismo embaixo) para evitar sobreposição no mobile */
.perfil-datas {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.perfil-datas .campo {
    width: 100%;
}
.campo-uf input {
    max-width: 4em;
}
.perfil-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}
.perfil-alergias-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1rem;
}
.perfil-alergia-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.2s, border-color 0.2s;
}
.perfil-alergia-item:hover {
    background: rgba(255, 255, 255, 0.1);
}
.perfil-alergia-item.perfil-alergia-ativo {
    border-color: var(--primario, #4a90d9);
    background: rgba(74, 144, 217, 0.15);
}
.perfil-alergia-item input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}
.perfil-alergia-nome {
    font-weight: 500;
}
.perfil-alergia-status {
    font-size: 0.85rem;
    opacity: 0.9;
}
.perfil-alergia-item.perfil-alergia-ativo .perfil-alergia-status {
    color: var(--primario, #4a90d9);
    font-weight: 500;
}
/* Botão Salvar fixo no topo ao rolar (evidente e sempre acessível) */
.perfil-salvar-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0.75rem 0;
    margin: 0 0 1rem 0;
    background: var(--fundo);
    border-bottom: 1px solid var(--borda);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.perfil-salvar-sticky .btn-salvar-perfil {
    width: 100%;
    max-width: 280px;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    padding: 0.65rem 1.25rem;
    font-size: 1.05rem;
    font-weight: 600;
}
.perfil-actions {
    margin-top: 1.75rem;
    padding-top: 0.5rem;
}
.perfil-actions .btn-primario {
    border-radius: 8px;
    padding: 0.6rem 1.25rem;
    font-size: 1rem;
}
.perfil-page .msg-sucesso {
    color: var(--sucesso);
    margin-bottom: 1rem;
}

/* ---- Chat (comunicação interna) ---- */
.pagina-chat {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.chat-lista-main {
    flex: 1;
    padding: 1rem 1.5rem;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.chat-lista-titulo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.chat-lista-titulo-row h1 {
    font-size: 1.35rem;
    margin: 0;
}

.chat-btn-novo-grupo {
    flex-shrink: 0;
}

.chat-vazio {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

.chat-lista-conversas {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chat-conversa-item {
    display: block;
    position: relative;
    padding: 1rem 1.25rem;
    padding-right: 2.5rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--borda);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    color: var(--texto);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.chat-conversa-item:hover {
    background: rgba(219, 149, 53, 0.2);
    border-color: var(--destaque);
    color: var(--texto);
}

.chat-conversa-nome {
    display: block;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

.chat-conversa-preview {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-conversa-data {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.25rem;
}

.chat-conversa-nao-lidas {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
    color: #fff;
    background: var(--erro, #c0392b);
    border-radius: 999px;
}

.chat-lista-usuarios {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}

.chat-lista-usuarios li {
    padding: 0.35rem 0;
}

.campo-dica {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.25rem 0 0;
}

/* Tela da conversa (com menu global + bottom nav) */
.conversa-page .chat-conversa-wrap {
    padding-top: 114px;
    padding-bottom: 70px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

@media (max-width: 768px) {
    .conversa-page .chat-conversa-wrap {
        padding-top: 102px;
    }
}
@media (min-width: 769px) {
    .conversa-page .chat-conversa-wrap {
        padding-top: 130px;
    }
}

.conversa-page .chat-header-interno {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--borda);
    background: var(--fundo);
    flex-shrink: 0;
    min-height: 48px;
}

.chat-voltar {
    color: var(--destaque);
    text-decoration: none;
    font-size: 0.95rem;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.25rem 0;
}

.chat-titulo-conversa {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-header-menu-wrap {
    position: relative;
    flex-shrink: 0;
}

.chat-btn-menu {
    background: none;
    border: none;
    color: var(--texto);
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    border-radius: 6px;
    font-size: 1.2rem;
    line-height: 1;
}

.chat-btn-menu:hover {
    background: rgba(255, 255, 255, 0.1);
}

.chat-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    min-width: 180px;
    background: var(--card);
    border: 1px solid var(--borda);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 100;
    padding: 0.25rem 0;
}

.chat-menu-dropdown[hidden] {
    display: none !important;
}

.chat-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    color: var(--texto);
    cursor: pointer;
    font-size: 0.95rem;
}

.chat-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
}

.conversa-page .chat-container {
    max-height: calc(100vh - 240px);
}

.chat-mensagens {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    min-height: 200px;
}

.chat-mensagens-inner {
    min-height: 100%;
}

.chat-carregando,
.chat-vazio-thread,
.chat-erro {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin: 1rem 0;
}

.chat-bolha {
    max-width: 85%;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    word-wrap: break-word;
}

.chat-bolha-eu {
    margin-left: auto;
    background: linear-gradient(135deg, var(--card-gradient-start), var(--card-gradient-end));
    color: #fff;
}

.chat-bolha-eu .chat-bolha-autor {
    color: rgba(255, 255, 255, 0.95);
}

.chat-bolha-outro {
    margin-right: auto;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid var(--borda);
}

.chat-bolha-autor {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    color: var(--destaque);
}

.chat-bolha-texto {
    display: block;
}

.chat-bolha-hora {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.25rem;
}

.chat-form-envio {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid var(--borda);
    background: rgba(0, 0, 0, 0.15);
    align-items: flex-end;
}

.chat-form-envio textarea {
    flex: 1;
    min-height: 44px;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto);
    resize: none;
    font-family: inherit;
}

.chat-form-envio textarea:focus {
    outline: none;
    border-color: var(--destaque);
}

.chat-form-envio .btn {
    flex-shrink: 0;
}

/* Modal: adicionar pessoas ao grupo */
.chat-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.chat-modal-overlay[hidden] {
    display: none;
}
.chat-modal {
    background: var(--fundo-card);
    border: 1px solid var(--borda);
    border-radius: 12px;
    max-width: 420px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.chat-modal-titulo {
    margin: 0;
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
    border-bottom: 1px solid var(--borda);
}
.chat-modal-body {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
}
.chat-modal-carregando,
.chat-modal-vazio {
    margin: 0;
    color: var(--texto);
    opacity: 0.9;
}
.chat-modal-lista-wrap {
    margin: 0;
}
.chat-modal-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}
.chat-modal-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--borda);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}
.chat-modal-btn-fechar {
    margin-right: auto;
}

.chat-banner-permissao-negada {
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    border: 1px solid var(--borda);
}
.chat-banner-permissao-negada a {
    color: var(--link);
}
.chat-banner-permissao-negada .btn {
    margin-top: 0.25rem;
}

@media (max-width: 768px) {
    .chat-lista-main {
        padding: 1rem;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    .chat-lista-titulo-row {
        gap: 0.5rem;
    }
    .chat-lista-titulo-row h1 {
        font-size: 1.2rem;
    }
    .chat-conversa-item {
        padding: 0.875rem 1rem;
    }
    .chat-bolha {
        max-width: 92%;
    }
    .chat-form-envio {
        flex-wrap: wrap;
    }
    .chat-form-envio .btn {
        width: 100%;
    }
}

/* Devocional (versículo do dia) */
.pagina-devocional .devocional-main {
    padding-bottom: 5rem;
}

.devocional-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.devocional-titulo-icon {
    font-size: 1.25em;
    color: var(--destaque);
}

.devocional-titulo-icon .fa {
    color: inherit;
}

.devocional-card {
    background: var(--fundo-card);
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--texto);
}

.devocional-card-titulo {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--texto);
    opacity: 0.95;
}

.devocional-referencia {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--destaque);
    margin: 0 0 0.75rem;
}

.devocional-versiculo {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    border: none;
    color: var(--texto);
}

.devocional-erro {
    margin: 0;
    color: var(--texto);
    opacity: 0.9;
}

.devocional-reflexao-wrap {
    color: var(--texto);
}

.devocional-reflexao-titulo {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--texto);
    opacity: 0.95;
}

.devocional-reflexao-texto {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    opacity: 0.9;
}