:root {
    --color-bombers-primary: #D4A33B; /* Golden/Mustard */
    --color-bg-bombers: #F9F7F2; /* Beige background */
    --color-bg-bombers-card: #F9F6ED;
}

body.theme-bombers {
    background-color: var(--color-bg-bombers);
}

.header, .header-bombers {
    background-color: #FFFFFF !important;
}

.subnav-container {
    background-color: var(--color-bg-bombers) !important;
}

.tabs-nav, .tabs-nav-course {
    background-color: #FFFFFF !important;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
}

.logo-text {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.5px;
    /* Simulated golden accent on O via pseudo element if we wanted, but text is fine */
}

.main-nav {
    display: flex;
    gap: 32px;
}

.nav-link {
    text-decoration: none;
    color: var(--color-text-main);
    font-weight: 600;
    font-size: 0.95rem;
    position: relative;
    padding-bottom: 4px;
}

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

.nav-link.active {
    color: var(--color-text-main);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-bombers-primary);
    border-radius: 2px;
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 32px;
}

.notification-container {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text-main);
    font-weight: 600;
    font-size: 0.9rem;
}

.bell-icon-wrap {
    position: relative;
    display: flex;
}

.notification-dot {
    position: absolute;
    top: 0;
    right: 2px;
    width: 8px;
    height: 8px;
    background-color: #EF4444; /* Red dot */
    border-radius: 50%;
    border: 2px solid var(--color-bg-bombers);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

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

/* Hero */
.hero-bombers {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0; /* Background is page background */
    margin-bottom: -40px; /* Pull the white container up a bit if needed */
}

.hero-content {
    flex: 1;
    padding: 60px 48px;
}

.hero-bombers .hero-title {
    font-size: 3rem;
    color: var(--color-text-main);
    text-align: left;
    margin-bottom: 24px;
    line-height: 1.15;
}

.hero-bombers .hero-subtitle {
    text-align: left;
    max-width: 450px;
}

.hero-image {
    flex: 1;
    height: 400px;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Main Content Wrapper (White Card) */
.main-content-wrapper {
    position: relative;
    z-index: 2;
    padding: 0 48px;
    margin-top: -60px; /* Overlap the hero image */
}

.formacions-container {
    background-color: #FFFFFF;
    border-radius: 24px;
    padding: 60px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-main);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 32px;
}

/* Grid Layouts */
.courses-grid-large {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
}

.courses-grid-small {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Formations Cards */
.formation-card, .formation-card-small {
    border-radius: 16px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
}

.card-active-bg {
    background-color: var(--color-bg-bombers-card);
}

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

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

.card-body {
    padding: 32px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-body-small {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.badge {
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.badge-green {
    background-color: #DCFCE7;
    color: #16A34A;
}

.badge-gray {
    background-color: #F1F5F9;
    color: #64748B;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 12px;
}

.card-title-small {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 12px;
}

.card-text {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 32px;
    flex: 1;
}

.card-text-small {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 24px;
    flex: 1;
}

.card-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Buttons Bombers specific */
.btn-golden {
    background-color: var(--color-bombers-primary);
    color: white;
}

.btn-golden:hover {
    background-color: #bd8e32;
}

.btn-outline-golden {
    background-color: transparent;
    color: var(--color-bombers-primary);
    border: 1px solid var(--color-bombers-primary);
}

.btn-outline-golden:hover {
    background-color: rgba(212, 163, 59, 0.1);
}

.btn-text-golden {
    color: var(--color-bombers-primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
}

.btn-text-golden:hover {
    text-decoration: underline;
}

.btn-disabled {
    background-color: #E2E8F0;
    color: #94A3B8;
    cursor: not-allowed;
    border: none;
    width: 100%;
}

/* Progress Bar */
.progress-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.progress-bar-bg {
    flex: 1;
    height: 8px;
    background-color: #E2E8F0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--color-bombers-primary);
    border-radius: 4px;
}

.progress-text {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-main);
}

/* Banner Inferior */
.help-banner {
    padding: 80px 48px 100px;
    text-align: center;
}

.help-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 32px;
}

.btn-large {
    padding: 14px 32px;
    font-size: 1.1rem;
}

/* Footer */
.footer-bombers {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 48px;
    border-top: 1px solid #E2E8F0;
}

.footer-logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-main);
}

.footer-links {
    display: flex;
    gap: 24px;
}

.footer-links a {
    text-decoration: none;
    color: var(--color-text-main);
    font-weight: 600;
    font-size: 0.95rem;
}

.footer-copy {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

@media (max-width: 900px) {
    .hero-bombers {
        flex-direction: column;
    }
    .main-content-wrapper {
        margin-top: -30px;
    }
    .courses-grid-large {
        grid-template-columns: 1fr;
    }
    .courses-grid-small {
        grid-template-columns: 1fr;
    }
}

/* Auth Layout */
.auth-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    display: flex;
}

.login-layout {
    display: flex;
    width: 100%;
}

.login-promo {
    flex: 1;
    background-color: var(--color-bg-bombers-card);
    display: flex;
    flex-direction: column;
}

.promo-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.promo-content {
    padding: 40px;
}

.promo-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-text-main);
    line-height: 1.2;
    margin-bottom: 16px;
}

.promo-desc {
    color: var(--color-text-main);
    margin-bottom: 32px;
    line-height: 1.5;
}

.promo-features {
    display: flex;
    gap: 20px;
}

.promo-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.login-form-card {
    flex: 1;
    background-color: #F8F6F0; /* Soft beige for form side */
    padding: 60px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 8px;
}

.form-desc {
    color: var(--color-text-main);
    margin-bottom: 32px;
}

.auth-form {
    margin-bottom: 24px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 16px;
    color: var(--color-text-muted);
}

.eye-icon {
    position: absolute;
    right: 16px;
    color: var(--color-text-muted);
    cursor: pointer;
}

.form-control {
    width: 100%;
    padding: 12px 16px 12px 48px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s;
    background-color: white;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-bombers-primary);
    box-shadow: 0 0 0 3px rgba(212, 163, 59, 0.1);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--color-text-main);
    cursor: pointer;
}

.form-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--color-bombers-primary);
}

.forgot-link {
    font-size: 0.9rem;
    color: var(--color-text-main);
    text-decoration: underline;
}

.btn-block {
    width: 100%;
    padding: 14px;
    font-size: 1.05rem;
}

.form-footer-text {
    font-size: 0.85rem;
    color: var(--color-text-main);
}

.text-link {
    color: var(--color-text-main);
    text-decoration: underline;
    font-weight: 600;
}

.mt-4 {
    margin-top: 24px;
}

.mb-3 {
    margin-bottom: 16px;
}

.text-center {
    text-align: center;
}

/* Recovery Modal Floating */
.recovery-modal {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: white;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    width: 350px;
    z-index: 100;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.modal-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .login-layout {
        flex-direction: column;
    }
    .recovery-modal {
        bottom: 0;
        right: 0;
        width: 100%;
        border-radius: 16px 16px 0 0;
    }
}

/* Dashboard Styles */
.dashboard-bg-curve {
    position: absolute;
    top: 300px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFFFFF;
    border-radius: 40px 40px 0 0;
    z-index: 0;
}

.dashboard-wrapper {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 48px 80px;
    position: relative;
    z-index: 1;
}

.dashboard-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.greeting-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 8px;
}

.greeting-subtitle {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.next-activity-card {
    display: flex;
    align-items: center;
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 12px 12px 12px 20px;
    gap: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.next-activity-icon {
    color: var(--color-bombers-primary);
    background-color: rgba(212, 163, 59, 0.1);
    padding: 12px;
    border-radius: 12px;
    display: flex;
}

.next-activity-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.next-activity-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.3;
}

.next-activity-img {
    width: 100px;
    height: 70px;
    border-radius: 8px;
    object-fit: cover;
}

/* Continue Banner */
.continue-banner {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 48px;
    background: url('https://images.unsplash.com/photo-1599708153386-62bf3f034eb1?q=80&w=1200&auto=format&fit=crop') center/cover;
}

.continue-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}

.continue-content {
    position: relative;
    z-index: 2;
    padding: 48px;
    color: white;
    max-width: 500px;
}

.continue-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.continue-meta {
    font-size: 0.85rem;
    color: var(--color-bombers-primary);
    font-weight: 700;
    margin-bottom: 4px;
}

.continue-course {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 24px;
}

.continue-progress-wrapper {
    margin-bottom: 24px;
}

.progress-bar-bg-dark {
    width: 100%;
    height: 4px;
    background-color: rgba(255,255,255,0.2);
    border-radius: 2px;
    margin-bottom: 8px;
}

.continue-progress-text {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
}

.btn-medium {
    padding: 10px 24px;
}

/* Dashboard Sections */
.dashboard-section {
    margin-bottom: 48px;
}

.section-heading {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 24px;
}

.courses-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.dashboard-card {
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

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

.d-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.d-card-meta {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-bombers-primary);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.d-card-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 24px;
    flex: 1;
}

.d-card-progress-wrapper {
    margin-bottom: 20px;
}

.d-card-progress-text {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    display: block;
    margin-top: 8px;
    text-align: right;
}

.btn-outline-gray {
    background-color: white;
    color: var(--color-text-main);
    border: 1px solid #E2E8F0;
    font-weight: 600;
}

.btn-outline-gray:hover {
    background-color: #F8FAFC;
}

/* Grid 2 Middle */
.dashboard-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.list-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 12px 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #F1F5F9;
}

.list-item:last-child {
    border-bottom: none;
}

.list-item-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

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

.list-text {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text-main);
}

.badge-yellow {
    background-color: #FEF3C7;
    color: #D97706;
}

/* Simple Card */
.simple-card .d-card-img {
    height: 140px;
}

.d-card-body-simple {
    padding: 20px;
}

.d-card-title-simple {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-main);
}

.mb-60 {
    margin-bottom: 60px;
}

@media (max-width: 900px) {
    .dashboard-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .courses-grid-3, .dashboard-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Sub-navegació (Configuració) */
.subnav-container {
    background-color: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
}

.breadcrumb {
    padding: 16px 48px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.breadcrumb a {
    color: var(--color-text-main);
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb .separator {
    margin: 0 8px;
    color: #CBD5E1;
}

.breadcrumb .current {
    font-weight: 600;
    color: var(--color-text-main);
}

.tabs-nav {
    display: flex;
    gap: 32px;
    padding: 0 48px;
}

.tab-link {
    text-decoration: none;
    color: var(--color-text-main);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 16px 0;
    position: relative;
}

.tab-link:hover {
    color: var(--color-bombers-primary);
}

.tab-link.active {
    color: var(--color-bombers-primary);
}

.tab-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-bombers-primary);
    border-radius: 3px 3px 0 0;
}

/* Configuració General */
.config-wrapper {
    max-width: 100%;
    margin: 0 auto;
    padding: 48px;
}

.config-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

.config-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 8px;
}

.config-subtitle {
    font-size: 1rem;
    color: var(--color-text-muted);
}

.security-badge {
    background-color: #EFEFE9; /* Fons clar */
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-radius: 12px;
}

.security-icon {
    color: var(--color-text-main);
}

.security-text strong {
    display: block;
    font-size: 0.95rem;
    color: var(--color-text-main);
    margin-bottom: 2px;
}

.security-text span {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* Graella Configuració */
.config-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.config-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    margin-bottom: 24px;
}

.card-title-lg {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 8px;
}

.card-desc {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Formularis de Configuració */
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.input-disabled {
    background-color: #F8FAFC;
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.select-control {
    appearance: none;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23D4A33B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
    padding-right: 40px;
}

.form-help {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 6px;
}

.form-actions-inline {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.success-message {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #16A34A;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 16px;
}

.text-link-golden {
    color: var(--color-bombers-primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
}

/* Cursos i accessos */
.card-courses-access {
    background: linear-gradient(to right, rgba(249, 246, 237, 1) 40%, rgba(249, 246, 237, 0.8) 100%), url('https://images.unsplash.com/photo-1599708153386-62bf3f034eb1?q=80&w=800&auto=format&fit=crop') right center/cover;
}

.access-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.access-item {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
    padding: 16px;
    border-radius: 12px;
    gap: 16px;
}

.access-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(212, 163, 59, 0.1);
    color: var(--color-bombers-primary);
    display: flex;
    justify-content: center;
    align-items: center;
}

.access-details {
    flex: 1;
}

.access-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 4px;
}

.access-status {
    font-size: 0.85rem;
    color: var(--color-text-main);
}

.status-green {
    color: #16A34A;
    font-weight: 700;
}

.btn-sm {
    padding: 6px 16px;
    font-size: 0.9rem;
}

.btn-outline-white {
    background-color: white;
    border: 1px solid #E2E8F0;
    color: var(--color-text-main);
}

/* Toggle Switches */
.toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #E2E8F0;
    transition: .4s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--color-bombers-primary);
}

input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.toggle-info strong {
    display: block;
    font-size: 0.95rem;
    color: var(--color-text-main);
    margin-bottom: 4px;
}

.toggle-info p {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.preview-box {
    background-color: #F1F5F9;
    padding: 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 24px;
    margin-left: 60px;
}

.preview-box strong {
    color: var(--color-text-main);
}

.preview-box div {
    margin-top: 4px;
    color: var(--color-text-muted);
}

/* Notification Table */
.notification-table {
    width: 100%;
    border-collapse: collapse;
}

.notification-table th {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-main);
    padding-bottom: 16px;
    line-height: 1.2;
}

.notification-table th:first-child {
    text-align: left;
}

.notification-table td {
    padding: 12px 0;
    border-bottom: 1px solid #F1F5F9;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.notification-table td:not(:first-child) {
    text-align: center;
}

.notification-table tr:last-child td {
    border-bottom: none;
}

/* Sessions */
.settings-subtitle {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 8px;
}

.settings-text {
    font-size: 0.9rem;
    color: var(--color-text-main);
}

.session-item {
    font-size: 0.95rem;
    color: var(--color-text-main);
    margin-top: 12px;
}

.ml-2 {
    margin-left: 8px;
}

/* Dark Help Banner */
.help-banner-dark {
    background-color: #1E293B; /* Color fosc per destacar */
    padding: 60px 48px;
    color: white;
}

.help-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.help-banner-content h2 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.help-banner-content p {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.8);
    max-width: 600px;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .config-grid-2 {
        grid-template-columns: 1fr;
    }
    .config-header {
        flex-direction: column;
        gap: 24px;
    }
    .help-banner-inner {
        flex-direction: column;
        text-align: center;
        gap: 32px;
    }
    .tabs-nav {
        overflow-x: auto;
        padding-bottom: 4px;
    }
}

/* Sub-Navegació Específica GESIM */
.subnav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 48px;
}

.btn-menu-private {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-main);
    cursor: pointer;
}

/* Portada GESIM General */
.gesim-wrapper {
    max-width: 100%;
    margin: 0 auto;
    padding: 40px 48px 80px;
}

/* Hero Grid */
.gesim-hero-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
    margin-bottom: 48px;
}

.gesim-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.gesim-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-text-main);
}

.gesim-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: 32px;
}

.badge-yellow-green {
    background-color: #E6FF94;
    color: #4D5C00;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.8rem;
}

/* Reproductors Vídeo */
.video-main-card {
    width: 100%;
    height: 340px;
    border-radius: 16px;
    background: url('https://images.unsplash.com/photo-1599708153386-62bf3f034eb1?q=80&w=800&auto=format&fit=crop') center/cover;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.video-main-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
}

.video-overlay-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.play-btn-circle {
    width: 64px;
    height: 64px;
    background: rgba(255,255,255,0.3);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.play-btn-circle:hover {
    background: rgba(255,255,255,0.5);
    transform: scale(1.05);
}

.video-overlay-title {
    position: absolute;
    bottom: 32px;
    left: 32px;
    color: white;
    font-size: 2rem;
    font-weight: 700;
    z-index: 2;
}

/* Targeta Progrés */
.progress-card-large {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.progress-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.progress-percent-huge {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-text-main);
    letter-spacing: -1px;
}

.progress-label-large {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.progress-counts {
    font-size: 0.95rem;
    color: var(--color-text-main);
}

.progress-counts strong {
    font-weight: 800;
}

/* Banner Continua (Horitzontal) */
.video-horizontal-card {
    background: white;
    border-radius: 16px;
    display: flex;
    padding: 24px;
    gap: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    align-items: center;
}

.vh-image {
    width: 300px;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.vh-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-btn-circle-small {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 48px; height: 48px;
    background: rgba(255,255,255,0.3);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.vh-content {
    flex: 1;
}

.vh-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 4px;
}

.vh-subtitle {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-bottom: 20px;
}

.vh-progress-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.vh-progress-row .progress-bar-bg {
    flex: 1;
}

.vh-progress-text {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.vh-actions {
    display: flex;
    gap: 16px;
}

/* El teu recorregut GESIM */
.journey-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.journey-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.journey-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.journey-card {
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.journey-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 100%);
}

.jc-large {
    height: 240px;
}

.jc-medium {
    height: 200px;
}

.jc-overlay {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    color: white;
    z-index: 2;
}

.jc-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.jc-desc {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 16px;
}

.jc-btn {
    display: inline-block;
    padding: 8px 16px;
}

/* Què has de fer ara? (Todo panel) */
.todo-panel-3 {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
}

.todo-col {
    padding: 32px;
}

.todo-border-left {
    border-left: 1px solid #F1F5F9;
}

.todo-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 16px;
}

.todo-checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.todo-checkbox-item input {
    margin-top: 4px;
    width: 16px;
    height: 16px;
    accent-color: var(--color-bombers-primary);
}

.todo-text {
    font-size: 0.95rem;
    color: var(--color-text-main);
    font-weight: 500;
    flex: 1;
}

.badge-yellow-pale {
    background: #FEF08A;
    color: #854D0E;
    font-size: 0.7rem;
}

.todo-desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Bottom 3 Cols */
.bottom-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.stats-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #F1F5F9;
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-name {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    flex: 1;
    padding-right: 16px;
}

.stat-name strong {
    color: var(--color-text-main);
}

.stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-main);
}

.notice-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.notice-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 16px;
    border-bottom: 1px solid #F1F5F9;
    gap: 16px;
}

.notice-item:last-child {
    border-bottom: none;
}

.notice-text {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.notice-text strong {
    color: var(--color-text-main);
}

.text-xs {
    font-size: 0.65rem;
}

.badge-orange-pale { background: #FFEDD5; color: #C2410C; }
.badge-green-pale { background: #DCFCE7; color: #15803D; }

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

.event-card-body {
    padding: 24px;
}

.event-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text-main);
}

.event-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.event-meta-row {
    display: flex;
    gap: 16px;
}

.pt-4 { padding-top: 16px; }
.p-0 { padding: 0; }
.overflow-hidden { overflow: hidden; }
.mt-auto { margin-top: auto; }

@media (max-width: 900px) {
    .gesim-hero-grid {
        grid-template-columns: 1fr;
    }
    .video-horizontal-card {
        flex-direction: column;
    }
    .vh-image {
        width: 100%;
    }
    .journey-row-2, .journey-row-3 {
        grid-template-columns: 1fr;
    }
    .todo-panel-3 {
        grid-template-columns: 1fr;
    }
    .todo-border-left {
        border-left: none;
        border-top: 1px solid #F1F5F9;
    }
    .bottom-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Llista de Vídeos - Menú Curs */
.border-bottom {
    border-bottom: 1px solid #E2E8F0;
}

.tabs-nav-course {
    display: flex;
    gap: 32px;
    padding: 0 48px;
    margin-top: 8px;
    margin-bottom: 24px;
}

.tab-course {
    text-decoration: none;
    color: var(--color-text-main);
    font-weight: 600;
    font-size: 1.05rem;
    padding: 16px 0;
    position: relative;
}

.tab-course:hover {
    color: var(--color-bombers-primary);
}

.tab-course.active {
    color: var(--color-bombers-primary);
}

.tab-course.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-bombers-primary);
    border-radius: 3px 3px 0 0;
}

/* List Wrapper */
.list-wrapper {
    max-width: 100%;
    margin: 0 auto;
    padding: 48px 48px 80px;
}

.list-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.list-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 8px;
}

.list-subtitle {
    font-size: 1rem;
    color: var(--color-text-muted);
    max-width: 600px;
    line-height: 1.5;
}

/* Circular Progress Widget */
.progress-widget {
    background: white;
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.circular-chart {
    display: block;
    margin: 0 auto;
    max-width: 80%;
    max-height: 250px;
}
.circle-bg {
    fill: none;
    stroke: #E2E8F0;
    stroke-width: 2.5;
}
.circle {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke: var(--color-bombers-primary);
}
.percentage {
    fill: var(--color-text-main);
    font-family: inherit;
    font-weight: 800;
    font-size: 10px;
    text-anchor: middle;
}

.progress-widget-info {
    display: flex;
    flex-direction: column;
}

.progress-widget-info strong {
    font-size: 1.1rem;
    color: var(--color-text-main);
}

/* Barra de Filtres */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.filter-search {
    position: relative;
    flex: 1;
    max-width: 350px;
}

.filter-search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
}

.filter-search input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 0.95rem;
    background: white;
}

.filter-select {
    padding: 10px 32px 10px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none;
    cursor: pointer;
    color: var(--color-text-main);
}

.filter-clear {
    color: var(--color-bombers-primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: underline;
    margin-left: 8px;
}

.view-toggles {
    display: flex;
    margin-left: auto;
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    overflow: hidden;
}

.view-btn {
    padding: 8px 16px;
    background: none;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
}

.view-btn.active {
    background: var(--color-bombers-primary);
    color: white;
}

/* Llista de Vídeos - Files */
.list-card-container {
    background: white;
    border-radius: 16px;
    padding: 24px 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.video-row {
    display: flex;
    align-items: flex-start;
    padding: 24px 0;
    border-bottom: 1px solid #F1F5F9;
    gap: 24px;
}

.video-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.vr-image {
    width: 220px;
    height: 130px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.vr-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vr-image-dimmed::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.4);
}

.play-btn-circle-mini {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 32px; height: 32px;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    z-index: 2;
}

.video-progress-bottom {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: rgba(0,0,0,0.3);
    z-index: 2;
}

.vpb-fill {
    height: 100%;
    background: var(--color-bombers-primary);
}

.vr-content {
    flex: 1;
}

.vr-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vr-meta {
    font-size: 0.9rem;
    color: var(--color-text-main);
    margin-bottom: 4px;
}

.vr-resources {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.vr-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 250px;
    justify-content: flex-end;
}

.vr-percent {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text-main);
    width: 45px;
    text-align: right;
}

.align-start {
    align-items: flex-start;
}

/* Acordió (Sub-sessions) */
.sub-sessions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left: 2px solid #E2E8F0;
    padding-left: 24px;
    margin-left: 12px;
}

.sub-session-item {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.sub-session-item::before {
    content: '';
    position: absolute;
    left: -26px;
    top: 50%;
    width: 20px;
    height: 2px;
    background-color: #E2E8F0;
}

.sub-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sub-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.ml-auto {
    margin-left: auto;
}

.text-link-blue {
    color: #3B82F6;
    font-weight: 600;
    text-decoration: underline;
}

.text-red-pale {
    color: #EF4444;
}

.badge-red-pale {
    background: #FEE2E2;
    color: #B91C1C;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 700;
}

.text-muted-all * {
    color: var(--color-text-muted) !important;
}

.gap-2 { gap: 8px; }
.bg-white { background-color: white !important; }
.border-none { border: none !important; }
.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* Support Banner (Inferior) */
.support-banner {
    background-color: #F8F6F0; /* Soft beige */
    border-radius: 16px;
    padding: 48px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.support-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 12px;
}

.support-desc {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.5;
}

.support-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
}

@media (max-width: 900px) {
    .filter-bar {
        flex-wrap: wrap;
    }
    .filter-search {
        max-width: 100%;
        width: 100%;
    }
    .video-row {
        flex-direction: column;
    }
    .vr-image {
        width: 100%;
        height: 200px;
    }
    .vr-actions {
        width: 100%;
        justify-content: flex-start;
        margin-top: 16px;
    }
    .sub-sessions-list {
        margin-left: 0;
        padding-left: 16px;
    }
}

/* Classe Unitària General */
.class-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px 40px;
}

.pb-0 { padding-bottom: 0 !important; }

/* Capçalera Lliçó */
.class-header-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    margin-bottom: 32px;
}

.class-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 8px;
}

.class-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-main);
    line-height: 1.4;
}

.class-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-main);
    font-size: 0.9rem;
}

.class-progress-box {
    background: white;
    border-radius: 12px;
    padding: 24px;
    width: 320px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.c-prog-top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.c-prog-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text-main);
    background: #E2E8F0;
    padding: 8px 16px;
    border-radius: 8px;
}

.c-prog-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Reproductor de Vídeo */
.video-player-wrapper {
    margin-bottom: 32px;
}

.video-player-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.video-frame-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}

.video-top-gradient {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 24px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0));
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
}

.video-controls-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vc-timeline {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.vc-progress {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 100%;
}

.vc-fill {
    height: 100%;
    background: var(--color-bombers-primary);
    border-radius: 2px;
}

.vc-handle {
    width: 12px;
    height: 12px;
    background: var(--color-bombers-primary);
    border-radius: 50%;
    position: absolute;
    right: -6px;
    top: -4px;
}

.vc-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.vc-left, .vc-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.vc-icon {
    cursor: pointer;
}

.vc-time {
    font-size: 0.85rem;
    font-weight: 600;
}

.video-notice-bar {
    background-color: #EFEFE9; /* Fons beix fosc */
    padding: 12px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-main);
    border-radius: 0 0 16px 16px;
}

/* Acordions simples */
.class-accordions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.accordion-card {
    background: white;
    padding: 24px 32px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    cursor: pointer;
}

.acc-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text-main);
}

.acc-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.acc-meta {
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

/* White Box General */
.white-box {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

.p-40 { padding: 40px; }

.box-title-lg {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 8px;
}

.box-desc {
    font-size: 0.95rem;
    color: var(--color-text-main);
}

/* Prioritats */
.priorities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.badge-golden-solid {
    background-color: var(--color-bombers-primary);
    color: white;
    padding: 4px 12px;
    font-weight: 800;
    font-size: 0.75rem;
    display: inline-block;
    border-radius: 12px;
}

.priority-list {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
}

.priority-list li {
    font-size: 0.95rem;
    color: var(--color-text-main);
    margin-bottom: 8px;
    line-height: 1.4;
    font-weight: 600;
}

/* Dubtes (FAQ Grid) */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.empty-state-box {
    flex: 1;
    background-color: #F8FAFC;
    border-radius: 8px;
    min-height: 200px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #E2E8F0;
    cursor: pointer;
}

.faq-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.faq-q {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text-main);
}

/* Formulari Dubtes */
.form-meta-grid {
    display: flex;
    gap: 48px;
}

.block { display: block; }
.text-main { color: var(--color-text-main); }

.minute-input-row {
    display: flex;
    gap: 16px;
    align-items: center;
}

.minute-input {
    max-width: 200px;
}

.flex { display: flex; }
.flex-column { flex-direction: column; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.gap-3 { gap: 16px; }
.gap-4 { gap: 24px; }
.gap-5 { gap: 32px; }
.h-100 { height: 100%; }
.bg-light-cream { background-color: #F9F7F2; }

/* Paginació Lliçons */
.class-pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border-top: 1px solid #E2E8F0;
    padding-top: 32px;
}

.pagination-btn-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: var(--color-text-main);
    max-width: 300px;
}

.nav-icon-box {
    width: 40px; height: 40px;
    background: #E2E8F0;
    border-radius: 8px;
    display: flex; justify-content: center; align-items: center;
    flex-shrink: 0;
}

.pagination-btn-nav:hover .nav-icon-box {
    background: var(--color-bombers-primary);
    color: white;
}

.nav-text-block {
    display: flex;
    flex-direction: column;
}

.nav-text-block strong {
    font-size: 0.85rem;
    font-weight: 800;
}

.nav-text-block span {
    font-size: 0.95rem;
}

.text-left { text-align: left; }
.text-right { text-align: right; }

@media (max-width: 900px) {
    .class-header-grid {
        grid-template-columns: 1fr;
    }
    .class-progress-box {
        width: 100%;
    }
    .priorities-grid {
        grid-template-columns: 1fr;
    }
    .faq-grid {
        grid-template-columns: 1fr;
    }
    .minute-input-row {
        flex-direction: column;
        align-items: stretch;
    }
    .minute-input {
        max-width: 100%;
    }
    .class-pagination-bar {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }
    .pagination-btn-nav {
        max-width: 100%;
        justify-content: center;
    }
}

/* Llista Simulacres */
.simulacres-progress-card {
    background: white;
    border-radius: 12px;
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.sp-left {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sp-text {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.sp-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-bombers-primary);
}

.sp-label {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-bombers-primary);
}

.sp-right {
    display: flex;
    align-items: center;
}

.mr-4 { margin-right: 24px; }

/* Filter Bar Simulacres */
.filter-bar-simulacres {
    background: white;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    margin-bottom: 32px;
}

.filter-search-alt {
    position: relative;
    flex: 1;
}

.filter-search-alt input {
    width: 100%;
    padding: 12px 40px 12px 40px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 0.95rem;
}

.icon-search {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
}

.icon-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: #D97706;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* Hero Simulacre */
.simulacre-hero-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: url('https://images.unsplash.com/photo-1599708153386-62bf3f034eb1?q=80&w=1200&auto=format&fit=crop') center/cover;
    min-height: 280px;
}

.hero-bg-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(30,41,59,0.95) 0%, rgba(30,41,59,0.7) 40%, rgba(0,0,0,0) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px;
    height: 100%;
}

.hero-content-left {
    color: white;
    max-width: 500px;
}

.hero-tag {
    color: #FBBF24;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: #CBD5E1;
}

.hero-stats-row {
    display: flex;
    align-items: center;
}

.hero-stat-col {
    display: flex;
    flex-direction: column;
    padding-right: 24px;
    margin-right: 24px;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.hero-stat-col strong {
    font-size: 1.5rem;
    font-weight: 800;
}

.hero-stat-col span {
    font-size: 0.85rem;
    color: #CBD5E1;
}

.hero-floating-box {
    background: white;
    border-radius: 12px;
    padding: 32px;
    width: 280px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.hfb-text {
    font-size: 0.95rem;
    color: var(--color-text-main);
    font-weight: 500;
    line-height: 1.4;
}

/* Llistat Simulacres (Individuals) */
.simulacres-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.simulacre-item-card {
    background: white;
    border-radius: 12px;
    padding: 24px 32px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    align-items: center;
    gap: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.sic-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 4px;
}

.sic-meta {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.sic-user {
    font-size: 0.9rem;
    font-weight: 500;
}

.ml-2 { margin-left: 8px; }

.sic-col-4 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.badge-blue-pale {
    background: #DBEAFE;
    color: #1E40AF;
}

.badge-gray {
    background: #E2E8F0;
    color: #475569;
}

.btn-gray {
    background-color: #94A3B8;
    color: white;
}

.btn-gray:hover {
    background-color: #64748B;
}

/* Banner Daurat Sòlid */
.banner-golden-solid {
    background: var(--color-bombers-primary);
    border-radius: 16px;
    padding: 32px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bgs-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
}

.btn-white {
    background: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.text-golden {
    color: var(--color-bombers-primary);
}

@media (max-width: 900px) {
    .simulacres-progress-card {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .sp-right {
        justify-content: space-between;
    }
    .hero-content {
        flex-direction: column;
        align-items: stretch;
        padding: 32px;
    }
    .hero-bg-overlay {
        background: rgba(30,41,59,0.85);
    }
    .hero-content-left {
        margin-bottom: 32px;
    }
    .hero-floating-box {
        width: 100%;
    }
    .simulacre-item-card {
        grid-template-columns: 1fr;
    }
    .sic-col-4 {
        align-items: flex-start;
    }
    .banner-golden-solid {
        flex-direction: column;
        text-align: center;
        gap: 24px;
        padding: 32px;
    }
}

/* Simulacre Unitari General */
.simulacre-header-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.sh-left {
    flex: 1;
}

.sh-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.sh-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-bombers-primary);
}

.sh-meta strong {
    color: var(--color-text-main);
    font-size: 0.95rem;
}

.sh-right {
    width: 320px;
}

.status-card-box {
    background: white;
    border-radius: 12px;
    padding: 32px 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    text-align: center;
}

.status-card-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-main);
}

.status-card-desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Graella Pre-Examen */
.pre-exam-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.emoji-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.emoji-list li {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.warning-banner-soft {
    background-color: #FEF3C7; /* Groc suau */
    color: #92400E;
    padding: 16px;
    border-radius: 8px;
    font-size: 0.9rem;
}

.progress-bar-labeled {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pb-text {
    font-size: 0.95rem;
    color: var(--color-text-main);
}

.simple-list {
    list-style-type: none;
    padding: 0;
}

.simple-list li {
    padding: 6px 0;
    border-bottom: 1px solid #F1F5F9;
    color: var(--color-text-main);
}

.simple-list li:last-child { border: none; }

/* Documents */
.section-title-lg {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-main);
}

.documents-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.document-card {
    background: white;
    border-radius: 12px;
    padding: 32px;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.dc-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.dc-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-text-main);
}

.dc-desc {
    font-size: 0.95rem;
    color: var(--color-text-main);
}

.dc-meta {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.dc-actions {
    display: flex;
    gap: 12px;
}

.dc-link {
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: underline;
}

.dc-thumbnail {
    width: 100px;
    display: flex;
    justify-content: flex-end;
}

.pdf-mockup {
    width: 70px;
    height: 100px;
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 4px;
    padding: 12px 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pdf-line {
    height: 4px;
    background: #E2E8F0;
    width: 100%;
    border-radius: 2px;
}
.pdf-line.short { width: 60%; }

/* Guia Foto */
.photo-guide-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    height: 60px;
}

.pg-item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    font-size: 1.1rem;
    border-radius: 12px;
}

.pg-green { background-color: #3B82F6; } /* O verd #22C55E segons imatge, la faré verda fosc #15803D com mockup */
.pg-green { background-color: #166534; }
.pg-red { background-color: #991B1B; }

/* Flux de Passos */
.flow-steps-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.fs-icon {
    color: var(--color-bombers-primary);
}

.flow-step span {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--color-text-main);
}

.fs-arrow {
    color: #CBD5E1;
}

/* Upload Box */
.upload-box-wrapper {
    background-color: #F8F6F0;
    border-radius: 16px;
    padding: 40px;
}

.upload-box-title {
    color: var(--color-bombers-primary);
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.upload-box-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-main);
    font-weight: 600;
}

.upload-flex-container {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
}

.upload-zone-dashed {
    background: white;
    border: 2px dashed #CBD5E1;
    border-radius: 12px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
}

.uz-text {
    font-weight: 800;
    color: var(--color-text-main);
}

.uz-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-decoration: underline;
}

.upload-arrow {
    display: flex;
    align-items: center;
}

.uploaded-file-preview {
    flex: 1.5;
    display: flex;
    gap: 16px;
    align-items: center;
}

.ufp-image {
    width: 100px;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.ufp-image img {
    width: 100%; height: 100%; object-fit: cover;
}

.ufp-details {
    display: flex;
    flex-direction: column;
}

.ufp-name {
    font-weight: 800;
    font-size: 1rem;
    color: var(--color-text-main);
}

.ufp-checks {
    list-style: none;
    padding: 0; margin: 0;
}

.ufp-checks li {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.text-green { color: #16A34A !important; }

.upload-submit-zone {
    flex: 1;
    background: white;
    padding: 24px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Alert Success */
.alert-success-box {
    background-color: #DCFCE7;
    border: 1px solid #BBF7D0;
    border-radius: 12px;
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #166534;
}

/* Footer Pagination & Protection */
.footer-pagination {
    border-top: 2px solid #E2E8F0;
    padding-top: 24px;
}

.protection-banner {
    background-color: #F1F5F9;
    color: #475569;
    padding: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 600;
    font-size: 0.95rem;
}

@media (max-width: 1000px) {
    .simulacre-header-grid { flex-direction: column; }
    .sh-right { width: 100%; }
    .pre-exam-grid { grid-template-columns: 1fr; }
    .documents-grid { grid-template-columns: 1fr; }
    .flow-steps-container { flex-direction: column; gap: 24px; }
    .fs-arrow { transform: rotate(90deg); }
    .upload-flex-container { flex-direction: column; }
    .upload-arrow { display: none; }
    .alert-success-box { flex-direction: column; gap: 24px; align-items: flex-start; }
}

/* Resultats Simulacre */
.result-hero-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(90deg, #F0EAE1 0%, #F0EAE1 55%, transparent 55%), url('https://images.unsplash.com/photo-1544717297-fa95b6ee9643?q=80&w=1200&auto=format&fit=crop') right/cover no-repeat;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.rhc-left {
    width: 55%;
    padding: 48px;
    display: flex;
    justify-content: space-between;
}

.rhc-grade-section {
    display: flex;
    flex-direction: column;
}

.rhc-grade-label {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.rhc-badge-apte {
    background: var(--color-bombers-primary);
    color: white;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
}

.rhc-grade-number {
    font-size: 6rem;
    font-weight: 800;
    color: var(--color-text-main);
    line-height: 1;
    margin: 8px 0;
}

.rhc-grade-diff {
    font-size: 1rem;
    color: var(--color-text-main);
}

.rhc-stats-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding-left: 48px;
}

.rhc-stat-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rsr-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.25rem;
    font-weight: 600;
}

.rsr-num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text-main);
}

.rhc-stacked-bar {
    display: flex;
    height: 24px;
    width: 100%;
    margin-top: auto; /* Push to bottom */
}

.rsb-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.85rem;
    font-weight: 800;
}

.rsb-gold { background: var(--color-bombers-primary); }
.rsb-brown { background: #92400E; }
.rsb-gray { background: #E2E8F0; color: #475569; }

/* Metrics Grid 3 */
.metrics-3-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: transparent;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
}

.metric-card {
    padding: 32px 40px;
}

.mc-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.mc-big-stat strong {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-text-main);
}

.mbg-track {
    width: 100%;
    height: 8px;
    background: #E2E8F0;
    border-radius: 4px;
    position: relative;
}

.mbg-fill {
    height: 100%;
    background: #D4C49E;
    border-radius: 4px;
    position: absolute;
    left: 0; top: 0;
}

.mbg-marker {
    width: 4px;
    height: 16px;
    background: var(--color-text-main);
    position: absolute;
    top: -4px;
    border-radius: 2px;
}

.mc-compare-list div {
    margin-bottom: 4px;
    color: var(--color-text-main);
}

/* Result Tabs */
.result-tabs {
    display: flex;
    gap: 32px;
}

.rt-tab {
    padding: 16px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    position: relative;
}

.rt-tab.active {
    color: var(--color-text-main);
}

.rt-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 2px;
    background: var(--color-text-main);
}

/* Table */
.gesim-table {
    border-collapse: collapse;
    width: 100%;
}

.gesim-table th {
    padding: 16px 24px;
    background: #E5E0D5;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--color-text-main);
    border-bottom: 2px solid white;
}

.gesim-table td {
    padding: 16px 24px;
    border-bottom: 2px solid white;
    font-size: 0.95rem;
    color: var(--color-text-main);
}

.gesim-table tbody tr:nth-child(odd) {
    background: #F9F7F2; /* Beix clar altern */
}

.gesim-table tbody tr:hover {
    background: #F1E9DA;
}

.badge-green-pale {
    background: #DCFCE7;
    color: #166534;
}

.badge-yellow-pale {
    background: #FEF3C7;
    color: #92400E;
}

.badge-red-pale {
    background: #FEE2E2;
    color: #991B1B;
}

.badge-gray-pale {
    background: #E2E8F0;
    color: #475569;
}

.text-green-pale { color: #166534; }
.text-red-pale { color: #991B1B; }

/* Insights Grid */
.insights-3-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.insight-card {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.simple-ul {
    list-style: none;
    padding: 0; margin: 0;
}

.simple-ul li {
    font-size: 0.95rem;
    color: var(--color-text-main);
    padding: 6px 0;
}

.color-legend-ul li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cl-box {
    width: 16px;
    height: 8px;
    border-radius: 4px;
    display: inline-block;
}

@media (max-width: 1000px) {
    .result-hero-card {
        background: #F0EAE1;
        flex-direction: column;
    }
    .rhc-left {
        width: 100%;
        flex-direction: column;
        gap: 40px;
    }
    .rhc-stats-section {
        padding-left: 0;
    }
    .metrics-3-grid {
        grid-template-columns: 1fr;
    }
    .metric-card {
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid #E2E8F0;
    }
    .result-tabs {
        overflow-x: auto;
    }
    .insights-3-grid {
        grid-template-columns: 1fr;
    }
    .footer-actions {
        flex-direction: column;
        gap: 16px;
    }
    .footer-actions > div {
        flex-direction: column;
        width: 100%;
    }
    .footer-actions .btn {
        width: 100%;
    }
}

/* Estadístiques Generals (Rànquing) */
.hero-panel-grid {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.hero-panel-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-panel-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-text-main);
    letter-spacing: -0.02em;
}

.hero-panel-right {
    flex: 1;
}

.hero-panel-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 16px;
}

.main-tabs-nav {
    display: flex;
    gap: 32px;
    border-bottom: 2px solid #E2E8F0;
    margin-bottom: 40px;
}

.mt-tab {
    padding: 16px 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-main);
    text-decoration: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mt-tab.active {
    color: var(--color-text-main);
}

.mt-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 3px;
    background: var(--color-bombers-primary);
}

.badge-nou {
    background: #FEF08A; /* Groc viu */
    color: #854D0E;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
}

.dot-yellow {
    width: 8px; height: 8px;
    background: #FBBF24;
    border-radius: 50%;
    display: inline-block;
}

.ranking-layout-grid {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: 40px;
}

/* Taula de rànquing */
.ranking-table-col {
    position: relative;
    padding-bottom: 100px; /* Espai pel botó flotant i gradient */
}

.ranking-table {
    border-collapse: collapse;
}

.ranking-table th {
    padding: 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-main);
    border-bottom: 1px solid #E2E8F0;
}

.ranking-table td {
    padding: 16px;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: middle;
}

.ranking-table tr:last-child td { border: none; }

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

.rank-medal {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 800; border-radius: 50%;
}
.rank-medal.gold { background: #D4AF37; } /* Estrella/Medalla d'or simple simulada */

.rank-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0; /* Oculta número original excepte els estils per fer els puntets purs com la foto */
    margin-left: 10px;
}
.rank-dot.gold-dot { background: var(--color-bombers-primary); }
.rank-dot.gray-dot { background: #CBD5E1; }

.ranking-table tr td:first-child {
    width: 60px;
    font-weight: 800;
    color: var(--color-text-main);
}
.ranking-table tr:nth-child(n+5) td:first-child {
    font-size: 1rem;
    color: #94A3B8; /* Número gris normal per a les files 5 en endavant si es mostrés text */
}

.ranking-table tr:nth-child(n+5) .rank-dot {
    font-size: 0.95rem; /* Mostrar num */
    width: auto; height: auto; background: transparent; color: #94A3B8;
}

.fade-out-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 250px;
    background: linear-gradient(to bottom, rgba(249, 247, 242, 0) 0%, rgba(249, 247, 242, 1) 100%);
    pointer-events: none;
}

.floating-btn-container {
    position: absolute;
    bottom: 40px; left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

/* Sidebar Estadístiques */
.ranking-sidebar {
    display: flex;
    flex-direction: column;
}

.user-summary-card {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.usc-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-text-main);
    text-transform: uppercase;
}

.usc-big-number {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--color-bombers-primary);
    line-height: 1;
}

.section-title-md {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-text-main);
}

.key-stat-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.ksc-num {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-text-main);
    line-height: 1;
    margin-bottom: 8px;
}

.ksc-label {
    font-size: 0.95rem;
    color: var(--color-text-main);
    font-weight: 500;
}

@media (max-width: 1000px) {
    .hero-panel-grid { flex-direction: column; }
    .hero-panel-title { font-size: 2.5rem; }
    .ranking-layout-grid { grid-template-columns: 1fr; }
    .main-tabs-nav { overflow-x: auto; white-space: nowrap; }
}

/* Modal Al·legació */
.modal-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px;
    overflow-y: auto;
}

.modal-allegacio {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 800px;
    padding: 32px 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    position: relative;
    margin: auto;
}

.ma-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ma-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 8px;
}

.ma-close-btn {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-muted);
    cursor: pointer;
}

.ma-subtitle {
    font-size: 0.95rem;
    color: var(--color-text-main);
}

.form-2-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.asb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    font-size: 0.95rem;
    color: var(--color-text-main);
}

/* Flotants de Llegenda i Avís (Esquerra) */
.floating-left-container {
    position: fixed;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
}

.floating-alert-success {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    text-align: center;
}

.fas-icon {
    width: 48px; height: 48px;
    background: #16A34A;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    margin: 0 auto 16px;
}

.fas-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 8px;
}

.fas-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.fas-link {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-decoration: underline;
    font-weight: 600;
}

.floating-legend {
    background: white;
    border-radius: 12px;
    padding: 16px 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.fl-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--color-text-main);
    font-weight: 600;
    margin-bottom: 12px;
}
.fl-item:last-child { margin-bottom: 0; }

@media (max-width: 1200px) {
    .floating-left-container { display: none; /* Amagar els flotants si la pantalla no és molt ampla */ }
}

@media (max-width: 768px) {
    .form-2-col-grid { grid-template-columns: 1fr; }
    .asb-grid { grid-template-columns: 1fr; }
    .modal-allegacio { padding: 24px; }
}

/* Gestió de l'examen */
.header-flex-progress {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.hfp-text {
    flex: 1;
    max-width: 700px;
}

.progress-block-card {
    background: #F8F6F0;
    border-radius: 12px;
    padding: 16px 24px;
    width: 260px;
}

.resume-hero-card {
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    display: flex;
    overflow: hidden;
    min-height: 260px;
}

.rhc-image {
    width: 35%;
    position: relative;
}

.rhc-image img {
    width: 100%; height: 100%; object-fit: cover;
}

.rhc-content {
    width: 65%;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
}

.video-grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.video-media-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
}

.vmc-thumbnail {
    position: relative;
    height: 240px;
}

.vmc-thumbnail img {
    width: 100%; height: 100%; object-fit: cover;
}

.vmc-number-badge {
    position: absolute;
    top: 16px; right: 16px;
    background: rgba(0,0,0,0.4);
    color: white;
    font-size: 1.1rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 8px;
}

.vmc-play-overlay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}
.vmc-play-overlay:hover {
    background: rgba(0,0,0,0.8);
    transform: translate(-50%, -50%) scale(1.05);
}

.vmc-body {
    padding: 32px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.vmc-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-text-main);
    display: flex; align-items: center;
}

.vmc-desc {
    font-size: 1rem;
    color: var(--color-text-main);
}

@media (max-width: 1000px) {
    .header-flex-progress { flex-direction: column; gap: 24px; }
    .resume-hero-card { flex-direction: column; }
    .rhc-image { width: 100%; height: 200px; }
    .rhc-content { width: 100%; }
    .rhc-content > .flex { flex-direction: column; gap: 24px; }
    .rhc-actions { align-items: flex-start !important; margin-left: 0; }
    .h-mobile-auto { height: auto !important; }
    .video-grid-2-col { grid-template-columns: 1fr; }
}

/* Gestió dels Nervis */
.badge-light-gold {
    background: #FDF4E1; /* Fons crema molt clar */
    color: #B48733; /* Text daurat fosc */
    border-radius: 20px;
    font-weight: 800;
}

/* Progress Donut CSS-only */
.progress-donut-card {
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.css-donut {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    /* Truc CSS per fer el gràfic de pastís amb var(--percent) */
    background: conic-gradient(var(--color-bombers-primary) calc(var(--percent) * 1%), #E2E8F0 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

.css-donut .donut-inner {
    width: 54px;
    height: 54px;
    background: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--color-text-main);
}

/* Resume Pill Horizontal */
.resume-horizontal-pill {
    background: white;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    gap: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.rhp-image {
    width: 380px;
    height: 220px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.rhp-image img {
    width: 100%; height: 100%; object-fit: cover;
}

.rhp-content {
    flex: 1;
}

/* Llista horitzontal de vídeos */
.video-list-card-h {
    background: white;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    gap: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border: 1px solid #F1F5F9;
}

.vlch-image {
    width: 320px;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.vlch-image img {
    width: 100%; height: 100%; object-fit: cover;
}

.vlch-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1000px) {
    .resume-horizontal-pill { flex-direction: column; padding: 16px; }
    .rhp-image { width: 100%; height: auto; aspect-ratio: 16/9; }
    .rhp-content > .flex { flex-direction: column; gap: 24px; }
    .rhp-actions { align-items: flex-start !important; }
    
    .video-list-card-h { flex-direction: column; padding: 16px; }
    .vlch-image { width: 100%; height: auto; aspect-ratio: 16/9; }
    .vlch-body > .flex.justify-between.align-end { flex-direction: column; gap: 24px; align-items: stretch; }
    .vlch-body .btn { width: 100%; }
}

/* Llista de Recursos */
.badge-red-solid {
    background: #991B1B;
    color: white;
    border-radius: 20px;
    padding: 4px 10px;
    font-weight: 800;
}

.badge-green-solid {
    background: #D1FAE5;
    color: #065F46;
    border-radius: 20px;
    padding: 4px 10px;
    font-weight: 800;
}

.badge-yellow-solid {
    background: #FEF3C7;
    color: #92400E;
    border-radius: 20px;
    padding: 4px 10px;
    font-weight: 800;
}

.filters-bar {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.resource-list-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    gap: 32px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    border: 1px solid #F1F5F9;
}

.rlc-thumbnail {
    width: 140px;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.rlc-thumbnail::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(60,30,0,0.85) 0%, rgba(60,30,0,0.2) 100%);
}

.rlc-thumb-overlay {
    position: absolute;
    top: 50%; left: 16px; right: 16px;
    transform: translateY(-50%);
    z-index: 2;
    color: white;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
}

.rlc-body {
    flex: 1;
}

.rlc-actions {
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.rlc-floating-badge {
    position: absolute;
    top: -12px; right: -12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .filters-bar { flex-direction: column; padding: 16px; background: transparent; box-shadow: none; }
    .filters-bar .form-control { width: 100% !important; margin-bottom: 12px; }
    .resource-list-card { flex-direction: column; padding: 16px; }
    .rlc-thumbnail { width: 100%; height: 180px; }
    .rlc-actions { width: 100%; }
    .rlc-floating-badge { position: relative; top: 0; right: 0; margin-bottom: 16px; align-self: flex-end; }
}

/* Calendari Hero */
.calendar-hero-header {
    height: 180px;
    background: #F9F7F2;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.calendar-hero-header::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 50%;
    background-image: url('https://images.unsplash.com/photo-1599708153386-62bf3f034eb1?q=80&w=1200&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    mask-image: linear-gradient(to right, transparent 0%, black 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 100%);
    opacity: 0.6;
    z-index: 1;
}

/* Toggle Group */
.toggle-group-wrapper {
    display: inline-flex;
}

/* Calendari Grid */
.calendar-grid-app {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
}

.cg-header {
    background: #F8FAFC;
    padding: 12px 16px;
    font-weight: 800;
    color: var(--color-text-main);
    text-align: center;
    border-bottom: 1px solid #E2E8F0;
    border-right: 1px solid #E2E8F0;
}
.cg-header:last-child { border-right: none; }

.cg-cell {
    min-height: 120px;
    padding: 8px;
    border-right: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cg-cell:nth-child(7n) { border-right: none; }

.cg-date {
    font-size: 1.1rem;
    padding: 4px 8px;
    margin-bottom: 4px;
}

.cg-cell-today {
    background: var(--color-bombers-primary);
}
.cg-cell-today .cg-date {
    color: white;
}

.event-line {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.event-class { color: #B48733; }
.event-simulacrum { color: #DC2626; }
.event-deadline { color: #64748B; }

.badge-light-gray {
    background: #E2E8F0;
    color: var(--color-text-main);
    border-radius: 12px;
    font-weight: 800;
}

/* Popover Calendari */
.calendar-popover {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    z-index: 100;
    overflow: hidden;
    /* Comentat per mostrar a maqueta: display: none; */
}

.cpo-header {
    position: relative;
    height: 130px;
    overflow: hidden;
}
.cpo-header img {
    width: 100%; height: 100%; object-fit: cover;
}
.cpo-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.1));
    z-index: 1;
}
.cpo-header-content {
    position: absolute;
    bottom: 12px; left: 16px; right: 16px;
    z-index: 2;
}

/* Esdeveniments (Properes activitats) */
@media (max-width: 1000px) {
    .calendar-grid-app {
        display: flex;
        flex-direction: column;
    }
    .cg-header { display: none; }
    .cg-cell { min-height: auto; padding: 16px; }
    .event-row { flex-direction: column; gap: 16px; align-items: flex-start !important; }
    .event-row > .flex { flex-direction: column; gap: 8px; align-items: flex-start !important; }
}

/* Administració */
.admin-kpis-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 1100px) {
    .admin-kpis-grid, .alert-cards-grid, .admin-quick-actions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .admin-dashboard-split-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .admin-kpis-grid, .alert-cards-grid, .admin-quick-actions-grid {
        grid-template-columns: 1fr !important;
    }
    .alert-cards-grid {
        margin-top: 0 !important;
    }
}

/* Llista de Continguts Administració */
.admin-list-item {
    display: grid;
    grid-template-columns: 24px 64px 3fr 1.5fr 1.5fr 1.5fr 100px 32px 100px 24px;
    gap: 16px;
    min-height: 80px;
}

.ali-drag { width: 24px; }
.ali-thumb { width: 64px; height: 64px; flex-shrink: 0; }
.ali-title { overflow: hidden; }
.ali-meta { overflow: hidden; }

.badge-status {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
}

.badge-published { background: #DCFCE7; color: #166534; }
.badge-scheduled { background: #DBEAFE; color: #1E40AF; }
.badge-draft { background: #F1F5F9; color: #475569; }

.btn-outline-admin {
    background: transparent;
    border: 1px solid #E2E8F0;
    color: var(--color-text-main);
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
}
.btn-outline-admin:hover {
    background: #F8FAFC;
}

@media (max-width: 1200px) {
    .admin-list-item {
        grid-template-columns: 24px 64px 2fr 1fr 1fr 100px 32px 100px 24px;
    }
    .ali-meta:nth-child(6) { display: none; } /* Amaga data */
}

@media (max-width: 900px) {
    .admin-list-item {
        grid-template-columns: 24px 64px 1fr 100px 32px 40px;
    }
    .ali-meta, .ali-action span { display: none; } /* Amaga seccions i text botó */
    .ali-action button { padding: 8px; }
}

/* Editor de Classes (Administració) */
.admin-editor-grid {
    display: grid;
    grid-template-columns: 350px 1fr 300px;
    gap: 32px;
}

.form-control-admin {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--color-text-main);
    font-family: inherit;
    font-size: 0.9rem;
}
.form-control-admin:focus {
    outline: none;
    border-color: #B48733;
}

.admin-toggle-switch {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    position: relative;
    transition: all 0.3s;
}
.admin-toggle-switch.toggle-on {
    background: #B48733;
}
.admin-toggle-switch.toggle-off {
    background: #E2E8F0;
}
.admin-toggle-switch .toggle-circle {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    transition: all 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.admin-toggle-switch.toggle-on .toggle-circle {
    left: 22px;
}
.admin-toggle-switch.toggle-off .toggle-circle {
    left: 2px;
}

.admin-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: white;
    border: 1px solid #E2E8F0;
}
.admin-checkbox.checked {
    background: #B48733;
    border-color: #B48733;
}

@media (max-width: 1200px) {
    .admin-editor-grid {
        grid-template-columns: 300px 1fr 250px;
        gap: 24px;
    }
}

@media (max-width: 992px) {
    .admin-editor-grid {
        grid-template-columns: 1fr;
    }
    .admin-editor-grid > div {
        margin-top: 0 !important;
    }
}

/* Gestió d'Alumnes (Administració) */
.admin-students-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 32px;
}

.student-list-row {
    display: grid;
    grid-template-columns: 280px 1fr 120px 150px 80px;
    gap: 16px;
    align-items: center;
    transition: background-color 0.2s;
}
.student-list-row:hover {
    background: #F8FAFC;
}

.avatar-circle-sm {
    font-size: 0.9rem;
}

.mini-progress-bar {
    width: 100%;
    height: 4px;
    background: #E2E8F0;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}
.mini-progress-bar .fill {
    height: 100%;
    background: #B48733;
}

.badge-active-sm {
    background: #DCFCE7;
    color: #166534;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 800;
}
.badge-inactive-sm {
    background: #E2E8F0;
    color: #475569;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 800;
}

@media (max-width: 1200px) {
    .admin-students-layout {
        grid-template-columns: 1fr;
    }
    .student-list-row {
        grid-template-columns: 250px 1fr 100px 100px 80px;
    }
}

@media (max-width: 900px) {
    .student-list-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .student-list-row > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .student-list-row > div:first-child {
        justify-content: flex-start;
        margin-bottom: 8px;
    }
}

/* Gestió de Simulacres (Administració) */
.admin-exams-layout {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 32px;
}

.exam-card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.exam-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.badge-alert-yellow {
    display: inline-block;
    background: #FEF08A;
    color: #854D0E;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 800;
}

.admin-timeline {
    position: relative;
    padding-left: 12px;
    border-left: 1px solid #E2E8F0;
    margin-left: 6px;
}
.admin-timeline .timeline-item {
    position: relative;
    margin-bottom: 12px;
}
.admin-timeline .timeline-item:last-child {
    margin-bottom: 0;
}

@media (max-width: 1200px) {
    .admin-exams-layout {
        grid-template-columns: 1fr 350px;
        gap: 24px;
    }
}

@media (max-width: 900px) {
    .admin-exams-layout {
        grid-template-columns: 1fr;
    }
}

/* Estadístiques de Simulacres (Administració) */
.css-chart-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    width: 10%;
    position: relative;
    z-index: 5;
}
.css-chart-col .css-bar {
    width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    transition: height 0.5s ease-out;
}
.css-chart-col .css-label {
    margin-top: 8px;
    color: var(--color-text-main);
}

.badge-red-light {
    background: #FEE2E2;
    color: #991B1B;
}
.badge-yellow-light {
    background: #FEF08A;
    color: #854D0E;
}

@media (max-width: 1100px) {
    .flex-wrap > .flex-grow-1 {
        flex-basis: 40% !important;
    }
}
@media (max-width: 768px) {
    .flex-wrap > .flex-grow-1 {
        flex-basis: 100% !important;
    }
}

/* Safata d'Entrada (Dubtes i Al·legacions) */
.admin-inbox-layout {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 32px;
}

.ticket-card {
    display: grid;
    grid-template-columns: 120px 1fr 100px 120px 100px;
    gap: 16px;
    transition: background-color 0.2s, transform 0.2s;
    cursor: pointer;
}
.ticket-card:hover {
    background: #F8FAFC;
    transform: translateY(-1px);
}
.ticket-card-active:hover {
    background: #FEFCF8;
}

.badge-ticket-dubte {
    background: #FEF3C7;
    color: #92400E;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 800;
    display: inline-block;
    width: max-content;
}
.badge-ticket-allegacio {
    background: #D97706;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 800;
    display: inline-block;
    width: max-content;
}

.badge-status-new {
    background: #FEF08A;
    color: #854D0E;
    padding: 4px 10px;
    border-radius: 16px;
    font-weight: 800;
}
.badge-status-review {
    background: #D97706;
    color: white;
    padding: 4px 10px;
    border-radius: 16px;
    font-weight: 800;
}
.badge-status-assigned {
    background: #FEF3C7;
    color: #B45309;
    padding: 4px 10px;
    border-radius: 16px;
    font-weight: 800;
}
.badge-status-grouped {
    background: #E2E8F0;
    color: #475569;
    padding: 4px 10px;
    border-radius: 16px;
    font-weight: 800;
}
.badge-status-resolved {
    background: #DCFCE7;
    color: #166534;
    padding: 4px 10px;
    border-radius: 16px;
    font-weight: 800;
}

@media (max-width: 1200px) {
    .admin-inbox-layout {
        grid-template-columns: 1fr;
    }
    .ticket-card {
        grid-template-columns: 100px 1fr 100px;
    }
    .tc-resp, .tc-status {
        display: none !important;
    }
}