/* ============================================================ POWER BY TAM: Cycle Switcher — "Explorar otros ciclos" Componente compartido por parvulo/, basica/ y media/. El ciclo actual se define con ; este CSS resuelve el color principal via variables. El panel y las tarjetas los genera assets/js/cycle-switcher.js. ============================================================ */ body[data-cycle="parvulo"] { --cycle-color: #8051bf; --cycle-bg: #f1eafa; } body[data-cycle="basica"] { --cycle-color: #68a93d; --cycle-bg: #eff7e7; } body[data-cycle="media"] { --cycle-color: #3284cf; --cycle-bg: #eaf3fc; } /* ---------- Trigger "Ciclos" ---------- Es un item normal del menu principal (li > a), entre Inicio y Proyecto. No lleva estilo propio: hereda el gris y el hover del template, igual que Inicio/Proyecto/Personajes. La clase solo sirve de hook para el JS y para el anillo de foco de accesibilidad. */ .cycle-switch-btn { cursor: pointer; } /* ---------- Overlay y panel lateral ---------- */ .cycle-panel-overlay { position: fixed; inset: 0; background: rgba(16, 27, 59, 0.45); opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 250ms ease; z-index: 1050; } .cycle-panel-overlay.is-open { opacity: 1; visibility: visible; } .cycle-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 390px; max-width: 100%; background: #fff; box-shadow: -12px 0 32px rgba(16, 27, 59, 0.16); transform: translateX(102%); transition: transform 300ms ease; z-index: 1051; display: flex; flex-direction: column; padding: 28px 26px; overflow-y: auto; } .cycle-panel.is-open { transform: translateX(0); } @media (max-width: 575px) { .cycle-panel { width: 100%; } } body.cycle-panel-open { overflow: hidden; } /* ---------- Encabezado del panel ---------- */ .cycle-panel__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .cycle-panel__header h3 { margin: 0 0 4px; font-size: 20px; color: #2c3150; } .cycle-panel__header p { margin: 0; font-size: 14px; color: #6b7280; } .cycle-panel__close { flex-shrink: 0; width: 38px; height: 38px; border: none; border-radius: 50%; background: #f2f2f7; color: #2c3150; cursor: pointer; transition: background-color 200ms ease, color 200ms ease; } .cycle-panel__close:hover { background: var(--cycle-color); color: #fff; } .cycle-panel__current { display: flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 14px; color: #6b7280; } .cycle-panel__pill { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 999px; background: var(--cycle-bg); border: 1px solid var(--cycle-color); color: var(--cycle-color); font-size: 13px; font-weight: 600; pointer-events: none; user-select: none; } /* ---------- Tarjetas de ciclos ---------- */ .cycle-panel__cards { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; } .cycle-card-link { position: relative; display: flex; align-items: center; min-height: 190px; border-radius: 20px; padding: 22px; overflow: hidden; border: 1.5px solid transparent; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease; } .cycle-card-link:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(41, 48, 83, 0.14); } .cycle-card-link__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; max-width: 58%; } .cycle-card-link__name { margin: 0; font-size: 20px; font-weight: 800; } .cycle-card-link__phrase { margin: 0; font-size: 13.5px; line-height: 1.45; color: #5b6472; } .cycle-card-link__go { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-size: 14px; transition: transform 220ms ease; } .cycle-card-link:hover .cycle-card-link__go { transform: translateX(4px); } .cycle-card-link__img { position: absolute; right: 8px; bottom: 0; height: 172px; width: auto; max-width: 42%; object-fit: contain; object-position: bottom; z-index: 1; transform-origin: bottom center; transition: transform 220ms ease; } .cycle-card-link:hover .cycle-card-link__img { transform: scale(1.035); } .cycle-card-link__deco { position: absolute; z-index: 0; opacity: 0.35; } .cycle-card-link__deco--1 { top: 14px; left: 56%; font-size: 15px; } .cycle-card-link__deco--2 { bottom: 18px; left: 47%; font-size: 11px; } .cycle-card-link__hint { position: absolute; top: 12px; right: 14px; z-index: 3; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); font-size: 11.5px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity 220ms ease, transform 220ms ease; pointer-events: none; } .cycle-card-link:hover .cycle-card-link__hint { opacity: 1; transform: translateY(0); } /* Variantes por ciclo (colores exactos del manual) */ .cycle-card-link--parvulo { background: #f1eafa; } .cycle-card-link--parvulo .cycle-card-link__name, .cycle-card-link--parvulo .cycle-card-link__deco, .cycle-card-link--parvulo .cycle-card-link__hint { color: #8051bf; } .cycle-card-link--parvulo .cycle-card-link__go { background: #8051bf; } .cycle-card-link--parvulo:hover { background: #eadffa; border-color: #8051bf; } .cycle-card-link--basica { background: #eff7e7; } .cycle-card-link--basica .cycle-card-link__name, .cycle-card-link--basica .cycle-card-link__deco, .cycle-card-link--basica .cycle-card-link__hint { color: #68a93d; } .cycle-card-link--basica .cycle-card-link__go { background: #68a93d; } .cycle-card-link--basica:hover { background: #e6f2d8; border-color: #68a93d; } .cycle-card-link--media { background: #eaf3fc; } .cycle-card-link--media .cycle-card-link__name, .cycle-card-link--media .cycle-card-link__deco, .cycle-card-link--media .cycle-card-link__hint { color: #3284cf; } .cycle-card-link--media .cycle-card-link__go { background: #3284cf; } .cycle-card-link--media:hover { background: #ddecfb; border-color: #3284cf; } /* ---------- Tarjeta "Volver al inicio" ---------- */ .cycle-home-link { display: flex; align-items: center; gap: 14px; margin-top: auto; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1.5px solid #e6e8f0; color: #2c3150; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .cycle-panel__cards + .cycle-home-link { margin-top: 24px; } .cycle-home-link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(44, 49, 80, 0.12); border-color: var(--cycle-color); color: #2c3150; } .cycle-home-link__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--cycle-bg); color: var(--cycle-color); font-size: 15px; } .cycle-home-link__text { flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: left; } .cycle-home-link__text strong { font-size: 14.5px; font-weight: 700; } .cycle-home-link__text small { font-size: 12.5px; color: #6b7280; } .cycle-home-link__arrow { flex-shrink: 0; color: var(--cycle-color); font-size: 14px; transition: transform 220ms ease; } .cycle-home-link:hover .cycle-home-link__arrow { transform: translateX(4px); } /* ---------- Accesibilidad ---------- */ .cycle-switch-btn:focus-visible, .cycle-panel__close:focus-visible, .cycle-card-link:focus-visible, .cycle-home-link:focus-visible { outline: 3px solid var(--cycle-color, #3284cf); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .cycle-panel, .cycle-panel-overlay, .cycle-panel__close, .cycle-card-link, .cycle-card-link__go, .cycle-card-link__img, .cycle-card-link__hint, .cycle-home-link, .cycle-home-link__arrow { transition: none; } .cycle-card-link:hover, .cycle-home-link:hover { transform: none; } .cycle-card-link:hover .cycle-card-link__img, .cycle-card-link:hover .cycle-card-link__go, .cycle-home-link:hover .cycle-home-link__arrow { transform: none; } }