/* ---------------------------------
   RESET Y ESTILOS BASE
--------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background: var(--body-bg);
    color: var(--text);
    transition: opacity 0.15s ease;
}
body.app-initializing {
    opacity: 0;
}

/* ---------------------------------
   VARIABLES DE THEME (sobrescritas por JS)
--------------------------------- */
:root {
  --primary:      #3b82f6;
  --primary-dark: #2563eb;
  --header-bg:    rgb(149,183,150);
  --header-grad:  none;
  --header-text:  #1e293b;
  --body-bg:      #f5f7fb;
  --card-bg:      rgb(189,193,205);
  --surface:      #ffffff;
  --text:         #1e293b;
  --text-muted:   #475569;
  --border:       #e2e8f0;
  --radius-card:  20px;
  --radius-btn:   40px;
  --font-body:    system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --header-alpha: 1;
}

/* ---------------------------------
   HEADER Y NAVEGACIÓN
--------------------------------- */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: transparent;
    box-shadow: 0 2px 16px rgba(0,0,0,0.18), inset 0 -1px 0 rgba(255,255,255,0.12);
    position: sticky;
    top: 0;
    z-index: 1000;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.app-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--header-grad, linear-gradient(135deg, #2d6a4f 0%, #52b788 100%));
    opacity: var(--header-alpha, 1);
    z-index: -1;
    pointer-events: none;
    transition: background 0.35s ease, opacity 0.3s ease;
}

.logo-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: opacity 0.2s;
    color: var(--header-text); 
}
.logo-title:hover {
    opacity: 0.8;
}
.logo {
    font-size: 2rem;
}
.app-header h1 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--header-text);
}

.menu-icon {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 10px;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0.4rem 0.55rem;
    color: var(--header-text, #fff);
    transition: background 0.2s, border-color 0.2s;
}
.menu-icon:hover {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.38);
}

.dropdown-menu {
    position: absolute;
    top: 70px;
    right: 1rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    width: 220px;
    z-index: 1200;
    overflow: hidden;
}
.dropdown-menu a {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: #1e293b;
    border-bottom: 1px solid #eef2f6;
    transition: background 0.2s;
}
.dropdown-menu a:hover {
    background: #f1f5f9;
}
.hidden {
    display: none;
}

/* ---------------------------------
   AVATAR Y SELECTOR DE FONDO
--------------------------------- */
.avatar-trigger,
.bg-selector-trigger {
    display: flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 40px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.25s, padding 0.35s ease, gap 0.35s ease, border-color 0.25s;
    margin-right: 0.5rem;
    overflow: hidden;
}

.avatar-trigger:hover,
.bg-selector-trigger:hover,
.avatar-trigger.expanded,
.bg-selector-trigger.expanded {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.4);
    padding: 0.2rem 0.75rem 0.2rem 0.2rem;
    gap: 0.4rem;
}

/* El texto oculto por defecto */
.avatar-trigger span,
.bg-selector-trigger span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--header-text, #fff);
    white-space: nowrap;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.35s ease, opacity 0.25s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* El texto aparece en hover */
.avatar-trigger:hover span,
.bg-selector-trigger:hover span,
.avatar-trigger.expanded span,
.bg-selector-trigger.expanded span {
    max-width: 80px;
    opacity: 1;
}

.avatar-circle,
.bg-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    flex-shrink: 0;                  /* el círculo nunca se encoge */
}

body.dark-mode .avatar-trigger,
body.dark-mode .bg-selector-trigger {
    background: #1e293b;
}
body.dark-mode .avatar-trigger:hover,
body.dark-mode .bg-selector-trigger:hover {
    background: #334155;
}
body.dark-mode .avatar-trigger span,
body.dark-mode .bg-selector-trigger span {
    color: #e2e8f0;
}
/* Modal de avatar */
.avatar-modal {
    max-width: 500px;
    width: 90%;
}
.avatar-group-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1rem 0;
}
.group-tab {
    background: #e2e8f0;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 40px;
    cursor: pointer;
    font-size: 1rem;
}
.group-tab.active {
    background: #3b82f6;
    color: white;
}
.avatar-styles-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin: 1rem 0;
}
.avatar-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    padding: 0.5rem;
    border-radius: 16px;
    cursor: pointer;
    transition: 0.2s;
    border: 2px solid transparent;
}
.avatar-option.selected {
    border-color: #3b82f6;
    background: #eff6ff;
}
.avatar-preview {
    font-size: 3rem;
}
.avatar-name {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}
/* Animación pensando */
.avatar-thinking {
    animation: pulse 1s infinite;
    display: inline-block;
}
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

/* Panel flotante de fondo */
.bg-panel {
    position: absolute;
    top: 70px;
    right: 1rem;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    width: 220px;
    z-index: 100;
    overflow: hidden;
    padding: 0.5rem 0;
}
.bg-panel.hidden {
    display: none;
}
.bg-option {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.2s;
}
.bg-option:hover {
    background: rgba(0,0,0,0.05);
}
.bg-color-preview {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
}
.color-picker-panel,
.image-picker-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}
.color-picker-container,
.image-picker-container {
    background: white;
    border-radius: 32px;
    padding: 1.5rem;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.bg-preview {
    width: 100%;
    height: 100px;
    border-radius: 16px;
    margin: 1rem 0;
    background-size: cover;
    background-position: center;
}

/* ---------------------------------
   BOTONES PRINCIPALES Y MENÚ
--------------------------------- */
.main-menu {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    margin-top: 1rem;
}
.mode-card {
    background: var(--card-bg);
    border-radius: 32px;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1.5px solid var(--border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    position: relative;
    overflow: hidden;
}
.mode-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark, var(--primary)));
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 32px 32px 0 0;
}
.mode-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    border-color: var(--primary);
}
.mode-card:hover::after {
    opacity: 1;
}
.mode-card h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.mode-card p {
    color: var(--text-muted);    
    font-size: 1rem;
}

/* ---------------------------------
   PRÁCTICA (FLASHCARDS) – BOTONES CUADRADOS
--------------------------------- */
.practice-section {
    margin-top: 1.5rem;
    border-top: 2px solid #e2e8f0;
    padding-top: 1.5rem;
}
.practice-title {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 1.5rem;
    color: #0f172a;
}
.practice-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.practice-btn {
    background: var(--surface);
    border: 1px solid var(--border);    
    border-radius: 24px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1; /* Cuadrado perfecto */
}
.practice-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    background: #f8fafc;
}
.practice-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
.practice-btn h3 {
    font-size: 1rem;
    margin: 0.5rem 0 0.25rem;
    font-weight: 600;
}
.practice-btn p {
    color: #475569;
    font-size: 0.75rem;
    margin: 0;
    line-height: 1.3;
}

/* ---------------------------------
   MODO SIMPLE (TRADUCCIÓN)
--------------------------------- */
.translation-panel {
    padding: 1.5rem;
}
.textarea {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 24px;
    font-family: inherit;
    resize: vertical;
    text-transform: none !important;
}
.controls-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0;
}
.primary-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 40px;
    font-weight: 500;
    cursor: pointer;
}
.secondary-btn {
    background: #e2e8f0;
    color: #1e293b;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 40px;
    cursor: pointer;
}
.cards-translation {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}
.card-result {
    background: #f8fafc;
    border-radius: 24px;
    padding: 1rem;
    border-left: 6px solid;
}
.card-result.formal { border-left-color: #3b82f6; background: #eff6ff; }
.card-result.informal { border-left-color: #10b981; background: #ecfdf5; }
.card-result.neutral { border-left-color: #f59e0b; background: #fffbeb; }
.card-result h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
}
.copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}
.speed-control {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}
.speed-control label {
    font-weight: 500;
    color: #1e293b;
}
.speed-control select {
    padding: 0.5rem 1rem;
    border-radius: 40px;
    border: 1px solid #cbd5e1;
    background: white;
    font-size: 0.9rem;
}
.audio-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: 0.5rem;
    padding: 0 0.25rem;
}
.audio-btn:hover {
    transform: scale(1.1);
}

/* ---------------------------------
   MODO ESCUELA (CHAT)
--------------------------------- */
.school-panel {
    padding: 1rem;
}
.welcome-message {
    background: #e0f2fe;
    border-radius: 24px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.school-controls-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin: 1rem 0;
}
.level-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 10px;
}
.voice-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}
.level-selector select,
.voice-controls select {
    padding: 0.4rem 0.8rem;
    border-radius: 40px;
    border: 1px solid #cbd5e1;
    background: white;
}
.voice-controls label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 10px;
}
.chat-container {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}
.chat-messages {
    max-height: 400px;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.chat-input-area {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}
.chat-input-area textarea {
    flex: 1;
    border-radius: 20px;
    border: 1px solid #cbd5e1;
    padding: 0.6rem;
    font-family: inherit;
    resize: vertical;
}
.chat-input-area button {
    align-self: flex-end;
}
.chat-message {
    display: flex;
}
.chat-message.user {
    justify-content: flex-end;
}
.chat-message.assistant {
    justify-content: flex-start;
}
.message-bubble {
    max-width: 80%;
    padding: 0.75rem 1rem;
    border-radius: 20px;
    background: #f1f5f9;
    color: #0f172a;
}
.chat-message.user .message-bubble {
    background: #3b82f6;
    color: white;
}
.chat-message.assistant .message-bubble {
    background: #e2e8f0;
}
.action-buttons-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1.5rem 0 0.5rem;
    flex-wrap: wrap;
}
.action-btn {
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 40px;
    padding: 0.6rem 1.2rem;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
}
.action-btn:hover {
    background: #f1f5f9;
    transform: translateY(-2px);
}

/* ---------------------------------
   FAMOSOS
--------------------------------- */
.famous-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}
.famous-card-item {
    background: white;
    border-radius: 24px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.famous-card-item:hover {
    transform: translateY(-4px);
    background: #fef9e6;
}
.famous-avatar {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
.famous-card-item h3 {
    font-size: 1rem;
    margin: 0.3rem 0;
}
.famous-card-item p {
    font-size: 0.8rem;
    color: #475569;
}
.famous-list-panel {
    padding: 1rem;
}
.famous-cards-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.famous-chat-panel .chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.voice-controls-famous {
    display: flex;
    gap: 1rem;
}

/* ---------------------------------
   MÚSICOS DEL MUNDO
--------------------------------- */

/* Contenedor general */
.musicians-menu {
    padding: 1rem 1rem 2rem;
    max-width: 700px;
    margin: 0 auto;
}

/* Header: back + add */
.musicians-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 0.5rem;
}

/* Título y subtítulo */
.musicians-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    margin-bottom: 0.35rem;
}
.musicians-subtitle {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
    max-width: 480px;
    margin: 0 auto 1.5rem;
}
.musicians-subtitle strong { color: var(--primary); font-weight: 600; }

/* Grid de artistas */
.artists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.85rem;
    margin-top: 0;
}

/* ── Netflix-style artist grid ── */
.artists-netflix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 0.5rem;
}
.artist-nfx-card {
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.18s, z-index 0s;
    position: relative;
}
.artist-nfx-card:hover {
    transform: scale(1.06);
    z-index: 2;
}
.artist-nfx-poster {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-color: #1a1a2e;
    background-size: cover;
    background-position: center top;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}
.artist-nfx-emoji {
    font-size: 3rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
    pointer-events: none;
}
.artist-nfx-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.3) 55%, transparent 100%);
    padding: 2.2rem 0.55rem 0.55rem;
    display: flex;
    align-items: flex-end;
}
.artist-nfx-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
    word-break: break-word;
}
body.dark-mode .artist-nfx-poster { background-color: #0f0f1a; }

/* Grid de canciones */
.songs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}

/* Cards de artista */
.artist-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 1.1rem 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}
.artist-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark, var(--primary)));
    opacity: 0;
    transition: opacity 0.18s;
}
.artist-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border-color: var(--primary);
}
.artist-card:hover::after { opacity: 1; }
.artist-card h3 {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 0.5rem;
    line-height: 1.3;
}

/* Cards de canción */
.song-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.song-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border-color: var(--primary);
}
.song-card h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    line-height: 1.3;
}

/* Avatar emoji */
.artist-avatar {
    font-size: 2.4rem;
    line-height: 1;
}

/* Avatar con imagen real */
.artist-avatar--img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
}
.artist-avatar--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dark mode */
body.dark-mode .artist-card,
body.dark-mode .song-card {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}
body.dark-mode .artist-card:hover,
body.dark-mode .song-card:hover {
    border-color: var(--primary);
    background: rgba(59,130,246,0.08);
}
.lyrics-panel {
    position: relative;
    background: var(--card-bg);
    border-radius: 24px;
    padding: 1.25rem;
    border: 1.5px solid var(--border);
}
.lyrics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}
.lyrics-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.lyrics-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.info-tip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 0.5rem 1rem;
    border-radius: 40px;
    color: var(--text-muted);
    max-width: 360px;
}
.info-icon {
    font-size: 1rem;
}
.info-text {
    white-space: normal;
}
.lyrics-columns {
    overflow: hidden;
    margin-top: 0.5rem;
    position: relative;
    cursor: default;
}

/* Track que se desliza con el drag */
.lyrics-pane-track {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    padding: 0 1rem;
    transition: transform 0.25s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}

.lyrics-original,
.lyrics-translation {
    /* Cada columna ocupa el ancho visible del viewport */
    flex: 0 0 calc(100% - 2rem);
    border-radius: 16px;
    padding: 1.25rem;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--surface);
    border: 1.5px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* En desktop anchas: ambas visibles lado a lado */
@media (min-width: 700px) {
    .lyrics-columns { cursor: default; }
    .lyrics-pane-track {
        transition: none;
        transform: none !important;
    }
    .lyrics-original,
    .lyrics-translation {
        flex: 1;
        min-width: 250px;
    }
}

.lyrics-original,
.lyrics-translation {
    cursor: text;
}

.lyrics-original pre,
.lyrics-translation pre {
    font-family: inherit;
    font-size: 1rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: transparent;
    border: none;
    margin: 0;
    cursor: text;
}

/* Divisor entre columnas */
.lyrics-divider {
    flex: 0 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    background: var(--body-bg, #f5f7fb);
    border-radius: 4px;
    align-self: stretch;
    transition: background 0.15s;
}
.lyrics-divider:active { cursor: grabbing; }
.lyrics-divider:hover { background: var(--border, #e2e8f0); }

/* Icono — dos líneas paralelas verticales */
.lyrics-divider-handle {
    display: flex;
    gap: 3px;
    pointer-events: none;
}
.lyrics-divider-handle span {
    display: block;
    width: 2px;
    height: 22px;
    border-radius: 2px;
    background: var(--text-muted, #94a3b8);
    opacity: 0.5;
}
.lyrics-divider:hover .lyrics-divider-handle span { opacity: 0.9; }

/* En desktop el divisor es solo visual (no arrastra) */
@media (min-width: 700px) {
    .lyrics-divider { cursor: default; }
}

/* Pastillas indicadoras de pane (mobile) */
.lyrics-pane-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 6px 0 2px;
}
.lyrics-pane-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--border, #cbd5e1);
    transition: background 0.2s, transform 0.2s;
}
.lyrics-pane-dot--active {
    background: var(--primary, #3b82f6);
    transform: scale(1.3);
}
@media (min-width: 700px) {
    .lyrics-pane-dots { display: none; }
}
.translation-selector {
    margin: 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.translation-selector select {
    padding: 0.45rem 1rem;
    border-radius: 40px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
}
.translation-selector select:focus { outline: none; border-color: var(--primary); }
.saved-words-panel {
    margin-top: 1.25rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 1rem;
}
.saved-words-list {
    list-style: none;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}
.saved-words-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text);
}
.saved-words-list li:last-child { border-bottom: none; }
.remove-word-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0 0.5rem;
    color: var(--text-muted);
}
.remove-word-btn:hover { color: #ef4444; }
.small-btn {
    background: #10b981;
    color: white;
    border: none;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
}
.small-btn:hover { background: #059669; }
.toast-message {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 40px;
    z-index: 1000;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    animation: fadeInOut 3s ease;
}
@keyframes fadeInOut {
    0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
    10% { opacity: 1; transform: translateX(-50%) translateY(0); }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) translateY(20px); }
}
.selection-popup {
    position: absolute;
    background: white;
    border-radius: 40px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    z-index: 1000;
    backdrop-filter: blur(4px);
}
.popup-btn {
    background: #f1f5f9;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 40px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: 0.2s;
}
.popup-btn:hover {
    background: #e2e8f0;
}
.translation-modal {
    width: 90%;
    max-width: 500px;
}
.translation-variants {
    margin: 1rem 0;
    text-align: left;
    margin-right: 20px;
}
.variant {
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 16px;
}

/* ---------------------------------
   MODALES GENERALES
--------------------------------- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-content {
    background: white;
    max-width: 90%;
    width: 360px;
    padding: 2rem;
    border-radius: 32px;
    text-align: center;
}
.modal.hidden {
    display: none;
}
.close-modal {
    cursor: pointer;
}
.flashcard-modal {
    width: 90%;
    max-width: 500px;
}
.flashcard-modal label {
    display: block;
    margin-top: 1rem;
    margin-bottom: 0.25rem;
    font-weight: 500;
}
.flashcard-modal input,
.flashcard-modal textarea {
    width: 100%;
    padding: 0.6rem;
    border-radius: 16px;
    border: 1px solid #cbd5e1;
    font-family: inherit;
}
.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* ---------------------------------
   BARRA DE IDIOMAS
--------------------------------- */
.language-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.9rem;
    background: white;
    padding: 0.5rem 0.9rem;
    border-radius: 0 0 54px 54px;
    margin: 0 0 0.9rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.lang-select {
    flex: 1;
    min-width: 0;
    padding: 0.45rem 0.7rem;
    border-radius: 40px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    font-size: 0.9rem;
    text-align: center;
    max-width: 180px;
}
.swap-btn {
    background: #eef2ff;
    border: none;
    font-size: 1.25rem;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}
.swap-btn:hover {
    background: #d9e6ff;
    transform: scale(1.05);
}
.lang-selectors {
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.lang-selectors select {
    padding: 0.75rem;
    border-radius: 40px;
    border: 1px solid #cbd5e1;
}
.lang-selectors label {
    display: block !important;
    color: #1e293b !important;
}
.swap-modal-btn {
    background: #eef2ff;
    border: none;
    font-size: 1.4rem;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    margin: 0.5rem auto;
}
.swap-modal-btn:hover {
    background: #d9e6ff;
    transform: scale(1.05);
}

/* ---------------------------------
   MODAL DE AUTENTICACIÓN
--------------------------------- */
#authModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
#authModal .modal-content {
    background: #ffffff;
    border-radius: 32px;
    width: 90%;
    max-width: 450px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
#authModal .close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    color: #94a3b8;
    transition: color 0.2s;
    line-height: 1;
}
#authModal .close-modal:hover {
    color: #1e293b;
}
#authModal h2 {
    font-size: 1.8rem;
    font-weight: 600;
    text-align: center;
    margin: 0;
    padding: 1.5rem 1.5rem 0.5rem;
    color: #0f172a;
}
.auth-tabs {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 1rem 1.5rem 0;
    border-bottom: 2px solid #e2e8f0;
}
.auth-tab {
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s;
    position: relative;
}
.auth-tab.active {
    color: #3b82f6;
}
.auth-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #3b82f6;
    border-radius: 2px;
}
.auth-form {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.auth-form input,
.auth-form select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 40px;
    font-size: 1rem;
    background: #f8fafc;
    transition: all 0.2s;
}
.auth-form input:focus,
.auth-form select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
    background: white;
}
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.auth-field label {
    font-weight: 500;
    color: #334155;
    font-size: 0.85rem;
    margin-left: 0.5rem;
}
#authModal .primary-btn,
#authModal .secondary-btn {
    border: none;
    padding: 0.75rem;
    border-radius: 40px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.2s;
    width: 100%;
}
#authModal .primary-btn {
    background: #3b82f6;
    color: white;
}
#authModal .primary-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
}
#authModal .secondary-btn {
    background: #e2e8f0;
    color: #1e293b;
}
#authModal .secondary-btn:hover {
    background: #cbd5e1;
}

/* ---------------------------------
   DARK MODE SWITCH (INTERRUPTOR)
--------------------------------- */
.dark-mode-switch {
    display: inline-flex;
    margin-right: 0.8rem;
    margin-left: auto;
    flex-shrink: 0;
}
.switch {
    width: 30px;
    height: 60px;
    flex-shrink: 0;
    padding-top: 1px;
    background-color: #514e4b;
    border-radius: 40px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.toggle-button {
    transform: scale(0.7);
    transform-origin: center center;
}
.toggle {
    position: relative;
    width: 35px;
    height: 35px;
    margin: 12px;
    margin-top: 12px;
    background-color: #fdb813;
    border-radius: 50%;
}
.moon-mask {
    position: absolute;
    width: 35px;
    height: 35px;
    margin: -74px 0 0 34px;
    background-color: #514e4b;
    border-radius: 50%;
}
.circles-wrapper .circle {
    position: absolute;
    width: 4px;
    height: 8px;
    background-color: #fff;
    border-radius: 10px;
}
.circles-wrapper .circle:first-child { margin: -57px 0 0 27px; }
.circles-wrapper .circle:nth-child(2) { margin: -9px 0 0 28px; }
.circles-wrapper .circle:nth-child(3) { margin: -32px 0 0 51px; transform: rotate(90deg); }
.circles-wrapper .circle:nth-child(4) { margin: -33px 0 0 4px; transform: rotate(90deg); }
.circles-wrapper .circle:nth-child(5) { margin: -14px 0 0 10px; transform: rotate(45deg); }
.circles-wrapper .circle:nth-child(6) { margin: -14px 0 0 45px; transform: rotate(320deg); }
.circles-wrapper .circle:nth-child(7) { margin: -50px 0 0 10px; transform: rotate(135deg); }
.circles-wrapper .circle:nth-child(8) { margin: -50px 0 0 45px; transform: rotate(235deg); }
@media (max-width: 480px) {
    .switch {
        transform: scale(0.8);
        transform-origin: center center;
    }
}

/* ---------------------------------
   MODO OSCURO GLOBAL
--------------------------------- */

body.dark-mode .app-header {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
body.dark-mode .mode-card,
body.dark-mode .artist-card,
body.dark-mode .song-card,
body.dark-mode .famous-card {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
body.dark-mode .primary-btn {
    background-color: #3b82f6;
}
body.dark-mode .secondary-btn {
    background-color: #444;
    color: white;
}
body.dark-mode .chat-message.assistant .message-bubble {
    background-color: #2a2a2a;
    color: #ddd;
}
body.dark-mode .chat-message.user .message-bubble {
    background-color: #2563eb;
}
body.dark-mode .textarea,
body.dark-mode input,
body.dark-mode select {
    background-color: #333;
    color: white;
    border-color: #555;
}
/* Fix: selectores con arrow SVG personalizado en dark mode */
body.dark-mode .school-level-select,
body.dark-mode .smp-wrap select,
body.dark-mode .cfg-select,
body.dark-mode .lang-select {
    background-color: #1e293b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: #e2e8f0;
    border-color: rgba(255,255,255,0.1);
}

/* Barra de idiomas en dark mode */
body.dark-mode .language-bar {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(255,255,255,0.08);
}
body.dark-mode .bg-panel {
    background: rgba(30,41,59,0.95);
    color: #f1f5f9;
}
body.dark-mode .bg-option:hover {
    background: rgba(255,255,255,0.1);
}
body.dark-mode .color-picker-container,
body.dark-mode .image-picker-container {
    background: #1e293b;
    color: white;
}

body.dark-mode #authModal .modal-content {
    background: #1e293b;
}
body.dark-mode #authModal h2 {
    color: #f1f5f9;
}
body.dark-mode #authModal .auth-tab {
    color: #94a3b8;
}
body.dark-mode #authModal .auth-tab.active {
    color: #60a5fa;
}
body.dark-mode #authModal .auth-tab.active::after {
    background-color: #60a5fa;
}
body.dark-mode .auth-form input,
body.dark-mode .auth-form select {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}
body.dark-mode .auth-field label {
    color: #cbd5e1;
}
body.dark-mode #authModal .close-modal {
    color: #94a3b8;
}
body.dark-mode #authModal .close-modal:hover {
    color: #f1f5f9;
}

/* ---------------------------------
   RESPONSIVE ADICIONAL
--------------------------------- */
@media (max-width: 768px) {
    .info-tip {
        font-size: 12px;
        max-width: 100%;
        margin-top: 0.5rem;
    }
    /* lyrics-columns: panning handled by JS, no column stacking */
}
@media (max-width: 480px) {
    .practice-buttons {
        gap: 0.75rem;
    }
    .practice-icon {
        font-size: 2rem;
    }
    .practice-btn h3 {
        font-size: 0.85rem;
    }
    .practice-btn p {
        font-size: 0.7rem;
    }
    #authModal .modal-content {
        border-radius: 24px;
    }
    #authModal h2 {
        font-size: 1.5rem;
        padding: 1rem 1rem 0.25rem;
    }
    .auth-tabs {
        margin: 0.5rem 1rem 0;
    }
    .auth-tab {
        padding: 0.5rem 1rem;
    }
    .auth-form {
        padding: 1rem;
    }
}

/*------------------------------------------------------*/
/* ---------- Sección de historias y niveles ---------- */
/*------------------------------------------------------*/

.stories-grid, .levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.story-card, .level-card {
    background: var(--surface);
    border-radius: 24px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: relative;
}
.story-card:hover, .level-card:hover {
    transform: translateY(-4px);
    background: #fef9e6;
}
.level-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #3b82f6;
    color: white;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: bold;
}
.flashcards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.flashcard-preview {
    background: white;
    border-radius: 20px;
    padding: 1rem;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: 0.2s;
}
.flashcard-word {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}
.flashcard-translation {
    color: #475569;
    font-size: 0.9rem;
}


/* ============================================
   ONBOARDING + AUTH SYSTEM
   ============================================ */

.ob-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 55%, #24243e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: obFadeIn 0.35s ease;
}
.ob-overlay.ob-fade-out { animation: obFadeOut 0.3s ease forwards; }

@keyframes obFadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes obFadeOut { from { opacity: 1 } to { opacity: 0 } }

/* --- Logo compartido --- */
.ob-logo {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.ob-logo span:first-child { font-size: 1.8rem; }
.ob-logo-text {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    letter-spacing: -.5px;
}

/* ---- SLIDES ---- */
.ob-slides-wrap {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 2rem 1.5rem;
    text-align: center;
    color: white;
}
.ob-skip-btn {
    position: absolute;
    top: 0; right: 1.5rem;
    background: none; border: none;
    color: rgba(255,255,255,.55);
    font-size: .9rem; cursor: pointer;
    padding: .5rem;
    transition: color .2s;
}
.ob-skip-btn:hover { color: white; }

.ob-slides-wrap .ob-logo { justify-content: center; margin-bottom: 2.5rem; }

.ob-slide-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-height: 240px;
}
.ob-slide-icon {
    font-size: 3.2rem;
    width: 88px; height: 88px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ob-slide-title {
    font-size: 1.55rem;
    font-weight: 700;
    margin: 0; line-height: 1.3;
}
.ob-slide-desc {
    font-size: .98rem;
    color: rgba(255,255,255,.72);
    line-height: 1.65;
    max-width: 340px;
    margin: 0;
}
.ob-slide-footer {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
}
.ob-dots { display: flex; gap: 8px; }
.ob-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    cursor: pointer;
    transition: all .25s;
}
.ob-dot.active {
    background: white;
    width: 24px;
    border-radius: 4px;
}
.ob-next-btn {
    padding: .9rem 2rem;
    border: none; border-radius: 50px;
    color: white;
    font-size: 1rem; font-weight: 600;
    cursor: pointer;
    width: 100%; max-width: 280px;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.ob-next-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(0,0,0,.4);
}

/* ---- AUTH CARD ---- */
.ob-auth-wrap {
    width: 100%;
    padding: 1rem;
    display: flex;
    justify-content: center;
}
.ob-auth-card {
    background: white;
    border-radius: 24px;
    padding: 2rem 1.75rem;
    width: 100%; max-width: 400px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
body.dark-mode .ob-auth-card {
    background: #1e1e2e;
    color: #e2e8f0;
}

/* Tabs */
.ob-tabs {
    display: flex;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 1.5rem;
}
body.dark-mode .ob-tabs { background: #2a2a3e; }
.ob-tab {
    flex: 1; padding: .6rem;
    border: none; background: none;
    border-radius: 9px;
    font-size: .9rem; font-weight: 500;
    cursor: pointer;
    color: #64748b;
    transition: all .2s;
}
.ob-tab.active {
    background: white;
    color: #1e293b;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
body.dark-mode .ob-tab       { color: #94a3b8; }
body.dark-mode .ob-tab.active { background: #3d3d5c; color: #e2e8f0; }

/* Form */
.ob-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ob-optional-tag {
    font-size: 0.7rem;
    font-weight: 500;
    color: #94a3b8;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 0.1rem 0.4rem;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.ob-step-label {
    font-size: .8rem;
    color: #94a3b8;
    text-align: center;
    font-weight: 500;
}
.ob-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.ob-field label {
    font-size: .85rem;
    font-weight: 600;
    color: #374151;
}
body.dark-mode .ob-field label { color: #cbd5e1; }
.ob-field input {
    padding: .75rem 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: .95rem;
    outline: none;
    transition: border-color .2s;
    background: white; color: #1e293b;
    box-sizing: border-box;
}
body.dark-mode .ob-field input {
    background: #2d2d3f;
    border-color: #3d3d5c;
    color: #e2e8f0;
}
.ob-field input:focus { border-color: #6366f1; }

.ob-pwd-wrap { position: relative; }
.ob-pwd-wrap input { width: 100%; padding-right: 2.5rem; }
.ob-eye {
    position: absolute; right: .75rem; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    cursor: pointer; font-size: 1rem;
    opacity: .45; transition: opacity .2s;
}
.ob-eye:hover { opacity: 1; }

.ob-error {
    font-size: .82rem; color: #ef4444;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: .5rem .75rem;
    text-align: center;
}
body.dark-mode .ob-error {
    background: #3f1212; border-color: #7f1d1d; color: #fca5a5;
}
.hidden { display: none !important; }
.ob-shake { animation: obShake .4s ease; }
@keyframes obShake {
    0%,100% { transform: translateX(0) }
    20% { transform: translateX(-6px) }
    40% { transform: translateX(6px) }
    60% { transform: translateX(-4px) }
    80% { transform: translateX(4px) }
}

.ob-submit-btn {
    padding: .85rem;
    background: #6366f1; color: white;
    border: none; border-radius: 10px;
    font-size: 1rem; font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .15s;
}
.ob-submit-btn:hover { background: #5558e3; transform: translateY(-1px); }

.ob-two-btns { display: flex; gap: .75rem; }
.ob-back-btn {
    flex: 1; padding: .85rem;
    background: #f1f5f9; color: #374151;
    border: none; border-radius: 10px;
    font-size: .9rem; cursor: pointer;
    transition: background .2s;
}
body.dark-mode .ob-back-btn { background: #2d2d3f; color: #e2e8f0; }
.ob-back-btn:hover { background: #e2e8f0; }

.ob-ghost-btn {
    width: 100%; margin-top: 1.25rem;
    background: none; border: none;
    color: #94a3b8;
    font-size: .88rem; cursor: pointer;
    padding: .5rem;
    transition: color .2s;
    display: block;
}
.ob-ghost-btn:hover { color: #6366f1; }

.ob-forgot-link {
    display: block;
    width: 100%;
    margin-top: .75rem;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: .82rem;
    cursor: pointer;
    text-align: center;
    padding: .3rem;
    transition: color .2s;
}
.ob-forgot-link:hover { color: #6366f1; }

.ob-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .9rem 0 .5rem;
    color: #94a3b8;
    font-size: .78rem;
}
.ob-divider::before, .ob-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}
body.dark-mode .ob-divider { color: #475569; }
body.dark-mode .ob-divider::before,
body.dark-mode .ob-divider::after { background: rgba(255,255,255,.1); }

.ob-google-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    min-height: 44px;
}

/* ── Modal eliminar cuenta ───────────────────────────── */
.cfg-delete-account-btn {
    width: 100%;
    margin-top: .75rem;
    padding: .65rem 1rem;
    border: 1.5px solid #ef4444;
    border-radius: .5rem;
    background: transparent;
    color: #ef4444;
    font-size: .87rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    text-align: left;
}
.cfg-delete-account-btn:hover { background: rgba(239,68,68,.08); }

.cfg-delete-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}
.cfg-delete-modal {
    background: var(--surface, #fff);
    border-radius: 1rem;
    padding: 2rem;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
body.dark-mode .cfg-delete-modal { background: #1e293b; }
.cfg-delete-modal-icon { font-size: 2.5rem; text-align: center; margin-bottom: .75rem; }
.cfg-delete-modal-title { text-align: center; font-size: 1.1rem; margin-bottom: .5rem; color: #ef4444; }
.cfg-delete-modal-desc { text-align: center; font-size: .87rem; color: var(--text-muted, #64748b); line-height: 1.6; margin-bottom: 1.25rem; }
.cfg-delete-modal-field label { display: block; font-size: .82rem; margin-bottom: .4rem; color: var(--text-muted, #64748b); }
.cfg-delete-modal-field input {
    width: 100%;
    padding: .55rem .75rem;
    border: 1.5px solid #e2e8f0;
    border-radius: .5rem;
    font-size: .9rem;
    background: var(--surface, #fff);
    color: var(--text, #1e293b);
}
body.dark-mode .cfg-delete-modal-field input { background: #0f172a; border-color: rgba(255,255,255,.15); color: #f1f5f9; }
.cfg-delete-modal-err { color: #ef4444; font-size: .82rem; margin-top: .5rem; }
.cfg-delete-modal-btns { display: flex; gap: .75rem; margin-top: 1.25rem; }
.cfg-delete-cancel-btn {
    flex: 1;
    padding: .6rem;
    border: 1.5px solid #e2e8f0;
    border-radius: .5rem;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: .9rem;
    cursor: pointer;
}
.cfg-delete-cancel-btn:hover { background: #f1f5f9; }
.cfg-delete-confirm-btn {
    flex: 1;
    padding: .6rem;
    border: none;
    border-radius: .5rem;
    background: #ef4444;
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.cfg-delete-confirm-btn:hover { background: #dc2626; }
.cfg-delete-confirm-btn:disabled { opacity: .6; cursor: default; }

.ob-forgot-back { margin-bottom: .75rem; }
.ob-forgot-desc {
    color: #64748b;
    font-size: .87rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}
body.dark-mode .ob-forgot-desc { color: #94a3b8; }

.ob-success {
    background: rgba(16,185,129,.08);
    border: 1px solid rgba(16,185,129,.25);
    border-radius: .5rem;
    color: #059669;
    font-size: .87rem;
    padding: .65rem .9rem;
    margin-bottom: .75rem;
    line-height: 1.5;
}
body.dark-mode .ob-success { background: rgba(52,211,153,.1); color: #34d399; }

/* Language grid */
.ob-lang-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}
.ob-lang-opt {
    display: flex; flex-direction: column;
    align-items: center;
    padding: .6rem .25rem;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s;
}
body.dark-mode .ob-lang-opt { border-color: #3d3d5c; }
.ob-lang-opt:hover { border-color: #6366f1; }
.ob-lang-opt.selected {
    border-color: #6366f1;
    background: #eff0ff;
}
body.dark-mode .ob-lang-opt.selected { background: #2d2d5f; }
.ob-lang-flag { font-size: 1.5rem; }
.ob-lang-name { font-size: .65rem; color: #64748b; margin-top: 3px; }
body.dark-mode .ob-lang-name { color: #94a3b8; }

/* ---- LOGIN WALL (secciones protegidas) ---- */
.ob-login-wall {
    position: fixed; inset: 0;
    z-index: 8000;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: obFadeIn .2s ease;
}
.ob-lw-card {
    background: white;
    border-radius: 20px;
    padding: 2rem 1.75rem;
    max-width: 360px;
    width: calc(100% - 2rem);
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
body.dark-mode .ob-lw-card { background: #1e1e2e; color: #e2e8f0; }
.ob-lw-icon { font-size: 2.4rem; margin-bottom: .5rem; }
.ob-lw-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 .5rem; }
.ob-lw-desc {
    font-size: .9rem; color: #64748b;
    margin: 0 0 1.5rem; line-height: 1.55;
}
body.dark-mode .ob-lw-desc { color: #94a3b8; }
.ob-lw-skip {
    display: block; width: 100%;
    background: none; border: none;
    color: #94a3b8; font-size: .88rem;
    cursor: pointer; padding: .5rem;
    transition: color .2s;
}
.ob-lw-skip:hover { color: #6366f1; }

/* ---- GUEST BANNER ---- */
.ob-guest-banner {
    background: linear-gradient(90deg, #6366f115, #8b5cf615);
    border: 1px solid #6366f133;
    border-radius: 10px;
    padding: .75rem 1rem;
    margin: .5rem;
    font-size: .85rem; color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
}
body.dark-mode .ob-guest-banner { color: #a5b4fc; }
.ob-guest-banner button {
    background: #6366f1; color: white;
    border: none; border-radius: 6px;
    padding: .3rem .75rem;
    font-size: .8rem; font-weight: 600;
    cursor: pointer;
}

/* ---- ACTION TOAST ---- */
.ob-action-toast {
    position: fixed;
    bottom: 2rem; left: 50%;
    transform: translateX(-50%);
    background: #1e293b; color: white;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-size: .9rem;
    z-index: 9000;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 90vw;
    animation: obFadeIn .2s ease;
}
.ob-action-toast button {
    background: #6366f1; color: white;
    border: none; border-radius: 6px;
    padding: .3rem .75rem;
    font-size: .85rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}


/* ========== LEXICAL CARD ========== */
.lexical-card {
    background: var(--card-bg, #f8faff);
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-top: .25rem;
    width: 100%;
    box-sizing: border-box;
    flex-basis: 100%; 
}
body.dark-mode .lexical-card {
    background: #1e2235;
    border-color: #2d3555;
}

.lex-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.lex-type {
    background: #6366f1;
    color: white;
    font-size: .8rem;
    font-weight: 700;
    padding: .25rem .65rem;
    border-radius: 20px;
    letter-spacing: .3px;
}
.lex-details {
    font-size: .88rem;
    color: #64748b;
    font-style: italic;
}
body.dark-mode .lex-details { color: #94a3b8; }

.lex-examples-title {
    font-size: .85rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: .65rem;
}
body.dark-mode .lex-examples-title { color: #cbd5e1; }

.lex-examples {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.lex-example {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}
.lex-ex-audio-btn {
    width: 24px; height: 24px;
    margin-left: auto;
    flex-shrink: 0;
}
.lex-ex-num {
    background: #f1f5f9;
    color: #6366f1;
    font-size: .75rem;
    font-weight: 700;
    width: 20px; height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
body.dark-mode .lex-ex-num { background: #2d2d4f; }

.lex-ex-content {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem;
    font-size: .88rem;
    line-height: 1.5;
}
.lex-ex-source { color: #1e293b; }
body.dark-mode .lex-ex-source { color: #e2e8f0; }

.lex-ex-arrow {
    color: #6366f1;
    font-weight: 700;
    font-size: .8rem;
}
.lex-ex-target {
    color: #475569;
    font-style: italic;
}
body.dark-mode .lex-ex-target { color: #94a3b8; }

/* Contexto opcional del traductor */
.smp-context-hint-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: none;
    border: none;
    padding: .25rem .4rem;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: color .15s, background .15s;
}
.smp-context-hint-toggle:hover { color: #6366f1; background: rgba(99,102,241,.07); }
.smp-context-hint-optional {
    font-weight: 400;
    font-size: .72rem;
    opacity: .7;
    margin-left: .1rem;
}
.smp-context-hint-arrow { transition: transform .2s; flex-shrink: 0; }
.smp-context-hint-box { margin-top: .35rem; padding: 0 .4rem .35rem; }
.smp-context-hint-box.hidden { display: none; }
.smp-context-hint-input {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: .55rem .75rem;
    font-size: .83rem;
    font-family: inherit;
    color: var(--text, #1e293b);
    background: var(--surface, #fff);
    resize: none;
    transition: border-color .18s, box-shadow .18s;
    line-height: 1.45;
}
.smp-context-hint-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.smp-context-hint-input::placeholder { color: var(--text-muted, #94a3b8); }
.dark-mode .smp-context-hint-toggle { color: #94a3b8; }
.dark-mode .smp-context-hint-toggle:hover { color: #a5b4fc; background: rgba(99,102,241,.12); }
.dark-mode .smp-context-hint-input { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.dark-mode .smp-context-hint-input:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.2); }

/* ── Botón Pegar ── */
.smp-paste-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .6rem;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: .4rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.smp-paste-btn:hover { background: var(--hover-bg, #f1f5f9); color: var(--text, #1e293b); }
body.dark-mode .smp-paste-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
body.dark-mode .smp-paste-btn:hover { background: rgba(255,255,255,.1); color: #f1f5f9; }

/* ── Sinónimos en controls bar ── */
.smp-controls-left {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.smp-syn-inline-btn {
    font-size: .75rem !important;
    padding: .3rem .65rem !important;
    border-radius: .4rem !important;
}
.smp-synonyms-strip {
    padding: .75rem 1rem;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: .6rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-top: .5rem;
}
body.dark-mode .smp-synonyms-strip { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }

/* ── Acciones extra (IA in Context) ── */
.smp-extra-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border, #e2e8f0);
}
.smp-extra-btns {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}
.smp-extra-btn {
    padding: .45rem .9rem;
    border-radius: .5rem;
    border: 1.5px solid #6366f1;
    background: rgba(99,102,241,.07);
    color: #6366f1;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.smp-extra-btn:hover { background: rgba(99,102,241,.15); }
.smp-extra-btn--ia { border-color: #10b981; background: rgba(16,185,129,.07); color: #059669; }
.smp-extra-btn--ia:hover { background: rgba(16,185,129,.15); }
body.dark-mode .smp-extra-btn { background: rgba(99,102,241,.12); color: #818cf8; border-color: #818cf8; }
body.dark-mode .smp-extra-btn--ia { background: rgba(16,185,129,.12); color: #34d399; border-color: #34d399; }

/* Sinónimos */
.smp-synonyms-result {
    margin-top: .85rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.syn-group { display: flex; flex-direction: column; gap: .35rem; }
.syn-lang {
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.syn-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.syn-tag {
    padding: .2rem .55rem;
    background: rgba(99,102,241,.09);
    border: 1px solid rgba(99,102,241,.2);
    border-radius: 1rem;
    font-size: .78rem;
    color: #4f46e5;
}
.syn-tag--target {
    background: rgba(16,185,129,.09);
    border-color: rgba(16,185,129,.2);
    color: #047857;
}
body.dark-mode .syn-tag { background: rgba(99,102,241,.15); color: #a5b4fc; border-color: rgba(165,180,252,.25); }
body.dark-mode .syn-tag--target { background: rgba(16,185,129,.15); color: #6ee7b7; border-color: rgba(110,231,183,.25); }

/* IA in Context */
.smp-context-area {
    margin-top: .85rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.smp-context-input-row {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
}
.smp-context-input {
    flex: 1;
    padding: .6rem .75rem;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: .5rem;
    font-size: .85rem;
    background: var(--card-bg, #fff);
    color: var(--text, #1e293b);
    resize: none;
    line-height: 1.4;
}
.smp-context-input:focus { outline: none; border-color: #10b981; }
body.dark-mode .smp-context-input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: #f1f5f9; }
.smp-context-send-btn {
    padding: .55rem .9rem;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: .5rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
}
.smp-context-send-btn:hover { background: #059669; }
.smp-context-send-btn:disabled { opacity: .5; cursor: default; }

.smp-context-messages {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 2px;
}
.smp-ctx-msg {
    max-width: 85%;
    padding: .55rem .8rem;
    border-radius: .6rem;
    font-size: .85rem;
    line-height: 1.5;
    white-space: pre-wrap;
}
.smp-ctx-msg--user {
    align-self: flex-end;
    background: #10b981;
    color: #fff;
}
.smp-ctx-msg--assistant {
    align-self: flex-start;
    background: rgba(16,185,129,.08);
    border: 1px solid rgba(16,185,129,.18);
    color: var(--text, #1e293b);
}
body.dark-mode .smp-ctx-msg--assistant { background: rgba(16,185,129,.1); border-color: rgba(52,211,153,.2); color: #e2e8f0; }
.smp-ctx-msg--err { color: #ef4444; background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.2); }
.smp-ctx-loading { color: var(--text-muted, #94a3b8); }

/* ── Premium gate (card bloqueada para usuarios free) ───── */
.smp-premium-gate {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    border: 1.5px dashed #cbd5e1;
    border-radius: .6rem;
    background: rgba(148,163,184,.06);
    margin-top: .5rem;
}
body.dark-mode .smp-premium-gate { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.04); }
.smp-gate-lock { font-size: 1.1rem; flex-shrink: 0; }
.smp-gate-text { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.smp-gate-text strong { font-size: .82rem; color: var(--text, #1e293b); }
.smp-gate-text span   { font-size: .75rem; color: var(--text-muted, #64748b); }
body.dark-mode .smp-gate-text strong { color: #e2e8f0; }
body.dark-mode .smp-gate-text span   { color: #94a3b8; }
.smp-gate-btn {
    padding: .3rem .8rem;
    border: 1.5px solid #f59e0b;
    border-radius: 1rem;
    background: transparent;
    color: #b45309;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.smp-gate-btn:hover { background: rgba(245,158,11,.12); }
body.dark-mode .smp-gate-btn { border-color: #fbbf24; color: #fbbf24; }

/* ── Banner verificación de email ───────────────────────── */
.smp-verify-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem 1rem;
    background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.2);
    border-radius: .5rem;
    margin: .5rem 1rem 0;
    font-size: .82rem;
    color: #1d4ed8;
}
body.dark-mode .smp-verify-banner { background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.25); color: #93c5fd; }
.smp-verify-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: .6;
    font-size: .85rem;
    padding: 0 .2rem;
    flex-shrink: 0;
}
.smp-verify-dismiss:hover { opacity: 1; }

/* ── Ampliar traducciones ─────────────────────────────────── */
.smp-ampliar-wrap {
    margin-top: 1rem;
    border-top: 1px solid var(--border, #e2e8f0);
    padding-top: .85rem;
}
body.dark-mode .smp-ampliar-wrap { border-color: rgba(255,255,255,.1); }

.smp-ampliar-trigger {
    display: flex;
    justify-content: center;
}

.smp-ampliar-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1.1rem;
    border: 1.5px solid #f59e0b;
    border-radius: 2rem;
    background: rgba(245,158,11,.07);
    color: #b45309;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s;
    letter-spacing: .01em;
}
.smp-ampliar-btn:hover { background: rgba(245,158,11,.16); transform: translateY(-1px); }
body.dark-mode .smp-ampliar-btn { border-color: #fbbf24; color: #fbbf24; background: rgba(251,191,36,.08); }
body.dark-mode .smp-ampliar-btn:hover { background: rgba(251,191,36,.18); }

.smp-ampliar-icon { font-size: .95rem; line-height: 1; }

.smp-ampliar-panel {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .85rem;
}

.smp-ampliar-card {
    padding: .7rem .9rem;
    border-radius: .6rem;
    background: rgba(245,158,11,.06);
    border: 1px solid rgba(245,158,11,.2);
}
body.dark-mode .smp-ampliar-card { background: rgba(251,191,36,.07); border-color: rgba(251,191,36,.2); }

.smp-ampliar-card-header {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .35rem;
    flex-wrap: wrap;
}

.smp-ampliar-label {
    font-size: .75rem;
    font-weight: 700;
    padding: .15rem .55rem;
    border-radius: 1rem;
    background: #f59e0b;
    color: #fff;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}
body.dark-mode .smp-ampliar-label { background: #d97706; }

.smp-ampliar-note {
    font-size: .78rem;
    color: var(--text-muted, #64748b);
    line-height: 1.4;
}
body.dark-mode .smp-ampliar-note { color: #94a3b8; }

.smp-ampliar-translation {
    font-size: .93rem;
    font-weight: 600;
    color: #92400e;
    line-height: 1.4;
}
body.dark-mode .smp-ampliar-translation { color: #fcd34d; }

/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
/* ---------------------------------
   REFINAMIENTO VISUAL — HEADER
--------------------------------- */
/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/

.app-header {
    padding: 0.5rem 1rem;
}
.logo {
    font-size: 1.4rem;
}
.app-header h1 {
    font-size: 1.1rem;
}
.menu-icon {
    font-size: 1.3rem;
    padding: 0.3rem;
}
.avatar-trigger,
.bg-selector-trigger {
    padding: 0.2rem 0.6rem;
    gap: 0.35rem;
    font-size: 0.8rem;
}
.avatar-circle,
.bg-circle {
    width: 26px;
    height: 26px;
    font-size: 1rem;
}
.avatar-trigger span,
.bg-selector-trigger span {
    font-size: 0.75rem;
}
.switch {
    width: 24px;
    height: 48px;
}
.dark-mode-switch {
    margin-right: 0.4rem;
}

/*----------------------------------------------------------------*/
/* ---------------------------------
   REFINAMIENTO VISUAL — MAIN MENU
--------------------------------- */
/*----------------------------------------------------------------*/

.main-menu {
    gap: 0.85rem;
    padding: 1rem;
    margin-top: 0.5rem;
}
.mode-card {
    padding: 1.1rem 1.25rem;
    border-radius: 20px;
}
.mode-card h2 {
    font-size: 1.15rem;
    margin-bottom: 0.25rem;
}
.mode-card p {
    font-size: 0.82rem;
    line-height: 1.4;
}
.mode-card h4 {
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

/* Long text mode card accent */
.mode-card--longtext {
    border-left: 4px solid #8b5cf6;
    background: linear-gradient(135deg, rgba(139,92,246,.06) 0%, transparent 60%);
}
.dark-mode .mode-card--longtext { background: linear-gradient(135deg, rgba(139,92,246,.1) 0%, transparent 60%); }

/* ─── Modo Texto Largo ─────────────────────────────────────── */
.lt-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: .75rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.lt-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.lt-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.lt-intro {
    font-size: .82rem;
    line-height: 1.55;
    color: var(--text-muted);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: .75rem .9rem;
    margin: 0;
}
.lt-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.lt-label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: baseline;
    gap: .4rem;
    flex-wrap: wrap;
}
.lt-optional {
    font-weight: 400;
    font-size: .72rem;
    color: var(--text-muted);
}
.lt-instruction-examples {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.lt-example-chip {
    padding: .28rem .7rem;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--bg);
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.lt-example-chip:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
    background: rgba(139,92,246,.07);
}
.dark-mode .lt-example-chip { background: #1e293b; border-color: #334155; }
.lt-instruction-input,
.lt-text-input {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: .6rem .8rem;
    font-size: .88rem;
    font-family: inherit;
    color: var(--text);
    background: var(--bg);
    resize: vertical;
    line-height: 1.5;
    transition: border-color .18s, box-shadow .18s;
}
.lt-instruction-input:focus,
.lt-text-input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}
.lt-instruction-input::placeholder,
.lt-text-input::placeholder { color: var(--text-muted); }
.dark-mode .lt-instruction-input,
.dark-mode .lt-text-input { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.lt-input-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lt-char-count { font-size: .75rem; color: var(--text-muted); }
.lt-paste-btn {
    padding: .3rem .75rem;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.lt-paste-btn:hover { border-color: #8b5cf6; color: #8b5cf6; }
.dark-mode .lt-paste-btn { background: #1e293b; border-color: #334155; }

.lt-process-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.5rem;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .18s, transform .18s;
    box-shadow: 0 4px 16px rgba(124,58,237,.3);
}
.lt-process-btn:disabled { opacity: .45; cursor: not-allowed; }
.lt-process-btn:not(:disabled):hover { opacity: .9; transform: translateY(-1px); }
.lt-process-btn.hidden { display: none; }

/* Progress bar */
.lt-progress {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.lt-progress.hidden { display: none; }
.lt-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
    min-width: 120px;
}
.lt-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
    border-radius: 999px;
    transition: width .4s ease;
    width: 0%;
}
.lt-progress-label { font-size: .8rem; color: var(--text-muted); }
.lt-stop-btn {
    padding: .3rem .7rem;
    border-radius: 10px;
    border: 1.5px solid #ef4444;
    background: transparent;
    color: #ef4444;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}
.lt-stop-btn:hover { background: #ef4444; color: #fff; }
.lt-stop-btn.hidden { display: none; }

/* Párrafo resultado */
.lt-results { display: flex; flex-direction: column; gap: .85rem; }
.lt-para-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: .9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    animation: ltCardIn .3s ease;
}
@keyframes ltCardIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lt-para-original {
    font-size: .8rem;
    color: var(--text-muted);
    line-height: 1.55;
    font-style: italic;
    border-left: 3px solid var(--border);
    padding-left: .65rem;
}
.lt-para-divider {
    height: 1px;
    background: var(--border);
}
.lt-para-result {
    font-size: .92rem;
    color: var(--text);
    line-height: 1.65;
    white-space: pre-wrap;
}
.lt-para-result--loading {
    display: flex;
    align-items: center;
    min-height: 2rem;
}
.lt-para-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.lt-chat-btn {
    padding: .32rem .8rem;
    border-radius: 20px;
    border: 1.5px solid #6366f1;
    background: transparent;
    color: #6366f1;
    font-size: .77rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}
.lt-chat-btn:hover { background: #6366f1; color: #fff; }
.lt-chat-btn.hidden { display: none; }

/* Chat por párrafo */
.lt-para-chat { margin-top: .25rem; }
.lt-para-chat.hidden { display: none; }
.lt-chat-messages {
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: .6rem;
    padding-right: .25rem;
}
.lt-chat-msg {
    padding: .5rem .75rem;
    border-radius: 12px;
    font-size: .83rem;
    line-height: 1.5;
    max-width: 90%;
}
.lt-chat-msg--user {
    align-self: flex-end;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}
.lt-chat-msg--ai {
    align-self: flex-start;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
}
.dark-mode .lt-chat-msg--ai { background: #1e293b; }
.lt-chat-input-row {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
}
.lt-chat-input {
    flex: 1;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: .5rem .75rem;
    font-size: .83rem;
    font-family: inherit;
    color: var(--text);
    background: var(--bg);
    resize: none;
    line-height: 1.45;
    transition: border-color .18s;
}
.lt-chat-input:focus { outline: none; border-color: #6366f1; }
.dark-mode .lt-chat-input { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.lt-chat-send {
    padding: .6rem 1rem;
    border-radius: 12px;
    border: none;
    background: #6366f1;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity .15s;
}
.lt-chat-send:hover { opacity: .85; }
.lt-chat-send:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 560px) {
    .lt-wrap { padding: .5rem .6rem 2rem; }
    .lt-instruction-examples { gap: .3rem; }
}

/* ─── Classroom — Aula Virtual ───────────────────────────────── */

.cl-gate { max-width:440px; margin:4rem auto; text-align:center; padding:2rem 1.5rem; }
.cl-gate-icon { font-size:3rem; margin-bottom:.75rem; }
.cl-gate h2   { font-size:1.4rem; color:var(--text); margin-bottom:.5rem; }
.cl-gate p    { color:var(--text-muted); margin-bottom:1.25rem; }
.cl-gate-btn  { padding:.75rem 1.5rem; border-radius:14px; border:none; background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; font-weight:700; font-size:.95rem; cursor:pointer; }

.cl-wrap { max-width:780px; margin:0 auto; padding:.75rem 1rem 3rem; }
.cl-header { display:flex; align-items:center; gap:.75rem; margin-bottom:.85rem; }
.cl-title  { font-size:1.1rem; font-weight:700; color:var(--text); margin:0; flex:1; }
.cl-badge-gold { display:inline-block; padding:.15rem .5rem; border-radius:20px; background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; font-size:.72rem; font-weight:700; vertical-align:middle; margin-left:.35rem; }
.cl-notif-btn-wrap { position:relative; }
.cl-icon-btn { background:var(--surface); border:1.5px solid var(--border); border-radius:12px; padding:.35rem .6rem; font-size:1.1rem; cursor:pointer; position:relative; }
.cl-notif-badge { position:absolute; top:-4px; right:-4px; background:#ef4444; color:#fff; border-radius:999px; font-size:.65rem; font-weight:700; padding:.1rem .3rem; min-width:1rem; text-align:center; }

.cl-tabs { display:flex; gap:.4rem; border-bottom:2px solid var(--border); margin-bottom:1rem; overflow-x:auto; scrollbar-width:none; }
.cl-tabs::-webkit-scrollbar { display:none; }
.cl-tab { padding:.5rem .85rem; border:none; background:transparent; font-size:.83rem; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:color .15s,border-color .15s; }
.cl-tab.active { color:#4f46e5; border-bottom-color:#4f46e5; }
.cl-tab:hover:not(.active) { color:var(--text); }

.cl-section-title { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:.5rem; }
.cl-loading { padding:2rem; display:flex; justify-content:center; }
.cl-error   { color:#ef4444; font-size:.83rem; padding:.5rem 0; }
.cl-muted   { color:var(--text-muted); font-size:.83rem; }
.cl-label   { font-size:.8rem; font-weight:700; color:var(--text); margin-bottom:.35rem; display:block; }
.cl-input   { width:100%; box-sizing:border-box; border:1.5px solid var(--border); border-radius:12px; padding:.55rem .8rem; font-size:.88rem; font-family:inherit; color:var(--text); background:var(--bg); transition:border-color .18s; margin-bottom:.75rem; }
.cl-input:focus { outline:none; border-color:#4f46e5; }
.dark-mode .cl-input { background:#1e293b; border-color:#334155; color:#e2e8f0; }
.cl-textarea { width:100%; box-sizing:border-box; border:1.5px solid var(--border); border-radius:12px; padding:.6rem .8rem; font-size:.88rem; font-family:inherit; color:var(--text); background:var(--bg); resize:vertical; transition:border-color .18s; margin-bottom:.75rem; }
.cl-textarea:focus { outline:none; border-color:#4f46e5; }
.dark-mode .cl-textarea { background:#1e293b; border-color:#334155; color:#e2e8f0; }
.cl-save-btn { width:100%; padding:.7rem; border-radius:12px; border:none; background:linear-gradient(135deg,#4f46e5,#6366f1); color:#fff; font-size:.92rem; font-weight:700; cursor:pointer; transition:opacity .15s; }
.cl-save-btn:hover { opacity:.88; }
.cl-add-btn { display:block; width:100%; padding:.65rem; border-radius:12px; border:1.5px dashed var(--border); background:transparent; color:#4f46e5; font-size:.88rem; font-weight:600; cursor:pointer; margin-top:.5rem; transition:background .15s; }
.cl-add-btn:hover { background:rgba(79,70,229,.06); }
.cl-add-btn-sm { padding:.5rem 1rem; border-radius:10px; border:1.5px solid #4f46e5; background:transparent; color:#4f46e5; font-size:.83rem; font-weight:700; cursor:pointer; white-space:nowrap; transition:all .15s; }
.cl-add-btn-sm:hover { background:#4f46e5; color:#fff; }
.cl-success { color:#10b981; font-size:.83rem; margin-top:.5rem; }
.cl-empty { text-align:center; padding:2.5rem 1rem; color:var(--text-muted); }

.cl-class-card { background:var(--surface); border:1.5px solid var(--border); border-radius:14px; padding:.75rem 1rem; margin-bottom:.5rem; cursor:pointer; transition:border-color .15s,box-shadow .15s; }
.cl-class-card:hover,.cl-class-card.selected { border-color:#4f46e5; box-shadow:0 0 0 3px rgba(79,70,229,.1); }
.cl-class-card-head { display:flex; align-items:center; justify-content:space-between; }
.cl-class-name { font-weight:700; color:var(--text); }
.cl-class-lang { font-size:.75rem; color:#fff; background:#4f46e5; padding:.15rem .5rem; border-radius:20px; }
.cl-class-meta { font-size:.78rem; color:var(--text-muted); margin-top:.25rem; }

.cl-request-card { background:var(--surface); border:1.5px solid #fbbf24; border-radius:12px; padding:.65rem .85rem; margin-bottom:.4rem; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.cl-request-name { font-weight:700; color:var(--text); }
.cl-request-actions { display:flex; gap:.4rem; margin-left:auto; }
.cl-accept-btn { padding:.28rem .7rem; border-radius:8px; border:none; background:#10b981; color:#fff; font-size:.8rem; font-weight:700; cursor:pointer; }
.cl-reject-btn { padding:.28rem .7rem; border-radius:8px; border:none; background:#ef4444; color:#fff; font-size:.8rem; font-weight:700; cursor:pointer; }

.cl-students-list { display:flex; flex-direction:column; gap:.4rem; }
.cl-student-card { background:var(--surface); border:1.5px solid var(--border); border-radius:12px; padding:.6rem .85rem; display:flex; align-items:center; gap:.65rem; }
.cl-student-avatar { font-size:1.3rem; }
.cl-student-info  { flex:1; display:flex; flex-direction:column; }
.cl-student-name  { font-weight:700; color:var(--text); font-size:.88rem; }
.cl-student-user  { font-size:.75rem; color:var(--text-muted); }
.cl-status-badge  { padding:.18rem .55rem; border-radius:20px; font-size:.72rem; font-weight:700; }
.cl-status-active   { background:rgba(16,185,129,.12); color:#10b981; }
.cl-status-pending  { background:rgba(245,158,11,.12);  color:#d97706; }
.cl-remove-btn { padding:.2rem .45rem; border-radius:8px; border:none; background:transparent; color:#ef4444; font-size:1rem; cursor:pointer; transition:background .12s; }
.cl-remove-btn:hover { background:rgba(239,68,68,.1); }

.cl-select-class-row { margin-bottom:.65rem; }
.cl-class-select { border:1.5px solid var(--border); border-radius:10px; padding:.45rem .7rem; font-size:.85rem; background:var(--bg); color:var(--text); }
.dark-mode .cl-class-select { background:#1e293b; border-color:#334155; }
.cl-add-student-row { display:flex; gap:.5rem; align-items:center; margin-bottom:.35rem; }
.cl-add-student-row .cl-input { margin-bottom:0; flex:1; }

.cl-enrollment-card { background:var(--surface); border:1.5px solid var(--border); border-radius:16px; padding:1rem 1.1rem; margin-bottom:.75rem; display:flex; flex-direction:column; gap:.5rem; }
.cl-enrollment-head { display:flex; align-items:flex-start; justify-content:space-between; }
.cl-teacher-row { display:flex; align-items:center; gap:.65rem; background:var(--bg); border-radius:10px; padding:.5rem .75rem; }
.cl-teacher-avatar { font-size:1.4rem; }
.cl-teacher-name   { font-weight:700; color:var(--text); }
.cl-teacher-status { margin-left:auto; font-size:.78rem; font-weight:600; padding:.2rem .55rem; border-radius:20px; }
.cl-teacher-status.available   { background:rgba(16,185,129,.1); color:#10b981; }
.cl-teacher-status.unavailable { background:rgba(239,68,68,.1);  color:#ef4444; }
.cl-bio-snippet { font-size:.83rem; color:var(--text-muted); font-style:italic; margin:0; }
.cl-rate-btn { align-self:flex-start; padding:.32rem .8rem; border-radius:20px; border:1.5px solid #f59e0b; background:transparent; color:#d97706; font-size:.78rem; font-weight:700; cursor:pointer; transition:all .15s; }
.cl-rate-btn:hover { background:#f59e0b; color:#fff; }

.cl-teacher-filter { margin-bottom:.75rem; }
.cl-teachers-grid  { display:flex; flex-direction:column; gap:.65rem; }
.cl-teacher-card   { background:var(--surface); border:1.5px solid var(--border); border-radius:16px; padding:.9rem 1rem; display:flex; flex-direction:column; gap:.4rem; }
.cl-tc-head { display:flex; align-items:center; gap:.65rem; }
.cl-tc-avatar { font-size:1.6rem; }
.cl-tc-name   { font-weight:700; color:var(--text); }
.cl-tc-langs  { display:flex; flex-wrap:wrap; gap:.3rem; }
.cl-lang-chip { padding:.15rem .5rem; border-radius:20px; background:rgba(79,70,229,.1); color:#4f46e5; font-size:.75rem; font-weight:600; }
.dark-mode .cl-lang-chip { background:rgba(99,102,241,.2); }
.cl-tc-bio  { font-size:.82rem; color:var(--text-muted); margin:0; }
.cl-tc-actions { display:flex; gap:.5rem; margin-top:.25rem; }
.cl-view-btn { padding:.35rem .85rem; border-radius:10px; border:1.5px solid var(--border); background:var(--bg); color:var(--text); font-size:.8rem; font-weight:600; cursor:pointer; transition:border-color .15s; }
.cl-view-btn:hover { border-color:#4f46e5; color:#4f46e5; }
.cl-request-btn { padding:.35rem .85rem; border-radius:10px; border:none; background:#4f46e5; color:#fff; font-size:.8rem; font-weight:700; cursor:pointer; transition:opacity .15s; }
.cl-request-btn:hover { opacity:.85; }

.cl-stars         { color:#f59e0b; font-size:1.1rem; letter-spacing:.05em; }
.cl-stars-small   { font-size:.85rem; color:#f59e0b; }
.cl-rating-num    { font-weight:700; color:var(--text); font-size:.85rem; }
.cl-rating-count  { color:var(--text-muted); font-size:.8rem; }
.cl-rating-display { display:flex; align-items:center; gap:.4rem; margin-top:.5rem; }

.cl-profile-form  { display:flex; flex-direction:column; gap:.1rem; }
.cl-status-toggle { display:flex; gap:.5rem; margin-bottom:.75rem; }
.cl-status-opt    { flex:1; padding:.5rem; border-radius:10px; border:1.5px solid var(--border); background:var(--bg); color:var(--text-muted); font-size:.83rem; font-weight:600; cursor:pointer; transition:all .15s; }
.cl-status-opt.active { border-color:#4f46e5; color:#4f46e5; background:rgba(79,70,229,.06); }
.dark-mode .cl-status-opt { background:#1e293b; border-color:#334155; }
.cl-lang-picker       { display:flex; flex-direction:column; gap:.5rem; margin-bottom:.75rem; }
.cl-lang-picker-sel   { margin-bottom:0 !important; }
.cl-lang-check-list   { display:flex; flex-direction:column; gap:.3rem; }
.cl-lang-tags-empty   { font-size:.8rem; color:var(--text-muted); font-style:italic; padding:.1rem 0; }
.cl-lang-cb-row       { display:flex; align-items:center; gap:.55rem; padding:.38rem .65rem; border-radius:10px; border:1.5px solid var(--border); background:var(--bg); cursor:pointer; transition:border-color .15s, background .15s; }
.cl-lang-cb-row:has(.cl-lang-cb:checked) { border-color:#4f46e5; background:rgba(79,70,229,.05); }
.dark-mode .cl-lang-cb-row { background:#1e293b; border-color:#334155; }
.dark-mode .cl-lang-cb-row:has(.cl-lang-cb:checked) { border-color:#6366f1; background:rgba(99,102,241,.1); }
.cl-lang-cb           { width:15px; height:15px; cursor:pointer; accent-color:#4f46e5; flex-shrink:0; }
.cl-lang-cb-name      { flex:1; font-size:.85rem; color:var(--text); font-weight:500; }
.cl-lang-cb-rm        { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:1rem; line-height:1; padding:0 .1rem; opacity:.5; margin-left:auto; }
.cl-lang-cb-rm:hover  { opacity:1; color:#ef4444; }

/* legacy - kept for safety */
.cl-lang-checkboxes { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.75rem; }
.cl-lang-check { display:flex; align-items:center; gap:.35rem; padding:.28rem .65rem; border-radius:20px; border:1.5px solid var(--border); font-size:.8rem; cursor:pointer; background:var(--bg); color:var(--text-muted); transition:all .15s; }
.cl-lang-check:has(input:checked) { border-color:#4f46e5; color:#4f46e5; background:rgba(79,70,229,.07); }
.cl-lang-check input { margin:0; cursor:pointer; }

/* ── Class detail ── */
.cl-detail-title { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.cl-group-msg-btn {
    display:block; width:100%; margin-bottom:10px;
    padding:.55rem 1rem;
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    color:#fff; border:none; border-radius:10px;
    font-size:.85rem; font-weight:600; cursor:pointer; text-align:center;
    transition:opacity .15s;
}
.cl-group-msg-btn:hover { opacity:.88; }

/* ── Announcements / Calendario ── */
.cl-ann-card {
    background:var(--card-bg,#fff);
    border:1px solid var(--border,#e2e8f0);
    border-radius:12px; padding:.75rem 1rem; margin-bottom:8px;
}
.cl-ann-head { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.cl-ann-status-btn { width:13px; height:13px; border-radius:50%; flex-shrink:0; display:inline-block; }
.cl-ann-pending { background:#22c55e; }
.cl-ann-expired { background:#1e3a5f; }
.cl-ann-title { flex:1; font-weight:600; font-size:.9rem; color:var(--text,#1e293b); }
.cl-ann-del { background:none; border:none; cursor:pointer; color:var(--text-muted,#94a3b8); font-size:.85rem; padding:2px 4px; transition:color .15s; }
.cl-ann-del:hover { color:#ef4444; }
.cl-ann-body { font-size:.83rem; color:var(--text-muted,#64748b); margin:4px 0; line-height:1.5; }
.cl-ann-due { font-size:.75rem; color:var(--text-muted,#94a3b8); display:block; margin-top:4px; }
.cl-ann-form {
    background:var(--card-bg,#f8fafc);
    border:1px solid var(--border,#e2e8f0);
    border-radius:12px; padding:1rem; margin-bottom:12px;
}
.cl-cancel-btn {
    background:none; border:1.5px solid var(--border,#e2e8f0);
    border-radius:8px; padding:.5rem 1rem;
    font-size:.85rem; cursor:pointer; color:var(--text-muted,#64748b);
    transition:border-color .15s, color .15s;
}
.cl-cancel-btn:hover { border-color:#6366f1; color:#6366f1; }
.cl-form-row { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }

body.dark-mode .cl-ann-card  { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
body.dark-mode .cl-ann-title { color:#f1f5f9; }
body.dark-mode .cl-ann-form  { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.08); }
body.dark-mode .cl-ann-expired { background:#3b5080; }

.cl-chat-wrap       { display:flex; flex-direction:column; gap:.6rem; }
.cl-chat-class-name { font-weight:700; color:var(--text); font-size:.95rem; padding:.25rem 0; }
.cl-chat-tabs       { display:flex; gap:.4rem; }
.cl-chat-subtab     { padding:.4rem .85rem; border-radius:20px; border:1.5px solid var(--border); background:var(--bg); color:var(--text-muted); font-size:.8rem; font-weight:600; cursor:pointer; transition:all .15s; }
.cl-chat-subtab.active { background:#4f46e5; border-color:#4f46e5; color:#fff; }
.dark-mode .cl-chat-subtab { background:#1e293b; border-color:#334155; }
.cl-chat-msgs { min-height:260px; max-height:50vh; overflow-y:auto; background:var(--bg); border:1.5px solid var(--border); border-radius:14px; padding:.75rem; display:flex; flex-direction:column; gap:.45rem; }
.cl-msg-sender { display:block; font-size:.72rem; font-weight:700; margin-bottom:.1rem; opacity:.8; }
.cl-msg-time   { display:block; font-size:.68rem; margin-top:.15rem; opacity:.55; text-align:right; }
.cl-dm-picker  { padding:.4rem 0; margin-bottom:.3rem; }

.cl-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1100; display:flex; align-items:center; justify-content:center; padding:1rem; }
.cl-modal  { background:var(--surface); border-radius:20px; padding:1.5rem; width:100%; max-width:420px; max-height:85vh; overflow-y:auto; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.cl-modal--profile { max-width:500px; }
.cl-modal--notif   { max-width:480px; }
.cl-modal--wide    { max-width:540px; }

/* Rich text toolbar */
.cl-rich-toolbar { display:flex; gap:.3rem; align-items:center; flex-wrap:wrap; background:var(--bg); border:1.5px solid var(--border); border-bottom:none; border-radius:10px 10px 0 0; padding:.35rem .5rem; }
.cl-rt-btn { background:none; border:1px solid transparent; border-radius:6px; padding:.2rem .45rem; font-size:.88rem; cursor:pointer; color:var(--text); transition:all .15s; }
.cl-rt-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.cl-rt-select { font-size:.8rem; border:1px solid var(--border); border-radius:6px; padding:.2rem .4rem; background:var(--bg); color:var(--text); cursor:pointer; }
.cl-rich-editor { min-height:100px; background:var(--bg); border:1.5px solid var(--border); border-radius:0 0 10px 10px; padding:.55rem .65rem; font-size:.9rem; color:var(--text); outline:none; line-height:1.5; }
.cl-rich-editor:empty::before { content:attr(placeholder); color:var(--text-muted); pointer-events:none; }
.dark-mode .cl-rich-toolbar { background:#0f172a; border-color:#334155; }
.dark-mode .cl-rich-editor  { background:#0f172a; border-color:#334155; color:#f1f5f9; }

/* Group message card in chat */
.cl-msg-group-card  { background:linear-gradient(135deg,#4f46e5 0%,#6366f1 100%); border-radius:16px; padding:.9rem 1rem; margin:.25rem 0; color:#fff; box-shadow:0 4px 18px rgba(79,70,229,.3); }
.cl-msg-group-badge { font-size:.7rem; font-weight:700; letter-spacing:.04em; opacity:.8; margin-bottom:.35rem; }
.cl-msg-group-title { font-size:1rem; font-weight:700; margin-bottom:.45rem; line-height:1.3; }
.cl-msg-group-body  { font-size:.88rem; line-height:1.5; opacity:.95; }
.cl-msg-group-meta  { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:.6rem; padding-top:.5rem; border-top:1px solid rgba(255,255,255,.2); font-size:.71rem; opacity:.8; }
.cl-msg-sender-tag  { font-weight:700; }
.cl-msg-group-datetime { opacity:.9; }
.cl-modal h3       { margin:0 0 1rem; font-size:1.1rem; color:var(--text); }
.cl-modal-close    { position:absolute; top:.75rem; right:.85rem; background:none; border:none; font-size:1.5rem; color:var(--text-muted); cursor:pointer; line-height:1; }
.dark-mode .cl-modal { background:#1e293b; }

.cl-prof-head   { display:flex; gap:.75rem; align-items:flex-start; margin-bottom:.85rem; }
.cl-prof-avatar { font-size:2.5rem; }
.cl-prof-name   { font-size:1.15rem; font-weight:700; color:var(--text); margin:0 0 .1rem; }
.cl-prof-langs  { display:flex; flex-wrap:wrap; gap:.3rem; margin:.5rem 0; }
.cl-prof-bio    { font-size:.88rem; color:var(--text); line-height:1.6; }
.cl-class-pill  { display:flex; align-items:center; gap:.5rem; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:.4rem .75rem; margin-bottom:.35rem; font-size:.85rem; font-weight:600; color:var(--text); }

.cl-notif-list { display:flex; flex-direction:column; gap:.5rem; max-height:55vh; overflow-y:auto; }
.cl-notif-item { display:flex; gap:.6rem; align-items:flex-start; padding:.6rem .75rem; border-radius:12px; border:1px solid var(--border); background:var(--bg); }
.cl-notif-item.unread { border-color:#4f46e5; background:rgba(79,70,229,.04); }
.cl-notif-item--clickable { cursor:pointer; transition:border-color .12s, background .12s; }
.cl-notif-item--clickable:hover { border-color:#f59e0b; background:rgba(245,158,11,.06); }
.cl-notif-icon { font-size:1.2rem; flex-shrink:0; }
.cl-notif-body p { margin:0 0 .2rem; font-size:.83rem; color:var(--text); }
.cl-notif-time   { font-size:.72rem; color:var(--text-muted); }

/* ── ClassRooms: intro + inscripción al rol de Profesor ── */
.clr-intro-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.1rem 1.25rem; margin-bottom:1rem; }
.clr-intro-text { color:var(--text); font-size:.92rem; line-height:1.55; margin:0 0 .75rem; }
.clr-feature-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.clr-feature-list li { font-size:.88rem; color:var(--text); }
.clr-pricing-toggle { display:flex; justify-content:center; gap:.5rem; margin-bottom:1rem; }
.clr-price-card { display:flex; flex-direction:column; align-items:center; gap:.4rem; background:var(--surface); border:1.5px solid #f59e0b; border-radius:18px; padding:1.5rem; text-align:center; }
.clr-price-num { font-size:2rem; font-weight:800; color:var(--text); }
.clr-price-period { font-size:.85rem; color:var(--text-muted); margin-bottom:.5rem; }

.cl-star-picker { display:flex; gap:.3rem; margin-bottom:.75rem; justify-content:center; }
.cl-star-pick   { font-size:1.8rem; background:none; border:none; color:#d1d5db; cursor:pointer; transition:color .12s; padding:.1rem; }
.cl-star-pick.selected,.cl-star-pick:hover { color:#f59e0b; }

@media (max-width:560px) {
    .cl-wrap { padding:.5rem .6rem 2rem; }
    .cl-tabs { gap:.2rem; }
    .cl-tab  { padding:.45rem .6rem; font-size:.78rem; }
}

/* ─── Admin: Tab Usuarios ─────────────────────────────────────── */

.au-wrap { display:flex; flex-direction:column; gap:.65rem; }
.au-role-header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; padding:.1rem 0 .3rem; }
.au-role-total  { font-size:.82rem; font-weight:600; color:var(--text-muted); }
.au-role-select { font-size:.82rem; font-weight:600; border:1.5px solid var(--border); border-radius:20px; padding:.3rem .75rem; background:var(--surface); color:var(--text); cursor:pointer; outline:none; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .55rem center; padding-right:1.6rem; transition:border-color .15s; }
.au-role-select:focus { border-color:var(--primary,#4f46e5); }
body.dark-mode .au-role-select { background-color:#1e293b; border-color:#334155; color:#f1f5f9; }
.au-search-row { display:flex; align-items:center; gap:.75rem; }
.au-search {
    flex:1; padding:.55rem .85rem; border:1.5px solid var(--border); border-radius:12px;
    font-size:.88rem; font-family:inherit; background:var(--bg); color:var(--text);
    transition:border-color .18s;
}
.au-search:focus { outline:none; border-color:#6366f1; }
.dark-mode .au-search { background:#1e293b; border-color:#334155; color:#e2e8f0; }
.au-count { font-size:.78rem; color:var(--text-muted); white-space:nowrap; }

.au-list { display:flex; flex-direction:column; gap:.5rem; }

/* Card */
.au-card { background:var(--surface); border:1.5px solid var(--border); border-radius:14px; overflow:hidden; }
.au-card-head { display:flex; align-items:center; gap:.65rem; padding:.7rem .85rem; }
.au-avatar { width:2rem; height:2rem; border-radius:50%; background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.95rem; flex-shrink:0; }
.au-info { flex:1; display:flex; flex-direction:column; gap:.05rem; min-width:0; }
.au-name { font-weight:700; color:var(--text); font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.au-sub  { font-size:.72rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.au-meta { display:flex; gap:.3rem; flex-wrap:wrap; justify-content:flex-end; flex-shrink:0; }

/* Badges */
.au-badge { padding:.15rem .5rem; border-radius:20px; font-size:.7rem; font-weight:700; white-space:nowrap; }
.au-badge--dev  { background:#fef3c7; color:#92400e; }
.au-badge--plan { }
.au-badge--free     { background:rgba(100,116,139,.12); color:#64748b; }
.au-badge--premium  { background:rgba(99,102,241,.12);  color:#4f46e5; }
.au-badge--gold     { background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(217,119,6,.15)); color:#b45309; }
.au-badge--role { background:rgba(16,185,129,.12); color:#065f46; }
.dark-mode .au-badge--role { background:rgba(16,185,129,.18); color:#34d399; }

.au-expand-btn { background:none; border:none; font-size:1rem; cursor:pointer; padding:.2rem .3rem; color:var(--text-muted); transition:color .15s; flex-shrink:0; }
.au-expand-btn:hover { color:#6366f1; }

/* Editor */
.au-editor { border-top:1.5px solid var(--border); padding:.85rem; background:var(--bg); }
.au-editor.hidden { display:none; }
.dark-mode .au-editor { background:#0f172a; }
.au-editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.au-field-group { display:flex; flex-direction:column; gap:.35rem; }
.au-field-group--full { grid-column:1/-1; }
.au-label { font-size:.75rem; font-weight:700; color:var(--text-muted); }
.au-perm-hint { font-weight:400; font-style:italic; font-size:.7rem; }

.au-btn-group { display:flex; flex-wrap:wrap; gap:.3rem; }
.au-opt-btn {
    padding:.3rem .7rem; border-radius:20px; border:1.5px solid var(--border);
    background:var(--surface); color:var(--text-muted); font-size:.78rem; font-weight:600;
    cursor:pointer; transition:all .15s; text-transform:capitalize;
}
.au-opt-btn.active { border-color:#6366f1; color:#6366f1; background:rgba(99,102,241,.08); }
.dark-mode .au-opt-btn { background:#1e293b; border-color:#334155; }

.au-input {
    padding:.45rem .7rem; border:1.5px solid var(--border); border-radius:10px;
    font-size:.83rem; font-family:inherit; background:var(--surface); color:var(--text);
    transition:border-color .18s;
}
.au-input:focus { outline:none; border-color:#6366f1; }
.dark-mode .au-input { background:#1e293b; border-color:#334155; color:#e2e8f0; }

.au-perms { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.5rem; }
.au-perm-check {
    display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--text);
    cursor:pointer; padding:.3rem .5rem; border-radius:8px; transition:background .12s;
}
.au-perm-check:hover { background:rgba(99,102,241,.06); }
.au-perm-check input { margin:0; cursor:pointer; accent-color:#6366f1; }

.au-preset-btn {
    align-self:flex-start; padding:.28rem .7rem; border-radius:20px;
    border:1.5px solid var(--border); background:transparent; color:var(--text-muted);
    font-size:.75rem; font-weight:600; cursor:pointer; transition:all .15s;
}
.au-preset-btn:hover { border-color:#6366f1; color:#6366f1; }

.au-editor-foot { display:flex; align-items:center; justify-content:flex-end; gap:.75rem; margin-top:.65rem; padding-top:.65rem; border-top:1px solid var(--border); }
.au-save-btn {
    padding:.45rem 1.1rem; border-radius:10px; border:none;
    background:#6366f1; color:#fff; font-size:.85rem; font-weight:700;
    cursor:pointer; transition:opacity .15s;
}
.au-save-btn:hover { opacity:.87; }
.au-save-msg { font-size:.8rem; color:#10b981; }
.au-save-msg--err { color:#ef4444; }

/* Region summary bar */
.au-region-summary {
    display:flex; flex-wrap:wrap; align-items:center; gap:.35rem;
    padding:.5rem .75rem; background:var(--bg); border:1.5px solid var(--border);
    border-radius:12px; margin-bottom:.5rem;
}
.au-region-summary-title { font-size:.75rem; font-weight:700; color:var(--text-muted); margin-right:.15rem; }
.au-region-pill {
    padding:.18rem .6rem; border-radius:20px; font-size:.73rem; font-weight:600;
    background:var(--surface); border:1.5px solid var(--border); color:var(--text-muted);
    white-space:nowrap;
}
.au-region-filter { cursor:pointer; transition:all .15s; }
.au-region-filter:hover   { border-color:#6366f1; color:#6366f1; }
.au-region-filter--active { border-color:#6366f1 !important; color:#6366f1 !important; background:rgba(99,102,241,.07) !important; }

/* Location sub-line */
.au-location { color:#6366f1 !important; font-size:.7rem !important; }

/* Label badge */
.au-badge--label    { background:rgba(245,158,11,.12); color:#b45309; }
.dark-mode .au-badge--label { background:rgba(245,158,11,.18); color:#f59e0b; }
.au-badge--active   { background:rgba(16,185,129,.12); color:#065f46; }
.au-badge--inactive { background:rgba(239,68,68,.1);   color:#991b1b; }
.dark-mode .au-badge--active   { color:#34d399; }
.dark-mode .au-badge--inactive { color:#fca5a5; }

/* Managed regions block */
.au-managed-regions { border-top:1px dashed var(--border); padding-top:.65rem; }
.au-region-checks   { columns:2; column-gap:1rem; }
@media (max-width:480px) { .au-region-checks { columns:1; } }

/* Teacher assign block (rol Estudiante) */
.au-teacher-assign       { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; padding:.45rem .6rem; border-radius:10px; background:rgba(99,102,241,.06); border:1.5px solid rgba(99,102,241,.2); }
.au-teacher-assign-label { font-size:.78rem; color:var(--text-muted); }
.au-teacher-name         { font-size:.82rem; font-weight:600; color:var(--text); flex:1; }
.au-teacher-pick-btn     { font-size:.75rem; padding:.25rem .6rem; border-radius:8px; border:1.5px solid #6366f1; background:transparent; color:#6366f1; cursor:pointer; font-weight:600; white-space:nowrap; }
.au-teacher-pick-btn:hover { background:#6366f1; color:#fff; }
.au-teacher-tag          { color:#6366f1 !important; font-size:.7rem !important; }
.au-muted                { color:var(--text-muted); font-weight:400; }

/* Teacher picker modal */
.au-tp-loading  { display:flex; justify-content:center; padding:1.5rem; }
.au-tp-list     { display:flex; flex-direction:column; gap:.35rem; max-height:280px; overflow-y:auto; padding-right:.25rem; }
.au-tp-row      { display:flex; align-items:center; gap:.65rem; padding:.45rem .6rem; border-radius:10px; border:1.5px solid var(--border); cursor:pointer; transition:border-color .15s, background .15s; }
.au-tp-row:hover { border-color:#6366f1; background:rgba(99,102,241,.04); }
.au-tp-row:has(input:checked) { border-color:#6366f1; background:rgba(99,102,241,.08); }
.au-tp-row input { cursor:pointer; accent-color:#6366f1; }
.au-tp-info     { display:flex; flex-direction:column; flex:1; }
.au-tp-name     { font-size:.85rem; font-weight:600; color:var(--text); }
.au-tp-user     { font-size:.75rem; color:var(--text-muted); }
.au-tp-status   { font-size:.85rem; }
.dark-mode .au-tp-row { background:#1e293b; border-color:#334155; }
.dark-mode .au-tp-row:has(input:checked) { border-color:#6366f1; background:rgba(99,102,241,.15); }

@media (max-width:560px) {
    .au-editor-grid { grid-template-columns:1fr; }
    .au-field-group--full { grid-column:1; }
}

/* Famous grid más compacto */
.famous-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.famous-card-item {
    padding: 0.9rem 0.75rem !important;
    border-radius: 16px !important;
}
.famous-avatar {
    font-size: 1.6rem;
    margin-bottom: 0.25rem;
}
.famous-card-item h3 {
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
}
.famous-card-item p {
    font-size: 0.75rem;
}

/* Práctica más compacta */
.practice-section {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}
.practice-title {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}
.practice-btn {
    aspect-ratio: unset;        /* quita el cuadrado forzado */
    padding: 0.85rem 0.5rem;
    border-radius: 16px;
}
.practice-icon {
    font-size: 1.6rem;
    margin-bottom: 0.25rem;
}
.practice-btn h3 {
    font-size: 0.82rem;
    margin: 0.2rem 0 0.15rem;
}
.practice-btn p {
    font-size: 0.7rem;
}

/* Músicos más compacto */
.mode-card[data-mode="musicians"] {
    padding: 1rem 1.25rem;
}

/* ========== THEMES PANEL ========== */
/* ── Theme panel overlay ── */
.tp-overlay {
  position: fixed; inset: 0; z-index: 8500;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: flex-end;
  animation: obFadeIn .22s ease;
  padding: .75rem;
}
@media (max-width: 600px) {
  .tp-overlay { align-items: flex-end; justify-content: center; padding: 0; }
  .tp-sheet   { border-radius: 22px 22px 0 0 !important; max-width: 100% !important; }
}
.tp-overlay.tp-fade-out { animation: obFadeOut .25s ease forwards; }

.tp-sheet {
  background: var(--surface, #fff);
  width: 100%; max-width: 420px;
  border-radius: 20px;
  display: flex; flex-direction: column;
  max-height: 96vh;
  box-shadow: 0 24px 60px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.05);
  animation: tpSlideIn .28s cubic-bezier(.22,.68,0,1.2);
}
@keyframes tpSlideIn {
  from { transform: translateX(32px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@media (max-width: 600px) {
  @keyframes tpSlideIn {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
}

/* Header */
.tp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem 1rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary, #6366f1) 0%, var(--primary-dark, #4f46e5) 100%);
  border-radius: 20px 20px 0 0;
}
.tp-header-left { display: flex; align-items: center; gap: .65rem; }
.tp-header-icon { font-size: 1.5rem; }
.tp-title   { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0; }
.tp-subtitle { font-size: .75rem; color: rgba(255,255,255,.75); margin: 0; }
.tp-close {
  background: rgba(255,255,255,.15); border: none;
  font-size: .9rem; cursor: pointer; color: #fff;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s; flex-shrink: 0;
}
.tp-close:hover { background: rgba(255,255,255,.3); }

/* Body */
.tp-body {
  flex: 1; overflow-y: auto; padding: 1.1rem 1.25rem;
  display: flex; flex-direction: column; gap: .85rem;
  scrollbar-width: thin;
}

.tp-section-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted); margin-bottom: .1rem;
}

.tp-divider {
  height: 1px; background: var(--border); margin: .25rem 0;
}

/* Theme grid */
.tp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }

.tp-card {
  border: 2px solid var(--border); border-radius: 14px;
  overflow: hidden; cursor: pointer;
  transition: border-color .2s, transform .15s, box-shadow .2s;
  position: relative; background: var(--surface);
}
.tp-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.tp-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* Preview */
.tp-preview { height: 80px; display: flex; flex-direction: column; }
.tp-prev-hd {
  height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 .5rem;
}
.tp-prev-hd-dots { display: flex; gap: 3px; }
.tp-prev-hd-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.5);
}
.tp-prev-hd-bar {
  height: 5px; width: 40%; border-radius: 3px;
  background: rgba(255,255,255,.35);
}
.tp-prev-bd {
  flex: 1; padding: .35rem .4rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.tp-prev-cards { display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.tp-prev-c--wide { height: 13px; border-radius: 4px; opacity: .8; }
.tp-prev-c-row { display: flex; gap: .3rem; }
.tp-prev-c { height: 10px; flex: 1; border-radius: 3px; opacity: .65; }

/* Card footer */
.tp-card-footer {
  padding: .5rem .65rem .55rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: .3rem;
}
.tp-card-name { font-size: .8rem; font-weight: 700; color: var(--text); }
.tp-card-desc { font-size: .68rem; color: var(--text-muted); margin-top: .1rem; }
.tp-always-dark-badge {
  font-size: .62rem; background: #1e1b4b; color: #c4b5fd;
  border-radius: 8px; padding: .15rem .4rem; white-space: nowrap; flex-shrink: 0;
}

.tp-check {
  position: absolute; top: .4rem; right: .4rem;
  background: var(--primary); color: white;
  font-size: .6rem; font-weight: 900;
  width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s, transform .2s;
  transform: scale(.6);
}
.tp-card.selected .tp-check { opacity: 1; transform: scale(1); }

/* Custom theme block */
.tp-custom {
  background: var(--body-bg); border-radius: 14px; padding: 1rem;
  display: flex; flex-direction: column; gap: .9rem;
  border: 2px solid var(--border);
  transition: border-color .2s;
}
.tp-custom.active { border-color: var(--primary); }

.tp-cfield { display: flex; flex-direction: column; gap: .35rem; }
.tp-cfield label { font-size: .8rem; font-weight: 600; color: var(--text); }
.tp-cfield select {
  padding: .5rem .75rem; border: 1.5px solid var(--border);
  border-radius: 9px; font-size: .85rem;
  background: var(--surface); color: var(--text); width: 100%;
  transition: border-color .2s;
}
.tp-cfield select:focus { outline: none; border-color: var(--primary); }

/* Color presets */
.tp-presets-row {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .35rem;
}
.tp-preset-dot {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2.5px solid transparent; cursor: pointer;
  transition: transform .15s, border-color .15s;
  flex-shrink: 0;
}
.tp-preset-dot:hover { transform: scale(1.2); }
.tp-preset-dot.selected { border-color: var(--text); transform: scale(1.1); }

/* Color row */
.tp-color-row { display: flex; align-items: center; gap: .55rem; }
input[type="color"]#tpColor {
  width: 36px; height: 28px; border: none; border-radius: 6px;
  cursor: pointer; padding: 0; background: none; flex-shrink: 0;
}
.tp-swatch {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--border); flex-shrink: 0;
  transition: background .2s;
}
.tp-hex { font-size: .78rem; color: var(--text-muted); font-family: monospace; }
.tp-hex-label { font-size: .7rem; color: var(--text-muted); margin-left: auto; }

/* Font preview */
.tp-font-preview {
  font-size: .9rem; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: .5rem .75rem;
  transition: font-family .3s;
}

/* Radius */
.tp-radius-header { display: flex; justify-content: space-between; align-items: center; }
.tp-radius-header strong { font-size: .82rem; color: var(--primary); font-weight: 700; }
.tp-range { width: 100%; accent-color: var(--primary); cursor: pointer; }
.tp-radius-hints {
  display: flex; justify-content: space-between;
  font-size: .68rem; color: var(--text-muted); margin-top: .2rem;
}

/* Live preview */
.tp-live-preview {
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border);
}
.tp-live-wrap {
  border: 1px solid transparent; border-radius: 10px; overflow: hidden;
}
.tp-live-header {
  height: 28px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 .65rem;
}
.tp-live-hd-dots { display: flex; gap: 4px; }
.tp-live-hd-dots span {
  width: 6px; height: 6px; border-radius: 50%;
}
.tp-live-body {
  display: flex; gap: .5rem; padding: .5rem .6rem;
}
.tp-live-card {
  flex: 1; padding: .45rem .5rem; display: flex; flex-direction: column; gap: .3rem;
}
.tp-live-card-line { height: 6px; }
.tp-live-card-line--short { width: 60%; }
.tp-live-footer { padding: .4rem .6rem .6rem; }
.tp-live-btn {
  font-size: .72rem; font-weight: 700;
  padding: .35rem .75rem; display: inline-block;
}

/* Background btn */
.tp-bg-btn {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 9px; padding: .5rem .85rem; font-size: .83rem;
  cursor: pointer; color: var(--text); width: 100%; text-align: left;
  transition: background .2s, border-color .2s;
}
.tp-bg-btn:hover { background: var(--border); border-color: var(--primary); }

/* Activate custom btn */
.tp-act-custom {
  padding: .65rem; border: none; border-radius: 10px;
  font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: all .2s;
  background: var(--border); color: var(--text);
}
.tp-act-custom.on {
  background: var(--primary); color: white;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* Footer */
.tp-footer {
  display: flex; gap: .65rem; padding: .9rem 1.25rem;
  border-top: 1px solid var(--border); flex-shrink: 0;
}
.tp-btn-cancel {
  flex: 1; padding: .75rem; background: var(--body-bg); color: var(--text-muted);
  border: 1.5px solid var(--border); border-radius: 11px;
  font-size: .9rem; cursor: pointer; transition: background .2s;
}
.tp-btn-cancel:hover { background: var(--border); }
.tp-btn-apply {
  flex: 2; padding: .75rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white; border: none; border-radius: 11px;
  font-size: .95rem; font-weight: 700;
  cursor: pointer; transition: opacity .2s, transform .15s;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent);
}
.tp-btn-apply:hover { opacity: .9; transform: translateY(-1px); }
.tp-btn-apply:active { transform: translateY(0); }

/*----------------------------------------------------*/
/*----------------------------------------------------*/


/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/




/*----------------------------------------------------*/
/* ===========/* ============ IMMERSION — inicio ============
   Reemplazar este bloque completo cada vez que se actualice.
   Seleccionar desde este comentario hasta "IMMERSION — fin"
   y pegar la nueva versión. No borrar nada más.
   ============================================ */


/* ─────────────────────────────────────────────
   BASE: Wrapper y topbar
   ───────────────────────────────────────────── */

.imm-wrap {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 700px;
  margin: 0 auto;
}

.imm-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.imm-page-title {
  flex: 1;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.imm-back-btn {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  transition: background 0.15s;
}
.imm-back-btn:hover { background: var(--border, #e2e8f0); }

.imm-add-btn {
  background: var(--accent, #6366f1);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.imm-add-btn:hover { opacity: 0.85; }

/* ── Selector de idioma en topbar ── */
.imm-lang-picker-wrap {
  position: relative;
}
.imm-lang-picker {
  appearance: none;
  -webkit-appearance: none;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 6px 28px 6px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 0.15s;
}
.imm-lang-picker:hover { border-color: var(--primary, #6366f1); }

/* ── Cartel introductorio ── */
.imm-intro-banner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 0.65rem 1rem;
  margin-bottom: 0.25rem;
  font-size: 0.83rem;
  color: var(--text-muted, #64748b);
  line-height: 1.5;
}
.imm-intro-icon { font-size: 1.3rem; flex-shrink: 0; }
.imm-intro-banner strong { color: var(--text); }

/* ── Botón editar línea de subtítulo (admin) ── */
.imm-sub-line-inner {
  flex: 1;
}
.imm-sub-edit-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  color: rgba(255,255,255,0.7);
  font-size: 0.75rem;
  padding: 2px 6px;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  transition: background 0.15s;
}
.imm-sub-edit-btn:hover { background: rgba(255,255,255,0.3); color: white; }

.imm-sub-curr {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

/* Editor inline de subtítulo */
.imm-sub-editor {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem;
  background: rgba(0,0,0,0.5);
  border-radius: 10px;
  width: 100%;
}
.imm-sub-editor-label {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.imm-sub-editor-input {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  color: white;
  font-size: 0.88rem;
  padding: 0.4rem 0.6rem;
  resize: none;
  font-family: inherit;
  line-height: 1.4;
}
.imm-sub-editor-input:focus { outline: none; border-color: rgba(99,102,241,0.7); }
.imm-sub-editor-btns {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.15rem;
}
.imm-sub-cancel-btn { font-size: 0.82rem; padding: 0.35rem 0.75rem; }

/* ── Botón fijar (admin) ── */
.imm-pin-content-btn {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.6rem 1rem;
  background: linear-gradient(135deg, #f59e0b22, #f59e0b11);
  border: 1.5px solid #f59e0b66;
  border-radius: 12px;
  color: #b45309;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.imm-pin-content-btn:hover {
  background: linear-gradient(135deg, #f59e0b33, #f59e0b22);
  border-color: #f59e0b;
}
body.dark-mode .imm-pin-content-btn { color: #fbbf24; }

.imm-pinned-badge {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  background: #f59e0b11;
  border: 1px dashed #f59e0b66;
  border-radius: 12px;
  color: #92400e;
  font-size: 0.8rem;
  text-align: center;
}
body.dark-mode .imm-pinned-badge { color: #fbbf24; }

/* ── Botón editar en panel del player ── */
.imm-edit-content-btn {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.6rem 1rem;
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 12px;
  color: var(--text-muted, #64748b);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, color 0.15s;
}
.imm-edit-content-btn:hover {
  border-color: var(--primary, #6366f1);
  color: var(--primary, #6366f1);
}

/* ─────────────────────────────────────────────
   BASE: Estado vacío
   ───────────────────────────────────────────── */

.imm-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}
.imm-empty-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
}
.imm-empty p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}


/* ─────────────────────────────────────────────
   BASE: Grupos de idioma y cards
   ───────────────────────────────────────────── */

.imm-lang-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.imm-lang-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.imm-lang-flag { font-size: 1.2rem; }
.imm-lang-name { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); }

.imm-cards-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Card base */
.imm-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px;
  padding: 0.75rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}
.imm-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.imm-card-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--border, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
  overflow: hidden;
}

.imm-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.imm-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.imm-card-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.imm-card-foot {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.imm-tag {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--border, #e2e8f0);
  color: var(--text-muted);
  border: 1px solid transparent;
  text-transform: capitalize;
}
.imm-tag-lines {
  font-size: 0.68rem;
  color: var(--text-muted);
  padding: 2px 0;
}

/* ── Etiqueta de nivel MCER (mismos colores que el Evaluador de Nivel) ── */
.imm-tag--level {
  text-transform: none;
  font-weight: 700;
  color: #fff;
  background: #94a3b8; /* S/N por defecto */
}
.imm-tag--level[data-level="A1"] { background: #10b981; }
.imm-tag--level[data-level="A2"] { background: #34d399; }
.imm-tag--level[data-level="B1"] { background: #3b82f6; }
.imm-tag--level[data-level="B2"] { background: #6366f1; }
.imm-tag--level[data-level="C1"] { background: #8b5cf6; }
.imm-tag--level[data-level="C2"] { background: #ec4899; }
.imm-card--cinematic .imm-tag--level { color: #fff; }

/* ── Etiquetas de idioma objetivo / subtítulos ── */
.imm-tag--target, .imm-tag--sub {
  text-transform: none;
  font-weight: 600;
  background: rgba(99,102,241,0.12);
  color: var(--accent, #6366f1);
}
.imm-card--cinematic .imm-tag--target,
.imm-card--cinematic .imm-tag--sub { background: rgba(255,255,255,0.15); color: #fff; }

/* ── Fila de filtros del catálogo ── */
.imm-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}


/* ─────────────────────────────────────────────
   BASE: Study area — header info
   ───────────────────────────────────────────── */

.imm-sa-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.imm-sa-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.imm-sa-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.imm-flag-badge {
  font-size: 1.5rem;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────
   BASE: Video section
   ───────────────────────────────────────────── */

.imm-video-section {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px;
  overflow: hidden;
}
.imm-video-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.imm-video-body { padding: 0.75rem; }

.imm-toggle-vid {
  background: none;
  border: none;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.imm-toggle-vid:hover { background: var(--border, #e2e8f0); }

/* Controles avanzados colapsables (video HTML5: velocidad + marcadores,
   redundante con el <video controls> nativo, así que arranca cerrado) */
.imm-player-collapse { display: flex; flex-direction: column; gap: 0.5rem; }
.imm-player-toggle {
  background: none;
  border: 1px dashed var(--border, #e2e8f0);
  border-radius: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.4rem 0.7rem;
  text-align: left;
  transition: background 0.15s;
}
.imm-player-toggle:hover { background: var(--border, #e2e8f0); }
.imm-player-toggle-arrow { float: right; }
.imm-player-collapse-body.hidden { display: none; }

.imm-yt-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  text-align: center;
  font-style: italic;
}


/* ─────────────────────────────────────────────
   BASE: Reproductor de audio
   ───────────────────────────────────────────── */

.imm-player {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.imm-progress-wrap { display: flex; flex-direction: column; gap: 4px; }

.imm-progress-bar {
  position: relative;
  height: 6px;
  background: var(--border, #e2e8f0);
  border-radius: 3px;
  cursor: pointer;
  overflow: visible;
}
.imm-progress-fill {
  height: 100%;
  background: var(--accent, #6366f1);
  border-radius: 3px;
  pointer-events: none;
}
.imm-progress-thumb {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  background: var(--accent, #6366f1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform 0.1s;
}
.imm-progress-thumb:active { cursor: grabbing; transform: translate(-50%, -50%) scale(1.2); }

/* Track de marcadores sobre la barra */
.imm-bm-track {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.imm-bm-marker {
  position: absolute;
  top: -3px;
  width: 3px;
  height: 12px;
  background: #f59e0b;
  border-radius: 2px;
  transform: translateX(-50%);
  cursor: pointer;
  pointer-events: all;
  transition: background 0.15s;
}
.imm-bm-marker:hover { background: #d97706; }

.imm-time-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.imm-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.imm-play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent, #6366f1);
  color: #fff;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s, transform 0.1s;
}
.imm-play:hover { opacity: 0.85; transform: scale(1.05); }

.imm-ctrl {
  background: var(--border, #e2e8f0);
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  transition: background 0.15s;
}
.imm-ctrl:hover { background: #d1d5db; }

.imm-bm-ctrl {
  background: none;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s;
}
.imm-bm-ctrl:hover { background: var(--border, #e2e8f0); }

.imm-no-audio {
  font-size: 0.75rem;
  color: #f59e0b;
  text-align: center;
  padding: 0.25rem 0;
}


/* ─────────────────────────────────────────────
   BASE: Bookmarks list
   ───────────────────────────────────────────── */

.imm-bm-list {
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.imm-bm-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 4px 0;
}
.imm-bm-go {
  background: none;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 7px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--accent, #6366f1);
  white-space: nowrap;
  transition: background 0.15s;
}
.imm-bm-go:hover { background: var(--border, #e2e8f0); }
.imm-bm-note {
  flex: 1;
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.imm-bm-rm {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 2px 5px;
  border-radius: 5px;
  transition: background 0.15s;
}
.imm-bm-rm:hover { background: #fee2e2; color: #ef4444; }


/* ─────────────────────────────────────────────
   BASE: Modal overlay
   ───────────────────────────────────────────── */

.imm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.imm-modal {
  background: var(--card-bg, #fff);
  border-radius: 20px;
  padding: 1.5rem;
  width: min(460px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.imm-modal h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.imm-modal-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  font-size: 0.88rem;
  background: var(--card-bg, #fff);
  color: var(--text);
  box-sizing: border-box;
  font-family: inherit;
}
.imm-modal-input:focus {
  outline: none;
  border-color: var(--accent, #6366f1);
}

.imm-modal-btns {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

.imm-add-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.imm-add-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.imm-add-field--full { width: 100%; }

/* Rows de subtítulos manuales */
.imm-row {
  display: grid;
  grid-template-columns: 80px 80px 1fr 1fr auto;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.4rem;
}
.imm-t-in   { max-width: 80px; }
.imm-txt-in { min-width: 0; }

.imm-row-del-btn {
  background: none;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.8rem;
  transition: background 0.15s;
}
.imm-row-del-btn:hover { background: #fee2e2; color: #ef4444; }

.imm-add-row-btn {
  background: none;
  border: 1px dashed var(--accent, #6366f1);
  color: var(--accent, #6366f1);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s;
}
.imm-add-row-btn:hover { background: rgba(99,102,241,0.07); }


/* ─────────────────────────────────────────────
   V2: Banner con imagen (study area)
   ───────────────────────────────────────────── */

.imm-banner {
  position: relative;
  width: 100%;
  min-height: 130px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 0.9rem 1rem;
  box-sizing: border-box;
  background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
  gap: 0.75rem;
}
.imm-banner--img { background-size: cover; }
.imm-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
  border-radius: inherit;
  pointer-events: none;
}
.imm-banner > * { position: relative; z-index: 1; }

.imm-back-btn--banner {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 5px 12px;
  font-size: 0.8rem; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.imm-back-btn--banner:hover { background: rgba(0,0,0,0.55); }

.imm-edit-banner-btn {
  position: absolute;
  top: 0.75rem; left: 3.5rem;
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(255,255,255,0.25);
  color: white;
  border-radius: 8px;
  padding: 0.3rem 0.55rem;
  font-size: 0.85rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.2s;
}
.imm-edit-banner-btn:hover { background: rgba(0,0,0,0.6); }

/* ── Toast: sin audio/video ── */
.imm-no-media-toast {
  position: fixed;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  background: #1e293b;
  color: #e2e8f0;
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 420px;
  width: calc(100% - 2rem);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 9000;
  font-size: 0.88rem;
  line-height: 1.5;
  transition: opacity 0.3s ease, transform 0.3s ease;
  border-left: 3px solid #6366f1;
}
.imm-no-media-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.imm-no-media-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.imm-no-media-close {
  margin-left: auto;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 1rem;
  flex-shrink: 0;
  padding: 0 0.25rem;
}

.imm-banner .imm-flag-badge {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  font-size: 1.4rem;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}

.imm-banner-pill {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  padding: 0.45rem 0.85rem;
  max-width: calc(100% - 2rem);
}
.imm-banner-title {
  font-size: 1rem; font-weight: 800;
  color: #000; line-height: 1.3;
}
.imm-banner-sub {
  font-size: 0.75rem; font-weight: 600;
  color: rgba(0,0,0,0.7);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.imm-banner:not(.imm-banner--img) .imm-banner-pill  { background: rgba(255,255,255,0.22); }
.imm-banner:not(.imm-banner--img) .imm-banner-title { color: #000; }
.imm-banner:not(.imm-banner--img) .imm-banner-sub   { color: rgba(0,0,0,0.65); }


/* ─────────────────────────────────────────────
   V2: Cards — progreso + cinemática
   ───────────────────────────────────────────── */

.imm-card-progbar {
  height: 3px;
  background: var(--border, #e2e8f0);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.imm-card-progfill {
  height: 100%;
  background: var(--accent, #6366f1);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.imm-card-proglabel {
  font-size: 0.7rem;
  color: var(--accent, #6366f1);
  font-weight: 600;
  margin-top: 2px;
  display: block;
}

.imm-card--cinematic {
  position: relative;
  min-height: 110px;
  flex-direction: row;
  align-items: stretch;
}

/* Div de imagen de fondo — evita conflictos con background shorthand del card */
.imm-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  border-radius: inherit;
}
.imm-card--cinematic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.75) 45%,
    rgba(0,0,0,0.25) 70%, rgba(0,0,0,0) 100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.imm-card--cinematic .imm-card-body     { position: relative; z-index: 1; max-width: 68%; }
.imm-card--cinematic .imm-card-title    { color: #fff; }
.imm-card--cinematic .imm-card-sub      { color: rgba(255,255,255,0.65); }
.imm-card--cinematic .imm-tag           { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.2); }
.imm-card--cinematic .imm-tag-lines     { color: rgba(255,255,255,0.55); }
.imm-card--cinematic .imm-card-proglabel{ color: #a5f3fc; }
.imm-card--cinematic .imm-card-progbar  { background: rgba(255,255,255,0.2); }
.imm-card--cinematic .imm-card-progfill { background: #a5f3fc; }

.imm-card-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  z-index: 2;
}
.imm-edit-btn,
.imm-card-actions .imm-del-btn {
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 4px 7px;
  font-size: 0.85rem;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s;
}
.imm-edit-btn:hover,
.imm-card-actions .imm-del-btn:hover { background: rgba(0,0,0,0.7); }

.imm-card:not(.imm-card--cinematic) .imm-edit-btn,
.imm-card:not(.imm-card--cinematic) .imm-card-actions .imm-del-btn {
  background: var(--border, #e2e8f0);
  border-color: transparent;
  color: var(--text);
}
.imm-card:not(.imm-card--cinematic) .imm-edit-btn:hover,
.imm-card:not(.imm-card--cinematic) .imm-card-actions .imm-del-btn:hover { background: #d1d5db; }


/* ─────────────────────────────────────────────
   V2: Study area — progreso global y controles
   ───────────────────────────────────────────── */

.imm-study-wrap { display: flex; flex-direction: column; gap: 0.75rem; }

.imm-global-prog-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.25rem;
}
.imm-global-prog-bar {
  flex: 1; height: 6px;
  background: var(--border, #e2e8f0);
  border-radius: 3px; overflow: hidden;
}
.imm-global-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #6366f1), #818cf8);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.imm-global-prog-label {
  font-size: 0.72rem; font-weight: 700;
  color: var(--accent, #6366f1); white-space: nowrap;
}

.imm-player-mini {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--card-bg, #fff);
  border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0);
}
.imm-speed-sel {
  font-size: 0.8rem; padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--card-bg, #fff);
  color: var(--text); cursor: pointer;
}


/* ─────────────────────────────────────────────
   V2: Subtitle stage
   ───────────────────────────────────────────── */

.imm-sub-mode-wrap {
  display: flex;
  justify-content: center;
}
.imm-sub-mode-wrap .imm-lang-picker {
  max-width: 100%;
}

.imm-subtitle-stage {
  position: relative;
  background: var(--card-bg, #fff);
  border-radius: 18px;
  border: 1px solid var(--border, #e2e8f0);
  padding: 1.25rem 1rem;
  min-height: 190px;
  display: flex; flex-direction: column;
  justify-content: center; gap: 0.6rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.25) 14%, rgba(0,0,0,1) 30%,
    rgba(0,0,0,1) 70%, rgba(0,0,0,.25) 86%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.25) 14%, rgba(0,0,0,1) 30%,
    rgba(0,0,0,1) 70%, rgba(0,0,0,.25) 86%, transparent 100%);
}
.imm-sub-line { text-align: center; transition: opacity 0.3s ease; }
.imm-sub-prev { opacity: 0.45; font-size: 0.85rem; }
.imm-sub-curr { opacity: 1;    font-size: 1.05rem; }
.imm-sub-next { opacity: 0.45; font-size: 0.85rem; }

/* pre-line: los subtítulos agrupados de a 2 líneas se unen con \n y deben
   verse como 2 renglones reales, no como un solo texto corrido */
.imm-sub-orig { font-weight: 600; line-height: 1.5; color: var(--text, #111827); white-space: pre-line; }
.imm-sub-orig.imm-sub-idle { color: var(--text-muted); font-weight: 400; font-style: italic; white-space: normal; }
.imm-sub-orig.imm-sub-idle--error { color: #ef4444; font-style: normal; }
.imm-sub-trans { font-size: 0.85rem; color: var(--text-muted); margin-top: 3px; font-style: italic; white-space: pre-line; }

/* Fundido al aparecer un nuevo par de subtítulos */
@keyframes immSubFadeIn { from { opacity: 0; } to { opacity: 1; } }
.imm-sub-curr.imm-sub-fade-in .imm-sub-line-inner { animation: immSubFadeIn 0.35s ease; }

.imm-word {
  cursor: pointer; border-radius: 4px;
  padding: 1px 2px; display: inline;
  transition: background 0.15s, color 0.15s;
}
.imm-word:hover { background: var(--accent, #6366f1); color: #fff; }
.imm-sub-prev .imm-word,
.imm-sub-next .imm-word { cursor: default; pointer-events: none; }

.imm-word-hint {
  text-align: center; font-size: 0.72rem;
  color: var(--text-muted); padding: 0 0.5rem;
}


/* ─────────────────────────────────────────────
   V2: Popup guardar palabra
   ───────────────────────────────────────────── */

.imm-word-popup {
  position: absolute; z-index: 9999;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  padding: 1rem;
  min-width: 240px; max-width: 320px;
  animation: immWpPop .15s ease;
}
@keyframes immWpPop {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.imm-wp-word { font-size: 1.2rem; font-weight: 700; color: var(--accent, #6366f1); margin-bottom: 0.6rem; }
.imm-wp-input,
.imm-wp-select {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px; font-size: 0.88rem;
  background: var(--card-bg, #fff);
  color: var(--text); margin-bottom: 0.5rem; box-sizing: border-box;
}
.imm-wp-btns { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.25rem; }
.imm-wp-cancel { font-size: 0.8rem; padding: 6px 10px; }
.imm-wp-save   { font-size: 0.8rem; padding: 6px 12px; }


/* ─────────────────────────────────────────────
   V2: Marcadores (colapsable)
   ───────────────────────────────────────────── */

.imm-bm-details {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px; overflow: hidden;
}
.imm-bm-details > summary {
  list-style: none; cursor: pointer;
  padding: 0.7rem 1rem; font-size: 0.88rem; font-weight: 600;
  color: var(--text);
  display: flex; align-items: center; gap: 0.5rem; user-select: none;
}
.imm-bm-details > summary::-webkit-details-marker { display: none; }
.imm-bm-details > summary::after { content: '▾'; margin-left: auto; transition: transform .2s; }
.imm-bm-details[open] > summary::after { transform: rotate(-180deg); }
.imm-bm-badge {
  background: var(--accent, #6366f1); color: #fff;
  border-radius: 999px; padding: 1px 7px;
  font-size: 0.72rem; font-weight: 700;
}
.imm-bm-empty { padding: 0.75rem 1rem; font-size: 0.82rem; color: var(--text-muted); }

/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/


/* ─────────────────────────────────────────────
   V2: Modal agregar / editar
   ───────────────────────────────────────────── */

.imm-add-modal { max-height: 85vh; overflow-y: auto; width: min(520px, 95vw); }

.imm-add-section {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px; padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.imm-add-section-title {
  font-weight: 700; font-size: 0.88rem;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.imm-add-row3 { display: grid; grid-template-columns: 1fr 80px 80px; gap: 0.5rem; }
.imm-add-row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.5rem; }

.imm-file-hidden { display: none; }
.imm-file-btn {
  display: inline-block; padding: 6px 14px;
  background: var(--accent, #6366f1); color: #fff;
  border-radius: 8px; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: opacity .15s;
}
.imm-file-btn:hover { opacity: 0.85; }
.imm-file-name { font-size: 0.78rem; color: var(--text-muted); margin-left: 0.5rem; }

.imm-radio-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.imm-radio-opt {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.85rem; cursor: pointer;
  padding: 4px 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  transition: border-color .15s, background .15s;
}
.imm-radio-opt:has(input:checked) {
  border-color: var(--accent, #6366f1);
  background: rgba(99,102,241,0.07);
}
.imm-radio-content        { margin-top: 0.4rem; }
.imm-radio-content.hidden { display: none; }
.imm-file-note { font-size: 0.75rem; color: #f59e0b; margin: 0.2rem 0 0; }
.imm-optional-hint { font-weight: 400; font-size: 0.78rem; color: var(--text-muted); text-transform: none; }

/* Preview imagen con drag-to-reposition */
.imm-img-preview {
  position: relative; width: 100%; height: 120px;
  border-radius: 10px;
  background-size: cover; background-position: center;
  background-color: var(--border, #e2e8f0);
  border: 1px solid var(--border, #e2e8f0);
  margin-top: 0.5rem;
  cursor: grab; overflow: hidden; user-select: none;
}
.imm-img-preview:active { cursor: grabbing; }
.imm-img-preview.hidden { display: none; }

.imm-img-drag-hint {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 0.7rem; font-weight: 600;
  padding: 3px 10px; border-radius: 99px;
  white-space: nowrap; pointer-events: none;
}
.imm-img-crosshair {
  position: absolute; width: 18px; height: 18px;
  transform: translate(-50%, -50%); pointer-events: none;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 0 6px rgba(0,0,0,0.3);
}
.imm-img-crosshair::before,
.imm-img-crosshair::after {
  content: ''; position: absolute;
  background: rgba(255,255,255,0.9);
  left: 50%; top: 50%; transform: translate(-50%,-50%);
}
.imm-img-crosshair::before { width: 1px; height: 8px; }
.imm-img-crosshair::after  { width: 8px; height: 1px; }

/* Preview SRT */
.imm-srt-preview        { margin-top: 0.5rem; }
.imm-srt-preview.hidden { display: none; }
.imm-srt-ok  { color: #10b981; font-size: 0.82rem; font-weight: 700; margin-bottom: 0.4rem; }
.imm-srt-err { color: #ef4444; font-size: 0.82rem; }
.imm-srt-row {
  display: flex; gap: 0.5rem; font-size: 0.78rem;
  color: var(--text); padding: 3px 0;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.imm-srt-t { color: var(--accent, #6366f1); font-weight: 600; white-space: nowrap; }
.imm-srt-more { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }

.imm-translate-panel {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.imm-translate-srt-btn {
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: block;
  width: 100%;
  transition: opacity 0.2s;
}
.imm-translate-srt-btn:hover  { opacity: 0.88; }
.imm-translate-srt-btn:disabled { opacity: 0.55; cursor: default; }

/* ── Textarea para "Texto completo" en modal de agregar ── */
.imm-modal-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.8rem;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--input-bg, #f8fafc);
  color: var(--text, #1e293b);
  font-size: 0.85rem;
  line-height: 1.55;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.15s;
}
.imm-modal-textarea:focus { outline: none; border-color: rgba(99,102,241,0.7); }
.dark-mode .imm-modal-textarea { background: rgba(255,255,255,.05); color: #f1f5f9; border-color: rgba(255,255,255,.1); }

/* ── Botón "Editar subtítulos" en el player ── */
.imm-sub-edit-open-btn {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.6rem 1rem;
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 12px;
  color: var(--text-muted, #64748b);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, color 0.15s;
}
.imm-sub-edit-open-btn:hover { border-color: #f59e0b; color: #d97706; }

/* ── Panel editor de subtítulos ── */
.imm-sub-editor-panel {
  margin-top: 0.5rem;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 14px;
  overflow: hidden;
}

.imm-sed-toolbar {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--card-bg, #f8fafc);
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.imm-sed-btn {
  padding: 0.4rem 0.85rem;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted, #64748b);
  transition: all 0.15s;
}
.imm-sed-btn--text:hover, .imm-sed-btn--text.imm-sed-btn--active { border-color: #6366f1; color: #6366f1; background: rgba(99,102,241,.08); }
.imm-sed-btn--save { margin-left: auto; background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff; border-color: transparent; }
.imm-sed-btn--save:hover { opacity: 0.88; }
.imm-sed-btn--save:disabled { opacity: 0.55; cursor: default; }

.imm-sed-hint {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted, #64748b);
  background: var(--card-bg, #f8fafc);
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.imm-sed-list {
  max-height: 360px;
  overflow-y: auto;
  background: var(--bg, #fff);
}
.imm-sed-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border, #f1f5f9);
}
.imm-sed-row:last-child { border-bottom: none; }

.imm-sed-times {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-shrink: 0;
}
.imm-sed-mark {
  padding: 0.2rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--card-bg, #f8fafc);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
  font-family: monospace;
  color: var(--text-muted, #64748b);
}
.imm-sed-mark--start:hover { border-color: #10b981; color: #059669; background: rgba(16,185,129,.08); }
.imm-sed-mark--end:hover   { border-color: #f59e0b; color: #d97706; background: rgba(245,158,11,.08); }

.imm-sed-text {
  flex: 1;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text, #1e293b);
  padding: 0.15rem 0.25rem;
  border-radius: 6px;
  word-break: break-word;
  cursor: default;
}
.imm-sed-text--editable {
  cursor: text;
  background: var(--input-bg, #f8fafc);
  border: 1px dashed var(--border, #cbd5e1);
  outline: none;
}
.imm-sed-text--editable:focus { border-color: #6366f1; background: rgba(99,102,241,.04); }

.dark-mode .imm-sub-editor-panel { border-color: rgba(255,255,255,.1); }
.dark-mode .imm-sed-toolbar, .dark-mode .imm-sed-hint { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.dark-mode .imm-sed-list { background: var(--bg); }
.dark-mode .imm-sed-row { border-color: rgba(255,255,255,.06); }
.dark-mode .imm-sed-mark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #94a3b8; }
.dark-mode .imm-sed-text { color: #e2e8f0; }
.dark-mode .imm-sed-text--editable { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.15); }
.dark-mode .imm-sub-edit-open-btn { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: #94a3b8; }

.imm-srt-progress {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.imm-srt-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--border, #e2e8f0);
  border-radius: 6px;
  overflow: hidden;
}
.imm-srt-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 6px;
  transition: width 0.3s ease;
  width: 0%;
}

#aAudioSection.hidden { display: none; }


/* ─────────────────────────────────────────────
   Dark mode
   ───────────────────────────────────────────── */

.dark-mode .imm-subtitle-stage               { border-color: rgba(255,255,255,.08); }
.dark-mode .imm-word:hover                   { background: var(--accent, #818cf8); }
.dark-mode .imm-word-popup                   { box-shadow: 0 8px 30px rgba(0,0,0,.45); }
.dark-mode .imm-radio-opt:has(input:checked) { background: rgba(129,140,248,.12); }
.dark-mode .imm-global-prog-bar              { background: rgba(255,255,255,.1); }
.dark-mode .imm-card-progbar                 { background: rgba(255,255,255,.1); }
.dark-mode .imm-bm-details                   { border-color: rgba(255,255,255,.08); }
.dark-mode .imm-player-mini                  { border-color: rgba(255,255,255,.08); }
.dark-mode .imm-player                       { border-color: rgba(255,255,255,.08); }
.dark-mode .imm-video-section                { border-color: rgba(255,255,255,.08); }
.dark-mode .imm-card                         { border-color: rgba(255,255,255,.08); }


/* ============ IMMERSION — fin ============ */

/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/

/* ============ SCHOOL MODE — inicio ============
   Reemplazar este bloque completo cada vez que se actualice.
   ================================================ */


/* ── Panel principal ── */

.school-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  max-width: 680px;
  margin: 0 auto;
  height: calc(100dvh - 130px); /* descontar header + language bar */
  box-sizing: border-box;
}


/* ── Header ── */

.school-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.school-back-btn {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  transition: background 0.15s;
  white-space: nowrap;
}
.school-back-btn:hover { background: var(--border, #e2e8f0); }

.school-header-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.school-header-icon { font-size: 1.3rem; }


/* ── Toolbar: VOZ | SPEED | NIVEL ── */

.school-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px;
  padding: 0.6rem 0.85rem;
}

/* Botón base: VOZ y SPEED */
.school-tb-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--border, #f1f5f9);
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted, #64748b);
  transition: all 0.18s ease;
  white-space: nowrap;
}
.school-tb-btn:hover {
  border-color: var(--accent, #6366f1);
  color: var(--accent, #6366f1);
}

/* Estado activo del VOZ */
.school-tb-btn[data-on="true"] {
  background: rgba(99,102,241,0.1);
  border-color: var(--accent, #6366f1);
  color: var(--accent, #6366f1);
}

.school-tb-icon  { font-size: 1rem; }
.school-tb-label { font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; }

/* Badge ON/OFF y valor de speed */
.school-tb-pill {
  background: var(--border, #e2e8f0);
  border-radius: 99px;
  padding: 2px 7px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: background 0.18s, color 0.18s;
}
.school-tb-btn[data-on="true"] .school-tb-pill {
  background: var(--accent, #6366f1);
  color: #fff;
}

/* Separador entre VOZ/SPEED y el select de nivel */
.school-toolbar .school-speed-wrap { flex: 1; position: relative; }

/* Select de nivel — limpio, sin label */
.school-level-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--border, #f1f5f9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 7px 32px 7px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s;
  min-width: 70px;
}
.school-level-select:hover,
.school-level-select:focus {
  outline: none;
  border-color: var(--accent, #6366f1);
}


/* ── Speed dropdown ── */

.school-speed-wrap { position: relative; }

.school-speed-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 100;
  min-width: 90px;
}
.school-speed-panel.hidden { display: none; }

.school-speed-opt {
  background: none;
  border: none;
  border-radius: 9px;
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted, #64748b);
  text-align: center;
  transition: background 0.12s, color 0.12s;
}
.school-speed-opt:hover { background: var(--border, #f1f5f9); color: var(--text); }
.school-speed-opt.active {
  background: var(--accent, #6366f1);
  color: #fff;
}


/* ── Chat ── */

.school-chat {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0.25rem;
  /* Scrollbar minimalista */
  scrollbar-width: thin;
  scrollbar-color: var(--border, #e2e8f0) transparent;
}
.school-chat::-webkit-scrollbar { width: 4px; }
.school-chat::-webkit-scrollbar-thumb { background: var(--border, #e2e8f0); border-radius: 2px; }

/* Fila de mensaje */
.school-msg-wrap {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  animation: schoolMsgIn .2s ease;
}
@keyframes schoolMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.school-msg-wrap--user      { flex-direction: row-reverse; }
.school-msg-wrap--assistant { flex-direction: row; }

/* Avatar del asistente */
.school-msg-avatar {
  font-size: 1.4rem;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border, #f1f5f9);
  border-radius: 50%;
}

/* Burbuja */
.school-msg-bubble {
  max-width: 75%;
  padding: 0.65rem 1rem;
  border-radius: 18px;
  font-size: 0.9rem;
  line-height: 1.55;
}

.school-msg-bubble--assistant {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-bottom-left-radius: 6px;
  color: var(--text);
}

.school-msg-bubble--user {
  background: var(--accent, #6366f1);
  color: #fff;
  border-bottom-right-radius: 6px;
}

/* Sistema / error */
.school-msg-system {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
  padding: 0.25rem 0;
}

/* Typing indicator */
.school-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 2px 0;
}
.school-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted, #94a3b8);
  animation: schoolDot 1.2s infinite ease-in-out;
}
.school-dots span:nth-child(2) { animation-delay: .2s; }
.school-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes schoolDot {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
  40%            { transform: scale(1);   opacity: 1;   }
}


/* ── Input ── */

.school-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 16px;
  padding: 0.6rem 0.6rem 0.6rem 1rem;
  transition: border-color 0.15s;
}
.school-input-wrap:focus-within { border-color: var(--accent, #6366f1); }

.school-textarea {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text);
  resize: none;
  line-height: 1.5;
  min-height: 24px;
  max-height: 120px;
  overflow-y: auto;
}
.school-textarea::placeholder { color: var(--text-muted, #94a3b8); }

.school-send-btn {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--accent, #6366f1);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s, transform 0.1s;
}
.school-send-btn:hover  { opacity: 0.85; }
.school-send-btn:active { transform: scale(0.93); }


/* ── Acciones rápidas ── */

.school-actions {
  display: flex;
  gap: 0.5rem;
}

.school-action-btn {
  flex: 1;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 8px 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  text-align: center;
}
.school-action-btn:hover {
  border-color: var(--accent, #6366f1);
  color: var(--accent, #6366f1);
  background: rgba(99,102,241,0.05);
}


/* ── Dark mode ── */

.dark-mode .school-tb-btn     { background: rgba(255,255,255,.07); color: var(--text-muted); }
.dark-mode .school-tb-btn:hover { border-color: var(--accent, #818cf8); color: var(--accent, #818cf8); }
.dark-mode .school-tb-pill     { background: rgba(255,255,255,.1); }
.dark-mode .school-level-select { background-color: rgba(255,255,255,.07); }
.dark-mode .school-speed-panel { box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.dark-mode .school-msg-bubble--assistant { border-color: rgba(255,255,255,.08); }
.dark-mode .school-input-wrap  { border-color: rgba(255,255,255,.1); }
.dark-mode .school-input-wrap:focus-within { border-color: var(--accent, #818cf8); }
.dark-mode .school-action-btn  { border-color: rgba(255,255,255,.08); }
.dark-mode .school-action-btn:hover { background: rgba(129,140,248,.1); }
.dark-mode .school-msg-avatar  { background: rgba(255,255,255,.07); }
.dark-mode .school-toolbar     { border-color: rgba(255,255,255,.08); }


/* ============ SCHOOL MODE — fin ============ */

/* ============ MISION HUB — gamified path ============ */

.mision-hub {
    padding: 1rem 1rem 0;
    max-width: 480px;
    margin: 0 auto;
}

/* Intro row: text + Tutorial button */
.mision-intro-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}

.mision-intro-text {
    flex: 1;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.mision-tutorial-btn {
    flex-shrink: 0;
    background: transparent;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    border-radius: 20px;
    padding: 0.35rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.mision-tutorial-btn:hover {
    background: var(--primary);
    color: #fff;
}

/* Path title */
.mision-path-title {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 1.1rem;
}
.mision-path-title em {
    font-style: normal;
    color: var(--primary);
}

/* Tabs del hub de Inglés: Curriculum A1 | Modismos y Phrasal Verbs */
.ingles-hub-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}
.ingles-hub-tab {
    padding: 0.4rem 0.85rem;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--card-bg, #fff);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
}
.ingles-hub-tab.active {
    border-color: var(--accent, #6366f1);
    background: var(--accent, #6366f1);
    color: #fff;
}
.ingles-hub-tab:hover:not(.active) { border-color: var(--accent, #6366f1); }
.dark-mode .ingles-hub-tab { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,.12); }

/* ─── Vocabulario Contextual ─────────────────────────────────── */
.vctx-wrap { max-width: 680px; margin: 0 auto; padding: 0 1rem 2rem; }

.vctx-hero { text-align: center; padding: 1.5rem 1rem 1rem; }
.vctx-hero-icon { font-size: 2rem; display: block; margin-bottom: .4rem; }
.vctx-hero-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 .4rem; }
.vctx-hero-note { font-size: .8rem; color: var(--text-muted); margin: 0; }

.vctx-section { margin-bottom: 1.25rem; }
.vctx-section-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent, #6366f1); margin-bottom: .6rem; }

.vctx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vctx-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.vctx-table th { text-align: left; padding: .4rem .6rem; font-size: .75rem; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border, #e5e7eb); }
.vctx-table td { padding: .5rem .6rem; vertical-align: top; border-bottom: 1px solid var(--border, #e5e7eb); }
.vctx-vocab-word { font-weight: 600; white-space: nowrap; }
.vctx-vocab-phonetic { display: block; font-size: .78rem; color: var(--text-muted); font-weight: 400; }
.vctx-vocab-pos { color: var(--text-muted); font-size: .8rem; white-space: nowrap; }
.vctx-vocab-trans { }
.vctx-vocab-note { font-size: .8rem; color: var(--text-muted); font-style: italic; }

.vctx-dialogue { display: flex; flex-direction: column; gap: .75rem; }
.vctx-turn { display: flex; flex-direction: column; gap: .25rem; }
.vctx-turn-speaker { font-size: .75rem; font-weight: 700; color: var(--accent, #6366f1); text-transform: uppercase; letter-spacing: .04em; padding-left: .25rem; }
.vctx-turn-bubble { background: var(--card-bg, #f9fafb); border: 1px solid var(--border, #e5e7eb); border-radius: .75rem; padding: .6rem .85rem; }
.vctx-turn-text { font-size: .9rem; line-height: 1.45; }
.vctx-turn-trans { font-size: .8rem; color: var(--text-muted); margin-top: .3rem; font-style: italic; }
.vctx-turn-note { font-size: .78rem; color: var(--accent, #6366f1); margin-top: .25rem; }
.dark-mode .vctx-turn-bubble { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }

.vctx-actions { margin-top: 1.5rem; display: flex; justify-content: center; }

/* Grid de escenarios por nivel */
.vctx-level-section { margin-bottom: 1.5rem; }
.vctx-level-header { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: .6rem; padding: 0 .25rem; }
.vctx-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; }
.vctx-card { position: relative; display: flex; flex-direction: column; gap: .25rem; background: var(--card-bg, #f9fafb); border: 1.5px solid var(--border, #e5e7eb); border-radius: .75rem; padding: .75rem .85rem; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.vctx-card:hover { border-color: var(--accent, #6366f1); box-shadow: 0 2px 8px rgba(99,102,241,.12); }
.vctx-card--done { border-color: #22c55e; background: rgba(34,197,94,.06); }
.vctx-card-check { position: absolute; top: .5rem; right: .6rem; font-size: .85rem; color: #22c55e; }
.vctx-card-scenario { font-size: .85rem; font-weight: 600; line-height: 1.3; }
.vctx-card-meta { font-size: .75rem; color: var(--text-muted); }
.dark-mode .vctx-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.dark-mode .vctx-card--done { border-color: #22c55e; background: rgba(34,197,94,.08); }

/* Scroll container */
.mision-path-grid {
    padding: 0.25rem 0 1rem;
    overflow-x: auto;
}

/* Snake wrapper */
.mision-snake {
    display: flex;
    flex-direction: column;
    min-width: 300px;
}

/* ── Shared 7-column grid: 4 node cols (1fr) + 3 connector cols (12px) ── */
.msnake-hrow,
.msnake-vblock,
.msnake-turn {
    display: grid;
    grid-template-columns: 1fr 12px 1fr 12px 1fr 12px 1fr;
}

/* ── Horizontal row ── */
.msnake-hrow { align-items: center; }

/* ── Turn connector: línea vertical en el extremo del giro ── */
.msnake-turn { height: 16px; }
.msnake-turn-line {
    width: 2.5px;
    background: var(--border);
    justify-self: center;
    align-self: stretch;
}
.msnake-turn--right .msnake-turn-line { grid-column: 7; }
.msnake-turn--left  .msnake-turn-line { grid-column: 1; }

/* ── Bloque vertical: área de contenido + columna de módulos ── */
.msnake-vblock { align-items: stretch; }

/* Área de contenido: ocupa 6 de las 7 columnas */
.msnake-area--right { grid-column: 1 / 7; }   /* área izquierda, módulo derecha */
.msnake-area--left  { grid-column: 2 / 8; }   /* módulo izquierda, área derecha */

/* Columna de módulos: 1 columna */
.msnake-vcol--right { grid-column: 7; }
.msnake-vcol--left  { grid-column: 1; }

/* Card del área de contenido */
.msnake-area {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.75rem;
    min-height: calc(3 * 52px + 2 * 16px); /* altura de 3 nodos + 2 conectores */
}
.msnake-area--sm { min-height: 52px; }
.msnake-area-ph {
    font-size: 0.73rem;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
    line-height: 1.4;
}

/* Columna flex de módulos apilados */
.msnake-vcol {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Conector vertical entre módulos del vcol */
.msnake-vcon {
    width: 2.5px;
    height: 16px;
    background: var(--border);
    align-self: center;
}

/* ── Conector horizontal (rellena las 12px entre nodos) ── */
.msnake-con-h {
    height: 2.5px;
    background: var(--border);
    align-self: center;
}

/* ── Nodo / módulo ── */
.msnake-node {
    border-radius: 10px;
    padding: 0.45rem 0.3rem;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid;
    transition: transform 0.15s, box-shadow 0.15s;
    text-align: center;
    user-select: none;
}
.msnake-node:hover  { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.msnake-node:active { transform: none; }

.msnake-node--pending {
    background: rgba(59,130,246,0.08);
    border-color: var(--primary);
}

/* Colores por categoría (solo nodos pendientes) */
.msnake-node--pending[data-category="Gramática"] {
    background: rgba(14,165,233,0.10);
    border-color: #0ea5e9;
}
.msnake-node--pending[data-category="Funciones comunicativas"] {
    background: rgba(232,121,249,0.10);
    border-color: #e879f9;
}
.msnake-node--pending[data-category="Vocabulario"] {
    background: rgba(139,92,246,0.10);
    border-color: #8b5cf6;
}
body.dark-mode .msnake-node--pending[data-category="Gramática"] {
    background: rgba(14,165,233,0.15);
    border-color: #38bdf8;
}
body.dark-mode .msnake-node--pending[data-category="Funciones comunicativas"] {
    background: rgba(232,121,249,0.15);
    border-color: #f0abfc;
}
body.dark-mode .msnake-node--pending[data-category="Vocabulario"] {
    background: rgba(139,92,246,0.15);
    border-color: #a78bfa;
}
/* Conversaciones (inglés A1) */
.msnake-node--pending[data-modtype="conversation"] {
    background: rgba(124,58,237,0.10);
    border-color: #7c3aed;
}
body.dark-mode .msnake-node--pending[data-modtype="conversation"] {
    background: rgba(124,58,237,0.15);
    border-color: #8b5cf6;
}
/* Gramática — variantes multiidioma (azul) */
.msnake-node--pending[data-category="Grammaire"],
.msnake-node--pending[data-category="Grammatik"],
.msnake-node--pending[data-category="Grammatica"] {
    background: rgba(14,165,233,0.10);
    border-color: #0ea5e9;
}
body.dark-mode .msnake-node--pending[data-category="Grammaire"],
body.dark-mode .msnake-node--pending[data-category="Grammatik"],
body.dark-mode .msnake-node--pending[data-category="Grammatica"] {
    background: rgba(14,165,233,0.15);
    border-color: #38bdf8;
}
/* Funciones comunicativas — variantes multiidioma (teal) */
.msnake-node--pending[data-category="Fonctions communicatives"],
.msnake-node--pending[data-category="Funktionen"],
.msnake-node--pending[data-category="Funzioni comunicative"],
.msnake-node--pending[data-category="Funções comunicativas"],
.msnake-node--pending[data-category="Funktionskommunikation"] {
    background: rgba(20,184,166,0.10);
    border-color: #14b8a6;
}
body.dark-mode .msnake-node--pending[data-category="Fonctions communicatives"],
body.dark-mode .msnake-node--pending[data-category="Funktionen"],
body.dark-mode .msnake-node--pending[data-category="Funzioni comunicative"],
body.dark-mode .msnake-node--pending[data-category="Funções comunicativas"],
body.dark-mode .msnake-node--pending[data-category="Funktionskommunikation"] {
    background: rgba(20,184,166,0.15);
    border-color: #2dd4bf;
}
.msnake-node--done {
    background: rgba(39,174,96,0.10);
    border-color: #27ae60;
}
.msnake-node--milestone {
    background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(251,191,36,0.06));
    border-color: #f59e0b;
    cursor: default;
}
.msnake-node--milestone:hover { transform: none; box-shadow: none; }

.msnake-node--mid-quiz {
    background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(56,189,248,0.08));
    border-color: #0ea5e9;
    cursor: pointer;
}
.msnake-node--mid-quiz .msnake-label { color: #0284c7; font-weight: 700; }
.msnake-node--mid-quiz:hover { box-shadow: 0 0 0 3px rgba(14,165,233,0.25); }

.msnake-node--quiz-final {
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.08));
    border-color: #6366f1;
    cursor: pointer;
}
.msnake-node--quiz-final .msnake-label { color: #6366f1; font-weight: 700; }
.msnake-node--quiz-final:hover { box-shadow: 0 0 0 3px rgba(99,102,241,0.25); }

.msnake-node--examen-final {
    background: linear-gradient(135deg, rgba(234,179,8,0.14), rgba(251,146,60,0.08));
    border-color: #eab308;
    cursor: pointer;
}
.msnake-node--examen-final .msnake-label { color: #ca8a04; font-weight: 700; }
.msnake-node--examen-final:hover { box-shadow: 0 0 0 3px rgba(234,179,8,0.30); }

.msnake-node--play {
    background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(220,38,38,0.06));
    border-color: #ef4444;
    cursor: pointer;
}
.msnake-node--play .msnake-label { color: #dc2626; font-weight: 700; }
.msnake-node--play:hover { box-shadow: 0 0 0 3px rgba(239,68,68,0.22); }
.msnake-node--play.msnake-node--playing { background: rgba(239,68,68,0.18); }

.msnake-node--start-level {
    background: linear-gradient(135deg, rgba(16,185,129,0.14), rgba(5,150,105,0.08));
    border-color: #10b981;
    cursor: pointer;
    animation: pulse-green 2s infinite;
}
.msnake-node--start-level .msnake-label { color: #059669; font-weight: 700; }
.msnake-node--start-level:hover { box-shadow: 0 0 0 3px rgba(16,185,129,0.30); }
@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
    50%       { box-shadow: 0 0 0 4px rgba(16,185,129,0.20); }
}

.msnake-node--locked {
    opacity: 0.45;
    cursor: not-allowed;
}
.msnake-node--locked:hover { transform: none; box-shadow: none; }

/* ── Mision toast ── */
.mision-toast {
    position: fixed;
    bottom: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #f1f5f9;
    padding: .6rem 1.25rem;
    border-radius: 1rem;
    font-size: .85rem;
    font-weight: 500;
    z-index: 9999;
    animation: fadeInUp .25s ease, fadeOut .3s ease 2.5s forwards;
    pointer-events: none;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes fadeOut {
    to { opacity: 0; }
}

.msnake-label {
    font-size: 0.63rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.25;
    word-break: break-word;
}
.msnake-node--done .msnake-label      { color: #27ae60; }
.msnake-node--milestone .msnake-label { color: #f59e0b; font-size: 0.68rem; font-weight: 700; }

/* ── Playing state (Pronunciación activa) ── */
.msnake-node--playing {
    background: rgba(239,68,68,0.08) !important;
    border-color: #ef4444 !important;
    flex-direction: column;
    gap: 3px;
}
.msnake-play-icon {
    font-size: 1.15rem;
    color: #ef4444;
    line-height: 1;
}
.msnake-play-label {
    font-size: 0.58rem;
    font-weight: 700;
    color: #ef4444;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Placeholder nodes ── */
.msnake-node--placeholder {
    background: var(--surface);
    border-color: var(--border);
    border-style: dashed;
    opacity: 0.7;
    cursor: default;
}
.msnake-node--placeholder:hover { transform: none; box-shadow: none; }

/* ── YouTube embed en área ── */
.msnake-area--video {
    padding: 0;
    overflow: hidden;
    align-items: stretch;
}
.msnake-yt-iframe {
    width: 100%;
    flex: 1;
    min-height: 190px;
    border: none;
    border-radius: 10px;
    display: block;
}

/* ── Nodo disparador de chat (amarillo, tamaño de módulo) ── */
.msnake-node--chat {
    background: rgba(245,158,11,0.14);
    border-color: #f59e0b;
    margin-bottom: 6px;
}
.msnake-node--chat .msnake-label { color: #b45309; font-weight: 700; }
.msnake-node--chat:hover { box-shadow: 0 0 0 3px rgba(245,158,11,0.25); }
.msnake-node--chat.msnake-node--playing { background: rgba(245,158,11,0.24); }
.dark-mode .msnake-node--chat { background: rgba(245,158,11,0.1); }
.dark-mode .msnake-node--chat .msnake-label { color: #fbbf24; }

/* ── Chat embebido dentro del área ── */
.msnake-area--chat {
    padding: 0.5rem;
    align-items: stretch;
    overflow: hidden;
}
.mchat-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    min-height: 190px;
}
.mchat-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-right: 2px;
}
.mchat-msg {
    max-width: 88%;
    padding: 0.45rem 0.65rem;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.4;
    word-break: break-word;
}
.mchat-msg--user {
    align-self: flex-end;
    background: var(--accent, #6366f1);
    color: #fff;
}
.mchat-msg--assistant {
    align-self: flex-start;
    background: var(--surface, #f1f5f9);
    color: var(--text);
}
.mchat-thinking .school-dots { display: inline-flex; gap: 3px; }
.mchat-input-row { display: flex; gap: 0.4rem; }
.mchat-input {
    flex: 1;
    resize: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    font-family: inherit;
    background: var(--card-bg, #fff);
    color: var(--text);
}
.mchat-send-btn {
    width: 34px;
    border: none;
    border-radius: 10px;
    background: var(--accent, #6366f1);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
}
.mchat-send-btn:hover { opacity: 0.9; }
.dark-mode .mchat-msg--assistant { background: rgba(255,255,255,0.06); }
.dark-mode .mchat-input { background: #0f172a; border-color: #334155; }

/* ── Intro card modal ── */
.mision-intro-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.48);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.mision-intro-modal {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem 1.5rem 1.75rem;
    max-width: 340px;
    width: 100%;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.mision-intro-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1;
    padding: 0.2rem;
}
.mision-intro-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.4rem;
}
.mision-intro-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0 0 0.85rem;
}
.mision-intro-list {
    padding-left: 1.25rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    list-style: disc;
}
.mision-intro-list li {
    font-size: 0.85rem;
    color: var(--text);
}

/* Divider between hub and school mode */
.mision-hub-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem 1rem;
    max-width: 480px;
    margin: 0 auto;
}
.mision-hub-divider::before,
.mision-hub-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.mision-hub-divider span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Dark mode */
body.dark-mode .msnake-node--pending  { background: rgba(91,155,213,0.12); }
body.dark-mode .msnake-node--done     { background: rgba(39,174,96,0.12); border-color: #2ecc71; }
body.dark-mode .msnake-node--done .msnake-label { color: #2ecc71; }
body.dark-mode .mision-intro-row      { background: rgba(255,255,255,0.04); }

/* ============ MISION HUB — fin ============ */

/* ============ MÓDULO A1 — vista de contenido ============ */

.ma1-wrap {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ma1-topbar {
    padding: 0.75rem 0 0;
}

/* Hero */
.ma1-hero {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 16px;
}
.ma1-emoji { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.ma1-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
    margin: 0;
}

/* Secciones genéricas */
.ma1-section {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 1rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.ma1-section--rule { border-color: var(--primary); background: rgba(99,102,241,0.04); }

.ma1-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}
.ma1-bridge, .ma1-rule {
    font-size: 0.87rem;
    color: var(--text);
    line-height: 1.65;
    margin: 0;
}
.ma1-rule { font-weight: 600; }

/* Ejemplos clave (concept_examples) */
.ma1-section--examples { border-color: #0ea5e9; background: rgba(14,165,233,0.04); }
.ma1-examples-list { display: flex; flex-direction: column; gap: 0.6rem; }
.ma1-example-item {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
}
.ma1-example-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.ma1-example-phonetic {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.1rem;
}
.ma1-example-translation {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* Error común */
.ma1-error-wrong {
    font-size: 0.84rem;
    color: #ef4444;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
    background: rgba(239,68,68,0.08);
    border-radius: 8px;
    border-left: 3px solid #ef4444;
}
.ma1-error-correct {
    font-size: 0.84rem;
    color: #27ae60;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
    background: rgba(39,174,96,0.08);
    border-radius: 8px;
    border-left: 3px solid #27ae60;
}
.ma1-error-exp {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.55;
}

/* Niveles */
.ma1-level {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.ma1-level + .ma1-level { margin-top: 0.65rem; }

.ma1-level-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.85rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.ma1-level-num {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    background: rgba(99,102,241,0.1);
    padding: 0.15rem 0.45rem;
    border-radius: 20px;
    flex-shrink: 0;
}
.ma1-level-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}
.ma1-level-trans {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Ejemplos dentro de cada nivel */
.ma1-examples { padding: 0.75rem 0.85rem; display: flex; flex-direction: column; gap: 0.75rem; }
.ma1-example { display: flex; flex-direction: column; gap: 0.2rem; }
.ma1-ex-original {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}
.ma1-ex-translation {
    font-size: 0.82rem;
    color: var(--text-muted);
}
.ma1-ex-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
    padding: 0.3rem 0.55rem;
    background: rgba(245,158,11,0.07);
    border-left: 2px solid #f59e0b;
    border-radius: 0 6px 6px 0;
    margin-top: 0.15rem;
}

/* Botón completado */
.ma1-done-btn {
    margin-top: 0.5rem;
    width: 100%;
    padding: 0.85rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}
.ma1-done-btn:hover { opacity: 0.88; }

/* Botones de nivel */
.ma1-level-btns {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.ma1-level-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.ma1-level-btn:hover { border-color: var(--primary); background: rgba(99,102,241,0.04); }
.ma1-level-btn--done { border-color: #27ae60; background: rgba(39,174,96,0.06); }
.ma1-level-btn-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ma1-level-btn--done .ma1-level-btn-num { background: #27ae60; }
.ma1-level-btn-info { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.ma1-level-btn-label { font-size: 0.85rem; font-weight: 700; color: var(--text); }
.ma1-level-btn-sub   { font-size: 0.73rem; color: var(--text-muted); font-style: italic; }
.ma1-level-btn-arrow { font-size: 0.9rem; color: var(--text-muted); }

/* ── Audio button in dialogue ── */
.ma1-conv-audio-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.55;
    padding: 0 0.2rem;
    vertical-align: middle;
    transition: opacity 0.15s;
    line-height: 1;
}
.ma1-conv-audio-btn:hover { opacity: 1; }

/* ── add_ejercicios01 ── */
.ej01-section { margin-top: 1.5rem; }
.ej01-btns { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
.ej01-btn {
    background: none;
    border: 1.5px solid rgba(255,255,255,0.35);
    border-radius: 10px;
    color: var(--text);
    padding: 0.7rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, background 0.2s;
}
.ej01-btn:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.04); }
.ej01-btn--done {
    border-color: #22c55e !important;
    color: #22c55e !important;
    cursor: default;
}
.ej01-panel { display: none; margin-top: 1rem; }
.ej01-panel--active { display: block; }
.ej01-progress { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.6rem; }
.ej01-card {
    background: var(--card-bg, rgba(255,255,255,0.04));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.ej01-speaker { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ej01-blanked-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ej01-blanked { font-size: 1rem; font-weight: 600; color: var(--text); }
.ej01-audio-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: border-color 0.15s;
}
.ej01-audio-btn:hover { border-color: var(--primary); color: var(--primary); }
.ej01-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ej01-opt {
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: none;
    padding: 0.45rem 0.9rem;
    font-size: 0.88rem;
    cursor: pointer;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s;
}
.ej01-opt:hover:not(:disabled) { border-color: var(--primary); }
.ej01-opt--correct { border-color: #22c55e !important; background: rgba(34,197,94,0.10) !important; color: #22c55e !important; }
.ej01-opt--wrong   { border-color: #ef4444 !important; background: rgba(239,68,68,0.10) !important; color: #ef4444 !important; }
.ej01-feedback { font-size: 0.82rem; min-height: 1.2rem; }
.ej01-ok { color: #22c55e; font-weight: 700; margin-right: 0.4rem; }
.ej01-trans { color: var(--text-muted); font-style: italic; }
.ej01-done-msg {
    text-align: center;
    color: #22c55e;
    font-weight: 700;
    padding: 1rem;
    font-size: 0.95rem;
}
/* Ejercicio 2 */
.ej01-write-item { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; }
.ej01-write-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; font-size: 0.95rem; color: var(--text); }
.ej01-audio-inline { flex-shrink: 0; }
.ej01-input {
    border: 1.5px solid var(--border);
    border-radius: 6px;
    background: none;
    color: var(--text);
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
    width: 110px;
    outline: none;
    transition: border-color 0.15s;
}
.ej01-input:focus { border-color: var(--primary); }
.ej01-input--correct { border-color: #22c55e !important; }
.ej01-input--wrong   { border-color: #ef4444 !important; }
.ej01-write-feedback { font-size: 0.8rem; padding-left: 0.2rem; min-height: 1rem; }
.ej01-err { color: #ef4444; }
.ej01-err em { font-weight: 700; font-style: normal; }
.ej01-check-btn {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.65rem;
    border: 1.5px solid var(--primary);
    border-radius: 10px;
    background: none;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s;
}
.ej01-check-btn:hover { background: rgba(99,102,241,0.08); }
.ej01-empty { font-size: 0.82rem; color: var(--text-muted); padding: 0.5rem 0; }

/* ── Conversation module (inglés A1) ── */
.ma1-cat { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }
.ma1-conv-vocab {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}
.ma1-conv-vocab th {
    text-align: left;
    padding: 0.4rem 0.6rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.ma1-conv-vocab td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.ma1-conv-dialogue { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }
.ma1-conv-bubble {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    max-width: 90%;
}
.ma1-conv-bubble--a {
    align-self: flex-start;
    background: rgba(99,102,241,0.07);
    border: 1px solid rgba(99,102,241,0.18);
}
.ma1-conv-bubble--b {
    align-self: flex-end;
    background: rgba(249,115,22,0.07);
    border: 1px solid rgba(249,115,22,0.18);
}
.ma1-conv-speaker { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ma1-conv-text { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.ma1-conv-translation { font-size: 0.82rem; color: var(--text-muted); font-style: italic; }
.ma1-conv-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }

/* ============ MÓDULO A1 — fin ============ */

/* ============ QUIZ DE NIVEL ============ */

.quiz-wrap {
    max-width: 520px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    display: flex;
    flex-direction: column;
    min-height: 70vh;
}

/* Barra superior */
.quiz-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0 1rem;
}
.quiz-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 99px;
    overflow: hidden;
}
.quiz-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 99px;
    transition: width 0.3s ease;
}
.quiz-counter {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Cuerpo */
.quiz-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}
.quiz-prompt-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin: 0;
}
.quiz-prompt {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    padding: 1rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    position: relative;
    text-align: center;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Opciones */
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.quiz-opt {
    width: 100%;
    padding: 0.9rem 1rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s, background 0.12s;
    min-height: 52px;
}
.quiz-opt:hover:not(:disabled) { border-color: var(--primary); background: rgba(99,102,241,0.05); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt--correct { border-color: #27ae60 !important; background: rgba(39,174,96,0.10) !important; color: #27ae60; }
.quiz-opt--wrong   { border-color: #ef4444 !important; background: rgba(239,68,68,0.08)  !important; color: #ef4444; }

/* Feedback */
.quiz-feedback {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.2s, transform 0.2s;
}
.quiz-feedback--show {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
.quiz-feedback-result {
    font-size: 0.88rem;
    font-weight: 700;
}
.quiz-feedback-result--ok  { color: #27ae60; }
.quiz-feedback-result--err { color: #ef4444; }
.quiz-feedback-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.quiz-speak-btn {
    position: absolute;
    bottom: 0.5rem;
    right: 0.6rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--primary);
    opacity: 0.7;
    padding: 0.2rem;
    line-height: 1;
    transition: opacity 0.15s;
}
.quiz-speak-btn:hover { opacity: 1; }

.quiz-next-btn {
    align-self: flex-end;
    padding: 0.45rem 1.1rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}
.quiz-next-btn:hover { opacity: 0.88; }

/* Resultado final */
.quiz-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 2rem 1rem;
    text-align: center;
}
.quiz-result-score {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
}
.quiz-result-score--pass { color: #27ae60; }
.quiz-result-score--fail { color: #f59e0b; }
.quiz-result-msg {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}
.quiz-result-bar {
    width: 100%;
    max-width: 240px;
    height: 8px;
    background: var(--border);
    border-radius: 99px;
    overflow: hidden;
}
.quiz-result-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 99px;
    transition: width 0.5s ease;
}
.quiz-result-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
}
.quiz-result-btns {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    max-width: 320px;
    margin-top: 0.5rem;
}
.quiz-retry-btn {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.quiz-retry-btn:hover { background: var(--primary); color: #fff; }

/* Dark mode */
body.dark-mode .quiz-opt--correct { background: rgba(39,174,96,0.15) !important; }
body.dark-mode .quiz-opt--wrong   { background: rgba(239,68,68,0.12) !important; }

/* ============ QUIZ DE NIVEL — fin ============ */

/* ============ ADD SONG FORM ============ */

/* Fila artista + upload imagen */
.add-song-artist-row {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.add-song-img-upload {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    border: 2px dashed var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s;
    overflow: hidden;
    margin-bottom: 2px; /* alinea con el input */
}
.add-song-img-upload:hover { border-color: var(--primary); background: rgba(59,130,246,0.05); }
.add-song-img-upload.has-image { border-style: solid; border-color: var(--primary); }

.add-song-img-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
    width: 100%;
    height: 100%;
    justify-content: center;
}
.add-song-img-icon  { font-size: 1.3rem; line-height: 1; }
.add-song-img-label { font-size: 0.6rem; color: var(--text-muted); font-weight: 600; }

.add-song-img-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.musicians-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.add-artist-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.add-artist-btn:hover  { background: var(--primary-dark); }
.add-artist-btn:active { transform: scale(0.97); }

/* Panel principal */
.add-song-panel {
    padding: 1rem;
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Intro */
.add-song-intro {
    background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(139,92,246,0.08));
    border: 1.5px solid rgba(59,130,246,0.2);
    border-radius: 16px;
    padding: 1.1rem 1.25rem;
}
.add-song-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.45rem;
}
.add-song-subtitle {
    font-size: 0.83rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.add-song-points-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.add-song-points-badge {
    background: rgba(59,130,246,0.12);
    color: var(--primary);
    border: 1px solid rgba(59,130,246,0.25);
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}
.add-song-points-badge--gold {
    background: rgba(245,158,11,0.12);
    color: #d97706;
    border-color: rgba(245,158,11,0.3);
}
.add-song-points-badge--premium {
    background: rgba(139,92,246,0.12);
    color: #7c3aed;
    border-color: rgba(139,92,246,0.3);
}

/* Body: 2 columnas en desktop */
.add-song-body {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.add-song-form-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.add-song-form-row {
    display: flex;
    gap: 0.75rem;
}
.add-song-form-row .add-song-form-group { flex: 1; }

.add-song-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.add-song-form-group--grow { flex: 1; }

.add-song-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.add-song-input {
    padding: 0.55rem 0.8rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.88rem;
    transition: border-color 0.15s;
    width: 100%;
}
.add-song-input:focus { outline: none; border-color: var(--primary); }

.add-song-textarea {
    padding: 0.6rem 0.8rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.86rem;
    font-family: inherit;
    resize: vertical;
    min-height: 220px;
    transition: border-color 0.15s;
    width: 100%;
    line-height: 1.5;
}
.add-song-textarea:focus { outline: none; border-color: var(--primary); }

/* Columna traducción */
.add-song-trans-col {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.add-song-trans-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--surface);
    border: 1.5px solid var(--primary);
    color: var(--primary);
    border-radius: 10px;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.add-song-trans-toggle:hover { background: var(--primary); color: #fff; }

.add-song-trans-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 0.85rem;
}
.add-song-trans-panel.hidden { display: none; }

/* Filas de traducción individuales */
.asf-trans-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.75rem;
}
.asf-trans-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.asf-trans-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.asf-trans-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    line-height: 1;
}
.asf-trans-remove:hover { background: rgba(239,68,68,0.1); color: #dc2626; }

.asf-trans-row .add-song-textarea { min-height: 150px; }

/* Botón añadir otra traducción */
.add-song-add-trans-btn {
    width: 100%;
    padding: 0.45rem;
    background: rgba(59,130,246,0.06);
    border: 1.5px dashed rgba(59,130,246,0.35);
    border-radius: 10px;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 0.25rem;
}
.add-song-add-trans-btn:hover { background: rgba(59,130,246,0.12); }

/* Footer */
.add-song-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.add-song-footer-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    flex: 1;
}
.add-song-submit-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    padding: 0.65rem 1.75rem;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.add-song-submit-btn:hover    { background: var(--primary-dark); }
.add-song-submit-btn:active   { transform: scale(0.97); }
.add-song-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Feedback message */
.add-song-feedback {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
}
.add-song-feedback.hidden { display: none; }
.add-song-feedback--ok    { background: rgba(39,174,96,0.1); color: #27ae60; border: 1px solid rgba(39,174,96,0.3); }
.add-song-feedback--error { background: rgba(239,68,68,0.1);  color: #dc2626; border: 1px solid rgba(239,68,68,0.3); }

/* Mobile: columnas apiladas */
@media (max-width: 640px) {
    .add-song-body { flex-direction: column; }
    .add-song-trans-col { width: 100%; }
    .add-song-form-row  { flex-direction: column; }
}

/* Dark mode */
body.dark-mode .add-song-input,
body.dark-mode .add-song-textarea { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
body.dark-mode .add-song-trans-panel { background: rgba(255,255,255,0.03); }

/* ============ ADMIN — SONGS TAB ============ */

.asong-summary {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.asong-chip {
    padding: 0.3rem 0.85rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
}
.asong-chip--pending  { background: rgba(245,158,11,0.12); color: #d97706; }
.asong-chip--approved { background: rgba(39,174,96,0.12);  color: #27ae60; }
.asong-chip--rejected { background: rgba(239,68,68,0.1);   color: #dc2626; }

.asong-list { display: flex; flex-direction: column; gap: 0.85rem; }

.asong-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.asong-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.asong-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.asong-artist { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.asong-sep    { color: var(--text-muted); }
.asong-song   { font-size: 0.88rem; color: var(--text); }
.asong-lang   { font-size: 0.75rem; color: var(--text-muted); background: var(--border); border-radius: 6px; padding: 0.1rem 0.45rem; }

.asong-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.asong-status--pending  { background: rgba(245,158,11,0.12); color: #d97706; }
.asong-status--approved { background: rgba(39,174,96,0.12);  color: #27ae60; }
.asong-status--rejected { background: rgba(239,68,68,0.1);   color: #dc2626; }

.asong-submitter, .asong-has-trans {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.asong-has-trans { color: var(--primary); }

.asong-lyrics-preview {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: monospace;
    white-space: pre-wrap;
    background: rgba(0,0,0,0.03);
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    max-height: 60px;
    overflow: hidden;
}
body.dark-mode .asong-lyrics-preview { background: rgba(255,255,255,0.04); }

.asong-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.2rem; }
.asong-btn {
    padding: 0.3rem 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.asong-btn--approve { border-color: #27ae60; color: #27ae60; }
.asong-btn--approve:hover { background: #27ae60; color: #fff; }
.asong-btn--reject  { border-color: #dc2626; color: #dc2626; }
.asong-btn--reject:hover  { background: #dc2626; color: #fff; }
.asong-btn--delete  { border-color: #ef4444; color: #ef4444; }
.asong-btn--delete:hover  { background: #ef4444; color: #fff; }
.asong-btn--view:hover    { background: var(--border); }

/* Modal ver letra completa */
.asong-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.asong-modal {
    background: var(--surface);
    border-radius: 16px;
    width: 100%;
    max-width: 760px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.asong-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.asong-modal-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--text-muted);
}
.asong-modal-cols {
    display: flex;
    gap: 0;
    flex: 1;
    overflow: hidden;
}
.asong-modal-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border);
    padding: 0.75rem;
}
.asong-modal-col:last-child { border-right: none; }
.asong-modal-col-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}
.asong-modal-pre {
    font-size: 0.82rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-y: auto;
    flex: 1;
    color: var(--text);
    font-family: inherit;
}

/* YouTube link field label */
.add-song-optional {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* Edit button on song cards */
.song-edit-btn {
    display: block;
    margin: 0.5rem auto 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.song-edit-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(59,130,246,0.06); }

/* Song edit modal overlay */
.sedit-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.sedit-modal {
    background: var(--surface);
    border-radius: 18px;
    width: 100%;
    max-width: 820px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.sedit-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--border);
    gap: 0.5rem;
}
.sedit-title    { font-size: 1rem; font-weight: 700; color: var(--text); }
.sedit-subtitle { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; }
.sedit-close {
    background: none; border: none; font-size: 1.1rem;
    cursor: pointer; color: var(--text-muted); padding: 0.2rem 0.4rem;
    border-radius: 6px; flex-shrink: 0;
}
.sedit-close:hover { background: var(--border); }

.sedit-body {
    display: flex;
    gap: 0;
    flex: 1;
    overflow: hidden;
}
.sedit-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1rem;
    overflow-y: auto;
    border-right: 1px solid var(--border);
}
.sedit-col:last-child { border-right: none; }

.sedit-lyrics { min-height: 200px; }

.sedit-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border);
}
.sedit-msg { font-size: 0.83rem; font-weight: 500; flex: 1; }
.sedit-msg--ok    { color: #27ae60; }
.sedit-msg--error { color: #dc2626; }

@media (max-width: 640px) {
    .sedit-body { flex-direction: column; }
    .sedit-col  { border-right: none; border-bottom: 1px solid var(--border); }
    .sedit-col:last-child { border-bottom: none; }
}

/* ============ ADD SONG / ADMIN SONGS — fin ============ */

/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/


/* ============ FAMOUS — inicio ============
   Reemplazar este bloque completo cada vez que se actualice.
   ========================================= */



/* ── Carrusel de famosos (menú principal) ── */

/* Explorer country filter bar */
#explorerCountryBar { width: 100%; }
/* Country dropdown (Explorador + Escritores) */
.country-dropdown-wrap {
    position: relative;
    display: inline-block;
    padding: .4rem .25rem .6rem;
}
.country-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .85rem .35rem .7rem;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
    white-space: nowrap;
}
.country-dropdown-trigger:hover,
.country-dropdown-trigger[aria-expanded="true"] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.country-dropdown-arrow {
    transition: transform .2s;
    flex-shrink: 0;
    color: var(--text-muted);
}
.country-dropdown-trigger[aria-expanded="true"] .country-dropdown-arrow {
    transform: rotate(180deg);
}
.country-dropdown-menu {
    position: absolute;
    top: calc(100% - .1rem);
    left: 0;
    z-index: 200;
    min-width: 200px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,.14);
    padding: .4rem 0;
    overflow: hidden;
}
.country-dropdown-menu[hidden] { display: none; }
.country-dropdown-group-label {
    padding: .5rem .85rem .2rem;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    margin-top: .2rem;
}
.country-dropdown-group-label:first-of-type { border-top: none; margin-top: 0; }
.country-dropdown-item {
    display: block;
    width: 100%;
    padding: .42rem .85rem;
    text-align: left;
    background: none;
    border: none;
    color: var(--text);
    font-size: .83rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .14s;
    white-space: nowrap;
}
.country-dropdown-item:hover { background: rgba(99,102,241,.08); }
.country-dropdown-item.active {
    background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(139,92,246,.1));
    color: #6366f1;
    font-weight: 700;
}
.dark-mode .country-dropdown-trigger { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.dark-mode .country-dropdown-menu    { background: #1e293b; border-color: #334155; box-shadow: 0 8px 28px rgba(0,0,0,.4); }
.dark-mode .country-dropdown-item    { color: #e2e8f0; }
.dark-mode .country-dropdown-item:hover  { background: rgba(99,102,241,.14); }
.dark-mode .country-dropdown-item.active { color: #a5b4fc; background: rgba(99,102,241,.2); }
.dark-mode .country-dropdown-group-label { color: #64748b; border-color: #334155; }

.famous-carousel-section {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  /* El padding lateral da espacio a las flechas */
  padding: 0 36px;
  box-sizing: border-box;
}

/* Área de cards — overflow hidden para recortar los laterales */
.fc-track-wrap {
  flex: 1;
  overflow: hidden;
  clip-path: inset(0);
  /* Altura = card height (aspect 3:4 de 155px) + margen para el scale del centro */
  height: 228px;
  position: relative;
  cursor: grab;
}
.fc-track-wrap:active { cursor: grabbing; }

/* Cada card en el carrusel se posiciona absolutamente en el centro */
.fc-card {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 155px !important;     /* tamaño fijo */
  height: 207px !important;    /* aspect-ratio 3:4 */
  border-radius: 18px !important;

  /* Transform base: centrado en el contenedor */
  transform: translate(-50%, -50%) scale(0.84);
  opacity: 0;
  z-index: 1;

  /* Transición fluida */
  transition:
    transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity   0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    z-index   0s 0.21s;

  /* Suprimir transición en init */
}
.fc-card.fc-no-transition {
  transition: none !important;
}

/* Card ACTIVA: centro, tamaño completo */
.fc-card.fc-active {
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1;
  z-index: 10;
  transition:
    transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity   0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
  cursor: pointer;
}

/* Cards ADYACENTES: mitad visible a cada lado, ligeramente reducidas */
.fc-card.fc-adj {
  /* --fc-dir: 1 (derecha) o -1 (izquierda), seteado via JS */
  transform: translate(calc(-50% + calc(var(--fc-dir) * 138px)), -50%) scale(0.84) !important;
  opacity: 0.6;
  z-index: 5;
  transition:
    transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity   0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  filter: brightness(0.85);
}
.fc-card.fc-adj:hover {
  opacity: 0.82;
  filter: brightness(0.95);
}

/* Cards LEJANAS: fuera del viewport */
.fc-card.fc-far {
  transform: translate(calc(-50% + calc(var(--fc-dir) * 250px)), -50%) scale(0.72) !important;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition:
    transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity   0.28s ease;
}


/* ── Flechas de navegación ── */

.fc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;

  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(120,120,120,0.25);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text, #1e293b);

  transition: background 0.18s, border-color 0.18s, transform 0.18s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.fc-arrow:hover {
  background: rgba(255,255,255,0.95);
  border-color: var(--accent, #6366f1);
  color: var(--accent, #6366f1);
}
.fc-arrow:active {
  transform: translateY(-50%) scale(0.92);
}
.fc-arrow:disabled { cursor: default; }

.fc-arrow--left  { left: 0; }
.fc-arrow--right { right: 0; }

/* Dark mode flechas */
.dark-mode .fc-arrow {
  background: rgba(30,30,40,0.7);
  border-color: rgba(255,255,255,0.15);
  color: #e2e8f0;
}
.dark-mode .fc-arrow:hover {
  background: rgba(99,102,241,0.25);
  border-color: var(--accent, #818cf8);
  color: var(--accent, #818cf8);
}


/* ── Cards de famosos (lista completa y menú principal) ── */

.famous-list-wrap {
  padding: 1rem;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.famous-list-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.famous-list-header h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

/* Grid de cards */
.famous-grid-full {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}

/* Card individual */
.famous-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  background-color: var(--fcard-color, #2c2c2c);
}
.famous-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}
/* Carrusel: el hover NO mueve la card, solo refuerza sombra y brillo */
.fc-card.famous-card:hover {
  box-shadow: 0 14px 32px rgba(0,0,0,0.22);
  filter: brightness(1.05);
}

/* Imagen de fondo (se muestra si existe) */
.famous-card-img {
  position: absolute;
  inset: 0;
  background-image: var(--fcard-img);
  background-size: cover;
  background-position: center top;
  opacity: 0;              /* oculta por defecto */
  transition: opacity 0.3s ease;
  z-index: 0;
}
.famous-card--hasimg .famous-card-img { opacity: 1; }

/* Degradé sobre la imagen */
.famous-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 30%,
    rgba(0,0,0,0.5) 60%,
    rgba(0,0,0,0.85) 100%
  );
  z-index: 1;
}
/* Sin imagen: fondo sólido del color del personaje, overlay más suave */
.famous-card--noimg .famous-card-overlay {
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.06) 0%,
    rgba(0,0,0,0.3) 100%
  );
}

/* Contenido de la card */
.famous-card-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.85rem 0.75rem;
  gap: 0.2rem;
}

/* Emoji: visible cuando no hay imagen, se oculta con imagen */
.famous-card-emoji {
  font-size: 2rem;
  line-height: 1;
  transition: opacity 0.3s;
  margin-bottom: 0.25rem;
}
.famous-card--hasimg .famous-card-emoji { opacity: 0; height: 0; margin: 0; overflow: hidden; }

.famous-card-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.famous-card-desc {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ── Cards del menú principal (famous-grid en app.js) ──
   Si querés que el menú principal también use las mismas cards,
   reemplazá las cards de famosos en showMainMenu por:
   mainContainer.querySelector('.famous-grid').innerHTML = renderFamousMenuCards(['mlk','marilyn','maradona'], t);
   y agregá listener con .famous-card[data-person]         */

.famous-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}


/* ── Header del chat (con imagen del personaje) ── */

.famous-chat-panel {
  height: auto; /* crece con el contenido */
}

/* El chat de famosos NO usa flex:1 — se adapta al contenido con tope */
.famous-chat-panel .school-chat {
  flex: 0 1 auto;
  min-height: 60px;
  max-height: calc(100dvh - 360px);
}

.famous-chat-header {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 100px;
  display: flex;
  align-items: flex-end;
  background-color: var(--fcard-color, #2c2c2c);
  flex-shrink: 0;
}

/* Imagen de fondo del header */
.famous-chat-header-bg {
  position: absolute;
  inset: 0;
  background-image: var(--fcard-img);
  background-size: cover;
  background-position: center 20%;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.famous-chat-header--hasimg .famous-chat-header-bg { opacity: 1; }

/* Overlay del header */
.famous-chat-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.2) 0%,
    rgba(0,0,0,0.65) 100%
  );
  pointer-events: none;
}

/* Contenido sobre el overlay */
.famous-chat-header-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  width: 100%;
}

.famous-back-btn {
  color: #fff !important;
  background: rgba(0,0,0,0.3) !important;
  border-color: rgba(255,255,255,0.2) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
  flex-shrink: 0;
}
.famous-back-btn:hover { background: rgba(0,0,0,0.5) !important; }

.famous-chat-identity {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
}

/* Avatar circular en el header */
.famous-chat-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center top;
}
.famous-chat-avatar--img { font-size: 0; }

.famous-chat-name {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  line-height: 1.2;
}


/* ── Avatar en burbujas de chat ── */

.famous-msg-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--card-bg, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center top;
}


/* ── Panel de MODO (más ancho que speed) ── */

.famous-modo-panel {
  min-width: 200px !important;
}

.famous-mode-wip {
  opacity: 0.6;
  cursor: default !important;
}
.famous-mode-wip:hover {
  background: none !important;
  color: var(--text-muted) !important;
}

.famous-wip-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  background: #f59e0b;
  color: #fff;
  border-radius: 99px;
  padding: 1px 6px;
  vertical-align: middle;
  letter-spacing: 0.03em;
}


/* ── Dark mode ── */

.dark-mode .famous-chat-header::after {
  background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.8) 100%);
}
.dark-mode .famous-card { box-shadow: 0 2px 12px rgba(0,0,0,0.4); }



/* ── Bubble bilingüe: original + traducción ── */

.famous-bubble-original {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text, #1e293b);
}

.famous-bubble-translation {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border, #e2e8f0);
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
  font-style: italic;
  line-height: 1.4;
}

.dark-mode .famous-bubble-translation {
  border-color: rgba(255,255,255,.08);
}

/* Botón Traducir en burbujas del asistente */
.famous-translate-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 0.5rem;
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 20px;
  font-size: 0.72rem;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.famous-translate-btn:hover {
  background: var(--border, #e2e8f0);
  color: var(--text, #1e293b);
}
.famous-translate-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.dark-mode .famous-translate-btn {
  border-color: rgba(255,255,255,.15);
  color: #94a3b8;
}
.dark-mode .famous-translate-btn:hover {
  background: rgba(255,255,255,.08);
  color: #e2e8f0;
}

/* ============ FAMOUS — fin ============ */

/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/


/* ============ SETTINGS — inicio ============
   Reemplazar este bloque completo cada vez que se actualice.
   ============================================ */


/* ── Wrapper principal ── */

.cfg-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cfg-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.cfg-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}


/* ── Banner invitado ── */

.cfg-guest-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: 14px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.cfg-guest-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.cfg-guest-login-btn {
  background: #f59e0b;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.cfg-guest-login-btn:hover { opacity: 0.85; }

.cfg-guest-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 4px;
  line-height: 1;
}


/* ── Sección ── */

.cfg-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.25rem 0;
}

.cfg-section-title {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted, #64748b);
  padding: 0.5rem 0 0.85rem;
}

.cfg-section-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: -0.4rem 0 0.6rem;
}

.cfg-group-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  padding: 0.6rem 0 0.4rem;
}
.cfg-group-label--sub {
  font-weight: 500;
  color: var(--text-muted);
  padding-top: 0.4rem;
}


/* ── Divisor entre secciones ── */

.cfg-divider {
  height: 1px;
  background: var(--border, #e2e8f0);
  margin: 1rem 0;
}
.cfg-divider-light {
  height: 1px;
  background: var(--border, #e2e8f0);
  opacity: 0.5;
  margin: 0.75rem 0;
}


/* ── Fila genérica (label + control) ── */

.cfg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0;
  min-height: 44px;
}

.cfg-row-label {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.3;
  flex: 1;
}

/* Sub-fila (indentada, dependiente de un toggle) */
.cfg-row--sub {
  padding-left: 1rem;
}
.cfg-row--disabled {
  opacity: 0.4;
  pointer-events: none;
}


/* ── Toggle switch ── */

.cfg-toggle {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}

.cfg-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cfg-toggle-track {
  display: block;
  width: 46px;
  height: 26px;
  background: var(--border, #cbd5e1);
  border-radius: 99px;
  position: relative;
  transition: background 0.22s ease;
}

.cfg-toggle input:checked + .cfg-toggle-track {
  background: var(--accent, #6366f1);
}

.cfg-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cfg-toggle input:checked + .cfg-toggle-track .cfg-toggle-thumb {
  transform: translateX(20px);
}


/* ── Radio buttons (fila horizontal) ── */

.cfg-radio-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.25rem 0 0.5rem;
}

/* Radio buttons (columna) */
.cfg-radio-col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.25rem 0 0.5rem;
}

.cfg-radio-opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 7px 14px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
}

.cfg-radio-opt input { display: none; }

.cfg-radio-opt.active,
.cfg-radio-opt:has(input:checked) {
  border-color: var(--accent, #6366f1);
  background: rgba(99,102,241,0.07);
  color: var(--text);
  font-weight: 600;
}

.cfg-radio-opt:hover:not(.active) {
  border-color: var(--accent, #6366f1);
  color: var(--text);
}


/* ── Badges ── */

.cfg-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--border, #e2e8f0);
  color: var(--text-muted);
  vertical-align: middle;
  letter-spacing: 0.03em;
}

.cfg-badge--premium {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  color: #fff;
}

.cfg-badge--new {
  background: var(--accent, #6366f1);
  color: #fff;
}


/* ── Select ── */

.cfg-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--card-bg, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 7px 32px 7px 12px;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  min-width: 160px;
  transition: border-color 0.15s;
  font-family: inherit;
}
.cfg-select:focus {
  outline: none;
  border-color: var(--accent, #6366f1);
}


/* ── Slider de velocidad ── */

.cfg-speed-control {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.cfg-speed-val {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent, #6366f1);
  min-width: 32px;
  text-align: right;
}

.cfg-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--accent, #6366f1) 0%,
    var(--accent, #6366f1) calc((var(--val, 50)) * 1%),
    var(--border, #e2e8f0) calc((var(--val, 50)) * 1%),
    var(--border, #e2e8f0) 100%
  );
  outline: none;
  cursor: pointer;
}
.cfg-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent, #6366f1);
  box-shadow: 0 1px 4px rgba(99,102,241,0.35);
  cursor: grab;
}
.cfg-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent, #6366f1);
  border: none;
  cursor: grab;
}


/* ── Botones de privacidad ── */

.cfg-danger-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  color: #ef4444;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: 0.5rem;
  font-family: inherit;
}
.cfg-danger-btn:hover {
  background: rgba(239,68,68,0.06);
  border-color: #ef4444;
}

.cfg-danger-btn--hard {
  border-color: #ef4444;
  font-weight: 700;
}

.cfg-export-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  color: var(--accent, #6366f1);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: 0.5rem;
  font-family: inherit;
}
.cfg-export-btn:hover {
  background: rgba(99,102,241,0.06);
  border-color: var(--accent, #6366f1);
}


/* ── Sección minimizada en el menú principal ── */

.main-section-muted {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  border: 1px dashed var(--border, #e2e8f0);
  border-radius: 12px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s;
}
.main-section-muted:hover { opacity: 0.75; }

.msm-icon  { font-size: 1rem; }
.msm-label {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}
.msm-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--border, #e2e8f0);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* ── Dark mode ── */

.dark-mode .cfg-guest-banner     { background: rgba(245,158,11,0.08); }
.dark-mode .cfg-toggle-track     { background: rgba(255,255,255,0.15); }
.dark-mode .cfg-radio-opt        { border-color: rgba(255,255,255,0.1); color: var(--text-muted); }
.dark-mode .cfg-radio-opt.active { background: rgba(99,102,241,0.15); }
.dark-mode .cfg-select           { background-color: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.dark-mode .cfg-danger-btn       { border-color: rgba(255,255,255,0.1); }
.dark-mode .cfg-export-btn       { border-color: rgba(255,255,255,0.1); }
.dark-mode .cfg-slider           { background: linear-gradient(to right, var(--accent, #818cf8) 50%, rgba(255,255,255,0.15) 50%); }
.dark-mode .main-section-muted   { border-color: rgba(255,255,255,0.1); }


/* ============ SETTINGS — fin ============ */

/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/

/* ============ PRACTICE — inicio ============ */


/* ── Overview: lista de grupos ── */

.prac-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 0.75rem 1rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.prac-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.prac-header-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.prac-level-badge {
  background: var(--accent, #6366f1);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
  letter-spacing: 0.06em;
}
.prac-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.prac-groups {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Card de grupo */
.prac-group-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--border, #e2e8f0);
  border-left: 4px solid var(--gc, #6366f1);
  border-radius: 16px;
  padding: 0.9rem 1rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.prac-group-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.prac-group-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}
.prac-group-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.prac-group-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.prac-group-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}
.prac-group-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.prac-group-count {
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0.7;
}

.prac-group-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex-shrink: 0;
  min-width: 70px;
}
.prac-group-pct {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gc, #6366f1);
}
.prac-group-bar {
  width: 64px; height: 5px;
  background: var(--border, #e2e8f0);
  border-radius: 3px;
  overflow: hidden;
}
.prac-group-fill {
  height: 100%;
  background: var(--gc, #6366f1);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.prac-group-stats {
  display: flex;
  gap: 0.35rem;
}
.prac-stat {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}
.prac-stat--green  { background: rgba(16,185,129,0.12); color: #10b981; }
.prac-stat--blue   { background: rgba(59,130,246,0.12);  color: #3b82f6; }
.prac-stat--gray   { background: var(--border, #e2e8f0); color: var(--text-muted); }

.prac-reset-inline {
  display: flex;
  justify-content: flex-end;
  margin-top: -4px;
  padding-right: 4px;
}
.prac-reset-btn-inline {
  background: none;
  border: none;
  font-size: 0.7rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  opacity: 0.6;
  transition: background 0.15s, opacity 0.15s;
}
.prac-reset-btn-inline:hover {
  background: rgba(239,68,68,0.07);
  color: #ef4444;
  opacity: 1;
}


/* ── Sesión de estudio ── */

.prac-study-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem 2rem;
  max-width: 480px;
  margin: 0 auto;
  min-height: calc(100dvh - 140px);
}

.prac-session-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}
.prac-exit-btn {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 1rem;
}
.prac-session-progress {
  flex: 1;
  height: 6px;
  background: var(--border, #e2e8f0);
  border-radius: 3px;
  overflow: hidden;
}
.prac-session-fill {
  height: 100%;
  background: var(--accent, #6366f1);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.prac-session-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.prac-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.prac-letter-badge {
  font-size: 1rem;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 99px;
  letter-spacing: 0.04em;
}
.prac-review-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: #f59e0b;
  background: rgba(245,158,11,0.1);
  padding: 3px 10px;
  border-radius: 99px;
  border: 1px solid rgba(245,158,11,0.25);
}
.prac-repeat-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
}
.prac-repeat-badge--red  { color: #ef4444; background: rgba(239,68,68,0.1);  border: 1px solid rgba(239,68,68,0.25); }
.prac-repeat-badge--blue { color: #3b82f6; background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.25); }


/* ── Card con flip ── */

.prac-card-container {
  width: 100%;
  max-width: 360px;
  height: 340px;
  perspective: 1000px;
  cursor: pointer;
  flex-shrink: 0;
  /* Evitar selección de texto al hacer drag */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.prac-card {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  user-select: none;
  -webkit-user-select: none;
}
.prac-card--flipped { transform: rotateY(180deg); }

.prac-card-front,
.prac-card-back {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  gap: 0.5rem;
  overflow: hidden;
}

/* Frente: limpio y centrado */
.prac-card-front {
  background: var(--card-bg, #fff);
  border: 2px solid var(--border, #e2e8f0);
}

/* Dorso: gradiente suave */
.prac-card-back {
  background: linear-gradient(160deg, var(--card-bg, #fff) 0%, rgba(99,102,241,0.04) 100%);
  border: 2px solid rgba(99,102,241,0.15);
  transform: rotateY(180deg);
  justify-content: flex-start;
  padding-top: 1.25rem;
}

.prac-card-emoji {
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.prac-card-emoji--sm { font-size: 2rem; }

.prac-card-word {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  text-align: center;
}
.prac-card-word--sm { font-size: 1.2rem; font-weight: 700; }

.prac-card-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
  opacity: 0.6;
}
.prac-swipe-hint-inline {
  display: flex;
  gap: 1rem;
  font-size: 0.65rem;
  color: var(--text-muted);
  opacity: 0.45;
  margin-top: 0.25rem;
}
.prac-swipe-hint-inline span:first-child  { color: #ef4444; opacity: 0.6; }
.prac-swipe-hint-inline span:nth-child(2) { color: #3b82f6; opacity: 0.6; }
.prac-swipe-hint-inline span:last-child   { color: #10b981; opacity: 0.6; }

.prac-card-phonetic {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

.prac-card-translation {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent, #6366f1);
  text-align: center;
}

.prac-card-examples {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.5rem;
}
.prac-example {
  background: rgba(0,0,0,0.03);
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
}
.prac-ex-original    { color: var(--text); font-weight: 500; }
.prac-ex-translation { color: var(--text-muted); font-style: italic; margin-top: 2px; }

.prac-audio-btn {
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.15s;
  margin-top: 0.25rem;
}
.prac-audio-btn:hover { background: rgba(99,102,241,0.1); color: var(--accent, #6366f1); }


/* ── 3 botones de estado ── */

.prac-state-btns {
  display: flex;
  gap: 0.6rem;
  width: 100%;
  max-width: 360px;
}
.prac-state-btns.hidden { display: none; }

.prac-state-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.7rem 0.5rem;
  border-radius: 14px;
  border: none;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
  font-family: inherit;
}
.prac-state-btn:active { transform: scale(0.95); }

.prac-state-icon { font-size: 1.1rem; line-height: 1; }

.prac-state-btn--red   { background: rgba(239,68,68,0.1);   color: #ef4444; }
.prac-state-btn--blue  { background: rgba(59,130,246,0.1);  color: #3b82f6; }
.prac-state-btn--green { background: rgba(16,185,129,0.1);  color: #10b981; }

.prac-state-btn--red:hover   { background: rgba(239,68,68,0.2);  }
.prac-state-btn--blue:hover  { background: rgba(59,130,246,0.2); }
.prac-state-btn--green:hover { background: rgba(16,185,129,0.2); }

/* Hint de swipe */
.prac-swipe-hint {
  display: flex;
  gap: 1.5rem;
  font-size: 0.68rem;
  color: var(--text-muted);
  opacity: 0.5;
}


/* ── Sesión completada ── */

.prac-complete-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 1.5rem;
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}
.prac-complete-icon  { font-size: 3.5rem; }
.prac-complete-title { font-size: 1.3rem; font-weight: 800; color: var(--text); margin: 0; }
.prac-complete-group { font-size: 0.88rem; color: var(--text-muted); }

.prac-complete-stats {
  display: flex;
  gap: 1rem;
  margin: 0.5rem 0;
}
.prac-complete-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.75rem 1.25rem;
  border-radius: 14px;
  font-size: 0.75rem;
  font-weight: 600;
}
.prac-complete-num { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.prac-complete-stat--green { background: rgba(16,185,129,0.1); color: #10b981; }
.prac-complete-stat--blue  { background: rgba(59,130,246,0.1); color: #3b82f6; }
.prac-complete-stat--red   { background: rgba(239,68,68,0.1);  color: #ef4444; }

.prac-complete-bar {
  width: 100%; height: 8px;
  background: var(--border, #e2e8f0);
  border-radius: 4px;
  overflow: hidden;
}
.prac-complete-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #6366f1), #10b981);
  border-radius: 4px;
  transition: width 1s ease;
}
.prac-complete-pct {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.prac-complete-btns {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
  width: 100%;
}
.prac-complete-btns .school-back-btn { flex: 1; text-align: center; }
.prac-complete-btns .smp-translate-btn { flex: 2; justify-content: center; }


/* ── Dark mode ── */

.dark-mode .prac-group-card   { border-color: rgba(255,255,255,.08); }
.dark-mode .prac-card-front   { border-color: rgba(255,255,255,.08); }
.dark-mode .prac-card-back    { border-color: rgba(129,140,248,.2); }
.dark-mode .prac-example      { background: rgba(255,255,255,.04); }
.dark-mode .prac-state-btn--red   { background: rgba(239,68,68,0.15);  }
.dark-mode .prac-state-btn--blue  { background: rgba(59,130,246,0.15); }
.dark-mode .prac-state-btn--green { background: rgba(16,185,129,0.15); }
.dark-mode .prac-group-bar    { background: rgba(255,255,255,.1); }
.dark-mode .prac-session-progress { background: rgba(255,255,255,.1); }
.dark-mode .prac-complete-bar { background: rgba(255,255,255,.1); }
.dark-mode .prac-audio-btn    { border-color: rgba(255,255,255,.1); }


/* ============ PRACTICE — fin ============ */


/* ============ FEEDBACK (Quejas & Fortalezas) ============ */

.fb-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fb-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.fb-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted, #64748b);
  margin: 0 0 1.5rem;
}

.fb-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.fb-block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.fb-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.fb-tag {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.fb-tag--complaint {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.fb-tag--strength {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.fb-input,
.fb-textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  color: var(--text);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
  resize: vertical;
}

.fb-input:focus,
.fb-textarea:focus {
  border-color: var(--accent, #6366f1);
}

.fb-textarea {
  min-height: 100px;
}

.fb-char-count {
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
  text-align: right;
}

.fb-actions {
  display: flex;
  justify-content: flex-end;
}

.fb-submit-btn {
  padding: 0.7rem 2rem;
  border-radius: 10px;
  border: none;
  background: var(--accent, #6366f1);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.fb-submit-btn:hover:not(:disabled) {
  background: var(--accent-dark, #4f46e5);
}

.fb-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.fb-success,
.fb-error {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
}

.fb-success {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.fb-error {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.hidden { display: none !important; }

/* Dark mode */
.dark-mode .fb-input,
.dark-mode .fb-textarea {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: var(--text);
}

.dark-mode .fb-input:focus,
.dark-mode .fb-textarea:focus {
  border-color: var(--accent, #818cf8);
}

/* ============ FEEDBACK — fin ============ */

/* ============ ADMIN PANEL ============ */

.admin-header-btn {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #f8fafc;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.admin-header-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

.admin-panel {
    max-width: 860px;
    margin: 1.5rem auto;
    padding: 0 1rem 2rem;
}

.admin-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.admin-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    flex: 1;
}
.admin-badge {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Admin nav: Secciones dropdown + tabs inline */
.admin-nav {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    padding-bottom: 0;
}

/* Dropdown "Secciones" */
.admin-sections-wrap {
    position: relative;
    flex-shrink: 0;
}
.admin-sections-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    border-radius: 10px 10px 0 0;
    border: 1.5px solid var(--border);
    border-bottom: none;
    background: var(--surface);
    color: var(--text);
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s;
    margin-bottom: -2px;
    position: relative;
    z-index: 2;
}
.admin-sections-btn:hover,
.admin-sections-btn.open {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.admin-sections-arrow {
    transition: transform .2s;
    flex-shrink: 0;
}
.admin-sections-btn.open .admin-sections-arrow { transform: rotate(180deg); }
.dark-mode .admin-sections-btn { background: #1e293b; border-color: #334155; }
.dark-mode .admin-sections-btn:hover,
.dark-mode .admin-sections-btn.open { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Dropdown menu */
.admin-sections-menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: 200px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 0 12px 12px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 200;
    padding: .4rem 0;
    display: flex;
    flex-direction: column;
}
.admin-sections-menu.hidden { display: none; }
.dark-mode .admin-sections-menu { background: #1e293b; border-color: #334155; }

.admin-sec-group { padding: .25rem 0 .1rem; }
.admin-sec-group-label {
    display: block;
    padding: .2rem .85rem .15rem;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.admin-sec-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: .45rem .85rem;
    border: none;
    background: none;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.admin-sec-item:hover  { background: rgba(79,70,229,.07); color: var(--primary); }
.admin-sec-item.active { color: var(--primary); background: rgba(79,70,229,.08); }
.admin-sec-divider { height: 1px; background: var(--border); margin: .3rem 0; }

/* Inline tabs (Feedback / Estadísticas / Usuarios) */
.admin-inline-tabs {
    display: flex;
    gap: 0;
    align-items: flex-end;
    flex: 1;
}
.admin-tabs { display: none; } /* legacy — no longer used in markup */
.admin-tab {
    background: none;
    border: none;
    padding: .5rem 1rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color .18s, border-color .18s;
}
.admin-tab:hover  { color: var(--text); }
.admin-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.admin-tab-content { min-height: 200px; }

.admin-loading {
    display: flex;
    justify-content: center;
    padding: 2rem;
}
.admin-empty, .admin-error {
    text-align: center;
    padding: 2.5rem;
    color: var(--text-muted);
    font-size: 1rem;
}
.admin-error { color: #ef4444; }

/* Feedback list */
.admin-feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.admin-count { font-size: 0.85rem; color: var(--text-muted); }
.admin-unread { color: #f59e0b; font-weight: 700; }
.admin-mark-all-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: background 0.2s;
}
.admin-mark-all-btn:hover { background: var(--border); }

.admin-feedback-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.admin-fb-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    transition: box-shadow 0.2s;
}
.admin-fb-card--unread {
    border-left: 4px solid #f59e0b;
    background: color-mix(in srgb, var(--surface) 95%, #f59e0b 5%);
}
.admin-fb-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.6rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.admin-fb-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.admin-fb-user { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.admin-fb-date { font-size: 0.75rem; color: var(--text-muted); }
.admin-fb-actions {
    display: flex;
    gap: 0.4rem;
}
.admin-read-btn, .admin-delete-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s, color 0.2s;
}
.admin-read-btn:hover { background: #dcfce7; color: #16a34a; border-color: #86efac; }
.admin-delete-btn:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.admin-fb-subject {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.admin-fb-block {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--body-bg);
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.5;
}
.admin-fb-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-fb-tag--complaint { background: #fee2e2; color: #dc2626; }
.admin-fb-tag--strength  { background: #dcfce7; color: #16a34a; }

/* Stats */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.admin-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
}
.admin-stat-card--alert { border-top: 3px solid #f59e0b; }
.admin-stat-card--positive { border-top: 3px solid #22c55e; }
.admin-stat-num {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
}
.admin-stat-label { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.25rem; }

.admin-top-users h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.admin-top-users ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.admin-top-users li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}
.admin-top-user { color: var(--text); }
.admin-top-count {
    background: var(--primary);
    color: #fff;
    border-radius: 12px;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Tools */
.admin-tools-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.admin-tool-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.admin-tool-card--danger { border-left: 4px solid #ef4444; }
.admin-tool-info h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.2rem;
}
.admin-tool-info p { font-size: 0.82rem; color: var(--text-muted); }
.admin-tool-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.admin-tool-btn:hover { opacity: 0.85; }
.admin-tool-btn--danger { background: #ef4444; }

/* Dark mode */
.dark-mode .admin-fb-card { background: #1e293b; border-color: #334155; }
.dark-mode .admin-fb-card--unread { background: color-mix(in srgb, #1e293b 92%, #f59e0b 8%); }
.dark-mode .admin-fb-block { background: #0f172a; }
.dark-mode .admin-stat-card { background: #1e293b; border-color: #334155; }
.dark-mode .admin-tool-card { background: #1e293b; border-color: #334155; }
.dark-mode .admin-top-users li { background: #1e293b; border-color: #334155; }
.dark-mode .admin-mark-all-btn { color: #94a3b8; border-color: #334155; }
.dark-mode .admin-mark-all-btn:hover { background: #334155; }
.dark-mode .admin-read-btn,
.dark-mode .admin-delete-btn { border-color: #334155; color: #94a3b8; }

/* ============ ADMIN PANEL — fin ============ */

/* ============ CONTRIBUTORS & ADS ============ */

/* ── Contributor registration modal ── */

.contrib-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    animation: ob-fade-in .2s ease;
}
.contrib-modal {
    background: var(--surface);
    border-radius: 20px;
    padding: 2rem 1.75rem 1.75rem;
    width: 100%; max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.contrib-close-btn {
    position: absolute; top: .75rem; right: .75rem;
    background: none; border: none;
    font-size: 1.5rem; cursor: pointer; color: var(--text-muted);
    line-height: 1; padding: .25rem .4rem; border-radius: 50%;
}
.contrib-close-btn:hover { background: var(--border); }
.contrib-modal-icon { font-size: 2.5rem; text-align: center; margin-bottom: .5rem; }
.contrib-modal-title {
    font-size: 1.3rem; font-weight: 700;
    text-align: center; color: var(--text); margin-bottom: .25rem;
}
.contrib-modal-sub {
    font-size: .85rem; color: var(--text-muted);
    text-align: center; margin-bottom: 1.5rem;
}
.contrib-profe-info {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: .25rem;
}
.contrib-profe-info p {
    font-size: .85rem;
    line-height: 1.6;
    color: #1e40af;
    margin: 0;
}
.dark-mode .contrib-profe-info { background: #0f172a; border-color: #1e3a5f; }
.dark-mode .contrib-profe-info p { color: #93c5fd; }
.contrib-step-hint {
    font-size: .78rem; color: var(--text-muted);
    background: var(--body-bg); border-radius: 8px;
    padding: .4rem .75rem; margin-bottom: 1.25rem; text-align: center;
}
.contrib-form { display: flex; flex-direction: column; gap: .9rem; }
.contrib-field { display: flex; flex-direction: column; gap: .3rem; }
.contrib-field label { font-size: .82rem; font-weight: 600; color: var(--text); }
.contrib-input {
    border: 1.5px solid var(--border); border-radius: 10px;
    padding: .6rem .85rem; font-size: .9rem;
    background: var(--surface); color: var(--text);
    transition: border-color .2s;
}
.contrib-input:focus { outline: none; border-color: var(--primary); }
.contrib-textarea { resize: vertical; min-height: 80px; }
.contrib-char-count { font-size: .75rem; color: var(--text-muted); text-align: right; }
.contrib-photo-row {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.contrib-photo-row .contrib-input { flex: 1; min-width: 0; }
.contrib-or { font-size: .8rem; color: var(--text-muted); flex-shrink: 0; }
.contrib-file-btn {
    background: var(--border); border: none; border-radius: 8px;
    padding: .5rem .85rem; font-size: .82rem; cursor: pointer;
    white-space: nowrap; color: var(--text);
    transition: background .2s;
}
.contrib-file-btn:hover { background: var(--primary); color: #fff; }
.contrib-photo-preview {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--border) center/cover no-repeat;
    margin-top: .4rem; border: 2px solid var(--border);
}
.contrib-error {
    font-size: .82rem; color: #dc2626;
    background: #fee2e2; border-radius: 8px;
    padding: .4rem .75rem;
}
.contrib-submit-btn {
    background: var(--primary); color: #fff;
    border: none; border-radius: 12px;
    padding: .7rem; font-size: .95rem; font-weight: 600;
    cursor: pointer; transition: opacity .2s;
    margin-top: .25rem;
}
.contrib-submit-btn:hover { opacity: .85; }
.contrib-submit-btn:disabled { opacity: .5; cursor: default; }
.contrib-success {
    text-align: center; padding: 1rem 0;
}
.contrib-success-icon { font-size: 3rem; margin-bottom: .5rem; }
.contrib-success h3 { font-size: 1.2rem; margin-bottom: .5rem; color: var(--text); }
.contrib-success p { font-size: .88rem; color: var(--text-muted); line-height: 1.6; }

/* ── Ads: home inline row ── */

.contrib-ads-row {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.contrib-ads-label {
    font-size: .75rem; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase;
    letter-spacing: .06em; margin-bottom: .75rem;
}
.contrib-ads-scroll {
    display: flex; gap: .75rem;
    overflow-x: auto; padding-bottom: .5rem;
    scrollbar-width: thin;
}
.contrib-ad-card {
    flex-shrink: 0; width: 200px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; overflow: hidden;
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column;
    position: relative;
    transition: box-shadow .2s, transform .2s;
}
.contrib-ad-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); transform: translateY(-2px); }
.contrib-ad-img {
    width: 100%; height: 100px;
    background: var(--border) center/cover no-repeat;
}
.contrib-ad-img--empty {
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; background: var(--body-bg);
}
.contrib-ad-body { padding: .65rem .75rem .75rem; flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.contrib-ad-title { font-size: .85rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.contrib-ad-desc { font-size: .75rem; color: var(--text-muted); line-height: 1.4; flex: 1; }
.contrib-ad-cta {
    font-size: .78rem; font-weight: 700;
    color: var(--primary); margin-top: .2rem;
}
.contrib-ad-dismiss {
    position: absolute; top: .35rem; right: .35rem;
    background: rgba(0,0,0,.45); color: #fff;
    border: none; border-radius: 50%;
    width: 20px; height: 20px; font-size: .85rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    line-height: 1; padding: 0;
}
.contrib-ad-dismiss:hover { background: rgba(0,0,0,.7); }
.contrib-ad-badge {
    position: absolute; bottom: .4rem; right: .5rem;
    font-size: .62rem; color: var(--text-muted);
    background: var(--body-bg); border-radius: 6px;
    padding: .1rem .35rem; opacity: .75;
}

/* ── Floating ad ── */

.contrib-floating-ad {
    position: fixed; bottom: 1.25rem; right: 1.25rem;
    width: 240px; z-index: 8500;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    opacity: 0; transform: translateY(16px);
    transition: opacity .35s ease, transform .35s ease;
}
.contrib-floating-ad.contrib-float-visible {
    opacity: 1; transform: translateY(0);
}
.contrib-float-close {
    position: absolute; top: .4rem; right: .4rem;
    background: rgba(0,0,0,.4); color: #fff;
    border: none; border-radius: 50%;
    width: 22px; height: 22px; font-size: .9rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    z-index: 1;
}
.contrib-float-close:hover { background: rgba(0,0,0,.65); }
.contrib-float-link {
    display: flex; align-items: center; gap: .65rem;
    text-decoration: none; color: inherit;
    padding: .75rem;
}
.contrib-float-img {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--border) center/cover no-repeat;
    flex-shrink: 0;
}
.contrib-float-content { flex: 1; min-width: 0; }
.contrib-float-name { font-size: .72rem; color: var(--text-muted); margin-bottom: .1rem; }
.contrib-float-title { font-size: .82rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.contrib-float-cta { font-size: .75rem; font-weight: 600; color: var(--primary); margin-top: .2rem; }
.contrib-float-badge {
    display: block; text-align: right;
    font-size: .62rem; color: var(--text-muted);
    padding: 0 .6rem .4rem; opacity: .75;
}

/* ── Admin: Contributors ── */

.admin-contrib-subnav {
    display: flex; gap: .5rem; margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--border); padding-bottom: .5rem;
    flex-wrap: wrap;
}
.admin-subnav-btn {
    background: none; border: none;
    padding: .4rem .9rem;
    font-size: .88rem; font-weight: 600;
    color: var(--text-muted); cursor: pointer;
    border-radius: 8px; transition: background .15s, color .15s;
    display: flex; align-items: center; gap: .4rem;
}
.admin-subnav-btn:hover { background: var(--body-bg); color: var(--text); }
.admin-subnav-btn.active { background: var(--primary); color: #fff; }
.admin-subnav-count {
    background: rgba(255,255,255,.25); border-radius: 12px;
    padding: .05rem .4rem; font-size: .75rem;
}
.admin-subnav-btn:not(.active) .admin-subnav-count { background: var(--border); color: var(--text-muted); }
.admin-subnav-badge {
    background: #f59e0b; color: #fff;
    border-radius: 12px; font-size: .68rem; font-weight: 700;
    padding: .1rem .45rem;
}
.admin-music-badge {
    display: inline-block;
    background: #8b5cf6; color: #fff;
    border-radius: 10px; font-size: .65rem; font-weight: 700;
    padding: .1rem .45rem; margin-left: .4rem;
    vertical-align: middle; line-height: 1.4;
}

.admin-contrib-list { display: flex; flex-direction: column; gap: .85rem; }
.admin-contrib-card {
    display: flex; gap: .85rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 1rem;
    align-items: flex-start;
}
.admin-contrib-photo {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--body-bg) center/cover no-repeat;
    flex-shrink: 0; border: 2px solid var(--border);
}
.admin-contrib-photo--placeholder {
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
}
.admin-contrib-card-body { flex: 1; min-width: 0; }
.admin-contrib-card-header {
    display: flex; justify-content: space-between;
    align-items: flex-start; gap: .5rem; margin-bottom: .4rem;
}
.admin-contrib-name { font-size: 1rem; font-weight: 700; color: var(--text); }
.admin-contrib-meta { font-size: .78rem; color: var(--text-muted); display: flex; gap: .75rem; flex-wrap: wrap; }
.admin-contrib-bio { font-size: .83rem; color: var(--text-muted); margin: .35rem 0; line-height: 1.5; }
.admin-contrib-link { font-size: .8rem; margin-bottom: .65rem; }
.admin-contrib-link a { color: var(--primary); text-decoration: none; }
.admin-contrib-link a:hover { text-decoration: underline; }
.admin-contrib-card-footer {
    display: flex; justify-content: space-between;
    align-items: center; gap: .5rem; flex-wrap: wrap;
}
.admin-contrib-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.admin-contrib-status-btn {
    border: none; border-radius: 8px;
    padding: .3rem .7rem; font-size: .8rem; font-weight: 600;
    cursor: pointer; transition: opacity .2s;
}
.admin-contrib-activate-btn { background: #dcfce7; color: #16a34a; }
.admin-contrib-activate-btn:hover { background: #bbf7d0; }
.admin-contrib-suspend-btn { background: #fef3c7; color: #d97706; }
.admin-contrib-suspend-btn:hover { background: #fde68a; }
.admin-status-badge {
    font-size: .72rem; font-weight: 700; border-radius: 12px;
    padding: .2rem .55rem; white-space: nowrap; flex-shrink: 0;
}
.admin-status--pending   { background: #fef3c7; color: #d97706; }
.admin-status--active    { background: #dcfce7; color: #16a34a; }
.admin-status--suspended { background: #fee2e2; color: #dc2626; }

/* ── Admin: Publications ── */

.admin-pubs-toolbar {
    display: flex; align-items: center; gap: .75rem;
    margin-bottom: 1rem; flex-wrap: wrap;
}
.admin-pubs-filter-label { font-size: .85rem; color: var(--text-muted); }
.admin-pubs-clear-filter {
    background: none; border: 1px solid var(--border);
    border-radius: 8px; padding: .15rem .5rem;
    font-size: .78rem; cursor: pointer; color: var(--text-muted);
    margin-left: .35rem;
}
.admin-pubs-clear-filter:hover { background: var(--border); }

.admin-pubs-list { display: flex; flex-direction: column; gap: .75rem; }
.admin-pub-card {
    display: flex; gap: .75rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: .85rem;
    align-items: flex-start;
    transition: opacity .2s;
}
.admin-pub-card--inactive { opacity: .55; }
.admin-pub-photo {
    width: 56px; height: 56px; border-radius: 10px;
    background: var(--body-bg) center/cover no-repeat;
    flex-shrink: 0;
}
.admin-pub-body { flex: 1; min-width: 0; }
.admin-pub-card-header {
    display: flex; justify-content: space-between;
    align-items: flex-start; gap: .5rem; margin-bottom: .35rem;
}
.admin-pub-title { font-size: .95rem; font-weight: 700; color: var(--text); }
.admin-pub-contrib { font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }
.admin-pub-desc { font-size: .82rem; color: var(--text-muted); margin: .3rem 0; line-height: 1.5; }
.admin-pub-meta-row {
    display: flex; gap: .75rem; flex-wrap: wrap; margin: .4rem 0;
}
.admin-pub-meta-item { font-size: .75rem; color: var(--text-muted); }
.admin-pub-link { font-size: .78rem; }
.admin-pub-link a { color: var(--primary); text-decoration: none; }
.admin-pub-actions {
    display: flex; flex-direction: column; gap: .35rem;
    align-items: flex-end; flex-shrink: 0;
}

/* Toggle switch */
.admin-pub-toggle-wrap {
    display: inline-flex; align-items: center;
    cursor: pointer; position: relative;
    width: 36px; height: 20px;
}
.admin-pub-toggle-wrap input { opacity: 0; width: 0; height: 0; position: absolute; }
.admin-pub-toggle-slider {
    position: absolute; inset: 0;
    background: #cbd5e1; border-radius: 20px;
    transition: background .2s;
}
.admin-pub-toggle-slider::before {
    content: ''; position: absolute;
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; left: 3px; top: 3px;
    transition: transform .2s;
}
.admin-pub-toggle-wrap input:checked + .admin-pub-toggle-slider { background: #22c55e; }
.admin-pub-toggle-wrap input:checked + .admin-pub-toggle-slider::before { transform: translateX(16px); }

/* Publication form modal */
.admin-pub-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9500;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.admin-pub-modal {
    background: var(--surface);
    border-radius: 18px; width: 100%; max-width: 600px;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    display: flex; flex-direction: column;
}
.admin-pub-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.25rem 1.5rem 0;
    position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.admin-pub-modal-header h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.admin-pub-modal-close {
    background: none; border: none;
    font-size: 1.5rem; cursor: pointer; color: var(--text-muted);
    line-height: 1; padding: .2rem .4rem; border-radius: 50%;
}
.admin-pub-modal-close:hover { background: var(--border); }
.admin-pub-modal-body { padding: 1.25rem 1.5rem; flex: 1; }
.admin-pub-form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: .85rem;
}
.admin-pub-field { display: flex; flex-direction: column; gap: .3rem; }
.admin-pub-field--full { grid-column: 1 / -1; }
.admin-pub-field label { font-size: .8rem; font-weight: 600; color: var(--text); }
.admin-pub-input {
    border: 1.5px solid var(--border); border-radius: 9px;
    padding: .55rem .8rem; font-size: .88rem;
    background: var(--surface); color: var(--text);
    transition: border-color .2s; width: 100%;
}
.admin-pub-input:focus { outline: none; border-color: var(--primary); }
.admin-pub-textarea { resize: vertical; min-height: 70px; }
.admin-pub-placements { display: flex; gap: 1rem; flex-wrap: wrap; }
.admin-pub-placement-opt {
    display: flex; align-items: center; gap: .4rem;
    font-size: .85rem; cursor: pointer; color: var(--text);
}
.admin-pub-autofill-btn {
    background: var(--body-bg); border: 1px solid var(--border);
    border-radius: 7px; padding: .25rem .6rem;
    font-size: .78rem; cursor: pointer; color: var(--text-muted);
}
.admin-pub-autofill-btn:hover { background: var(--border); }
.admin-pub-form-error {
    font-size: .82rem; color: #dc2626;
    background: #fee2e2; border-radius: 8px;
    padding: .4rem .75rem; margin-top: .75rem;
}
.admin-pub-modal-footer {
    display: flex; justify-content: flex-end; gap: .65rem;
    padding: .85rem 1.5rem 1.25rem;
    border-top: 1px solid var(--border);
    position: sticky; bottom: 0; background: var(--surface);
}
.admin-pub-cancel-btn {
    background: none; border: 1px solid var(--border);
    border-radius: 9px; padding: .5rem 1rem;
    font-size: .88rem; cursor: pointer; color: var(--text-muted);
}
.admin-pub-cancel-btn:hover { background: var(--border); }

/* Dark mode adjustments */
.dark-mode .contrib-modal { background: #1e293b; }
.dark-mode .contrib-step-hint { background: #0f172a; }
.dark-mode .contrib-input { background: #0f172a; border-color: #334155; color: #f1f5f9; }
.dark-mode .contrib-ad-card { background: #1e293b; border-color: #334155; }
.dark-mode .contrib-floating-ad { background: #1e293b; border-color: #334155; }
.dark-mode .admin-contrib-card { background: #1e293b; border-color: #334155; }
.dark-mode .admin-pub-card { background: #1e293b; border-color: #334155; }
.dark-mode .admin-pub-modal { background: #1e293b; }
.dark-mode .admin-pub-modal-header,
.dark-mode .admin-pub-modal-footer { background: #1e293b; }
.dark-mode .admin-pub-input { background: #0f172a; border-color: #334155; color: #f1f5f9; }

/* =============================================================
   MEMBERSHIP / PRICING SYSTEM
   ============================================================= */

/* ── Plans page ─────────────────────────────────────────────── */
.plans-page {
    max-width: 900px;
    margin: 1.5rem auto;
    padding: 0 1rem 3rem;
}
.plans-back-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .75rem;
}
.plans-active-badge {
    font-size: .82rem;
    background: #d1fae5;
    color: #065f46;
    border-radius: 20px;
    padding: .2rem .75rem;
    font-weight: 600;
}
.dark-mode .plans-active-badge { background: #064e3b; color: #6ee7b7; }
.plans-title-section { text-align: center; margin-bottom: .5rem; }
.plans-main-title { font-size: 1.6rem; font-weight: 800; color: var(--text); }
.plans-subtitle { color: var(--text-muted); font-size: .92rem; margin-top: .3rem; }

/* Region selector */
.plans-region-selector {
    display: flex;
    justify-content: center;
    gap: .75rem;
    margin: 1.25rem 0;
}
.plans-region-btn {
    padding: .5rem 1.2rem;
    border-radius: 30px;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.plans-region-btn.active,
.plans-region-btn:hover {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: transparent;
    color: white;
}
.plans-region-btn--contrib.active,
.plans-region-btn--contrib:hover {
    background: linear-gradient(135deg, #064e3b, #10b981);
    border-color: transparent;
    color: white;
}
.plans-region-btn--classroom:hover {
    background: linear-gradient(135deg, #92400e, #f59e0b);
    border-color: transparent;
    color: white;
}

/* Contributor plans view */
.contrib-plans-header { margin: 1rem 0 .25rem; }
.contrib-plans-intro {
    font-size: .88rem;
    color: var(--text-muted);
    line-height: 1.6;
    text-align: center;
    margin: 0;
}
.plan-card--contributor-featured {
    box-shadow: 0 8px 32px rgba(6,78,59,.45);
    transform: scale(1.02);
}
.plan-card--contributor-featured:hover { transform: scale(1.02) translateY(-3px); }
.contrib-plans-note {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    margin-top: .5rem;
}
.contrib-plans-note p {
    font-size: .82rem;
    color: var(--text-muted);
    margin: 0 0 .5rem;
    line-height: 1.5;
}
.contrib-plans-note p:last-child { margin: 0; }

/* Promo banner */
.plans-promo-banner {
    background: linear-gradient(135deg, #f97316, #ef4444);
    color: white;
    border-radius: 14px;
    padding: .85rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
    font-size: .9rem;
    margin: 1rem 0;
    text-align: center;
}
.plans-promo-badge {
    font-weight: 700;
    font-size: 1rem;
}
.plans-counter-num {
    font-size: 1.15rem;
    font-weight: 800;
}

/* Billing toggle */
.plans-billing-toggle {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin: 1rem 0;
}
.plans-toggle-btn {
    padding: .5rem 1.25rem;
    border-radius: 30px;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.plans-toggle-btn.active {
    background: var(--text);
    border-color: var(--text);
    color: var(--surface);
}
.dark-mode .plans-toggle-btn.active { background: #f1f5f9; color: #0f172a; }
.plans-save-badge {
    font-size: .72rem;
    background: #10b981;
    color: white;
    border-radius: 10px;
    padding: .1rem .45rem;
    font-weight: 700;
}

/* Plan cards */
.plans-cards-row {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1.5rem 0;
}
.plan-card {
    flex: 1;
    min-width: 260px;
    max-width: 360px;
    border-radius: 20px;
    padding: 1.75rem;
    position: relative;
    transition: transform .2s;
}
.plan-card:hover { transform: translateY(-3px); }
.plan-card--free {
    background: var(--surface);
    border: 2px solid var(--border);
}
.plan-card--premium {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    box-shadow: 0 8px 32px rgba(99,102,241,.35);
}
.plans-popular-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #f59e0b;
    color: white;
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .85rem;
    border-radius: 20px;
    white-space: nowrap;
}
.plan-card-header { margin-bottom: 1.25rem; }
.plan-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .4rem;
    opacity: .9;
}
.plan-card--premium .plan-card-name { color: white; opacity: 1; }
.plan-price-regular {
    text-decoration: line-through;
    opacity: .55;
    font-size: .9rem;
    margin-bottom: .1rem;
}
.plan-price-promo {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
}
.plan-price-period {
    font-size: .85rem;
    font-weight: 400;
    opacity: .8;
}
.plan-price-monthly-equiv {
    font-size: .78rem;
    opacity: .7;
    margin-top: .2rem;
}

/* Feature lists */
.plan-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.plan-feature-list li { font-size: .88rem; }
.plan-feature-list--free li { color: var(--text); }
.plan-feature-list--free .plan-feature--locked { opacity: .5; }
.plan-feature-list--premium li { color: rgba(255,255,255,.92); }

/* CTA buttons */
.plan-cta-btn {
    width: 100%;
    padding: .85rem;
    border-radius: 14px;
    border: none;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    display: block;
}
.plan-cta-btn--free {
    background: var(--body-bg);
    color: var(--text-muted);
    border: 2px solid var(--border);
}
.plan-cta-btn--free:hover { background: var(--border); }
.plan-cta-btn--premium {
    background: white;
    color: #6366f1;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
.plan-cta-btn--premium:hover {
    background: #f5f3ff;
    transform: translateY(-1px);
}
.plan-trial-btn {
    width: 100%;
    padding: .7rem;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,.5);
    background: transparent;
    color: white;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: .65rem;
    transition: all .2s;
}
.plan-trial-btn:hover { background: rgba(255,255,255,.15); }

/* Plan Oro */
.plans-cards-row--3 .plan-card { min-width: 220px; }
.plan-card--oro {
    background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%);
    color: white;
    box-shadow: 0 8px 32px rgba(180,83,9,.35);
}
.plan-card--oro .plan-card-name { color: white; opacity: 1; }
.plan-feature-list--oro li { color: rgba(255,255,255,.92); }
.plans-popular-tag--oro { background: #92400e; }
.plan-cta-btn--oro {
    background: white;
    color: #b45309;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
    width: 100%;
    padding: .85rem;
    border-radius: 14px;
    border: none;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    display: block;
}
.plan-cta-btn--oro:hover { background: #fef3c7; transform: translateY(-1px); }

/* Gold — disabled / coming soon state */
.plan-card--oro-disabled {
    opacity: .72;
    position: relative;
}
.plan-card--oro-disabled .plan-cta-btn--oro-disabled {
    background: rgba(255,255,255,.25);
    color: rgba(255,255,255,.85);
    cursor: pointer;
    border: 2px dashed rgba(255,255,255,.5);
}
.plan-card--oro-disabled .plan-cta-btn--oro-disabled:hover { background: rgba(255,255,255,.35); transform: none; }
.plan-card--oro-soon-badge {
    display: inline-block;
    background: rgba(0,0,0,.35);
    color: #fde68a;
    font-size: .75rem;
    font-weight: 700;
    padding: .22rem .65rem;
    border-radius: 20px;
    margin-bottom: .5rem;
    letter-spacing: .04em;
}
/* Gold coming soon modal */
.oro-soon-modal { max-width: 380px; }
.oro-soon-icon { font-size: 3rem; margin-bottom: .5rem; }
.oro-soon-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 .6rem; color: var(--text); }
.oro-soon-desc { font-size: .88rem; color: var(--text-muted); line-height: 1.5; margin: 0; }

/* Plan Contributor */
.plan-card--contributor {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    color: white;
    box-shadow: 0 8px 32px rgba(6,78,59,.35);
}
.plan-card--contributor .plan-card-name { color: white; opacity: 1; }
.plan-feature-list--contributor li { color: rgba(255,255,255,.92); }
.plans-popular-tag--contributor { background: #047857; }
.plan-cta-btn--contributor {
    background: white;
    color: #064e3b;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
    width: 100%;
    padding: .85rem;
    border-radius: 14px;
    border: none;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    display: block;
}
.plan-cta-btn--contributor:hover { background: #d1fae5; transform: translateY(-1px); }

/* Comparison table 3 cols */
.plans-comparison-table--3 th:nth-child(4),
.plans-comparison-table--3 td:nth-child(4) {
    color: #b45309;
    font-weight: 600;
}
body.dark-mode .plans-comparison-table--3 td:nth-child(4) { color: #fbbf24; }

/* Lite: 2-plan layout */
.plans-page--lite .plans-cards-row { max-width: 660px; margin: 0 auto; }
.plans-cards-row--2 { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.plans-cards-row--2 .plan-card { flex: 1 1 260px; max-width: 320px; }
.plan-card--featured {
    box-shadow: 0 12px 40px rgba(99,102,241,.28);
    transform: translateY(-4px);
    border: 2px solid #6366f1;
}
.dark-mode .plan-card--featured { border-color: #818cf8; box-shadow: 0 12px 40px rgba(99,102,241,.4); }

/* Comparison table 2 cols */
.plans-comparison-table--2 th:nth-child(3),
.plans-comparison-table--2 td:nth-child(3) {
    color: #6366f1;
    font-weight: 600;
}
body.dark-mode .plans-comparison-table--2 td:nth-child(3) { color: #a5b4fc; }
.plans-page--lite .plans-comparison-wrap { max-width: 560px; margin: 1.5rem auto 0; }
.plans-region-selector--lite { justify-content: center; }

/* Comparison table */
.plans-comparison-wrap { margin: 1.5rem 0; }
.plans-comparison-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .75rem;
}
.plans-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
.plans-comparison-table th,
.plans-comparison-table td {
    padding: .75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.plans-comparison-table th {
    font-weight: 700;
    background: var(--body-bg);
    color: var(--text-muted);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.plans-comparison-table tr:last-child td { border-bottom: none; }

/* Trust row */
.plans-trust-row {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: .85rem;
    color: var(--text-muted);
    margin: 1rem 0;
}

/* Mode card — plans */
.mode-card--plans {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}
.mode-card--plans h2,
.mode-card--plans h4,
.mode-card--plans p { color: white; }

/* ── App Banners ─────────────────────────────────────────────── */
.app-banners-wrap {
    width: 100%;
    margin-top: 0.5rem;
}
.app-banner {
    border-radius: 16px;
    overflow: hidden;
    color: white;
    cursor: default;
    user-select: none;
}
.app-banner-body {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
}
.app-banner-emoji {
    font-size: 2rem;
    flex-shrink: 0;
    line-height: 1;
}
.app-banner-text { flex: 1; min-width: 0; }
.app-banner-title {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.2rem;
}
.app-banner-desc {
    font-size: 0.78rem;
    opacity: 0.85;
    line-height: 1.4;
}
.app-banner-cta {
    flex-shrink: 0;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.4);
    color: white;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.45rem 0.9rem;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.app-banner-cta:hover { background: rgba(255,255,255,0.28); }
.app-banner-dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 1rem 0.75rem;
}
.app-banner-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.app-banner-dot.active {
    background: white;
    transform: scale(1.25);
}

/* ── Contributors modal ──────────────────────────────────────── */
.contributors-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}
.contributors-modal {
    background: var(--surface);
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 600px;
    max-height: 88vh;
    overflow-y: auto;
    padding-bottom: 2rem;
}
.contributors-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 0.75rem;
    position: sticky;
    top: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.contributors-modal-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.contributors-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0 0.25rem;
}
.contributors-modal-body { padding: 1.25rem 1.5rem; }
.contributors-intro {
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.6;
    margin: 0 0 1.25rem;
}
.contrib-benefits-row {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.contrib-benefit {
    flex: 1;
    min-width: 70px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.7rem 0.5rem;
    text-align: center;
}
.contrib-benefit--gold { border-color: #d97706; background: rgba(217,119,6,0.08); }
.contrib-benefit--staff { border-color: #7c3aed; background: rgba(124,58,237,0.08); }
.contrib-benefit-icon { font-size: 1.5rem; margin-bottom: 0.3rem; }
.contrib-benefit-label { font-size: 0.72rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.contrib-ways { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1.5rem; }
.contrib-way {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem;
}
.contrib-way--featured { border-color: #10b981; background: rgba(16,185,129,0.05); }
.contrib-way-header { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; }
.contrib-way-emoji { font-size: 1.6rem; flex-shrink: 0; line-height: 1.1; }
.contrib-way-title { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.contrib-way-pts { font-size: 0.75rem; color: #10b981; font-weight: 600; margin-top: 0.15rem; }
.contrib-way-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; margin: 0; }
.contrib-cupo-banner {
    margin-top: 0.75rem;
    background: rgba(16,185,129,0.12);
    border: 1px solid #10b981;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    font-size: 0.8rem;
    color: var(--text);
    line-height: 1.5;
}
.contrib-apply-btn {
    width: 100%;
    padding: 0.9rem;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 0.75rem;
}
.contrib-apply-btn:hover { background: #059669; }
.contrib-footer {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

/* ── Upgrade modal ──────────────────────────────────────────── */
.upgrade-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 9800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.upgrade-modal {
    background: var(--surface);
    border-radius: 20px;
    max-width: 420px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.upgrade-modal-header {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    padding: 1.5rem;
    color: white;
    text-align: center;
}
.upgrade-modal-icon { font-size: 2rem; margin-bottom: .4rem; }
.upgrade-modal-header h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .3rem; }
.upgrade-modal-header p { font-size: .88rem; opacity: .9; }
.upgrade-modal-body { padding: 1.5rem; }
.upgrade-usage-pill {
    display: inline-block;
    background: var(--body-bg);
    border: 1.5px solid var(--border);
    border-radius: 30px;
    padding: .3rem .85rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.upgrade-modal-cta-text {
    font-size: .9rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    line-height: 1.5;
}
.upgrade-modal-btns {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.upgrade-close-btn {
    background: none;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: .65rem;
    font-size: .9rem;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 600;
    transition: background .2s;
}
.upgrade-close-btn:hover { background: var(--border); }

/* ── Flashcard lock ─────────────────────────────────────────── */
.membership-locked { position: relative; }
.membership-locked-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    cursor: pointer;
    gap: .5rem;
    backdrop-filter: blur(2px);
}
.membership-locked-icon { font-size: 1.6rem; }
.membership-locked-badge {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .7rem;
    border-radius: 20px;
}

/* ── Payment modal ──────────────────────────────────────────── */
.payment-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 9900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.payment-modal {
    background: var(--surface);
    border-radius: 20px;
    max-width: 440px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    max-height: 90vh;
    overflow-y: auto;
}
.payment-modal-header {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    padding: 1.25rem 1.5rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.payment-modal-header h3 { font-size: 1rem; font-weight: 700; }
.payment-modal-close {
    background: rgba(255,255,255,.2);
    border: none;
    color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background .2s;
}
.payment-modal-close:hover { background: rgba(255,255,255,.35); }
.payment-modal-body { padding: 1.5rem; }
.payment-plan-summary {
    background: var(--body-bg);
    border-radius: 12px;
    padding: .75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    font-size: .9rem;
}
.payment-plan-name { font-weight: 700; color: var(--text); }
.payment-plan-price { color: #6366f1; font-weight: 700; }
.payment-mp-btn {
    display: block;
    width: 100%;
    background: #009ee3;
    color: white;
    text-align: center;
    padding: .9rem;
    border-radius: 14px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    transition: all .2s;
    cursor: pointer;
    border: none;
    margin-bottom: .75rem;
}
.payment-mp-btn:hover { background: #0077cc; transform: translateY(-1px); }
.payment-wise-btn {
    display: block;
    width: 100%;
    background: #9fe870;
    color: #163300;
    text-align: center;
    padding: .9rem;
    border-radius: 14px;
    font-weight: 700;
    font-size: .95rem;
    border: none;
    cursor: pointer;
    transition: all .2s;
    margin-bottom: .75rem;
}
.payment-wise-btn:hover { background: #8fd860; transform: translateY(-1px); }
.payment-stripe-btn {
    display: block;
    width: 100%;
    background: #635bff;
    color: white;
    text-align: center;
    padding: .9rem;
    border-radius: 14px;
    font-weight: 700;
    font-size: .95rem;
    border: none;
    cursor: pointer;
    transition: all .2s;
    margin-bottom: .5rem;
}
.payment-stripe-btn:hover { background: #4f46e5; transform: translateY(-1px); }
.payment-no-card {
    font-size: .8rem;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 1rem;
}
.payment-divider {
    text-align: center;
    color: var(--text-muted);
    font-size: .82rem;
    margin: .85rem 0;
}
.payment-or-divider {
    text-align: center;
    color: var(--text-muted);
    font-size: .82rem;
    margin: .4rem 0;
}
.payment-already-paid-btn {
    display: block;
    width: 100%;
    background: none;
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: .65rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all .2s;
}
.payment-already-paid-btn:hover { border-color: #6366f1; color: #6366f1; background: #f5f3ff; }

/* ── Installment selector ── */
.plan-installments-selector {
    margin-top: .75rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.plan-installments-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .1rem;
}
.plan-installment-btn {
    display: block;
    width: 100%;
    padding: .45rem .75rem;
    border-radius: 9px;
    border: 1.5px solid var(--border);
    background: var(--card-bg, #fff);
    color: var(--text);
    font-size: .82rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s, background .18s, color .18s;
}
.plan-installment-btn:hover {
    border-color: #6366f1;
    background: #f5f3ff;
    color: #4f46e5;
}
.plan-installment-btn.active {
    border-color: #6366f1;
    background: #6366f1;
    color: #fff;
    font-weight: 700;
}
.dark-mode .plan-installment-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.dark-mode .plan-installment-btn:hover { border-color: #818cf8; background: #312e81; color: #a5b4fc; }
.dark-mode .plan-installment-btn.active { background: #6366f1; border-color: #6366f1; color: #fff; }

/* Wise installment note row */
.wise-row--note { font-size: .8rem; color: var(--text-muted); }

.payment-input {
    width: 100%;
    padding: .65rem .9rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: .9rem;
    background: var(--surface);
    color: var(--text);
    outline: none;
    transition: border-color .2s;
}
.payment-input:focus { border-color: #6366f1; }
.payment-card-field { margin-bottom: .85rem; }
.payment-card-field label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: .3rem;
}
.payment-card-row { display: flex; gap: .75rem; }
.payment-card-row .payment-card-field { flex: 1; }
.payment-card-placeholder {
    background: var(--body-bg);
    border-radius: 12px;
    padding: 1rem;
    border: 1.5px solid var(--border);
}
.payment-activation-error {
    background: #fee2e2;
    color: #dc2626;
    border-radius: 8px;
    padding: .4rem .75rem;
    font-size: .82rem;
    margin-top: .5rem;
}

/* Wise transfer info */
.wise-transfer-info {
    background: var(--body-bg);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.wise-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: .88rem;
}
.wise-label { color: var(--text-muted); min-width: 80px; flex-shrink: 0; }

/* ── Admin membership panel ─────────────────────────────────── */
.admin-mem-wrap { padding: .5rem 0; }
.admin-mem-section-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.admin-mem-count-badge {
    background: var(--primary);
    color: white;
    font-size: .72rem;
    border-radius: 20px;
    padding: .15rem .5rem;
    font-weight: 700;
}
.admin-mem-config-panel {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.admin-mem-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .85rem;
    margin-bottom: 1rem;
}
.admin-mem-config-field label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: .3rem;
}
.admin-mem-config-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.admin-mem-config-status {
    font-size: .82rem;
    font-weight: 600;
    color: #10b981;
}
.admin-mem-subs-panel {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
}
.admin-mem-table-wrap {
    overflow-x: auto;
}
.admin-mem-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}
.admin-mem-table th,
.admin-mem-table td {
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    color: var(--text);
}
.admin-mem-table th {
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    background: var(--body-bg);
}
.admin-mem-table tr:last-child td { border-bottom: none; }
.admin-mem-email { max-width: 180px; word-break: break-all; font-size: .82rem; }
.admin-mem-actions-cell { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.admin-mem-status-badge {
    display: inline-block;
    border-radius: 20px;
    padding: .15rem .6rem;
    font-size: .75rem;
    font-weight: 700;
}
.admin-mem-status--claimed  { background: #fef3c7; color: #92400e; }
.admin-mem-status--active   { background: #d1fae5; color: #065f46; }
.admin-mem-status--expired  { background: #f3f4f6; color: #6b7280; }
.admin-mem-activate-btn { font-size: .78rem; padding: .25rem .6rem; }

/* Dark mode membership overrides */
.dark-mode .plan-card--free { background: #1e293b; border-color: #334155; }
.dark-mode .plan-feature-list--free li { color: #f1f5f9; }
.dark-mode .plans-comparison-table th,
.dark-mode .plans-comparison-table td { color: #f1f5f9; }
.dark-mode .plans-comparison-table th { background: #0f172a; }
.dark-mode .payment-modal { background: #1e293b; }
.dark-mode .payment-modal-body { background: #1e293b; }
.dark-mode .payment-plan-summary { background: #0f172a; }
.dark-mode .payment-input { background: #0f172a; border-color: #334155; color: #f1f5f9; }
.dark-mode .payment-card-placeholder { background: #0f172a; border-color: #334155; }
.dark-mode .wise-transfer-info { background: #0f172a; }
.dark-mode .upgrade-modal { background: #1e293b; }
.dark-mode .upgrade-usage-pill { background: #0f172a; border-color: #334155; }
.dark-mode .admin-mem-config-panel,
.dark-mode .admin-mem-subs-panel { background: #1e293b; border-color: #334155; }
.dark-mode .admin-mem-table th { background: #0f172a; }
.dark-mode .admin-mem-table th,
.dark-mode .admin-mem-table td { color: #f1f5f9; border-color: #334155; }
.dark-mode .payment-already-paid-btn:hover { background: #1e293b; }
.dark-mode .plans-toggle-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
.dark-mode .plans-region-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
.dark-mode .plans-comparison-table { background: #1e293b; }

/* ============ CONTRIBUTORS & ADS — fin ============ */

/* ── Audio hidden for free plan ── */
body[data-membership-plan="free"] .smp-audio-btn,
body[data-membership-plan="expired"] .smp-audio-btn {
    opacity: 0.3;
    pointer-events: none;
}
/* ── mode-card--plans ── */
.mode-card--plans {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: white; border: none; position: relative; overflow: hidden;
}
.mode-card--plans::before {
    content: ''; position: absolute; top: -30px; right: -30px;
    width: 100px; height: 100px; background: rgba(255,255,255,.08); border-radius: 50%;
}
.mode-card--plans h2, .mode-card--plans h4, .mode-card--plans p { color: white !important; }

/* ============ BG PICKER MODAL ============ */

.bg-circle {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    border: 2px solid rgba(255,255,255,.35);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
    background-size: cover !important;
    background-position: center !important;
    flex-shrink: 0;
}
.bg-circle--has-image {
    border-color: rgba(255,255,255,.7);
    box-shadow: 0 0 0 2px rgba(255,255,255,.25);
}
.bg-selector-trigger {
    display: flex; align-items: center; gap: .35rem;
    cursor: pointer; transition: opacity .2s;
}
.bg-selector-trigger:hover { opacity: .8; }
.bg-selector-trigger > span { font-size: .75rem; color: var(--header-text, #fff); }

/* Modal shell */
.bg-picker-modal {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,.6); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    animation: obFadeIn .2s ease;
}
.bg-picker-sheet {
    background: var(--surface); border-radius: 20px;
    width: 100%; max-width: 520px; max-height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    animation: tpSlideIn .25s cubic-bezier(.22,.68,0,1.2);
    overflow: hidden;
}
.bg-picker-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, var(--primary, #6366f1), var(--primary-dark, #4f46e5));
    flex-shrink: 0;
}
.bg-picker-header h3 { font-size: 1rem; font-weight: 700; color: #fff; margin: 0; }
.bg-picker-close {
    background: rgba(255,255,255,.15); border: none;
    color: #fff; font-size: .9rem; width: 27px; height: 27px;
    border-radius: 50%; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    transition: background .2s;
}
.bg-picker-close:hover { background: rgba(255,255,255,.3); }

.bg-picker-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

/* Tabs */
.bg-picker-tabs {
    display: flex; border-bottom: 1px solid var(--border);
    flex-shrink: 0; background: var(--body-bg);
}
.bg-picker-tab {
    flex: 1; padding: .65rem .4rem; background: none; border: none;
    font-size: .82rem; font-weight: 600; color: var(--text-muted);
    cursor: pointer; border-bottom: 2px solid transparent;
    margin-bottom: -1px; transition: color .2s, border-color .2s;
}
.bg-picker-tab:hover { color: var(--text); }
.bg-picker-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.bg-picker-tab-content { padding: 1rem 1.1rem; flex: 1; }

/* Theme tab */
.bg-tab-theme {
    text-align: center; padding: 2rem 1rem;
}
.bg-tab-theme-icon { font-size: 2.5rem; margin-bottom: .5rem; }
.bg-tab-theme-text { font-size: .95rem; color: var(--text); font-weight: 600; margin-bottom: .25rem; }
.bg-tab-theme-sub  { font-size: .82rem; color: var(--text-muted); }

/* Color tab */
.bg-tab-color { display: flex; flex-direction: column; gap: .75rem; }
.bg-tab-color-label { font-size: .82rem; font-weight: 600; color: var(--text); }
.bg-tab-color-row { display: flex; align-items: center; gap: .6rem; }
.bg-tab-color-row input[type="color"] {
    width: 40px; height: 32px; border: none; border-radius: 7px;
    cursor: pointer; padding: 0; background: none;
}
.bg-tab-color-swatch {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--border); flex-shrink: 0; transition: background .15s;
}
.bg-tab-color-hex { font-size: .8rem; color: var(--text-muted); font-family: monospace; }
.bg-tab-color-presets {
    display: flex; gap: .45rem; flex-wrap: wrap;
}
.bg-color-preset {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid transparent; cursor: pointer;
    transition: transform .15s, border-color .15s;
}
.bg-color-preset:hover { transform: scale(1.2); border-color: var(--text); }

/* Gallery tab */
.bg-tab-gallery { display: flex; flex-direction: column; gap: .65rem; }
.bg-tab-gallery-hint { font-size: .78rem; color: var(--text-muted); }
.bg-gallery-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
    max-height: 320px; overflow-y: auto;
    padding-right: .25rem;
    scrollbar-width: thin;
}
.bg-gallery-item {
    border: 2px solid var(--border); border-radius: 10px;
    overflow: hidden; cursor: pointer;
    transition: border-color .2s, transform .15s;
    background: none; padding: 0; display: flex; flex-direction: column;
}
.bg-gallery-item:hover  { border-color: var(--primary); transform: scale(1.03); }
.bg-gallery-item.selected { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.bg-gallery-thumb {
    width: 100%; height: 70px;
    background: var(--border) center/cover no-repeat;
}
.bg-gallery-label {
    font-size: .68rem; color: var(--text-muted);
    padding: .25rem .35rem; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Upload tab */
.bg-tab-upload { display: flex; flex-direction: column; gap: .75rem; align-items: center; }
.bg-upload-label {
    border: 2px dashed var(--border); border-radius: 14px;
    padding: 2rem 1.5rem; text-align: center; cursor: pointer;
    width: 100%; transition: border-color .2s, background .2s;
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
}
.bg-upload-label:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, transparent); }
.bg-upload-icon { font-size: 2rem; }
.bg-upload-text { font-size: .9rem; font-weight: 600; color: var(--text); }
.bg-upload-sub  { font-size: .78rem; color: var(--text-muted); }
.bg-upload-preview {
    width: 100%; height: 140px; border-radius: 12px;
    background: var(--border) center/cover no-repeat;
    border: 1px solid var(--border);
}

/* Footer */
.bg-picker-footer {
    display: flex; gap: .65rem; padding: .85rem 1.1rem;
    border-top: 1px solid var(--border); flex-shrink: 0;
}
.bg-picker-reset-btn {
    flex: 1; padding: .6rem; background: var(--body-bg);
    border: 1.5px solid var(--border); border-radius: 10px;
    font-size: .85rem; color: var(--text-muted); cursor: pointer;
    transition: background .2s;
}
.bg-picker-reset-btn:hover { background: var(--border); }
.bg-picker-apply-btn {
    flex: 2; padding: .6rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; border: none; border-radius: 10px;
    font-size: .9rem; font-weight: 700; cursor: pointer;
    transition: opacity .2s, transform .15s;
}
.bg-picker-apply-btn:hover { opacity: .9; transform: translateY(-1px); }

/* Sunset body gradient support */
body.theme-sunset {
    background: linear-gradient(160deg, #fff8f0 0%, #fff0f6 50%, #fff3e0 100%) !important;
    background-attachment: fixed !important;
}

/* Eclipse neon glow on cards */
body[data-theme="eclipse"] .mode-card,
body[data-theme="eclipse"] .plan-card--free {
    box-shadow: 0 0 18px rgba(191, 90, 255, .12), 0 2px 8px rgba(0,0,0,.4);
    border-color: #3d0080;
}
body[data-theme="eclipse"] .mode-card:hover {
    box-shadow: 0 0 28px rgba(191, 90, 255, .28), 0 4px 16px rgba(0,0,0,.5);
    border-color: #bf5aff;
}

/* Dark mode fixes */
.dark-mode .bg-picker-sheet { background: #1e293b; }
.dark-mode .bg-picker-body  { background: #1e293b; }
.dark-mode .bg-picker-tabs  { background: #0f172a; }
.dark-mode .bg-upload-label { border-color: #334155; }
.dark-mode .bg-gallery-item { border-color: #334155; }

/* ============ BG PICKER MODAL — fin ============ */

/* ═══════════════════════════════════════════════════════════════
   PER-THEME HEADER GLOW & BORDER DETAILS
═══════════════════════════════════════════════════════════════ */

/* Forest — deep green glow + leaf accent line */
body[data-theme="forest"] .app-header {
    box-shadow: 0 2px 20px rgba(45,106,79,0.35), 0 1px 0 rgba(184,228,199,0.3) inset, 0 -2px 0 rgba(82,183,136,0.45) inset;
}
body[data-theme="forest"] .mode-card {
    box-shadow: 0 4px 16px rgba(45,106,79,0.1), 0 1px 3px rgba(0,0,0,0.04);
}
body[data-theme="forest"] .mode-card:hover {
    border-color: #52b788;
    box-shadow: 0 8px 24px rgba(45,106,79,0.18);
}

/* Ocean — crisp blue depth */
body[data-theme="ocean"] .app-header {
    box-shadow: 0 2px 20px rgba(3,105,161,0.35), 0 1px 0 rgba(186,230,253,0.35) inset, 0 -2px 0 rgba(14,165,233,0.5) inset;
}
body[data-theme="ocean"] .mode-card {
    box-shadow: 0 4px 16px rgba(3,105,161,0.1), 0 1px 3px rgba(0,0,0,0.04);
}
body[data-theme="ocean"] .mode-card:hover {
    border-color: #0ea5e9;
    box-shadow: 0 8px 24px rgba(3,105,161,0.18);
}

/* Sunset — warm golden radiance */
body[data-theme="sunset"] .app-header {
    box-shadow: 0 2px 24px rgba(232,82,30,0.4), 0 1px 0 rgba(255,205,60,0.35) inset, 0 -2px 0 rgba(255,205,60,0.55) inset;
}
body[data-theme="sunset"] .mode-card {
    border-color: #ffb890;
    box-shadow: 0 4px 16px rgba(232,82,30,0.1), 0 1px 3px rgba(0,0,0,0.04);
}
body[data-theme="sunset"] .mode-card:hover {
    border-color: #e8521e;
    box-shadow: 0 8px 24px rgba(232,82,30,0.18);
}

/* Sunset mode-card warm colour palette (cycles through 4 tones) */
body[data-theme="sunset"] .mode-card:nth-child(4n+1) {
    background: linear-gradient(145deg, #fff3e0 0%, #ffe0b2 100%);
}
body[data-theme="sunset"] .mode-card:nth-child(4n+2) {
    background: linear-gradient(145deg, #fce4ec 0%, #f8bbd0 100%);
}
body[data-theme="sunset"] .mode-card:nth-child(4n+3) {
    background: linear-gradient(145deg, #fff8e1 0%, #ffecb3 100%);
}
body[data-theme="sunset"] .mode-card:nth-child(4n+4) {
    background: linear-gradient(145deg, #fbe9e7 0%, #ffccbc 100%);
}

/* Eclipse — update header with stronger neon glow */
body[data-theme="eclipse"] .app-header {
    box-shadow: 0 2px 28px rgba(191,90,255,0.45), 0 1px 0 rgba(191,90,255,0.2) inset, 0 -2px 0 rgba(191,90,255,0.65) inset;
}
body[data-theme="eclipse"] .mode-card {
    box-shadow: 0 0 18px rgba(191,90,255,0.14), 0 2px 8px rgba(0,0,0,0.4);
    border-color: #3d0080;
}
body[data-theme="eclipse"] .mode-card:hover {
    box-shadow: 0 0 32px rgba(191,90,255,0.32), 0 4px 16px rgba(0,0,0,0.5);
    border-color: #bf5aff;
}
body[data-theme="eclipse"] .mode-card::after {
    background: linear-gradient(90deg, #bf5aff, #7b00ff);
}

/* ═══════════════════════════════════════════════════════════════
   BG PICKER — OPACITY SLIDERS
═══════════════════════════════════════════════════════════════ */
.bg-picker-opacity {
    padding: .75rem 1.1rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}
.bg-picker-opacity-title {
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .6rem;
}
.bg-opacity-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .45rem;
}
.bg-opacity-row:last-child { margin-bottom: 0; }
.bg-opacity-row label {
    font-size: .78rem;
    color: var(--text);
    font-weight: 600;
    width: 72px;
    flex-shrink: 0;
}
.bg-opacity-ctrl {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.bg-opacity-ctrl input[type="range"] {
    flex: 1;
    height: 4px;
    accent-color: var(--primary);
    cursor: pointer;
}
.bg-opacity-val {
    font-size: .75rem;
    color: var(--text-muted);
    font-family: monospace;
    width: 32px;
    text-align: right;
    flex-shrink: 0;
}
.dark-mode .bg-picker-opacity { background: #1e293b; }

/* ═══════════════════════════════════════════════════════════════
   NOCHE URBANA (sunset) — DARK MODE FIXES
═══════════════════════════════════════════════════════════════ */

/* Override the light nth-child card gradients in dark mode */
body[data-theme="sunset"].dark-mode .mode-card:nth-child(4n+1),
body[data-theme="sunset"].dark-mode .mode-card:nth-child(4n+2),
body[data-theme="sunset"].dark-mode .mode-card:nth-child(4n+3),
body[data-theme="sunset"].dark-mode .mode-card:nth-child(4n+4) {
    background: var(--card-bg);
}

/* Fix text contrast in dark mode cards */
body[data-theme="sunset"].dark-mode .mode-card h2,
body[data-theme="sunset"].dark-mode .mode-card p {
    color: var(--text);
}
body[data-theme="sunset"].dark-mode .mode-card p {
    color: var(--text-muted);
}

/* Fix practice/flashcard buttons — override var(--border) based backgrounds */
body[data-theme="sunset"].dark-mode .prac-session-progress,
body[data-theme="sunset"].dark-mode .prac-stat--gray {
    background: rgba(255,200,100,0.12);
}
body[data-theme="sunset"].dark-mode .prac-exit-btn,
body[data-theme="sunset"].dark-mode .secondary-btn,
body[data-theme="sunset"].dark-mode .prac-wordlist-close {
    background: rgba(255,200,100,0.15);
    color: var(--text-muted);
    border-color: rgba(255,200,100,0.2);
}
body[data-theme="sunset"].dark-mode .primary-btn {
    background: linear-gradient(135deg, #e8521e, #f7931e);
    color: #fff;
}

/* ── MercadoPago payment button & loading ── */
.payment-mp-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .9rem;
    font-size: .9rem;
    color: var(--text-muted);
}
.payment-spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--border);
    border-top-color: #009ee3;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE QA FIXES
═══════════════════════════════════════════════════════════════ */

/* ── Safe area insets (notch / Dynamic Island / home indicator) ── */
.app-header {
    padding-left:  max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-top:   max(0.5rem, env(safe-area-inset-top));
}
.main-menu,
#mainContainer {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

/* ── Touch feedback: :active replaces :hover on coarse devices ── */
@media (pointer: coarse) {
    .mode-card:hover           { transform: none; box-shadow: none; }
    .mode-card:active          { transform: translateY(-2px); opacity: .88; }
    .mode-card:hover::after    { opacity: 0; }
    .mode-card:active::after   { opacity: 1; }

    .primary-btn:hover         { opacity: 1; }
    .primary-btn:active        { opacity: .82; transform: scale(.97); }

    .secondary-btn:hover       { background: #e2e8f0; }
    .secondary-btn:active      { opacity: .82; }

    .menu-icon:hover           { background: rgba(255,255,255,.15); }
    .menu-icon:active          { background: rgba(255,255,255,.35); }

    .avatar-trigger:hover,
    .bg-selector-trigger:hover { background: rgba(255,255,255,.18); padding: 0.2rem; gap: 0; }
    .avatar-trigger:active,
    .bg-selector-trigger:active { background: rgba(255,255,255,.35); }

    .dropdown-menu a:hover     { background: transparent; }
    .dropdown-menu a:active    { background: #f1f5f9; }

    .tp-card:hover             { transform: none; }
    .tp-card:active            { transform: scale(.97); }

    .bg-gallery-item:hover     { transform: none; }
    .bg-gallery-item:active    { transform: scale(.97); }
}

/* ── Minimum tap target 44×44px ── */
.menu-icon {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar-circle,
.bg-circle {
    min-width: 36px;
    min-height: 36px;
}
.ob-eye {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.smp-audio-btn,
.smp-copy-btn,
.smp-flash-btn,
.prac-audio-btn {
    min-width: 36px;
    min-height: 36px;
}
.bg-picker-close,
.payment-modal-close {
    min-width: 44px;
    min-height: 44px;
}
.tp-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Smooth momentum scrolling on iOS ── */
.main-menu,
.tp-body,
.bg-picker-body,
.bg-gallery-grid,
.admin-panel-body,
.prac-wordlist-body,
#mainContainer {
    -webkit-overflow-scrolling: touch;
}

/* ── touch-action on draggable/scrollable elements ── */
.imm-progress-bar,
.imm-audio-bar,
.prac-session-progress,
input[type="range"] {
    touch-action: none;
}
.bg-gallery-grid,
.tp-body,
.main-menu {
    touch-action: pan-y;
}

/* ── Modal sizing on small screens ── */
@media (max-width: 480px) {
    .payment-modal {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .payment-modal-overlay {
        align-items: flex-end !important;
    }

    .tp-sheet {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 92dvh;
    }

    .bg-picker-sheet {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .upgrade-modal {
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
    }

    /* Stack header items on very small screens */
    .app-header {
        padding: 0.5rem;
        gap: 0.35rem;
    }
    .app-header h1 {
        font-size: 1rem;
    }

    /* Wider buttons in forms */
    .ob-auth-card {
        padding: 1.25rem 1rem !important;
    }
    .ob-field input {
        font-size: 16px !important; /* prevents iOS auto-zoom on input focus */
    }

    /* Flashcard session full-width buttons */
    .prac-state-btns {
        max-width: 100%;
    }
}

/* ── Prevent iOS auto-zoom on input focus (font-size < 16px triggers it) ── */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    font-size: max(16px, 1rem);
}

/* ── dvh fallback for viewport height ── */
.ob-overlay,
.tp-overlay,
.bg-picker-modal,
.payment-modal-overlay {
    height: 100vh;
    height: 100dvh;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — HEADER LAYOUT FIX
   Prevents horizontal overflow on small viewports
═══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    /* Prevent wrapping — everything must fit in one row */
    .app-header {
        flex-wrap: nowrap !important;
        padding: 0.4rem 0.6rem !important;
        gap: 0.3rem !important;
        align-items: center;
    }

    /* Shrink logo-title so it doesn't dominate the row */
    .logo-title {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        gap: 0.35rem;
    }
    .logo { font-size: 1.3rem !important; }

    /* Hide the h1 text on mobile — logo emoji is enough */
    .app-header h1 {
        display: none !important;
    }

    /* Avatar & bg triggers: icon-only, no labels, no expanding padding */
    .avatar-trigger,
    .bg-selector-trigger {
        padding: 0.25rem !important;
        gap: 0 !important;
        margin-right: 0.1rem !important;
        flex-shrink: 0;
    }
    .avatar-trigger:hover,
    .bg-selector-trigger:hover,
    .avatar-trigger.expanded,
    .bg-selector-trigger.expanded {
        padding: 0.25rem !important;
        gap: 0 !important;
    }
    /* Always hide text labels on mobile */
    .avatar-trigger span,
    .bg-selector-trigger span {
        display: none !important;
    }

    /* Smaller circles */
    .avatar-circle,
    .bg-circle {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        font-size: 0.95rem !important;
    }

    /* Dark-mode toggle: remove margin-left:auto so it doesn't push items apart */
    .dark-mode-switch {
        margin-left: 0.1rem !important;
        margin-right: 0.1rem !important;
        flex-shrink: 0;
    }

    /* Compact the switch itself */
    .switch {
        width: 20px !important;
        height: 40px !important;
    }

    /* Menu button: slightly smaller but still tappable */
    .menu-icon {
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 1.15rem !important;
        padding: 0.25rem !important;
        flex-shrink: 0;
    }

    /* Admin button compact */
    #adminBtn {
        font-size: 1rem;
        padding: 0.3rem !important;
        flex-shrink: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — ONBOARDING / AUTH OVERLAY
   Prevents auth card from being pushed below the viewport
═══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    /* Allow overlay to scroll if card is taller than screen */
    .ob-overlay {
        align-items: flex-start !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /*
     * margin: auto en el eje vertical (cross-axis) tiene prioridad
     * sobre align-items en flexbox.
     * — Cuando hay espacio libre: los márgenes se distribuyen → centrado.
     * — Cuando el card es más alto que la pantalla: márgenes = 0
     *   → el wrap queda arriba y el overlay hace scroll.
     */
    .ob-auth-wrap {
        margin-top: auto !important;
        margin-bottom: auto !important;
        width: 100% !important;
        padding: 1rem 0.75rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .ob-auth-card {
        padding: 1.25rem 1.1rem !important;
    }

    /* Slides: centrado vertical via margin auto (mismo truco que ob-auth-wrap) */
    .ob-slides-wrap {
        padding: 1.25rem 1rem;
        margin-top: auto !important;
        margin-bottom: auto !important;
    }
    .ob-slide-body {
        min-height: 180px;
    }
    .ob-slide-icon {
        width: 72px;
        height: 72px;
        font-size: 2.5rem;
    }
    .ob-slide-title {
        font-size: 1.3rem;
    }
    .ob-slide-footer {
        margin-top: 1.5rem;
        gap: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MISIÓNMATE — Sistema de gamificación
═══════════════════════════════════════════════════════════════ */

/* ── Botón en el header ── */
.mm-toggle-btn {
  position: relative;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  font-size: 1.15rem;
  cursor: pointer;
  padding: 0.3rem 0.45rem;
  color: var(--header-text, #fff);
  transition: background 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mm-toggle-btn:hover { background: rgba(255,255,255,0.28); }
.mm-toggle-btn.mm-btn--active {
  background: linear-gradient(135deg, rgba(99,102,241,0.55), rgba(139,92,246,0.55));
  border-color: rgba(139,92,246,0.6);
  box-shadow: 0 0 12px rgba(99,102,241,0.4);
}
/* Badge de trofeos */
.mm-toggle-btn::after {
  content: attr(data-badge);
  position: absolute;
  top: -4px; right: -4px;
  background: #f59e0b;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 50%;
  width: 14px; height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  display: none;
}
.mm-toggle-btn[data-badge]:not([data-badge=""])::after {
  display: flex;
}

/* ── Overlay del onboarding ── */
.mm-onboarding {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(15,12,41,0.88);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.25rem 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: obFadeIn 0.3s ease;
}

.mm-card {
  background: white;
  border-radius: 24px;
  padding: 1.75rem 1.5rem;
  width: 100%;
  max-width: 420px;
  margin: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  animation: obFadeIn 0.25s ease;
  touch-action: pan-y;
}
body.dark-mode .mm-card {
  background: #1e1e2e;
  color: #e2e8f0;
}

.mm-card-hero {
  text-align: center;
  margin-bottom: 0.75rem;
  position: relative;
}
.mm-card-sword {
  font-size: 2.5rem;
  display: inline-block;
}
.mm-card-sparkles {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1rem;
  margin-top: 0.25rem;
  opacity: 0.7;
}

.mm-card-title {
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mm-card-text {
  font-size: 0.92rem;
  color: #475569;
  line-height: 1.65;
  text-align: center;
  margin-bottom: 1.25rem;
}
body.dark-mode .mm-card-text { color: #94a3b8; }

/* Preview de trofeos — step 1 compact list */
.mm-trophies-preview {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  background: #f8fafc;
  border-radius: 14px;
  padding: 0.75rem 1rem;
}
body.dark-mode .mm-trophies-preview { background: #0f172a; }

.mm-trophy-prev-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.84rem;
  color: #475569;
}
body.dark-mode .mm-trophy-prev-item { color: #94a3b8; }
.mm-trophy-prev-item .mm-trophy-prev-icon { font-size: 1.15rem; flex-shrink: 0; }
.mm-trophy-prev-name { font-weight: 600; color: #1e293b; }
body.dark-mode .mm-trophy-prev-name { color: #e2e8f0; }
.mm-trophy-prev-sub  { font-size: 0.75rem; color: #94a3b8; margin-left: auto; white-space: nowrap; }

/* Dots de pasos */
.mm-step-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 1.25rem;
}
.mm-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
}
.mm-dot--active {
  background: #6366f1;
  width: 20px;
  border-radius: 4px;
}

.mm-card-btns {
  display: flex;
  gap: 0.75rem;
}
.mm-card-btns .secondary-btn { flex: 1; }
.mm-card-btns .primary-btn   { flex: 2; }

/* ── Paso 2: metas ── */
.mm-goal-section { margin-bottom: 1.25rem; }
.mm-goal-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.mm-chip {
  position: relative;
  z-index: 0;
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.4;
}
.mm-chip:hover { border-color: #6366f1; color: #6366f1; }
.mm-chip--on {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #fff !important;
}
body.dark-mode .mm-chip {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}
body.dark-mode .mm-chip--on {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #fff !important;
}

.mm-start-btn { width: 100%; justify-content: center; }

/* ── Hoja de Ruta (spotlight tour) ── */

/* Overlay transparente — el oscuro lo hace el spotlight con box-shadow */
.mm-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none; /* el skip y callout tienen pointer-events: all */
}

/* El recorte iluminado */
.mm-tour-spotlight {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.72);
  pointer-events: none;
  transition: left 0.35s ease, top 0.35s ease, width 0.35s ease, height 0.35s ease;
  outline: 2.5px solid rgba(255,255,255,0.35);
  z-index: 9991;
}

/* Globo de texto */
.mm-tour-callout {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(340px, calc(100vw - 2rem));
  background: #fff;
  border-radius: 18px;
  padding: 1.1rem 1.25rem 1rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
  z-index: 9992;
  pointer-events: all;
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mm-tour-callout--in {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
body.dark-mode .mm-tour-callout { background: #1e1e2e; color: #e2e8f0; }

.mm-tour-step-count {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6366f1;
  margin-bottom: 0.35rem;
}
.mm-tour-title {
  font-size: 1rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
body.dark-mode .mm-tour-title { color: #e2e8f0; }
.mm-tour-text {
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.55;
  margin-bottom: 0.85rem;
}
body.dark-mode .mm-tour-text { color: #94a3b8; }

.mm-tour-btns {
  display: flex;
  gap: 0.6rem;
}
.mm-tour-btns .secondary-btn { flex: 1; padding: 0.5rem 0.6rem; font-size: 0.82rem; }
.mm-tour-btns .primary-btn   { flex: 2; padding: 0.5rem 0.6rem; font-size: 0.82rem; }

/* Botón saltar */
.mm-tour-skip-btn {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9993;
  pointer-events: all;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s;
}
.mm-tour-skip-btn:hover { background: rgba(255,255,255,0.28); }

/* ── Panel de progreso ── */
.mm-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 0;
}
.mm-panel-overlay--in { opacity: 1; }

@media (min-width: 500px) {
  .mm-panel-overlay { align-items: center; padding: 1rem; }
  .mm-panel { border-radius: 20px !important; max-height: 90vh; }
}

.mm-panel {
  background: white;
  border-radius: 20px 20px 0 0;
  padding: 1.5rem;
  width: 100%;
  max-width: 420px;
  max-height: 92dvh;
  overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.25);
}
body.dark-mode .mm-panel { background: #1e1e2e; color: #e2e8f0; }

.mm-panel-hd {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.mm-panel-hd-icon { font-size: 1.4rem; }
.mm-panel-hd-title {
  flex: 1;
  font-size: 1.1rem;
  font-weight: 800;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mm-panel-close-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #94a3b8;
  cursor: pointer;
  padding: 0.2rem;
}

.mm-panel-goals {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.mm-panel-goal-chip {
  flex: 1;
  text-align: center;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
}
body.dark-mode .mm-panel-goal-chip { background: #0f172a; color: #94a3b8; }

.mm-panel-trophies-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.mm-panel-trophy {
  display: flex;
  gap: 0.85rem;
  padding: 0.85rem;
  background: #f8fafc;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  align-items: flex-start;
  opacity: 0.65;
}
body.dark-mode .mm-panel-trophy { background: #0f172a; border-color: #1e293b; }
.mm-panel-trophy--earned { opacity: 1; border-color: #6366f1; }

.mm-panel-trophy-icon { font-size: 1.8rem; flex-shrink: 0; }
.mm-panel-trophy-body { flex: 1; min-width: 0; }
.mm-panel-trophy-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: #1e293b;
  margin-bottom: 0.2rem;
}
body.dark-mode .mm-panel-trophy-name { color: #e2e8f0; }
.mm-panel-trophy-desc { font-size: 0.78rem; color: #64748b; margin-bottom: 0.45rem; }
.mm-panel-trophy-check { font-size: 0.8rem; color: #10b981; font-weight: 700; }

.mm-panel-prog-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mm-panel-prog-bar {
  flex: 1;
  height: 6px;
  background: #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}
.mm-panel-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 6px;
  transition: width 0.4s ease;
}
.mm-panel-prog-label { font-size: 0.75rem; color: #94a3b8; white-space: nowrap; }

.mm-panel-footer {
  padding-top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mm-panel-toggle-btn {
  width: 100%;
  padding: 0.7rem;
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: background 0.15s;
}
.mm-panel-toggle-btn:hover { background: #e2e8f0; }
body.dark-mode .mm-panel-toggle-btn { background: #0f172a; border-color: #1e293b; color: #94a3b8; }

.mm-panel-route-btn {
  width: 100%;
  padding: 0.6rem;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border: none;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s;
}
.mm-panel-route-btn:hover { opacity: 0.88; }

/* ── Toast de trofeo desbloqueado ── */
.mm-trophy-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  opacity: 0;
  z-index: 10000;
  background: linear-gradient(135deg, #1e1b4b, #312e81);
  color: white;
  border-radius: 16px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 280px;
  max-width: calc(100vw - 2rem);
  box-shadow: 0 8px 32px rgba(99,102,241,0.45);
  transition: opacity 0.4s ease, transform 0.4s ease;
  border: 1px solid rgba(139,92,246,0.4);
}
.mm-trophy-toast--in {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.mm-trophy-toast-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
  animation: mm-bounce 0.6s ease 0.3s both;
}
@keyframes mm-bounce {
  0%   { transform: scale(0.5); }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.mm-trophy-toast-tag {
  font-size: 0.7rem;
  font-weight: 700;
  color: #a5b4fc;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.2rem;
}
.mm-trophy-toast-name {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 0.1rem;
}
.mm-trophy-toast-desc {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
}

/* ── Mobile: ocultar botón mm en pantallas muy pequeñas si hay overflow ── */
@media (max-width: 600px) {
  .mm-toggle-btn {
    min-width: 34px !important;
    min-height: 34px !important;
    font-size: 1rem !important;
    padding: 0.2rem !important;
  }
}

/* ── Practice: Share section ──────────────────────────────────── */
.prac-share-section {
    margin: 1rem 0 0.5rem;
    padding: 1rem;
    background: var(--card-bg, #f8fafc);
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    text-align: center;
}
.prac-share-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
}
.prac-share-btns {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}
.prac-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: opacity 0.15s, transform 0.12s;
}
.prac-share-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.prac-share-btn--native {
    width: 100%;
    justify-content: center;
    background: linear-gradient(135deg, #2d6a4f, #40916c);
    color: #fff;
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
}
.prac-share-btn--wa   { background: #25d366; color: #fff; }
.prac-share-btn--tw   { background: #1a1a2e; color: #fff; }
.prac-share-btn--tg   { background: #229ed9; color: #fff; }
.prac-share-btn--copy { background: var(--border-color, #e2e8f0); color: var(--text-main, #1e293b); }


/* ── MisiónMate: group headers in panel ──────────────────────── */
.mm-panel-group-hd {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #64748b);
    margin: 1rem 0 0.4rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.mm-panel-group-hd:first-child { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════
   SELECTOR DE MODO — 3 botones redondos 3D
═══════════════════════════════════════════════════════════════ */

.app-mode-selector {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 10px 8px 12px;
    background: var(--header-bg, #3a7d5c);
    background: var(--header-grad, linear-gradient(135deg, #2d6a4f 0%, #52b788 100%));
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    z-index: 990;
}

.app-mode-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.app-mode-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* Botón redondo 3D */
.app-mode-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;

    /* Color base — un tono del header */
    background: linear-gradient(145deg, #5db88a, #3a7d5c);

    /* Sombra 3D: clara arriba-izquierda, oscura abajo-derecha */
    box-shadow:
        4px 4px 8px rgba(0,0,0,0.35),
        -2px -2px 6px rgba(255,255,255,0.18),
        inset 0 1px 1px rgba(255,255,255,0.2),
        inset 0 -1px 1px rgba(0,0,0,0.1);
}

/* Hover — levemente más brillante */
.app-mode-btn:hover {
    box-shadow:
        5px 5px 10px rgba(0,0,0,0.38),
        -3px -3px 8px rgba(255,255,255,0.22),
        inset 0 1px 1px rgba(255,255,255,0.25),
        inset 0 -1px 1px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

/* Estado activo — efecto presionado */
.app-mode-selector[data-mode="traduccion"]  .app-mode-btn[data-tab="traduccion"],
.app-mode-selector[data-mode="mision"]      .app-mode-btn[data-tab="mision"],
.app-mode-selector[data-mode="exploracion"] .app-mode-btn[data-tab="exploracion"],
.app-mode-selector[data-mode="livefeed"]    .app-mode-btn[data-tab="livefeed"],
.app-mode-selector[data-mode="classroom"]   .app-mode-btn[data-tab="classroom"] {
    background: linear-gradient(145deg, #3a7d5c, #5db88a);
    box-shadow:
        inset 3px 3px 7px rgba(0,0,0,0.4),
        inset -2px -2px 5px rgba(255,255,255,0.1),
        0 1px 3px rgba(255,255,255,0.15);
    transform: translateY(2px);
}

/* Click físico (mientras se mantiene presionado) */
.app-mode-btn:active {
    box-shadow:
        inset 3px 3px 7px rgba(0,0,0,0.4),
        inset -2px -2px 5px rgba(255,255,255,0.1),
        0 1px 3px rgba(255,255,255,0.15);
    transform: translateY(2px);
}

/* Dark mode */
body.dark-mode .app-mode-selector {
    box-shadow: 0 3px 12px rgba(0,0,0,0.4);
}
body.dark-mode .app-mode-btn {
    background: linear-gradient(145deg, #4a9070, #2a5e42);
    box-shadow:
        4px 4px 8px rgba(0,0,0,0.5),
        -2px -2px 6px rgba(255,255,255,0.07),
        inset 0 1px 1px rgba(255,255,255,0.12),
        inset 0 -1px 1px rgba(0,0,0,0.2);
}

/* Label activo — resalte */
.app-mode-selector[data-mode="traduccion"]  .app-mode-item:has([data-tab="traduccion"]) .app-mode-label,
.app-mode-selector[data-mode="mision"]      .app-mode-item:has([data-tab="mision"]) .app-mode-label,
.app-mode-selector[data-mode="exploracion"] .app-mode-item:has([data-tab="exploracion"]) .app-mode-label,
.app-mode-selector[data-mode="livefeed"]    .app-mode-item:has([data-tab="livefeed"]) .app-mode-label,
.app-mode-selector[data-mode="classroom"]   .app-mode-item:has([data-tab="classroom"]) .app-mode-label {
    color: #fff;
    text-shadow: 0 0 6px rgba(255,255,255,0.6);
}

/* Mobile */
@media (max-width: 420px) {
    .app-mode-btn { width: 44px; height: 44px; font-size: 1.15rem; }
    .app-mode-selector { gap: 8px; padding: 8px 4px 10px; }
    .app-mode-label { font-size: 0.58rem; }
}

/* ═══════════════════════════════════════════════════════════════
   LIVE FEED — sección de publicaciones recientes
═══════════════════════════════════════════════════════════════ */

.livefeed-section {
    padding: 16px;
    max-width: 640px;
    margin: 0 auto;
}

.livefeed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.livefeed-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #1a2e1a);
    margin: 0;
}

.livefeed-filters {
    display: flex;
    gap: 8px;
}

.livefeed-filter-btn {
    padding: 5px 12px;
    border-radius: 20px;
    border: 1.5px solid #3a7d5c;
    background: transparent;
    color: #3a7d5c;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.livefeed-filter-btn.active {
    background: #3a7d5c;
    color: #fff;
}

.livefeed-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.livefeed-post {
    background: var(--card-bg, #fff);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid var(--border-color, #e8f5e9);
}

.livefeed-post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.livefeed-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #52b788, #2d6a4f);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.livefeed-post-meta {
    flex: 1;
}

.livefeed-post-author {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-primary, #1a2e1a);
}

.livefeed-post-time {
    font-size: 0.73rem;
    color: var(--text-muted, #6b7280);
}

.livefeed-post-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 700;
    background: #e8f5e9;
    color: #2d6a4f;
}

.livefeed-post-badge.live {
    background: #fee2e2;
    color: #dc2626;
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

.livefeed-post-body { display:none; } /* replaced by .lf-post-body */

.livefeed-post-title { font-size:1rem; font-weight:700; color:var(--text); margin:.3rem 0 .45rem; line-height:1.3; }
.livefeed-post-level { font-size:.68rem; font-weight:700; background:rgba(79,70,229,.12); color:#4f46e5; border-radius:20px; padding:.1rem .45rem; margin-left:.3rem; }
.lf-post-intro  { font-size:.8rem; color:var(--primary,#4f46e5); font-weight:600; margin-bottom:.4rem; line-height:1.4; }
.lf-post-body   { font-size:.88rem; color:var(--text-secondary,#374151); line-height:1.55; margin-bottom:.5rem; }
.lf-post-highlight { display:flex; align-items:flex-start; gap:.4rem; background:rgba(79,70,229,.08); border-left:3px solid #4f46e5; border-radius:0 8px 8px 0; padding:.4rem .6rem; margin:.4rem 0; font-size:.83rem; font-weight:600; color:var(--text); }
.lf-post-example   { display:flex; align-items:flex-start; gap:.4rem; background:rgba(16,185,129,.07); border-radius:8px; padding:.4rem .6rem; margin:.4rem 0; font-size:.82rem; color:var(--text); }
.lf-post-tip       { display:flex; align-items:flex-start; gap:.4rem; background:rgba(245,158,11,.08); border-radius:8px; padding:.4rem .6rem; margin:.4rem 0; font-size:.8rem; color:var(--text); }
.lf-hl-icon,.lf-ex-icon,.lf-tip-icon { flex-shrink:0; font-size:.85rem; margin-top:.05rem; }
.lf-post-tags  { display:flex; flex-wrap:wrap; gap:.3rem; margin:.5rem 0; }
.lf-tag        { background:var(--border,#e5e7eb); border-radius:20px; padding:.15rem .5rem; font-size:.71rem; color:var(--text-muted,#6b7280); }
body.dark-mode .lf-post-highlight { background:rgba(99,102,241,.12); }
body.dark-mode .lf-post-example   { background:rgba(16,185,129,.1); }
body.dark-mode .lf-post-tip       { background:rgba(245,158,11,.1); }
body.dark-mode .livefeed-post-level { background:rgba(99,102,241,.2); }

.livefeed-post-actions {
    display: flex;
    gap: 14px;
}

.livefeed-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    transition: color 0.15s;
}

.livefeed-action-btn:hover { color: #3a7d5c; }

.livefeed-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--text-muted, #6b7280);
    font-size: 0.9rem;
}

body.dark-mode .livefeed-post {
    background: #1e2d24;
    border-color: #2a4035;
}

body.dark-mode .livefeed-post-badge { background: #1a3025; }
body.dark-mode .livefeed-filter-btn { border-color: #52b788; color: #52b788; }
body.dark-mode .livefeed-filter-btn.active { background: #52b788; color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   CLASS ROOM — clases disponibles y en vivo
═══════════════════════════════════════════════════════════════ */

.classroom-section {
    padding: 16px;
    max-width: 640px;
    margin: 0 auto;
}

.classroom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.classroom-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #1a2e1a);
    margin: 0;
}

.classroom-tabs {
    display: flex;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid #3a7d5c;
    margin-bottom: 16px;
}

.classroom-tab-btn {
    flex: 1;
    padding: 8px 0;
    border: none;
    background: transparent;
    color: #3a7d5c;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.classroom-tab-btn.active {
    background: #3a7d5c;
    color: #fff;
}

.classroom-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #dc2626;
}

.classroom-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #dc2626;
    animation: livePulse 1.2s ease-in-out infinite;
}

.classroom-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.classroom-card {
    background: var(--card-bg, #fff);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid var(--border-color, #e8f5e9);
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.classroom-card.is-live {
    border-color: #fca5a5;
    background: linear-gradient(135deg, #fff 80%, #fff5f5);
}

body.dark-mode .classroom-card.is-live {
    background: linear-gradient(135deg, #1e2d24 80%, #2d1a1a);
    border-color: #7f1d1d;
}

.classroom-card-thumb {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: linear-gradient(135deg, #52b788, #2d6a4f);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.classroom-card-info {
    flex: 1;
    min-width: 0;
}

.classroom-card-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary, #1a2e1a);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.classroom-card-teacher {
    font-size: 0.77rem;
    color: var(--text-muted, #6b7280);
    margin-bottom: 6px;
}

.classroom-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.classroom-tag {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.67rem;
    font-weight: 600;
    background: #e8f5e9;
    color: #2d6a4f;
}

.classroom-card-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.classroom-join-btn {
    padding: 7px 14px;
    border-radius: 20px;
    border: none;
    background: #3a7d5c;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.classroom-join-btn:hover { background: #2d6a4f; }

.classroom-join-btn.live-btn {
    background: #dc2626;
}

.classroom-join-btn.live-btn:hover { background: #b91c1c; }

.classroom-card-time {
    font-size: 0.7rem;
    color: var(--text-muted, #6b7280);
    text-align: right;
}

.classroom-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.classroom-filter-chip {
    padding: 4px 12px;
    border-radius: 20px;
    border: 1.5px solid #3a7d5c;
    background: transparent;
    color: #3a7d5c;
    font-size: 0.73rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.classroom-filter-chip.active {
    background: #3a7d5c;
    color: #fff;
}

body.dark-mode .classroom-card { background: #1e2d24; border-color: #2a4035; }
body.dark-mode .classroom-tag { background: #1a3025; color: #52b788; }
body.dark-mode .classroom-tab-btn { color: #52b788; }
body.dark-mode .classroom-tab-btn.active { background: #52b788; color: #fff; border-color: #52b788; }
body.dark-mode .classroom-tabs { border-color: #52b788; }
body.dark-mode .classroom-filter-chip { border-color: #52b788; color: #52b788; }
body.dark-mode .classroom-filter-chip.active { background: #52b788; color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   ADMIN — BOTS
═══════════════════════════════════════════════════════════════ */

.admin-bots-section { padding: 4px 0 24px; }

/* ── Tabs Bots / Agenda ── */
.bots-tab-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--border, #e2e8f0);
    padding-bottom: 0;
}
.bots-tab {
    padding: 7px 20px;
    border: none;
    background: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 6px 6px 0 0;
    transition: color 0.15s, border-color 0.15s;
}
.bots-tab:hover { color: var(--primary, #6366f1); }
.bots-tab--active { color: var(--primary, #6366f1); border-bottom-color: var(--primary, #6366f1); }

/* ── Agenda ── */
.agenda-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }

.agenda-section { margin-bottom: 24px; }
.agenda-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border, #e2e8f0);
}
.agenda-badge {
    background: var(--primary, #6366f1);
    color: #fff;
    font-size: 0.72rem;
    padding: 1px 7px;
    border-radius: 20px;
    font-weight: 700;
}
.agenda-list { display: flex; flex-direction: column; gap: 2px; }
.agenda-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    background: var(--card-bg, #f8fafc);
    border: 1px solid var(--border, #f1f5f9);
    flex-wrap: wrap;
}
.agenda-row--pending { border-left: 3px solid #f59e0b; }
.agenda-row--fired   { border-left: 3px solid #10b981; }
.agenda-time { font-family: monospace; font-size: 0.8rem; color: var(--text-muted, #64748b); min-width: 110px; }
.agenda-bot  { font-weight: 600; color: var(--text, #1e293b); }
.agenda-dir  { font-size: 0.72rem; font-weight: 700; padding: 1px 6px; border-radius: 10px; }
.agenda-dir.es-en { background: rgba(59,130,246,.12); color: #2563eb; }
.agenda-dir.en-es { background: rgba(16,185,129,.12); color: #059669; }
.agenda-status { font-size: 0.78rem; font-weight: 600; }
.agenda-status.pending { color: #d97706; }
.agenda-status.fired   { color: #10b981; }
.agenda-post-title {
    flex: 1;
    color: var(--text-muted, #64748b);
    font-style: italic;
    font-size: 0.8rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agenda-post-del {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.5;
    transition: opacity 0.15s;
    padding: 0 2px;
    flex-shrink: 0;
}
.agenda-post-del:hover { opacity: 1; }
.agenda-empty { color: var(--text-muted, #94a3b8); font-size: 0.85rem; padding: 12px 0; font-style: italic; }

body.dark-mode .bots-tab { color: #94a3b8; }
body.dark-mode .bots-tab--active { color: #818cf8; border-bottom-color: #818cf8; }
body.dark-mode .agenda-row { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
body.dark-mode .agenda-bot { color: #f1f5f9; }

.admin-bots-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.bot-info-banner {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.82rem;
    color: #166534;
    margin-bottom: 16px;
    line-height: 1.5;
}
body.dark-mode .bot-info-banner { background: #052e16; border-color: #166534; color: #4ade80; }
.bot-info-banner code { background: rgba(0,0,0,0.08); padding: 1px 5px; border-radius: 4px; font-size: 0.8em; }
.bot-info-banner a { color: inherit; font-weight: 600; }

/* ── Bot form ── */
.bot-form {
    background: var(--card-bg, #fff);
    border: 1.5px solid #bbf7d0;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
body.dark-mode .bot-form { background: #1a2e22; border-color: #166534; }

.bot-form-title { margin: 0 0 16px; font-size: 1rem; font-weight: 700; color: var(--text-primary,#1a2e1a); }

.bot-form-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary, #374151);
    margin-bottom: 12px;
}

.bot-form-input,
.bot-form-select,
.bot-form-textarea {
    width: 100%;
    padding: 8px 11px;
    border-radius: 8px;
    border: 1.5px solid #d1fae5;
    font-size: 0.85rem;
    font-family: inherit;
    background: var(--input-bg, #f9fafb);
    color: var(--text-primary, #1a2e1a);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.bot-form-input:focus,
.bot-form-select:focus,
.bot-form-textarea:focus { border-color: #3a7d5c; }
body.dark-mode .bot-form-input,
body.dark-mode .bot-form-select,
body.dark-mode .bot-form-textarea { background: #0f1f16; border-color: #1a4a2a; color: #e0f2e9; }
.bot-form-textarea { resize: vertical; min-height: 90px; }

.bot-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

/* ── Bot list ── */
.bot-list { display: flex; flex-direction: column; gap: 12px; }

.bot-card {
    background: var(--card-bg, #fff);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border: 1px solid var(--border-color, #e8f5e9);
}
body.dark-mode .bot-card { background: #1e2d24; border-color: #2a4035; }

.bot-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.bot-card-info { display: flex; align-items: center; gap: 8px; }
.bot-card-name { font-weight: 700; font-size: 0.92rem; color: var(--text-primary,#1a2e1a); }

.bot-badge {
    padding: 2px 9px;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 700;
}
.bot-badge--on  { background: #d1fae5; color: #065f46; }
.bot-badge--off { background: #f3f4f6; color: #6b7280; }
body.dark-mode .bot-badge--on  { background: #052e16; color: #4ade80; }
body.dark-mode .bot-badge--off { background: #1f2937; color: #9ca3af; }

.bot-card-actions { display: flex; gap: 6px; }

.bot-run-btn {
    padding: 5px 10px;
    border-radius: 8px;
    border: none;
    background: #3a7d5c;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.bot-run-btn:hover { background: #2d6a4f; }
.bot-run-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.bot-edit-btn,
.bot-del-btn {
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: transparent;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s;
}
.bot-edit-btn:hover { background: #f0fdf4; }
.bot-del-btn:hover  { background: #fef2f2; }
body.dark-mode .bot-edit-btn,
body.dark-mode .bot-del-btn { border-color: #374151; color: #e0f2e9; }

.bot-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.74rem;
    color: var(--text-muted, #6b7280);
    margin-bottom: 8px;
}
.bot-card-meta span { background: #f9fafb; padding: 2px 8px; border-radius: 8px; }
body.dark-mode .bot-card-meta span { background: #111b14; }

.bot-card-prompt {
    font-size: 0.8rem;
    color: var(--text-secondary, #374151);
    font-style: italic;
    margin-bottom: 8px;
    line-height: 1.45;
}

.bot-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.73rem;
    color: var(--text-muted, #6b7280);
    margin-bottom: 8px;
}
.bot-log-ok  { color: #059669; font-weight: 600; }
.bot-log-err { color: #dc2626; font-weight: 600; }

.bot-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
}
.bot-toggle-wrap input { cursor: pointer; accent-color: #3a7d5c; }

/* ═══════════════════════════════════════════════════════════════
   MODAL — Guardar grupo de flashcards (musicians.js)
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   ESCRITORES Y ESCRITOS — writers.js
═══════════════════════════════════════════════════════════════ */

.writers-panel {
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}
.writers-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.writers-title {
    flex: 1;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}
.writers-info-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: .7;
    transition: opacity .2s;
}
.writers-info-btn:hover { opacity: 1; }
.writers-country-bar-wrap { margin-bottom: .5rem; }
.writers-loading, .writers-error, .writers-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
    font-size: .92rem;
}

/* Writer cards grid */
.writers-grid {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.writer-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s;
}
.writer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.writer-card-emoji { font-size: 2rem; flex-shrink: 0; }
.writer-card-info  { flex: 1; min-width: 0; }
.writer-card-name  { font-weight: 700; font-size: 1rem; color: var(--text); }
.writer-card-meta  { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; }
.writer-card-genres { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .4rem; }
.writer-genre-tag {
    font-size: .7rem;
    padding: .15rem .5rem;
    border-radius: 10px;
    background: var(--body-bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* Writer texts list */
.writer-texts-identity {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1;
}
.writer-texts-emoji  { font-size: 1.6rem; }
.writer-texts-name   { font-weight: 700; font-size: 1rem; color: var(--text); }
.writer-texts-meta   { font-size: .75rem; color: var(--text-muted); }
.writer-texts-list   { display: flex; flex-direction: column; gap: 1.25rem; margin-top: .5rem; }
.writer-texts-group-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: .5rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--border);
}
.writer-text-card {
    padding: .85rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.writer-text-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.writer-text-title   { font-weight: 700; font-size: .95rem; color: var(--text); margin-bottom: .3rem; }
.writer-text-preview { font-size: .82rem; color: var(--text-muted); line-height: 1.5; }

/* Reader modal — lado a lado */
.wt-reader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.wt-reader-modal {
    background: var(--card-bg);
    border-radius: 18px;
    width: 100%;
    max-width: 780px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.wt-reader-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.1rem 1.25rem .6rem;
    border-bottom: 1px solid var(--border);
}
.wt-reader-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.wt-reader-type-badge {
    font-size: .72rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}
.wt-reader-author { font-size: .82rem; color: var(--text-muted); }
.wt-reader-close  {
    background: none; border: none; font-size: 1.4rem;
    cursor: pointer; color: var(--text-muted); line-height: 1;
    padding: 0 .25rem; flex-shrink: 0;
}
.wt-reader-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: .75rem 1.25rem .5rem;
}
.wt-reader-body {
    display: flex;
    flex: 1;
    overflow-y: auto;
    gap: 0;
}
.wt-reader-col {
    flex: 1;
    padding: 1rem 1.25rem;
    overflow-y: auto;
}
.wt-reader-col--original   { border-right: 1px solid var(--border); }
.wt-reader-col-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.wt-reader-lang-select {
    font-size: .72rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    padding: .15rem .4rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--card-bg, #fff);
    color: var(--text);
}
.wt-reader-divider { width: 1px; background: var(--border); flex-shrink: 0; }
.wt-reader-text p {
    font-size: .95rem;
    line-height: 1.8;
    color: var(--text);
    margin: 0 0 .25rem;
}
.wt-reader-footer {
    display: flex;
    gap: .6rem;
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--border);
    justify-content: flex-end;
}
.wt-reader-action-btn {
    padding: .45rem 1rem;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
}
.wt-reader-action-btn:hover { background: var(--primary); color: #fff; border-color: transparent; }
.wt-reader-action-btn--ghost { color: var(--text-muted); }

/* Intro modal */
.wt-intro-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.wt-intro-modal {
    background: var(--card-bg);
    border-radius: 18px;
    width: 100%;
    max-width: 480px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.wt-intro-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.wt-intro-header h2 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.wt-intro-close {
    background: none; border: none; font-size: 1.4rem;
    cursor: pointer; color: var(--text-muted); line-height: 1;
}
.wt-intro-body { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .9rem; }
.wt-intro-section {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .75rem;
    border-radius: 12px;
    background: var(--body-bg);
}
.wt-intro-section--highlight {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f59e0b;
}
.dark-mode .wt-intro-section--highlight { background: #1c1a0a; border-color: #92400e; }
.wt-intro-icon { font-size: 1.4rem; flex-shrink: 0; padding-top: .1rem; }
.wt-intro-section strong { display: block; font-size: .9rem; margin-bottom: .25rem; color: var(--text); }
.wt-intro-section p { font-size: .82rem; color: var(--text-muted); line-height: 1.5; margin: 0; }
.wt-intro-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border); text-align: right; }
.wt-intro-ok-btn {
    padding: .55rem 1.5rem;
    border-radius: 20px;
    border: none;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
}

/* Mobile: reader stacked */
@media (max-width: 600px) {
    .wt-reader-body    { flex-direction: column; }
    .wt-reader-col--original { border-right: none; border-bottom: 1px solid var(--border); }
    .wt-reader-divider { display: none; }
    .wt-reader-footer  { justify-content: center; }
}

/* Submit form */
.wt-submit-overlay { align-items: flex-start; padding-top: 2rem; overflow-y: auto; }
.wt-submit-modal   { max-height: none; }
.wt-submit-body    { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .85rem; overflow-y: auto; }
.wt-submit-row     { display: flex; gap: .75rem; }
.wt-submit-field   { display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.wt-submit-field--sm { flex: 0 0 160px; }
.wt-submit-field label { font-size: .78rem; font-weight: 700; color: var(--text); }
.wt-submit-hint    { font-weight: 400; color: var(--text-muted); }
.wt-submit-charcount { font-size: .72rem; color: var(--text-muted); text-align: right; }
.wt-submit-points-info {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f59e0b;
    border-radius: 10px;
    padding: .6rem .9rem;
    font-size: .82rem;
    color: #92400e;
}
.dark-mode .wt-submit-points-info { background: #1c1a0a; border-color: #92400e; color: #fde68a; }

.wt-submit-translations { display: flex; flex-direction: column; gap: .85rem; }
.wt-translation-block {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem .75rem .25rem;
    border: 1px dashed var(--border);
    border-radius: 10px;
}
.wt-remove-translation-btn {
    position: absolute;
    top: .4rem;
    right: .4rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(239,68,68,0.1);
    color: #ef4444;
    font-size: .75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wt-remove-translation-btn:hover { background: rgba(239,68,68,0.2); }
.wt-add-translation-btn {
    align-self: flex-start;
    padding: .4rem .8rem;
    border-radius: 20px;
    border: 1.5px dashed #6366f1;
    background: transparent;
    color: #6366f1;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s;
}
.wt-add-translation-btn:hover { background: rgba(99,102,241,0.08); }
.dark-mode .wt-translation-block { border-color: rgba(255,255,255,.12); }

.wt-lang-input-wrap { position: relative; }
.wt-lang-input-wrap .contrib-input { padding-right: 1.9rem; }
.wt-lang-check {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: #27ae60;
    font-weight: 700;
    font-size: 0.85rem;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
.wt-lang-check--visible { opacity: 1; }

/* Writers upload button */
.writers-upload-btn {
    padding: .35rem .8rem;
    border-radius: 20px;
    border: 1.5px solid #6366f1;
    background: transparent;
    color: #6366f1;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s;
}
.writers-upload-btn:hover { background: #6366f1; color: #fff; }

/* Admin writers stats */
.asong-stats-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.asong-stat      { font-size: .82rem; color: var(--text-muted); }
.asong-note      { font-size: .78rem; color: #f59e0b; margin-top: .25rem; }

@media (max-width: 560px) {
    .wt-submit-row { flex-direction: column; }
    .wt-submit-field--sm { flex: 1; }
}

.sgm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.sgm-card {
    position: relative;
    background: var(--surface, #fff);
    border-radius: 18px;
    padding: 1.75rem 1.5rem 1.5rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}
.sgm-close {
    position: absolute;
    top: 14px; right: 14px;
    background: transparent;
    border: none;
    font-size: 1rem;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    border-radius: 50%;
    transition: background 0.15s;
}
.sgm-close:hover { background: var(--border, #e2e8f0); }
.sgm-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text, #1e293b);
    margin-bottom: 0.25rem;
}
.sgm-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    margin-bottom: 1rem;
}
.sgm-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    margin-bottom: 0.4rem;
}
.sgm-input {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--body-bg, #f5f7fb);
    color: var(--text, #1e293b);
    outline: none;
    margin-bottom: 1.25rem;
    transition: border-color 0.15s;
}
.sgm-input:focus { border-color: var(--primary, #3b82f6); }
.sgm-btns {
    display: flex;
    gap: 0.75rem;
}
.sgm-btns .primary-btn,
.sgm-btns .secondary-btn {
    flex: 1;
    padding: 0.6rem;
    font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════
   Mis Tarjetas — grupos propios en práctica
═══════════════════════════════════════════════════════════════ */

.prac-custom-card .prac-group-right {
    display: flex;
    align-items: center;
}
.prac-custom-delete-btn {
    background: transparent;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.prac-custom-delete-btn:hover { background: rgba(239,68,68,0.1); }
.prac-custom-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted, #64748b);
}
.prac-custom-empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.prac-custom-empty-hint { font-size: 0.82rem; margin-top: 0.5rem; }

/* ═══════════════════════════════════════════════════════════════
   MIS TARJETAS — header row, config, práctica
═══════════════════════════════════════════════════════════════ */

.prac-custom-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: relative;
    margin-bottom: 0.25rem;
}
.prac-custom-config-btn {
    font-size: 0.8rem;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--surface, #fff);
    color: var(--text-muted, #64748b);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
    white-space: nowrap;
}
.prac-custom-config-btn:hover { background: var(--border, #e2e8f0); }

.prac-custom-start-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.5rem 0 1rem;
}
.prac-custom-start-btn { padding: 0.55rem 2rem; }

.prac-custom-progress {
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
    margin-left: auto;
}

/* Flashcard de práctica custom */
.prac-custom-study { padding: 0 1rem 2rem; }

.prac-custom-card-wrap {
    perspective: 1000px;
    margin: 1.5rem auto;
    max-width: 380px;
    height: 200px;
}
.prac-custom-flashcard {
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(.4,0,.2,1);
    cursor: pointer;
    border-radius: 18px;
}
.prac-custom-flashcard.flipped { transform: rotateY(180deg); }

.prac-custom-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    gap: 0.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.prac-custom-front {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}
.prac-custom-back {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    transform: rotateY(180deg);
}
.prac-custom-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
}
.prac-custom-word {
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}
.prac-custom-source {
    font-size: 0.7rem;
    opacity: 0.65;
    margin-top: 0.25rem;
}
.prac-custom-hint {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted, #94a3b8);
    margin: 0 0 1rem;
}
.prac-custom-nav {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* ── Panel de configuración flotante ── */
.ccp-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 env(safe-area-inset-bottom);
}
.ccp-panel {
    background: var(--surface, #fff);
    border-radius: 20px 20px 0 0;
    padding: 1.5rem;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.15);
}
.ccp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.ccp-title { font-weight: 700; font-size: 1rem; color: var(--text, #1e293b); }
.ccp-close {
    background: transparent; border: none;
    font-size: 1rem; cursor: pointer;
    color: var(--text-muted, #64748b);
    padding: 4px; border-radius: 50%;
    transition: background 0.15s;
}
.ccp-close:hover { background: var(--border, #e2e8f0); }
.ccp-row {
    margin-bottom: 1.1rem;
}
.ccp-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    margin-bottom: 0.5rem;
}
.ccp-options { display: flex; gap: 0.5rem; }
.ccp-opt {
    flex: 1;
    padding: 0.5rem;
    border-radius: 10px;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--body-bg, #f5f7fb);
    color: var(--text, #1e293b);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ccp-opt.active {
    background: var(--primary, #3b82f6);
    border-color: var(--primary, #3b82f6);
    color: #fff;
    font-weight: 600;
}
.ccp-save-btn { width: 100%; margin-top: 0.75rem; }

/* Modal guardar — hint de éxito */
.sgm-saved-hint {
    font-size: 0.8rem;
    color: #10b981;
    text-align: center;
    margin-bottom: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════
   FAMOSOS — Filtro por región / país
═══════════════════════════════════════════════════════════════ */

.famous-list-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Botón filtro */
.famous-filter-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--surface, #fff);
    color: var(--text, #1e293b);
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.famous-filter-btn:hover { background: var(--border, #e2e8f0); }
.famous-filter-label {
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
}

/* Badge filtro activo */
.famous-filter-active {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
    padding: 6px 1rem 0;
}
.famous-filter-clear {
    background: transparent;
    border: none;
    font-size: 0.78rem;
    color: var(--primary, #3b82f6);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 10px;
    transition: background 0.15s;
    font-family: inherit;
}
.famous-filter-clear:hover { background: var(--border, #e2e8f0); }
.famous-filter-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted, #64748b);
    font-size: 0.9rem;
    line-height: 1.8;
}

/* Overlay del panel de filtro */
.ffilter-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.ffilter-panel {
    background: var(--surface, #fff);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 520px;
    max-height: 82vh;
    overflow-y: auto;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
    padding-bottom: env(safe-area-inset-bottom);
}
.ffilter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--border, #e2e8f0);
    position: sticky;
    top: 0;
    background: var(--surface, #fff);
    z-index: 1;
}
.ffilter-title { font-weight: 700; font-size: 0.95rem; }
.ffilter-close {
    background: transparent; border: none;
    font-size: 1rem; cursor: pointer;
    color: var(--text-muted, #64748b);
    padding: 4px 8px; border-radius: 50%;
    transition: background 0.15s;
}
.ffilter-close:hover { background: var(--border, #e2e8f0); }

/* Regiones */
.ffilter-regions { padding: 0.5rem 0 1rem; }
.ffilter-region { border-bottom: 1px solid var(--border, #f1f5f9); }
.ffilter-region-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    cursor: pointer;
    transition: background 0.12s;
    user-select: none;
}
.ffilter-region-header:hover { background: var(--body-bg, #f5f7fb); }
.ffilter-region--wip .ffilter-region-header { cursor: default; opacity: 0.5; }
.ffilter-region--wip .ffilter-region-header:hover { background: transparent; }
.ffilter-region-emoji { font-size: 1.1rem; }
.ffilter-region-label { font-weight: 600; font-size: 0.9rem; flex: 1; }
.ffilter-wip-badge {
    font-size: 0.68rem;
    background: var(--border, #e2e8f0);
    color: var(--text-muted, #64748b);
    padding: 2px 8px;
    border-radius: 20px;
}
.ffilter-chevron {
    font-size: 0.8rem;
    color: var(--text-muted, #94a3b8);
    transition: transform 0.2s;
}
.ffilter-countries.open ~ * .ffilter-chevron,
.ffilter-region-header:has(+ .ffilter-countries.open) .ffilter-chevron {
    transform: rotate(180deg);
}

/* Países */
.ffilter-countries {
    display: none;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.25rem 1.25rem 1rem;
}
.ffilter-countries.open { display: flex; }
.ffilter-country {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--body-bg, #f5f7fb);
    color: var(--text, #1e293b);
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ffilter-country:hover { background: var(--border, #e2e8f0); }
.ffilter-country.active {
    background: var(--primary, #3b82f6);
    border-color: var(--primary, #3b82f6);
    color: #fff;
    font-weight: 600;
}


/* ══════════════════════════════════════════════
   Evaluador de Nivel MCER de Texto  (.anl-*)
   ══════════════════════════════════════════════ */

.anl-wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}

/* Base compartida por todas las tarjetas del analizador — evita duplicar
   background/border/radius/padding en cada variante */
.anl-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}

/* ── Intro card ── */
.anl-intro-card {
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}
.anl-intro-body {
    font-size: 0.87rem;
    line-height: 1.7;
    color: var(--text-muted, #64748b);
    margin: 0 0 1rem;
}
.anl-intro-tips {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.anl-tip {
    font-size: 0.82rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-weight: 500;
}
.anl-tip--ok   { background: #d1fae5; color: #065f46; }
.anl-tip--warn { background: #fef3c7; color: #92400e; }

/* ── Word count ── */
.anl-count--warn { color: #d97706; }
.anl-count--ok   { color: #059669; }

/* ── Analyze button ── */
.anl-analyze-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 1.5rem;
    background: linear-gradient(135deg, #0d9488 0%, #6366f1 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin: 0.75rem 0 1.5rem;
    transition: opacity 0.2s, transform 0.15s;
}
.anl-analyze-btn:hover:not(:disabled) { opacity: 0.92; transform: translateY(-1px); }
.anl-analyze-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Hero result card ── */
.anl-result-hero {
    background: var(--surface, #fff);
    border: 2px solid;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.anl-hero-left {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}
.anl-level-badge {
    min-width: 3rem;
    text-align: center;
    padding: 0.45rem 0.75rem;
    border-radius: 10px;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.anl-level-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text, #1e293b);
}
.anl-confidence {
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
    margin-top: 0.2rem;
}
.anl-level-bar-wrap {
    display: flex;
    gap: 4px;
    height: 32px;
}
.anl-level-seg {
    flex: 1;
    border-radius: 6px;
    background: var(--border, #e2e8f0);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4px;
    transition: background 0.3s;
}
.anl-level-seg span {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.03em;
}
.anl-level-seg:not(.filled) span { color: var(--text-muted, #94a3b8); }
.anl-summary {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-muted, #475569);
    margin: 0;
    border-top: 1px solid var(--border, #f1f5f9);
    padding-top: 0.75rem;
}

/* ── Dimension cards ── */
.anl-dimensions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 600px) { .anl-dimensions { grid-template-columns: 1fr; } }
.anl-dim-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.anl-dim-icon { font-size: 1.1rem; }
.anl-dim-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text, #1e293b);
}
.anl-dim-level {
    padding: 2px 10px;
    border-radius: 20px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}
.anl-dim-mini-bar {
    display: flex;
    gap: 3px;
    height: 6px;
    margin-bottom: 0.65rem;
}
.anl-dim-seg {
    flex: 1;
    border-radius: 3px;
    background: var(--border, #e2e8f0);
}
.anl-dim-note {
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
    margin: 0;
    line-height: 1.55;
}

/* ── Tag rows / info cards ── */
.anl-cards-row {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}
.anl-info-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text, #1e293b);
    margin-bottom: 0.65rem;
}
.anl-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.anl-tag {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--body-bg, #f1f5f9);
    color: var(--text, #1e293b);
    border: 1px solid var(--border, #e2e8f0);
}
.anl-tag--grammar { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.anl-tag--word    { background: #fef3c7; color: #92400e; border-color: #fcd34d; }

/* ── Stats card ── */
.anl-stats-grid {
    display: flex;
    gap: 1.5rem;
}
.anl-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.anl-stat-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text, #1e293b);
    line-height: 1;
}
.anl-stat-lbl {
    font-size: 0.76rem;
    color: var(--text-muted, #64748b);
    margin-top: 2px;
}

/* ── Pedagogical card ── */
.anl-pedagogy-card {
    background: linear-gradient(135deg, #ecfdf5 0%, #eff6ff 100%);
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.dark-mode .anl-pedagogy-card { background: linear-gradient(135deg, rgba(6,78,59,0.25) 0%, rgba(30,58,138,0.2) 100%); border-color: rgba(52,211,153,0.3); }
.anl-pedagogy-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}
.anl-pedagogy-item {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.anl-pedagogy-item--full { flex-basis: 100%; }
.anl-ped-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #059669;
}
.anl-ped-value {
    font-size: 0.87rem;
    color: var(--text, #1e293b);
    line-height: 1.55;
}

/* ── Reset / error / mode card ── */
.anl-reset-btn {
    display: block;
    background: none;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    padding: 0.65rem 1.2rem;
    font-size: 0.88rem;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    margin: 0 auto;
    transition: background 0.15s;
}
.anl-reset-btn:hover { background: var(--body-bg, #f1f5f9); }
.anl-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    font-size: 0.88rem;
    margin-bottom: 1rem;
}
.mode-card--analyzer {
    --card-accent: #0d9488;
    border-top: 3px solid var(--card-accent);
}
.mode-card--analyzer:hover { box-shadow: 0 8px 30px rgba(13,148,136,0.18); }

/* ─── Google AdSense ──────────────────────────────────────────── */

/* Slot en el Traductor */
.smp-ad-slot {
    margin: 1rem 0 0;
    border-radius: 8px;
    overflow: hidden;
    min-height: 90px;
}

/* Slot en el Feed */
.livefeed-ad-wrap {
    margin: .5rem 0 1rem;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface, #f9fafb);
    border: 1px solid var(--border, #e5e7eb);
    padding: .25rem .5rem .5rem;
}
.livefeed-ad-label {
    display: block;
    font-size: .65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .25rem;
    padding-left: .25rem;
}
.livefeed-ad-ins { min-height: 100px; }

.dark-mode .livefeed-ad-wrap {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.1);
}