:root {
    /* Paleta de Cores do Site Institucional */
    --primary-color: #006d5b;
    --primary-dark: #004d40;
    --secondary-color: #ffffff;
    --accent-color: #f8f9fa;
    --text-dark: #333333;

    --bronze: #cd7f32;
    --silver: #a0a0a0;
    --gold: #d4af37;

    --danger: #dc3545;
    --warning: #ffc107;
    --success: #198754;
}

body {
    background-color: var(--accent-color);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* NAVBAR */

.navbar-custom {
    background-color: var(--secondary-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 1rem 0;
}

.navbar-brand {
    font-weight: bold;
    color: var(--primary-color) !important;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-link {
    color: var(--text-dark) !important;
    font-weight: 500;
}

.nav-link:hover {
    color: var(--primary-color) !important;
}

/* PROFILE IMAGES */

.navbar-profile-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-color);
}

.profile-page-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--secondary-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* COURSE CARDS */

.card-course {
    border: none;
    border-radius: 15px;
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    overflow: hidden;
    height: 100%;
}

.card-course:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.card-header-img {
    height: 8px;
    background: var(--primary-color);
}

.course-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

/* BOTÕES */

.btn-primary-custom {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn-primary-custom:hover {
    background-color: var(--primary-dark);
}

/* FOOTER */

footer {
    margin-top: auto;
    background-color: var(--primary-color);
    color: white;
    padding: 3rem 0;
}

footer h5 {
    font-weight: bold;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    font-size: 1rem;
}

footer a {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

.social-icons a {
    font-size: 1.5rem;
    margin-right: 15px;
    color: white;
}

/* WHATSAPP FLOAT */

.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    text-decoration: none;
    z-index: 1000;
}

.whatsapp-float:hover {
    background-color: #128c7e;
    transform: scale(1.1);
}

@media (max-width:768px){
    .whatsapp-float{
        width:50px;
        height:50px;
        bottom:20px;
        right:20px;
        font-size:25px;
    }
}

/* LOGIN */

.login-logo {
    max-width:200px;
    width:100%;
    margin-bottom:1.5rem;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.login-card {
    border:none;
    border-radius:15px;
}

.login-header {
    background-color:var(--secondary-color);
    color:var(--primary-color);
    padding:20px;
    text-align:center;
}

/* ANIMATION */

@keyframes pulse {
    0% { transform:scale(1); }
    50% { transform:scale(1.05); }
    100% { transform:scale(1); }
}

.pulse-animation {
    animation:pulse 2s infinite;
}

/* DARK MODE */

body.dark-mode {
    --secondary-color:#212529;
    --accent-color:#121212;
    --text-dark:#e0e0e0;
    --primary-color:#008f7a;
}

body.dark-mode .card {
    background-color:var(--secondary-color);
    color:var(--text-dark);
}

/* MEDALS */

.badge-medal {
    font-size:0.8rem;
    padding:3px 8px;
    border-radius:12px;
    background:#fff3cd;
    color:#856404;
    border:1px solid #ffeeba;
    display:inline-flex;
    align-items:center;
    gap:4px;
}

/* FORUM */

.forum-avatar{
    width:45px;
    height:45px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid var(--primary-color);
}

.forum-card:hover{
    background-color:#f8f9fa;
}

/* SOCIAL FEED */

.social-feed-container{
    max-width:1200px;
    margin:0 auto;
}

.post-card{
    border:none;
    border-radius:12px;
    background:white;
    box-shadow:0 2px 5px rgba(0,0,0,0.03);
    margin-bottom:20px;
}

.post-avatar{
    width:45px;
    height:45px;
    border-radius:50%;
    object-fit:cover;
}

.post-actions .btn{
    color:#65676b;
    font-weight:500;
}

.post-actions .btn:hover{
    background:#f0f2f5;
    color:var(--primary-color);
}

/* RANKING */

.ranking-item:nth-child(1) .ranking-pos{
    color:var(--gold);
    font-weight:900;
}

.ranking-item:nth-child(2) .ranking-pos{
    color:var(--silver);
    font-weight:800;
}

.ranking-item:nth-child(3) .ranking-pos{
    color:var(--bronze);
    font-weight:800;
}

.ranking-avatar{
    width:35px;
    height:35px;
    border-radius:50%;
    object-fit:cover;
}

.hover-underline:hover{
    text-decoration:underline !important;
    color:var(--primary-color) !important;
}

/* ENROLLMENT EXPIRATION */

.enrollment-expiration {
    background: linear-gradient(135deg, rgba(0, 109, 91, 0.05) 0%, rgba(0, 109, 91, 0.02) 100%);
    border-left: 4px solid var(--primary-color);
    border-radius: 8px;
    padding: 12px;
    margin: 12px 0;
    font-size: 0.9rem;
}

.enrollment-expiration .expiration-date {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-top: 4px;
}

.enrollment-expiration .expiration-label {
    display: flex;
    align-items: center;
    color: #666;
    font-weight: 500;
    gap: 6px;
}