/* Estilos base para el cuerpo, optimizados para la vista de escritorio */ :root { --story-font-size-multiplier: 1.0; /* Variable CSS para el tamaño de la fuente */ } body { font-family: 'Inter', sans-serif; background-color: #111827; } /* En pantallas md y superiores, usamos flexbox para centrar el contenedor de la app */ @media (min-width: 768px) { body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; } } #install-app-btn { display: none; /* Oculto por defecto, se mostrará con JS si es instalable */ } .hidden { display: none !important; } .story-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.2), 0 4px 6px -4px rgba(79, 70, 229, 0.2); border-color: #4A5568; } .filter-btn { transition: all 0.2s ease-in-out; } .filter-btn.active { background-color: #4f46e5; color: white; border-color: #ffffff; } button:disabled { opacity: 0.5; cursor: not-allowed; } .word { position: relative; transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, box-shadow 0.1s ease-in-out; padding: 2px 1px; border-radius: 3px; cursor: pointer; will-change: background-color, color, box-shadow; } .word.active { background-color: rgba(10, 10, 10, 0.4); box-shadow: 0 0 0 1.5px #8B5CF6; color: #FFFFFF; } .word.phrasal-verb { background-color: rgba(167, 139, 250, 0.15); padding: 2px 4px; white-space: nowrap; } .word.phrasal-verb.active { background-color: rgba(139, 92, 246, 0.2); } .play-button-shadow { box-shadow: 0 0 20px rgba(139, 92, 246, 0.5); } .dynamic-tooltip { position: absolute; background-color: rgba(31, 41, 55, 0.95); color: #FBBF24; border: 1px solid #3B82F6; border-radius: 6px; padding: 4px 8px; /* Más angosto */ font-size: 0.75rem; font-weight: 600; z-index: 9999; box-shadow: 0 4px 12px rgba(0,0,0,0.4); pointer-events: none; opacity: 0; /* Estado inicial es invisible */ backdrop-filter: blur(4px); max-width: 120px; /* Ancho máximo para que el texto se divida en líneas */ text-align: center; /* Centrar texto si se divide */ --vertical-transform: -140%; /* Variable para el desplazamiento vertical */ /* Estado inicial de transformación (arriba) */ transform: translate(-50%, -120%); } /* Esta clase aplica la animación completa de 1 segundo */ .dynamic-tooltip.active-animation { /* Usamos 'animation-delay' para que coincida con el retraso del audio (100ms) */ animation: tooltip-fade 1s ease-in-out 0.1s forwards; } @keyframes tooltip-fade { 0% { opacity: 0; transform: translate(-50%, -120%); /* Estado inicial (arriba) */ } 30% { opacity: 1; transform: translate(-50%, var(--vertical-transform)); /* Posición final */ } 70% { opacity: 1; transform: translate(-50%, var(--vertical-transform)); /* Se mantiene */ } 100% { opacity: 0; transform: translate(-50%, var(--vertical-transform)); /* Se desvanece en el sitio */ } } .dynamic-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: #3B82F6 transparent transparent transparent; } /* --- ESTILOS PARA TOOLTIP VOLTEADO (AHORA CON ANIMACIÓN) --- */ .dynamic-tooltip.flipped-arrow { /* Estado inicial (abajo) */ transform: translate(-50%, 40%); } /* La animación para la versión volteada */ .dynamic-tooltip.flipped-arrow.active-animation { animation-name: tooltip-fade-flipped; } @keyframes tooltip-fade-flipped { 0% { opacity: 0; transform: translate(-50%, 40%); /* Estado inicial (abajo) */ } 30% { opacity: 1; transform: translate(-50%, var(--vertical-transform)); /* Posición final */ } 70% { opacity: 1; transform: translate(-50%, var(--vertical-transform)); /* Se mantiene */ } 100% { opacity: 0; transform: translate(-50%, var(--vertical-transform)); /* Se desvanece en el sitio */ } } .dynamic-tooltip.flipped-arrow::after { top: auto; /* Resetea el 'top' original */ bottom: 100%; /* Coloca la flecha en la parte de arriba del tooltip */ border-color: transparent transparent #3B82F6 transparent; /* Apunta la flecha hacia abajo */ } /* --- ESTILOS PARA TRADUCCIÓN INLINE --- */ /* --- ESTILOS PARA TRADUCCIÓN INLINE --- */ .inline-translation { display: block; position: absolute; bottom: 110%; /* Un poco por encima de la palabra */ left: 50%; transform: translateX(-50%); /* CAMBIO: Opacidad del fondo cambiada de 0.95 a 0.50 */ background-color: rgba(31, 41, 55, 0.90); /* bg-gray-800/50 */ color: #FBBF24; /* text-yellow-400 */ font-size: 0.75rem; /* text-xs */ font-weight: 600; padding: 2px 6px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); z-index: 10; /* CAMBIO: Borde morado añadido */ border: 1px solid #8B5CF6; /* Lógica para ajustar el texto (en lugar de encoger la fuente) */ max-width: 150px; /* Ancho máximo antes de envolver */ width: max-content; /* Se ajusta al contenido, hasta 150px */ text-align: center; white-space: normal; /* Permite que el texto se envuelva */ line-height: 1.3; /* Oculto por defecto */ opacity: 0; visibility: hidden; /* Transición para ocultar con retraso */ transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s; pointer-events: none; } .inline-translation.visible { opacity: 1; visibility: visible; /* Transición para mostrar al instante */ transition: opacity 0.2s ease-in-out; } #story-text-en { font-size: calc(1.45rem * var(--story-font-size-multiplier)); line-height: calc(1.5 * var(--story-font-size-multiplier)); } @media (min-width: 768px) { #story-text-en { font-size: calc(1.5rem * var(--story-font-size-multiplier)); } } #modal-content .grammar-section h3, #modal-content .vocabulary-section h3 { color: #a78bfa; font-size: 1.2rem; font-weight: 700; margin-bottom: 0.75rem; border-bottom: 1px solid #4b5563; padding-bottom: 0.5rem; } #modal-content .grammar-section p, #modal-content .vocabulary-section p { margin-bottom: 1rem; line-height: 1.6; color: #d1d5db; } #modal-content strong, #modal-content b { color: #c4b5fd; font-weight: 600; } #modal-content code { background-color: #374151; color: #f9fafb; padding: 2px 5px; border-radius: 4px; font-family: monospace; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } .shake { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; } .story-status-badge { position: absolute; bottom: 0.5rem; right: 0.5rem; z-index: 10; padding: 0.15rem 0.6rem; font-size: 0.7rem; font-weight: 700; color: white; border-radius: 9999px; box-shadow: 0 2px 8px rgba(0,0,0,0.5); } .activity-progress-badge { padding: 2px 8px; font-size: 0.7rem; font-weight: 600; border-radius: 9999px; color: white; } .badge-gray { background-color: #4b5563; color: #d1d5db; } .badge-yellow { background-color: #ca8a04; } /* Adjusted yellow for better contrast */ .badge-green { background-color: #16a34a; } .word-draggable { padding: 10px 18px; /* background-color: #374151; */ /* <-- ELIMINADO */ border-radius: 8px; cursor: grab; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); user-select: none; border-bottom: 4px solid; /* <-- MODIFICADO */ font-weight: 600; color: white; } .word-draggable.moving { opacity: 0 !important; transition: none !important; /* Desactiva transiciones temporalmente */ } .wd-color-1 { background-color: #7f1d1d; border-bottom-color: #450a0a; } .wd-color-2 { background-color: #14532d; border-bottom-color: #052e16; } .wd-color-3 { background-color: #1e3a8a; border-bottom-color: #1e1b4b; } .wd-color-4 { background-color: #3730a3; border-bottom-color: #312e81; } .wd-color-5 { background-color: #581c87; border-bottom-color: #3b0764; } .wd-color-6 { background-color: #134e4a; border-bottom-color: #042f2e; } .wd-color-7 { background-color: #334155; border-bottom-color: #1e293b; } .word-draggable:active { cursor: grabbing; transform: scale(1.05); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3); } .word-draggable.dragging { opacity: 0.4; transform: scale(0.95); } .word-draggable.correct { background-color: #166534; border-color: #14532d; cursor: default; } #jumbled-drop-zone.drag-over { border-color: #8B5CF6; background-color: #374151; } .word-translation { display: block; font-size: 0.75rem; color: #a5b4fc; margin-top: 2px; font-style: italic; } #quiz-timer-container { width: 100%; background-color: #374151; border-radius: 9999px; overflow: hidden; height: 10px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.4); } #quiz-timer-bar { height: 100%; border-radius: 9999px; transition: width 1s linear, background-color 0.5s; } .quiz-option-btn { width: 100%; text-align: left; padding: 10px 16px; background-color: #4b5563; border-radius: 8px; font-weight: 600; transition: all 0.2s ease-in-out; border-left: 5px solid transparent; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.2); } .quiz-option-btn:not(:disabled):hover { background-color: #6b7280; transform: translateY(-2px); border-left-color: #8B5CF6; } .quiz-option-btn:disabled { opacity: 0.7; } .quiz-option-btn.correct-answer { background-color: #16a34a; border-left-color: #bbf7d0; color: white; animation: pulse-correct 0.8s; } .quiz-option-btn.wrong-answer { background-color: #dc2626; border-left-color: #fecaca; color: white; animation: shake 0.5s; } @keyframes pulse-correct { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } #memory-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(75px, 1fr)); perspective: 1000px; } .memory-card { position: relative; transform-style: preserve-3d; transition: transform 0.6s; cursor: pointer; } .memory-card.is-flipped { transform: rotateY(180deg); } .memory-card.is-matched { cursor: default; animation: vanish-effect 0.6s ease-in 0.2s forwards; } @keyframes vanish-effect { to { opacity: 0; transform: scale(0.9); } } .card-face { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 0.75rem; box-shadow: 0 4px 10px rgba(0,0,0,0.4); overflow: hidden; } .card-front { background: linear-gradient(135deg, #4f46e5, #8b5cf6); display: flex; align-items: center; justify-content: center; } .card-front-icon { width: 50%; height: 50%; color: rgba(255,255,255,0.8); } .card-back { background-color: #374151; transform: rotateY(180deg); display: flex; flex-direction: column; } .card-back-image { height: 80%; width: 100%; object-fit: cover; } .card-back-text-container { height: 20%; padding: 4px; display: flex; flex-direction: column; justify-content: center; text-align: center; background-color: #1f2937; } .card-back-word { font-size: 0.8rem; font-weight: 700; line-height: 1.1; color: #e5e7eb; } .card-back-translation { font-size: 0.65rem; color: #a5b4fc; font-style: italic; } .letter-slot { width: 40px; height: 50px; background-color: #1f2937; border-bottom: 3px solid #4b5563; border-radius: 6px; display: inline-flex; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: 700; text-transform: uppercase; transition: all 0.2s ease-in-out; user-select: none; } #fill-blanks-word-container.correct .letter-slot { background-color: #166534; border-color: #14532d; color: #dcfce7; } .letter-choice { width: 45px; height: 45px; background-color: #4b5563; border-radius: 8px; border-bottom: 3px solid #374151; font-weight: 600; font-size: 1.1rem; transition: all 0.15s ease-in-out; } .letter-choice:not(:disabled):hover { background-color: #6b7280; transform: translateY(-2px); } .letter-choice:disabled { opacity: 0.3; background-color: #374151; border-bottom-width: 1px; } #fill-blanks-delete-btn { padding: 0.5rem 1rem; background-color: #be123c; border-radius: 8px; font-weight: 600; } /* Estilos para el mini-juego de deletreo en el modal */ .spelling-slot { width: 35px; height: 45px; background-color: #1f2937; border-bottom: 3px solid #4b5563; border-radius: 6px; display: inline-flex; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: 700; text-transform: uppercase; transition: all 0.2s ease-in-out; user-select: none; } .spelling-choices button { width: 40px; height: 40px; background-color: #4b5563; border-radius: 8px; border-bottom: 3px solid #374151; font-weight: 600; font-size: 1.1rem; transition: all 0.15s ease-in-out; } .spelling-choices button:not(:disabled):hover { background-color: #6b7280; transform: translateY(-2px); } .spelling-choices button:disabled { opacity: 0.3; background-color: #374151; border-bottom-width: 1px; } #word-modal-spelling-slots.correct .spelling-slot { background-color: #166534; border-color: #14532d; color: #dcfce7; } /* Estilo para palabras aprendidas en la historia */ .word.learned-word { background-color: rgba(250, 204, 21, 0.2); color: #facc15; border-radius: 4px; padding: 2px 4px; } @keyframes ken-burns-effect { 0% { transform: scale(1.1) translate(0, 0); transform-origin: 50% 50%; } 25% { transform: scale(1.15) translate(2%, -2%); transform-origin: top left; } 50% { transform: scale(1.1) translate(-2%, 3%); transform-origin: bottom right; } 75% { transform: scale(1.2) translate(3%, -1%); transform-origin: top right; } 100% { transform: scale(1.1) translate(0, 0); transform-origin: 50% 50%; } } #story-image { animation: ken-burns-effect 30s ease-in-out infinite alternate; } /* Estilos para el nuevo modo de traducción */ #translation-btn.active { background-color: #4f46e5; border-color: #a78bfa; color: white; } .word-block { display: inline-flex; flex-direction: column; align-items: center; background-color: #374151; border-radius: 0.375rem; padding: 2px 6px; margin: 1px 2px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); vertical-align: bottom; font-size: 1rem; } .word-block .word-en { font-weight: 500; color: white; line-height: 1.2; } .word-block .word-es { font-size: 0.65em; color: #a5b4fc; font-style: italic; line-height: 1.1; } .word-block.active { background-color: #4338ca; box-shadow: 0 0 0 2px #8B5CF6; } @media (max-width: 640px) { #game-modal-title { font-size: 1.125rem; } #game-modal-subtitle { font-size: 0.75rem; } #memory-grid { grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); gap: 0.4rem; } .card-back-word { font-size: 0.7rem; } .card-back-translation { font-size: 0.6rem; } .letter-slot { width: 32px; height: 40px; font-size: 1.25rem; } .letter-choice { width: 38px; height: 38px; font-size: 1rem; } #fill-blanks-sentence { font-size: 2.1rem; } } #app-container { perspective: 1500px; /* <-- AÑADE ESTA LÍNEA PARA EL EFECTO 3D */ position: relative; } /* --- NUEVOS ESTILOS PARA ANIMACIÓN DE PÁGINA TIPO LIBRO 3D --- */ @keyframes flip-out-next { from { transform: rotateY(0deg); } to { transform: rotateY(-90deg); } } @keyframes flip-in-next { from { transform: rotateY(90deg); } to { transform: rotateY(0deg); } } @keyframes flip-out-prev { from { transform: rotateY(0deg); } to { transform: rotateY(90deg); } } @keyframes flip-in-prev { from { transform: rotateY(-90deg); } to { transform: rotateY(0deg); } } #story-view.page-flip-out-next { transform-origin: left center; /* La página gira desde la "bisagra" izquierda */ animation: flip-out-next 0.4s ease-in forwards; } #story-view.page-flip-in-next { transform-origin: left center; animation: flip-in-next 0.4s ease-out; } #story-view.page-flip-out-prev { transform-origin: right center; /* La página gira desde la "bisagra" derecha */ animation: flip-out-prev 0.4s ease-in forwards; } #story-view.page-flip-in-prev { transform-origin: right center; animation: flip-in-prev 0.4s ease-out; } /* --- NUEVOS ESTILOS DE BOTONES MÁS PROFESIONALES Y OPTIMIZADOS --- */ /* Estilo para los botones de Gramática, Vocabulario, etc. */ .static-glow-purple { /* 1. Fondo: Un gradiente índigo profundo y vibrante que reemplaza el bg-black/30. */ background: linear-gradient(145deg, #4f46e5, #3730a3); /* De índigo-600 a índigo-800 */ /* 2. Borde: Más grueso y de un color neón para un look moderno. */ border: 2px solid #ffffff; /* violet-400 */ /* 3. Sombra (Glow): Una sombra exterior pronunciada y una interior sutil para dar profundidad. */ box-shadow: 0 0 15px 2px rgba(139, 92, 246, 0.5), /* Sombra exterior (el brillo) */ inset 0 0 6px rgba(221, 214, 254, 0.3); /* Sombra interior (efecto cristal) */ /* 4. Texto: Blanco, más grueso y con sombra para máxima legibilidad. */ color: white !important; /* !important para asegurar que sobreescriba a text-white de Tailwind */ font-weight: 800; /* Hacemos el texto extragrueso */ text-shadow: 0 0 5px rgba(0, 0, 0, 0.4); /* 5. Transformación: Lo hacemos resaltar un poco más. */ transform: scale(1.02); /* 6. Transición: Suaviza todos los cambios para un efecto pulido. */ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } /* Estilo para el botón de Actividades, con un look dorado/legendario. */ .static-glow-activities { background: linear-gradient(145deg, #f59e0b, #b45309); /* De ámbar-500 a ámbar-700 */ border: 2px solid #ffffff; /* yellow-300 */ box-shadow: 0 0 18px 3px rgba(250, 204, 21, 0.6), /* Sombra exterior dorada más intensa */ inset 0 0 7px rgba(254, 249, 195, 0.4); /* Brillo interior */ color: white !important; font-weight: 800; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transform: scale(1.03); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } .static-glow-purple, .static-glow-activities { position: relative; /* Necesario para posicionar el pseudo-elemento */ z-index: 1; /* Asegura que el botón esté por encima del efecto */ } /* --- NUEVOS ESTILOS PARA EFECTO DE ESTRELLAS (VERSIÓN 3) --- */ .star-particle { position: fixed; z-index: 9999; pointer-events: none; width: 16px; height: 16px; /* Usa imagen base64 o ruta a tu PNG */ background-image: url('data:image/svg+xml;utf8,'); background-size: cover; will-change: transform, opacity; transform: translate(0, 0) scale(1); opacity: 1; animation: sparkle-out 1.6s ease-out forwards; } @keyframes sparkle-out { 0% { opacity: 1; transform: translate(var(--tx-start), var(--ty-start)) scale(1.1) rotate(0deg); } 100% { opacity: 0; transform: translate(var(--tx-end), var(--ty-end)) scale(0) rotate(var(--rotation)); } } .word-draggable.hint-highlight { background-color: #f59e0b; /* amber-500 */ border-color: #fcd34d; /* amber-300 */ transform: scale(1.1); box-shadow: 0 0 15px rgba(250, 204, 21, 0.7); } .word-draggable.hint-highlight { background-color: #f59e0b; /* amber-500 */ border-color: #fcd34d; /* amber-300 */ transform: scale(1.1); box-shadow: 0 0 15px rgba(250, 204, 21, 0.7); } /* === INICIA EL BLOQUE A AÑADIR === */ #jumbled-bank-wrapper { position: relative; background-size: cover; background-position: center; border-radius: 0.5rem; overflow: hidden; margin-top: 1rem; /* Añade un poco de espacio */ min-height: 150px; /* Asegura una altura mínima */ } #jumbled-bank-wrapper::before { content: ''; position: absolute; inset: 0; /* bg-gray-900 con 85% opacidad */ background-color: rgba(17, 24, 39, 0.85); z-index: 1; } #jumbled-word-bank { position: relative; /* Para que se ponga sobre el overlay */ z-index: 2; padding: 1rem; /* Añade padding para que no toque los bordes */ } /* --- ESTILOS PARA EL JUEGO DE SOPA DE LETRAS (WORD SEARCH) --- */ #wordsearch-container { display: flex; flex-direction: column; height: 100%; } @media (min-width: 640px) { #wordsearch-container { flex-direction: row; } } #wordsearch-grid-wrapper { flex-grow: 1; display: flex; align-items: flex-start; justify-content: center; min-height: 0; } #wordsearch-grid { display: grid; background-color: #1f2937; border: 2px solid #4b5563; border-radius: 0.75rem; box-shadow: inset 0 2px 8px rgba(0,0,0,0.4); aspect-ratio: 1 / 1; max-width: 100%; max-height: 100%; padding: 0.5rem; gap: 2px; box-sizing: border-box; } .letter-cell { display: flex; justify-content: center; align-items: center; font-size: clamp(1rem, 5vw, 1.75rem); /* Letras grandes y responsivas */ font-weight: 800; text-transform: uppercase; color: #d1d5db; background-color: #374151; border-radius: 4px; cursor: pointer; user-select: none; transition: all 0.15s ease-out; } .letter-cell:hover { background-color: #4f46e5; color: white; } .letter-cell.selecting { background-color: #8b5cf6; color: white; transform: scale(1.1); box-shadow: 0 0 10px rgba(139, 92, 246, 0.7); } .letter-cell.found { color: white; transform: scale(1.05); } /* Colores bonitos para resaltar palabras encontradas */ .letter-cell.found-0 { background: linear-gradient(45deg, #ec4899, #f472b6); } .letter-cell.found-1 { background: linear-gradient(45deg, #84cc16, #a3e635); } .letter-cell.found-2 { background: linear-gradient(45deg, #22d3ee, #67e8f9); } .letter-cell.found-3 { background: linear-gradient(45deg, #f97316, #fb923c); } .letter-cell.found-4 { background: linear-gradient(45deg, #14b8a6, #2dd4bf); } .letter-cell.found-5 { background: linear-gradient(45deg, #fde047, #fef08a); color: #444; } .letter-cell.found-6 { background: linear-gradient(45deg, #ef4444, #f87171); } .letter-cell.found-7 { background: linear-gradient(45deg, #a78bfa, #c4b5fd); } #wordsearch-sidebar { flex-shrink: 0; width: 100%; background-color: #111827; border-radius: 0.5rem; } @media (min-width: 640px) { #wordsearch-sidebar { width: 220px; max-height: none; /* AÑADIDO: Quita el límite de altura en escritorio */ overflow-y: visible; } } #wordsearch-word-list { /* --- INICIO DE LA CORRECCIÓN --- */ display: grid; /* MODIFICADO: Usamos Grid para un diseño más compacto */ grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); /* AÑADIDO: Crea columnas automáticas */ gap: 0.35rem; /* MODIFICADO: Ajustamos el espaciado para la cuadrícula */ /* --- FIN DE LA CORRECCIÓN --- */ } @media (min-width: 640px) { #wordsearch-word-list { display: flex; /* Mantenemos flex para la vista de escritorio */ flex-direction: column; gap: 0.75rem; } } .word-item { padding: 0.1rem 0.1rem; background-color: #374151; border-radius: 6px; border-left: 4px solid #4b5563; transition: all 0.2s ease-in-out; font-size: 0.3rem; } .word-item.found { border-left-color: #16a34a; background-color: #1f2937; } .word-item.found .word-en-ws { text-decoration: line-through; color: #6b7280; } /* --- AÑADE ESTE NUEVO ESTILO AQUÍ --- */ .phrase-part.part-found { background-color: #4f46e5; /* indigo-600 */ color: #ffffff; padding: 1px 4px; border-radius: 4px; transition: all 0.3s ease-in-out; } /* -------------------------------------- */ .word-item.found .word-es-ws { color: #4b5563; } .word-en-ws { font-size: 0.6rem; font-weight: 700; color: #e5e7eb; text-transform: uppercase; letter-spacing: 0.05em; } .word-es-ws { display: block; font-size: 0.7rem; /* MODIFICADO: Letra de traducción más pequeña */ color: #a5b4fc; font-style: italic; margin-top: 1px; /* MODIFICADO: Reducido el margen superior */ } #wordsearch-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 1rem; font-size: 1.2rem; color: #9ca3af; } #stl-reconstructed-wrapper { background-size: cover; background-position: center center; } #stl-reconstructed-wrapper::before { content: ''; position: absolute; inset: 0; background-color: rgba(17, 24, 39, 0.7); /* bg-gray-900 con 70% opacidad */ z-index: 5; } .stl-flying-fragment { position: absolute; z-index: 100; font: bold 15px "Inter", sans-serif; color: #4ade80; /* Verde de acierto */ padding: 5px 10px; background-color: rgba(17, 24, 39, 0.7); border-radius: 8px; text-align: center; transition: all 1.2s cubic-bezier(0.5, 0, 0.75, 0); /* Transición suave */ pointer-events: none; white-space: normal; text-shadow: 0 0 8px rgba(74, 222, 128, 0.7); } /* --- ESTILO PARA PÁRRAFOS COMPLETADOS EN LA HISTORIA --- */ #text-container.paragraph-completed-glow { /* Un degradado sutil que va desde el fondo oscuro a un índigo profundo. */ background: linear-gradient(160deg, #111827 0%, #312e81 100%); /* Un "brillo" interior de color violeta para dar una sensación mágica. */ box-shadow: inset 0 0 40px -10px rgba(167, 139, 250, 0.3); /* Una transición suave para que el efecto aparezca y desaparezca con elegancia. */ transition: background 0.5s ease-in-out, box-shadow 0.5s ease-in-out; } /* --- ESTILOS PARA TOOLTIP VOLTEADO --- */ .dynamic-tooltip.flipped-arrow { /* La transformación Y debe ir hacia abajo, no hacia arriba */ transform: translate(-50%, 40%); } .dynamic-tooltip.flipped-arrow.visible { transform: translate(-50%, var(--vertical-transform)); /* Usa la variable para la posición final */ } .dynamic-tooltip.flipped-arrow::after { top: auto; /* Resetea el 'top' original */ bottom: 100%; /* Coloca la flecha en la parte de arriba del tooltip */ border-color: transparent transparent #3B82F6 transparent; /* Apunta la flecha hacia abajo */ } /* Estilo para el vocabulario de la página */ .word-voca-highlight { /* Un fondo verde/teal muy suave y semi-transparente */ /* Hacemos el texto un poco más brillante para que resalte */ color: #5dc5b4; padding: 1px 2px; border-radius: 3px; /* Agregamos una transición suave por si acaso */ transition: all 0.2s ease-in-out; } .premium-badge { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 10; padding: 0.1rem 0.5rem; font-size: 0.65rem; font-weight: 700; color: #1f2937; background: linear-gradient(135deg, #fde047, #facc15); border-radius: 9999px; box-shadow: 0 2px 5px rgba(0,0,0,0.4); display: flex; align-items: center; gap: 2px; } #user-profile-btn { display: none; /* Oculto por defecto */ } /* ... (tus otros estilos) ... */ /* --- INICIO: ESTILOS PARA ARREGLAR PAYPAL INLINE (V2) --- */ /* 1. Hacer que TODO el modal sea blanco y de un ancho fijo optimizado */ #modal-container.paypal-bright-mode { background-color: #ffffff; /* Fondo blanco puro */ /* Un ancho ideal y consistente para botones de pago en móvil */ max-width: 24rem; /* 384px (max-w-sm) */ } /* 2. Cambiar el título del modal ("Paso 2...") a texto oscuro */ #modal-container.paypal-bright-mode #modal-title { color: #111827; /* text-gray-900 */ } /* 3. Cambiar el botón 'X' de cerrar a color oscuro */ #modal-container.paypal-bright-mode #modal-close-btn { color: #4b5563; /* text-gray-600 */ } /* 4. Asegurar que el área de contenido sea blanca y el texto oscuro */ #modal-container.paypal-bright-mode #modal-content { background-color: #ffffff; /* Blanco */ color: #1f2937; /* text-gray-800 */ } /* 5. Forzar a todos los párrafos/spans dentro del contenido a ser oscuros */ #modal-container.paypal-bright-mode #modal-content p, #modal-container.paypal-bright-mode #modal-content div, #modal-container.paypal-bright-mode #modal-content span { color: #1f2937 !important; /* Texto oscuro */ } /* 6. Forzar el mensaje de ayuda de PayPal a ser oscuro */ #modal-container.paypal-bright-mode #modal-paypal-message { color: #374151 !important; /* text-gray-700 */ } /* 7. Ocultar el botón "OK" que no tiene sentido durante el pago */ #modal-container.paypal-bright-mode #modal-ok-btn { display: none !important; } /* --- FIN: ESTILOS PARA ARREGLAR PAYPAL INLINE (V2) --- */ /* --- ESTILOS DE LA BARRA DE NAVEGACIÓN (NAVBAR) --- */ .custom-navbar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; background-color: #111827; /* bg-gray-900 */ border-bottom: 1px solid #374151; position: sticky; top: 0; z-index: 50; } .nav-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; } .nav-logo-text { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.5rem; background: linear-gradient(135deg, #a78bfa 0%, #4f46e5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.05em; } .nav-links { display: flex; gap: 1.5rem; } .nav-link { color: #9ca3af; /* gray-400 */ font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: color 0.2s; text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid transparent; } .nav-link:hover { color: #ffffff; } .nav-link.active-tab { color: #ffffff; border-bottom-color: #4f46e5; /* indigo-600 */ } /* Ocultar elementos en móvil si es necesario, o hacer scroll horizontal */ @media (max-width: 640px) { .custom-navbar { flex-direction: column; gap: 0.5rem; padding: 1rem; } .nav-links { gap: 1rem; font-size: 0.85rem; } } /* Estilos para la sección HOME (Bienvenida) */ #home-view-container { text-align: center; /* --- BORRA ESTAS LÍNEAS SI LAS TIENES --- */ /* display: flex; */ /* flex-direction: column; */ /* align-items: center; */ /* justify-content: center; */ /* ---------------------------------------- */ /* Solo deja esto o similar (si tienes min-height, déjalo, no molesta) */ min-height: 50vh; } .hero-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.1rem; color: white; } .hero-subtitle { font-size: 0.8rem; color: #9ca3af; max-width: 600px; margin-bottom: 0.5rem; } .hero-btn { background: linear-gradient(135deg, #4f46e5, #4338ca); padding: 0.75rem 2rem; border-radius: 9999px; font-weight: 700; color: white; transition: transform 0.2s; } .hero-btn:hover { transform: scale(1.05); } /* --- ESTILOS ACTUALIZADOS PARA EL FOOTER --- */ .footer-legal-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; /* Más espacio entre cada enlace */ /* Más separación de los iconos de arriba */ margin-bottom: 0.5rem; margin-top: 0.5rem; border-top: 1px solid #1f2937; /* Borde muy sutil (casi invisible) */ width: 100%; } .footer-legal-links a { font-size: 0.80rem; /* Letra más pequeña (aprox 10px) */ font-weight: 500; color: #4b5563; /* Gris oscuro para que no distraiga (gray-600) */ text-decoration: none; transition: all 0.2s ease-in-out; letter-spacing: 0.05em; /* Un poco de aire entre letras */ } .footer-legal-links a:hover { color: #9ca3af; /* Se ilumina al pasar el mouse */ text-decoration: underline; } /* --- NUEVA SECCIÓN: CARACTERÍSTICAS (HOME) --- */ .feature-card { background-color: rgba(31, 41, 55, 0.6); /* Fondo semi-transparente */ border: 1px solid #374151; /* Borde sutil */ transition: all 0.3s ease; } .feature-card:hover { transform: translateY(-5px); /* Se eleva al pasar el mouse */ border-color: #4f46e5; /* Borde índigo al hover */ background-color: rgba(31, 41, 55, 0.9); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); } .feature-icon-box { background-color: rgba(79, 70, 229, 0.15); /* Fondo suave para el icono */ color: #818cf8; /* Color del icono */ display: inline-flex; padding: 10px; border-radius: 8px; margin-bottom: 1rem; }