/* ============================================================================
 * style.css — Estilos globais do site Eventos Cognitus
 * ============================================================================
 * Convenções:
 *   - Tokens de design em :root (paleta, sombras, raios)
 *   - Classes utilitárias prefixadas (.bg-primaria, .btn-primaria, .text-evt …)
 *   - Componentes específicos de página vão no <style> da própria página
 * ============================================================================ */

:root {
    /* Paleta */
    --cor-primaria:       #F76B1C;
    --cor-primaria-hover: #E55A0F;
    --cor-primaria-soft:  #fff1e6;

    --cor-secundaria:       #025259;
    --cor-secundaria-hover: #036970;
    --cor-secundaria-soft:  #e3eff0;

    --cor-texto:      #1f2937;
    --cor-texto-mute: #6b7280;
    --bg-base:        #fafbfc;
    --border-soft:    #e5e7eb;

    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 1px 3px 0 rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

/* ----- Base ----- */
* { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body { background: var(--bg-base); color: var(--cor-texto); }

.fs-7 { font-size: 0.85em; }

/* ----- Helpers de cor ----- */
.bg-primaria       { background-color: var(--cor-primaria) !important; color: #fff; }
.text-primaria     { color: var(--cor-primaria) !important; }
.bg-primaria-soft  { background-color: var(--cor-primaria-soft) !important; }

.bg-secundaria       { background-color: var(--cor-secundaria) !important; color: #fff; }
.text-secundaria     { color: var(--cor-secundaria) !important; }
.bg-secundaria-soft  { background-color: var(--cor-secundaria-soft) !important; }

/* Aliases legados — apontam para secundária pra compatibilidade */
.bg-evt   { background-color: var(--cor-secundaria) !important; }
.text-evt { color: var(--cor-secundaria) !important; }

/* ----- Botões ----- */
.btn-primaria {
    background-color: var(--cor-primaria); color: #fff; border: 0;
    border-radius: 999px; padding: 0.6rem 1.4rem; font-weight: 600;
    transition: all .2s ease;
}
.btn-primaria:hover {
    background-color: var(--cor-primaria-hover); color: #fff;
    transform: translateY(-1px); box-shadow: var(--shadow-md);
}

.btn-secundaria {
    background-color: var(--cor-secundaria); color: #fff; border: 0;
    border-radius: 999px; padding: 0.6rem 1.4rem; font-weight: 600;
    transition: all .2s ease;
}
.btn-secundaria:hover {
    background-color: var(--cor-secundaria-hover); color: #fff;
    transform: translateY(-1px); box-shadow: var(--shadow-md);
}

.btn-evt {
    background-color: var(--cor-secundaria); color: #fff; border: 0;
    border-radius: 999px; padding: 0.6rem 1.4rem; font-weight: 600;
}
.btn-evt:hover { background-color: var(--cor-secundaria-hover); color: #fff; }

/* ----- Cards modernos ----- */
.card { border-radius: var(--radius-md); border-color: var(--border-soft); }
.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.card.card-hover { transition: transform .25s ease, box-shadow .25s ease; }
.card.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg) !important; }

/* ----- Inputs ----- */
.form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--border-soft); }
.form-control:focus, .form-select:focus {
    border-color: var(--cor-secundaria);
    box-shadow: 0 0 0 .2rem rgba(2, 82, 89, 0.15);
}

/* ----- Header ----- */
header.site-header {
    background: var(--cor-secundaria);
    box-shadow: var(--shadow-sm);
}
header.site-header .navbar-brand img { transition: transform .2s ease; }
header.site-header .navbar-brand:hover img { transform: scale(1.03); }
header.site-header .nav-link {
    color: rgba(255,255,255,0.85) !important;
    font-weight: 500;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    transition: all .2s ease;
}
header.site-header .nav-link:hover,
header.site-header .nav-link.active {
    color: #fff !important;
    background: rgba(255,255,255,0.12);
}

/* ----- Breadcrumb claro em fundo escuro ----- */
.bg-secundaria .breadcrumb,
.bg-evt .breadcrumb {
    --bs-breadcrumb-divider-color: rgba(255,255,255,0.55);
}
.bg-secundaria .breadcrumb-item + .breadcrumb-item::before,
.bg-evt .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.55); }

/* ----- Parsley (validação) ----- */
input.parsley-error,
select.parsley-error,
textarea.parsley-error {
    color: #B94A48; background-color: #F2DEDE; border: 1px solid #EED3D7;
}
.parsley-errors-list {
    margin: 2px 0 3px; padding: 0; list-style-type: none;
    font-size: 0.9em; line-height: 0.9em; color: #B94A48;
    opacity: 0; transition: all .3s ease-in;
}
.parsley-errors-list.filled { opacity: 1; }

/* ----- Footer ----- */
footer.site-footer {
    background: var(--cor-secundaria);
    color: rgba(255,255,255,0.85);
}
footer.site-footer a.link-light:hover { color: var(--cor-primaria) !important; }

/* =============================================================================
 * AUTH PAGES (login, criar-conta, esqueceu-senha, redefinir_senha, aguardando)
 * ============================================================================= */
.auth-wrap {
    min-height: calc(100vh - 95px);
    display: flex; align-items: center; justify-content: center;
    padding: 3rem 1rem;
    position: relative;
    background:
        radial-gradient(ellipse at top right, rgba(247,107,28,0.08), transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(2,82,89,0.06), transparent 55%),
        #fafbfc;
}
.auth-wrap::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(2,82,89,.04) 1px, transparent 0);
    background-size: 32px 32px;
    pointer-events: none;
}
.auth-card {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 2.25rem;
    width: 100%; max-width: 440px;
    position: relative; z-index: 1;
    animation: authIn .35s ease-out;
}
@keyframes authIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.auth-icon {
    width: 64px; height: 64px;
    background: var(--cor-primaria-soft);
    color: var(--cor-primaria);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 1.25rem;
}
.auth-title {
    font-size: 1.5rem; font-weight: 700;
    color: var(--cor-secundaria);
    text-align: center; margin-bottom: .4rem;
}
.auth-sub {
    text-align: center; color: var(--cor-texto-mute);
    margin-bottom: 2rem; font-size: .92rem;
}
.auth-field { margin-bottom: 1rem; }
.auth-field label {
    font-size: .8rem; font-weight: 600;
    color: var(--cor-texto); margin-bottom: .35rem;
    display: block;
}
.auth-input-group { position: relative; }
.auth-input-group .input-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--cor-texto-mute); font-size: 1rem; pointer-events: none;
}
.auth-input-group .form-control {
    padding-left: 42px;
    padding-top: .75rem; padding-bottom: .75rem;
    font-size: .95rem;
    border-radius: var(--radius-md);
}
.auth-input-group .toggle-pwd {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: var(--cor-texto-mute); cursor: pointer;
    background: none; border: 0; padding: 0; font-size: 1rem;
}
.auth-input-group .toggle-pwd:hover { color: var(--cor-secundaria); }
.auth-turnstile {
    display: flex; justify-content: center;
    margin: 1.25rem 0 1rem;
}
.auth-submit { width: 100%; padding: .85rem 1rem; font-size: 1rem; }
.auth-submit:disabled {
    background: #cbd5e1 !important;
    color: #fff !important;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}
.auth-links {
    text-align: center; margin-top: 1.25rem;
    font-size: .9rem; color: var(--cor-texto-mute);
}
.auth-links a {
    color: var(--cor-secundaria);
    text-decoration: none; font-weight: 600;
}
.auth-links a:hover { color: var(--cor-primaria); }
.auth-divider {
    display: flex; align-items: center; gap: 1rem;
    margin: 1.5rem 0; color: var(--cor-texto-mute); font-size: .8rem;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px;
    background: var(--border-soft);
}

/* =============================================================================
 * EVENT AREA (congresso/<id>-<slug>/area, area/submeter, area/trabalho, area/avaliar)
 * Páginas internas do evento — usa cor configurada pelo organizador.
 *
 * IMPORTANTE: cada página deve injetar a cor do evento via custom property:
 *   <main class="ae-page" style="--evt-cor: <?= $cor ?>; --evt-cor-rgb: 230,57,70;">
 * (--evt-cor-rgb é usado para versões com alpha)
 *
 * Fallback: cor secundária do site se a variável não estiver definida.
 * ============================================================================= */
.ae-page {
    background: var(--bg-base);
    min-height: 70vh;
}

/* Header colorido — usa cor do evento */
.ae-header {
    background: var(--evt-cor, var(--cor-secundaria));
    color: #fff;
    padding: 2rem 0 1.5rem;
    box-shadow: var(--shadow-sm);
}
.ae-header h2,
.ae-header h4 { color: #fff; font-weight: 700; }
.ae-header a.text-white:hover { opacity: 0.85; }

/* Card branco (conteúdo) — neutro, igual em todo o site */
.ae-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-soft);
}
.ae-card > h5,
.ae-card > h6 { color: var(--cor-secundaria); font-weight: 700; }

/* Cor "tema" da página — usa cor do evento */
.ae-tema { color: var(--evt-cor, var(--cor-secundaria)) !important; }

/* Botão "tema" — usa cor do evento */
.btn-evt-tema {
    background: var(--evt-cor, var(--cor-secundaria));
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .6rem 1.4rem;
    font-weight: 600;
    transition: all .2s ease;
}
.btn-evt-tema:hover {
    background: var(--evt-cor, var(--cor-secundaria));
    color: #fff;
    filter: brightness(0.92);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Item clicável (acao card) — usado em listas dentro de cards */
.ae-acao-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.25rem; margin-bottom: 0.75rem;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--cor-texto);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ae-acao-card:hover {
    border-color: var(--evt-cor, var(--cor-secundaria));
    color: var(--cor-texto);
    transform: translateX(2px);
    box-shadow: var(--shadow-sm);
}

/* Ícone circular */
.ae-icone {
    width: 48px; height: 48px;
    background: var(--evt-cor, var(--cor-secundaria));
    color: #fff;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0;
}
.ae-icone.soft {
    background: var(--cor-secundaria-soft);
    color: var(--evt-cor, var(--cor-secundaria));
}
.ae-icone.primaria {
    background: var(--cor-primaria-soft);
    color: var(--cor-primaria);
}

/* Linha de co-autor (form de submissão) */
.ae-coautor-row {
    background: #fafbfc;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 1rem; margin-bottom: 0.75rem;
    position: relative;
}
.ae-coautor-row .btn-remover {
    position: absolute; top: 0.5rem; right: 0.5rem;
}

/* Contador de caracteres/palavras */
.ae-contador { font-size: 0.85rem; color: var(--cor-texto-mute); }
.ae-contador.excedeu { color: #dc3545; font-weight: bold; }