/* STYLE.CSS — Solitario Triangular Hoja de estilos EXTERNA Contenido: 1. CSS Custom Properties (Variables) 2. Reset y estilos generales 3. Header y navegación (con menú hamburguesa) 4. Secciones principales 5. Tablero de juego 6. Panel de estadísticas (CSS Grid avanzado) 7. Botones 8. Reglas del juego (CSS Grid auto-fit) 9. Formulario 10. Tabla de ranking (responsive) 11. Footer 12. Animaciones (@keyframes) 13. Media Queries — 3 breakpoints (1024px, 768px, 480px) 14. Print stylesheet 15. Reduced motion — Accesibilidad NUEVO */ /* 1. CSS CUSTOM PROPERTIES (Variables CSS) Las Custom Properties (variables) permiten definir valores reutilizables en toda la hoja de estilos. Sintaxis: Definir: --nombre-variable: valor; Usar: var(--nombre-variable) Ventajas (UD6 §3 - Diseño responsivo): - Un solo lugar para cambiar colores/tamaños - Facilita mantener consistencia visual - Permite crear "temas" fácilmente - Se pueden cambiar con Media Queries :root es el elemento raíz del documento (equivale a ) Al definir variables aquí, están disponibles en todo el CSS. */ :root { /* --- Soft Modern Palette --- */ --bg-cream: #f6f7f3; --text-dark: #101828; --text-muted: #98a2b3; --green-forest: #0f3d2e; --green-mid: #1b5e44; --green-lime: #8ae84f; --green-gradient: radial-gradient(circle at center, #0f3d2e 0%, #1b5e44 42%, #8ae84f 100%); --gradient-pins: radial-gradient(circle at center, #0f3d2e 0%, #1b5e44 40%, #8ae84f 100%); --ui-bg-top: #f8f6f2; --ui-bg-bottom: #eceae6; --ui-surface-top: #f7f5f2; --ui-surface-mid: #f2efea; --ui-surface-bottom: #e7e3dd; --ui-shadow: rgba(16, 24, 40, 0.08); --ui-text: #1f2937; --ui-text-muted: #6b7280; --ui-peg-light: #f7f8fa; --ui-peg-mid: #e4e8ee; --ui-peg-dark: #cdd3dc; --ui-hole-edge: #d9ddd6; --ui-hole-core: #b7bec8; --color-primario: var(--green-forest); --color-primario-claro: var(--green-mid); --color-primario-oscuro: #092b20; --color-secundario: var(--green-lime); --color-secundario-oscuro: #59c66f; --color-fondo: var(--bg-cream); --color-fondo-seccion: rgba(255, 255, 255, 0.7); --color-fondo-tarjeta: rgba(255, 255, 255, 0.8); --color-fondo-stats: transparent; --color-fondo-form: rgba(255, 255, 255, 0.85); --color-texto: var(--text-dark); --color-texto-claro: #4b5563; --color-texto-blanco: #ffffff; --color-texto-suave: var(--text-muted); --color-exito: #22c55e; --color-exito-oscuro: #15803d; --color-error: #ef4444; --color-error-fondo: #fee2e2; --color-exito-fondo: #dcfce7; --color-ficha: #34d399; --color-ficha-borde: #059669; --color-ficha-hover: #6ee7b7; --color-seleccion: #a7f3d0; --color-seleccion-borde: #6ee7b7; --color-vacia: rgba(148, 163, 184, 0.25); --color-vacia-borde: rgba(148, 163, 184, 0.35); --color-posicion-borde: rgba(15, 61, 46, 0.4); --espaciado-xs: 5px; --espaciado-sm: 10px; --espaciado-md: 15px; --espaciado-lg: 20px; --espaciado-xl: 30px; --radio-borde: 18px; --radio-borde-sm: 10px; --radio-borde-lg: 28px; --sombra-suave: 0 18px 40px rgba(16, 24, 40, 0.1); --sombra-media: 0 24px 56px rgba(16, 24, 40, 0.16); --fuente-principal: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif; --tamano-base: 1rem; --tamano-h1: 2.6rem; --tamano-h2: 1.8rem; --linea-altura: 1.6; --transicion-rapida: 0.2s ease; --transicion-normal: 0.3s ease; --ancho-max-contenido: 900px; --ancho-max-seccion: 1000px; --ancho-max-formulario: 500px; --board-size: clamp(280px, 50vh, 420px); --tamano-ficha: clamp(40px, 6vh, 56px); --peg-size: var(--tamano-ficha); --gap-tablero: clamp(6px, 1vh, 10px); } /* 2. RESET Y ESTILOS GENERALES */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-padding-top: 20px; height: 100%; overflow: hidden; background: linear-gradient(180deg, var(--ui-bg-top) 0%, var(--ui-bg-bottom) 100%); } /* ── Fondo negro con puntitos blancos ── */ body { font-family: var(--fuente-principal); background-color: transparent; background-image: radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 52%); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--ui-text); line-height: var(--linea-altura); min-height: 100vh; min-height: 100dvh; overflow: hidden; position: relative; display: flex; flex-direction: column; } /* Capa puntitos blancos — textura sobre negro (grosor 3x) */ .bg-dots { display: none; } /* Imágenes flexibles — max-width: 100% evita desbordamiento */ img { max-width: 100%; height: auto; } /* 3. HEADER Y NAVEGACIÓN (con menú hamburguesa — UD6 §3) */ header { background: transparent; color: #ffffff; text-align: center; position: relative; flex-shrink: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding-top: max(clamp(14px, 2.2vh, 22px), env(safe-area-inset-top)); padding-bottom: clamp(2px, 0.6vh, 8px); } .container { max-width: var(--ancho-max-contenido); margin: 0 auto; padding: 0 var(--espaciado-lg); position: relative; z-index: 1; } header .container { text-align: center; } /* Language toggle — pill style, top-right (pushed out) */ .lang-selector { position: absolute; right: -120px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 10px; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 999px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); font-size: 0.8rem; font-weight: 500; } .lang-selector a { text-decoration: none; padding: 0 4px; color: #6B7280; transition: color 0.2s ease; } .lang-selector a:hover { color: var(--green-mid); } .lang-selector a.active { background: linear-gradient(135deg, var(--green-forest), var(--green-mid)); -webkit-background-clip: text; background-clip: text; color: transparent; transition: background 0.2s ease, color 0.2s ease; } .lang-selector a.active:hover { background: linear-gradient(135deg, var(--green-forest), var(--green-mid), var(--green-lime)); -webkit-background-clip: text; background-clip: text; } .lang-sep { color: rgba(107, 114, 128, 0.5); font-weight: 400; font-size: 0.75em; user-select: none; } main { position: relative; z-index: 1; flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: center; } header h1 { font-size: clamp(2.2rem, 4.8vh, 3rem); letter-spacing: 0.06em; text-transform: none; font-weight: 800; margin-bottom: 0; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62), 0 6px 12px rgba(16, 24, 40, 0.18); } .title-peg { font-weight: 800; background: linear-gradient(180deg, #ffffff 0%, #eef2f7 58%, #d7dee8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1px rgba(186, 194, 206, 0.58); } .title-jump { font-weight: 800; background: linear-gradient(180deg, #ffffff 0%, #eef2f7 58%, #d7dee8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1px rgba(186, 194, 206, 0.58); } .subtitulo { font-size: clamp(0.9em, 1.4vh, 1.02em); color: #6B7076; font-weight: 400; max-width: 34ch; margin-inline: auto; text-align: center; margin-top: 8px; margin-bottom: clamp(8px, 1vh, 10px); } /* 4. SECCIONES PRINCIPALES */ section { max-width: var(--ancho-max-seccion); margin: 0 auto; padding: clamp(10px, 2vh, 20px); background-color: transparent; position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; } section h2 { color: var(--ui-text); text-align: center; margin-bottom: var(--espaciado-md); font-size: var(--tamano-h2); font-weight: 400; letter-spacing: 0.02em; } section#juego { scroll-margin-top: 20px; } section#juego h2 { display: none; } section#juego > p { display: none; } /* 5. TABLERO DE JUEGO (Flexbox — UD6 §3) */ .tablero-container { display: flex; justify-content: center; margin: clamp(8px, 1.3vh, 14px) 0 clamp(8px, 1.1vh, 14px); padding: clamp(26px, 3.4vh, 40px) clamp(30px, 3.8vw, 50px) clamp(34px, 4.2vh, 52px); position: relative; flex-shrink: 0; } .board-wrap { position: relative; } /* Onboarding tooltip — derecha del tablero (desktop), Safari-safe */ .onboarding-tooltip { position: absolute; left: 100%; margin-left: 32px; top: 8px; padding: 10px 14px; max-width: 280px; font-size: clamp(0.88em, 1.5vh, 0.98em); color: var(--ui-text); white-space: normal; text-align: left; z-index: 10; opacity: 0; pointer-events: none; border-radius: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transition: opacity 0.3s ease-out, transform 0.3s ease-out; } .onboarding-tooltip::after { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); border: 8px solid transparent; border-right-color: rgba(255, 255, 255, 0.78); } @supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) { .onboarding-tooltip { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .onboarding-tooltip::after { border-right-color: rgba(255, 255, 255, 0.78); } } @supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) { .onboarding-tooltip { background: rgba(255, 255, 255, 0.92); } .onboarding-tooltip::after { border-right-color: rgba(255, 255, 255, 0.92); } } .onboarding-tooltip.is-visible { opacity: 1; animation: onboarding-float 2.5s ease-in-out infinite; } .onboarding-tooltip.is-visible.is-hiding { opacity: 0; animation: none; transition: opacity 0.4s ease-out; } .onboarding-tooltip.is-visible.is-fadeout { opacity: 0; animation: none; transition: opacity 0.4s ease-out; } .onboarding-tooltip-text { display: block; transition: opacity 0.25s ease-out; } .onboarding-tooltip-text.is-crossfade { opacity: 0; } @keyframes onboarding-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* Onboarding glow — pulso suave verde (peg + hueco) */ .posicion.onboarding-peg { animation: onboarding-peg-glow 1.5s ease-in-out infinite; } .posicion.onboarding-hole { animation: onboarding-hole-glow 1.5s ease-in-out infinite; } @keyframes onboarding-peg-glow { 0%, 100% { box-shadow: 0 10px 16px rgba(16, 24, 40, 0.12), 0 2px 4px rgba(16, 24, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 0 0 0 rgba(26, 94, 68, 0.4); } 50% { box-shadow: 0 12px 20px rgba(16, 24, 40, 0.16), 0 2px 4px rgba(16, 24, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 0 20px 2px rgba(26, 94, 68, 0.35); } } @keyframes onboarding-hole-glow { 0%, 100% { box-shadow: inset 0 10px 14px rgba(120, 129, 142, 0.28), inset 0 -3px 6px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(255, 255, 255, 0.45), 0 0 0 0 rgba(26, 94, 68, 0.35); } 50% { box-shadow: inset 0 10px 14px rgba(120, 129, 142, 0.28), inset 0 -3px 6px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(255, 255, 255, 0.45), 0 0 18px 2px rgba(26, 94, 68, 0.4); } } .tablero { display: flex; flex-direction: column; align-items: center; gap: var(--gap-tablero); position: relative; width: var(--board-size); max-width: 100%; z-index: 1; } /* Base triangular con look matte soft-modern */ .tablero::before { content: ""; position: absolute; inset: clamp(-74px, -8.2vh, -52px) clamp(-60px, -5.8vw, -44px) clamp(-86px, -9vh, -60px); background: linear-gradient(168deg, var(--ui-surface-top) 0%, var(--ui-surface-mid) 45%, #dfdbd4 100%); border: 1px solid rgba(210, 205, 196, 0.95); clip-path: polygon( 50% 5%, 55% 7%, 58% 12%, 90% 86%, 89% 90%, 85% 93%, 15% 93%, 11% 90%, 10% 86%, 42% 12%, 45% 7% ); border-radius: 58px; box-shadow: 0 24px 36px rgba(16, 24, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -10px 22px rgba(158, 163, 173, 0.2); z-index: -2; } .tablero::after { content: ""; position: absolute; inset: clamp(-52px, -5.8vh, -36px) clamp(-40px, -3.8vw, -28px) clamp(-62px, -6.8vh, -44px); clip-path: polygon( 50% 8%, 54% 10%, 57% 15%, 84% 83%, 83% 86%, 80% 88%, 20% 88%, 17% 86%, 16% 83%, 43% 15%, 46% 10% ); border-radius: 52px; background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 65%), linear-gradient(182deg, #f7f5f2 0%, #ebe7e1 100%); box-shadow: inset 0 0 0 clamp(8px, 0.85vw, 12px) rgba(222, 217, 208, 0.75), inset 0 6px 10px rgba(255, 255, 255, 0.6), inset 0 -10px 14px rgba(178, 184, 195, 0.22); z-index: -1; pointer-events: none; } .fila { display: flex; gap: var(--gap-tablero); } .posicion { width: var(--peg-size); height: var(--peg-size); border-radius: 50%; border: 1px solid rgba(196, 202, 211, 0.9); cursor: pointer; transition: transform var(--transicion-rapida), background-color var(--transicion-normal), box-shadow var(--transicion-normal), opacity var(--transicion-normal); opacity: 1; } /* Ficha minimalista soft-modern */ .posicion.ficha { background: radial-gradient(circle at 30% 24%, var(--ui-peg-light) 0%, var(--ui-peg-mid) 56%, var(--ui-peg-dark) 100%); border-color: rgba(188, 196, 208, 0.95); box-shadow: 0 10px 16px rgba(16, 24, 40, 0.12), 0 2px 4px rgba(16, 24, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.88); } .posicion.vacia { background: radial-gradient(circle at 45% 35%, var(--ui-hole-edge) 0%, #c2c9d1 42%, var(--ui-hole-core) 100%); border-color: rgba(185, 191, 201, 0.9); box-shadow: inset 0 10px 14px rgba(120, 129, 142, 0.28), inset 0 -3px 6px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(255, 255, 255, 0.45); } .posicion.ficha:hover { transform: scale(1.08); box-shadow: 0 12px 20px rgba(16, 24, 40, 0.16), 0 0 12px rgba(255, 255, 255, 0.38); } .posicion.ficha.seleccionada { background: radial-gradient(circle at 30% 24%, #ffffff 0%, #eef2f7 58%, #d7dee8 100%); transform: scale(1.05); box-shadow: 0 0 0 4px rgba(100, 180, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 2px 6px rgba(0, 0, 0, 0.12); transition: all 0.2s ease; } .posicion.vacia.movimiento-valido { animation: highlight-pulse 1.5s ease-in-out infinite; border: 2.5px solid rgba(100, 180, 255, 0.4); cursor: pointer; } @keyframes highlight-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(100, 180, 255, 0.4); background: rgba(100, 180, 255, 0.08); } 50% { box-shadow: 0 0 0 12px rgba(100, 180, 255, 0); background: rgba(100, 180, 255, 0.15); } } .tablero.tiene-seleccion .posicion.ficha:not(.seleccionada) { opacity: 0.65; transition: opacity 0.2s ease; } @keyframes shake-no-move { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } .posicion.ficha.no-movimiento { animation: shake-no-move 0.3s ease; } /* 6. PANEL DE ESTADÍSTICAS CSS Grid avanzado ANTES: display: flex + justify-content: space-around AHORA: display: grid + grid-template-columns: repeat(3, 1fr) CSS Grid vs Flexbox: - Flexbox: layouts UNIDIMENSIONALES (fila O columna) - CSS Grid: layouts BIDIMENSIONALES (filas Y columnas) repeat(3, 1fr) = 3 columnas de fracción igual La unidad 'fr' reparte el espacio proporcionalmente */ .stats-panel { display: flex; justify-content: center; gap: clamp(12px, 2vw, 24px); margin: clamp(6px, 1vh, 10px) 0 0; padding: 0; background-color: transparent; flex-shrink: 0; } .stat { text-align: center; } .stat-label { display: block; font-size: clamp(0.65em, 1.2vh, 0.75em); color: var(--ui-text-muted); text-transform: uppercase; letter-spacing: 0.12em; } .stat-valor { display: block; font-size: clamp(1em, 2vh, 1.2em); font-weight: 500; color: var(--ui-text); } /* 7. BOTONES (Flexbox con flex-wrap — UD6 §3) */ /* Dock soft-modern glassmorphism */ .controles { display: flex; justify-content: center; align-items: center; gap: clamp(14px, 2.2vw, 22px); margin-top: clamp(10px, 1.5vh, 15px); width: min(340px, 88%); margin-inline: auto; padding: clamp(10px, 1.2vh, 14px) clamp(18px, 2.4vw, 24px); border-radius: 999px; background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 65%), linear-gradient(182deg, #f7f5f2 0%, #ebe7e1 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(222, 217, 208, 0.75); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 10px 24px rgba(16, 24, 40, 0.08); flex-shrink: 0; } .control-btn { border-radius: 50%; border: 1px solid rgba(197, 205, 216, 0.7); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; } /* Botones laterales: minimal, suaves */ .control-btn-sec { width: clamp(50px, 6vh, 56px); height: clamp(50px, 6vh, 56px); background: radial-gradient(circle at 30% 24%, var(--ui-peg-light) 0%, var(--ui-peg-mid) 56%, var(--ui-peg-dark) 100%); color: var(--ui-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 8px 14px rgba(16, 24, 40, 0.11); } .control-btn-sec:hover { transform: translateY(-2px); border-color: rgba(176, 184, 197, 0.85); box-shadow: 0 10px 18px rgba(16, 24, 40, 0.12); } .control-btn-sec:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(148, 157, 171, 0.22), 0 4px 8px rgba(16, 24, 40, 0.06); } /* Botón central: blanco con acento verde suave */ .control-btn-primary { width: clamp(60px, 7vh, 68px); height: clamp(60px, 7vh, 68px); background: #ffffff; border: 1px solid rgba(185, 191, 201, 0.9); color: var(--ui-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 10px 18px rgba(16, 24, 40, 0.14), 0 0 12px rgba(52, 199, 89, 0.2); } .control-btn-primary:hover { transform: scale(1.05); box-shadow: 0 10px 22px rgba(16, 24, 40, 0.12), 0 0 20px rgba(123, 191, 154, 0.3); } .control-btn-primary:active { transform: scale(1.01); box-shadow: inset 0 2px 6px rgba(148, 157, 171, 0.16), 0 6px 12px rgba(16, 24, 40, 0.08), 0 0 12px rgba(123, 191, 154, 0.22); } .control-icon { font-size: 1.45rem; line-height: 1; color: inherit; } .control-btn-sec .control-icon { color: var(--ui-text); } .control-btn-primary .control-icon { color: var(--ui-text); } /* 10. FORMULARIO */ .formulario { max-width: var(--ancho-max-formulario); margin: 0 auto var(--espaciado-xl); padding: 25px; background-color: var(--color-fondo-form); border-radius: var(--radio-borde); border: 1px solid rgba(148, 163, 184, 0.25); } .formulario h3 { text-align: center; color: var(--color-primario-oscuro); margin-bottom: var(--espaciado-lg); } .form-grupo { margin-bottom: var(--espaciado-md); } .form-grupo label { display: block; margin-bottom: var(--espaciado-xs); font-weight: bold; color: var(--color-texto-claro); } .form-grupo input { width: 100%; padding: var(--espaciado-sm); border: 1px solid #ccc; border-radius: var(--radio-borde-sm); font-size: var(--tamano-base); transition: border-color var(--transicion-normal), box-shadow var(--transicion-normal); } .form-grupo input:focus { outline: none; border-color: var(--color-primario-oscuro); box-shadow: 0 0 5px rgba(93, 64, 55, 0.3); } .mensaje-error { display: block; color: var(--color-error); font-size: 0.8em; margin-top: 4px; min-height: 18px; } .input-error { border-color: var(--color-error) !important; box-shadow: 0 0 5px rgba(211, 47, 47, 0.3); } .input-valido { border-color: var(--color-exito-oscuro) !important; box-shadow: 0 0 5px rgba(56, 142, 60, 0.3); } .mensaje-exito { background-color: var(--color-exito-fondo); padding: 12px; border-radius: var(--radio-borde); text-align: center; margin: var(--espaciado-md) 0; font-weight: bold; } /* 10. TABLA DE RANKING NUEVO: Wrapper con overflow-x: auto En móvil, si la tabla no cabe, aparece scroll horizontal. */ .tabla-ranking-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .tabla-ranking { width: 100%; border-collapse: collapse; margin-top: var(--espaciado-lg); min-width: 500px; } .tabla-ranking th, .tabla-ranking td { padding: 12px; text-align: center; border-bottom: 1px solid #e0e0e0; } .tabla-ranking th { background-color: var(--color-primario); color: var(--color-texto-blanco); font-weight: bold; white-space: nowrap; } .tabla-ranking tbody tr:nth-child(even) { background-color: #f5f5f5; } .tabla-ranking tbody tr:hover { background-color: var(--color-fondo-stats); } /* 11. FOOTER */ footer { background: transparent; color: rgba(31, 41, 55, 0.65); text-align: center; padding-top: clamp(8px, 1vh, 12px); padding-bottom: max(clamp(8px, 1vh, 12px), env(safe-area-inset-bottom)); padding-left: 0; padding-right: 0; margin-top: 0; position: relative; z-index: 1; flex-shrink: 0; } footer p { margin: clamp(2px, 0.3vh, 4px) 0; font-size: clamp(0.7em, 1.2vh, 0.85em); } /* 12. ANIMACIONES (@keyframes) @keyframes define animaciones con estados intermedios. Se aplican con la propiedad animation. */ @keyframes pulso { 0% { box-shadow: 0 0 12px rgba(52, 199, 89, 0.24); } 50% { box-shadow: 0 0 22px rgba(52, 199, 89, 0.42); } 100% { box-shadow: 0 0 12px rgba(52, 199, 89, 0.24); } } @keyframes aparecer { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } section:not(#juego) { animation: aparecer 0.5s ease-out; } /* 13. MEDIA QUERIES 3 breakpoints @media tipo-de-medio and (característica) { reglas } Breakpoints: - Desktop grande: > 1024px (estilos base, sin media query) - Tablet / Desktop pequeño: max-width: 1024px — NUEVO - Tablet / Móvil: max-width: 768px - Móvil pequeño: max-width: 480px */ /* TABLET / DESKTOP PEQUEÑO (hasta 1024px) */ @media screen and (max-width: 1024px) { section { margin: 0 auto; padding: clamp(10px, 1.6vh, 16px); } .stats-panel { gap: var(--espaciado-sm); } /* clamp(min, preferido, max): tipografía fluida Mejor que cambiar font-size en cada breakpoint */ header h1 { font-size: clamp(1.8em, 5vw, 2.5em); } section h2 { font-size: clamp(1.3em, 3.5vw, 1.8em); } } /* TABLET (hasta 768px) */ @media screen and (max-width: 768px) { .lang-selector { position: fixed; right: 16px; top: max(14px, env(safe-area-inset-top)); transform: translateY(0); } section { margin: 0 auto; padding: clamp(8px, 1.4vh, 14px); } .tablero-container { padding: clamp(20px, 3.1vh, 32px) clamp(20px, 3.4vw, 34px) clamp(24px, 3.6vh, 36px); } .stats-panel { flex-direction: row; gap: 12px; margin-top: clamp(16px, 3vh, 24px); } /* Cambiar variable -> afecta a todo el tablero */ :root { --board-size: clamp(260px, 45vh, 360px); --tamano-ficha: clamp(36px, 5vh, 48px); --gap-tablero: clamp(5px, 0.8vh, 8px); } .controles { width: min(320px, 90%); padding: 10px 16px 12px; } .control-btn-sec { width: 56px; height: 56px; } .control-btn-primary { width: 66px; height: 66px; } .control-icon { font-size: 1.4rem; } /* Mobile: tooltip above board, centered, arrow points down */ .onboarding-tooltip { left: 50%; margin-left: 0; margin-bottom: 12px; top: auto; bottom: 100%; transform: translateX(-50%); max-width: min(320px, 90vw); text-align: center; } .onboarding-tooltip::after { left: 50%; top: auto; bottom: -14px; transform: translateX(-50%); border: 8px solid transparent; border-top-color: rgba(255, 255, 255, 0.78); } @supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) { .onboarding-tooltip::after { border-top-color: rgba(255, 255, 255, 0.92); } } .onboarding-tooltip.is-visible { animation: onboarding-float-mobile 2.5s ease-in-out infinite; } } @keyframes onboarding-float-mobile { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } } /* MÓVIL PEQUEÑO (hasta 480px) */ @media screen and (max-width: 480px) { .lang-selector { right: 12px; top: max(12px, env(safe-area-inset-top)); } :root { --board-size: clamp(240px, 40vh, 300px); --tamano-ficha: clamp(32px, 4.5vh, 42px); --gap-tablero: clamp(4px, 0.7vh, 6px); } .tablero-container { padding: clamp(14px, 2.5vh, 24px) clamp(14px, 2.8vw, 22px) clamp(16px, 2.9vh, 26px); } .controles { width: min(300px, 92%); padding: 10px 14px 12px; } .control-btn-sec { width: 52px; height: 52px; } .control-btn-primary { width: 62px; height: 62px; } .control-icon { font-size: 1.2rem; } .stats-panel { gap: 10px; margin-top: clamp(14px, 2.5vh, 22px); } .tabla-ranking th, .tabla-ranking td { padding: 8px 4px; font-size: 0.8em; } .formulario { padding: var(--espaciado-md); margin-left: 0; margin-right: 0; } .stat-valor { font-size: 1.1em; } .stat-label { font-size: 0.68em; } } /* 14. PRINT STYLESHEET — @media print tipo-de-medio: print → se aplica al imprimir (Ctrl+P) */ @media print { body { background-color: white; color: black; } .controles, .formulario, footer { display: none !important; } section { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; } header { background-color: white; color: black; position: static; } .tabla-ranking th { background-color: #ddd; color: black; } } /* 15. REDUCED MOTION Accesibilidad prefers-reduced-motion: reduce Se activa cuando el usuario tiene configurado en su SO que prefiere menos animaciones (epilepsia, migrañas, etc.) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .posicion.seleccionada { animation: none; box-shadow: 0 0 14px rgba(52, 199, 89, 0.35); } } /* ============================================================ 16. CLASE 12: Estilos para carga asincrona (UD6 §5) ============================================================ Feedback visual para operaciones AJAX: - Boton deshabilitado mientras se envia - Texto "Cargando..." en tabla de ranking ============================================================ */ #btn-refrescar-ranking { font-size: 0.9em; padding: 8px 20px; cursor: pointer; } button:disabled { opacity: 0.6; cursor: not-allowed; } /* ===================== TUTORIAL ===================== */ body.modo-tutorial .subtitulo { display: none; } body.modo-tutorial #juego { display: none !important; } body.modo-tutorial #tutorial-wrap { display: flex !important; } body.modo-game #tutorial-wrap { display: none !important; } body.modo-tutorial main { display: flex; flex-direction: column; align-items: center; justify-content: start; padding-top: 0; margin-top: 0; flex-grow: 1; } .tutorial-wrap { display: flex; justify-content: center; width: 100%; flex: 0 0 auto; padding: 0; } .tutorial-content { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 500px; margin: 0 auto; gap: 1.5rem; padding: 1rem 2rem; } .tutorial-title { font-size: 1.8rem; font-weight: 600; color: rgba(0, 0, 0, 0.55); letter-spacing: 0.03em; margin: 0 0 0.5rem 0; } .tutorial-board { display: flex; gap: 2rem; align-items: center; justify-content: center; padding: 2.5rem 3.5rem; background: rgba(255, 255, 255, 0.45); border-radius: 24px; backdrop-filter: blur(8px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); } .tutorial-pos { width: 100px; height: 100px; border-radius: 50%; cursor: pointer; transition: all 0.5s ease; position: relative; } .tutorial-pos.tutorial-ficha { background: radial-gradient(circle at 38% 32%, rgba(255,255,255,0.95) 0%, rgba(230,235,240,0.9) 40%, rgba(200,210,220,0.85) 70%, rgba(170,185,200,0.8) 100%); box-shadow: inset 0 2px 4px rgba(255,255,255,0.9), inset 0 -2px 4px rgba(0,0,0,0.08), 0 3px 8px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.06); } .tutorial-ficha-origen { animation: tutorial-pulse 2s ease-in-out infinite; } @keyframes tutorial-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(100, 180, 255, 0.5), inset 0 2px 4px rgba(255,255,255,0.9), 0 3px 8px rgba(0,0,0,0.1); } 50% { box-shadow: 0 0 0 16px rgba(100, 180, 255, 0), inset 0 2px 4px rgba(255,255,255,0.9), 0 3px 8px rgba(0,0,0,0.1); } } .tutorial-ficha-intermedia { opacity: 0.5; } .tutorial-hueco-destino { background: transparent !important; box-shadow: none !important; border: 2.5px dashed rgba(100, 180, 255, 0.45); animation: tutorial-glow 2s ease-in-out infinite; } @keyframes tutorial-glow { 0%, 100% { border-color: rgba(100, 180, 255, 0.3); } 50% { border-color: rgba(100, 180, 255, 0.7); } } .tutorial-ficha-mover { transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } .tutorial-ficha-desaparecer { transition: opacity 0.6s ease, transform 0.6s ease; opacity: 0 !important; transform: scale(0.3) !important; } .tutorial-steps-indicator { display: flex; gap: 0.6rem; justify-content: center; margin: 0.5rem 0; } .tutorial-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(0, 0, 0, 0.12); transition: all 0.4s ease; } .tutorial-dot.active { background: rgba(0, 0, 0, 0.4); transform: scale(1.3); } .tutorial-text { font-size: 1.3rem; font-weight: 500; color: rgba(0, 0, 0, 0.5); text-align: center; line-height: 1.5; transition: opacity 0.4s ease; min-height: 2.5rem; } .tutorial-text.fade-out { opacity: 0; } .tutorial-btn-play { background: linear-gradient(135deg, #a8d8ea, #7ec8c8); color: white; border: none; padding: 0.9rem 2.5rem; border-radius: 16px; font-size: 1.15rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 20px rgba(126, 200, 200, 0.3); transition: all 0.3s ease; letter-spacing: 0.02em; } .tutorial-btn-play:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(126, 200, 200, 0.4); } .tutorial-btn-skip { background: none; border: none; color: rgba(0, 0, 0, 0.3); font-size: 0.9rem; cursor: pointer; padding: 0.5rem 1rem; transition: color 0.3s ease; } .tutorial-btn-skip:hover { color: rgba(0, 0, 0, 0.5); } .tutorial-btn-repeat { background: none; border: none; color: rgba(0, 0, 0, 0.25); font-size: 0.8rem; cursor: pointer; padding: 0.4rem 0.8rem; transition: color 0.3s ease; } .tutorial-btn-repeat:hover { color: rgba(0, 0, 0, 0.45); } @media (max-width: 480px) { .tutorial-content { padding: 1rem; gap: 1.2rem; } .tutorial-board { gap: 1.2rem; padding: 1.5rem 2rem; } .tutorial-pos { width: 70px; height: 70px; } .tutorial-title { font-size: 1.4rem; } .tutorial-text { font-size: 1.1rem; } }