/* ============================================================
   LUZ Y SABER — Design System Override
   H Spanish Academy Theme v2
   Stitch: "Modern Spanish Academy Redesign"
   ============================================================
   ESTRATEGIA:
   1. :root — sobreescribir las variables HSL de Tailwind
   2. :root — añadir tokens propios del sistema Luz y Saber
   3. Reglas específicas con body .clase para superar especificidad
      de los bloques <style> inline en los PHP templates
   ============================================================ */

/* ------------------------------------------------------------
   1. TAILWIND HSL VARIABLE OVERRIDES
   Tailwind usa formato "H S% L%" sin hsl(). Los valores de Luz
   y Saber convertidos a ese formato:
   #f9f9fb → ~210 13% 98%  (surface background)
   #ffffff → 0 0% 100%     (card / surface-lowest)
   #1a1c1d → ~206 8% 11%   (on-surface / foreground)
   #000000 → 0 0% 0%       (primary — negro corporativo)
   #ffffff → 0 0% 100%     (primary foreground)
   #735c00 → ~48 100% 23%  (secondary — oro premium)
   #f3f3f5 → ~240 7% 96%   (muted)
   #444748 → ~195 4% 27%   (muted-foreground)
   #edeef0 → ~220 8% 94%   (accent)
   #c4c7c7 → ~180 3% 78%   (border)
   ------------------------------------------------------------ */
:root {
    /* ---- Tailwind semantic vars (HSL sin wrapper) ---- */
    --background:           210 13% 98%;
    --foreground:           206 8% 11%;
    --card:                 0 0% 100%;
    --card-foreground:      206 8% 11%;
    --popover:              0 0% 100%;
    --popover-foreground:   206 8% 11%;
    --primary:              0 0% 0%;
    --primary-foreground:   0 0% 100%;
    --secondary:            48 100% 23%;
    --secondary-foreground: 0 0% 100%;
    --muted:                240 7% 96%;
    --muted-foreground:     195 4% 27%;
    --accent:               220 8% 94%;
    --accent-foreground:    206 8% 11%;
    --destructive:          0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border:               180 3% 78%;
    --input:                180 3% 78%;
    --ring:                 0 0% 0%;

    /* ---- Luz y Saber Design Tokens ---- */
    --ls-surface:             #f9f9fb;
    --ls-surface-lowest:      #ffffff;
    --ls-surface-low:         #f3f3f5;
    --ls-surface-container:   #edeef0;
    --ls-surface-high:        #e8e8ea;
    --ls-surface-highest:     #e2e2e4;
    --ls-surface-dim:         #d9dadc;

    --ls-on-surface:          #1a1c1d;
    --ls-on-surface-variant:  #444748;
    --ls-outline:             #747878;
    --ls-outline-variant:     #c4c7c7;

    --ls-primary:             #000000;
    --ls-on-primary:          #ffffff;
    --ls-primary-container:   #1c1b1b;
    --ls-on-primary-container:#858383;
    --ls-inverse-primary:     #c8c6c5;

    /* Secondary (Gold — Premium only) */
    --ls-secondary:           #735c00;
    --ls-on-secondary:        #ffffff;
    --ls-secondary-container: #fed65b;
    --ls-on-secondary-container: #745c00;
    --ls-secondary-fixed:     #ffe088;

    --ls-success:             #10B981;
    --ls-error:               #EF4444;

    /* CEFR Tier Colors */
    --ls-tier-a1:        #2D6A4F;
    --ls-tier-a1-bg:     #e6f4ed;
    --ls-tier-a1-bg-dim: #c5e8d5;

    --ls-tier-a2:        #1D4ED8;
    --ls-tier-a2-bg:     #eff6ff;
    --ls-tier-a2-bg-dim: #dbeafe;

    --ls-tier-b1:        #B45309;
    --ls-tier-b1-bg:     #fffbeb;
    --ls-tier-b1-bg-dim: #fef3c7;

    --ls-tier-b2:        #92400E;
    --ls-tier-b2-bg:     #fff7ed;
    --ls-tier-b2-bg-dim: #ffedd5;

    --ls-tier-c1:        #991B1B;
    --ls-tier-c1-bg:     #fef2f2;
    --ls-tier-c1-bg-dim: #fee2e2;

    --ls-tier-c2:        #581C87;
    --ls-tier-c2-bg:     #f5f3ff;
    --ls-tier-c2-bg-dim: #ede9fe;

    /* Shape */
    --ls-radius-sm:   0.25rem;
    --ls-radius:      0.5rem;
    --ls-radius-md:   0.75rem;
    --ls-radius-lg:   1rem;
    --ls-radius-xl:   1.5rem;
    --ls-radius-full: 9999px;

    /* Elevation */
    --ls-shadow-card:       0px 4px 20px rgba(0, 0, 0, 0.04);
    --ls-shadow-card-hover: 0px 8px 30px rgba(0, 0, 0, 0.08);
    --ls-shadow-nav:        0px 4px 20px rgba(0, 0, 0, 0.04);
    --ls-shadow-dropdown:   0 8px 24px rgba(0, 0, 0, 0.10);

    /* Typography scale */
    --ls-font-headline: 'Manrope', -apple-system, sans-serif;
    --ls-font-body:     'Inter', -apple-system, sans-serif;

    /* Spacing */
    --ls-space-xs: 8px;
    --ls-space-sm: 12px;
    --ls-space-md: 24px;
    --ls-space-lg: 48px;
    --ls-gutter:   24px;
    --ls-margin-mob: 16px;
    --ls-margin-dsk: 40px;

    --ls-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------
   2. GLOBAL BASE
   ------------------------------------------------------------ */
html {
    background-color: var(--ls-surface) !important;
    scroll-behavior: smooth;
}

body {
    background-color: var(--ls-surface) !important;
    color: var(--ls-on-surface) !important;
    font-family: var(--ls-font-body) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ls-font-headline) !important;
    color: var(--ls-on-surface) !important;
    letter-spacing: -0.01em;
}

p, span, li, td, th, label {
    font-family: var(--ls-font-body);
    color: var(--ls-on-surface);
}

a {
    color: var(--ls-on-surface);
    text-decoration: none;
}

a:hover {
    color: var(--ls-primary);
}

/* ------------------------------------------------------------
   3. HEADER / NAV
   ------------------------------------------------------------ */
header.bg-card,
header.bg-white,
header[class*="bg-"] {
    background: var(--ls-surface-lowest) !important;
    border-bottom: 1px solid var(--ls-outline-variant) !important;
    box-shadow: var(--ls-shadow-nav) !important;
}

/* Site title — eliminar gradiente naranja/rosa, usar negro sólido */
header h1.text-xl,
header h1[class*="bg-gradient"],
header h1[class*="bg-clip"],
header h1[class*="text-transparent"] {
    font-family: var(--ls-font-headline) !important;
    font-weight: 800 !important;
    font-size: 1.125rem !important;
    letter-spacing: -0.02em !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--ls-on-surface) !important;
    color: var(--ls-on-surface) !important;
}

/* Subtítulo "APRENDE • PRACTICA • DOMINA" */
header p.text-xs {
    color: var(--ls-on-surface-variant) !important;
    font-family: var(--ls-font-body) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
}

/* Nav links y botones */
header a.nav-link,
header nav a,
header .nav-button,
header .dropdown-trigger {
    color: var(--ls-on-surface-variant) !important;
    font-family: var(--ls-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-decoration: none !important;
    transition: color 0.2s ease, background 0.2s ease !important;
    background: none !important;
    border-radius: var(--ls-radius) !important;
}

header a.nav-link:hover,
header nav a:hover,
header .nav-button:hover,
header .dropdown-trigger:hover {
    color: var(--ls-on-surface) !important;
    background: var(--ls-surface-container) !important;
}

/* Notificación badge en nav */
.notification-badge {
    background: var(--ls-error) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: var(--ls-radius-full) !important;
}

/* Botón Premium en nav (dorado) */
header a[href*="premium"],
header .nav-button[href*="premium"] {
    background: var(--ls-secondary-container) !important;
    color: var(--ls-on-secondary-container) !important;
    border: none !important;
    font-weight: 700 !important;
    border-radius: var(--ls-radius) !important;
}

/* Dropdowns */
.level-dropdown,
.mas-dropdown {
    background: var(--ls-surface-lowest) !important;
    border: 1px solid var(--ls-outline-variant) !important;
    border-radius: var(--ls-radius-md) !important;
    box-shadow: var(--ls-shadow-dropdown) !important;
}

.level-item,
.mas-item {
    color: var(--ls-on-surface-variant) !important;
    font-family: var(--ls-font-body) !important;
    font-size: 13px !important;
    border-radius: var(--ls-radius-sm) !important;
    transition: background 0.15s ease !important;
}

.level-item:hover,
.mas-item:hover {
    background: var(--ls-surface-low) !important;
    color: var(--ls-on-surface) !important;
}

.level-code {
    font-weight: 700 !important;
    font-family: var(--ls-font-headline) !important;
    color: var(--ls-on-surface) !important;
}

.level-label {
    font-size: 11px !important;
    color: var(--ls-on-surface-variant) !important;
}

/* Notificaciones dropdown */
.notifications-dropdown {
    background: var(--ls-surface-lowest) !important;
    border: 1px solid var(--ls-outline-variant) !important;
    border-radius: var(--ls-radius-md) !important;
    box-shadow: var(--ls-shadow-dropdown) !important;
}

.notifications-header {
    background: var(--ls-surface-low) !important;
    border-bottom: 1px solid var(--ls-outline-variant) !important;
}

/* Mobile nav */
.mobile-nav-item {
    color: var(--ls-on-surface-variant) !important;
    font-family: var(--ls-font-body) !important;
    border-radius: var(--ls-radius) !important;
    transition: background 0.15s ease !important;
}

.mobile-nav-item:hover {
    background: var(--ls-surface-container) !important;
    color: var(--ls-on-surface) !important;
}

/* ------------------------------------------------------------
   4. CARDS — Universal
   ------------------------------------------------------------ */
/* Cards de contenido — fondo blanco limpio */
body .course-card,
body .content-card,
body .sidebar-card,
body .activity-card,
body .completed-lesson-card,
body .modal-medal-card {
    background: var(--ls-surface-lowest) !important;
    border-radius: var(--ls-radius-md) !important;
    box-shadow: var(--ls-shadow-card) !important;
    border: 1px solid var(--ls-surface-high) !important;
    transition: var(--ls-transition) !important;
}
/* daily-fact-section tiene su propio tinte de color — no se neutraliza aquí */

body .course-card:hover,
body .content-card:hover,
body .activity-card:hover {
    box-shadow: var(--ls-shadow-card-hover) !important;
    border-color: var(--ls-outline-variant) !important;
    transform: translateY(-2px) !important;
}

/* Content card typography */
body .content-card-title {
    font-family: var(--ls-font-headline) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--ls-on-surface) !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
}

body .content-card-subtitle {
    font-family: var(--ls-font-body) !important;
    font-size: 0.75rem !important;
    color: var(--ls-on-surface-variant) !important;
    line-height: 1.4 !important;
}

body .content-card-type {
    font-family: var(--ls-font-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--ls-on-surface-variant) !important;
    letter-spacing: 0.03em !important;
}

/* Level badge en cards — chip pill */
body .content-card-level {
    font-family: var(--ls-font-body) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    border-radius: var(--ls-radius-full) !important;
    text-transform: uppercase !important;
    padding: 2px 8px !important;
}

/* Emoji container en card */
body .content-card-emoji {
    border-radius: var(--ls-radius-sm) !important;
    font-size: 1.25rem !important;
}

/* Profile sidebar card */
body .sidebar-card.profile-card {
    background: var(--ls-surface-lowest) !important;
    border: 1px solid var(--ls-outline-variant) !important;
}

body .sidebar-title {
    font-family: var(--ls-font-headline) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--ls-on-surface-variant) !important;
}

/* Hover en links del sidebar */
body .sidebar-card a:hover {
    background: var(--ls-surface-low) !important;
    border-radius: var(--ls-radius-sm) !important;
}

/* Recent posts card */
body .recent-posts-card .activity-card {
    border-radius: var(--ls-radius) !important;
}

/* ------------------------------------------------------------
   5. CONTINUE CARD (card de progreso principal)
   ------------------------------------------------------------ */
body .continue-card {
    border-radius: var(--ls-radius-lg) !important;
    border: none !important;
    overflow: hidden;
}

/* Tipografía dentro del continue-card */
body .continue-card h2,
body .continue-card h3,
body .continue-header h2,
body .continue-header h3 {
    font-family: var(--ls-font-headline) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

body .progress-text {
    font-family: var(--ls-font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.85) !important;
}

/* Progress bars — líneas delgadas estilo Luz y Saber */
body .progress-bar {
    height: 4px !important;
    border-radius: var(--ls-radius-full) !important;
    background: rgba(255,255,255,0.25) !important;
    overflow: hidden !important;
}

body .progress-fill {
    height: 100% !important;
    border-radius: var(--ls-radius-full) !important;
    background: rgba(255,255,255,0.9) !important;
}

/* Completed badge */
body .completed-badge {
    background: rgba(16,185,129,0.15) !important;
    color: var(--ls-success) !important;
    border: 1px solid rgba(16,185,129,0.3) !important;
    border-radius: var(--ls-radius-full) !important;
    font-family: var(--ls-font-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* Progress circle */
body .progress-circle {
    font-family: var(--ls-font-headline) !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
}

/* Level progress block inside continue-card */
body .level-progress-block {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.12) !important;
    border-radius: var(--ls-radius) !important;
}

/* ------------------------------------------------------------
   6. FLASHCARDS CARD
   ------------------------------------------------------------ */
body .daily-flashcards-card {
    /* Tinte rosado suave — Luz y Saber style (muted, no hot pink) */
    background: linear-gradient(135deg, #fef6fb 0%, #fde8f3 100%) !important;
    border: 1.5px solid rgba(219, 39, 119, 0.18) !important;
    border-radius: var(--ls-radius-lg) !important;
    box-shadow: 0 4px 16px rgba(219, 39, 119, 0.07) !important;
}

body .daily-flashcards-card:hover {
    box-shadow: 0 8px 24px rgba(219, 39, 119, 0.12) !important;
    transform: translateY(-2px) !important;
    border-color: rgba(219, 39, 119, 0.3) !important;
}

body .flashcards-title {
    font-family: var(--ls-font-headline) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--ls-on-surface) !important;
    letter-spacing: -0.01em !important;
}

body .flashcards-subtitle {
    font-family: var(--ls-font-body) !important;
    font-size: 0.8125rem !important;
    color: var(--ls-on-surface-variant) !important;
    line-height: 1.5 !important;
}

body .flashcards-badge {
    /* Badge rosado — tinte Luz y Saber: fondo suave, texto oscuro con contraste */
    background: #fde8f3 !important;
    color: #9d174d !important;
    border: 1px solid rgba(219, 39, 119, 0.25) !important;
    border-radius: var(--ls-radius-full) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

body .btn-practicar,
body .dfp-btn-ver-palabras,
body .dfp-btn-restart {
    font-family: var(--ls-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: var(--ls-radius) !important;
    transition: opacity 0.2s ease !important;
}

body .btn-practicar {
    background: var(--ls-primary) !important;  /* negro #000 */
    color: #ffffff !important;                  /* texto blanco siempre */
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}

body .btn-practicar:hover {
    background: #1a1c1d !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    opacity: 1 !important;
}

body .dfp-btn-ver-palabras,
body .dfp-btn-restart {
    background: transparent !important;
    color: var(--ls-on-surface) !important;
    border: 1.5px solid var(--ls-outline-variant) !important;
}

body .dfp-btn-ver-palabras:hover,
body .dfp-btn-restart:hover {
    background: var(--ls-surface-container) !important;
    border-color: var(--ls-outline) !important;
}

/* Flashcard (cara de la carta) */
body .dfp-flashcard {
    background: var(--ls-surface-lowest) !important;
    border: 1px solid var(--ls-surface-high) !important;
    border-radius: var(--ls-radius-md) !important;
    box-shadow: var(--ls-shadow-card) !important;
}

body .dfp-card-word {
    font-family: var(--ls-font-headline) !important;
    font-weight: 700 !important;
    color: var(--ls-on-surface) !important;
}

body .dfp-card-translation {
    font-family: var(--ls-font-body) !important;
    color: var(--ls-on-surface-variant) !important;
}

body .dfp-card-label {
    font-family: var(--ls-font-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--ls-on-surface-variant) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

body .dfp-progress-bar-wrap {
    background: var(--ls-surface-container) !important;
    border-radius: var(--ls-radius-full) !important;
    height: 4px !important;
}

body .dfp-progress-bar-fill {
    background: var(--ls-success) !important;
    height: 100% !important;
    border-radius: var(--ls-radius-full) !important;
}

/* Respuestas */
body .dfp-answer-btn {
    font-family: var(--ls-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: var(--ls-radius) !important;
}

body .dfp-btn-very-easy  { background: rgba(16,185,129,0.1)  !important; color: #059669 !important; border: 1px solid rgba(16,185,129,0.25) !important; }
body .dfp-btn-easy       { background: rgba(45,106,79,0.1)   !important; color: var(--ls-tier-a1) !important; border: 1px solid rgba(45,106,79,0.25) !important; }
body .dfp-btn-normal     { background: rgba(29,78,216,0.1)   !important; color: var(--ls-tier-a2) !important; border: 1px solid rgba(29,78,216,0.25) !important; }
body .dfp-btn-difficult  { background: rgba(153,27,27,0.1)   !important; color: var(--ls-tier-c1) !important; border: 1px solid rgba(153,27,27,0.25) !important; }

/* ------------------------------------------------------------
   7. DAILY FACT SECTION — Tinte A2 (azul) de Luz y Saber
   El fondo original ya usaba los colores exactos del tier A2.
   Respetamos esa decisión y los actualizamos a los tokens LS.
   ------------------------------------------------------------ */
body .daily-fact-section {
    background: linear-gradient(135deg, var(--ls-tier-a2-bg) 0%, var(--ls-tier-a2-bg-dim) 100%) !important;
    border: 1.5px solid rgba(29, 78, 216, 0.18) !important;
    box-shadow: 0 4px 16px rgba(29, 78, 216, 0.10) !important;
    border-radius: var(--ls-radius-md) !important;
}

body .daily-fact-section:hover {
    box-shadow: 0 8px 28px rgba(29, 78, 216, 0.16) !important;
    transform: translateY(-2px) !important;
}

body .daily-fact-icon {
    background: var(--ls-tier-a2-bg-dim) !important;
    color: var(--ls-tier-a2) !important;
    border-radius: var(--ls-radius) !important;
}

body .daily-fact-title {
    background: var(--ls-tier-a2-bg-dim) !important;
    color: var(--ls-tier-a2) !important;
    border-radius: var(--ls-radius-full) !important;
    font-family: var(--ls-font-body) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 3px 10px !important;
}

body .daily-fact-headline {
    font-family: var(--ls-font-headline) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--ls-tier-a2) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
}

body .daily-fact-subtitle {
    font-family: var(--ls-font-body) !important;
    font-size: 0.875rem !important;
    color: var(--ls-on-surface-variant) !important;
    line-height: 1.6 !important;
}

/* ------------------------------------------------------------
   8. SEARCH / FILTER HEADER
   ------------------------------------------------------------ */
body .search-header {
    background: var(--ls-surface-lowest) !important;
    border-bottom: 1px solid var(--ls-outline-variant) !important;
}

body input[type="search"],
body input[type="text"].search,
body .search-bar,
body [class*="search-input"] {
    font-family: var(--ls-font-body) !important;
    background: var(--ls-surface-low) !important;
    border: 1px solid transparent !important;
    border-radius: var(--ls-radius-xl) !important;
    color: var(--ls-on-surface) !important;
    font-size: 14px !important;
    transition: border-color 0.2s ease !important;
}

body input[type="search"]:focus,
body input[type="text"].search:focus {
    background: var(--ls-surface-lowest) !important;
    border-color: var(--ls-outline) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Filter chips / botones de filtro */
body .filter-btn,
body select#filter-level,
body select#filter-type,
body select#filter-status {
    font-family: var(--ls-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: var(--ls-radius-full) !important;
    background: var(--ls-surface-low) !important;
    color: var(--ls-on-surface-variant) !important;
    border: 1px solid var(--ls-outline-variant) !important;
}

body .filter-btn.active,
body .filter-btn:hover {
    background: var(--ls-on-surface) !important;
    color: var(--ls-surface-lowest) !important;
    border-color: transparent !important;
}

/* ------------------------------------------------------------
   9. BUTTONS
   Solo se sobreescribe btn-primary cuando es un botón de
   acción de UI (header, form, CTA). Los botones de cursos
   usan `.course-button.btn-primary` y se dejan con su
   color de tier (verde success = "empezar").
   ------------------------------------------------------------ */

/* .course-button.btn-primary: botones "Empezar" en cards de curso.
   Mantienen su degradado verde (success = "iniciar aprendizaje").
   Todos los demás btn-primary → negro Luz y Saber. */

body .btn-primary:not(.course-button),
body a.btn-primary:not(.course-button),
body button.btn-primary {
    background: var(--ls-primary) !important;
    background-image: none !important;
    border: none !important;
    border-radius: var(--ls-radius) !important;
    box-shadow: none !important;
    color: var(--ls-on-primary) !important;
    font-family: var(--ls-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    transition: opacity 0.2s ease !important;
}

body .btn-primary:not(.course-button):hover,
body a.btn-primary:not(.course-button):hover,
body button.btn-primary:hover {
    background: var(--ls-primary) !important;
    opacity: 0.82 !important;
    transform: none !important;
    box-shadow: none !important;
    color: var(--ls-on-primary) !important;
}

body .btn-secondary,
body a.btn-secondary,
body button.btn-secondary {
    background: transparent !important;
    background-image: none !important;
    border: 1.5px solid var(--ls-outline) !important;
    border-radius: var(--ls-radius) !important;
    color: var(--ls-on-surface) !important;
    font-family: var(--ls-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: var(--ls-transition) !important;
}

body .btn-secondary:hover {
    background: var(--ls-surface-container) !important;
    border-color: var(--ls-primary) !important;
    color: var(--ls-primary) !important;
    transform: none !important;
    box-shadow: none !important;
}

body .btn-premium,
body .premium-btn {
    background: var(--ls-secondary-container) !important;
    color: var(--ls-on-secondary-container) !important;
    border: none !important;
    font-weight: 700 !important;
    border-radius: var(--ls-radius) !important;
}

/* Activity CTA */
body .activity-cta {
    background: var(--ls-primary) !important;
    color: var(--ls-on-primary) !important;
    border: none !important;
    border-radius: var(--ls-radius) !important;
    font-family: var(--ls-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    box-shadow: none !important;
    transition: opacity 0.2s ease !important;
}

body .activity-cta:hover,
body .activity-card:hover .activity-cta {
    background: var(--ls-primary) !important;
    opacity: 0.82 !important;
    transform: none !important;
}

/* ------------------------------------------------------------
   10. ACTIVITY BADGES / CHIPS
   ------------------------------------------------------------ */
body .activity-badge,
body .hsc-badge,
body .content-type-badge {
    background: var(--ls-surface-high) !important;
    color: var(--ls-on-surface-variant) !important;
    border: 1px solid var(--ls-outline-variant) !important;
    border-radius: var(--ls-radius-full) !important;
    font-family: var(--ls-font-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    padding: 3px 10px !important;
    text-transform: uppercase !important;
}

body .activity-badge.completed,
body .hsc-badge.completed {
    background: rgba(16, 185, 129, 0.1) !important;
    color: var(--ls-success) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}

body .activity-badge.hsc-badge-premium,
body .hsc-premium-card-badge {
    background: var(--ls-secondary-container) !important;
    color: var(--ls-on-secondary-container) !important;
    border-color: transparent !important;
}

/* Streak badge */
body .hsc-streak-badge {
    background: linear-gradient(135deg, var(--ls-secondary-container) 0%, var(--ls-secondary-fixed) 100%) !important;
    color: var(--ls-on-secondary-container) !important;
    border-radius: var(--ls-radius-full) !important;
    font-family: var(--ls-font-body) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* ------------------------------------------------------------
   11. FORMS / INPUTS
   ------------------------------------------------------------ */
body input[type="text"],
body input[type="email"],
body input[type="password"],
body textarea,
body select {
    font-family: var(--ls-font-body) !important;
    background: var(--ls-surface-low) !important;
    border: 1px solid transparent !important;
    border-radius: var(--ls-radius) !important;
    color: var(--ls-on-surface) !important;
    transition: border-color 0.2s ease !important;
}

body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="password"]:focus,
body textarea:focus {
    background: var(--ls-surface-lowest) !important;
    border-color: var(--ls-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06) !important;
}

/* Placeholder */
body input::placeholder,
body textarea::placeholder {
    color: var(--ls-outline) !important;
    opacity: 1 !important;
}

/* ------------------------------------------------------------
   12. PROGRESS INDICATORS (general)
   ------------------------------------------------------------ */
body [class*="progress-bar"],
body .progress-track,
body .h-2,
body .h-1\.5 {
    border-radius: var(--ls-radius-full) !important;
    height: 4px !important;
}

body .bg-success,
body [style*="background: #10b981"],
body [style*="background:#10b981"] {
    background-color: var(--ls-success) !important;
}

/* ------------------------------------------------------------
   13. BOOKMARK / LIKE WIDGETS
   ------------------------------------------------------------ */
body .bookmark-btn,
body .content-card-bookmark {
    background: var(--ls-surface-lowest) !important;
    border: 1px solid var(--ls-outline-variant) !important;
    border-radius: var(--ls-radius-full) !important;
    color: var(--ls-on-surface-variant) !important;
    transition: var(--ls-transition) !important;
}

body .bookmark-btn:hover,
body .content-card-bookmark:hover {
    background: var(--ls-surface-container) !important;
    color: var(--ls-on-surface) !important;
}

body .bookmark-btn.bookmarked,
body .content-card-bookmark.bookmarked {
    background: var(--ls-secondary-container) !important;
    color: var(--ls-on-secondary-container) !important;
    border-color: transparent !important;
}

/* Like button */
body .activity-likes-widget .like-btn {
    font-family: var(--ls-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: var(--ls-radius-full) !important;
    border: 1px solid var(--ls-outline-variant) !important;
    background: var(--ls-surface-lowest) !important;
    color: var(--ls-on-surface-variant) !important;
    transition: var(--ls-transition) !important;
}

body .activity-likes-widget .like-btn.liked {
    background: var(--ls-primary) !important;
    color: var(--ls-on-primary) !important;
    border-color: transparent !important;
}

/* Like avatars */
body .like-avatar {
    border: 2px solid var(--ls-surface-lowest) !important;
    background: var(--ls-surface-container) !important;
    border-radius: var(--ls-radius-full) !important;
}

/* ------------------------------------------------------------
   14. MODALS / OVERLAYS
   ------------------------------------------------------------ */
body .modal-overlay,
body [class*="modal-backdrop"] {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(8px) !important;
}

body .modal-content,
body [class*="modal-container"] {
    background: var(--ls-surface-lowest) !important;
    border-radius: var(--ls-radius-lg) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--ls-outline-variant) !important;
}

body .modal-content h2,
body .modal-content h3 {
    font-family: var(--ls-font-headline) !important;
    color: var(--ls-on-surface) !important;
}

/* ------------------------------------------------------------
   15. TAXONOMY PAGE — Nivel CEFR (A1–C2 listing)
   ------------------------------------------------------------ */
body .level-name,
body .level-title,
body .level-heading {
    font-family: var(--ls-font-headline) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--ls-on-surface) !important;
}

/* Tag de nivel en heading de página */
body .level-chip,
body .cefr-chip {
    border-radius: var(--ls-radius-full) !important;
    font-family: var(--ls-font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 4px 12px !important;
}

/* Completed lesson card — izquierda coloreada */
body .completed-lesson-card {
    border-left-width: 3px !important;
    background: var(--ls-surface-lowest) !important;
    border-radius: var(--ls-radius) !important;
}

/* ------------------------------------------------------------
   16. PROFILE PAGE
   ------------------------------------------------------------ */
body .profile-avatar,
body .user-avatar {
    border: 3px solid var(--ls-surface-high) !important;
    border-radius: var(--ls-radius-full) !important;
}

body .profile-name,
body .user-name {
    font-family: var(--ls-font-headline) !important;
    font-weight: 700 !important;
    color: var(--ls-on-surface) !important;
    letter-spacing: -0.01em !important;
}

body .profile-stat-value {
    font-family: var(--ls-font-headline) !important;
    font-weight: 800 !important;
    color: var(--ls-on-surface) !important;
}

body .profile-stat-label {
    font-family: var(--ls-font-body) !important;
    font-size: 11px !important;
    color: var(--ls-on-surface-variant) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

/* ------------------------------------------------------------
   17. SINGLE ACTIVITY PAGE
   ------------------------------------------------------------ */
body .activity-title-main {
    font-family: var(--ls-font-headline) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--ls-on-surface) !important;
}

body .activity-meta {
    font-family: var(--ls-font-body) !important;
    font-size: 13px !important;
    color: var(--ls-on-surface-variant) !important;
}

body .activity-content {
    font-family: var(--ls-font-body) !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
    color: var(--ls-on-surface) !important;
}

body .activity-content h2,
body .activity-content h3,
body .activity-content h4 {
    font-family: var(--ls-font-headline) !important;
    color: var(--ls-on-surface) !important;
}

/* ------------------------------------------------------------
   18. FOOTER
   ------------------------------------------------------------ */
footer {
    background: var(--ls-surface-highest) !important;
    border-top: 1px solid var(--ls-outline-variant) !important;
    color: var(--ls-on-surface-variant) !important;
}

footer h3, footer h4 {
    color: var(--ls-on-surface) !important;
    font-family: var(--ls-font-headline) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

footer a {
    color: var(--ls-on-surface-variant) !important;
    font-family: var(--ls-font-body) !important;
    font-size: 13px !important;
    transition: color 0.2s ease !important;
}

footer a:hover {
    color: var(--ls-on-surface) !important;
}

footer p,
footer small {
    color: var(--ls-on-surface-variant) !important;
    font-size: 12px !important;
}

/* ------------------------------------------------------------
   19. AGENDA / DATE HEADER
   ------------------------------------------------------------ */
body .agenda-date-header {
    font-family: var(--ls-font-headline) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--ls-on-surface-variant) !important;
}

/* ------------------------------------------------------------
   20. UPSELL / PREMIUM BANNERS
   ------------------------------------------------------------ */
body .flashcards-upsell-banner {
    background: linear-gradient(135deg, var(--ls-secondary-container) 0%, var(--ls-secondary-fixed) 100%) !important;
    color: var(--ls-on-secondary-container) !important;
    border-radius: var(--ls-radius-md) !important;
    border: none !important;
}

body .flashcards-upsell-banner h3,
body .flashcards-upsell-banner p {
    color: var(--ls-on-secondary-container) !important;
}

/* Locked premium card overlay */
body .hsc-card-premium-locked {
    opacity: 0.6 !important;
}

body .hsc-lock-overlay {
    background: var(--ls-tier-c2) !important;
    box-shadow: 0 2px 8px rgba(88, 28, 135, 0.35) !important;
}

/* ------------------------------------------------------------
   21. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    h1 { font-size: 1.625rem !important; letter-spacing: -0.02em !important; }
    h2 { font-size: 1.25rem !important; letter-spacing: -0.01em !important; }
    h3 { font-size: 1.0625rem !important; }

    body .daily-flashcards-card,
    body .daily-fact-section,
    body .course-card,
    body .continue-card {
        border-radius: var(--ls-radius) !important;
    }
}

@media (min-width: 1024px) {
    body { font-size: 1rem; }
}

/* ------------------------------------------------------------
   22. DFP PANEL (modo práctica flashcard dentro del panel)
   ------------------------------------------------------------ */
body .dfp-progress-info {
    background: var(--ls-surface-lowest) !important;
    color: var(--ls-on-surface) !important;
    border: 1.5px solid var(--ls-outline-variant) !important;
    border-radius: var(--ls-radius) !important;
    font-family: var(--ls-font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
}

body .dfp-close-btn,
body .dfp-direction-btn {
    background: var(--ls-surface-lowest) !important;
    color: var(--ls-on-surface) !important;
    border: 1.5px solid var(--ls-outline-variant) !important;
    font-family: var(--ls-font-body) !important;
    font-weight: 700 !important;
    transition: background 0.2s ease !important;
}

body .dfp-close-btn:hover {
    background: var(--ls-surface-container) !important;
    border-color: var(--ls-outline) !important;
    transform: rotate(90deg) !important;
}

body .dfp-direction-btn:hover {
    background: var(--ls-surface-container) !important;
    border-color: var(--ls-outline) !important;
}

body .dfp-stat-num {
    font-family: var(--ls-font-headline) !important;
    font-weight: 800 !important;
    color: var(--ls-on-surface) !important;
}

body .dfp-stat-label {
    font-family: var(--ls-font-body) !important;
    color: var(--ls-on-surface-variant) !important;
    font-size: 11px !important;
}

/* Hover animation — lift sutil */
body .btn-practicar:hover {
    transform: translateY(-1px) !important;
}

/* ------------------------------------------------------------
   23. PROFILE / SIDEBAR — XP & Stats
   ------------------------------------------------------------ */
body .profile-xp {
    color: var(--ls-on-secondary-container) !important;
    background: var(--ls-secondary-container) !important;
    border-radius: var(--ls-radius) !important;
    font-family: var(--ls-font-body) !important;
    font-weight: 700 !important;
}

/* Medals stat box */
body .stat-item.medals {
    background: linear-gradient(135deg, #fffbeb 0%, var(--ls-secondary-container) 100%) !important;
    border: 1.5px solid var(--ls-secondary-fixed) !important;
}

body .stat-item.courses {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border: 1.5px solid rgba(16,185,129,0.35) !important;
}

/* Medals modal h3 color reset */
body .medals-modal-body h3 {
    color: var(--ls-on-secondary-container) !important;
    font-family: var(--ls-font-headline) !important;
    font-weight: 700 !important;
}

/* ------------------------------------------------------------
   22b. SCROLLBAR
   ------------------------------------------------------------ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ls-surface-container); }
::-webkit-scrollbar-thumb { background: var(--ls-surface-dim); border-radius: var(--ls-radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--ls-outline); }

/* ------------------------------------------------------------
   23. MATERIAL SYMBOLS
   ------------------------------------------------------------ */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}

/* ------------------------------------------------------------
   24. HOVER EFFECTS
   ------------------------------------------------------------ */
body .hover-lift:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--ls-shadow-card-hover) !important;
}

/* ------------------------------------------------------------
   25. PAGE PERFIL — Social / Friends section
   ------------------------------------------------------------ */

/* "Ver todos los amigos" button */
body .btn-view-all-friends {
    background: transparent !important;
    border: 1.5px solid var(--ls-outline-variant) !important;
    color: var(--ls-on-surface) !important;
    border-radius: var(--ls-radius) !important;
    font-family: var(--ls-font-body) !important;
    font-weight: 600 !important;
    transition: var(--ls-transition) !important;
    box-shadow: none !important;
}

body .btn-view-all-friends:hover {
    background: var(--ls-primary) !important;
    color: var(--ls-on-primary) !important;
    border-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Active social tab */
body .friends-tab.active {
    color: var(--ls-on-surface) !important;
    border-bottom-color: var(--ls-primary) !important;
    background: var(--ls-surface-lowest) !important;
    font-weight: 700 !important;
}

/* Send request / action buttons in friends modal */
body .btn-send-request,
body .btn-accept-request,
body .btn-remove-friend {
    font-family: var(--ls-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: var(--ls-radius) !important;
}

body .btn-send-request {
    background: var(--ls-primary) !important;
    color: var(--ls-on-primary) !important;
    border: none !important;
}

body .btn-accept-request {
    background: rgba(16,185,129,0.1) !important;
    color: #059669 !important;
    border: 1px solid rgba(16,185,129,0.25) !important;
}

body .btn-remove-friend {
    background: transparent !important;
    color: var(--ls-on-surface-variant) !important;
    border: 1px solid var(--ls-outline-variant) !important;
}

/* Social stats in perfil */
body .social-stat-value,
body .friends-count {
    font-family: var(--ls-font-headline) !important;
    font-weight: 800 !important;
    color: var(--ls-on-surface) !important;
}

/* Feed posts social */
body [class*="friends-tab"]:not(.active) {
    color: var(--ls-on-surface-variant) !important;
    background: var(--ls-surface-low) !important;
}

/* ------------------------------------------------------------
   26. SINGLE ACTIVITY — Autor card
   ------------------------------------------------------------ */

/* Override del card del autor (fondo rosa/morado → neutro) */
body .hsc-autor {
    background: var(--ls-surface-low) !important;
    border: 1px solid var(--ls-outline-variant) !important;
    box-shadow: var(--ls-shadow-card) !important;
}

body .hsc-autor::before {
    display: none !important; /* Eliminar patrón repetitivo */
}

body .hsc-autor-orb1,
body .hsc-autor-orb2 {
    display: none !important; /* Eliminar blobs decorativos de color */
}

body .hsc-autor-ring {
    background: conic-gradient(var(--ls-surface-dim) 0%, var(--ls-outline-variant) 50%, var(--ls-surface-dim) 100%) !important;
}

body .hsc-autor-eyebrow {
    color: var(--ls-on-surface-variant) !important;
}

body .hsc-autor-headline {
    color: var(--ls-on-surface) !important;
    font-family: var(--ls-font-headline) !important;
}

body .hsc-autor-sub {
    color: var(--ls-on-surface-variant) !important;
}

body .hsc-autor-link {
    background: var(--ls-primary) !important;
    background-image: none !important;
    color: var(--ls-on-primary) !important;
    box-shadow: none !important;
    border-radius: var(--ls-radius) !important;
}

body .hsc-autor-link:hover {
    background: var(--ls-primary) !important;
    opacity: 0.82 !important;
    color: var(--ls-on-primary) !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}

body .hsc-autor-badge {
    background: var(--ls-surface-container) !important;
    border-color: var(--ls-outline-variant) !important;
    color: var(--ls-on-surface-variant) !important;
}

/* Activity inline style for single page */
body .activity-level-section {
    font-family: var(--ls-font-body) !important;
}

body .activity-back-link,
body .activity-nav-link {
    color: var(--ls-on-surface-variant) !important;
    font-family: var(--ls-font-body) !important;
    font-size: 13px !important;
}

body .activity-back-link:hover,
body .activity-nav-link:hover {
    color: var(--ls-on-surface) !important;
}

/* ------------------------------------------------------------
   24b. STATUS BADGES (progress, new, completed, soon)
   ------------------------------------------------------------ */
/* Badge "En Progreso" → B1 amber tint Luz y Saber */
body .badge-progress {
    background: linear-gradient(135deg, var(--ls-tier-b1-bg) 0%, var(--ls-tier-b1-bg-dim) 100%) !important;
    color: var(--ls-tier-b1) !important;
    border-color: rgba(180, 83, 9, 0.35) !important;
}

/* Badge "Nuevo" → C1 red tint Luz y Saber */
body .badge-new {
    background: linear-gradient(135deg, var(--ls-tier-c1-bg) 0%, var(--ls-tier-c1-bg-dim) 100%) !important;
    color: var(--ls-tier-c1) !important;
    border-color: rgba(153, 27, 27, 0.3) !important;
}

/* Badge "Completado" → A1 verde tint Luz y Saber */
body .badge-completed {
    background: linear-gradient(135deg, var(--ls-tier-a1-bg) 0%, var(--ls-tier-a1-bg-dim) 100%) !important;
    color: var(--ls-tier-a1) !important;
    border-color: rgba(45, 106, 79, 0.3) !important;
}

/* Badge "Próximamente" → A2 azul tint Luz y Saber */
body .badge-soon {
    background: linear-gradient(135deg, var(--ls-tier-a2-bg) 0%, var(--ls-tier-a2-bg-dim) 100%) !important;
    color: var(--ls-tier-a2) !important;
    border-color: rgba(29, 78, 216, 0.3) !important;
}

/* ------------------------------------------------------------
   25. UTILITY CLASSES
   ------------------------------------------------------------ */
.ls-surface          { background-color: var(--ls-surface) !important; }
.ls-surface-card     { background-color: var(--ls-surface-lowest) !important; }
.ls-text-primary     { color: var(--ls-on-surface) !important; }
.ls-text-secondary   { color: var(--ls-on-surface-variant) !important; }
.ls-border           { border: 1px solid var(--ls-outline-variant) !important; }
.ls-shadow           { box-shadow: var(--ls-shadow-card) !important; }
.ls-rounded          { border-radius: var(--ls-radius) !important; }
.ls-rounded-md       { border-radius: var(--ls-radius-md) !important; }
.ls-rounded-pill     { border-radius: var(--ls-radius-full) !important; }
.ls-label            { font-family: var(--ls-font-body) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.04em !important; }
.ls-headline         { font-family: var(--ls-font-headline) !important; font-weight: 700 !important; letter-spacing: -0.01em !important; }