/* ── Poppins Font Universal ── */
*, *::before, *::after { font-family: 'Poppins', sans-serif !important; }
i[class*="ti"], i[class*="ti"]::before, i[class*="ti"]::after,
.ti, .ti::before, .ti::after,
[class^="ti-"], [class^="ti-"]::before, [class^="ti-"]::after,
[class*=" ti-"], [class*=" ti-"]::before, [class*=" ti-"]::after { font-family: 'tabler-icons' !important; }

/* ============================================
   A Space in Spanish — Activity Pages Style
   ============================================ */

.act-page { background: #0d0d0d; min-height: 100vh; min-height: 100dvh; font-family: Inter, system-ui, sans-serif; }

/* Header */
.act-page-hero {
  background: linear-gradient(135deg, #232327 0%, #1a1a1d 100%) !important;
  padding: 48px 24px 40px;
  position: relative;
  overflow: hidden;
}
.act-page-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(216,90,48,0.06) 0%, transparent 60%) !important;
  pointer-events: none;
}
.act-page-hero-inner { max-width: 860px; margin: 0 auto; position: relative; }
.act-breadcrumb { font-size: 12px; color: #555; margin-bottom: 16px; }
.act-breadcrumb a { color: #D85A30; text-decoration: none; }
.act-level-pill {
  display: inline-block;
  background: rgba(216,90,48,0.15);
  border: 1px solid rgba(216,90,48,0.3);
  color: #D85A30;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: .08em;
  margin-bottom: 12px;
}
.act-page-hero h1 { font-size: clamp(24px, 4vw, 38px); color: #fff; font-family: Inter, system-ui, sans-serif; font-weight: 700; margin-bottom: 8px; }
.act-page-hero p { font-size: 15px; color: #888; max-width: 520px; line-height: 1.6; }
.act-type-tags { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.act-type-tag {
  font-size: 11px; padding: 4px 12px; border-radius: 999px; font-weight: 500;
}
.tag-g { background: #FAECE7; color: #712B13; }
.tag-e { background: #E6F1FB; color: #185FA5; }
.tag-q { background: #EEEDFE; color: #3C3489; }
.tag-v { background: #FAEEDA; color: #633806; }
.tag-l { background: #E1F5EE; color: #085041; }

/* Main layout */
.act-page-body { max-width: 860px; margin: 0 auto; padding: 36px 24px 60px; }

/* Section cards */
.act-section {
  background: #fdf3e3;
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 20px;
  border: 1px solid #e8d5b0;
}
.act-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.act-section-title .act-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.act-section-sub { font-size: 13px; color: #333; margin-bottom: 20px; line-height: 1.55; }

/* Explanation box */
.act-explain {
  background: #f9f9f7;
  border-left: 4px solid #D85A30;
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.act-explain h4 { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
.act-explain p { font-size: 13px; color: #555; line-height: 1.65; margin-bottom: 8px; }
.act-explain p:last-child { margin-bottom: 0; }

/* Vocab table */
.vocab-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vocab-table th { background: #f0f0ee; padding: 10px 14px; text-align: left; font-size: 11px; letter-spacing: .08em; color: #888; text-transform: uppercase; font-weight: 600; }
.vocab-table td { padding: 11px 14px; border-bottom: 1px solid #f0f0ee; color: #333; }
.vocab-table tr:last-child td { border-bottom: none; }
.vocab-table .es { font-weight: 600; color: #D85A30; }
.vocab-table tr:hover td { background: #fdf9f7; }

/* Conjugation table */
.conj-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.conj-table th { background: #D85A30; color: #fff; padding: 10px 16px; text-align: left; font-size: 12px; font-weight: 600; }
.conj-table td { padding: 10px 16px; border-bottom: 1px solid #f0f0ee; color: #222; font-size: 14px; }
.conj-table .pronoun { color: #333; font-size: 13px; font-weight: 500; }
.conj-table .form { font-weight: 700; color: #D85A30; font-size: 15px; }
.conj-table .meaning { color: #333; font-size: 13px; }
.conj-table tr:hover td { background: #fdf9f7; }

/* Example sentences */
.examples { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.example-row {
  background: #f9f9f7;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.example-es { font-size: 15px; font-weight: 600; color: #1a1a1a; flex: 1; }
.example-en { font-size: 13px; color: #888; flex: 1; font-style: italic; }

/* Exercise: fill in the blank */
.exercise-list { display: flex; flex-direction: column; gap: 14px; }
.exercise-item { font-size: 15px; color: #333; line-height: 1.7; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.exercise-item span { font-weight: 500; }
.blank-input {
  border: none;
  border-bottom: 2px solid #D85A30;
  background: transparent;
  font-size: 15px;
  font-family: Inter, system-ui, sans-serif;
  width: 120px;
  padding: 2px 6px;
  color: #1a1a1a;
  outline: none;
  text-align: center;
}
.blank-input.correct { border-color: #1D9E75; color: #1D9E75; }
.blank-input.wrong { border-color: #E24B4A; color: #E24B4A; }
.exercise-num { color: #D85A30; font-weight: 700; min-width: 24px; }

/* Quiz */
.quiz-q { margin-bottom: 24px; }
.quiz-q-text { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; }
.quiz-opts { display: flex; flex-direction: column; gap: 8px; }
.quiz-opt-btn {
  background: #f9f9f7;
  border: 1.5px solid #e8e8e6;
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  text-align: left;
  font-family: Inter, system-ui, sans-serif;
  transition: all .18s;
}
.quiz-opt-btn:hover { border-color: #D85A30; background: #fdf9f7; }
.quiz-opt-btn.correct { border-color: #1D9E75; background: #E1F5EE; color: #085041; font-weight: 600; }
.quiz-opt-btn.wrong { border-color: #E24B4A; background: #FCEBEB; color: #A32D2D; }
.quiz-feedback { font-size: 13px; margin-top: 8px; padding: 8px 12px; border-radius: 6px; display: none; }
.quiz-feedback.show { display: block; }
.quiz-feedback.ok { background: #E1F5EE; color: #085041; }
.quiz-feedback.no { background: #FCEBEB; color: #A32D2D; }

/* Score bar */
.score-bar {
  background: #f0f0ee;
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.score-text { font-size: 15px; color: #333; font-weight: 600; }
.score-num { font-size: 24px; font-weight: 700; color: #D85A30; }

/* Check button */
.act-check-btn {
  background: #D85A30;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: Inter, system-ui, sans-serif;
  margin-top: 16px;
  transition: background .2s;
}
.act-check-btn:hover { background: #c04e28; }

/* Reading */
.reading-text {
  font-size: 15px;
  color: #333;
  line-height: 1.8;
  padding: 20px;
  background: #f9f9f7;
  border-radius: 8px;
  margin-bottom: 20px;
}
.reading-text strong { color: #D85A30; }

/* CTA at bottom */
.act-page-cta {
  background: linear-gradient(135deg, #1a0c05, #2a1208);
  border-radius: 12px;
  padding: 28px 32px;
  text-align: center;
  margin-top: 32px;
}
.act-page-cta h3 { color: #fff; font-size: 18px; margin-bottom: 6px; }
.act-page-cta p { color: #888; font-size: 13px; margin-bottom: 18px; }

/* Progress nav */
.act-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e8e8e6;
  flex-wrap: wrap;
  gap: 10px;
}
.act-nav-link {
  font-size: 13px;
  color: #D85A30;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
}
.act-nav-link:hover { text-decoration: underline; }

/* ── BILINGUAL PATTERN: Spanish primary, English secondary ── */
.es-primary { font-size: 15px; color: #1a1a1a; font-weight: 500; display: block; line-height: 1.5; }
.en-secondary { font-size: 12px; color: #aaa; display: block; margin-top: 2px; font-style: italic; font-weight: 400; }
.act-section-title { font-size: 17px; }
.act-section-title .en-secondary { font-size: 11px; font-weight: 400; }
.act-section-sub .en-secondary { font-size: 12px; margin-top: 4px; }
.act-explain p .en-secondary { margin-top: 1px; }
.example-row .example-es { font-size: 16px; font-weight: 600; color: #1a1a1a; }
.example-row .example-en { font-size: 12px; color: #aaa; font-style: italic; }

/* ── BEGINNER (A1) BLUE THEME ── */
.beginner .act-page-hero::after { background: radial-gradient(ellipse 50% 80% at 80% 50%, rgba(29,111,212,0.14), transparent 60%); }
.beginner .act-level-pill { background: rgba(29,111,212,0.15); border-color: rgba(29,111,212,0.3); color: #1D6FD4; }
.beginner .act-breadcrumb a { color: #1D6FD4; }
.beginner .act-explain { border-left-color: #1D6FD4; }
.beginner .conj-table th { background: #1D6FD4; }
.beginner .conj-table .form { color: #1D6FD4; }
.beginner .conj-table td { color: #222; }
.beginner .conj-table .pronoun { color: #333; }
.beginner .conj-table .meaning { color: #333; }
.beginner .conj-table tr:hover td { background: #F0F6FF; }
.beginner .vocab-table .es { color: #1D6FD4; }
.beginner .vocab-table tr:hover td { background: #F0F6FF; }
.beginner .blank-input { border-bottom-color: #1D6FD4; }
.beginner .exercise-num { color: #1D6FD4; }
.beginner .act-check-btn { background: #1D6FD4; }
.beginner .act-check-btn:hover { background: #175db8; }
.beginner .score-num { color: #1D6FD4; }
.beginner .quiz-opt-btn:hover { border-color: #1D6FD4; background: #F0F6FF; }
.beginner .reading-text strong { color: #1D6FD4; }
.beginner .act-nav-link { color: #1D6FD4; }
.beginner .tag-g { background: #E6F0FF; color: #1D6FD4; }
.beginner .act-type-tag.tag-g { background: #E6F0FF; color: #1D6FD4; }

/* ── DARK MODE overrides for activity pages ── */
/* Fix inline color:#333 text (questions, reading text, table cells) */
[data-theme="dark"] .act-section div[style*="color:#333"],
[data-theme="dark"] .act-section div[style*="color: #333"],
[data-theme="dark"] .act-page-body div[style*="color:#333"],
[data-theme="dark"] .act-page-body div[style*="color: #333"] {
  color: #d0d0d0 !important;
}
[data-theme="dark"] .act-section div[style*="color:#1a1a1a"],
[data-theme="dark"] .act-section div[style*="color: #1a1a1a"],
[data-theme="dark"] .act-page-body div[style*="color:#1a1a1a"],
[data-theme="dark"] .act-page-body div[style*="color: #1a1a1a"] {
  color: #f0f0f0 !important;
}
[data-theme="dark"] .act-section [style*="border-bottom:1px solid #e8e0d0"],
[data-theme="dark"] .act-section [style*="border-bottom: 1px solid #e8e0d0"],
[data-theme="dark"] .act-section [style*="border-bottom:1px solid #f0f0ee"],
[data-theme="dark"] .act-section [style*="border-bottom: 1px solid #f0f0ee"] {
  border-bottom-color: #2a2a2a !important;
}
/* Fix answer boxes (background:#eaf4d8, #f0f6ff, etc.) */
[data-theme="dark"] .act-section [style*="background:#eaf4d8"],
[data-theme="dark"] .act-section [style*="background: #eaf4d8"],
[data-theme="dark"] .act-section [style*="background:#f0f6ff"],
[data-theme="dark"] .act-section [style*="background: #f0f6ff"],
[data-theme="dark"] .act-section [style*="background:#f0f0ee"],
[data-theme="dark"] .act-section [style*="background: #f0f0ee"] {
  background: #1e1e1e !important;
  color: #ccc !important;
}

[data-theme="dark"] .act-section {
  background: #1c1c1c !important;
  border-color: #2a2a2a !important;
}
[data-theme="dark"] .act-section-title { color: #f0f0f0 !important; }
[data-theme="dark"] .act-section-sub   { color: #aaa !important; }
[data-theme="dark"] .act-explain {
  background: #141414 !important;
  border-left-color: #D85A30 !important;
}
[data-theme="dark"] .act-explain h4    { color: #f0f0f0 !important; }
[data-theme="dark"] .act-explain p     { color: #888 !important; }
[data-theme="dark"] .reading-text {
  background: #141414 !important;
  color: #ccc !important;
}
[data-theme="dark"] .example-row {
  background: #141414 !important;
}
[data-theme="dark"] .example-es        { color: #f0f0f0 !important; }
[data-theme="dark"] .vocab-table th    { background: #252525 !important; color: #888 !important; }
[data-theme="dark"] .vocab-table td    { color: #ccc !important; border-bottom-color: #252525 !important; }
[data-theme="dark"] .vocab-table tr:hover td { background: #222 !important; }
[data-theme="dark"] .conj-table td     { color: #ccc !important; border-bottom-color: #252525 !important; }
[data-theme="dark"] .conj-table .pronoun { color: #aaa !important; }
[data-theme="dark"] .conj-table .meaning { color: #aaa !important; }
[data-theme="dark"] .conj-table tr:hover td { background: #222 !important; }
[data-theme="dark"] .quiz-q-text       { color: #f0f0f0 !important; }
[data-theme="dark"] .quiz-opt-btn {
  background: #252525 !important;
  border-color: #333 !important;
  color: #ccc !important;
}
[data-theme="dark"] .score-bar         { background: #252525 !important; }
[data-theme="dark"] .score-text        { color: #ccc !important; }
[data-theme="dark"] .blank-input       { color: #f0f0f0 !important; }
[data-theme="dark"] .exercise-item     { color: #ccc !important; }
[data-theme="dark"] .act-page-hero h1  { color: #fff !important; }
[data-theme="dark"] .reading-text      { color: #ccc !important; background: #141414 !important; }
[data-theme="dark"] .bio-meta          { color: #888 !important; }
[data-theme="dark"] .bio-meta strong   { color: #ccc !important; }
[data-theme="dark"] .act-page-hero p   { color: #888 !important; }
[data-theme="dark"] .act-breadcrumb    { color: #555 !important; }

/* ── LIGHT MODE overrides for activity pages ── */
[data-theme="light"] .act-page {
  background: #f4f4f2 !important;
}
[data-theme="light"] .act-section {
  background: #ffffff !important;
  border-color: #e8e8e6 !important;
}
[data-theme="light"] .act-section-title { color: #111 !important; }
[data-theme="light"] .act-section-sub   { color: #555 !important; }
[data-theme="light"] .act-explain       { background: #f9f9f7 !important; }
[data-theme="light"] .act-explain h4    { color: #111 !important; }
[data-theme="light"] .act-explain p     { color: #555 !important; }
[data-theme="light"] .reading-text      { background: #f9f9f7 !important; color: #333 !important; }
[data-theme="light"] .example-row       { background: #f9f9f7 !important; }
[data-theme="light"] .example-es        { color: #1a1a1a !important; }
[data-theme="light"] .quiz-q-text       { color: #1a1a1a !important; }
[data-theme="light"] .quiz-opt-btn      { background: #f9f9f7 !important; border-color: #e0e0de !important; color: #333 !important; }
[data-theme="light"] .act-page-body     { background: transparent; }
/* Hero de actividades en modo claro: gris claro, título naranja, texto negro (uniforme) */
[data-theme="light"] .act-page-hero      { background: linear-gradient(135deg,#f4f4f2 0%,#e9e9e6 100%) !important; border-bottom: 1px solid #dcdcd8; }
[data-theme="light"] .act-page-hero::after { opacity: .5; }
[data-theme="light"] .act-page-hero h1   { color: #D85A30 !important; }
[data-theme="light"] .act-page-hero p    { color: #1f1f1f !important; }
[data-theme="light"] .act-page-hero .en-secondary { color: #777 !important; }
[data-theme="light"] .act-breadcrumb     { color: #666 !important; }

@media(max-width: 600px) {
  .act-section { padding: 20px 18px; }
  .example-row { flex-direction: column; gap: 4px; }
  .act-page-hero { padding: 36px 18px 28px; }
}