
/* =========================================================
   ELEMENTAR PREPARATÓRIO - CSS GLOBAL
   Base: Bootstrap 5.3.x
========================================================= */

:root {
    --el-navy:#101828;
    --el-navy-2:#17233a;
    --el-blue:#16a6c7;
    --el-blue-2:#36c7d6;
    --el-pink:#ef3d8f;
    --el-orange:#ff7a1a;
    --el-yellow:#ffd166;
    --el-green:#22c55e;
    --el-cream:#fff8ef;
    --el-soft:#f7fbfd;
    --el-soft-2:#fff3f8;
    --el-text:#1f2937;
    --el-muted:#667085;
    --el-border:#e8edf2;
    --el-shadow:0 18px 48px rgba(16,24,40,.08);
    --el-shadow-lg:0 30px 80px rgba(16,24,40,.16);
}

* { box-sizing:border-box; }

html, body {
    margin:0;
    width:100%;
    min-height:100%;
}

body {
    background:
        radial-gradient(circle at top left, rgba(239,61,143,.07), transparent 25%),
        radial-gradient(circle at top right, rgba(22,166,199,.07), transparent 25%),
        linear-gradient(180deg, #ffffff 0%, var(--el-soft) 100%);
    color:var(--el-text);
    font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height:100vh;
}

a { text-decoration:none; }
img { max-width:100%; }

/* ---------- Navbar pública / plataforma ---------- */

.el-navbar {
    min-height:78px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--el-border);
    box-shadow:0 10px 30px rgba(16,24,40,.04);
}

.el-logo {
    height:48px;
    width:auto;
    display:block;
}

.el-brand-subtitle {
    font-size:.8rem;
    color:var(--el-muted);
    font-weight:750;
    margin-top:-.1rem;
}

.el-nav-link,
.el-link {
    color:var(--el-navy) !important;
    font-weight:850;
}

.el-nav-link:hover,
.el-link:hover {
    color:var(--el-pink) !important;
}

.el-search {
    background:#f3f6f8;
    border:1px solid transparent;
    border-radius:999px;
    padding:.72rem 1rem;
    min-width:220px;
}

.el-search:focus {
    border-color:rgba(22,166,199,.35);
    box-shadow:0 0 0 .25rem rgba(22,166,199,.12);
}

/* ---------- Botões ---------- */

.btn-elementar {
    --bs-btn-bg: var(--el-pink);
    --bs-btn-border-color: var(--el-pink);
    --bs-btn-hover-bg: #d92e7c;
    --bs-btn-hover-border-color: #d92e7c;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    border-radius:999px;
    font-weight:900;
    padding:.72rem 1.25rem;
}

.btn-elementar-blue {
    --bs-btn-bg: var(--el-blue);
    --bs-btn-border-color: var(--el-blue);
    --bs-btn-hover-bg: #0f8eaa;
    --bs-btn-hover-border-color: #0f8eaa;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    border-radius:999px;
    font-weight:900;
    padding:.72rem 1.25rem;
}

.btn-whatsapp {
    --bs-btn-bg: var(--el-green);
    --bs-btn-border-color: var(--el-green);
    --bs-btn-hover-bg: #16a34a;
    --bs-btn-hover-border-color: #16a34a;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    border-radius:999px;
    font-weight:900;
    padding:.72rem 1.25rem;
}

.btn-dark-pill {
    background:var(--el-navy);
    color:#fff;
    border-radius:999px;
    font-weight:900;
    padding:.72rem 1.25rem;
    border:0;
}

.btn-dark-pill:hover {
    background:#0b1220;
    color:#fff;
}

.btn-soft {
    background:#f3f6f8;
    color:var(--el-navy);
    border:1px solid transparent;
    border-radius:999px;
    font-weight:900;
    padding:.72rem 1.1rem;
}

.btn-soft:hover {
    background:#e9eef3;
    color:var(--el-pink);
}

.btn-primary {
    background:var(--el-pink);
    border-color:var(--el-pink);
    font-weight:800;
}

.btn-primary:hover {
    background:#d92e7c;
    border-color:#d92e7c;
}

.btn-secondary {
    background:#f3f6f8;
    color:var(--el-navy);
    border-color:#f3f6f8;
    font-weight:800;
}

.btn-secondary:hover {
    background:#e9eef3;
    color:var(--el-navy);
    border-color:#e9eef3;
}

.btn-sm {
    border-radius:999px;
    padding:.45rem .75rem;
    font-weight:800;
}

/* ---------- Hero / seções ---------- */

.el-hero {
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 8% 15%, rgba(239,61,143,.20), transparent 24%),
        radial-gradient(circle at 85% 18%, rgba(22,166,199,.20), transparent 24%),
        radial-gradient(circle at 48% 110%, rgba(255,122,26,.20), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f8fcfd 52%, #fff7ef 100%);
    border-bottom:1px solid var(--el-border);
}

.el-hero::before {
    content:"";
    position:absolute;
    inset:0;
    opacity:.45;
    background-image:
        linear-gradient(rgba(16,24,40,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16,24,40,.035) 1px, transparent 1px);
    background-size:42px 42px;
    pointer-events:none;
}

.el-hero-inner {
    position:relative;
    z-index:2;
}

.el-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    background:#fff;
    border:1px solid var(--el-border);
    box-shadow:0 12px 30px rgba(16,24,40,.06);
    color:var(--el-navy);
    border-radius:999px;
    padding:.62rem .92rem;
    font-weight:900;
    font-size:.88rem;
}

.el-eyebrow-dot {
    width:10px;
    height:10px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--el-pink), var(--el-orange));
    box-shadow:0 0 0 6px rgba(239,61,143,.12);
}

.el-title {
    color:var(--el-navy);
    font-weight:950;
    letter-spacing:-.065em;
    line-height:.96;
}

.el-title .grad,
.el-grad {
    background:linear-gradient(90deg, var(--el-pink), var(--el-orange), var(--el-blue));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.el-subtitle {
    color:var(--el-muted);
    line-height:1.55;
}

.el-section-title {
    color:var(--el-navy);
    font-weight:950;
    letter-spacing:-.055em;
}

/* ---------- Cards ---------- */

.el-card,
.course-card,
.content-card,
.question-card,
.article-card,
.post-card,
.topic-card,
.year-card,
.card {
    background:#fff;
    border:1px solid var(--el-border);
    border-radius:1.45rem;
    box-shadow:0 14px 38px rgba(16,24,40,.05);
}

.el-card-hover,
.course-card,
.content-card,
.question-card,
.post-card,
.topic-card,
.year-card {
    transition:.18s ease;
}

.el-card-hover:hover,
.course-card:hover,
.content-card:hover,
.question-card:hover,
.post-card:hover,
.topic-card:hover,
.year-card:hover {
    transform:translateY(-4px);
    box-shadow:0 24px 56px rgba(16,24,40,.10);
}

.el-accent,
.card-accent {
    height:7px;
    border-radius:999px;
    background:linear-gradient(90deg, var(--el-pink), var(--el-orange), var(--el-blue));
}

.el-glass {
    background:rgba(255,255,255,.82);
    border:1px solid rgba(232,237,242,.95);
    box-shadow:0 20px 60px rgba(16,24,40,.08);
    border-radius:1.6rem;
}

/* ---------- Stats / progress ---------- */

.el-stat-card,
.stat-card {
    background:var(--el-navy);
    color:#fff;
    border-radius:1.5rem;
    border:6px solid #fff;
    box-shadow:var(--el-shadow-lg);
    overflow:hidden;
    position:relative;
}

.el-stat-card::before,
.stat-card::before {
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 18% 18%, rgba(239,61,143,.30), transparent 30%),
        radial-gradient(circle at 90% 24%, rgba(22,166,199,.28), transparent 26%),
        linear-gradient(135deg, rgba(255,122,26,.12), transparent);
    pointer-events:none;
}

.el-stat-card > *,
.stat-card > * {
    position:relative;
    z-index:2;
}

.el-stat-number,
.stat-number {
    font-size:3.2rem;
    font-weight:950;
    letter-spacing:-.06em;
    line-height:1;
    color:var(--el-yellow);
}

.progress {
    height:.78rem;
    background:#eef2f6;
    border-radius:999px;
}

.progress-bar {
    background:linear-gradient(90deg, var(--el-pink), var(--el-orange), var(--el-blue));
    border-radius:999px;
}

/* ---------- Badges ---------- */

.badge-soft,
.el-badge-soft {
    background:#f3f6f8;
    color:#44546a;
    border:1px solid var(--el-border);
    font-weight:800;
}

.badge-ok,
.el-badge-ok {
    background:#dcfce7;
    color:#166534;
    border:1px solid #bbf7d0;
    font-weight:850;
}

.badge-pending,
.el-badge-pending {
    background:#fff3f8;
    color:#b42365;
    border:1px solid rgba(239,61,143,.16);
    font-weight:850;
}

.category-pill {
    display:inline-flex;
    background:#fff3f8;
    color:var(--el-pink);
    border:1px solid rgba(239,61,143,.13);
    border-radius:999px;
    padding:.4rem .75rem;
    font-weight:850;
    font-size:.78rem;
    text-decoration:none;
}

.status-badge {
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:.35rem .65rem;
    background:#f3f6f8;
    color:#344054;
    border:1px solid var(--el-border);
    font-weight:850;
    font-size:.78rem;
}

/* ---------- Empty states ---------- */

.empty-state {
    background:#fff;
    border:1px dashed #cbd5e1;
    border-radius:1.6rem;
    box-shadow:0 14px 38px rgba(16,24,40,.04);
}

.empty-icon {
    width:74px;
    height:74px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:1.4rem;
    color:#fff;
    background:linear-gradient(135deg, var(--el-pink), var(--el-orange), var(--el-blue));
    font-size:2rem;
    box-shadow:0 18px 40px rgba(239,61,143,.18);
}

/* ---------- Forms / tables ---------- */

.form-control,
.form-select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
select {
    border-radius:1rem;
    border:1px solid #d0d7e2;
    padding:.78rem .9rem;
}

textarea {
    min-height:120px;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus,
select:focus {
    border-color:rgba(22,166,199,.55);
    box-shadow:0 0 0 .25rem rgba(22,166,199,.12);
}

.table-responsive {
    border-radius:1.2rem;
}

table {
    width:100%;
    border-collapse:separate;
    border-spacing:0;
}

table th {
    color:#475467;
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    background:#f8fafc;
}

table th,
table td {
    padding:.9rem;
    border-bottom:1px solid var(--el-border);
    vertical-align:middle;
}

table tr:last-child td {
    border-bottom:0;
}

/* ---------- Blog ---------- */

.post-placeholder {
    height:215px;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.22), transparent 25%),
        linear-gradient(135deg, var(--el-pink), var(--el-orange), var(--el-blue));
    color:#fff;
    font-size:2rem;
    font-weight:950;
    letter-spacing:-.04em;
}

.featured-post {
    grid-column:span 2;
}

.featured-post .post-placeholder,
.featured-post img {
    height:310px !important;
}

.latest-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1.25rem;
}

.category-chip {
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    background:#fff;
    border:1px solid var(--el-border);
    color:var(--el-navy);
    border-radius:999px;
    padding:.55rem .9rem;
    font-weight:850;
    text-decoration:none;
    transition:.18s ease;
}

.category-chip:hover {
    transform:translateY(-2px);
    color:var(--el-pink);
    box-shadow:0 12px 28px rgba(16,24,40,.08);
}

.year-number {
    font-size:2.3rem;
    line-height:1;
    font-weight:950;
    letter-spacing:-.06em;
    color:var(--el-navy);
}

.topic-icon {
    width:50px;
    height:50px;
    border-radius:1.1rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:linear-gradient(135deg, var(--el-pink), var(--el-orange));
    font-size:1.4rem;
}

.topic-icon.blue {
    background:linear-gradient(135deg, var(--el-blue), var(--el-blue-2));
}

.cover-card {
    border-radius:2rem;
    overflow:hidden;
    border:6px solid #fff;
    box-shadow:var(--el-shadow-lg);
    background:#fff;
}

.cover-card img {
    width:100%;
    max-height:420px;
    object-fit:cover;
    display:block;
}

.cover-placeholder {
    min-height:320px;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.22), transparent 25%),
        linear-gradient(135deg, var(--el-pink), var(--el-orange), var(--el-blue));
    color:#fff;
}

.lead-summary {
    border-left:6px solid var(--el-pink);
    padding-left:1.2rem;
    color:#4b5563;
    font-size:1.2rem;
    line-height:1.55;
}

.article-body {
    font-size:1.08rem;
    line-height:1.78;
    color:#2b2f38;
}

.article-body h2 {
    font-size:2rem;
    font-weight:900;
    letter-spacing:-.045em;
    margin-top:2.4rem;
    color:var(--el-navy);
}

/* ---------- Plataforma Questões ---------- */

.question-number {
    width:48px;
    height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:1.1rem;
    color:#fff;
    font-weight:950;
    background:linear-gradient(135deg, var(--el-navy), #1d2939);
}

.question-card.done .question-number {
    background:linear-gradient(135deg, #16a34a, var(--el-green));
}

.video-frame {
    position:relative;
    width:100%;
    padding-top:56.25%;
    background:#0b1220;
    border-radius:1.35rem;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(16,24,40,.16);
}

.video-frame iframe {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}

.no-video {
    background:#fff;
    border:1px dashed #cbd5e1;
    border-radius:1.35rem;
    padding:2rem;
    color:var(--el-muted);
}

.option-box {
    border:1px solid var(--el-border);
    background:#fff;
    border-radius:1.25rem;
    padding:1rem;
}

.option-letter {
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:.85rem;
    color:#fff;
    font-weight:950;
    background:linear-gradient(135deg, var(--el-pink), var(--el-orange));
    flex:0 0 auto;
}

.imagem-questao {
    max-width:100%;
    height:auto;
    display:block;
    margin:1rem 0;
    border:1px solid var(--el-border);
    border-radius:1rem;
    background:#fff;
}

.sidebar-sticky {
    position:sticky;
    top:96px;
}

/* ---------- Landing / Login ---------- */

.landing-hero {
    min-height:calc(100vh - 78px);
    display:flex;
    align-items:center;
}

.price-box {
    display:inline-flex;
    align-items:flex-end;
    gap:.65rem;
    background:#fff;
    border:1px solid var(--el-border);
    border-radius:1.5rem;
    padding:1rem 1.25rem;
    box-shadow:var(--el-shadow);
}

.price-box small {
    color:var(--el-muted);
    font-weight:800;
    padding-bottom:.35rem;
}

.price-box strong {
    font-size:3.6rem;
    line-height:.85;
    letter-spacing:-.07em;
    color:var(--el-pink);
}

.offer-card,
.auth-card {
    border-radius:2rem;
    background:#fff;
    border:1px solid var(--el-border);
    box-shadow:var(--el-shadow-lg);
}

.auth-page {
    min-height:100vh;
    display:flex;
    align-items:center;
}

/* ---------- Admin FIXED ---------- */

body.admin-body {
    background:#f6f8fb !important;
    overflow-x:hidden;
}

.admin-shell {
    min-height:100vh;
    display:flex;
    width:100%;
}

.admin-sidebar {
    width:290px;
    min-width:290px;
    background:var(--el-navy);
    color:#fff;
    min-height:100vh;
    padding:1.25rem;
    overflow-y:auto;
    position:relative;
    z-index:10;
}

.admin-sidebar::before {
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 15% 10%, rgba(239,61,143,.22), transparent 25%),
        radial-gradient(circle at 90% 30%, rgba(22,166,199,.20), transparent 24%),
        linear-gradient(180deg, rgba(255,122,26,.08), transparent);
    pointer-events:none;
}

.admin-sidebar > * {
    position:relative;
    z-index:2;
}

.admin-brand {
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:.75rem;
    border-radius:1.25rem;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    margin-bottom:1rem;
    color:#fff;
}

.admin-brand img {
    height:42px;
    max-width:172px;
    object-fit:contain;
    background:#fff;
    border-radius:.8rem;
    padding:.25rem .45rem;
}

.admin-brand strong {
    display:block;
    color:#fff;
    line-height:1.05;
}

.admin-brand span {
    color:rgba(255,255,255,.65);
    font-size:.78rem;
    font-weight:700;
}

.admin-nav {
    display:grid;
    gap:.35rem;
    margin-top:1rem;
}

.admin-nav a {
    display:flex;
    align-items:center;
    gap:.65rem;
    color:rgba(255,255,255,.78);
    border-radius:1rem;
    padding:.72rem .85rem;
    font-weight:800;
    text-decoration:none;
    white-space:nowrap;
}

.admin-nav a:hover,
.admin-nav a.active {
    background:rgba(255,255,255,.10);
    color:#fff;
}

.admin-main {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}

.admin-topbar {
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--el-border);
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:0 1.5rem;
    position:sticky;
    top:0;
    z-index:8;
}

.admin-topbar strong {
    color:var(--el-navy);
}

.admin-content {
    padding:1.5rem;
    width:100%;
    max-width:1440px;
}

.admin-page-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:1rem;
    margin-bottom:1.25rem;
}

.admin-page-header h1 {
    color:var(--el-navy);
    font-weight:950;
    letter-spacing:-.055em;
    margin:0;
}

.admin-page-header p {
    color:var(--el-muted);
    margin:.25rem 0 0;
}

.admin-mobile-bar {
    display:none;
}

.cta-strip {
    background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.18), transparent 18%),
        radial-gradient(circle at 90% 70%, rgba(255,255,255,.14), transparent 18%),
        linear-gradient(135deg, var(--el-navy), #17223a);
    color:#fff;
    border-radius:2rem;
    position:relative;
    overflow:hidden;
}

.cta-strip::before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:9px;
    background:linear-gradient(180deg, var(--el-pink), var(--el-orange), var(--el-blue));
}

.el-footer {
    background:
        radial-gradient(circle at 15% 20%, rgba(239,61,143,.20), transparent 28%),
        radial-gradient(circle at 75% 20%, rgba(22,166,199,.22), transparent 30%),
        linear-gradient(135deg, #101828, #111827);
    color:#fff;
}

.el-footer img {
    height:50px;
    background:#fff;
    border-radius:1rem;
    padding:.4rem .8rem;
}

.el-footer a {
    color:#fff;
    text-decoration:none;
    font-weight:750;
}

.footer-mini {
    color:var(--el-muted);
    font-size:.9rem;
}

/* ---------- Responsive ---------- */

@media(max-width:991px) {
    .el-search { min-width:100%; }
    .sidebar-sticky { position:static; }
    .el-logo { height:40px; }
    .el-title { letter-spacing:-.045em; }
    .latest-grid { grid-template-columns:1fr; }
    .featured-post { grid-column:span 1; }
    .featured-post .post-placeholder,
    .featured-post img { height:215px !important; }

    .admin-mobile-bar {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:1rem;
        background:#fff;
        border-bottom:1px solid var(--el-border);
        padding:.75rem 1rem;
        position:sticky;
        top:0;
        z-index:20;
    }

    .admin-shell {
        display:block;
    }

    .admin-sidebar {
        position:fixed;
        inset:0 auto 0 0;
        transform:translateX(-100%);
        transition:.2s ease;
        z-index:30;
    }

    body.admin-menu-open .admin-sidebar {
        transform:translateX(0);
    }

    .admin-main {
        width:100%;
    }

    .admin-topbar {
        display:none;
    }

    .admin-content {
        padding:1rem;
    }

    .admin-page-header {
        flex-direction:column;
        align-items:flex-start;
    }
}


/* =========================================================
   AJUSTE FINO - MARCA NA SIDEBAR DO ADMIN
   Adicionado no final para sobrescrever as regras anteriores.
========================================================= */

.admin-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .75rem !important;
    padding: 1rem .9rem !important;
    border-radius: 1.35rem !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    margin-bottom: 1.15rem !important;
    color: #fff !important;
    text-align: center !important;
    overflow: hidden !important;
}

.admin-brand img {
    width: 100% !important;
    max-width: 205px !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    object-fit: contain !important;
    background: #fff !important;
    border-radius: 1rem !important;
    padding: .42rem .7rem !important;
    margin: 0 auto !important;
}

.admin-brand > div,
.admin-brand-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .12rem !important;
    width: 100% !important;
    min-width: 0 !important;
}

.admin-brand strong {
    display: block !important;
    color: #fff !important;
    line-height: 1.05 !important;
    font-size: 1.08rem !important;
    font-weight: 950 !important;
    letter-spacing: -.02em !important;
    margin: 0 !important;
    white-space: normal !important;
}

.admin-brand span {
    display: block !important;
    color: rgba(255,255,255,.74) !important;
    font-size: .78rem !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: normal !important;
}

@media (max-width: 991px) {
    .admin-brand img {
        max-width: 190px !important;
    }
}
