/* ============================================================
   plataforma.css — Amaloha Learning Platform v3.0
   Design: high-end-visual-design · emil-design-eng · stitch-taste
   Paleta: gold · terracotta · sage · lavender · cream · dark
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Jost:wght@300;400;500;600&display=swap');

/* ──────────────────────────────────────────
   1. CUSTOM PROPERTIES
────────────────────────────────────────── */
:root {
  /* Brand palette */
  --gold:           #C9A84C;
  --gold-light:     #E8C97A;
  --gold-pale:      #F5ECD5;
  --gold-deep:      #A8853A;
  --gold-glow:      rgba(201,168,76,.18);

  /* Warm creams */
  --cream:          #F5EFE6;
  --cream-deep:     #EDE4D6;
  --cream-mid:      #F0E8DA;
  --white:          #FDFAF6;

  /* Dark tones */
  --dark:           #1A1209;
  --dark-mid:       #2D1F0E;
  --dark-light:     #3D2B1A;
  --text:           #3D2B1A;
  --muted:          #8B6B4A;

  /* Accent colors — use all of these */
  --terracotta:     #C4622D;
  --terracotta-light: #E07A47;
  --terracotta-pale: rgba(196,98,45,.1);
  --sage:           #4A7C59;
  --sage-light:     #7A9E7E;
  --sage-pale:      rgba(74,124,89,.1);
  --lavender:       #7A5C8C;
  --lavender-light: #9B7DB8;
  --lavender-pale:  rgba(122,92,140,.1);

  /* Semantic */
  --success:        #4A7C59;
  --error:          #C0392B;
  --locked:         #BDB0A0;
  --border:         #E0D4C0;
  --border-light:   #EDE4D6;

  /* Layout */
  --radius-xs:      4px;
  --radius-sm:      8px;
  --radius:         16px;
  --radius-lg:      24px;
  --radius-xl:      32px;

  /* Shadows */
  --shadow-sm:      0 2px 12px rgba(26,18,9,.06);
  --shadow:         0 6px 28px rgba(26,18,9,.10);
  --shadow-lg:      0 16px 56px rgba(26,18,9,.16);
  --shadow-gold:    0 8px 32px rgba(201,168,76,.22);
  --shadow-gold-sm: 0 4px 16px rgba(201,168,76,.16);
  --shadow-terr:    0 8px 32px rgba(196,98,45,.18);
  --shadow-sage:    0 8px 32px rgba(74,124,89,.18);

  /* Emil Kowalski's custom easing curves */
  --ease-out:       cubic-bezier(0.23, 1, 0.32, 1);       /* punchy, snappy */
  --ease-in-out:    cubic-bezier(0.77, 0, 0.175, 1);       /* for on-screen movement */
  --ease-drawer:    cubic-bezier(0.32, 0.72, 0, 1);        /* iOS drawer feel */

  /* Durations */
  --dur-micro:      100ms;
  --dur-fast:       180ms;
  --dur-base:       240ms;
  --dur-slow:       400ms;
}

/* ──────────────────────────────────────────
   2. RESET & BASE
────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Jost', sans-serif;
  background: var(--cream);
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', serif;
  color: var(--dark);
  line-height: 1.2;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 300; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 400; }
h3 { font-size: 1.45rem; font-weight: 600; }
h4 { font-size: 1.15rem; font-weight: 600; }

a { color: var(--gold); text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
a:hover { color: var(--terracotta); }

img { max-width: 100%; display: block; }
.muted { color: var(--muted); }

/* ──────────────────────────────────────────
   3. LOADING STATES
────────────────────────────────────────── */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 24px;
  color: var(--muted);
  font-size: .9rem;
}

.loading__spinner {
  width: 32px;
  height: 32px;
  border: 2.5px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.8;
}

/* ──────────────────────────────────────────
   4. GLOBAL ANIMATIONS
────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Stagger helper — apply to containers */
.stagger > * {
  opacity: 0;
  animation: fadeUp var(--dur-base) var(--ease-out) forwards;
}
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 50ms; }
.stagger > *:nth-child(3) { animation-delay: 100ms; }
.stagger > *:nth-child(4) { animation-delay: 150ms; }
.stagger > *:nth-child(5) { animation-delay: 200ms; }
.stagger > *:nth-child(6) { animation-delay: 250ms; }
.stagger > *:nth-child(7) { animation-delay: 300ms; }

/* Page enter */
.page-enter {
  animation: fadeUp var(--dur-slow) var(--ease-out);
}

/* ──────────────────────────────────────────
   5. NAVBAR
────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--dark);
  border-bottom: 1px solid rgba(201,168,76,.12);
  backdrop-filter: blur(16px);
}

/* Subtle shimmer line at top of navbar */
.navbar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--terracotta), var(--gold), transparent);
  opacity: .6;
}

.navbar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar__logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--gold);
  letter-spacing: .08em;
  flex-shrink: 0;
  margin-right: 8px;
  transition: color var(--dur-base) var(--ease-out);
}
.navbar__logo:hover { color: var(--gold-light); }

.navbar__links {
  display: flex;
  gap: 2px;
  flex: 1;
}

.navbar__links a {
  color: rgba(245,239,230,.5);
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: .02em;
  transition:
    color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.navbar__links a:hover {
  color: var(--gold-light);
  background: rgba(201,168,76,.08);
}
.navbar__links a.active {
  color: var(--gold-light);
  background: rgba(201,168,76,.12);
  font-weight: 500;
}

.navbar__user {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  color: rgba(245,239,230,.55);
  font-size: .85rem;
}

/* User avatar circle */
.navbar__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-deep), var(--terracotta));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
  border: 2px solid rgba(201,168,76,.25);
}
.navbar__avatar:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(201,168,76,.2);
}

/* ──────────────────────────────────────────
   6. BUTTONS
────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  letter-spacing: .02em;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

/* Emil: every pressable element gets :active scale */
.btn:active { transform: scale(0.97) !important; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn--primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--dark);
  box-shadow: 0 2px 8px rgba(201,168,76,.25);
  position: relative;
  overflow: hidden;
  z-index: 1;
}
/* Sweeping light animation for primary buttons */
.btn--primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg);
  transition: 0s;
  z-index: -1;
  pointer-events: none;
}
.btn--primary:hover::before {
  left: 150%;
  transition: .7s var(--ease-drawer);
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold-sm);
}

.btn--secondary {
  background: transparent;
  color: var(--gold);
  border: 1.5px solid rgba(201,168,76,.45);
}
.btn--secondary:hover {
  background: var(--gold-pale);
  border-color: var(--gold);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: rgba(245,239,230,.65);
  border: 1px solid rgba(245,239,230,.16);
}
.btn--ghost:hover {
  color: var(--gold-light);
  border-color: rgba(201,168,76,.38);
  background: rgba(201,168,76,.06);
}

.btn--terracotta {
  background: linear-gradient(135deg, var(--terracotta) 0%, var(--terracotta-light) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(196,98,45,.25);
}
.btn--terracotta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-terr);
}

.btn--sage {
  background: linear-gradient(135deg, var(--sage) 0%, var(--sage-light) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(74,124,89,.25);
}
.btn--sage:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sage);
}

.btn--danger { background: var(--error); color: #fff; }
.btn--danger:hover { background: #a93226; transform: translateY(-1px); }

.btn--sm  { padding: 7px 14px; font-size: .8rem; }
.btn--lg  { padding: 15px 40px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn--google {
  background: var(--white);
  color: var(--text);
  border: 1.5px solid var(--border);
  font-weight: 500;
  font-size: .875rem;
  box-shadow: var(--shadow-sm);
}
.btn--google:hover {
  background: var(--cream);
  border-color: var(--gold);
  box-shadow: var(--shadow-gold-sm);
}

/* ──────────────────────────────────────────
   7. PHOTO PLACEHOLDER SLOTS
   (reserve space for real photos)
────────────────────────────────────────── */
.photo-slot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg,
      rgba(201,168,76,.12) 0%,
      rgba(196,98,45,.08) 40%,
      rgba(122,92,140,.08) 100%),
    var(--cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(201,168,76,.3);
  transition: border-color var(--dur-base) var(--ease-out);
}
.photo-slot:hover { border-color: rgba(201,168,76,.55); }

.photo-slot--landscape { aspect-ratio: 16/9; width: 100%; }
.photo-slot--portrait  { aspect-ratio: 3/4; }
.photo-slot--square    { aspect-ratio: 1/1; }
.photo-slot--banner    { height: 280px; width: 100%; }
.photo-slot--hero      { height: 400px; width: 100%; }
.photo-slot--thumb     { width: 80px; height: 80px; border-radius: 50%; }

/* Decorative texture overlay */
.photo-slot::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(201,168,76,.06) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

.photo-slot__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
}

.photo-slot__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(201,168,76,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.photo-slot__icon svg { width: 22px; height: 22px; }

.photo-slot__label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold-deep);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.photo-slot__hint {
  font-size: .72rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
  max-width: 200px;
}

/* When a real photo is loaded, it covers the slot */
.photo-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  border-radius: inherit;
}

/* ──────────────────────────────────────────
   8. CARDS
────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 4px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: 
    var(--shadow-sm),
    inset 0 1px 1px rgba(255, 255, 255, 1);
  padding: 24px;
  position: relative;
  transition:
    box-shadow var(--dur-base) var(--ease-drawer),
    transform var(--dur-base) var(--ease-drawer);
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
  pointer-events: none;
  border-radius: inherit;
  z-index: 10;
}
.card > * {
  position: relative;
  z-index: 2;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

/* ── COURSE CARDS ── */
.card--course {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 4px solid var(--cream-deep);
  box-shadow: 
    var(--shadow-sm),
    inset 0 1px 1px rgba(255, 255, 255, 1);
  transition:
    box-shadow var(--dur-base) var(--ease-drawer),
    transform var(--dur-base) var(--ease-drawer),
    border-color var(--dur-base) var(--ease-drawer);
}
.card--course:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-gold);
  border-color: rgba(201,168,76,.3);
}
.card--course:active { transform: scale(0.98) translateY(-2px); }

/* Course image: taller, more dramatic */
.course-card__image {
  height: 180px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Stage-specific gradients */
.course-card__image--oruga {
  background: linear-gradient(145deg, #2A4A30 0%, #4A7C59 45%, #7A9E7E 80%, #C9A84C 100%);
}
.course-card__image--crisalida {
  background: linear-gradient(145deg, #2C1A40 0%, #6B4A7C 45%, #9B7DB8 80%, #C9A84C 100%);
}
.course-card__image--mariposa {
  background: linear-gradient(145deg, #5A1A08 0%, #C4622D 45%, #E07A47 80%, #E8C97A 100%);
}
.course-card__image--monarca {
  background: linear-gradient(145deg, #5A3A00 0%, #A8853A 35%, #C9A84C 65%, #E8C97A 100%);
}
.course-card__image--hombre {
  background: linear-gradient(145deg, #0D1A28 0%, #1A3A5C 45%, #2E6299 80%, #C9A84C 100%);
}
/* Default fallback */
.course-card__image:not([class*="--"]) {
  background: linear-gradient(145deg, #5A1A08 0%, #C4622D 50%, #E8C97A 100%);
}

/* Texture & light effects */
.course-card__image::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 70%, rgba(255,255,255,.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(255,255,255,.06) 0%, transparent 50%);
}
.course-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,.015) 2px,
      rgba(255,255,255,.015) 4px
    );
}

.course-card__image-icon {
  position: relative;
  z-index: 1;
  font-size: 3rem;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
  transition: transform var(--dur-slow) var(--ease-drawer), filter var(--dur-slow) var(--ease-drawer);
}
.card--course:hover .course-card__image-icon {
  transform: scale(1.15) rotate(4deg);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.5));
}

/* Photo slot inside course card */
.course-card__photo {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.course-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .85;
}
/* Gradient overlay on real photo */
.course-card__photo::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(26,18,9,.5) 0%, transparent 100%);
}

.course-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.course-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.course-badge {
  font-size: .68rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--gold-pale);
  color: var(--gold-deep);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.course-badge--active {
  background: var(--sage-pale);
  color: var(--sage);
}
.course-badge--upcoming {
  background: var(--lavender-pale);
  color: var(--lavender);
}

.course-card__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 3px;
  line-height: 1.2;
}

.course-card__stage {
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 18px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Progress bar with shimmer */
.progress-bar {
  height: 6px;
  background: var(--cream-deep);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
}

.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--terracotta));
  border-radius: 99px;
  transition: width .9s var(--ease-out);
  position: relative;
  overflow: hidden;
}

/* Shimmer on progress fill */
.progress-bar__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: shimmer 2.4s ease-in-out infinite;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: 18px;
}

.course-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
  margin-top: auto;
}

.countdown {
  font-size: .78rem;
  color: var(--terracotta);
  font-weight: 500;
}

/* ──────────────────────────────────────────
   9. AUTH PAGE
────────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(201,168,76,.10) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 15% 85%, rgba(196,98,45,.06) 0%, transparent 50%),
    linear-gradient(160deg, #FDFBF7 0%, #F5EFE6 50%, #EDE4D3 100%);
  padding: 24px;
  position: relative;
  overflow: hidden;
}

/* Dot grid pattern */
.auth-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(161,98,7,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Decorative glow orbs */
.auth-page::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  top: -150px; right: -100px;
  background: radial-gradient(circle, rgba(122,92,140,.07) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.auth-container {
  width: 100%;
  max-width: 460px;
  position: relative;
  z-index: 1;
  animation: scaleIn var(--dur-slow) var(--ease-out);
}

.auth-logo {
  text-align: center;
  margin-bottom: 36px;
}
.auth-logo h1 {
  color: var(--gold);
  font-size: 3.8rem;
  font-weight: 300;
  letter-spacing: .12em;
  text-shadow: 0 0 80px rgba(201,168,76,.35);
  font-family: 'Cormorant Garamond', serif;
}
.auth-logo p {
  color: rgba(245,239,230,.38);
  margin-top: 8px;
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  letter-spacing: .06em;
}

.auth-card {
  background: rgba(253,250,246,.97);
  border: 1px solid rgba(201,168,76,.18);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(201,168,76,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.auth-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--border);
  margin-bottom: 28px;
  gap: 4px;
}

.auth-tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-size: .875rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  transition:
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
  letter-spacing: .02em;
}
.auth-tab:hover { color: var(--gold-deep); }
.auth-tab.active { color: var(--gold-deep); border-bottom-color: var(--gold); }

.auth-form { display: none; }
.auth-form.active {
  display: block;
  animation: fadeUp var(--dur-base) var(--ease-out);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ──────────────────────────────────────────
   10. FORMS
────────────────────────────────────────── */
.form-group { margin-bottom: 16px; position: relative; }

.form-group label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: .02em;
  transition: color var(--dur-fast) var(--ease-out);
}

.form-group:focus-within label {
  color: var(--gold-deep);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif;
  font-size: .9rem;
  color: var(--text);
  background: var(--white);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,.12);
}
.form-group textarea { resize: vertical; min-height: 120px; }

.form-error {
  color: var(--error);
  font-size: .78rem;
  margin-top: 4px;
}

/* ──────────────────────────────────────────
   11. DASHBOARD WELCOME BANNER
────────────────────────────────────────── */
.dashboard {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 28px 60px;
}

/* Hero banner with photo slot */
.dashboard__hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 40px;
  min-height: 200px;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg,
    var(--dark) 0%,
    var(--dark-mid) 50%,
    #3A1F05 100%
  );
  border: 1px solid rgba(201,168,76,.15);
}

/* Hero texture */
.dashboard__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(201,168,76,.05) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

/* Decorative glow */
.dashboard__hero::after {
  content: '';
  position: absolute;
  right: -40px; bottom: -40px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(201,168,76,.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.dashboard__hero-content {
  position: relative;
  z-index: 2;
  padding: 32px 40px;
  flex: 1;
}

.dashboard__hero-eyebrow {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terracotta-light);
  margin-bottom: 10px;
}

.dashboard__hero h2 {
  color: var(--white);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 8px;
}
.dashboard__hero h2 span {
  color: var(--gold);
  font-style: italic;
}

.dashboard__hero p {
  color: rgba(245,239,230,.55);
  font-size: .9rem;
}

/* Photo slot in hero (right side) */
.dashboard__hero-photo {
  position: relative;
  z-index: 2;
  width: 240px;
  flex-shrink: 0;
  align-self: stretch;
  margin: 0;
}

.dashboard__hero-photo .photo-slot {
  height: 100%;
  min-height: 200px;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  border: none;
  border-left: 1px solid rgba(201,168,76,.12);
}
.dashboard__hero-photo .photo-slot__label { color: rgba(201,168,76,.7); }
.dashboard__hero-photo .photo-slot__hint  { color: rgba(245,239,230,.4); }
.dashboard__hero-photo .photo-slot__icon  { background: rgba(201,168,76,.12); color: rgba(201,168,76,.7); }

/* Welcome section (simple header, no banner) */
.dashboard__welcome {
  margin-bottom: 36px;
}
.dashboard__welcome h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 300;
  line-height: 1.2;
}
.dashboard__welcome h2 span {
  color: var(--gold);
  font-style: italic;
}
.dashboard__welcome p {
  color: var(--muted);
  margin-top: 6px;
  font-size: .95rem;
}

/* ──────────────────────────────────────────
   12. DASHBOARD GRID
────────────────────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  align-items: start;
}

.dashboard-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.section-header h3 {
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Jost', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.section-header a {
  font-size: .8rem;
  color: var(--gold);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
}
.section-header a:hover { color: var(--terracotta); }

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* ──────────────────────────────────────────
   13. SIDEBAR WIDGETS (dashboard)
────────────────────────────────────────── */

/* Diario widget */
.diario-widget {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.diario-widget:hover { box-shadow: var(--shadow); }

.diario-widget__header {
  background: linear-gradient(135deg, var(--dark) 0%, #2D1F0E 60%, #3A1A08 100%);
  padding: 18px 20px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.diario-widget__header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(201,168,76,.08) 0%, transparent 60%);
}
.diario-widget__header h4 {
  color: var(--gold);
  font-size: 1.1rem;
  font-weight: 400;
  position: relative;
  z-index: 1;
}
.diario-widget__header span { font-size: 1.2rem; position: relative; z-index: 1; }

.diario-widget__body { padding: 14px 16px; }

.diario-widget__empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--muted);
  font-size: .875rem;
}

.diario-widget__entry {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: padding-left var(--dur-fast) var(--ease-out);
}
.diario-widget__entry:last-child { border-bottom: none; }
.diario-widget__entry:hover { padding-left: 8px; }

.diario-widget__entry-meta {
  font-size: .72rem;
  color: var(--gold-deep);
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 3px;
}
.diario-widget__entry-text {
  font-size: .84rem;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

.diario-widget__footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-light);
}

/* Explora widget */
.explora-widget {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.explora-widget:hover { box-shadow: var(--shadow); }

.explora-widget__header { padding: 18px 20px 4px; }
.explora-widget__header h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 4px;
}
.explora-widget__header p {
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 12px;
}

.explora-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  border-top: 1px solid var(--border-light);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    padding-left var(--dur-fast) var(--ease-out);
}
.explora-card:hover {
  background: var(--cream);
  padding-left: 26px;
}
.explora-card:active { transform: scale(0.99); }

.explora-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.explora-card__icon--hombre   { background: linear-gradient(135deg, #1A3A5C, #2E6299); }
.explora-card__icon--crp      { background: linear-gradient(135deg, var(--lavender), var(--lavender-light)); }
.explora-card__icon--iv       { background: linear-gradient(135deg, var(--gold-deep), var(--gold)); }

.explora-card__info h5 {
  font-size: .875rem;
  font-weight: 600;
  color: var(--dark);
  font-family: 'Jost', sans-serif;
  margin-bottom: 2px;
}
.explora-card__info p {
  font-size: .73rem;
  color: var(--muted);
}

/* ──────────────────────────────────────────
   14. FORMACIÓN PAGE
────────────────────────────────────────── */
.formacion-page {
  max-width: 940px;
  margin: 0 auto;
  padding: 40px 24px 60px;
}

.formacion__header {
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.formacion__breadcrumb {
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.formacion__breadcrumb a { color: var(--muted); }
.formacion__breadcrumb a:hover { color: var(--gold); }

/* Stage hero banner with photo slot */
.formacion__stage-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 28px;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
}

.formacion__stage-banner .photo-slot {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  border-style: dashed;
}

.formacion__stage-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(26,18,9,.85) 0%,
    rgba(26,18,9,.4) 40%,
    transparent 70%
  );
  z-index: 3;
  border-radius: var(--radius-lg);
}

.formacion__stage-content {
  position: relative;
  z-index: 4;
  padding: 28px 32px;
  width: 100%;
}

.formacion__stage-content h1 {
  color: var(--white);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 8px;
  text-shadow: 0 2px 16px rgba(0,0,0,.4);
}

.formacion__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.formacion__meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: rgba(245,239,230,.75);
  background: rgba(255,255,255,.1);
  padding: 4px 12px;
  border-radius: 99px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.12);
}

.overall-progress { margin: 20px 0 28px; }

/* Preview banner (not yet started) */
.preview-banner {
  background: linear-gradient(135deg,
    var(--dark) 0%,
    var(--dark-mid) 50%,
    #3A1F05 100%
  );
  border-radius: var(--radius);
  padding: 32px 36px;
  margin-bottom: 28px;
  color: var(--cream);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(201,168,76,.15);
}
.preview-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(201,168,76,.05) 1px, transparent 1px);
  background-size: 22px 22px;
}
.preview-banner::after {
  content: '';
  position: absolute;
  right: -60px; bottom: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(201,168,76,.1) 0%, transparent 70%);
  border-radius: 50%;
}
.preview-banner h3 {
  color: var(--gold);
  margin-bottom: 8px;
  font-size: 1.3rem;
  font-weight: 400;
  position: relative; z-index: 1;
}
.preview-banner p {
  color: rgba(245,239,230,.7);
  font-size: .9rem;
  margin-bottom: 18px;
  position: relative; z-index: 1;
}
.preview-banner .btn { position: relative; z-index: 1; }

/* ──────────────────────────────────────────
   15. WEEK CARDS / TIMELINE
────────────────────────────────────────── */
.weeks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.week-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
  position: relative;
}

/* Left accent border per state */
.week-card--unlocked {
  border-color: rgba(201,168,76,.28);
  border-left: 3px solid var(--gold);
}
.week-card--current {
  border-color: var(--gold);
  border-left: 3px solid var(--terracotta);
  box-shadow: 0 0 0 3px rgba(201,168,76,.08), var(--shadow-sm);
}
.week-card--locked {
  opacity: .65;
  border-left: 3px solid var(--border);
}

/* Pulsing indicator for current week */
.week-card--current::before {
  content: '';
  position: absolute;
  top: 18px; left: -4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(196,98,45,.2);
  animation: pulse-dot 2s ease-in-out infinite;
  z-index: 5;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(196,98,45,.2); }
  50%       { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(196,98,45,.1); }
}

.week-card__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.week-card__header:hover { background: var(--cream); }
.week-card__header:active { background: var(--cream-deep); }

.week-number-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 600;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.week-card__header:hover .week-number-badge { transform: scale(1.06); }
.week-number-badge--unlocked {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--dark);
  box-shadow: 0 2px 8px rgba(201,168,76,.3);
}
.week-number-badge--current {
  background: linear-gradient(135deg, var(--terracotta), var(--gold));
  color: #fff;
  box-shadow: 0 2px 8px rgba(196,98,45,.35);
}
.week-number-badge--locked {
  background: var(--cream-deep);
  color: var(--locked);
}

.week-card__info { flex: 1; }
.week-card__info h4 { font-size: 1rem; margin-bottom: 2px; color: var(--dark); }
.week-card__info p  { font-size: .76rem; color: var(--muted); }

.week-card__chevron {
  font-size: .7rem;
  color: var(--muted);
  transition: transform var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}
.week-card.open .week-card__chevron { transform: rotate(180deg); }

.week-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 6px;
}
.week-progress span { font-size: .76rem; color: var(--muted); white-space: nowrap; }

.week-card__classes {
  display: none;
  padding: 4px 22px 18px 22px;
  border-top: 1px solid var(--border-light);
  animation: fadeUp var(--dur-base) var(--ease-out);
}
.week-card.open .week-card__classes { display: block; }

.class-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition:
    padding-left var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
  border-radius: var(--radius-xs);
}
.class-item:last-child { border-bottom: none; }
.class-item:hover { padding-left: 8px; }

.class-item__check {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .7rem;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.class-item:hover .class-item__check { border-color: var(--gold); transform: scale(1.1); }
.class-item__check--done {
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
}

.class-item__info { flex: 1; }
.class-item__info h5 { font-size: .9rem; font-weight: 500; }
.class-item__info p  { font-size: .73rem; color: var(--muted); }

.class-item__icons { display: flex; gap: 5px; }
.resource-icon {
  font-size: .68rem;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--cream-deep);
  color: var(--muted);
  font-weight: 500;
}

/* ──────────────────────────────────────────
   16. CLASE INDIVIDUAL
────────────────────────────────────────── */
.clase-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

.clase__breadcrumb {
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.clase__breadcrumb a { color: var(--muted); }
.clase__breadcrumb a:hover { color: var(--gold); }
.clase__breadcrumb span { color: var(--text); }

.clase__header { margin-bottom: 28px; }
.clase__week-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--terracotta);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.clase__title { margin-bottom: 0; }

/* Video container */
.video-container {
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
  position: relative;
  padding-top: 56.25%;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.06);
}
.video-container iframe,
.video-container video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Recursos */
.recursos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.recurso-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.recurso-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold-sm);
}
.recurso-btn:active { transform: scale(0.97); }
.recurso-btn.done {
  border-color: var(--sage);
  color: var(--sage);
  background: var(--sage-pale);
}
.recurso-btn__icon { font-size: 1rem; }

/* Class navigation */
.clase-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--border-light);
  margin-top: 32px;
  margin-bottom: 32px;
}

/* Complete section */
.complete-section {
  text-align: center;
  padding: 36px 32px;
  background: var(--white);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  margin-bottom: 40px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-base) var(--ease-out);
}
.complete-section:hover { border-color: rgba(201,168,76,.3); }
.complete-section.done {
  background: var(--sage-pale);
  border-color: rgba(74,124,89,.25);
}
.complete-section.done h3 { color: var(--sage); }

/* Diario de clase */
.clase-diario {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

.clase-diario textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif;
  font-size: .9rem;
  color: var(--text);
  background: var(--cream);
  resize: vertical;
  min-height: 140px;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  outline: none;
  line-height: 1.7;
}
.clase-diario textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
  background: var(--white);
}

/* ──────────────────────────────────────────
   17. DIARIO PAGE
────────────────────────────────────────── */
.diario-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 24px 60px;
}

/* Diary header */
.diario__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.diario__search input {
  width: 260px;
  padding: 10px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Jost', sans-serif;
  font-size: .875rem;
  color: var(--text);
  background: var(--white);
  outline: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.diario__search input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,168,76,.12);
}
.diario__search input::placeholder { color: var(--locked); }

/* Diary entry count */
.diario__count {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 20px;
  font-weight: 500;
}

/* Diary entries container */
.diario-entries {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Diary cards — TASK 8 */
.diary-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  border-left: 3px solid var(--gold);
  padding: 20px 24px;
  cursor: pointer;
  transition:
    box-shadow var(--dur-base) var(--ease-drawer),
    transform var(--dur-base) var(--ease-drawer);
  position: relative;
}
.diary-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.diary-card:active { transform: scale(0.99); }

.diary-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: .75rem;
  color: var(--gold-deep);
  font-weight: 500;
}
.diary-card__meta span { color: var(--muted); }
.diary-card__meta strong { color: var(--gold-deep); font-weight: 600; }

.diary-card__preview {
  font-size: .9rem;
  color: var(--text);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}

.diary-card__date {
  font-size: .68rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Diary empty state — warm journal feel */
.diario-page .empty-state {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 64px 32px;
  box-shadow: var(--shadow-sm);
}
.diario-page .empty-state p:first-child { font-size: 3rem; }

/* Legacy card support */
.diary-entry-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  border-left: 3px solid var(--gold);
  padding: 20px 24px;
  margin-bottom: 16px;
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  cursor: pointer;
}
.diary-entry-card:hover {
  box-shadow: var(--shadow);
  transform: translateX(4px);
}

.diary-entry-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.diary-entry-card__date {
  font-size: .72rem;
  font-weight: 600;
  color: var(--gold-deep);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.diary-entry-card__class {
  font-size: .72rem;
  color: var(--muted);
  padding: 2px 10px;
  border-radius: 99px;
  background: var(--cream-deep);
}

.diary-entry-card__text {
  font-size: .9rem;
  color: var(--text);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ──────────────────────────────────────────
   17b. AUTH PAGE — Premium Split-Screen (TASK 9)
────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

/* Split layout on desktop */
@media (min-width: 901px) {
  .auth-page {
    flex-direction: row;
  }

  .auth-brand-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 28px;
    position: relative;
    padding: 48px;
  }

  .auth-container {
    flex: 0 0 480px;
    max-width: 480px;
    margin: 0;
    padding: 0 40px;
  }
}

/* Brand panel — left side */
.auth-brand-panel {
  display: none;
  position: relative;
  z-index: 1;
}

@media (min-width: 901px) {
  .auth-brand-panel { display: flex; }
}

.auth-brand-panel__logo img {
  height: 90px;
  filter: drop-shadow(0 8px 24px rgba(201,168,76,.25));
  animation: fadeUp 0.8s var(--ease-out);
}

.auth-brand-panel__tagline {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--gold-light);
  text-align: center;
  text-shadow: 0 0 40px rgba(201,168,76,.25);
  animation: fadeUp 0.8s 0.15s var(--ease-out) both;
}

/* Floating gold particles */
.auth-brand-panel__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.auth-brand-panel__particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  animation: float-particle 8s ease-in-out infinite;
}

.auth-brand-panel__particles span:nth-child(1) { left: 15%; top: 20%; animation-delay: 0s; }
.auth-brand-panel__particles span:nth-child(2) { left: 75%; top: 35%; animation-delay: 1.5s; width: 3px; height: 3px; }
.auth-brand-panel__particles span:nth-child(3) { left: 40%; top: 70%; animation-delay: 3s; width: 5px; height: 5px; }
.auth-brand-panel__particles span:nth-child(4) { left: 85%; top: 65%; animation-delay: 4.5s; }
.auth-brand-panel__particles span:nth-child(5) { left: 25%; top: 50%; animation-delay: 6s; width: 3px; height: 3px; }
.auth-brand-panel__particles span:nth-child(6) { left: 60%; top: 15%; animation-delay: 2s; }

@keyframes float-particle {
  0%, 100% { opacity: 0; transform: translateY(20px) scale(0.5); }
  25% { opacity: .5; transform: translateY(-15px) scale(1); }
  50% { opacity: .3; transform: translateY(-30px) scale(0.8); }
  75% { opacity: .1; transform: translateY(-45px) scale(0.4); }
}

/* Auth card breathing gold glow */
@keyframes breathe {
  0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(201,168,76,.06), inset 0 1px 0 rgba(255,255,255,.9), 0 0 20px rgba(201,168,76,.08); }
  50% { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(201,168,76,.12), inset 0 1px 0 rgba(255,255,255,.9), 0 0 40px rgba(201,168,76,.22); }
}
.auth-card {
  animation: breathe 4s ease-in-out infinite;
}

/* Sliding tab underline */
.auth-tabs {
  position: relative;
}
.auth-tab {
  position: relative;
  z-index: 1;
  transition:
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-slow) var(--ease-drawer);
}

/* Password strength meter */
.password-strength {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  height: 4px;
}
.password-strength__segment {
  flex: 1;
  border-radius: 99px;
  background: var(--cream-deep);
  transition: background var(--dur-base) var(--ease-out);
}
.password-strength[data-level="1"] .password-strength__segment:nth-child(1) { background: #e74c3c; }
.password-strength[data-level="2"] .password-strength__segment:nth-child(-n+2) { background: #e67e22; }
.password-strength[data-level="3"] .password-strength__segment:nth-child(-n+3) { background: #f1c40f; }
.password-strength[data-level="4"] .password-strength__segment { background: var(--sage); }

.password-strength__label {
  font-size: .7rem;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 500;
}

/* ──────────────────────────────────────────
   17c. DASHBOARD UPGRADES (TASK 10)
────────────────────────────────────────── */

/* Animated gradient hero */
@keyframes hero-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.dashboard__hero {
  background: linear-gradient(135deg,
    var(--dark) 0%,
    var(--dark-mid) 25%,
    #3A1F05 50%,
    #2E1A0A 75%,
    var(--dark) 100%
  );
  background-size: 300% 300%;
  animation: hero-gradient-shift 20s ease-in-out infinite;
}

/* Greeting with animation */
.dashboard__greeting {
  animation: fadeUp var(--dur-slow) var(--ease-out);
}

/* Daily quote strip */
.dashboard__quote {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  margin-top: 8px;
  border-left: 2px solid var(--gold);
  padding-left: 16px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: .95rem;
  color: rgba(245,239,230,.45);
  animation: fadeUp var(--dur-slow) 0.2s var(--ease-out) both;
}

/* ──────────────────────────────────────────
   17d. FORMACIÓN STAGE HERO (TASK 11)
────────────────────────────────────────── */
.formacion__stage-hero {
  width: 100%;
  min-height: 180px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 36px 40px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.formacion__stage-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
}
.formacion__stage-hero::after {
  content: '';
  position: absolute;
  right: -40px; bottom: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.formacion__stage-hero__emoji {
  font-size: 3.5rem;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.3));
  position: relative;
  z-index: 1;
}
.formacion__stage-hero__text {
  position: relative;
  z-index: 1;
}
.formacion__stage-hero__text h3 {
  font-size: 1.6rem;
  font-weight: 400;
  color: rgba(255,255,255,.95);
  margin-bottom: 6px;
}
.formacion__stage-hero__text p {
  font-size: .88rem;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
}

/* Stage-specific gradients */
.formacion__stage-hero--oruga {
  background: linear-gradient(135deg, #2A4A30 0%, #4A7C59 50%, #7A9E7E 100%);
}
.formacion__stage-hero--crisalida {
  background: linear-gradient(135deg, #2C1A40 0%, #6B4A7C 50%, #9B7DB8 100%);
}
.formacion__stage-hero--mariposa {
  background: linear-gradient(135deg, #5A1A08 0%, #C4622D 50%, #E07A47 100%);
}
.formacion__stage-hero--monarca {
  background: linear-gradient(135deg, #5A3A00 0%, #A8853A 50%, #E8C97A 100%);
}

/* Gold dotted connector line */
.weeks-list {
  position: relative;
}
.weeks-list::before {
  content: '';
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--gold) 0px,
    var(--gold) 4px,
    transparent 4px,
    transparent 10px
  );
  opacity: .35;
  z-index: 0;
}

/* Glass-blur locked weeks */
.week-card--locked {
  opacity: 1;
  border-left: 3px solid var(--border);
  position: relative;
  overflow: hidden;
}
.week-card--locked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(245,239,230,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
}
.week-card--locked .week-card__header {
  position: relative;
  z-index: 5;
  cursor: default;
}

/* ──────────────────────────────────────────
   17e. CLASE PAGE UPGRADE (TASK 12)
────────────────────────────────────────── */

/* Exercises section — proper CSS classes */
.clase__exercises {
  background: var(--gold-pale);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 28px;
}
.clase__exercises h4 { margin-bottom: 8px; }
.clase__exercises p {
  color: var(--muted);
  font-size: .875rem;
  margin-bottom: 14px;
}
.clase__exercises-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Journal-style diary editor */
.diary-editor {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 32px;
}
.diary-editor h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  margin-bottom: 6px;
}
.diary-editor .hint {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.6;
}

.diary-editor--journal {
  background: #FBF7F0;
  border-color: rgba(201,168,76,.2);
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 31px,
      rgba(201,168,76,.08) 31px,
      rgba(201,168,76,.08) 32px
    );
  background-position: 0 28px;
}

.diary-editor textarea {
  width: 100%;
  padding: 16px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: var(--text);
  background: transparent;
  resize: vertical;
  min-height: 180px;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  outline: none;
  line-height: 1.8;
}
.diary-editor textarea::placeholder {
  color: var(--locked);
  font-style: italic;
}
.diary-editor textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,168,76,.1);
}

.diary-editor__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.diary-saved {
  font-size: .78rem;
  color: var(--sage);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.diary-saved.show { opacity: 1; }

/* Progress dots — position in week */
.clase__progress-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  margin-bottom: 28px;
}
.clase__progress-dots__label {
  font-size: .72rem;
  color: var(--muted);
  margin-right: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.clase__progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cream-deep);
  border: 1.5px solid var(--border);
  transition: all var(--dur-fast) var(--ease-out);
}
.clase__progress-dot--completed {
  background: var(--sage);
  border-color: var(--sage);
}
.clase__progress-dot--current {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,.2);
  transform: scale(1.3);
}

/* Gold celebration confetti on complete */
@keyframes confetti-burst {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(0.3); }
}
@keyframes confetti-left {
  0% { opacity: 1; transform: translate(0,0) rotate(0deg); }
  100% { opacity: 0; transform: translate(-30px,-35px) rotate(-120deg); }
}
@keyframes confetti-right {
  0% { opacity: 1; transform: translate(0,0) rotate(0deg); }
  100% { opacity: 0; transform: translate(30px,-35px) rotate(120deg); }
}

.complete-section.done {
  position: relative;
}
.complete-section.done.celebrate::before,
.complete-section.done.celebrate::after {
  content: '✨';
  position: absolute;
  font-size: 1.2rem;
  pointer-events: none;
}
.complete-section.done.celebrate::before {
  top: 20px; left: 30%;
  animation: confetti-left 1s var(--ease-out) forwards;
}
.complete-section.done.celebrate::after {
  top: 20px; right: 30%;
  animation: confetti-right 1s var(--ease-out) forwards;
}

/* Resource button enhanced hover */
.recurso-btn:hover .recurso-btn__icon {
  transform: scale(1.15);
  filter: drop-shadow(0 2px 6px rgba(201,168,76,.3));
}
.recurso-btn__icon {
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}

/* Video container gold border */
.video-container {
  border: 2px solid rgba(201,168,76,.15);
}

/* ──────────────────────────────────────────
   18. COLOR ACCENT SECTIONS
   (background variety — not all cream)
────────────────────────────────────────── */

/* Gold tinted section */
.section--gold {
  background: linear-gradient(135deg,
    rgba(245,236,213,.8) 0%,
    rgba(245,239,230,1) 100%
  );
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid rgba(201,168,76,.15);
}

/* Terracotta tinted section */
.section--terr {
  background: linear-gradient(135deg,
    rgba(240,225,215,.7) 0%,
    rgba(245,239,230,1) 100%
  );
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid rgba(196,98,45,.12);
}

/* Sage tinted section */
.section--sage {
  background: linear-gradient(135deg,
    rgba(210,225,215,.6) 0%,
    rgba(245,239,230,1) 100%
  );
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid rgba(74,124,89,.12);
}

/* Dark section (for banners) */
.section--dark {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-mid) 100%);
  border-radius: var(--radius);
  padding: 28px;
  color: var(--cream);
  border: 1px solid rgba(201,168,76,.12);
}

/* ──────────────────────────────────────────
   19. TAGS & BADGES
────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag--gold     { background: var(--gold-pale);     color: var(--gold-deep); }
.tag--terr     { background: var(--terracotta-pale); color: var(--terracotta); }
.tag--sage     { background: var(--sage-pale);     color: var(--sage); }
.tag--lavender { background: var(--lavender-pale); color: var(--lavender); }
.tag--muted    { background: var(--cream-deep);    color: var(--muted); }

/* ──────────────────────────────────────────
   20. TOAST NOTIFICATIONS
────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  font-size: .855rem;
  font-weight: 500;
  background: var(--dark);
  color: var(--cream);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  /* Emil: enter from scale(0.95) not scale(0) */
  transform: translateY(12px) scale(0.95);
  opacity: 0;
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
  max-width: 320px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 3px solid var(--gold);
}
.toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Asymmetric exit (faster than enter — Emil principle) */
.toast.hiding {
  transition:
    transform var(--dur-fast) var(--ease-out),
    opacity var(--dur-micro) var(--ease-out);
  transform: translateY(8px) scale(0.97);
  opacity: 0;
}

.toast--visible { opacity: 1; transform: translateY(0) scale(1); }
.toast--success { border-left-color: var(--sage); }
.toast--error   { border-left-color: var(--error); }
.toast--gold    { border-left-color: var(--gold); }

/* ──────────────────────────────────────────
   21. RESPONSIVE
────────────────────────────────────────── */
@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .dashboard__hero-photo { display: none; }
  .auth-brand-panel { display: none; }
  .auth-container { max-width: 460px; flex: none; }
  .formacion__stage-hero { flex-direction: column; text-align: center; padding: 28px 20px; min-height: auto; }
  .weeks-list::before { left: 22px; }
}

@media (max-width: 680px) {
  .dashboard {
    padding: 24px 16px 48px;
  }
  .courses-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-aside {
    grid-template-columns: 1fr;
  }
  .navbar__links { display: none; }
  .formacion__stage-content { padding: 20px; }
  .formacion__stage-content h1 { font-size: 1.8rem; }
  .auth-card { padding: 28px 20px; }
  .auth-logo h1 { font-size: 3rem; }
  .diario__header { flex-direction: column; }
  .diario__search input { width: 100%; }
  .clase__progress-dots { flex-wrap: wrap; }
}

/* ──────────────────────────────────────────
   22. MODAL STYLES
────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26,18,9,.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.modal-backdrop.show { opacity: 1; }

.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--dur-base) var(--ease-out);
}
.modal-backdrop.show .modal {
  transform: translateY(0) scale(1);
}

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}
.modal__close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  transition: color var(--dur-fast) var(--ease-out);
}
.modal__close:hover { color: var(--text); }

/* ──────────────────────────────────────────
   23. REDUCED MOTION
────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .progress-bar__fill::after { animation: none; }
  .stagger > * { animation: none; opacity: 1; }
  .page-enter { animation: none; }
  .dashboard__hero { animation: none; }
  .auth-card { animation: none; }
}


/* ───────────────────────────
   FE-33 NUEVOS ESTILOS PLATAFORMA
─────────────────────────── */
.dashboard-tab {
    opacity: 0.6;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dashboard-tab:hover {
    opacity: 0.8;
}
.dashboard-tab.active {
    opacity: 1;
}

@keyframes pulse-amber {
  0% { box-shadow: 0 0 0 0 rgba(176, 127, 0, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(176, 127, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(176, 127, 0, 0); }
}

.pulse-amber {
  animation: pulse-amber 2s infinite;
}

.status-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: auto;
}

/* Modal Expired Platform override */
#expiredModal.is-open {
  opacity: 1;
  pointer-events: auto;
}
#expiredModal {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#expiredModal .checkout-modal__overlay {
  position: absolute;
  inset: 0;
}
#expiredModal .checkout-modal__content {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  z-index: 10;
}

/* ──────────────────────────────────────────
   PERFIL — LAYOUT & COMPONENTS (FE-61)
────────────────────────────────────────── */

.profile-layout {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  animation: fadeUp var(--dur-slow) var(--ease-out);
}

.profile-sidebar {
  position: sticky;
  top: 108px;
  height: fit-content;
}

.profile-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--white);
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.profile-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: .9rem;
  font-weight: 500;
  transition: all var(--dur-fast) var(--ease-out);
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}

.profile-nav__item:hover {
  background: var(--gold-glow);
  color: var(--gold-deep);
}

.profile-nav__item.is-active {
  background: var(--gold-pale);
  color: var(--gold-deep);
  box-shadow: inset 0 0 0 1px rgba(201,168,76,.15);
}

.profile-nav__item iconify-icon {
  font-size: 1.2rem;
  opacity: .7;
}

.profile-content {
  min-width: 0; /* Prevents overflow in grid */
}

.profile-view {
  display: none;
}

.profile-view.is-active {
  display: block;
  animation: fadeIn var(--dur-base) var(--ease-out);
}

.profile-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--border-light);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}

.profile-card__title {
  font-size: 1.6rem;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Forms in profile */
.profile-form {
  display: grid;
  gap: 20px;
  max-width: 500px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: .850rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.form-group input {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--white);
  font-family: inherit;
  font-size: .95rem;
  transition: all var(--dur-fast) var(--ease-out);
}

.form-group input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-glow);
}

.form-group input:disabled {
  background: var(--cream-deep);
  cursor: not-allowed;
  opacity: .7;
}

/* Tables */
.table-wrapper {
  overflow-x: auto;
  margin: 0 -32px;
  padding: 0 32px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.data-table th {
  text-align: left;
  padding: 16px;
  border-bottom: 2px solid var(--border-light);
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .05em;
}

.data-table td {
  padding: 16px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.data-table tr:hover td {
  background: var(--white);
}

/* Access cards */
.access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.access-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border-light);
  background: var(--white);
  transition: all var(--dur-fast) var(--ease-out);
}

.access-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.access-card__icon {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-sm);
  background: var(--gold-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

.access-card__info {
  flex: 1;
}

.access-card__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.access-card__status {
  font-size: .75rem;
  color: var(--muted);
}

.access-card__status.is-warning {
  color: var(--terracotta);
  font-weight: 500;
}

.access-card__status.is-danger {
  color: var(--error);
  font-weight: 600;
}

/* Badge variants */
.status-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.status-badge--confirmed { background: var(--sage-pale); color: var(--sage); }
.status-badge--pending   { background: var(--gold-pale); color: var(--gold-deep); }
.status-badge--rejected  { background: rgba(192,57,43,.1); color: var(--error); }

/* Responsive */
@media (max-width: 900px) {
  .profile-layout {
    grid-template-columns: 1fr;
    margin: 20px auto;
    gap: 24px;
  }

  .profile-sidebar {
    position: static;
  }

  .profile-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .profile-nav::-webkit-scrollbar { display: none; }

  .profile-nav__item {
    white-space: nowrap;
    width: auto;
    padding: 8px 16px;
  }

  .profile-card {
    padding: 24px;
  }

  .table-wrapper {
    margin: 0 -24px;
    padding: 0 24px;
  }
}

/* ── FE-33: Access badges, product cards, expired modal ──────────────────── */
.access-badge { display:inline-block; padding:3px 10px; border-radius:50px; font-size:10px; font-weight:700; }
.access-badge--green { background:rgba(34,197,94,.1); color:#16a34a; }
.access-badge--amber { background:rgba(230,126,34,.12); color:#e67e22; animation:pulse 2s infinite; }
.access-badge--red   { background:rgba(192,57,43,.12); color:#c0392b; }
.access-countdown    { font-size:11px; font-weight:700; opacity:0.6; margin-top:4px; }
.product-item        { background:white; border-radius:1.5rem; overflow:hidden; border:1px solid var(--lux-border); }
.product-item__cover { height:140px; display:flex; align-items:center; justify-content:center; font-size:3.5rem; }
.product-item__body  { padding:1.5rem; }
.expired-modal       { position:fixed; inset:0; z-index:99998; display:none; align-items:center; justify-content:center; }
.expired-modal.is-open { display:flex; }
.expired-modal__overlay { position:absolute; inset:0; background:rgba(26,18,9,.85); backdrop-filter:blur(8px); }
.expired-modal__content { position:relative; z-index:1; background:var(--lux-cream); border-radius:2rem; padding:3.5rem; max-width:480px; width:90%; text-align:center; }

/* ──────────────────────────────────────────
   UX-03 — TOPBAR + MENÚ DE USUARIO
────────────────────────────────────────── */
.lux-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0 1.5rem;
}

.lux-user-menu {
  position: relative;
}

.lux-user-menu__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.6rem 1.25rem;
  background: white;
  border: 1px solid var(--lux-border, rgba(161,98,7,0.12));
  border-radius: 100px;
  cursor: pointer;
  font-family: var(--lux-font-body, inherit);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--lux-dark, #1a1209);
  transition: box-shadow 0.2s;
  white-space: nowrap;
}
.lux-user-menu__trigger:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.lux-user-menu__chevron {
  font-size: 0.75rem;
  transition: transform 0.18s ease-out;
  flex-shrink: 0;
}
.lux-user-menu.is-open .lux-user-menu__chevron {
  transform: rotate(180deg);
}

.lux-user-menu__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: white;
  border: 1px solid var(--lux-border, rgba(161,98,7,0.12));
  border-radius: 1rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
  padding: 0.5rem;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
  z-index: 600;
}
.lux-user-menu.is-open .lux-user-menu__dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lux-user-menu__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: transparent;
  border-radius: 0.6rem;
  cursor: pointer;
  font-family: var(--lux-font-body, inherit);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--lux-dark, #1a1209);
  text-align: left;
  transition: background 0.15s;
}
.lux-user-menu__option:hover {
  background: rgba(161, 98, 7, 0.06);
}

.lux-user-menu__divider {
  border: none;
  border-top: 1px solid var(--lux-border, rgba(161,98,7,0.12));
  margin: 0.25rem 0.5rem;
}

.lux-user-menu__option--danger {
  color: #c0392b;
}
.lux-user-menu__option--danger:hover {
  background: rgba(192, 57, 43, 0.06);
}

/* ──────────────────────────────────────────
   VIS-01 — CORRECCIONES VISUALES GENERALES
────────────────────────────────────────── */

/* Prevent horizontal scroll on all viewports */
body,
#spa-main {
  overflow-x: hidden;
}

/* Consistent 2rem gap in main panels */
.col-formaciones {
  padding: 2rem;
}
.section-title-wrap {
  margin-bottom: 2rem;
}
.courses-grid {
  gap: 2rem;
}

/* Hero sections: consistent bottom padding so content doesn't clip */
#view-dashboard .dashboard__hero,
#view-diario .diario__header,
#view-tienda > div:first-child {
  padding-bottom: 4rem;
}

/* KPI grid: guaranteed min-width so cards never collapse below readable size */
.kpi-grid {
  min-width: 0;
}
.kpi-card {
  min-width: 0;
  word-break: break-word;
}

/* Responsive tienda layout */
@media (max-width: 900px) {
  .tienda-filters {
    display: none;
  }
  .tienda-grid {
    padding: 1.5rem;
  }
  .tienda-main__toolbar {
    padding: 1rem 1.5rem 0;
  }
}

@media (max-width: 768px) {
  .tienda-grid {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
}