/* =========================================
   STYLE.CSS - MODERN PREMIUM LMS THEME
   ========================================= */

:root {
  /* --- Paleta de Colores Premium --- */
  --primary: #3b82f6;       /* Azul vibrante */
  --primary-dark: #2563eb;  /* Azul profundo */
  --primary-light: #eff6ff; /* Azul muy suave */
  --primary-soft: #dbeafe;
  
  --secondary: #64748b;
  --accent: #8b5cf6;        /* Un toque violeta para detalles */

  --bg-body: #f8fafc;       /* Gris azulado muy pálido */
  --bg-card: #ffffff;
  --bg-input: #f9fafb;

  --text-main: #1e293b;     /* Gris casi negro, más suave que #000 */
  --text-muted: #94a3b8;

  --border: #e2e8f0;
  --border-hover: #cbd5e1;

  /* --- Feedback Colors (Vibrantes) --- */
  --success: #22c55e;
  --success-dark: #16a34a;
  --success-bg: #dcfce7;
  
  --error: #ef4444;
  --error-dark: #dc2626;
  --error-bg: #fee2e2;

  /* --- UI Tokens --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -1px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
  --shadow-floating: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ease-spring: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- RESET & BASICS --- */
* { box-sizing: border-box; margin: 0; padding: 0; outline-color: var(--primary); }

body {
  font-family: var(--font-sans);
  background: var(--bg-body);
  color: var(--text-main);
  padding-top: 80px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font-family: inherit; }
button { cursor: pointer; border: none; background: none; -webkit-tap-highlight-color: transparent; }
a { text-decoration: none; color: inherit; transition: color 0.2s; }

/* --- COMPONENTES UI GLOBALES --- */

/* Botones con efecto 3D sutil */
.btn {
  background: var(--primary);
  color: white;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 0 var(--primary-dark); /* Efecto 3D */
  transform: translateY(0);
}
.btn:hover {
  background: #4f8df9;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--primary-dark);
}
.btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--primary-dark);
}

.btn.ghost {
  background: transparent;
  color: var(--secondary);
  box-shadow: none;
  border: 2px solid transparent;
}
.btn.ghost:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary-light);
  transform: translateY(-1px);
  box-shadow: none;
}

.btn-sm { padding: 8px 16px; font-size: 13px; box-shadow: 0 2px 0 var(--primary-dark); }
.btn-sm:hover { box-shadow: 0 3px 0 var(--primary-dark); }
.full-width { width: 100%; display: flex; }

.input {
  width: 100%; 
  padding: 14px 16px; 
  border: 2px solid var(--border); 
  border-radius: var(--radius-md); 
  font-size: 16px; 
  transition: all 0.2s; 
  background: var(--bg-input);
  color: var(--text-main);
}
.input:hover { border-color: var(--border-hover); }
.input:focus { 
  border-color: var(--primary); 
  background: white; 
  box-shadow: 0 0 0 4px var(--primary-soft);
  outline: none;
}

.home-card {
  background: var(--bg-card); 
  border-radius: var(--radius-xl); 
  padding: 30px; 
  box-shadow: var(--shadow-sm); 
  border: 1px solid rgba(255,255,255,0.5); /* Glass feel hint */
  margin-bottom: 24px; 
  transition: all 0.3s ease;
}
.home-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.badge {
  display: inline-block; 
  background: var(--primary-light); 
  color: var(--primary); 
  padding: 4px 12px; 
  border-radius: 999px; 
  font-size: 11px; 
  font-weight: 800; 
  text-transform: uppercase; 
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.progress { 
  width: 100%; 
  height: 10px; 
  background: #e2e8f0; 
  border-radius: 99px; 
  overflow: hidden; 
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}
.progress span { 
  display: block; 
  height: 100%; 
  background: linear-gradient(90deg, var(--primary), #60a5fa); 
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1); 
}

/* --- LAYOUT --- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 72px;
  background: rgba(255,255,255,0.85); 
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6); 
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between; padding: 0 30px;
}

.brand { display: flex; align-items: center; gap: 14px; }
.logo {
  width: 42px; height: 42px; 
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)); 
  color: white; border-radius: 12px; 
  display: flex; align-items: center; justify-content: center; 
  font-weight: 800; font-size: 20px;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}
.brand-text { font-weight: 800; font-size: 19px; display: flex; align-items: center; gap: 8px; letter-spacing: -0.02em; }
.brand-user { font-weight: 500; color: var(--text-muted); font-size: 15px; }

.stats { display: flex; align-items: center; gap: 20px; }
.stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.stat .small { font-size: 10px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; letter-spacing: 0.05em; margin-bottom: 2px;}
.stat-value { font-weight: 800; color: var(--text-main); font-size: 15px; }
.progress-stat { width: 140px; align-items: stretch; }
.small-flex { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; font-weight: 700; }

.layout {
  display: flex; gap: 32px; max-width: 1280px; margin: 0 auto; padding: 30px;
}

/* --- SIDEBAR MEJORADO (Clean Aesthetics) --- */
.sidebar {
  width: 270px; flex-shrink: 0; 
  background: transparent; /* Quitar fondo blanco para que parezca flotante o integrado */
  border-radius: 0;
  padding: 10px 0; border: none; height: calc(100vh - 100px);
  position: sticky; top: 90px; 
  display: flex; flex-direction: column; gap: 24px; overflow-y: auto;
  /* Scrollbar bonita */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.sidebar-heading {
  font-size: 11px; text-transform: uppercase; color: var(--text-muted); 
  letter-spacing: 0.08em; margin-bottom: 12px; font-weight: 800; padding-left: 14px;
}

.levels { display: flex; flex-direction: column; gap: 6px; }

/* Botones de Nivel */
.level-btn {
  width: 100%; text-align: left; padding: 12px 16px; border-radius: var(--radius-md);
  color: var(--secondary); font-weight: 600; font-size: 14px;
  transition: all 0.2s; border: 1px solid transparent; 
  display: flex; align-items: center; justify-content: space-between;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.level-btn:hover { 
  background: white; 
  color: var(--primary); 
  transform: translateX(4px); 
  box-shadow: var(--shadow-sm);
}
.level-btn.active {
  background: white; 
  color: var(--primary); 
  border: 1px solid var(--primary-soft);
  box-shadow: 0 4px 12px rgba(37,99,235,0.1);
}
.level-btn .btn-content { display: flex; align-items: center; gap: 10px; }

.lvl-badge {
  background: #f1f5f9; color: #64748b; font-size: 10px; font-weight: 800; 
  padding: 3px 8px; border-radius: 6px; 
}
.level-btn.active .lvl-badge { background: var(--primary); color: white; }

/* Lista de Navegación */
.nav-list { display: flex; flex-direction: column; gap: 6px; }
.nav-item {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: var(--radius-md); color: var(--secondary);
  font-weight: 500; font-size: 15px; transition: all 0.2s;
}
.nav-item:hover { background: rgba(255,255,255,0.8); color: var(--text-main); }
.nav-item.active { background: white; color: var(--primary); font-weight: 700; box-shadow: var(--shadow-sm); }

.nav-icon { width: 22px; height: 22px; opacity: 0.7; transition: 0.2s; }
.nav-item:hover .nav-icon { opacity: 1; transform: scale(1.1); }
.nav-item.active .nav-icon { opacity: 1; color: var(--primary); }

/* Botón Especial IA */
.special-ia-btn {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe); 
  color: #0369a1;
  border: 1px solid #bae6fd; 
  margin-top: 10px;
  position: relative; overflow: hidden;
}
.special-ia-btn::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: translateX(-100%); transition: 0.5s;
}
.special-ia-btn:hover::before { transform: translateX(100%); }

.sidebar-footer { margin-top: auto; border-top: 1px solid var(--border); padding-top: 20px; }
.logout-item { color: var(--error); }
.logout-item:hover { background: var(--error-bg); color: var(--error-dark); }

/* Main Content */
main { flex: 1; width: 100%; }
.centered-card { max-width: 900px; margin: 0 auto; min-height: 500px; }

.view-header { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
#viewTitle { font-size: 32px; font-weight: 800; color: var(--text-main); letter-spacing: -0.03em; }
.btn-back {
  background: white; border: 1px solid var(--border); padding: 10px 16px; border-radius: 12px;
  font-weight: 600; font-size: 14px; color: var(--secondary); display: inline-flex; align-items: center; gap: 8px;
  transition: 0.2s;
}
.btn-back:hover { border-color: var(--primary); color: var(--primary); transform: translateX(-3px); }

/* --- HOME HERO & DASHBOARD --- */
.home-hero {
  background: linear-gradient(120deg, var(--primary), #4f46e5); 
  color: white; border: none;
  position: relative; overflow: hidden;
}
.home-hero::after {
    content: ''; position: absolute; top: -50%; right: -10%; width: 300px; height: 300px;
    background: rgba(255,255,255,0.1); border-radius: 50%; filter: blur(40px);
}
.home-hero-title { font-size: 30px; font-weight: 800; margin-bottom: 10px; z-index: 1; position: relative; }
.home-hero-sub { opacity: 0.95; margin-bottom: 24px; font-size: 17px; max-width: 550px; line-height: 1.5; z-index: 1; position: relative; }
.home-cta {
  background: white; color: var(--primary); 
  padding: 14px 28px; border-radius: var(--radius-md); 
  font-weight: 800; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2); z-index: 1; position: relative;
  transition: transform 0.2s;
}
.home-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.home-cta.secondary { background: rgba(255,255,255,0.2); color: white; margin-left: 12px; box-shadow: none; backdrop-filter: blur(5px); }
.home-cta.secondary:hover { background: rgba(255,255,255,0.3); }

/* --- MODULES --- */
.module-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; color: var(--text-main); }
.module-card p.small { margin-bottom: 16px; color: var(--secondary); }

/* --- EJERCICIOS (Legacy) --- */
.exercise-box { max-width: 800px; margin: 0 auto; }
.timer-container { display: flex; justify-content: space-between; font-weight: 700; color: var(--secondary); margin-bottom: 10px; font-size: 14px; }
.timer-bar-bg { height: 8px; background: #e2e8f0; border-radius: 10px; margin-bottom: 30px; overflow: hidden; }
.timer-bar-fill { height: 100%; background: var(--primary); border-radius: 10px; transition: width 1s linear; }

.exercise-question { font-size: 26px; font-weight: 800; margin-bottom: 28px; color: var(--text-main); line-height: 1.3; }
.exercise-input {
  font-size: 22px; padding: 20px; border: 2px solid var(--border); border-radius: var(--radius-lg); 
  width: 100%; margin-bottom: 24px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
  transition: 0.3s;
}
.exercise-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }

.feedback {
  padding: 20px; border-radius: var(--radius-md); margin-top: 20px; font-size: 16px; font-weight: 600;
  display: flex; align-items: center; gap: 14px; animation: slideUp 0.4s var(--ease-spring);
  border-left: 5px solid transparent;
}
.feedback.ok { background: var(--success-bg); color: var(--success-dark); border-left-color: var(--success); }
.feedback.error { background: var(--error-bg); color: var(--error-dark); border-left-color: var(--error); }

.exercise-example-box { background: #fff7ed; border: 1px solid #fed7aa; padding: 20px; border-radius: var(--radius-md); margin-bottom: 24px; }
.exercise-example-header { color: #c2410c; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.exercise-example-text { font-size: 18px; color: #9a3412; font-style: italic; font-weight: 500; }

.exercise-audio-btn, .btn-turtle {
  width: 44px; height: 44px; border-radius: 50%; background: white; border: 2px solid var(--border); 
  display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; transition: 0.2s; color: var(--secondary);
}
.exercise-audio-btn:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); transform: scale(1.05); }

/* --- MEDIA GRID --- */
.category-tabs { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 14px; margin-bottom: 24px; scrollbar-width: none; }
.cat-tab-btn { 
  background: white; border: 1px solid var(--border); padding: 10px 20px; border-radius: 30px; 
  font-weight: 600; color: var(--secondary); cursor: pointer; white-space: nowrap; transition: 0.2s; 
}
.cat-tab-btn:hover { border-color: var(--text-muted); color: var(--text-main); }
.cat-tab-btn.active { background: var(--text-main); color: white; border-color: var(--text-main); box-shadow: 0 4px 10px rgba(0,0,0,0.15); }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; }
.media-card { 
  background: white; border-radius: var(--radius-lg); overflow: hidden; 
  border: 1px solid var(--border); cursor: pointer; transition: all 0.3s ease; 
  display: flex; flex-direction: column; position: relative;
}
.media-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary-soft); }
.media-thumb { aspect-ratio: 16/9; background: #e2e8f0; position: relative; overflow: hidden; }
.media-thumb.book-ratio { aspect-ratio: 3/4; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.media-card:hover .media-thumb img { transform: scale(1.05); }

.media-info { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.media-title { font-weight: 700; line-height: 1.4; margin-bottom: 8px; font-size: 17px; }
.media-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }

/* Tabs Estilizados */
.filter-tabs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; margin-bottom: 25px; scrollbar-width: none; }
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-pill { background: white; border: 1px solid #e2e8f0; padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; color: #64748b; white-space: nowrap; cursor: pointer; transition: all 0.2s; }
.filter-pill.active { background: #1e293b; color: white; border-color: #1e293b; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }

/* ESTILOS MODAL PAGO */
#paymentModal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.modal-content-pay { background-color: #fff; padding: 25px; border-radius: 12px; width: 90%; max-width: 500px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.5); font-family: 'Nunito', sans-serif; overflow-y: auto; max-height: 90vh; }
.modal-header-pay h2 { margin-top: 0; color: #d32f2f; font-weight: 800; }
.modal-body-pay { text-align: left; margin: 20px 0; font-size: 0.95em; }
.bank-option { background: #f5f5f5; padding: 12px; border-radius: 8px; margin-bottom: 12px; border-left: 5px solid #007bff; }
.bank-title { font-weight: 800; color: #333; display: block; margin-bottom: 5px; font-size: 1.05em; }
.bank-info { display: block; color: #555; margin-bottom: 2px; }
.btn-whatsapp { display: inline-block; background-color: #25D366; color: white; padding: 12px 20px; border-radius: 50px; text-decoration: none; font-weight: bold; margin-top: 15px; width: 100%; box-sizing: border-box; text-align: center; box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3); transition: transform 0.2s; }
.btn-whatsapp:hover { transform: scale(1.02); }
.btn-logout-pay { margin-top: 15px; background: transparent; color: #d32f2f; border: 1px solid #d32f2f; padding: 10px 20px; border-radius: 50px; cursor: pointer; width: 100%; font-size: 0.9em; font-weight: 700; }

/* ESTILOS NUEVOS PARA EL CONTENEDOR DE ACTIVIDAD (Grammar, School, Homework) */
.activity-header-bar {
    background: #111;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #333;
}
.activity-title-glow {
    color: white;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-ia-help {
    background: #7C3AED; /* Violeta vibrante */
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.4);
    transition: transform 0.2s;
    margin-right: 10px;
}
.btn-ia-help:hover { transform: scale(1.05); background: #8b5cf6; }

.btn-close-activity {
    background: #ff4b4b;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
}

/* --- MODALES --- */
dialog { border: none; padding: 0; background: transparent; }
dialog::backdrop { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(8px); }
.modern-dialog { width: min(480px, 90vw); border-radius: 24px; box-shadow: var(--shadow-floating); animation: slideUp 0.3s var(--ease-spring); }
.modern-dialog.wide-dialog { width: min(960px, 95vw); }

.dialog-content { background: white; padding: 40px; border-radius: 24px; position: relative; }
.dialog-content.no-padding { padding: 0; overflow: hidden; }
.text-center { text-align: center; }
.confetti-icon { font-size: 60px; margin-bottom: 16px; display: block; animation: bounce 1s infinite; }
.score-display { font-size: 56px; font-weight: 800; color: var(--primary); margin: 16px 0; letter-spacing: -2px; }

.close-btn-abs { 
  position: absolute; top: 20px; right: 20px; font-size: 22px; 
  color: var(--secondary); background: #f1f5f9; border-radius: 50%; 
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; 
  cursor: pointer; transition: 0.2s;
}
.close-btn-abs:hover { background: var(--error-bg); color: var(--error); transform: rotate(90deg); }

/* Video & Book Dialog */
.dialog-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: #fff; }
.iframe-container { height: 75vh; max-height: 750px; background: #f8fafc; }
.dialog-footer { padding: 20px; text-align: right; background: #fff; border-top: 1px solid var(--border); }

/* --- RESPONSIVE MOBILE --- */
.menu-toggle { display: none; cursor: pointer; color: var(--text-main); }
.logout-mobile { display: none; }

@media (max-width: 900px) {
  body { padding-top: 64px; }
  .topbar { padding: 0 20px; height: 64px; }
  .brand-text span:not(#brandTitle) { display: none; }
  #brandTitle { font-size: 17px; }
  .stats { display: none; }
  .menu-toggle { display: block; margin-right: 16px; font-size: 24px; }
  
  .layout { flex-direction: column; padding: 20px; gap: 24px; }
  
  /* Sidebar Mobile */
  .sidebar {
    position: fixed; top: 0; left: -320px; width: 300px; height: 100vh;
    z-index: 200; transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background: white; border-right: 1px solid var(--border);
    box-shadow: 20px 0 50px rgba(0,0,0,0.1); padding: 24px; gap: 20px;
  }
  .sidebar.open { left: 0; }
  .sidebar-overlay.active { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 150; backdrop-filter: blur(4px); }
  
  .centered-card { padding: 24px; border-radius: var(--radius-lg); min-height: auto; }
  .exercise-question { font-size: 22px; }
  .exercise-input { font-size: 19px; padding: 16px; }
  .student-sheet { padding: 24px; border-radius: 24px 24px 0 0; }
}

/* Animaciones */
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.fade-in { animation: slideUp 0.4s var(--ease-spring) forwards; }

.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2000; overflow: hidden; }
.confetti-piece { position: absolute; width: 10px; height: 16px; border-radius: 4px; }

/* Vocab List */
#v_list .home-btn { 
  display: flex; justify-content: space-between; width: 100%; 
  background: white; border: 1px solid var(--border); 
  margin-bottom: 12px; border-radius: var(--radius-md); padding: 18px; 
  cursor: pointer; box-shadow: var(--shadow-sm); font-weight: 500;
  transition: all 0.2s;
}
#v_list .home-btn:hover { border-color: var(--primary); transform: translateX(4px); box-shadow: var(--shadow-md); color: var(--primary); }

/* =========================================
   ESTILOS GAMEPLAY TIPO DUOLINGO / BUSUU
   ========================================= */

/* Contenedor principal */
.game-container {
  max-width: 650px; margin: 0 auto; padding-bottom: 120px;
}

/* Pregunta y Contexto */
.game-question-text {
  font-size: 22px; color: var(--text-main); margin-bottom: 30px; line-height: 1.4; 
  text-align: center; font-weight: 700;
}
.game-image-context {
  width: 100%; max-width: 320px; border-radius: 16px; margin: 0 auto 24px; display: block;
  box-shadow: var(--shadow-md); transition: transform 0.3s;
}
.game-image-context:hover { transform: scale(1.02); }

/* Opción Múltiple (Estilo Botón 3D Grande) */
.options-grid {
  display: flex; flex-direction: column; gap: 16px; width: 100%;
}
.game-opt-btn {
  background: white; 
  border: 2px solid var(--border); 
  border-bottom-width: 4px; /* Efecto 3D */
  border-radius: 18px;
  padding: 20px; 
  font-size: 18px; font-weight: 600; color: var(--text-main);
  cursor: pointer; transition: all 0.1s; 
  text-align: left; position: relative;
}
.game-opt-btn:hover { 
  background: #f8fafc; 
  border-color: var(--border-hover); 
  transform: translateY(-1px);
}
.game-opt-btn:active { 
  transform: translateY(2px); 
  border-bottom-width: 2px;
  margin-bottom: 2px; /* Compensar el movimiento */
  background: #f1f5f9;
}

/* Estados Correcto/Incorrecto */
.game-opt-btn.correct, .gap-slot.correct {
  background-color: var(--success-bg) !important; 
  border-color: var(--success) !important; 
  color: var(--success-dark) !important;
}
.game-opt-btn.wrong, .gap-slot.wrong {
  background-color: var(--error-bg) !important; 
  border-color: var(--error) !important; 
  color: var(--error-dark) !important;
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

/* Puzzle de Letras (Cloze) */
.cloze-area {
  background: white; padding: 24px; border-radius: 20px; 
  border: 2px dashed #cbd5e1;
  text-align: center; margin-bottom: 30px; font-size: 24px; color: var(--text-main);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: baseline;
  box-shadow: var(--shadow-sm);
}
.gap-slot {
  display: inline-flex; min-width: 40px; height: 48px; 
  border-bottom: 3px solid #cbd5e1;
  align-items: center; justify-content: center; font-weight: 700; color: var(--primary);
  margin: 0 4px; padding: 0 8px; vertical-align: middle; transition: 0.2s; cursor: pointer;
  border-radius: 6px 6px 0 0;
}
.gap-slot.filled { border-bottom-color: var(--primary); background: var(--primary-light); }

.letters-bank { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.letter-chip {
  background: white; border: 2px solid #e2e8f0; border-bottom-width: 4px;
  padding: 12px 18px; border-radius: 12px;
  font-size: 19px; font-weight: 700; color: var(--secondary); cursor: pointer;
  transition: all 0.1s;
}
.letter-chip:active { transform: translateY(2px); border-bottom-width: 2px; }
.letter-chip.used { opacity: 0; pointer-events: none; transform: scale(0.8); }

/* Audio Big Button */
.audio-hero {
  width: 80px; height: 80px; background: var(--primary); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: white;
  font-size: 32px; margin: 0 auto 30px; cursor: pointer;
  box-shadow: 0 6px 0 var(--primary-dark), 0 10px 20px rgba(37, 99, 235, 0.3); 
  transition: all 0.1s;
}
.audio-hero:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--primary-dark); }
.audio-hero:hover { background: #4f8df9; }

/* HOJA DE RESPUESTA (BOTTOM SHEET) */
.student-sheet {
  position: fixed; bottom: -120%; left: 0; width: 100%; z-index: 9999;
  padding: 30px; border-top-left-radius: 30px; border-top-right-radius: 30px;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.15); 
  transition: bottom 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  background: white; display: flex; flex-direction: column; gap: 18px;
  border-top: 2px solid transparent;
}
.student-sheet.show { bottom: 0; }
.student-sheet.correct { background: var(--success-bg); border-color: var(--success); }
.student-sheet.wrong { background: var(--error-bg); border-color: var(--error); }

.sheet-header { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.sheet-icon { 
  font-size: 24px; display: flex; align-items: center; justify-content: center; 
  width: 40px; height: 40px; border-radius: 50%; background: white; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.sheet-title { font-weight: 800; font-size: 22px; color: var(--text-main); }
.sheet-msg { font-size: 16px; color: var(--text-main); line-height: 1.5; font-weight: 500; }

.sheet-btn {
  width: 100%; padding: 16px; border: none; border-radius: 16px;
  font-weight: 800; font-size: 16px; text-transform: uppercase; cursor: pointer; letter-spacing: 0.05em;
  color: white; transition: transform 0.1s;
}
.student-sheet.correct .sheet-btn { 
  background: var(--success); box-shadow: 0 5px 0 var(--success-dark); 
}
.student-sheet.correct .sheet-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--success-dark); }

.student-sheet.wrong .sheet-btn { 
  background: var(--error); box-shadow: 0 5px 0 var(--error-dark); 
}
.student-sheet.wrong .sheet-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--error-dark); }

@keyframes shake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(3px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-5px, 0, 0); }
  40%, 60% { transform: translate3d(5px, 0, 0); }
}

/* Ocultar elementos viejos */
.exercise-feedback, .exercise-translation, .exercise-actions { display: none !important; }

/* =========================================
   ESTILOS NUEVOS: FLASHCARDS PRO
   ========================================= */

/* --- 1. GRID DE MAZOS (LAS VIÑETAS) --- */
.flashcards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
    padding-bottom: 40px;
}

.deck-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
}

.deck-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    border-color: #cbd5e1;
}

/* Portada de color superior */
.deck-cover {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: white;
}

/* Icono animado */
.deck-icon {
    font-size: 48px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.deck-card:hover .deck-icon {
    transform: scale(1.3) rotate(-10deg);
}

/* Badge de conteo */
.deck-count {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(4px);
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,0.3);
}

/* Información del mazo */
.deck-info {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.deck-cat-badge {
    font-size: 10px;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 800;
    letter-spacing: 0.5px;
    background: #f1f5f9;
    padding: 5px 10px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.deck-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 20px;
    line-height: 1.3;
}

/* Botón de acción dentro de la tarjeta */
.btn-start-deck {
    margin-top: auto;
    width: 100%;
    padding: 12px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-weight: 700;
    color: #475569;
    font-size: 14px;
    transition: 0.2s;
    cursor: pointer;
}

.deck-card:hover .btn-start-deck {
    background: #1e293b;
    border-color: #1e293b;
    color: white;
}


/* --- 2. MODAL REPRODUCTOR (FLASHCARD PLAYER) --- */
.flashcard-dialog {
    width: 95%;
    max-width: 500px; /* Estrecho para parecer carta */
    background: #f8fafc;
    border-radius: 24px;
    border: none;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    padding: 0;
    overflow: hidden;
    color: #1e293b;
    animation: popIn 0.3s ease-out;
}

.flashcard-container {
    display: flex;
    flex-direction: column;
    height: 85vh;
    max-height: 720px;
}

/* Header del Modal */
.fc-header {
    padding: 15px 20px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fc-title-group { display: flex; align-items: center; gap: 12px; }
.fc-icon { 
    font-size: 20px; 
    background: #eff6ff; 
    width: 36px; height: 36px; 
    display: flex; align-items: center; justify-content: center; 
    border-radius: 10px; 
}
.fc-subtitle { font-size: 11px; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

.fc-actions { display: flex; align-items: center; gap: 8px; }
.fc-counter { background: #f1f5f9; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; color: #475569; }
.fc-close-btn { 
    width: 32px; height: 32px; 
    border-radius: 50%; 
    background: #f1f5f9; 
    color: #64748b; 
    font-weight: bold; 
    transition: 0.2s; 
    display: flex; align-items: center; justify-content: center;
}
.fc-close-btn:hover { background: #fee2e2; color: #ef4444; }

/* Cuerpo del Modal (Escena 3D) */
.fc-body {
    flex: 1;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    perspective: 1000px; /* CLAVE PARA 3D */
}

.card-scene {
    width: 100%;
    height: 100%;
    max-height: 480px;
    cursor: pointer;
}

.card-object {
    width: 100%; height: 100%;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d; /* CLAVE PARA 3D */
    border-radius: 24px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.card-object.is-flipped { transform: rotateY(180deg); }

.card-face {
    position: absolute; width: 100%; height: 100%;
    backface-visibility: hidden; /* Oculta la parte de atrás */
    border-radius: 24px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 30px; text-align: center;
    -webkit-font-smoothing: antialiased;
}

/* Estilo Frente */
.face-front { 
    background: white; 
    border: 1px solid #e2e8f0; 
    border-bottom: 6px solid #cbd5e1; 
}

/* Estilo Reverso */
.face-back { 
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%); 
    color: white; 
    transform: rotateY(180deg); 
    border-bottom: 6px solid #312e81; 
}

/* Elementos internos de la carta */
.card-type { 
    position: absolute; top: 20px; right: 20px; 
    background: #eff6ff; color: #3b82f6; 
    font-size: 11px; font-weight: 800; 
    padding: 6px 12px; border-radius: 8px; 
    text-transform: uppercase; 
}

#vc_word { font-size: 38px; margin: 20px 0 10px; color: #1e293b; letter-spacing: -1px; font-weight: 800; }
#vc_pron { color: #94a3b8; font-family: monospace; margin-bottom: 30px; font-size: 18px; }

.card-audio-btn-large {
    width: 72px; height: 72px; border-radius: 50%;
    background: #f8fafc; border: 2px solid #e2e8f0;
    color: #3b82f6; font-size: 32px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; box-shadow: 0 4px 0 #e2e8f0;
    cursor: pointer;
}
.card-audio-btn-large:active { transform: translateY(4px); box-shadow: none; }
.card-audio-btn-large:hover { background: #eff6ff; border-color: #3b82f6; }

.card-hint { 
    position: absolute; bottom: 25px; 
    font-size: 12px; color: #cbd5e1; 
    animation: pulse 2s infinite; 
    font-weight: 700; text-transform: uppercase; letter-spacing: 1px; 
}

/* Elementos Reverso */
#vc_trans { font-size: 28px; font-weight: 700; margin-bottom: 0; }
.separator { width: 40px; height: 4px; background: rgba(255,255,255,0.2); margin: 20px auto; border-radius: 2px; }
.card-example { font-style: italic; font-size: 18px; margin-bottom: 25px; line-height: 1.5; color: #e0e7ff; }
.def-box { 
    background: rgba(0,0,0,0.2); 
    padding: 15px; border-radius: 12px; 
    font-size: 14px; text-align: left; width: 100%; 
    line-height: 1.5; color: #e0e7ff;
}

/* Footer Controles */
.fc-footer { 
    padding: 20px; background: white; 
    border-top: 1px solid #e2e8f0; 
    display: flex; gap: 12px; 
}
.fc-ctrl-btn {
    flex: 1; padding: 14px; border-radius: 14px; 
    font-weight: 700; cursor: pointer;
    background: white; border: 2px solid #e2e8f0; color: #64748b;
    transition: 0.1s; font-size: 14px;
}
.fc-ctrl-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.fc-ctrl-btn:active { transform: scale(0.96); }
.fc-ctrl-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.fc-ctrl-btn.action { 
    background: #4f46e5; color: white; border-color: #4f46e5; 
    flex: 1.5; box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3); 
}
.fc-ctrl-btn.action:hover { background: #4338ca; }

@keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }

/* ============================================================
   🚀 ESTILOS OPTIMIZADOS PARA MÁXIMA VELOCIDAD (MOVIDOS DEL JS)
============================================================ */

/* 1. Animaciones y Utilidades Generales */
.fade-in { opacity:0; transform:translateY(6px); transition:.25s ease; }
.fade-in.show { opacity:1; transform:translateY(0); }

@keyframes shake {
   0% { transform: translate(1px, 1px) rotate(0deg); }
   10% { transform: translate(-1px, -2px) rotate(-1deg); }
   20% { transform: translate(-3px, 0px) rotate(1deg); }
   30% { transform: translate(3px, 2px) rotate(0deg); }
   40% { transform: translate(1px, -1px) rotate(1deg); }
   50% { transform: translate(-1px, 2px) rotate(-1deg); }
   60% { transform: translate(-3px, 1px) rotate(0deg); }
   70% { transform: translate(3px, 1px) rotate(-1deg); }
   80% { transform: translate(-1px, -1px) rotate(1deg); }
   90% { transform: translate(1px, 2px) rotate(0deg); }
   100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.vibrate-btn { animation: shake 3s infinite; }

/* 2. Pantalla de Inicio (Bento Grid Premium) */
@keyframes floatUp {
  0% { opacity: 0; transform: translateY(30px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes shimmer {
  0% { transform: translateX(-150%) skewX(-15deg); }
  50% { transform: translateX(150%) skewX(-15deg); }
  100% { transform: translateX(150%) skewX(-15deg); }
}
.bento-card { opacity: 0; animation: floatUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

.circular-chart { display: block; margin: 0 auto; max-width: 80px; max-height: 80px; }
.circle-bg { fill: none; stroke: #e2e8f0; stroke-width: 3.5; }
.circle { fill: none; stroke-width: 3.5; stroke-linecap: round; transition: stroke-dasharray 1.5s ease-out; }

.btn-shimmer { position: relative; overflow: hidden; }
.btn-shimmer::after {
  content: ''; position: absolute; top: 0; left: 0; width: 40%; 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%);
  animation: shimmer 3s infinite;
}

/* 3. Temporizador (Study Timer) */
#studyTimerWidget {
    position: fixed; bottom: 25px; left: 20px; background: white;
    border: 2px solid #e2e8f0; border-radius: 50px; padding: 8px 14px;
    display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    cursor: pointer; z-index: 4000; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.85rem;
    color: #475569; user-select: none;
}
#studyTimerWidget:hover {
    transform: translateY(-4px) scale(1.05); border-color: #3b82f6; box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
}
#studyTimerWidget:active { transform: translateY(2px) scale(0.95); }
@media (max-width: 768px) {
    #studyTimerWidget { bottom: 85px; padding: 6px 12px; font-size: 0.8rem; }
}

/* 4. Paywall (Membresías) */
.paywall-header { text-align: center; margin-bottom: 25px; }
.paywall-title { color: #0f172a; font-size: 1.8rem; font-weight: 900; margin-bottom: 8px; letter-spacing: -0.5px; }
.paywall-subtitle { color: #64748b; font-size: 0.95rem; line-height: 1.4; }
.planes-container { display: flex; flex-direction: column; gap: 14px; margin-bottom: 25px; }
.plan-btn {
    background: #ffffff; border: 2px solid #e2e8f0; border-radius: 20px; padding: 18px 20px; text-align: left; 
    cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s ease; 
    position: relative; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}
.plan-btn:hover { border-color: #93c5fd; box-shadow: 0 10px 15px rgba(59, 130, 246, 0.05); }
.plan-btn:active { transform: scale(0.98); }
.plan-btn.popular { border-color: #2563eb; background: linear-gradient(to right, #eff6ff, #ffffff); box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15); }
.plan-badge { position: absolute; top: 0; right: 0; background: #2563eb; color: white; font-size: 0.7rem; font-weight: 800; padding: 4px 12px; border-bottom-left-radius: 12px; letter-spacing: 0.5px; text-transform: uppercase; }
.plan-title { font-weight: 900; font-size: 1.15rem; color: #1e293b; margin-bottom: 4px; }
.plan-desc { font-size: 0.85rem; color: #10b981; font-weight: 700; }
.plan-desc-normal { font-size: 0.85rem; color: #64748b; font-weight: 600; }
.plan-price-box { text-align: right; }
.plan-price { font-weight: 900; font-size: 1.4rem; color: #0f172a; line-height: 1; }
.plan-monthly { font-size: 0.75rem; color: #64748b; font-weight: 600; margin-top: 4px; }
.benefits-list { background: #f8fafc; border-radius: 16px; padding: 20px; margin-bottom: 20px; border: 1px solid #e2e8f0; }
.benefits-list h3 { font-size: 1rem; color: #0f172a; margin: 0 0 15px 0; font-weight: 800; }
.benefits-list ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.benefits-list li { color: #334155; font-size: 0.95rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.benefits-list li span { background: #dcfce7; color: #16a34a; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }

/* 5. Presentaciones Interactivas */
.cpres-card {
    background: white; border-radius: 20px; padding: 16px 20px; display: flex; align-items: center; gap: 15px;
    border: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0,0,0,0.02); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; margin-bottom: 12px;
}
.cpres-card:hover { transform: translateY(-2px); box-shadow: 0 8px 15px rgba(0,0,0,0.04); border-color: #cbd5e1; }
.cpres-card:active { transform: scale(0.98); }
.cpres-icon { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.cpres-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cpres-title { font-family: 'Nunito', sans-serif; font-size: 1.1rem; font-weight: 800; color: #0f172a; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpres-desc { font-size: 0.85rem; color: #64748b; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpres-action { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; min-width: 90px; }
.cpres-btn { padding: 6px 14px; border-radius: 50px; font-weight: 800; font-size: 0.75rem; border: none; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; }
.state-done .cpres-icon { background: #f0fdf4; color: #16a34a; }
.state-done .cpres-btn { background: white; color: #10b981; border: 2px solid #10b981; }
.state-now { border-color: #bfdbfe; background: #f8fafc; }
.state-now .cpres-icon { background: #eff6ff; color: #3b82f6; }
.state-now .cpres-btn { background: #3b82f6; color: white; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); }
.state-available .cpres-icon { background: #f1f5f9; color: #64748b; }
.state-available .cpres-btn { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }
.state-available:hover .cpres-btn { background: #e2e8f0; color: #0f172a; }

/* 6. UI de Ejercicios (Pro-Scroll) */
.pro-scroll::-webkit-scrollbar { width: 5px; }
.pro-scroll::-webkit-scrollbar-track { background: transparent; }
.pro-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; }
.pro-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }
.pro-card { background: white; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.btn-slow { background:#f8fafc; color:#334155; border:2px solid #cbd5e1; box-shadow:0 4px 0 #94a3b8; transition:all 0.1s; }
.btn-slow:active { transform: translateY(4px); box-shadow: none !important; }

/* 7. Guía del Estudiante */
.guide-dialog { width: 95%; max-width: 700px; border: none; border-radius: 28px; box-shadow: 0 30px 80px rgba(0,0,0,0.4); padding: 0; overflow: hidden; font-family: 'Nunito', 'Segoe UI', sans-serif; animation: popIn 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28); z-index: 10000; background: #fff; }
.guide-header { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; padding: 35px 30px; text-align: center; position: relative; }
.guide-header h2 { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.5px; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.guide-header p { margin: 10px 0 0 0; opacity: 0.95; font-size: 1.05rem; font-weight: 300; }
.guide-body { padding: 30px 40px; max-height: 60vh; overflow-y: auto; background: #ffffff; scrollbar-width: thin; scrollbar-color: #cbd5e1 #f1f5f9; }
.guide-body::-webkit-scrollbar { width: 8px; }
.guide-body::-webkit-scrollbar-track { background: #f1f5f9; }
.guide-body::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 20px; }
.guide-step { display: flex; gap: 20px; margin-bottom: 35px; align-items: flex-start; position: relative; }
.guide-step:last-child { margin-bottom: 0; }
.guide-step:not(:last-child)::after { content: ''; position: absolute; top: 55px; left: 27px; width: 2px; height: calc(100% - 30px); background: #e2e8f0; z-index: 0; }
.step-icon { background: #eff6ff; color: #2563eb; width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; border: 1px solid #dbeafe; box-shadow: 0 4px 6px rgba(37, 99, 235, 0.1); z-index: 1; transition: transform 0.2s; }
.step-icon:hover { transform: scale(1.05); }
.step-content { flex: 1; }
.step-content h4 { margin: 0 0 8px 0; color: #1e293b; font-size: 1.15rem; font-weight: 700; }
.step-content p { margin: 0; color: #64748b; font-size: 0.95rem; line-height: 1.6; }
.step-highlight { color: #2563eb; font-weight: 700; background: #eff6ff; padding: 2px 6px; border-radius: 4px; }
.ai-section { background: linear-gradient(to right, #f8fafc, #f1f5f9); border-left: 4px solid #8b5cf6; padding: 15px 20px; border-radius: 0 12px 12px 0; margin-top: 10px; }
.guide-footer { padding: 25px; background: #f8fafc; border-top: 1px solid #e2e8f0; text-align: center; }
.btn-primary { background: #2563eb; color: white; border: none; padding: 16px 32px; border-radius: 14px; font-size: 1.1rem; font-weight: 600; cursor: pointer; width: 100%; transition: all 0.2s; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); }
.btn-primary:hover { background: #1d4ed8; transform: translateY(-2px); }
.close-btn { position: absolute; top: 25px; right: 25px; background: rgba(255,255,255,0.2); border: none; color: white; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; transition: background 0.2s; display: flex; align-items: center; justify-content: center; }
.close-btn:hover { background: rgba(255,255,255,0.35); }
/* =========================================================================
   PARCHE DE ACCESIBILIDAD: LETRA GRANDE Y PANTALLAS PEQUEÑAS
   ========================================================================= */

/* 1. Cambiar alturas fijas por alturas mínimas para que las cajas puedan crecer */
.flashcard-container,
.tm-slide-container,
.lab-premium-card,
.arcade-premium-menu,
.vocab-premium-container,
.premium-phone-mockup,
.student-sheet {
    height: auto !important;
    min-height: min-content !important;
    max-height: 85vh !important; /* Evita que se salgan de la pantalla */
    overflow-y: auto !important; /* Si el texto es enorme, aparecerá scroll */
    -webkit-overflow-scrolling: touch;
}

/* 2. Ajustar modales y diálogos para que el texto no se esconda */
dialog, .modern-dialog, .checkpoint-dialog {
    height: auto !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
}

/* 3. Evitar que textos largos con letra grande rompan las tarjetas de módulos */
.module-card, .cpres-card, .premium-card {
    height: auto !important;
    min-height: min-content;
}

.cpres-title, .cpres-desc, .module-title, .module-desc {
    white-space: normal !important; /* Permite que el texto baje a la siguiente línea */
    overflow: visible !important;
    text-overflow: clip !important;
}

/* 4. Dar más espacio a los botones si la letra es grande */
.btn, .sheet-btn, #iaSend, .btn-ia-help, .btn-close-activity, .sprint-option-btn, .word-tag {
    height: auto !important;
    min-height: 48px;
    white-space: normal !important; /* Evita que el texto del botón se corte */
    line-height: 1.3;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* 5. Asegurar que las zonas de lectura (Teoría y Audiolibros) siempre tengan scroll */
.tm-slide-content, .ab-lyrics-container, .pro-scroll {
    overflow-y: auto !important;
    max-height: none !important; /* Deja que el padre controle el límite */
}

/* 6. Fix para que el botón de cerrar la presentación móvil no tape textos gigantes */
@media (max-width: 900px) {
    #presFullScreen .pres-exit-btn {
        bottom: 85px !important; /* Lo sube un poco más para que no tape el menú */
        z-index: 9999999 !important;
    }
    
    /* Darle margen inferior a las pantallas para que el botón de cerrar no tape nada */
    .main-content {
        padding-bottom: 140px !important; 
    }
}
/* =========================================================================
   PARCHE 3: SOLUCIÓN LETRAS VERTICALES Y RAYITO OCULTO (ALTO ZOOM)
   ========================================================================= */

/* 1. SALVAR EL BOTÓN DEL RAYITO EN LA BARRA SUPERIOR */
.topbar.elegant-topbar {
    height: auto !important; /* Deja que la barra crezca hacia abajo */
    min-height: 72px;
    flex-wrap: wrap !important; /* Permite que el contenido baje de renglón */
    padding-bottom: 10px !important;
    padding-top: max(env(safe-area-inset-top), 10px) !important;
}

.topbar-right {
    flex-wrap: wrap !important; /* Si el idioma y el rayito no caben, el rayito baja */
    justify-content: flex-end !important;
    margin-top: 5px;
}


/* 2. EVITAR QUE LAS LETRAS SE VEAN DE ARRIBA A ABAJO EN PRESENTACIONES/SPRINTS */
.cpres-card {
    flex-wrap: wrap !important; /* Rompe la fila si ya no caben juntos */
}

.cpres-info {
    flex: 1 1 auto !important;
    min-width: 180px !important; /* CRÍTICO: Esto evita que el texto se aplaste a 1 letra de ancho */
    word-wrap: break-word !important; /* Rompe palabras gigantes de forma limpia */
}

.cpres-title, .cpres-desc {
    white-space: normal !important; /* Evita los puntos suspensivos (...) y muestra el texto real */
    line-height: 1.3 !important;
}

.cpres-action {
    flex: 1 1 100% !important; /* Fuerza al botón a tomar TODA la fila de abajo */
    justify-content: flex-start !important; /* Pone el botón a la izquierda para fácil acceso */
    margin-top: 10px !important; /* Lo separa del texto */
}
/* =========================================================================
   PARCHE 4: ARREGLO DE SOLAPAMIENTO EN LA BARRA SUPERIOR
   ========================================================================= */

#presLayout {
    /* Cambiamos los '80px' fijos por 'auto'. 
       Esto permite que la barra superior crezca lo necesario y empuje el contenido hacia abajo sin taparlo. */
    grid-template-rows: auto 1fr !important; 
}

@media (max-width: 900px) {
    /* En móviles, le damos un poquito más de aire al contenido principal para que no se vea pegado a los botones */
    #presFullScreen .main-content {
        padding-top: 30px !important;
    }
}

/* =========================================================================
   PARCHE 5: MEJORA VISUAL CELEBRACIÓN 10 MINUTOS
   ========================================================================= */

/* 1. Transformar la Notificación Flotante (Popup) en un Trofeo */
#global-notification-popup {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    border-left: none !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 35px rgba(16, 185, 129, 0.5) !important;
    border: 2px solid #34d399 !important;
    animation: popupBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

/* Título de la notificación ("Meta Diaria Lograda") */
#global-notification-popup strong {
    color: white !important;
    font-size: 1.3rem !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Texto descriptivo de la notificación */
#global-notification-popup p {
    color: #ecfdf5 !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    margin-top: 5px !important;
}

/* Botón de cerrar la notificación */
#global-notification-popup button {
    color: white !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}
#global-notification-popup button:hover {
    background: rgba(255, 255, 255, 0.4) !important;
    transform: scale(1.1);
}

/* Animación de rebote al entrar la notificación */
@keyframes popupBounce {
    0% { transform: translateX(100%) scale(0.5); opacity: 0; }
    50% { transform: translateX(-5%) scale(1.05); opacity: 1; }
    100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* 2. Que el widget flotante del temporizador (el relojito) se quede brillando */
#studyTimerWidget[style*="border-color: rgb(16, 185, 129)"],
#studyTimerWidget[style*="border-color: #10b981"] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
    border: 2px solid #34d399 !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5), inset 0 0 10px rgba(255,255,255,0.8) !important;
    animation: timerGlow 1.5s infinite alternate !important;
}

/* Animación de latido brillante para el reloj terminado */
@keyframes timerGlow {
    0% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.3); transform: scale(1); }
    100% { box-shadow: 0 0 25px rgba(16, 185, 129, 0.7); transform: scale(1.05); }
}