/* Css */
@charset "UTF-8"; /* ============================================================= USER.CSS - Estilos unificados para modulos de usuario Depende de: common.css (debe cargarse ANTES) Secciones: 1. Variables CSS 2. PERFIL 3. PRUEBAS 4. SIMULACRO 5. NOTAS 6. Responsive ============================================================= */ /* ============================================================ 1. VARIABLES CSS (mergeadas de profile.css y tests.css) ============================================================ */ :root
{
    /* Colores del perfil */
    --color-profile-red-light: #DB7A59;
    /* Colores de fondo (tests) */
    --color-bg-header: rgba(235, 220, 215, 0.2);
    --color-bg-score-excellent: var(--color-score-high-bg);
    --color-bg-score-good: #FFF3CD;
    --color-bg-score-average: #FFE5D9;
    --color-bg-score-poor: #F8D7DA;
}

/* ============================================================
Patrones compartidos entre modulos
============================================================ */
/* ============================================================
2. PERFIL (profile.css)
============================================================ */
.top-cards-container
{
    background-color: var(--color-bg-main);
    padding: var(--spacing) 0 var(--spacing) var(--spacing);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: clamp(0.75rem, 1.5vw, 20px);
    margin-bottom: clamp(0.75rem, 1.5vw, 20px);
    width: 100%;
}

/* Welcome message */
.welcome-message
{
    min-height: 250px;
    height: 250px;
    position: relative;
    overflow: hidden;
    grid-column: 1 / -1;
    width: 100%;
}

/* Welcome content */
.welcome-content
{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

/* Welcome top */
.welcome-top
{
    padding-right: 120px;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    padding-bottom: var(--spacing-xl);
}

/* Greeting */
.greeting
{
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

/* User greeting name */
.user-greeting-name
{
    font-size: var(--font-size-2xl);
    font-weight: bold;
    margin: 0 0 5px 0;
    color: var(--color-primary-darker);
}

/* Notifications list */
.notifications-container,
.notifications-list
{
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

/* Notification item */
.notification-item
{
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(200, 100, 80, 0.15);
}

/* Notification item */
.notification-item:last-child
{
    border-bottom: none;
    padding-bottom: 0;
}

/* Notification marker */
.notification-marker
{
    width: 20px;
    height: 20px;
    min-width: 20px;
    background-color: var(--color-primary-dark);
    margin-top: 2px;
    font-size: var(--font-size-xs);
    color: var(--color-white);
}

/* Notification content */
.notification-content
{
    flex: 1;
}

/* Notification title */
.notification-title
{
    font-weight: 600;
    color: var(--color-primary-darker);
    margin: 0 0 2px 0;
}

/* Notification message */
.notification-message
{
    color: var(--color-primary-dark);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Notification date */
.notification-date
{
    font-size: var(--font-size-sm);
    color: rgba(150, 100, 80, 0.7);
    margin-top: 3px;
}

/* Notifications placeholder */
.notifications-placeholder
{
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    color: rgba(150, 100, 80, 0.6);
    font-size: var(--font-size-sm);
    font-style: italic;
}

/* Notifications placeholder */
.notifications-placeholder i
{
    font-size: var(--font-size-lg);
}

/* Notifications view all */
.notifications-view-all
{
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    color: var(--color-primary-dark);
    font-size: var(--font-size-sm);
    cursor: pointer;
    margin-top: auto;
    padding: 4px 0;
    border: none;
    background: none;
    transition: color var(--transition);
    position: absolute;
    bottom: 0;
    left: 0;
}

/* Notifications view all */
.notifications-view-all:hover
{
    color: var(--color-primary-darker);
    text-decoration: underline;
}

/* Welcome image */
.welcome-image
{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 100%;
}

/* Character img */
.character-img
{
    height: 100%;
    background-color: var(--color-bg-main);
}

/* Filtro de mes — versión profile (override después) */
.month-filter-container
{
    background-color: var(--color-bg-main);
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    gap: 10px;
    padding: 20px;
}

/* Month filter container */
.month-filter-container label
{
    font-weight: bold;
    color: var(--color-primary-dark);
}

/* Custom select */
.custom-select
{
    position: relative;
    display: inline-block;
    min-width: 180px;
    width: min(220px, 100%);
}

/* Stats cards container */
.stats-cards-container
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: clamp(10px, 1.5vw, 20px);
    margin-bottom: clamp(12px, 1.5vw, 20px);
}

/* Stat card (hereda el fondo de .card-accent) */
.stat-card
{
    padding: clamp(12px, 1.5vw, 20px);
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Card icon container */
.card-icon-container
{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: clamp(10px, 1vw, 15px);
    width: clamp(40px, 3vw + 25px, 60px);
    min-width: clamp(40px, 3vw + 25px, 60px);
}

/* Card icon */
.card-icon
{
    width: 100%;
    height: clamp(40px, 3vw + 25px, 60px);
}

/* Card value */
.card-value
{
    margin: 0 0 3px 0;
    font-size: var(--font-size-2xl);
    font-weight: bold;
    color: var(--color-primary-dark);
}

/* Card title */
.card-title
{
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-profile-red-light);
}

/* Bottom sections */
.bottom-sections
{
    display: grid;
    grid-template-columns: calc((100% - 40px) / 3) 1fr;
    gap: 20px;
    margin-bottom: var(--spacing-lg);
    width: 100%;
}

/* Badges card */
.badges-card
{
    background-color: var(--color-bg-main);
    padding: 20px;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 250px;
}

/* Section title */
.section-title
{
    text-align: left;
    margin-top: 0;
    font-size: var(--font-size-lg);
    color: var(--color-primary-dark);
    margin-bottom: 15px;
}

/* Badge navigation */
.badge-navigation
{
    width: 100%;
    margin-bottom: 25px;
}

/* Badge nav btn */
.badge-nav-btn
{
    width: 44px;
    height: 44px;
    background-color: var(--color-bg-overlay);
    border: 1px solid var(--color-profile-red-light);
    cursor: pointer;
    color: var(--color-primary-dark);
    box-shadow: 0 2px 4px var(--shadow);
    transition: transform 0.2s ease;
}

/* Badge nav btn */
.badge-nav-btn:hover
{
    transform: scale(1.1);
}

/* Badge circle */
.badge-circle
{
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: var(--color-bg-overlay);
    border: 2px solid var(--color-profile-red-light);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

/* Badge image */
.badge-image
{
    height: 80%;
    display: block;
    margin: 0 auto;
}

/* Badge locked */
.badge-locked
{
    filter: grayscale(100%);
    opacity: 0.6;
}

/* Badge labels */
.badge-labels
{
    width: 100%;
    text-align: left;
    margin-top: 5px;
}

/* Badge label */
.badge-label
{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 8px;
    color: var(--color-text-light);
}

/* Label text */
.label-text
{
    flex: 1;
}

/* Label value */
.label-value
{
    text-align: right;
    font-weight: bold;
    color: var(--color-primary-dark);
}

/* Badge progress track */
.badge-progress-track
{
    width: 100%;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Badge progress bar */
.badge-progress-bar
{
    width: 100%;
    height: 8px;
    border-radius: 99px;
    border: none;
    overflow: hidden;
    appearance: none;
}

/* Badge progress bar */
.badge-progress-bar::-webkit-progress-bar
{
    background-color: var(--color-border, #e5e7eb);
    border-radius: 99px;
}

/* Badge progress bar */
.badge-progress-bar::-webkit-progress-value,
.badge-progress-bar::-moz-progress-bar
{
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 99px;
}

/* Badge progress bar */
.badge-progress-bar::-webkit-progress-value
{
    transition: width 0.5s ease;
}

/* Is earned */
.badge-progress-track.is-earned
{
    display: none;
}

/* Learning stats section */
.learning-stats-section
{
    background-color: var(--color-bg-main);
    padding: 20px;
    width: 100%;
}

/* Chart container */
.chart-container
{
    height: 260px;
    width: 100%;
    position: relative;
    overflow-x: auto;
}

/* Error message */
.no-data-message,
.error-message
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--color-primary-dark);
    background-color: var(--color-bg-overlay);
    padding: 10px 15px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 5px var(--shadow);
    z-index: 10;
}

/* Boton editar perfil */
.edit-profile-btn
{
    gap: 0.4rem;
    margin-top: var(--spacing-md);
    padding: 0.4rem 0.85rem;
    background: var(--color-primary-alpha);
    border: 1px solid var(--color-primary-alpha-30);
    border-radius: 20px;
    color: var(--color-primary-darker);
    font-size: 0.8rem;
    font-weight: 500;
    transition: background 0.15s ease, border-color 0.15s ease;
    align-self: flex-start;
}

/* Edit profile btn */
.edit-profile-btn:hover
{
    background: rgba(193, 75, 54, 0.2);
    border-color: rgba(193, 75, 54, 0.5);
}

/* Modal close btn (compone .modal-close de common.css; variante
   blanca para el header oscuro del modal de perfil) */
.modal-close-btn
{
    color: rgba(255, 255, 255, 0.5);
}

/* Modal close btn: hover propio para no heredar el fondo gris de common */
.modal-close-btn:hover
{
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

/* Epm avatar section */
.epm-avatar-section
{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.25rem;
    gap: 0.4rem;
}

/* Epm avatar wrap */
.epm-avatar-wrap
{
    position: relative;
    width: 80px;
    height: 80px;
}

/* Epm avatar circle */
.epm-avatar-circle
{
    width: 80px;
    height: 80px;
    background: var(--color-primary-alpha-15);
    border: 2px solid rgba(193, 75, 54, 0.35);
    overflow: hidden;
}

/* Epm avatar initials */
.epm-avatar-initials
{
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
}

/* Epm avatar img */
.epm-avatar-img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Epm avatar upload btn */
.epm-avatar-upload-btn
{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 26px;
    height: 26px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.7rem;
    cursor: pointer;
    border: 2px solid var(--color-bg-overlay, #1e1e2e);
    transition: background 0.15s ease;
}

/* Epm avatar upload btn */
.epm-avatar-upload-btn:hover
{
    background: var(--color-primary-dark);
}

/* Epm avatar hint */
.epm-avatar-hint
{
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    margin: 0;
}

/* Epm field */
.epm-field
{
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: var(--spacing);
}

/* Epm toggle field */
.epm-toggle-field
{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/* Epm label */
.epm-label
{
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
}

/* Epm input */
.epm-input
{
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--color-gray-line);
    font-size: 0.9rem;
    padding: 0.55rem var(--spacing-md);
    transition: border-color 0.15s ease;
    outline: none;
}

/* Epm input */
.epm-input:focus
{
    border-color: rgba(193, 75, 54, 0.6);
}

/* Epm field hint */
.epm-field-hint
{
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
    text-align: right;
}

/* Epm toggle */
.epm-toggle
{
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

/* Epm toggle */
.epm-toggle input
{
    opacity: 0;
    width: 0;
    height: 0;
}

/* Toggle slider */
.toggle-slider
{
    background-color: rgba(255, 255, 255, 0.2);
}

/* Epm error */
.epm-error
{
    font-size: 0.82rem;
    color: #e06249;
    margin-top: 0.25rem;
}

/* Btn */
.btn[disabled]
{
    opacity: 0.55;
    cursor: not-allowed;
}

/* Suscripcion */
.subscription-section
{
    margin-bottom: 20px;
}

/* Subscription card (hereda el fondo de .card-accent) */
.subscription-card
{
    padding: clamp(15px, 1.5vw, 20px);
    display: flex;
    align-items: center;
    gap: clamp(15px, 1.5vw, 20px);
}

/* Subscription icon */
.subscription-icon
{
    width: clamp(50px, 4vw, 60px);
    height: clamp(50px, 4vw, 60px);
}

/* Subscription icon */
.subscription-icon i
{
    font-size: var(--font-size-2xl);
    color: var(--color-white);
}

/* Subscription badge */
.subscription-icon.premium,
.subscription-badge
{
    background: linear-gradient(135deg, var(--color-gold-premium) 0%, var(--color-premium) 100%);
}

/* Free */
.subscription-icon.free
{
    background-color: var(--color-primary-dark);
}

/* Pending */
.subscription-icon.pending
{
    background-color: var(--color-chart-orange);
}

/* Subscription info */
.subscription-info
{
    flex: 1;
}

/* Subscription badge (compone .badge de common.css) */
.subscription-badge
{
    margin-bottom: 8px;
    color: var(--color-white);
}

/* Free */
.subscription-badge.free
{
    background: var(--color-primary-alpha-25);
    color: var(--color-primary-dark);
}

/* Pending */
.subscription-badge.pending
{
    background: var(--color-bg-pending-light);
    color: var(--color-chart-orange);
}

/* Subscription info */
.subscription-info h3
{
    margin: 0 0 5px 0;
    font-size: var(--font-size-xl);
    color: var(--color-text-dark);
}

/* Subscription info */
.subscription-info p
{
    margin: 0;
    color: var(--color-text-light);
}

/* Days left */
.days-left
{
    margin-top: 5px;
    font-weight: 500;
    color: var(--color-primary-dark);
}

/* Subscription actions */
.subscription-actions
{
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Buscador notas (perfil) */
.notes-search-wrap
{
    position: relative;
    margin-bottom: var(--spacing-md);
}

/* Notes search input */
.notes-search-input
{
    padding: var(--gap-xs) var(--spacing) var(--gap-xs) 2.2rem;
}

/* Notes search icon */
.notes-search-icon
{
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-light);
    pointer-events: none;
}

/* ============================================================
3. PRUEBAS (tests.css)
============================================================ */
.col-detalles
{
    text-align: center;
    white-space: nowrap;
}

/* Btn details link */
.btn-details-link
{
    gap: var(--gap-xs);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-alpha);
    border: 1px solid rgba(193, 75, 54, 0.2);
    padding: var(--gap-xs) var(--spacing-sm);
}

/* Btn details link */
.btn-details-link:hover
{
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* #app */
#app
{
    margin: 0;
    padding: 0;
    position: relative;
    overflow: visible;
    width: 100%;
    max-width: 100%;
    background-color: var(--color-bg-main);
    min-height: 100vh;
}

/* Screen */
.screen
{
    background-color: var(--color-bg-main);
    width: 100%;
    height: 100%;
    position: relative;
}

/* Active */
.screen.active
{
    display: block;
}

/* Tests filter section */
.tests-filter-section
{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
    gap: var(--gap-xl);
    min-width: 0;
}

/* tests.css declara su propia variante de .month-filter-container; queda al final
y la profile sigue funcionando al ser la primera (cuando se carga en profile.html
la regla tests.* no aplica visualmente porque el selector es identico).
Para evitar conflictos, declaramos un override más específico via clase auxiliar.
Mantenemos las dos definiciones antiguas combinándolas: la base ya cubierta arriba.
Tests añade color y otro padding: */
.tests-filter-section .month-filter-container
{
    color: var(--color-primary);
    border-top: 3px solid var(--color-primary);
    padding: 12px 20px;
    margin-bottom: 0;
}

/* Tests summary */
.tests-summary
{
    display: flex;
    gap: clamp(8px, 1vw, 15px);
    justify-content: flex-end;
    align-items: stretch;
    min-width: 0;
}

/* Summary item */
.summary-item
{
    background-color: var(--color-bg-card);
    padding: clamp(8px, 1vw, 15px) clamp(10px, 1.5vw, 20px);
    text-align: center;
    min-width: clamp(0px, 10vw, 160px);
    max-width: 260px;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Summary value */
.summary-value
{
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 8px;
    margin-top: 0;
}

/* Summary label */
.summary-label
{
    color: var(--color-primary);
}

/* Tests table container */
.tests-table-container
{
    background-color: var(--color-bg-main);
    width: 100%;
    padding: 0;
    overflow-x: auto;
    margin-bottom: 30px;
}

/* Tests cards container */
.tests-cards-container
{
    background-color: var(--color-bg-main);
}

/* Tests table */
.tests-table
{
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    table-layout: auto;
}

/* Tests table */
.tests-table th,
.tests-table td
{
    padding: clamp(6px, 1vw, 15px) clamp(8px, 1.5vw, 20px);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

/* Tests table */
.tests-table th
{
    background-color: var(--color-bg-header);
    font-weight: 600;
    color: var(--color-primary);
    position: relative;
    border-bottom: 1px solid var(--color-primary);
}

/* Tests table */
.tests-table tbody tr:hover
{
    background-color: var(--color-bg-header);
}

/* Duration text */
.date-text,
.course-text,
.topic-text,
.duration-text
{
    color: var(--color-primary);
    font-weight: 500;
}

/* Completion type */
.time-text,
.completion-type
{
    color: var(--color-primary-dark);
}

/* Score badge (compone .badge de common.css) */
.score-badge
{
    min-width: 60px;
    text-align: center;
    box-shadow: var(--shadow);
}

/* Score excellent */
.score-excellent
{
    background-color: var(--color-bg-score-excellent);
    color: var(--color-score-high-text);
}

/* Score good */
.score-good
{
    background-color: var(--color-bg-score-good);
    color: var(--color-primary);
}

/* Score average */
.score-average
{
    background-color: var(--color-bg-score-average);
    color: var(--color-primary);
}

/* Score poor */
.score-poor
{
    background-color: var(--color-bg-score-poor);
    color: var(--color-primary);
}

/* Score detail */
.score-detail
{
    opacity: 0.8;
}

/* ============================================================
4. SIMULACRO (simulacro.css)
============================================================ */
.sim-page-title
{
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin: 0 0 var(--gap-sm);
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    color: var(--color-primary);
}

/* Sim page subtitle */
.sim-page-subtitle
{
    color: var(--color-text-light);
    margin: 0 0 var(--spacing-lg);
    font-size: var(--font-size-sm);
}

/* Sim config form */
.sim-config-form
{
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
}

/* Study content box */
.sim-config-form .study-content-box
{
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-primary);
}

/* Sim step badge */
.sim-step-badge
{
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 700;
    font-size: var(--font-size-sm);
}

/* Sim card title */
.sim-card-title
{
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin: 0;
    color: var(--color-text-dark);
}

/* Sim card hint */
.sim-card-hint
{
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: calc(-1 * var(--gap-sm)) 0 var(--spacing-md);
}

/* Sim question count grid */
.sim-question-count-grid
{
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* Sim time option */
.sim-count-option,
.sim-time-option
{
    cursor: pointer;
}

/* Sim time option */
.sim-count-option input,
.sim-time-option input
{
    display: none;
}

/* Sim count option */
.sim-count-option span
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 52px;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-light);
    transition: all var(--transition);
}

/* Sim time option */
.sim-count-option input:checked + span,
.sim-time-option:has(input:checked)
{
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-bg-warm-light);
}

/* Sim time options */
.sim-time-options
{
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
}

/* Sim time option */
.sim-time-option
{
    display: inline-flex;
    align-items: center;
    padding: .45rem 1.1rem;
    border: 1.5px solid var(--color-border);
    border-radius: 99px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--color-text-light);
    transition: all .15s;
    background: none;
}

/* Sim courses list */
.sim-courses-list
{
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

/* Sim loading courses */
.sim-loading-courses
{
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--color-text-light);
    font-size: .9rem;
}

/* Sim course block */
.sim-course-block
{
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
}

/* Sim course check */
.sim-course-check
{
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem var(--spacing);
    cursor: pointer;
    background: var(--color-bg-main);
}

/* Sim course check */
.sim-course-check input
{
    accent-color: var(--color-primary);
    width: 17px;
    height: 17px;
}

/* Sim course name */
.sim-course-name
{
    font-weight: 600;
    font-size: .95rem;
}

/* Sim topics panel */
.sim-topics-panel
{
    padding: .75rem 1rem 1rem 2.5rem;
    background: var(--color-bg-card);
}

/* Sim all topics check */
.sim-all-topics-check
{
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-bottom: .6rem;
    cursor: pointer;
}

/* Sim topics list */
.sim-topics-list
{
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .5rem;
}

/* Sim topic check */
.sim-topic-check
{
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    padding: .3rem 0;
    cursor: pointer;
    font-size: .875rem;
}

/* Sim topic check */
.sim-topic-check input:disabled
{
    opacity: .4;
}

/* Sim topic count */
.sim-topic-count
{
    margin-left: auto;
    font-size: .78rem;
    color: var(--color-text-light);
}

/* Sim no topics */
.sim-no-topics
{
    font-size: .85rem;
    color: var(--color-text-light);
    margin: .25rem 0 0;
}

/* Sim error courses */
.sim-error-courses
{
    color: var(--color-score-low-text);
    font-size: .9rem;
}

/* Sim summary card */
.sim-summary-card
{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
}

/* Sim summary */
.sim-summary
{
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: var(--spacing-md) var(--spacing);
    font-size: .9rem;
    color: #0369a1;
}

/* Sim start btn */
.sim-start-btn
{
    width: 100%;
    font-size: 1.05rem;
    padding: .85rem;
}

/* Sim q context */
.sim-exam-context,
.sim-q-context
{
    font-weight: 600;
    color: var(--color-text-light);
    letter-spacing: .02em;
}

/* Sim exam context */
.sim-exam-context
{
    font-size: .78rem;
    margin: 0 0 .75rem;
}

/* Sim q context */
.sim-q-context
{
    font-size: .75rem;
    margin: 0 0 .5rem;
}

/* Sim results title */
.sim-results-title
{
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--color-primary);
}

/* Sim results title */
.sim-results-title i
{
    color: var(--color-score-mid);
}

/* Sim breakdown table */
.sim-breakdown-table
{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

/* Sim breakdown table */
.sim-breakdown-table th
{
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-main);
    border-bottom: 1px solid var(--color-border);
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-align: left;
}

/* Sim td center */
.sim-breakdown-table th.sim-td-center,
.sim-td-center
{
    text-align: center;
}

/* Sim breakdown table */
.sim-breakdown-table td
{
    padding: .6rem var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

/* Quitamos el borde inferior de la última fila para no duplicar con el borde de la tabla */
.sim-breakdown-table tbody tr:last-child td
{
    border-bottom: none;
}

/* Sim pct high */
.sim-pct-high
{
    background: var(--color-score-high-bg);
    color: var(--color-score-high-text);
}

/* Sim pct mid */
.sim-pct-mid
{
    background: var(--color-score-mid-bg);
    color: var(--color-score-mid-text);
}

/* Sim pct low */
.sim-pct-low
{
    background: var(--color-score-low-bg);
    color: var(--color-score-low-text);
}

/* ============================================================
5. NOTAS (notes.css)
============================================================ */
h1.section-title
{
    font-size: var(--font-size-3xl);
    font-weight: 700;
}

/* Notes toolbar */
.notes-toolbar
{
    display: flex;
    gap: var(--gap-sm);
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: var(--gap-sm);
}

/* notes.css redefine .notes-search-wrap (flex 1 1 0) y .notes-search-icon (left 12px).
Mantenemos los overrides aquí — el contexto es .notes-toolbar para no chocar con perfil. */
.notes-toolbar .notes-search-wrap
{
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
}

/* Notes search icon */
.notes-toolbar .notes-search-icon
{
    left: 12px;
    font-size: var(--font-size-sm);
}

/* Notes search input */
input.notes-search-input
{
    padding: 10px 12px 10px 36px;
}

/* Notes filter select */
.notes-filter-select
{
    flex: 0 0 160px;
}

/* Notes count */
.notes-count
{
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--gap-sm);
}

/* Notes list */
.notes-list
{
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

/* Note card (hereda el fondo de .card-accent) */
.note-card
{
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    padding: var(--spacing);
}

/* Note card header */
.note-card-header
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-sm);
    flex-wrap: wrap;
}

/* Note delete btn */
.note-delete-btn
{
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-light);
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
    flex-shrink: 0;
}

/* Note delete btn */
.note-delete-btn:hover
{
    color: var(--color-danger);
    background: rgba(229, 62, 62, 0.08);
}

/* Note card breadcrumb */
.note-card-breadcrumb
{
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Note card course */
.note-card-course
{
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
}

/* Note breadcrumb sep */
.note-breadcrumb-sep
{
    font-size: 10px;
    color: var(--color-text-light);
}

/* Note card date */
.note-card-topic,
.note-card-date
{
    color: var(--color-text-light);
}

/* Note card topic */
.note-card-topic
{
    font-size: var(--font-size-sm);
}

/* Note card date */
.note-card-date
{
    font-size: var(--font-size-xs, 11px);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Note card exercise */
.note-card-exercise
{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--color-bg-main);
    border-left: 3px solid var(--color-border);
    border-radius: 0 4px 4px 0;
    padding: 8px 10px;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Note card exercise */
.note-card-exercise i
{
    color: var(--color-primary);
    margin-top: 2px;
    flex-shrink: 0;
}

/* Note card content */
.note-card-content
{
    font-size: var(--font-size-sm);
    color: var(--color-text-dark);
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
}

/* Badge de tipo de nota (Teoría / Ejercicio) */
.note-type-badge
{
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--font-size-xs, 11px);
    font-weight: 600;
    flex-shrink: 0;
}

/* Note type theory */
.note-type-theory
{
    background: #e8f4fd;
    color: #1a6fa8;
}

/* Note type exercise */
.note-type-exercise
{
    background: #fef3e2;
    color: #b45309;
}

/* ============================================================
6. RESPONSIVE
============================================================ */
/* --- Compartido: tablet + mobile (≤ 48rem) --- */
@media screen and (max-width: 48rem)
{
    /* Welcome image */
    .welcome-image
    {
        display: none;
    }

    /* Bottom sections */
    .bottom-sections
    {
        grid-template-columns: 1fr;
    }

    /* Chart container */
    .learning-stats-section .chart-container
    {
        padding: 0;
        background: transparent;
        box-shadow: none;
        border: none;
    }

    /* Status badge */
    .status-badge
    {
        font-size: var(--font-size-xs);
    }

    /* Notes toolbar */
    .notes-toolbar
    {
        flex-wrap: wrap;
    }

}

/* Responsive: tablet vertical */
@media screen and (min-width: 30rem) and (max-width: 48rem)
{
    /* Welcome message */
    .welcome-message
    {
        min-height: 120px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    /* Welcome content */
    .welcome-content
    {
        width: 100%;
    }

    /* Welcome top */
    .welcome-top
    {
        width: 100%;
        padding-bottom: var(--spacing-md);
    }

    /* Month filter container */
    .month-filter-container
    {
        margin-bottom: 20px;
    }

    /* Custom select */
    .custom-select
    {
        min-width: 150px;
    }

    /* Stat card */
    .stat-card
    {
        min-height: 100px;
    }

    /* Card value */
    .card-value
    {
        font-size: var(--font-size-xl);
        font-weight: 600;
    }

    /* Card title */
    .card-title
    {
        margin-top: 4px;
    }

    /* Bottom sections */
    .bottom-sections
    {
        gap: 25px;
        margin-bottom: 30px;
    }

    /* Badges card */
    .badges-card
    {
        min-height: 220px;
        padding: 20px;
    }

    /* Stats header */
    .badges-card .stats-header
    {
        width: 100%;
        text-align: left;
    }

    /* Badge circle */
    .badge-circle
    {
        width: 200px;
        height: 200px;
        margin: 0 auto 15px auto;
    }

    /* Learning stats section */
    .learning-stats-section
    {
        padding: 20px;
        min-height: 220px;
    }

    /* Chart container */
    .learning-stats-section .chart-container
    {
        min-height: 200px;
    }

    /* Error message */
    .no-data-message,
    .error-message
    {
        font-size: var(--font-size-xs);
        padding: 8px 12px;
    }

    /* tests */
    .tests-filter-section
    {
        gap: 12px;
    }

    /* Month filter container */
    .tests-filter-section .month-filter-container
    {
        padding: 12px 15px;
    }

    /* Tests summary */
    .tests-summary
    {
        margin-top: 12px;
    }

    /* Summary value */
    .summary-value
    {
        margin-bottom: 3px;
    }

    /* Tests table container */
    .tests-table-container
    {
        margin-bottom: 20px;
    }

    /* Status badge */
    .status-badge
    {
        padding: 4px 8px;
    }

    /* Sim question count grid */
    .sim-question-count-grid
    {
        gap: var(--gap-sm);
    }

    /* Sim count option */
    .sim-count-option span
    {
        width: 58px;
        height: 46px;
        font-size: 1.05rem;
    }

    /* Notes search wrap */
    .notes-toolbar .notes-search-wrap
    {
        flex: 1 1 100%;
    }

    /* Notes filter select */
    .notes-filter-select
    {
        flex: 1 1 calc(50% - var(--gap-sm) / 2);
    }

}

/* --- Tablet landscape (48rem - 64rem) --- */
@media screen and (min-width: 48rem) and (max-width: 64rem) and (orientation: landscape)
{
    /* Main container */
    .with-sidebar .main-container
    {
        flex-direction: row;
    }

    /* Main content */
    .with-sidebar .main-content
    {
        width: calc(100% - var(--sidebar-width));
        max-width: calc(100% - var(--sidebar-width));
    }

    /* Welcome message */
    .welcome-message
    {
        padding: 15px;
    }

    /* Month filter container */
    .month-filter-container
    {
        padding: 12px 15px;
        margin-bottom: 0;
    }

    /* Month filter container */
    .month-filter-container label
    {
        font-weight: 600;
        margin: 0;
    }

    /* Custom select */
    .custom-select
    {
        min-width: 140px;
    }

    /* Bottom sections */
    .bottom-sections
    {
        grid-template-columns: calc((100% - 24px) / 3) 1fr;
        gap: 12px;
        margin-bottom: 18px;
    }

    /* Badges card */
    .badges-card
    {
        min-height: 260px;
        padding: 14px;
    }

    /* Section title */
    .section-title
    {
        text-align: center;
    }

    /* Badge navigation */
    .badge-navigation
    {
        margin-bottom: 15px;
    }

    /* Badge nav btn */
    .badge-nav-btn
    {
        width: 32px;
        height: 32px;
    }

    /* Badge circle */
    .badge-circle
    {
        width: 120px;
        height: 120px;
        padding: 6px;
        margin: 0 auto 8px auto;
    }

    /* Badge image */
    .badge-circle .badge-image
    {
        max-width: 90%;
        height: auto;
    }

    /* Badge label */
    .badge-label
    {
        font-size: 0.68rem;
        gap: 6px;
    }

    /* Learning stats section */
    .learning-stats-section
    {
        max-width: 100%;
        min-height: 200px;
        padding: 16px;
    }

    /* Chart container */
    .chart-container
    {
        flex: 1;
        min-height: 200px;
        background-color: var(--color-bg-main);
        border-radius: var(--border-radius);
        padding: 16px;
        box-shadow: 0 2px 8px var(--shadow);
    }

    /* Error message */
    .no-data-message,
    .error-message
    {
        font-size: var(--font-size-xs);
        padding: 6px 10px;
    }

    /* tests */
    .tests-filter-section
    {
        margin-bottom: 15px;
        gap: 12px;
    }

    /* Month filter container */
    .tests-filter-section .month-filter-container
    {
        padding: 8px 12px;
    }

    /* Summary value */
    .summary-value
    {
        font-size: var(--font-size-xl);
        margin-bottom: 2px;
    }

    /* Summary label */
    .summary-label
    {
        font-size: var(--font-size-xs);
    }

    /* Tests table container */
    .tests-table-container
    {
        margin-bottom: 15px;
    }

    /* Status badge */
    .status-badge
    {
        padding: 3px 6px;
        font-size: var(--font-size-xs);
    }

}

/* --- Mobile (<= 30rem portrait) --- */
@media screen and (max-width: 30rem)
{
    /* Main container */
    .with-sidebar .main-container
    {
        flex-direction: column;
    }

    /* With sidebar */
    body.with-sidebar
    {
        overflow-x: hidden;
    }

    /* Welcome message */
    .welcome-message
    {
        padding: 15px;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Welcome top */
    .welcome-top
    {
        padding-right: 0;
        width: 100%;
        padding-bottom: var(--spacing-sm);
    }

    /* Welcome message */
    .welcome-message h2
    {
        font-size: var(--font-size-xl);
        margin: 0 0 5px 0;
        color: var(--color-primary);
        font-weight: 700;
    }

    /* Welcome message */
    .welcome-message p
    {
        margin: 0 0 10px 0;
        color: var(--color-text-light);
    }

    /* Welcome message */
    .welcome-message a
    {
        color: var(--color-primary);
        text-decoration: none;
        font-weight: 600;
        align-self: flex-start;
    }

    /* Month filter container */
    .month-filter-container
    {
        padding: 15px;
        margin-bottom: 15px;
    }

    /* Month filter container */
    .month-filter-container label
    {
        font-size: var(--font-size-lg);
        font-weight: 600;
    }

    /* Custom select */
    .custom-select
    {
        width: 100%;
        min-width: auto;
        font-size: var(--font-size-lg);
    }

    /* Stat card */
    .stat-card
    {
        margin-bottom: 10px;
    }

    /* Card value */
    .card-value
    {
        font-size: var(--font-size-lg);
    }

    /* Card title */
    .card-title
    {
        font-size: var(--font-size-lg);
    }

    /* Bottom sections */
    .bottom-sections
    {
        gap: 15px;
        margin-bottom: 20px;
    }

    /* Badges card */
    .badges-card
    {
        min-height: 200px;
        align-items: center;
        margin-bottom: 15px;
        padding: 15px;
    }

    /* Section title */
    .section-title
    {
        font-size: var(--font-size-xl);
    }

    /* Badge navigation */
    .badge-navigation
    {
        margin-bottom: 20px;
        justify-content: center;
    }

    /* Badge circle */
    .badge-circle
    {
        margin: 0 auto 20px auto;
    }

    /* Badge label */
    .badge-label
    {
        text-align: left;
        padding: 0 10px;
    }

    /* Label text */
    .label-text
    {
        text-align: left;
        font-size: var(--font-size-lg);
    }

    /* Label value */
    .label-value
    {
        font-size: var(--font-size-lg);
    }

    /* Learning stats section */
    .learning-stats-section
    {
        min-height: 250px;
        padding: 15px;
        margin-bottom: 15px;
    }

    /* Tests filter section */
    .tests-filter-section
    {
        flex-direction: column;
        margin-bottom: 15px;
        gap: 10px;
    }

    /* Month filter container */
    .tests-filter-section .month-filter-container
    {
        width: 100%;
        padding: 15px;
        justify-content: flex-start;
        display: flex;
        align-items: center;
        gap: 12px;
        background-color: var(--color-bg-main);
        border-radius: var(--border-radius);
    }

    /* Month filter container */
    .tests-filter-section .month-filter-container label
    {
        font-size: var(--font-size-lg);
        white-space: nowrap;
        flex-shrink: 0;
        margin: 0;
        align-self: center;
        font-weight: 600;
    }

    /* Tests summary */
    .tests-summary
    {
        width: 100%;
        gap: 8px;
        justify-content: space-between;
    }

    /* Summary item */
    .summary-item
    {
        flex: 1;
    }

    /* Summary value */
    .summary-value
    {
        margin-bottom: 6px;
    }

    /* Tests table container */
    .tests-table-container
    {
        margin-bottom: 15px;
    }

    /* Tests table */
    .tests-table
    {
        min-width: 500px;
    }

    /* Status badge */
    .status-badge
    {
        padding: 2px 4px;
    }

    /* Subscription card */
    .subscription-card
    {
        flex-direction: column;
        text-align: center;
    }

    /* Subscription icon */
    .subscription-icon i
    {
        font-size: var(--font-size-lg);
    }

    /* Subscription info */
    .subscription-info h3
    {
        font-size: var(--font-size-lg);
    }

    /* Subscription actions */
    .subscription-actions
    {
        width: 100%;
        flex-direction: column;
    }

    /* Notes search wrap - ocupa fila completa en mobile */
    .notes-toolbar .notes-search-wrap
    {
        flex: 1 1 100%;
    }

    /* Notes filter select - 2 por fila en mobile */
    .notes-filter-select
    {
        flex: 1 1 calc(50% - var(--gap-sm) / 2);
        min-width: 0;
    }

}