/* Notas de Cata - Mobile-First Styles */

/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================ */

:root {
    /* Layer colors from course-settings.yaml */
    --saber: #4A90D9;      /* Blue - Knowledge */
    --hacer: #7CB342;      /* Green - Applied Knowledge */
    --decidir: #FFA726;    /* Orange - Quick Decisions */
    --alinear: #AB47BC;    /* Purple - Brand Alignment */

    /* Brand colors */
    --wine-red: #722F37;
    --wine-red-dark: #5A252C;
    --wine-red-light: #8B3A44;

    /* Neutral colors */
    --text-primary: #2C2C2C;
    --text-secondary: #666666;
    --text-light: #999999;
    --bg-white: #FFFFFF;
    --bg-light: #F8F8F8;
    --bg-medium: #E5E5E5;
    --border-color: #DDDDDD;

    /* Typography */
    --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Code", "Droid Sans Mono", "Source Code Pro", monospace;

    /* Spacing scale */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-xxl: 3rem;     /* 48px */

    /* Container widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
}

/* ============================================
   BASE STYLES
   ============================================ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px; /* Minimum 16px for mobile readability */
}

body {
    font-family: var(--font-base);
    color: var(--text-primary);
    background-color: var(--bg-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   LAYOUT COMPONENTS
   ============================================ */

.container {
    width: 100%;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 640px) {
    .container {
        max-width: var(--container-sm);
    }
}

@media (min-width: 768px) {
    .container {
        max-width: var(--container-md);
        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: var(--container-lg);
    }
}

/* ============================================
   HEADER
   ============================================ */

.site-header {
    background-color: var(--wine-red);
    color: var(--bg-white);
    padding: var(--space-md) 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.site-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bg-white);
    text-decoration: none;
}

.site-title:hover {
    color: var(--bg-light);
}

/* ============================================
   NAVIGATION BAR
   ============================================ */

.site-nav {
    background-color: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

.nav-container {
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.nav-link {
    padding: var(--space-sm) var(--space-md);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.nav-link:hover {
    color: var(--wine-red);
}

.nav-link.nav-active {
    color: var(--wine-red);
    border-bottom-color: var(--wine-red);
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
    background-color: var(--bg-light);
    color: var(--text-secondary);
    padding: var(--space-xl) 0;
    margin-top: var(--space-xxl);
    text-align: center;
    font-size: 0.875rem;
}

/* ============================================
   BREADCRUMB
   ============================================ */

.breadcrumb {
    background-color: var(--bg-light);
    padding: var(--space-sm) 0;
    font-size: 0.875rem;
}

.breadcrumb-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.breadcrumb-item::after {
    content: "›";
    color: var(--text-light);
}

.breadcrumb-item:last-child::after {
    content: "";
}

.breadcrumb-link {
    color: var(--text-secondary);
    text-decoration: none;
}

.breadcrumb-link:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

.breadcrumb-current {
    color: var(--text-primary);
    font-weight: 500;
}

/* ============================================
   LAYER CARDS (Homepage)
   ============================================ */

/* Layer cards section wrapper */
.layer-cards-section {
    display: grid;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

/* Layer card - using details element for native expand/collapse */
.layer-card {
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.layer-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Layer card header - the summary element acts as clickable header */
.layer-card-header {
    padding: var(--space-md);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background-color: var(--bg-light);
    user-select: none;
    transition: background-color 0.2s;
}

.layer-card-header:hover {
    background-color: var(--bg-medium);
}

/* Remove default details marker */
.layer-card-header::-webkit-details-marker {
    display: none;
}

/* Chevron indicator for expand/collapse */
.layer-card-chevron {
    font-size: 0.75rem;
    transition: transform 0.2s;
    color: var(--text-secondary);
}

.layer-card[open] .layer-card-chevron {
    transform: rotate(90deg);
}

/* Layer card title section */
.layer-card-title {
    flex: 1;
}

.layer-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--space-xs);
    color: var(--text-primary);
}

.layer-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Layer card content - contains module list */
.layer-card-content {
    padding: 0;
}

/* ============================================
   MODULE LIST
   ============================================ */

.module-list {
    list-style: none;
}

.module-item {
    border-bottom: 1px solid var(--border-color);
}

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

.module-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    text-decoration: none;
    color: var(--text-primary);
    transition: background-color 0.2s;
}

.module-link:hover {
    background-color: var(--bg-light);
}

.module-title {
    font-weight: 400;
    flex: 1;
    font-size: 0.8125rem;
    line-height: 1.3;
}

.module-title strong {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.module-time {
    color: var(--text-light);
    font-size: 0.75rem;
    white-space: nowrap;
    margin-left: var(--space-md);
}

.module-meta {
    color: var(--text-light);
    font-size: 0.875rem;
    white-space: nowrap;
    margin-left: var(--space-md);
}

/* Layer card resource link (Fichas, Escenarios) */
.layer-resource-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    text-decoration: none;
    color: var(--wine-red);
    font-size: 0.8125rem;
    font-weight: 500;
    border-top: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

.layer-resource-link:hover {
    background-color: var(--bg-light);
}

.layer-resource-link .link-arrow {
    font-size: 0.75rem;
    color: var(--text-light);
}

/* Content listing page (fichas, escenarios) */
.listing-page {
    padding: var(--space-xl) 0;
}

.listing-page .page-title {
    font-size: 1.5rem;
    margin-bottom: var(--space-lg);
}

.listing-page .page-description {
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
    font-size: 0.9375rem;
}

/* ============================================
   HOMEPAGE SPECIFIC
   ============================================ */

.homepage {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-xxl);
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-xl);
}

.section-divider {
    border: none;
    border-top: 2px solid var(--border-color);
    margin: var(--space-xxl) 0;
}

.empty-state {
    color: var(--text-secondary);
    font-style: italic;
    padding: var(--space-lg);
    text-align: center;
}

/* ============================================
   CONTENT SECTIONS (Fichas, Guiones, Scenarios)
   ============================================ */

.content-section {
    margin-top: var(--space-xxl);
}

.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--wine-red);
}

.content-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--wine-red);
}

/* ============================================
   FICHA CARDS (Wine Reference Cards)
   ============================================ */

.ficha-grid {
    display: grid;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

@media (min-width: 640px) {
    .ficha-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .ficha-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ficha-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: var(--space-md);
    background-color: var(--bg-white);
    text-decoration: none;
    color: var(--text-primary);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.ficha-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--wine-red);
}

.ficha-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--wine-red);
}

.ficha-card-meta {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Ficha list (simple list style for homepage) */
.ficha-list {
    list-style: none;
}

.ficha-item {
    border-bottom: 1px solid var(--border-color);
}

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

.ficha-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    text-decoration: none;
    color: var(--text-primary);
    transition: background-color 0.2s;
}

.ficha-link:hover {
    background-color: var(--bg-light);
}

.ficha-title {
    font-weight: 500;
    flex: 1;
}

.ficha-meta {
    display: flex;
    gap: var(--space-md);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.ficha-uva,
.ficha-zona {
    white-space: nowrap;
}

/* ============================================
   GUION LIST (Sales Scripts)
   ============================================ */

.guion-list {
    list-style: none;
}

.guion-item {
    border-bottom: 1px solid var(--border-color);
}

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

.guion-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    text-decoration: none;
    color: var(--text-primary);
    transition: background-color 0.2s;
}

.guion-link:hover {
    background-color: var(--bg-light);
}

.guion-title {
    font-weight: 500;
    flex: 1;
}

.guion-tipo {
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: nowrap;
    margin-left: var(--space-md);
}

/* ============================================
   SCENARIO LIST
   ============================================ */

.scenario-list {
    list-style: none;
}

.scenario-item {
    border-bottom: 1px solid var(--border-color);
}

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

.scenario-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    text-decoration: none;
    color: var(--text-primary);
    transition: background-color 0.2s;
}

.scenario-link:hover {
    background-color: var(--bg-light);
}

.scenario-title {
    font-weight: 500;
    flex: 1;
}

.scenario-meta {
    display: flex;
    gap: var(--space-md);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.scenario-difficulty,
.scenario-time {
    white-space: nowrap;
}

/* ============================================
   NAVIGATION BUTTONS
   ============================================ */

.module-navigation {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-xxl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border-color);
}

.nav-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background-color: var(--wine-red);
    color: var(--bg-white);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.2s;
    min-height: 44px; /* Touch target size */
}

.nav-button:hover {
    background-color: var(--wine-red-dark);
}

.nav-button-disabled {
    background-color: var(--bg-medium);
    color: var(--text-light);
    cursor: not-allowed;
}

.nav-button-prev {
    margin-right: auto;
}

.nav-button-next {
    margin-left: auto;
}

/* ============================================
   MARKDOWN CONTENT STYLES
   ============================================ */

.markdown-content {
    margin-top: var(--space-xl);
}

.markdown-content h1 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-top: var(--space-xxl);
    margin-bottom: var(--space-lg);
    line-height: 1.2;
}

.markdown-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    line-height: 1.3;
}

.markdown-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
    line-height: 1.4;
}

.markdown-content h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.markdown-content p {
    margin-bottom: var(--space-md);
}

.markdown-content ul,
.markdown-content ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-xl);
}

.markdown-content li {
    margin-bottom: var(--space-sm);
}

.markdown-content strong {
    font-weight: 600;
    color: var(--text-primary);
}

.markdown-content em {
    font-style: italic;
}

.markdown-content blockquote {
    border-left: 4px solid var(--wine-red);
    padding-left: var(--space-md);
    margin: var(--space-lg) 0;
    color: var(--text-secondary);
    font-style: italic;
}

.markdown-content code {
    font-family: var(--font-mono);
    background-color: var(--bg-light);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-size: 0.875em;
}

.markdown-content pre {
    background-color: var(--bg-light);
    border: 2px solid var(--primary);
    border-radius: 8px;
    padding: var(--space-xl);
    margin-bottom: var(--space-md);
    overflow-x: auto;
    font-family: var(--font-base);
    font-size: 1.125rem;
    font-weight: 450;
    line-height: 1.75;
}

.markdown-content pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

/* Details/Summary (reveal answers) */
.markdown-content details {
    margin: var(--space-md) 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: var(--space-md);
    background-color: var(--bg-light);
}

.markdown-content summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--wine-red);
    user-select: none;
}

.markdown-content summary:hover {
    color: var(--wine-red-dark);
}

.markdown-content details[open] summary {
    margin-bottom: var(--space-md);
}

/* ============================================
   TABLE STYLES WITH SCROLL WRAPPER
   ============================================ */

.table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-bottom: var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.markdown-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.markdown-content th {
    background-color: var(--bg-light);
    font-weight: 600;
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 2px solid var(--border-color);
}

.markdown-content td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.markdown-content tr:last-child td {
    border-bottom: none;
}

.markdown-content tbody tr:hover {
    background-color: var(--bg-light);
}

/* Code blocks on mobile */
@media (max-width: 640px) {
    .markdown-content pre {
        font-size: 1rem;
        padding: var(--space-lg);
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

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

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

/* ============================================
   MODULE PAGE (Content Reading View)
   ============================================ */

.module-page {
    padding: var(--space-xl) 0;
}

.module-header {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
}

.module-page-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

/* Layer color accents for module titles */
.module-page-title.layer-01-saber {
    border-left: 4px solid var(--saber);
    padding-left: var(--space-md);
}

.module-page-title.layer-02-hacer {
    border-left: 4px solid var(--hacer);
    padding-left: var(--space-md);
}

.module-page-title.layer-03-decidir {
    border-left: 4px solid var(--decidir);
    padding-left: var(--space-md);
}

.module-page-title.layer-04-alinear {
    border-left: 4px solid var(--alinear);
    padding-left: var(--space-md);
}

.module-meta {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    flex-wrap: wrap;
}

.module-code {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--bg-light);
    color: var(--text-secondary);
    font-size: 0.875rem;
    border-radius: 4px;
    font-weight: 500;
}

.reading-time {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--wine-red-light);
    color: var(--bg-white);
    font-size: 0.875rem;
    border-radius: 4px;
    font-weight: 500;
}

.reading-time::before {
    content: "⏱";
}

/* ============================================
   NAV BUTTONS (Previous/Next)
   ============================================ */

.nav-buttons {
    margin-top: var(--space-xxl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border-color);
}

.nav-buttons-container {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
}

.nav-btn {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    background-color: var(--wine-red);
    color: var(--bg-white);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.2s, transform 0.1s;
    min-height: 44px;
    max-width: 45%;
}

.nav-btn:hover {
    background-color: var(--wine-red-dark);
    transform: translateY(-2px);
}

.nav-btn-title {
    font-size: 0.875rem;
    font-weight: 400;
    opacity: 0.9;
}

.nav-btn-spacer {
    flex: 1;
}

/* Mobile responsive nav buttons */
@media (max-width: 640px) {
    .nav-btn {
        font-size: 0.875rem;
        padding: var(--space-sm) var(--space-md);
        max-width: 48%;
    }

    .nav-btn-title {
        display: none;
    }
}

/* ============================================
   FICHA PAGE (Wine Reference Card View)
   ============================================ */

.ficha-page {
    padding: var(--space-xl) 0;
}

.ficha-header {
    margin-bottom: var(--space-xl);
}

.ficha-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--wine-red);
    margin-bottom: var(--space-lg);
}

.ficha-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    padding: var(--space-md);
    background-color: var(--bg-light);
    border-radius: 8px;
    border-left: 4px solid var(--wine-red);
}

.ficha-meta-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ficha-meta-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
    font-weight: 600;
}

.ficha-meta-value {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.ficha-card {
    margin-bottom: var(--space-xl);
}

.ficha-back {
    margin-top: var(--space-xxl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-color);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--wine-red);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.back-link:hover {
    color: var(--wine-red-dark);
    text-decoration: underline;
}

/* ============================================
   BREADCRUMB ENHANCEMENTS
   ============================================ */

.breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: var(--wine-red);
    text-decoration: underline;
}

.breadcrumb-separator {
    color: var(--text-light);
    user-select: none;
}

/* ============================================
   LOGIN PAGE
   ============================================ */

.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: var(--space-xl) 0;
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: var(--space-xl);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.login-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wine-red);
    text-align: center;
    margin-bottom: var(--space-xl);
}

.login-error {
    background-color: #FEF2F2;
    color: #DC2626;
    border: 1px solid #FECACA;
    border-radius: 6px;
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-lg);
    font-size: 0.875rem;
    text-align: center;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-input {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    font-family: var(--font-base);
    color: var(--text-primary);
    background-color: var(--bg-white);
    transition: border-color 0.2s;
    min-height: 44px;
}

.form-input:focus {
    outline: none;
    border-color: var(--wine-red);
    box-shadow: 0 0 0 3px rgba(114, 47, 55, 0.15);
}

.login-button {
    padding: var(--space-md);
    background-color: var(--wine-red);
    color: var(--bg-white);
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    min-height: 44px;
}

.login-button:hover {
    background-color: var(--wine-red-dark);
}

/* ============================================
   HEADER WITH AUTH
   ============================================ */

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-user {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.header-username {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

.logout-form {
    display: inline;
}

.logout-button {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--bg-white);
    padding: var(--space-xs) var(--space-md);
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    min-height: 36px;
}

.logout-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   PROGRESS TRACKING
   ============================================ */

.progress-summary {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.overall-progress {
    margin-bottom: var(--space-md);
}

.overall-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.overall-progress-label {
    font-weight: 600;
    color: var(--text-primary);
}

.overall-progress-pct {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--wine-red);
}

.overall-progress-detail {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: var(--space-xs);
    display: block;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--bg-medium);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--wine-red);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.continue-learning-link {
    display: inline-block;
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    background-color: var(--wine-red);
    color: var(--bg-white);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.2s;
    min-height: 44px;
    line-height: 1.6;
}

.continue-learning-link:hover {
    background-color: var(--wine-red-dark);
}

.all-complete-message {
    margin-top: var(--space-md);
    color: var(--text-secondary);
    font-style: italic;
}

/* Layer card progress badge */
.layer-progress-badge {
    color: var(--bg-white);
    font-size: 0.75rem;
    font-weight: 700;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 12px;
    white-space: nowrap;
    min-width: 40px;
    text-align: center;
}

/* Layer progress bar inside card */
.layer-progress-bar-container {
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.layer-progress-bar-container .progress-bar {
    flex: 1;
}

.layer-progress-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Module completion checkmark in list */
.module-check {
    color: #16A34A;
    font-weight: 700;
    margin-right: var(--space-xs);
}

/* ============================================
   MODULE COMPLETION BUTTON
   ============================================ */

.module-completion {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-align: center;
    background-color: var(--bg-light);
}

.complete-button {
    padding: var(--space-md) var(--space-xl);
    background-color: var(--wine-red);
    color: var(--bg-white);
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    min-height: 44px;
}

.complete-button:hover {
    background-color: var(--wine-red-dark);
}

.completion-done {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: #16A34A;
    font-weight: 600;
    font-size: 1.125rem;
}

.completion-check {
    font-size: 1.5rem;
}

/* ===== Quiz Styles ===== */

/* Quiz taking page */
.quiz-page {
    padding: var(--space-xl) 0;
}

.quiz-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
}

.quiz-progress-container {
    margin-bottom: var(--space-xl);
}

.quiz-progress-text {
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.quiz-progress-bar-container {
    width: 100%;
    height: 4px;
    background-color: var(--bg-medium);
    border-radius: 2px;
    overflow: hidden;
}

.quiz-progress-bar {
    height: 100%;
    background-color: var(--wine-red);
    border-radius: 2px;
    transition: width 0.3s ease;
}

#quiz-container {
    margin-bottom: var(--space-lg);
}

.quiz-question {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: var(--space-lg);
}

.quiz-question-text {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

.scenario-badge {
    display: inline-block;
    background-color: var(--decidir);
    color: var(--bg-white);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}

.quiz-options {
    margin-top: var(--space-md);
}

.quiz-option {
    display: block;
    padding: var(--space-md);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: var(--space-sm);
    min-height: 48px;
    cursor: pointer;
    transition: all 0.2s;
    background-color: var(--bg-white);
}

.quiz-option:hover {
    border-color: var(--wine-red);
    background-color: rgba(114, 47, 55, 0.02);
}

.quiz-option.selected {
    border-color: var(--wine-red);
    background-color: rgba(114, 47, 55, 0.05);
}

.quiz-option input[type="radio"] {
    margin-right: var(--space-sm);
    accent-color: var(--wine-red);
}

.quiz-option-text {
    font-size: 1rem;
    color: var(--text-primary);
}

.quiz-nav-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-xl);
    gap: var(--space-md);
}

.quiz-nav-btn {
    padding: var(--space-md) var(--space-xl);
    min-height: 48px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    background-color: var(--bg-white);
    color: var(--text-primary);
}

.quiz-nav-btn.primary {
    background-color: var(--wine-red);
    color: var(--bg-white);
    border-color: var(--wine-red);
}

.quiz-nav-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.quiz-nav-btn.primary:hover:not(:disabled) {
    background-color: var(--wine-red-dark);
}

.quiz-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Quiz results page */
.quiz-results-page {
    padding: var(--space-xl) 0;
}

.quiz-results-summary {
    text-align: center;
    padding: var(--space-xl);
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: var(--space-xl);
}

.quiz-results-score {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
}

.quiz-results-score.score-high {
    color: #16A34A;
}

.quiz-results-score.score-mid {
    color: #F59E0B;
}

.quiz-results-score.score-low {
    color: #DC2626;
}

.quiz-results-feedback {
    font-style: italic;
    color: var(--text-secondary);
    font-size: 1.125rem;
    margin: 0;
}

.quiz-results-review {
    margin-top: var(--space-xxl);
}

.quiz-question-review {
    margin-bottom: var(--space-xl);
    padding: var(--space-lg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-white);
}

.quiz-options-review {
    margin-top: var(--space-md);
}

.quiz-option-result {
    padding: var(--space-sm) var(--space-md);
    border-radius: 6px;
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.quiz-option-result.correct-selected {
    background-color: #dcfce7;
    border-left: 4px solid #16A34A;
}

.quiz-option-result.correct-not-selected {
    border: 2px solid #16A34A;
    background-color: transparent;
}

.quiz-option-result.wrong-selected {
    background-color: #fee2e2;
    border-left: 4px solid #DC2626;
}

.result-icon {
    font-weight: 700;
    font-size: 1.125rem;
}

.result-icon.correct {
    color: #16A34A;
}

.result-icon.correct-not-picked {
    color: #16A34A;
}

.result-icon.wrong {
    color: #DC2626;
}

.quiz-explanation {
    font-style: italic;
    color: var(--text-secondary);
    margin-top: var(--space-md);
    padding: var(--space-md);
    background-color: var(--bg-light);
    border-radius: 6px;
    border-left: 3px solid var(--wine-red);
}

.quiz-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    margin-top: var(--space-xxl);
    flex-wrap: wrap;
}

.quiz-action-btn {
    padding: var(--space-md) var(--space-xl);
    border-radius: 8px;
    min-height: 48px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s;
}

.quiz-retake-btn {
    background-color: var(--wine-red);
    color: var(--bg-white);
}

.quiz-retake-btn:hover {
    background-color: var(--wine-red-dark);
}

.quiz-home-btn {
    border: 2px solid var(--wine-red);
    color: var(--wine-red);
    background-color: var(--bg-white);
}

.quiz-home-btn:hover {
    background-color: var(--bg-light);
}

/* Quiz error page */
.quiz-error {
    text-align: center;
    padding: var(--space-xxl) var(--space-md);
}

.quiz-error h1 {
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.quiz-error p {
    color: var(--text-secondary);
    font-size: 1.125rem;
    margin-bottom: var(--space-xl);
}

/* Homepage weekly quiz section */
.weekly-quizzes-section {
    margin-top: var(--space-xxl);
}

.weekly-quiz-list {
    list-style: none;
}

.weekly-quiz-item {
    border-bottom: 1px solid var(--border-color);
}

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

.weekly-quiz-item.weekly-quiz-locked {
    opacity: 0.5;
}

.weekly-quiz-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    text-decoration: none;
    color: var(--text-primary);
    transition: background-color 0.2s;
}

.weekly-quiz-link:hover {
    background-color: var(--bg-light);
}

.weekly-quiz-title {
    font-weight: 500;
    flex: 1;
}

.weekly-quiz-meta {
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: nowrap;
    margin-left: var(--space-md);
}

.weekly-quiz-reason {
    font-size: 0.875rem;
    color: var(--text-light);
    font-style: italic;
    margin-left: var(--space-md);
}

.lock-icon {
    margin-right: var(--space-sm);
}

/* Homepage quiz history section */
.quiz-history-section {
    margin-top: var(--space-xxl);
}

.quiz-history-list {
    list-style: none;
}

.quiz-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: var(--space-md);
}

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

.quiz-history-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
}

.quiz-history-title {
    font-weight: 500;
    color: var(--text-primary);
}

.quiz-history-attempts {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.quiz-history-scores {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: flex-end;
}

.quiz-history-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 4px;
    white-space: nowrap;
}

.quiz-history-badge.best {
    color: #16A34A;
    background-color: #dcfce7;
}

.quiz-history-badge.recent {
    color: var(--saber);
    background-color: #e0f2fe;
}

.quiz-retake-link {
    padding: var(--space-xs) var(--space-md);
    background-color: var(--wine-red);
    color: var(--bg-white);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 0.2s;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
}

.quiz-retake-link:hover {
    background-color: var(--wine-red-dark);
}

/* Module page quiz section */
.module-quiz-section {
    margin-top: var(--space-xl);
    text-align: center;
    padding: var(--space-xl);
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-light);
    border-radius: 8px;
}

.quiz-start-btn {
    display: inline-block;
    padding: var(--space-md) var(--space-xl);
    background-color: var(--wine-red);
    color: var(--bg-white);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    min-height: 48px;
    line-height: 1.6;
    transition: all 0.2s;
}

.quiz-start-btn:hover {
    background-color: var(--wine-red-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.quiz-locked {
    color: var(--text-secondary);
    font-style: italic;
    padding: var(--space-md);
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .quiz-nav-buttons {
        flex-direction: column;
    }

    .quiz-nav-btn {
        width: 100%;
    }

    .quiz-history-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .quiz-history-scores {
        align-items: flex-start;
        width: 100%;
    }

    .quiz-actions {
        flex-direction: column;
    }

    .quiz-action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   MI SEMANA (Weekly Task Page)
   ============================================ */

.mi-semana-page {
    padding: var(--space-xl) 0;
}

/* Week header */
.week-header {
    margin-bottom: var(--space-xl);
}

.week-badge {
    display: inline-block;
    background-color: var(--wine-red);
    color: var(--bg-white);
    font-size: 0.75rem;
    font-weight: 700;
    padding: var(--space-xs) var(--space-md);
    border-radius: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}

.week-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}

.week-description {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.5;
}

/* Week progress */
.week-progress {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}

.week-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.week-progress-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.week-progress-pct {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--wine-red);
}

/* Next action CTA */
.week-next-action {
    margin-bottom: var(--space-xl);
    text-align: center;
}

.week-cta-button {
    display: inline-block;
    padding: var(--space-md) var(--space-xl);
    background-color: var(--wine-red);
    color: var(--bg-white);
    text-decoration: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    min-height: 48px;
    line-height: 1.6;
    transition: background-color 0.2s, transform 0.1s;
}

.week-cta-button:hover {
    background-color: var(--wine-red-dark);
    transform: translateY(-2px);
}

.week-cta-secondary {
    background-color: var(--bg-white);
    color: var(--wine-red);
    border: 2px solid var(--wine-red);
}

.week-cta-secondary:hover {
    background-color: var(--bg-light);
}

/* Module checklist */
.week-section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.week-modules {
    list-style: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.week-module-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

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

.week-module-item:hover {
    background-color: var(--bg-light);
}

.week-module-done {
    background-color: #f0fdf4;
}

.week-module-done:hover {
    background-color: #dcfce7;
}

.week-module-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex-shrink: 0;
    font-size: 1.125rem;
}

.check-done {
    color: #16A34A;
    font-weight: 700;
}

.check-pending {
    color: var(--text-light);
    font-size: 1.25rem;
}

.week-module-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding: var(--space-md) var(--space-md) var(--space-md) 0;
    text-decoration: none;
    color: var(--text-primary);
    min-height: 48px;
}

.week-module-title {
    font-weight: 500;
    font-size: 0.9375rem;
    flex: 1;
}

.week-module-time {
    color: var(--text-light);
    font-size: 0.8125rem;
    white-space: nowrap;
    margin-left: var(--space-md);
}

/* Week module list container */
.week-module-list {
    margin-bottom: var(--space-xl);
}

/* Quiz section */
.week-quiz-section {
    margin-bottom: var(--space-xl);
}

.week-quiz-status {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-light);
}

.week-quiz-done {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}

.week-quiz-ready {
    flex-direction: column;
    text-align: center;
    background-color: var(--bg-white);
    border-color: var(--wine-red);
}

.week-quiz-locked {
    color: var(--text-secondary);
    font-style: italic;
}

.week-quiz-hint {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.week-quiz-retake {
    margin-left: auto;
    color: var(--wine-red);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
}

.week-quiz-retake:hover {
    text-decoration: underline;
}

/* Course complete banner */
.course-complete-banner {
    text-align: center;
    padding: var(--space-xl);
    background-color: #f0fdf4;
    border: 2px solid #bbf7d0;
    border-radius: 12px;
    margin-bottom: var(--space-xl);
}

.course-complete-icon {
    font-size: 3rem;
    margin-bottom: var(--space-md);
}

.course-complete-banner h2 {
    font-size: 1.5rem;
    color: #16A34A;
    margin-bottom: var(--space-sm);
}

.course-complete-banner p {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.course-complete-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* Mobile adjustments for Mi Semana */
@media (max-width: 640px) {
    .week-title {
        font-size: 1.375rem;
    }

    .week-cta-button {
        width: 100%;
        text-align: center;
    }

    .course-complete-actions {
        flex-direction: column;
    }

    .week-quiz-ready {
        padding: var(--space-md);
    }
}