/* Neo-Brutalist Playful Sticker Style for Biblioteca Bíblica */
@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@400;500;600;700;800;900&family=Rubik:wght@500;600;700;800;900&family=Fredoka:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  --bg: #faf8f5;
  --card-bg: #ffffff;
  --text: #18181b;
  --text-muted: #52525b;
  --ink: #18181b;
  --shadow: #18181b;
  --border-w: 2.5px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  
  /* Vibrant Palette */
  --blue: #2563eb;
  --blue-light: #dbeafe;
  --yellow: #fde047;
  --yellow-dark: #eab308;
  --yellow-light: #fef9c3;
  --coral: #f87171;
  --coral-dark: #dc2626;
  --green: #4ade80;
  --green-dark: #16a34a;
  --purple: #c084fc;
  --purple-dark: #7c3aed;
  --wa-green: #22c55e;
}

body.dark-mode {
  --bg: #090d16;
  --card-bg: #151c2e;
  --text: #f4f4f5;
  --text-muted: #a1a1aa;
  --ink: #f4f4f5;
  --shadow: #000000;
  --blue: #3b82f6;
  --blue-light: #1e3a8a;
  --yellow: #facc15;
  --yellow-light: #713f12;
  --coral: #f87171;
  --green: #4ade80;
  --purple: #a855f7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Bahnschrift', 'DIN Alternate', 'Overpass', 'Plus Jakarta Sans', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  background-image: radial-gradient(#d4d4d8 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  transition: background-color .2s, color .2s;
  min-height: 100vh;
}

body.dark-mode {
  background-image: radial-gradient(#27272a 1.2px, transparent 1.2px);
}

input, button, select, textarea {
  font-family: inherit;
}

.wrap {
  width: min(1200px, 94%);
  margin: auto;
}

h1, h2, h3, .nav-btn, .audience-title, .hero-sticker-tag, .btn-welcome, .btn-open, .btn-action, .btn-load-more, .badge {
  font-family: 'Alte Haas Grotesk', 'Rubik', 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.2px;
}

header {
  background: var(--card-bg);
  border-bottom: var(--border-w) solid var(--ink);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 0 var(--shadow);
}

.header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0;
  gap: 12px;
}

.header-brand h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--text);
}

.brand-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brand-crown-icon {
  width: 28px;
  height: 22px;
  transform: rotate(-10deg);
  filter: drop-shadow(2px 2px 0 #18181b);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.header-brand:hover .brand-crown-icon {
  animation: crownBounce 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand-sticker {
  background: var(--yellow);
  color: #000;
  border: 2px solid var(--ink);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 800;
  transform: rotate(-2deg);
  box-shadow: 2px 2px 0 var(--ink);
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
  cursor: default;
}

.brand-sticker:hover {
  transform: rotate(-5deg) scale(1.08);
  box-shadow: 3px 3px 0 var(--ink);
}

.header-brand p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

/* ============================================================= */
/* HEADER NAVIGATION CAPSULE PILLS & GLIDER                      */
/* ============================================================= */
.header-nav-pills {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg, #ffffff);
  border: 2.5px solid var(--ink, #111111);
  border-radius: 24px;
  padding: 5px;
  gap: 4px;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.header-nav-pills:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0 var(--shadow, #111111);
}

/* Indicador deslizante suave con física elástica (Header Nav Glider) */
.header-nav-glider {
  position: absolute;
  top: 0;
  left: 0;
  background: #FEF08A;
  border: 2.5px solid var(--ink, #111111);
  border-radius: 18px;
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111);
  transition: transform 0.38s cubic-bezier(0.34, 1.35, 0.64, 1), width 0.32s cubic-bezier(0.34, 1.2, 0.64, 1), height 0.3s ease, opacity 0.2s ease, background-color 0.3s ease;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}

/* Colores temáticos dinámicos según la pestaña activa */
.header-nav-pills[data-active-nav="home"] .header-nav-glider {
  background: #FEF08A;
}
.header-nav-pills[data-active-nav="lessons"] .header-nav-glider {
  background: #BFDBFE;
}
.header-nav-pills[data-active-nav="favorites"] .header-nav-glider {
  background: #FED7AA;
}
.header-nav-pills[data-active-nav="planner"] .header-nav-glider {
  background: #C7D2FE;
}

body.dark-mode .header-nav-pills {
  background: #0f172a;
  border-color: #334155;
  box-shadow: 4px 4px 0 #000000;
}

body.dark-mode .header-nav-glider {
  background: #1e293b !important;
  border-color: #94a3b8;
  box-shadow: 2.5px 2.5px 0 #000000;
}

.btn-header-nav-pill {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 18px;
  border: 2px solid transparent;
  background: transparent;
  color: var(--text-muted, #64748b);
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: color 0.25s ease, transform 0.2s ease;
  white-space: nowrap;
}

.btn-header-nav-pill:hover {
  color: var(--ink, #111111);
  transform: translateY(-1px);
}

.btn-header-nav-pill.active {
  color: var(--ink, #111111);
  font-weight: 800;
}

body.dark-mode .btn-header-nav-pill {
  color: #94a3b8;
}

body.dark-mode .btn-header-nav-pill:hover,
body.dark-mode .btn-header-nav-pill.active {
  color: #f8fafc;
}

.fav-badge-pill {
  background: #ef4444;
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 800;
  border-radius: 10px;
  border: 1.5px solid var(--ink);
  padding: 1px 6px;
  line-height: 1.2;
}

.btn-theme-toggle {
  background: var(--card-bg);
  border: 2px solid var(--ink);
  color: var(--text);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  padding: 0;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2.5px 2.5px 0 var(--shadow);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s, background 0.15s;
  flex-shrink: 0;
  box-sizing: border-box;
}

.btn-theme-toggle:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--shadow);
}

.btn-theme-toggle:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow);
}

/* NAVIGATION TABS */
.main-nav {
  border-top: 2px solid var(--ink);
  background: var(--card-bg);
}

.nav-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  overflow-x: auto;
  padding: 10px 0;
  scrollbar-width: none;
}

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

.nav-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.nav-crumb-sep {
  font-weight: 800;
  color: var(--text-muted);
  opacity: 0.7;
}

.nav-crumb-current {
  color: #000;
  background: var(--yellow);
  border: 2px solid var(--ink);
  padding: 4px 12px;
  border-radius: 12px;
  box-shadow: 2px 2px 0 var(--ink);
  font-size: 13px;
  font-weight: 800;
  transform: rotate(-1deg);
}

body.dark-mode .nav-crumb-current {
  background: #facc15;
  color: #000;
}

.nav-btn {
  background: var(--bg);
  border: 2px solid var(--ink);
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  box-shadow: 2.5px 2.5px 0 var(--shadow);
  transition: .15s;
}

.nav-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--shadow);
  background: #fff;
}

.nav-btn.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
}

body.dark-mode .nav-btn:hover {
  background: #1e293b;
}


/* Icon-only Welcome Buttons */
.btn-icon-only {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  position: absolute !important;
  bottom: 20px;
  right: 20px;
  margin: 0 !important;
}
.btn-icon-only .btn-arrow {
  margin: 0 !important;
  font-size: 24px !important;
}


/* Suble arrow indicator for clickable cards */
.card-arrow-indicator {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 24px;
  color: var(--text-muted);
  transition: transform 0.2s, color 0.2s;
  font-weight: 800;
  pointer-events: none; /* Let clicks pass through to the card */
}
.welcome-card:hover .card-arrow-indicator,
.audience-card:hover .card-arrow-indicator,
.unit-card:hover .card-arrow-indicator,
.pack-card:hover .card-arrow-indicator {
  transform: translateX(4px);
  color: var(--text);
}

/* ============================================================
   ANIMACIONES LÚDICAS Y EFECTOS (NEO-BRUTALIST SCRAPBOOK)
   ============================================================ */

/* 1. Flotación suave y bamboleo de stickers */
@keyframes floatDaisy {
  0%, 100% {
    transform: translateY(0) rotate(14deg);
  }
  50% {
    transform: translateY(-9px) rotate(7deg);
  }
}

@keyframes floatPlane {
  0%, 100% {
    transform: translate(0, 0) rotate(-6deg);
  }
  50% {
    transform: translate(10px, -12px) rotate(-11deg);
  }
}

@keyframes floatArrow {
  0%, 100% {
    transform: translateY(0) rotate(25deg);
  }
  50% {
    transform: translateY(-6px) rotate(19deg);
  }
}

@keyframes spinStar {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.18);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes heartBeat {
  0%, 100% {
    transform: scale(1) rotate(10deg);
  }
  14% {
    transform: scale(1.24) rotate(6deg);
  }
  28% {
    transform: scale(1.05) rotate(10deg);
  }
  42% {
    transform: scale(1.28) rotate(14deg);
  }
  70% {
    transform: scale(1) rotate(10deg);
  }
}

@keyframes crownBounce {
  0% { transform: rotate(-10deg) scale(1); }
  25% { transform: translateY(-7px) rotate(-22deg) scale(1.25); }
  50% { transform: translateY(0) rotate(-4deg) scale(1.1); }
  75% { transform: translateY(-3px) rotate(-14deg) scale(1.18); }
  100% { transform: rotate(-10deg) scale(1); }
}

@keyframes clipWiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-10deg) translateY(-2px); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-5deg); }
  80% { transform: rotate(3deg); }
}

/* 2. Entradas escalonadas fluidas (Staggered Pop-In) */
@keyframes heroSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-22px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cardPopIn {
  0% {
    opacity: 0;
    transform: translateY(32px) scale(0.92);
  }
  65% {
    opacity: 1;
    transform: translateY(-7px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 3. Trazo dibujado a mano del subrayado */
@keyframes squigglyDraw {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* SECTIONS */
.section-content {
  padding: 28px 0 50px;
}

.hidden { display: none !important; }

/* INICIO / HERO ESTILO LEGENDARIO DE VIDEOJUEGO */
.welcome-hero {
  background: var(--blue);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 24px;
  padding: 44px 34px 40px;
  margin-top: 14px;
  margin-bottom: 38px;
  box-shadow: 6px 6px 0px var(--shadow);
  position: relative;
  overflow: visible;
  animation: heroSlideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.welcome-hero.welcome-hero-legendary {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 45%, #c2410c 75%, #7c2d12 100%);
  border: 3.5px solid var(--ink);
  border-radius: 26px;
  padding: 38px 36px 36px;
  margin-top: 14px;
  margin-bottom: 32px;
  box-shadow: 7px 7px 0px var(--shadow), 0 0 34px rgba(245, 158, 11, 0.45);
  position: relative;
  overflow: hidden;
  animation: heroSlideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* Patrón de rayos de sol / sunburst estilo loot drop */
.welcome-hero.welcome-hero-legendary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(254, 240, 138, 0.38) 0%, rgba(251, 146, 60, 0.15) 50%, transparent 80%),
              repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.08) 0deg 15deg, transparent 15deg 30deg);
  pointer-events: none;
  z-index: 1;
}

/* Rayo holográfico / Shimmer Sweep de item legendario */
.legendary-shimmer-beam {
  position: absolute;
  top: -60%;
  left: -80%;
  width: 50%;
  height: 220%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
  transform: rotate(25deg);
  pointer-events: none;
  z-index: 2;
  animation: legendaryShineSweep 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes legendaryShineSweep {
  0% { transform: translateX(-100%) rotate(25deg); opacity: 0; }
  15% { opacity: 1; }
  45% { transform: translateX(380%) rotate(25deg); opacity: 0; }
  100% { transform: translateX(380%) rotate(25deg); opacity: 0; }
}

/* Esquinas estilo HUD / Inventario RPG */
.legendary-hud-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 3px solid #fef08a;
  pointer-events: none;
  z-index: 4;
}

.legendary-hud-corner.corner-tl {
  top: 10px;
  left: 10px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 8px;
}

.legendary-hud-corner.corner-tr {
  top: 10px;
  right: 10px;
  border-left: none;
  border-bottom: none;
  border-top-right-radius: 8px;
}

.legendary-hud-corner.corner-bl {
  bottom: 10px;
  left: 10px;
  border-right: none;
  border-top: none;
  border-bottom-left-radius: 8px;
}

.legendary-hud-corner.corner-br {
  bottom: 10px;
  right: 10px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 8px;
}

/* Corona flotante dorada con chispas de videojuego */
.legendary-floating-crown {
  position: absolute;
  top: -10px;
  right: 28px;
  z-index: 6;
  pointer-events: none;
  animation: crownGameFloat 3.8s ease-in-out infinite;
}

.legendary-crown-img {
  width: 74px;
  height: 60px;
  filter: drop-shadow(3px 3px 0 #18181b) drop-shadow(0 0 14px rgba(250, 204, 21, 0.8));
  transform: rotate(12deg);
}

@keyframes crownGameFloat {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(-7px) rotate(-5deg) scale(1.08); }
}

.legendary-sparkle {
  position: absolute;
  color: #fef08a;
  font-weight: 800;
  text-shadow: 0 0 8px #f59e0b;
  animation: sparkleTwinkle 1.8s ease-in-out infinite;
}

.legendary-sparkle.s1 { top: -6px; left: -10px; font-size: 18px; animation-delay: 0s; }
.legendary-sparkle.s2 { top: -14px; right: 12px; font-size: 14px; animation-delay: 0.6s; }
.legendary-sparkle.s3 { bottom: 0px; right: -12px; font-size: 16px; animation-delay: 1.1s; }

@keyframes sparkleTwinkle {
  0%, 100% { transform: scale(0.6) rotate(0deg); opacity: 0.3; }
  50% { transform: scale(1.3) rotate(45deg); opacity: 1; }
}

.legendary-lightning {
  bottom: -18px;
  left: 48px;
  width: 44px;
  height: 52px;
  transform: rotate(-15deg);
  filter: drop-shadow(2px 2px 0 #18181b) drop-shadow(0 0 10px rgba(250, 204, 21, 0.7));
  animation: floatArrow 3.5s ease-in-out infinite;
}

.legendary-starburst {
  top: 14px;
  left: 22px;
  width: 22px;
  height: 22px;
  animation: spinStar 10s linear infinite;
  filter: drop-shadow(1.5px 1.5px 0 #111);
}

/* Badge de Rango Legendario */
.legendary-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #18181b;
  color: #fef08a;
  border: 2px solid #facc15;
  border-radius: 20px;
  padding: 6px 14px;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
  box-shadow: 3px 3px 0 #000, 0 0 12px rgba(250, 204, 21, 0.35);
  position: relative;
  z-index: 3;
  transform: rotate(-1.5deg);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.legendary-rank-badge:hover {
  transform: rotate(0deg) scale(1.05);
}

.rank-gem-icon svg {
  display: block;
  filter: drop-shadow(0 0 4px #eab308);
}

.rank-title {
  color: #facc15;
  font-weight: 800;
}

.rank-stars {
  color: #fde047;
  letter-spacing: 2px;
  font-size: 11px;
}

.rank-sep {
  opacity: 0.5;
}

.rank-brand {
  color: #ffffff;
  font-weight: 700;
}

/* Título Épico de Videojuego */
.legendary-main-title {
  margin: 0;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.legendary-text-shadow {
  color: #ffffff;
  text-shadow:
    3px 3px 0 #111111,
    -1px -1px 0 #111111,
    1px -1px 0 #111111,
    -1px 1px 0 #111111,
    0 3px 8px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
}

.legendary-highlight {
  background: linear-gradient(135deg, #fef08a 0%, #facc15 60%, #eab308 100%) !important;
  color: #000000 !important;
  border: 2px solid #111111 !important;
  box-shadow: 3.5px 3.5px 0 #111111, 0 0 16px rgba(250, 204, 21, 0.6) !important;
  padding: 4px 14px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transform: rotate(1deg);
}

.legendary-lvl-pill {
  background: #18181b;
  color: #facc15;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 8px;
  border: 1.5px solid #111111;
  box-shadow: 1.5px 1.5px 0 #111111;
  letter-spacing: 0.5px;
}

/* Modo oscuro legendario */
body.dark-mode .welcome-hero.welcome-hero-legendary {
  background: linear-gradient(135deg, #b45309 0%, #9a3412 40%, #7c2d12 75%, #431407 100%);
  box-shadow: 7px 7px 0px #000, 0 0 38px rgba(245, 158, 11, 0.4);
}

/* Responsive para pantallas móviles */
@media (max-width: 640px) {
  .welcome-hero.welcome-hero-legendary {
    padding: 26px 18px 24px;
    margin-bottom: 24px;
  }
  .legendary-main-title {
    font-size: 24px;
    gap: 8px;
  }
  .legendary-floating-crown {
    top: -10px;
    right: 12px;
  }
  .legendary-crown-img {
    width: 48px;
    height: 40px;
  }
  .legendary-rank-badge {
    font-size: 10px;
    padding: 4px 9px;
    gap: 5px;
  }
  .legendary-lightning {
    display: none;
  }
}

/* ============================================================
   CARRUSEL INTERACTIVO DE BIENVENIDA (NEO-BRUTALIST CAROUSEL)
   ============================================================ */

.welcome-carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  user-select: none;
  padding: 0 16px;
}

.welcome-carousel-viewport {
  width: 100%;
  overflow: visible;
  padding: 36px 10px 46px;
  perspective: 1200px;
}

.welcome-carousel-track {
  display: flex;
  align-items: center;
  gap: 26px;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: grab;
}

.welcome-carousel-track.is-dragging {
  cursor: grabbing;
  transition: none !important;
}

.welcome-card {
  flex: 0 0 360px;
  width: 360px;
  max-width: 82vw;
  box-sizing: border-box;
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 30px 24px 24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  will-change: transform, opacity, box-shadow;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.45s ease,
              box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1),
              filter 0.45s ease;
  transform-origin: center center;
}

/* ESTADOS VISUALES Y SOMBRAS NEO-BRUTALISTAS LIMPIAS */
.welcome-card.is-active {
  transform: scale(1.05) rotate(0deg);
  opacity: 1;
  z-index: 10;
  filter: none;
  box-shadow: 8px 10px 0 var(--shadow);
}

.welcome-card.is-prev {
  transform: scale(0.88) rotate(-2.5deg);
  opacity: 0.65;
  box-shadow: 4px 5px 0 var(--shadow);
  z-index: 5;
  filter: brightness(0.96);
}

.welcome-card.is-next {
  transform: scale(0.88) rotate(2.5deg);
  opacity: 0.65;
  box-shadow: 4px 5px 0 var(--shadow);
  z-index: 5;
  filter: brightness(0.96);
}

.welcome-card.is-distant {
  transform: scale(0.78);
  opacity: 0.25;
  box-shadow: 3px 3px 0 var(--shadow);
  z-index: 1;
  filter: brightness(0.92);
}

/* Hover en la tarjeta activa */
.welcome-card.is-active:hover {
  transform: scale(1.06) translateY(-4px);
  box-shadow: 9px 13px 0 var(--shadow);
}

/* Hover en tarjetas adyacentes */
.welcome-card.is-prev:hover {
  transform: scale(0.95) rotate(-1deg) translateY(-2px);
  opacity: 0.9;
}

.welcome-card.is-next:hover {
  transform: scale(0.95) rotate(1deg) translateY(-2px);
  opacity: 0.9;
}

.welcome-card:active {
  transform: scale(0.98) !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
  transition: transform 0.05s ease, box-shadow 0.05s ease;
}

/* Animación de stickers al activar */
.welcome-card.just-activated .card-binder-clip {
  animation: clipWiggle 0.6s ease;
}

.welcome-card.just-activated .card-corner-sticker {
  animation: stickerPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes stickerPop {
  0% { transform: scale(0.8) rotate(0deg); }
  50% { transform: scale(1.3) rotate(-15deg); }
  100% { transform: scale(1); }
}

/* BOTONES DE NAVEGACIÓN DEL CARRUSEL */
.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 3px solid var(--ink);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  box-shadow: 3.5px 3.5px 0 var(--shadow);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.15s,
              box-shadow 0.18s;
}

.carousel-nav-btn.carousel-prev {
  left: -24px;
}

.carousel-nav-btn.carousel-next {
  right: -24px;
}

.carousel-nav-btn:hover {
  background: var(--yellow);
  color: #000;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 5px 5px 0 var(--shadow);
}

.carousel-nav-btn:active {
  transform: translateY(-50%) translate(2px, 2px) scale(0.96);
  box-shadow: 1.5px 1.5px 0 var(--shadow);
}

/* INDICADORES / PAGINACIÓN NEO-BRUTALISTA */
.carousel-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  margin-bottom: 28px;
}

.carousel-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: var(--card-bg);
  cursor: pointer;
  padding: 0;
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 2px 2px 0 var(--shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.carousel-dot:hover {
  transform: translateY(-2px) scale(1.2);
  background: var(--yellow-light);
}

.carousel-dot.active {
  width: auto;
  border-radius: 20px;
  padding: 5px 14px;
  background: var(--ink);
  color: var(--card-bg);
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 3px 3px 0 var(--shadow);
  transform: translateY(-2px);
  gap: 7px;
}

body.dark-mode .carousel-dot.active {
  background: #f4f4f5;
  color: #18181b;
}

.carousel-dot-badge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  display: inline-block;
}

body.dark-mode .carousel-dot-badge {
  background: #eab308;
}

/* Adaptación móvil del carrusel */
@media (max-width: 640px) {
  .welcome-carousel-wrapper {
    max-width: 100%;
    padding: 0 4px;
  }
  .welcome-carousel-viewport {
    padding: 24px 4px 34px;
  }
  .welcome-card {
    flex: 0 0 280px;
    width: 280px;
    max-width: 78vw;
    padding: 24px 18px 20px;
  }
  .carousel-nav-btn {
    width: 38px;
    height: 38px;
    box-shadow: 2.5px 2.5px 0 var(--shadow);
  }
  .carousel-nav-btn.carousel-prev {
    left: 4px;
  }
  .carousel-nav-btn.carousel-next {
    right: 4px;
  }
  .carousel-dot.active {
    font-size: 11.5px;
    padding: 4px 10px;
  }
}

.card-binder-clip {
  position: absolute;
  top: -18px;
  left: 26px;
  width: 36px;
  height: 36px;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.3));
  transition: transform 0.2s ease;
}

.welcome-card:hover .card-binder-clip {
  animation: clipWiggle 0.45s ease;
}

.card-corner-sticker {
  position: absolute;
  top: 14px;
  right: 14px;
  pointer-events: none;
  z-index: 2;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.15));
}

.card-corner-sticker.sticker-pencil {
  width: 44px;
  height: 44px;
  transform: rotate(-12deg);
}

.card-corner-sticker.sticker-bible {
  width: 44px;
  height: 44px;
  transform: rotate(8deg);
}

.card-lessons:hover .sticker-pencil {
  transform: scale(1.28) rotate(-24deg) translateY(-5px);
}

.welcome-card.card-stories:hover .sticker-bible {
  transform: scale(1.28) rotate(16deg) translateY(-5px);
}

.card-corner-sticker.sticker-lightning {
  width: 44px;
  height: 44px;
  transform: rotate(-12deg);
}

.welcome-icon-svg {
  margin-bottom: 14px;
  display: inline-block;
}

.welcome-icon-svg svg {
  display: block;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.15));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
}

.welcome-card:hover .welcome-icon-svg svg {
  transform: scale(1.12) rotate(-3deg);
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.22));
}

.welcome-card h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
}

.welcome-card p {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  flex: 1;
  font-weight: 600;
}

.btn-welcome {
  background: #ffffff;
  border: 2px solid var(--ink);
  color: #000000;
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s, color 0.15s, box-shadow 0.2s;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-arrow {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.welcome-card:hover .btn-welcome {
  background: var(--ink);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 var(--shadow);
}

.welcome-card:hover .btn-arrow {
  transform: translateX(5px);
}

/* COLORES ÚNICOS Y VARIABLES DE BRILLO DE CADA TARJETA */
.card-lessons {
  --card-glow-rgb: 255, 204, 0;
  --card-glow-color: #ffcc00;
  background: #ffcc00;
  color: #111111;
}
.card-lessons h3 { color: #111111; }
.card-lessons p { color: #27272a; }

.card-stories {
  --card-glow-rgb: 52, 211, 153;
  --card-glow-color: #34d399;
  background: #34d399;
  color: #064e3b;
}
.card-stories h3 { color: #042f2e; }
.card-stories p { color: #065f46; }

.card-favorites {
  --card-glow-rgb: 192, 132, 252;
  --card-glow-color: #c084fc;
  background: #c084fc;
  color: #3b0764;
}
.card-favorites h3 { color: #2e0854; }
.card-favorites p { color: #581c87; }

.card-planner {
  --card-glow-rgb: 251, 146, 60;
  --card-glow-color: #fb923c;
  background: #fb923c;
  color: #431407;
}
.card-planner h3 { color: #270700; }
.card-planner p { color: #7c2d12; }

.card-corner-sticker.sticker-star {
  width: 36px;
  height: 36px;
  transform: rotate(-10deg);
}

.card-favorites:hover .sticker-star {
  transform: scale(1.25) rotate(18deg);
}

/* MODO OSCURO: COLORES Y BRILLOS PERSONALIZADOS */
body.dark-mode .card-lessons {
  --card-glow-rgb: 234, 179, 8;
  --card-glow-color: #eab308;
  background: #ca8a04;
  color: #ffffff;
}
body.dark-mode .card-lessons p { color: #fef08a; }

body.dark-mode .card-stories {
  --card-glow-rgb: 16, 185, 129;
  --card-glow-color: #10b981;
  background: #059669;
  color: #ffffff;
}
body.dark-mode .card-stories p { color: #d1fae5; }

body.dark-mode .card-favorites {
  --card-glow-rgb: 168, 85, 247;
  --card-glow-color: #a855f7;
  background: #9333ea;
  color: #ffffff;
}
body.dark-mode .card-favorites p { color: #f3e8ff; }

body.dark-mode .card-planner {
  --card-glow-rgb: 249, 115, 22;
  --card-glow-color: #f97316;
  background: #ea580c;
  color: #ffffff;
}
body.dark-mode .card-planner p { color: #ffedd5; }

/* LECCIONES: PASO 1 SELECTOR DE AUDIENCIA */
.step-header {
  text-align: center;
  margin-bottom: 30px;
}

.step-header h2 {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 800;
}

.step-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 600;
}

.audience-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  max-width: 1040px;
  margin: 0 auto;
}

.audience-card {
  background: var(--card-bg);
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 26px 24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 5px 5px 0 var(--shadow);
  transition: .2s;
  text-align: left;
  position: relative;
  overflow: visible;
}

.audience-corner-sticker {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 36px;
  height: 36px;
  pointer-events: none;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.15));
}

.audience-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--shadow);
}

.audience-card:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--shadow);
}

.audience-kids { border-top: 8px solid var(--yellow-dark); }
.audience-teens { border-top: 8px solid var(--blue); }
.audience-stories { border-top: 8px solid #00BA88; }


.audience-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--bg);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: 2.5px 2.5px 0 var(--shadow);
  flex-shrink: 0;
}

.current-audience-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--yellow-light);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 2px 2px 0 var(--shadow);
  flex-shrink: 0;
}

body.dark-mode .current-audience-icon-wrap {
  background: #1e293b;
}

.audience-text { flex: 1; }

.audience-title {
  display: block;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}

.audience-sub {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}

.audience-arrow {
  background: var(--bg);
  border: 2px solid var(--ink);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13.5px;
  font-weight: 800;
  box-shadow: 2.5px 2.5px 0 var(--shadow);
  color: var(--text);
  margin-top: auto;
  align-self: flex-start;
}

/* /* PASO 2: BARRA SUPERIOR DE AUDIENCIA (SELECTOR FLOTANTE) */
.audience-switcher-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0 24px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.current-audience-tag {
  display: flex;
  align-items: center;
  gap: 14px;
}

.viewing-label {
  display: block;
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  margin-bottom: 2px;
  line-height: 1.2;
}

.current-audience-tag strong {
  display: block;
  font-size: 24px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: 0.2px;
}

.btn-switch {
  background: var(--card-bg);
  border: 2px solid var(--ink);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
}

.btn-switch:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--shadow);
  background: var(--yellow-light);
  color: #000;
}

.btn-switch:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow);
}

/* SWITCHER ACTIONS Y PILLS */
.audience-switcher-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.audience-pills-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg, #ffffff);
  border: 2.5px solid var(--ink, #111111);
  border-radius: 20px;
  padding: 6px;
  gap: 4px;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.audience-pills-group:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0 var(--shadow, #111111);
}

/* Indicador deslizante suave con física elástica (Pill Glider) */
.pill-glider {
  position: absolute;
  top: 0;
  left: 0;
  background: #FEF08A;
  border: 2.5px solid var(--ink, #111111);
  border-radius: 14px;
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111);
  transition: transform 0.38s cubic-bezier(0.34, 1.35, 0.64, 1), width 0.32s cubic-bezier(0.34, 1.2, 0.64, 1), height 0.3s ease, opacity 0.2s ease, background-color 0.3s ease;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}

/* Color temático dinámico del indicador según la sección activa */
.audience-pills-group[data-active-audience="stories"] .pill-glider {
  background: #A7F3D0;
}
.audience-pills-group[data-active-audience="packs"] .pill-glider {
  background: #FED7AA;
}
.audience-pills-group[data-active-audience="capacitaciones"] .pill-glider {
  background: #DDD6FE;
}

body.dark-mode .audience-pills-group {
  background: #0f172a;
  border-color: #334155;
  box-shadow: 4px 4px 0 #000000;
}
body.dark-mode .pill-glider {
  background: #1e293b !important;
  border-color: #94a3b8;
  box-shadow: 2.5px 2.5px 0 #000000;
}

.btn-audience-pill {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 14px;
  border: 2px solid transparent;
  background: transparent;
  color: var(--text-muted, #64748b);
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.25s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  outline: none;
}

.btn-audience-pill img,
.btn-audience-pill svg {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-audience-pill:hover {
  color: var(--text, #111111);
  transform: translateY(-2px);
}

.btn-audience-pill:hover img,
.btn-audience-pill:hover svg {
  transform: scale(1.18) rotate(6deg);
}

.btn-audience-pill:active {
  transform: scale(0.93) translateY(1px);
}

.btn-audience-pill.active {
  color: var(--text, #111111);
  font-weight: 800;
}

.btn-audience-pill.active img,
.btn-audience-pill.active svg {
  animation: pillWiggle 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pillWiggle {
  0% { transform: scale(0.8) rotate(-10deg); }
  45% { transform: scale(1.25) rotate(8deg); }
  75% { transform: scale(1.05) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

body.dark-mode .btn-audience-pill.active {
  color: #f8fafc;
}

.catalog-smooth-enter {
  animation: catalogSlideFade 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes catalogSlideFade {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HISTORIAS BIBLICAS BADGES & CARDS */
.badge-testament-at { background: #FEF3C7; color: #92400E; border: 1.5px solid #111111; }
.badge-testament-nt { background: #E0E7FF; color: #3730A3; border: 1.5px solid #111111; }
.badge-testament-nat { background: #DCFCE7; color: #166534; border: 1.5px solid #111111; }

.badge-format-pptx { background: #FFE4E6; color: #9F1239; border: 1.5px solid #111111; font-weight: 800; font-size: 11px; padding: 2px 7px; border-radius: 6px; }
.badge-format-jpg { background: #E0F2FE; color: #075985; border: 1.5px solid #111111; font-weight: 800; font-size: 11px; padding: 2px 7px; border-radius: 6px; }
.badge-format-pdf { background: #FEE2E2; color: #991B1B; border: 1.5px solid #111111; font-weight: 800; font-size: 11px; padding: 2px 7px; border-radius: 6px; }

.story-breakdown {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 10px;
}

.card-actions-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.card-actions-story .btn-open {
  grid-column: 1 / -1;
  background: #00BA88;
  color: #ffffff;
  font-weight: 800;
}
.card-actions-story .btn-open:hover {
  background: #059669;
}
.btn-drive-card {
  background: #2563EB !important;
  color: #ffffff !important;
  text-decoration: none;
}
.btn-drive-card:hover {
  background: #1D4ED8 !important;
  color: #ffffff !important;
}

.card.age-stories {
  border-top: 6px solid #00BA88;
}

/* Local Resource notice in Viewer */
.local-resource-card {
  padding: 28px 24px;
  background: var(--card-bg);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--shadow);
  margin: 20px auto;
  max-width: 680px;
  text-align: center;
}
.local-resource-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  box-shadow: 2.5px 2.5px 0 var(--shadow);
}
.local-resource-card h4 {
  font-size: 18px;
  font-family: 'Fredoka', sans-serif;
  margin: 0 0 8px;
  color: var(--text);
}
.local-resource-path {
  background: var(--bg);
  border: 1.5px dashed var(--ink);
  padding: 10px 14px;
  border-radius: 10px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
  margin: 14px 0;
  text-align: left;
  color: var(--text-muted);
}
.local-resource-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.btn-copy-path {
  background: var(--card-bg);
  border: 2px solid var(--ink);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow);
  transition: .15s;
}
.btn-copy-path:hover {
  transform: translate(-1.5px, -1.5px);
  box-shadow: 3.5px 3.5px 0 var(--shadow);
  background: var(--yellow-light);
}

/* VISOR INTERACTIVO DE DIAPOSITIVAS / PRESENTACIÓN */
.story-slide-player {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.slide-screen {
  background: #0f172a;
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 5px 5px 0 var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 420px;
  max-height: 600px;
  position: relative;
}

.slide-screen img {
  max-width: 100%;
  max-height: 590px;
  object-fit: contain;
  display: block;
  user-select: none;
}

.slide-overlay-counter {
  position: absolute;
  top: 12px;
  right: 14px;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  pointer-events: none;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}

.slide-nav-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-bg);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: 3px 3px 0 var(--shadow);
  flex-wrap: wrap;
}

.btn-slide-nav {
  background: var(--yellow);
  color: #000000;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 8px 16px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow);
  transition: 0.15s;
}

.btn-slide-nav:hover:not(:disabled) {
  transform: translate(-1.5px, -1.5px);
  box-shadow: 3.5px 3.5px 0 var(--shadow);
  background: var(--yellow-dark);
}

.btn-slide-nav:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.slide-counter {
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  padding: 0 8px;
}

.slide-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 8px 4px 12px;
  scroll-behavior: smooth;
}

.slide-strip::-webkit-scrollbar {
  height: 8px;
}
.slide-strip::-webkit-scrollbar-thumb {
  background: var(--ink);
  border-radius: 4px;
}

.slide-strip-thumb {
  flex: 0 0 100px;
  height: 70px;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  background: #0f172a;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 2px 2px 0 var(--shadow);
  padding: 0;
  transition: 0.15s;
}

.slide-strip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  transition: 0.15s;
}

.slide-strip-thumb:hover img {
  opacity: 1;
}

.slide-strip-thumb.active {
  border-color: #00BA88;
  transform: scale(1.05);
  box-shadow: 0 0 0 2px #00BA88, 3px 3px 0 var(--shadow);
}

.slide-strip-thumb.active img {
  opacity: 1;
}

.slide-strip-thumb span {
  position: absolute;
  bottom: 3px;
  right: 4px;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.4);
}

.btn-pptx-dl {
  background: #E11D48 !important;
  color: #ffffff !important;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.btn-pptx-dl:hover {
  background: #BE123C !important;
  color: #ffffff !important;
}

/* BANNERS DE TEATRO Y PADRES */
.banner-corner-doodle {
  position: absolute;
  top: -18px;
  right: 24px;
  width: 44px;
  height: 44px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.18));
  transform: rotate(14deg);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}

.section-banner:hover .banner-corner-doodle {
  transform: scale(1.15) rotate(22deg) translateY(-4px);
}

.section-banner {
  background: var(--card-bg);
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 28px 30px;
  margin-bottom: 24px;
  box-shadow: 5px 5px 0 var(--shadow);
  position: relative;
  overflow: visible;
}

.section-banner h2 {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 800;
}

.section-banner p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 600;
}

.simple-search-wrap {
  margin-bottom: 24px;
}

.simple-search-wrap input {
  width: 100%;
  padding: 14px 18px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 4px 4px 0 var(--shadow);
}

/* FILTROS CON ESTILO STICKER */
.filters {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 16px;
  padding: 22px 22px 18px;
  background: var(--card-bg);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  margin-bottom: 26px;
  box-shadow: 4px 4px 0 var(--shadow);
  position: relative;
  overflow: visible;
}

.filter-binder-clip {
  position: absolute;
  top: -18px;
  right: 28px;
  width: 34px;
  height: 34px;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.25));
}

label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  font-family: 'Fredoka', sans-serif;
}

select, input {
  width: 100%;
  margin-top: 7px;
  padding: 12px 14px;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--shadow);
  transition: .15s;
}

select:focus, input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 4px 4px 0 var(--blue);
}

/* GRID DE TARJETAS (CARDS) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}

.card {
  background: var(--card-bg);
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  overflow: visible;
  transition: .2s;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 4px 0 var(--shadow);
  position: relative;
}

.card-clip-mini {
  position: absolute;
  top: -12px;
  left: 18px;
  width: 26px;
  height: 26px;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(1.5px 1.5px 0 rgba(0,0,0,0.35));
}

.card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--shadow);
}

/* Acentos de edad en el encabezado de tarjeta */
.card.age-0-2 { border-top: 6px solid #f59e0b; }
.card.age-3-5 { border-top: 6px solid #10b981; }
.card.age-6-8 { border-top: 6px solid #0284c7; }
.card.age-9-11 { border-top: 6px solid #ea580c; }
.card.age-ado { border-top: 6px solid #8b5cf6; }
.card.age-inf { border-top: 6px solid #0d9488; }
.card.age-padres { border-top: 6px solid #e11d48; }
.card.age-gen { border-top: 6px solid #64748b; }

.thumb {
  height: 190px;
  background: #f1f5f9;
  overflow: hidden;
  position: relative;
  border-bottom: 2px solid var(--ink);
  border-radius: 17px 17px 0 0;
}

body.dark-mode .thumb { background: #1e293b; }

.thumb .no-thumb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #71717a;
  z-index: 1;
}

.thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  z-index: 2;
  background-color: var(--card-bg);
}

.card-pack .thumb img,
.unit-card .thumb img {
  object-position: center center;
}

.card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 10px;
  color: var(--text);
}

.meta {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: auto;
}

/* BADGES TIPO STICKER */
.card-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 8px;
  border: 1.5px solid var(--ink);
  box-shadow: 1.5px 1.5px 0 var(--shadow);
  display: inline-block;
  transform: rotate(-1deg);
}

.badge-month {
  background: #ffffff;
  color: #18181b;
}

body.dark-mode .badge-month {
  background: #334155;
  color: #f1f5f9;
}

.badge-age.age-0-2 { background: #fef08a; color: #854d0e; }
.badge-age.age-3-5 { background: #bbf7d0; color: #166534; }
.badge-age.age-6-8 { background: #bae6fd; color: #075985; }
.badge-age.age-9-11 { background: #fed7aa; color: #9a3412; }
.badge-age.age-ado { background: #e9d5ff; color: #6b21a8; }
.badge-age.age-inf { background: #99f6e4; color: #115e59; }
.badge-age.age-padres { background: #fecdd3; color: #9f1239; }
.badge-age.age-gen { background: #e2e8f0; color: #334155; }

body.dark-mode .badge-age.age-0-2 { background: #854d0e; color: #fef08a; }
body.dark-mode .badge-age.age-3-5 { background: #166534; color: #bbf7d0; }
body.dark-mode .badge-age.age-6-8 { background: #075985; color: #bae6fd; }
body.dark-mode .badge-age.age-9-11 { background: #9a3412; color: #fed7aa; }
body.dark-mode .badge-age.age-ado { background: #6b21a8; color: #e9d5ff; }
body.dark-mode .badge-age.age-inf { background: #115e59; color: #99f6e4; }
body.dark-mode .badge-age.age-padres { background: #9f1239; color: #fecdd3; }
body.dark-mode .badge-age.age-gen { background: #334155; color: #e2e8f0; }

.card-id {
  font-family: monospace;
  font-weight: 800;
  color: var(--text);
}

.card-count {
  font-weight: 800;
  color: var(--green-dark);
}
body.dark-mode .card-count { color: #4ade80; }

.id-tag {
  font-family: monospace;
  font-weight: 800;
  background: var(--yellow-light);
  color: #000;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1.5px solid var(--ink);
  box-shadow: 1.5px 1.5px 0 var(--shadow);
}

/* BOTONES DE LA TARJETA */
.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.card-actions .btn-open {
  flex: 1;
  border: 2px solid var(--ink);
  background: var(--blue);
  color: #ffffff;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 2.5px 2.5px 0 var(--shadow);
  transition: .15s;
  text-align: center;
}

.card-actions .btn-open:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--shadow);
}

.card-actions .btn-open:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow);
}

.btn-wa-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--wa-green);
  color: #ffffff;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
  box-shadow: 2.5px 2.5px 0 var(--shadow);
  transition: .15s;
  white-space: nowrap;
}

.btn-wa-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--shadow);
}

/* STORY CARDS ACTION BUTTONS (2 TIERS) */
.card-actions.card-actions-story {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.card-actions.card-actions-story .btn-open {
  grid-column: 1 / -1;
  background: #00BA88 !important;
  color: #ffffff !important;
  font-weight: 800;
  padding: 10px 14px;
}
.card-actions.card-actions-story .btn-open:hover {
  background: #059669 !important;
}
.card-actions.card-actions-story .btn-drive-card {
  background: #2563EB !important;
  color: #ffffff !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
}
.card-actions.card-actions-story .btn-drive-card:hover {
  background: #1D4ED8 !important;
  color: #ffffff !important;
}
.card-actions.card-actions-story .btn-wa-card {
  padding: 8px 10px;
}

/* ============================================================
   BOTÓN GUARDAR FAVORITO (ESQUINA SUPERIOR DERECHA) CON DESTELLOS
   ============================================================ */
.btn-card-fav {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: #ffffff;
  box-shadow: 2.5px 2.5px 0 var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s, background-color 0.2s;
  animation: favIdleFloat 3.6s ease-in-out infinite;
  overflow: visible;
  outline: none;
}

body.dark-mode .btn-card-fav {
  background: #1e293b;
  border-color: #f4f4f5;
  box-shadow: 2.5px 2.5px 0 #000000;
}

/* Animación sutil en reposo (levitación) */
@keyframes favIdleFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-2.5px) rotate(4deg);
  }
}

.btn-card-fav:hover {
  transform: scale(1.18) rotate(10deg) translateY(-2px) !important;
  box-shadow: 4px 4px 0 var(--shadow) !important;
  background: #fef9c3;
}

body.dark-mode .btn-card-fav:hover {
  background: #334155;
  box-shadow: 4px 4px 0 #000000 !important;
}

.btn-card-fav:active {
  transform: translate(2px, 2px) scale(0.95) !important;
  box-shadow: 1px 1px 0 var(--shadow) !important;
}

/* Ícono estrella SVG */
.btn-fav-star {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.btn-fav-star .star-svg {
  display: block;
}

.btn-fav-star .star-path {
  fill: transparent;
  stroke: var(--ink);
  stroke-width: 2.2px;
  stroke-linejoin: round;
  transition: fill 0.2s, stroke 0.2s;
}

body.dark-mode .btn-fav-star .star-path {
  stroke: #f4f4f5;
}

.btn-card-fav:hover .btn-fav-star .star-path {
  fill: #fde047;
  stroke: #854d0e;
}

/* ESTADO ACTIVO (GUARDADA) */
.btn-card-fav.active {
  background: linear-gradient(135deg, #fde047 0%, #f59e0b 100%) !important;
  border-color: var(--ink);
  box-shadow: 2.5px 2.5px 0 var(--shadow), 0 0 12px rgba(245, 158, 11, 0.65);
  animation: favActivePulse 3.2s ease-in-out infinite;
}

body.dark-mode .btn-card-fav.active {
  background: linear-gradient(135deg, #facc15 0%, #d97706 100%) !important;
  border-color: #fef08a;
  box-shadow: 2.5px 2.5px 0 #000, 0 0 14px rgba(250, 204, 21, 0.7);
}

.btn-card-fav.active .btn-fav-star .star-path {
  fill: #ffffff;
  stroke: #78350f;
  stroke-width: 1.8px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

@keyframes favActivePulse {
  0%, 100% {
    box-shadow: 2.5px 2.5px 0 var(--shadow), 0 0 8px rgba(245, 158, 11, 0.4);
    transform: translateY(0) rotate(0deg);
  }
  50% {
    box-shadow: 2.5px 2.5px 0 var(--shadow), 0 0 16px rgba(245, 158, 11, 0.85);
    transform: translateY(-1.5px) rotate(4deg);
  }
}

/* ============================================================
   ANIMACIÓN DE DISPARO Y DESTELLOS DE BRILLO (SPARKLE BURST)
   ============================================================ */
.btn-card-fav.sparkle-fire {
  animation: favBurstPop 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

@keyframes favBurstPop {
  0% { transform: scale(0.7) rotate(-12deg); }
  45% { transform: scale(1.35) rotate(16deg); }
  75% { transform: scale(0.92) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Anillo luminoso expansivo */
.sparkle-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #fde047;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
}

.btn-card-fav.sparkle-fire .sparkle-ring {
  animation: ringExpand 0.6s ease-out forwards;
}

@keyframes ringExpand {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 1;
    border-width: 4px;
    box-shadow: 0 0 10px #f59e0b;
  }
  60% {
    opacity: 0.85;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0;
    border-width: 1px;
    box-shadow: 0 0 18px rgba(245, 158, 11, 0);
  }
}

/* Partículas de destellos de brillo (sparks) */
.sparkle-sparks {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  overflow: visible;
}

.spark-item {
  position: absolute;
  display: block;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.spark-item.s1 { color: #fde047; font-size: 16px; text-shadow: 0 0 6px #f59e0b; }
.spark-item.s2 { color: #ffffff; font-size: 14px; text-shadow: 0 0 6px #fde047; }
.spark-item.s3 { color: #f59e0b; font-size: 17px; text-shadow: 0 0 6px #fde047; }
.spark-item.s4 { color: #fde047; font-size: 15px; text-shadow: 0 0 6px #f59e0b; }
.spark-item.s5 { color: #ffffff; font-size: 13px; text-shadow: 0 0 6px #fde047; }
.spark-item.s6 { color: #f59e0b; font-size: 16px; text-shadow: 0 0 6px #fde047; }

.btn-card-fav.sparkle-fire .spark-item.s1 { animation: sparkFly1 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.btn-card-fav.sparkle-fire .spark-item.s2 { animation: sparkFly2 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.03s forwards; }
.btn-card-fav.sparkle-fire .spark-item.s3 { animation: sparkFly3 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards; }
.btn-card-fav.sparkle-fire .spark-item.s4 { animation: sparkFly4 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.02s forwards; }
.btn-card-fav.sparkle-fire .spark-item.s5 { animation: sparkFly5 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.04s forwards; }
.btn-card-fav.sparkle-fire .spark-item.s6 { animation: sparkFly6 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.06s forwards; }

@keyframes sparkFly1 {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 1; }
  50% { opacity: 1; transform: translate(calc(-50% + 28px), calc(-50% + 4px)) scale(1.4) rotate(60deg); }
  100% { transform: translate(calc(-50% + 36px), calc(-50% + 6px)) scale(0) rotate(180deg); opacity: 0; }
}

@keyframes sparkFly2 {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 1; }
  50% { opacity: 1; transform: translate(calc(-50% + 18px), calc(-50% - 24px)) scale(1.4) rotate(-45deg); }
  100% { transform: translate(calc(-50% + 24px), calc(-50% - 32px)) scale(0) rotate(-120deg); opacity: 0; }
}

@keyframes sparkFly3 {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 1; }
  50% { opacity: 1; transform: translate(calc(-50% - 16px), calc(-50% - 24px)) scale(1.5) rotate(45deg); }
  100% { transform: translate(calc(-50% - 22px), calc(-50% - 32px)) scale(0) rotate(140deg); opacity: 0; }
}

@keyframes sparkFly4 {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 1; }
  50% { opacity: 1; transform: translate(calc(-50% - 28px), calc(-50% + 4px)) scale(1.4) rotate(-60deg); }
  100% { transform: translate(calc(-50% + -36px), calc(-50% + 6px)) scale(0) rotate(-180deg); opacity: 0; }
}

@keyframes sparkFly5 {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 1; }
  50% { opacity: 1; transform: translate(calc(-50% - 16px), calc(-50% + 24px)) scale(1.3) rotate(30deg); }
  100% { transform: translate(calc(-50% - 22px), calc(-50% + 32px)) scale(0) rotate(110deg); opacity: 0; }
}

@keyframes sparkFly6 {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 1; }
  50% { opacity: 1; transform: translate(calc(-50% + 18px), calc(-50% + 24px)) scale(1.4) rotate(-40deg); }
  100% { transform: translate(calc(-50% + 24px), calc(-50% + 32px)) scale(0) rotate(-130deg); opacity: 0; }
}

/* Partículas dinámicas inyectadas por JS */
.dyn-sparkle {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  font-size: 20px;
  transform: translate(-50%, -50%) scale(0);
  animation: dynSparkleAnim 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.8));
}

@keyframes dynSparkleAnim {
  0% {
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.3) rotate(var(--rot));
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + calc(var(--tx) * 1.3)), calc(-50% + calc(var(--ty) * 1.3))) scale(0) rotate(calc(var(--rot) * 2));
    opacity: 0;
  }
}

.btn-fav-viewer {
  background: var(--card-bg);
  border: 2px solid var(--ink);
  color: var(--text);
  border-radius: 10px;
  padding: 4px 12px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow);
  transition: .15s;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
}

.btn-fav-viewer:hover {
  background: var(--yellow-light);
  color: #000;
}

.btn-fav-viewer.active {
  background: #fef08a;
  color: #854d0e;
  border-color: var(--ink);
}

body.dark-mode .btn-fav-viewer.active {
  background: #78350f;
  color: #fef08a;
}

/* ============================================================
   CARTA LEGENDARIA (PROGRAMA ANUAL)
   ============================================================ */
.card-legendary {
  border: 3.5px solid #b45309 !important;
  border-top: 7px solid #f59e0b !important;
  background: linear-gradient(150deg, #fffdf5 0%, #fef3c7 45%, #fde68a 100%) !important;
  box-shadow: 6px 6px 0 #78350f, 0 0 18px rgba(245, 158, 11, 0.4) !important;
  position: relative;
  overflow: visible;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.dark-mode .card-legendary {
  background: linear-gradient(150deg, #18150c 0%, #261f0d 50%, #3a2c09 100%) !important;
  border: 3.5px solid #facc15 !important;
  border-top: 7px solid #fbbf24 !important;
  box-shadow: 6px 6px 0 #000, 0 0 20px rgba(250, 204, 21, 0.4) !important;
}

.card-legendary:hover {
  transform: translateY(-9px) scale(1.02) rotate(-0.8deg) !important;
  box-shadow: 9px 14px 0 #78350f, 0 0 30px rgba(245, 158, 11, 0.65) !important;
}

body.dark-mode .card-legendary:hover {
  box-shadow: 9px 14px 0 #000, 0 0 30px rgba(250, 204, 21, 0.65) !important;
}

/* Corona dorada legendaria en la esquina izquierda */
.legendary-card-crown {
  position: absolute;
  top: -20px;
  left: 14px;
  width: 42px;
  height: 36px;
  z-index: 6;
  filter: drop-shadow(2.5px 2.5px 0 rgba(0,0,0,0.45));
  transform: rotate(-12deg);
  animation: crownPulse 3s ease-in-out infinite;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-legendary:hover .legendary-card-crown {
  transform: rotate(-22deg) scale(1.25) translateY(-5px);
}

@keyframes crownPulse {
  0%, 100% { transform: rotate(-12deg) scale(1); }
  50% { transform: rotate(-8deg) scale(1.14); }
}

/* Efecto Holográfico Foil Shimmer que cruza la tarjeta */
.card-shimmer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.5) 45%,
    rgba(254, 240, 138, 0.7) 50%,
    rgba(255, 255, 255, 0.5) 55%,
    transparent 65%,
    transparent 100%
  );
  background-size: 250% 250%;
  animation: holoShimmer 4s ease-in-out infinite;
}

@keyframes holoShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Badge Legendario */
.badge.badge-legendary {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  color: #451a03 !important;
  border: 2px solid #78350f !important;
  box-shadow: 2px 2px 0 #78350f !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  animation: badgeGlow 2.5s ease-in-out infinite alternate;
}

body.dark-mode .badge.badge-legendary {
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important;
  color: #1c1301 !important;
  border: 2px solid #ca8a04 !important;
  box-shadow: 2px 2px 0 #000 !important;
}

@keyframes badgeGlow {
  0% { filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.4)); }
  100% { filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.85)); }
}

/* Botón dorado legendario */
.btn-open.btn-open-legendary {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #fff !important;
  border: 2px solid #78350f !important;
  box-shadow: 3px 3px 0 #78350f !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

.btn-open.btn-open-legendary:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  color: #000 !important;
  text-shadow: none !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 #78350f, 0 0 12px rgba(245, 158, 11, 0.6) !important;
}

.card-legendary h3 {
  color: #78350f !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

body.dark-mode .card-legendary h3 {
  color: #fef08a !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.card-legendary .thumb,
.welcome-card.rainbow-floating-card.card-legendary .pack-card-thumb-wrap,
.packs-grid .welcome-card.rainbow-floating-card.card-legendary .pack-card-thumb-wrap,
.card-legendary .pack-card-thumb-wrap {
  border-bottom: 2.5px solid #b45309 !important;
}

body.dark-mode .card-legendary .thumb,
body.dark-mode .welcome-card.rainbow-floating-card.card-legendary .pack-card-thumb-wrap,
body.dark-mode .packs-grid .welcome-card.rainbow-floating-card.card-legendary .pack-card-thumb-wrap,
body.dark-mode .card-legendary .pack-card-thumb-wrap {
  border-bottom: 2.5px solid #facc15 !important;
}

.btn-wa-card:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow);
}

/* ============================================================
   TARJETA ÉPICA DE HISTORIAS DE JESÚS / JESUS
   Predominio de rojo, destellos constantes, flotación y sombra
   ============================================================ */
.card.card-jesus-epic {
  position: relative !important;
  border: 3.5px solid #991b1b !important;
  border-top: 8px solid #dc2626 !important;
  background: linear-gradient(155deg, #ffffff 0%, #fff1f2 40%, #ffe4e6 85%, #fecdd3 100%) !important;
  box-shadow: 0 10px 25px rgba(220, 38, 38, 0.28), 5px 5px 0 #7f1d1d !important;
  border-radius: 20px !important;
  animation: jesusCardLevitate 3.4s ease-in-out infinite !important;
  overflow: visible !important;
  z-index: 2;
  margin-top: 10px;
  margin-bottom: 26px;
}

body.dark-mode .card.card-jesus-epic {
  border: 3.5px solid #f43f5e !important;
  border-top: 8px solid #ff0055 !important;
  background: linear-gradient(155deg, #1c080c 0%, #2d0912 50%, #440918 100%) !important;
  box-shadow: 0 0 26px rgba(244, 63, 94, 0.45), 5px 5px 0 #4c0519 !important;
}

/* Levitación / Flotación suave constante */
@keyframes jesusCardLevitate {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-11px);
  }
}

/* Sombra en el suelo debajo de la tarjeta que responde ópticamente a la flotación */
.card.card-jesus-epic::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 8%;
  right: 8%;
  height: 18px;
  background: radial-gradient(ellipse at center, rgba(185, 28, 28, 0.65) 0%, rgba(127, 29, 29, 0.35) 45%, transparent 75%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  animation: jesusShadowFloat 3.4s ease-in-out infinite !important;
  filter: blur(2.5px);
}

body.dark-mode .card.card-jesus-epic::after {
  background: radial-gradient(ellipse at center, rgba(244, 63, 94, 0.6) 0%, rgba(159, 18, 57, 0.28) 45%, transparent 75%);
}

@keyframes jesusShadowFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translateY(11px) scale(0.62);
    opacity: 0.3;
    filter: blur(4.5px);
  }
}

/* Efecto hover interactivo */
.card.card-jesus-epic:hover {
  transform: translateY(-16px) scale(1.025) !important;
  box-shadow: 0 22px 38px rgba(220, 38, 38, 0.45), 7px 7px 0 #7f1d1d !important;
}

body.dark-mode .card.card-jesus-epic:hover {
  box-shadow: 0 0 38px rgba(244, 63, 94, 0.7), 7px 7px 0 #4c0519 !important;
}

.card.card-jesus-epic:hover::after {
  transform: translateY(16px) scale(0.52) !important;
  opacity: 0.2 !important;
  filter: blur(5px) !important;
}

.card.card-jesus-epic h3 {
  color: #991b1b !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

body.dark-mode .card.card-jesus-epic h3 {
  color: #ffe4e6 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.card.card-jesus-epic .thumb {
  border-bottom: 2.5px solid #991b1b !important;
}

body.dark-mode .card.card-jesus-epic .thumb {
  border-bottom: 2.5px solid #f43f5e !important;
}

/* Emblema divino de Jesús en la esquina */
.jesus-card-emblem {
  position: absolute;
  top: -18px;
  left: 14px;
  width: 38px;
  height: 38px;
  z-index: 6;
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  border: 2.5px solid #ffe4e6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.8), 2.5px 2.5px 0 #7f1d1d;
  animation: emblemPulse 3s ease-in-out infinite;
}

.jesus-card-emblem svg {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

@keyframes emblemPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.14) rotate(8deg); }
}

/* Badge Épico de Jesús */
.badge-jesus-epic {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
  color: #ffffff !important;
  border: 2px solid #7f1d1d !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  font-size: 11px !important;
  padding: 4px 9px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  box-shadow: 2px 2px 0 rgba(127, 29, 29, 0.4) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  animation: badgeJesusGlow 2.5s ease-in-out infinite alternate !important;
}

body.dark-mode .badge-jesus-epic {
  background: linear-gradient(135deg, #e11d48 0%, #9f1239 100%) !important;
  border-color: #ff0055 !important;
}

@keyframes badgeJesusGlow {
  0% { filter: drop-shadow(0 0 2px rgba(220, 38, 38, 0.4)); }
  100% { filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.85)); }
}

/* Botón de acción épico rojo */
.card-jesus-epic .btn-open,
.card-jesus-epic .card-actions .btn-open,
.card-jesus-epic .card-actions.card-actions-story .btn-open {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%) !important;
  color: #ffffff !important;
  border: 2.5px solid #7f1d1d !important;
  box-shadow: 3px 3px 0 #450a0a !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
  transition: .15s !important;
}

.card-jesus-epic .btn-open:hover,
.card-jesus-epic .card-actions .btn-open:hover,
.card-jesus-epic .card-actions.card-actions-story .btn-open:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  transform: translate(-1.5px, -1.5px) !important;
  box-shadow: 4.5px 4.5px 0 #450a0a !important;
}

/* Shimmer holográfico carmesí / dorado sobre la imagen */
.jesus-card-shimmer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  border-radius: 17px 17px 0 0;
}

.jesus-card-shimmer::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -120%;
  width: 60%;
  height: 220%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 215, 0, 0.4) 50%,
    rgba(254, 205, 211, 0.3) 75%,
    transparent 100%
  );
  transform: rotate(26deg);
  animation: jesusShimmerSweep 4.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes jesusShimmerSweep {
  0% {
    left: -120%;
  }
  30%, 100% {
    left: 220%;
  }
}

/* ============================================================
   DESTELLOS CONSTANTES ALREDEDOR DE LA TARJETA
   ============================================================ */
.jesus-sparkles-field {
  position: absolute;
  inset: -12px;
  pointer-events: none;
  z-index: 8;
  overflow: visible;
}

.jesus-sparkle {
  position: absolute;
  display: inline-block;
  font-style: normal;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  animation: sparkleFlash 2.4s ease-in-out infinite;
}

.jesus-sparkle.sp1 {
  top: -10px;
  right: 18px;
  font-size: 20px;
  color: #ffd700;
  animation-delay: 0s;
  animation-duration: 2.1s;
}

.jesus-sparkle.sp2 {
  top: 36%;
  left: -14px;
  font-size: 17px;
  color: #ff0055;
  animation-delay: 0.7s;
  animation-duration: 2.5s;
}

.jesus-sparkle.sp3 {
  bottom: 24px;
  right: -12px;
  font-size: 21px;
  color: #fff1f2;
  animation-delay: 1.3s;
  animation-duration: 2.3s;
}

.jesus-sparkle.sp4 {
  bottom: -6px;
  left: 32px;
  font-size: 18px;
  color: #ffd700;
  animation-delay: 1.8s;
  animation-duration: 2.8s;
}

.jesus-sparkle.sp5 {
  top: 14px;
  left: -10px;
  font-size: 16px;
  color: #ffe4e6;
  animation-delay: 0.3s;
  animation-duration: 2.6s;
}

.jesus-sparkle.sp6 {
  top: 54%;
  right: -14px;
  font-size: 19px;
  color: #ef4444;
  animation-delay: 1.0s;
  animation-duration: 2.2s;
}

@keyframes sparkleFlash {
  0%, 100% {
    opacity: 0;
    transform: scale(0.2) rotate(0deg);
  }
  25%, 75% {
    opacity: 1;
    transform: scale(1.4) rotate(75deg);
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.95)) drop-shadow(0 0 12px rgba(239, 68, 68, 0.85));
  }
  50% {
    opacity: 0.95;
    transform: scale(1.1) rotate(150deg);
  }
}

/* ============================================================
   BARRA RÁPIDA DE COLECCIONES DE HISTORIAS BÍBLICAS
   ============================================================ */
.stories-quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 20px;
  align-items: center;
}

.btn-story-pill {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border: 2.5px solid var(--ink);
  border-radius: 50px;
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 2.5px 2.5px 0 var(--shadow);
  cursor: pointer;
  transition: .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-story-pill:hover {
  transform: translate(-1.5px, -1.5px);
  box-shadow: 4px 4px 0 var(--shadow);
}

.btn-story-pill:active {
  transform: translate(1px, 1px);
  box-shadow: 1.5px 1.5px 0 var(--shadow);
}

.btn-story-pill.active {
  background: var(--ink);
  color: var(--bg);
}

.btn-story-pill-jesus {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  border: 2.5px solid #7f1d1d !important;
  box-shadow: 3px 3px 0 #450a0a !important;
  font-weight: 800 !important;
}

.btn-story-pill-jesus .jesus-pill-badge {
  background: #fef08a;
  color: #7f1d1d;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 20px;
  border: 1.5px solid #7f1d1d;
}

.btn-story-pill-jesus:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  transform: translate(-2px, -2px) scale(1.03) !important;
  box-shadow: 5px 5px 0 #450a0a !important;
}

.btn-story-pill-jesus.active {
  background: #7f1d1d !important;
  border-color: #fecdd3 !important;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.5), 1.5px 1.5px 0 #450a0a !important;
}

body.dark-mode .btn-story-pill-jesus {
  background: linear-gradient(135deg, #e11d48 0%, #9f1239 100%) !important;
  border-color: #ff0055 !important;
}

/* Botón toggle Solo Jesús en la barra de filtros */
.btn-jesus-quick-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  border: 2.5px solid #991b1b;
  border-radius: 12px;
  background: #fff1f2;
  color: #991b1b;
  box-shadow: 2.5px 2.5px 0 #7f1d1d;
  cursor: pointer;
  transition: .15s;
  align-self: flex-end;
  margin-bottom: 2px;
  white-space: nowrap;
}

.btn-jesus-quick-filter:hover {
  background: #ffe4e6;
  transform: translate(-1.5px, -1.5px);
  box-shadow: 4px 4px 0 #7f1d1d;
}

.btn-jesus-quick-filter.active {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  color: #ffffff;
  border-color: #7f1d1d;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.4), 1.5px 1.5px 0 #450a0a;
}

body.dark-mode .btn-jesus-quick-filter {
  background: #2d0912;
  color: #fda4af;
  border-color: #f43f5e;
  box-shadow: 2.5px 2.5px 0 #4c0519;
}

body.dark-mode .btn-jesus-quick-filter.active {
  background: linear-gradient(135deg, #e11d48 0%, #9f1239 100%);
  color: #ffffff;
}

/* PAGINACIÓN / CARGAR MÁS */
.results-count {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 16px;
  padding: 0 2px;
}

.load-more-wrap {
  text-align: center;
  padding: 30px 0 10px;
}

.btn-load-more {
  background: var(--yellow);
  color: #000000;
  border: 3px solid var(--ink);
  border-radius: 30px;
  padding: 14px 34px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--shadow);
  transition: .2s;
}

.btn-load-more:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--shadow);
  background: #facc15;
}

.btn-load-more:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow);
}

/* VISOR DE LECCIÓN */
.back {
  border: 2px solid var(--ink);
  background: var(--card-bg);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 3px 3px 0 var(--shadow);
  transition: .15s;
}

.back:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--shadow);
}

.lesson-head { padding: 18px 0 16px; }
.lesson-head h2 {
  margin: 12px 0 8px;
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
}
.lesson-head .meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Structured Lesson Head */
.lesson-head-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.lesson-head-title-row .btn-floating-back {
  flex-shrink: 0;
}
.lesson-head-title-row h2,
.lesson-head-title {
  margin: 0 !important;
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: var(--text) !important;
}
.lesson-head-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.lesson-head-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}
.lesson-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.btn-schedule-custom {
  padding: 8px 18px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* Custom Printable Preview Card */
.custom-printable-card {
  background: var(--card-bg, #ffffff);
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 24px;
  border-radius: 16px;
  border: 2.5px solid var(--border, #111);
  box-shadow: 4px 4px 0 var(--shadow, #111);
  box-sizing: border-box;
}
.custom-printable-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2.5px dashed var(--border, #cbd5e1);
  padding-bottom: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.custom-printable-titles {
  flex: 1;
  min-width: 200px;
}
.custom-printable-title {
  margin: 0 !important;
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--text, #111) !important;
}
.custom-printable-subtitle {
  margin: 4px 0 0 !important;
  font-size: 13px !important;
  color: var(--text-muted, #666) !important;
  font-weight: 600 !important;
}
.btn-print-printable {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111) !important;
  border: 2px solid var(--border, #111) !important;
  cursor: pointer;
}
.custom-printable-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  justify-content: center;
  padding: 4px 0 10px;
}

.lesson-layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.resource-panel {
  background: var(--card-bg);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  position: sticky;
  top: 85px;
  box-shadow: 4px 4px 0 var(--shadow);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.resource-panel h3,
.resource-panel-header-btn {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  padding: 14px 16px;
  border-bottom: 2px solid var(--ink);
  background: var(--yellow);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
  text-align: left;
  user-select: none;
  transition: background 0.15s ease;
}

.resource-panel-header-btn:hover {
  background: #fde047;
}

.resource-panel-title-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.resource-panel-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid var(--ink);
  border-radius: 50%;
  transition: transform 0.25s ease, background 0.15s ease;
  flex-shrink: 0;
}

.resource-panel-header-btn:hover .resource-panel-indicator {
  background: #fff;
  transform: scale(1.06);
}

.resource-panel-chevron {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.resource-panel.is-collapsed .resource-panel-chevron {
  transform: rotate(-180deg);
}

.resource-panel.is-collapsed .resource-panel-header-btn {
  border-bottom: none;
}

.resource-panel .resource-list {
  padding: 10px;
  max-height: 700px;
  overflow-y: auto;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, padding 0.3s ease;
}

.resource-panel.is-collapsed .resource-list {
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
}

body.dark-mode .resource-panel h3,
body.dark-mode .resource-panel-header-btn {
  background: #ca8a04;
  color: #fff;
}

body.dark-mode .resource-panel-header-btn:hover {
  background: #d97706;
}

body.dark-mode .resource-panel-indicator {
  background: rgba(0, 0, 0, 0.3);
  border-color: #fff;
  color: #fff;
}

.resource-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 2px solid transparent;
  background: transparent;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: .1s;
  margin-bottom: 6px;
}

.resource-item:hover {
  background: var(--bg);
  border-color: var(--ink);
}

.resource-item.active {
  background: var(--blue-light);
  border-color: var(--ink);
  font-weight: 800;
  box-shadow: 2px 2px 0 var(--shadow);
}

body.dark-mode .resource-item.active {
  background: #1e3a8a;
  color: #fff;
}

.resource-name {
  display: block;
  white-space: normal;
  line-height: 1.35;
  font-weight: 700;
}

.resource-type {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.viewer {
  background: var(--card-bg);
  border: 3px solid var(--ink);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 5px 5px 0 var(--shadow);
}

.viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 2.5px solid var(--ink);
  background: var(--card-bg);
}

.viewer-title {
  font-size: 16px;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  color: var(--text);
}

.viewer-badge {
  display: inline-block;
  font-size: 12px;
  color: var(--green-dark);
  font-weight: 800;
  margin-top: 3px;
}
body.dark-mode .viewer-badge { color: #4ade80; }

.viewer-actions {
  display: flex;
  gap: 8px;
  padding: 0;
  align-items: center;
  flex-wrap: wrap;
}

.btn-action {
  display: inline-flex;
  align-items: center;
  background: var(--card-bg);
  color: var(--text);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow);
  transition: .15s;
  text-decoration: none;
}

.btn-action:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow);
}

.btn-secondary { 
  background: var(--surface); 
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-secondary:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}
.btn-secondary:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
}
body.dark-mode .btn-secondary { background: var(--bg); color: var(--ink); }

.btn-wa {
  background: var(--wa-green);
  color: #fff;
}

.btn-presentation {
  background: var(--purple);
  color: #000;
}
body.dark-mode .btn-presentation {
  background: #7c3aed;
  color: #fff;
}

.viewer-body { position: relative; }
.viewer iframe {
  width: 100%;
  height: 760px;
  border: 0;
  display: block;
}

.viewer-img-wrap {
  padding: 24px;
  display: grid;
  place-items: center;
  background: #18181b;
  min-height: 420px;
}

.viewer-img {
  display: block;
  max-width: 100%;
  max-height: 760px;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.viewer .unsupported {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
}

/* FULLSCREEN MODO PRESENTACIÓN */
.viewer.fullscreen-mode, .viewer:fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: #090d16 !important;
  display: flex !important;
  flex-direction: column !important;
}

.viewer.fullscreen-mode .viewer-header, .viewer:fullscreen .viewer-header {
  background: #151c2e !important;
  border-bottom: 2px solid #334155 !important;
}

.viewer.fullscreen-mode .viewer-title, .viewer:fullscreen .viewer-title {
  color: #fff !important;
}

.viewer.fullscreen-mode .viewer-body, .viewer:fullscreen .viewer-body {
  flex: 1;
  height: calc(100vh - 65px);
  position: relative;
}

.viewer.fullscreen-mode iframe, .viewer:fullscreen iframe {
  height: 100% !important;
}

.btn-exit-fullscreen {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 100;
  background: #ef4444;
  color: #fff;
  border: 2px solid #000;
  border-radius: 20px;
  padding: 8px 18px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
}

.viewer.fullscreen-mode .btn-exit-fullscreen, .viewer:fullscreen .btn-exit-fullscreen {
  display: block;
}

.empty {
  background: var(--card-bg);
  border: 2.5px dashed var(--ink);
  border-radius: 18px;
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 16px;
  font-weight: 600;
}

.empty code {
  background: var(--yellow-light);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 14px;
  border: 1px solid var(--ink);
  color: #000;
}

/* ============================================================
   SECCIÓN 5: MI CLASE DE LA SEMANA (FAVORITOS)
   ============================================================ */
.banner-favorites {
  background: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
  color: #000;
}

.banner-favorites p {
  color: #713f12 !important;
}

body.dark-mode .banner-favorites {
  background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
  color: #fef08a;
}

body.dark-mode .banner-favorites p {
  color: #fef3c7 !important;
}

.favorites-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
  padding: 12px 18px;
  background: var(--card-bg);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--shadow);
}

.favorites-count-label {
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.fav-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-sync-wa {
  background: var(--wa-green);
  color: #ffffff;
  border: 2px solid var(--ink);
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow);
  display: inline-flex;
  align-items: center;
  transition: .15s;
}

.btn-sync-wa:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow);
  background: #16a34a;
}

.btn-sync-wa:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow);
}

.btn-sync-copy {
  background: var(--yellow-light);
  color: #000000;
  border: 2px solid var(--ink);
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow);
  display: inline-flex;
  align-items: center;
  transition: .15s;
}

body.dark-mode .btn-sync-copy {
  background: #78350f;
  color: #fef08a;
  border-color: #facc15;
}

.btn-sync-copy:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow);
  background: var(--yellow);
}

.btn-sync-copy:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow);
}

.btn-clear-favs {
  background: var(--bg);
  border: 2px solid var(--ink);
  color: #ef4444;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow);
  display: inline-flex;
  align-items: center;
  transition: .15s;
}

.btn-clear-favs:hover {
  background: #fee2e2;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow);
}

body.dark-mode .btn-clear-favs:hover {
  background: #450a0a;
}

/* Estado Vacío de Favoritos */
.empty-favorites {
  border: 3px dashed var(--ink);
  border-radius: 24px;
  padding: 50px 24px;
  text-align: center;
  background: var(--card-bg);
  box-shadow: 5px 5px 0 var(--shadow);
  max-width: 580px;
  margin: 30px auto;
  animation: cardPopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.empty-fav-doodle {
  width: 72px;
  height: 72px;
  background: var(--yellow-light);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 3px 3px 0 var(--ink);
}

body.dark-mode .empty-fav-doodle {
  background: #1e293b;
  border-color: #fde047;
  box-shadow: 3px 3px 0 #000;
}

.empty-favorites h3 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--text);
}

.empty-favorites p {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 440px;
  margin: 0 auto 24px;
  line-height: 1.55;
  font-weight: 600;
}

.btn-primary-fun {
  background: var(--yellow);
  color: #000;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  padding: 12px 24px;
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-primary-fun:hover {
  transform: translate(-2px, -2px) scale(1.02);
  box-shadow: 6px 6px 0 var(--ink);
}

.btn-primary-fun:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* ============================================================
   TOAST NOTIFICACIONES FLOTANTES
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: var(--card-bg);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: 4px 4px 0 var(--shadow);
  color: var(--text);
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transition: opacity 0.3s ease, transform 0.3s ease;
  max-width: 360px;
}

.toast.hiding {
  opacity: 0;
  transform: translateY(12px) scale(0.9);
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================================
   SECCIÓN 6: PLANIFICADOR DE CLASES (CALENDARIO)
   ============================================================ */
.banner-planner {
  background: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 100%);
  color: #1e1b4b;
}

.banner-planner p {
  color: #312e81 !important;
}

body.dark-mode .banner-planner {
  background: linear-gradient(135deg, #312e81 0%, #1e1b4b 100%);
  color: #e0e7ff;
}

body.dark-mode .banner-planner p {
  color: #c7d2fe !important;
}

/* Barra de control del planificador */
.planner-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  padding: 14px 18px;
  background: var(--card-bg);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--shadow);
}

.planner-month-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-planner-nav {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  box-shadow: 1.5px 1.5px 0 var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
}

.btn-planner-nav:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2.5px 2.5px 0 var(--shadow);
  background: var(--yellow-light);
}

.planner-month-display {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  padding: 0 8px;
  text-transform: capitalize;
  min-width: 130px;
  text-align: center;
}

.btn-planner-today {
  background: var(--yellow);
  color: #000;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 5px 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 1.5px 1.5px 0 var(--shadow);
  transition: .15s;
}

.btn-planner-today:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2.5px 2.5px 0 var(--shadow);
}

.planner-day-setting {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.planner-select-day {
  margin: 0;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 8px;
  font-weight: 700;
  width: auto;
}

.planner-view-toggle {
  display: inline-flex;
  gap: 4px;
  background: var(--bg);
  padding: 4px;
  border-radius: 12px;
  border: 2px solid var(--ink);
}

.btn-view-pill {
  padding: 5px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: .15s;
}

.btn-view-pill.active {
  background: var(--ink);
  color: #ffffff;
}

body.dark-mode .btn-view-pill.active {
  background: #3b82f6;
  color: #ffffff;
}

.planner-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-planner-action {
  border: 2px solid var(--ink);
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow);
  display: inline-flex;
  align-items: center;
  transition: .15s;
}

.btn-planner-action:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow);
}

.btn-planner-action:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow);
}

.btn-print {
  background: var(--bg);
  color: var(--text);
}

.btn-primary-add {
  background: var(--blue);
  color: #ffffff;
}

body.dark-mode .btn-primary-add {
  background: #2563eb;
}

/* Área de cronograma del planificador */
.planner-cards-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.planner-card {
  background: var(--card-bg);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--shadow);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.planner-card:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0 var(--shadow);
}

.planner-card-header {
  padding: 12px 18px;
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.planner-date-pill {
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.planner-card-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.planner-lesson-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.planner-lesson-title {
  font-size: 17px;
  font-weight: 800;
  margin: 0;
  color: var(--text);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.planner-people-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 700;
}

.planner-tag-teacher {
  background: #dbeafe;
  color: #1e3a8a;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body.dark-mode .planner-tag-teacher {
  background: #1e3a8a;
  color: #dbeafe;
}

.planner-tag-helper {
  background: #f3e8ff;
  color: #581c87;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body.dark-mode .planner-tag-helper {
  background: #581c87;
  color: #f3e8ff;
}

.planner-notes-box {
  background: var(--yellow-light);
  border: 1.5px dashed var(--ink);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #713f12;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

body.dark-mode .planner-notes-box {
  background: #451a03;
  color: #fef08a;
  border-color: #fde047;
}

.planner-card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.btn-plan-sm {
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  padding: 4px 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 1.5px 1.5px 0 var(--shadow);
  transition: .15s;
  background: var(--card-bg);
  color: var(--text);
}

.btn-plan-sm:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--shadow);
  background: var(--card-bg);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 2px 2px 0 var(--shadow);
}

body.dark-mode .planner-person-card {
  background: #1e293b;
  border-color: #334155;
}

.planner-person-card .person-role {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
}

.planner-person-card .person-name {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-top: 2px;
}

/* Notas */
.planner-details-notes {
  background: var(--yellow-light);
  border: 1.5px dashed var(--ink);
  border-radius: 12px;
  padding: 10px 14px;
}

.planner-details-notes .notes-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #713f12;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.planner-details-notes p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #713f12;
  line-height: 1.4;
}

body.dark-mode .planner-details-notes {
  background: #451a03;
  border-color: #fde047;
}

body.dark-mode .planner-details-notes .notes-label,
body.dark-mode .planner-details-notes p {
  color: #fef08a;
}

/* Barra de acciones de detalles */
.planner-details-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
}

.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.form-group.flex-1 {
  flex: 1;
  min-width: 200px;
}

.form-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-text-link {
  background: none;
  border: none;
  color: #ca8a04;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.btn-text-link:hover {
  color: #eab308;
}

.planner-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}

/* ============================================================
   ESTILOS DE IMPRESIÓN (@media print)
   ============================================================ */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
    background-image: none !important;
  }
  header, .main-nav, .welcome-hero, .welcome-grid, .welcome-carousel-wrapper, .carousel-pagination, .planner-toolbar, .toast-container, .btn-plan-sm, .card-actions {
    display: none !important;
  }
  #sectionPlanner {
    display: block !important;
  }
  .banner-planner {
    background: none !important;
    color: #000 !important;
    border: 2px solid #000 !important;
    box-shadow: none !important;
    padding: 12px !important;
    margin-bottom: 16px !important;
  }
  .banner-planner p {
    color: #333 !important;
  }
  .banner-corner-doodle {
    display: none !important;
  }
  .planner-card {
    border: 1.5px solid #000 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    margin-bottom: 12px !important;
  }
  .planner-card-header {
    background: #f4f4f5 !important;
    border-bottom: 1px solid #000 !important;
  }
  .planner-tag-teacher, .planner-tag-helper, .planner-notes-box {
    background: none !important;
    border: 1px solid #000 !important;
    color: #000 !important;
  }
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .filters { grid-template-columns: 1fr; }
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }
  .audience-cards { grid-template-columns: 1fr; }
  .lesson-layout { grid-template-columns: 1fr; }
  .resource-panel { position: static; }
  .viewer iframe { height: 550px; }
  .viewer-header { flex-direction: column; align-items: flex-start; }
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.planner-person-card {
  background: var(--card-bg);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 2px 2px 0 var(--shadow);
}

body.dark-mode .planner-person-card {
  background: #1e293b;
  border-color: #334155;
}

.planner-person-card .person-role {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
}

.planner-person-card .person-name {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-top: 2px;
}

/* Notas */
.planner-details-notes {
  background: var(--yellow-light);
  border: 1.5px dashed var(--ink);
  border-radius: 12px;
  padding: 10px 14px;
}

.planner-details-notes .notes-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #713f12;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.planner-details-notes p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #713f12;
  line-height: 1.4;
}

body.dark-mode .planner-details-notes {
  background: #451a03;
  border-color: #fde047;
}

body.dark-mode .planner-details-notes .notes-label,
body.dark-mode .planner-details-notes p {
  color: #fef08a;
}

/* Barra de acciones de detalles */
.planner-details-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
}

.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.form-group.flex-1 {
  flex: 1;
  min-width: 200px;
}

.form-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-text-link {
  background: none;
  border: none;
  color: #ca8a04;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.btn-text-link:hover {
  color: #eab308;
}

.planner-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}

/* ============================================================
   ESTILOS DE IMPRESIÓN (@media print)
   ============================================================ */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
    background-image: none !important;
  }
  header, .main-nav, .welcome-hero, .welcome-grid, .welcome-carousel-wrapper, .carousel-pagination, .planner-toolbar, .toast-container, .btn-plan-sm, .card-actions {
    display: none !important;
  }
  #sectionPlanner {
    display: block !important;
  }
  .banner-planner {
    background: none !important;
    color: #000 !important;
    border: 2px solid #000 !important;
    box-shadow: none !important;
    padding: 12px !important;
    margin-bottom: 16px !important;
  }
  .banner-planner p {
    color: #333 !important;
  }
  .banner-corner-doodle {
    display: none !important;
  }
  .planner-card {
    border: 1.5px solid #000 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    margin-bottom: 12px !important;
  }
  .planner-card-header {
    background: #f4f4f5 !important;
    border-bottom: 1px solid #000 !important;
  }
  .planner-tag-teacher, .planner-tag-helper, .planner-notes-box {
    background: none !important;
    border: 1px solid #000 !important;
    color: #000 !important;
  }
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .filters { grid-template-columns: 1fr; }
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }
  .audience-cards { grid-template-columns: 1fr; }
  .lesson-layout { grid-template-columns: 1fr; }
  .resource-panel { position: static; }
  .viewer iframe { height: 550px; }
  .viewer-header { flex-direction: column; align-items: flex-start; }

  .hero-plane { display: none; }
  .hero-arrow { display: none; }
  .hero-daisy { width: 48px; height: 48px; top: -20px; right: 14px; }
  .banner-corner-doodle { width: 38px; height: 38px; top: -14px; right: 16px; }
  .card-corner-sticker { width: 32px; height: 32px; }
}

@media (max-width: 640px) {
  .header-wrap {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 12px 8px !important;
  }
  .header-brand {
    grid-column: 1 / 2;
    text-align: left;
  }
  .header-actions {
    display: contents !important;
  }
  .btn-theme-toggle {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 2.5px 2.5px 0 var(--shadow) !important;
    font-size: 18px !important;
    justify-self: end;
  }
  .header-nav-pills {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    width: 100% !important;
    display: flex !important;
    justify-content: space-around !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px !important;
    gap: 2px !important;
    border-radius: 18px !important;
  }
  .btn-header-nav-pill {
    flex: 1 1 auto !important;
    padding: 7px 6px !important;
    font-size: 12px !important;
    justify-content: center !important;
    gap: 4px !important;
  }
}

@media (max-width: 500px) {
  .grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
  }
  .welcome-grid { grid-template-columns: 1fr; }
  .thumb { height: 180px; }
  .card-actions { flex-direction: column; }
  .toast-container {
    left: 16px;
    right: 16px;
    bottom: 16px;
    align-items: center;
  }
  .toast {
    max-width: 100%;
    width: 100%;
    justify-content: center;
  }
  .welcome-hero { padding: 24px 16px 20px; }
  .welcome-hero h2, .legendary-main-title { font-size: 22px; }
  .legendary-crown-img { width: 42px; height: 34px; }
  .brand-crown-icon { width: 22px; height: 18px; }
  .btn-header-home,
  .btn-header-planner,
  .btn-header-fav,
  .btn-theme-toggle {
    padding: 6px 8px;
    font-size: 11.5px;
    box-shadow: 2px 2px 0 var(--shadow);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   BOTÓN CREAR LECCIÓN PERSONALIZADA (ESTILO ARCOÍRIS)
   ============================================================ */
.btn-create-custom-lesson {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(115deg, #ff6b81 0%, #ffa502 20%, #fed330 38%, #26de81 56%, #2bcbba 72%, #45aaf2 86%, #a55eea 100%);
  background-size: 220% 220%;
  animation: rainbowSmooth 5s ease infinite;
  color: #111111;
  border: 2.5px solid #111111;
  border-radius: 50px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 3px 3px 0 #111111;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  user-select: none;
}

@keyframes rainbowSmooth {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.btn-create-custom-lesson:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #111111;
  filter: brightness(1.06) saturate(1.15);
}

.btn-create-custom-lesson:active {
  transform: translate(1.5px, 1.5px);
  box-shadow: 1.5px 1.5px 0 #111111;
}

body.dark-mode .btn-create-custom-lesson {
  color: #111111;
  border-color: #111111;
  box-shadow: 3px 3px 0 #000000;
}

body.dark-mode .btn-create-custom-lesson:hover {
  box-shadow: 5px 5px 0 #000000;
}

/* ============================================================
   MODAL CREADOR DE LECCIÓN PERSONALIZADA - NEOBRUTALISTA VIBRANTE
   ============================================================ */
.custom-lesson-modal-card {
  max-width: 780px !important;
  width: 95% !important;
  max-height: 90vh !important;
  background: var(--bg, #FAF8F5) !important;
  border: 3.5px solid var(--ink, #111111) !important;
  border-radius: 24px !important;
  box-shadow: 8px 8px 0 var(--shadow, #111111) !important;
  overflow-y: auto !important;
  padding: 0 !important;
  color: var(--text, #18181b) !important;
}

body.dark-mode .custom-lesson-modal-card {
  background: #0f172a !important;
  border-color: #f8fafc !important;
  box-shadow: 8px 8px 0 #000000 !important;
}

/* Header Neobrutalista */
.header-pearl-modal {
  background: #fef08a !important;
  border-bottom: 3.5px solid var(--ink, #111111) !important;
  padding: 20px 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-radius: 20px 20px 0 0 !important;
}

body.dark-mode .header-pearl-modal {
  background: #1e293b !important;
  border-bottom: 3.5px solid #f8fafc !important;
}

.planner-modal-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.badge-pearl-modal {
  background: #ffffff !important;
  color: #111111 !important;
  border: 2px solid #111111 !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-family: 'Fredoka', 'Rubik', sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  box-shadow: 2px 2px 0 #111111 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  transform: rotate(-1deg);
}

body.dark-mode .badge-pearl-modal {
  background: #334155 !important;
  color: #fef08a !important;
  border-color: #f8fafc !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

#customLessonModalTitle {
  font-family: 'Fredoka', 'Rubik', sans-serif !important;
  font-size: 25px !important;
  font-weight: 900 !important;
  color: #111111 !important;
  margin: 2px 0 0 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.3px !important;
}

body.dark-mode #customLessonModalTitle {
  color: #f8fafc !important;
}

/* Botón cerrar modal Neobrutalista */
.custom-lesson-modal-card .btn-modal-close,
.custom-lesson-modal-card .planner-modal-close {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  background: #fee2e2 !important;
  color: #111111 !important;
  border: 2.5px solid var(--ink, #111111) !important;
  border-radius: 12px !important;
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
  flex-shrink: 0 !important;
}

.custom-lesson-modal-card .btn-modal-close:hover,
.custom-lesson-modal-card .planner-modal-close:hover {
  transform: translate(-1.5px, -1.5px) !important;
  box-shadow: 4px 4px 0 var(--shadow, #111111) !important;
  background: #fca5a5 !important;
}

.custom-lesson-modal-card .btn-modal-close:active,
.custom-lesson-modal-card .planner-modal-close:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--shadow, #111111) !important;
}

body.dark-mode .custom-lesson-modal-card .btn-modal-close,
body.dark-mode .custom-lesson-modal-card .planner-modal-close {
  background: #450a0a !important;
  color: #fca5a5 !important;
  border-color: #f8fafc !important;
  box-shadow: 2.5px 2.5px 0 #000000 !important;
}

/* ==========================================
   SECCIONES / PASOS
   ========================================== */
.custom-lesson-section {
  background: #ffffff !important;
  border: 2.5px solid var(--ink, #111111) !important;
  border-radius: 18px !important;
  padding: 20px 22px !important;
  margin-bottom: 20px !important;
  box-shadow: 4px 4px 0 var(--shadow, #111111) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

body.dark-mode .custom-lesson-section {
  background: #1e293b !important;
  border-color: #475569 !important;
  box-shadow: 4px 4px 0 #000000 !important;
}

.custom-lesson-sec-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px dashed #e2e8f0 !important;
}

body.dark-mode .custom-lesson-sec-header {
  border-bottom: 2px dashed #334155 !important;
}

.custom-lesson-sec-header .sec-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border: 2.5px solid #111111 !important;
  border-radius: 11px !important;
  font-family: 'Fredoka', 'Rubik', sans-serif !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  box-shadow: 2.5px 2.5px 0 #111111 !important;
  flex-shrink: 0 !important;
}

.sec-num-1 {
  background: #fde047 !important;
  color: #111111 !important;
}
.sec-num-2 {
  background: #7dd3fc !important;
  color: #111111 !important;
}
.sec-num-3 {
  background: #c084fc !important;
  color: #111111 !important;
}

body.dark-mode .sec-num {
  border-color: #f8fafc !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

.custom-lesson-sec-header h4 {
  margin: 0 !important;
  font-size: 18px !important;
  font-family: 'Fredoka', 'Rubik', sans-serif !important;
  font-weight: 800 !important;
  color: var(--text, #111111) !important;
  line-height: 1.2 !important;
}

.sec-subtitle {
  margin: 2px 0 0 0 !important;
  font-size: 12.5px !important;
  color: var(--text-muted, #64748b) !important;
  font-weight: 600 !important;
}

/* ==========================================
   FORMULARIO: LABELS, INPUTS, SELECTS, TEXTAREA
   ========================================== */
.custom-form-label,
.custom-lesson-form label {
  display: inline-block !important;
  font-family: 'Rubik', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: var(--text, #1e293b) !important;
  margin-bottom: 7px !important;
  letter-spacing: 0.1px !important;
}

.req-star {
  color: #ef4444 !important;
  font-weight: 900 !important;
  margin-left: 2px !important;
}

.opt-badge {
  font-size: 11px !important;
  color: var(--text-muted, #64748b) !important;
  font-weight: 600 !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 1px 6px !important;
  margin-left: 4px !important;
}

body.dark-mode .opt-badge {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #94a3b8 !important;
}

.custom-input-hint {
  color: var(--text-muted, #64748b) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
  display: block !important;
}

/* Inputs, Selects y Textareas Neobrutalistas */
.custom-lesson-form input[type="text"],
.custom-lesson-form select,
.custom-lesson-form textarea {
  width: 100% !important;
  background-color: #ffffff !important;
  color: #111111 !important;
  border: 2.5px solid var(--ink, #111111) !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  box-shadow: 3px 3px 0 var(--shadow, #111111) !important;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.custom-lesson-form input[type="text"]:focus,
.custom-lesson-form select:focus,
.custom-lesson-form textarea:focus {
  background-color: #fffdf0 !important;
  border-color: #111111 !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 4.5px 4.5px 0 var(--shadow, #111111) !important;
}

.custom-lesson-form input[type="text"]::placeholder,
.custom-lesson-form textarea::placeholder {
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

body.dark-mode .custom-lesson-form input[type="text"],
body.dark-mode .custom-lesson-form select,
body.dark-mode .custom-lesson-form textarea {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border-color: #94a3b8 !important;
  box-shadow: 3px 3px 0 #000000 !important;
}

body.dark-mode .custom-lesson-form input[type="text"]:focus,
body.dark-mode .custom-lesson-form select:focus,
body.dark-mode .custom-lesson-form textarea:focus {
  background-color: #1e293b !important;
  border-color: #facc15 !important;
  box-shadow: 4px 4px 0 #000000 !important;
}

.custom-lesson-form textarea {
  min-height: 95px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
}

.custom-fg-version {
  width: 200px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 600px) {
  .custom-verse-row {
    flex-direction: column !important;
  }
  .custom-fg-version {
    width: 100% !important;
  }
  .custom-verse-footer-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* ============================================================
   SELECTOR DE MODO: PANEL DESLIZANTE CON PÍLDORA (GLIDER)
   ============================================================ */
.ws-mode-toggle-dock {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  background: #f1f5f9 !important;
  border: 2.5px solid var(--ink, #111111) !important;
  border-radius: 16px !important;
  padding: 5px !important;
  box-shadow: 4px 4px 0 var(--shadow, #111111) !important;
  gap: 6px !important;
  user-select: none !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
}

.ws-mode-glider {
  position: absolute !important;
  top: 5px !important;
  left: 5px !important;
  width: calc(50% - 8px) !important;
  height: calc(100% - 10px) !important;
  background: #fde047 !important;
  border: 2px solid #111111 !important;
  border-radius: 12px !important;
  box-shadow: 2.5px 2.5px 0 #111111 !important;
  transition: transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.25s ease !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.ws-mode-toggle-dock[data-active-mode="auto"] .ws-mode-glider {
  transform: translateX(0) !important;
  background: #fde047 !important;
}

.ws-mode-toggle-dock[data-active-mode="manual"] .ws-mode-glider {
  transform: translateX(calc(100% + 6px)) !important;
  background: #38bdf8 !important;
}

.ws-mode-tab-btn {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  text-align: left !important;
  transition: color 0.2s ease, transform 0.15s ease !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: #64748b !important;
  width: 100% !important;
}

.ws-mode-tab-btn:hover {
  color: #0f172a !important;
}

.ws-mode-tab-btn.active {
  color: #111111 !important;
}

.ws-mode-tab-badge {
  font-family: 'Fredoka', 'Rubik', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #0f172a !important;
}

.ws-mode-tab-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

@media (max-width: 500px) {
  .ws-mode-tab-btn {
    padding: 8px 10px !important;
  }
  .ws-mode-tab-title {
    font-size: 12px !important;
  }
}

/* Modo oscuro */
body.dark-mode .ws-mode-toggle-dock {
  background: #0f172a !important;
  border-color: #f8fafc !important;
  box-shadow: 4px 4px 0 #000000 !important;
}

body.dark-mode .ws-mode-tab-btn {
  color: #94a3b8 !important;
}

body.dark-mode .ws-mode-tab-btn.active {
  color: #111111 !important;
}

body.dark-mode .ws-mode-glider {
  border-color: #111111 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

body.dark-mode .ws-mode-toggle-dock[data-active-mode="auto"] .ws-mode-glider {
  background: #facc15 !important;
}

body.dark-mode .ws-mode-toggle-dock[data-active-mode="manual"] .ws-mode-glider {
  background: #38bdf8 !important;
}
}

.radio-neo-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.radio-pill-badge {
  font-family: 'Fredoka', 'Rubik', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #111111 !important;
}

body.dark-mode .radio-pill-badge {
  color: #f8fafc !important;
}

.radio-pill-title {
  font-size: 12px !important;
  color: #475569 !important;
  font-weight: 600 !important;
}

body.dark-mode .radio-pill-title {
  color: #cbd5e1 !important;
}

/* ==========================================
   CHIPS DE PALABRAS (SOPA DE LETRAS)
   ========================================== */
.ws-chips-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.ws-chip {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border: 2px solid #111111 !important;
  border-radius: 10px !important;
  padding: 5px 12px !important;
  font-family: 'Rubik', 'Fredoka', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: 2px 2px 0 #111111 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: transform 0.15s ease !important;
}

.ws-chip:hover {
  transform: translateY(-2px) !important;
  background: #bae6fd !important;
}

body.dark-mode .ws-chip {
  background: #1e3a5f !important;
  color: #7dd3fc !important;
  border-color: #94a3b8 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

.ws-chip-remove {
  cursor: pointer !important;
  font-weight: 900 !important;
  color: #ef4444 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  margin-left: 2px !important;
  transition: transform 0.15s ease !important;
}

.ws-chip-remove:hover {
  transform: scale(1.3) !important;
}

/* ==========================================
   BADGE CARGANDO VERSÍCULO
   ========================================== */
.verse-loading-badge {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #1d4ed8 !important;
  background: #dbeafe !important;
  border: 2px solid #111111 !important;
  border-radius: 8px !important;
  padding: 3px 9px !important;
  box-shadow: 2px 2px 0 #111111 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  animation: fadeIn 0.2s ease-in !important;
}

body.dark-mode .verse-loading-badge {
  background: #1e3a8a !important;
  color: #93c5fd !important;
  border-color: #93c5fd !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

.verse-loading-badge.hidden {
  display: none !important;
}

.spin-icon {
  animation: spinLoader 1s linear infinite !important;
}

@keyframes spinLoader {
  100% {
    transform: rotate(360deg);
  }
}

/* ==========================================
   FOOTER DEL MODAL Y BOTONES DE ACCIÓN
   ========================================== */
.planner-modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 24px !important;
  padding-top: 18px !important;
  border-top: 2.5px dashed #cbd5e1 !important;
}

body.dark-mode .planner-modal-footer {
  border-top: 2.5px dashed #334155 !important;
}

.custom-lesson-modal-card .btn-secondary {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 2.5px solid var(--ink, #111111) !important;
  border-radius: 14px !important;
  padding: 12px 22px !important;
  font-family: 'Fredoka', 'Rubik', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  box-shadow: 3px 3px 0 var(--shadow, #111111) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.custom-lesson-modal-card .btn-secondary:hover {
  background: #f1f5f9 !important;
  transform: translate(-1.5px, -1.5px) !important;
  box-shadow: 4.5px 4.5px 0 var(--shadow, #111111) !important;
}

.custom-lesson-modal-card .btn-secondary:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--shadow, #111111) !important;
}

body.dark-mode .custom-lesson-modal-card .btn-secondary {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-color: #94a3b8 !important;
  box-shadow: 3px 3px 0 #000000 !important;
}

.btn-primary-pearl {
  background: #4ade80 !important;
  color: #111111 !important;
  border: 2.5px solid var(--ink, #111111) !important;
  border-radius: 14px !important;
  padding: 12px 28px !important;
  font-family: 'Fredoka', 'Rubik', sans-serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 4px 4px 0 var(--shadow, #111111) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.btn-primary-pearl:hover {
  background: #22c55e !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--shadow, #111111) !important;
}

.btn-primary-pearl:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--shadow, #111111) !important;
}

body.dark-mode .btn-primary-pearl {
  background: #22c55e !important;
  color: #111111 !important;
  border-color: #f8fafc !important;
  box-shadow: 4px 4px 0 #000000 !important;
}

.pearl-btn-star {
  font-size: 16px !important;
  color: #111111 !important;
}

body.dark-mode .badge-pearl-epic {
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
  color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}



/* ============================================================
   MODAL VISTA PREVIA IMPRESIÓN A4 / DESCARGA PDF
   ============================================================ */
.print-preview-modal-card {
  max-width: 900px;
  width: 96%;
  max-height: 94vh;
  background: var(--bg);
  border: 3.5px solid var(--ink);
  border-radius: 20px;
  box-shadow: 8px 8px 0 var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.print-preview-header {
  padding: 16px 20px;
  background: var(--card-bg);
  border-bottom: 2.5px solid var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.print-preview-title-wrap h3 {
  margin: 0;
  font-size: 18px;
  font-family: 'Fredoka', sans-serif;
}

.print-badge-a4 {
  display: inline-block;
  background: var(--yellow);
  color: #111;
  font-size: 11px;
  font-weight: 800;
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  padding: 2px 8px;
  margin-top: 4px;
}

.print-preview-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-print-action {
  background: #10b981;
  color: #ffffff;
  border: 2.5px solid #065f46;
  border-radius: 12px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  box-shadow: 3px 3px 0 #064e3b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: .15s;
}

.btn-print-action:hover {
  transform: translate(-1.5px, -1.5px);
  box-shadow: 4.5px 4.5px 0 #064e3b;
  background: #059669;
}

.print-preview-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #525659;
  display: flex;
  justify-content: center;
}

/* ============================================================
   HOJAS A4 Y FORMATO DE IMPRESIÓN
   ============================================================ */
.a4-sheet {
  width: 210mm;
  min-height: 297mm;
  padding: 8mm;
  margin: 0 auto;
  background: #ffffff !important;
  box-sizing: border-box;
  color: #111111 !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  position: relative;
  box-shadow: 0 4px 25px rgba(0,0,0,0.35);
}

/* TARJETITAS DE TEXTO PARA CASA (8 por A4) */
.verse-cards-grid-8 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  gap: 5mm;
  height: 281mm;
  box-sizing: border-box;
}

.verse-cards-grid-6 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 6mm;
  height: 281mm;
  box-sizing: border-box;
}

.verse-card-item {
  border: 2px solid #111111 !important;
  border-radius: 12px;
  padding: 8mm 6mm;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  box-shadow: 2px 2px 0 #111111;
}

.verse-card-item .vc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px dashed #111111;
  padding-bottom: 3mm;
  margin-bottom: 3mm;
}

.verse-card-item .vc-brand {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.verse-card-item .vc-doodle {
  width: 22px;
  height: 22px;
}

.verse-card-item .vc-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: #111111;
  padding: 2mm 0;
}

.verse-card-item .vc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1.5px dashed #111111;
  padding-top: 3mm;
  margin-top: 2mm;
}

.verse-card-item .vc-ref-pill {
  background: #ffffff;
  border: 1.5px solid #111111;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 800;
}

.verse-card-item .vc-scissors {
  font-size: 10px;
  color: #666;
}

/* =============================================
   SOPA DE LETRAS — NEO BRUTALISTA (2 EN A4)
   ============================================= */

/* Outer container: two halves + cut line inside A4 */
.ws-nb-double {
  display: flex;
  flex-direction: column;
  height: 281mm;           /* A4 printable height (297mm - 2×8mm margin) */
  box-sizing: border-box;
  gap: 0;
}

/* Each half */
.ws-nb-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 3.5px solid #111;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 5px 5px 0 #111;
  background: #fff;
  box-sizing: border-box;
}

/* ---- Header ---- */
.ws-nb-header {
  background: #FFDD00;
  border-bottom: 3.5px solid #111;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.ws-nb-header-accent {
  position: absolute;
  right: -10px;
  top: -10px;
  width: 70px;
  height: 70px;
  background: #111;
  border-radius: 50%;
  opacity: 0.12;
}
.ws-nb-header-inner {
  padding: 7px 12px 6px;
  position: relative;
  z-index: 1;
}
.ws-nb-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ws-nb-badge-icon {
  background: #111;
  color: #FFDD00;
  font-size: 12px;
  font-weight: 900;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}
.ws-nb-title {
  margin: 0;
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 900;
  color: #111;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  flex: 1;
  line-height: 1.1;
}
.ws-nb-ver-pill {
  background: #111;
  color: #FFDD00;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.ws-nb-ref {
  margin: 3px 0 0;
  font-size: 10px;
  font-weight: 800;
  color: #333;
  letter-spacing: 0.3px;
}

/* ---- Student info bar ---- */
.ws-nb-info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f5f5;
  border-bottom: 2.5px solid #111;
  padding: 5px 12px;
  font-size: 10px;
  font-weight: 800;
  color: #111;
  gap: 8px;
  box-sizing: border-box;
}

/* ---- Horizontal Layout (Grid top, Words below) ---- */
.ws-nb-layout-horizontal {
  display: flex;
  flex-direction: column;
}

.ws-nb-grid-wrap-horizontal {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: #ffffff;
  overflow: hidden;
}

.ws-nb-words-horizontal {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: #f8fafc;
  border-top: 2.5px solid #111111;
  flex-shrink: 0;
  box-sizing: border-box;
}

.ws-nb-words-badge-h {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #111111;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.ws-nb-chips-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  flex: 1;
}

/* Fallback legacy rules preserved */
.ws-nb-body {
  display: flex;
  flex: 1;
  gap: 0;
  overflow: hidden;
}

.ws-nb-grid-wrap {
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 3px solid #111;
  background: #fff;
  flex: 0 0 auto;
}

.ws-nb-words {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  background: #fafafa;
  overflow: hidden;
}
.ws-nb-words-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #111;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 5px 10px;
  border-radius: 8px;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.ws-nb-count-badge {
  background: #FFDD00;
  color: #111;
  font-size: 11px;
  font-weight: 900;
  padding: 1px 7px;
  border-radius: 12px;
  border: 2px solid #fff;
}
.ws-nb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
  overflow: hidden;
}

/* ---- Cut divider ---- */
.ws-nb-cut {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  flex-shrink: 0;
}
.ws-nb-cut-line {
  flex: 1;
  border-top: 1.5px dashed #999;
}
.ws-nb-cut-label {
  font-size: 9px;
  font-weight: 800;
  color: #888;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

/* Reglas nativas para @media print */
@media print {
  body * {
    visibility: hidden;
  }
  .print-area-target, .print-area-target * {
    visibility: visible;
  }
  .print-area-target {
    position: absolute;
    left: 0;
    top: 0;
    width: 210mm;
    margin: 0;
    padding: 0;
    box-shadow: none !important;
  }
  @page {
    size: A4 portrait;
    margin: 8mm;
  }
}



/* =========================================
   ANIMATIONS & EFFECTS INJECTED
   ========================================= */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-12deg) scale(1.1); }
  50% { transform: rotate(12deg) scale(1.1); }
  75% { transform: rotate(-6deg) scale(1.05); }
}
@keyframes popIn {
  0% { opacity: 0; transform: scale(0.8) translateY(30px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes bouncyScale {
  0% { transform: scale(0.6); opacity: 0; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* Make buttons springy */
.btn-action, .btn-welcome, .nav-btn, .btn-open {
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.15s ease !important;
}
.btn-action:active, .btn-welcome:active, .nav-btn:active, .btn-open:active {
  transform: scale(0.92) translate(4px, 4px) !important;
  box-shadow: 0 0 0 var(--shadow) !important;
}

/* Card hover & entrance */
.card {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease !important;
  animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
}
.card:hover {
  transform: translateY(-8px) rotate(1.5deg) scale(1.02) !important;
  box-shadow: 12px 12px 0 var(--shadow) !important;
  z-index: 10;
}
.card:hover .badge, .card:hover .hero-sticker-tag {
  animation: wiggle 0.5s ease-in-out;
}
.card:hover img {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* Bouncy Modals */
.planner-modal-content {
  animation: bouncyScale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Shake Error for inputs */
.shake-error {
  animation: shake 0.4s ease-in-out !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2) !important;
}

/* Flying Clone for Planner/Fav */
.flying-clone {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0.9;
  box-shadow: 10px 10px 30px rgba(0,0,0,0.3);
}

/* Missing Effects: Ripple, Hover Material, Modal Bounce */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-anim 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(0, 0, 0, 0.15);
  pointer-events: none;
}
@keyframes ripple-anim {
  100% {
    transform: scale(3);
    opacity: 0;
  }
}
.btn-action, .btn-open, .nav-btn, .btn-welcome {
  position: relative;
  overflow: hidden;
}

/* Material hover dynamic icon */
.resource-name {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.resource-item:hover .resource-name {
  transform: translateY(-4px) scale(1.02);
}

/* Fix bounce for ALL modals */
#customLessonModal .planner-modal-content, #printPreviewModal .planner-modal-content {
  animation: bouncyScale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* CLEAN HERO TITLE */
.welcome-hero-clean {
  padding: 60px 20px 40px;
  text-align: center;
  margin-bottom: 20px;
}
.clean-main-title {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 58px;
  font-weight: 900;
  line-height: 1.2;
  color: #111111;
  text-transform: uppercase;
  letter-spacing: -1px;
  margin: 0;
  animation: dropBounce 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
}
.clean-highlight {
  position: relative;
  display: inline-block;
  color: #ffffff;
  background: #3b82f6;
  border: 4px solid #111111;
  padding: 4px 24px;
  border-radius: 16px;
  box-shadow: 8px 8px 0 #111111;
  transform: rotate(-1.5deg);
  margin-top: 8px;
  letter-spacing: 1px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: popInDelay 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
  animation-delay: 0.2s;
  overflow: hidden;
}
.clean-highlight:hover {
  transform: rotate(3deg) scale(1.06);
  box-shadow: 12px 12px 0 #111111;
}
.clean-highlight::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  animation: shineSweep 4s infinite;
  pointer-events: none;
}

/* Dark mode adjustments for clean hero */
body.dark-mode .clean-main-title {
  color: #f8fafc;
}
body.dark-mode .clean-highlight {
  box-shadow: 8px 8px 0 #cbd5e1;
  border-color: #f8fafc;
  color: #f8fafc;
}

@media (max-width: 600px) {
  .welcome-hero-clean { padding: 40px 10px 20px; }
  .clean-main-title { font-size: 40px; }
  .clean-highlight { padding: 4px 16px; box-shadow: 5px 5px 0 #111111; }
  body.dark-mode .clean-highlight { box-shadow: 5px 5px 0 #cbd5e1; }
}

/* =========================================
   DOODLE HANDWRITTEN HERO 
   ========================================= */
.welcome-hero-doodle {
  padding: 50px 20px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  user-select: none;
}

.doodle-title-wrapper {
  position: relative;
  display: inline-block;
  text-align: center;
  animation: dropBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
}

.doodle-main-title {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.85;
}

.doodle-w1 {
  font-size: 85px;
  color: #111111;
  letter-spacing: 2px;
  transform: rotate(-2deg);
}

.doodle-bottom-group {
  display: flex;
  align-items: flex-end;
  gap: 15px;
  margin-top: -5px;
  padding-left: 20px;
  transform: rotate(1deg);
}

.doodle-tucked {
  font-size: 40px;
  color: #111111;
  transform: rotate(-12deg) translateY(-15px);
}

.doodle-w3 {
  font-size: 110px;
  color: #0b4aed; /* Vibrant Blue */
  letter-spacing: 3px;
}

/* SVG Embellishments */
.doodle-starburst {
  position: absolute;
  top: 10px;
  left: -80px;
  width: 70px;
  height: 70px;
  stroke: #ef4444; /* Vibrant Red */
  stroke-width: 4.5;
  stroke-linecap: round;
  animation: spinPulse 8s infinite linear;
}

.doodle-motion {
  position: absolute;
  top: -10px;
  right: -50px;
  width: 45px;
  height: 45px;
  stroke: #111111;
  stroke-width: 4.5;
  stroke-linecap: round;
  transform: rotate(15deg);
}

@keyframes spinPulse {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}

/* Dark Mode */
body.dark-mode .doodle-w1,
body.dark-mode .doodle-tucked {
  color: #f8fafc;
}
body.dark-mode .doodle-motion {
  stroke: #f8fafc;
}
body.dark-mode .doodle-w3 {
  color: #3b82f6; /* Lighter blue for dark mode contrast */
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .welcome-hero-doodle { padding: 40px 10px 20px; }
  .doodle-w1 { font-size: 55px; }
  .doodle-w3 { font-size: 70px; }
  .doodle-tucked { font-size: 28px; transform: rotate(-12deg) translateY(-8px); }
  .doodle-starburst { width: 45px; height: 45px; left: -25px; top: -10px; }
  .doodle-motion { width: 30px; height: 30px; right: -15px; top: -15px; }
  .doodle-bottom-group { padding-left: 0; gap: 8px; }
}

/* =========================================
   DOODLE FONT FOR ALL MAIN TITLES
   ========================================= */
.step-header h2,
.section-banner h2,
.welcome-card h3,
.lesson-head h2,
.planner-modal-header h3,
.planner-details-title,
.modal-header h3 {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
}

/* Aumentar el tamaño para compensar la fuente tipo marcador */
.step-header h2 { font-size: 42px !important; line-height: 1.1 !important; margin-bottom: 5px !important; }
.section-banner h2 { font-size: 36px !important; line-height: 1.1 !important; margin-bottom: 5px !important; }
.welcome-card h3 { font-size: 34px !important; line-height: 1.1 !important; }
.lesson-head h2 { font-size: 40px !important; line-height: 1.1 !important; }
.planner-modal-header h3, .modal-header h3 { font-size: 32px !important; line-height: 1.1 !important; }
.planner-details-title { font-size: 36px !important; line-height: 1.1 !important; }

/* Para móvil, ajustar tamaños */
@media (max-width: 600px) {
  .step-header h2 { font-size: 34px !important; }
  .section-banner h2 { font-size: 30px !important; }
  .welcome-card h3 { font-size: 28px !important; }
  .lesson-head h2 { font-size: 32px !important; }
}

/* =========================================
   MOBILE UX ADAPTATIONS
   ========================================= */
/* =========================================
   MOBILE UX & ERGONOMIC ADAPTATIONS
   ========================================= */

/* -- 1. GLOBAL MOBILE LAYOUT & SAFE AREAS -- */
body {
  padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 768px) {
  /* Hide desktop header nav pills on phone screens to keep header clean and spacious */
  #headerNavPills {
    display: none !important;
  }

  .header-brand h1 {
    font-size: 20px !important;
  }
  
  .brand-sticker {
    font-size: 9px !important;
    padding: 1px 6px !important;
  }
  
  .header-brand p {
    font-size: 11px !important;
  }

  .wrap {
    width: 95% !important;
    padding: 0 4px !important;
  }

  /* Prevent horizontal scrollbars completely */
  html, body {
    overflow-x: hidden;
    touch-action: manipulation;
  }
}

/* -- 2. CARDS GRID: 1 Column & Bigger Touch Targets (>= 44px) -- */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .card {
    min-height: auto !important;
    touch-action: manipulation;
  }
  .card .thumb img {
    height: 180px !important;
    object-fit: cover !important;
  }
  .card-actions {
    display: flex !important;
    gap: 8px !important;
  }
  .card-actions .btn-open,
  .card-actions .btn-wa-card {
    padding: 12px 16px !important;
    font-size: 14px !important;
    min-height: 44px !important;
    touch-action: manipulation;
  }
  .btn-card-fav {
    width: 44px !important;
    height: 44px !important;
    touch-action: manipulation;
  }
}

/* /* -- 3. RESPONSIVE AUDIENCE SWITCHER BAR (4-TAB BALANCED CAPSULE + SEARCH) -- */
.pill-label-mobile { display: none !important; }
.pill-label-desktop { display: inline !important; }

@media (max-width: 768px) {
  .audience-switcher-bar {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    margin: 8px auto 16px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .audience-pills-group {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: max-content !important;
    margin: 0 auto !important;
    padding: 4px !important;
    gap: 4px !important;
    border-radius: 18px !important;
    border-width: 2px !important;
    box-shadow: 3px 3px 0 var(--shadow, #111111) !important;
    overflow: visible !important;
  }

  .pill-glider {
    border-width: 1.5px !important;
    border-radius: 13px !important;
    box-shadow: 1.5px 1.5px 0 var(--shadow, #111111) !important;
  }

  .btn-audience-pill {
    gap: 3px !important;
    border-radius: 12px !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    touch-action: manipulation;
  }

  .btn-audience-pill img,
  .btn-audience-pill svg {
    width: 13.5px !important;
    height: 13.5px !important;
    flex-shrink: 0 !important;
  }

  .btn-toggle-search-filters {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    border-radius: 14px !important;
    border-width: 2px !important;
    box-shadow: 2.5px 2.5px 0 var(--shadow) !important;
    flex-shrink: 0 !important;
  }

  .btn-toggle-search-filters svg {
    width: 18px !important;
    height: 18px !important;
  }

  .pill-label-desktop { display: none !important; }
  .pill-label-mobile { display: inline !important; }
}



@media (max-width: 768px) {
  .ml-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    padding: 4px !important;
    gap: 4px !important;
  }
  .ml-tabs::-webkit-scrollbar {
    display: none !important;
  }
  .ml-tab {
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    min-height: 44px !important;
    touch-action: manipulation;
  }

  .pack-tabs-nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    padding: 4px !important;
  }
  .pack-tabs-nav::-webkit-scrollbar {
    display: none !important;
  }
  .btn-pack-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    min-height: 42px !important;
  }
}

/* -- 4. SOWIESO HERO: Fluid Responsive Typography -- */
@media (max-width: 640px) {
  .sw-hero-container {
    padding: 24px 8px 18px !important;
  }
  .sw-giant-title {
    font-size: clamp(24px, 7.5vw, 34px) !important;
    line-height: 1.15 !important;
  }
  .sw-hero-subtitle {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }
  .sw-scroll-pill-btn {
    font-size: 12px !important;
    padding: 8px 16px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .sw-cards-block {
    gap: 16px !important;
  }
  .sw-feature-card {
    padding: 20px 16px !important;
  }
  .sw-card-title {
    font-size: 19px !important;
  }
  .sw-card-desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .sw-btn-card-action {
    width: 100% !important;
    justify-content: center !important;
    font-size: 14px !important;
    min-height: 46px !important;
    touch-action: manipulation;
  }
}

/* -- 5. LESSON VIEWER: Stack Sidebar & Touch Friendly -- */
@media (max-width: 768px) {
  .lesson-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 16px !important;
  }
  .resource-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    position: static !important;
    top: auto !important;
    margin: 0 !important;
  }
  .resource-panel h3,
  .resource-panel-header-btn {
    font-size: 15px !important;
    padding: 12px 14px !important;
  }
  .resource-list {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.25s ease !important;
  }
  .resource-panel.is-collapsed .resource-list {
    display: none !important;
    max-height: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
  }
  .resource-list::-webkit-scrollbar {
    display: none;
  }
  .resource-item {
    flex-shrink: 0 !important;
    min-width: 160px !important;
    padding: 10px 14px !important;
    min-height: 48px !important;
  }
  #lessonView {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
  }
  #viewerContainer {
    border-radius: 12px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .lesson-head {
    padding: 12px 0 10px !important;
  }
  .lesson-head-title-row {
    gap: 10px !important;
    margin-bottom: 10px !important;
  }
  .lesson-head-title-row h2,
  .lesson-head h2,
  .lesson-head-title {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  .lesson-head-meta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .lesson-head-badges {
    width: 100% !important;
    gap: 6px !important;
  }
  .lesson-head-badges .badge {
    font-size: 11px !important;
    padding: 4px 9px !important;
  }
  .lesson-head-actions {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .lesson-head-actions .btn-schedule-custom,
  .lesson-head-actions .btn-primary-fun,
  .lesson-head-actions .btn-fav-viewer {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 42px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .lesson-head-actions .btn-neo-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .custom-printable-card {
    padding: 14px 10px !important;
    margin-bottom: 24px !important;
    border-radius: 14px !important;
  }
  .custom-printable-card-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding-bottom: 10px !important;
    margin-bottom: 14px !important;
  }
  .btn-print-printable {
    width: 100% !important;
    justify-content: center !important;
    height: 40px !important;
  }
  .lesson-head .back {
    min-height: 44px !important;
    padding: 8px 14px !important;
  }
}

/* -- 6. FILTERS: Compact & Touch Friendly -- */
@media (max-width: 768px) {
  .filters-toolbar {
    flex-direction: column !important;
    gap: 8px !important;
    justify-content: center !important;
  }
  .filters-toolbar label {
    width: 100% !important;
  }
  .filters-toolbar select,
  .filters-toolbar input {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents iOS auto-zoom */
  }
  .btn-jesus-quick-filter {
    min-height: 44px !important;
    font-size: 14px !important;
    width: 100% !important;
  }
}

/* -- 7. MODALS: Mobile Bottom-Sheet with Scrollable Body -- */
@media (max-width: 768px) {
  .planner-modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: auto 0 0 0 !important;
    overflow-y: auto !important;
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }
  .planner-modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: var(--surface, #fff) !important;
    border-bottom: 3px solid #111 !important;
  }
  .planner-modal-body {
    padding: 16px !important;
    padding-bottom: 40px !important;
    overflow-y: auto !important;
  }
  .planner-modal-body input,
  .planner-modal-body select,
  .planner-modal-body textarea {
    min-height: 44px !important;
    font-size: 16px !important;
  }
  .planner-modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    background: var(--surface, #fff) !important;
    border-top: 3px solid #111 !important;
    padding: 12px 16px !important;
  }

  @keyframes modalSlideUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

/* -- 8. ACTION BUTTONS: Full Width on Mobile -- */
@media (max-width: 768px) {
  .resource-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .resource-actions .btn-action {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 14px !important;
    justify-content: center !important;
    touch-action: manipulation;
  }
}

/* -- 9. PLANNER: Mobile Cards & Toolbar Organization -- */
@media (max-width: 768px) {
  .planner-month-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .planner-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .planner-month-nav {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    padding: 6px 8px !important;
  }
  .planner-month-display {
    flex: 1 !important;
    min-width: unset !important;
    font-size: 15px !important;
  }
  .planner-secondary-controls {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .planner-view-toggle {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
  }
  .btn-view-pill {
    flex: 1 !important;
    justify-content: center !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
  }
  .planner-actions {
    flex-shrink: 0 !important;
    display: flex !important;
    gap: 6px !important;
  }
  .btn-planner-action {
    width: 42px !important;
    height: 42px !important;
  }
}

/* -- 10. TOASTS: Elevated above Bottom Nav -- */
@media (max-width: 768px) {
  .toast-container {
    bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    right: 12px !important;
  }
}

/* -- 11. MOBILE BOTTOM BAR: Safe Area Insets & Tap Feedback -- */
.mobile-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.mobile-bar-dock {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--card-bg, #ffffff);
  border: 2.5px solid var(--ink, #111111);
  border-radius: 28px;
  padding: 4px;
  gap: 2px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22), 3px 3px 0 var(--shadow, #111111);
  max-width: 420px;
  width: 100%;
}

body.dark-mode .mobile-bar-dock {
  background: #0f172a;
  border-color: #334155;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6), 3px 3px 0 #000000;
}

.bottom-tab-btn {
  flex: 1;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: transparent;
  color: var(--text-muted, #64748b);
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  z-index: 2;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding: 4px 2px;
  transition: transform 0.15s ease, color 0.2s ease;
}

.bottom-tab-btn:active {
  transform: scale(0.92);
}

.bottom-tab-btn.active {
  color: var(--ink, #111111);
  font-weight: 800;
}

body.dark-mode .bottom-tab-btn.active {
  color: #f8fafc;
}

/* -- 12. SCROLL TO TOP BUTTON (Mobile Only) -- */
.btn-scroll-top {
  display: none;
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent, #f59e0b);
  border: 3px solid #111;
  box-shadow: 3px 3px 0 #111;
  color: #111;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  z-index: 9998;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.btn-scroll-top.visible {
  display: flex;
}
.btn-scroll-top:active {
  transform: scale(0.9) translate(3px, 3px);
  box-shadow: 0 0 0 #111;
}

/* -- 11. PULL-TO-REFRESH Indicator -- */
@media (max-width: 768px) {
  .step-card {
    min-height: auto !important;
  }
  .audience-pill-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding-bottom: 6px !important;
  }
  .audience-pill-bar button {
    flex-shrink: 0 !important;
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  .stories-quick-nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-bottom: 6px !important;
  }
  .stories-quick-nav button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-height: 40px !important;
  }
}

/* -- 12. SMOOTH SCROLL & HAPTIC FEEL -- */
@media (max-width: 768px) {
  html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  * {
    -webkit-tap-highlight-color: rgba(245, 158, 11, 0.2);
  }
  input, select, textarea {
    font-size: 16px !important; /* Prevent iOS auto-zoom */
  }
}

/* =========================================
   STUDENT MANAGEMENT SYSTEM STYLES
   ========================================= */

/* -- Tabs Bar -- */
.ml-tabs {
  position: relative;
  display: flex;
  background: var(--card-bg, #ffffff);
  border: 2.5px solid var(--ink, #111111);
  border-radius: 20px;
  padding: 6px;
  gap: 6px;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  margin: 20px 0 26px;
  user-select: none;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ml-tabs:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0 var(--shadow, #111111);
}

/* Indicador deslizante suave con física elástica (Pill Glider) */
.ml-tab-glider {
  position: absolute;
  top: 0;
  left: 0;
  background: #FEF08A;
  border: 2.5px solid var(--ink, #111111);
  border-radius: 14px;
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111);
  transition: transform 0.38s cubic-bezier(0.34, 1.35, 0.64, 1), width 0.32s cubic-bezier(0.34, 1.2, 0.64, 1), height 0.3s ease, opacity 0.2s ease, background-color 0.3s ease;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}

/* Color temático dinámico del indicador según la pestaña activa */
.ml-tabs[data-active-tab="lessons"] .ml-tab-glider {
  background: #FEF08A; /* Amarillo dorado Lecciones */
}
.ml-tabs[data-active-tab="students"] .ml-tab-glider {
  background: #BAE6FD; /* Celeste fresco Alumnos */
}
.ml-tabs[data-active-tab="teams"] .ml-tab-glider {
  background: #FED7AA; /* Naranja/Ámbar trofeo Equipos */
}
.ml-tabs[data-active-tab="games"] .ml-tab-glider {
  background: #DDD6FE; /* Morado/Lavanda Juegos */
}

body.dark-mode .ml-tabs {
  background: #0f172a;
  border-color: #334155;
  box-shadow: 4px 4px 0 #000000;
}
body.dark-mode .ml-tab-glider {
  background: #1e293b !important;
  border-color: #94a3b8;
  box-shadow: 2.5px 2.5px 0 #000000;
}
.ml-tab {
  position: relative;
  z-index: 2;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  border: 2px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  transition: color 0.25s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  outline: none;
}

.ml-tab-svg,
.ml-tab svg {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ml-tab:hover {
  color: var(--text, #111111);
  transform: translateY(-2px);
}

.ml-tab:hover .ml-tab-svg,
.ml-tab:hover svg {
  transform: scale(1.18) rotate(6deg);
}

.ml-tab:active {
  transform: scale(0.94) translateY(1px);
}

.ml-tab.active {
  color: var(--text, #111111);
  font-weight: 800;
  background: transparent !important;
  border-color: transparent !important;
}

.ml-tab.active .ml-tab-svg,
.ml-tab.active svg {
  animation: pillWiggle 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.dark-mode .ml-tab.active {
  color: #f8fafc;
}

.ml-tab-content:not(.hidden) {
  animation: catalogSlideFade 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

/* -- Students Toolbar -- */
.ml-students-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.ml-students-date-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ml-date-input {
  padding: 8px 12px;
  border: 2.5px solid #111;
  border-radius: 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 600;
  background: var(--surface, #fff);
  color: var(--text, #111);
  box-shadow: 3px 3px 0 #111;
}
.ml-attendance-summary {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-muted, #666);
}

/* -- Student Card -- */
.ml-students-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ml-student-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 3px solid #111;
  border-radius: 14px;
  background: var(--surface, #fff);
  box-shadow: 4px 4px 0 #111;
  transition: all 0.2s ease;
  position: relative;
}
.ml-student-card.blocked {
  opacity: 0.55;
  filter: grayscale(0.6);
}
.ml-student-card.blocked .ml-student-info,
.ml-student-card.blocked .ml-student-attendance-bar,
.ml-student-card.blocked .ml-student-pct,
.ml-student-card.blocked .ml-student-actions .ml-btn-edit {
  opacity: 0.4;
  pointer-events: none;
}
.ml-student-card.blocked .ml-attendance-btn {
  pointer-events: auto !important;
  opacity: 1 !important;
  filter: none !important;
  cursor: pointer !important;
}
.ml-student-card.blocked::after {
  content: "AUSENTE";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 28px;
  color: #ef4444;
  opacity: 0.6;
  pointer-events: none;
}
.ml-student-team-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2.5px solid #111;
  flex-shrink: 0;
}
.ml-student-info {
  flex: 1;
  min-width: 0;
}
.ml-student-name {
  font-weight: 800;
  font-size: 15px;
  color: var(--text, #111);
}
.ml-student-team-label {
  font-size: 12px;
  color: var(--text-muted, #888);
  font-weight: 600;
}
.ml-student-attendance-bar {
  width: 60px;
  height: 8px;
  background: #e5e7eb;
  border-radius: 99px;
  overflow: hidden;
  border: 1.5px solid #111;
}
.ml-student-attendance-fill {
  height: 100%;
  border-radius: 99px;
  background: #22c55e;
  transition: width 0.4s ease;
}
.ml-student-pct {
  font-size: 12px;
  font-weight: 800;
  color: var(--text, #111);
  min-width: 36px;
  text-align: right;
}
.ml-attendance-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 2.5px solid #111;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  box-shadow: 2px 2px 0 #111;
  flex-shrink: 0;
}
.ml-attendance-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 #111;
}
.ml-attendance-btn.present {
  background: #22c55e;
  color: #fff;
}
.ml-attendance-btn.absent {
  background: #ef4444;
  color: #fff;
}
.ml-attendance-btn.unmarked {
  background: #e5e7eb;
  color: #9ca3af;
}
.ml-student-actions {
  display: flex;
  gap: 4px;
}
.ml-btn-edit, .ml-btn-delete {
  width: 32px;
  height: 32px;
  border: 2px solid #111;
  border-radius: 8px;
  background: var(--surface, #fff);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.ml-btn-edit:hover { background: #dbeafe; }
.ml-btn-delete:hover { background: #fee2e2; }

/* -- Teams Toolbar -- */
.ml-teams-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.ml-points-toggle-row {
  display: flex;
  align-items: center;
}
.ml-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--text, #111);
}
.ml-toggle-label input[type="checkbox"] {
  display: none;
}
.ml-toggle-slider {
  width: 48px;
  height: 26px;
  background: #cbd5e1;
  border-radius: 99px;
  border: 2.5px solid #111;
  position: relative;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.ml-toggle-slider::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #111;
  top: 1.5px;
  left: 2px;
  transition: transform 0.2s ease;
}
.ml-toggle-label input:checked + .ml-toggle-slider {
  background: #22c55e;
}
.ml-toggle-label input:checked + .ml-toggle-slider::after {
  transform: translateX(20px);
}

/* -- Team Card -- */
.ml-teams-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.ml-team-card {
  border: 3px solid #111;
  border-radius: 16px;
  background: var(--surface, #fff);
  box-shadow: 5px 5px 0 #111;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.ml-team-card:hover { transform: translateY(-3px); }
.ml-team-header {
  padding: 14px 16px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ml-team-name {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 26px;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.ml-team-points-display {
  font-family: 'Fredoka', sans-serif;
  font-size: 36px;
  font-weight: 800;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}
.ml-team-body {
  padding: 14px 16px;
}
.ml-team-members-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #888);
  margin-bottom: 8px;
}
.ml-team-members-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.ml-team-member-chip {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  border: 2px solid #111;
  background: var(--bg, #f5f5f4);
  color: var(--text, #111);
}
.ml-team-points-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.ml-btn-points {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid #111;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0 #111;
  transition: all 0.15s ease;
  color: #111;
}
.ml-btn-points:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 #111;
}
.ml-btn-points.plus { background: #bbf7d0; }
.ml-btn-points.minus { background: #fecaca; }
.ml-btn-points.disabled {
  opacity: 0.3;
  pointer-events: none;
}
.ml-team-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  justify-content: flex-end;
}

/* -- Color Picker -- */
.ml-color-picker {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0;
}
.ml-color-swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}
.ml-color-swatch:hover { transform: scale(1.15); }
.ml-color-swatch.active {
  border-color: #111;
  box-shadow: 0 0 0 3px #fcd34d, 3px 3px 0 #111;
  transform: scale(1.15);
}

/* -- Leaderboard -- */
.ml-leaderboard {
  border: 3px solid #111;
  border-radius: 16px;
  background: var(--surface, #fff);
  box-shadow: 5px 5px 0 #111;
  overflow: hidden;
}
.ml-leaderboard-title {
  padding: 12px 16px;
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 24px;
  border-bottom: 3px solid #111;
  background: #fef3c7;
  color: #111;
  text-align: center;
}
.ml-leaderboard-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 2.5px solid #111111;
  transition: background 0.2s ease;
}
.ml-leaderboard-row:last-child { border-bottom: none; }
.ml-leaderboard-rank {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 28px;
  width: 40px;
  text-align: center;
  color: var(--text, #111);
}
.ml-leaderboard-color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid #111;
  flex-shrink: 0;
}
.ml-leaderboard-name {
  flex: 1;
  font-weight: 800;
  font-size: 15px;
  color: var(--text, #111);
}
.ml-leaderboard-pts {
  font-family: 'Fredoka', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--text, #111);
}

/* -- Empty States -- */
.ml-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted, #888);
  font-weight: 600;
  font-size: 15px;
}
.ml-empty-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
}

/* -- Mobile Adaptations -- */
@media (max-width: 768px) {
  .ml-tabs {
    border-radius: 12px;
  }
  .ml-tab {
    padding: 10px 6px;
    font-size: 16px;
  }
  .ml-students-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .ml-students-date-row {
    flex-direction: column;
    align-items: stretch;
  }
  .ml-student-card {
    flex-wrap: wrap;
    gap: 8px;
  }
  .ml-teams-list {
    grid-template-columns: 1fr;
  }
  .ml-teams-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .ml-btn-add-student, .ml-btn-add-team {
    width: 100%;
    justify-content: center;
  }
}

/* Student Search */
.ml-search-students {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 2.5px solid #111;
  border-radius: 12px;
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 600;
  background: var(--surface, #fff);
  color: var(--text, #111);
  box-shadow: 3px 3px 0 #111;
  margin-bottom: 14px;
}
.ml-search-wrapper {
  position: relative;
}
.ml-search-wrapper::before {
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
  width: 18px;
  height: 18px;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
}
/* Student Personal Points */
.ml-student-pts {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.ml-student-pts-value {
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #f59e0b;
  min-width: 24px;
  text-align: center;
}
.ml-btn-student-pts {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #111;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  box-shadow: 1px 1px 0 #111;
  color: #111;
}
.ml-btn-student-pts:active {
  transform: translate(1px, 1px);
  box-shadow: 0 0 0 #111;
}
.ml-btn-student-pts.plus { background: #bbf7d0; }
.ml-btn-student-pts.minus { background: #fecaca; }
.ml-btn-student-pts.disabled { opacity: 0.3; pointer-events: none; }

/* Quick Points (+5, +10) Buttons */
.ml-btn-student-pts.quick-pts {
  width: auto;
  border-radius: 99px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  background: #e0f2fe;
  color: #0369a1;
  border: 2px solid #111;
  box-shadow: 1.5px 1.5px 0 #111;
  height: 28px;
  line-height: 1;
  letter-spacing: 0.3px;
}
.ml-btn-student-pts.quick-pts:hover {
  background: #bae6fd;
  transform: translate(-0.5px, -0.5px);
  box-shadow: 2px 2px 0 #111;
}
.ml-btn-student-pts.quick-pts:active {
  transform: translate(1px, 1px);
  box-shadow: 0 0 0 #111;
}

/* Previous Class Banner */
.ml-prev-class-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 60%, #fed7aa 100%);
  border: 2.5px solid #111;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 12px;
  box-shadow: 3px 3px 0 #111;
  animation: catalogSlideFade 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
.ml-prev-class-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  flex: 1;
  min-width: 0;
}
.ml-prev-class-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #92400e;
}
.ml-prev-class-stats {
  font-family: 'Fredoka', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #b45309;
}

/* Toggle Absent Filter Button */
.ml-btn-toggle-absent {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 10px;
  border: 2px solid #111;
  background: #fff;
  color: #111;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 2px 2px 0 #111;
  transition: all 0.15s ease;
}
.ml-btn-toggle-absent:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #111;
}
.ml-btn-toggle-absent:active {
  transform: translate(1px, 1px);
  box-shadow: 0 0 0 #111;
}
.ml-btn-toggle-absent.active {
  background: #f59e0b;
  color: #fff;
  border-color: #111;
  box-shadow: 2px 2px 0 #78350f;
}

/* Previous Attendance Pill Stickers */
.ml-prev-att-pill.present {
  background: #dcfce7;
  border-color: #16a34a;
  color: #15803d;
}
.ml-prev-att-pill.absent {
  background: #fef3c7;
  border-color: #d97706;
  color: #b45309;
  animation: pillPulseWarn 2s ease-in-out infinite;
}
@keyframes pillPulseWarn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
  50% { box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15); }
}

/* Empty State CTA Button */
.ml-btn-empty-add {
  border: 2.5px solid #111;
  border-radius: 12px;
  background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
  color: #111;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 3px 3px 0 #111;
  transition: all 0.15s ease;
}
.ml-btn-empty-add:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #111;
}
.ml-btn-empty-add:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 #111;
}

/* Mobile: Prev Class Banner & Quick Pts */
@media (max-width: 768px) {
  .ml-prev-class-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px;
  }
  .ml-prev-class-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .ml-btn-toggle-absent {
    width: 100%;
    text-align: center;
  }
  .ml-btn-student-pts.quick-pts {
    padding: 0 8px;
    font-size: 11px;
    height: 26px;
  }
}

/* =========================================
   STUDENT RANKS & AURAS
   ========================================= */
.ml-student-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.2;
  flex-shrink: 0;
  -webkit-text-fill-color: initial !important;
}

/* Bronce (0-9 pts) */
.ml-student-card.rank-bronze {
  border-color: #92400e;
}
.ml-student-rank-badge.rank-bronze {
  background: #fef3c7;
  color: #78350f;
  border: 1.5px solid #92400e;
}

/* Plata (10-24 pts) */
.ml-student-card.rank-silver {
  border-color: #475569;
  box-shadow: 4px 4px 0 #111, 0 0 10px rgba(148, 163, 184, 0.4);
}
.ml-student-rank-badge.rank-silver {
  background: linear-gradient(135deg, #f1f5f9, #cbd5e1);
  color: #334155;
  border: 1.5px solid #475569;
}
.rank-silver .ml-student-name {
  color: #334155;
  font-weight: 800;
}

/* Oro (25-49 pts) */
.ml-student-card.rank-gold {
  border-color: #ca8a04;
  box-shadow: 4px 4px 0 #111, 0 0 14px rgba(234, 179, 8, 0.5);
  background: linear-gradient(135deg, #ffffff, #fffbeb);
}
.ml-student-rank-badge.rank-gold {
  background: linear-gradient(135deg, #fef08a, #eab308);
  color: #713f12;
  border: 1.5px solid #a16207;
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.4);
}
.rank-gold .ml-student-name {
  color: #854d0e;
  font-weight: 900;
  text-shadow: 0 0 4px rgba(234, 179, 8, 0.3);
}

/* Platino (50-99 pts) */
.ml-student-card.rank-platinum {
  border-color: #0284c7;
  box-shadow: 4px 4px 0 #111, 0 0 16px rgba(56, 189, 248, 0.6);
  background: linear-gradient(135deg, #ffffff, #f0f9ff);
  position: relative;
}
.ml-student-rank-badge.rank-platinum {
  background: linear-gradient(135deg, #bae6fd, #38bdf8);
  color: #0369a1;
  border: 1.5px solid #0284c7;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}
.rank-platinum .ml-student-name {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

/* Diamante (100-199 pts) */
.ml-student-card.rank-diamond {
  border-color: #7e22ce;
  box-shadow: 4px 4px 0 #111, 0 0 20px rgba(168, 85, 247, 0.7);
  background: linear-gradient(135deg, #faf5ff, #f3e8ff);
  animation: diamondAura 3s infinite alternate ease-in-out;
}
.ml-student-rank-badge.rank-diamond {
  background: linear-gradient(135deg, #e9d5ff, #c084fc);
  color: #581c87;
  border: 1.5px solid #7e22ce;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.6);
  animation: pulseGlow 2s infinite ease-in-out;
}
.rank-diamond .ml-student-name {
  background: linear-gradient(135deg, #7e22ce, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

/* Maestro (200+ pts) */
.ml-student-card.rank-master {
  border-color: #dc2626;
  box-shadow: 4px 4px 0 #111, 0 0 24px rgba(239, 68, 68, 0.8), inset 0 0 12px rgba(250, 204, 21, 0.3);
  background: linear-gradient(135deg, #fff1f2, #fef2f2);
  animation: masterAura 2.5s infinite alternate ease-in-out;
}
.ml-student-rank-badge.rank-master {
  background: linear-gradient(135deg, #fca5a5, #ef4444, #f59e0b);
  background-size: 200% 200%;
  color: #ffffff;
  text-shadow: 1px 1px 2px #111;
  border: 2px solid #111;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.7);
  animation: gradientShift 3s infinite ease, pulseGlow 1.5s infinite ease-in-out;
}
.rank-master .ml-student-name {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 20px;
  color: #dc2626;
  text-shadow: 1px 1px 0 #111, 0 0 8px rgba(239, 68, 68, 0.5);
  animation: masterTextPulse 2s infinite alternate;
}

@keyframes diamondAura {
  0% { box-shadow: 4px 4px 0 #111, 0 0 12px rgba(168, 85, 247, 0.5); }
  100% { box-shadow: 4px 4px 0 #111, 0 0 24px rgba(56, 189, 248, 0.8); }
}
@keyframes masterAura {
  0% { box-shadow: 4px 4px 0 #111, 0 0 16px rgba(239, 68, 68, 0.6); }
  100% { box-shadow: 4px 4px 0 #111, 0 0 28px rgba(245, 158, 11, 0.9), inset 0 0 15px rgba(239, 68, 68, 0.3); }
}
@keyframes pulseGlow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes masterTextPulse {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.03) rotate(0.5deg); }
}

/* =========================================
   DIGITAL GAMES MODULE STYLES
   ========================================= */

.games-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 10px;
}

.game-select-card {
  border: 3px solid #111;
  border-radius: 18px;
  padding: 24px;
  background: var(--surface, #fff);
  box-shadow: 6px 6px 0 #111;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.game-select-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 10px 10px 0 #111;
}

.game-card-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.game-select-card h3 {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 32px;
  margin: 0 0 8px;
  color: var(--text, #111);
}
.game-select-card p {
  font-size: 14px;
  color: var(--text-muted, #666);
  line-height: 1.4;
  margin: 0;
  flex: 1;
}

/* Game View Container */
.game-view-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.game-view-header {
  display: flex;
  align-items: center;
  gap: 16px;
}
.game-view-header h2 {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 34px;
  margin: 0;
  color: var(--text, #111);
}

.game-config-box {
  border: 3px solid #111;
  border-radius: 16px;
  padding: 20px;
  background: #fffbeb;
  box-shadow: 4px 4px 0 #111;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.game-config-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.game-config-row label {
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Active Race Board */
.race-active-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px) {
  .race-active-board { grid-template-columns: 1fr; }
}

/* ============================================================
   TABLERO CARRERA BÍBLICA: VIBRANTE NEO-BRUTALISTA
   ============================================================ */
.race-verse-display {
  border: 3.5px solid #111111 !important;
  border-radius: 24px !important;
  padding: 28px 22px !important;
  background: #fef08a !important;
  background-image: radial-gradient(#f59e0b 13%, transparent 13%) !important;
  background-size: 16px 16px !important;
  color: #111111 !important;
  box-shadow: 8px 8px 0 #111111 !important;
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.race-badge-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ef4444 !important;
  color: #ffffff !important;
  font-family: 'Fredoka', sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 12px;
  border: 2.5px solid #111111 !important;
  box-shadow: 3px 3px 0 #111111 !important;
  transform: rotate(-1.5deg);
  animation: neoBadgeFloat 2.5s infinite ease-in-out;
}

@keyframes neoBadgeFloat {
  0%, 100% { transform: rotate(-1.5deg) translateY(0); }
  50% { transform: rotate(1deg) translateY(-2px); }
}

.race-verse-title-bubble {
  width: 100%;
}

.race-verse-display h3 {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(34px, 5.5vw, 48px) !important;
  font-weight: 900 !important;
  color: #111111 !important;
  margin: 0 !important;
  line-height: 1.15;
  letter-spacing: -0.5px;
  text-shadow: 2.5px 2.5px 0 #fde047;
  word-break: break-word;
}

.race-verse-quote-box {
  background: #ffffff !important;
  border: 3px solid #111111 !important;
  border-radius: 16px !important;
  box-shadow: 4px 4px 0 #111111 !important;
  padding: 16px 20px !important;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.race-verse-display p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  color: #18181b !important;
  margin: 0 !important;
  font-style: italic !important;
  text-align: center;
}

.race-pts-tag {
  background: #fed330 !important;
  color: #111111 !important;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 14.5px;
  padding: 8px 18px;
  border-radius: 50px;
  border: 2.5px solid #111111 !important;
  box-shadow: 3px 3px 0 #111111 !important;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transform: rotate(1deg);
}

/* Dark Mode Carrera Bíblica */
body.dark-mode .race-verse-display {
  background: #18181b !important;
  background-image: radial-gradient(#3f3f46 14%, transparent 14%) !important;
  border-color: #f8fafc !important;
  box-shadow: 8px 8px 0 #000000 !important;
  color: #f8fafc !important;
}

body.dark-mode .race-verse-display h3 {
  color: #fef08a !important;
  text-shadow: 2.5px 2.5px 0 #854d0e;
}

body.dark-mode .race-verse-quote-box {
  background: #09090b !important;
  border-color: #f8fafc !important;
  box-shadow: 4px 4px 0 #000000 !important;
}

body.dark-mode .race-verse-display p {
  color: #f4f4f5 !important;
}

body.dark-mode .race-badge-active {
  border-color: #f8fafc !important;
  box-shadow: 3px 3px 0 #000000 !important;
}

body.dark-mode .race-pts-tag {
  background: #f59e0b !important;
  color: #111111 !important;
  border-color: #f8fafc !important;
  box-shadow: 3px 3px 0 #000000 !important;
}

/* Winners Section & Search Dropdown */
.race-winners-section {
  border: 3.5px solid #111111 !important;
  border-radius: 24px !important;
  padding: 24px 22px !important;
  background: var(--surface, #ffffff) !important;
  box-shadow: 8px 8px 0 #111111 !important;
  display: flex;
  flex-direction: column;
}
.race-winners-section h4 {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 26px;
  margin: 0 0 12px;
}

.game-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--surface, #fff);
  border: 2.5px solid #111;
  border-radius: 12px;
  box-shadow: 4px 4px 12px rgba(0,0,0,0.2);
  max-height: 220px;
  overflow-y: auto;
  margin-top: 4px;
}
.game-search-item {
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid #e5e7eb;
  font-weight: 700;
  transition: background 0.15s ease;
}
.game-search-item:hover {
  background: #fef3c7;
}

.race-winners-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100px;
  margin-bottom: 16px;
  flex: 1;
}
.race-winner-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #bbf7d0;
  border: 2.5px solid #111;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 3px 3px 0 #111;
}

/* Quiz Generator Styles */
.quiz-topic-textarea {
  width: 100%;
  padding: 12px;
  border: 2.5px solid #111;
  border-radius: 12px;
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  resize: vertical;
  background: var(--surface, #fff);
  color: var(--text, #111);
}
.quiz-setup-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.quiz-active-board {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.quiz-progress-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 800;
  font-size: 14px;
}
.quiz-progress-track {
  height: 12px;
  background: #e2e8f0;
  border: 2.5px solid #111;
  border-radius: 99px;
  overflow: hidden;
}
.quiz-progress-fill {
  height: 100%;
  background: #3b82f6;
  border-radius: 99px;
  transition: width 0.4s ease;
}

.quiz-card-display {
  border: 3px solid #111;
  border-radius: 18px;
  padding: 24px;
  background: var(--surface, #fff);
  box-shadow: 6px 6px 0 #111;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.quiz-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.quiz-pts-badge {
  background: #fcd34d;
  color: #111;
  font-weight: 800;
  font-size: 14px;
  padding: 4px 14px;
  border-radius: 99px;
  border: 2px solid #111;
}
.quiz-question-text {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 34px;
  margin: 0;
  color: var(--text, #111);
  line-height: 1.2;
}

.quiz-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .quiz-options-grid { grid-template-columns: 1fr; }
}
.quiz-option-btn {
  padding: 14px 16px;
  border: 2.5px solid #111;
  border-radius: 14px;
  background: #f8fafc;
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 3px 3px 0 #111;
  color: #111;
}
.quiz-option-btn:hover {
  background: #dbeafe;
  transform: translateY(-2px);
}
.quiz-option-btn.correct {
  background: #bbf7d0 !important;
  border-color: #15803d !important;
}

.quiz-answer-box {
  background: #ecfdf5;
  border: 2.5px dashed #059669;
  border-radius: 12px;
  padding: 14px 16px;
}
.quiz-answer-title {
  font-weight: 800;
  font-size: 14px;
  color: #047857;
  margin-bottom: 4px;
}
.quiz-answer-text {
  font-size: 15px;
  font-weight: 700;
  color: #065f46;
}

.quiz-controls-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.quiz-winner-section {
  border: 3px solid #111;
  border-radius: 18px;
  padding: 20px;
  background: var(--surface, #fff);
  box-shadow: 6px 6px 0 #111;
}
.quiz-winner-section h4 {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 26px;
  margin: 0 0 12px;
}
.quiz-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  gap: 12px;
}
/* =========================================
   NEO-BRUTALIST FREDOKA FONT FOR ALL TITLES
   ========================================= */
.step-header h2,
.section-banner h2,
.welcome-card h3,
.lesson-head h2,
.planner-modal-header h3,
.planner-details-title,
.modal-header h3,
.ml-tab,
.ml-team-name,
.ml-leaderboard-title,
.game-select-card h3,
.game-view-header h2,
.race-verse-display h3,
.race-winners-section h4,
.quiz-question-text,
.quiz-winner-section h4 {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
}

.step-header h2 { font-size: 32px !important; line-height: 1.15 !important; }
.section-banner h2 { font-size: 30px !important; line-height: 1.15 !important; }
.welcome-card h3 { font-size: 26px !important; line-height: 1.15 !important; }
.lesson-head h2 { font-size: 30px !important; line-height: 1.15 !important; }
.planner-modal-header h3, .modal-header h3 { font-size: 24px !important; line-height: 1.15 !important; }
.planner-details-title { font-size: 28px !important; line-height: 1.15 !important; }
.doodle-w1 { font-size: 64px !important; font-weight: 900 !important; }
.doodle-w3 { font-size: 78px !important; font-weight: 900 !important; }
.doodle-tucked { font-size: 28px !important; font-weight: 800 !important; }

@media (max-width: 600px) {
  .step-header h2 { font-size: 26px !important; }
  .section-banner h2 { font-size: 24px !important; }
  .welcome-card h3 { font-size: 22px !important; }
  .lesson-head h2 { font-size: 24px !important; }
  .doodle-w1 { font-size: 44px !important; }
  .doodle-w3 { font-size: 56px !important; }
}
/* Tab Neo-Brutalist SVGs & Layout */
.ml-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.ml-tab-svg {
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ml-tab:hover .ml-tab-svg,
.ml-tab.active .ml-tab-svg {
  transform: scale(1.18) rotate(-3deg);
}

/* =========================================
   USER REQUESTED UI IMPROVEMENTS
   ========================================= */

/* 1. Date Input & Calendar styling (Neo-Brutalist) */
input[type="date"] {
  border: 3px solid #111 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  background: var(--surface, #fff) !important;
  color: var(--text, #111) !important;
  box-shadow: 4px 4px 0 #111 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
input[type="date"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 6px 6px 0 #111 !important;
  background: #fffbeb !important;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer !important;
  padding: 4px !important;
  border-radius: 6px !important;
  background-color: #fcd34d !important;
  border: 1.5px solid #111 !important;
  transition: transform 0.15s ease !important;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  transform: scale(1.15) !important;
}

/* 2. Edit & Delete Action Buttons (Neo-Brutalist SVGs) */
.ml-btn-edit, .ml-btn-delete {
  width: 36px !important;
  height: 36px !important;
  border: 2.5px solid #111 !important;
  border-radius: 10px !important;
  background: var(--surface, #fff) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 2px 2px 0 #111 !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}
.ml-btn-edit:hover {
  background: #fef08a !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3.5px 3.5px 0 #111 !important;
}
.ml-btn-delete:hover {
  background: #fee2e2 !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3.5px 3.5px 0 #111 !important;
}
.ml-btn-edit:active, .ml-btn-delete:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 0 0 0 #111 !important;
}

/* 3. Game Panels styling */
.game-select-card {
  position: relative !important;
  border: 3px solid #111 !important;
  border-radius: 20px !important;
  padding: 28px 24px 24px !important;
  background: var(--surface, #fff) !important;
  box-shadow: 6px 6px 0 #111 !important;
}
.game-card-badge {
  position: absolute !important;
  top: -14px !important;
  background: #fef08a !important;
  color: #111 !important;
  border: 2.5px solid #111 !important;
  padding: 3px 12px !important;
  border-radius: 99px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  box-shadow: 2px 2px 0 #111 !important;
}
.game-card-badge.quiz {
  background: #bae6fd !important;
}
.game-card-btn {
  width: 100% !important;
  min-height: 46px !important;
  font-size: 15px !important;
  justify-content: center !important;
  margin-top: 16px !important;
}

/* 4. Equal Button Sizes in Empty State */
.empty-state-buttons-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 20px !important;
  width: 100% !important;
}
.btn-empty-action {
  width: 100% !important;
  max-width: 340px !important;
  min-height: 50px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border: 3px solid #111 !important;
  border-radius: 8px !important;
  box-shadow: 4px 4px 0 #111 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}
.btn-empty-primary {
  background: #fcd34d !important;
  color: #111 !important;
}
.btn-empty-secondary {
  background: var(--surface, #fff) !important;
  color: var(--text, #111) !important;
}
.btn-empty-action:hover {
  transform: translateY(-2px) !important;
  box-shadow: 6px 6px 0 #111 !important;
}

/* 5. Print & PDF Styling for A4 Documents */
@media print {
  body * {
    visibility: hidden;
  }
  .a4-sheet, .a4-sheet *, .print-area-target, .print-area-target * {
    visibility: visible !important;
  }
  .a4-sheet, .print-area-target {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }
}

/* =========================================
   PLANNER TOOLBAR & GENERAL MOBILE UX FIXES
   ========================================= */
@media (max-width: 768px) {
  .planner-toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
    border: 3px solid #111 !important;
    border-radius: 20px !important;
    background: var(--surface, #fff) !important;
    box-shadow: 5px 5px 0 #111 !important;
  }

  .planner-month-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    background: #fffbeb !important;
    padding: 6px 10px !important;
    border: 2.5px solid #111 !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #111 !important;
  }
  .planner-month-display {
    font-family: 'Fredoka', sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
  }

  .planner-day-setting {
    margin: 0 !important;
    width: 100% !important;
  }
  .planner-select-day {
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border: 2.5px solid #111 !important;
    border-radius: 12px !important;
    box-shadow: 3px 3px 0 #111 !important;
  }

  .planner-view-toggle {
    width: 100% !important;
    display: flex !important;
    flex: none !important;
    display: inline-flex !important;
    width: auto !important;
    padding: 3px !important;
    border-radius: 14px !important;
    box-shadow: 2.5px 2.5px 0 var(--shadow) !important;
    margin: 0 !important;
  }
  .planner-view-toggle .btn-view-pill {
    flex: none !important;
    justify-content: center !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    border-radius: 11px !important;
  }
  .planner-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    width: auto !important;
    margin: 0 !important;
  }
  .planner-actions .btn-planner-action {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    box-shadow: 2.5px 2.5px 0 var(--shadow) !important;
    flex: none !important;
  }
}

/* =========================================
   MOBILE PERFECTION: TABS & FAV TOOLBAR
   ========================================= */
@media (max-width: 768px) {
  /* 4 Tabs fit perfectly on mobile: Icon on top, Text below */
  .ml-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    padding: 4px !important;
    border-radius: 16px !important;
  }
  .ml-tab {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 2px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    gap: 3px !important;
    white-space: normal !important;
    text-align: center !important;
    border: none !important;
  }
  .ml-tab:last-child {
    border-right: none !important;
  }
  .ml-tab-svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Favorites Toolbar Grid on Mobile */
  .favorites-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .fav-toolbar-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .fav-toolbar-actions button {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    justify-content: center !important;
    box-shadow: 3px 3px 0 #111 !important;
  }
}

/* =========================================
   HOME SECTION MOBILE OPTIMIZATIONS
   ========================================= */
@media (max-width: 600px) {
  .welcome-hero-doodle {
    padding: 20px 10px 10px !important;
    max-width: 100% !important;
    box-sizing: border-radius !important;
  }

  .doodle-w1 {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }
  .doodle-w3 {
    font-size: 42px !important;
    line-height: 1.1 !important;
  }
  .doodle-tucked {
    font-size: 18px !important;
    left: -32px !important;
    top: 6px !important;
  }

  /* Decorative doodles scaling on mobile */
  .doodle-starburst {
    width: 24px !important;
    height: 24px !important;
    left: 2px !important;
    top: -4px !important;
  }
  .doodle-lines {
    width: 20px !important;
    height: 20px !important;
    right: 4px !important;
  }

  /* Carousel Cards on mobile */
  .welcome-carousel {
    padding: 0 40px !important;
  }
  .carousel-card {
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }
  .carousel-arrow {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }
  .carousel-arrow.prev { left: 2px !important; }
  .carousel-arrow.next { right: 2px !important; }
}


/* ============================================================
   GAME-STYLE HERO TITLE: ESCUELITA BIBLICA PARA MAESTROS
   Epic videogame entrance animations — Neo-Brutalist DNA
   ============================================================ */

/* Container */
.game-hero-container {
  overflow: visible;
  perspective: 900px;
}

.game-title-wrapper {
  position: relative;
  perspective: 900px;
}

/* ---- Main Title: Stage entrance ---- */
.game-main-title {
  position: relative;
  z-index: 2;
}

/* Word 1: ESCUELITA BIBLICA — Slam-in from above */
.game-word-top {
  animation: gameWordSlam 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
  will-change: transform, opacity;
}

@keyframes gameWordSlam {
  0% {
    transform: rotate(-2deg) translateY(-80px) scale(1.6);
    opacity: 0;
    filter: blur(3px);
  }
  50% {
    transform: rotate(-2deg) translateY(8px) scale(0.96);
    opacity: 1;
    filter: blur(0);
  }
  65% {
    transform: rotate(-2deg) translateY(-4px) scale(1.03);
  }
  100% {
    transform: rotate(-2deg) translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

/* Word 2: PARA — Spin-flip entrance */
.game-word-para {
  animation: gameParaFlip 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
  display: inline-block;
}

@keyframes gameParaFlip {
  0% {
    transform: rotate(-12deg) translateY(-15px) rotateX(90deg) scale(0.5);
    opacity: 0;
  }
  100% {
    transform: rotate(-12deg) translateY(-15px) rotateX(0deg) scale(1);
    opacity: 1;
  }
}

/* Word 3: MAESTROS — Zoom-punch from bottom */
.game-word-maestros {
  animation: gameMaestrosZoom 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both;
  will-change: transform, opacity;
}

@keyframes gameMaestrosZoom {
  0% {
    transform: scale(0.3) translateY(60px);
    opacity: 0;
    filter: blur(4px);
  }
  55% {
    transform: scale(1.12) translateY(-5px);
    opacity: 1;
    filter: blur(0);
  }
  75% {
    transform: scale(0.96) translateY(2px);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}

/* Bottom row entrance */
.game-bottom-row {
  animation: gameBottomSlide 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}

@keyframes gameBottomSlide {
  0% {
    transform: rotate(1deg) translateX(40px);
    opacity: 0;
  }
  100% {
    transform: rotate(1deg) translateX(0);
    opacity: 1;
  }
}

/* ---- Arcade Badges ---- */
.game-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FFCC00;
  color: #111111;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 2.5px solid #111111;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #111111;
  z-index: 15;
  white-space: nowrap;
  user-select: none;
}

.game-badge-left {
  top: -10px;
  left: -40px;
  animation: gameBadgeBounce 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s both,
             gameBadgeFloat 3s ease-in-out 2.1s infinite alternate;
  transform: rotate(-6deg);
}

.game-badge-right {
  bottom: -8px;
  right: -30px;
  background: #111111;
  color: #FFCC00;
  animation: gameBadgeBounce 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 1.7s both,
             gamePressStartBlink 1.4s step-end 2.4s infinite;
  transform: rotate(4deg);
}

@keyframes gameBadgeBounce {
  0% {
    transform: scale(0) rotate(var(--badge-rot, -6deg));
    opacity: 0;
  }
  60% {
    transform: scale(1.2) rotate(var(--badge-rot, -6deg));
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(var(--badge-rot, -6deg));
    opacity: 1;
  }
}

.game-badge-left { --badge-rot: -6deg; }
.game-badge-right { --badge-rot: 4deg; }

@keyframes gameBadgeFloat {
  0% { transform: rotate(-6deg) translateY(0); }
  100% { transform: rotate(-6deg) translateY(-6px); }
}

@keyframes gamePressStartBlink {
  0%, 80% { opacity: 1; }
  81%, 100% { opacity: 0.35; }
}

/* ---- Lightning Bolt: replaces motion lines ---- */
.game-lightning {
  animation: gameLightningPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s both,
             gameLightningShake 0.6s ease 1.5s 2;
}

@keyframes gameLightningPop {
  0% {
    transform: rotate(15deg) scale(0) translateY(20px);
    opacity: 0;
  }
  100% {
    transform: rotate(15deg) scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes gameLightningShake {
  0%, 100% { transform: rotate(15deg) translateX(0); }
  25% { transform: rotate(18deg) translateX(-3px); }
  50% { transform: rotate(12deg) translateX(3px); }
  75% { transform: rotate(17deg) translateX(-2px); }
}

/* ---- Power Star Spin: replaces basic starburst ---- */
.game-star-spin {
  animation: spinPulse 8s infinite linear, gameStarEntrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

@keyframes gameStarEntrance {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* ---- Hover: Shake the whole title like a game hit ---- */
.game-title-wrapper:hover .game-word-top {
  animation: gameHoverShake 0.45s ease;
}
.game-title-wrapper:hover .game-word-maestros {
  animation: gameHoverPunch 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes gameHoverShake {
  0%, 100% { transform: rotate(-2deg) translateX(0); }
  20% { transform: rotate(-2deg) translateX(-6px); }
  40% { transform: rotate(-2deg) translateX(6px); }
  60% { transform: rotate(-2deg) translateX(-3px); }
  80% { transform: rotate(-2deg) translateX(3px); }
}

@keyframes gameHoverPunch {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.08); }
  65% { transform: scale(0.97); }
}

/* ---- Dark Mode ---- */
body.dark-mode .game-badge-left {
  background: #eab308;
  color: #111;
  border-color: #f8fafc;
  box-shadow: 3px 3px 0 rgba(248, 250, 252, 0.4);
}

body.dark-mode .game-badge-right {
  background: #f8fafc;
  color: #111;
  border-color: #f8fafc;
  box-shadow: 3px 3px 0 rgba(248, 250, 252, 0.3);
}

/* ---- Mobile: Shrink badges ---- */
@media (max-width: 768px) {
  .game-badge {
    font-size: 9px;
    padding: 4px 10px;
    border-width: 2px;
    box-shadow: 2px 2px 0 #111;
    border-radius: 8px;
  }
  .game-badge-left {
    left: -10px;
    top: -15px;
  }
  .game-badge-right {
    right: -5px;
    bottom: -15px;
  }
  .game-badge-left svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 420px) {
  .game-badge-left {
    left: 0px;
    top: -20px;
  }
  .game-badge-right {
    right: 0px;
    bottom: -20px;
  }
}


/* ============================================================
   ESTILOS NEO-BRUTALISTAS PARA EL MÓDULO PACKS ESPECIALES
   ============================================================ */

.audience-card.audience-packs {
  background: #fef08a;
  border-color: var(--ink);
}
.audience-card.audience-packs:hover {
  background: #fde047;
}

body.dark-mode .audience-card.audience-packs {
  background: #854d0e;
  color: #fef08a;
}

.packs-catalog-area {
  margin-top: 10px;
}

.pack-banner {
  background: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
  border: 3px solid var(--ink);
  border-radius: 20px;
  padding: 24px 26px;
  box-shadow: 5px 6px 0 var(--shadow);
  margin-bottom: 24px;
}

body.dark-mode .pack-banner {
  background: linear-gradient(135deg, #713f12 0%, #854d0e 100%);
  color: #fef08a;
}

.pack-banner-badge {
  display: inline-block;
  background: var(--ink);
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 10px;
}

.pack-banner-title {
  margin: 0 0 8px;
  font-family: 'Fredoka', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #111111;
}

body.dark-mode .pack-banner-title {
  color: #ffffff;
}

.pack-banner-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  color: #374151;
}

body.dark-mode .pack-banner-desc {
  color: #fef08a;
}

/* Tabs de navegación del pack */
.pack-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.btn-pack-tab {
  background: var(--card-bg);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  padding: 10px 18px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-pack-tab:hover {
  transform: translateY(-2px);
  background: var(--yellow-light);
  box-shadow: 4px 4px 0 var(--shadow);
}

.btn-pack-tab.active {
  background: var(--ink);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 4.5px 4.5px 0 var(--shadow);
}

body.dark-mode .btn-pack-tab.active {
  background: #f8fafc;
  color: #0f172a;
}

/* Grid de Tarjetas de Recursos */
.pack-resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
}

.pack-card {
  background: var(--card-bg);
  border: 3px solid var(--ink);
  border-radius: 18px;
  padding: 20px 20px 18px;
  box-shadow: 4.5px 5.5px 0 var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s;
}

.pack-card:hover {
  transform: translateY(-4px);
  box-shadow: 6.5px 8.5px 0 var(--shadow);
}

.pack-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pack-icon {
  font-size: 32px;
  line-height: 1;
}

.badge-pack-cat {
  background: #fef08a;
  color: #854d0e;
  border: 1.8px solid var(--ink);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 10px;
}

.pack-card-title {
  margin: 0 0 6px;
  font-family: 'Fredoka', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}

.pack-card-desc {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-muted);
  flex: 1;
  font-weight: 600;
}

.pack-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 2px dashed rgba(0,0,0,0.12);
  margin-top: auto;
}

body.dark-mode .pack-card-footer {
  border-top-color: rgba(255,255,255,0.15);
}

.pack-file-size {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.pack-card-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-pack-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 13px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 2.5px 2.5px 0 var(--shadow);
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-pack-view {
  background: var(--yellow);
  color: #111111;
}

.btn-pack-dl {
  background: var(--card-bg);
  color: var(--text);
}

.btn-pack-action:hover {
  transform: translateY(-2px);
  box-shadow: 3.5px 3.5px 0 var(--shadow);
}

/* Reproductor Audio Neo-Brutalista */
.audio-player-wrap {
  margin-bottom: 14px;
  width: 100%;
}

.neo-audio-player {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  outline: none;
}


/* ============================================================
   ESTILO RAINBOW Y GRID DE PACKS ESPECIALES
   ============================================================ */

.pack-catalog-header {
  margin-bottom: 24px;
}

.pack-catalog-title {
  margin: 0 0 6px;
  font-family: 'Fredoka', sans-serif;
  font-size: 30px;
  font-weight: 800;
  color: var(--text);
}

.pack-catalog-sub {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
}

.packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
}

/* Tarjeta Épica Arcoíris de Pack */
.card-pack-epic {
  position: relative;
  background: var(--card-bg);
  border: 3.5px solid var(--ink);
  border-radius: 22px;
  padding: 26px 24px 22px;
  box-shadow: 6px 7.5px 0 var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s;
}

.card-pack-epic::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 9px;
  background: linear-gradient(90deg, #ff5252 0%, #fb923c 20%, #ffcc00 40%, #34d399 60%, #38bdf8 80%, #c084fc 100%);
  z-index: 6;
}

.card-pack-epic:hover {
  transform: translateY(-5px);
  box-shadow: 8.5px 11px 0 var(--shadow);
}

.pack-card-thumb-wrap {
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 3px 3px 0 var(--shadow);
}

body.dark-mode .pack-card-thumb-wrap {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.pack-card-logo-img {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.15));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-pack-epic:hover .pack-card-logo-img {
  transform: scale(1.08) rotate(-1.5deg);
}

.pack-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.badge-rainbow-epic {
  background: linear-gradient(90deg, #ff5252, #fb923c, #ffcc00, #34d399, #38bdf8, #c084fc);
  color: #111111;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.8px;
  padding: 3px 10px;
  border-radius: 10px;
  border: 1.8px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow);
}

.pack-card-main-title {
  margin: 0 0 8px;
  font-family: 'Fredoka', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}

.pack-card-main-desc {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  font-weight: 600;
  flex: 1;
}

.pack-card-main-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 2px dashed rgba(0,0,0,0.12);
  margin-top: auto;
}

body.dark-mode .pack-card-main-footer {
  border-top-color: rgba(255,255,255,0.15);
}

.pack-resource-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.btn-enter-pack {
  background: var(--yellow);
  color: #111111;
  padding: 10px 18px;
}

/* Level 2 Detail View */
.btn-back-packs {
  display: inline-flex;
  align-items: center;
  background: var(--card-bg);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  padding: 8px 16px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow);
  margin-bottom: 18px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-back-packs:hover {
  transform: translateY(-2px);
  background: var(--yellow-light);
  box-shadow: 4px 4px 0 var(--shadow);
}

.pack-banner-epic {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.pack-banner-logo-img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.15));
}

@media (max-width: 640px) {
  .pack-banner-epic {
    flex-direction: column;
    text-align: center;
  }
  .pack-banner-logo-img {
    width: 110px;
    height: 110px;
  }
  .packs-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   LAYOUT DEL VISOR INTERACTIVO DE PACKS (ESTILO LECCIONES)
   ============================================================ */

.pack-viewer-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 900px) {
  .pack-viewer-layout {
    grid-template-columns: 1fr;
  }
}

/* Sidebar de Materiales */
.pack-materials-sidebar {
  background: var(--card-bg);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 4.5px 5.5px 0 var(--shadow);
  overflow: hidden;
}

.materials-header-badge {
  background: var(--yellow);
  color: #111111;
  border-bottom: 3px solid var(--ink);
  padding: 14px 18px;
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 800;
}

body.dark-mode .materials-header-badge {
  background: #ca8a04;
  color: #ffffff;
}

.materials-list {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 8px;
  max-height: 600px;
  overflow-y: auto;
}

.material-item-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  background: var(--card-bg);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 2.5px 2.5px 0 var(--shadow);
  cursor: pointer;
  text-align: left;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.material-item-btn:hover {
  transform: translateY(-2px);
  box-shadow: 3.5px 3.5px 0 var(--shadow);
  background: var(--yellow-light);
}

.material-item-btn.active {
  background: #dbeafe;
  border-color: var(--ink);
  box-shadow: 3.5px 3.5px 0 var(--shadow);
  transform: translateY(-1px);
}

body.dark-mode .material-item-btn.active {
  background: #1e3a8a;
  color: #ffffff;
}

.material-item-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.material-item-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.material-item-name {
  font-family: 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.material-item-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Panel Principal de Previsualización */
.pack-preview-main {
  background: var(--card-bg);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 5px 6px 0 var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pack-viewer-header {
  padding: 16px 20px;
  background: var(--card-bg);
  border-bottom: 3px solid var(--ink);
}

.pack-preview-body {
  position: relative;
  min-height: 620px;
  background: #18181b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pack-iframe-wrap {
  width: 100%;
  height: 640px;
}

.pack-pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ============================================================
   REPRODUCTOR DE MÚSICA NEO-BRUTALISTA (BOOMBOX & PLAYLIST)
   ============================================================ */

.neo-boombox-container {
  width: 100%;
  max-width: 680px;
  margin: 16px auto 28px;
  box-sizing: border-box;
}

.neo-boombox-card {
  background: var(--card-bg, #ffffff);
  border: 3.5px solid var(--ink, #111111);
  border-radius: 24px;
  box-shadow: 6px 6px 0 var(--shadow, #111111);
  padding: 24px 26px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

body.dark-mode .neo-boombox-card {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 6px 6px 0 #000000;
}

/* Top Deck Bar */
.neo-deck-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px dashed rgba(0, 0, 0, 0.15);
}

body.dark-mode .neo-deck-top-bar {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.neo-deck-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.neo-badge {
  display: inline-flex;
  align-items: center;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 8px;
  border: 2px solid var(--ink, #111);
  box-shadow: 1.5px 1.5px 0 var(--ink, #111);
  letter-spacing: 0.3px;
}

.neo-badge-yellow { background: #FFE600; color: #111; }
.neo-badge-cyan { background: #38BDF8; color: #111; }

.neo-deck-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-neo-deck-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  color: #111111;
  border: 2.2px solid var(--ink, #111111);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  padding: 5px 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-neo-deck-action:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow, #111111);
}

.btn-neo-deck-action:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--shadow, #111111);
}

.btn-neo-deck-action.btn-neo-bt {
  background: #ecfeff;
  color: #0e7490;
  border-color: #0891b2;
}

body.dark-mode .btn-neo-deck-action {
  background: #0f172a;
  color: #f8fafc;
  border-color: #475569;
  box-shadow: 2px 2px 0 #000;
}

body.dark-mode .btn-neo-deck-action.btn-neo-bt {
  background: #164e63;
  color: #a5f3fc;
  border-color: #06b6d4;
}

/* Vinyl Visual Deck & Soundwave */
.neo-deck-visual-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10px 0 20px;
  position: relative;
}

.neo-vinyl-deck {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, #27272a 15%, #18181b 18%, #27272a 32%, #18181b 36%, #27272a 50%, #18181b 54%, #09090b 100%);
  border: 4px solid #111111;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 4px 4px 0 #111111;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.neo-vinyl-deck.is-spinning {
  animation: agapeVinylSpin 3.5s linear infinite;
}

@keyframes agapeVinylSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.neo-vinyl-groove {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

.neo-vinyl-groove.g1 { width: 100px; height: 100px; }
.neo-vinyl-groove.g2 { width: 70px; height: 70px; }

.neo-vinyl-center-label {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #FFE600;
  border: 2.5px solid #111;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
  text-align: center;
  z-index: 2;
}

.neo-vinyl-icon {
  font-size: 14px;
  line-height: 1;
}

.neo-vinyl-pack-name {
  font-family: 'Rubik', sans-serif;
  font-size: 7.5px;
  font-weight: 800;
  color: #111;
  max-width: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.neo-vinyl-spindle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #ffffff;
  border: 2px solid #111;
  border-radius: 50%;
  z-index: 3;
}

/* Equalizer Bouncing Bars */
.neo-soundwave-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 28px;
  margin-top: 14px;
}

.eq-bar {
  width: 6px;
  background: #111111;
  border-radius: 3px;
  height: 6px;
  transition: height 0.15s ease;
}

body.dark-mode .eq-bar {
  background: #38bdf8;
}

.neo-soundwave-bars.is-animating .eq-bar {
  animation: agapeEqBounce 0.8s ease-in-out infinite alternate;
}

.neo-soundwave-bars.is-animating .eq-bar.b1 { animation-delay: 0.1s; height: 22px; }
.neo-soundwave-bars.is-animating .eq-bar.b2 { animation-delay: 0.3s; height: 14px; }
.neo-soundwave-bars.is-animating .eq-bar.b3 { animation-delay: 0.2s; height: 26px; }
.neo-soundwave-bars.is-animating .eq-bar.b4 { animation-delay: 0.4s; height: 18px; }
.neo-soundwave-bars.is-animating .eq-bar.b5 { animation-delay: 0.15s; height: 24px; }
.neo-soundwave-bars.is-animating .eq-bar.b6 { animation-delay: 0.35s; height: 12px; }
.neo-soundwave-bars.is-animating .eq-bar.b7 { animation-delay: 0.25s; height: 20px; }

@keyframes agapeEqBounce {
  0% { height: 6px; }
  100% { height: 26px; }
}

/* Track Info */
.neo-track-info-wrap {
  text-align: center;
  margin-bottom: 18px;
}

.neo-track-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--text, #111111);
  margin: 0 0 6px;
  line-height: 1.2;
}

.neo-track-subtitle {
  font-size: 13px;
  color: var(--text-muted, #64748b);
  font-weight: 600;
  margin: 0;
}

/* Scrubber / Progress */
.neo-scrubber-block {
  margin-bottom: 22px;
}

.neo-progress-wrap {
  width: 100%;
  cursor: pointer;
  padding: 8px 0;
}

.neo-progress-bg {
  width: 100%;
  height: 10px;
  background: #f1f5f9;
  border: 2px solid var(--ink, #111111);
  border-radius: 8px;
  position: relative;
  overflow: visible;
}

body.dark-mode .neo-progress-bg {
  background: #0f172a;
}

.neo-progress-fill {
  height: 100%;
  background: #FFE600;
  border-radius: 6px 0 0 6px;
  pointer-events: none;
  transition: width 0.08s linear;
}

.neo-progress-handle {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border: 2.5px solid var(--ink, #111111);
  border-radius: 50%;
  box-shadow: 1.5px 1.5px 0 var(--ink, #111111);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left 0.08s linear;
}

.neo-time-row {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}

.neo-time-text {
  font-family: 'Rubik', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
}

/* Playback Control Buttons */
.neo-playback-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.neo-playback-main-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.neo-playback-sub-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.btn-neo-sub {
  height: 34px;
  padding: 0 14px;
  border-radius: 9999px;
  background: var(--card-bg, #ffffff);
  color: var(--text, #111111);
  border: 2px solid var(--ink, #111111);
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
  user-select: none;
}

.btn-neo-sub:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow, #111111);
  background: #fefce8;
}

.btn-neo-sub:active {
  transform: translate(1.5px, 1.5px);
  box-shadow: 0 0 0 var(--shadow, #111111);
}

body.dark-mode .btn-neo-sub {
  background: #0f172a;
  border-color: #475569;
  color: #f8fafc;
  box-shadow: 2px 2px 0 #000;
}

@media (max-width: 480px) {
  .neo-playback-main-row {
    gap: 8px;
  }
  .btn-neo-round {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }
  .btn-neo-master-play {
    width: 58px !important;
    height: 58px !important;
  }
  .neo-playback-sub-row {
    gap: 8px;
  }
  .btn-neo-sub {
    height: 32px;
    padding: 0 10px;
    font-size: 11.5px;
  }
}

.btn-neo-round {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--card-bg, #ffffff);
  color: var(--text, #111111);
  border: 2.5px solid var(--ink, #111111);
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}

.btn-neo-round:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3.5px 3.5px 0 var(--shadow, #111111);
}

.btn-neo-round:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--shadow, #111111);
}

.btn-neo-round.active {
  background: #fef08a !important;
  color: #854d0e !important;
}

body.dark-mode .btn-neo-round {
  background: #0f172a;
  border-color: #475569;
  box-shadow: 2.5px 2.5px 0 #000;
}

body.dark-mode .btn-neo-round.active {
  background: #854d0e !important;
  color: #fef08a !important;
}

.btn-neo-seek {
  position: relative;
}

.seek-label {
  position: absolute;
  font-family: 'Rubik', sans-serif;
  font-size: 8px;
  font-weight: 900;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
}

.btn-neo-master-play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #FFE600;
  color: #111111;
  border: 3.5px solid var(--ink, #111111);
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}

.btn-neo-master-play:hover {
  transform: translate(-2px, -2px) scale(1.04);
  box-shadow: 6px 6px 0 var(--shadow, #111111);
  background: #ffec3d;
}

.btn-neo-master-play:active {
  transform: translate(2.5px, 2.5px);
  box-shadow: 1.5px 1.5px 0 var(--shadow, #111111);
}

.loop-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 900;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #111;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Volume Deck */
.neo-volume-deck {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.btn-neo-mute {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text, #111);
  display: inline-flex;
  align-items: center;
}

.neo-volume-range {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 130px !important;
  height: 8px !important;
  background: #e2e8f0 !important;
  border: 2px solid var(--ink, #111111) !important;
  border-radius: 9999px !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  cursor: pointer !important;
}

body.dark-mode .neo-volume-range {
  background: #334155 !important;
  border-color: #475569 !important;
}

.neo-volume-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #FFE600 !important;
  border: 2px solid var(--ink, #111111) !important;
  box-shadow: 1.5px 1.5px 0 var(--shadow, #111111) !important;
  cursor: pointer !important;
  transition: transform 0.1s ease !important;
}

.neo-volume-range::-webkit-slider-thumb:hover {
  transform: scale(1.15) !important;
}

.neo-volume-range::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #FFE600 !important;
  border: 2px solid var(--ink, #111111) !important;
  box-shadow: 1.5px 1.5px 0 var(--shadow, #111111) !important;
  cursor: pointer !important;
}

/* Playlist Drawer & Material Song Playlist Toggle */
.material-item-row-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.material-item-row-wrap .material-item-btn {
  flex: 1;
  min-width: 0;
}

.btn-playlist-toggle-item {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #22c55e;
  color: #ffffff;
  border: 2.5px solid var(--ink, #111111);
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-playlist-toggle-item:hover {
  transform: scale(1.1) translateY(-1px);
  box-shadow: 3.5px 3.5px 0 var(--shadow, #111111);
  background: #16a34a;
}

.btn-playlist-toggle-item:active {
  transform: scale(0.94) translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--shadow, #111111);
}

.btn-playlist-toggle-item.is-in-playlist {
  background: #ef4444;
  color: #ffffff;
}

.btn-playlist-toggle-item.is-in-playlist:hover {
  background: #dc2626;
}

body.dark-mode .btn-playlist-toggle-item {
  border-color: #f8fafc;
  box-shadow: 2px 2px 0 #000000;
}

.neo-playlist-drawer {
  border-top: 2.5px solid var(--ink, #111);
  padding-top: 14px;
  margin-top: 10px;
}

.neo-playlist-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.neo-playlist-header-row .btn-neo-playlist-toggle {
  flex: 1;
}

.btn-neo-clear-playlist {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fee2e2;
  color: #b91c1c;
  border: 2px solid var(--ink, #111111);
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  border-radius: 12px;
  padding: 8px 12px;
  font-family: 'Fredoka', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.btn-neo-clear-playlist:hover {
  background: #ef4444;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 var(--shadow, #111111);
}

body.dark-mode .btn-neo-clear-playlist {
  background: #450a0a;
  color: #fca5a5;
  border-color: #ef4444;
  box-shadow: 2px 2px 0 #000000;
}

body.dark-mode .btn-neo-clear-playlist:hover {
  background: #dc2626;
  color: #ffffff;
}

.btn-neo-playlist-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  color: #111111;
  border: 2px solid var(--ink, #111111);
  border-radius: 12px;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  padding: 10px 14px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s ease;
}

body.dark-mode .btn-neo-playlist-toggle {
  background: #0f172a;
  color: #f8fafc;
  border-color: #475569;
  box-shadow: 2px 2px 0 #000;
}

.neo-playlist-items {
  max-height: 320px;
  overflow-y: auto;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}

.neo-playlist-items.is-collapsed {
  display: none;
}

.neo-playlist-empty-state {
  padding: 24px 16px;
  text-align: center;
  background: var(--bg-surface, #f8fafc);
  border: 2px dashed #94a3b8;
  border-radius: 12px;
  margin: 4px 0;
}

.neo-playlist-empty-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 8px;
}

.neo-playlist-empty-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #111111);
  margin-bottom: 6px;
}

.neo-playlist-empty-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted, #64748b);
  max-width: 320px;
  margin: 0 auto;
}

.neo-playlist-empty-desc .badge-mini-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #22c55e;
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  border-radius: 50%;
  border: 1px solid #111;
  margin: 0 2px;
  vertical-align: middle;
}

body.dark-mode .neo-playlist-empty-state {
  background: #0f172a;
  border-color: #334155;
}

.neo-playlist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--card-bg, #ffffff);
  border: 2px solid var(--ink, #111111);
  border-radius: 10px;
  box-shadow: 1.5px 1.5px 0 var(--shadow, #111111);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}

.neo-playlist-row:hover {
  transform: translateX(3px);
  background: #fefce8;
}

.neo-playlist-row.active-track {
  background: #fef08a !important;
  border-color: #111111 !important;
  box-shadow: 2.5px 2.5px 0 #111111 !important;
}

body.dark-mode .neo-playlist-row {
  background: #0f172a;
  border-color: #334155;
  box-shadow: 1.5px 1.5px 0 #000;
}

body.dark-mode .neo-playlist-row:hover {
  background: #1e293b;
}

body.dark-mode .neo-playlist-row.active-track {
  background: #854d0e !important;
  border-color: #fef08a !important;
}

.track-num-pill {
  font-family: 'Rubik', sans-serif;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  background: #f1f5f9;
  border: 1.5px solid #111;
  border-radius: 6px;
  flex-shrink: 0;
}

body.dark-mode .track-num-pill {
  background: #1e293b;
  color: #fff;
}

.track-row-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.track-row-title {
  display: block;
  font-family: 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text, #111);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-row-meta-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.track-pack-pill {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 1px 6px;
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #0284c7;
  border-radius: 4px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

body.dark-mode .track-pack-pill {
  background: #0c4a6e;
  color: #bae6fd;
  border-color: #38bdf8;
}

.track-row-meta {
  display: block;
  font-size: 11px;
  color: var(--text-muted, #64748b);
  font-weight: 600;
}

.mini-eq-indicator {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.mini-eq-indicator span {
  width: 3px;
  background: #111;
  border-radius: 1px;
  animation: agapeMiniEq 0.6s infinite alternate;
}

body.dark-mode .mini-eq-indicator span {
  background: #fff;
}

.mini-eq-indicator span:nth-child(1) { height: 6px; animation-delay: 0.1s; }
.mini-eq-indicator span:nth-child(2) { height: 12px; animation-delay: 0.3s; }
.mini-eq-indicator span:nth-child(3) { height: 8px; animation-delay: 0.2s; }

@keyframes agapeMiniEq {
  0% { height: 4px; }
  100% { height: 14px; }
}

.btn-track-play-inline {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFE600;
  color: #111;
  border: 1.5px solid #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s ease;
}

.btn-track-play-inline:hover {
  transform: scale(1.1);
}

.btn-playlist-remove-item {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fee2e2;
  color: #ef4444;
  border: 1.5px solid var(--ink, #111111);
  box-shadow: 1.5px 1.5px 0 var(--shadow, #111111);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.btn-playlist-remove-item:hover {
  background: #ef4444;
  color: #ffffff;
  transform: scale(1.1);
}

body.dark-mode .btn-playlist-remove-item {
  background: #450a0a;
  color: #fca5a5;
  border-color: #7f1d1d;
}

body.dark-mode .btn-playlist-remove-item:hover {
  background: #dc2626;
  color: #ffffff;
}

/* ============================================================
   GLOBAL FLOATING MINI-PLAYER (BACKGROUND AUDIO DOCK)
   ============================================================ */

.agape-mini-player {
  position: fixed;
  z-index: 9998;
  background: var(--card-bg, #ffffff);
  border: 3px solid var(--ink, #111111);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 4px 4px 0 var(--shadow, #111111);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  box-sizing: border-box;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  user-select: none;
}

/* Desktop position */
@media (min-width: 769px) {
  .agape-mini-player {
    bottom: 24px;
    right: 24px;
    width: 380px;
    max-width: calc(100vw - 32px);
  }
}

/* Mobile position - nicely above bottom bar */
@media (max-width: 768px) {
  .agape-mini-player {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    max-width: 480px;
    margin: 0 auto;
  }
}

body.dark-mode .agape-mini-player {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 4px 4px 0 #000000;
}

.mini-player-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 3.5px;
  background: #FFE600;
  transition: width 0.1s linear;
}

.mini-player-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.mini-player-disc-wrap {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.mini-player-vinyl {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #18181b;
  border: 2px solid #111;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-player-vinyl.is-spinning {
  animation: agapeVinylSpin 3s linear infinite;
}

.mini-vinyl-center {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FFE600;
  border: 1.5px solid #111;
}

.mini-player-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}

.mini-player-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #111);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-player-subtitle {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-player-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 8px;
}

.mini-btn-ctrl {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  color: var(--text, #111);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease;
}

.mini-btn-ctrl:active {
  transform: scale(0.9);
}

.mini-btn-play {
  background: #FFE600 !important;
  color: #111 !important;
  border: 2px solid #111 !important;
  box-shadow: 1.5px 1.5px 0 #111;
  border-radius: 50% !important;
}

.mini-btn-collapse {
  font-size: 13px;
  color: var(--text-muted, #64748b);
  border-radius: 8px;
}

.mini-btn-collapse:hover {
  background: #f1f5f9;
  color: var(--text, #111);
}

body.dark-mode .mini-btn-collapse:hover {
  background: #334155;
  color: #f8fafc;
}

.mini-btn-close {
  font-size: 13px;
  color: var(--text-muted, #64748b);
  border-radius: 8px;
}

.mini-btn-close:hover {
  background: #fee2e2;
  color: #ef4444;
}

body.dark-mode .mini-btn-close:hover {
  background: #450a0a;
  color: #f87171;
}

/* ============================================================
   FLOATING DRAGGABLE VINYL DISC BUBBLE
   ============================================================ */
.agape-floating-disc {
  position: fixed;
  z-index: 9999;
  width: 60px;
  height: 60px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  transition: transform 0.15s ease, opacity 0.2s ease;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  right: 18px;
}

.agape-floating-disc.is-dragging {
  cursor: grabbing !important;
  transform: scale(1.08);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
  transition: none !important;
}

.agape-floating-disc:hover:not(.is-dragging) {
  transform: scale(1.06);
}

.floating-disc-vinyl {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, #27272a 0%, #18181b 50%, #09090b 100%);
  border: 3px solid #111111;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12),
              inset 0 0 0 6px rgba(0, 0, 0, 0.4),
              inset 0 0 0 10px rgba(255, 255, 255, 0.08),
              inset 0 0 0 14px rgba(0, 0, 0, 0.5),
              2.5px 2.5px 0 var(--shadow, #111111);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.floating-disc-vinyl.is-spinning {
  animation: agapeVinylSpin 3s linear infinite;
}

.floating-disc-center {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFE600;
  border: 2px solid #111111;
  box-shadow: inset 0 0 0 2.5px #111111, inset 0 0 0 4px #FFE600;
  position: relative;
  z-index: 2;
}

.floating-disc-eq-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(255, 230, 0, 0.6);
  opacity: 0;
  pointer-events: none;
}

.floating-disc-vinyl.is-spinning .floating-disc-eq-pulse {
  animation: agapePulseDisc 2s ease-out infinite;
}

@keyframes agapePulseDisc {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { opacity: 0.4; }
  100% { transform: scale(1.35); opacity: 0; }
}

.floating-disc-play-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #22c55e;
  color: #ffffff;
  border: 2px solid #111111;
  box-shadow: 1.5px 1.5px 0 var(--shadow, #111111);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

body.dark-mode .floating-disc-play-badge {
  box-shadow: 1.5px 1.5px 0 #000000;
}

/* Bluetooth Helper Modal */
.agape-bt-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10005;
  padding: 16px;
}

.agape-bt-modal-card {
  background: var(--card-bg, #ffffff);
  border: 3.5px solid var(--ink, #111111);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--shadow, #111111);
  max-width: 440px;
  width: 100%;
  padding: 24px;
  box-sizing: border-box;
}

body.dark-mode .agape-bt-modal-card {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 6px 6px 0 #000;
}

.agape-bt-modal-card h3 {
  font-family: 'Fredoka', sans-serif;
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.agape-bt-modal-card ol {
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 600;
  margin: 12px 0 20px;
  color: var(--text, #111);
}

.btn-bt-modal-close {
  width: 100%;
  background: #FFE600;
  color: #111;
  border: 2.5px solid #111;
  border-radius: 12px;
  box-shadow: 3px 3px 0 #111;
  padding: 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}


/* ============================================================
   TARJETA ÉPICA ARCOÍRIS FLOTANTE CON SOMBRA Y DESTELLOS
   ============================================================ */

.rainbow-pack-card-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15px 0 35px;
  width: 100%;
  max-width: 380px;
}

/* Tarjeta Flotante (Estatica, sin movimiento continuo) */
.rainbow-floating-card {
  width: 100%;
  height: auto !important;
  max-height: none !important;
  border: 3.5px solid var(--ink) !important;
  border-radius: 24px;
  box-shadow: 6px 7px 0 var(--shadow);
  animation: none !important;
  background: var(--card-bg);
  position: relative;
  z-index: 2;
  overflow: visible !important;
}

/* Solo las tarjetas de Jesús flotan y se mueven */
.welcome-card.card-jesus-epic,
.rainbow-floating-card.card-jesus-epic,
.card.card-jesus-epic {
  animation: jesusCardLevitate 3.4s ease-in-out infinite !important;
}

/* Borde Arcoíris Animado */
.rainbow-floating-card::before {
  content: '';
  position: absolute;
  top: -3.5px;
  left: -3.5px;
  right: -3.5px;
  bottom: -3.5px;
  border-radius: 24px;
  padding: 3.5px;
  background: linear-gradient(135deg, #ff5252, #fb923c, #ffcc00, #34d399, #38bdf8, #c084fc, #ff5252);
  background-size: 300% 300%;
  animation: rainbowBorderMove 5s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
}

@keyframes rainbowBorderMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes cardFloatLoop {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-14px) rotate(-0.5deg);
  }
}

/* Sombra de Suelo Oculta si la tarjeta no flota */
.pack-ground-shadow {
  display: none !important;
}

/* Destellos en los costados (Sparkles) */
.pack-sparkle {
  position: absolute;
  font-size: 26px;
  color: #ffcc00;
  text-shadow: 2px 2px 0 #111111;
  z-index: 10;
  pointer-events: none;
  animation: sparkleTwinkle 2.4s ease-in-out infinite alternate;
}

.sparkle-top-left {
  top: 10px;
  left: -22px;
  font-size: 28px;
  color: #ff5252;
  animation-delay: 0s;
}

.sparkle-top-right {
  top: 35px;
  right: -24px;
  font-size: 30px;
  color: #38bdf8;
  animation-delay: 0.6s;
}

.sparkle-mid-left {
  top: 45%;
  left: -28px;
  font-size: 26px;
  color: #34d399;
  animation-delay: 1.2s;
}

.sparkle-bottom-right {
  bottom: 65px;
  right: -22px;
  font-size: 28px;
  color: #c084fc;
  animation-delay: 1.8s;
}

.sparkle-bottom-left {
  bottom: 25px;
  left: -18px;
  font-size: 22px;
  color: #ffcc00;
  animation-delay: 0.9s;
}

@keyframes sparkleTwinkle {
  0% {
    transform: scale(0.75) rotate(-10deg);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.35) rotate(15deg);
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(255, 204, 0, 0.9));
  }
}


/* THUMBNAIL DE LA TARJETA DEL PACK */
.pack-card-thumb-wrap {
  width: 100%;
  height: 160px !important;
  min-height: 160px !important;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 3px 3px 0 var(--shadow);
  flex-shrink: 0;
}

body.dark-mode .pack-card-thumb-wrap {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.pack-card-logo-img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 82% !important;
  max-height: 82% !important;
  object-fit: contain;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.15));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin: 0 auto;
}

.card-pack-epic:hover .pack-card-logo-img {
  transform: scale(1.08) rotate(-1.5deg);
}


/* ============================================================
   GRID DE UNIDADES DE CAMPEONES (LEVEL 2)
   ============================================================ */

.units-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 24px;
}

.unit-card {
  background: var(--card-bg);
  border: 3.5px solid var(--ink);
  border-radius: 20px;
  padding: 24px 22px 20px;
  box-shadow: 5.5px 6.5px 0 var(--shadow);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s;
}

.unit-card:hover {
  transform: translateY(-4px);
  box-shadow: 7px 9px 0 var(--shadow);
}

.unit-card-badge {
  display: inline-block;
  background: var(--ink);
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 10px;
  margin-bottom: 12px;
  align-self: flex-start;
}

.unit-card-title {
  margin: 0 0 8px;
  font-family: 'Fredoka', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
}

.unit-card-desc {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-muted);
  font-weight: 600;
  flex: 1;
}

.unit-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 14px;
  border-top: 2px dashed rgba(0,0,0,0.12);
  margin-top: auto;
}

body.dark-mode .unit-card-footer {
  border-top-color: rgba(255,255,255,0.15);
}

.unit-count {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.btn-enter-unit-card {
  background: var(--yellow);
  color: #111111;
  padding: 8px 16px;
  font-size: 13px;
}

.pack-banner-trophy-badge {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.2));
}

.pack-thumb-overlay-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: var(--ink);
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--shadow);
  z-index: 10;
}

.pack-thumb-pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
}

/* ============================================================= */
/* DESIGN MATCH: NUEVO DISEÑO PACKS ESPECIALES (NEO-BRUTALIST MULTICOLOR) */
/* ============================================================= */
.rainbow-pack-card-container {
  position: relative;
  padding: 4px;
  background: linear-gradient(135deg, #FF5252, #FFCC00, #34D399, #38BDF8, #C084FC);
  background-size: 300% 300%;
  animation: rainbowBorderMove 6s ease infinite;
  border-radius: 24px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 6px 6px 0 #111111;
}

.rainbow-floating-card {
  background: #FFFFFF !important;
  border: 3.5px solid #111111 !important;
  border-radius: 20px !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.card-fav-star-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2.5px solid #111111;
  box-shadow: 2.5px 2.5px 0 #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 15;
  transition: transform 0.15s ease, background 0.15s ease;
}

.card-fav-star-btn:hover {
  transform: scale(1.1);
  background: #FEF08A;
}

.pack-card-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
}

.btn-pack-action-open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  background: #2563EB;
  color: #FFFFFF;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  border: 3px solid #111111;
  border-radius: 14px;
  box-shadow: 3px 3px 0 #111111;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-pack-action-open:hover {
  transform: translateY(-2px);
  box-shadow: 4.5px 4.5px 0 #111111;
  background: #1D4ED8;
}

.btn-pack-action-open:active {
  transform: translateY(1px);
  box-shadow: 1.5px 1.5px 0 #111111;
}

.btn-pack-action-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  background: #10B981;
  color: #FFFFFF;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  border: 3px solid #111111;
  border-radius: 14px;
  box-shadow: 3px 3px 0 #111111;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-pack-action-share:hover {
  transform: translateY(-2px);
  box-shadow: 4.5px 4.5px 0 #111111;
  background: #059669;
}

.btn-pack-action-share:active {
  transform: translateY(1px);
  box-shadow: 1.5px 1.5px 0 #111111;
}

body.dark-mode .rainbow-floating-card {
  background: #1e293b !important;
  color: #FFFFFF;
}

body.dark-mode .pack-card-main-title {
  color: #FFFFFF !important;
}

body.dark-mode .pack-card-main-desc {
  color: #94A3B8 !important;
}

body.dark-mode .pack-card-meta-line {
  color: #F8FAFC !important;
}

/* ============================================================= */
/* CLEAN COMPACT STATIC CARDS LAYOUT FOR PACKS ESPECIALES */
/* ============================================================= */
.packs-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  padding: 4px !important;
}

@media (max-width: 1350px) {
  .packs-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 980px) {
  .packs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .packs-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Override .welcome-card defaults when used inside packs grid */
.packs-grid .rainbow-pack-card-container {
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  animation: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.packs-grid .welcome-card.rainbow-floating-card {
  /* Override the carousel fixed sizing from .welcome-card */
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  /* Reset padding — card body handles its own */
  padding: 0 !important;
  /* Card styling */
  animation: none !important;
  transform: none !important;
  background: #FFFFFF !important;
  border: 2px solid #111111 !important;
  border-radius: 16px !important;
  box-shadow: 4px 4px 0 #111111 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  position: relative !important;
  cursor: default !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  will-change: auto !important;
  filter: none !important;
  opacity: 1 !important;
}

.packs-grid .welcome-card.rainbow-floating-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 6px 6px 0 #111111 !important;
}

/* Hide all decorative elements inside packs grid */
.packs-grid .pack-sparkle,
.packs-grid .pack-ground-shadow,
.packs-grid .card-binder-clip,
.packs-grid .card-corner-sticker {
  display: none !important;
}

/* Thumbnail area */
.pack-card-thumb-wrap {
  position: relative;
  height: 140px;
  overflow: hidden;
  background: #1e293b;
  border-radius: 16px 16px 0 0;
  flex-shrink: 0;
}

.pack-thumb-pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
}

.pack-thumb-overlay-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: 'Fredoka', sans-serif;
}

/* Star button on thumbnail */
.card-fav-star-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #111111;
  box-shadow: 2px 2px 0 #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 15;
  transition: transform 0.15s ease, background 0.15s ease;
}

.card-fav-star-btn:hover {
  transform: scale(1.1);
  background: #FEF08A;
}

/* Card body content */
.pack-card-body-content {
  padding: 12px 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Pills row */
.pack-card-pills-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.pack-pill-tag {
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 14px;
  border: 2px solid #111;
  box-shadow: 1.5px 1.5px 0 #111;
  white-space: nowrap;
}

/* Title */
.pack-card-main-title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #111 !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.25 !important;
  font-family: 'Fredoka', sans-serif !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0;
}

/* ID + count line */
.pack-card-meta-line {
  font-family: 'Fredoka', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 6px;
  flex-shrink: 0;
}

/* Description */
.pack-card-main-desc {
  font-size: 0.78rem !important;
  color: #4B5563 !important;
  line-height: 1.35 !important;
  margin: 0 0 10px 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 500 !important;
  flex-shrink: 0;
}

/* Action buttons row */
.pack-card-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  flex-shrink: 0;
}

.btn-pack-action-open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  background: #2563EB;
  color: #FFFFFF;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  border: 2.5px solid #111111;
  border-radius: 12px;
  box-shadow: 2.5px 2.5px 0 #111111;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-pack-action-open:hover {
  transform: translateY(-1px);
  box-shadow: 3.5px 3.5px 0 #111111;
  background: #1D4ED8;
}

.btn-pack-action-open:active {
  transform: translateY(1px);
  box-shadow: 1px 1px 0 #111111;
}

.btn-pack-action-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
  background: #10B981;
  color: #FFFFFF;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  border: 2.5px solid #111111;
  border-radius: 12px;
  box-shadow: 2.5px 2.5px 0 #111111;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-pack-action-share:hover {
  transform: translateY(-1px);
  box-shadow: 3.5px 3.5px 0 #111111;
  background: #059669;
}

.btn-pack-action-share:active {
  transform: translateY(1px);
  box-shadow: 1px 1px 0 #111111;
}

/* ============================================================= */
/* HOMOLOGACIÓN DE BOTONES Y BOTONERA AL ADN DE DISEÑO NEO-BRUTALISTA */
/* ============================================================= */

.btn-back-packs {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  color: #111111 !important;
  border: 2px solid #111111 !important;
  border-radius: 8px !important;
  padding: 9px 18px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 2.5px 2.5px 0 #111111 !important;
  margin-bottom: 20px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

.btn-back-packs:hover {
  transform: translateY(-2px) !important;
  background: #FEF08A !important;
  box-shadow: 4.5px 4.5px 0 #111111 !important;
}

.btn-back-packs:active {
  transform: translateY(1px) !important;
  box-shadow: 1.5px 1.5px 0 #111111 !important;
}

/* Tabs Navigation in Viewer (Styled in Pack Detail section) */

/* Unit Cards & Story Cards Action Button */
.btn-enter-unit-card {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px 16px !important;
  background: #FEF08A !important;
  color: #111111 !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  border: 2px solid #111111 !important;
  border-radius: 12px !important;
  box-shadow: 2.5px 2.5px 0 #111111 !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

.btn-enter-unit-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 4.5px 4.5px 0 #111111 !important;
  background: #FDE047 !important;
}

.btn-enter-unit-card:active {
  transform: translateY(1px) !important;
  box-shadow: 1.5px 1.5px 0 #111111 !important;
}

/* Viewer Action Buttons (Proyectar, Imprimir, Descargar) */
.viewer-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.btn-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 14px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  border: 2px solid #111111 !important;
  border-radius: 12px !important;
  box-shadow: 2.5px 2.5px 0 #111111 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

.btn-action.btn-presentation {
  background: #8B5CF6 !important;
  color: #FFFFFF !important;
}

.btn-action.btn-presentation:hover {
  background: #7C3AED !important;
  transform: translateY(-1px) !important;
  box-shadow: 3.5px 3.5px 0 #111111 !important;
}

.btn-action.btn-print-action {
  background: #10B981 !important;
  color: #FFFFFF !important;
}

.btn-action.btn-print-action:hover {
  background: #059669 !important;
  transform: translateY(-1px) !important;
  box-shadow: 3.5px 3.5px 0 #111111 !important;
}

.btn-action.btn-secondary {
  background: #FFFFFF !important;
  color: #111111 !important;
}

.btn-action.btn-secondary:hover {
  background: #F3F4F6 !important;
  transform: translateY(-1px) !important;
  box-shadow: 3.5px 3.5px 0 #111111 !important;
}

/* ============================================================= */
/* CARTA LEGENDARIA DORADA (PACKS ANUALES CON 1 AÑO DE RECURSOS) */
/* ============================================================= */
.welcome-card.rainbow-floating-card.card-legendary,
.packs-grid .welcome-card.rainbow-floating-card.card-legendary,
.card-legendary {
  border: 3.5px solid #111111 !important;
  background: linear-gradient(135deg, #FEF9C3 0%, #FDE047 40%, #F59E0B 85%, #D97706 100%) !important;
  box-shadow: 5px 5px 0 #B45309, 9px 9px 0 #111111 !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease !important;
}

/* EFECTO DE RESPLANDOR DORADO AL HOVER (SHIMMER) */
.welcome-card.rainbow-floating-card.card-legendary::before,
.packs-grid .welcome-card.rainbow-floating-card.card-legendary::before,
.card-legendary::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -150%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 45%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.45) 55%,
    transparent 100%
  );
  transform: rotate(25deg);
  pointer-events: none;
  transition: left 0.75s ease;
  z-index: 5;
}

.welcome-card.rainbow-floating-card.card-legendary:hover::before,
.packs-grid .welcome-card.rainbow-floating-card.card-legendary:hover::before,
.card-legendary:hover::before {
  left: 100%;
}

.welcome-card.rainbow-floating-card.card-legendary:hover,
.packs-grid .welcome-card.rainbow-floating-card.card-legendary:hover,
.card-legendary:hover {
  transform: translateY(-5px) scale(1.015) !important;
  box-shadow: 7px 7px 0 #B45309, 12px 12px 0 #111111 !important;
}

/* Cinta Flotante Legendaria */
.legendary-banner-ribbon {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  background: #111111;
  color: #FDE047;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 5px 12px;
  border: 2px solid #F59E0B;
  border-radius: 8px;
  box-shadow: 2.5px 2.5px 0 #111111;
  letter-spacing: 0.5px;
}

/* Pills para la Carta Legendaria */
.card-legendary .pack-pill-tag {
  border: 2px solid #111111 !important;
  font-weight: 800 !important;
}

.pack-pill-tag.legend-pill {
  background: #111111 !important;
  color: #FDE047 !important;
  border: 2px solid #F59E0B !important;
  font-weight: 800 !important;
}

/* Ajustes de contraste para la tarjeta dorada */
.card-legendary .pack-card-main-title {
  color: #111111 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.card-legendary .pack-card-main-desc {
  color: #1F2937 !important;
  font-weight: 600 !important;
}

.card-legendary .pack-card-meta-line {
  color: #111111 !important;
  font-weight: 800 !important;
}

/* ============================================================= */
/* BOTÓN ESTRELLA DE FAVORITO (MI LECCIÓN) EN PACKS */
/* ============================================================= */
.card-fav-star-btn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 12 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 2px solid #111111 !important;
  box-shadow: 2.5px 2.5px 0 #111111 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
}

.card-fav-star-btn:hover {
  transform: scale(1.12) translateY(-1px) !important;
  background: #FEF08A !important;
  box-shadow: 3.5px 3.5px 0 #111111 !important;
}

.card-fav-star-btn:active {
  transform: scale(0.95) !important;
  box-shadow: 1px 1px 0 #111111 !important;
}

.card-fav-star-btn.active {
  background: #FEF08A !important;
  border-color: #111111 !important;
}




.card-legendary .btn-pack-action-open { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; color: #fff !important; border: 2px solid #78350f !important; box-shadow: 3px 3px 0 #78350f !important; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); }
.card-legendary .btn-pack-action-open:hover { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important; color: #000 !important; text-shadow: none !important; transform: translate(-2px, -2px) !important; box-shadow: 5px 5px 0 #78350f, 0 0 12px rgba(245, 158, 11, 0.6) !important; }
.card-legendary .btn-pack-action-share { background: #111111 !important; color: #FDE047 !important; border: 2px solid #F59E0B !important; box-shadow: 3px 3px 0 #B45309 !important; }
.card-legendary .btn-pack-action-share:hover { background: #27272A !important; transform: translate(-2px, -2px) !important; box-shadow: 5px 5px 0 #B45309 !important; }

/* ============================================================= */
/* NEO-BRUTALIST GAMES MODULE OVERRIDES */
/* ============================================================= */
.game-view-header .btn-secondary { border: 2.5px solid #111 !important; box-shadow: 3px 3px 0 #111 !important; border-radius: 10px !important; font-weight: 800 !important; }
.game-config-box, .race-verse-display, .race-winners-section, .quiz-active-board { border: 3.5px solid #111 !important; box-shadow: 6px 6px 0 #111 !important; border-radius: 16px !important; }
.game-config-box input.ml-date-input, .race-winners-section input.ml-search-students, .quiz-winner-section input.ml-search-students { border: 2.5px solid #111 !important; box-shadow: 3px 3px 0 #111 !important; border-radius: 10px !important; }
.game-config-box .btn-action, .race-winners-section .btn-action, .quiz-setup-actions .btn-action, .quiz-nav-row .btn-action { background: #FEF08A !important; color: #111 !important; border: 3px solid #111 !important; box-shadow: 4px 4px 0 #111 !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 900 !important; }
.game-config-box .btn-action:hover, .race-winners-section .btn-action:hover, .quiz-setup-actions .btn-action:hover, .quiz-nav-row .btn-action:hover { transform: translate(-2px, -2px) !important; box-shadow: 6px 6px 0 #111 !important; background: #FDE047 !important; }
.race-winners-section .race-btn-finish { background: #4ADE80 !important; }
.race-winners-section .race-btn-finish:hover { background: #22C55E !important; }

/* ============================================================= */
/* URGENT FIXES: DARK MODE & MOBILE (UX AUDIT) */
/* ============================================================= */
body.dark-mode .game-view-header h2 { color: #f8fafc !important; }
body.dark-mode .game-view-header .btn-secondary { background: #334155 !important; color: #f8fafc !important; border-color: #475569 !important; box-shadow: 3px 3px 0 #0f172a !important; }

body.dark-mode .game-config-box, 
body.dark-mode .race-verse-display, 
body.dark-mode .race-winners-section, 
body.dark-mode .quiz-active-board { 
  background: #1e293b !important; 
  border-color: #334155 !important; 
  box-shadow: 6px 6px 0 #0f172a !important;
  color: #f8fafc !important;
}

body.dark-mode .game-config-box input.ml-date-input, 
body.dark-mode .race-winners-section input.ml-search-students, 
body.dark-mode .quiz-winner-section input.ml-search-students,
body.dark-mode .quiz-topic-textarea,
body.dark-mode .quiz-card-header input { 
  background: #334155 !important;
  color: #f8fafc !important;
  border-color: #475569 !important; 
  box-shadow: 3px 3px 0 #0f172a !important; 
}

body.dark-mode .game-config-box .btn-action, 
body.dark-mode .race-winners-section .btn-action, 
body.dark-mode .quiz-setup-actions .btn-action, 
body.dark-mode .quiz-nav-row .btn-action { 
  background: #0284c7 !important; 
  color: #f8fafc !important; 
  border-color: #0c4a6e !important; 
  box-shadow: 4px 4px 0 #0f172a !important; 
}

body.dark-mode .game-config-box .btn-action:hover, 
body.dark-mode .race-winners-section .btn-action:hover, 
body.dark-mode .quiz-setup-actions .btn-action:hover, 
body.dark-mode .quiz-nav-row .btn-action:hover { 
  background: #0369a1 !important; 
  box-shadow: 6px 6px 0 #0f172a !important; 
}

body.dark-mode .race-winners-section .race-btn-finish { 
  background: #059669 !important; 
}
body.dark-mode .race-winners-section .race-btn-finish:hover { 
  background: #047857 !important; 
}

body.dark-mode .quiz-pts-badge {
  background: #1e3a8a !important;
  color: #bfdbfe !important;
  border-color: #1e3a8a !important;
}
.packs-grid .welcome-card.rainbow-floating-card.card-legendary::before,
.card-legendary::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -150%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 45%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.45) 55%,
    transparent 100%
  );
  transform: rotate(25deg);
  pointer-events: none;
  transition: left 0.75s ease;
  z-index: 5;
}

.welcome-card.rainbow-floating-card.card-legendary:hover::before,
.packs-grid .welcome-card.rainbow-floating-card.card-legendary:hover::before,
.card-legendary:hover::before {
  left: 100%;
}

.welcome-card.rainbow-floating-card.card-legendary:hover,
.packs-grid .welcome-card.rainbow-floating-card.card-legendary:hover,
.card-legendary:hover {
  transform: translateY(-5px) scale(1.015) !important;
  box-shadow: 7px 7px 0 #B45309, 12px 12px 0 #111111 !important;
}

/* Cinta Flotante Legendaria */
.legendary-banner-ribbon {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  background: #111111;
  color: #FDE047;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 5px 12px;
  border: 2px solid #F59E0B;
  border-radius: 8px;
  box-shadow: 2.5px 2.5px 0 #111111;
  letter-spacing: 0.5px;
}

/* Pills para la Carta Legendaria */
.card-legendary .pack-pill-tag {
  border: 2px solid #111111 !important;
  font-weight: 800 !important;
}

.pack-pill-tag.legend-pill {
  background: #111111 !important;
  color: #FDE047 !important;
  border: 2px solid #F59E0B !important;
  font-weight: 800 !important;
}

/* Ajustes de contraste para la tarjeta dorada */
.card-legendary .pack-card-main-title {
  color: #111111 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.card-legendary .pack-card-main-desc {
  color: #1F2937 !important;
  font-weight: 600 !important;
}

.card-legendary .pack-card-meta-line {
  color: #111111 !important;
  font-weight: 800 !important;
}

/* ============================================================= */
/* BOTÓN ESTRELLA DE FAVORITO (MI LECCIÓN) EN PACKS */
/* ============================================================= */
.card-fav-star-btn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 12 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 2px solid #111111 !important;
  box-shadow: 2.5px 2.5px 0 #111111 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
}

.card-fav-star-btn:hover {
  transform: scale(1.12) translateY(-1px) !important;
  background: #FEF08A !important;
  box-shadow: 3.5px 3.5px 0 #111111 !important;
}

.card-fav-star-btn:active {
  transform: scale(0.95) !important;
  box-shadow: 1px 1px 0 #111111 !important;
}

.card-fav-star-btn.active {
  background: #FEF08A !important;
  border-color: #111111 !important;
}




.card-legendary .btn-pack-action-open { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; color: #fff !important; border: 2px solid #78350f !important; box-shadow: 3px 3px 0 #78350f !important; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); }
.card-legendary .btn-pack-action-open:hover { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important; color: #000 !important; text-shadow: none !important; transform: translate(-2px, -2px) !important; box-shadow: 5px 5px 0 #78350f, 0 0 12px rgba(245, 158, 11, 0.6) !important; }
.card-legendary .btn-pack-action-share { background: #111111 !important; color: #FDE047 !important; border: 2px solid #F59E0B !important; box-shadow: 3px 3px 0 #B45309 !important; }
.card-legendary .btn-pack-action-share:hover { background: #27272A !important; transform: translate(-2px, -2px) !important; box-shadow: 5px 5px 0 #B45309 !important; }

/* ============================================================= */
/* NEO-BRUTALIST GAMES MODULE OVERRIDES */
/* ============================================================= */
.game-view-header .btn-secondary { border: 2.5px solid #111 !important; box-shadow: 3px 3px 0 #111 !important; border-radius: 10px !important; font-weight: 800 !important; }
.game-config-box, .race-verse-display, .race-winners-section, .quiz-active-board { border: 3.5px solid #111 !important; box-shadow: 6px 6px 0 #111 !important; border-radius: 16px !important; }
.game-config-box input.ml-date-input, .race-winners-section input.ml-search-students, .quiz-winner-section input.ml-search-students { border: 2.5px solid #111 !important; box-shadow: 3px 3px 0 #111 !important; border-radius: 10px !important; }
.game-config-box .btn-action, .race-winners-section .btn-action, .quiz-setup-actions .btn-action, .quiz-nav-row .btn-action { background: #FEF08A !important; color: #111 !important; border: 3px solid #111 !important; box-shadow: 4px 4px 0 #111 !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 900 !important; }
.game-config-box .btn-action:hover, .race-winners-section .btn-action:hover, .quiz-setup-actions .btn-action:hover, .quiz-nav-row .btn-action:hover { transform: translate(-2px, -2px) !important; box-shadow: 6px 6px 0 #111 !important; background: #FDE047 !important; }
.race-winners-section .race-btn-finish { background: #4ADE80 !important; }
.race-winners-section .race-btn-finish:hover { background: #22C55E !important; }

/* ============================================================= */
/* URGENT FIXES: DARK MODE & MOBILE (UX AUDIT) */
/* ============================================================= */
body.dark-mode .game-view-header h2 { color: #f8fafc !important; }
body.dark-mode .game-view-header .btn-secondary { background: #334155 !important; color: #f8fafc !important; border-color: #475569 !important; box-shadow: 3px 3px 0 #0f172a !important; }

body.dark-mode .game-config-box, 
body.dark-mode .race-verse-display, 
body.dark-mode .race-winners-section, 
body.dark-mode .quiz-active-board { 
  background: #1e293b !important; 
  border-color: #334155 !important; 
  box-shadow: 6px 6px 0 #0f172a !important;
  color: #f8fafc !important;
}

body.dark-mode .game-config-box input.ml-date-input, 
body.dark-mode .race-winners-section input.ml-search-students, 
body.dark-mode .quiz-winner-section input.ml-search-students,
body.dark-mode .quiz-topic-textarea,
body.dark-mode .quiz-card-header input { 
  background: #334155 !important;
  color: #f8fafc !important;
  border-color: #475569 !important; 
  box-shadow: 3px 3px 0 #0f172a !important; 
}

body.dark-mode .game-config-box .btn-action, 
body.dark-mode .race-winners-section .btn-action, 
body.dark-mode .quiz-setup-actions .btn-action, 
body.dark-mode .quiz-nav-row .btn-action { 
  background: #0284c7 !important; 
  color: #f8fafc !important; 
  border-color: #0c4a6e !important; 
  box-shadow: 4px 4px 0 #0f172a !important; 
}

body.dark-mode .game-config-box .btn-action:hover, 
body.dark-mode .race-winners-section .btn-action:hover, 
body.dark-mode .quiz-setup-actions .btn-action:hover, 
body.dark-mode .quiz-nav-row .btn-action:hover { 
  background: #0369a1 !important; 
  box-shadow: 6px 6px 0 #0f172a !important; 
}

body.dark-mode .race-winners-section .race-btn-finish { 
  background: #059669 !important; 
}
body.dark-mode .race-winners-section .race-btn-finish:hover { 
  background: #047857 !important; 
}

body.dark-mode .quiz-pts-badge {
  background: #1e3a8a !important;
  color: #bfdbfe !important;
  border-color: #1e3a8a !important;
}

@media (max-width: 600px) {
  .pack-tabs-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 10px !important;
    justify-content: flex-start !important;
  }
}

/* ============================================================= */
/* UX INNOVATIONS: MOBILE BOTTOM BAR, TEXT TRUNCATION, ZEN MODE */
/* ============================================================= */

.text-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-block; }
.ml-search-students, #quizTopicInput { text-overflow: ellipsis; }

.mobile-bottom-bar { display: none; }
@media (max-width: 768px) {
  .header-nav-pills { display: none !important; }
  body { padding-bottom: 85px; }
  .mobile-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 12px;
    left: 12px;
    right: 12px;
    height: auto;
    background: transparent;
    border: none;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    pointer-events: none;
  }

  .mobile-bar-dock {
    position: relative;
    pointer-events: auto;
    width: 100%;
    max-width: 480px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--card-bg, #ffffff);
    border: 2.5px solid var(--ink, #111111);
    border-radius: 26px;
    padding: 6px;
    gap: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), 4px 4px 0 var(--shadow, #111111);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    user-select: none;
  }

  .mobile-tab-glider {
    position: absolute;
    top: 0;
    left: 0;
    background: #FEF08A;
    border: 2px solid var(--ink, #111111);
    border-radius: 18px;
    box-shadow: 2px 2px 0 var(--shadow, #111111);
    transition: transform 0.38s cubic-bezier(0.34, 1.35, 0.64, 1), width 0.32s cubic-bezier(0.34, 1.2, 0.64, 1), height 0.3s ease, opacity 0.2s ease, background-color 0.3s ease;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
  }

  .mobile-bar-dock[data-active-tab="home"] .mobile-tab-glider { background: #FEF08A; }
  .mobile-bar-dock[data-active-tab="lessons"] .mobile-tab-glider { background: #BFDBFE; }
  .mobile-bar-dock[data-active-tab="favorites"] .mobile-tab-glider { background: #FED7AA; }
  .mobile-bar-dock[data-active-tab="planner"] .mobile-tab-glider { background: #C7D2FE; }

  body.dark-mode .mobile-bar-dock {
    background: #0f172a;
    border-color: #334155;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), 4px 4px 0 #000000;
  }

  body.dark-mode .mobile-tab-glider {
    background: #1e293b !important;
    border-color: #94a3b8;
    box-shadow: 2px 2px 0 #000000;
  }

  .bottom-tab-btn {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted, #64748b);
    font-size: 11.5px;
    font-weight: 700;
    font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    gap: 3px;
    padding: 6px 10px;
    flex: 1;
    border-radius: 18px;
    transition: color 0.2s ease, transform 0.2s ease;
  }

  .bottom-tab-btn:hover {
    color: var(--ink, #111111);
  }

  .bottom-tab-btn.active {
    color: var(--ink, #111111);
    font-weight: 800;
    transform: translateY(-2px);
  }

  body.dark-mode .bottom-tab-btn {
    color: #94a3b8;
  }

  body.dark-mode .bottom-tab-btn:hover,
  body.dark-mode .bottom-tab-btn.active {
    color: #f8fafc;
  }
}


body.zen-mode header { display: none !important; }
body.zen-mode .mobile-bottom-bar { display: none !important; }
body.zen-mode { padding-bottom: 0 !important; }
body.zen-mode .pack-viewer-content { margin-top: 0 !important; max-width: 800px; margin: 0 auto; box-shadow: none !important; border: none !important; }
body.zen-mode .pack-viewer-header { background: transparent !important; border-bottom: none !important; box-shadow: none !important; }
.btn-zen-mode { position: fixed; bottom: 20px; right: 20px; background: var(--ink); color: #fff; border: 2px solid var(--ink); border-radius: 50px; padding: 12px 20px; font-weight: 800; z-index: 9999; box-shadow: 4px 4px 0 rgba(17,17,17,0.2); cursor: pointer; transition: 0.2s; }
.btn-zen-mode:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(17,17,17,0.3); }
body.dark-mode .btn-zen-mode { background: #334155; border-color: #0f172a; color: #f8fafc; box-shadow: 4px 4px 0 #0f172a; }

/* ============================================================
   CONTENEDOR Y TABS DE NAVEGACIÓN DEL PACK (NEO-BRUTALIST DOCK)
   ============================================================ */
.pack-tabs-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 16px 0 26px;
  padding: 0;
  box-sizing: border-box;
}

.pack-tabs-nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg, #ffffff) !important;
  border: 2.8px solid var(--ink, #111111) !important;
  border-radius: 999px !important;
  padding: 5px 6px !important;
  box-shadow: 4px 4px 0 var(--shadow, #111111) !important;
  user-select: none;
  isolation: isolate;
  gap: 2px;
  max-width: 100%;
}

/* Píldora Deslizante Inteligente (Glider) */
.pack-tab-glider {
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 999px;
  border: 2.2px solid #111111;
  box-shadow: 2px 2px 0 #111111;
  z-index: 1;
  pointer-events: none;
  background-color: #93C5FD;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
              width 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              height 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.25s ease,
              box-shadow 0.25s ease,
              opacity 0.2s ease;
  opacity: 0;
}

/* Colores Dinámicos de la Píldora según Pestaña Activa */
.pack-tabs-nav[data-active-pack-tab="maestros"] .pack-tab-glider {
  background-color: #93C5FD;
}
.pack-tabs-nav[data-active-pack-tab="alumnos"] .pack-tab-glider {
  background-color: #FEF08A;
}
.pack-tabs-nav[data-active-pack-tab="material"] .pack-tab-glider {
  background-color: #A7F3D0;
}
.pack-tabs-nav[data-active-pack-tab="extras"] .pack-tab-glider {
  background-color: #FED7AA;
}
.pack-tabs-nav[data-active-pack-tab="canciones"] .pack-tab-glider {
  background-color: #DDD6FE;
}

/* Botones de Pestaña dentro del Dock */
.btn-pack-tab {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text, #111111);
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-pack-tab:hover {
  transform: translateY(-1px) scale(1.02);
  color: var(--text, #111111);
}

.btn-pack-tab:active {
  transform: scale(0.96);
}

.btn-pack-tab.active {
  font-weight: 800;
  color: #111111 !important;
}

.btn-pack-tab svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  vertical-align: middle;
}

.btn-pack-tab.active svg {
  transform: scale(1.14);
}

/* Mini Burbujita Tooltip Flotante Temporal */
.pack-tab-bubble {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px) scale(0.85);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  background: #111111;
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  border: 2px solid #ffffff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3), 3px 3px 0 rgba(0,0,0,0.7);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
              left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pack-tab-bubble-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #111111;
}

.pack-tab-bubble.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Estilos de Burbuja con acento de color */
.pack-tab-bubble[data-bubble-tab="maestros"] {
  background: #1e3a8a;
  border-color: #93c5fd;
  color: #eff6ff;
}
.pack-tab-bubble[data-bubble-tab="maestros"] .pack-tab-bubble-arrow {
  border-top-color: #1e3a8a;
}

.pack-tab-bubble[data-bubble-tab="alumnos"] {
  background: #854d0e;
  border-color: #fef08a;
  color: #fefce8;
}
.pack-tab-bubble[data-bubble-tab="alumnos"] .pack-tab-bubble-arrow {
  border-top-color: #854d0e;
}

.pack-tab-bubble[data-bubble-tab="material"] {
  background: #065f46;
  border-color: #a7f3d0;
  color: #ecfdf5;
}
.pack-tab-bubble[data-bubble-tab="material"] .pack-tab-bubble-arrow {
  border-top-color: #065f46;
}

.pack-tab-bubble[data-bubble-tab="extras"] {
  background: #9a3412;
  border-color: #fed7aa;
  color: #fff7ed;
}
.pack-tab-bubble[data-bubble-tab="extras"] .pack-tab-bubble-arrow {
  border-top-color: #9a3412;
}

.pack-tab-bubble[data-bubble-tab="canciones"] {
  background: #5b21b6;
  border-color: #ddd6fe;
  color: #f5f3ff;
}
.pack-tab-bubble[data-bubble-tab="canciones"] .pack-tab-bubble-arrow {
  border-top-color: #5b21b6;
}

/* Modo Oscuro */
body.dark-mode .pack-tabs-nav {
  background: #1e293b !important;
  border-color: #475569 !important;
  box-shadow: 4px 4px 0 #000000 !important;
}

body.dark-mode .btn-pack-tab {
  color: #cbd5e1;
}

body.dark-mode .btn-pack-tab.active {
  color: #0f172a !important;
}

body.dark-mode .pack-tab-glider {
  border-color: #0f172a;
  box-shadow: 2px 2px 0 #000000;
}

body.dark-mode .pack-tabs-nav[data-active-pack-tab="maestros"] .pack-tab-glider {
  background-color: #93C5FD;
}
body.dark-mode .pack-tabs-nav[data-active-pack-tab="alumnos"] .pack-tab-glider {
  background-color: #FEF08A;
}
body.dark-mode .pack-tabs-nav[data-active-pack-tab="material"] .pack-tab-glider {
  background-color: #6EE7B7;
}
body.dark-mode .pack-tabs-nav[data-active-pack-tab="extras"] .pack-tab-glider {
  background-color: #FDBA74;
}
body.dark-mode .pack-tabs-nav[data-active-pack-tab="canciones"] .pack-tab-glider {
  background-color: #DDD6FE;
}

/* Responsividad en Celulares / Pantallas táctiles */
@media (max-width: 768px) {
  .pack-tabs-wrapper {
    margin: 10px 0 20px;
    padding: 0 6px;
  }
  
  .pack-tabs-nav {
    padding: 4px 5px !important;
    gap: 2px;
    border-radius: 999px !important;
    flex-wrap: nowrap !important;
    overflow-x: visible !important;
  }

  .btn-pack-tab {
    padding: 10px 14px !important;
    min-width: 46px;
    min-height: 44px;
    gap: 0 !important;
    justify-content: center !important;
  }

  /* Ocultar texto en modo celular y mostrar solo icono */
  .btn-pack-tab .pack-tab-text {
    display: none !important;
  }

  .btn-pack-tab svg {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
  }

  .pack-tab-bubble {
    font-size: 12.5px;
    padding: 5px 12px;
    bottom: calc(100% + 10px);
  }
}

@media print {
  body.printing-students > *:not(#mainContent) { display: none !important; }
  body.printing-students #mainContent > *:not(#sectionFavorites) { display: none !important; }
  body.printing-students #sectionFavorites > *:not(#mlTabStudents) { display: none !important; }
  body.printing-students #mlTabStudents > *:not(.ml-students-list) { display: none !important; }
  body.printing-students .ml-students-list { display: block !important; padding: 20px; }
  body.printing-students .student-row-actions { display: none !important; }
}

/* Floating Back Button */
.btn-floating-back {
  background: var(--card-bg, #fff);
  border: 2px solid var(--ink, #111);
  color: var(--text, #111);
  border-radius: 50px;
  box-shadow: 3px 3px 0 var(--shadow, #111);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  padding: 0;
}
.btn-floating-back:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--shadow, #111);
}
.btn-floating-back:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow, #111);
}
body.dark-mode .btn-floating-back {
  background: #1e293b;
  border-color: #0f172a;
  color: #f8fafc;
  box-shadow: 3px 3px 0 #0f172a;
}

/* ============================================================= */
/* PLANNER VIEW MODE TOGGLE (CAPSULE CON GLIDER ANIMADO) */
/* ============================================================= */
.planner-view-toggle {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--card-bg, #ffffff) !important;
  border: 2.5px solid var(--ink, #111111) !important;
  border-radius: 20px !important;
  padding: 5px !important;
  gap: 4px !important;
  box-shadow: 3.5px 3.5px 0 var(--shadow, #111111) !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  user-select: none !important;
}

.planner-view-toggle:hover {
  transform: translateY(-2px) !important;
  box-shadow: 5px 5px 0 var(--shadow, #111111) !important;
}

/* Indicador deslizante suave con física elástica sutil (Planner Glider) */
.planner-view-glider {
  position: absolute;
  top: 0;
  left: 0;
  background: #FEF08A;
  border: 2.5px solid var(--ink, #111111);
  border-radius: 14px;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1), width 0.26s cubic-bezier(0.25, 1, 0.5, 1), height 0.25s ease, opacity 0.18s ease, background-color 0.25s ease;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}

/* Colores temáticos dinámicos según la vista */
.planner-view-toggle[data-active-view="cards"] .planner-view-glider {
  background: #FEF08A !important; /* Amarillo soleado Lista */
}
.planner-view-toggle[data-active-view="grid"] .planner-view-glider {
  background: #93C5FD !important; /* Celeste / azul fresco Mes */
}

body.dark-mode .planner-view-toggle {
  background: #0f172a !important;
  border-color: #334155 !important;
  box-shadow: 3.5px 3.5px 0 #000000 !important;
}
body.dark-mode .planner-view-glider {
  background: #1e293b !important;
  border-color: #94a3b8 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

.btn-view-pill {
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 16px !important;
  border-radius: 14px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-muted, #64748b) !important;
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  transition: color 0.2s ease, transform 0.18s ease !important;
  outline: none !important;
}

.btn-view-pill svg {
  transition: transform 0.22s ease !important;
}

.btn-view-pill:hover {
  color: var(--text, #111111) !important;
  transform: translateY(-1px) !important;
  background: transparent !important;
}

.btn-view-pill:hover svg {
  transform: scale(1.08) !important;
}

.btn-view-pill:active {
  transform: scale(0.96) !important;
}

.btn-view-pill.active {
  color: var(--text, #111111) !important;
  font-weight: 800 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.btn-view-pill.active svg {
  animation: subtlePillPop 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

@keyframes subtlePillPop {
  0% { transform: scale(0.92); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

body.dark-mode .btn-view-pill.active {
  color: #f8fafc !important;
}

@media (max-width: 768px) {
  .planner-view-toggle {
    width: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }
  .planner-view-toggle:hover {
    transform: none !important;
  }
  .planner-view-glider {
    transition: transform 0.26s cubic-bezier(0.25, 1, 0.5, 1), width 0.24s cubic-bezier(0.25, 1, 0.5, 1), height 0.2s ease, opacity 0.15s ease, background-color 0.25s ease !important;
  }
  .btn-view-pill {
    flex: initial !important;
    border-right: none !important;
    border-radius: 14px !important;
    padding: 6px 12px !important;
    transition: color 0.18s ease, transform 0.14s ease !important;
  }
  .btn-view-pill:hover {
    transform: none !important;
  }
  .btn-view-pill:hover svg {
    transform: none !important;
  }
  .btn-view-pill:active {
    transform: scale(0.96) !important;
  }
  .btn-view-pill.active svg {
    animation: subtlePillPop 0.22s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }
}

/* ============================================================= */
/* TABLA DE POSICIONES: CONTROLES PARA SUMAR Y RESTAR PUNTOS */
/* ============================================================= */
.ml-leaderboard-pts-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--bg, #f5f5f4) !important;
  padding: 4px 10px !important;
  border-radius: 99px !important;
  border: 2px solid #111111 !important;
  box-shadow: 2px 2px 0 #111111 !important;
  user-select: none !important;
  margin-left: auto !important;
}

.ml-btn-lb-pts {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: 2px solid #111111 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 1.5px 1.5px 0 #111111 !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease !important;
  color: #111111 !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.ml-btn-lb-pts:hover {
  transform: translateY(-1px) !important;
  box-shadow: 2px 2px 0 #111111 !important;
}

.ml-btn-lb-pts:active {
  transform: translate(1.5px, 1.5px) !important;
  box-shadow: 0 0 0 #111111 !important;
}

.ml-btn-lb-pts.plus {
  background: #bbf7d0 !important;
}
.ml-btn-lb-pts.plus:hover {
  background: #86efac !important;
}

.ml-btn-lb-pts.minus {
  background: #fecaca !important;
}
.ml-btn-lb-pts.minus:hover {
  background: #fca5a5 !important;
}

.ml-btn-lb-pts.disabled {
  opacity: 0.3 !important;
  pointer-events: none !important;
}

.ml-leaderboard-pts {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--text, #111111) !important;
  min-width: 32px !important;
  text-align: center !important;
  cursor: pointer !important;
  padding: 2px 4px !important;
  border-radius: 6px !important;
  transition: background-color 0.15s ease, transform 0.15s ease !important;
}

.ml-leaderboard-pts:hover {
  background: rgba(0, 0, 0, 0.07) !important;
  transform: scale(1.06) !important;
}

body.dark-mode .ml-leaderboard-pts-wrap {
  background: #0f172a !important;
  border-color: #334155 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

body.dark-mode .ml-btn-lb-pts {
  border-color: #000000 !important;
  box-shadow: 1.5px 1.5px 0 #000000 !important;
}

body.dark-mode .ml-btn-lb-pts.plus {
  background: #16a34a !important;
  color: #ffffff !important;
}
body.dark-mode .ml-btn-lb-pts.plus:hover {
  background: #22c55e !important;
}

body.dark-mode .ml-btn-lb-pts.minus {
  background: #dc2626 !important;
  color: #ffffff !important;
}
body.dark-mode .ml-btn-lb-pts.minus:hover {
  background: #ef4444 !important;
}

body.dark-mode .ml-leaderboard-pts {
  color: #f8fafc !important;
}

body.dark-mode .ml-leaderboard-pts:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* ============================================================= */
/* BOTÓN RECORDATORIO DE CLASE POR WHATSAPP (PLANIFICADOR) */
/* ============================================================= */
.btn-plan-sm.btn-wa {
  background: #22c55e !important;
  color: #111111 !important;
  border-color: #111111 !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  box-shadow: 2px 2px 0 #111111 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.btn-plan-sm.btn-wa:hover {
  background: #16a34a !important;
  color: #ffffff !important;
  transform: translate(-1.5px, -1.5px) !important;
  box-shadow: 3px 3px 0 #111111 !important;
}

.btn-plan-sm.btn-wa:active {
  transform: translate(1.5px, 1.5px) !important;
  box-shadow: 0 0 0 #111111 !important;
}

body.dark-mode .btn-plan-sm.btn-wa {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}
body.dark-mode .btn-plan-sm.btn-wa:hover {
  background: #22c55e !important;
}

/* Píldoras de clases en calendario interactivo */
.planner-cell-pill {
  cursor: pointer !important;
  transition: transform 0.12s ease, filter 0.12s ease !important;
}
.planner-cell-pill:hover {
  transform: scale(1.05) !important;
  filter: brightness(1.08) !important;
}

/* Botón (+) rápido para añadir clase dentro de la celda de fecha en el calendario */
.planner-cal-add-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--surface, #ffffff);
  color: var(--text, #111111);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
  transition: all 0.15s ease;
}

.planner-cal-add-btn:hover {
  opacity: 1;
  background: #fef08a;
  transform: scale(1.18);
}

body.dark-mode .planner-cal-add-btn {
  background: #1e293b;
  color: #f8fafc;
  border-color: #f4f4f5;
}

body.dark-mode .planner-cal-add-btn:hover {
  background: #fde047;
  color: #000000;
}

/* ============================================================= */
/* MÓDULO TRIVIA & PREGUNTAS DEL MAESTRO */
/* ============================================================= */
.trivia-banner-tip {
  background: #eff6ff;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #1e3a8a;
  box-shadow: 2px 2px 0 var(--shadow);
}

body.dark-mode .trivia-banner-tip {
  background: #172554;
  color: #bfdbfe;
  border-color: #f4f4f5;
}

.trivia-pts-quick.active,
.trivia-pts-quick:hover {
  background: #fef08a;
  color: #000000;
  transform: translateY(-1px);
  box-shadow: 1.5px 1.5px 0 var(--ink);
}

body.dark-mode .trivia-pts-quick.active {
  background: #fde047;
  color: #000000;
}

.trivia-q-item {
  background: var(--card-bg);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 2px 2px 0 var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.trivia-q-num {
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 12px;
  color: var(--text-muted);
}

.trivia-q-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}

.trivia-q-answer-preview {
  font-size: 12.5px;
  color: #0369a1;
  background: #f0f9ff;
  border: 1px dashed #bae6fd;
  border-radius: 6px;
  padding: 4px 8px;
  margin-top: 6px;
  display: inline-block;
}

body.dark-mode .trivia-q-answer-preview {
  background: #082f49;
  color: #7dd3fc;
  border-color: #0369a1;
}

/* Tarjeta Activa en Juego */
.trivia-active-card {
  background: var(--card-bg);
  border: 3px solid var(--ink);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 4px 4px 0 var(--shadow);
  margin-top: 10px;
}

.trivia-active-q-text {
  font-family: 'Fredoka', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
  margin: 12px 0 16px 0;
}

.trivia-teacher-reminder {
  background: #fef9c3;
  border: 2px dashed #ca8a04;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.06);
}

.trivia-teacher-reminder .reminder-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #854d0e;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.trivia-teacher-reminder .reminder-text {
  font-size: 15px;
  font-weight: 700;
  color: #713f12;
  margin-top: 5px;
  line-height: 1.35;
}

body.dark-mode .trivia-teacher-reminder {
  background: #2e2608;
  border-color: #eab308;
}

body.dark-mode .trivia-teacher-reminder .reminder-header {
  color: #fde047;
}

body.dark-mode .trivia-teacher-reminder .reminder-text {
  color: #fef08a;
}

.trivia-btn-confirm {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #22c55e !important;
  color: #000000 !important;
  border: 2.5px solid #111111 !important;
  box-shadow: 3px 3px 0 #111111 !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.trivia-btn-confirm:hover {
  transform: translate(-2px, -2px) scale(1.06) !important;
  box-shadow: 4.5px 4.5px 0 #111111 !important;
  background: #16a34a !important;
}

.trivia-btn-confirm:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 #111111 !important;
}

body.dark-mode .trivia-btn-confirm {
  border-color: #f4f4f5 !important;
  box-shadow: 3px 3px 0 #000000 !important;
}



/* ============================================================= */
/* INNOVACIÓN DEL INICIO: HERO PRESENTACIÓN, PERSONAJES & SCROLL */
/* ============================================================= */

.home-hero-presentation {
  background: var(--card-bg, #ffffff);
  border: 3px solid var(--ink, #111111);
  border-radius: 30px;
  padding: 36px 32px 28px;
  box-shadow: 6px 6px 0 var(--shadow, #111111);
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.dark-mode .home-hero-presentation {
  background: #0f172a;
  border-color: #334155;
  box-shadow: 6px 6px 0 #000000;
}

.hero-top-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  align-items: center;
}

.hero-pill-badge {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  border: 2px solid var(--ink, #111111);
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.badge-sparkle { background: #FEF08A; color: #713F12; }
.badge-kids { background: #BFDBFE; color: #1E3A8A; }
.badge-ready { background: #BBF7D0; color: #14532D; }

body.dark-mode .badge-sparkle { background: #854D0E; color: #FEF08A; border-color: #FEF08A; }
body.dark-mode .badge-kids { background: #1E3A8A; color: #BFDBFE; border-color: #60A5FA; }
body.dark-mode .badge-ready { background: #14532D; color: #BBF7D0; border-color: #4ADE80; }

.hero-main-title-wrap {
  margin-bottom: 30px;
}

.hero-big-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 14px 0;
}

.title-line-1 {
  display: block;
  font-size: clamp(20px, 3.5vw, 26px);
  color: var(--text-muted, #64748B);
  letter-spacing: 0.5px;
}

.title-line-2 {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: clamp(28px, 5.5vw, 44px);
  color: var(--text, #111111);
}

.title-highlight {
  background: linear-gradient(120deg, #FEF08A 0%, #FBBF24 100%);
  padding: 2px 14px;
  border-radius: 16px;
  border: 2.5px solid var(--ink, #111111);
  box-shadow: 3px 3px 0 var(--shadow, #111111);
  color: #111111;
  display: inline-block;
}

body.dark-mode .title-highlight {
  background: linear-gradient(120deg, #ca8a04 0%, #eab308 100%);
  color: #000000;
  border-color: #fde047;
}

.hero-title-sticker {
  font-size: 13px;
  font-weight: 800;
  background: #EF4444;
  color: #FFFFFF;
  padding: 4px 10px;
  border-radius: 12px;
  border: 2px solid var(--ink, #111111);
  transform: rotate(6deg);
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  display: inline-block;
  animation: pulseSticker 2s infinite ease-in-out;
}

@keyframes pulseSticker {
  0%, 100% { transform: rotate(6deg) scale(1); }
  50% { transform: rotate(3deg) scale(1.08); }
}

.hero-subtitle {
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.5;
  color: var(--text, #334155);
  max-width: 820px;
  margin: 0;
  font-weight: 500;
}

body.dark-mode .hero-subtitle {
  color: #CBD5E1;
}

/* ============================================================= */
/* DÚO DE PERSONAJES ILUSTRADOS (MAESTRO & MAESTRA)              */
/* ============================================================= */

.teachers-duo-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  background: #F8FAFC;
  border: 2.5px solid var(--ink, #111111);
  border-radius: 24px;
  padding: 20px 24px;
  margin: 28px 0;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  position: relative;
}

body.dark-mode .teachers-duo-container {
  background: #1E293B;
  border-color: #334155;
  box-shadow: 4px 4px 0 #000000;
}

.teacher-character-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.teacher-character-box:hover {
  transform: translateY(-6px) scale(1.04);
}

.teacher-character-box:active {
  transform: scale(0.96);
}

.teacher-avatar-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

.teacher-svg {
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.15));
  transition: transform 0.3s ease;
}

.teacher-character-box:hover .teacher-svg {
  transform: rotate(-3deg);
}

.teacher-sofia:hover .teacher-svg {
  transform: rotate(3deg);
}

.teacher-hand-wave {
  transform-origin: 115px 140px;
  animation: waveHand 3s infinite ease-in-out;
}

@keyframes waveHand {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  50% { transform: rotate(4deg); }
  75% { transform: rotate(-6deg); }
}

.teacher-info-tag {
  margin-top: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.teacher-name {
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--text, #111111);
  background: var(--card-bg, #ffffff);
  border: 1.5px solid var(--ink, #111111);
  padding: 2px 10px;
  border-radius: 12px;
  box-shadow: 1.5px 1.5px 0 var(--shadow, #111111);
  white-space: nowrap;
}

body.dark-mode .teacher-name {
  background: #0F172A;
  color: #F8FAFC;
  border-color: #64748B;
}

.teacher-role {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #64748B);
  margin-top: 3px;
  max-width: 140px;
  line-height: 1.2;
}

/* GLOBO DE DIÁLOGO INTERACTIVO */
.teacher-speech-bubble {
  background: #FFFFFF;
  border: 2.5px solid var(--ink, #111111);
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.2s ease;
}

body.dark-mode .teacher-speech-bubble {
  background: #0F172A;
  border-color: #475569;
  box-shadow: 4px 4px 0 #000000;
}

.bubble-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 10px;
}

.bubble-tag {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #854D0E;
  background: #FEF08A;
  border: 1.5px solid var(--ink, #111111);
  padding: 2px 8px;
  border-radius: 8px;
  letter-spacing: 0.5px;
}

body.dark-mode .bubble-tag {
  background: #713F12;
  color: #FEF08A;
  border-color: #FEF08A;
}

.btn-bubble-next {
  background: var(--card-bg, #ffffff);
  border: 1.5px solid var(--ink, #111111);
  border-radius: 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  color: var(--text, #111111);
  cursor: pointer;
  box-shadow: 1.5px 1.5px 0 var(--shadow, #111111);
  transition: all 0.15s ease;
}

.btn-bubble-next:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111);
  background: #FEF08A;
}

.bubble-quote {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text, #1E293B);
  font-weight: 600;
  margin: 0;
  transition: opacity 0.25s ease;
}

body.dark-mode .bubble-quote {
  color: #F1F5F9;
}

/* ============================================================= */
/* BOTONES DE ACCIÓN RÁPIDA (ACTION HUB)                         */
/* ============================================================= */

.hero-quick-actions-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.btn-hero-action {
  background: var(--card-bg, #ffffff);
  border: 2.5px solid var(--ink, #111111);
  border-radius: 20px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, background 0.2s;
  text-align: left;
  user-select: none;
}

.btn-hero-action:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 6px 6px 0 var(--shadow, #111111);
}

.btn-hero-action:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--shadow, #111111);
}

.btn-action-lessons:hover { background: #FEF9C3; }
.btn-action-favorites:hover { background: #FED7AA; }
.btn-action-planner:hover { background: #E0E7FF; }

body.dark-mode .btn-hero-action {
  background: #1E293B;
  border-color: #334155;
  box-shadow: 4px 4px 0 #000000;
}

body.dark-mode .btn-action-lessons:hover { background: #362f0a; }
body.dark-mode .btn-action-favorites:hover { background: #432808; }
body.dark-mode .btn-action-planner:hover { background: #1e244b; }

.action-icon {
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.action-text strong {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--text, #111111);
}

body.dark-mode .action-text strong {
  color: #F8FAFC;
}

.action-text small {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #64748B);
  margin-top: 2px;
}

.action-arrow {
  font-family: 'Fredoka', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-muted, #64748B);
  transition: transform 0.2s ease, color 0.2s;
}

.btn-hero-action:hover .action-arrow {
  transform: translateX(4px);
  color: var(--ink, #111111);
}

body.dark-mode .btn-hero-action:hover .action-arrow {
  color: #FFFFFF;
}

/* ============================================================= */
/* SCROLL REVEAL & PRESENTATION SHOWCASE SECTIONS               */
/* ============================================================= */

.home-features-presentation {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.presentation-section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 10px;
}

.sticker-badge-rotate {
  font-family: 'Fredoka', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  background: #A7F3D0;
  color: #065F46;
  border: 2px solid var(--ink, #111111);
  padding: 4px 14px;
  border-radius: 16px;
  display: inline-block;
  transform: rotate(-2deg);
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  margin-bottom: 12px;
}

body.dark-mode .sticker-badge-rotate {
  background: #064E3B;
  color: #A7F3D0;
  border-color: #34D399;
}

.presentation-section-header h2 {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 800;
  color: var(--text, #111111);
  margin: 0 0 10px 0;
}

.presentation-section-header p {
  font-size: 16px;
  color: var(--text-muted, #64748B);
  margin: 0;
  font-weight: 500;
}

/* FILAS DE CARACTERÍSTICAS (SHOWCASE ROWS) */
.feature-showcase-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  background: var(--card-bg, #ffffff);
  border: 3px solid var(--ink, #111111);
  border-radius: 28px;
  padding: 32px;
  box-shadow: 6px 6px 0 var(--shadow, #111111);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-showcase-row:hover {
  transform: translateY(-3px);
  box-shadow: 8px 8px 0 var(--shadow, #111111);
}

body.dark-mode .feature-showcase-row {
  background: #0F172A;
  border-color: #334155;
  box-shadow: 6px 6px 0 #000000;
}

.feature-showcase-row.reverse-layout {
  grid-template-columns: 1fr 1fr;
}

.feature-step-pill {
  display: inline-block;
  font-family: 'Fredoka', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  background: #FEF08A;
  color: #854D0E;
  border: 2px solid var(--ink, #111111);
  padding: 3px 10px;
  border-radius: 12px;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.feature-step-pill.pill-amber { background: #FED7AA; color: #9A3412; }
.feature-step-pill.pill-indigo { background: #C7D2FE; color: #3730A3; }
.feature-step-pill.pill-rose { background: #FECDD3; color: #9F1239; }

body.dark-mode .feature-step-pill { background: #713f12; color: #FEF08A; border-color: #eab308; }
body.dark-mode .feature-step-pill.pill-amber { background: #7c2d12; color: #FED7AA; border-color: #f97316; }
body.dark-mode .feature-step-pill.pill-indigo { background: #312e81; color: #C7D2FE; border-color: #818cf8; }
body.dark-mode .feature-step-pill.pill-rose { background: #881337; color: #FECDD3; border-color: #fb7185; }

.feature-showcase-info h3 {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 800;
  color: var(--text, #111111);
  margin: 0 0 12px 0;
  line-height: 1.25;
}

.feature-showcase-info p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted, #475569);
  margin: 0 0 16px 0;
  font-weight: 500;
}

body.dark-mode .feature-showcase-info p {
  color: #94A3B8;
}

.feature-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 22px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text, #1E293B);
}

body.dark-mode .feature-checklist li {
  color: #CBD5E1;
}

.feature-checklist li span {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.btn-feature-cta {
  background: var(--ink, #111111);
  color: #FFFFFF;
  border: 2px solid var(--ink, #111111);
  border-radius: 16px;
  padding: 12px 22px;
  font-family: 'Fredoka', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 3px 3px 0 var(--shadow, #111111);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s;
  user-select: none;
}

.btn-feature-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--shadow, #111111);
  background: var(--blue, #2563EB);
}

.btn-feature-cta:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow, #111111);
}

body.dark-mode .btn-feature-cta {
  background: #2563EB;
  border-color: #60A5FA;
  color: #FFFFFF;
  box-shadow: 3px 3px 0 #000000;
}

body.dark-mode .btn-feature-cta:hover {
  background: #1D4ED8;
}

/* VISUAL PREVIEWS & MOCKUPS */
.visual-card-preview {
  background: #F8FAFC;
  border: 2.5px solid var(--ink, #111111);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  position: relative;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.dark-mode .visual-card-preview {
  background: #1E293B;
  border-color: #475569;
  box-shadow: 4px 4px 0 #000000;
}

.visual-sticker-flair {
  position: absolute;
  width: 32px;
  height: 32px;
  pointer-events: none;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.1));
}

.flair-star { top: -10px; right: -10px; transform: rotate(15deg); }
.flair-lightning { top: -12px; left: -10px; transform: rotate(-12deg); }
.flair-crown { top: -10px; right: -8px; transform: rotate(18deg); }
.flair-heart { top: -10px; right: -10px; transform: rotate(10deg); }

/* Mockup interno de lección */
.preview-card-header {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.preview-chip {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
  border: 1.5px solid var(--ink, #111111);
}

.chip-yellow { background: #FEF08A; color: #713F12; }
.chip-blue { background: #BFDBFE; color: #1E3A8A; }
.chip-green { background: #BBF7D0; color: #14532D; }

.preview-inner-mockup {
  background: #FFFFFF;
  border: 2px solid var(--ink, #111111);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
}

body.dark-mode .preview-inner-mockup {
  background: #0F172A;
  border-color: #334155;
}

.mockup-lesson-badge {
  font-family: 'Fredoka', sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: #DC2626;
  letter-spacing: 0.5px;
}

.mockup-lesson-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--text, #111111);
  margin: 4px 0 6px 0;
}

.mockup-lesson-verse {
  font-size: 12px;
  color: var(--text-muted, #64748B);
  margin: 0 0 10px 0;
  font-style: italic;
}

.mockup-tags-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mockup-tag {
  font-size: 11px;
  font-weight: 700;
  background: #F1F5F9;
  border: 1px solid var(--ink, #111111);
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--text, #111111);
}

body.dark-mode .mockup-tag {
  background: #1E293B;
  color: #F8FAFC;
}

/* Classroom mini grid */
.classroom-tools-mini-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.mini-tool-card {
  background: #FFFFFF;
  border: 2px solid var(--ink, #111111);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
}

body.dark-mode .mini-tool-card {
  background: #0F172A;
  border-color: #334155;
}

.mini-tool-icon {
  grid-row: 1 / span 2;
  font-size: 24px;
}

.mini-tool-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text, #111111);
}

.mini-tool-desc {
  font-size: 11px;
  color: var(--text-muted, #64748B);
  font-weight: 600;
}

/* Planner mini schedule */
.planner-mini-schedule {
  background: #FFFFFF;
  border: 2px solid var(--ink, #111111);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
}

body.dark-mode .planner-mini-schedule {
  background: #0F172A;
  border-color: #334155;
}

.schedule-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.schedule-month-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text, #111111);
}

.schedule-sync-pill {
  font-size: 10px;
  font-weight: 800;
  background: #DCFCE7;
  color: #166534;
  border: 1px solid #166534;
  padding: 2px 6px;
  border-radius: 6px;
}

.schedule-sunday-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F8FAFC;
  border: 1.5px solid var(--ink, #111111);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
}

body.dark-mode .schedule-sunday-card {
  background: #1E293B;
  border-color: #475569;
}

.sun-date {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 800;
  background: #E0E7FF;
  color: #3730A3;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--ink, #111111);
}

.sun-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sun-info strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text, #111111);
}

.sun-info small {
  font-size: 10.5px;
  color: var(--text-muted, #64748B);
}

.sun-status {
  font-size: 10px;
  font-weight: 800;
  color: #059669;
  background: #D1FAE5;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Extras mini badges */
.extras-preview-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.extra-badge-item {
  background: #FFFFFF;
  border: 2px solid var(--ink, #111111);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
}

body.dark-mode .extra-badge-item {
  background: #0F172A;
  border-color: #334155;
}

.extra-badge-item span {
  font-size: 24px;
}

.extra-badge-item strong {
  font-family: 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  display: block;
  color: var(--text, #111111);
}

.extra-badge-item small {
  font-size: 11px;
  color: var(--text-muted, #64748B);
}

/* BANNER FINAL CALL TO ACTION */
.home-final-cta-banner {
  background: linear-gradient(135deg, #FEF08A 0%, #FBBF24 100%);
  border: 3px solid var(--ink, #111111);
  border-radius: 28px;
  padding: 36px 32px;
  box-shadow: 6px 6px 0 var(--shadow, #111111);
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
  overflow: hidden;
  margin-top: 10px;
}

body.dark-mode .home-final-cta-banner {
  background: linear-gradient(135deg, #854d0e 0%, #b45309 100%);
  border-color: #fde047;
  box-shadow: 6px 6px 0 #000000;
}

.cta-bible-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.15));
}

.cta-banner-content h3 {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  color: #111111;
  margin: 0 0 8px 0;
}

body.dark-mode .cta-banner-content h3 {
  color: #FFFFFF;
}

.cta-banner-content p {
  font-size: 15px;
  font-weight: 600;
  color: #451A03;
  margin: 0 0 18px 0;
  line-height: 1.4;
}

body.dark-mode .cta-banner-content p {
  color: #FEF08A;
}

.cta-banner-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-big-cta {
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 800;
  padding: 12px 24px;
  border-radius: 16px;
  border: 2.5px solid var(--ink, #111111);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow, #111111);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  user-select: none;
}

.btn-big-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--shadow, #111111);
}

.btn-big-cta:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow, #111111);
}

.btn-cta-primary {
  background: var(--ink, #111111);
  color: #FFFFFF;
}

.btn-cta-secondary {
  background: #FFFFFF;
  color: #111111;
}

body.dark-mode .btn-cta-primary {
  background: #000000;
  color: #FFFFFF;
  border-color: #FFFFFF;
}

body.dark-mode .btn-cta-secondary {
  background: #1E293B;
  color: #FFFFFF;
  border-color: #94A3B8;
}

/* ============================================================= */
/* SCROLL REVEAL ANIMATIONS (INTERSECTION OBSERVER)              */
/* ============================================================= */

.home-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.34, 1.35, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.35, 0.64, 1);
  will-change: opacity, transform;
}

.home-reveal.home-reveal-left {
  transform: translateX(-35px) translateY(20px);
}

.home-reveal.home-reveal-right {
  transform: translateX(35px) translateY(20px);
}

.home-reveal.is-revealed {
  opacity: 1;
  transform: translate(0, 0);
}

/* ============================================================= */
/* RESPONSIVE DESIGN FOR HERO PRESENTATION                       */
/* ============================================================= */

@media (max-width: 900px) {
  .teachers-duo-container {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 16px;
    padding: 20px 16px;
  }

  .teacher-speech-bubble {
    order: -1;
    width: 100%;
    box-sizing: border-box;
  }

  .feature-showcase-row,
  .feature-showcase-row.reverse-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 20px;
  }

  .feature-showcase-row.reverse-layout .feature-showcase-visual {
    order: 2;
  }
  .feature-showcase-row.reverse-layout .feature-showcase-info {
    order: 1;
  }

  .home-final-cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 28px 20px;
  }

  .cta-banner-buttons {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .home-hero-presentation {
    padding: 24px 16px 20px;
  }

  .hero-pill-badge {
    font-size: 11.5px;
    padding: 4px 10px;
  }

  .hero-quick-actions-bar {
    grid-template-columns: 1fr;
  }
}



/* ============================================================= */
/* BOTÓN TOGGLE DE BÚSQUEDA Y FILTROS NEO-BRUTALISTA            */
/* ============================================================= */

.audience-switcher-bar {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 10px auto 24px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
}

.btn-toggle-search-filters {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--card-bg, #ffffff);
  border: 2.5px solid var(--ink, #111111);
  border-radius: 18px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  max-width: 48px;
  padding: 0;
  color: var(--text, #111111);
  box-shadow: 3.5px 3.5px 0 var(--shadow, #111111);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  user-select: none;
  box-sizing: border-box;
  flex-shrink: 0 !important;
}

.btn-toggle-search-filters:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0 var(--shadow, #111111);
  background: var(--yellow-light, #FEF08A);
}

.btn-toggle-search-filters:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--shadow, #111111);
}

.btn-toggle-search-filters.active {
  background: #FEF08A;
  border-color: var(--ink, #111111);
  box-shadow: 3px 3px 0 var(--shadow, #111111);
  color: #111111;
  font-weight: 800;
}

body.dark-mode .btn-toggle-search-filters {
  background: #0f172a;
  border-color: #334155;
  color: #f8fafc;
  box-shadow: 4px 4px 0 #000000;
}

body.dark-mode .btn-toggle-search-filters:hover {
  background: #1e293b;
  border-color: #64748b;
}

body.dark-mode .btn-toggle-search-filters.active {
  background: #854d0e;
  border-color: #fde047;
  color: #fef08a;
}

/* Animación de apertura suave del panel de filtros */
.filters.anim-open {
  animation: filterSlideDown 0.32s cubic-bezier(0.34, 1.25, 0.64, 1) forwards;
}

@keyframes filterSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-14px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}



/* ============================================================= */
/* SOWIESO AESTHETIC HOME PRESENTATION SYSTEM                   */
/* ============================================================= */

/* 1. Hero Container */
.sw-hero-container {
  padding: 40px 16px 24px;
  margin-bottom: 24px;
  position: relative;
  text-align: center;
}

/* 2. Floating Top Badges */
.sw-hero-badges-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}

#plannerDayFilterWrap.hidden,
.planner-day-filter-wrap.hidden {
  display: none !important;
}

.planner-day-filter-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  padding: 4px 10px;
  border-radius: 12px;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow);
  transition: .15s;
}

.planner-cal-header-cell,/* Contenedor General del Planificador */
.planner-schedule-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Vista Cuadrícula Calendario (Mes) */
.planner-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  background: var(--card-bg, #ffffff);
  border: 3px solid var(--ink, #111111);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  user-select: none;
}

body.dark-mode .planner-cal-grid {
  background: #0f172a;
  border-color: #334155;
  box-shadow: 4px 4px 0 #000000;
}

.planner-cal-header-cell {
  text-align: center;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-muted, #64748b);
  padding: 6px 0 10px;
  border-bottom: 2.5px solid var(--ink, #111111);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

body.dark-mode .planner-cal-header-cell {
  color: #94a3b8;
  border-bottom-color: #334155;
}

.planner-cal-cell {
  min-height: 96px;
  border: 2px solid var(--ink, #111111);
  border-radius: 12px;
  padding: 6px;
  background: var(--bg, #f8fafc);
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.planner-cal-cell:hover {
  background: var(--yellow-light, #FEF08A);
  transform: translateY(-2px);
  box-shadow: 3px 3px 0 var(--shadow, #111111);
  z-index: 2;
}

body.dark-mode .planner-cal-cell {
  background: #1e293b;
  border-color: #334155;
}

body.dark-mode .planner-cal-cell:hover {
  background: #334155;
}

.planner-cal-cell.is-today {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 2px #93C5FD;
}

.planner-cal-cell.has-events {
  background: #FEF08A;
  border-color: var(--ink, #111111);
}

body.dark-mode .planner-cal-cell.has-events {
  background: #854d0e;
  border-color: #facc15;
}

.planner-cal-cell.other-month {
  opacity: 0.25;
  pointer-events: none;
  background: transparent !important;
  border-style: dashed;
}

.planner-cell-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.planner-cell-num {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--text, #111111);
  line-height: 1;
}

body.dark-mode .planner-cell-num {
  color: #f8fafc;
}

.planner-cal-add-btn {
  background: #111111;
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.15s ease;
}

.planner-cal-cell:hover .planner-cal-add-btn {
  opacity: 1;
  transform: scale(1.15);
  background: #2563EB;
}

.planner-cell-pill {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 6px;
  background: #ffffff;
  color: #111111;
  border: 1.5px solid var(--ink, #111111);
  box-shadow: 1.5px 1.5px 0 var(--shadow, #111111);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: transform 0.15s ease;
}

.planner-cell-pill:hover {
  transform: scale(1.04);
  background: #93C5FD;
}

/* Indicador de bolitas/puntos en Mobile */
.planner-cell-dots {
  display: none;
  gap: 3px;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
}

.planner-cell-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2563eb;
  border: 1px solid #111111;
}

/* Agenda Mensual (Cards de Clases debajo del Calendario) */
.planner-monthly-agenda {
  background: var(--card-bg, #ffffff);
  border: 3px solid var(--ink, #111111);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
}

body.dark-mode .planner-monthly-agenda {
  background: #0f172a;
  border-color: #334155;
  box-shadow: 4px 4px 0 #000000;
}

.planner-agenda-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2.5px solid var(--ink, #111111);
}

body.dark-mode .planner-agenda-header {
  border-bottom-color: #334155;
}

.planner-agenda-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text, #111111);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.dark-mode .planner-agenda-title {
  color: #f8fafc;
}

.planner-agenda-count {
  background: var(--yellow, #FBBF24);
  color: #111111;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  border: 2px solid var(--ink, #111111);
}

.planner-agenda-cards-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.planner-card.planner-card-highlight {
  animation: pulseCardHighlight 1.5s ease;
}

@keyframes pulseCardHighlight {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); }
  50% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.4); border-color: #2563EB; }
  100% { transform: scale(1); box-shadow: 3.5px 3.5px 0 var(--shadow, #111111); }
}

/* En Celulares (Responsive Touch Design) */
@media (max-width: 768px) {
  .planner-toolbar {
    padding: 10px 12px;
    gap: 10px;
    flex-direction: column;
    align-items: stretch;
  }
  .planner-month-nav {
    justify-content: space-between;
    width: 100%;
  }
  .planner-month-display {
    font-size: 15px;
    min-width: auto;
  }
  .planner-actions {
    width: 100%;
    justify-content: space-between;
    gap: 6px;
  }
  .planner-actions .btn-planner-action {
    flex: 1;
    justify-content: center;
    padding: 8px 10px;
    font-size: 12.5px;
  }
  .btn-text-desktop {
    display: inline !important;
  }
  
  /* Rediseño compacto del Calendario en Móvil */
  .planner-cal-grid {
    padding: 8px;
    gap: 4px;
    border-radius: 16px;
  }
  .planner-cal-header-cell {
    font-size: 11px;
    padding: 4px 0;
    font-weight: 800;
  }
  .planner-cal-cell {
    min-height: 46px;
    height: 46px;
    padding: 2px;
    border-radius: 9px;
    border-width: 1.5px;
    justify-content: center;
    align-items: center;
  }
  .planner-cell-top {
    width: 100%;
    justify-content: center;
    margin-bottom: 0;
  }
  .planner-cal-add-btn {
    display: none;
  }
  .planner-cell-pill {
    display: none;
  }
  .planner-cell-dots {
    display: flex;
  }
  .planner-cell-num {
    font-size: 13.5px;
  }
  .planner-monthly-agenda {
    padding: 14px;
    border-radius: 16px;
  }
  .planner-agenda-title {
    font-size: 16px;
  }
}

.planner-day-filter-label {
  display: inline-flex;
  align-items: center;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.planner-day-select {
  margin: 0;
  padding: 5px 10px;
  font-size: 13px;
  border-radius: 8px;
  font-weight: 700;
  font-family: 'Fredoka', sans-serif;
  width: auto;
  border: 1.5px solid var(--ink);
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  outline: none;
  transition: .15s;
}

.planner-day-select:focus {
  border-color: var(--blue, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.sw-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Fredoka', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px solid var(--ink, #111111);
  box-shadow: 3px 3px 0 var(--shadow, #111111);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.sw-badge:hover {
  transform: translateY(-2px) scale(1.03);
}

.sw-badge-sparkle {
  background: #FEF08A;
  color: #854D0E;
}

.sw-badge-kids {
  background: #BAE6FD;
  color: #0369A1;
}

.sw-badge-ready {
  background: #BBF7D0;
  color: #15803D;
}

body.dark-mode .sw-badge {
  box-shadow: 3px 3px 0 #000000;
}

/* 3. Giant Headlines & Animated Capsule Pills */
.sw-hero-headline-wrap {
  text-align: center;
  max-width: 960px;
  margin: 0 auto 28px;
}

.sw-giant-title {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 5.2vw, 62px);
  font-weight: 800;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--text, #111111);
  margin: 0 0 16px 0;
  letter-spacing: -0.5px;
}

.sw-title-row {
  display: block;
  margin-bottom: 6px;
}

/* -- Empty States -- */
.ml-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 20px;
  color: var(--text-muted, #64748b);
  box-sizing: border-box;
}

.ml-empty-sticker-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  position: relative;
}

.ml-empty-sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
  background: var(--card-bg, #ffffff);
  border: 2.5px solid var(--ink, #111111);
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  animation: stickerFloat 3s ease-in-out infinite alternate;
}

.ml-empty-sticker:hover {
  transform: scale(1.08) rotate(3deg);
  box-shadow: 6px 6px 0 var(--shadow, #111111);
}

@keyframes stickerFloat {
  0% { transform: translateY(0px) rotate(-1.5deg); }
  100% { transform: translateY(-6px) rotate(2deg); }
}

.ml-empty-title {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text, #111111);
  margin-bottom: 6px;
  line-height: 1.25;
}

.ml-empty-subtitle {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  max-width: 320px;
  line-height: 1.45;
}

body.dark-mode .ml-empty-sticker {
  background: #1e293b;
  border-color: #475569;
  box-shadow: 4px 4px 0 #000000;
}
body.dark-mode .ml-empty-title {
  color: #f8fafc;
}
body.dark-mode .ml-empty-subtitle {
  color: #94a3b8;
}

/* Capsule pills for words */
.sw-pill {
  display: inline-block;
  padding: 2px 14px;
  border-radius: 999px;
  border: 2.5px solid #111111;
  box-shadow: 3.5px 3.5px 0 #111111;
  color: #111111;
  vertical-align: middle;
  transform: rotate(-1.5deg);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.sw-pill:hover {
  transform: rotate(1.5deg) scale(1.04);
}

.sw-pill-yellow {
  background: #FDE047;
}

.sw-pill-green {
  background: #86EFAC;
}

.sw-pill-cyan {
  background: #67E8F9;
}

.sw-pill-pink {
  background: #FDA4AF;
}

.sw-sticker-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  background: #EF4444;
  color: #FFFFFF;
  padding: 4px 10px;
  border-radius: 8px;
  border: 2px solid #111111;
  box-shadow: 2.5px 2.5px 0 #111111;
  transform: rotate(8deg);
  vertical-align: middle;
  margin-left: 6px;
}

.sw-hero-subtitle {
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-muted, #4B5563);
  max-width: 800px;
  margin: 0 auto;
}

body.dark-mode .sw-hero-subtitle {
  color: #9CA3AF;
}

/* 4. Teachers Duo Characters */
.sw-teachers-duo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin: 32px auto 28px;
  max-width: 1000px;
  background: #F8FAFC;
  border: 2.5px dashed #CBD5E1;
  border-radius: 24px;
  padding: 24px 28px;
  position: relative;
}

body.dark-mode .sw-teachers-duo {
  background: #0B132B;
  border-color: #334155;
}

.sw-teacher-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  outline: none;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.sw-teacher-card:hover {
  transform: translateY(-4px) scale(1.04);
}

.sw-teacher-card:focus-visible {
  outline: 3px solid #2563EB;
  border-radius: 16px;
}

.sw-teacher-avatar {
  position: relative;
}

.sw-teacher-svg {
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.15));
}

.sw-hand-wave {
  transform-origin: 115px 140px;
  animation: swTeacherWave 2.8s ease-in-out infinite;
}

@keyframes swTeacherWave {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-8deg); }
  45% { transform: rotate(12deg); }
  60% { transform: rotate(0deg); }
}

.sw-bible-hold {
  animation: swBibleFloat 3.2s ease-in-out infinite alternate;
}

@keyframes swBibleFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}

.sw-teacher-info {
  margin-top: 8px;
  text-align: center;
}

.sw-t-name {
  font-family: 'Fredoka', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  display: block;
  color: var(--text, #111111);
}

.sw-t-role {
  font-size: 11.5px;
  font-weight: 700;
  color: #2563EB;
}

body.dark-mode .sw-t-role {
  color: #60A5FA;
}

/* Speech Bubble */
.sw-speech-bubble {
  background: #FFFFFF;
  border: 2.5px solid var(--ink, #111111);
  border-radius: 20px;
  padding: 18px 22px;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  position: relative;
}

body.dark-mode .sw-speech-bubble {
  background: #1F2937;
  border-color: #4B5563;
  box-shadow: 4px 4px 0 #000000;
}

.sw-bubble-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 12px;
}

.sw-bubble-pill {
  font-family: 'Fredoka', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  background: #FEF08A;
  color: #854D0E;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1.5px solid #111111;
}

.sw-btn-bubble-next {
  background: transparent;
  border: 1.5px solid var(--ink, #111111);
  border-radius: 12px;
  padding: 4px 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text, #111111);
  cursor: pointer;
  transition: transform 0.15s, background-color 0.15s;
}

.sw-btn-bubble-next:hover {
  background: #F1F5F9;
  transform: scale(1.05);
}

body.dark-mode .sw-btn-bubble-next {
  color: #F3F4F6;
  border-color: #6B7280;
}

body.dark-mode .sw-btn-bubble-next:hover {
  background: #374151;
}

.sw-bubble-text {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text, #1E293B);
  margin: 0;
  min-height: 44px;
}

body.dark-mode .sw-bubble-text {
  color: #F3F4F6;
}

/* 5. Quick Actions Bento Grid */
.sw-hero-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.sw-bento-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 20px;
  border: 2.5px solid var(--ink, #111111);
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  cursor: pointer;
  text-align: left;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  user-select: none;
}

.sw-bento-btn:hover {
  transform: translateY(-3px);
  box-shadow: 6px 6px 0 var(--shadow, #111111);
}

.sw-bento-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--shadow, #111111);
}

.btn-sw-lessons {
  background: #E0F2FE;
}

.btn-sw-classroom {
  background: #FEF3C7;
}

.btn-sw-planner {
  background: #EDE9FE;
}

body.dark-mode .btn-sw-lessons {
  background: #0369A1;
  color: #FFFFFF;
}

body.dark-mode .btn-sw-classroom {
  background: #B45309;
  color: #FFFFFF;
}

body.dark-mode .btn-sw-planner {
  background: #6D28D9;
  color: #FFFFFF;
}

.sw-bento-icon {
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: #FFFFFF;
  border: 2px solid #111111;
  border-radius: 14px;
  box-shadow: 2px 2px 0 #111111;
  flex-shrink: 0;
}

.sw-bento-content {
  flex: 1;
}

.sw-bento-content strong {
  font-family: 'Fredoka', sans-serif;
  font-size: 15.5px;
  font-weight: 800;
  display: block;
  color: #111111;
}

body.dark-mode .sw-bento-content strong {
  color: #FFFFFF;
}

.sw-bento-content span {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  display: block;
}

body.dark-mode .sw-bento-content span {
  color: #E2E8F0;
}

.sw-bento-arrow {
  font-size: 18px;
  font-weight: 800;
  color: #111111;
  transition: transform 0.2s;
}

body.dark-mode .sw-bento-arrow {
  color: #FFFFFF;
}

.sw-bento-btn:hover .sw-bento-arrow {
  transform: translateX(4px);
}

/* Scroll indicator button */
.sw-scroll-indicator-wrap {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.sw-scroll-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text, #111111);
  text-decoration: none;
  background: var(--card-bg, #FFFFFF);
  border: 2px solid var(--ink, #111111);
  border-radius: 999px;
  padding: 8px 20px;
  box-shadow: 3px 3px 0 var(--shadow, #111111);
  transition: transform 0.2s, background-color 0.2s;
}

.sw-scroll-pill-btn:hover {
  transform: translateY(2px);
  background: #FEF08A;
}

.sw-scroll-arrow {
  font-size: 16px;
  animation: swBounceDown 1.5s infinite;
}

@keyframes swBounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ============================================================= */
/* SOWIESO BIG MANIFESTO BANNER                                  */
/* ============================================================= */

.sw-manifesto-container {
  margin: 32px 0 40px;
}

.sw-manifesto-inner {
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%);
  border: 3px solid #111111;
  border-radius: 28px;
  padding: 36px 32px;
  box-shadow: 6px 6px 0 var(--shadow, #111111);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sw-manifesto-badge {
  display: inline-block;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  background: #FDE047;
  color: #111111;
  padding: 4px 14px;
  border-radius: 999px;
  border: 2px solid #111111;
  box-shadow: 2px 2px 0 #111111;
  margin-bottom: 16px;
}

.sw-manifesto-title {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(22px, 3.8vw, 38px);
  font-weight: 800;
  line-height: 1.25;
  color: #FFFFFF;
  margin: 0;
  text-transform: uppercase;
}

.sw-plane-flyer-track {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.sw-plane-svg {
  width: 180px;
  height: 36px;
}

/* ============================================================= */
/* SOWIESO 4 ESSENTIAL STORYTELLING CARDS (01, 02, 03, 04)       */
/* ============================================================= */

.sw-cards-block {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-bottom: 64px;
}

.sw-cards-stack-container {
  position: relative;
  padding-top: 8px;
  padding-bottom: 40px;
}

.sw-feature-card {
  border: 3px solid #111111;
  border-radius: 28px;
  padding: 36px;
  box-shadow: 6px 6px 0 var(--shadow, #111111);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

/* Stacking Deck Card Physics */
.sw-feature-card.sw-stack-card {
  position: sticky;
  top: calc(90px + var(--card-index, 0) * 22px);
  z-index: calc(10 + var(--card-index, 0) * 10);
  transform-origin: center top;
  box-shadow: 0 10px 0 #111111, 0 20px 32px rgba(0,0,0,0.12);
  margin-bottom: 32px;
  will-change: transform, box-shadow, filter;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.4, 1), box-shadow 0.25s ease, filter 0.25s ease;
}

.sw-feature-card.sw-stack-card[data-card-index="0"] {
  --card-index: 0;
  top: 90px;
  z-index: 10;
}

.sw-feature-card.sw-stack-card[data-card-index="1"] {
  --card-index: 1;
  top: 114px;
  z-index: 20;
}

.sw-feature-card.sw-stack-card[data-card-index="2"] {
  --card-index: 2;
  top: 138px;
  z-index: 30;
}

.sw-feature-card.sw-stack-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 14px 0 #111111, 0 24px 38px rgba(0,0,0,0.16);
}

body.dark-mode .sw-feature-card.sw-stack-card {
  box-shadow: 0 10px 0 #000000, 0 20px 32px rgba(0,0,0,0.45);
}

body.dark-mode .sw-feature-card.sw-stack-card:hover {
  box-shadow: 0 14px 0 #000000, 0 24px 38px rgba(0,0,0,0.55);
}

/* Card Themes */
.sw-card-mint {
  background: linear-gradient(135deg, #A7F3D0 0%, #67E8F9 50%, #38BDF8 100%);
}

.sw-card-pink-coral {
  background: linear-gradient(135deg, #FBCFE8 0%, #FDA4AF 50%, #FB923C 100%);
}

.sw-card-yellow-lime {
  background: linear-gradient(135deg, #FEF08A 0%, #FDE047 50%, #A3E635 100%);
}

.sw-card-lavender-indigo {
  background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 50%, #818CF8 100%);
}

body.dark-mode .sw-card-mint {
  background: linear-gradient(135deg, #064E3B 0%, #0E7490 50%, #0369A1 100%);
  border-color: #38BDF8;
}

body.dark-mode .sw-card-pink-coral {
  background: linear-gradient(135deg, #831843 0%, #9F1239 50%, #9A3412 100%);
  border-color: #FB7185;
}

body.dark-mode .sw-card-yellow-lime {
  background: linear-gradient(135deg, #713F12 0%, #854D0E 50%, #3F6212 100%);
  border-color: #FACC15;
}

body.dark-mode .sw-card-lavender-indigo {
  background: linear-gradient(135deg, #312E81 0%, #3730A3 50%, #4338CA 100%);
  border-color: #818CF8;
}

/* Card Header */
.sw-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.sw-card-number-badge {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #111111;
  box-shadow: 3.5px 3.5px 0 #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #111111;
  flex-shrink: 0;
}

/* Card Main Info */
.sw-card-main-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sw-card-title {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 800;
  color: #111111;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

body.dark-mode .sw-card-title {
  color: #FFFFFF;
}

.sw-card-desc {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  color: #1E293B;
  margin: 0 0 24px 0;
  max-width: 820px;
}

body.dark-mode .sw-card-desc {
  color: #F1F5F9;
}

.sw-chip {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  border: 1.5px solid #111111;
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #111111;
  box-shadow: 1.5px 1.5px 0 #111111;
}

body.dark-mode .sw-chip {
  background: rgba(15, 23, 42, 0.75);
  border-color: #64748B;
  color: #FFFFFF;
}

.sw-btn-card-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #111111;
  color: #FFFFFF;
  border: 2.5px solid #111111;
  border-radius: 18px;
  padding: 12px 24px;
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 3.5px 3.5px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  user-select: none;
}

.sw-btn-card-action:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.45);
}

.sw-btn-card-action:active {
  transform: translate(2px, 2px);
  box-shadow: 1.5px 1.5px 0 rgba(0, 0, 0, 0.3);
}

body.dark-mode .sw-btn-card-action {
  background: #FFFFFF;
  color: #111111;
  border-color: #FFFFFF;
}

.sw-arrow-icon {
  font-size: 18px;
  transition: transform 0.2s;
}

.sw-btn-card-action:hover .sw-arrow-icon {
  transform: translateX(4px);
}

/* Card Visual Mockups */
.sw-card-visual-pane {
  position: relative;
}

.sw-mockup-window {
  background: #FFFFFF;
  border: 2.5px solid #111111;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 5px 5px 0 #111111;
  position: relative;
}

body.dark-mode .sw-mockup-window {
  background: #0F172A;
  border-color: #334155;
  box-shadow: 5px 5px 0 #000000;
}

.ml-teams-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.ml-teams-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.ml-points-toggle-row {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.sw-mockup-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px dashed #E2E8F0;
  padding-bottom: 10px;
  margin-bottom: 12px;
}

body.dark-mode .sw-mockup-header-bar {
  border-bottom-color: #334155;
}

.sw-mockup-dots {
  display: flex;
  gap: 6px;
}

.sw-mockup-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #CBD5E1;
  border: 1.5px solid #111111;
}

.sw-mockup-dots span:nth-child(1) { background: #F87171; }
.sw-mockup-dots span:nth-child(2) { background: #FBBF24; }
.sw-mockup-dots span:nth-child(3) { background: #4ADE80; }

.sw-mockup-pill-state {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 800;
  background: #FEF08A;
  color: #854D0E;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #111111;
}

.sw-mockup-badge-top {
  font-size: 10.5px;
  font-weight: 800;
  color: #2563EB;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.sw-mockup-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #111111;
  margin: 0 0 6px 0;
}

body.dark-mode .sw-mockup-title {
  color: #FFFFFF;
}

.sw-mockup-quote {
  font-size: 12px;
  font-style: italic;
  color: #64748B;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.sw-mockup-actions-preview {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sw-mockup-tag-btn {
  font-size: 11px;
  font-weight: 700;
  background: #F1F5F9;
  border: 1.5px solid #111111;
  border-radius: 6px;
  padding: 4px 8px;
  color: #111111;
}

body.dark-mode .sw-mockup-tag-btn {
  background: #1E293B;
  color: #F8FAFC;
  border-color: #475569;
}

.sw-card-flair {
  position: absolute;
  width: 44px;
  height: 44px;
  top: -16px;
  right: -16px;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.2));
  transform: rotate(12deg);
}

/* Classroom Mini Tools */
.sw-tools-mini-showcase {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sw-tool-mini-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F8FAFC;
  border: 2px solid #111111;
  border-radius: 12px;
  padding: 8px 12px;
}

body.dark-mode .sw-tool-mini-card {
  background: #1E293B;
  border-color: #475569;
}

.sw-tool-mini-icon {
  font-size: 20px;
}

.sw-tool-mini-txt strong {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  display: block;
  color: var(--text, #111111);
}

.sw-tool-mini-txt small {
  font-size: 11px;
  color: var(--text-muted, #64748B);
}

/* Planner Mini List */
.sw-planner-mini-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sw-planner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #F8FAFC;
  border: 2px solid #111111;
  border-radius: 12px;
  padding: 8px 12px;
}

body.dark-mode .sw-planner-row {
  background: #1E293B;
  border-color: #475569;
}

.sw-p-date {
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  background: #2563EB;
  color: #FFFFFF;
  padding: 2px 6px;
  border-radius: 6px;
}

.sw-p-detail strong {
  font-size: 13px;
  font-weight: 800;
  display: block;
  color: var(--text, #111111);
}

.sw-p-detail small {
  font-size: 11px;
  color: var(--text-muted, #64748B);
}

.sw-p-status {
  font-size: 10.5px;
  font-weight: 800;
  color: #15803D;
  background: #DCFCE7;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Extras Mini Stack */
.sw-extras-mini-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sw-extra-pill-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 2px solid #111111;
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 2px 2px 0 #111111;
}

body.dark-mode .sw-extra-pill-card {
  background: #1E293B;
  border-color: #475569;
}

.sw-e-icon {
  font-size: 20px;
}

.sw-e-text strong {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  display: block;
  color: var(--text, #111111);
}

.sw-e-text small {
  font-size: 11px;
  color: var(--text-muted, #64748B);
}

/* ============================================================= */
/* SOWIESO FAQ ACCORDION SECTION                                */
/* ============================================================= */

.sw-faq-section {
  background: var(--card-bg, #FFFFFF);
  border: 3px solid var(--ink, #111111);
  border-radius: 28px;
  padding: 40px 32px;
  box-shadow: 6px 6px 0 var(--shadow, #111111);
  margin-bottom: 40px;
}

body.dark-mode .sw-faq-section {
  background: #111827;
  border-color: #374151;
}

.sw-faq-header {
  text-align: center;
  margin-bottom: 32px;
}

.sw-faq-sticker {
  display: inline-block;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  background: #FEF08A;
  color: #854D0E;
  padding: 4px 14px;
  border-radius: 999px;
  border: 2px solid #111111;
  box-shadow: 2px 2px 0 #111111;
  margin-bottom: 12px;
}

.sw-faq-title {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 800;
  color: var(--text, #111111);
  margin: 0 0 10px 0;
  text-transform: uppercase;
}

.sw-faq-subtitle {
  font-size: 15px;
  color: var(--text-muted, #64748B);
  margin: 0;
}

.sw-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
}

.sw-accordion-item {
  background: #F8FAFC;
  border: 2.5px solid var(--ink, #111111);
  border-radius: 18px;
  box-shadow: 3.5px 3.5px 0 var(--shadow, #111111);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

body.dark-mode .sw-accordion-item {
  background: #1F2937;
  border-color: #374151;
  box-shadow: 3.5px 3.5px 0 #000000;
}

.sw-accordion-item:hover {
  transform: translateY(-2px);
}

.sw-accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 16px;
}

.sw-faq-q {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--text, #111111);
}

.sw-faq-toggle-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #111111;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s;
}

body.dark-mode .sw-faq-toggle-icon {
  background: #111827;
  border-color: #9CA3AF;
  color: #FFFFFF;
}

.sw-accordion-item.active .sw-faq-toggle-icon {
  transform: rotate(45deg);
  background: #FDE047;
  color: #111111;
}

.sw-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 0;
  padding: 0 20px;
}

.sw-accordion-item.active .sw-accordion-panel {
  max-height: 200px;
  opacity: 1;
  padding: 0 20px 18px;
}

.sw-accordion-panel p {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--text-muted, #475569);
  margin: 0;
}

body.dark-mode .sw-accordion-panel p {
  color: #D1D5DB;
}

/* ============================================================= */
/* SOWIESO FINAL CALL TO ACTION BANNER                           */
/* ============================================================= */

.sw-final-cta-section {
  margin-bottom: 20px;
}

.sw-final-cta-card {
  background: linear-gradient(135deg, #FEF08A 0%, #FBBF24 50%, #F59E0B 100%);
  border: 3px solid #111111;
  border-radius: 28px;
  padding: 40px 36px;
  box-shadow: 6px 6px 0 var(--shadow, #111111);
  display: flex;
  align-items: center;
  gap: 32px;
  position: relative;
  overflow: hidden;
}

body.dark-mode .sw-final-cta-card {
  background: linear-gradient(135deg, #854D0E 0%, #B45309 50%, #78350F 100%);
  border-color: #FDE047;
  box-shadow: 6px 6px 0 #000000;
}

.sw-cta-deco-bible {
  flex-shrink: 0;
}

.sw-cta-bible-img {
  width: 80px;
  height: 80px;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.2));
}

.sw-cta-badge {
  display: inline-block;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  background: #111111;
  color: #FFFFFF;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.sw-cta-title {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 800;
  color: #111111;
  margin: 0 0 10px 0;
  line-height: 1.15;
}

body.dark-mode .sw-cta-title {
  color: #FFFFFF;
}

.sw-cta-desc {
  font-size: 15.5px;
  font-weight: 600;
  color: #451A03;
  margin: 0 0 20px 0;
  line-height: 1.45;
}

body.dark-mode .sw-cta-desc {
  color: #FEF08A;
}

.sw-cta-buttons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.sw-btn-cta-giant {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 15.5px;
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 18px;
  border: 2.5px solid #111111;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  user-select: none;
}

.sw-btn-cta-giant:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0 var(--shadow, #111111);
}

.sw-btn-cta-giant:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--shadow, #111111);
}

.sw-btn-cta-main {
  background: #111111;
  color: #FFFFFF;
}

.sw-btn-cta-alt {
  background: #FFFFFF;
  color: #111111;
}

body.dark-mode .sw-btn-cta-main {
  background: #000000;
  color: #FFFFFF;
  border-color: #FFFFFF;
}

body.dark-mode .sw-btn-cta-alt {
  background: #1E293B;
  color: #FFFFFF;
  border-color: #CBD5E1;
}

.sw-arrow-bounce {
  font-size: 18px;
  transition: transform 0.2s;
}

.sw-btn-cta-giant:hover .sw-arrow-bounce {
  transform: translateX(4px);
}

/* ============================================================= */
/* RESPONSIVE DESIGN FOR SOWIESO HOME                           */
/* ============================================================= */

@media (max-width: 900px) {
  .sw-hero-container {
    padding: 32px 20px 24px;
  }

  .sw-teachers-duo {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 16px;
    padding: 20px 16px;
  }

  .sw-speech-bubble {
    order: -1;
    width: 100%;
  }

  .sw-card-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sw-feature-card {
    padding: 28px 20px;
  }

  .sw-cards-block {
    gap: 36px;
    margin-bottom: 48px;
  }

  .sw-feature-card.sw-stack-card {
    top: calc(75px + var(--card-index, 0) * 16px);
    padding: 24px 18px;
    border-radius: 22px;
    margin-bottom: 24px;
  }

  .sw-feature-card.sw-stack-card[data-card-index="0"] { top: 75px; }
  .sw-feature-card.sw-stack-card[data-card-index="1"] { top: 91px; }
  .sw-feature-card.sw-stack-card[data-card-index="2"] { top: 107px; }

  .sw-final-cta-card {
    flex-direction: column;
    text-align: center;
    padding: 32px 20px;
  }

  .sw-cta-buttons-row {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .sw-giant-title {
    font-size: 26px;
  }

  .sw-pill {
    padding: 1px 10px;
    box-shadow: 2.5px 2.5px 0 #111111;
  }

  .sw-hero-actions-grid {
    grid-template-columns: 1fr;
  }

  .sw-bento-btn {
    padding: 12px 16px;
  }

  .sw-manifesto-inner {
    padding: 24px 16px;
  }

  .sw-card-header {
    gap: 12px;
  }

  .sw-card-number-badge {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}

/* ============================================================= */
/* BOTONES DE ACCIÓN SOLO ÍCONOS EN PLANIFICADOR */
/* ============================================================= */
.planner-card-footer,
.planner-details-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.planner-card-footer .btn-plan-sm,
.planner-details-actions .btn-plan-sm {
  min-width: 36px;
  min-height: 34px;
  padding: 6px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

.planner-card-footer .btn-plan-sm svg,
.planner-details-actions .btn-plan-sm svg {
  margin: 0 !important;
}

/* ============================================================= */
/* CUMPLEAÑOS DE ALUMNOS (MI CLASE) */
/* ============================================================= */
.ml-student-card.has-bday-today {
  border-color: #f59e0b !important;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
  box-shadow: 4px 4px 0 #d97706, 0 0 16px rgba(245, 158, 11, 0.25) !important;
  animation: bdayCardPulse 3s infinite ease-in-out;
  position: relative;
}

@keyframes bdayCardPulse {
  0%, 100% {
    box-shadow: 4px 4px 0 #d97706, 0 0 10px rgba(245, 158, 11, 0.2);
  }
  50% {
    box-shadow: 4px 4px 0 #d97706, 0 0 20px rgba(245, 158, 11, 0.45);
  }
}

.ml-bday-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1.5px solid #111;
  box-shadow: 1.5px 1.5px 0 #111;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.ml-bday-badge.today {
  background: #fbbf24;
  color: #78350f;
  animation: bdayBadgeWiggle 2s infinite ease-in-out;
}

@keyframes bdayBadgeWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
}

.ml-bday-badge.upcoming {
  background: #e0e7ff;
  color: #3730a3;
  border-color: #4338ca;
  box-shadow: 1.5px 1.5px 0 #4338ca;
}

.ml-student-meta-details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 3px;
}

.ml-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 7px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.ml-bday-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2.5px solid #d97706;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 12px;
  box-shadow: 3px 3px 0 #b45309;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ml-bday-banner:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #b45309;
}

.ml-bday-banner-icon {
  font-size: 30px;
  flex: none;
  animation: bdayBadgeWiggle 1.5s infinite ease-in-out;
}

.ml-bday-banner-text {
  flex: 1;
  min-width: 0;
}

.ml-bday-banner-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #92400e;
  line-height: 1.3;
}

.ml-bday-banner-subtitle {
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
  margin-top: 2px;
}

.ml-bday-celebrate-btn {
  background: #f59e0b;
  color: #111;
  border: 2px solid #111;
  border-radius: 8px;
  padding: 6px 12px;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 2px 2px 0 #111;
  flex: none;
  transition: transform 0.12s ease;
}

.ml-bday-celebrate-btn:hover {
  transform: scale(1.05);
  background: #fbbf24;
}

body.dark-mode .ml-student-card.has-bday-today {
  background: linear-gradient(135deg, #451a03 0%, #78350f 100%) !important;
  border-color: #fbbf24 !important;
  box-shadow: 4px 4px 0 #000, 0 0 16px rgba(251, 191, 36, 0.35) !important;
}

body.dark-mode .ml-meta-pill {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fde68a;
}

body.dark-mode .ml-bday-banner {
  background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
  border-color: #fbbf24;
  box-shadow: 3px 3px 0 #000;
}

body.dark-mode .ml-bday-banner-title {
  color: #fef08a;
}

body.dark-mode .ml-bday-banner-subtitle {
  color: #fde68a;
}

/* ============================================================= */
/* ALINEACIÓN DE BOTONES EN TOOLBAR DE EQUIPOS Y PUNTOS */
/* ============================================================= */
.ml-teams-toolbar {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

.ml-teams-toolbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: none !important;
}

.ml-teams-toolbar-actions .btn-action {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
}

/* ============================================================= */
/* MODERN DIALOGS FOR MI CLASE (ALUMNOS & EQUIPOS) */
/* ============================================================= */
.ml-dialog-card {
  border: 3px solid #111 !important;
  border-radius: 20px !important;
  background: var(--surface, #ffffff) !important;
  box-shadow: 6px 6px 0 #111 !important;
  padding: 22px 24px !important;
  max-width: 480px;
  width: 100%;
}

.ml-dialog-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  border-bottom: 2px solid #111 !important;
  padding-bottom: 14px !important;
  margin-bottom: 18px !important;
}

.ml-dialog-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ml-dialog-icon-sticker {
  width: 44px;
  height: 44px;
  border: 2px solid #111;
  border-radius: 12px;
  background: #dbeafe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 2px 2px 0 #111;
  flex: none;
}

.ml-dialog-title-wrap h3 {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--text, #111) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.ml-dialog-subtitle {
  font-size: 12px !important;
  color: var(--text-muted, #64748b) !important;
  margin: 3px 0 0 0 !important;
  font-weight: 600 !important;
}

.ml-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.ml-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 12px;
}

.ml-form-label {
  font-family: 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text, #111);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ml-label-icon {
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pack-viewer-layout {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .pack-viewer-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Sidebar de Materiales Plegable (Collapse/Expand) */
.pack-materials-sidebar {
  background: var(--card-bg, #ffffff);
  border: 3px solid var(--ink, #111111);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.34, 1.35, 0.64, 1);
}

.materials-header-badge {
  width: 100%;
  background: var(--yellow, #FBBF24);
  color: #111111;
  border: none;
  border-bottom: 3px solid var(--ink, #111111);
  padding: 12px 16px;
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  letter-spacing: -0.2px;
  cursor: pointer;
  outline: none;
  user-select: none;
  text-align: left;
  transition: background-color 0.2s ease, border-bottom 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.materials-header-badge:hover {
  background: var(--yellow-light, #FEF08A);
}

.materials-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.materials-collapse-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.65);
  border: 2px solid var(--ink, #111111);
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
}

.materials-header-badge:hover .materials-collapse-indicator {
  background: #ffffff;
  transform: scale(1.08);
}

.materials-chevron-icon {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pack-materials-sidebar.is-collapsed .materials-chevron-icon {
  transform: rotate(-180deg);
}

.pack-materials-sidebar.is-collapsed .materials-header-badge {
  border-bottom: none;
}

body.dark-mode .materials-header-badge {
  background: #ca8a04;
  color: #ffffff;
}

body.dark-mode .materials-header-badge:hover {
  background: #d97706;
}

body.dark-mode .materials-collapse-indicator {
  background: rgba(0, 0, 0, 0.3);
  border-color: #ffffff;
  color: #ffffff;
}

.materials-list {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 8px;
  max-height: 560px;
  overflow-y: auto;
  scrollbar-width: thin;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, padding 0.3s ease;
}

.pack-materials-sidebar.is-collapsed .materials-list {
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
}

.material-item-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: var(--card-bg, #ffffff);
  border: 2px solid var(--ink, #111111);
  border-radius: 14px;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  cursor: pointer;
  text-align: left;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.material-item-btn:hover {
  transform: translateY(-2px);
  box-shadow: 3.5px 3.5px 0 var(--shadow, #111111);
  background: var(--yellow-light, #FEF08A);
}

.material-item-btn.active {
  background: #93C5FD;
  border-color: var(--ink, #111111);
  box-shadow: 3px 3px 0 var(--shadow, #111111);
  transform: translateY(-1px);
}

body.dark-mode .material-item-btn {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 2px 2px 0 #000000;
  color: #f8fafc;
}

body.dark-mode .material-item-btn:hover {
  background: #334155;
}

body.dark-mode .material-item-btn.active {
  background: #3b82f6;
  border-color: #93c5fd;
  color: #ffffff;
}

.material-item-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.material-item-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.material-item-name {
  font-family: 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text, #111111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark-mode .material-item-name {
  color: #f8fafc;
}

.material-item-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
}

body.dark-mode .material-item-sub {
  color: #94a3b8;
}

/* En Mobile: Convertir la lista de materiales en carrusel horizontal ultra-cómodo */
@media (max-width: 900px) {
  .pack-materials-sidebar {
    border-radius: 14px;
  }
  .materials-header-badge {
    padding: 9px 14px;
    font-size: 13.5px;
    border-bottom: 2px solid var(--ink, #111111);
  }
  .materials-list {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px;
    gap: 8px;
    max-height: none;
  }
  .materials-list::-webkit-scrollbar {
    display: none;
  }
  .material-item-row-wrap {
    min-width: 230px;
    max-width: 300px;
    flex-shrink: 0;
  }
  .material-item-btn {
    min-width: 190px;
    max-width: 250px;
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 12px;
  }
  .material-item-row-wrap .material-item-btn {
    min-width: 0;
    max-width: none;
    flex: 1;
  }
}

/* Panel Principal de Previsualización */
.pack-preview-main {
  background: var(--card-bg, #ffffff);
  border: 3px solid var(--ink, #111111);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.dark-mode .pack-preview-main {
  background: #0f172a;
  border-color: #334155;
  box-shadow: 4px 4px 0 #000000;
}

.pack-viewer-header {
  padding: 14px 18px;
  background: var(--card-bg, #ffffff);
  border-bottom: 3px solid var(--ink, #111111);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.dark-mode .pack-viewer-header {
  background: #0f172a;
  border-bottom-color: #334155;
}

.pack-preview-body {
  position: relative;
  min-height: 560px;
  background: #18181b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pack-iframe-wrap {
  width: 100%;
  height: 600px;
}

@media (max-width: 768px) {
  .pack-preview-body {
    min-height: 440px;
  }
  .pack-iframe-wrap {
    height: 480px;
  }
  .pack-viewer-header {
    padding: 10px 12px;
  }
}

.pack-pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.ml-form-input,
.ml-form-select {
  width: 100%;
  padding: 10px 14px;
  border: 2.5px solid #111;
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  background: var(--card-bg, #fff);
  color: var(--text, #111);
  box-shadow: 2.5px 2.5px 0 #111;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  box-sizing: border-box;
}

.ml-form-input:focus,
.ml-form-select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 3px 3px 0 #2563eb;
  transform: translate(-1px, -1px);
}

.ml-bday-hint-box {
  background: #fefce8;
  border: 1.5px dashed #ca8a04;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  color: #854d0e;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ml-color-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
}

.ml-color-swatch {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid #111;
  cursor: pointer;
  box-shadow: 2.5px 2.5px 0 #111;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

.ml-color-swatch:hover {
  transform: scale(1.12);
}

.ml-color-swatch.active {
  transform: scale(1.15);
  box-shadow: 3.5px 3.5px 0 #111;
}

.ml-color-swatch.active::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.ml-dialog-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  border-top: 2px solid #111 !important;
  padding-top: 16px !important;
  margin-top: 18px !important;
}

.ml-btn-save-dialog {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

body.dark-mode .ml-dialog-card {
  background: #1e293b !important;
  border-color: #000 !important;
  box-shadow: 6px 6px 0 #000 !important;
}

body.dark-mode .ml-dialog-icon-sticker {
  background: #334155;
  border-color: #000;
  box-shadow: 2px 2px 0 #000;
}

body.dark-mode .ml-bday-hint-box {
  background: #451a03;
  border-color: #fbbf24;
  color: #fef08a;
}

/* ============================================================= */
/* MÓDULO LÁMINAS (COLECCIONES: RICHARD GUNTHER Y LAMBSONGS)     */
/* ============================================================= */
.laminas-hero-collections {
  margin: 18px 0 24px;
}

.laminas-collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.laminas-collection-card {
  border: 3px solid #111111;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 6px 6px 0 var(--shadow, #111111);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  user-select: none;
}

.laminas-collection-card:hover {
  transform: translateY(-5px);
  box-shadow: 9px 9px 0 var(--shadow, #111111);
}

.laminas-collection-card:active {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--shadow, #111111);
}

.laminas-collection-card.active-col {
  outline: 3px solid #2563EB;
  box-shadow: 8px 8px 0 #2563EB;
}

.laminas-collection-card.card-rg {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE047 45%, #FBBF24 100%);
  color: #18181B;
}

.laminas-collection-card.card-ls {
  background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 45%, #7DD3FC 100%);
  color: #18181B;
}

body.dark-mode .laminas-collection-card.card-rg {
  background: linear-gradient(135deg, #78350F 0%, #92400E 50%, #B45309 100%);
  color: #FEF3C7;
  border-color: #FBBF24;
}

body.dark-mode .laminas-collection-card.card-ls {
  background: linear-gradient(135deg, #0C4A6E 0%, #0369A1 50%, #0284C7 100%);
  color: #E0F2FE;
  border-color: #38BDF8;
}

.laminas-col-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.badge-collection-rg {
  background: #111111;
  color: #FDE047;
  border: 1.5px solid #111111;
  font-weight: 800;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.15);
}

.badge-collection-ls {
  background: #111111;
  color: #7DD3FC;
  border: 1.5px solid #111111;
  font-weight: 800;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.15);
}

.laminas-col-count {
  font-size: 12px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.7);
  background: rgba(255, 255, 255, 0.75);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1.5px solid #111111;
}

body.dark-mode .laminas-col-count {
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
}

.laminas-col-content {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.laminas-col-icon {
  font-size: 38px;
  line-height: 1;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.2));
  flex-shrink: 0;
}

.laminas-col-info h3 {
  font-family: 'Fredoka', sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px 0;
  line-height: 1.2;
}

.laminas-col-desc {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
  opacity: 0.9;
}

.laminas-col-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 2px solid rgba(0, 0, 0, 0.15);
  padding-top: 12px;
  margin-top: 4px;
}

body.dark-mode .laminas-col-footer {
  border-top-color: rgba(255, 255, 255, 0.15);
}

.laminas-col-btn-text {
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.laminas-col-arrow {
  font-size: 20px;
  font-weight: 900;
  transition: transform 0.2s ease;
}

.laminas-collection-card:hover .laminas-col-arrow {
  transform: translateX(4px);
}

/* Quick Nav Buttons for Láminas */
.btn-story-pill-rg.active {
  background: #FDE047 !important;
  color: #111111 !important;
  border-color: #111111 !important;
}

.btn-story-pill-ls.active {
  background: #7DD3FC !important;
  color: #111111 !important;
  border-color: #111111 !important;
}

/* ============================================================= */
/* TARJETA ESPECIAL VIP: BIPER Y SUS AMIGOS (DISEÑO EXCLUSIVO)   */
/* Paleta oficial: Amarillo Eléctrico, Cyan/Turquesa, Naranja, Blanco */
/* ============================================================= */
.welcome-card.card-pack-biper-special,
.card-pack-biper-special {
  border: 3.5px solid #111111 !important;
  border-top: 8px solid #06B6D4 !important;
  background: linear-gradient(160deg, #FFFFFF 0%, #FFFBEB 30%, #FEF08A 70%, #FDE047 100%) !important;
  box-shadow: 6px 6px 0 #0891B2, 11px 11px 0 #111111, 0 10px 25px rgba(6, 182, 212, 0.25) !important;
  position: relative !important;
  overflow: visible !important;
  border-radius: 20px !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease !important;
}

body.dark-mode .welcome-card.card-pack-biper-special,
body.dark-mode .card-pack-biper-special {
  background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 40%, #172554 100%) !important;
  border: 3.5px solid #22D3EE !important;
  border-top: 8px solid #FACC15 !important;
  box-shadow: 6px 6px 0 #000000, 11px 11px 0 #0891B2, 0 10px 30px rgba(34, 211, 238, 0.3) !important;
}

.welcome-card.card-pack-biper-special:hover,
.card-pack-biper-special:hover {
  transform: translateY(-8px) scale(1.02) rotate(-0.5deg) !important;
  box-shadow: 8px 8px 0 #0891B2, 14px 14px 0 #111111, 0 15px 35px rgba(245, 158, 11, 0.4) !important;
}

body.dark-mode .welcome-card.card-pack-biper-special:hover,
body.dark-mode .card-pack-biper-special:hover {
  box-shadow: 8px 8px 0 #000000, 14px 14px 0 #22D3EE, 0 15px 35px rgba(34, 211, 238, 0.5) !important;
}

/* Área de imagen de cabecera Biper con fondo azul cyan y amarillo */
.card-pack-biper-special .pack-card-thumb-wrap {
  position: relative !important;
  background: radial-gradient(circle at center, #FFFFFF 20%, #E0F2FE 55%, #BAE6FD 100%) !important;
  border-bottom: 3.5px solid #111111 !important;
  padding: 18px 14px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 180px !important;
  overflow: hidden !important;
}

/* Patrón de lunares o burbujas sutiles divertidas */
.card-pack-biper-special .pack-card-thumb-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#38BDF8 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: 0.35;
  pointer-events: none;
}

/* Cinta superior estilo Biper */
.card-pack-biper-special .biper-badge-banner {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  background: #0284C7;
  color: #FFFFFF;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 5px 12px;
  border: 2px solid #111111;
  border-radius: 999px;
  box-shadow: 2.5px 2.5px 0 #111111;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Sticker oficial Biper en la esquina inferior izquierda con efecto 3D */
.card-pack-biper-special .biper-corner-sticker-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 12;
  transform: rotate(-8deg);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(3px 4px 6px rgba(0,0,0,0.3));
  pointer-events: none;
}

.welcome-card.card-pack-biper-special:hover .biper-corner-sticker-badge {
  transform: rotate(-14deg) scale(1.12);
}

.card-pack-biper-special .biper-corner-sticker-badge img {
  width: 58px;
  height: auto;
  background: #FFFFFF;
  border: 2.5px solid #111111;
  border-radius: 12px;
  padding: 3px;
  box-shadow: 3px 3px 0 #111111;
  display: block;
}

/* Logo Biper central en la portada */
.card-pack-biper-special .pack-card-logo-img {
  max-width: 82% !important;
  max-height: 140px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 14px rgba(2, 132, 199, 0.35)) drop-shadow(0 2px 4px rgba(0,0,0,0.2)) !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.welcome-card.card-pack-biper-special:hover .pack-card-logo-img {
  transform: scale(1.08) rotate(-1deg) !important;
}

/* Pills temáticas Biper */
.card-pack-biper-special .biper-pill-cyan {
  background: #0284C7 !important;
  color: #FFFFFF !important;
  border: 2px solid #111111 !important;
  font-weight: 800 !important;
}

.card-pack-biper-special .biper-pill-yellow {
  background: #FEF08A !important;
  color: #111111 !important;
  border: 2px solid #111111 !important;
  font-weight: 800 !important;
}

.card-pack-biper-special .biper-pill-orange {
  background: #F97316 !important;
  color: #FFFFFF !important;
  border: 2px solid #111111 !important;
  font-weight: 800 !important;
}

/* Título y texto de la tarjeta Biper */
.card-pack-biper-special .pack-card-main-title {
  color: #0F172A !important;
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin-top: 6px !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

body.dark-mode .card-pack-biper-special .pack-card-main-title {
  color: #FDE047 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.card-pack-biper-special .pack-card-main-desc {
  color: #334155 !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

body.dark-mode .card-pack-biper-special .pack-card-main-desc {
  color: #CBD5E1 !important;
}

.card-pack-biper-special .pack-card-meta-line {
  color: #0284C7 !important;
  font-weight: 800 !important;
}

body.dark-mode .card-pack-biper-special .pack-card-meta-line {
  color: #38BDF8 !important;
}

/* ============================================================= */
/* ============================================================= */
/* TARJETA ESPECIAL: COLECCIÓN RICHARD GUNTHER                   */
/* ============================================================= */
#laminasCardsGrid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
  max-width: 100% !important;
  margin: 15px 0 30px 0 !important;
  align-items: stretch !important;
}

@media (max-width: 1200px) {
  #laminasCardsGrid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
  }
}

@media (max-width: 980px) {
  #laminasCardsGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 640px) {
  #laminasCardsGrid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

#laminasCardsGrid .welcome-card.rainbow-floating-card {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  border-radius: 18px !important;
  border-width: 2.5px !important;
  box-shadow: 4px 4px 0 #111111 !important;
  overflow: hidden !important;
}

.card-rg-collection {
  border: 2.5px solid #111111 !important;
  border-top: 6px solid #0284C7 !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  box-shadow: 4px 4px 0 #111111 !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.card-rg-collection:hover {
  transform: translateY(-4px) !important;
  box-shadow: 6px 6px 0 #0369A1, 6px 6px 0 #111111 !important;
}

.card-rg-collection .pack-card-thumb-wrap,
.card-ls-collection .pack-card-thumb-wrap,
.card-bn-collection .pack-card-thumb-wrap,
.card-ml-collection .pack-card-thumb-wrap {
  position: relative !important;
  border-bottom: 2.5px solid #111111 !important;
  padding: 12px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 135px !important;
  height: 135px !important;
  overflow: hidden !important;
}

.card-rg-collection .pack-card-thumb-wrap {
  background: radial-gradient(circle at center, #FFFFFF 20%, #E0F2FE 60%, #BAE6FD 100%) !important;
}

.card-rg-collection .rg-logo-img {
  max-width: 92% !important;
  max-height: 110px !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  border: 2px solid #111111 !important;
  box-shadow: 2.5px 2.5px 0 #0284C7, 3.5px 3.5px 0 #111111 !important;
  transition: transform 0.25s ease !important;
}

.card-rg-collection:hover .rg-logo-img {
  transform: scale(1.05) rotate(-1deg) !important;
}

/* ============================================================= */
/* TARJETA ESPECIAL: COLECCIÓN LAMBSONGS                         */
/* ============================================================= */
.card-ls-collection {
  border: 2.5px solid #111111 !important;
  border-top: 6px solid #22C55E !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  box-shadow: 4px 4px 0 #111111 !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.card-ls-collection:hover {
  transform: translateY(-4px) !important;
  box-shadow: 6px 6px 0 #16A34A, 6px 6px 0 #111111 !important;
}

.card-ls-collection .pack-card-thumb-wrap {
  background: radial-gradient(circle at center, #FFFFFF 20%, #F0FDF4 55%, #DCFCE7 100%) !important;
}

.card-ls-collection .ls-logo-img {
  max-width: 92% !important;
  max-height: 110px !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  border: 2px solid #111111 !important;
  box-shadow: 2.5px 2.5px 0 #16A34A, 3.5px 3.5px 0 #111111 !important;
  transition: transform 0.25s ease !important;
}

.card-ls-collection:hover .ls-logo-img {
  transform: scale(1.05) rotate(1deg) !important;
}

/* ============================================================= */
/* TARJETA ESPECIAL: COLECCIÓN BUENAS NOTICIAS                   */
/* ============================================================= */
.card-bn-collection {
  border: 2.5px solid #111111 !important;
  border-top: 6px solid #EF4444 !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  box-shadow: 4px 4px 0 #111111 !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.card-bn-collection:hover {
  transform: translateY(-4px) !important;
  box-shadow: 6px 6px 0 #DC2626, 6px 6px 0 #111111 !important;
}

.card-bn-collection .pack-card-thumb-wrap {
  background: radial-gradient(circle at center, #FFFFFF 20%, #FEF2F2 55%, #FEE2E2 100%) !important;
}

.card-bn-collection .bn-logo-img {
  max-width: 92% !important;
  max-height: 110px !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  border: 2px solid #111111 !important;
  box-shadow: 2.5px 2.5px 0 #DC2626, 3.5px 3.5px 0 #111111 !important;
  transition: transform 0.25s ease !important;
}

.card-bn-collection:hover .bn-logo-img {
  transform: scale(1.05) rotate(-1deg) !important;
}

/* ============================================================= */
/* TARJETA ESPECIAL: COLECCIÓN MY LOVE BIBLE                     */
/* ============================================================= */
.card-ml-collection {
  border: 2.5px solid #111111 !important;
  border-top: 6px solid #9333EA !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  box-shadow: 4px 4px 0 #111111 !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.card-ml-collection:hover {
  transform: translateY(-4px) !important;
  box-shadow: 6px 6px 0 #7E22CE, 6px 6px 0 #111111 !important;
}

.card-ml-collection .pack-card-thumb-wrap {
  background: radial-gradient(circle at center, #FFFFFF 20%, #FAF5FF 55%, #F3E8FF 100%) !important;
}

.card-ml-collection .ml-logo-img {
  max-width: 92% !important;
  max-height: 110px !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  border: 2px solid #111111 !important;
  box-shadow: 2.5px 2.5px 0 #7E22CE, 3.5px 3.5px 0 #111111 !important;
  transition: transform 0.25s ease !important;
}

.card-ml-collection:hover .ml-logo-img {
  transform: scale(1.05) rotate(1deg) !important;
}

/* Dark Mode support for Laminas Collection Cards */
body.dark-mode .card-rg-collection,
body.dark-mode .card-ls-collection,
body.dark-mode .card-bn-collection,
body.dark-mode .card-ml-collection {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-mode .card-rg-collection .pack-card-thumb-wrap {
  background: radial-gradient(circle at center, #1e293b 20%, #0c4a6e 60%, #0369a1 100%) !important;
}

body.dark-mode .card-ls-collection .pack-card-thumb-wrap {
  background: radial-gradient(circle at center, #1e293b 20%, #064e3b 60%, #15803d 100%) !important;
}

body.dark-mode .card-bn-collection .pack-card-thumb-wrap {
  background: radial-gradient(circle at center, #1e293b 20%, #450a0a 60%, #7f1d1d 100%) !important;
}

body.dark-mode .card-ml-collection .pack-card-thumb-wrap {
  background: radial-gradient(circle at center, #1e293b 20%, #3b0764 60%, #581c87 100%) !important;
}

/* Contenido de texto en tarjetas de Láminas */
.card-rg-collection .pack-card-body-content,
.card-ls-collection .pack-card-body-content,
.card-bn-collection .pack-card-body-content,
.card-ml-collection .pack-card-body-content,
#laminasCardsGrid .welcome-card .pack-card-body-content {
  padding: 12px 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

#laminasCardsGrid .pack-card-pills-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-bottom: 6px !important;
}

#laminasCardsGrid .pack-pill-tag {
  font-size: 0.68rem !important;
  padding: 3px 6px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

#laminasCardsGrid .pack-card-main-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  margin: 4px 0 4px 0 !important;
  line-height: 1.25 !important;
  display: block !important;
}

#laminasCardsGrid .pack-card-main-desc {
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
  color: #475569 !important;
  font-weight: 600 !important;
  margin: 0 0 10px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  flex: 1 !important;
}

#laminasCardsGrid .pack-card-main-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 10px !important;
  border-top: 1.5px dashed rgba(0,0,0,0.14) !important;
  margin-top: auto !important;
}

#laminasCardsGrid .pack-resource-count {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

#laminasCardsGrid .card-arrow-indicator {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #0284C7 !important;
  transition: transform 0.2s ease !important;
}

#laminasCardsGrid .welcome-card:hover .card-arrow-indicator {
  transform: translateX(4px) !important;
}

/* ============================================================= */
/* MINIATURAS TEMÁTICAS PARA HISTORIAS / LÁMINAS (STORY COVERS)  */
/* ============================================================= */
.story-cover-thumb {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 14px;
  overflow: hidden;
  z-index: 1;
  user-select: none;
}

.story-cover-rg-theme {
  background: radial-gradient(circle at 50% 25%, #FFFFFF 0%, #E0F2FE 55%, #BAE6FD 100%);
  border-bottom: 2px solid var(--ink);
}

body.dark-mode .story-cover-rg-theme {
  background: radial-gradient(circle at 50% 25%, #1e293b 0%, #0c4a6e 65%, #0369a1 100%);
}

.story-cover-ls-theme {
  background: radial-gradient(circle at 50% 25%, #FFFFFF 0%, #F0FDF4 55%, #DCFCE7 100%);
  border-bottom: 2px solid var(--ink);
}

body.dark-mode .story-cover-ls-theme {
  background: radial-gradient(circle at 50% 25%, #1e293b 0%, #064e3b 65%, #15803d 100%);
}

.story-cover-bn-theme {
  background: radial-gradient(circle at 50% 25%, #FFFFFF 0%, #FEF2F2 55%, #FEE2E2 100%);
  border-bottom: 2px solid #EF4444;
}

body.dark-mode .story-cover-bn-theme {
  background: radial-gradient(circle at 50% 25%, #1e293b 0%, #450a0a 65%, #7f1d1d 100%);
}

.story-cover-ml-theme {
  background: radial-gradient(circle at 50% 25%, #FFFFFF 0%, #FAF5FF 55%, #F3E8FF 100%);
  border-bottom: 2px solid #9333EA;
}

body.dark-mode .story-cover-ml-theme {
  background: radial-gradient(circle at 50% 25%, #1e293b 0%, #3b0764 65%, #581c87 100%);
}

.story-cover-sp-theme {
  background: radial-gradient(circle at 50% 25%, #FFFFFF 0%, #FEF3C7 55%, #FDE68A 100%);
  border-bottom: 2px solid #D97706;
}

body.dark-mode .story-cover-sp-theme {
  background: radial-gradient(circle at 50% 25%, #1e293b 0%, #78350f 65%, #92400e 100%);
}

.story-cover-wb-theme {
  background: radial-gradient(circle at 50% 25%, #FFFFFF 0%, #ECFDF5 55%, #D1FAE5 100%);
  border-bottom: 2px solid #059669;
}

body.dark-mode .story-cover-wb-theme {
  background: radial-gradient(circle at 50% 25%, #1e293b 0%, #064e3b 65%, #047857 100%);
}

.story-cover-default-theme {
  background: radial-gradient(circle at 50% 25%, #FFFFFF 0%, #FEF3C7 55%, #FDE68A 100%);
  border-bottom: 2px solid var(--ink);
}

body.dark-mode .story-cover-default-theme {
  background: radial-gradient(circle at 50% 25%, #1e293b 0%, #78350f 65%, #92400e 100%);
}

.story-cover-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.story-cover-logo-bubble {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2.5px solid #111111;
  box-shadow: 2.5px 2.5px 0 rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  flex-shrink: 0;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card:hover .story-cover-logo-bubble {
  transform: scale(1.1) rotate(-4deg);
}

.story-cover-logo-bubble.ls-bubble {
  border-radius: 12px;
  width: 76px;
  height: 56px;
  padding: 3px;
}

.story-cover-logo-bubble.bn-bubble,
.story-cover-logo-bubble.ml-bubble,
.story-cover-logo-bubble.sp-bubble,
.story-cover-logo-bubble.wb-bubble {
  border-radius: 12px;
  width: 80px;
  height: 56px;
  padding: 3px;
}

.badge-collection-rg {
  background: #E0F2FE;
  color: #0369A1;
  border: 1.5px solid #111111;
  font-weight: 800;
}

.badge-collection-ls {
  background: #DCFCE7;
  color: #15803D;
  border: 1.5px solid #111111;
  font-weight: 800;
}

.badge-collection-bn {
  background: #FEE2E2;
  color: #991B1B;
  border: 1.5px solid #111111;
  font-weight: 800;
}

.badge-collection-ml {
  background: #F3E8FF;
  color: #6B21A8;
  border: 1.5px solid #111111;
  font-weight: 800;
}

.badge-collection-sp {
  background: #FEF3C7;
  color: #92400E;
  border: 1.5px solid #111111;
  font-weight: 800;
}

.badge-collection-wb {
  background: #D1FAE5;
  color: #065F46;
  border: 1.5px solid #111111;
  font-weight: 800;
}

.story-cover-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.banner-planner {
  background: linear-gradient(135deg, #fef08a 0%, #fde047 50%, #fed7aa 100%);
  color: #111111;
  border: 3.5px solid var(--ink, #111111);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--shadow, #111111);
  padding: 24px 28px;
  position: relative;
  margin-bottom: 24px;
}

.banner-planner h2 {
  font-family: 'Fredoka', cursive, sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #111111;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  letter-spacing: -0.5px;
}

.banner-planner p {
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #451a03 !important;
  margin: 0;
  max-width: 720px;
  line-height: 1.45;
}

.banner-corner-doodle {
  position: absolute;
  top: -16px;
  right: 20px;
  width: 52px;
  height: 52px;
  filter: drop-shadow(3px 3px 0 var(--shadow, #111111));
  transform: rotate(12deg);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.banner-planner:hover .banner-corner-doodle {
  transform: rotate(24deg) scale(1.12);
}

body.dark-mode .banner-planner {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 60%, #1e293b 100%);
  color: #fef08a;
  border-color: #f4f4f5;
  box-shadow: 6px 6px 0 #000000;
}

body.dark-mode .banner-planner h2 {
  color: #ffffff;
}

body.dark-mode .banner-planner p {
  color: #e0e7ff !important;
}

/* Barra de Control / Toolbar Neo-Brutalista */
.planner-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
  padding: 16px 20px;
  background: var(--card-bg, #ffffff);
  border: 3px solid var(--ink, #111111);
  border-radius: 18px;
  box-shadow: 5px 5px 0 var(--shadow, #111111);
}

.planner-month-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg, #f8fafc);
  padding: 6px 10px;
  border: 2.5px solid var(--ink, #111111);
  border-radius: 14px;
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111);
}

.btn-planner-nav {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 2.5px solid var(--ink, #111111);
  background: var(--card-bg, #ffffff);
  color: var(--text, #111111);
  cursor: pointer;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-planner-nav:hover {
  transform: translate(-2px, -2px);
  box-shadow: 3.5px 3.5px 0 var(--shadow, #111111);
  background: #fef08a;
  color: #111111;
}

.btn-planner-nav:active {
}

body.dark-mode .btn-planner-nav {
  background: #1e293b;
  border-color: #334155;
  color: #f8fafc;
  box-shadow: 2px 2px 0 #000000;
}

body.dark-mode .btn-planner-nav:hover {
  background: #334155;
}

.planner-month-display {
  font-family: 'Fredoka', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--text, #111111);
  padding: 0 10px;
  text-transform: capitalize;
  min-width: 140px;
  text-align: center;
  letter-spacing: -0.2px;
}

body.dark-mode .planner-month-display {
  color: #f8fafc;
}

.btn-planner-today {
  background: var(--yellow, #FBBF24);
  color: #111111;
  border: 2px solid var(--ink, #111111);
  border-radius: 10px;
  padding: 6px 12px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-planner-today:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow, #111111);
  background: #fde047;
}

.btn-planner-today:active {
  transform: translate(1px, 1px);
}

.planner-secondary-controls {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.planner-view-toggle {
  position: relative;
  display: inline-flex;
  gap: 3px;
  background: var(--bg);
  padding: 4px;
  border-radius: 14px;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--shadow);
  user-select: none;
}

.planner-view-glider {
  position: absolute;
  top: 0;
  left: 0;
  background: #93C5FD;
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 1.5px 1.5px 0 var(--shadow);
  transition: transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1), width 0.25s ease, height 0.25s ease;
  pointer-events: none;
  z-index: 1;
}

body.dark-mode .planner-view-glider {
  background: #1e3a8a !important;
  border-color: #60a5fa !important;
}

.btn-view-pill {
  position: relative;
  z-index: 2;
  padding: 6px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-family: 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  touch-action: manipulation;
}

.btn-view-pill.active {
  color: var(--ink);
  font-weight: 800;
}

body.dark-mode .btn-view-pill.active {
  color: #f8fafc;
}

.planner-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.btn-planner-action {
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 2px solid var(--ink);
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: .15s;
  touch-action: manipulation;
  flex-shrink: 0;
  white-space: nowrap;
  text-decoration: none;
}

.btn-planner-action:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3.5px 3.5px 0 var(--shadow);
}

.btn-planner-action:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow);
}

.btn-planner-action.btn-wa {
  background: #25D366;
  color: #ffffff;
  border-color: var(--ink);
}

.btn-planner-action.btn-print {
  background: var(--card-bg, #ffffff);
  color: var(--text, #111111);
}

body.dark-mode .btn-planner-action.btn-print {
  background: #1e293b;
  color: #f8fafc;
}

@media (max-width: 768px) {
  .btn-planner-action svg {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
  }
}

.btn-primary-add {
  background: var(--blue);
  color: #ffffff;
}

.story-cover-author-pill {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 800;
  background: #0284C7;
  color: #FFFFFF;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1.5px solid #111111;
  box-shadow: 1.5px 1.5px 0 #111111;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
  display: inline-block;
}

.story-cover-author-pill.ls-pill {
  background: #16A34A;
}

.story-cover-author-pill.bn-pill {
  background: #EF4444;
}

.story-cover-author-pill.ml-pill {
  background: #9333EA;
}

.story-cover-title-text {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.25;
  max-width: 96%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark-mode .story-cover-title-text {
  color: #F8FAFC;
}

.story-cover-subbadge {
  font-size: 9px;
  font-weight: 800;
  color: #0369A1;
  letter-spacing: 0.6px;
  margin-top: 3px;
  text-transform: uppercase;
}

.story-cover-subbadge.ls-sub {
  color: #15803D;
}

.story-cover-subbadge.bn-sub {
  color: #DC2626;
}

.story-cover-subbadge.ml-sub {
  color: #7E22CE;
}

/* COLLECTION CARDS LOGOS & HOVER GRADIENTS */
.bn-logo-img, .ml-logo-img, .rg-logo-img, .ls-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.card-bn-collection:hover {
  border-color: #EF4444 !important;
  box-shadow: 6px 6px 0 #991B1B, 0 12px 28px rgba(239, 68, 68, 0.25) !important;
}

.card-ml-collection:hover {
  border-color: #9333EA !important;
  box-shadow: 6px 6px 0 #581C87, 0 12px 28px rgba(147, 51, 234, 0.25) !important;
}

/* ============================================================
   SECCIÓN: SISTEMA DE CASILLERO & ALIAS DE MAESTRO
   ============================================================ */
.header-alias-pill {
  display: inline-flex;
  align-items: center;
}

.btn-alias-connect {
  background: var(--yellow, #ffcc00);
  color: #111111;
  border: 2px solid var(--ink, #111111);
  border-radius: 12px;
  height: 40px;
  padding: 0 12px;
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s;
  box-sizing: border-box;
  flex-shrink: 0;
  white-space: nowrap;
}

.btn-alias-connect:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3.5px 3.5px 0 var(--shadow, #111111);
}

.alias-active-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg, #f4f4f0);
  border: 2px solid var(--ink, #111111);
  border-radius: 12px;
  height: 40px;
  padding: 0 10px;
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111);
  cursor: pointer;
  transition: transform 0.15s;
  box-sizing: border-box;
  flex-shrink: 0;
}

.alias-active-state:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3.5px 3.5px 0 var(--shadow, #111111);
}

.alias-avatar-icon {
  font-size: 14px;
  line-height: 1;
}

.alias-name-text {
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--text, #111111);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-alias-exit {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--ink, #111111);
  background: #fee2e2;
  color: #b91c1c;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: 0.15s;
}

.btn-alias-exit:hover {
  background: #ef4444;
  color: #ffffff;
  transform: scale(1.1);
}

/* Modal Alias */
.alias-modal-card {
  max-width: 480px;
  width: 92%;
  padding: 24px;
  border-radius: 20px;
}

.alias-modal-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted, #555555);
  margin-bottom: 16px;
}

.alias-tab-switch {
  position: relative;
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  background: var(--bg, #f4f4f0);
  padding: 5px;
  border-radius: 14px;
  border: 2.5px solid var(--ink, #111111);
  box-shadow: 3px 3px 0 var(--shadow, #111111);
  user-select: none;
  overflow: hidden;
}

.alias-tab-glider {
  position: absolute;
  top: 0;
  left: 0;
  background: #FEF08A;
  border: 2px solid var(--ink, #111111);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  transition: transform 0.35s cubic-bezier(0.34, 1.35, 0.64, 1), width 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), height 0.25s ease, opacity 0.2s ease, background-color 0.3s ease;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}

.alias-tab-switch[data-active-alias-tab="load"] .alias-tab-glider {
  background: #FEF08A;
}

.alias-tab-switch[data-active-alias-tab="create"] .alias-tab-glider {
  background: #BAE6FD;
}

body.dark-mode .alias-tab-switch {
  background: #0f172a;
  border-color: #334155;
  box-shadow: 3px 3px 0 #000000;
}

body.dark-mode .alias-tab-glider {
  background: #1e293b !important;
  border-color: #94a3b8;
  box-shadow: 2px 2px 0 #000000;
}

.btn-alias-tab {
  position: relative;
  z-index: 2;
  flex: 1;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text, #111111);
  padding: 9px 12px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.15s ease;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-alias-tab.active {
  background: transparent;
  color: var(--ink, #111111);
}

body.dark-mode .btn-alias-tab.active {
  background: transparent;
  color: #ffffff;
}

.alias-form-pane {
  display: flex;
  flex-direction: column;
}

.alias-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.alias-input-label {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #111111);
}

.alias-input-wrap {
  display: flex;
  align-items: center;
  background: var(--bg, #f4f4f0);
  border: 2.5px solid var(--ink, #111111);
  border-radius: 12px;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  overflow: hidden;
  transition: 0.15s;
}

.alias-input-wrap:focus-within {
  border-color: var(--blue, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.alias-at-symbol {
  padding: 0 12px;
  font-weight: 800;
  font-size: 16px;
  color: var(--text-muted, #777777);
  user-select: none;
}

.alias-text-input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #111111);
  padding: 10px 12px 10px 0;
}

.alias-input-hint {
  font-size: 11.5px;
  color: var(--text-muted, #777777);
  font-weight: 600;
}

.alias-msg-box {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 12px;
  border: 2px solid;
}

.alias-msg-box.error {
  background: #fee2e2;
  border-color: #ef4444;
  color: #991b1b;
}

.alias-msg-box.success {
  background: #dcfce7;
  border-color: #22c55e;
  color: #166534;
}

body.dark-mode .alias-msg-box.error {
  background: #450a0a;
  border-color: #ef4444;
  color: #fecaca;
}

body.dark-mode .alias-msg-box.success {
  background: #052e16;
  border-color: #22c55e;
  color: #bbf7d0;
}

.btn-alias-action {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 800;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-alias-action-new {
  background: var(--green, #16a34a) !important;
  color: #ffffff !important;
}

.alias-current-session-box {
  background: var(--bg, #f4f4f0);
  border: 2px solid var(--ink, #111111);
  border-radius: 14px;
  padding: 14px;
  margin-top: 18px;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
}

.alias-session-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text, #111111);
}

.alias-status-online {
  font-size: 11px;
  font-weight: 800;
  color: #16a34a;
  background: rgba(34, 197, 94, 0.15);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #16a34a;
}

.btn-alias-logout-full {
  width: 100%;
  border: 2px solid #dc2626;
  background: #fee2e2;
  color: #991b1b;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 2px 2px 0 #991b1b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.15s;
}

.btn-alias-logout-full:hover {
  background: #dc2626;
  color: #ffffff;
  transform: translate(-1px, -1px);
}

body.dark-mode .btn-alias-logout-full {
  background: #450a0a;
  border-color: #ef4444;
  color: #fca5a5;
  box-shadow: 2px 2px 0 #ef4444;
}

body.dark-mode .btn-alias-logout-full:hover {
  background: #ef4444;
  color: #ffffff;
}

/* Mobile & Empty State Audit Refinements */
.ml-leaderboard:empty {
  display: none !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 768px) {
  /* Encabezado en móvil: Logo compacto sin ruido visual y acciones alineadas */
  header {
    padding: 7px 0 !important;
  }
  .header-wrap {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  .header-brand {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    text-decoration: none !important;
    user-select: none !important;
  }
  .header-brand h1 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 14.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    font-weight: 800 !important;
    color: var(--text, #111111) !important;
    letter-spacing: -0.2px !important;
  }
  .brand-title-wrap {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    color: var(--text, #111111) !important;
    letter-spacing: -0.2px !important;
  }
  .brand-sticker {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--yellow, #FFE600) !important;
    color: #111111 !important;
    border: 1.5px solid var(--ink, #111111) !important;
    padding: 1.5px 5px !important;
    border-radius: 6px !important;
    font-size: 7.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
    box-shadow: 1.5px 1.5px 0 var(--ink, #111111) !important;
    transform: none !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    width: auto !important;
  }
  .header-alias-pill {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }
  .btn-alias-connect {
    height: 32px !important;
    padding: 0 9px !important;
    font-size: 11.5px !important;
    gap: 4px !important;
    border-radius: 8px !important;
    box-shadow: 1.5px 1.5px 0 var(--shadow, #111111) !important;
  }
  .alias-active-state {
    height: 32px !important;
    padding: 0 7px !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
    box-shadow: 1.5px 1.5px 0 var(--shadow, #111111) !important;
    gap: 4px !important;
  }
  .alias-name-text {
    max-width: 68px !important;
    font-size: 11.5px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .btn-alias-exit {
    font-size: 11px !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
  }
  .btn-theme-toggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    box-shadow: 1.5px 1.5px 0 var(--shadow, #111111) !important;
  }

  @media (max-width: 360px) {
    .header-wrap {
      gap: 4px !important;
    }
    .header-brand h1,
    .brand-title-wrap {
      font-size: 12.5px !important;
    }
    .brand-sticker {
      font-size: 6.8px !important;
      padding: 1px 3.5px !important;
      border-width: 1px !important;
      border-radius: 5px !important;
    }
    .btn-alias-connect {
      padding: 0 6px !important;
      font-size: 11px !important;
    }
    .btn-alias-connect span {
      font-size: 11px !important;
    }
    .alias-active-state {
      padding: 0 5px !important;
    }
    .alias-name-text {
      max-width: 48px !important;
      font-size: 11px !important;
    }
  }

  .planner-month-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .planner-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 14px !important;
    gap: 12px !important;
  }
  .planner-month-nav {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 8px !important;
    gap: 6px !important;
  }
  .planner-month-display {
    flex: 1 !important;
    min-width: unset !important;
    font-size: 16px !important;
    text-align: center !important;
    font-weight: 800 !important;
  }
  .planner-actions {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 auto !important;
  }
  .planner-actions .btn-primary-add {
    flex: 1 1 auto !important;
    max-width: 170px !important;
    height: 42px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    border: 2.5px solid var(--ink) !important;
    box-shadow: 2.5px 2.5px 0 var(--shadow) !important;
    background: var(--blue) !important;
    color: #ffffff !important;
    white-space: nowrap !important;
  }
  .planner-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .planner-actions .btn-planner-action,
  .planner-actions .btn-wa,
  .planner-actions .btn-print {
    flex: 1 1 0px !important;
    width: 50% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-width: unset !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    border: 2.2px solid var(--ink) !important;
    box-shadow: 2px 2px 0 var(--shadow) !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }
  .planner-actions .btn-text-desktop {
    display: inline !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  /* Selector de Audiencia (Pack Lecciones / Láminas) Corto y Centrado */
  .audience-switcher-bar {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 8px auto 16px !important;
    width: 100% !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }
  /* Selector de Audiencia en Móvil: Cápsula Compacta y Dinámica (Icono solo inactivo, Icono + Texto activo) */
   .audience-switcher-bar {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 8px auto 14px !important;
    width: 100% !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
  }
  .audience-pills-group {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 3px !important;
    gap: 3px !important;
    border: 2.2px solid var(--ink, #111111) !important;
    border-radius: 16px !important;
    box-shadow: 2.5px 2.5px 0 var(--shadow, #111111) !important;
    background: var(--card-bg, #ffffff) !important;
    user-select: none !important;
  }
  .pill-glider {
    position: absolute !important;
    border: 2px solid var(--ink, #111111) !important;
    border-radius: 12px !important;
    box-shadow: 1.5px 1.5px 0 var(--shadow, #111111) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.35, 0.64, 1), width 0.25s cubic-bezier(0.34, 1.25, 0.64, 1), height 0.2s ease, opacity 0.2s ease, background-color 0.25s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
  .btn-audience-pill {
    position: relative !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
    padding: 6px 9px !important;
    gap: 4px !important;
    transition: color 0.2s ease, transform 0.15s ease !important;
  }
  .btn-audience-pill svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
    transition: transform 0.2s ease !important;
  }
  .btn-audience-pill span {
    display: inline-block !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
  }

  /* Pestana Inactiva: Icono + Texto nitido pero atenuado */
  .btn-audience-pill:not(.active) {
    color: var(--text-muted, #475569) !important;
    opacity: 0.85;
  }
  .btn-audience-pill:not(.active) span {
    font-weight: 700 !important;
  }
  .btn-audience-pill:not(.active) svg {
    transform: scale(0.96);
    opacity: 0.85;
  }

  /* Pestana Activa: Icono + Texto energico */
  .btn-audience-pill.active {
    color: var(--text, #111111) !important;
    opacity: 1;
  }
  .btn-audience-pill.active span {
    font-weight: 900 !important;
  }
  .btn-audience-pill.active svg {
    transform: scale(1.05);
    stroke-width: 2.5;
  }

  body.dark-mode .btn-audience-pill.active {
    color: #f8fafc !important;
  }
  body.dark-mode .btn-audience-pill:not(.active) {
    color: #94a3b8 !important;
  }
}

@media (max-width: 375px) {
  .audience-pills-group {
    padding: 2px !important;
    gap: 2px !important;
  }
  .btn-audience-pill {
    padding: 5px 6px !important;
    gap: 3px !important;
  }
  .btn-audience-pill svg {
    width: 12.5px !important;
    height: 12.5px !important;
    min-width: 12.5px !important;
  }
  .btn-audience-pill span {
    font-size: 10.5px !important;
  }
}

@keyframes pillLabelPop {
  0% {
    opacity: 0;
    transform: scale(0.88);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================================= */
/* MÓDULO SORTEO DE ALUMNOS (DISEÑO NEO-BRUTALISTA) */
/* ============================================================= */
.game-card-badge.sorteo {
  background: #f43f5e;
  color: #ffffff;
}

/* Barra de configuración superior */
.sorteo-config-bar {
  background: var(--card-bg, #ffffff);
  border: 2.5px solid var(--ink, #111111);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.sorteo-config-pts-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.sorteo-config-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--text, #111111);
  display: flex;
  align-items: center;
}

.sorteo-num-input {
  width: 60px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-align: center !important;
  border: 2px solid var(--ink, #111111) !important;
  border-radius: 10px !important;
  padding: 5px 8px !important;
  background: var(--bg, #f8fafc) !important;
  color: var(--text, #111111) !important;
}

.sorteo-quick-pts-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.btn-sorteo-quick-pts {
  background: var(--bg, #f8fafc);
  border: 2px solid var(--ink, #111111);
  border-radius: 8px;
  padding: 4px 9px;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--text, #111111);
  cursor: pointer;
  box-shadow: 1.5px 1.5px 0 var(--shadow, #111111);
  transition: all 0.12s ease;
}

.btn-sorteo-quick-pts:hover,
.btn-sorteo-quick-pts.active {
  background: #fde047;
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--shadow, #111111);
}

.sorteo-badge-count {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #1e40af;
  background: #dbeafe;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--ink, #111111);
  display: inline-flex;
  align-items: center;
  box-shadow: 1.5px 1.5px 0 var(--shadow, #111111);
}

body.dark-mode .sorteo-badge-count {
  background: #1e3a8a;
  color: #93c5fd;
  border-color: #60a5fa;
}

/* Escenario y Caja del Sorteo */
.sorteo-main-stage {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sorteo-box-card {
  background: #fef08a;
  border: 3px solid var(--ink, #111111);
  border-radius: 24px;
  padding: 26px 20px;
  box-shadow: 6px 6px 0 var(--shadow, #111111);
  text-align: center;
  position: relative;
}

body.dark-mode .sorteo-box-card {
  background: #713f12;
}

.sorteo-box-top-tag {
  display: inline-block;
  background: #111111;
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 16px;
  border-radius: 20px;
  letter-spacing: 0.6px;
  margin-bottom: 18px;
}

.sorteo-display-screen {
  background: #ffffff;
  border: 3px solid var(--ink, #111111);
  border-radius: 20px;
  padding: 26px 20px;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  min-height: 90px;
  max-width: 550px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

body.dark-mode .sorteo-display-screen {
  background: #1e293b;
}

.sorteo-current-name {
  font-family: 'Fredoka', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--text, #111111);
  letter-spacing: -0.3px;
  transition: transform 0.05s ease;
  word-break: break-word;
}

.sorteo-display-screen.spinning {
  background: #fff1f2;
  border-color: #e11d48;
}

body.dark-mode .sorteo-display-screen.spinning {
  background: #881337;
  border-color: #fda4af;
}

.sorteo-display-screen.spinning .sorteo-current-name {
  color: #e11d48;
  font-size: 30px;
  animation: sorteoPulse 0.1s infinite alternate;
}

body.dark-mode .sorteo-display-screen.spinning .sorteo-current-name {
  color: #ffffff;
}

@keyframes sorteoPulse {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.sorteo-btn-wrap {
  display: flex;
  justify-content: center;
}

.btn-sorteo-spin {
  background: #22c55e !important;
  color: #ffffff !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  padding: 14px 36px !important;
  border: 3px solid var(--ink, #111111) !important;
  border-radius: 18px !important;
  box-shadow: 4px 4px 0 var(--shadow, #111111) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.btn-sorteo-spin:hover:not(:disabled) {
  transform: translate(-2px, -2px) scale(1.03) !important;
  box-shadow: 6px 6px 0 var(--shadow, #111111) !important;
  background: #16a34a !important;
}

.btn-sorteo-spin:active:not(:disabled) {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--shadow, #111111) !important;
}

.btn-sorteo-spin:disabled {
  opacity: 0.6;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Tarjeta Ganadora Neo-Brutalista */
.sorteo-winner-card {
  background: var(--card-bg, #ffffff);
  border: 3.5px solid var(--ink, #111111);
  border-radius: 24px;
  padding: 30px 24px;
  box-shadow: 6px 6px 0 var(--shadow, #111111);
  text-align: center;
  position: relative;
  animation: sorteoPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes sorteoPop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.sorteo-winner-tag {
  display: inline-block;
  background: #f43f5e;
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 800;
  padding: 6px 18px;
  border-radius: 12px;
  border: 2px solid var(--ink, #111111);
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111);
  margin-bottom: 16px;
}

.sorteo-winner-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 3px solid var(--ink, #111111);
  background: #fef08a;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  margin: 0 auto 12px;
  box-shadow: 3px 3px 0 var(--shadow, #111111);
}

.sorteo-winner-name {
  font-family: 'Fredoka', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--text, #111111);
  margin: 0 0 6px;
}

.sorteo-winner-meta {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  margin-bottom: 16px;
}

.sorteo-winner-prize-banner {
  background: #fef9c3;
  border: 2px dashed #ca8a04;
  border-radius: 14px;
  padding: 10px 18px;
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #854d0e;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

body.dark-mode .sorteo-winner-prize-banner {
  background: #451a03;
  color: #fef08a;
  border-color: #facc15;
}

.sorteo-winner-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-sorteo-award {
  background: #f59e0b !important;
  color: #111111 !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  padding: 11px 22px !important;
  border: 2.5px solid var(--ink, #111111) !important;
  border-radius: 14px !important;
  box-shadow: 3px 3px 0 var(--shadow, #111111) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.15s ease !important;
}

.btn-sorteo-award:hover:not(:disabled) {
  background: #fbbf24 !important;
  transform: translate(-1px, -1px) scale(1.02) !important;
  box-shadow: 4px 4px 0 var(--shadow, #111111) !important;
}

.btn-sorteo-award.awarded {
  background: #22c55e !important;
  color: #ffffff !important;
  cursor: default !important;
  transform: none !important;
}

.btn-sorteo-restart {
  font-size: 15px !important;
  padding: 11px 20px !important;
  border-radius: 14px !important;
}

/* =========================================
   DUELO 1 VS 1 (BATALLA DE PULSADORES)
   ========================================= */

.game-card-badge.duelo {
  background: #fde047;
  color: #111111;
  border-color: #111111;
}

.duelo-config-card {
  background: var(--card-bg, #ffffff);
  border: 3px solid var(--ink, #111111);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Selector de Modos */
.duelo-mode-selector {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-duelo-mode {
  flex: 1;
  min-width: 200px;
  background: #f1f5f9;
  border: 2.5px solid var(--ink, #111111);
  border-radius: 12px;
  padding: 10px 16px;
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #111111);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

body.dark-mode .btn-duelo-mode {
  background: #1e293b;
  color: #f8fafc;
}

.btn-duelo-mode.active {
  background: #fde047;
  color: #111111;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow, #111111);
}

body.dark-mode .btn-duelo-mode.active {
  background: #eab308;
  color: #111111;
}

/* Retadores Grid */
.duelo-settings-grid {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.duelo-player-select-wrap {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.duelo-side-label {
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.duelo-side-label.blue { color: #0284c7; }
.duelo-side-label.red { color: #e11d48; }

body.dark-mode .duelo-side-label.blue { color: #38bdf8; }
body.dark-mode .duelo-side-label.red { color: #fb7185; }

.duelo-select {
  width: 100%;
  padding: 10px 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  border: 2.5px solid var(--ink, #111111);
  border-radius: 12px;
  background: var(--card-bg, #ffffff);
  color: var(--text, #111111);
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  outline: none;
  cursor: pointer;
}

body.dark-mode .duelo-select {
  background: #0f172a;
  color: #f8fafc;
}

.duelo-vs-center {
  display: flex;
  align-items: flex-end;
  padding-bottom: 2px;
}

.btn-duelo-random-players {
  background: #e0e7ff;
  border: 2px solid var(--ink, #111111);
  border-radius: 12px;
  padding: 9px 14px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.btn-duelo-random-players:hover {
  background: #c7d2fe;
  transform: translate(-1px, -1px);
}

body.dark-mode .btn-duelo-random-players {
  background: #312e81;
  color: #e0e7ff;
}

/* Barra de Puntos */
.duelo-points-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1.5px dashed var(--border, #cbd5e1);
}

.duelo-pts-label {
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--text, #111111);
}

.duelo-num-input {
  width: 65px;
  padding: 6px 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  border: 2.5px solid var(--ink, #111111);
  border-radius: 10px;
  background: var(--card-bg, #ffffff);
  color: var(--text, #111111);
  box-shadow: 2px 2px 0 var(--shadow, #111111);
}

body.dark-mode .duelo-num-input {
  background: #0f172a;
  color: #f8fafc;
}

.duelo-quick-pts-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-duelo-quick-pts {
  background: #ffffff;
  border: 2px solid var(--ink, #111111);
  border-radius: 8px;
  padding: 5px 12px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #111111;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  transition: all 0.12s ease;
}

body.dark-mode .btn-duelo-quick-pts {
  background: #1e293b;
  color: #f8fafc;
}

.btn-duelo-quick-pts.active,
.btn-duelo-quick-pts:hover {
  background: #f59e0b;
  color: #111111;
  transform: translate(-1px, -1px);
}

/* Panel Manual (CRUD) */
.duelo-manual-panel {
  background: #fefce8;
  border: 3px solid var(--ink, #111111);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  margin-bottom: 20px;
}

body.dark-mode .duelo-manual-panel {
  background: #422006;
}

.duelo-manual-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.duelo-manual-header h3 {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  color: var(--text, #111111);
}

.duelo-manual-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
}

.duelo-manual-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.duelo-input-text {
  width: 100%;
  padding: 10px 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border: 2.5px solid var(--ink, #111111);
  border-radius: 12px;
  background: #ffffff;
  color: #111111;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
}

body.dark-mode .duelo-input-text {
  background: #0f172a;
  color: #f8fafc;
}

.duelo-form-options {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.duelo-tf-radios {
  display: flex;
  gap: 8px;
}

.duelo-tf-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 2px solid var(--ink, #111111);
  border-radius: 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: #ffffff;
}

body.dark-mode .duelo-tf-radio-label {
  background: #1e293b;
}

.duelo-tf-radio-label.is-true { color: #15803d; }
.duelo-tf-radio-label.is-false { color: #b91c1c; }

body.dark-mode .duelo-tf-radio-label.is-true { color: #4ade80; }
body.dark-mode .duelo-tf-radio-label.is-false { color: #f87171; }

.duelo-input-ref {
  flex: 1;
  min-width: 160px;
  padding: 8px 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  border: 2px solid var(--ink, #111111);
  border-radius: 10px;
  background: #ffffff;
  color: #111111;
}

body.dark-mode .duelo-input-ref {
  background: #0f172a;
  color: #f8fafc;
}

.duelo-manual-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.duelo-manual-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--card-bg, #ffffff);
  border: 2px solid var(--ink, #111111);
  border-radius: 10px;
  padding: 8px 12px;
}

body.dark-mode .duelo-manual-item {
  background: #1e293b;
}

.duelo-manual-item-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #111111);
  flex: 1;
}

.duelo-manual-item-tag {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1.5px solid var(--ink, #111111);
}

.duelo-manual-item-tag.true { background: #bbf7d0; color: #166534; }
.duelo-manual-item-tag.false { background: #fecdd3; color: #9f1239; }

.btn-duelo-del-q {
  background: #fee2e2;
  border: 1.5px solid #111111;
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
}

/* =========================================
   ESCENARIO PRINCIPAL DEL DUELO
   ========================================= */

/* FASE 1: PREPARACIÓN Y LECTURA */
.duelo-prep-card {
  background: #fef08a;
  border: 3.5px solid var(--ink, #111111);
  border-radius: 24px;
  padding: 24px 22px;
  box-shadow: 6px 6px 0 var(--shadow, #111111);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.dark-mode .duelo-prep-card {
  background: #713f12;
}

.duelo-statement-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.duelo-statement-tag {
  display: inline-block;
  background: #111111;
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 16px;
  letter-spacing: 0.5px;
}

.btn-duelo-prep-roll {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 7px 14px !important;
  border-radius: 10px !important;
}

.duelo-prep-statement-box {
  background: var(--card-bg, #ffffff);
  border: 3px solid var(--ink, #111111);
  border-radius: 18px;
  padding: 22px 18px;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  text-align: center;
}

body.dark-mode .duelo-prep-statement-box {
  background: #1e293b;
}

.duelo-prep-instruction {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted, #64748b);
  margin-bottom: 8px;
}

.duelo-prep-statement-text {
  font-family: 'Fredoka', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--text, #111111);
  line-height: 1.35;
  letter-spacing: -0.2px;
}

.duelo-prep-action-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
}

.btn-duelo-big-start {
  background: #22c55e !important;
  color: #ffffff !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  padding: 16px 48px !important;
  border: 3.5px solid var(--ink, #111111) !important;
  border-radius: 20px !important;
  box-shadow: 6px 6px 0 var(--shadow, #111111) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  animation: dueloStartPulse 2s infinite ease-in-out;
}

@keyframes dueloStartPulse {
  0%, 100% { transform: scale(1); box-shadow: 6px 6px 0 var(--shadow, #111111); }
  50% { transform: scale(1.03); box-shadow: 8px 8px 0 var(--shadow, #111111); }
}

.btn-duelo-big-start:hover {
  background: #16a34a !important;
  transform: scale(1.05) translate(-2px, -2px) !important;
}

.duelo-prep-hint {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  text-align: center;
}

/* FASE 2: MODO BATALLA COMPLETA */
.duelo-battle-phase {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: dueloArenaIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes dueloArenaIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.duelo-battle-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-duelo-exit-battle {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 7px 14px !important;
  border-radius: 10px !important;
}

.duelo-battle-match-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg, #ffffff);
  border: 2px solid var(--ink, #111111);
  border-radius: 12px;
  padding: 5px 12px;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
}

body.dark-mode .duelo-battle-match-badge {
  background: #1e293b;
}

.duelo-battle-match-badge .p1-chip {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #0284c7;
}

body.dark-mode .duelo-battle-match-badge .p1-chip {
  color: #38bdf8;
}

.duelo-battle-match-badge .vs-chip {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 800;
  background: #fde047;
  color: #111111;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid #111111;
}

.duelo-battle-match-badge .p2-chip {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #e11d48;
}

body.dark-mode .duelo-battle-match-badge .p2-chip {
  color: #fb7185;
}

/* Banner de la Afirmación en Modo Batalla */
.duelo-battle-statement-banner {
  background: #fef08a;
  border: 3px solid var(--ink, #111111);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body.dark-mode .duelo-battle-statement-banner {
  background: #713f12;
}

.duelo-battle-stmt-tag {
  background: #111111;
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 8px;
}

.duelo-battle-stmt-text {
  font-family: 'Fredoka', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text, #111111);
  flex: 1;
  line-height: 1.3;
}

/* Pantalla Dividida */
.duelo-split-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 768px) {
  .duelo-split-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Paneles de Jugadores */
.duelo-side-panel {
  border: 3.5px solid var(--ink, #111111);
  border-radius: 24px;
  padding: 22px 18px;
  box-shadow: 5px 5px 0 var(--shadow, #111111);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.duelo-side-panel.side-1 {
  background: #e0f2fe;
}

body.dark-mode .duelo-side-panel.side-1 {
  background: #0c4a6e;
}

.duelo-side-panel.side-2 {
  background: #ffe4e6;
}

body.dark-mode .duelo-side-panel.side-2 {
  background: #881337;
}

/* Estado Bloqueado (Locked out) */
.duelo-side-panel.locked-out {
  opacity: 0.45;
  filter: grayscale(0.7);
  pointer-events: none;
  transform: scale(0.97);
}

/* Estado Activo Ganador del Pulsador */
.duelo-side-panel.buzzed-winner {
  transform: scale(1.02);
  border-color: #111111;
  box-shadow: 0 0 0 4px #facc15, 8px 8px 0 var(--shadow, #111111);
}

.duelo-side-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.duelo-side-badge {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--ink, #111111);
  background: #ffffff;
  color: #111111;
  margin-bottom: 4px;
}

.duelo-side-player-name {
  font-family: 'Fredoka', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--text, #111111);
  margin: 0;
  word-break: break-word;
}

/* Luz Indicadora */
.duelo-light-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 2px solid var(--ink, #111111);
  border-radius: 12px;
  padding: 6px 10px;
  box-shadow: 2px 2px 0 var(--shadow, #111111);
}

body.dark-mode .duelo-light-box {
  background: #1e293b;
}

.duelo-light-bulb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--ink, #111111);
  background: #94a3b8;
  transition: all 0.15s ease;
}

.duelo-light-bulb.active {
  background: #facc15;
  box-shadow: 0 0 16px #facc15, 0 0 32px #f59e0b;
  animation: bulbPulse 0.35s infinite alternate;
}

@keyframes bulbPulse {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.18); filter: brightness(1.3); }
}

.duelo-light-status {
  font-family: 'Fredoka', sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted, #64748b);
  letter-spacing: 0.4px;
}

.duelo-light-status.active {
  color: #ca8a04;
  font-weight: 800;
}

body.dark-mode .duelo-light-status.active {
  color: #fde047;
}

/* Contenedor del Pulsador */
.duelo-buzzer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 0;
}

.btn-duelo-buzzer {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1.3 / 1;
  border: 3.5px solid var(--ink, #111111);
  border-radius: 22px;
  cursor: pointer;
  box-shadow: 6px 6px 0 var(--shadow, #111111);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-duelo-buzzer.buzzer-1 {
  background: #38bdf8;
  color: #0f172a;
}

.btn-duelo-buzzer.buzzer-2 {
  background: #f43f5e;
  color: #ffffff;
}

.btn-duelo-buzzer:hover:not(:disabled) {
  transform: translate(-2px, -2px) scale(1.02);
  box-shadow: 8px 8px 0 var(--shadow, #111111);
}

.btn-duelo-buzzer:active:not(:disabled) {
  transform: translate(4px, 4px) scale(0.97);
  box-shadow: 1px 1px 0 var(--shadow, #111111);
}

.btn-duelo-buzzer:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.buzzer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.buzzer-text {
  font-family: 'Fredoka', sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.buzzer-shortcut {
  font-size: 11px;
  font-weight: 800;
  opacity: 0.85;
}

/* Opciones de Respuesta Verdadero / Falso */
.duelo-answer-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: answerPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes answerPop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.duelo-answer-prompt {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  color: var(--text, #111111);
}

.duelo-answer-btns {
  display: flex;
  gap: 8px;
}

.btn-duelo-tf {
  flex: 1;
  border: 2.5px solid var(--ink, #111111);
  border-radius: 14px;
  padding: 12px 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow, #111111);
  transition: all 0.12s ease;
}

.btn-duelo-tf.btn-true {
  background: #22c55e;
  color: #ffffff;
}

.btn-duelo-tf.btn-true:hover {
  background: #16a34a;
  transform: translate(-1px, -1px);
}

.btn-duelo-tf.btn-false {
  background: #ef4444;
  color: #ffffff;
}

.btn-duelo-tf.btn-false:hover {
  background: #dc2626;
  transform: translate(-1px, -1px);
}

/* VS Divider */
.duelo-vs-divider {
  display: flex;
  align-items: center;
  justify-content: center;
}

.duelo-vs-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3.5px solid var(--ink, #111111);
  background: #fde047;
  color: #111111;
  font-family: 'Fredoka', sans-serif;
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0 var(--shadow, #111111);
}

/* Banner de Resultado */
.duelo-round-result-card {
  background: var(--card-bg, #ffffff);
  border: 3.5px solid var(--ink, #111111);
  border-radius: 24px;
  padding: 24px 20px;
  box-shadow: 6px 6px 0 var(--shadow, #111111);
  text-align: center;
  animation: sorteoPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.duelo-result-status {
  display: inline-block;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  padding: 5px 16px;
  border-radius: 12px;
  border: 2px solid var(--ink, #111111);
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  margin-bottom: 12px;
}

.duelo-result-status.correct {
  background: #22c55e;
  color: #ffffff;
}

.duelo-result-status.incorrect {
  background: #ef4444;
  color: #ffffff;
}

.duelo-result-headline {
  font-family: 'Fredoka', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--text, #111111);
  margin: 0 0 8px;
}

.duelo-result-explanation {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  margin: 0 0 20px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.duelo-result-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-duelo-award {
  background: #f59e0b !important;
  color: #111111 !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  padding: 11px 24px !important;
  border: 2.5px solid var(--ink, #111111) !important;
  border-radius: 14px !important;
  box-shadow: 3px 3px 0 var(--shadow, #111111) !important;
  cursor: pointer !important;
}

.btn-duelo-award.awarded {
  background: #22c55e !important;
  color: #ffffff !important;
  cursor: default !important;
}

/* ============================================================= */
/* BOTÓN GENERAR CON ANIMACIÓN DE AGUA (AMARILLO -> VERDE)     */
/* ============================================================= */
.btn-generate-water {
  position: relative !important;
  overflow: hidden !important;
  background-color: #FEF08A !important;
  color: #111111 !important;
  border: 2.5px solid var(--ink, #111111) !important;
  border-radius: 20px !important;
  padding: 9px 22px !important;
  font-family: 'Alte Haas Grotesk', 'Rubik', 'Fredoka', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  box-shadow: 3px 3px 0 var(--shadow, #111111) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  user-select: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.3s ease !important;
  z-index: 1;
}

.btn-generate-water:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 4.5px 4.5px 0 var(--shadow, #111111) !important;
}

.btn-generate-water:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--shadow, #111111) !important;
}

.btn-generate-water .btn-water-fill {
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 120%;
  height: 0%;
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
  border-top: 2.5px solid #16a34a;
  transition: height 0.55s cubic-bezier(0.34, 1.25, 0.64, 1);
  pointer-events: none;
  z-index: 1;
  border-radius: 14px 14px 0 0;
}

/* Efecto de onda y burbujas en la superficie del agua */
.btn-generate-water .btn-water-fill::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  width: 100%;
  height: 6px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 70%);
  opacity: 0.9;
}

.btn-generate-water.is-generating .btn-water-fill {
  height: 100%;
}

.btn-generate-water .btn-water-content {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #111111;
}

.btn-generate-water .btn-water-icon {
  transition: transform 0.5s ease;
}

.btn-generate-water.is-generating .btn-water-icon {
  transform: rotate(360deg) scale(1.15);
}

/* ============================================================
   BOTONES DE ACCIÓN NEOBRUTALISTAS SOLO ÍCONO (EDITAR / ELIMINAR)
   ============================================================ */
.btn-neo-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 2.5px solid var(--ink, #111111) !important;
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111) !important;
  cursor: pointer !important;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, background-color 0.15s ease !important;
  user-select: none !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

.btn-neo-icon:hover {
  transform: translate(-1.5px, -1.5px) !important;
  box-shadow: 4px 4px 0 var(--shadow, #111111) !important;
}

.btn-neo-icon:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--shadow, #111111) !important;
}

/* Botón Editar (Amarillo) */
.btn-neo-icon-edit {
  background-color: #fef08a !important;
  color: #111111 !important;
}

.btn-neo-icon-edit:hover {
  background-color: #fde047 !important;
}

body.dark-mode .btn-neo-icon-edit {
  background-color: #854d0e !important;
  color: #fef08a !important;
  border-color: #f8fafc !important;
  box-shadow: 2.5px 2.5px 0 #000000 !important;
}

/* Botón Eliminar (Rojo / Coral) */
.btn-neo-icon-del {
  background-color: #fee2e2 !important;
  color: #dc2626 !important;
}

.btn-neo-icon-del:hover {
  background-color: #fca5a5 !important;
  color: #b91c1c !important;
}

body.dark-mode .btn-neo-icon-del {
  background-color: #450a0a !important;
  color: #fca5a5 !important;
  border-color: #f8fafc !important;
  box-shadow: 2.5px 2.5px 0 #000000 !important;
}

.btn-neo-icon svg {
  pointer-events: none;
}

/* ============================================================
   SISTEMA DE BURBUJAS GUÍA CONTEXTUALES (NEOBRUTALISTA)
   ============================================================ */
.neo-tip-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 999999;
}

.neo-bubble-tip {
  position: absolute;
  pointer-events: auto;
  max-width: 320px;
  width: calc(100vw - 32px);
  background: #fef9c3;
  color: #111111;
  border: 2.5px solid var(--ink, #111111);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  padding: 14px 16px 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  z-index: 1000000;
  animation: neoBubblePop 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transition: opacity 0.2s ease, transform 0.2s ease;
  user-select: none;
}

@keyframes neoBubblePop {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(6px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.neo-bubble-tip.closing {
  opacity: 0;
  transform: scale(0.85) translateY(4px);
  pointer-events: none;
}

/* Header de la Burbuja */
.neo-bubble-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.neo-bubble-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fde047;
  color: #111111;
  border: 2px solid #111111;
  border-radius: 999px;
  padding: 2px 10px;
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 1.5px 1.5px 0 #111111;
}

.neo-bubble-close-btn {
  background: #fee2e2;
  color: #ef4444;
  border: 2px solid #111111;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 1.5px 1.5px 0 #111111;
  transition: transform 0.12s ease;
  padding: 0;
}

.neo-bubble-close-btn:hover {
  transform: scale(1.1);
  background: #fecaca;
}

.neo-bubble-close-btn:active {
  transform: scale(0.9);
  box-shadow: 0 0 0 #111111;
}

/* Contenido de la Burbuja */
.neo-bubble-title {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
  margin-bottom: 6px;
}

.neo-bubble-text {
  font-size: 12.5px;
  line-height: 1.45;
  color: #334155;
  margin-bottom: 12px;
}

.neo-bubble-text b {
  color: #0f172a;
  font-weight: 700;
}

/* Footer / Botón de Entendido */
.neo-bubble-footer {
  display: flex;
  justify-content: flex-end;
}

.neo-bubble-ok-btn {
  background: #4ade80;
  color: #111111;
  border: 2px solid #111111;
  border-radius: 10px;
  padding: 5px 12px;
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 2px 2px 0 #111111;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.neo-bubble-ok-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #111111;
  background: #22c55e;
}

.neo-bubble-ok-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 0.5px 0.5px 0 #111111;
}

/* Punteros / Flechitas Neobrutalistas con posición dinámica */
.neo-bubble-tip::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

/* Flecha hacia arriba (burbuja está debajo del elemento) */
.neo-bubble-tip.arrow-top::before {
  top: -10px;
  left: var(--arrow-left, 24px);
  border-width: 0 9px 10px 9px;
  border-color: transparent transparent #111111 transparent;
}
.neo-bubble-tip.arrow-top::after {
  content: "";
  position: absolute;
  top: -7px;
  left: calc(var(--arrow-left, 24px) + 1px);
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #fef9c3 transparent;
}

/* Flecha hacia abajo (burbuja está encima del elemento) */
.neo-bubble-tip.arrow-bottom::before {
  bottom: -10px;
  left: var(--arrow-left, 24px);
  border-width: 10px 9px 0 9px;
  border-color: #111111 transparent transparent transparent;
}
.neo-bubble-tip.arrow-bottom::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: calc(var(--arrow-left, 24px) + 1px);
  border-width: 8px 8px 0 8px;
  border-color: #fef9c3 transparent transparent transparent;
}

/* Highlight pulsante en el elemento señalado por el tip */
.neo-target-highlight {
  position: relative !important;
  z-index: 99 !important;
  animation: neoTargetGlow 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate !important;
}

.card-fav-star-btn.neo-target-highlight {
  position: absolute !important;
  z-index: 100 !important;
  border-radius: 50% !important;
  animation: neoStarTargetGlow 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate !important;
}

@keyframes neoStarTargetGlow {
  0% {
    box-shadow: 0 0 0 3.5px #fde047, 3px 3px 0 #111111 !important;
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 5.5px #38bdf8, 4px 4px 0 #111111 !important;
    transform: scale(1.18);
    background: #fef08a !important;
  }
}

@keyframes neoTargetGlow {
  0% {
    box-shadow: 0 0 0 3px #fde047, 3px 3px 0 #111111;
    transform: translateY(0) scale(1.01);
  }
  100% {
    box-shadow: 0 0 0 4.5px #38bdf8, 5px 5px 0 #111111;
    transform: translateY(-2px) scale(1.03);
  }
}

/* Modo Oscuro para Burbujas */
body.dark-mode .neo-bubble-tip {
  background: #1e293b;
  color: #f8fafc;
  border-color: #f8fafc;
  box-shadow: 4px 4px 0 #000000;
}
body.dark-mode .neo-bubble-tip .neo-bubble-title {
  color: #fef08a;
}
body.dark-mode .neo-bubble-tip .neo-bubble-text {
  color: #cbd5e1;
}
body.dark-mode .neo-bubble-tip .neo-bubble-badge {
  background: #0f172a;
  color: #f8fafc;
  border-color: #f8fafc;
  box-shadow: 1.5px 1.5px 0 #000000;
}
body.dark-mode .neo-bubble-tip.arrow-top::before {
  border-color: transparent transparent #f8fafc transparent;
}
body.dark-mode .neo-bubble-tip.arrow-top::after {
  border-color: transparent transparent #1e293b transparent;
}
body.dark-mode .neo-bubble-tip.arrow-bottom::before {
  border-color: #f8fafc transparent transparent transparent;
}
body.dark-mode .neo-bubble-tip.arrow-bottom::after {
  border-color: #1e293b transparent transparent transparent;
}

/* ============================================================
   PACK LECCIONES - UNIFIED CARD STYLES & BADGES
   ============================================================ */
.badge-collection-pack {
  background: #fef08a;
  color: #854d0e;
  border: 1.5px solid #111111;
  font-weight: 800;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body.dark-mode .badge-collection-pack {
  background: #854d0e;
  color: #fef08a;
  border-color: #fef08a;
}

/* ============================================================
   JUEGOS DIGITALES - COLORES DISTINTOS PARA CADA ETIQUETA
   ============================================================ */
.game-card-badge {
  position: absolute !important;
  top: -14px !important;
  border: 2.5px solid #111111 !important;
  padding: 4px 14px !important;
  border-radius: 99px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  box-shadow: 2.5px 2.5px 0 #111111 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  user-select: none !important;
  letter-spacing: 0.3px !important;
}

/* 1. MODO VELOCIDAD (Amarillo Ámbar Vibrante) */
.game-card-badge,
.game-card-badge.race {
  background: #fef08a !important;
  color: #854d0e !important;
}

/* 2. MODULO TRIVIA (Azul Celeste Pastel) */
.game-card-badge.quiz {
  background: #bae6fd !important;
  color: #0369a1 !important;
}

/* 3. MODO SORTEO & PREMIOS (Rosa / Coral Pastel) */
.game-card-badge.sorteo {
  background: #fecdd3 !important;
  color: #9f1239 !important;
}

/* 4. MODO DUELO 1 VS 1 (Púrpura / Lavanda Eléctrico) */
.game-card-badge.duelo {
  background: #ddd6fe !important;
  color: #5b21b6 !important;
}

/* Modo Oscuro para Etiquetas */
body.dark-mode .game-card-badge {
  box-shadow: 2.5px 2.5px 0 #000000 !important;
}

body.dark-mode .game-card-badge.race,
body.dark-mode .game-card-badge:not(.quiz):not(.sorteo):not(.duelo) {
  background: #854d0e !important;
  color: #fef08a !important;
  border-color: #fef08a !important;
}

body.dark-mode .game-card-badge.quiz {
  background: #0369a1 !important;
  color: #bae6fd !important;
  border-color: #bae6fd !important;
}

body.dark-mode .game-card-badge.sorteo {
  background: #9f1239 !important;
  color: #fecdd3 !important;
  border-color: #fecdd3 !important;
}

body.dark-mode .game-card-badge.duelo {
  background: #5b21b6 !important;
  color: #ddd6fe !important;
  border-color: #ddd6fe !important;
}

/* ============================================================
   BOTONES DE JUEGOS: ESTILO NEO-BRUTALISTA STICKER
   ============================================================ */

.btn-nebula-game {
  position: relative !important;
  overflow: hidden !important;
  border: 3px solid #111111 !important;
  border-radius: 14px !important;
  padding: 12px 22px !important;
  min-height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  user-select: none !important;
  text-decoration: none !important;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.18s ease !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Hide nebula inner decorative elements */
.btn-nebula-game .nebula-canvas,
.btn-nebula-game .nebula-sparks-outer {
  display: none !important;
}

/* Button text */
.btn-nebula-game .nebula-btn-text {
  position: relative;
  z-index: 3;
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

/* 1. MODO VELOCIDAD (Ámbar / Amarillo) */
.btn-nebula-race {
  background: linear-gradient(135deg, #fef08a 0%, #fde047 100%) !important;
  box-shadow: 4px 4px 0 #111111 !important;
}
.btn-nebula-race .nebula-btn-text {
  color: #78350f !important;
  text-shadow: none !important;
}

/* 2. MODULO TRIVIA (Celeste / Azul pastel) */
.btn-nebula-quiz {
  background: linear-gradient(135deg, #bae6fd 0%, #7dd3fc 100%) !important;
  box-shadow: 4px 4px 0 #111111 !important;
}
.btn-nebula-quiz .nebula-btn-text {
  color: #0c4a6e !important;
  text-shadow: none !important;
}

/* 3. MODO SORTEO (Rosa / Coral) */
.btn-nebula-sorteo {
  background: linear-gradient(135deg, #fecdd3 0%, #fda4af 100%) !important;
  box-shadow: 4px 4px 0 #111111 !important;
}
.btn-nebula-sorteo .nebula-btn-text {
  color: #881337 !important;
  text-shadow: none !important;
}

/* 4. MODO DUELO (Púrpura / Lavanda) */
.btn-nebula-duelo {
  background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%) !important;
  box-shadow: 4px 4px 0 #111111 !important;
}
.btn-nebula-duelo .nebula-btn-text {
  color: #4c1d95 !important;
  text-shadow: none !important;
}

/* Hover: Lift + bigger shadow */
.btn-nebula-game:hover {
  transform: translate(-2px, -3px) !important;
}
.btn-nebula-race:hover { box-shadow: 6px 7px 0 #111111 !important; }
.btn-nebula-quiz:hover { box-shadow: 6px 7px 0 #111111 !important; }
.btn-nebula-sorteo:hover { box-shadow: 6px 7px 0 #111111 !important; }
.btn-nebula-duelo:hover { box-shadow: 6px 7px 0 #111111 !important; }

/* Active: Press down */
.btn-nebula-game:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 #111111 !important;
}

/* Modo Oscuro */
body.dark-mode .btn-nebula-game {
  border-color: #f8fafc !important;
}
body.dark-mode .btn-nebula-race {
  background: linear-gradient(135deg, #854d0e 0%, #a16207 100%) !important;
  box-shadow: 4px 4px 0 #000 !important;
}
body.dark-mode .btn-nebula-race .nebula-btn-text { color: #fef08a !important; }
body.dark-mode .btn-nebula-quiz {
  background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 100%) !important;
  box-shadow: 4px 4px 0 #000 !important;
}
body.dark-mode .btn-nebula-quiz .nebula-btn-text { color: #bae6fd !important; }
body.dark-mode .btn-nebula-sorteo {
  background: linear-gradient(135deg, #881337 0%, #9f1239 100%) !important;
  box-shadow: 4px 4px 0 #000 !important;
}
body.dark-mode .btn-nebula-sorteo .nebula-btn-text { color: #fecdd3 !important; }
body.dark-mode .btn-nebula-duelo {
  background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%) !important;
  box-shadow: 4px 4px 0 #000 !important;
}
body.dark-mode .btn-nebula-duelo .nebula-btn-text { color: #ddd6fe !important; }

/* ============================================================
   MASTER STYLES: AGENDA DE CLASES (ESTILO NEO-BRUTALISTA)
   ============================================================ */

/* 1. Banner Principal de la Agenda */
.banner-planner {
  background: linear-gradient(135deg, #fef08a 0%, #fde047 50%, #fed7aa 100%) !important;
  color: #111111 !important;
  border: 3.5px solid var(--ink, #111111) !important;
  border-radius: 20px !important;
  box-shadow: 6px 6px 0 var(--shadow, #111111) !important;
  padding: 24px 28px !important;
  position: relative !important;
  margin-bottom: 24px !important;
}

.banner-planner h2 {
  font-family: 'Fredoka', cursive, sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #111111 !important;
  margin: 0 0 8px 0 !important;
  display: flex !important;
  align-items: center !important;
  letter-spacing: -0.5px !important;
}

.banner-planner p {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #451a03 !important;
  margin: 0 !important;
  max-width: 720px !important;
  line-height: 1.45 !important;
}

.banner-planner .banner-corner-doodle {
  position: absolute !important;
  top: -16px !important;
  right: 20px !important;
  width: 52px !important;
  height: 52px !important;
  filter: drop-shadow(3px 3px 0 var(--shadow, #111111)) !important;
  transform: rotate(12deg) !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  pointer-events: none !important;
}

.banner-planner:hover .banner-corner-doodle {
  transform: rotate(24deg) scale(1.15) !important;
}

body.dark-mode .banner-planner {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 60%, #1e293b 100%) !important;
  color: #fef08a !important;
  border-color: #f4f4f5 !important;
  box-shadow: 6px 6px 0 #000000 !important;
}

body.dark-mode .banner-planner h2 {
  color: #ffffff !important;
}

body.dark-mode .banner-planner p {
  color: #e0e7ff !important;
}

/* 2. Barra de Control / Toolbar Neo-Brutalista */
.planner-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-bottom: 24px !important;
  padding: 16px 20px !important;
  background: var(--card-bg, #ffffff) !important;
  border: 3px solid var(--ink, #111111) !important;
  border-radius: 18px !important;
  box-shadow: 5px 5px 0 var(--shadow, #111111) !important;
}

.planner-month-nav {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--bg, #f8fafc) !important;
  padding: 6px 10px !important;
  border: 2.5px solid var(--ink, #111111) !important;
  border-radius: 14px !important;
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111) !important;
}

.btn-planner-nav {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  border: 2.5px solid var(--ink, #111111) !important;
  background: var(--card-bg, #ffffff) !important;
  color: var(--text, #111111) !important;
  cursor: pointer !important;
  font-weight: 800 !important;
  font-family: 'Fredoka', sans-serif !important;
  box-shadow: 2px 2px 0 var(--shadow, #111111) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-planner-nav:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 3.5px 3.5px 0 var(--shadow, #111111) !important;
  background: #fef08a !important;
  color: #111111 !important;
}

.btn-planner-nav:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 0.5px 0.5px 0 var(--shadow, #111111) !important;
}

.planner-month-display {
  font-family: 'Fredoka', cursive, sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 800 !important;
  color: var(--text, #111111) !important;
  padding: 0 10px !important;
  text-transform: capitalize !important;
  min-width: 145px !important;
  text-align: center !important;
  letter-spacing: 0.3px !important;
  user-select: none !important;
}

.btn-planner-today {
  background: #fef08a !important;
  color: #111111 !important;
  border: 2.5px solid var(--ink, #111111) !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  box-shadow: 2px 2px 0 var(--shadow, #111111) !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-planner-today:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 3.5px 3.5px 0 var(--shadow, #111111) !important;
  background: #fde047 !important;
}

.btn-planner-today:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 0.5px 0.5px 0 var(--shadow, #111111) !important;
}

/* Botones de Acción Global de la Agenda */
.planner-actions {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.btn-planner-action {
  border: 2.5px solid var(--ink, #111111) !important;
  padding: 8px 18px !important;
  border-radius: 14px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  font-family: 'Fredoka', sans-serif !important;
  cursor: pointer !important;
  box-shadow: 3px 3px 0 var(--shadow, #111111) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-planner-action:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 var(--shadow, #111111) !important;
}

.btn-planner-action:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--shadow, #111111) !important;
}

.btn-planner-action.btn-primary-add {
  background: #2563eb !important;
  color: #ffffff !important;
}

.btn-planner-action.btn-primary-add:hover {
  background: #1d4ed8 !important;
}

.btn-planner-action.btn-wa {
  background: #22c55e !important;
  color: #ffffff !important;
}

.btn-planner-action.btn-wa:hover {
  background: #16a34a !important;
}

.btn-planner-action.btn-print {
  background: var(--bg, #f8fafc) !important;
  color: var(--text, #111111) !important;
}

.btn-planner-action.btn-print:hover {
  background: #fef08a !important;
  color: #111111 !important;
}

/* 3. Cuadrícula Neo-Brutalista del Calendario Mensual */
.planner-schedule-area {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.planner-schedule-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.planner-cal-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 8px !important;
  background: var(--card-bg, #ffffff) !important;
  border: 3.5px solid var(--ink, #111111) !important;
  border-radius: 20px !important;
  padding: 16px !important;
  box-shadow: 6px 6px 0 var(--shadow, #111111) !important;
  overflow-x: auto !important;
}

.planner-cal-header-cell {
  text-align: center !important;
  font-family: 'Fredoka', cursive, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--text, #111111) !important;
  padding: 8px 4px !important;
  background: var(--bg, #f1f5f9) !important;
  border: 2px solid var(--ink, #111111) !important;
  border-radius: 10px !important;
  box-shadow: 2px 2px 0 var(--shadow, #111111) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.planner-cal-cell {
  min-height: 105px !important;
  border: 2.5px solid var(--ink, #111111) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  background: var(--bg, #f8fafc) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  cursor: pointer !important;
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111) !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.planner-cal-cell:hover {
  background: #fef9c3 !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 4.5px 4.5px 0 var(--shadow, #111111) !important;
  border-color: var(--ink, #111111) !important;
}

.planner-cal-cell.is-today {
  background: #fef08a !important;
  border: 3px solid #111111 !important;
  box-shadow: 4px 4px 0 #111111 !important;
}

.planner-cal-cell.is-today .planner-cell-num {
  background: #111111 !important;
  color: #fef08a !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
  font-weight: 900 !important;
}

.planner-cal-cell.has-events {
  background: #f0fdf4 !important;
  border-color: #16a34a !important;
}

.planner-cal-cell.other-month {
  opacity: 0.35 !important;
  pointer-events: none !important;
  background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0,0,0,0.03) 6px, rgba(0,0,0,0.03) 12px) !important;
  border-style: dashed !important;
  box-shadow: none !important;
}

.planner-cell-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

.planner-cell-num {
  font-family: 'Fredoka', cursive, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--text, #111111) !important;
  line-height: 1 !important;
}

.planner-cal-add-btn {
  width: 22px !important;
  height: 22px !important;
  border-radius: 7px !important;
  border: 2px solid var(--ink, #111111) !important;
  background: var(--card-bg, #ffffff) !important;
  color: var(--text, #111111) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 1.5px 1.5px 0 var(--shadow, #111111) !important;
  transition: all 0.15s !important;
  padding: 0 !important;
}

.planner-cal-add-btn:hover {
  background: #2563eb !important;
  color: #ffffff !important;
  transform: scale(1.18) !important;
  border-color: #111111 !important;
}

.planner-cell-pill {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3.5px 7px !important;
  border-radius: 8px !important;
  background: #ddd6fe !important;
  color: #1e1b4b !important;
  border: 2px solid var(--ink, #111111) !important;
  box-shadow: 2px 2px 0 var(--shadow, #111111) !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  margin-top: 2px !important;
}

.planner-cell-pill:hover {
  transform: scale(1.04) translateY(-1px) !important;
  box-shadow: 3px 3px 0 var(--shadow, #111111) !important;
  background: #c4b5fd !important;
}

.planner-cell-dots {
  display: flex !important;
  gap: 4px !important;
  margin-top: auto !important;
  padding-top: 4px !important;
}

.planner-cell-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--ink, #111111) !important;
  background: #2563eb !important;
  display: inline-block !important;
}

/* 4. Sección de Agenda de Clases Programadas (Debajo del Calendario) */
.planner-monthly-agenda {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.planner-agenda-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 14px 20px !important;
  background: var(--card-bg, #ffffff) !important;
  border: 3px solid var(--ink, #111111) !important;
  border-radius: 16px !important;
  box-shadow: 4.5px 4.5px 0 var(--shadow, #111111) !important;
}

.planner-agenda-title {
  font-family: 'Fredoka', cursive, sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--text, #111111) !important;
  margin: 0 !important;
}

.planner-agenda-count {
  background: #fef08a !important;
  color: #111111 !important;
  border: 2.5px solid var(--ink, #111111) !important;
  border-radius: 12px !important;
  padding: 4px 14px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: 2px 2px 0 var(--shadow, #111111) !important;
}

.planner-agenda-cards-list,
.planner-cards-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) !important;
  gap: 18px !important;
}

/* 5. Tarjetas de Clases en la Agenda */
.planner-card {
  background: var(--card-bg, #ffffff) !important;
  border: 3px solid var(--ink, #111111) !important;
  border-radius: 18px !important;
  box-shadow: 5px 5px 0 var(--shadow, #111111) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.planner-card:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 7px 7px 0 var(--shadow, #111111) !important;
}

.planner-card-header {
  padding: 12px 18px !important;
  background: var(--bg, #f8fafc) !important;
  border-bottom: 2.5px solid var(--ink, #111111) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.planner-date-pill {
  font-family: 'Fredoka', cursive, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--text, #111111) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.planner-card-body {
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  flex: 1 !important;
}

.planner-lesson-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.planner-lesson-title {
  font-family: 'Fredoka', cursive, sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  color: var(--text, #111111) !important;
  flex: 1 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  line-height: 1.35 !important;
}

.planner-people-row {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.planner-tag-teacher {
  background: #bae6fd !important;
  color: #0c4a6e !important;
  border: 2px solid var(--ink, #111111) !important;
  border-radius: 10px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 2px 2px 0 var(--shadow, #111111) !important;
  font-family: 'Fredoka', sans-serif !important;
}

.planner-tag-helper {
  background: #e9d5ff !important;
  color: #581c87 !important;
  border: 2px solid var(--ink, #111111) !important;
  border-radius: 10px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 2px 2px 0 var(--shadow, #111111) !important;
  font-family: 'Fredoka', sans-serif !important;
}

.planner-notes-box {
  background: #fef9c3 !important;
  border: 2px dashed var(--ink, #111111) !important;
  border-radius: 12px !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #713f12 !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  box-shadow: 2px 2px 0 var(--shadow, #111111) !important;
}

.planner-card-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: auto !important;
  padding-top: 10px !important;
  border-top: 2px solid var(--ink, #111111) !important;
  flex-wrap: wrap !important;
}

.btn-plan-sm {
  border: 2px solid var(--ink, #111111) !important;
  border-radius: 10px !important;
  padding: 6px 12px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 2px 2px 0 var(--shadow, #111111) !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: var(--card-bg, #ffffff) !important;
  color: var(--text, #111111) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.btn-plan-sm:hover {
  transform: translate(-1.5px, -1.5px) !important;
  box-shadow: 3px 3px 0 var(--shadow, #111111) !important;
  background: #fef08a !important;
}

.btn-plan-sm:active {
  transform: translate(1.5px, 1.5px) !important;
  box-shadow: 0.5px 0.5px 0 var(--shadow, #111111) !important;
}

.btn-plan-sm.btn-del {
  color: #dc2626 !important;
  border-color: #dc2626 !important;
}

.btn-plan-sm.btn-del:hover {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

/* Animación de Resaltado al hacer clic en un día del calendario */
.planner-card-highlight {
  animation: neoPlannerHighlight 1.8s ease-out !important;
}

@keyframes neoPlannerHighlight {
  0% {
    transform: scale(1.03) translate(-2px, -2px);
    box-shadow: 0 0 0 4px #2563eb, 8px 8px 0 var(--shadow, #111111);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 0 3px #2563eb, 6px 6px 0 var(--shadow, #111111);
  }
  100% {
    transform: scale(1);
    box-shadow: 5px 5px 0 var(--shadow, #111111);
  }
}

/* 6. Modal Neo-Brutalista de Programación y Diálogos */
.planner-modal-overlay:not(.hidden),
.planner-modal-backdrop:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(5px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
}

.planner-modal-overlay.hidden,
.planner-modal-backdrop.hidden,
#aliasModal.hidden,
#plannerModal.hidden,
#plannerDetailsModal.hidden,
.planner-details-view.hidden,
.hidden {
  display: none !important;
}

.planner-modal-card {
  background: var(--card-bg, #ffffff) !important;
  border: 3.5px solid var(--ink, #111111) !important;
  border-radius: 22px !important;
  box-shadow: 8px 8px 0 var(--shadow, #111111) !important;
  width: 100% !important;
  max-width: 580px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  padding: 26px !important;
  display: flex !important;
  flex-direction: column !important;
}

.planner-modal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  padding-bottom: 14px !important;
  border-bottom: 3px solid var(--ink, #111111) !important;
}

.planner-modal-header h3 {
  margin: 0 !important;
  font-family: 'Fredoka', cursive, sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--text, #111111) !important;
  display: flex !important;
  align-items: center !important;
}

.btn-modal-close,
.planner-modal-close {
  background: #fee2e2 !important;
  border: 2.5px solid var(--ink, #111111) !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  color: #dc2626 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 2px 2px 0 var(--shadow, #111111) !important;
  transition: all 0.15s !important;
}

.btn-modal-close:hover,
.planner-modal-close:hover {
  background: #fca5a5 !important;
  color: #991b1b !important;
  transform: rotate(90deg) scale(1.1) !important;
}

/* Vista de Detalles Neo-Brutalista */
.planner-details-view {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.planner-details-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.planner-details-date {
  font-family: 'Fredoka', cursive, sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--text, #111111) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.planner-details-title-box {
  background: var(--bg, #f8fafc) !important;
  border: 2.5px solid var(--ink, #111111) !important;
  border-radius: 16px !important;
  padding: 14px 18px !important;
  box-shadow: 3.5px 3.5px 0 var(--shadow, #111111) !important;
}

.planner-details-label {
  display: block !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--text-muted, #64748b) !important;
}

.planner-details-title {
  margin: 5px 0 0 !important;
  font-family: 'Fredoka', cursive, sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--text, #111111) !important;
  line-height: 1.35 !important;
}

/* Botón Destacado: Ver Lección Completa */
.btn-open-lesson-big {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  border: 3px solid var(--ink, #111111) !important;
  border-radius: 16px !important;
  padding: 14px 18px !important;
  cursor: pointer !important;
  font-family: 'Fredoka', sans-serif !important;
  text-align: left !important;
  box-shadow: 4px 4px 0 var(--shadow, #111111) !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-open-lesson-big:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--shadow, #111111) !important;
  background: #1d4ed8 !important;
}

.btn-open-lesson-big:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--shadow, #111111) !important;
}

.btn-open-lesson-big .btn-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  background: #ffffff !important;
  border: 2.5px solid var(--ink, #111111) !important;
  border-radius: 12px !important;
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111) !important;
  flex-shrink: 0 !important;
}

.btn-open-lesson-big .btn-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
}

.btn-open-lesson-big .btn-text strong {
  font-size: 16.5px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

.btn-open-lesson-big .btn-text small {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #dbeafe !important;
}

.btn-open-lesson-big .btn-arrow {
  font-size: 22px !important;
  font-weight: 800 !important;
  transition: transform 0.15s !important;
}

.btn-open-lesson-big:hover .btn-arrow {
  transform: translateX(5px) !important;
}

/* Personas / Maestros */
.planner-details-people {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 12px !important;
}

.planner-person-card {
  background: var(--card-bg, #ffffff) !important;
  border: 2.5px solid var(--ink, #111111) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  box-shadow: 3px 3px 0 var(--shadow, #111111) !important;
}

.planner-person-card .person-role {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: var(--text-muted, #64748b) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.planner-person-card .person-name {
  display: block !important;
  font-family: 'Fredoka', cursive, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--text, #111111) !important;
  margin-top: 4px !important;
}

/* Notas de Detalles */
.planner-details-notes {
  background: #fef9c3 !important;
  border: 2px dashed var(--ink, #111111) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  box-shadow: 3px 3px 0 var(--shadow, #111111) !important;
}

.planner-details-notes .notes-label {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #713f12 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 4px !important;
}

.planner-details-notes p {
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #713f12 !important;
  line-height: 1.45 !important;
}

/* Barra de acciones de detalles */
.planner-details-actions {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  padding-top: 14px !important;
  border-top: 2.5px solid var(--ink, #111111) !important;
}

/* Formulario Neo-Brutalista de la Agenda */
.planner-form .form-row {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.planner-form .form-group {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 16px !important;
  gap: 5px !important;
}

.planner-form .form-group.flex-1 {
  flex: 1 !important;
  min-width: 200px !important;
}

.planner-form label {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--text, #111111) !important;
  margin-bottom: 2px !important;
}

.planner-form input,
.planner-form select,
.planner-form textarea {
  border: 2.5px solid var(--ink, #111111) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: var(--bg, #ffffff) !important;
  color: var(--text, #111111) !important;
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111) !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.planner-form input:focus,
.planner-form select:focus,
.planner-form textarea:focus {
  outline: none !important;
  box-shadow: 4px 4px 0 var(--shadow, #111111) !important;
  border-color: #2563eb !important;
  background: #ffffff !important;
}

.planner-modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 2.5px solid var(--ink, #111111) !important;
}

/* Neo-Brutalista Lúdico: Modal y Formulario de Agenda con Stickers y Tarjetas de Color */
.nb-planner-card {
  background: #fffdf5 !important;
  border: 3px solid #18181b !important;
  border-radius: 24px !important;
  box-shadow: 7px 7px 0 #18181b !important;
  padding: 18px 20px 22px !important;
  max-width: 580px !important;
  width: 100% !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.nb-planner-card::-webkit-scrollbar {
  width: 8px !important;
}
.nb-planner-card::-webkit-scrollbar-track {
  background: #fefce8 !important;
  border-radius: 10px !important;
}
.nb-planner-card::-webkit-scrollbar-thumb {
  background: #18181b !important;
  border-radius: 10px !important;
}
body.dark-mode .nb-planner-card::-webkit-scrollbar-track {
  background: #1e293b !important;
}
body.dark-mode .nb-planner-card::-webkit-scrollbar-thumb {
  background: #64748b !important;
}

.nb-planner-banner {
  background: linear-gradient(135deg, #fef08a 0%, #fde047 100%) !important;
  border: 2.5px solid #18181b !important;
  border-radius: 18px !important;
  padding: 12px 16px !important;
  margin-bottom: 12px !important;
  box-shadow: 3.5px 3.5px 0 #18181b !important;
  position: relative !important;
}

.nb-planner-header-stickers {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  flex-wrap: wrap !important;
}

.nb-sticker-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border: 2px solid #18181b !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
  box-shadow: 2px 2px 0 #18181b !important;
  line-height: 1.2 !important;
  transition: transform 0.15s ease !important;
}

.nb-sticker-badge:hover {
  transform: scale(1.05) !important;
}

.nb-sticker-yellow {
  background: #ffffff !important;
  color: #18181b !important;
  transform: rotate(-2deg);
}

.nb-sticker-cyan {
  background: #a5f3fc !important;
  color: #18181b !important;
  transform: rotate(2deg);
}

.nb-sticker-pink {
  background: #f472b6 !important;
  color: #ffffff !important;
  transform: rotate(-1.5deg);
}

.nb-sticker-lime {
  background: #bef264 !important;
  color: #18181b !important;
  transform: rotate(-1.5deg);
}

.nb-planner-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.nb-planner-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.nb-planner-icon-box {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background: #ffffff !important;
  border: 2.5px solid #18181b !important;
  border-radius: 14px !important;
  font-size: 22px !important;
  box-shadow: 3px 3px 0 #18181b !important;
  transform: rotate(-3deg) !important;
  flex-shrink: 0 !important;
}

.nb-planner-title {
  margin: 0 !important;
  font-family: 'Fredoka', cursive, sans-serif !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #18181b !important;
  letter-spacing: -0.3px !important;
  line-height: 1.15 !important;
}

.nb-planner-subtitle {
  margin: 2px 0 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #78350f !important;
}

/* Tarjetas de campo coloreadas estilo sticker notes */
.nb-field-card {
  border: 2px solid #18181b !important;
  border-radius: 16px !important;
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
  box-shadow: 3px 3px 0 #18181b !important;
}

.nb-card-sky {
  background: #eff6ff !important;
}

.nb-card-yellow {
  background: #fefce8 !important;
}

.nb-card-mint {
  background: #f0fdf4 !important;
}

.nb-card-peach {
  background: #fff7ed !important;
  border: 2px dashed #18181b !important;
}

.nb-field-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.nb-card-sticker {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 2.5px 8px !important;
  border: 1.5px solid #18181b !important;
  border-radius: 6px !important;
  box-shadow: 1.5px 1.5px 0 #18181b !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1.2 !important;
}

.nb-st-blue {
  background: #bae6fd !important;
  color: #0369a1 !important;
  transform: rotate(-1.5deg) !important;
}

.nb-st-yellow {
  background: #fde047 !important;
  color: #854d0e !important;
  transform: rotate(-1deg) !important;
}

.nb-st-mint {
  background: #bbf7d0 !important;
  color: #15803d !important;
  transform: rotate(1.5deg) !important;
}

.nb-st-peach {
  background: #fed7aa !important;
  color: #c2410c !important;
  transform: rotate(-1deg) !important;
}

.nb-form-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

@media (max-width: 580px) {
  .nb-form-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

.nb-form-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.nb-form-label {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #18181b !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 2px !important;
}

.nb-input {
  border: 2px solid #18181b !important;
  border-radius: 12px !important;
  padding: 9px 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  background: #ffffff !important;
  color: #18181b !important;
  box-shadow: 2.5px 2.5px 0 #18181b !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.nb-input:focus {
  outline: none !important;
  border-color: #2563eb !important;
  box-shadow: 3.5px 3.5px 0 #2563eb !important;
  background: #ffffff !important;
  transform: translate(-1px, -1px) !important;
}

.nb-textarea {
  min-height: 60px !important;
  resize: vertical !important;
  line-height: 1.4 !important;
}

.nb-btn-tag-link {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  background: #fde047 !important;
  color: #854d0e !important;
  border: 1.5px solid #18181b !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
  cursor: pointer !important;
  box-shadow: 1.5px 1.5px 0 #18181b !important;
  transition: all 0.15s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.nb-btn-tag-link:hover {
  background: #facc15 !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 2.5px 2.5px 0 #18181b !important;
}

.nb-lesson-direct-link {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #2563eb !important;
  background: #ffffff !important;
  border: 1.5px solid #2563eb !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  cursor: pointer !important;
  box-shadow: 2px 2px 0 #2563eb !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.nb-modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  padding-bottom: 4px !important;
  border-top: 2.5px solid #18181b !important;
}

.nb-btn-cancel {
  background: #ffffff !important;
  color: #4b5563 !important;
  border: 2px solid #18181b !important;
  border-radius: 12px !important;
  padding: 9px 18px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 2.5px 2.5px 0 #18181b !important;
  transition: all 0.15s !important;
}

.nb-btn-cancel:hover {
  background: #f3f4f6 !important;
  color: #111827 !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3.5px 3.5px 0 #18181b !important;
}

.nb-btn-submit {
  background: #22c55e !important;
  color: #ffffff !important;
  border: 2.5px solid #18181b !important;
  border-radius: 12px !important;
  padding: 10px 22px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 3.5px 3.5px 0 #18181b !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  letter-spacing: 0.3px !important;
}

.nb-btn-submit:hover {
  background: #16a34a !important;
  transform: translate(-1.5px, -1.5px) !important;
  box-shadow: 5px 5px 0 #18181b !important;
}

.nb-btn-submit:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1.5px 1.5px 0 #18181b !important;
}

/* 7. Modo Oscuro Neo-Brutalista para Agenda */
body.dark-mode .planner-toolbar {
  box-shadow: 5px 5px 0 #000000 !important;
  border-color: #f4f4f5 !important;
  background: #0f172a !important;
}

body.dark-mode .planner-month-nav {
  background: #1e293b !important;
  border-color: #f4f4f5 !important;
  box-shadow: 2.5px 2.5px 0 #000000 !important;
}

body.dark-mode .btn-planner-nav {
  background: #0f172a !important;
  border-color: #f4f4f5 !important;
  color: #f8fafc !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

body.dark-mode .btn-planner-nav:hover {
  background: #ca8a04 !important;
  color: #ffffff !important;
}

body.dark-mode .btn-planner-today {
  background: #ca8a04 !important;
  color: #ffffff !important;
  border-color: #f4f4f5 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

body.dark-mode .btn-planner-action {
  box-shadow: 3px 3px 0 #000000 !important;
  border-color: #f4f4f5 !important;
}

body.dark-mode .btn-planner-action:hover {
  box-shadow: 5px 5px 0 #000000 !important;
}

body.dark-mode .btn-planner-action.btn-primary-add {
  background: #2563eb !important;
}

body.dark-mode .btn-planner-action.btn-print {
  background: #1e293b !important;
  color: #f1f5f9 !important;
}

body.dark-mode .btn-planner-action.btn-print:hover {
  background: #334155 !important;
}

body.dark-mode .planner-cal-grid {
  background: #0f172a !important;
  border-color: #f4f4f5 !important;
  box-shadow: 6px 6px 0 #000000 !important;
}

body.dark-mode .planner-cal-header-cell {
  background: #1e293b !important;
  border-color: #f4f4f5 !important;
  box-shadow: 2px 2px 0 #000000 !important;
  color: #f1f5f9 !important;
}

body.dark-mode .planner-cal-cell {
  background: #0f172a !important;
  border-color: #334155 !important;
  box-shadow: 2.5px 2.5px 0 #000000 !important;
}

body.dark-mode .planner-cal-cell:hover {
  background: #1e293b !important;
  border-color: #f4f4f5 !important;
  box-shadow: 4.5px 4.5px 0 #000000 !important;
}

body.dark-mode .planner-cal-cell.is-today {
  background: #713f12 !important;
  border-color: #fde047 !important;
  box-shadow: 4px 4px 0 #000000 !important;
}

body.dark-mode .planner-cal-cell.is-today .planner-cell-num {
  background: #fde047 !important;
  color: #111111 !important;
}

body.dark-mode .planner-cal-cell.has-events {
  background: #064e3b !important;
  border-color: #34d399 !important;
}

body.dark-mode .planner-cal-add-btn {
  background: #1e293b !important;
  border-color: #f4f4f5 !important;
  color: #f8fafc !important;
  box-shadow: 1.5px 1.5px 0 #000000 !important;
}

body.dark-mode .planner-cell-pill {
  background: #4c1d95 !important;
  color: #ede9fe !important;
  border-color: #a78bfa !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

body.dark-mode .planner-cell-pill:hover {
  background: #5b21b6 !important;
}

body.dark-mode .planner-cell-dot {
  background: #60a5fa !important;
  border-color: #93c5fd !important;
}

body.dark-mode .planner-agenda-header {
  background: #0f172a !important;
  border-color: #f4f4f5 !important;
  box-shadow: 4.5px 4.5px 0 #000000 !important;
}

body.dark-mode .planner-agenda-count {
  background: #ca8a04 !important;
  color: #ffffff !important;
  border-color: #f4f4f5 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

body.dark-mode .planner-card {
  background: #0f172a !important;
  border-color: #f4f4f5 !important;
  box-shadow: 5px 5px 0 #000000 !important;
}

body.dark-mode .planner-card:hover {
  box-shadow: 7px 7px 0 #000000 !important;
}

body.dark-mode .planner-card-header {
  background: #1e293b !important;
  border-color: #f4f4f5 !important;
}

body.dark-mode .planner-tag-teacher {
  background: #1e3a8a !important;
  color: #dbeafe !important;
  border-color: #60a5fa !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

body.dark-mode .planner-tag-helper {
  background: #581c87 !important;
  color: #f3e8ff !important;
  border-color: #c084fc !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

body.dark-mode .planner-notes-box {
  background: #451a03 !important;
  color: #fef08a !important;
  border-color: #fde047 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

body.dark-mode .btn-plan-sm {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #f4f4f5 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

body.dark-mode .btn-plan-sm:hover {
  background: #334155 !important;
}

body.dark-mode .planner-modal-card {
  background: #0f172a !important;
  border-color: #f4f4f5 !important;
  box-shadow: 8px 8px 0 #000000 !important;
}

body.dark-mode .planner-modal-header {
  border-color: #f4f4f5 !important;
}

body.dark-mode .planner-details-title-box {
  background: #1e293b !important;
  border-color: #f4f4f5 !important;
  box-shadow: 3.5px 3.5px 0 #000000 !important;
}

body.dark-mode .btn-open-lesson-big {
  background: #2563eb !important;
  border-color: #f4f4f5 !important;
  box-shadow: 4px 4px 0 #000000 !important;
}

body.dark-mode .btn-open-lesson-big .btn-icon {
  background: #0f172a !important;
  border-color: #f4f4f5 !important;
  box-shadow: 2.5px 2.5px 0 #000000 !important;
}

body.dark-mode .planner-person-card {
  background: #1e293b !important;
  border-color: #f4f4f5 !important;
  box-shadow: 3px 3px 0 #000000 !important;
}

body.dark-mode .planner-details-notes {
  background: #451a03 !important;
  color: #fef08a !important;
  border-color: #fde047 !important;
  box-shadow: 3px 3px 0 #000000 !important;
}

body.dark-mode .planner-details-notes .notes-label,
body.dark-mode .planner-details-notes p {
  color: #fef08a !important;
}

body.dark-mode .planner-details-actions,
body.dark-mode .planner-modal-footer {
  border-color: #f4f4f5 !important;
}

body.dark-mode .planner-form input,
body.dark-mode .planner-form select,
body.dark-mode .planner-form textarea {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #f4f4f5 !important;
  box-shadow: 2.5px 2.5px 0 #000000 !important;
}

body.dark-mode .planner-form input:focus,
body.dark-mode .planner-form select:focus,
body.dark-mode .planner-form textarea:focus {
  background: #1e293b !important;
  box-shadow: 4px 4px 0 #000000 !important;
  border-color: #60a5fa !important;
}

body.dark-mode .nb-planner-card {
  background: #0f172a !important;
  border-color: #f4f4f5 !important;
  box-shadow: 7px 7px 0 #000000 !important;
}

body.dark-mode .nb-planner-banner {
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
  border-color: #f4f4f5 !important;
  box-shadow: 3.5px 3.5px 0 #000000 !important;
}

body.dark-mode .nb-planner-subtitle {
  color: #fde047 !important;
}

body.dark-mode .nb-field-card {
  background: #1e293b !important;
  border-color: #475569 !important;
  box-shadow: 3px 3px 0 #000000 !important;
}

body.dark-mode .nb-card-sky,
body.dark-mode .nb-card-yellow,
body.dark-mode .nb-card-mint,
body.dark-mode .nb-card-peach {
  background: #1e293b !important;
  border-color: #475569 !important;
}

body.dark-mode .nb-card-sticker {
  border-color: #f4f4f5 !important;
  box-shadow: 1.5px 1.5px 0 #000000 !important;
}

body.dark-mode .nb-st-blue {
  background: #0284c7 !important;
  color: #ffffff !important;
}

body.dark-mode .nb-st-yellow {
  background: #ca8a04 !important;
  color: #ffffff !important;
}

body.dark-mode .nb-st-mint {
  background: #16a34a !important;
  color: #ffffff !important;
}

body.dark-mode .nb-st-peach {
  background: #ea580c !important;
  color: #ffffff !important;
}

body.dark-mode .nb-sticker-yellow {
  background: #ca8a04 !important;
  color: #ffffff !important;
  border-color: #f4f4f5 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

body.dark-mode .nb-sticker-cyan {
  background: #0891b2 !important;
  color: #ffffff !important;
  border-color: #f4f4f5 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

body.dark-mode .nb-sticker-pink {
  background: #db2777 !important;
  color: #ffffff !important;
  border-color: #f4f4f5 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

body.dark-mode .nb-sticker-lime {
  background: #4d7c0f !important;
  color: #ffffff !important;
  border-color: #f4f4f5 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

body.dark-mode .nb-planner-icon-box {
  background: #1e293b !important;
  border-color: #f4f4f5 !important;
  box-shadow: 3px 3px 0 #000000 !important;
}

body.dark-mode .nb-planner-title {
  color: #f8fafc !important;
}

body.dark-mode .nb-form-label {
  color: #f8fafc !important;
}

body.dark-mode .nb-input {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #64748b !important;
  box-shadow: 2.5px 2.5px 0 #000000 !important;
}

body.dark-mode .nb-input:focus {
  background: #0f172a !important;
  border-color: #60a5fa !important;
  box-shadow: 3.5px 3.5px 0 #60a5fa !important;
}

body.dark-mode .nb-btn-tag-link {
  background: #334155 !important;
  color: #fef08a !important;
  border-color: #f4f4f5 !important;
  box-shadow: 1.5px 1.5px 0 #000000 !important;
}

body.dark-mode .nb-modal-footer {
  border-color: #475569 !important;
}

body.dark-mode .nb-btn-cancel {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border-color: #f4f4f5 !important;
  box-shadow: 2.5px 2.5px 0 #000000 !important;
}

body.dark-mode .nb-btn-submit {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #f4f4f5 !important;
  box-shadow: 3.5px 3.5px 0 #000000 !important;
}

/* 8. Responsive Neo-Brutalista para Agenda */
@media (max-width: 768px) {
  .planner-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border: 3px solid var(--ink, #111111) !important;
    border-radius: 18px !important;
    box-shadow: 4px 4px 0 var(--shadow, #111111) !important;
    margin-bottom: 18px !important;
    background: var(--card-bg, #ffffff) !important;
  }

  .planner-month-nav {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 4px 6px !important;
    gap: 6px !important;
    background: var(--bg, #f8fafc) !important;
    border: 2.2px solid var(--ink, #111111) !important;
    border-radius: 12px !important;
    box-shadow: 2px 2px 0 var(--shadow, #111111) !important;
  }

  .planner-month-display {
    flex: 1 !important;
    min-width: unset !important;
    font-size: 15px !important;
    text-align: center !important;
    font-weight: 800 !important;
    font-family: 'Fredoka', sans-serif !important;
    padding: 0 4px !important;
  }

  .btn-planner-nav {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    border: 2px solid var(--ink, #111111) !important;
    box-shadow: 1.5px 1.5px 0 var(--shadow, #111111) !important;
    flex-shrink: 0 !important;
  }

  .btn-planner-today {
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
    border: 2px solid var(--ink, #111111) !important;
    box-shadow: 1.5px 1.5px 0 var(--shadow, #111111) !important;
    flex-shrink: 0 !important;
    background: #FFE600 !important;
    color: #111 !important;
  }

  .planner-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .planner-actions .btn-planner-action {
    flex: 1 1 0px !important;
    width: 50% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    border: 2.2px solid var(--ink, #111111) !important;
    border-radius: 10px !important;
    box-shadow: 2px 2px 0 var(--shadow, #111111) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-family: 'Fredoka', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  .planner-actions .btn-text-desktop,
  .planner-actions .btn-planner-text {
    display: inline !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  .planner-cal-grid {
    padding: 10px !important;
    gap: 5px !important;
  }

  .planner-cal-header-cell {
    font-size: 11px !important;
    padding: 5px 2px !important;
  }

  .planner-cal-cell {
    min-height: 80px !important;
    padding: 5px !important;
    border-width: 2px !important;
  }

  .planner-cell-num {
    font-size: 12px !important;
  }

  .planner-cell-pill {
    font-size: 9.5px !important;
    padding: 2px 4px !important;
  }

  .planner-agenda-cards-list,
  .planner-cards-list {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .banner-planner {
    padding: 18px 16px !important;
  }

  .banner-planner h2 {
    font-size: 22px !important;
  }

  .planner-cal-grid {
    padding: 6px !important;
    gap: 4px !important;
  }

  .planner-cal-cell {
    min-height: 65px !important;
    padding: 3px !important;
    border-radius: 8px !important;
  }

  .planner-cell-pill {
    display: none !important;
  }

  .planner-cell-dots {
    display: flex !important;
    justify-content: center !important;
    margin-top: 4px !important;
  }

  .planner-modal-card {
    padding: 18px 14px !important;
  }
}



/* ==========================================================================
/* ==========================================================================

/* ==========================================================================
   SECCIÓN: DISEÑO NEO-BRUTALISTA PURO PARA TODAS LAS TARJETAS
   (Pack Lecciones, Láminas Bíblicas, Lecciones regulares)
   Las tarjetas de Jesús (.card-jesus-epic) se mantienen 100% intactas.
   ========================================================================== */

/* 1. Estructura Maestra de Tarjeta Neo-Brutalista */
.card:not(.card-jesus-epic) {
  background: var(--card-bg, #ffffff) !important;
  border: 3px solid var(--ink, #111111) !important;
  border-radius: 20px !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 5px 5px 0 var(--shadow, #111111) !important;
  position: relative !important;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.16s ease, border-color 0.15s ease !important;
  cursor: pointer !important;
}

/* Interacción Táctil Neo-Brutalista */
.card:not(.card-jesus-epic):hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 8px 8px 0 var(--shadow, #111111) !important;
}

.card:not(.card-jesus-epic):active {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--shadow, #111111) !important;
}

/* 2. Acentos de Borde Superior Grueso (Color Stripe) */
/* Pack Lecciones */
.card.card-pack:not(.card-jesus-epic),
.card[data-pack-id]:not(.card-jesus-epic) {
  border-top: 8px solid #f59e0b !important;
}

/* Láminas Bíblicas por Colección */
.card.card-story-rg:not(.card-jesus-epic) {
  border-top: 8px solid #0284c7 !important;
}

.card.card-story-ls:not(.card-jesus-epic) {
  border-top: 8px solid #16a34a !important;
}

.card.card-story-bn:not(.card-jesus-epic) {
  border-top: 8px solid #ea580c !important;
}

.card.card-story-ml:not(.card-jesus-epic) {
  border-top: 8px solid #9333ea !important;
}

.card.card-story-sp:not(.card-jesus-epic) {
  border-top: 8px solid #f59e0b !important;
}

.card.card-story-wb:not(.card-jesus-epic) {
  border-top: 8px solid #10b981 !important;
}

/* Lecciones Regulares por Grupo de Edad */
.card.age-0-2:not(.card-jesus-epic) { border-top: 8px solid #f59e0b !important; }
.card.age-3-5:not(.card-jesus-epic) { border-top: 8px solid #10b981 !important; }
.card.age-6-8:not(.card-jesus-epic) { border-top: 8px solid #0284c7 !important; }
.card.age-9-11:not(.card-jesus-epic) { border-top: 8px solid #ea580c !important; }
.card.age-ado:not(.card-jesus-epic) { border-top: 8px solid #8b5cf6 !important; }
.card.age-inf:not(.card-jesus-epic) { border-top: 8px solid #0d9488 !important; }
.card.age-padres:not(.card-jesus-epic) { border-top: 8px solid #e11d48 !important; }
.card.age-gen:not(.card-jesus-epic):not(.card-pack) { border-top: 8px solid #64748b !important; }

/* 3. Ventana de Thumbnail / Imagen */
.card:not(.card-jesus-epic) .thumb {
  height: 195px !important;
  background: #f1f5f9 !important;
  overflow: hidden !important;
  position: relative !important;
  border-bottom: 2.5px solid var(--ink, #111111) !important;
  border-radius: 17px 17px 0 0 !important;
}

.card:not(.card-jesus-epic) .thumb img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}

/* 4. Clip Decorativo Mini en Esquina */
.card-clip-mini {
  position: absolute !important;
  top: -12px !important;
  left: 16px !important;
  width: 26px !important;
  height: 26px !important;
  pointer-events: none !important;
  z-index: 5 !important;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.35)) !important;
  transition: transform 0.2s ease !important;
}

.card:hover .card-clip-mini {
  transform: rotate(-6deg) scale(1.1) !important;
}

/* 5. Badges tipo Sticker Neo-Brutalista */
.card:not(.card-jesus-epic) .card-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
}

.card:not(.card-jesus-epic) .badge {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 9px !important;
  border: 2px solid var(--ink, #111111) !important;
  box-shadow: 2px 2px 0 var(--shadow, #111111) !important;
  letter-spacing: 0.3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  line-height: 1.2 !important;
  user-select: none !important;
}

/* Paletas Neo-Brutalistas para Badges */
.badge-collection-pack {
  background: #fef08a !important;
  color: #78350f !important;
  border-color: #78350f !important;
}

.badge-collection-rg {
  background: #bae6fd !important;
  color: #0369a1 !important;
  border-color: #075985 !important;
}

.badge-collection-ls {
  background: #bbf7d0 !important;
  color: #15803d !important;
  border-color: #14532d !important;
}

.badge-collection-bn {
  background: #fed7aa !important;
  color: #c2410c !important;
  border-color: #7c2d12 !important;
}

.badge-collection-ml {
  background: #f5d0fe !important;
  color: #7e22ce !important;
  border-color: #581c87 !important;
}

/* 6. Título y Contenido de la Tarjeta */
.card:not(.card-jesus-epic) .card-body {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.card:not(.card-jesus-epic) h3 {
  font-family: 'Fredoka', 'Rubik', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin: 0 0 10px !important;
  color: var(--text, #111111) !important;
}

/* 7. Píldoras de Formato / Recursos (.nb-format-pills) */
.nb-format-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 4px 0 10px !important;
}

.nb-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--ink, #111111) !important;
  box-shadow: 1.5px 1.5px 0 var(--shadow, #111111) !important;
  letter-spacing: 0.3px !important;
  line-height: 1.2 !important;
}

.nb-pill.pptx {
  background: #ffedd5 !important;
  color: #c2410c !important;
  border-color: #9a3412 !important;
}

.nb-pill.jpg {
  background: #dcfce7 !important;
  color: #15803d !important;
  border-color: #166534 !important;
}

.nb-pill.pdf {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border-color: #991b1b !important;
}

.nb-pill.pack-res {
  background: #fef08a !important;
  color: #854d0e !important;
  border-color: #78350f !important;
}

.nb-pill.pack-units {
  background: #e0e7ff !important;
  color: #3730a3 !important;
  border-color: #312e81 !important;
}

/* 8. Metadatos de la Tarjeta */
.card:not(.card-jesus-epic) .meta {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--text-muted, #64748b) !important;
  margin-top: auto !important;
  padding-top: 6px !important;
}

.card:not(.card-jesus-epic) .card-id {
  font-family: monospace, sans-serif !important;
  font-weight: 800 !important;
  background: var(--bg, #f1f5f9) !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  border: 1px solid var(--ink, #111111) !important;
}

/* 9. Botones de Acción (WhatsApp & Flecha) */
.card:not(.card-jesus-epic) .btn-wa-card {
  border: 2px solid var(--ink, #111111) !important;
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111) !important;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s !important;
}

.card:not(.card-jesus-epic) .btn-wa-card:hover {
  transform: translate(-1.5px, -1.5px) !important;
  box-shadow: 4px 4px 0 var(--shadow, #111111) !important;
  background: #25D366 !important;
  color: #ffffff !important;
}

.card:not(.card-jesus-epic) .btn-wa-card:active {
  transform: translate(1.5px, 1.5px) !important;
  box-shadow: 1px 1px 0 var(--shadow, #111111) !important;
}

.card:not(.card-jesus-epic) .card-arrow-indicator {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--text-muted, #94a3b8) !important;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s !important;
}

.card:not(.card-jesus-epic):hover .card-arrow-indicator {
  transform: translateX(5px) !important;
  color: var(--ink, #111111) !important;
}

/* 10. Botón de Favorito */
.card:not(.card-jesus-epic) .btn-card-fav {
  border: 2px solid var(--ink, #111111) !important;
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111) !important;
}

.card:not(.card-jesus-epic) .btn-card-fav:hover {
  transform: scale(1.1) !important;
  box-shadow: 3.5px 3.5px 0 var(--shadow, #111111) !important;
}

/* 11. Iconos Vectoriales Integrados */
.card-inline-svg {
  display: inline-block !important;
  vertical-align: -2px !important;
  margin-right: 4px !important;
  flex-shrink: 0 !important;
}

.story-cover-author-pill .card-inline-svg {
  width: 13px !important;
  height: 13px !important;
  vertical-align: -2px !important;
  margin-right: 4px !important;
}

/* 12. Modo Oscuro Neo-Brutalista Puro */
body.dark-mode .card:not(.card-jesus-epic) {
  background: #18181b !important;
  border-color: #f4f4f5 !important;
  box-shadow: 5px 5px 0 #000000 !important;
}

body.dark-mode .card:not(.card-jesus-epic):hover {
  box-shadow: 8px 8px 0 #000000 !important;
}

body.dark-mode .card:not(.card-jesus-epic):active {
  box-shadow: 2px 2px 0 #000000 !important;
}

body.dark-mode .card:not(.card-jesus-epic) h3 {
  color: #f8fafc !important;
}

body.dark-mode .card:not(.card-jesus-epic) .thumb {
  background: #0f172a !important;
  border-bottom-color: #f4f4f5 !important;
}

body.dark-mode .card:not(.card-jesus-epic) .card-id {
  background: #27272a !important;
  border-color: #f4f4f5 !important;
  color: #f4f4f5 !important;
}

body.dark-mode .card:not(.card-jesus-epic) .meta {
  color: #a1a1aa !important;
}

body.dark-mode .card:not(.card-jesus-epic) .badge {
  border-color: #f4f4f5 !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

body.dark-mode .card:not(.card-jesus-epic) .nb-pill {
  border-color: #f4f4f5 !important;
  box-shadow: 1.5px 1.5px 0 #000000 !important;
}

body.dark-mode .card:not(.card-jesus-epic) .btn-wa-card {
  border-color: #f4f4f5 !important;
  background: #27272a !important;
  box-shadow: 2.5px 2.5px 0 #000000 !important;
}

body.dark-mode .card:not(.card-jesus-epic) .btn-card-fav {
  border-color: #f4f4f5 !important;
  background: #27272a !important;
  box-shadow: 2.5px 2.5px 0 #000000 !important;
}

body.dark-mode .card:not(.card-jesus-epic):hover .card-arrow-indicator {
  color: #f8fafc !important;
}

/* 13. TARJETAS DE UNIDADES NEO-BRUTALISTAS (.unit-card) */
.units-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 22px !important;
  margin-top: 24px !important;
}

.unit-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  overflow: visible !important;
}

.unit-card .thumb {
  width: 100% !important;
  height: 190px !important;
  min-height: 190px !important;
  border-bottom: 2.5px solid var(--ink, #111111) !important;
  border-radius: 17px 17px 0 0 !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.unit-card .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}

.unit-cover-theme {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  text-align: center !important;
}

.unit-cover-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 90% !important;
}

.unit-cover-bubble {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 2.5px solid var(--ink, #111111) !important;
  box-shadow: 2px 2px 0 var(--shadow, #111111) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ink, #111111) !important;
}

.unit-cover-pill {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  background: #ffffff !important;
  color: var(--ink, #111111) !important;
  border: 1.5px solid var(--ink, #111111) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  letter-spacing: 0.5px !important;
}

.unit-cover-title-text {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.unit-card-title {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin: 0 0 8px !important;
  color: var(--text, #111111) !important;
}

.unit-card-desc {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-muted, #64748b) !important;
  line-height: 1.45 !important;
  margin: 0 0 16px !important;
  flex: 1 !important;
}

.unit-card .card-body {
  padding: 18px 20px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.unit-card .card-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-top: 2px dashed rgba(0, 0, 0, 0.12) !important;
  padding: 12px 18px 16px !important;
  margin-top: auto !important;
}

.unit-card .btn-wa-card {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

body.dark-mode .unit-cover-bubble {
  background: #1e293b !important;
  border-color: #f4f4f5 !important;
  color: #f8fafc !important;
}

body.dark-mode .unit-cover-pill {
  background: #1e293b !important;
  border-color: #f4f4f5 !important;
  color: #f8fafc !important;
}

body.dark-mode .unit-cover-title-text {
  color: #f8fafc !important;
}

/* ============================================================
   MODULO CAPACITACIONES: MAESTROS QUE PROTEGEN (DISEÑO NATIVO INTEGRADO)
   ============================================================ */

.capacitaciones-catalog-area {
  animation: catalogSlideFade 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

/* Barra Superior Unificada e Integrada Neo-Brutalista */
.cap-unified-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0 24px;
  padding: 18px 22px;
  background: var(--card-bg, #ffffff);
  border: 3.5px solid var(--ink, #111111);
  border-radius: 22px;
  box-shadow: 6px 6px 0 var(--shadow, #111111);
  position: relative;
  overflow: hidden;
}

.cap-bar-main-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
}

.cap-bar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cap-bar-title-group {
  display: flex;
  flex-direction: column;
}

.cap-bar-badge {
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  color: #2563eb;
  letter-spacing: 0.6px;
  margin-bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cap-bar-title {
  margin: 0;
  font-family: 'Fredoka', sans-serif;
  font-size: 23px;
  font-weight: 800;
  color: var(--text, #111111);
  line-height: 1.2;
}

.cap-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cap-tracker-chip {
  font-family: 'Fredoka', sans-serif;
  font-size: 12.5px;
  font-weight: 900;
  padding: 7px 16px;
  background: #FFE600;
  color: #111111;
  border: 2.5px solid var(--ink, #111111);
  border-radius: 999px;
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111);
  letter-spacing: 0.4px;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s ease;
}

/* Barra de Progreso Gamificada Rayada */
.cap-progress-track-wrapper {
  width: 100%;
  background: #F1F5F9;
  border: 2.8px solid var(--ink, #111111);
  border-radius: 999px;
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111);
  height: 20px;
  overflow: hidden;
  position: relative;
  margin-top: 4px;
}

.cap-progress-bar-fill {
  height: 100%;
  width: 7%;
  background: repeating-linear-gradient(
    45deg,
    #FFE600,
    #FFE600 12px,
    #F59E0B 12px,
    #F59E0B 24px
  );
  background-size: 34px 34px;
  animation: candyStripesMove 1.2s linear infinite;
  border-radius: 999px;
  transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-right: 2.5px solid var(--ink, #111111);
}

@keyframes candyStripesMove {
  0% { background-position: 0 0; }
  100% { background-position: 34px 0; }
}

.cap-progress-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
}

.cap-progress-pct-badge {
  font-family: 'Fredoka', sans-serif;
  font-size: 11.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  background: #FFE600;
  color: #111111;
  border: 2px solid #111111;
  border-radius: 999px;
  box-shadow: 2px 2px 0 #111111;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cap-progress-motto {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-muted, #52525B);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cap-progress-motto svg {
  flex-shrink: 0;
  color: #f59e0b;
}

/* =============================================================
   MÓDULO TRACK CON PÍLDORA DESLIZANTE (GLIDER) - CAPACITACIONES
   ============================================================= */
.cap-stepper-module {
  position: relative;
  width: 100%;
  margin-top: 10px;
  background: var(--card-bg, #ffffff);
  border: 2.8px solid var(--ink, #111111);
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  border-radius: 18px;
  padding: 10px 12px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.cap-stepper-module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 4px;
}

.cap-stepper-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text, #111111);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cap-stepper-nav-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cap-stepper-step-btn {
  background: #ffffff;
  border: 2px solid var(--ink, #111111);
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text, #111111);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  user-select: none;
}

.cap-stepper-step-btn:hover:not(:disabled) {
  transform: translate(-1.5px, -1.5px);
  box-shadow: 3px 3px 0 var(--shadow, #111111);
  background: #fef08a;
}

.cap-stepper-step-btn:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--shadow, #111111);
}

.cap-stepper-step-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}

/* Track de Checkpoints con Scroll Suave */
.cap-checkpoints-strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px;
  width: 100%;
  background: #f1f5f9;
  border: 2px solid var(--ink, #111111);
  border-radius: 999px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  box-sizing: border-box;
}
.cap-checkpoints-strip::-webkit-scrollbar { display: none; }

/* Píldora Deslizante Inteligente (Glider) */

/* Glider de Capacitación Neurodiversidad (Cyan) */
#capNeuroGliderPill {
  background: #38bdf8 !important;
}

.cap-glider-pill {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 999px;
  background: #FFE600;
  border: 2.2px solid var(--ink, #111111);
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  box-sizing: border-box;
  transition: transform 0.32s cubic-bezier(0.34, 1.35, 0.64, 1),
              width 0.32s cubic-bezier(0.34, 1.35, 0.64, 1),
              height 0.22s ease,
              opacity 0.2s ease,
              background 0.25s ease;
  will-change: transform, width;
}

/* Botones de Módulos (Pills) */
.cap-chk-pill {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  min-width: 32px;
  height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1.8px solid transparent;
  background: transparent;
  color: var(--text-muted, #475569);
  font-family: 'Fredoka', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  user-select: none;
  white-space: nowrap;
}

.cap-chk-pill svg {
  flex-shrink: 0;
}

.cap-chk-pill:hover:not(.is-active) {
  background: rgba(0, 0, 0, 0.05);
  color: #111111;
  border-color: rgba(0, 0, 0, 0.12);
}

.cap-chk-pill.is-active {
  color: #111111 !important;
  font-weight: 900 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.cap-chk-pill.is-completed:not(.is-active) {
  color: #15803d;
  font-weight: 800;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
}

.cap-chk-pill.is-completed:not(.is-active):hover {
  background: rgba(34, 197, 94, 0.22);
  border-color: #15803d;
  color: #0f5132;
}

/* Píldora de Módulo Bloqueado (Progreso Secuencial) */
.cap-chk-pill.is-locked {
  opacity: 0.42;
  cursor: not-allowed;
  color: var(--text-muted, #64748b) !important;
  background: rgba(0, 0, 0, 0.03);
  border: 1.5px dashed rgba(0, 0, 0, 0.22);
}

.cap-chk-pill.is-locked:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.4);
  color: #dc2626 !important;
}

body.dark-mode .cap-chk-pill.is-locked {
  opacity: 0.38;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.2);
  color: #94a3b8 !important;
}

/* ============================================================
   BARRA DE PROGRESO NEURODIVERSIDAD - ANIMACION DINAMICA AGRADABLE
   ============================================================ */
.cap-neuro-progress-fill {
  background: linear-gradient(
    135deg,
    #0284c7 0%,
    #38bdf8 20%,
    #818cf8 40%,
    #a855f7 60%,
    #ec4899 80%,
    #fbbf24 100%
  ) !important;
  background-size: 250% 250% !important;
  animation: neuroGradientFlow 4s ease infinite alternate !important;
  transition: width 0.65s cubic-bezier(0.34, 1.45, 0.64, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  border-right: 2.8px solid var(--ink, #111111) !important;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.45), inset 0 -2px 4px rgba(0, 0, 0, 0.22);
}

.cap-neuro-progress-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 30%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0.15) 70%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: neuroShimmer 2.4s infinite ease-in-out;
  pointer-events: none;
}

.cap-neuro-progress-fill::after {
  content: '';
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.95), 0 0 14px 6px rgba(56, 189, 248, 0.8);
  animation: neuroLeadingPulse 1.4s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes neuroGradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes neuroShimmer {
  0% { left: -120%; }
  60% { left: 140%; }
  100% { left: 140%; }
}

@keyframes neuroLeadingPulse {
  0% { transform: translateY(-50%) scale(0.8); opacity: 0.7; }
  100% { transform: translateY(-50%) scale(1.3); opacity: 1; filter: drop-shadow(0 0 6px #fde047); }
}

.cap-progress-pct-badge.is-popping {
  animation: badgePopAnim 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badgePopAnim {
  0% { transform: scale(1); }
  50% { transform: scale(1.15) rotate(-2deg); }
  100% { transform: scale(1); }
}

.cap-btn-emergency {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #fecdd3 !important;
  color: #9f1239 !important;
  border: 2.5px solid var(--ink, #111111) !important;
  box-shadow: 3px 3px 0 var(--shadow, #111111) !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}

.cap-btn-emergency:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 var(--shadow, #111111) !important;
}

.cap-btn-emergency:active {
  transform: translate(1.5px, 1.5px) !important;
  box-shadow: 1px 1px 0 var(--shadow, #111111) !important;
}

/* Escenario Interactivo Directo */
.cap-interactive-stage {
  max-width: 920px;
  margin: 0 auto 50px;
  width: 100%;
}

.cap-stage-card {
  background: #FFFDF9;
  background-image: radial-gradient(#CBD5E1 1.2px, transparent 1.2px);
  background-size: 18px 18px;
  border: 3.5px solid var(--ink, #111111);
  box-shadow: 7px 7px 0px var(--shadow, #111111);
  border-radius: 24px;
  padding: 34px 38px;
  box-sizing: border-box;
  animation: stageCardEnter 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  position: relative;
  overflow: hidden;
  border-top: 10px solid #FFE600 !important;
}

@keyframes stageCardEnter {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.cap-neo-box {
  background: #FFFDF0;
  border: 3px solid var(--ink, #111111);
  box-shadow: 4px 4px 0px var(--shadow, #111111);
  border-radius: 16px;
  padding: 18px 22px;
  color: var(--text, #111111);
  position: relative;
}

.cap-theory-box {
  background: #FFFFFF;
  border-left: 8px solid #22C55E;
  border-top: 2.5px solid var(--ink, #111111);
  border-right: 2.5px solid var(--ink, #111111);
  border-bottom: 2.5px solid var(--ink, #111111);
  box-shadow: 3.5px 3.5px 0px var(--shadow, #111111);
  border-radius: 14px;
  padding: 18px 22px;
  margin: 18px 0;
  color: var(--text, #111111);
}

.cap-badge {
  display: inline-block;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  border: 2px solid var(--ink, #111111);
  box-shadow: 2px 2px 0px var(--shadow, #111111);
  border-radius: 999px;
  letter-spacing: 0.3px;
  font-family: 'Fredoka', sans-serif;
  transform: rotate(-1.5deg);
  transition: transform 0.2s ease;
}
.cap-badge:hover {
  transform: rotate(1deg) scale(1.05);
}
.cap-badge-yellow { background: #ffe600; color: #111111; }
.cap-badge-green { background: #22C55E; color: #ffffff; }
.cap-badge-cyan { background: #38BDF8; color: #111111; }
.cap-badge-purple { background: #C084FC; color: #ffffff; }
.cap-badge-coral { background: #FB7185; color: #ffffff; }

.cap-neo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  border: 3px solid var(--ink, #111111);
  box-shadow: 4px 4px 0px var(--shadow, #111111);
  border-radius: 14px;
  background: var(--card-bg, #ffffff);
  color: var(--text, #111111);
  text-decoration: none;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}
.cap-neo-btn:hover {
  transform: translate(-3px, -3px) rotate(-0.5deg);
  box-shadow: 6px 6px 0px var(--shadow, #111111);
}
.cap-neo-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1.5px 1.5px 0px var(--shadow, #111111);
}
.cap-neo-btn-yellow { background: #ffe600; color: #111111; }
.cap-neo-btn-green { background: #22C55E; color: #ffffff; }
.cap-neo-btn-coral { background: #FB7185; color: #ffffff; }
.cap-neo-btn-cyan { background: #38BDF8; color: #111111; }
.cap-neo-btn-purple { background: #C084FC; color: #ffffff; }
.cap-neo-btn-dark { background: #111111; color: #ffffff; }

.cap-btn-arrow {
  display: inline-block;
  font-size: 16px;
  transition: transform 0.2s ease;
}
.cap-neo-btn:hover .cap-btn-arrow {
  transform: translateX(4px);
  animation: arrowBounce 0.6s infinite alternate;
}
@keyframes arrowBounce {
  0% { transform: translateX(2px); }
  100% { transform: translateX(7px); }
}

.cap-option-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.cap-option-btn {
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  background: var(--card-bg, #ffffff);
  border: 2.8px solid var(--ink, #111111);
  box-shadow: 3.5px 3.5px 0px var(--shadow, #111111);
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease, border-color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text, #111111);
  line-height: 1.45;
  user-select: none;
}

.cap-opt-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: #FEF08A;
  color: #111111;
  border: 2px solid #111111;
  border-radius: 9px;
  box-shadow: 2px 2px 0 #111111;
  font-family: 'Fredoka', sans-serif;
  font-weight: 900;
  font-size: 14px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.cap-option-btn:hover:not(:disabled) {
  background: #FFFDF0;
  transform: translate(-3px, -3px) rotate(-0.5deg);
  box-shadow: 6px 6px 0px var(--shadow, #111111);
  border-color: #2563EB;
}

.cap-option-btn:hover:not(:disabled) .cap-opt-letter {
  transform: rotate(-4deg) scale(1.1);
  background: #FFE600;
}

.cap-option-btn:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 1.5px 1.5px 0px var(--shadow, #111111);
}

.cap-option-btn:disabled {
  cursor: not-allowed;
  opacity: 0.95;
}

.cap-option-btn.opt-correct {
  background: #DCFCE7 !important;
  border-color: #16A34A !important;
  box-shadow: 4.5px 4.5px 0 #16A34A !important;
  animation: correctBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cap-option-btn.opt-correct .cap-opt-letter {
  background: #22C55E !important;
  color: #FFFFFF !important;
  border-color: #166534;
}

@keyframes correctBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.03) translate(-2px, -2px); }
  100% { transform: scale(1); }
}

.cap-option-btn.opt-wrong {
  background: #FEE2E2 !important;
  border-color: #DC2626 !important;
}
.cap-option-btn.opt-wrong .cap-opt-letter {
  background: #F87171 !important;
  color: #FFFFFF !important;
}

.cap-feedback-box {
  margin-top: 18px;
  padding: 16px 20px;
  border: 3px solid var(--ink, #111111);
  border-radius: 16px;
  box-shadow: 4px 4px 0px var(--shadow, #111111);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.5;
  animation: stageCardEnter 0.28s ease-out;
}
.cap-fb-success { background: #DCFCE7 !important; border-color: #166534 !important; color: #14532D !important; }
.cap-fb-warning { background: #FEF9C3 !important; border-color: #854D0E !important; color: #713F12 !important; }
.cap-fb-error { background: #FEE2E2 !important; border-color: #991B1B !important; color: #7F1D1D !important; }

.cap-grid-rights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.cap-right-item {
  background: var(--card-bg, #ffffff);
  border: 2.5px solid var(--ink, #111111);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 3px 3px 0px var(--shadow, #111111);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cap-right-item:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4.5px 4.5px 0px var(--shadow, #111111);
}
.cap-right-item strong {
  font-size: 12.5px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 5px;
  color: var(--text, #111111);
}
.cap-right-item p {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #555555);
  line-height: 1.45;
  margin: 0;
}

.cap-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 18, 18, 0.75);
  backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeInModal 0.2s ease-out;
}
.cap-modal-card {
  background: var(--card-bg, #ffffff);
  border: 3.5px solid var(--ink, #111111);
  box-shadow: 8px 8px 0px var(--shadow, #111111);
  border-radius: 18px;
  max-width: 520px;
  width: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

/* Modo oscuro para capacitaciones */
body.dark-mode .cap-unified-bar {
  background: #1f2937;
  border-color: #f4f4f5;
  box-shadow: 6px 6px 0 #000000;
}
body.dark-mode .cap-bar-title {
  color: #f8fafc;
}
body.dark-mode .cap-tracker-chip {
  background: #854d0e;
  color: #fef08a;
  border-color: #fef08a;
  box-shadow: 2.5px 2.5px 0 #000000;
}
body.dark-mode .cap-progress-track-wrapper {
  background: #0f172a;
  border-color: #f4f4f5;
  box-shadow: 2.5px 2.5px 0 #000000;
}
body.dark-mode .cap-progress-pct-badge {
  background: #fde047;
  color: #111111;
  border-color: #f4f4f5;
}
body.dark-mode .cap-progress-motto {
  color: #cbd5e1;
}
body.dark-mode .cap-chk-pill {
  background: #1f2937;
  border-color: #f4f4f5;
  color: #f8fafc;
  box-shadow: 1.5px 1.5px 0 #000000;
}
body.dark-mode .cap-chk-pill.is-active {
  background: #fde047 !important;
  color: #111111 !important;
  box-shadow: 3px 3px 0 #000000 !important;
}
body.dark-mode .cap-chk-pill.is-locked {
  background: #334155;
  opacity: 0.5;
}
body.dark-mode .cap-stage-card {
  background: #1f2937;
  background-image: radial-gradient(#334155 1.2px, transparent 1.2px);
  border-color: #f4f4f5;
  box-shadow: 7px 7px 0 #000000;
  color: #f8fafc;
}
body.dark-mode .cap-stage-card h2 {
  color: #e2e8f0 !important;
}
body.dark-mode .cap-stage-card p {
  color: #cbd5e1;
}
body.dark-mode .cap-neo-box {
  background: #374151;
  border-color: #f4f4f5;
  color: #f8fafc;
  box-shadow: 4px 4px 0 #000000;
}
body.dark-mode .cap-neo-box p,
body.dark-mode .cap-neo-box span {
  color: #f8fafc !important;
}
body.dark-mode .cap-theory-box {
  background: #374151;
  border-color: #f4f4f5;
  color: #f8fafc;
  box-shadow: 3.5px 3.5px 0 #000000;
}
body.dark-mode .cap-theory-box p {
  color: #f8fafc !important;
}
body.dark-mode .cap-option-btn {
  background: #1f2937;
  border-color: #f4f4f5;
  color: #f8fafc;
  box-shadow: 3.5px 3.5px 0 #000000;
}
body.dark-mode .cap-opt-letter {
  background: #fde047;
  color: #111111;
  border-color: #111111;
}
body.dark-mode .cap-option-btn:hover:not(:disabled) {
  background: #374151;
  border-color: #60a5fa;
}
body.dark-mode .cap-right-item {
  background: #374151;
  border-color: #f4f4f5;
  box-shadow: 3px 3px 0 #000000;
}
body.dark-mode .cap-right-item strong {
  color: #f8fafc;
}
body.dark-mode .cap-right-item p {
  color: #cbd5e1;
}
/* ============================================================
   ESTILOS DE LA CONSTANCIA FORMAL (ADN NEO-BRUTALISTA)
   ============================================================ */

.cap-cert-personalize-box {
  background: #FFFDF0;
  border: 2.5px solid var(--ink, #111111);
  box-shadow: 3px 3px 0 var(--shadow, #111111);
  border-radius: 16px;
  padding: 16px 20px;
  margin: 18px 0 24px;
}

.cap-cert-input-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cap-cert-name-input {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 11px 16px;
  border: 2.5px solid var(--ink, #111111);
  border-radius: 12px;
  background: var(--card-bg, #ffffff);
  color: var(--text, #111111);
  box-shadow: 2.5px 2.5px 0 var(--shadow, #111111);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.cap-cert-name-input:focus {
  border-color: #2563eb;
  box-shadow: 4px 4px 0 #2563eb;
}

.cap-cert-input-hint {
  font-size: 11.5px;
  font-weight: 800;
  color: #16a34a;
}

/* Contenedor del Certificado */
.cap-certificate-container {
  background: #ffffff;
  border: 3.5px solid #111111;
  box-shadow: 6px 6px 0px #111111;
  border-radius: 20px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  margin: 20px 0 26px;
  background-image: radial-gradient(#d4d4d8 1.2px, transparent 1.2px);
  background-size: 20px 20px;
  color: #111111;
}

.cert-sticker-ribbon {
  position: absolute;
  top: 18px;
  right: -32px;
  transform: rotate(20deg);
  background: #22c55e;
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-size: 10.5px;
  font-weight: 900;
  padding: 5px 38px;
  border: 2.5px solid #111111;
  box-shadow: 2px 2px 0 #111111;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cert-inner-frame {
  border: 2.5px dashed #111111;
  border-radius: 14px;
  padding: 28px 24px 22px;
  background: rgba(255, 255, 255, 0.94);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.cert-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 2px solid #111111;
  padding-bottom: 14px;
}

.cert-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.cert-brand-name {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 900;
  color: #111111;
}

.cert-brand-pill {
  background: #ffe600;
  border: 2px solid #111111;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 8px;
  box-shadow: 1.5px 1.5px 0 #111111;
}

.cert-title-main {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(20px, 3.5vw, 28px);
  font-weight: 900;
  text-transform: uppercase;
  color: #111111;
  margin: 6px 0 2px;
  letter-spacing: 0.5px;
}

.cert-program-subtitle {
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #2563eb;
  letter-spacing: 0.6px;
}

.cert-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cert-awarded-text {
  font-size: 12.5px;
  font-weight: 800;
  color: #4b5563;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.cert-recipient-box {
  margin: 4px 0 8px;
  width: 100%;
}

.cert-recipient-name {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(24px, 4.5vw, 36px);
  font-weight: 900;
  color: #111111;
  margin: 0;
  line-height: 1.2;
}

.cert-recipient-underline {
  height: 3px;
  background: linear-gradient(90deg, transparent, #ffe600 20%, #ffe600 80%, transparent);
  border-radius: 2px;
  margin: 4px auto 0;
  width: min(320px, 80%);
}

.cert-description {
  font-size: 12.5px;
  font-weight: 700;
  color: #374151;
  margin: 4px 0 0;
  max-width: 680px;
  line-height: 1.45;
}

.cert-course-highlight {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fef08a;
  border: 2.5px solid #111111;
  border-radius: 12px;
  padding: 8px 18px;
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(13px, 2.2vw, 16px);
  font-weight: 900;
  color: #111111;
  box-shadow: 2.5px 2.5px 0 #111111;
  margin: 6px 0;
}

.cert-legal-framework {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.4;
  margin: 4px 0 0;
  max-width: 640px;
}

.cert-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 2px solid #111111;
  padding-top: 14px;
  text-align: left;
}

.cert-badge-official {
  font-family: 'Fredoka', sans-serif;
  font-size: 10px;
  font-weight: 900;
  color: #166534;
  background: #dcfce7;
  border: 1.5px solid #166534;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.cert-association-text {
  font-size: 11px;
  font-weight: 800;
  color: #374151;
  margin: 0;
  line-height: 1.35;
}

.cert-date-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.cert-date-pill {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 900;
  background: #f4f0ea;
  border: 1.5px solid #111111;
  padding: 3px 10px;
  border-radius: 8px;
  color: #111111;
}

.cert-city-text {
  font-size: 10px;
  font-weight: 800;
  color: #6b7280;
  text-transform: uppercase;
}

/* Modo oscuro adaptado */
body.dark-mode .cap-cert-personalize-box {
  background: #1f2937;
  border-color: #f4f4f5;
  box-shadow: 3px 3px 0 #000000;
}
body.dark-mode .cap-cert-name-input {
  background: #374151;
  border-color: #f4f4f5;
  color: #f8fafc;
  box-shadow: 2.5px 2.5px 0 #000000;
}
body.dark-mode .cap-certificate-container {
  background: #1e293b;
  border-color: #f4f4f5;
  box-shadow: 6px 6px 0px #000000;
  color: #f8fafc;
  background-image: radial-gradient(#334155 1.2px, transparent 1.2px);
}
body.dark-mode .cert-inner-frame {
  background: rgba(15, 23, 42, 0.95);
  border-color: #f4f4f5;
}
body.dark-mode .cert-brand-name,
body.dark-mode .cert-title-main,
body.dark-mode .cert-recipient-name {
  color: #f8fafc;
}
body.dark-mode .cert-header,
body.dark-mode .cert-footer {
  border-color: #f4f4f5;
}
body.dark-mode .cert-description,
body.dark-mode .cert-legal-framework {
  color: #cbd5e1;
}
body.dark-mode .cert-association-text {
  color: #94a3b8;
}

/* Reglas de Impresión / Guardar en PDF: Formato Horizontal (Landscape) */
@page {
  size: landscape;
  margin: 8mm;
}

@media print {
  @page {
    size: landscape;
    margin: 8mm;
  }

  html, body {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  /* Reset ancestral containers to prevent containment of fixed positioning and blank gaps */
  .cap-interactive-stage,
  .cap-stage-card,
  #cap-step-13,
  #cap-neuro-step-14,
  main,
  .wrap {
    transform: none !important;
    animation: none !important;
    filter: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    max-width: none !important;
    width: 100% !important;
  }

  /* Completely remove elements outside and preceding the certificate from the flow */
  header,
  nav,
  .mobile-bottom-bar,
  .cap-unified-top-bar,
  .cap-cert-personalize-box,
  #cap-step-13 > *:not(#cap-certificate-view),
  #cap-neuro-step-14 > *:not(#cap-neuro-certificate-view) {
    display: none !important;
  }

  body * { visibility: hidden !important; }
  #cap-certificate-view, #cap-certificate-view *,
  #cap-neuro-certificate-view, #cap-neuro-certificate-view * { visibility: visible !important; }

  #cap-certificate-view,
  #cap-neuro-certificate-view {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 194mm !important;
    margin: 0 auto !important;
    border: 3.5px solid #111111 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
  }

  .cert-inner-frame {
    background: #ffffff !important;
    border: 2.5px dashed #111111 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 18px 24px 14px !important;
    box-sizing: border-box !important;
  }

  .cert-sticker-ribbon {
    border-color: #111111 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .cert-header {
    padding-bottom: 10px !important;
  }

  .cert-title-main {
    font-size: 26px !important;
    margin: 4px 0 2px !important;
  }

  .cert-recipient-name {
    font-size: 32px !important;
  }

  .cert-course-highlight {
    padding: 6px 18px !important;
    font-size: 15px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .cert-badge-official {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .cert-footer {
    padding-top: 10px !important;
  }
}


/* Ocultar de la vista los badges de Pack Especial / niveles de edad y el meta ID de las tarjetas de packs */
.card-pack-epic .card-badges,
.card-pack-epic .meta,
.card-pack-epic .pack-card-pills-row,
.card-pack-epic .pack-card-meta-line,
.pack-card-pills-row,
.pack-card-meta-line {
  display: none !important;
}

.card-pack-epic .card-actions {
  margin-top: auto !important;
}

/* Ocultar de la vista la información técnica ID y stickers en tarjetas */
.card-id,
.card .card-id,
[class*="card-id"] {
  display: none !important;
}

#laminasCardsGrid .card-badges {
  display: none !important;
}

/* Quick Alias Chips */
.alias-saved-accounts-list {
  background: var(--bg-soft, #f8fafc);
  border: 2px dashed var(--ink, #111);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.btn-alias-chip {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn-alias-chip:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2.5px 2.5px 0 #111;
  background: #fde047;
}
.btn-alias-chip:active {
  transform: translate(1px, 1px);
  box-shadow: 0.5px 0.5px 0 #111;
}

/* ============================================================
   ESTILOS DE SINCRONIZACIÓN OFFLINE Y CONEXIÓN (NEO-BRUTALISTA)
   ============================================================ */
.agape-offline-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 2px solid var(--ink, #111111);
  box-shadow: 2px 2px 0 var(--shadow, #111111);
  transition: all 0.2s ease;
  user-select: none;
  cursor: default;
}

.agape-offline-sync-badge.is-online {
  background: #DCFCE7;
  color: #14532D;
  border-color: #166534;
}

.agape-offline-sync-badge.is-online .agape-sync-dot {
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  background: #22C55E;
  border: 1.5px solid #14532D;
  display: inline-block;
  animation: pulseSyncDot 2s infinite ease-in-out;
}

@keyframes pulseSyncDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.65; }
}

.agape-offline-sync-badge.is-offline {
  background: #FEF08A;
  color: #854D0E;
  border-color: #854D0E;
  animation: offlineBadgeWiggle 0.4s ease-out;
}

@keyframes offlineBadgeWiggle {
  0% { transform: scale(0.95); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Barra Dock de Sincronización Mi Clase + Agenda */
.miclase-sync-card {
  background: var(--card-bg, #ffffff);
  border: 2.8px solid var(--ink, #111111);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--shadow, #111111);
  padding: 16px 20px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.miclase-sync-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.miclase-sync-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--text, #111111);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.miclase-sync-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.miclase-sync-pill {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1.8px solid #111;
  box-shadow: 1.5px 1.5px 0 #111;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.miclase-sync-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-miclase-agenda-jump {
  background: #FFE600;
  color: #111111;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 12px;
  border: 2px solid #111;
  box-shadow: 2.5px 2.5px 0 #111;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-miclase-agenda-jump:hover {
  transform: translate(-1.5px, -1.5px);
  box-shadow: 4px 4px 0 #111;
  background: #fef08a;
}

.btn-miclase-agenda-jump:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #111;
}

/* Botón rápido para agendar lección en cada tarjeta */
.btn-card-schedule-quick {
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  user-select: none;
}
.btn-card-schedule-quick:hover {
  transform: translate(-1.5px, -1.5px);
  box-shadow: 3px 3px 0 var(--shadow, #111111);
}
.btn-card-schedule-quick:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--shadow, #111111);
}

.badge-card-scheduled {
  background: #dbeafe;
  color: #1e40af;
  border: 1.5px solid #111;
  font-weight: 800;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

body.dark-mode .miclase-sync-card {
  background: #1f2937;
  border-color: #f4f4f5;
  box-shadow: 4px 4px 0 #000000;
}
body.dark-mode .miclase-sync-title {
  color: #f8fafc;
}
body.dark-mode .btn-miclase-agenda-jump {
  background: #fde047;
  color: #111111;
}

@media (max-width: 768px) {
  #headerOfflineSyncBadge {
    display: none !important;
  }
  .miclase-sync-card {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    gap: 12px;
  }
  .miclase-sync-actions {
    width: 100%;
  }
  .btn-miclase-agenda-jump {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
  }
}






/* ============================================================ */
/* CARTAS ESPECIALES ESTILO POKÉMON HOLO (PROGRAMAS ANUALES 1 AÑO) */
/* ============================================================ */

.pokemon-card-wrapper {
  position: relative;
  border-radius: 20px;
  padding: 4.5px;
  overflow: hidden !important;
  background: linear-gradient(135deg, #ffd700, #ff6b6b, #48dbfb, #1dd1a1, #ffd700);
  background-size: 300% 300%;
  animation: pokemonFoilBorder 6s linear infinite;
  box-shadow: 
    0 0 0 2.5px #111,
    6px 6px 0px #111,
    0 10px 25px rgba(0,0,0,0.35);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.pokemon-card-wrapper:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 0 0 2.5px #111,
    10px 10px 0px #111,
    0 18px 36px rgba(255, 215, 0, 0.4);
}

@keyframes pokemonFoilBorder {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.card-pokemon-special {
  position: relative;
  border-radius: 16px !important;
  background: #ffffff;
  color: #111111;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  border: 2px solid #111 !important;
  cursor: pointer;
  user-select: none;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Holo Sheen Reflection (Efecto brillo diagonal metálico) */
.card-pokemon-special::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -150%;
  width: 200%;
  height: 200%;
  contain: paint;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255, 255, 255, 0.15) 35%,
    rgba(255, 255, 255, 0.7) 48%,
    rgba(254, 240, 138, 0.75) 51%,
    rgba(244, 114, 182, 0.65) 54%,
    rgba(56, 189, 248, 0.75) 57%,
    transparent 75%
  );
  transform: rotate(25deg);
  pointer-events: none;
  z-index: 25;
  transition: left 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.pokemon-card-wrapper:hover .card-pokemon-special::before {
  left: 120%;
}

/* STICKER "1 AÑO DE LECCIONES" EN CARDS ESPECIALES */
.card-annual-sticker {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: #fde047;
  color: #111111;
  border: 2px solid #111111;
  box-shadow: 2.5px 2.5px 0px #111111;
  border-radius: 9px;
  padding: 4px 10px;
  font-family: 'Fredoka', 'Rubik', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transform: rotate(-2.5deg);
  z-index: 12;
  pointer-events: none;
  letter-spacing: 0.2px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  line-height: 1.2;
}

.pokemon-card-wrapper:hover .card-annual-sticker,
.card-pokemon-special:hover .card-annual-sticker {
  transform: rotate(1deg) scale(1.06);
  box-shadow: 3.5px 3.5px 0px #111111;
}

body.dark-mode .card-annual-sticker {
  background: #facc15;
  color: #111111;
  border-color: #111111;
  box-shadow: 2.5px 2.5px 0px #000000;
}

/* BARRA SUPERIOR ESTILO POKÉMON (TIPO / EDICIÓN Y HP/SEMANAS) */
.pokemon-card-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #111111;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  border-bottom: 2.5px solid #111;
}

.pokemon-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fde047;
  color: #111;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.3px;
  border: 1.5px solid #111;
}

.pokemon-hp-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  color: #facc15;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.pokemon-hp-val {
  color: #ffffff;
  font-weight: 900;
}

/* MARCO DE LA ILUSTRACIÓN HOLOGRÁFICA */
.pokemon-art-window {
  position: relative;
  margin: 8px 10px 0;
  border: 2.5px solid #111;
  border-radius: 12px;
  overflow: hidden;
  background: #1e293b;
  box-shadow: 2px 2px 0 #111;
}

.pokemon-art-window .thumb {
  height: 165px !important;
  min-height: 165px !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.pokemon-art-window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.pokemon-card-wrapper:hover .pokemon-art-window img {
  transform: scale(1.05);
}

.pokemon-holo-badge-corner {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(17, 17, 17, 0.92);
  backdrop-filter: blur(4px);
  color: #fde047;
  border: 1.5px solid #f59e0b;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 2px 2px 0 #111;
  z-index: 10;
}

/* CINTA DE REGLA DEL POKÉMON / LEMA DE 1 AÑO */
.pokemon-card-ribbon {
  margin: 6px 10px 0;
  background: linear-gradient(90deg, #111111, #1e293b, #111111);
  color: #fef08a;
  font-size: 9.5px;
  font-weight: 800;
  text-align: center;
  padding: 4px 6px;
  border-radius: 6px;
  letter-spacing: 0.6px;
  border: 1.5px solid #ca8a04;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* CUERPO DE LA CARTA (HABILIDADES / PROGRAMA ANUAL) */
.pokemon-card-body {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pokemon-card-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 17px;
  font-weight: 800;
  margin: 4px 0 6px;
  line-height: 1.25;
  color: #111;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pokemon-card-desc {
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
  line-height: 1.45;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CAJA DE HABILIDAD / CONTENIDO CURRICULAR (ATTACK BOX STYLE) */
.pokemon-stats-box {
  background: #f8fafc;
  border: 2px solid #111;
  border-radius: 10px;
  padding: 8px 10px;
  margin-top: auto;
  box-shadow: 2px 2px 0 #111;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pokemon-stat-item {
  display: flex;
  flex-direction: column;
}
.pokemon-stat-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  color: #64748b;
}
.pokemon-stat-value {
  font-size: 11.5px;
  font-weight: 900;
  color: #111;
  display: flex;
  align-items: center;
  gap: 3px;
}

.pokemon-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 10px;
  border-top: 2px dashed #e2e8f0;
  gap: 6px;
  flex-wrap: wrap;
}

.pokemon-rarity-tag {
  font-size: 10px;
  font-weight: 900;
  color: #b45309;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.pokemon-open-btn {
  background: #111111;
  color: #fde047;
  border: 2px solid #111;
  padding: 6px 14px;
  border-radius: 8px;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 2.5px 2.5px 0 #111;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.pokemon-card-wrapper:hover .pokemon-open-btn {
  background: #fde047;
  color: #111;
  transform: translate(-1.5px, -1.5px);
  box-shadow: 4px 4px 0 #111;
}

/* ============================================================ */
/* VARIACIONES ELEMENTALES TEMÁTICAS PARA CADA PACK             */
/* ============================================================ */

/* 1. Campeones: Oro / Electricidad */
.pokemon-pack-campeones {
  background: linear-gradient(135deg, #fef08a 0%, #ffffff 50%, #fef9c3 100%) !important;
}
.pokemon-wrapper-campeones {
  background: linear-gradient(135deg, #f59e0b, #fde047, #f97316, #fde047) !important;
}

/* 2. Héroes: Rubí / Fuego */
.pokemon-pack-heroes {
  background: linear-gradient(135deg, #ffe4e6 0%, #ffffff 50%, #fecdd3 100%) !important;
}
.pokemon-wrapper-heroes {
  background: linear-gradient(135deg, #e11d48, #fb7185, #f59e0b, #e11d48) !important;
}

/* 3. La Biblia para Niños: Esmeralda / Naturaleza */
.pokemon-pack-biblia_ninos {
  background: linear-gradient(135deg, #dcfce7 0%, #ffffff 50%, #d1fae5 100%) !important;
}
.pokemon-wrapper-biblia_ninos {
  background: linear-gradient(135deg, #059669, #34d399, #38bdf8, #059669) !important;
}

/* 4. CampAmor: Amatista / Cósmico */
.pokemon-pack-campamor {
  background: linear-gradient(135deg, #f3e8ff 0%, #ffffff 50%, #ede9fe 100%) !important;
}
.pokemon-wrapper-campamor {
  background: linear-gradient(135deg, #8b5cf6, #c084fc, #ec4899, #8b5cf6) !important;
}

/* 5. CSI Evidencia: Zafiro / Detective */
.pokemon-pack-csi_evidencia {
  background: linear-gradient(135deg, #e0f2fe 0%, #ffffff 50%, #bae6fd 100%) !important;
}
.pokemon-wrapper-csi_evidencia {
  background: linear-gradient(135deg, #0284c7, #38bdf8, #818cf8, #0284c7) !important;
}

/* MODO OSCURO */
body.dark-mode .card-pokemon-special {
  background: #1e293b !important;
  color: #f8fafc !important;
}
body.dark-mode .card-pokemon-special h3 {
  color: #f8fafc !important;
}
body.dark-mode .pokemon-card-title {
  color: #f8fafc !important;
}
body.dark-mode .pokemon-card-desc {
  color: #cbd5e1 !important;
}
body.dark-mode .pokemon-stats-box {
  background: #0f172a !important;
  border-color: #334155 !important;
}
body.dark-mode .pokemon-stat-value {
  color: #f8fafc !important;
}
body.dark-mode .pokemon-stat-label {
  color: #94a3b8 !important;
}
body.dark-mode .pokemon-card-footer {
  border-top-color: #334155 !important;
}

.pokemon-card-footer .btn-wa-card {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
  margin: 0 !important;
}