/* ══════════════════════════════════════════════════════════════ KIN.ZONE — Estilos globales (mobile-first) Este archivo cubre todo el CSS de la app para pantallas pequeñas. Los breakpoints anchos (≥ 640px, ≥ 768px) viven en wide.css. La sala de juego tiene su propio sala.css por volumen y especificidad. ÍNDICE ────────────────────────────────────────────────────────────── 1. Fuentes 2. Tokens y temas (parent / child / temas del niño) 3. Reset 4. Layout de página (header, footer, nav inferior) 5. Layouts de body especiales ← data-layout en el 6. Estructura de contenido (.page-header, .page-main) 7. Tipografía (.display, .mono) 8. Chips de categoría 9. Botones compartidos 10. Formularios compartidos 11. Cards y contenedores base 12. Labels de sección y eyebrows 13. Navegación interna (.back-link, .btn-back) 14. Estado de conexión 15. Stats (.stat-grid, .stat-card, .stat-value, .stat-label) 16. Pantalla: Autenticación (login.php, register.php) 17. Pantalla: Onboarding padre (bienvenida.php) 18. Pantalla: Home / Dashboard (index.php) 19. Pantalla: Catálogo de juegos (juegos.php) 20. Pantalla: Detalle de juego (juego.php) 21. Pantalla: Vista del hijo (nino.php) 22. Pantalla: Perfil y ajustes (perfil.php) 23. Pantalla: Avatar (avatar.php) 24. Pantalla: QR (qr.php) 25. Pantalla: Profiling y onboarding hijo 26. Pantalla: Recompensas (recompensas.php) 27. Pantalla: Contenido legal (cookies, privacidad, legal) 28. Pantalla: Join / Mensaje de espera (join.php) ══════════════════════════════════════════════════════════════ */ /* ── 1. Fuentes ──────────────────────────────────────────────── */ @font-face { font-family: 'Hanken Grotesk'; src: url('/brand/fonts/hanken-grotesk-v12-cyrillic-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Hanken Grotesk'; src: url('/brand/fonts/hanken-grotesk-v12-cyrillic-ext_latin_latin-ext_vietnamese-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Hanken Grotesk'; src: url('/brand/fonts/hanken-grotesk-v12-cyrillic-ext_latin_latin-ext_vietnamese-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Hanken Grotesk'; src: url('/brand/fonts/hanken-grotesk-v12-cyrillic-ext_latin_latin-ext_vietnamese-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Serif'; src: url('/brand/fonts/instrument-serif-v5-latin_latin-ext-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Serif'; src: url('/brand/fonts/instrument-serif-v5-latin_latin-ext-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/brand/fonts/jetbrains-mono-v24-cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/brand/fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } /* Noto Serif disponible en /brand/fonts/ para scripts futuros (cirílico, griego, etc.). Añadir @font-face con unicode-range cuando se active el idioma correspondiente. */ /* ── 2. Tokens y temas ───────────────────────────────────────── */ /* Tema padre — claro (hueso). También es el fallback por defecto. */ :root, [data-theme="parent"] { --bg: #14201A; --surface: #1E2D24; --line: #33473B; --text: #E7EFE9; --muted: #9DB0A4; --accent: #8FB39A; --accent-2: #6E9A80; --on-accent: #0E1813; --border: var(--line); --text-2: var(--muted); --text-soft: color-mix(in srgb, var(--text) 75%, var(--bg)); --font: 'Hanken Grotesk', system-ui, sans-serif; --font-display: 'Instrument Serif', serif; --font-mono: 'JetBrains Mono', monospace; } /* Tema hijo — fallback genérico mientras no hay theme_key asignado */ [data-theme="child"] { --bg: #0F1A18; --surface: #16231F; --line: #284039; --text: #EAF2EC; --muted: #8FA9A0; --accent: #B6E24A; --accent-2: #46D4C2; --on-accent: #101A07; --border: var(--line); --text-2: var(--muted); --text-soft: color-mix(in srgb, var(--text) 75%, var(--bg)); } /* ── Temas del niño · Oscuros ── */ [data-theme="boy-expedicion"] { --bg: #15211B; --surface: #212F27; --line: #36473C; --text: #ECF1EA; --muted: #9DB29F; --accent: #E8A24C; --accent-2: #4FB6A6; --on-accent: #1B1206; --cat-misterios: #4FB6A6; --cat-retos: #E8A24C; --cat-inventos: #C7D08A; --border: var(--line); --text-2: var(--muted); --text-soft: color-mix(in srgb, var(--text) 75%, var(--bg)); } [data-theme="boy-circuito"] { --bg: #0F1A18; --surface: #16231F; --line: #284039; --text: #EAF2EC; --muted: #8FA9A0; --accent: #B6E24A; --accent-2: #46D4C2; --on-accent: #101A07; --cat-misterios: #46D4C2; --cat-retos: #B6E24A; --cat-inventos: #7FD0E8; --border: var(--line); --text-2: var(--muted); --text-soft: color-mix(in srgb, var(--text) 75%, var(--bg)); } [data-theme="girl-floracion"] { --bg: #1A211C; --surface: #25302A; --line: #3A4A40; --text: #F0EFE9; --muted: #AAB4A6; --accent: #F08A6E; --accent-2: #F2C879; --on-accent: #2A0F08; --cat-historias: #F08A6E; --cat-logros: #F2C879; --cat-creatividad: #E79BB6; --border: var(--line); --text-2: var(--muted); --text-soft: color-mix(in srgb, var(--text) 75%, var(--bg)); } [data-theme="girl-aurora"] { --bg: #161F1E; --surface: #202B2A; --line: #33433F; --text: #EEEFF2; --muted: #A6B0AE; --accent: #B79BE0; --accent-2: #EE8FB8; --on-accent: #1B1030; --cat-historias: #EE8FB8; --cat-creatividad: #B79BE0; --cat-descubrir: #86C7D6; --border: var(--line); --text-2: var(--muted); --text-soft: color-mix(in srgb, var(--text) 75%, var(--bg)); } /* ── Temas del niño · Claros ── */ [data-theme="boy-expedicion-light"] { --bg: #F1EEE3; --surface: #FBF9F2; --line: #E1DCCB; --text: #1E2A22; --muted: #6E7A6E; --accent: #C9772E; --accent-2: #2E9E8E; --on-accent: #FFF7EE; --cat-misterios: #1F8377; --cat-retos: #B5641F; --cat-inventos: #5E7022; --border: var(--line); --text-2: var(--muted); --text-soft: color-mix(in srgb, var(--text) 75%, var(--bg)); } [data-theme="boy-circuito-light"] { --bg: #ECF3EC; --surface: #FFFFFF; --line: #DBE7DA; --text: #16241F; --muted: #62756B; --accent: #2FA86A; --accent-2: #2C9FC9; --on-accent: #FFFFFF; --cat-misterios: #147F98; --cat-retos: #1F8F5A; --cat-inventos: #4E7A22; --border: var(--line); --text-2: var(--muted); --text-soft: color-mix(in srgb, var(--text) 75%, var(--bg)); } [data-theme="girl-floracion-light"] { --bg: #F6EEE7; --surface: #FFFBF6; --line: #ECDFD2; --text: #2A211C; --muted: #7C7067; --accent: #E0654A; --accent-2: #CC8E2E; --on-accent: #FFF6F1; --cat-historias: #C2452F; --cat-logros: #946417; --cat-creatividad: #B14E76; --border: var(--line); --text-2: var(--muted); --text-soft: color-mix(in srgb, var(--text) 75%, var(--bg)); } [data-theme="girl-aurora-light"] { --bg: #F0EEF4; --surface: #FFFFFF; --line: #E2DDEA; --text: #221F2A; --muted: #6F6A7A; --accent: #8A5FC9; --accent-2: #D85F95; --on-accent: #FFFFFF; --cat-historias: #B23E76; --cat-creatividad: #6E43B5; --cat-descubrir: #1F7E96; --border: var(--line); --text-2: var(--muted); --text-soft: color-mix(in srgb, var(--text) 75%, var(--bg)); } /* ── 3. Reset ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: 0.875rem; line-height: 1.5; background: var(--bg); color: var(--text); min-height: 100dvh; display: flex; flex-direction: column; } img, video, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4 { overflow-wrap: break-word; } a { color: inherit; text-decoration: none; } button { cursor: pointer; background: none; border: none; } ul, ol { list-style: none; } /* ── 4. Layout de página ─────────────────────────────────────── */ /* Header pegado al top con separador */ .app-header { border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 50; } .app-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; max-width: 720px; margin: 0 auto; } .header-logo img { height: 28px; display: block; } /* La nav horizontal se oculta en móvil — se muestra en wide.css (≥768px) */ .header-nav { display: none; } .header-right { display: flex; align-items: center; gap: 12px; } .child-badge { font-size: 0.75rem; font-weight: 500; color: var(--text-2); letter-spacing: 0.03em; } .header-profile { display: flex; align-items: center; gap: 6px; color: var(--text-2); text-decoration: none; font-size: 0.8125rem; font-weight: 500; transition: color 120ms ease; } .header-profile svg { width: 20px; height: 20px; flex-shrink: 0; } .header-profile-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* El texto del perfil se oculta en móvil — visible en wide.css */ .header-profile-label { display: none; } .header-profile.is-active, .header-profile:hover { color: var(--accent); } .header-nav-item { font-size: 0.875rem; font-weight: 500; color: var(--text-2); text-decoration: none; padding: 4px 0; transition: color 120ms ease; } .header-nav-item.is-active, .header-nav-item:hover { color: var(--text); } .header-nav-item.is-active { border-bottom: 2px solid var(--accent); } /* Footer con separador */ .app-footer { margin-top: 32px; border-top: 1px solid var(--border); } .app-footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 16px; max-width: 720px; margin: 0 auto; } .footer-copy { font-size: 0.75rem; color: var(--text-2); } .footer-nav { display: flex; gap: 16px; } .footer-nav a { font-size: 0.75rem; color: var(--text-2); text-decoration: none; transition: color 120ms ease; } .footer-nav a:hover { color: var(--text); } /* Nav inferior móvil — se oculta en escritorio desde wide.css */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 100; } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 0 12px; text-decoration: none; color: var(--text-2); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.03em; transition: color 120ms ease; } .nav-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .nav-item.is-active { color: var(--accent); } /* Padding para que el contenido no quede bajo el nav fijo */ .has-bottom-nav { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); } /* ── 5. Layouts de body especiales ───────────────────────────── */ /* Añadir data-layout="..." al de la página correspondiente. El reset ya pone display:flex, flex-direction:column, min-height:100dvh. Estos modificadores ajustan la alineación y el padding. */ /* login.php, register.php — centra la tarjeta de auth */ body[data-layout="auth"] { align-items: center; justify-content: center; padding: 24px 16px; } /* bienvenida.php — centra el formulario de onboarding */ body[data-layout="onboard"] { align-items: center; justify-content: center; padding: 32px 16px; } /* avatar.php — pantalla fullscreen sin scroll, ancho máximo del juego */ body[data-layout="fullscreen"] { height: 100dvh; max-width: 480px; margin: 0 auto; overflow: hidden; } /* join.php — mensaje de espera centrado */ body[data-layout="centered"] { align-items: center; justify-content: center; padding: 24px; text-align: center; } /* ── 6. Estructura de contenido ──────────────────────────────── */ /* Cabecera de página (título de sección) */ .page-header { padding: 14px 16px 0; max-width: 720px; margin: 0 auto; width: 100%; } .page-title { font-size: 2rem; color: var(--text); margin-bottom: 20px; line-height: 1.1; } /* Columna principal de contenido */ .page-main { padding: 0 16px; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; flex: 1; width:100%; } /* Columna de home (más estrecha en móvil, se expande en wide.css) */ .main { padding: 16px 16px 0; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; flex: 1; width: 100%; } /* Variante de .page-main con margen superior (ej. juego.php hero) */ .page-main--spaced { margin-top: 20px; } /* Zona de botones de acción al pie de una página (padding propio, gap cero) */ .page-actions { padding: 16px; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; } /* ── 7. Tipografía ───────────────────────────────────────────── */ /* Instrument Serif — titulares y nombres propios */ .display { font-family: var(--font-display); font-weight: 400; line-height: 1.1; letter-spacing: 0.5px; } /* JetBrains Mono — códigos de sala, duraciones, stats numéricos */ .mono { font-family: var(--font-mono); } /* Texto secundario inline (chevrons, hints puntuales) */ .text-muted { color: var(--text-2); } /* Avatar pequeño reutilizable (32-36px) */ .avatar-sm { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* Radio e inputs de selección — color de acento global */ input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); } /* ── 8. Chips de categoría ───────────────────────────────────── */ /* El color base de cada chip se define como --base local. El porcentaje 55% en color-mix DEBE ser literal (no var()): algunos motores CSS no resuelven var() dentro de color-mix. */ .chip { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; border: 1px solid; color: color-mix(in srgb, var(--base), var(--text) 55%); background: color-mix(in srgb, var(--base) 13%, transparent); border-color: color-mix(in srgb, var(--base) 30%, transparent); } .chip-time { font-size: 0.6875rem; font-weight: 500; color: var(--text-2); font-family: var(--font-mono); } /* Colores por categoría — usados en juego.php, juegos.php */ .chip-creatividad { --base: #B094C8; } .chip-aprendizaje { --base: #7FA8C4; } .chip-critico { --base: #8FAE8A; } .chip-comunicacion { --base: #C4A870; } .chip-verificacion { --base: #C49070; } .chip-memoria { --base: #7FA8C4; } .chip-identidad { --base: #C49070; } .chip-conexion { --base: #C49070; } /* Contenedor de múltiples chips en fila */ .chips { display: flex; flex-wrap: wrap; gap: 6px; } /* ── 9. Botones compartidos ──────────────────────────────────── */ /* Botón de envío de formulario — onboarding y profiling */ .btn-submit { width: 100%; padding: 15px; background: var(--accent); color: var(--on-accent); border: none; border-radius: 12px; font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; transition: opacity 120ms ease; } .btn-submit:active { opacity: 0.85; } /* Botón de saltar paso — profiling */ .btn-skip { width: 100%; padding: 13px; background: transparent; border: 1px solid var(--border); border-radius: 12px; font: inherit; font-size: 0.875rem; color: var(--text-2); cursor: pointer; transition: border-color 120ms ease; text-decoration: none; text-align: center; display: block; } .btn-skip:hover { border-color: var(--text-2); } /* Estado de error general para formularios */ .auth-error { font-size: 0.8125rem; color: #c0392b; background: color-mix(in srgb, #c0392b 8%, var(--surface)); border: 1px solid color-mix(in srgb, #c0392b 25%, transparent); border-radius: 8px; padding: 10px 12px; } /* ── 10. Formularios compartidos ─────────────────────────────── */ /* Campo de formulario vertical */ .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); } .field-input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 0.9375rem; color: var(--text); outline: none; transition: border-color 120ms ease; box-sizing: border-box; } .field-input:focus { border-color: var(--accent); } .field-input::placeholder { color: var(--text-2); } /* Fila inline de campo + botón (ej. año de nacimiento) */ .field-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; } /* ── 11. Cards y contenedores base ──────────────────────────── */ /* Tarjeta de juego — usada en index.php y juegos.php */ .game-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; text-decoration: none; transition: border-color 120ms ease; } .game-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); } /* Juego bloqueado por plan — visible pero no interactivo */ .game-card--locked { opacity: 0.5; cursor: default; } /* Badge de plan requerido */ .game-plan-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-2); } .game-plan-badge svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* Estado vacío — listas sin datos */ .empty-state { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 32px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .empty-state img { width: 32px; height: 32px; opacity: 0.2; } .empty-state p { font-size: 0.8125rem; color: var(--text-2); line-height: 1.5; } /* ── 12. Labels de sección y eyebrows ────────────────────────── */ /* Etiqueta de sección — encabezado de bloque de contenido */ .section-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); margin-bottom: 10px; } /* Eyebrow — etiqueta de acento sobre un título o formulario */ .section-eyebrow { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } /* ── 13. Navegación interna ──────────────────────────────────── */ /* Enlace "← volver" — juego.php, nino.php */ .back-link, .btn-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 500; color: var(--text-2); text-decoration: none; margin-bottom: 16px; transition: color 120ms ease; } .back-link:hover, .btn-back:hover { color: var(--text); } /* ── 14. Estado de conexión ──────────────────────────────────── */ /* Punto de estado con texto — nino.php */ .connection-dot { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6875rem; font-weight: 500; color: var(--text-2); } .connection-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); flex-shrink: 0; } .connection-dot.is-on { color: #5a9e72; } .connection-dot.is-on::before { background: #5a9e72; } .connection-dot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* Badge de conexión — perfil.php */ .connection-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6875rem; font-weight: 500; padding: 2px 7px; border-radius: 20px; } .connection-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .connection-badge.is-on { color: #5a9e72; background: color-mix(in srgb, #5a9e72 12%, transparent); } .connection-badge.is-on::before { background: #5a9e72; } .connection-badge.is-off { color: var(--text-2); background: color-mix(in srgb, var(--text) 7%, transparent); } .connection-badge.is-off::before { background: var(--text-2); } .connection-badge a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* ── 15. Stats ───────────────────────────────────────────────── */ /* Grid de 3 columnas por defecto (nino.php); usar --2col en perfil.php */ .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .stat-grid--2col { grid-template-columns: 1fr 1fr; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 12px; text-align: center; } .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text); letter-spacing: -0.03em; line-height: 1; margin-bottom: 4px; } /* En perfil.php el stat-value es más grande */ .stat-grid--2col .stat-card { padding: 16px; } .stat-grid--2col .stat-value { font-size: 1.75rem; } .stat-label { font-size: 0.625rem; color: var(--text-2); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; } /* ── 16. Autenticación (login.php, register.php) ─────────────── */ .auth-logo { margin-bottom: 32px; } .auth-logo img { height: 32px; } .auth-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; } .auth-title { font-size: 1.25rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; } .auth-field { display: flex; flex-direction: column; gap: 6px; } .auth-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); } .auth-input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 0.9375rem; color: var(--text); outline: none; transition: border-color 120ms ease; box-sizing: border-box; } .auth-input:focus { border-color: var(--accent); } .auth-input::placeholder { color: var(--text-2); } .btn-auth { width: 100%; padding: 14px; background: var(--accent); color: var(--on-accent); border: none; border-radius: 12px; font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: opacity 120ms ease; margin-top: 4px; } .btn-auth:active { opacity: 0.85; } .auth-link { text-align: center; font-size: 0.8125rem; color: var(--text-2); } .auth-link a { color: var(--accent); text-decoration: none; font-weight: 500; } .auth-link a:hover { text-decoration: underline; } /* Campo de contraseña con botón de toggle */ .pw-wrap { position: relative; } .pw-wrap .auth-input { padding-right: 42px; } .pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-2); padding: 4px; display: flex; align-items: center; transition: color 120ms ease; } .pw-toggle:hover { color: var(--text); } /* Recordarme — solo login.php */ .remember-row { display: flex; align-items: center; gap: 8px; } .remember-row input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; } .remember-row label { font-size: 0.8125rem; color: var(--text-2); cursor: pointer; } /* Selector de idioma en auth — login.php, register.php */ .lang-switch { display: flex; justify-content: center; gap: 4px; margin-top: 12px; opacity: 0.4; transition: opacity 150ms ease; } .lang-switch:hover { opacity: 1; } .lang-switch .lang-btn { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; color: var(--text-2); text-decoration: none; padding: 3px 7px; border-radius: 4px; } .lang-switch .lang-btn.is-active { color: var(--accent); } /* ── 17. Onboarding padre (bienvenida.php) ───────────────────── */ .onboard-wrap { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 28px; } .onboard-logo img { height: 28px; } .onboard-header { display: flex; flex-direction: column; gap: 6px; } .onboard-title { font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.15; color: var(--text); } .onboard-subtitle { font-size: 0.9375rem; color: var(--text-2); line-height: 1.5; } .onboard-section { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 16px; } /* Fila año + selector */ .field-row .field-input.year { width: 110px; } /* Manifiesto / disclaimer — antes del formulario de onboarding */ .manifesto { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-left: 2px solid var(--border); } .manifesto p { font-size: 0.8125rem; color: var(--text-2); line-height: 1.6; } .manifesto-title { font-family: var(--font-display); font-size: 1.125rem !important; color: var(--text) !important; line-height: 1.2 !important; margin-bottom: 4px; } .manifesto-sign { font-size: 0.75rem !important; font-weight: 600; letter-spacing: 0.04em; color: var(--accent) !important; margin-top: 4px; } /* Wrapper del formulario de onboarding (secciones apiladas con gap) */ .onboard-form { display: flex; flex-direction: column; gap: 16px; } /* Wrapper genérico de campos en columna — login, register, profiling */ .auth-fields { display: flex; flex-direction: column; gap: 14px; } .form-stack { display: flex; flex-direction: column; gap: 16px; } /* Input estrecho — ej. selector de fecha de nacimiento */ .field-input--narrow { max-width: 200px; } /* Fila de radio buttons (género) */ .radio-row { display: flex; gap: 8px; } /* Label de radio button estilo chip seleccionable */ .gender-label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 0.9375rem; color: var(--text-2); transition: border-color 120ms ease, color 120ms ease; } .gender-label:has(input:checked) { border-color: var(--accent); color: var(--text); } /* ── 18. Home / Dashboard (index.php) ────────────────────────── */ /* Hero del hijo — avatar, nombre y bio centrados */ .child-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 4px; text-align: center; } .child-hero-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: color-mix(in srgb, var(--accent) 18%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .child-hero-avatar img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; } .child-hero-avatar svg { width: 32px; height: 32px; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .child-hero-name { font-family: var(--font-display); font-size: clamp(1.5rem, 7vw, 2rem); color: var(--text); line-height: 1.1; letter-spacing: -0.02em; } .child-hero-bio { font-size: 0.875rem; color: var(--muted); line-height: 1.5; max-width: 300px; } .btn-want-play { margin-top: 4px; padding: 13px 28px; background: var(--accent); color: var(--on-accent); border: none; border-radius: 12px; font: inherit; font-size: 0.9375rem; font-weight: 700; cursor: pointer; transition: opacity 120ms ease; } .btn-want-play:active { opacity: 0.85; } .btn-want-play:disabled { opacity: 0.5; cursor: default; } /* Tarjeta del jardín familiar */ .garden-card { position: relative; display: block; height: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; text-decoration: none; flex-shrink: 0; transition: border-color 120ms ease; } .garden-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .garden-card-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .garden-card-inner img { width: 48px; height: 48px; opacity: 0.2; } .garden-fog { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, var(--bg) 100%); pointer-events: none; } .garden-label { position: absolute; bottom: 14px; left: 16px; right: 16px; display: flex; align-items: flex-end; justify-content: space-between; } .garden-label-title { font-size: 0.6875rem; font-weight: 500; color: var(--text-2); letter-spacing: 0.07em; text-transform: uppercase; } .garden-label-hint { font-size: 0.6875rem; color: var(--text-2); } /* Badge de categoría/estado en tarjeta de juego */ .game-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .game-badge::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .game-title { font-size: 1.75rem; margin-bottom: 6px; color: var(--text); } .game-desc { font-size: 0.8125rem; color: var(--text-2); line-height: 1.4; margin-bottom: 12px; } .game-meta { font-size: 0.75rem; color: var(--text-2); margin-bottom: 14px; font-family: var(--font-mono); } /* Botón de acción principal — home */ .btn-primary { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 13px 16px; background: var(--accent); color: var(--on-accent); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; border-radius: 12px; text-decoration: none; border: none; cursor: pointer; transition: opacity 120ms ease; } .btn-primary:active { opacity: 0.85; } /* Botón de acción principal con margen superior — ej. game-card */ .game-card .btn-primary { margin-top: 4px; } /* Toast de fruto nuevo ganado */ .fruit-toast { display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 14px; padding: 14px 16px; text-decoration: none; } .fruit-toast-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; } .fruit-toast-text { flex: 1; } .fruit-toast-label { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; } .fruit-toast-name { font-size: 0.9375rem; font-weight: 600; color: var(--text); } /* Tarjetas de hijos — lista en home del padre */ .child-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; text-decoration: none; transition: border-color 120ms ease; } .child-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .child-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .child-card-avatar { width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .child-card-avatar svg { width: 16px; height: 16px; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .child-card-name { font-size: 0.9375rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .child-card-meta { display: flex; align-items: center; gap: 6px; margin-top: 1px; } .child-role { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); } /* Punto de estado "online" en tarjeta de hijo */ .child-conn { display: inline-flex; align-items: center; gap: 3px; font-size: 0.625rem; font-weight: 500; color: var(--text-2); } .child-conn::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--text-2); } .child-conn.on { color: #5a9e72; } .child-conn.on::before { background: #5a9e72; } .child-card-sessions { font-size: 0.75rem; color: var(--text-2); font-family: var(--font-mono); margin-left: auto; } .child-highlights { display: flex; flex-direction: column; gap: 6px; } .highlight-row { display: flex; gap: 8px; align-items: flex-start; } .highlight-skill { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--surface), var(--text) 55%); background: color-mix(in srgb, var(--border) 13%, transparent); border: 1px solid color-mix(in srgb, var(--border) 30%, transparent); padding: 2px 7px; border-radius: 20px; flex-shrink: 0; white-space: nowrap; } .highlight-note { font-size: 0.8125rem; color: var(--text-2); line-height: 1.4; } .child-card-footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--text-2); display: flex; justify-content: space-between; } /* ── 19. Catálogo de juegos (juegos.php) ─────────────────────── */ .page-breadcrumb { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } /* Lista de contextos de uso (viaje, mesa, etc.) */ .context-list { display: flex; flex-direction: column; gap: 8px; } .context-item { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; text-decoration: none; transition: border-color 120ms ease, background 120ms ease; } .context-item:hover, .context-item.is-active { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); } .context-item-icon { width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .context-item-icon svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .context-item-text { flex: 1; min-width: 0; } .context-item-name { font-size: 0.9375rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; margin-bottom: 2px; } .context-item-desc { font-size: 0.75rem; color: var(--text-2); line-height: 1.35; } .context-item-arrow { color: var(--text-2); font-size: 1rem; flex-shrink: 0; } /* Lista de juegos en columna */ .game-list { display: flex; flex-direction: column; gap: 8px; } .game-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .game-card-title { font-size: 1rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; line-height: 1.2; } .game-card-time { font-size: 0.75rem; color: var(--text-2); font-family: var(--font-mono); white-space: nowrap; padding-top: 2px; } .game-card-desc { font-size: 0.8125rem; color: var(--text-2); line-height: 1.4; margin-bottom: 10px; } /* ── 20. Detalle de juego (juego.php) ────────────────────────── */ /* Hero con información completa del juego */ .game-hero { padding: 14px 16px 0; max-width: 720px; margin: 0 auto; width: 100%; } .game-hero-chips { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .game-hero-title { font-size: clamp(1.75rem, 6vw, 2.5rem); color: var(--text); margin-bottom: 10px; line-height: 1.1; } .game-hero-desc { font-size: 0.9375rem; color: var(--text-2); line-height: 1.55; } /* Tarjeta de mecánica del juego */ .mechanic-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; } .mechanic-text { font-size: 0.875rem; color: var(--text-2); line-height: 1.6; margin-bottom: 16px; } /* Roles padre / hijo en la mecánica */ .roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .role-block { background: var(--bg); border-radius: 12px; padding: 12px; } .role-who { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .role-text { font-size: 0.8125rem; color: var(--text-2); line-height: 1.5; } /* Selector de hijo antes de lanzar el juego */ .child-selector { display: flex; flex-direction: column; gap: 6px; } .child-option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color 120ms ease, background 120ms ease; } .child-option input[type="radio"] { display: none; } .child-option:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } .child-option-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; transition: border-color 120ms ease, background 120ms ease; } .child-option:has(input:checked) .child-option-dot { border-color: var(--accent); background: var(--accent); } .child-option-name { font-size: 0.9375rem; font-weight: 500; color: var(--text); } /* Zona del botón de lanzar */ .launch-area { padding: 16px; max-width: 720px; margin: 0 auto; } /* Bloqueo de juego por plan — CTA de upgrade */ .upgrade-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 24px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; } .upgrade-cta svg { width: 28px; height: 28px; stroke: var(--text-2); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .upgrade-cta-title { font-size: 0.9375rem; font-weight: 600; color: var(--text); margin-bottom: 4px; } .upgrade-cta-desc { font-size: 0.8125rem; color: var(--text-2); } .btn-launch { display: flex; align-items: center; justify-content: center; width: 100%; padding: 15px 16px; background: var(--accent); color: var(--on-accent); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; border-radius: 14px; border: none; cursor: pointer; transition: opacity 120ms ease; } .btn-launch:active { opacity: 0.85; } .btn-launch:disabled { opacity: 0.5; cursor: not-allowed; } /* ── 21. Vista del hijo (nino.php) ───────────────────────────── */ /* Cabecera con avatar, nombre y estado */ .child-header { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; } .child-avatar { width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 15%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .child-avatar svg { width: 26px; height: 26px; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .child-avatar-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .child-name { font-size: 1.5rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; margin-bottom: 4px; } .child-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .role-badge { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); } /* Estado vacío dentro de una lista con borde (skills-list, session-list) */ .list-empty { padding: 24px; text-align: center; color: var(--text-2); font-size: 0.8125rem; } /* Barras de habilidades */ .skills-list { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; } .skill-row { display: flex; align-items: center; gap: 10px; } .skill-name { font-size: 0.8125rem; color: var(--text); width: 160px; flex-shrink: 0; } .skill-bar-bg { flex: 1; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; } .skill-bar-fill { height: 100%; border-radius: 99px; background: var(--accent); transition: width 400ms ease; } .skill-score { font-size: 0.75rem; font-weight: 600; color: var(--text-2); font-family: var(--font-mono); width: 30px; text-align: right; flex-shrink: 0; } /* Historial de sesiones */ .session-list { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .session-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--border); gap: 12px; } .session-row:last-child { border-bottom: none; } .session-title { font-size: 0.875rem; color: var(--text); font-weight: 500; margin-bottom: 2px; } .session-date { font-size: 0.75rem; color: var(--text-2); } .session-cat { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; flex-shrink: 0; color: color-mix(in srgb, var(--surface), var(--text) 55%); background: color-mix(in srgb, var(--border) 13%, transparent); border: 1px solid color-mix(in srgb, var(--border) 30%, transparent); } /* ── 22. Perfil y ajustes (perfil.php) ───────────────────────── */ /* Tarjeta del perfil con avatar */ .profile-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px 16px; display: flex; align-items: center; gap: 14px; } .profile-avatar { width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 15%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .profile-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .profile-avatar svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .profile-name { font-size: 1rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; margin-bottom: 2px; } .profile-meta { display: flex; align-items: center; gap: 8px; } .profile-role { font-size: 0.75rem; color: var(--text-2); } /* Lista de ajustes tipo Settings app */ .settings-list { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .settings-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-size: 0.875rem; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); transition: background 120ms ease; } .settings-item:last-child { border-bottom: none; } .settings-item:hover { background: color-mix(in srgb, var(--text) 4%, transparent); } .settings-item-arrow { color: var(--text-2); } /* Ítem de settings con color de peligro — ej. "Cerrar sesión" */ .settings-item--danger { color: color-mix(in srgb, #c0392b 70%, var(--text-2)); } /* Botón de acción destructiva — outline */ .btn-danger-outline { width: 100%; padding: 13px; background: transparent; border: 1px solid color-mix(in srgb, #c0392b 40%, transparent); border-radius: 12px; font: inherit; font-size: 0.875rem; font-weight: 500; color: color-mix(in srgb, #c0392b 80%, var(--text)); cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .btn-danger-outline:hover { background: color-mix(in srgb, #c0392b 8%, transparent); border-color: color-mix(in srgb, #c0392b 60%, transparent); } /* Confirmación de acción destructiva */ .danger-confirm { background: color-mix(in srgb, #c0392b 6%, var(--surface)); border: 1px solid color-mix(in srgb, #c0392b 25%, transparent); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 14px; } .danger-confirm-text { font-size: 0.8125rem; color: var(--text-2); line-height: 1.5; } .danger-confirm-actions { display: flex; gap: 10px; } .btn-cancel { flex: 1; padding: 12px; background: transparent; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 0.875rem; color: var(--text-2); text-align: center; text-decoration: none; cursor: pointer; } .btn-danger { flex: 1; padding: 12px; background: color-mix(in srgb, #c0392b 85%, transparent); color: #fff; border: none; border-radius: 10px; font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: opacity 120ms ease; } .btn-danger:active { opacity: 0.85; } /* Subtítulo debajo de un section-label (ej. selector de tema) */ .section-subtitle { font-size: 0.8125rem; color: var(--text-2); margin-bottom: 10px; } /* Fila de avatar + nombre en settings-list (lista de hijos) */ .settings-item-user { display: flex; align-items: center; gap: 10px; } /* Avatar de hijo en settings-list */ .settings-avatar-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* Fallback de avatar (sin imagen) en settings-list */ .settings-avatar-fallback { width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 15%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Selector de idioma en perfil — distinto al de auth (estilo más grande) */ .lang-switcher { display: flex; gap: 4px; } .lang-switcher .lang-btn { padding: 4px 10px; border-radius: 6px; font-size: 0.8125rem; font-weight: 500; text-decoration: none; color: var(--text-2); transition: background 120ms ease, color 120ms ease; } .lang-switcher .lang-btn.is-active { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-weight: 600; } .lang-switcher .lang-btn:not(.is-active):hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); } /* Grid de swatches de tema */ .theme-grid { display: grid; grid-template-columns: repeat(4, 40px); gap: 8px; } .theme-swatch { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; display: flex; border: 2px solid transparent; cursor: pointer; transition: border-color 150ms ease, transform 120ms ease; text-decoration: none; border-color: var(--text); } .theme-swatch.is-active { border-color: var(--accent); } .theme-swatch:active { transform: scale(0.92); } .swatch-half { flex: 1; height: 100%; } /* ── 23. Avatar (avatar.php) ─────────────────────────────────── */ /* Header mínimo — solo logo con baja opacidad */ .av-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; flex-shrink: 0; } .av-logo img { height: 20px; opacity: 0.35; } /* Área de scroll de selección de personaje */ #selectWrap { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 0 16px 24px; scrollbar-width: none; } #selectWrap::-webkit-scrollbar { display: none; } .av-title { font-family: var(--font-display); font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.15; color: var(--text); padding: 8px 4px 20px; } /* Grid 2 columnas para elegir personaje */ .char-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .char-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: 18px; padding: 22px 14px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1rem; font-weight: 600; color: var(--text); cursor: pointer; transition: border-color 150ms ease, background 150ms ease, transform 120ms ease; line-height: 1.3; min-height: 90px; } /* El quinto personaje ocupa todo el ancho */ .char-card:nth-child(5) { grid-column: span 2; } .char-card:active { transform: scale(0.96); } .char-card.picking { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); } /* Sección "invéntate el tuyo" */ .invent-wrap { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .invent-btn { width: 100%; padding: 15px; background: transparent; border: 1.5px dashed var(--border); border-radius: 18px; font: inherit; font-size: 0.9375rem; color: var(--text-2); cursor: pointer; transition: border-color 120ms ease, color 120ms ease; text-align: center; } .invent-btn:hover { border-color: var(--accent); color: var(--text); } .invent-input-wrap { display: none; flex-direction: column; gap: 8px; } .invent-textarea { width: 100%; background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; padding: 14px 16px; font: inherit; font-size: 0.9375rem; color: var(--text); resize: none; min-height: 56px; overflow: hidden; outline: none; box-sizing: border-box; transition: border-color 120ms ease; } .invent-textarea:focus { border-color: var(--accent); } .invent-textarea::placeholder { color: var(--text-2); } .btn-invent-go { width: 100%; padding: 14px; background: var(--accent); color: var(--on-accent); border: none; border-radius: 12px; font: inherit; font-size: 0.9375rem; font-weight: 700; cursor: pointer; transition: opacity 120ms ease; } .btn-invent-go:active { opacity: 0.85; } /* Pantalla de generación de imagen */ #generatingWrap { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 32px; } .gen-arrival { font-family: var(--font-display); font-size: clamp(1.25rem, 5vw, 1.75rem); color: var(--text); text-align: center; line-height: 1.3; } .waiting-dots { display: flex; gap: 8px; } .wdot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); opacity: 0.3; animation: wbounce 1.4s ease-in-out infinite; } .wdot:nth-child(2) { animation-delay: 0.18s; } .wdot:nth-child(3) { animation-delay: 0.36s; } @keyframes wbounce { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.9); } 40% { opacity: 0.9; transform: scale(1.2); } } /* Selector de tema visual (durante la espera de generación) */ .theme-picker-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 260px; } .theme-picker-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); } .theme-picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; } .theme-swatch-av { aspect-ratio: 1; border-radius: 10px; overflow: hidden; display: flex; border: 2px solid transparent; cursor: pointer; background: none; padding: 0; transition: border-color 150ms ease, transform 120ms ease; } .theme-swatch-av.is-active { border-color: var(--text); } .theme-swatch-av:active { transform: scale(0.92); } /* Pantalla de resultado (imagen generada) */ #imageWrap { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px; } .result-img { width: 100%; max-width: 280px; aspect-ratio: 1; border-radius: 24px; object-fit: cover; background: var(--surface); } .result-arrival { font-size: 0.875rem; color: var(--text-2); text-align: center; } .result-actions { display: flex; gap: 10px; width: 100%; max-width: 280px; } .btn-retry-av { flex: 0 0 auto; padding: 13px 18px; background: transparent; border: 1px solid var(--border); border-radius: 12px; font: inherit; font-size: 0.875rem; color: var(--text-2); cursor: pointer; transition: border-color 120ms ease; } .btn-retry-av:hover { border-color: var(--accent); } .btn-accept-av { flex: 1; padding: 13px; background: var(--accent); color: var(--on-accent); border: none; border-radius: 12px; font: inherit; font-size: 0.9375rem; font-weight: 700; cursor: pointer; transition: opacity 120ms ease; } .btn-accept-av:active { opacity: 0.85; } .btn-accept-av:disabled { opacity: 0.4; cursor: default; } /* Diálogo post-avatar "¿Quieres jugar?" */ #playDialog { display: none; position: fixed; inset: 0; z-index: 100; background: var(--bg); flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; gap: 32px; text-align: center; } .play-dialog-q { font-family: var(--font-display); font-size: clamp(1.75rem, 7vw, 2.5rem); line-height: 1.15; color: var(--text); } .play-dialog-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px; } .btn-play-yes { padding: 16px; background: var(--accent); color: var(--on-accent); border: none; border-radius: 14px; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; transition: opacity 120ms ease; } .btn-play-yes:active { opacity: 0.85; } .btn-play-no { padding: 14px; background: transparent; border: 1px solid var(--border); border-radius: 14px; font: inherit; font-size: 0.9375rem; color: var(--text-2); cursor: pointer; transition: border-color 120ms ease; } .btn-play-no:hover { border-color: var(--accent); } /* ── 24. QR (qr.php) ─────────────────────────────────────────── */ .qr-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .qr-child-name { font-size: 1.125rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .qr-image { border-radius: 12px; background: #fff; padding: 4px; display: block; } .qr-hint { font-size: 0.8125rem; color: var(--text-2); line-height: 1.5; } .btn-renew { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: transparent; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 0.8125rem; color: var(--text-2); cursor: pointer; transition: border-color 120ms ease, color 120ms ease; } .btn-renew:hover { border-color: var(--accent); color: var(--text); } /* URL copiable para dispositivos sin cámara */ .url-copy { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-2); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; cursor: pointer; word-break: break-all; text-align: center; line-height: 1.5; width: 100%; transition: border-color 120ms ease, color 120ms ease; } .url-copy:hover { border-color: var(--accent); color: var(--text); } .url-copy.copied { border-color: var(--accent); color: var(--accent); } /* Mensaje cuando no hay hijos registrados */ .qr-empty { font-size: 0.9375rem; color: var(--text-2); } /* ── 25. Profiling y onboarding hijo ─────────────────────────── */ /* Sección de tarjeta de profiling */ .profiling-section { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; } /* Chips de selección interactiva (intereses, preferencias) */ .profiling-section .chips { gap: 8px; } .chip-label { display: inline-flex; align-items: center; padding: 6px 14px; background: var(--bg); border: 1.5px solid var(--border); border-radius: 20px; cursor: pointer; font-size: 0.875rem; color: var(--text-2); transition: border-color 120ms ease, color 120ms ease, background 120ms ease; user-select: none; } .chip-label input { display: none; } .chip-label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--text); font-weight: 500; } /* Campo de texto libre ("otro") en profiling */ .other-input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font: inherit; font-size: 0.875rem; color: var(--text); outline: none; transition: border-color 120ms ease; box-sizing: border-box; } .other-input:focus { border-color: var(--accent); } .other-input::placeholder { color: var(--text-2); } .other-input { resize: none; min-height: 56px; } /* Onboarding hijo — bienvenida-nino.php */ /* El .step envuelve la pantalla completa en lugar de usar el body */ .step { display: flex; flex-direction: column; height: 100dvh; max-width: 480px; margin: 0 auto; } .step-logo { opacity: 0.35; height: 20px; } /* Campo de nombre del niño */ .name-input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; font: inherit; font-size: 1.0625rem; color: var(--text); outline: none; transition: border-color 120ms ease; box-sizing: border-box; margin-bottom: 10px; } .name-input:focus { border-color: var(--accent); } .name-input::placeholder { color: var(--text-2); } /* ── 26. Recompensas (recompensas.php) ───────────────────────── */ /* Tarjeta del rol activo del usuario */ .role-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px 16px; display: flex; align-items: center; gap: 16px; } .role-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; } .role-label { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; } .role-name { font-size: 1.125rem; font-weight: 600; color: var(--text); margin-bottom: 4px; } .role-desc { font-size: 0.75rem; color: var(--text-2); line-height: 1.4; } /* Lista de frutos ganados */ .fruits-list { display: flex; flex-direction: column; gap: 8px; } .fruit-item { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; opacity: 1; transition: opacity 120ms ease; } .fruit-item.is-used { opacity: 0.45; } .fruit-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; } .fruit-text { flex: 1; min-width: 0; } .fruit-name { font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: 2px; } .fruit-desc { font-size: 0.75rem; color: var(--text-2); } .fruit-status { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); flex-shrink: 0; } .fruit-status.available { color: var(--accent); } /* ── 27. Contenido legal (cookies, privacidad, legal) ────────── */ /* Las páginas legales no usan el layout estándar de app */ .legal-body { max-width: 720px; margin: 0 auto; padding: 32px 16px; } .legal-body h1 { font-size: 1.75rem; margin-bottom: 24px; } .legal-body h2 { font-size: 1rem; font-weight: 600; margin: 24px 0 8px; color: var(--text); } .legal-body p { font-size: 0.875rem; color: var(--text-2); line-height: 1.6; margin-bottom: 12px; } /* Tabla de cookies */ table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; margin-bottom: 16px; } th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text-2); } th { font-weight: 600; color: var(--text); } /* ── 28. Join / Mensaje de espera (join.php) ─────────────────── */ /* Mensaje centrado mientras el padre genera el QR */ .msg { font-size: 1rem; color: var(--text-2); line-height: 1.6; max-width: 280px; } /* ── 29. Banner "Retomar partida" ────────────────────────────── */ .resume-bar { display: block; background: color-mix(in srgb, var(--accent) 12%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); text-decoration: none; font-size: 0.875rem; padding: 10px 20px; text-align: center; } .resume-bar strong { color: var(--accent); }