/* =======================================================
   YAKDIEL — DISEÑO MODERNO v2 (con Auth + Progreso)
   Fredoka One (display) + Nunito (cuerpo)
   ======================================================= */

/* ── 1. VARIABLES ──────────────────────────────────────── */
:root {
    --indigo:       #4F46E5;
    --indigo-dark:  #3730A3;
    --indigo-light: #EEF2FF;
    --green:        #22C55E;
    --green-dark:   #16A34A;
    --green-light:  #DCFCE7;
    --red:          #EF4444;
    --red-dark:     #DC2626;
    --red-light:    #FEE2E2;
    --amber:        #F59E0B;
    --amber-dark:   #D97706;
    --amber-light:  #FEF3C7;
    --sky:          #0EA5E9;
    --sky-dark:     #0284C7;
    --purple:       #A855F7;
    --teal:         #14B8A6;
    --orange:       #F97316;
    --white:        #FFFFFF;
    --gray-50:      #F8FAFC;
    --gray-100:     #F1F5F9;
    --gray-200:     #E2E8F0;
    --gray-300:     #CBD5E1;
    --gray-400:     #94A3B8;
    --gray-500:     #64748B;
    --gray-700:     #334155;
    --gray-900:     #0F172A;
    --surface:      #FFFFFF;
    --surface-2:    #F8FAFC;
    --border:       #E2E8F0;
    --font-display: 'Fredoka One', cursive;
    --font-body:    'Nunito', sans-serif;
    --r-sm:  10px;
    --r-md:  16px;
    --r-lg:  24px;
    --r-xl:  32px;
    --r-full: 9999px;
    --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
    --shadow-md:  0 4px 16px rgba(0,0,0,.10);
    --shadow-lg:  0 10px 40px rgba(0,0,0,.14);
    --ease: cubic-bezier(.4,0,.2,1);
    --dur: .2s;
}

/* ── 2. RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background: var(--gray-100);
    color: var(--gray-700);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-bottom: 80px;
    position: relative;
    overflow-x: hidden;
}

/* ── 3. PARTÍCULAS ─────────────────────────────────────── */
.bg-particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bg-particles span { position: absolute; border-radius: 50%; opacity: .06; animation: float linear infinite; }
.bg-particles span:nth-child(1)  { width:300px;height:300px;background:var(--indigo); top:-60px;left:-80px;  animation-duration:25s; }
.bg-particles span:nth-child(2)  { width:200px;height:200px;background:var(--purple); top:30%;right:-50px;  animation-duration:30s;animation-delay:-8s; }
.bg-particles span:nth-child(3)  { width:150px;height:150px;background:var(--teal);   bottom:20%;left:10%;  animation-duration:20s;animation-delay:-5s; }
.bg-particles span:nth-child(4)  { width:100px;height:100px;background:var(--amber);  top:60%;right:15%;    animation-duration:18s;animation-delay:-12s; }
.bg-particles span:nth-child(5)  { width:80px; height:80px; background:var(--green);  bottom:5%;right:30%;  animation-duration:22s;animation-delay:-3s; }
.bg-particles span:nth-child(6)  { width:60px; height:60px; background:var(--orange); top:45%;left:5%;      animation-duration:28s;animation-delay:-15s; }
.bg-particles span:nth-child(7)  { width:180px;height:180px;background:var(--sky);    bottom:-40px;left:40%;animation-duration:35s;animation-delay:-20s; }
.bg-particles span:nth-child(8)  { width:90px; height:90px; background:var(--red);    top:15%;left:60%;     animation-duration:24s;animation-delay:-7s; }
.bg-particles span:nth-child(9)  { width:120px;height:120px;background:var(--indigo); top:75%;right:5%;     animation-duration:32s;animation-delay:-10s; }
.bg-particles span:nth-child(10) { width:50px; height:50px; background:var(--purple); top:5%;left:30%;      animation-duration:19s;animation-delay:-2s; }
@keyframes float { 0%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-30px) rotate(180deg);} 100%{transform:translateY(0) rotate(360deg);} }

/* ── 4. SHELL ───────────────────────────────────────────── */
.shell {
    position: relative; z-index: 1;
    width: 100%; max-width: 540px;
    background: var(--surface);
    min-height: 100vh;
    box-shadow: var(--shadow-lg);
}

/* ── 5. PANTALLA DE AUTH ───────────────────────────────── */
.auth-screen {
    padding: 32px 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 100vh;
}

.auth-logo {
    text-align: center;
    padding: 16px 0 28px;
}
.auth-owl {
    font-size: 4rem;
    display: block;
    margin-bottom: 8px;
    animation: owlFloat 3s ease-in-out infinite alternate;
}
@keyframes owlFloat {
    from { transform: translateY(0); }
    to   { transform: translateY(-10px); }
}
.auth-brand {
    font-family: var(--font-display);
    font-size: 2.8rem;
    color: var(--indigo);
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 6px;
}
.auth-tagline {
    font-size: .95rem;
    color: var(--gray-400);
    font-weight: 600;
}

/* Tabs login/registro */
.auth-tabs {
    display: flex;
    background: var(--gray-100);
    border-radius: var(--r-full);
    padding: 4px;
    margin-bottom: 28px;
    gap: 4px;
}
.auth-tab {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: var(--r-full);
    background: transparent;
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 700;
    color: var(--gray-400);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}
.auth-tab.active {
    background: var(--white);
    color: var(--indigo);
    box-shadow: var(--shadow-sm);
}

/* Formularios auth */
.auth-form { display: flex; flex-direction: column; gap: 16px; }

.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-group label {
    font-size: .85rem;
    font-weight: 700;
    color: var(--gray-500);
    padding-left: 4px;
}
.field-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.field-icon {
    position: absolute;
    left: 14px;
    font-size: 1rem;
    pointer-events: none;
    z-index: 1;
}
.field-wrap input {
    width: 100%;
    padding: 13px 44px 13px 42px;
    border: 2.5px solid var(--border);
    border-radius: var(--r-md);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    background: var(--surface-2);
    outline: none;
    transition: border-color var(--dur), box-shadow var(--dur);
}
.field-wrap input:focus {
    border-color: var(--indigo);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(79,70,229,.1);
}
.field-wrap input::placeholder { color: var(--gray-400); font-weight: 500; }

.toggle-pass {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--gray-400);
    padding: 4px;
    border-radius: 4px;
    transition: color var(--dur);
}
.toggle-pass:hover { color: var(--indigo); }

.auth-error {
    color: var(--red);
    font-size: .85rem;
    font-weight: 700;
    min-height: 18px;
    text-align: center;
}

.auth-loading {
    display: flex;
    justify-content: center;
    padding: 20px;
}

/* ── 6. HEADER ─────────────────────────────────────────── */
.app-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 2px solid var(--border);
    background: var(--white);
    position: sticky; top: 0; z-index: 100;
}
.yakdiel-avatar { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.avatar-circle {
    width: 42px; height: 42px;
    border-radius: var(--r-full);
    background: linear-gradient(135deg, var(--indigo), var(--purple));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    transition: transform var(--dur) var(--ease);
}
.avatar-circle:hover { transform: scale(1.08); }
.avatar-circle.pulse { animation: pulseRing 1.5s ease-in-out infinite; }
@keyframes pulseRing {
    0%  { box-shadow: 0 0 0 0 rgba(79,70,229,.5); }
    70% { box-shadow: 0 0 0 12px rgba(79,70,229,0); }
    100%{ box-shadow: 0 0 0 0 rgba(79,70,229,0); }
}
.header-user { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-family: var(--font-display); font-size: 1.2rem; color: var(--indigo); line-height: 1.1; }
.header-username { font-size: .75rem; color: var(--gray-400); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.header-stats { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.stat-pill {
    display: flex; align-items: center; gap: 4px;
    background: var(--indigo-light); color: var(--indigo-dark);
    padding: 4px 10px; border-radius: var(--r-full);
    font-size: .8rem; font-weight: 800;
    transition: transform var(--dur);
}
.stat-pill.streak { background: var(--amber-light); color: var(--amber-dark); }
.stat-pill.bump { animation: bumpAnim .4s var(--ease); }
.stat-pill.active-streak { background: linear-gradient(135deg,var(--amber),var(--orange)); color: var(--white); }
@keyframes bumpAnim { 0%{transform:scale(1);} 50%{transform:scale(1.25);} 100%{transform:scale(1);} }
.stat-icon { font-size: .95rem; }

.btn-avatar-menu {
    background: var(--gray-100); border: 2px solid var(--border);
    border-radius: var(--r-full); width: 34px; height: 34px;
    font-size: 1.1rem; cursor: pointer; color: var(--gray-500);
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; transition: all var(--dur);
    letter-spacing: -1px; font-family: var(--font-body);
}
.btn-avatar-menu:hover { background: var(--indigo-light); color: var(--indigo); border-color: var(--indigo); }

/* Dropdown */
.user-dropdown {
    position: absolute; top: 66px; right: 12px;
    background: var(--white); border: 2px solid var(--border);
    border-radius: var(--r-md); box-shadow: var(--shadow-lg);
    overflow: hidden; z-index: 200; min-width: 180px;
    animation: fadeUp .2s var(--ease);
}
.user-dropdown button {
    display: block; width: 100%;
    padding: 12px 18px; border: none;
    background: none; text-align: left;
    font-family: var(--font-body); font-size: .9rem;
    font-weight: 700; color: var(--gray-700); cursor: pointer;
    transition: background var(--dur);
}
.user-dropdown button:hover { background: var(--gray-100); }
.user-dropdown button:last-child { color: var(--red); }
.user-dropdown button:last-child:hover { background: var(--red-light); }

/* ── 7. BARRA DE NIVEL ─────────────────────────────────── */
.level-bar-wrap {
    padding: 8px 16px 10px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
}
.level-info {
    display: flex; justify-content: space-between;
    margin-bottom: 5px;
}
.level-label {
    font-size: .78rem; font-weight: 800;
    color: var(--indigo);
}
.level-xp-text {
    font-size: .78rem; font-weight: 700;
    color: var(--gray-400);
}
.level-track {
    height: 7px; background: var(--gray-200);
    border-radius: var(--r-full); overflow: hidden;
}
.level-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--indigo), var(--purple));
    border-radius: var(--r-full);
    width: 0%;
    transition: width .8s var(--ease);
}

/* ── 8. SECCIONES PRINCIPALES ──────────────────────────── */
.main-section { padding: 20px 16px; }
.section-header { text-align: center; margin-bottom: 20px; }
.section-header h2 { font-family: var(--font-display); font-size: 1.6rem; color: var(--gray-900); margin-bottom: 4px; }
.section-sub { font-size: .9rem; color: var(--gray-400); font-weight: 600; }

/* ── 9. HERO BIENVENIDA ────────────────────────────────── */
.hero-block { text-align: center; padding: 16px 0 20px; }
.hero-title {
    font-family: var(--font-display);
    font-size: 2.2rem; line-height: 1.2;
    color: var(--gray-900); margin-bottom: 6px;
}
.hero-title em {
    font-style: normal; color: var(--indigo);
    position: relative;
}
.hero-title em::after {
    content: ''; position: absolute;
    left: 0; bottom: -2px; width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--indigo), var(--purple));
    border-radius: var(--r-full);
}
.hero-sub { font-size: .95rem; color: var(--gray-400); font-weight: 600; }

/* ── 10. STATS ROW EN WELCOME ──────────────────────────── */
.user-stats-row {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: 10px; margin-top: 20px;
}
.user-stat-card {
    background: var(--surface-2); border: 2px solid var(--border);
    border-radius: var(--r-md); padding: 14px 8px;
    text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px;
    transition: all var(--dur) var(--ease);
}
.user-stat-card:hover { border-color: var(--indigo); background: var(--indigo-light); }
.ust-icon { font-size: 1.4rem; }
.ust-value { font-family: var(--font-display); font-size: 1.4rem; color: var(--gray-900); line-height: 1; }
.ust-label { font-size: .72rem; color: var(--gray-400); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }

/* ── 11. MENÚ PRINCIPAL ────────────────────────────────── */
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.menu-card {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 3px; padding: 18px 14px;
    border-radius: var(--r-lg); border: none; cursor: pointer;
    text-align: left; position: relative; overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur);
}
.menu-card::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.12); opacity:0; transition:opacity var(--dur); }
.menu-card:hover::after { opacity: 1; }
.menu-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.menu-card:active { transform: translateY(0); }
.menu-card .menu-icon { font-size: 1.8rem; margin-bottom: 3px; }
.menu-card strong { font-size: .95rem; font-weight: 800; display: block; }
.menu-card small  { font-size: .75rem; opacity: .8; font-weight: 600; }
.card-primary   { background: linear-gradient(135deg, var(--indigo),#7C3AED); color:var(--white); box-shadow: 0 4px 0 var(--indigo-dark); }
.card-secondary { background: linear-gradient(135deg, var(--sky),var(--teal)); color:var(--white); box-shadow: 0 4px 0 var(--sky-dark); }
.card-tertiary  { background: linear-gradient(135deg, var(--amber),var(--orange)); color:var(--white); box-shadow: 0 4px 0 var(--amber-dark); }
.card-dark      { background: linear-gradient(135deg, var(--gray-700),var(--gray-900)); color:var(--white); box-shadow: 0 4px 0 #0f172a; }

/* ── 12. CATEGORÍAS ─────────────────────────────────────── */
.category-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 16px; }
.category-card {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 16px 8px; background: var(--surface-2);
    border: 2.5px solid var(--border); border-radius: var(--r-md);
    cursor: pointer; font-family: var(--font-body);
    font-size: .88rem; font-weight: 700; color: var(--gray-700);
    transition: all var(--dur) var(--ease);
}
.category-card span:first-child { font-size: 1.7rem; }
.category-card:hover { border-color: var(--indigo); background: var(--indigo-light); color: var(--indigo-dark); transform: translateY(-2px); }
.category-card:active { transform: scale(.97); }
.category-card.selected { border-color: var(--indigo); background: var(--indigo-light); color: var(--indigo-dark); }

/* ── 13. TOPIC INPUT ────────────────────────────────────── */
.category-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--indigo-light); color: var(--indigo-dark);
    padding: 4px 14px; border-radius: var(--r-full);
    font-size: .82rem; font-weight: 800; margin-bottom: 10px;
}
.topic-input-wrapper { position: relative; margin-bottom: 14px; }
.topic-input-wrapper input {
    width: 100%; padding: 14px 44px 14px 16px;
    border: 2.5px solid var(--border); border-radius: var(--r-md);
    font-family: var(--font-body); font-size: 1rem; font-weight: 600;
    color: var(--gray-900); background: var(--surface-2);
    outline: none; transition: border-color var(--dur), box-shadow var(--dur);
}
.topic-input-wrapper input:focus {
    border-color: var(--indigo); background: var(--white);
    box-shadow: 0 0 0 4px rgba(79,70,229,.1);
}
.topic-input-wrapper input::placeholder { color: var(--gray-400); font-weight: 500; }
.input-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; pointer-events: none; }
.topic-suggestions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.suggestion-label { font-size: .78rem; color: var(--gray-400); font-weight: 700; white-space: nowrap; }
.suggestions-row { display: flex; gap: 6px; flex-wrap: wrap; }
.suggestion-chip {
    background: var(--gray-100); border: 1.5px solid var(--border);
    border-radius: var(--r-full); padding: 3px 10px;
    font-size: .78rem; font-weight: 700; color: var(--gray-500);
    cursor: pointer; transition: all var(--dur); font-family: var(--font-body);
}
.suggestion-chip:hover { background: var(--indigo-light); border-color: var(--indigo); color: var(--indigo-dark); }

/* ── 14. BOTONES ────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 13px 20px; border: none; border-radius: var(--r-md);
    font-family: var(--font-body); font-size: 1rem; font-weight: 800;
    cursor: pointer; transition: all var(--dur) var(--ease);
    position: relative; top: 0;
}
.btn-primary { background: var(--indigo); color: var(--white); box-shadow: 0 4px 0 var(--indigo-dark); }
.btn-primary:hover { background: var(--indigo-dark); }
.btn-primary:active { top: 3px; box-shadow: 0 1px 0 var(--indigo-dark); }
.btn-secondary { background: var(--gray-100); color: var(--gray-700); box-shadow: 0 4px 0 var(--gray-300); border: 2px solid var(--gray-200); }
.btn-secondary:hover { background: var(--gray-200); }
.btn-secondary:active { top: 3px; box-shadow: 0 1px 0 var(--gray-300); }
.btn-ghost { background: transparent; color: var(--gray-500); box-shadow: none; font-size: .88rem; width: auto; padding: 7px 12px; }
.btn-ghost:hover { color: var(--indigo); background: var(--indigo-light); border-radius: var(--r-full); }
.btn-xl { padding: 15px 24px; font-size: 1.05rem; border-radius: var(--r-lg); margin-bottom: 10px; }
.btn-sm { padding: 7px 14px; font-size: .82rem; }
.back-btn { display: block; text-align: center; margin-top: 8px; }
.btn:disabled { opacity: .45; cursor: not-allowed; top: 0 !important; box-shadow: none !important; }
.error-feedback { color: var(--red); font-size: .85rem; font-weight: 700; text-align: center; margin-bottom: 10px; }

/* ── 15. LOADING ────────────────────────────────────────── */
.loading-overlay {
    position: fixed; inset: 0;
    background: rgba(248,250,252,.96); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; z-index: 200;
}
.loading-card {
    background: var(--white); border-radius: var(--r-xl);
    padding: 36px 28px; text-align: center; box-shadow: var(--shadow-lg);
    max-width: 280px; width: 90%;
}
.loading-owl { font-size: 3.5rem; display: block; margin-bottom: 14px; animation: owlBounce 1s ease-in-out infinite alternate; }
@keyframes owlBounce { from{transform:translateY(0);} to{transform:translateY(-12px);} }
.loading-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.loading-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--indigo); animation: dotPulse 1.2s ease-in-out infinite; }
.loading-dots span:nth-child(2) { animation-delay:.2s; background:var(--purple); }
.loading-dots span:nth-child(3) { animation-delay:.4s; background:var(--sky); }
@keyframes dotPulse { 0%,80%,100%{transform:scale(.6);opacity:.4;} 40%{transform:scale(1.2);opacity:1;} }
.loading-title { font-family: var(--font-display); font-size: 1.2rem; color: var(--gray-900); margin-bottom: 4px; }
.loading-sub { font-size: .83rem; color: var(--gray-400); }

/* ── 16. QUIZ ───────────────────────────────────────────── */
.quiz-topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.progress-track { flex: 1; height: 10px; background: var(--gray-200); border-radius: var(--r-full); overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg,var(--indigo),var(--purple)); border-radius: var(--r-full); transition: width .5s var(--ease); width: 0%; }
.btn-close-quiz {
    background: var(--gray-100); border: 2px solid var(--gray-200); border-radius: var(--r-full);
    width: 34px; height: 34px; font-size: .95rem; cursor: pointer;
    color: var(--gray-400); font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--dur); flex-shrink: 0;
}
.btn-close-quiz:hover { background: var(--red-light); color: var(--red-dark); border-color: var(--red); }
.btn-speak {
    background: var(--amber-light); border: none; border-radius: var(--r-full);
    width: 34px; height: 34px; font-size: .95rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--dur); flex-shrink: 0;
}
.btn-speak:hover { background: var(--amber); transform: scale(1.1); }
.quiz-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 8px; }
.quiz-topic-label { font-weight: 800; font-size: .85rem; color: var(--indigo); background: var(--indigo-light); padding: 3px 12px; border-radius: var(--r-full); max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.question-count { font-size: .82rem; color: var(--gray-400); font-weight: 700; white-space: nowrap; }
.question-card {
    background: linear-gradient(135deg, var(--indigo), #7C3AED);
    color: var(--white); padding: 22px 18px; border-radius: var(--r-lg);
    margin-bottom: 16px; box-shadow: var(--shadow-md);
    animation: slideDown .3s var(--ease); min-height: 90px;
    display: flex; align-items: center;
}
@keyframes slideDown { from{opacity:0;transform:translateY(-10px);} to{opacity:1;transform:translateY(0);} }
.question-card p { font-size: 1.1rem; font-weight: 700; line-height: 1.5; margin: 0; }
.options-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.option-btn {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px; background: var(--white);
    border: 2.5px solid var(--border); border-radius: var(--r-md);
    cursor: pointer; font-family: var(--font-body);
    font-size: .93rem; font-weight: 700; color: var(--gray-700);
    text-align: left; transition: all var(--dur) var(--ease);
    width: 100%; animation: fadeUp .25s var(--ease) both;
}
.option-btn:nth-child(1){animation-delay:.05s;}
.option-btn:nth-child(2){animation-delay:.10s;}
.option-btn:nth-child(3){animation-delay:.15s;}
.option-btn:nth-child(4){animation-delay:.20s;}
@keyframes fadeUp { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }
.opt-letter {
    min-width: 28px; height: 28px; border-radius: var(--r-sm);
    background: var(--gray-100); color: var(--gray-500);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 800; flex-shrink: 0;
    transition: all var(--dur);
}
.option-btn:hover:not(:disabled) { border-color: var(--indigo); background: var(--indigo-light); color: var(--indigo-dark); transform: translateX(4px); }
.option-btn:hover:not(:disabled) .opt-letter { background: var(--indigo); color: var(--white); }
.option-btn:active:not(:disabled) { transform: scale(.98); }
.option-btn.btn-success { background: var(--green-light); border-color: var(--green); color: var(--green-dark); }
.option-btn.btn-success .opt-letter { background: var(--green); color: var(--white); }
.option-btn.btn-error { background: var(--red-light); border-color: var(--red); color: var(--red-dark); }
.option-btn.btn-error .opt-letter { background: var(--red); color: var(--white); }
.option-btn:disabled { cursor: default; transform: none; }
.feedback-banner { display:flex; align-items:flex-start; gap:10px; padding:14px 16px; border-radius:var(--r-md); margin-bottom:14px; animation:fadeUp .3s var(--ease); border:2px solid transparent; }
.feedback-banner.success-banner { background:var(--green-light); border-color:var(--green); }
.feedback-banner.error-banner   { background:var(--red-light);   border-color:var(--red); }
.fb-icon { font-size: 1.6rem; flex-shrink: 0; }
.fb-text strong { display: block; font-size: .9rem; margin-bottom: 2px; }
.fb-text strong.success-text { color: var(--green-dark); }
.fb-text strong.error-text   { color: var(--red-dark); }
.fb-text span { font-size: .84rem; color: var(--gray-500); font-weight: 600; }
#feedback { display: none; }
#nextQuestionBtn {
    width: 100%; margin-top: 8px;
    background: var(--indigo); color: var(--white);
    box-shadow: 0 4px 0 var(--indigo-dark);
    padding: 13px 20px; border-radius: var(--r-md);
    font-family: var(--font-body); font-size: 1rem; font-weight: 800;
    cursor: pointer; border: none;
    transition: all var(--dur); animation: fadeUp .3s var(--ease);
    position: relative; top: 0;
}
#nextQuestionBtn:hover { background: var(--indigo-dark); }
#nextQuestionBtn:active { top: 3px; box-shadow: 0 1px 0 var(--indigo-dark); }
.quiz-footer { display: flex; justify-content: center; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 6px; }

/* ── 17. RESULTADOS ─────────────────────────────────────── */
.results-hero { text-align: center; padding: 20px 0 14px; }
.trophy-ring {
    width: 76px; height: 76px; border-radius: 50%;
    background: linear-gradient(135deg, var(--amber), var(--orange));
    display: flex; align-items: center; justify-content: center;
    font-size: 2.3rem; margin: 0 auto 14px;
    box-shadow: 0 8px 24px rgba(245,158,11,.35);
    animation: trophyBounce .6s var(--ease);
}
@keyframes trophyBounce { 0%{transform:scale(0) rotate(-20deg);opacity:0;} 60%{transform:scale(1.15) rotate(5deg);opacity:1;} 100%{transform:scale(1) rotate(0deg);} }
.results-hero h2 { font-family: var(--font-display); font-size: 1.8rem; color: var(--gray-900); margin-bottom: 4px; }
.results-topic { font-size: .88rem; color: var(--gray-400); font-weight: 600; }
.score-circle-wrap { position: relative; width: 150px; height: 150px; margin: 16px auto; }
.score-ring { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-bg   { fill: none; stroke: var(--gray-200); stroke-width: 10; }
.ring-fill { fill: none; stroke: url(#scoreGrad); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1.2s var(--ease); }
.score-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-num { font-family: var(--font-display); font-size: 2rem; color: var(--gray-900); line-height: 1; }
.score-label { font-size: .75rem; color: var(--gray-400); font-weight: 700; }
.xp-earned-banner { display:flex; align-items:center; justify-content:center; gap:8px; background:var(--indigo-light); color:var(--indigo-dark); padding:8px 18px; border-radius:var(--r-full); font-weight:800; font-size:.95rem; margin:0 auto 14px; width:fit-content; animation:fadeUp .4s var(--ease) .5s both; }
.new-achievements-wrap { background:var(--amber-light); border:2px solid var(--amber); border-radius:var(--r-md); padding:14px; margin-bottom:14px; animation:fadeUp .4s var(--ease) .7s both; }
.new-ach-title { font-weight:800; color:var(--amber-dark); margin-bottom:8px; font-size:.9rem; }
.new-achievements-list { display:flex; flex-wrap:wrap; gap:8px; }
.new-ach-item { background:var(--white); border:2px solid var(--amber); border-radius:var(--r-sm); padding:6px 12px; font-size:.82rem; font-weight:700; color:var(--amber-dark); display:flex; align-items:center; gap:5px; }
.results-message { text-align:center; font-size:.95rem; color:var(--gray-500); font-weight:600; margin-bottom:20px; padding:0 8px; }
.results-actions { display:flex; flex-direction:column; gap:10px; }

/* ── 18. TEMAS GUARDADOS ────────────────────────────────── */
.topics-list { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.saved-topic-item { display:flex; align-items:center; gap:10px; background:var(--surface-2); border:2px solid var(--border); border-radius:var(--r-md); padding:12px 14px; transition:all var(--dur); }
.saved-topic-item:hover { border-color:var(--indigo); background:var(--indigo-light); }
.topic-info { flex:1; min-width:0; }
.topic-name { font-weight:800; font-size:.92rem; color:var(--gray-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topic-cat  { font-size:.75rem; color:var(--gray-400); font-weight:600; }
.saved-topic-item .actions { display:flex; gap:6px; flex-shrink:0; }
.btn-play   { background:var(--indigo); color:var(--white); border:none; border-radius:var(--r-sm); padding:6px 12px; font-size:.8rem; font-weight:800; cursor:pointer; font-family:var(--font-body); transition:all var(--dur); }
.btn-play:hover { background:var(--indigo-dark); }
.btn-delete { background:var(--red-light); color:var(--red-dark); border:none; border-radius:var(--r-sm); padding:6px 10px; font-size:.8rem; cursor:pointer; font-family:var(--font-body); transition:all var(--dur); }
.btn-delete:hover { background:var(--red); color:var(--white); }
.no-items { text-align:center; padding:28px 16px; color:var(--gray-400); font-weight:600; }
.no-items .no-icon { font-size:2.2rem; display:block; margin-bottom:8px; }

/* ── 19. MEMORIA ────────────────────────────────────────── */
.memory-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:360px; margin:0 auto 20px; padding:0 4px; }
.memory-card { aspect-ratio:1; border-radius:var(--r-md); cursor:pointer; perspective:800px; position:relative; transform-style:preserve-3d; transition:transform .45s var(--ease); }
.memory-card.flip { transform: rotateY(180deg); }
.memory-card.matched { pointer-events:none; }
.memory-card.matched .face.back { background:var(--green-light); border-color:var(--green); box-shadow:0 0 0 3px var(--green); }
.face { position:absolute; inset:0; backface-visibility:hidden; display:flex; align-items:center; justify-content:center; border-radius:var(--r-md); font-size:1.7rem; border:3px solid transparent; }
.face.front { background:linear-gradient(135deg,var(--indigo),#7C3AED); color:rgba(255,255,255,.4); font-size:1.3rem; }
.face.back  { background:var(--white); color:var(--gray-700); transform:rotateY(180deg); border-color:var(--border); box-shadow:var(--shadow-sm); }

/* ── 20. PERFIL ─────────────────────────────────────────── */
.profile-card { text-align:center; padding:24px 16px; background:linear-gradient(135deg,var(--indigo-light),#f5f0ff); border-radius:var(--r-lg); margin-bottom:20px; border:2px solid var(--indigo-light); }
.profile-avatar { font-size:4rem; display:block; margin-bottom:10px; }
.profile-card h3 { font-family:var(--font-display); font-size:1.6rem; color:var(--gray-900); margin-bottom:4px; }
.profile-role { background:var(--indigo); color:var(--white); padding:3px 14px; border-radius:var(--r-full); font-size:.8rem; font-weight:800; display:inline-block; }
.profile-stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:20px; }
.profile-stat { background:var(--surface-2); border:2px solid var(--border); border-radius:var(--r-md); padding:16px 10px; text-align:center; display:flex; flex-direction:column; gap:3px; }
.ps-val { font-family:var(--font-display); font-size:1.8rem; color:var(--indigo); line-height:1; }
.ps-lbl { font-size:.75rem; color:var(--gray-400); font-weight:700; text-transform:uppercase; letter-spacing:.5px; }

/* ── 21. LOGROS ─────────────────────────────────────────── */
.achievements-grid { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.achievement-item { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--r-md); border:2px solid var(--border); background:var(--surface-2); transition:all var(--dur); }
.achievement-item.unlocked { background:var(--amber-light); border-color:var(--amber); }
.achievement-item.locked   { opacity:.55; }
.ach-icon { font-size:2rem; flex-shrink:0; }
.ach-info { flex:1; min-width:0; }
.ach-name { font-weight:800; font-size:.9rem; color:var(--gray-900); margin-bottom:2px; }
.ach-desc { font-size:.78rem; color:var(--gray-400); font-weight:600; margin-bottom:2px; }
.ach-xp   { font-size:.75rem; font-weight:800; color:var(--indigo); }
.ach-status { font-size:1.2rem; flex-shrink:0; }

/* ── 22. MODAL ──────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:300; padding:20px; }
.modal-card { background:var(--white); border-radius:var(--r-xl); padding:32px 24px 24px; max-width:360px; width:100%; box-shadow:var(--shadow-lg); text-align:center; position:relative; animation:modalIn .3s var(--ease); }
@keyframes modalIn { from{opacity:0;transform:scale(.9) translateY(20px);} to{opacity:1;transform:scale(1) translateY(0);} }
.modal-icon { font-size:2.8rem; display:block; margin-bottom:10px; }
.modal-card h3 { font-family:var(--font-display); font-size:1.4rem; color:var(--gray-900); margin-bottom:6px; }
.modal-card p  { font-size:.88rem; color:var(--gray-400); margin-bottom:12px; }
.modal-input-wrap { margin-bottom:12px; }
.modal-input-wrap input { width:100%; padding:12px 14px; border:2.5px solid var(--border); border-radius:var(--r-md); font-family:var(--font-body); font-size:1rem; font-weight:600; outline:none; transition:border-color var(--dur); text-align:center; letter-spacing:.1em; }
.modal-input-wrap input:focus { border-color:var(--indigo); }
.modal-close { position:absolute; top:12px; right:12px; background:var(--gray-100); border:none; border-radius:var(--r-full); width:28px; height:28px; font-size:.82rem; cursor:pointer; color:var(--gray-400); font-weight:800; display:flex; align-items:center; justify-content:center; transition:all var(--dur); }
.modal-close:hover { background:var(--red-light); color:var(--red); }
.feedback-text { font-size:.85rem; font-weight:700; color:var(--gray-400); margin-bottom:10px; min-height:18px; text-align:center; }

/* ── 23. INSTALL & TOAST ────────────────────────────────── */
.install-banner { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:540px; background:var(--indigo); color:var(--white); padding:12px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; z-index:150; font-weight:700; font-size:.88rem; box-shadow:0 -4px 20px rgba(79,70,229,.3); }
.install-banner .btn-primary { background:var(--white); color:var(--indigo); width:auto; padding:7px 16px; border-radius:var(--r-full); box-shadow:none; flex-shrink:0; }
.toast-container { position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:400; width:90%; max-width:400px; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { background:var(--gray-900); color:var(--white); padding:11px 16px; border-radius:var(--r-md); font-size:.88rem; font-weight:700; box-shadow:var(--shadow-lg); animation:toastIn .3s var(--ease); pointer-events:all; }
.toast.toast-success { background:var(--green); }
.toast.toast-error   { background:var(--red); }
.toast.toast-info    { background:var(--indigo); }
@keyframes toastIn  { from{opacity:0;transform:translateY(-14px) scale(.95);} to{opacity:1;transform:translateY(0) scale(1);} }
@keyframes toastOut { to{opacity:0;transform:translateY(-14px) scale(.95);} }

/* ── 24. ANIMACIONES ────────────────────────────────────── */
.fade-in { animation: fadeIn .35s var(--ease); }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }

/* ── 25. RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 540px) { .shell { box-shadow:none; } }
@media (max-width: 400px) {
    .menu-grid { gap:10px; }
    .menu-card { padding:14px 10px; }
    .hero-title { font-size:1.9rem; }
    .category-grid { grid-template-columns:1fr 1fr; }
    .profile-stats-grid { grid-template-columns:1fr 1fr; }
    .user-stats-row { gap:8px; }
}

/* ── 26. VERIFICACIÓN DE CORREO ─────────────────────────── */
.verify-msg {
    text-align: center;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.verify-icon {
    font-size: 3.5rem;
    animation: owlFloat 3s ease-in-out infinite alternate;
}
.verify-msg h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--gray-900);
}
.verify-msg p {
    font-size: .9rem;
    color: var(--gray-500);
    font-weight: 600;
    margin: 0;
}
.verify-msg p strong { color: var(--indigo); }
.verify-sub {
    font-size: .82rem !important;
    color: var(--gray-400) !important;
}

/* ── 27. PANEL MAESTRO ──────────────────────────────────── */
.teacher-card {
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px 16px;
    margin-bottom: 16px;
}
.teacher-card-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--gray-900);
    margin-bottom: 16px;
}
.teacher-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2.5px solid var(--border);
    border-radius: var(--r-md);
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    color: var(--gray-900);
    background: var(--white);
    outline: none;
    resize: vertical;
    transition: border-color var(--dur);
    line-height: 1.5;
}
.teacher-textarea:focus { border-color: var(--indigo); box-shadow: 0 0 0 4px rgba(79,70,229,.1); }
.teacher-select {
    width: 100%;
    padding: 11px 14px;
    border: 2.5px solid var(--border);
    border-radius: var(--r-md);
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 700;
    color: var(--gray-700);
    background: var(--white);
    outline: none;
    cursor: pointer;
    transition: border-color var(--dur);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394A3B8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.teacher-select:focus { border-color: var(--indigo); }
.teacher-row {
    display: flex;
    gap: 12px;
    margin-bottom: 0;
}
.optional-label {
    font-size: .75rem;
    color: var(--gray-400);
    font-weight: 600;
}

/* Resultado del quiz generado */
.teacher-result-card {
    background: linear-gradient(135deg, var(--green-light), #f0fff4);
    border: 2px solid var(--green);
    border-radius: var(--r-lg);
    padding: 20px 16px;
    margin-bottom: 16px;
    animation: fadeUp .4s var(--ease);
}
.teacher-result-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.teacher-result-icon { font-size: 1.8rem; }
.teacher-result-header h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--green-dark);
}
.quiz-code-display {
    background: var(--white);
    border: 2px solid var(--green);
    border-radius: var(--r-md);
    padding: 14px 16px;
    text-align: center;
    margin-bottom: 12px;
}
.qcd-label {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}
.qcd-code {
    display: block;
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: var(--indigo);
    letter-spacing: 6px;
}
.teacher-result-meta {
    display: flex;
    gap: 16px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--gray-500);
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.teacher-result-hint {
    font-size: .82rem;
    color: var(--gray-400);
    font-weight: 600;
    margin-bottom: 14px;
    line-height: 1.5;
}

/* Caja de código en el menú principal */
.quiz-code-box {
    background: var(--indigo-light);
    border: 2px solid rgba(79,70,229,.2);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-top: 16px;
    margin-bottom: 4px;
}
.qcb-label {
    font-size: .82rem;
    font-weight: 800;
    color: var(--indigo-dark);
    margin-bottom: 8px;
}
.qcb-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.qcb-row input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid rgba(79,70,229,.3);
    border-radius: var(--r-sm);
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--indigo-dark);
    background: var(--white);
    outline: none;
    text-align: center;
    transition: border-color var(--dur);
}
.qcb-row input:focus { border-color: var(--indigo); }
.qcb-row input::placeholder { letter-spacing: 2px; font-size: .9rem; color: var(--gray-300); font-family: var(--font-body); }
.qcb-row .btn { flex-shrink: 0; width: auto; }

/* ── 28. MÓDULO DE INGLÉS PROGRESIVO ────────────────────── */

/* Selección de edad */
.english-age-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}
.english-age-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 14px;
    background: var(--surface-2);
    border: 2.5px solid var(--border);
    border-radius: var(--r-lg);
    cursor: pointer;
    font-family: var(--font-body);
    transition: all var(--dur) var(--ease);
    text-align: center;
}
.english-age-card:hover {
    border-color: var(--indigo);
    background: var(--indigo-light);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.english-age-card.selected {
    border-color: var(--indigo);
    background: var(--indigo-light);
}
.age-icon  { font-size: 2.8rem; }
.english-age-card strong {
    font-size: 1rem;
    font-weight: 800;
    color: var(--gray-900);
}
.english-age-card small {
    font-size: .78rem;
    color: var(--indigo);
    font-weight: 700;
}
.age-desc {
    font-size: .75rem;
    color: var(--gray-400);
    font-weight: 600;
}

/* Tarjeta de nivel actual */
.english-level-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--indigo), #7C3AED);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    margin-bottom: 14px;
    color: var(--white);
}
.elc-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.elc-level-num {
    font-family: var(--font-display);
    font-size: 2.8rem;
    line-height: 1;
    opacity: .9;
}
.elc-level-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.elc-level-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    line-height: 1;
}
.elc-level-sub {
    font-size: .78rem;
    opacity: .75;
    font-weight: 600;
}
.elc-xp {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.elc-xp span:first-child {
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1;
}
.elc-xp small {
    font-size: .7rem;
    opacity: .7;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Barra de progreso del nivel */
.english-progress-wrap {
    margin-bottom: 16px;
}
.english-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.english-progress-label span:first-child { color: var(--indigo); }
.english-progress-label span:last-child  { color: var(--gray-400); }
.english-progress-track {
    height: 10px;
    background: var(--gray-200);
    border-radius: var(--r-full);
    overflow: hidden;
}
.english-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--indigo), var(--purple));
    border-radius: var(--r-full);
    width: 0%;
    transition: width .8s var(--ease);
}

/* Stats rápidas */
.english-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.english-stat {
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.es-icon { font-size: 1.3rem; }
.es-val {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--gray-900);
    line-height: 1;
}
.es-lbl {
    font-size: .7rem;
    color: var(--gray-400);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Grid de niveles */
.english-levels-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.english-level-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    border: 2px solid var(--border);
    background: var(--surface-2);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}
.english-level-item:hover:not(.locked) {
    border-color: var(--indigo);
    background: var(--indigo-light);
    transform: translateX(4px);
}
.english-level-item.current {
    border-color: var(--indigo);
    background: var(--indigo-light);
}
.english-level-item.completed {
    border-color: var(--green);
    background: var(--green-light);
}
.english-level-item.locked {
    opacity: .5;
    cursor: not-allowed;
}
.eli-icon {
    font-size: 2rem;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 2px solid var(--border);
}
.english-level-item.current  .eli-icon { background: var(--indigo); border-color: var(--indigo); }
.english-level-item.completed .eli-icon { background: var(--green); border-color: var(--green); }
.eli-info { flex: 1; min-width: 0; }
.eli-name {
    font-weight: 800;
    font-size: .95rem;
    color: var(--gray-900);
    margin-bottom: 2px;
}
.eli-desc {
    font-size: .78rem;
    color: var(--gray-400);
    font-weight: 600;
}
.eli-status {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Modal nivel completado */
.level-up-modal {
    background: linear-gradient(135deg, #fff 0%, var(--indigo-light) 100%);
    text-align: center;
}
.lum-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: 10px;
    animation: trophyBounce .6s var(--ease);
}
.level-up-modal h3 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--indigo-dark);
    margin-bottom: 12px;
}
.lum-level {
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--indigo);
    line-height: 1;
    margin-bottom: 6px;
}
.lum-desc {
    font-size: .88rem;
    color: var(--gray-400);
    font-weight: 600;
    margin-bottom: 16px;
}

/* ── 29. MÓDULO CULTURA E HISTORIA ──────────────────────── */
.cultura-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}
.cultura-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 12px;
    background: linear-gradient(135deg, var(--amber-light), #fff8e1);
    border: 2.5px solid var(--amber);
    border-radius: var(--r-lg);
    cursor: pointer;
    font-family: var(--font-body);
    transition: all var(--dur) var(--ease);
    text-align: center;
}
.cultura-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--amber-dark);
    background: linear-gradient(135deg, var(--amber-light), #fff3cd);
}
.cultura-card:active { transform: scale(.97); }
.cultura-icon { font-size: 2.2rem; }
.cultura-card strong {
    font-size: .92rem;
    font-weight: 800;
    color: var(--gray-900);
}
.cultura-card small {
    font-size: .72rem;
    color: var(--gray-500);
    font-weight: 600;
    line-height: 1.3;
}

/* ── 30. DRAG & DROP ────────────────────────────────────── */
.dragdrop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.6);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 350;
    padding: 16px;
}
.dragdrop-card {
    background: var(--white);
    border-radius: var(--r-xl);
    padding: 24px 20px;
    width: 100%;
    max-width: 500px;
    box-shadow: var(--shadow-lg);
    animation: modalIn .3s var(--ease);
}
.dragdrop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.dragdrop-badge {
    background: var(--indigo-light);
    color: var(--indigo-dark);
    padding: 4px 12px;
    border-radius: var(--r-full);
    font-size: .78rem;
    font-weight: 800;
}
.dragdrop-instruction {
    font-size: .88rem;
    color: var(--gray-500);
    font-weight: 600;
    margin-bottom: 14px;
    text-align: center;
}
.dragdrop-target-wrap {
    background: var(--gray-50);
    border: 2px dashed var(--border);
    border-radius: var(--r-md);
    padding: 16px;
    margin-bottom: 16px;
    min-height: 80px;
}
.dragdrop-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    min-height: 44px;
}
.dragdrop-slot {
    min-width: 60px;
    height: 40px;
    border: 2px dashed var(--gray-300);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--gray-700);
    background: var(--white);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    white-space: nowrap;
}
.dragdrop-slot.filled {
    border-style: solid;
    border-color: var(--indigo);
    background: var(--indigo-light);
    color: var(--indigo-dark);
}
.dragdrop-slot.correct {
    border-color: var(--green);
    background: var(--green-light);
    color: var(--green-dark);
}
.dragdrop-slot.incorrect {
    border-color: var(--red);
    background: var(--red-light);
    color: var(--red-dark);
}
.dragdrop-translation {
    text-align: center;
    font-size: .8rem;
    color: var(--gray-400);
    font-weight: 600;
    margin-top: 10px;
    font-style: italic;
}
.dragdrop-words {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
    min-height: 50px;
}
.word-chip {
    padding: 8px 14px;
    background: var(--white);
    border: 2.5px solid var(--indigo);
    border-radius: var(--r-full);
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 800;
    color: var(--indigo-dark);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    user-select: none;
    animation: fadeUp .2s var(--ease) both;
}
.word-chip:hover {
    background: var(--indigo);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.word-chip:active { transform: scale(.95); }
.word-chip.used {
    opacity: 0;
    pointer-events: none;
}
.dragdrop-feedback {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: var(--r-md);
    font-weight: 800;
    font-size: .95rem;
    margin-bottom: 14px;
    animation: fadeUp .3s var(--ease);
}
.dragdrop-feedback.success {
    background: var(--green-light);
    color: var(--green-dark);
}
.dragdrop-feedback.error {
    background: var(--red-light);
    color: var(--red-dark);
}
.dragdrop-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.dragdrop-actions .btn { margin-bottom: 0; }
.dragdrop-progress {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dragdrop-prog-track {
    flex: 1;
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--r-full);
    overflow: hidden;
}
.dragdrop-prog-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--indigo), var(--purple));
    border-radius: var(--r-full);
    transition: width .5s var(--ease);
}
#dragProgressText {
    font-size: .78rem;
    font-weight: 800;
    color: var(--gray-400);
    white-space: nowrap;
}

/* ── 31. BANNER INGLÉS AVANZADO ─────────────────────────── */
.advanced-english-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(135deg, var(--gray-700), var(--gray-900));
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-bottom: 12px;
    color: var(--white);
}
.aeb-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.aeb-icon { font-size: 1.8rem; }
.aeb-left strong {
    display: block;
    font-size: .95rem;
    font-weight: 800;
}
.aeb-left small {
    font-size: .75rem;
    opacity: .7;
    font-weight: 600;
}
.advanced-english-banner .btn-primary {
    background: var(--white);
    color: var(--gray-900);
    width: auto;
    flex-shrink: 0;
    box-shadow: none;
    font-size: .85rem;
    padding: 8px 16px;
}
.advanced-english-banner .btn-primary:hover {
    background: var(--gray-100);
}

/* ── 32. SECCIÓN DE JUEGOS OFFLINE ──────────────────────── */

/* Tarjeta de menú especial (ancho completo) */
.card-games {
    background: linear-gradient(135deg, #7C3AED, #4F46E5);
    color: var(--white);
    box-shadow: 0 4px 0 #3730A3;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
}
.card-games .menu-icon { font-size: 2rem; margin-bottom: 0; }
.card-games strong { font-size: 1rem; }
.card-games small  { font-size: .8rem; opacity: .8; }

/* Lista de paquetes guardados */
.packs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.pack-item {
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px;
    transition: all var(--dur) var(--ease);
}
.pack-item:hover { border-color: var(--indigo); }
.pack-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.pack-item-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--gray-900);
}
.pack-item-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: .75rem;
    color: var(--gray-400);
    font-weight: 700;
}
.pack-lang-tag {
    background: var(--indigo-light);
    color: var(--indigo-dark);
    padding: 2px 8px;
    border-radius: var(--r-full);
    font-size: .72rem;
    font-weight: 800;
}
.pack-games-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.pack-game-tag {
    background: var(--gray-100);
    border: 1.5px solid var(--border);
    border-radius: var(--r-full);
    padding: 3px 10px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--gray-500);
}
.pack-item-actions {
    display: flex;
    gap: 8px;
}
.pack-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--gray-400);
    font-weight: 600;
}
.pack-empty .pe-icon { font-size: 2.5rem; display: block; margin-bottom: 8px; }

/* Formulario de generación */
.pack-lang-row {
    margin-bottom: 16px;
}
.pack-option-label {
    display: block;
    font-size: .85rem;
    font-weight: 700;
    color: var(--gray-500);
    margin-bottom: 8px;
}
.pack-lang-btns {
    display: flex;
    gap: 8px;
}
.pack-lang-btn {
    flex: 1;
    padding: 10px;
    border: 2.5px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 700;
    color: var(--gray-500);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}
.pack-lang-btn.active {
    border-color: var(--indigo);
    background: var(--indigo-light);
    color: var(--indigo-dark);
}
.pack-games-select { margin-bottom: 16px; }
.pack-games-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pack-game-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    font-size: .88rem;
    font-weight: 700;
    color: var(--gray-700);
    transition: all var(--dur);
}
.pack-game-check:has(input:checked) {
    border-color: var(--indigo);
    background: var(--indigo-light);
    color: var(--indigo-dark);
}
.pack-game-check input { accent-color: var(--indigo); width: 16px; height: 16px; }
.pack-limit-note {
    background: var(--amber-light);
    border: 1.5px solid var(--amber);
    border-radius: var(--r-sm);
    padding: 8px 12px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--amber-dark);
    margin-bottom: 12px;
    display: none;
}
.pack-limit-note.show { display: block; }

/* Pantalla de juego del paquete */
.pack-play-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0 16px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 16px;
}
.pack-play-header h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--gray-900);
}
.pack-play-lang {
    font-size: .75rem;
    color: var(--gray-400);
    font-weight: 700;
}

/* Tabs de juegos dentro del paquete */
.pack-game-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.pack-game-tab {
    padding: 8px 14px;
    border: 2px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface-2);
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 800;
    color: var(--gray-500);
    cursor: pointer;
    transition: all var(--dur);
}
.pack-game-tab.active {
    background: var(--indigo);
    border-color: var(--indigo);
    color: var(--white);
}

/* ── JUEGO: AHORCADO ────────────────────────────────────── */
.hangman-wrap {
    text-align: center;
}
.hangman-drawing {
    font-size: 6rem;
    display: block;
    margin-bottom: 10px;
    min-height: 100px;
    line-height: 1;
}
.hangman-word {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.hangman-letter {
    width: 32px;
    height: 40px;
    border-bottom: 3px solid var(--gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--indigo-dark);
}
.hangman-keyboard {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 16px;
}
.hangman-key {
    width: 36px;
    height: 36px;
    border: 2px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 700;
    color: var(--gray-700);
    cursor: pointer;
    transition: all var(--dur);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hangman-key:hover:not(:disabled) {
    background: var(--indigo);
    color: var(--white);
    border-color: var(--indigo);
}
.hangman-key:disabled { opacity: .35; cursor: not-allowed; }
.hangman-key.correct  { background: var(--green); color: var(--white); border-color: var(--green); }
.hangman-key.wrong    { background: var(--red-light); color: var(--red-dark); border-color: var(--red); }
.hangman-status {
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin-bottom: 12px;
    min-height: 28px;
}
.hangman-status.win  { color: var(--green-dark); }
.hangman-status.lose { color: var(--red-dark); }
.hangman-hint {
    font-size: .78rem;
    color: var(--gray-400);
    font-weight: 600;
    margin-bottom: 14px;
}

/* ── JUEGO: PAREJAS (TRADUCCIÓN) ────────────────────────── */
.pairs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
.pairs-card {
    padding: 16px 10px;
    border: 2.5px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 800;
    color: var(--gray-700);
    cursor: pointer;
    text-align: center;
    transition: all var(--dur) var(--ease);
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pairs-card:hover:not(.matched):not(.selected) {
    border-color: var(--indigo);
    background: var(--indigo-light);
    color: var(--indigo-dark);
}
.pairs-card.selected {
    border-color: var(--indigo);
    background: var(--indigo);
    color: var(--white);
}
.pairs-card.matched {
    border-color: var(--green);
    background: var(--green-light);
    color: var(--green-dark);
    pointer-events: none;
}
.pairs-card.wrong {
    border-color: var(--red);
    background: var(--red-light);
    color: var(--red-dark);
    animation: shake .4s var(--ease);
}
@keyframes shake {
    0%,100%{transform:translateX(0);}
    25%{transform:translateX(-6px);}
    75%{transform:translateX(6px);}
}
.pairs-status {
    text-align: center;
    font-weight: 800;
    font-size: .9rem;
    margin-bottom: 12px;
    color: var(--gray-500);
    min-height: 24px;
}

/* ── JUEGO: SOPA DE LETRAS ──────────────────────────────── */
.wordsearch-wrap { overflow-x: auto; }
.wordsearch-grid {
    display: inline-grid;
    gap: 2px;
    margin: 0 auto 16px;
    user-select: none;
}
.ws-cell {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: .92rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--dur);
    border: 1px solid var(--gray-200);
    background: var(--surface-2);
    font-weight: 700;
}
.ws-cell:hover   { background: var(--indigo-light); }
.ws-cell.selected{ background: var(--indigo); color: var(--white); }
.ws-cell.found   { background: var(--green-light); color: var(--green-dark); border-color: var(--green); font-weight: 800; }
.ws-words-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    justify-content: center;
}
.ws-word-tag {
    padding: 4px 12px;
    border-radius: var(--r-full);
    font-size: .8rem;
    font-weight: 800;
    background: var(--gray-100);
    color: var(--gray-500);
    border: 1.5px solid var(--border);
    transition: all var(--dur);
}
.ws-word-tag.found {
    background: var(--green-light);
    color: var(--green-dark);
    border-color: var(--green);
    text-decoration: line-through;
}

/* Memoria mejorada (con palabras) */
.memory-word-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    max-width: 420px;
    margin: 0 auto 16px;
}
.memory-word-card {
    aspect-ratio: 1;
    border-radius: var(--r-md);
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .4s var(--ease);
    min-height: 80px;
}
.memory-word-card.flip { transform: rotateY(180deg); }
.memory-word-card.matched { pointer-events: none; }
.memory-word-card .face {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-md);
    border: 3px solid transparent;
    font-weight: 800;
    text-align: center;
    padding: 6px;
    line-height: 1.2;
}
.memory-word-card .face.front {
    background: linear-gradient(135deg, var(--indigo), #7C3AED);
    color: rgba(255,255,255,.5);
    font-size: 2rem;
}
.memory-word-card .face.back {
    background: var(--white);
    color: var(--gray-700);
    transform: rotateY(180deg);
    border-color: var(--border);
    font-size: 1.8rem; /* emojis grandes */
    flex-direction: column;
    gap: 4px;
}
.memory-word-card .face.back.is-word {
    font-size: .82rem; /* palabras en tamaño legible */
}
.memory-word-card.matched .face.back {
    background: var(--green-light);
    border-color: var(--green);
    color: var(--green-dark);
}

/* ── 33. BANNER DE ACTUALIZACIÓN ────────────────────────── */
.update-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 540px;
    background: linear-gradient(135deg, var(--indigo), #7C3AED);
    color: var(--white);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 500;
    box-shadow: 0 4px 20px rgba(79,70,229,.4);
    animation: slideDownIn .4s var(--ease);
}
@keyframes slideDownIn {
    from { transform: translateX(-50%) translateY(-100%); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
@keyframes slideDownOut {
    from { transform: translateX(-50%) translateY(0);    opacity: 1; }
    to   { transform: translateX(-50%) translateY(-100%); opacity: 0; }
}
.update-banner-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.update-icon { font-size: 1.4rem; flex-shrink: 0; }
.update-banner-left strong {
    display: block;
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.2;
}
.update-banner-left small {
    font-size: .75rem;
    opacity: .8;
    font-weight: 600;
}
.btn-update-now {
    background: var(--white);
    color: var(--indigo-dark);
    border: none;
    border-radius: var(--r-full);
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all var(--dur) var(--ease);
}
.btn-update-now:hover {
    background: var(--indigo-light);
    transform: scale(1.05);
}

/* ── 34. BOTTOM NAVIGATION ──────────────────────────────── */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 540px;
    background: var(--white);
    border-top: 2px solid var(--border);
    display: flex;
    align-items: stretch;
    z-index: 120;
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
    padding-bottom: env(safe-area-inset-bottom, 0px); /* iPhone notch */
}

.bnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 4px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-body);
    color: var(--gray-400);
    transition: all var(--dur) var(--ease);
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.bnav-item:hover { background: var(--gray-50); }
.bnav-item:active { transform: scale(.92); }

.bnav-item.active {
    color: var(--indigo);
}
.bnav-item.active .bnav-icon {
    transform: scale(1.15);
    filter: drop-shadow(0 2px 4px rgba(79,70,229,.3));
}

/* Indicador activo — línea arriba */
.bnav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 3px;
    background: linear-gradient(90deg, var(--indigo), var(--purple));
    border-radius: 0 0 var(--r-full) var(--r-full);
}

.bnav-icon {
    font-size: 1.35rem;
    line-height: 1;
    transition: transform var(--dur) var(--ease), filter var(--dur);
}

.bnav-label {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1;
}

/* Badge de notificación */
.bnav-badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 16px);
    background: var(--red);
    color: var(--white);
    font-size: .58rem;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--white);
    animation: bumpAnim .4s var(--ease);
}

/* Botón salir — color rojo suave */
.bnav-exit { color: var(--gray-300); }
.bnav-exit:hover { color: var(--red); background: var(--red-light); }
.bnav-exit.active { color: var(--red); }
.bnav-exit.active::before { background: var(--red); }

/* Cuando el bottom nav está visible, añadir padding al shell */
.shell.has-bottom-nav {
    padding-bottom: 68px;
}

/* Animación de entrada del nav */
@keyframes navSlideUp {
    from { transform: translateX(-50%) translateY(100%); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
.bottom-nav.visible {
    animation: navSlideUp .4s var(--ease);
}

/* Tablet/desktop — ocultar el nav en pantallas grandes */
@media (min-width: 600px) and (display-mode: browser) {
    .bottom-nav { display: none !important; }
}

/* ── 35. BADGE EN BOTÓN DE JUEGOS DEL MENÚ ─────────────── */
.menu-pack-badge {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    opacity: .75;
    margin-top: 2px;
}

/* Fix: label de racha en stats del menú */
#statStreak + .ust-label::after {
    content: ' Máx.';
}

/* ── 36. SELECTOR TIPO PAREJAS ──────────────────────────── */
.pack-pairs-type {
    margin-bottom: 16px;
    animation: fadeUp .2s var(--ease);
}
.pairs-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.pairs-type-btn {
    padding: 9px 10px;
    border: 2px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 700;
    color: var(--gray-500);
    cursor: pointer;
    text-align: left;
    transition: all var(--dur) var(--ease);
    line-height: 1.3;
}
.pairs-type-btn:hover {
    border-color: var(--indigo);
    background: var(--indigo-light);
    color: var(--indigo-dark);
}
.pairs-type-btn.active {
    border-color: var(--indigo);
    background: var(--indigo);
    color: var(--white);
}

/* Etiqueta de tipo en las tarjetas de parejas */
.pairs-type-label {
    display: block;
    text-align: center;
    font-size: .72rem;
    color: var(--gray-400);
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
/* Banderas — font size mayor */
.pairs-card.is-flag {
    font-size: 1.8rem;
    min-height: 70px;
}
/* Capitales — dos líneas */
.pairs-card.is-capital {
    font-size: .82rem;
    line-height: 1.3;
    min-height: 60px;
}

/* ── 37. BOTÓN BOCINA EN OPCIONES DEL QUIZ ──────────────── */
.option-btn {
    position: relative;
}
.opt-text {
    flex: 1;
}
.opt-speak-btn {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--r-sm);
    color: var(--gray-400);
    transition: all var(--dur) var(--ease);
    flex-shrink: 0;
    line-height: 1;
    margin-left: auto;
}
.opt-speak-btn:hover {
    background: var(--amber-light);
    color: var(--amber-dark);
    transform: scale(1.15);
}
.option-btn.btn-success .opt-speak-btn,
.option-btn.btn-error   .opt-speak-btn {
    color: inherit;
    opacity: .7;
}

/* ── 38. AMIGOS Y RANKING ───────────────────────────────── */

/* Tabs */
.friends-tabs {
    display: flex;
    background: var(--gray-100);
    border-radius: var(--r-full);
    padding: 4px;
    margin-bottom: 16px;
    gap: 2px;
    overflow-x: auto;
}
.friends-tab {
    flex: 1;
    padding: 8px 10px;
    border: none;
    border-radius: var(--r-full);
    background: transparent;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 700;
    color: var(--gray-400);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--dur) var(--ease);
    position: relative;
}
.friends-tab.active {
    background: var(--white);
    color: var(--indigo);
    box-shadow: var(--shadow-sm);
}
.requests-badge {
    position: absolute;
    top: 2px; right: 4px;
    background: var(--red);
    color: var(--white);
    font-size: .55rem;
    font-weight: 800;
    min-width: 14px; height: 14px;
    border-radius: var(--r-full);
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
}

.friends-panel { animation: fadeIn .3s var(--ease); }

/* Tipos de ranking */
.ranking-type-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.rank-type-btn {
    padding: 6px 12px;
    border: 2px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface-2);
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 700;
    color: var(--gray-500);
    cursor: pointer;
    transition: all var(--dur);
}
.rank-type-btn.active {
    background: var(--indigo);
    border-color: var(--indigo);
    color: var(--white);
}

/* Lista de ranking */
.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.ranking-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: var(--r-md);
    transition: all var(--dur);
}
.ranking-item.is-me {
    background: var(--indigo-light);
    border-color: var(--indigo);
}
.ranking-item:nth-child(1) { border-color: #FFD700; background: #FFFBEA; }
.ranking-item:nth-child(2) { border-color: #C0C0C0; background: #F8F8F8; }
.ranking-item:nth-child(3) { border-color: #CD7F32; background: #FFF5EE; }

.rank-medal {
    font-size: 1.4rem;
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
}
.rank-info { flex: 1; min-width: 0; }
.rank-name {
    font-weight: 800;
    font-size: .92rem;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rank-name.is-me::after {
    content: ' (tú)';
    color: var(--indigo);
    font-size: .78rem;
}
.rank-level {
    font-size: .72rem;
    color: var(--gray-400);
    font-weight: 600;
}
.rank-value {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--indigo);
    flex-shrink: 0;
}
.rank-value-label {
    font-size: .65rem;
    color: var(--gray-400);
    font-weight: 700;
    display: block;
    text-align: right;
    text-transform: uppercase;
}

/* Lista de amigos */
.friends-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.friend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: var(--r-md);
    transition: all var(--dur);
}
.friend-avatar {
    width: 42px; height: 42px;
    border-radius: var(--r-full);
    background: linear-gradient(135deg, var(--indigo), var(--purple));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.friend-info { flex: 1; min-width: 0; }
.friend-name {
    font-weight: 800;
    font-size: .92rem;
    color: var(--gray-900);
}
.friend-stats {
    font-size: .75rem;
    color: var(--gray-400);
    font-weight: 600;
}
.friend-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.btn-accept {
    background: var(--green);
    color: var(--white);
    border: none;
    border-radius: var(--r-sm);
    padding: 7px 12px;
    font-size: .8rem;
    font-weight: 800;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all var(--dur);
}
.btn-accept:hover { background: var(--green-dark); }
.btn-reject {
    background: var(--red-light);
    color: var(--red-dark);
    border: none;
    border-radius: var(--r-sm);
    padding: 7px 10px;
    font-size: .8rem;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all var(--dur);
}
.btn-reject:hover { background: var(--red); color: var(--white); }
.btn-add-friend {
    background: var(--indigo);
    color: var(--white);
    border: none;
    border-radius: var(--r-sm);
    padding: 7px 12px;
    font-size: .8rem;
    font-weight: 800;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all var(--dur);
}
.btn-add-friend:hover { background: var(--indigo-dark); }
.btn-add-friend:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.btn-remove-friend {
    background: var(--gray-100);
    color: var(--gray-400);
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: 7px 10px;
    font-size: .78rem;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all var(--dur);
}
.btn-remove-friend:hover { background: var(--red-light); color: var(--red); border-color: var(--red); }

.friends-subtitle {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--gray-700);
    margin-bottom: 10px;
}
.friends-empty {
    text-align: center;
    padding: 24px 16px;
    color: var(--gray-400);
    font-weight: 600;
}
.friends-empty .fe-icon { font-size: 2rem; display: block; margin-bottom: 8px; }


/* YAKDIEL_ENGLISH20_E1_CSS_START */

.yak-e20-card {
    width: min(100%, 620px);
    box-sizing: border-box;
    margin: 0 auto 20px;
    padding: 24px 18px;
    text-align: center;
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(244,248,255,.98)
        );
    border: 1px solid rgba(74,105,189,.16);
    box-shadow:
        0 12px 34px rgba(27,39,94,.10);
}

.yak-e20-kicker {
    margin-bottom: 10px;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .08em;
    opacity: .62;
}

.yak-e20-word {
    margin: 2px 0 8px;
    font-size: clamp(
        2.25rem,
        9vw,
        3.8rem
    );
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -.035em;
    word-break: break-word;
}

.yak-e20-translation {
    margin-bottom: 10px;
    font-size: 1.18rem;
    font-weight: 750;
    opacity: .72;
}

.yak-e20-listen-label {
    margin-top: 15px;
    font-size: .86rem;
    font-weight: 700;
    opacity: .66;
}

.yak-e20-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 12px;
}

.yak-e20-btn {
    appearance: none;
    min-height: 44px;
    padding: 11px 16px;
    border: 0;
    border-radius: 14px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    color: #fff;
    background: #4a69bd;
    box-shadow:
        0 5px 14px rgba(74,105,189,.20);
}

.yak-e20-btn:hover {
    filter: brightness(1.04);
}

.yak-e20-btn:active {
    transform: translateY(1px);
}

.yak-e20-btn-secondary {
    color: inherit;
    background:
        rgba(74,105,189,.11);
    box-shadow: none;
}

.yak-e20-hint {
    margin-top: 13px;
    font-size: .82rem;
    line-height: 1.4;
    opacity: .57;
}

@media (max-width: 520px) {

    .yak-e20-card {
        padding: 20px 13px;
        border-radius: 20px;
    }

    .yak-e20-actions {
        display: grid;
        grid-template-columns:
            1fr 1fr;
    }

    .yak-e20-btn {
        width: 100%;
    }

    .yak-e20-btn-secondary {
        grid-column: 1 / -1;
    }
}

/* YAKDIEL_ENGLISH20_E1_CSS_END */



/* YAKDIEL_ENGLISH20_E13_LAYOUT_FIX_START */

/*
 * La tarjeta E1 debe ser un componente independiente.
 * No debe heredar color ni dimensiones del question card.
 */
#yakEnglish20VocabularyCard.yak-e20-card {
    display: block;
    position: relative;
    width: 100%;
    max-width: 660px;
    min-width: 0;
    margin: 0 auto 18px;
    padding: 22px 18px;
    box-sizing: border-box;

    color: #25324b !important;
    background: #ffffff !important;

    border: 2px solid #e8edf5;
    border-radius: 24px;

    box-shadow:
        0 8px 24px rgba(42, 52, 88, .08);

    overflow: visible;
    z-index: auto;
}

#yakEnglish20VocabularyCard .yak-e20-kicker {
    color: #6c7385 !important;
    opacity: 1;
}

#yakEnglish20VocabularyCard .yak-e20-word {
    color: #4438d1 !important;
    opacity: 1;
}

#yakEnglish20VocabularyCard .yak-e20-translation {
    color: #566176 !important;
    opacity: 1;
}

#yakEnglish20VocabularyCard .yak-e20-listen-label {
    color: #687386 !important;
    opacity: 1;
}

#yakEnglish20VocabularyCard .yak-e20-hint {
    color: #7b8495 !important;
    opacity: 1;
}

#yakEnglish20VocabularyCard .yak-e20-actions {
    width: 100%;
}

#yakEnglish20VocabularyCard .yak-e20-btn {
    color: #ffffff !important;
}

#yakEnglish20VocabularyCard .yak-e20-btn-secondary {
    color: #4438d1 !important;
    background: #eef0ff !important;
}

@media (max-width: 520px) {

    #yakEnglish20VocabularyCard.yak-e20-card {
        width: 100%;
        max-width: none;
        margin: 0 0 16px;
        padding: 19px 15px;
        border-radius: 22px;
    }

    #yakEnglish20VocabularyCard .yak-e20-word {
        font-size: 2.6rem;
    }

    #yakEnglish20VocabularyCard .yak-e20-translation {
        font-size: 1.08rem;
    }
}

/* YAKDIEL_ENGLISH20_E13_LAYOUT_FIX_END */



/* YAKDIEL_ENGLISH20_E2_CSS_START */

/*
 * Durante APRENDER escondemos únicamente:
 * - tarjeta morada de pregunta
 * - opciones A/B/C/D
 *
 * Se conservan:
 * progreso, tema, cerrar, audio general,
 * navegación y tarjeta E1.
 */
.yak-e20-practice-hidden {
    display: none !important;
}

#yakEnglish20VocabularyCard
.yak-e20-practice-btn {

    appearance: none;

    display: block;

    width: 100%;
    max-width: 430px;

    min-height: 54px;

    margin:
        20px auto 0;

    padding:
        13px 18px;

    border: 0;
    border-radius: 16px;

    font: inherit;
    font-size: 1rem;
    font-weight: 850;

    cursor: pointer;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #5546e8,
            #7038ee
        );

    box-shadow:
        0 7px 18px
        rgba(84,70,232,.22);

    transition:
        transform .12s ease,
        box-shadow .12s ease;
}

#yakEnglish20VocabularyCard
.yak-e20-practice-btn:active {

    transform:
        translateY(1px);

    box-shadow:
        0 4px 10px
        rgba(84,70,232,.18);
}

@media (max-width: 520px) {

    #yakEnglish20VocabularyCard
    .yak-e20-practice-btn {

        min-height: 56px;
        font-size: .98rem;
    }
}

/* YAKDIEL_ENGLISH20_E2_CSS_END */



/* YAKDIEL_ENGLISH20_E34_MATCH_CSS_START */

body.yak-match-open {
    overflow: hidden;
}

.yak-match-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;

    background:
        rgba(12, 18, 38, .74);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.yak-match-panel {
    width: min(760px, 100%);
    max-height: calc(100vh - 36px);

    overflow-y: auto;

    padding: 24px;

    color: #29334d;
    background: #ffffff;

    border-radius: 26px;

    box-shadow:
        0 24px 70px
        rgba(0,0,0,.28);
}

.yak-match-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 18px;
}

.yak-match-stage {
    margin-bottom: 5px;

    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .08em;

    color: #757d91;
}

.yak-match-header h2 {
    margin: 0 0 6px;

    color: #292e48;

    font-size:
        clamp(1.45rem,4vw,2rem);
}

.yak-match-header p {
    margin: 0;

    line-height: 1.45;

    color: #6c7385;
}

.yak-match-counter {
    flex: 0 0 auto;

    min-width: 68px;

    padding: 9px 12px;

    text-align: center;

    border-radius: 999px;

    color: #5145cd;
    background:
        rgba(99,102,241,.10);

    font-weight: 900;
}

.yak-match-progress {
    height: 8px;

    margin: 20px 0 24px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(127,127,127,.15);
}

.yak-match-progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #6366f1,
            #22c55e
        );

    transition:
        width .28s ease;
}

.yak-match-columns {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        42px
        minmax(0,1fr);

    gap: 12px;

    align-items: start;
}

.yak-match-column-title {
    margin-bottom: 10px;

    text-align: center;

    color: #737b90;

    font-size: .77rem;
    font-weight: 900;
}

.yak-match-list {
    display: grid;
    gap: 11px;
}

.yak-match-center {
    align-self: center;

    text-align: center;

    color: #8a91a4;

    font-size: 1.5rem;
}

.yak-match-card {
    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 12px 14px;

    border: 2px solid #e6e8ef;
    border-radius: 16px;

    color: #313852;
    background: #fafbfe;

    font: inherit;
    font-size: 1rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease,
        opacity .15s ease;
}

.yak-match-card:hover:not(:disabled) {
    transform:
        translateY(-1px);

    border-color:
        rgba(99,102,241,.55);
}

.yak-match-card.is-selected {
    border-color: #6366f1;

    background:
        rgba(99,102,241,.12);

    transform:
        scale(1.015);
}

.yak-match-card.is-matched {
    border-color:
        rgba(34,197,94,.75);

    background:
        rgba(34,197,94,.13);

    opacity: .70;
}

.yak-match-card.is-wrong {
    border-color:
        rgba(239,68,68,.85);

    background:
        rgba(239,68,68,.12);

    animation:
        yakMatchShake
        .34s ease;
}

.yak-match-speaker {
    font-size: .93rem;
    opacity: .72;
}

.yak-match-hint {
    margin-top: 20px;

    padding: 12px 14px;

    text-align: center;

    border-radius: 14px;

    color: #656d82;
    background:
        rgba(99,102,241,.07);

    font-size: .84rem;
}

.yak-match-complete {
    padding: 22px 8px 8px;

    text-align: center;
}

.yak-match-complete-icon {
    margin-bottom: 10px;

    font-size: 3.6rem;
}

.yak-match-complete h3 {
    margin: 0 0 8px;

    color: #292e48;

    font-size: 1.75rem;
}

.yak-match-complete p {
    max-width: 420px;

    margin: 0 auto 18px;

    color: #6c7385;

    line-height: 1.5;
}

.yak-match-perfect,
.yak-match-mistakes {
    display: inline-block;

    margin-bottom: 20px;

    padding: 8px 14px;

    border-radius: 999px;

    color: #26804a;
    background:
        rgba(34,197,94,.10);

    font-weight: 800;
}

.yak-match-continue {
    width: 100%;
    min-height: 52px;

    padding: 12px 18px;

    border: 0;
    border-radius: 15px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #6366f1,
            #8b5cf6
        );

    font: inherit;
    font-weight: 900;

    cursor: pointer;
}

@keyframes yakMatchShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

@media (max-width: 600px) {

    .yak-match-overlay {
        padding: 9px;
    }

    .yak-match-panel {
        max-height:
            calc(100vh - 18px);

        padding: 18px 13px;

        border-radius: 20px;
    }

    .yak-match-header {
        gap: 9px;
    }

    .yak-match-columns {
        grid-template-columns:
            minmax(0,1fr)
            20px
            minmax(0,1fr);

        gap: 5px;
    }

    .yak-match-center {
        font-size: .95rem;
    }

    .yak-match-card {
        min-height: 58px;

        padding: 9px 6px;

        border-radius: 13px;

        font-size: .88rem;

        word-break: break-word;
    }

    .yak-match-speaker {
        font-size: .78rem;
    }
}

/* YAKDIEL_ENGLISH20_E34_MATCH_CSS_END */



/* YAKDIEL_ENGLISH20_E35B_LISTENING_CSS_START */

body.yak-listening-open {
    overflow: hidden;
}

.yak-listening-overlay {
    position: fixed;
    inset: 0;
    z-index: 10060;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;

    background:
        rgba(12,18,38,.74);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.yak-listening-panel {
    width: min(680px,100%);
    max-height: calc(100vh - 36px);

    overflow-y: auto;

    padding: 24px;

    color: #29334d;
    background: #fff;

    border-radius: 26px;

    box-shadow:
        0 24px 70px
        rgba(0,0,0,.28);
}

.yak-listening-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;
}

.yak-listening-stage {
    margin-bottom: 5px;

    color: #757d91;

    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.yak-listening-header h2 {
    margin: 0 0 6px;

    color: #292e48;

    font-size:
        clamp(1.45rem,4vw,2rem);
}

.yak-listening-header p {
    margin: 0;

    color: #6c7385;

    line-height: 1.45;
}

.yak-listening-counter {
    flex: 0 0 auto;

    min-width: 68px;

    padding: 9px 12px;

    border-radius: 999px;

    color: #5145cd;
    background:
        rgba(99,102,241,.10);

    text-align: center;

    font-weight: 900;
}

.yak-listening-progress {
    height: 8px;

    margin: 20px 0 24px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(127,127,127,.15);
}

.yak-listening-progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #6366f1,
            #22c55e
        );

    transition:
        width .3s ease;
}

.yak-listening-speaker-wrap {
    padding: 8px 0 20px;

    text-align: center;
}

.yak-listening-big-speaker {
    margin-bottom: 8px;

    font-size: 4.8rem;
}

.yak-listening-prompt {
    margin-bottom: 16px;

    color: #4f566b;

    font-size: 1.15rem;
    font-weight: 850;
}

.yak-listening-audio-actions {
    display: flex;
    justify-content: center;

    gap: 10px;
}

.yak-listening-audio-btn {
    min-height: 48px;

    padding: 10px 17px;

    border: 0;
    border-radius: 14px;

    color: #fff;

    background:
        #5967d8;

    font: inherit;
    font-weight: 850;

    cursor: pointer;
}

.yak-listening-audio-btn.secondary {
    color: #4e4bc3;

    background:
        #eef0ff;
}

.yak-listening-options {
    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 11px;
}

.yak-listening-option {
    min-height: 64px;

    padding: 12px;

    border: 2px solid #e4e7ef;
    border-radius: 16px;

    color: #303750;
    background: #fafbfe;

    font: inherit;
    font-size: 1rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease,
        transform .15s ease;
}

.yak-listening-option:active:not(:disabled) {
    transform: scale(.985);
}

.yak-listening-option.is-correct {
    border-color:
        rgba(34,197,94,.8);

    background:
        rgba(34,197,94,.13);
}

.yak-listening-option.is-wrong {
    border-color:
        rgba(239,68,68,.8);

    background:
        rgba(239,68,68,.12);
}

.yak-listening-feedback {
    min-height: 28px;

    margin-top: 14px;

    text-align: center;

    font-weight: 800;
}

.yak-listening-feedback.is-correct {
    color: #26804a;
}

.yak-listening-feedback.is-wrong {
    color: #c13e3e;
}

.yak-listening-complete {
    padding: 20px 5px 5px;

    text-align: center;
}

.yak-listening-complete-icon {
    margin-bottom: 8px;

    font-size: 4rem;
}

.yak-listening-complete h3 {
    margin: 0 0 10px;

    color: #292e48;

    font-size: 1.7rem;
}

.yak-listening-complete p {
    max-width: 430px;

    margin: 0 auto 18px;

    color: #697185;

    line-height: 1.5;
}

.yak-listening-perfect,
.yak-listening-score {
    display: inline-block;

    margin-bottom: 20px;

    padding: 8px 14px;

    border-radius: 999px;

    color: #26804a;
    background:
        rgba(34,197,94,.10);

    font-weight: 800;
}

.yak-listening-continue {
    width: 100%;
    min-height: 54px;

    padding: 12px 18px;

    border: 0;
    border-radius: 15px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #6366f1,
            #8b5cf6
        );

    font: inherit;
    font-weight: 900;

    cursor: pointer;
}

@media (max-width: 600px) {

    .yak-listening-overlay {
        padding: 9px;
    }

    .yak-listening-panel {
        max-height:
            calc(100vh - 18px);

        padding: 18px 14px;

        border-radius: 20px;
    }

    .yak-listening-big-speaker {
        font-size: 4rem;
    }

    .yak-listening-options {
        grid-template-columns: 1fr;
    }

    .yak-listening-option {
        min-height: 57px;
    }
}

/* YAKDIEL_ENGLISH20_E35B_LISTENING_CSS_END */



/* YAKDIEL_ENGLISH20_E43_PHRASE_CSS_START */

body.yak-phrase-trainer-open {
    overflow: hidden;
}

.yak-phrase-overlay {
    position: fixed;
    inset: 0;
    z-index: 10070;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;

    background:
        rgba(12,18,38,.74);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.yak-phrase-panel {
    width: min(680px,100%);
    max-height: calc(100vh - 32px);

    overflow-y: auto;

    padding: 24px;

    color: #29334d;
    background: #fff;

    border-radius: 26px;

    box-shadow:
        0 24px 70px
        rgba(0,0,0,.28);
}

.yak-phrase-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;
}

.yak-phrase-stage {
    margin-bottom: 5px;

    color: #777f93;

    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.yak-phrase-header h2 {
    margin: 0 0 5px;

    color: #292e48;

    font-size:
        clamp(1.4rem,4vw,1.9rem);
}

.yak-phrase-header p {
    margin: 0;

    color: #72798b;
}

.yak-phrase-counter {
    flex: 0 0 auto;

    min-width: 66px;

    padding: 9px 12px;

    border-radius: 999px;

    color: #5145cd;
    background:
        rgba(99,102,241,.10);

    text-align: center;

    font-weight: 900;
}

.yak-phrase-progress {
    height: 8px;

    margin: 20px 0;

    overflow: hidden;

    border-radius: 999px;

    background:
        #eef0f5;
}

.yak-phrase-progress-fill {
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #6366f1,
            #22c55e
        );

    transition:
        width .3s ease;
}

.yak-phrase-learn-card {
    margin-bottom: 20px;

    padding: 28px 18px;

    border: 2px solid #e7e9f1;
    border-radius: 20px;

    text-align: center;

    background: #fafbff;
}

.yak-phrase-english {
    color: #333a58;

    font-size:
        clamp(1.45rem,5vw,2.1rem);

    font-weight: 900;

    line-height: 1.35;
}

.yak-phrase-divider {
    margin: 14px 0;

    color: #a2a7b5;

    font-size: 1.4rem;
}

.yak-phrase-spanish {
    color: #626a7d;

    font-size: 1.08rem;
    font-weight: 750;

    line-height: 1.4;
}

.yak-phrase-audio-actions {
    display: flex;
    justify-content: center;

    gap: 10px;

    margin-top: 20px;
}

.yak-phrase-audio-btn {
    min-height: 47px;

    padding: 10px 16px;

    border: 0;
    border-radius: 14px;

    color: #fff;
    background: #5967d8;

    font: inherit;
    font-weight: 850;

    cursor: pointer;
}

.yak-phrase-audio-btn.secondary {
    color: #514bc6;
    background: #eef0ff;
}

.yak-phrase-primary-btn {
    width: 100%;
    min-height: 54px;

    padding: 12px 18px;

    border: 0;
    border-radius: 15px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #6366f1,
            #8b5cf6
        );

    font: inherit;
    font-weight: 900;

    cursor: pointer;
}

.yak-phrase-listen-center {
    margin-bottom: 20px;

    padding: 10px 0 18px;

    text-align: center;
}

.yak-phrase-headphones {
    margin-bottom: 8px;

    font-size: 4.5rem;
}

.yak-phrase-listen-label {
    color: #555d72;

    font-size: 1.12rem;
    font-weight: 850;
}

.yak-phrase-options {
    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 10px;
}

.yak-phrase-option {
    min-height: 68px;

    padding: 12px;

    border: 2px solid #e4e7ef;
    border-radius: 15px;

    color: #303750;
    background: #fafbfe;

    font: inherit;
    font-size: .94rem;
    font-weight: 800;

    cursor: pointer;

    line-height: 1.35;
}

.yak-phrase-option.is-correct {
    border-color:
        rgba(34,197,94,.8);

    background:
        rgba(34,197,94,.13);
}

.yak-phrase-option.is-wrong {
    border-color:
        rgba(239,68,68,.8);

    background:
        rgba(239,68,68,.12);
}

.yak-phrase-feedback {
    min-height: 30px;

    margin-top: 14px;

    text-align: center;

    font-weight: 850;
}

.yak-phrase-feedback.is-correct {
    color: #248249;
}

.yak-phrase-feedback.is-wrong {
    color: #be3e3e;
}

.yak-phrase-reveal {
    margin-top: 7px;

    color: #4b536a;

    font-size: 1rem;
}

.yak-phrase-finish {
    padding: 18px 5px 5px;

    text-align: center;
}

.yak-phrase-finish-icon {
    font-size: 4rem;
}

.yak-phrase-finish h2 {
    margin: 8px 0;

    color: #292e48;
}

.yak-phrase-finish p {
    max-width: 450px;

    margin:
        0 auto 20px;

    color: #687084;

    line-height: 1.5;
}

@media (max-width: 600px) {

    .yak-phrase-overlay {
        padding: 9px;
    }

    .yak-phrase-panel {
        max-height:
            calc(100vh - 18px);

        padding: 18px 14px;

        border-radius: 20px;
    }

    .yak-phrase-learn-card {
        padding: 22px 12px;
    }

    .yak-phrase-options {
        grid-template-columns: 1fr;
    }

    .yak-phrase-option {
        min-height: 58px;
    }
}

/* YAKDIEL_ENGLISH20_E43_PHRASE_CSS_END */



/*
 * ============================================================
 * YAKDIEL_E50A_PENGU_CSS
 * ============================================================
 */

.pengu-companion {
    position: fixed;
    right: 16px;

    bottom:
        calc(
            84px +
            env(
                safe-area-inset-bottom,
                0px
            )
        );

    /*
     * YAKDIEL_E50B2_PENGU_ACTIVITY_LAYER
     *
     * Los entrenadores de Inglés usan overlays
     * alrededor de z-index 10070.
     *
     * Pengu debe permanecer encima de:
     * - Aprende
     * - Escucha
     * - Arma frase
     * - Quiz/modal pedagógico
     *
     * Sigue ocultándose fuera de Inglés mediante
     * el lifecycle E5.0B.1.
     */
    z-index: 12050;

    display: flex;
    align-items: flex-end;
    gap: 10px;

    max-width:
        min(
            92vw,
            360px
        );

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.pengu-companion.is-hidden {
    opacity: 0;
    pointer-events: none;

    transform:
        translateY(14px)
        scale(.94);
}


.pengu-character {
    position: relative;

    flex: 0 0 auto;

    width: 76px;
    height: 76px;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eef2ff
        );

    box-shadow:
        0 10px 30px
        rgba(30, 41, 59, .20);

    cursor: pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.pengu-character:hover {
    transform:
        translateY(-3px)
        scale(1.04);

    box-shadow:
        0 14px 34px
        rgba(30, 41, 59, .24);
}

.pengu-character:active {
    transform:
        scale(.97);
}


.pengu-character-emoji {
    display: block;

    font-size: 3.35rem;
    line-height: 1;

    user-select: none;

    filter:
        drop-shadow(
            0 3px 2px
            rgba(0, 0, 0, .10)
        );
}


.pengu-status {
    position: absolute;

    right: 3px;
    bottom: 7px;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    border:
        3px solid #fff;

    background:
        #818cf8;
}


.pengu-bubble {
    position: relative;

    min-width: 150px;
    max-width: 230px;

    padding:
        11px 14px;

    border:
        1px solid
        rgba(99, 102, 241, .20);

    border-radius:
        18px 18px 5px 18px;

    background:
        rgba(255, 255, 255, .97);

    box-shadow:
        0 10px 28px
        rgba(30, 41, 59, .14);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(8px)
        scale(.96);

    transition:
        opacity .20s ease,
        visibility .20s ease,
        transform .20s ease;
}


.pengu-bubble.is-visible {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


.pengu-name {
    display: block;

    margin-bottom: 2px;

    color: var(--indigo);

    font-size: .78rem;
    font-weight: 900;
}


.pengu-message {
    display: block;

    color: var(--gray-700);

    font-size: .86rem;
    line-height: 1.35;
    font-weight: 650;
}


/*
 * Estados.
 */

.pengu-companion[data-mood="thinking"]
.pengu-character {
    animation:
        penguThink 1.5s
        ease-in-out infinite;
}


.pengu-companion[data-mood="listening"]
.pengu-status {
    background: #38bdf8;

    animation:
        penguStatusPulse 1s
        ease-in-out infinite;
}


.pengu-companion[data-mood="happy"]
.pengu-status,
.pengu-companion[data-mood="celebrate"]
.pengu-status {
    background: #22c55e;
}


.pengu-companion[data-mood="encourage"]
.pengu-status {
    background: #f59e0b;
}


.pengu-companion.pengu-bounce
.pengu-character {
    animation:
        penguBounce .55s
        ease;
}


.pengu-companion.pengu-wiggle
.pengu-character {
    animation:
        penguWiggle .55s
        ease;
}


@keyframes penguBounce {

    0% {
        transform:
            translateY(0)
            scale(1);
    }

    35% {
        transform:
            translateY(-12px)
            scale(1.05);
    }

    65% {
        transform:
            translateY(2px)
            scale(.98);
    }

    100% {
        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes penguWiggle {

    0%, 100% {
        transform:
            rotate(0deg);
    }

    25% {
        transform:
            rotate(-6deg);
    }

    50% {
        transform:
            rotate(5deg);
    }

    75% {
        transform:
            rotate(-3deg);
    }
}


@keyframes penguThink {

    0%, 100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-4px);
    }
}


@keyframes penguStatusPulse {

    0%, 100% {
        box-shadow:
            0 0 0
            0 rgba(
                56,
                189,
                248,
                .35
            );
    }

    50% {
        box-shadow:
            0 0 0
            7px rgba(
                56,
                189,
                248,
                0
            );
    }
}


@media (
    max-width: 640px
) {

    .pengu-companion {
        right: 10px;

        bottom:
            calc(
                78px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        gap: 7px;
    }

    .pengu-character {
        width: 64px;
        height: 64px;
    }

    .pengu-character-emoji {
        font-size: 2.85rem;
    }

    .pengu-bubble {
        max-width: 190px;

        padding:
            9px 11px;
    }

    .pengu-message {
        font-size: .80rem;
    }
}


/*
 * Evitar animaciones para usuarios
 * que prefieren movimiento reducido.
 */
@media (
    prefers-reduced-motion: reduce
) {

    .pengu-companion,
    .pengu-character,
    .pengu-bubble,
    .pengu-status {
        animation: none !important;
        transition: none !important;
    }
}

/* YAKDIEL_E50A_PENGU_CSS_END */



/*
 * ============================================================
 * YAKDIEL_ADMIN_USERS_2_CSS
 * ============================================================
 */

.yak-admin-users-section {
    padding:
        24px
        20px
        120px;
}

.yak-admin-users-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.yak-admin-users-header h2 {
    margin: 4px 0 5px;
    font-size: 1.8rem;
}

.yak-admin-users-header p {
    margin: 0;
    color: var(--gray-500);
    line-height: 1.4;
}

.yak-admin-eyebrow {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--primary);
}

.yak-admin-refresh-btn {
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 1.4rem;
    cursor: pointer;
    background: var(--gray-100);
}

.yak-admin-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.yak-admin-stat {
    text-align: center;
    padding: 14px 8px;
    border-radius: 18px;
    background: var(--gray-100);
}

.yak-admin-stat strong {
    display: block;
    font-size: 1.55rem;
    color: var(--primary);
}

.yak-admin-stat span {
    display: block;
    margin-top: 3px;
    font-size: .78rem;
    color: var(--gray-500);
}

.yak-admin-users-status {
    min-height: 22px;
    margin-bottom: 10px;
    font-size: .85rem;
    color: var(--gray-500);
}

.yak-admin-users-status[data-type="error"] {
    color: #c62828;
}

.yak-admin-users-status[data-type="success"] {
    color: #148c4b;
}

.yak-admin-filter-row {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    margin-bottom: 15px;
    padding-bottom: 2px;
}

.yak-admin-filter {
    flex: 0 0 auto;
    border: 1px solid var(--gray-200);
    background: white;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 700;
    cursor: pointer;
}

.yak-admin-filter.active {
    border-color: transparent;
    background: var(--primary);
    color: white;
}

.yak-admin-users-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.yak-admin-user-card {
    display: grid;
    grid-template-columns:
        46px
        minmax(0, 1fr)
        auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    background: white;
}

.yak-admin-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: var(--gray-100);
    font-size: 1.4rem;
}

.yak-admin-user-main {
    min-width: 0;
}

.yak-admin-user-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.yak-admin-user-top strong {
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.yak-admin-user-email {
    color: var(--gray-500);
    font-size: .85rem;
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.yak-admin-user-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 9px;
    margin-top: 8px;
    color: var(--gray-400);
    font-size: .73rem;
}

.yak-admin-status {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
}

.yak-admin-status.status-active {
    background: #e4f8ec;
    color: #12834a;
}

.yak-admin-status.status-pending_email {
    background: #fff3d6;
    color: #a86800;
}

.yak-admin-status.status-inactive {
    background: #f3e7ea;
    color: #a3293d;
}

.yak-admin-action {
    border: 0;
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.yak-admin-action.approve,
.yak-admin-action.reactivate {
    background: #ddf7e7;
    color: #107a42;
}

.yak-admin-action.suspend {
    background: #ffe8ea;
    color: #ac283d;
}

.yak-admin-protected {
    display: inline-flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--gray-100);
    color: var(--gray-500);
    font-size: .75rem;
    font-weight: 700;
}

.yak-admin-empty,
.yak-admin-loading {
    text-align: center;
    padding: 34px 16px;
    border-radius: 20px;
    background: var(--gray-100);
    color: var(--gray-500);
}

.yak-admin-empty div {
    font-size: 2rem;
    margin-bottom: 8px;
}

@media (max-width: 600px) {

    .yak-admin-users-section {
        padding:
            20px
            16px
            110px;
    }

    .yak-admin-user-card {
        grid-template-columns:
            42px
            minmax(0, 1fr);
    }

    .yak-admin-user-avatar {
        width: 42px;
        height: 42px;
    }

    .yak-admin-user-action {
        grid-column:
            1 / -1;
    }

    .yak-admin-action {
        width: 100%;
    }

    .yak-admin-protected {
        width: 100%;
        justify-content: center;
    }
}


/* YAKDIEL_ADMIN_USERS_2_CSS_END */


/*
 * ============================================================
 * YAKDIEL_SUBSCRIPTION_4B_CSS
 * ============================================================
 */

.yak-subscription-status {
    display: flex;
    align-items: center;
    gap: 10px;

    margin:
        10px
        16px
        0;

    padding:
        10px
        14px;

    border-radius:
        var(--r-md);

    border:
        2px solid
        var(--border);

    font-family:
        var(--font-body);

    animation:
        fadeUp
        .25s
        var(--ease);
}

.yak-subscription-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 34px;
    height: 34px;

    border-radius:
        var(--r-full);

    font-size:
        1.05rem;

    background:
        rgba(255,255,255,.65);
}

.yak-subscription-status-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;

    min-width: 0;
}

.yak-subscription-status-copy strong {
    font-size:
        .82rem;

    line-height:
        1.2;
}

.yak-subscription-status-copy span {
    font-size:
        .75rem;

    line-height:
        1.3;
}


/*
 * TRIAL
 */
.yak-subscription-status[data-state="trial"] {
    background:
        linear-gradient(
            135deg,
            #fff8dc,
            #fff3c4
        );

    border-color:
        #f5cf67;

    color:
        #7a5500;
}


/*
 * ACTIVE
 */
.yak-subscription-status[data-state="active"] {
    background:
        linear-gradient(
            135deg,
            #e9fbef,
            #dff8e8
        );

    border-color:
        #9bdfb3;

    color:
        #14683a;
}


/*
 * EXPIRED
 *
 * 4B solamente informa.
 * Todavía NO bloquea.
 */
.yak-subscription-status[data-state="expired"] {
    background:
        linear-gradient(
            135deg,
            #fff0f1,
            #ffe5e8
        );

    border-color:
        #f2a7b0;

    color:
        #9b2940;
}


/*
 * PENDING
 */
.yak-subscription-status[data-state="pending_activation"] {
    background:
        linear-gradient(
            135deg,
            #eef2ff,
            #e6eaff
        );

    border-color:
        #aeb9f4;

    color:
        #3e4c9e;
}


/*
 * Registro exitoso
 */
.yak-registration-success {
    text-align:
        center;
}

.yak-registration-trial-card {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    margin:
        16px 0;

    padding:
        14px;

    border-radius:
        var(--r-md);

    background:
        linear-gradient(
            135deg,
            var(--indigo-light),
            #f3e8ff
        );

    border:
        2px solid
        rgba(
            79,
            70,
            229,
            .16
        );
}

.yak-registration-trial-card strong {
    color:
        var(--indigo-dark);

    font-size:
        .95rem;
}

.yak-registration-trial-card span {
    color:
        var(--gray-500);

    font-size:
        .82rem;

    line-height:
        1.4;
}


@media (max-width: 520px) {

    .yak-subscription-status {
        margin:
            8px
            12px
            0;

        padding:
            9px
            11px;
    }

    .yak-subscription-status-copy strong {
        font-size:
            .78rem;
    }

    .yak-subscription-status-copy span {
        font-size:
            .71rem;
    }
}


/* YAKDIEL_SUBSCRIPTION_4B_CSS_END */


/*
 * ============================================================
 * YAKDIEL_SUBSCRIPTION_4C1_CSS
 * ============================================================
 */

.yak-subscription-expired-panel {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    margin:
        14px
        16px
        4px;

    padding:
        18px;

    border-radius:
        var(--r-lg);

    border:
        2px solid
        #efb2bb;

    background:
        linear-gradient(
            135deg,
            #fff5f6,
            #ffe8eb
        );

    box-shadow:
        0 8px 24px
        rgba(155,41,64,.08);
}

.yak-expired-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 50px;
    height: 50px;

    border-radius:
        var(--r-full);

    background:
        rgba(255,255,255,.75);

    font-size:
        1.45rem;
}

.yak-expired-copy {
    min-width: 0;
}

.yak-expired-eyebrow {
    display: block;

    margin-bottom:
        3px;

    font-size:
        .68rem;

    font-weight:
        800;

    letter-spacing:
        .08em;

    color:
        #a32840;
}

.yak-expired-copy h2 {
    margin:
        0
        0
        7px;

    font-size:
        1.15rem;

    color:
        #83243a;
}

.yak-expired-copy p {
    margin:
        4px
        0;

    font-size:
        .82rem;

    line-height:
        1.45;

    color:
        #6f4650;
}

.yak-expired-actions {
    margin-top:
        12px;
}

.yak-expired-actions .btn {
    width:
        auto;

    min-width:
        150px;
}


@media (max-width: 520px) {

    .yak-subscription-expired-panel {
        margin:
            10px
            12px
            2px;

        padding:
            14px;

        gap:
            12px;
    }

    .yak-expired-icon {
        width:
            42px;

        height:
            42px;

        font-size:
            1.2rem;
    }

    .yak-expired-copy h2 {
        font-size:
            1rem;
    }
}


/* YAKDIEL_SUBSCRIPTION_4C1_CSS_END */

/* ==========================================================
   YAKDIEL_AUTH_GOOGLE_5B
   Google authentication UI
   ========================================================== */

.yak-google-auth {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.yak-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    color: var(--gray-400);
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
}

.yak-auth-divider::before,
.yak-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(148, 163, 184, .28);
}

.yak-auth-divider span {
    white-space: nowrap;
}

.yak-google-button {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yak-google-button > div,
.yak-google-button iframe {
    max-width: 100% !important;
}


/* ==========================================================
   YAKDIEL_AUTH_GOOGLE_5B2A_FINAL
   Shared Google auth hierarchy
   ========================================================== */

.yak-google-shared-auth {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0 0 2px;
}

.yak-google-shared-auth .yak-auth-divider {
    margin: 0;
}

#googleAuthButton {
    width: 100%;
    min-height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#googleAuthButton > div {
    width: 100% !important;
    max-width: 100% !important;
}

#googleAuthButton iframe {
    max-width: 100% !important;
}

.yak-auth-method-divider {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1px 0 4px;
    color: var(--gray-400);
    font-size: .72rem;
    font-weight: 700;
}

.yak-auth-method-divider::before,
.yak-auth-method-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background:
        rgba(148, 163, 184, .24);
}

.yak-auth-method-divider span {
    white-space: nowrap;
}

@media (max-width: 480px) {
    .yak-google-shared-auth {
        margin-top: -2px;
    }

    .yak-auth-divider {
        font-size: .74rem;
    }

    .yak-auth-method-divider {
        font-size: .68rem;
    }
}


/*
 * ============================================================
 * YAKDIEL_PINGU_BUDDY_1B_CSS
 * ============================================================
 */

.pingu-buddy-home-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #eef2ff 0%,
            #f5f3ff 48%,
            #ecfeff 100%
        );
    border: 1px solid rgba(99, 102, 241, .18);
}

.pingu-buddy-home-card::after {
    content: "NUEVO";
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #4f46e5;
    color: #fff;
    font-size: .60rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.pingu-buddy-section {
    padding-bottom: 30px;
}

.pingu-buddy-hero {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 22px;

    border:
        1px solid
        rgba(99, 102, 241, .16);

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(238, 242, 255, .96),
            rgba(236, 254, 255, .92)
        );

    box-shadow:
        0 12px 32px
        rgba(30, 41, 59, .08);
}

.pingu-buddy-avatar {
    flex: 0 0 auto;

    width: 88px;
    height: 88px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #fff;

    font-size: 3.8rem;

    box-shadow:
        0 10px 24px
        rgba(30, 41, 59, .12);
}

.pingu-buddy-intro {
    min-width: 0;
}

.pingu-buddy-eyebrow {
    display: block;

    margin-bottom: 5px;

    color: #6366f1;

    font-size: .68rem;
    font-weight: 900;

    letter-spacing: .08em;
}

.pingu-buddy-intro h2 {
    margin: 0 0 6px;

    color: var(--gray-900);

    font-size: 1.55rem;
}

.pingu-buddy-intro p {
    margin: 0;

    color: var(--gray-600);

    font-size: .91rem;
    line-height: 1.5;
}

.pingu-buddy-question {
    margin: 24px 2px 12px;

    color: var(--gray-800);

    font-size: 1rem;
    font-weight: 850;
}

.pingu-buddy-actions {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.pingu-buddy-action {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 16px;

    border:
        1px solid
        rgba(99, 102, 241, .13);

    border-radius: 18px;

    background: #fff;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 7px 20px
        rgba(30, 41, 59, .06);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.pingu-buddy-action:hover {
    transform: translateY(-2px);

    border-color:
        rgba(99, 102, 241, .30);

    box-shadow:
        0 11px 25px
        rgba(30, 41, 59, .10);
}

.pingu-buddy-action > span {
    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: #f5f3ff;

    font-size: 1.55rem;
}

.pingu-buddy-action strong {
    display: block;

    margin-bottom: 3px;

    color: var(--gray-800);

    font-size: .91rem;
}

.pingu-buddy-action small {
    display: block;

    color: var(--gray-500);

    font-size: .75rem;
    line-height: 1.35;
}

.pingu-buddy-preview {
    margin-top: 16px;

    padding: 15px 17px;

    border-radius: 16px;

    background: #eef2ff;

    color: var(--gray-700);

    font-size: .88rem;
    line-height: 1.45;
}

.pingu-buddy-section .back-btn {
    margin-top: 22px;
}

@media (max-width: 640px) {

    .pingu-buddy-hero {
        align-items: flex-start;

        padding: 18px 15px;

        gap: 13px;
    }

    .pingu-buddy-avatar {
        width: 68px;
        height: 68px;

        font-size: 3rem;
    }

    .pingu-buddy-intro h2 {
        font-size: 1.30rem;
    }

    .pingu-buddy-actions {
        grid-template-columns: 1fr;
    }
}

/*
 * YAKDIEL_PINGU_BUDDY_1B_CSS_END
 */



/*
 * ============================================================
 * YAKDIEL_PINGU_BUDDY_5_CSS
 * LIVING COMPANION MOTION LAYER
 * ============================================================
 */

.pengu-companion.pingu-living:not(.pengu-dragging)
.pengu-character {
    animation:
        penguBuddyIdleFloat
        3.8s
        ease-in-out
        infinite;
    transform-origin:
        50% 85%;
}

.pengu-companion.pingu-living[data-mood="thinking"]:not(.pengu-dragging)
.pengu-character {
    animation:
        penguBuddyThinking
        1.15s
        ease-in-out
        infinite;
}

.pengu-companion.pingu-living.pingu-speaking:not(.pengu-dragging)
.pengu-character {
    animation:
        penguBuddySpeaking
        .62s
        ease-in-out
        infinite;
}

.pengu-companion.pingu-living[data-mood="happy"]:not(.pengu-dragging)
.pengu-character,
.pengu-companion.pingu-living[data-mood="celebrate"]:not(.pengu-dragging)
.pengu-character {
    animation:
        penguBuddyHappy
        .65s
        ease-in-out
        2;
}

.pengu-companion.pingu-living.pingu-tap-react:not(.pengu-dragging)
.pengu-character {
    animation:
        penguBuddyTap
        .42s
        ease-out
        1;
}

.pengu-companion.pengu-dragging
.pengu-character {
    animation:
        none
        !important;
    transition:
        none
        !important;
}

@keyframes penguBuddyIdleFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {
        transform:
            translateY(-4px)
            rotate(1deg);
    }
}

@keyframes penguBuddyThinking {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg)
            scale(1);
    }

    50% {
        transform:
            translateY(-3px)
            rotate(2deg)
            scale(1.025);
    }
}

@keyframes penguBuddySpeaking {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-2px)
            scale(1.035);
    }
}

@keyframes penguBuddyHappy {

    0% {
        transform:
            translateY(0)
            scale(1);
    }

    35% {
        transform:
            translateY(-9px)
            scale(1.06);
    }

    70% {
        transform:
            translateY(0)
            scale(.98);
    }

    100% {
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes penguBuddyTap {

    0% {
        transform:
            scale(1);
    }

    45% {
        transform:
            scale(.90)
            rotate(-3deg);
    }

    75% {
        transform:
            scale(1.08)
            rotate(2deg);
    }

    100% {
        transform:
            scale(1);
    }
}

/*
 * Respect user accessibility preference.
 */
@media (prefers-reduced-motion: reduce) {

    .pengu-companion.pingu-living
    .pengu-character {
        animation:
            none
            !important;
    }
}

/*
 * YAKDIEL_PINGU_BUDDY_5_CSS_END
 */