/**
 * Arquivo: public/css/style.css
 * Descrição: Estilização global da aplicação, incluindo temas religiosos e componentes modernos.
 */

@import "tailwindcss";

/**
 * Definição de Variáveis de Tema (Cores da Paróquia e Padrão de Legibilidade)
 * 
 * DESIGN CHOICE:
 * Refinamos a paleta de cores para um visual mais "Premium", leve e acolhedor.
 * - Fundo: Creme Suave (#F5F1EA) inspirado em ambientes sacros.
 * - Primária: Marrom St. Francisco (#5A3E2B) remetendo ao hábito franciscano.
 * - Dourado: Suave (#C8A96A) para detalhes de nobreza e divindade.
 * - Texto: Marrom Escuro (#3B2A1F) para leitura confortável sem o peso do preto puro.
 * 
 * IDENTIDADE VISUAL:
 * A imagem do logo foi removida permanentemente para manter uma identidade textual limpa e institucional.
 * O cabeçalho agora utiliza uma identidade puramente textual, padronizada em todas as páginas,
 * baseada na tipografia elegante e na hierarquia visual da tela inicial.
 */
:root {
    /* Cores de Texto - Contraste Elegante */
    --text-primary: #3B2A1F;   /* Marrom Escuro Profundo */
    --text-secondary: #7A6A5A; /* Marrom Médio para textos de apoio */
    --text-muted: #8B5E3C;     /* Marrom Claro */

    /* Cores de Fundo */
    --bg-main: #F5F1EA; /* Creme Suave Acolhedor */
    --bg-card: #ffffff;

    /* Cores de Identidade (Inspiradas em São Francisco) */
    --primary: #5A3E2B;      /* Marrom Principal (Hábito) */
    --primary-dark: #3B2A1F; /* Marrom Escuro */
    --primary-light: #8B5E3C; /* Marrom Claro */
    --gold-soft: #C8A96A;    /* Dourado Suave Elegante */
    --beige-light: #F5F1EA;  /* Bege para detalhes */

    /* Bordas e Elementos de UI */
    --border: rgba(200, 169, 106, 0.2); /* Dourado muito sutil para bordas */
}

@theme {
    --color-brown-dark: #3B2A1F;
    --color-brown-medium: #5A3E2B;
    --color-brown-soft: #8B5E3C;
    --color-beige: #F5F1EA;
    --color-cream: #F5F1EA;
    --color-gold-soft: #C8A96A;
}

/**
 * Estilo do Fundo Principal: Elegante, Solene e Religioso.
 * DESIGN CHOICE: Usamos o tom #F5F1EA para um visual mais leve e sofisticado.
 */
.bg-church-home {
    background: #F5F1EA;
    background-attachment: fixed;
    position: relative;
}

.bg-church-home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("https://www.transparenttextures.com/patterns/paper-fibers.png");
    opacity: 0.3; /* Reduzido para maior leveza */
    pointer-events: none;
}

/**
 * Padrão de Legibilidade Global
 */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

p {
    color: var(--text-secondary);
}

.text-muted {
    color: var(--text-muted);
}

/**
 * Animações Suaves para Transições de Tela
 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.animate-slide-up {
    animation: slideUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
}

/**
 * Cards Institucionais: Design Premium e Leve.
 * DESIGN CHOICE: Sombras mais suaves e bordas elegantes.
 */
.church-card {
    background: var(--bg-card);
    border-radius: 2.5rem;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* Sombra suave e sofisticada */
    border: 1px solid var(--border);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--text-primary);
    position: relative;
}

.church-card:hover {
    transform: translateY(-8px);
    border-color: var(--gold-soft);
    box-shadow: 0 20px 40px rgba(90, 62, 43, 0.12);
}

.card-header {
    padding: 3rem 2rem;
    /* DESIGN CHOICE: Gradiente marrom elegante inspirado no hábito franciscano */
    background: linear-gradient(135deg, #5A3E2B, #8B5E3C);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 4px solid var(--gold-soft);
    position: relative;
}

.card-header::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid var(--gold-soft);
}

/**
 * Botões Modernos e Elegantes
 */
.btn-church {
    width: 100%;
    padding: 1.1rem 1.75rem;
    border-radius: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.8rem;
    position: relative;
    overflow: hidden;
    border: none;
}

.btn-church:active {
    transform: scale(0.96) translateY(1px);
}

/**
 * Efeito de Brilho Suave no Hover dos Botões
 */
.btn-church::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: 0.5s;
}

.btn-church:hover::after {
    left: 100%;
}

/**
 * Estilos Específicos de Botões por Categoria
 * DESIGN CHOICE: Padronização dos botões principais para harmonia visual.
 */
.btn-ejc, .btn-ecc {
    background: linear-gradient(135deg, #5A3E2B, #8B5E3C);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(90, 62, 43, 0.2);
}

.btn-ejc:hover, .btn-ecc:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(90, 62, 43, 0.3);
    filter: brightness(1.1);
}

/* DESIGN CHOICE: Botões secundários mais leves com borda dourada */
.btn-outline-ejc, .btn-outline-ecc {
    border: 1.5px solid var(--gold-soft);
    color: var(--primary);
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.btn-outline-ejc:hover, .btn-outline-ecc:hover {
    background: #FDFBF8;
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(200, 169, 106, 0.15);
}

/**
 * Botão Admin Premium (Dourado)
 */
.btn-admin {
    background: linear-gradient(135deg, var(--gold-soft), #d4af37);
    color: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 30px rgba(200, 169, 107, 0.3);
    padding: 1.25rem 2.5rem;
}

.btn-admin:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(200, 169, 107, 0.5);
    filter: brightness(1.05);
}

/**
 * Seção de Ações Rápidas (Topo do Painel)
 */
.acoes-rapidas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.btn-acao-rapida {
    background: #F5EBDD;
    color: #2E1F17;
    border: 1px solid #D9C2A3;
    padding: 0.75rem;
    border-radius: 1rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.3s ease;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.btn-acao-rapida:hover {
    background: #C8A96B;
    color: #F5EBDD;
    border-color: #F5EBDD;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.btn-acao-rapida i {
    width: 1.25rem;
    height: 1.25rem;
}

/**
 * Botão de Ação Principal (Estilo Card)
 * Usado nos painéis de coordenação para ações de destaque.
 * Proporciona um visual de "App Premium" com feedback visual rico.
 */
.btn-action-card {
    background: #ffffff;
    color: #2E1F17;
    border: 2px solid #D9C2A3;
    padding: 2.5rem 1.5rem;
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    text-align: center;
    cursor: pointer;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.btn-action-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: #C8A96B;
    box-shadow: 0 25px 50px rgba(139, 94, 60, 0.15);
    background: #FDFBF8;
}

.btn-action-card i {
    width: 3.5rem;
    height: 3.5rem;
    color: #8b5e3c;
    transition: all 0.4s ease;
}

.btn-action-card:hover i {
    transform: scale(1.2) rotate(5deg);
    color: #C8A96B;
}

.btn-action-card span {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2B1D17;
}

.btn-action-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(200, 169, 107, 0.05), transparent);
    transition: 0.6s;
}

.btn-action-card:hover::after {
    left: 100%;
}

/**
 * Estilização dos Mini-Cards de Inscritos (Estilo Ficha 3x4)
 * Otimizado para legibilidade e economia de espaço.
 */
.inscrito-mini-card {
    background: #FFFFFF; /* Fundo branco para máximo contraste */
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(46, 31, 23, 0.1);
    transition: all 0.3s ease;
    display: flex;
    height: 160px; /* Aumentado de 140px para 160px para comportar melhor as ações e informações sem cortes */
}

.inscrito-mini-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #C8A96B;
}

.foto-3x4-container {
    width: 110px; /* Levemente aumentado para melhor proporção */
    height: 160px; /* Acompanha a nova altura do card */
    flex-shrink: 0;
    background: #2E1F17;
    border-right: 2px solid #C8A96B;
    position: relative;
}

.foto-3x4 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-compacta {
    padding: 0.85rem 1rem; /* Aumentado o padding para dar mais respiro interno */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    overflow: visible; /* Garantir que sombras de botões e tooltips não sejam cortadas */
}

.nome-destaque {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #2E1F17; /* Texto escuro para leitura clara */
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

/* ===============================================================
   NOVOS ESTILOS PARA O CARD DE INSCRITO (PAINEL ADMIN)
   Foco em elegância, hierarquia visual e destaque no primeiro nome.
   =============================================================== */

.primeiro-nome-destaque {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #2E1F17;
    line-height: 1;
    margin-bottom: 0.1rem;
    text-transform: capitalize;
    letter-spacing: -0.01em;
}

.nome-completo-sub {
    font-size: 0.65rem;
    color: #8B5E3C;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.dado-linha {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #2E1F17; /* Contraste forte */
    font-size: 0.7rem;
    margin-bottom: 0.15rem;
}

.dado-linha i {
    color: #5C4033;
    opacity: 0.8;
}

.badge-compacto {
    position: absolute;
    bottom: 0.5rem;
    right: -0.5rem;
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem 0 0 0.5rem;
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: -2px 2px 5px rgba(0,0,0,0.2);
    z-index: 2;
}

/**
 * Estilos para Gerenciamento de Usuários
 */
.user-list-item {
    background: white;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(46, 31, 23, 0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.user-type-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 0.4rem;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
}

.type-admin { background: #C8A96B; color: #2E1F17; }
.type-ejc { background: #5C4033; color: #F5EBDD; }
.type-ecc { background: #2E1F17; color: #F5EBDD; }

/**
 * Status de Inscrição: Cores e Bordas
 */
.status-aprovado {
    background-color: #E6F4EA !important;
    border: 1px solid #2E7D32 !important;
}

.status-rejeitado {
    background-color: #FDECEA !important;
    border: 1px solid #C62828 !important;
}

.status-pendente {
    background-color: #FFFFFF !important;
    border: 1px solid rgba(46, 31, 23, 0.1) !important;
}

/**
 * Botões de Ação nos Cards de Inscritos
 * Ajustados para evitar cortes e melhorar o espaçamento.
 */
.acoes-container {
    display: flex;
    gap: 0.4rem; /* Espaçamento equilibrado entre ícones */
    flex-wrap: wrap; /* Permite quebra de linha em telas muito pequenas, evitando transbordamento */
    justify-content: flex-end;
    align-items: center;
}

.btn-card-acao {
    width: 30px; /* Aumentado levemente para melhor área de clique */
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-card-acao i {
    width: 15px; /* Ícones ligeiramente maiores para melhor visibilidade */
    height: 15px;
}

.btn-editar { background: #E3F2FD; color: #1976D2; }
.btn-editar:hover { background: #1976D2; color: white; }

.btn-ver { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
.btn-ver:hover { background: #166534; color: white; }

.btn-pdf { background: #F5EBDD; color: #5C4033; border: 1px solid #D9C2A3; }
.btn-pdf:hover { background: #5C4033; color: #F5EBDD; }

.btn-excluir { background: #FFEBEE; color: #D32F2F; }
.btn-excluir:hover { background: #D32F2F; color: white; }

.btn-aprovar { background: #E8F5E9; color: #2E7D32; }
.btn-aprovar:hover { background: #2E7D32; color: white; }

.btn-rejeitar { background: #FFF3E0; color: #EF6C00; }
.btn-rejeitar:hover { background: #EF6C00; color: white; }

/**
 * Estilização de Scrollbar Customizada para o Painel
 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #2E1F17;
}

::-webkit-scrollbar-thumb {
    background: #C8A96B;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #D9C2A3;
}

/**
 * Regras de Impressão para Relatórios
 * Como o layout de impressão foi organizado:
 * - Removemos o fundo escuro e gradientes para economizar tinta.
 * - Ocultamos elementos de interface (filtros, botões, overlays).
 * - Forçamos o conteúdo a ocupar 100% da largura do papel.
 * - Garantimos que as cores dos textos sejam pretas/escuras para legibilidade.
 */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .bg-church {
        background: white !important;
    }

    .print-container {
        box-shadow: none !important;
        border: 1px solid #eee !important;
        border-radius: 0 !important;
        width: 100% !important;
    }

    .print-header {
        margin-bottom: 2rem !important;
    }

    .print-header h1 {
        color: #2E1F17 !important;
        font-size: 24pt !important;
    }

    .print-footer {
        display: block !important;
        position: fixed;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #eee;
        padding-top: 10px;
    }

    table {
        width: 100% !important;
        page-break-inside: auto;
    }

    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    thead {
        display: table-header-group;
    }

    th {
        background-color: #f9f9f9 !important;
        color: #2E1F17 !important;
        border-bottom: 2px solid #C8A96B !important;
        -webkit-print-color-adjust: exact;
    }

    img {
        max-width: 50px !important;
    }
}

/**
 * Ajustes de Responsividade para Dispositivos Móveis
 */
@media (max-width: 640px) {
    .church-card {
        border-radius: 1.5rem;
    }
    .btn-church {
        padding: 0.9rem 1.2rem;
    }
}

/**
 * Temas Dinâmicos para Páginas de Login e Cadastro
 */
.theme-ejc {
    --primary: #5C4033;
    --primary-light: #F5EBDD;
    --primary-ring: rgba(92, 64, 51, 0.2);
}

.theme-ecc {
    --primary: #2E1F17;
    --primary-light: #F5EBDD;
    --primary-ring: rgba(46, 31, 23, 0.2);
}

.theme-admin {
    --primary: #C8A96B;
    --primary-light: #F5EBDD;
    --primary-ring: rgba(200, 169, 107, 0.2);
}

/**
 * Botão de Login/Cadastro Premium (Estilo App Bancário)
 * Design refinado com transições suaves, sombras profundas e feedback tátil.
 */
#submit-btn, .btn-premium {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
    color: #ffffff !important; /* Branco para máximo contraste no fundo escuro */
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.15em; /* Espaçamento elegante entre letras */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important; /* Transição suave estilo premium */
    box-shadow: 0 8px 20px rgba(90, 59, 46, 0.3) !important; /* Sombra suave inicial */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 1rem !important;
    padding: 1.1rem 2rem !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Efeito de Elevação e Brilho no Hover: Estilo Premium */
#submit-btn:hover:not(:disabled), .btn-premium:hover:not(:disabled) {
    transform: translateY(-4px) !important; /* Leve elevação para profundidade */
    box-shadow: 0 15px 35px rgba(90, 59, 46, 0.5) !important; /* Sombra mais profunda no hover */
    filter: brightness(1.15) !important; /* Brilho sutil para sensação de interatividade */
}

/* Feedback Tátil ao Clicar: Sensação de botão físico */
#submit-btn:active:not(:disabled), .btn-premium:active:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 15px rgba(200, 169, 107, 0.4) !important;
    transition: all 0.1s ease !important;
}

/* Efeito de brilho interno no hover */
#submit-btn::before, .btn-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: 0.6s;
}

#submit-btn:hover::before, .btn-premium:hover::before {
    left: 100%;
}

/* Estado de Loading e Desabilitado: Mantém a elegância mesmo em espera */
#submit-btn:disabled, .btn-premium:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    background: #9ca3af !important;
}

/* Estilização do Spinner de Loading: Ícone Lucide animado */
#submit-btn i.animate-spin, .btn-premium i.animate-spin {
    width: 1.25rem;
    height: 1.25rem;
}

/**
 * Estilização de Inputs, Selects e Textareas (UX Premium)
 * Design refinado com animações suaves, elevação no foco e glow elegante.
 */
label {
    color: var(--text-secondary) !important; /* Labels escuras para leitura clara */
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
    display: block;
    transition: color 0.3s ease;
}

input,
select,
textarea {
    color: var(--text-primary) !important; /* Texto escuro para leitura clara */
    background-color: var(--bg-card) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 0.85rem !important; /* Bordas arredondadas elegantes */
    font-weight: 500;
    padding: 0.85rem 1rem !important;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important; /* Transição suave premium */
    width: 100%;
    outline: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02); /* Sombra interna sutil */
}

input::placeholder,
textarea::placeholder {
    color: #9ca3af !important; /* Placeholder cinza médio */
    font-weight: 400;
    opacity: 0.7;
}

textarea {
    min-height: 100px;
    resize: vertical;
}

/* Efeito de Foco Premium: Glow elegante e leve elevação */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary) !important;
    background-color: #ffffff !important;
    transform: translateY(-1px); /* Leve elevação visual */
    box-shadow: 0 8px 20px rgba(139, 94, 60, 0.12), 0 0 0 4px rgba(139, 94, 60, 0.08) !important; /* Glow elegante marrom/dourado */
}

/* Animação suave para o label quando o input está em foco */
.space-y-2:focus-within label, 
.flex:focus-within label,
.grid:focus-within label {
    color: var(--primary) !important;
}

/**
 * Mensagens de Erro e Sucesso de Validação
 */
.error-message {
    background-color: #fee2e2 !important;
    color: #991b1b !important; /* Vermelho forte para erro */
    border: 1px solid #fecaca !important;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.success-message {
    background-color: #dcfce7 !important;
    color: #166534 !important; /* Verde forte para sucesso */
    border: 1px solid #bbf7d0 !important;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/**
 * Preview de Foto 3x4 Profissional
 */
.photo-3x4-preview-box {
    width: 150px; /* Proporção 3x4 (150x200) */
    height: 200px;
    background-color: #2E1F17;
    border: 3px solid #C8A96B;
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    margin: 0 auto;
}

.photo-3x4-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/**
 * Modal de Confirmação Elegante
 */
#modal-confirmacao {
    backdrop-filter: blur(8px);
    background-color: rgba(46, 31, 23, 0.7);
    z-index: 100;
}

.modal-content {
    background-color: #F5EBDD;
    border: 2px solid #C8A96B;
    border-radius: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    max-width: 400px;
    width: 90%;
    animation: modalSlideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
    background-color: #5C4033;
    color: #F5EBDD;
    padding: 1.5rem;
    text-align: center;
    border-bottom: 3px solid #C8A96B;
}

.modal-body {
    padding: 2rem;
    text-align: center;
    color: #2E1F17;
}

.modal-footer {
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    border-top: 1px solid rgba(92, 64, 51, 0.1);
}

/**
 * Estilos para a Página de Teste Supabase
 */
.test-success {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
    color: #166534;
}

.test-error {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #991b1b;
}

.test-info {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
    color: #1e40af;
}

#type-badge {
    background-color: var(--primary-light);
    color: var(--primary);
}

/**
 * Estilos para Diagnóstico de Upload
 */
#log-console {
    scrollbar-width: thin;
    scrollbar-color: #4b5563 #111827;
}

#log-console::-webkit-scrollbar {
    width: 6px;
}

#log-console::-webkit-scrollbar-track {
    background: #111827;
}

#log-console::-webkit-scrollbar-thumb {
    background-color: #4b5563;
    border-radius: 20px;
}

/**
 * Dashboard Admin: Cards de Métricas (Premium & Animado)
 */
.dashboard-card {
    background-color: var(--bg-card);
    color: var(--text-primary);
    padding: 1.75rem;
    border-radius: 1.75rem;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--gold-soft), var(--primary));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.dashboard-card:hover {
    transform: translateY(-10px);
    border-color: var(--gold-soft);
    box-shadow: 0 20px 50px rgba(139, 94, 60, 0.1);
}

.dashboard-card:hover::before {
    opacity: 1;
}

/* Títulos e Números dentro dos cards de métricas */
.dashboard-card div[id^="metric-"] {
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.dashboard-card span, 
.dashboard-card p {
    color: var(--text-secondary);
    font-weight: 600;
}

/**
 * Dashboard Admin: Seção de Últimos Cadastros (Premium)
 */
.ultimo-cadastro-card {
    background-color: var(--bg-card);
    color: var(--text-primary);
    padding: 1.25rem;
    border-radius: 1.5rem;
    border: 1px solid var(--border);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.ultimo-cadastro-card:hover {
    background: #ffffff;
    transform: translateY(-5px) scale(1.02);
    border-color: var(--gold-soft);
    box-shadow: 0 15px 35px rgba(139, 94, 60, 0.1);
}

/* Nomes e Detalhes nos cards de últimos cadastros */
.ultimo-cadastro-card h4 {
    color: var(--text-primary);
    font-weight: 700;
}

.ultimo-cadastro-card span {
    color: var(--text-secondary);
    font-weight: 600;
}

/**
 * Títulos das Seções do Dashboard
 */
.section-title {
    color: var(--text-primary);
    letter-spacing: 0.25em;
    font-weight: 700;
}

/**
 * Mensagens de Feedback de Sucesso (Contraste Aumentado)
 */
.success-message {
    background-color: #E6F4EA !important;
    color: #1B5E20 !important;
    border: 1px solid #2E7D32 !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

/**
 * Relatório de Inscritos: Estilos Específicos e Impressão
 */
@media print {
    body {
        background: white !important;
        padding: 0 !important;
    }
    
    .no-print {
        display: none !important;
    }
    
    .print-container {
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .print-header {
        color: black !important;
        margin-bottom: 2rem !important;
    }
    
    .print-header h1, 
    .print-header p {
        color: black !important;
        text-shadow: none !important;
    }
    
    .print-footer {
        display: block !important;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        padding: 1rem 0;
        border-top: 1px solid #eee;
    }
    
    table {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    
    th {
        background-color: #f3f4f6 !important;
        color: black !important;
        border-bottom: 2px solid #000 !important;
    }
    
    td {
        border-bottom: 1px solid #eee !important;
    }
    
    /* Evita quebras de linha dentro de registros */
    tr {
        page-break-inside: avoid;
    }
}

/* Estilos para os filtros do relatório */
#data-inicio, #data-fim {
    cursor: pointer;
}

#data-inicio:focus, #data-fim:focus {
    border-color: #C8A96B;
}

/* Ajuste de contraste para labels de filtros no relatório */
.filter-label-report {
    color: #C8A96B;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.2em;
}

/**
 * SEÇÃO: Modal de Confirmação "Apple UX"
 * Foco em animações fluidas, desfoque de fundo (glassmorphism) e feedback tátil.
 * 
 * COMO A ANIMAÇÃO FUNCIONA:
 * Utilizamos a animação 'appleModalEntry' que combina 'opacity' e 'scale'.
 * O modal começa levemente menor (0.85) e deslocado para baixo (20px),
 * e "estica" suavemente para sua posição final, criando o efeito de "slam" do iOS.
 * O fundo usa 'backdrop-filter: blur(12px)' para dar profundidade e foco.
 */

/* Overlay: Escurecimento com desfoque refinado (estilo iOS) */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: rgba(0, 0, 0, 0.6); /* Overlay suave para realçar o desfoque */
    backdrop-filter: blur(12px); /* Desfoque intenso para profundidade premium */
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Container do Modal: Animação de escala e fade estilo iPhone */
.modal-content {
    background-color: #FFFFFF; /* DESIGN CHOICE: Branco puro para leveza */
    max-width: 22rem;
    width: 100%;
    padding: 2.5rem;
    border-radius: 2.5rem;
    border: 1px solid var(--border);
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.15);
    text-align: center;
    position: relative;
    transform-origin: center;
}

/* Título Premium: Marrom Profundo */
.modal-title {
    font-size: 1.65rem;
    font-weight: 700;
    font-family: 'Cinzel', serif;
    color: var(--text-primary);
    margin-bottom: 0.85rem;
    letter-spacing: 0.02em;
}

/* Descrição: Marrom Suave */
.modal-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 2.25rem;
    font-weight: 400;
}

/* Botão de Confirmação: Estilo Premium com Loading */
.btn-modal-confirm {
    width: 100%;
    height: 3.5rem; /* Altura fixa para evitar pulos visuais durante o loading */
    background: linear-gradient(135deg, #5A3E2B, #8B5E3C);
    color: #FFFFFF;
    border-radius: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    box-shadow: 0 8px 20px rgba(90, 62, 43, 0.2);
}

/* Microinterações de Hover e Clique */
.btn-modal-confirm:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.1);
    box-shadow: 0 15px 30px rgba(90, 62, 43, 0.3);
}

.btn-modal-confirm:active:not(:disabled) {
    transform: scale(0.97);
}

/* Estado de desabilitado durante o envio */
.btn-modal-confirm:disabled {
    opacity: 0.8;
    cursor: wait;
    background: #9ca3af;
}

/* Botão de Cancelamento: Discreto e Elegante */
.btn-modal-cancel {
    width: 100%;
    padding: 1rem;
    background-color: transparent;
    color: var(--text-secondary);
    border: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 0.5rem;
}

.btn-modal-cancel:hover:not(:disabled) {
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* Animação de Entrada "Apple Style": Fade + Scale Suave */
@keyframes appleModalEntry {
    0% {
        opacity: 0;
        transform: scale(0.85) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-modal-entry {
    animation: appleModalEntry 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Spinner de Loading Refinado e Minimalista */
.spinner-premium {
    width: 1.25rem;
    height: 1.25rem;
    border: 2.5px solid rgba(43, 29, 23, 0.2);
    border-top-color: #2B1D17;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/**
 * Estilo para a Saudação Personalizada nos Painéis
 * Garante que o nome do usuário tenha destaque e elegância.
 */


/**
 * SEÇÃO: Campos de Formulário com Ícones (Correção de Sobreposição)
 * Estrutura que garante que o ícone fique fixo à esquerda e o texto comece após ele.
 */

/* Container do campo: Define o contexto de posicionamento para o ícone */
.input-group {
    position: relative;
    width: 100%;
}

/* O Input: Recebe padding-left generoso para evitar que o texto sobreponha o ícone */
.input-group input,
.input-group select {
    width: 100%;
    padding-left: 48px !important; /* Espaço garantido para o ícone (45px-48px) */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* O Ícone: Posicionado de forma absoluta e centralizado verticalmente */
.input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Garante que o clique passe para o input */
    color: #8B5E3C;
    opacity: 0.7;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Efeito no Focus: O ícone ganha destaque quando o usuário clica no campo */
.input-group input:focus + .input-icon,
.input-group input:focus ~ .input-icon,
.input-group:focus-within .input-icon {
    opacity: 1;
    color: #A47148;
    transform: translateY(-50%) scale(1.1);
}

/* Fundo da tela de login: Creme suave para conforto visual e redução de fadiga */
.login-body {
    background-color: var(--bg-main) !important; 
    background-image: url("https://www.transparenttextures.com/patterns/paper-fibers.png");
    background-blend-mode: multiply;
    min-height: 100vh;
}

/* Card de Login: Branco puro com sombra leve e bordas arredondadas generosas */
.login-card {
    background-color: #FFFFFF !important;
    border-radius: 2.5rem !important;
    box-shadow: 0 15px 35px rgba(90, 62, 43, 0.1) !important;
    border: 1px solid var(--border) !important;
}

/* Título de Login: Escuro forte para máximo contraste */
.login-title {
    color: var(--text-primary) !important;
    font-family: 'Cinzel', serif;
    font-size: 2.5rem !important;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* Labels dos campos: Escuro para leitura fácil (16px) */
.login-label {
    color: var(--text-primary) !important;
    font-size: 1rem !important; /* 16px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Inputs de Login: Fundo branco, texto escuro e borda visível */
.login-input {
    background-color: #FFFFFF !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border) !important;
    border-radius: 1.25rem !important;
    font-size: 1.125rem !important; /* ~18px para leitura confortável */
    padding: 1rem 1.25rem !important;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* Foco no Input: Borda marrom com glow elegante */
.login-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 5px rgba(90, 62, 43, 0.1) !important;
    transform: translateY(-1px);
}

/* Placeholder: Cinza escuro para ser legível mas discreto */
.login-input::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.6;
}

/* Botão de Login: Marrom médio com texto branco de alto contraste */
.login-button {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    font-size: 1.125rem !important; /* 18px */
    font-weight: 600 !important;
    padding: 1.25rem !important;
    border-radius: 1.25rem !important;
    transition: all 0.4s ease !important;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border: none !important;
}

/* Hover no Botão: Marrom mais claro para feedback visual */
.login-button:hover {
    background-color: var(--primary-light) !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(90, 62, 43, 0.3) !important;
}

/* Active no Botão: Leve escurecida para feedback tátil */
.login-button:active {
    filter: brightness(0.9);
    transform: translateY(-1px);
}

/* Ícones do Login: Cor marrom para manter a identidade da igreja */
.login-icon {
    color: var(--primary) !important;
}

/* Texto secundário: Cinza escuro para bom contraste */
.login-secondary-text {
    color: var(--text-secondary) !important;
    font-size: 1.125rem;
    font-weight: 400;
}

/**
 * SEÇÃO: Estilização da Foto na Ficha de Inscrição (Estilo 3x4)
 * O 'object-fit: contain' garante que a foto apareça completa na impressão,
 * sem cortar partes importantes como a cabeça do inscrito.
 * 
 * DIFERENÇA ENTRE COVER E CONTAIN:
 * - Cover: Preenche todo o espaço, mas pode cortar as bordas da imagem.
 * - Contain: Mostra a imagem inteira dentro do espaço, mantendo a proporção original.
 */
/**
 * Estilização da Foto do Inscrito (Padrão Documento 3x4)
 * 
 * 1. CENTRALIZAÇÃO COM FLEXBOX:
 *    - O uso de 'display: flex', 'align-items: center' e 'justify-content: center' 
 *      garante que a foto (ou o placeholder) fique perfeitamente centralizada,
 *      independente do tamanho original da imagem.
 * 
 * 2. OBJECT-FIT: COVER vs CONTAIN:
 *    - 'object-fit: contain': Mostra a imagem inteira dentro do espaço, mas pode deixar 
 *      bordas vazias (letterboxing) se a proporção da foto não for exatamente 3x4.
 *    - 'object-fit: cover': Preenche todo o container 120x160. Se a foto for mais larga 
 *      ou mais alta, ela é cortada nas bordas para manter o preenchimento total.
 * 
 * 3. POR QUE COVER É MELHOR:
 *    - Para uma ficha oficial, o preenchimento total do quadro passa uma aparência 
 *      muito mais profissional e uniforme (tipo documento), evitando que a foto 
 *      pareça "solta" ou pequena dentro do espaço reservado.
 */
.foto-inscrito {
  width: 120px;
  height: 160px;
  border: 2px solid #8B5E3C;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f5f5f5;
}

.foto-inscrito img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Ajuste para Impressão: Garante que a foto mantenha o preenchimento e centralização profissional */
@media print {
  .foto-inscrito {
    border: 2px solid #8B5E3C !important;
    background: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
  }
}

/**
 * IDENTIDADE VISUAL INSTITUCIONAL (TEXT-BASED) - REFINAMENTO DE HIERARQUIA
 * 
 * DESIGN CHOICE:
 * Reorganizamos a hierarquia visual para um visual mais "Premium" e equilibrado.
 * 
 * POR QUE OS TAMANHOS FORAM AJUSTADOS?
 * - O título principal foi reduzido para ser sofisticado sem ser "gritante".
 * - O subtítulo e a assinatura foram redimensionados para criar camadas de leitura.
 * - Isso evita a poluição visual e permite que cada elemento tenha seu "respiro".
 * 
 * REFINAMENTO DE ESPAÇAMENTO:
 * - Aumentamos o letter-spacing da assinatura para um ar de "selo de qualidade".
 * - Ajustamos as margens para que o conteúdo central pareça flutuar elegantemente.
 */

/* Título Principal da Home: Sofisticado e Equilibrado */
.hero-title-text {
    font-family: 'Playfair Display', serif;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--primary-dark); /* DESIGN CHOICE: Marrom Escuro Profundo */
    font-weight: 700;
}

/* Subtítulo: Discreto, Moderno e com Respiro Visual */
.hero-subtitle-text {
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.25em;
    font-weight: 400;
    color: var(--text-secondary); /* DESIGN CHOICE: Marrom Médio Elegante */
    text-transform: uppercase;
    opacity: 0.9;
}

/* Assinatura Visual (Paz e Bem): Leve e Elegante */
.hero-signature-text {
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.3em; /* Espaçamento amplo para elegância */
    font-style: italic;
    color: var(--primary); /* DESIGN CHOICE: Marrom St. Francisco */
}

/* Linhas Decorativas: Mais sutis para não competir com o texto */
.decorative-line-gold {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 169, 107, 0.3), transparent);
}

/**
 * FIM DA SEÇÃO DE IDENTIDADE TEXTUAL
 */