/** * Ícono de carrito del header ([academia_cart]) — Polilactics Academy. * Paleta corporativa de la referencia: navy #13303F, rojo #C40002. * Pensado para convivir con el header de Elementor Theme Builder en * cualquier ancho: móvil, tablet, laptop, desktop y ultrawide. */ /* ---- Lógica de sesión en el header ---------------------------------- WordPress añade la clase `logged-in` al cuando hay sesión. - Invitados: ven "Regístrate" + "Acceder" (.academia-solo-invitado) - Con sesión: ven "Mi escritorio" (.academia-solo-usuario) */ body.logged-in .academia-solo-invitado { display: none !important; } body:not(.logged-in) .academia-solo-usuario { display: none !important; } .academia-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; /* Área táctil mínima recomendada (44×44) sin agrandar el ícono. */ min-width: 44px; min-height: 44px; color: #13303F; text-decoration: none; line-height: 1; transition: color 0.2s ease, transform 0.15s ease; } .academia-cart:hover, .academia-cart:focus-visible { color: #C40002; transform: translateY(-1px); } .academia-cart:focus-visible { outline: 2px solid #5092B4; outline-offset: 2px; border-radius: 6px; } .academia-cart__icon { width: 24px; height: 24px; display: block; } .academia-cart__badge { position: absolute; top: 4px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #C40002; color: #FFFFFF; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #FFFFFF; /* aro blanco para despegarlo del ícono */ } /* Sin artículos: se oculta el badge, queda solo el ícono. */ .academia-cart__badge.is-empty { display: none; } /* ---- Tablet (≤ 1024px): ícono un pelín menor, misma área táctil. ---- */ @media (max-width: 1024px) { .academia-cart__icon { width: 22px; height: 22px; } } /* ---- Móvil (≤ 767px): compacto pero táctil; badge proporcional. ---- */ @media (max-width: 767px) { .academia-cart__icon { width: 21px; height: 21px; } .academia-cart__badge { top: 3px; right: 0; min-width: 15px; height: 15px; font-size: 10px; } } /* ---- Pantallas muy grandes (≥ 1920px, ultrawide): un punto más de presencia para que no se pierda junto al botón Acceder. ---- */ @media (min-width: 1920px) { .academia-cart__icon { width: 26px; height: 26px; } }