:root {
    --effeta-orange: #E8901F;
    --effeta-orange-dark: #C77410;
    --effeta-orange-light: #FDF3E7;
    --gray-900: #1f2937;
    --gray-600: #4b5563;
    --gray-400: #9ca3af;
    --gray-200: #e5e7eb;
    --gray-50: #f9fafb;
    --green: #16a34a;
    --radius: 14px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--gray-50);
    color: var(--gray-900);
}

.navbar {
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand img { height: 34px; width: 34px; }
.brand span { font-weight: 700; font-size: 1.2rem; color: var(--effeta-orange-dark); }

.nav-user { display: flex; align-items: center; gap: 16px; font-size: 0.9rem; color: var(--gray-600); }
.btn-link { color: var(--gray-400); text-decoration: none; }
.btn-link:hover { color: var(--gray-900); }

.container { max-width: 1080px; margin: 0 auto; padding: 28px 20px; }

.card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 24px;
}

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: 1fr 3fr; }
@media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--effeta-orange);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.15s;
}
.btn:hover { background: var(--effeta-orange-dark); }
.btn:disabled { background: var(--gray-400); cursor: not-allowed; }

.btn-outline {
    background: #fff;
    color: var(--effeta-orange-dark);
    border: 1.5px solid var(--effeta-orange);
}
.btn-outline:hover { background: var(--effeta-orange-light); }

h1 { font-size: 1.6rem; margin: 0 0 16px; }
h2 { font-size: 1.2rem; margin: 0 0 12px; }
h3 { font-size: 1rem; margin: 0 0 10px; color: var(--gray-600); }

/* --- Encabezado del curso --- */
.course-hero {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: linear-gradient(135deg, var(--effeta-orange-light) 0%, #fff 65%);
    border: 1px solid #f3d9b0;
    border-radius: var(--radius);
    padding: 26px 28px;
    margin-bottom: 24px;
}
.course-hero-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #fff;
    border: 1.5px solid var(--effeta-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.course-hero-body { flex-grow: 1; min-width: 0; }
.course-hero h1 { margin: 0 0 6px; color: var(--gray-900); }
.course-hero-description {
    color: var(--gray-600);
    margin: 0 0 18px;
    line-height: 1.5;
}
.course-hero-progress { display: flex; flex-direction: column; gap: 8px; }
.course-hero-progress .progress-bar-track { height: 10px; background: #fff; }
.course-hero-progress-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--effeta-orange-dark);
}
@media (max-width: 640px) {
    .course-hero { padding: 20px; gap: 14px; }
    .course-hero-icon { width: 44px; height: 44px; font-size: 1.3rem; border-radius: 12px; }
}

.progress-bar-track {
    width: 100%;
    background: var(--gray-200);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}
.progress-bar-fill {
    background: var(--effeta-orange);
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.topic-list { list-style: none; margin: 0; padding: 0; }
.topic-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--gray-600);
    font-size: 0.92rem;
}
.topic-list li a:hover { background: var(--gray-50); }
.topic-list li a.active { background: var(--effeta-orange-light); color: var(--effeta-orange-dark); font-weight: 600; }

.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-200); flex-shrink: 0; }
.dot.done { background: var(--green); }

video { width: 100%; border-radius: 10px; background: #000; display: block; }

/* --- Acordeón de temas --- */
.accordion { display: flex; flex-direction: column; gap: 10px; }

.topic-panel {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.topic-panel[open] {
    border-color: var(--effeta-orange);
    box-shadow: 0 2px 12px rgba(232, 144, 31, 0.12);
}

.topic-panel summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--gray-50);
    transition: background 0.15s;
}
.topic-panel summary:hover { background: var(--effeta-orange-light); }
.topic-panel[open] summary {
    background: var(--effeta-orange-light);
    border-bottom: 1px solid #f3d9b0;
}
.topic-panel summary::-webkit-details-marker { display: none; }
.topic-panel summary::marker { content: ''; }
.topic-panel summary::after {
    content: '▾';
    margin-left: auto;
    color: var(--effeta-orange);
    transition: transform 0.2s;
    font-size: 1rem;
    flex-shrink: 0;
}
.topic-panel[open] summary::after { transform: rotate(180deg); }

.topic-panel-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--effeta-orange);
    color: var(--effeta-orange-dark);
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.topic-panel[open] .topic-panel-number,
.topic-panel-number.done {
    background: var(--effeta-orange);
    color: #fff;
}

.topic-panel-title {
    flex-grow: 1;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--gray-900);
}
.topic-panel-badge {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    flex-shrink: 0;
}
.topic-panel-badge-done {
    color: var(--green);
    background: #f0fdf4;
}
.topic-panel-badge-progress {
    color: var(--effeta-orange-dark);
    background: #fff;
    border: 1px solid var(--effeta-orange);
}

.topic-panel-content {
    padding: 22px;
}

/* --- Evaluación: marcado de preguntas después de enviar --- */
.quiz-question {
    padding: 14px 16px;
    border-radius: 10px;
    border: 1.5px solid var(--gray-200);
    background: #fff;
    margin-bottom: 14px;
}
.quiz-question-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.quiz-question-mark {
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}
.quiz-question-correct {
    border-color: var(--green);
    background: #f0fdf4;
}
.quiz-question-correct .quiz-question-mark { color: var(--green); }
.quiz-question-incorrect {
    border-color: #dc2626;
    background: #fef2f2;
}
.quiz-question-incorrect .quiz-question-mark { color: #dc2626; }

.quiz-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    margin-bottom: 6px;
    padding: 4px 8px;
    border-radius: 6px;
}
.quiz-option-correct {
    background: #dcfce7;
    font-weight: 600;
    color: #166534;
}
.quiz-option-chosen-wrong {
    background: #fee2e2;
    color: #991b1b;
    text-decoration: line-through;
}

.quiz-last-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    font-weight: 600;
}
.quiz-last-result.passed { background: #f0fdf4; color: #166534; }
.quiz-last-result.failed { background: #fef2f2; color: #991b1b; }

/* --- Pasos numerados (página de Ayuda) --- */
.help-steps {
    margin: 0 0 16px;
    padding-left: 0;
    list-style: none;
    counter-reset: step;
}
.help-steps li {
    counter-increment: step;
    position: relative;
    padding: 10px 0 10px 40px;
    line-height: 1.5;
    color: var(--gray-900);
    border-bottom: 1px solid var(--gray-200);
}
.help-steps li:last-child { border-bottom: none; }
.help-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--effeta-orange);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Dashboard del curso --- */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.stat-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 18px 20px;
}
.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--effeta-orange-dark);
    line-height: 1.1;
}
.stat-label {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-top: 4px;
}
.stat-card-green .stat-value { color: var(--green); }
.stat-card-gray .stat-value { color: var(--gray-400); }


.course-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-size: 0.9rem; font-weight: 600; color: var(--gray-600); }
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=password] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    font-size: 0.95rem;
}
.form-group input:focus { outline: none; border-color: var(--effeta-orange); }

.alert {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-bottom: 16px;
}
.alert-error { background: #fef2f2; color: #b91c1c; }
.alert-success { background: #f0fdf4; color: #15803d; }

.login-wrap {
    max-width: 380px;
    margin: 60px auto;
    text-align: center;
}
.login-wrap img { height: 64px; margin-bottom: 12px; }