/** * RESOURCE-NAV.CSS — Menú "Ir a..." compartido por las páginas de recursos * ========================================================================== * Antes cada header tenía una fila de íconos sueltos (sin texto) hacia * las demás secciones: apretada en mobile y poco clara para quien no * adivina qué significa cada emoji. Ahora un solo botón abre un panel * tipo acordeón, con Inicio primero y el resto de los recursos por * nombre, para que la persona usuaria pueda ir a cualquier sección sin * tener que descifrar íconos. */ /* Esta hoja no define los tokens de color/espaciado (--navy, --teal, --bg, etc.): siempre se carga junto a una hoja "principal" de página (juego.css/juegos.css/ejercicios.css/infantil.css/sonidos.css) que ya los define en :root — redeclararlos acá los pisaría, porque esta hoja se linkea DESPUÉS en el y gana el cascade (esto rompía --bg/--kid-orange de infantil.css cuando resource-nav.css se cargaba después con su propia copia de los valores base). */ .skip-link { position: fixed; top: 12px; left: 12px; z-index: 2000; background: var(--navy); color: white; padding: 12px 22px; border-radius: 10px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.9rem; text-decoration: none; transform: translateY(-72px); transition: transform 0.2s var(--easing); box-shadow: 0 6px 20px rgba(0,0,0,0.3); } .skip-link:focus { transform: translateY(0); } .jp-disclaimer { text-align: center; font-size: 0.76rem; line-height: 1.6; color: var(--text-soft); max-width: 520px; margin: 14px auto 40px; padding: 0 20px; } .rn-trigger { width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); cursor: pointer; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transition: transform 0.15s; } .rn-trigger:active { transform: scale(0.92); } .rn-trigger span { display: block; width: 17px; height: 2px; background: white; border-radius: 2px; transition: transform 0.2s var(--easing), opacity 0.15s; } .rn-trigger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .rn-trigger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .rn-trigger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } .rn-overlay { position: fixed; inset: 0; background: rgba(8,32,46,0.45); opacity: 0; pointer-events: none; transition: opacity 0.25s var(--easing); z-index: 300; } .rn-overlay.open { opacity: 1; pointer-events: auto; } .rn-panel { position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; max-width: 480px; max-height: 82vh; overflow-y: auto; background: white; border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: 0 24px 60px rgba(8,32,46,0.28); z-index: 301; padding: 18px 16px 20px; transform: translateY(-100%); transition: transform 0.32s var(--easing); } .rn-panel.open { transform: translateY(0); } .rn-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding: 0 4px; } .rn-panel-header h2 { font-size: 0.95rem; font-weight: 800; color: var(--text); margin: 0; } .rn-cerrar { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--bg); color: var(--text-soft); font-size: 0.95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, background 0.2s, color 0.2s; touch-action: manipulation; } .rn-cerrar:focus-visible { background: var(--teal-pale); color: var(--teal-deep); } .rn-cerrar:active { transform: scale(0.9); background: var(--teal-pale); color: var(--teal-deep); } .rn-lista { display: flex; flex-direction: column; gap: 4px; } .rn-item { display: flex; align-items: center; gap: 14px; padding: 13px 12px; border-radius: var(--r); text-decoration: none; color: var(--text); font-weight: 700; font-size: 0.92rem; transition: background 0.15s, transform 0.15s; touch-action: manipulation; } .rn-item:focus-visible { background: var(--bg); outline: 2px solid var(--teal-mid); outline-offset: -2px; } .rn-item:active { background: var(--teal-pale); transform: scale(0.98); } .rn-item .rn-icono { font-size: 1.35rem; width: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .rn-item.rn-inicio { border-bottom: 1px solid rgba(8,32,46,0.08); margin-bottom: 6px; padding-bottom: 15px; } @media (min-width: 700px) { .rn-panel { left: 24px; right: auto; top: 18px; margin: 0; border-radius: var(--r-lg); width: 340px; } } @media (prefers-reduced-motion: reduce) { .rn-panel, .rn-overlay, .rn-trigger span { transition-duration: 0.001ms !important; } } /** * SITE-BRAND — el link "Sinapsis" con el mismo estilo que el header * de index.html (logo-mark + brand-text), reutilizado acá para que * la marca se vea igual en todo el sitio. */ .site-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .site-brand .logo-mark { height: 38px; width: auto; display: flex; align-items: center; filter: drop-shadow(0 2px 10px rgba(42,174,194,0.45)); transition: filter 0.3s, transform 0.3s; } .site-brand .logo-symbol { color: var(--teal-soft); font-size: 1.7rem; line-height: 1; } .site-brand .brand-text { line-height: 1.1; } .site-brand .brand-text b { display: block; font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; color: white; letter-spacing: 0.08em; } .site-brand .brand-text small { display: block; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--teal-soft); font-weight: 500; } /* Hover con transform/scale: solo en dispositivos que de verdad tienen mouse. En touch, :hover se dispara con el tap y queda "pegado" hasta el próximo toque en otro lado — mover estas reglas acá evita ese efecto. */ @media (hover: hover) and (pointer: fine) { .site-brand:hover .logo-mark { filter: drop-shadow(0 4px 18px rgba(42,174,194,0.7)); transform: scale(1.04); } .rn-cerrar:hover { background: var(--teal-pale); color: var(--teal-deep); } .rn-item:hover { background: var(--bg); } }