/* ==========================================================================
   SICAP CAMPUS - ESTILOS MAESTROS (v33.0 - ALL FIXES INCLUDED)
   ========================================================================== */

/* 1. VARIABLES */
:root {
    --brand-blue: #004B87;
    --brand-red: #E30613;
    
    --bg-body: #f2f4f7;
    --bg-card: #ffffff;
    --text-main: #333333;
    --text-secondary: #666666;
    --border-color: #dfe1e5;
    --bg-image-container: #f8f9fa; 
    --bg-input: #ffffff;
    
    --quiz-question-bg: #f8f9fa;
    --quiz-feedback-bg: #fff3cd;
    
    --correct-bg: #d4edda; --correct-border: #c3e6cb; --correct-text: #155724;
    --wrong-bg: #f8d7da; --wrong-border: #f5c6cb; --wrong-text: #721c24;
    --selected-bg: #e3f2fd; --selected-border: #2196f3; --selected-text: #0d47a1;
    
    --chat-bg-mine: #dcf8c6; --chat-text-mine: #075e54;
    --chat-bg-other: #ffffff; --chat-text-other: #333333;
    
    --modal-bg: #ffffff; --modal-text: #333333;
    --modal-btn-cancel-bg: #f1f3f5; --modal-btn-cancel-text: #495057;

    scrollbar-width: thin;
    scrollbar-color: var(--brand-blue) transparent;
}

[data-theme="dark"] {
    --brand-blue: #4da3ff; 
    --bg-body: #121212;
    --bg-card: #1e1e1e;
    --text-main: #e0e0e0;
    --text-secondary: #aaaaaa;
    --border-color: #333333;
    --bg-image-container: #1e1e1e; 
    --bg-input: #2c2c2c;
    
    --quiz-question-bg: #2c3e50;
    --quiz-feedback-bg: #4a3b20;
    
    --correct-bg: #1b4d3e; --correct-border: #2e7d32; --correct-text: #d4edda;
    --wrong-bg: #5c1e23; --wrong-border: #7a282e; --wrong-text: #f8d7da;
    --selected-bg: #1565c0; --selected-border: #42a5f5; --selected-text: #ffffff;
    
    --modal-bg: #252525; --modal-text: #ffffff;
    --modal-btn-cancel-bg: #333333; --modal-btn-cancel-text: #e0e0e0;
    
    --chat-bg-mine: #005c4b; --chat-text-mine: #e0f2f1;
    --chat-bg-other: #2c2c2c; --chat-text-other: #e0e0e0;

    scrollbar-color: #555 #2c2c2c;
}

/* 2. GENERAL */
* { box-sizing: border-box; }
body { font-family: 'Roboto', sans-serif; background-color: var(--bg-body); color: var(--text-main); line-height: 1.6; margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3 { color: var(--brand-blue); margin-top: 0; }
a { text-decoration: none; color: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 0; }
input, textarea, select { background-color: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); font-family: inherit; }

@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInView { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-active { animation: fadeInView 0.4s ease-out forwards; }
.loader { border: 4px solid #f3f3f3; border-top: 4px solid var(--brand-blue); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; }

/* Rich Text */
.module-content-text ul, .module-content-text ol { margin-left: 20px !important; margin-bottom: 15px; padding-left: 20px; }
.module-content-text ul { list-style-type: disc !important; }
.module-content-text ol { list-style-type: decimal !important; }
.module-content-text li { margin-bottom: 5px; }

/* SCROLLBARS */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--brand-blue); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #555; }

/* 3. BOTONES */
.btn-primary, .btn-enroll { border: none; border-radius: 6px; font-weight: bold; cursor: pointer; width: 100%; transition: 0.3s; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 15px; font-size: 1rem; margin-top: auto; gap: 10px; }
.btn-primary { background-color: var(--brand-red); color: white; }
.btn-primary:hover { background-color: #c40511; transform: translateY(-2px); }
.btn-enroll { background-color: var(--brand-blue) !important; color: white !important; }
.btn-enroll:hover { background-color: #003865 !important; }
.btn-secondary { background: transparent !important; color: #004B87 !important; border: 1px solid #004B87 !important; padding: 8px 20px; border-radius: 4px; cursor: pointer; }
.btn-small { padding: 6px 12px; font-size: 0.85rem; border-radius: 4px; background-color: var(--bg-body); border: 1px solid var(--border-color); color: var(--text-main); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.btn-centered-container { display: flex; justify-content: center; margin-top: 30px; width: 100%; }
.btn-centered-container .btn-primary { width: auto; min-width: 300px; }
.btn-pdf { display: flex; align-items: center; gap: 12px; background-color: white; color: #333; border: 1px solid #ddd; padding: 12px 15px; border-radius: 6px; font-weight: 500; text-decoration: none; transition: all 0.2s; margin-bottom: 10px; width: 100%; max-width: 400px; }
.btn-pdf:hover { border-color: var(--brand-red); color: var(--brand-red); background-color: #fff5f5; transform: translateX(5px); }
.btn-doubt { width: 100%; background-color: white; border: 2px dashed var(--brand-blue); color: var(--brand-blue); padding: 10px; border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-doubt:hover { background-color: #f0f8ff; border-style: solid; }
[data-theme="dark"] .btn-pdf { background-color: #2c2c2c; color: #e0e0e0; border-color: #444; }
[data-theme="dark"] .btn-pdf:hover { background-color: #383838; border-color: var(--brand-red); }
[data-theme="dark"] .btn-doubt { background-color: transparent; border-color: #64b5f6; color: #64b5f6; }
[data-theme="dark"] .btn-doubt:hover { background-color: rgba(100, 181, 246, 0.1); }

/* 4. LOGIN & HEADER */
.login-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #0f172a !important; background-image: radial-gradient(circle at 0% 0%, rgba(0, 75, 135, 0.55) 0%, transparent 50%), radial-gradient(circle at 100% 100%, rgba(227, 6, 19, 0.35) 0%, transparent 50%) !important; display: flex; z-index: 10000; color: #333 !important; overflow-y: auto; padding: 20px 10px; }
.login-card { background-color: #ffffff !important; padding: 3rem 2.5rem; width: 100%; max-width: 450px; border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important; text-align: center; border: 1px solid rgba(255,255,255,0.1); margin: auto; }
.login-logo { max-width: 220px; margin-bottom: 2rem; }
.input-group { margin-bottom: 1.2rem; text-align: left; }
.input-group input { width: 100%; padding: 14px 16px; font-size: 1rem; border: 1px solid #ccc !important; border-radius: 6px; outline: none; background-color: #fff !important; color: #333 !important; }
.btn-login { width: 100%; padding: 14px; background-color: #004B87 !important; color: white !important; font-size: 1.1rem; font-weight: bold; border: none; border-radius: 6px; cursor: pointer; margin-top: 1rem; }
.login-footer, .register-section, .cookie-notice, .login-error { margin-top: 1.5rem; color: #666 !important; font-size: 0.9rem; }
.login-error { background: #fce8e9 !important; color: #E30613 !important; padding: 10px; border-left: 4px solid #E30613 !important; }

/* HEADER */
.main-header { background: var(--bg-card); height: 70px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); position: relative; z-index: 1000; }
.header-content { max-width: 1400px; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.header-left-group { display: flex; align-items: center; gap: 30px; }
.header-logo { max-height: 55px; width: auto; }
.header-nav { display: flex; gap: 5px; }
.nav-link { text-decoration: none; color: var(--text-secondary); font-weight: 500; padding: 8px 15px; border-radius: 6px; transition: all 0.2s; }
.nav-link:hover { background-color: var(--bg-body); color: var(--brand-blue); }
.nav-link.active { color: var(--brand-blue); background-color: rgba(0, 75, 135, 0.05); font-weight: 600; }
.header-right { display: flex; align-items: center; gap: 15px; }
.btn-icon { background: none; border: none; color: var(--text-secondary); font-size: 1.2rem; cursor: pointer; padding: 5px; }
.icon-wrapper { position: relative; cursor: pointer; color: var(--text-secondary); font-size: 1.2rem; padding: 8px; }
.notification-dot { display: none; position: absolute; top: 0px; right: 0px; min-width: 16px; height: 16px; background-color: var(--brand-red); color: white; border-radius: 50%; font-size: 10px; align-items: center; justify-content: center; font-weight: bold; border: 2px solid #fff; }
.header-divider { width: 1px; height: 30px; background-color: var(--border-color); margin: 0 5px; }

/* HAMBURGUESA OCULTA EN ESCRITORIO */
.mobile-menu-btn { display: none !important; z-index: 1002; background: none; border: none; font-size: 1.4rem; color: var(--text-main); cursor: pointer; margin-right: 10px; }

/* USER DROPDOWN */
.user-profile-container { display: flex; align-items: center; gap: 8px; cursor: pointer; position: relative; z-index: 1002; }
.user-avatar-circle { width: 40px; height: 40px; background-color: var(--bg-body); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: bold; color: var(--brand-blue); font-size: 0.9rem; border: 1px solid var(--border-color); flex-shrink: 0; }
.user-dropdown { display: none; position: absolute; top: 60px; right: 0; width: 240px; background-color: var(--bg-card); border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); border: 1px solid var(--border-color); flex-direction: column; overflow: hidden; z-index: 99999; }
.user-dropdown.show { display: flex; }
.user-dropdown ul { list-style: none; margin: 0; padding: 0; }
.user-dropdown li { border-bottom: 1px solid var(--border-color); }
.user-dropdown li:last-child { border-bottom: none; }
.dropdown-header { padding: 15px; border-bottom: 1px solid var(--border-color); background-color: var(--bg-body); }
.dropdown-header strong { display: block; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropdown-header small { display: block; color: var(--text-secondary); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-dropdown ul li a { display: flex; padding: 12px 15px; color: var(--text-main); font-size: 0.9rem; transition: background 0.2s; align-items: center; gap: 10px; text-decoration: none; }
.user-dropdown ul li a:hover { background-color: var(--bg-body); color: var(--brand-blue); }

/* 5. DASHBOARD & COURSES */
.container-dashboard { max-width: 1000px; margin: 40px auto; padding: 20px; flex-grow: 1; width: 100%; }
.dashboard-card { background-color: var(--bg-card); border-radius: 12px; padding: 40px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border-top: 5px solid var(--brand-blue); }
.courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; }
.course-card-item { background: var(--bg-body); border-radius: 8px; border: 1px solid var(--border-color); transition: transform 0.2s, border-color 0.2s; overflow: hidden; display: flex; flex-direction: column; min-height: 480px; }
.course-card-item:hover { transform: translateY(-3px); border-color: var(--brand-blue); }
.card-image-header {
    width: 100%; /* Aseguramos que ocupe todo el ancho */
    height: auto; /* Dejamos que la altura se calcule sola */
    aspect-ratio: 16/9; /* SOLUCIÓN: Mantiene proporción panorámica siempre */
    background-size: cover;
    background-position: center center; 
    background-color: var(--bg-image-container);
    position: relative;
    border-bottom: 1px solid var(--border-color);
}
.course-badge { position: absolute; top: 15px; left: 15px; background-color: var(--brand-blue); color: white; padding: 4px 12px; font-size: 0.75rem; font-weight: bold; border-radius: 4px; text-transform: uppercase; }
.card-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.course-title { font-size: 1.15rem; margin-bottom: 5px; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-hours { font-size: 0.85rem; color: #666; font-weight: 500; margin-bottom: 10px; display: flex; align-items: center; gap: 5px; }
.course-desc-container { margin-bottom: 15px; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.4; }
.course-desc { margin: 0; text-align: justify; }
.course-desc.short { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.read-more-link { color: var(--brand-blue); font-size: 0.85rem; font-weight: bold; cursor: pointer; display: inline-block; margin-top: 5px; }
.progress-container { margin-bottom: 15px; margin-top: auto; }
.progress-bar { height: 8px; background-color: #e0e0e0; border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
[data-theme="dark"] .progress-bar { background-color: #444; }
.progress-fill { height: 100%; transition: width 0.8s ease-in-out; }
.progress-text { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; }
.course-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; align-items: center; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: 0.5px; }
.tag-date { background-color: #f1f3f5; color: #495057; border: 1px solid #dee2e6; }
.tag-status { background-color: #e7f5ff; color: #004085; border: 1px solid #b8daff; }
.tag-future { background-color: #fff9db; color: #856404; border: 1px solid #ffeeba; }
[data-theme="dark"] .tag-date { background-color: #2c2c2c; color: #e0e0e0; border-color: #444; }
[data-theme="dark"] .tag-status { background-color: #0d2b4e; color: #90caf9; border-color: #1565c0; }
[data-theme="dark"] .tag-future { background-color: #3e320a; color: #ffd700; border-color: #665c20; }

/* 6. PERFIL */
.profile-grid-layout { display: grid; grid-template-columns: 250px 1fr; gap: 30px; }
.profile-sidebar-card { text-align: center; padding: 20px; background: var(--bg-body); border-radius: 8px; height: fit-content; }
.user-avatar-big { width: 100px; height: 100px; background: var(--brand-blue); color: white; border-radius: 50%; font-size: 2.5rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; }
.badge-role { background: #d4edda; color: #155724; padding: 2px 10px; border-radius: 10px; font-size: 0.8rem; font-weight: bold; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.span-2 { grid-column: span 2; }
.profile-data-form input { background-color: #f9f9f9; border: 1px solid #ddd; color: #555; cursor: not-allowed; padding: 10px; width: 100%; border-radius: 4px; }
.profile-data-form label { font-size: 0.85rem; font-weight: bold; color: var(--brand-blue); margin-bottom: 5px; display: block; }
[data-theme="dark"] .profile-data-form input { background-color: #2c2c2c !important; border-color: #444 !important; color: #eee !important; }
.profile-stats-box { margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--border-color); text-align: left; }
.stat-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 0.9rem; color: var(--text-secondary); }
.stat-divider { height: 1px; background: #eee; margin: 10px 0; }

/* 7. LMS & SIDEBARS */
.app-container { display: flex; width: 100%; min-height: calc(100vh - 80px); padding: 20px; gap: 20px; justify-content: center; flex-grow: 1; }
.sidebar-left, .sidebar-right { width: 280px; flex-shrink: 0; background: var(--bg-card); border-radius: 8px; padding: 20px; height: fit-content; max-height: calc(100vh - 100px); overflow-y: auto; border: 1px solid var(--border-color); position: sticky; top: 90px; }
.main-content { flex-grow: 1; max-width: 900px; min-width: 0; }
.exam-card { background: var(--bg-card); border-radius: 8px; padding: 40px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid var(--border-color); border-top: 4px solid var(--brand-red); }
.sidebar-header h3 { font-size: 1.1rem; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 15px; color: var(--brand-blue); }
.sidebar-module-group { margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.sidebar-module-title { font-weight: bold; color: var(--brand-blue); padding: 10px; display: flex; justify-content: space-between; align-items: center; background: var(--bg-body); border-radius: 6px; margin-bottom: 5px; cursor: pointer; transition: background 0.2s; }
.sidebar-module-title::after { content: '\f078'; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.8rem; transition: transform 0.3s; }
.sidebar-module-group.open .sidebar-module-title::after { transform: rotate(180deg); }
.sidebar-module-group.open .sidebar-module-title { background-color: #eef2f5; }
.sidebar-sub-menu { display: none; padding-left: 5px; overflow: hidden; }
.sidebar-module-group.open .sidebar-sub-menu { display: block; animation: slideDown 0.3s ease-out; }
.sidebar-subitem { display: flex; align-items: center; padding: 8px 10px 8px 25px; font-size: 0.9rem; color: #555; cursor: pointer; border-left: 3px solid transparent; transition: all 0.2s; }
.sidebar-subitem:hover { background-color: #f0f4f8; color: var(--brand-blue); }
.sidebar-subitem.active { border-left-color: var(--brand-red); background-color: #eef2f5; font-weight: 600; color: var(--brand-blue); }
.sidebar-file-item { font-size: 0.85rem; color: #555; padding: 8px 10px 8px 45px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s; border-left: 3px solid transparent; text-decoration: none; }
.sidebar-file-item:hover { background-color: #fff; color: var(--brand-red); padding-left: 50px; }
[data-theme="dark"] .sidebar-left, [data-theme="dark"] .sidebar-right { background-color: #1e1e1e; border-color: #333; }
[data-theme="dark"] .sidebar-module-title { background-color: #2c2c2c; color: #e0e0e0; }
[data-theme="dark"] .sidebar-module-group.open .sidebar-module-title { background-color: #333; color: #ffffff; }
[data-theme="dark"] .sidebar-subitem { color: #aaaaaa; }
[data-theme="dark"] .sidebar-subitem:hover { background-color: #2a2a2a !important; color: #fff; }
[data-theme="dark"] .sidebar-subitem.active { background-color: rgba(66, 165, 245, 0.15); color: #64b5f6; border-left-color: #64b5f6; }
[data-theme="dark"] .sidebar-file-item:hover { background-color: #333 !important; color: var(--brand-red) !important; }
.sidebar-module-group.locked-module { opacity: 0.6; pointer-events: none; filter: grayscale(100%); }

/* 8. EXAMEN */
.question-card { margin-bottom: 25px; padding: 25px; background: var(--bg-card); border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border: 1px solid var(--border-color); }
.q-header { background-color: var(--brand-blue); color: white; padding: 8px 15px; border-radius: 4px; display: inline-block; font-weight: bold; font-size: 0.9rem; margin-bottom: 15px; }
.q-text { font-size: 1.1rem; font-weight: 500; margin-bottom: 20px; line-height: 1.5; }
.option-item { display: flex; align-items: center; padding: 12px 15px; margin-bottom: 10px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; transition: all 0.2s; background-color: var(--bg-card); }
.option-item:hover { border-color: var(--brand-blue); background-color: var(--bg-body); }
.option-radio { margin-right: 12px; accent-color: var(--brand-blue); transform: scale(1.2); }
.option-item.selected { background-color: var(--selected-bg) !important; border-color: var(--brand-blue) !important; }
.review-mode .option-item { pointer-events: none; opacity: 0.9; }
.review-mode .option-item.correct-answer { background-color: #d4edda !important; border-color: #28a745 !important; color: #155724 !important; font-weight: bold; }
.review-mode .option-item.correct-answer::after { content: ' ✓ Correcta'; font-weight: bold; margin-left: 10px; }
.review-mode .option-item.user-wrong { background-color: #f8d7da !important; border-color: #dc3545 !important; color: #721c24 !important; }
.review-mode .option-item.user-wrong::after { content: ' ✗ La teva resposta'; margin-left: 10px; }
[data-theme="dark"] .question-card { background-color: #1e1e1e !important; border-color: #333 !important; }
[data-theme="dark"] .q-text { color: #f0f0f0; }
[data-theme="dark"] .option-item { background-color: #2c2c2c; border-color: #444; color: #ccc; }
[data-theme="dark"] .option-item:hover { background-color: #383838; border-color: var(--brand-blue); }
[data-theme="dark"] .review-mode .option-item.correct-answer { background-color: #1b4d3e !important; border-color: #2e7d32 !important; color: #d4edda !important; }
[data-theme="dark"] .review-mode .option-item.user-wrong { background-color: #5c1e23 !important; border-color: #7a282e !important; color: #f8d7da !important; }
.explanation-box { background-color: #e8f0fe; border-left: 4px solid var(--brand-blue); padding: 15px; margin-top: 15px; font-size: 0.9rem; color: #333; border-radius: 0 4px 4px 0; }
[data-theme="dark"] .explanation-box { background-color: #1e2a38; color: #e0e0e0; border-left-color: #64b5f6; }
.exam-info-box { background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0; text-align: left; display: inline-block; border: 1px solid transparent; }
[data-theme="dark"] .exam-info-box { background-color: #2c2c2c; border-color: #444; color: #e0e0e0; }

/* 9. MATERIALES Y GAMIFICACIÓN */
.materials-section { background-color: #f8f9fa; border: 1px solid #e0e0e0; border-left: 4px solid var(--brand-red); padding: 20px; margin-bottom: 30px; border-radius: 4px; }
.materials-title { font-size: 0.9rem; color: #666; text-transform: uppercase; font-weight: bold; margin-bottom: 10px; display: block; }
[data-theme="dark"] .materials-section { background-color: #1e1e1e; border-color: #444; color: #e0e0e0; }
[data-theme="dark"] .materials-title { color: #aaaaaa; }
.flashcards-grid-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; margin-top: 20px; }
.flashcard { background-color: transparent; width: 100%; height: 350px; perspective: 1000px; cursor: pointer; }
.flashcard-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border-radius: 12px; }
.flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard-front, .flashcard-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 20px; flex-direction: column; overflow-y: auto; }
.flashcard-front { background-color: white; color: var(--brand-blue); border: 2px solid var(--brand-blue); }
.flashcard-front h4 { margin: 0 0 15px 0; font-size: 1.2rem; color: var(--brand-red); text-transform: uppercase; }
.flashcard-front-text { font-size: 1rem; color: #333; line-height: 1.5; }
.flashcard-back { background-color: var(--brand-blue); color: white; transform: rotateY(180deg); padding: 15px; justify-content: flex-start; }
.flashcard-game-container { background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 8px; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; text-align: left; }
.flashcard-question-text { font-size: 0.95rem; line-height: 1.6; color: white; margin-bottom: 15px; font-weight: 400; }
.flashcard-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.2); justify-content: center; }
.btn-flash-option { padding: 10px 12px; font-size: 0.85rem; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255,255,255,0.3); color: white; border-radius: 6px; cursor: pointer; transition: all 0.2s; text-align: left; flex: 1 0 40%; display: flex; align-items: center; justify-content: center; }
.btn-flash-option.correct { background-color: #28a745 !important; border-color: #28a745 !important; }
.btn-flash-option.wrong { background-color: #dc3545 !important; border-color: #dc3545 !important; opacity: 0.5; }
.cloze-blank { display: inline-block; min-width: 40px; border-bottom: 2px solid #ffeb3b; color: transparent; margin: 0 2px; vertical-align: bottom; transition: all 0.3s; }
.cloze-blank.filled-correct { color: #4caf50; border-bottom: none; font-weight: bold; background-color: rgba(255,255,255,0.9); padding: 0 5px; border-radius: 4px; }
.cloze-blank.filled-wrong { color: #ff5252; border-bottom: 2px solid #ff5252; text-decoration: line-through; }
[data-theme="dark"] .flashcard-front { background-color: #2c2c2c !important; border-color: #444 !important; color: #e0e0e0 !important; }
[data-theme="dark"] .flashcard-front h4 { color: #ff6b6b !important; }
[data-theme="dark"] .flashcard-front-text { color: #ffffff !important; }

/* 10. HERRAMIENTAS */
#quiz-grid { width: 100%; }
.grid-container, #grid-inner-numbers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 15px; }
.grid-item { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background-color: var(--bg-body); border-radius: 4px; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); border: 1px solid transparent; transition: background-color 0.2s; }
.grid-item:hover { background-color: #e0e0e0; }
.grid-item.answered { background-color: var(--brand-blue); color: white; }
#exam-timer-container { width: 100%; margin-bottom: 15px; display: block; }
.timer-box { width: 100%; display: block; text-align: center; font-size: 1.8rem; padding: 15px 0; background: var(--brand-blue); color: white; border-radius: 8px; font-weight: bold; font-family: monospace; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border: 2px solid #003865; }
.breadcrumbs { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); line-height: 1.4; }
.breadcrumbs a { color: var(--brand-blue); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumb-separator { margin: 0 5px; color: #ccc; }
.breadcrumb-current { font-weight: bold; color: var(--text-main); }
.tools-box { background: var(--bg-body); border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; margin-bottom: 20px; }
.notepad-area { width: 100%; height: 150px; background-color: #fff9db !important; border: 1px solid #e0e0e0; border-radius: 4px; padding: 10px; font-family: monospace; font-size: 0.9rem; resize: vertical; color: #333 !important; }
[data-theme="dark"] .tools-box { background-color: #252525; border-color: #444; }
[data-theme="dark"] .notepad-area { background-color: #2c2c2c !important; color: #fff !important; border-color: #555 !important; }

/* 11. MODAL */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); z-index: 20000; display: flex; justify-content: center; align-items: center; animation: fadeIn 0.2s ease-out; }
.modal-card { background: var(--modal-bg); color: var(--modal-text); padding: 25px; border-radius: 12px; width: 90%; max-width: 550px; max-height: 80vh; display: flex; flex-direction: column; gap: 15px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.3); border: 1px solid var(--border-color); }
.modal-icon { font-size: 3.5rem; color: var(--brand-blue); margin-bottom: 5px; display: block; width: 100%; text-align: center; }
#modal-title { font-size: 1.4rem; margin: 0; font-weight: bold; color: var(--brand-blue); }
#modal-msg { flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column; overflow: hidden; width: 100%; }
.modal-actions { display: flex; gap: 15px; justify-content: center; margin-top: 5px; }
.modal-actions button { flex: 1; padding: 12px 0; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.2s; border: none; min-height: 48px; }
#modal-btn-cancel { background-color: var(--modal-btn-cancel-bg); color: var(--modal-btn-cancel-text); border: 1px solid transparent; }
#modal-btn-confirm { background-color: var(--brand-blue); color: white; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.modal-textarea { width: 100%; height: 120px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; font-family: inherit; font-size: 0.95rem; resize: vertical; margin-top: 10px; margin-bottom: 10px; background-color: var(--bg-input); color: var(--text-main); transition: border-color 0.2s, box-shadow 0.2s; }
.modal-textarea:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(0, 75, 135, 0.1); }
.legal-text-content { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-right: 10px; text-align: justify; font-size: 0.9rem; line-height: 1.6; }

/* 12. FOOTER & SCROLL */
.main-footer { background-color: var(--bg-card); border-top: 1px solid var(--border-color); padding: 30px 20px; margin-top: auto; width: 100%; }
.footer-content { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-logo { display: flex; flex-direction: column; align-items: flex-start; text-align: left; max-width: 300px; }
.footer-logo img { height: 40px; margin-bottom: 10px; filter: grayscale(100%); opacity: 0.8; }
.footer-logo p { font-size: 0.85rem; color: #888; margin: 2px 0; line-height: 1.4; }
.footer-links { display: flex; gap: 15px; align-items: center; justify-content: center; flex-wrap: wrap; }
.footer-links a { font-size: 0.9rem; color: var(--text-secondary); text-decoration: none; font-weight: 500; }
.footer-links a:hover { color: var(--brand-blue); text-decoration: underline; }
.footer-links span { color: #ccc; font-size: 0.8rem; }
.footer-social { display: flex; align-items: center; justify-content: flex-end; }
.footer-social a { color: var(--text-secondary); font-size: 1.1rem; font-weight: bold; text-decoration: none; display: flex; align-items: center; gap: 8px; }
#scroll-top-btn { position: fixed; bottom: 20px; right: 20px; background-color: var(--brand-blue); color: white; width: 45px; height: 45px; border-radius: 50%; border: none; box-shadow: 0 4px 10px rgba(0,0,0,0.3); cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 1.2rem; z-index: 1000; transition: all 0.3s; }
#scroll-top-btn:hover { background-color: var(--brand-red); transform: translateY(-3px); }

/* 13. CHAT */
.notif-list { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; text-align: left; }
.notif-item { padding: 15px; border-radius: 8px; background: var(--bg-body); border: 1px solid var(--border-color); position: relative; transition: all 0.2s; cursor: pointer; }
.notif-item:hover { background-color: #f0f8ff; border-color: var(--brand-blue); }
.notif-item.unread { border-left: 4px solid var(--brand-red); background-color: #fff5f5; }
.msg-list-container { background-color: var(--bg-body); padding: 20px; display: flex; flex-direction: column; gap: 15px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-radius: 8px; border: 1px solid var(--border-color); width: 100%; margin: 0 auto; box-shadow: inset 0 0 10px rgba(0,0,0,0.02); }
.msg-card { background: transparent; border: none; padding: 0; margin-bottom: 25px; border-bottom: 1px dashed var(--border-color); padding-bottom: 25px; }
.msg-card:last-child { border-bottom: none; margin-bottom: 0; }
.msg-course-badge { display: table; margin: 0 auto 20px auto; background-color: var(--brand-blue); color: white; font-size: 0.85rem; padding: 6px 16px; border-radius: 20px; font-weight: 600; opacity: 1; max-width: 90%; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15); line-height: 1.4; }
.msg-content { display: flex; flex-direction: column; gap: 8px; }
.chat-bubble { max-width: 85%; padding: 10px 15px; border-radius: 12px; position: relative; font-size: 0.95rem; line-height: 1.4; box-shadow: 0 1px 2px rgba(0,0,0,0.1); word-wrap: break-word; }
.bubble-student { align-self: flex-start; background-color: var(--chat-bg-other); color: var(--chat-text-other); border-bottom-left-radius: 2px; border: 1px solid var(--border-color); }
.bubble-teacher { align-self: flex-end; background-color: var(--chat-bg-mine); color: var(--chat-text-mine); border-bottom-right-radius: 2px; border: 1px solid rgba(0,0,0,0.05); }
.msg-date-small { font-size: 0.65rem; color: inherit; opacity: 0.6; margin-top: 4px; display: block; text-align: right; }
.reply-area { margin-top: 15px; max-width: 100%; margin-left: auto; margin-right: auto; }

/* 14. DARK MODE FIXES */
[data-theme="dark"] .alert-info { background-color: rgba(0, 75, 135, 0.2) !important; border-color: var(--brand-blue) !important; color: #90caf9 !important; }

/* 15. RESPONSIVE FIX (MOBILE FIRST REVISADO - FIX ALINEACIÓN Y SOLAPAMIENTOS) */
@media (max-width: 1000px) {
    /* RESET BASICO */
    body, html { overflow-x: hidden; width: 100%; }
    .app-container { flex-direction: column; display: flex; padding: 10px; width: 100%; box-sizing: border-box; }
    .main-content { order: 1; margin-bottom: 20px; }
    
    /* ACORDEONES MÓVIL (Espaciado Crítico) */
    .sidebar-left { order: 2; margin-bottom: 20px; }
    .sidebar-right { order: 3; margin-bottom: 50px; /* MARGEN EXTRA PARA EMPUJAR FOOTER */ }
    
    .sidebar-left, .sidebar-right, .main-content, .dashboard-card, .exam-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; position: static; height: auto; max-height: none; overflow: visible; }

    /* HEADER MÓVIL REPARADO (Hamburguesa Visible) */
    .header-content { padding: 0 10px; justify-content: space-between; }
    .header-logo { max-height: 30px; width: auto; margin: 0 5px; } /* Logo pequeño */
    .mobile-menu-btn { display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 1.2rem; background:transparent; border:none; color:var(--text-main); }
    .header-right { gap: 5px; flex-shrink: 0; }
    .btn-icon, .icon-wrapper { font-size: 1.1rem; padding: 5px; }
    .user-avatar-circle { width: 32px; height: 32px; font-size: 0.8rem; }
    .desktop-arrow, .header-divider { display: none; }
    .header-nav { display: none; position: absolute; top: 70px; left: 0; width: 100%; background-color: var(--bg-card); flex-direction: column; padding: 10px 0; box-shadow: 0 15px 30px rgba(0,0,0,0.15); border-top: 1px solid var(--border-color); gap: 0; z-index: 2000; }
    .header-nav.show-mobile { display: flex; animation: slideDown 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
    .nav-link { padding: 15px 25px; border-radius: 0; border-bottom: 1px solid var(--border-color); font-size: 1rem; display: flex; align-items: center; }

    /* PERFIL MÓVIL */
    .profile-grid-layout { grid-template-columns: 1fr; gap: 20px; }
    .form-grid-2 { grid-template-columns: 1fr; gap: 15px; }
    .span-2 { grid-column: span 1; }
    .profile-sidebar-card { width: 100%; }

    /* FOOTER MÓVIL (SOLUCIÓN DEFINITIVA SOLAPAMIENTO) */
    .footer-content { 
        flex-direction: column; 
        text-align: center; 
        gap: 15px; 
        padding-top: 30px; /* Aire arriba */
        padding-bottom: 20px;
    }
    .footer-logo img {
        height: 30px; /* Logo más pequeño */
        margin-bottom: 5px;
    }
    .footer-logo {
        margin-top: 20px; /* Espacio extra de seguridad */
    }
    .footer-links { 
        flex-direction: column; 
        gap: 0; 
        width: 100%;
    }
    .footer-links span { display: none; } /* Ocultar barras | */
    .footer-links a { 
        display: block; 
        padding: 12px; 
        font-size: 0.95rem; 
        border-bottom: 1px solid rgba(0,0,0,0.05); 
        width: 100%;
    }
    .footer-links a:last-child { border-bottom: none; }
    .footer-social { justify-content: center; margin-top: 10px; }

    /* ACORDEÓN SIDEBARS */
    .sidebar-left, .sidebar-right { max-height: 60px; overflow: hidden; transition: max-height 0.3s ease-out; cursor: pointer; position: relative; border-bottom: 3px solid var(--brand-blue); background-color: var(--bg-card); }
    .sidebar-header::after { content: '\f078'; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: 20px; top: 20px; transition: transform 0.3s; }
    .sidebar-mobile-open { max-height: 1000px !important; overflow: visible; }
    .sidebar-mobile-open .sidebar-header::after { transform: rotate(180deg); }
    
    .grid-container, #grid-inner-numbers { gap: 10px; }
    .grid-item { padding: 10px; font-size: 1rem; }

    /* FIX 1: CURSO TORCIDO (Forzar 1 columna) */
    .courses-grid { 
        grid-template-columns: 1fr; /* Una sola columna para que ocupe todo el ancho */
        gap: 20px;
    }
    .course-card-item {
        width: 100%; /* Asegurar que no se corte */
        margin: 0;
    }

    /* TABLA MÓVIL -> TARJETAS (NO SOLAPAMIENTO) */
    table, thead, tbody, th, td, tr { display: block; }
    thead tr { position: absolute; top: -9999px; left: -9999px; }
    tr { margin-bottom: 20px; border: 1px solid #e0e0e0; border-radius: 12px; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.05); overflow: hidden; }
    td:first-child { background-color: #f8f9fa; color: var(--brand-blue); font-weight: bold; text-align: center; padding: 15px; border-bottom: 1px solid #eee; font-size: 1.1rem; }
    td:not(:first-child) { border: none; border-bottom: 1px dashed #eee; position: relative; padding-left: 50%; padding-top: 12px; padding-bottom: 12px; text-align: right; font-size: 0.95rem; }
    td:not(:first-child):before { position: absolute; top: 12px; left: 15px; width: 45%; padding-right: 10px; white-space: nowrap; font-weight: bold; text-align: left; content: attr(data-label); color: #666; }
    td:last-child { border-bottom: none; padding-bottom: 15px; }
}

@media print {
    @page { size: A4 landscape; margin: 0; }
    body { background: white; margin: 0; padding: 0; }
    #login-overlay, #app-container, #app-footer, .modal-overlay, #scroll-top-btn { display: none !important; }
    #diploma-print-container { display: block !important; width: 100vw; height: 100%; }
    .diploma-page { width: 297mm; height: 210mm; page-break-after: always; position: relative; background-color: #fff; padding: 10mm; box-sizing: border-box; display: flex; justify-content: center; align-items: center; }
    .diploma-border-outer { width: 100%; height: 100%; border: 3px solid var(--brand-blue); padding: 3px; box-sizing: border-box; display: flex; flex-direction: column; }
    .diploma-border-inner { width: 100%; height: 100%; border: 1px solid var(--brand-blue); padding: 25px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; }
    .diploma-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; opacity: 0.08; z-index: -1; }
    .diploma-logo-top { height: 60px; margin-bottom: 15px; }
    .diploma-title { font-family: "Times New Roman", Times, serif; color: var(--brand-blue); font-size: 3rem; font-weight: normal; text-transform: uppercase; margin: 0 0 10px 0; letter-spacing: 1px; }
    .diploma-text { font-family: Arial, sans-serif; font-size: 1rem; color: #333; margin: 5px 0; }
    .diploma-student { font-family: "Times New Roman", Times, serif; font-size: 2.4rem; font-weight: bold; color: #000; margin: 15px 0; border-bottom: 1px solid #999; padding: 0 40px 5px 40px; display: inline-block; line-height: 1.1; }
    .diploma-course { font-family: Arial, sans-serif; font-size: 1.8rem; font-weight: bold; color: var(--brand-red); margin: 15px 0; line-height: 1.2; max-width: 90%; }
    .diploma-details { font-size: 1rem; margin-bottom: 10px; }
    .diploma-footer { margin-top: auto; width: 100%; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 10px; }
    .footer-qr-area { text-align: center; display: flex; flex-direction: column; align-items: center; }
    .qr-image { width: 100px; height: 100px; margin-bottom: 2px; }
    .qr-ref { font-size: 0.6rem; font-family: monospace; color: #666; }
    .footer-signature-area { text-align: center; print-color-adjust: exact; min-width: 220px; }
    .signature-line { border-top: 1px solid #000; width: 100%; margin-bottom: 5px; }
    .signature-name { font-weight: bold; font-size: 1rem; display: block; }
    .signature-role { font-size: 0.8rem; color: #444; }
    /* --- DENTRO DE @media print en estil.css --- */

    /* Aseguramos que el contenedor interior permita posicionamiento absoluto */
    .diploma-border-inner { 
        width: 100%; 
        height: 100%; 
        border: 1px solid var(--brand-blue); 
        padding: 25px; 
        box-sizing: border-box; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
        position: relative; 
        z-index: 1; 
        /* ELIMINADO overflow: hidden para evitar cortes */
    }

    /* ESTILO DE LA MARCA DE AGUA */
    .diploma-watermark {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 600px; /* Tamaño grande */
        max-width: 90%; /* Por seguridad en pantallas pequeñas */
        opacity: 0.08; /* Opacidad suave */
        z-index: -1; /* Detrás de todo */
        pointer-events: none;
        filter: grayscale(100%);
    }
}
#diploma-print-container { display: none; }

/* --- ESTILOS DE VÍDEO (v42.0) --- */
.video-responsive-container {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    border-radius: 8px;
    margin-bottom: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.video-responsive-container iframe,
.video-responsive-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-badge {
    background-color: #E30613; /* Rojo YouTube */
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 10px;
}

/* --- ESTILOS MULTIRESPUESTA (v43.0) --- */
.option-item.multi-select {
    border-left: 4px solid var(--brand-blue);
}

.option-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    accent-color: var(--brand-blue);
    cursor: pointer;
}

/* Indicador visual de tipo de pregunta */
.q-type-badge {
    background-color: #e3f2fd;
    color: var(--brand-blue);
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
    vertical-align: middle;
    border: 1px solid #bbdefb;
}