/* =========================================================================
   🎨 DISEÑO COMPARTIDO DE TODAS LAS PÁGINAS DEL CLIENTE
   ⚡ Ronda 266: antes iba escrito dentro de nav_client_head.php (y así viajaba completo en cada página); ahora
   vive en este archivo, que el celular guarda. Es EXACTAMENTE el mismo diseño de siempre. nav_client_head.php lo
   carga con "?v=" + la fecha de este archivo: cuando se sube una versión nueva, los celulares la toman de una.
   ========================================================================= */
        :root {
            --primary: #1b5e20; --primary-light: #edf5eb; --accent: #2e7d32;
            --bg: #f4fbf6; --card-bg: #ffffff;
            --text-main: #111827; --text-muted: #6b7280;
            --error-red: #ef4444; --border-color: #e5e7eb;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html, body { max-width: 100%; overflow-x: hidden; }
        /* 🔥 La barra de arriba es "fixed" (ver .client-topnav) y sale del flujo
           normal de la página — este padding le hace campo para que no tape el
           contenido. Se pone aquí (se carga de último en <head>) para que gane
           sobre el "body{...}" propio de cada página sin borrarle sus otras
           propiedades (padding solamente, el resto de reglas quedan igual). 🔥 */
        body { padding-top: 64px; }

        /* ============================================================
           🔥 BARRA SUPERIOR (ESCRITORIO) Y MENÚ INFERIOR (CELULAR) DEL CLIENTE 🔥
           ============================================================ */
        .client-topnav { background: linear-gradient(135deg, var(--primary), var(--accent)); padding: 0 20px; position: fixed; top: 0; left: 0; width: 100%; z-index: 500; box-shadow: 0 4px 15px rgba(27,94,32,0.15); }
        .client-topnav-inner { max-width: 1400px; margin: 0 auto; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
        .client-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: white; font-weight: 900; font-size: 15px; flex-shrink: 0; }
        .client-logo img { height: 32px; width: 32px; object-fit: contain; }
        /* ✨ A pedido (ronda 255): el logo de la barra verde da una vuelta con un "pop" y suelta una
           onda blanca; enseguida las letras A, N y C se pintan de verde UNA POR UNA (cuando pasa a la
           siguiente, la anterior vuelve a blanco). Todo en el mismo ciclo de 4s, así siempre van
           sincronizados. Solo se mueve con transform/opacity/color (liviano, no reacomoda nada). */
        .client-logo-icono { position: relative; display: inline-flex; flex-shrink: 0; }
        .client-logo-icono img { animation: logoBarraGiro 4s ease-in-out infinite; }
        .client-logo-icono::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,0.85); opacity: 0; pointer-events: none; animation: logoBarraOnda 4s ease-out infinite; }
        @keyframes logoBarraGiro { 0% { transform: rotate(0deg) scale(1); } 9% { transform: rotate(200deg) scale(1.22); } 16% { transform: rotate(360deg) scale(0.94); } 20%, 100% { transform: rotate(360deg) scale(1); } }
        @keyframes logoBarraOnda { 0%, 10% { transform: scale(0.9); opacity: 0; } 14% { transform: scale(1); opacity: 0.9; } 34% { transform: scale(1.9); opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
        .client-logo-texto span { display: inline-block; animation: letraAncLuz 4s ease-in-out infinite; }
        .client-logo-texto span:nth-child(1) { animation-delay: 0.8s; }
        .client-logo-texto span:nth-child(2) { animation-delay: 1.4s; }
        .client-logo-texto span:nth-child(3) { animation-delay: 2s; }
        @keyframes letraAncLuz { 0%, 15%, 100% { color: #ffffff; transform: translateY(0) scale(1); text-shadow: none; } 3%, 12% { color: #86efac; transform: translateY(-2px) scale(1.2); text-shadow: 0 0 8px rgba(134,239,172,0.85); } }
        .client-nav-links { display: flex; gap: 6px; flex: 1; justify-content: center; }
        .client-nav-link { padding: 8px 16px; border-radius: 10px; color: rgba(255,255,255,0.8); text-decoration: none; font-weight: 800; font-size: 13px; transition: 0.2s; }
        .client-nav-link:hover { background: rgba(255,255,255,0.15); color: white; }
        .client-nav-link.active { background: white; color: var(--primary); }
        .client-nav-help { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.15); color: white; padding: 8px 14px; border-radius: 10px; text-decoration: none; font-weight: 800; font-size: 12px; flex-shrink: 0; white-space: nowrap; }
        .client-nav-help:hover { background: rgba(255,255,255,0.25); }

        /* 🔥 CARRITO EN LA BARRA SUPERIOR 🔥 */
        .client-derecha-grupo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
        .client-cart-wrap { position: relative; flex-shrink: 0; }
        .client-cart-btn { position: relative; background: rgba(255,255,255,0.15); border: none; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; color: white; font-size: 16px; display: flex; align-items: center; justify-content: center; }
        .client-cart-btn:hover { background: rgba(255,255,255,0.25); }
        .client-cart-badge { position: absolute; top: -6px; right: -6px; background: var(--error-red); color: white; font-size: 10px; font-weight: 900; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid white; }

        /* 🔥 "Rebote" del ícono del carrito cuando se agrega algo — se le pone
           esta clase por medio segundo y se quita sola (ver agregarItem() en
           index). Sin esto, agregar un producto no se nota nada. 🔥 */
        @keyframes cartBump { 0% { transform: scale(1); } 30% { transform: scale(1.25); } 55% { transform: scale(0.92); } 100% { transform: scale(1); } }
        .client-cart-btn.cart-bump { animation: cartBump 0.5s ease; }
        .client-cart-badge.cart-bump { animation: cartBump 0.5s ease; }

        /* 🔒 La tarjeta aparte "Agregado al carrito" (#toast-carrito) se quitó — ahora, al agregar
           algo, se abre el carrito de VERDAD (#client-cart-panel) unos segundos y se cierra solo,
           en vez de repetir la info del carrito en una tarjeta inventada aparte. Ver
           abrirCartPanelTemporal() en nav_client_bottom.php. */
        /* 🔒 Ronda 253: la X de SIEMPRE (la misma del panel de admin y de todas las ventanas):
           fondo blanco, y al pasar el mouse o tocarla se pone rojo clarito. */
        .client-x-cerrar { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.15); width: 35px; height: 35px; border-radius: 50%; font-size: 16px; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: 0.2s; }
        .client-x-cerrar:hover, .client-x-cerrar:active { background: #fee2e2; color: var(--error-red); }
        .client-cart-panel { display: none; position: fixed; top: 74px; right: 20px; background: #e5e7eb; border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); width: 320px; max-height: 70vh; overflow-y: auto; z-index: 9999; padding: 18px; box-sizing: border-box; }
        .client-cart-panel.active { display: block; }
        .client-cart-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 9998; }
        .client-cart-overlay.active { display: block; }
        @media (max-width: 768px) {
            .client-cart-panel { top: 68px; right: 10px; left: 10px; width: auto; max-width: none; border-radius: 16px; max-height: 65vh; }
        }
        .client-cart-titulo { margin: 0 0 12px 0; font-size: 15px; font-weight: 900; color: var(--text-main); }
        .client-cart-vacio { font-size: 13px; color: var(--text-muted); font-weight: 600; text-align: center; padding: 20px 0; }
        /* .cart-item vive en cada página (index, checkout) por
           separado — se quitó de aquí porque, al cargarse este archivo
           siempre al final, su regla pisaba silenciosamente cualquier
           .cart-item que cada página definiera por su cuenta */
        .cart-total-box { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px dashed var(--border-color); margin-top: 8px; margin-bottom: 2px; }
        .cart-total-label { font-size: 13px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; }
        .cart-total-val { font-size: 18px; font-weight: 900; color: var(--primary); }

        .mobile-bottom-nav { display: none; justify-content: space-around; align-items: center; position: fixed; bottom: 0; left: 0; width: 100%; height: 70px; background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: 0 -5px 20px rgba(0,0,0,0.15); z-index: 1000; padding-bottom: env(safe-area-inset-bottom); }
        .mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: rgba(255,255,255,0.65); font-size: 10px; font-weight: 700; gap: 4px; flex: 1; transition: 0.2s; text-align: center; background: none; border: none; font-family: 'Inter', sans-serif; }
        .mobile-nav-item i { font-size: 18px; margin-bottom: 2px; transition: 0.25s; padding: 6px 14px; border-radius: 20px; }
        .mobile-nav-item.active { color: white; }
        .mobile-nav-item.active i { background: rgba(255,255,255,0.25); }

        /* 🔥 BOTÓN CENTRAL RESALTADO DEL MENÚ MÓVIL 🔥 */
        .mobile-nav-item-central { display: flex; align-items: center; justify-content: center; flex: 1; text-decoration: none; background: none; border: none; margin-top: -26px; }
        .mobile-nav-central-circulo { width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; box-shadow: 0 6px 16px rgba(27,94,32,0.4); border: 4px solid white; }

        @media (max-width: 768px) {
            .client-topnav { padding: 0 14px; }
            .client-nav-links { display: none; }
            .client-nav-help { display: none; }
            .mobile-bottom-nav { display: flex; }
        }
        @media (min-width: 769px) {
            .mobile-bottom-nav { display: none; }
        }

        /* 🔥 LOGIN/REGISTRO O MENÚ DE PERFIL EN LA BARRA SUPERIOR 🔥 */
        .client-auth-links { display: flex; gap: 8px; flex-shrink: 0; }
        .client-btn-login { color: rgba(255,255,255,0.85); font-weight: 800; font-size: 12px; text-decoration: none; padding: 8px 12px; white-space: nowrap; }
        .client-btn-login:hover { color: white; }
        .client-btn-registro { background: white; color: var(--primary); font-weight: 800; font-size: 12px; text-decoration: none; padding: 9px 16px; border-radius: 10px; white-space: nowrap; }
        .client-btn-registro:hover { background: #f0fdf4; }

        .client-profile-wrap { position: relative; flex-shrink: 0; }
        .client-profile-btn { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 4px; font-family: 'Inter', sans-serif; }
        .client-avatar { width: 32px; height: 32px; border-radius: 50%; background: white; color: var(--primary); border: 2px solid white; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; flex-shrink: 0; }
        .client-profile-nombre { font-weight: 800; font-size: 13px; color: white; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 🧭 Ronda 324: un nombre largo se corta con "…" (completo en el menú del perfil) */
        .client-profile-menu { display: none; position: fixed; top: 74px; right: 20px; background: #e5e7eb; border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); width: 240px; z-index: 9999; overflow: hidden; box-sizing: border-box; }
        .client-profile-menu.active { display: block; }
        @media (max-width: 768px) {
            .client-profile-menu { top: 68px; right: 10px; left: 10px; width: auto; border-radius: 16px; }
        }
        .cpm-header { display: flex; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid rgba(0,0,0,0.1); }
        .client-avatar-lg { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; flex-shrink: 0; }
        .cpm-nombre { font-weight: 900; font-size: 13px; color: var(--text-main); }
        .cpm-correo { font-weight: 600; font-size: 11px; color: var(--text-muted); }
        .cpm-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: var(--text-main); text-decoration: none; font-weight: 700; font-size: 13px; border-bottom: 1px solid rgba(0,0,0,0.08); }
        .cpm-item:hover { background: var(--primary-light); }
        .cpm-item i { width: 16px; color: var(--text-muted); }
        .cpm-logout { color: var(--error-red); border-bottom: none; }
        .cpm-logout i { color: var(--error-red); }
        .cpm-item.cpm-disabled { cursor: not-allowed; }
        /* 🔥 Novedades/Ayuda dentro del menú de perfil son solo para celular
           (ahí es donde se quitaron del menú inferior) — en PC ya están
           siempre visibles en el menú de arriba, así que aquí se ocultan
           para no repetirlas dos veces. */
        @media (min-width: 769px) {
            .cpm-item-solo-movil { display: none; }
        }
        .cpm-item.cpm-disabled:hover { background: transparent; }
        .cpm-item.cpm-disabled i { color: var(--text-muted); }
        .cpm-proximamente { margin-left: auto; background: #dbeafe; color: #1d4ed8; font-size: 9px; font-weight: 900; padding: 3px 8px; border-radius: 20px; text-transform: uppercase; flex-shrink: 0; }

        /* 🔥 FOOTER 🔥 */
        .client-footer { background: linear-gradient(135deg, var(--primary), var(--accent)); margin-top: 16px; padding: 18px 20px; color: rgba(255,255,255,0.85); text-align: center; font-size: 12px; font-weight: 600; }
        @media (max-width: 768px) { .client-footer { padding-bottom: calc(18px + 70px); padding-left: 12px; padding-right: 12px; font-size: 11px; } }
        /* 🧭 Ronda 289 (a pedido): "Desarrollado por All Necessary Colombia" con el logo, debajo del texto del pie de página. */
        .client-footer-dev { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 8px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.75); }
        /* 🎨 Ronda 294 (a pedido): el logo sin el cuadrito blanco de fondo, y del tamaño que tenía ese cuadrito (antes el logo
           quedaba más pequeño adentro). */
        .client-footer-dev img { width: 20px; height: 20px; object-fit: contain; background: none; padding: 0; border-radius: 0; box-sizing: border-box; }
        /* ✨ Ronda 296 (a pedido): el logo del pie con el MISMO giro + onda del logo de la barra de arriba (logoBarraGiro / logoBarraOnda,
           más arriba en este archivo), y las letras de "Desarrollado por…" con la misma luz verde que recorre "All Necessary Colombia" en
           la barra del panel: una por una, de izquierda a derecha. Cada letra vuelve a su color de siempre (el blanco suave del pie). */
        .client-footer-dev { --pie-letra: rgba(255,255,255,0.75); }
        .client-footer-logo { position: relative; display: inline-flex; flex-shrink: 0; }
        .client-footer-logo img { animation: logoBarraGiro 4s ease-in-out infinite; }
        .client-footer-logo::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,0.85); opacity: 0; pointer-events: none; animation: logoBarraOnda 4s ease-out infinite; }
        .client-footer-letras .lm-p { white-space: nowrap; }
        .client-footer-letras .lm-l { display: inline-block; animation: letraPieAnc 4s ease-in-out infinite; }
        @keyframes letraPieAnc { 0%, 9%, 100% { color: var(--pie-letra, #ffffff); transform: translateY(0) scale(1); text-shadow: none; } 2.5%, 6% { color: #86efac; transform: translateY(-2px) scale(1.2); text-shadow: 0 0 8px rgba(134,239,172,0.85); } }
        /* ⚡ Mientras el pie está fuera de la pantalla, su logo y sus letras se quedan quietos. */
        .client-footer-quieto .client-footer-logo img, .client-footer-quieto .client-footer-logo::after, .client-footer-quieto .lm-l { animation-play-state: paused !important; }
        @media (prefers-reduced-motion: reduce) { .client-footer-logo img, .client-footer-logo::after, .client-footer-letras .lm-l { animation: none !important; } }

        /* ============================================================
           🌿 FONDO ANIMADO COMPARTIDO (blobs + líneas + lucecitas) 🌿
           Vive aquí para que TODAS las páginas de cliente se vean igual.
           ============================================================ */
        .fondo-animado { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); }
        /* 🔥 RENDIMIENTO: antes estos "blobs" eran círculos de color sólido con
           filter:blur(50px) animándose sin parar — blur() es de lo más caro de
           repintar en cada cuadro, y como nunca para de moverse, el navegador
           lo recalculaba constantemente en TODA página (por eso se sentía
           pesado hasta en checkout, que ni siquiera tiene tarjetas). Un
           radial-gradient que se desvanece a transparente se ve igual de
           "borroso y suave" pero es pura composición (barato, como mover una
           imagen), sin recalcular ningún blur. 🔥 */
        .fondo-animado span { position: absolute; border-radius: 50%; opacity: 0.55; will-change: transform; }
        .fondo-animado span:nth-child(1) { width: 500px; height: 500px; background: radial-gradient(circle, var(--primary) 0%, var(--primary) 12%, transparent 70%); top: -160px; left: -140px; animation: blobUno 9s ease-in-out infinite; }
        .fondo-animado span:nth-child(2) { width: 440px; height: 440px; background: radial-gradient(circle, var(--accent) 0%, var(--accent) 12%, transparent 70%); top: 20%; right: -160px; animation: blobDos 11s ease-in-out infinite; }
        .fondo-animado span:nth-child(3) { width: 400px; height: 400px; background: radial-gradient(circle, #66bb6a 0%, #66bb6a 12%, transparent 70%); bottom: -140px; left: 15%; opacity: 0.5; animation: blobTres 13s ease-in-out infinite; }
        .fondo-animado span:nth-child(4) { width: 320px; height: 320px; background: radial-gradient(circle, #a5d6a7 0%, #a5d6a7 12%, transparent 70%); top: 45%; left: 40%; opacity: 0.42; animation: blobCuatro 10s ease-in-out infinite; }
        @keyframes blobUno { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(180px, 200px) scale(1.3); } }
        @keyframes blobDos { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-200px, 140px) scale(1.25); } }
        @keyframes blobTres { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(140px, -170px) scale(1.35); } }
        @keyframes blobCuatro { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-130px, -110px) scale(1.2); } }
        @media (max-width: 640px) { .fondo-animado span:nth-child(1) { width: 300px; height: 300px; } .fondo-animado span:nth-child(2) { width: 260px; height: 260px; } .fondo-animado span:nth-child(3) { width: 240px; height: 240px; } .fondo-animado span:nth-child(4) { width: 200px; height: 200px; } }

        .particulas-fondo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
        .particulas-fondo span { position: absolute; bottom: -10px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 8px 3px #ffffff, 0 0 16px 5px rgba(46,125,50,0.7); opacity: 0; animation-name: flotarLuz; animation-timing-function: ease-in-out; animation-iteration-count: infinite; will-change: transform, opacity; }
        @keyframes flotarLuz {
            0% { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
            10% { opacity: 1; }
            50% { transform: translateY(-55vh) translateX(20px) scale(1.6); opacity: 1; }
            90% { opacity: 0.3; }
            100% { transform: translateY(-105vh) translateX(-15px) scale(0.6); opacity: 0; }
        }

        /* 🔥 RENDIMIENTO: en celular bajamos la cantidad de partículas visibles —
           es lo más pesado que queda del fondo decorativo en equipos flojos. 🔥 */
        @media (max-width: 640px) {
            .particulas-fondo span:nth-child(n+18) { display: none; }
        }

        /* 🔥 Si el usuario tiene activado "reducir movimiento" en su sistema,
           respetamos esa preferencia y apagamos toda la animación decorativa —
           además de accesibilidad, es la config que suelen activar los equipos
           de gama baja para ahorrar batería/rendimiento. 🔥 */
        @media (prefers-reduced-motion: reduce) {
            .fondo-animado span, .particulas-fondo span { animation: none !important; }
            .client-logo-icono img, .client-logo-icono::after, .client-logo-texto span { animation: none !important; }
        }

        /* ✨ Ronda 255: el MISMO destello de luz diagonal de siempre (el de las tarjetas de plan y el
           recuadro del código), para los recuadros nuevos que lo llevan (carrito, resumen del pedido,
           horario, etiquetas de stock). Versión liviana: la luz se desliza con transform en vez de
           mover "left" — se ve idéntica, pero el navegador no tiene que recalcular la página en cada
           cuadro. Cada recuadro solo necesita position:relative + overflow:hidden y su ::after con
           top:-50%; left:-60%; width:40%; height:200% (475% de su propio ancho = el mismo recorrido
           de -60% a 130% de antes). */
        @keyframes destelloCliente { 0% { transform: translateX(0) rotate(20deg); } 45%, 100% { transform: translateX(475%) rotate(20deg); } }

        /* 🔁 A pedido (ronda 248): el MISMO giro 3D suave de los logos del catálogo (index, ver
           giroLogoTile allá) para los logos de producto de las demás páginas de cliente — Soporte,
           detalle del pedido y Códigos. Mismos valores y mismo tiempo, para que se vean iguales. */
        @keyframes giroLogoCliente { 0%, 100% { transform: perspective(320px) rotateY(-35deg); } 50% { transform: perspective(320px) rotateY(35deg); } }
        .logo-giro { animation: giroLogoCliente 2s ease-in-out infinite; }

        /* ⏱️ Ronda 283 (a pedido): las tarjetas de Mis cuentas, Códigos, Novedades, Ayuda y Reseñas entran como las del
           catálogo (ver tileEntraIzq en index.php): una fila desde la izquierda, la siguiente desde la derecha, una tras
           otra, girando un poquito desde su esquina. Solo al abrir la página (ver ancEntradaTarjetas en
           nav_client_head.php); al terminar se quitan las clases y la tarjeta queda exactamente como siempre. Las
           tarjetas anchas (más de 480 px) giran la mitad, para que el borde de enfrente no dé un salto tan largo. */
        @keyframes ancEntraIzq { from { opacity: 0; transform: translateX(-50px) rotate(-6deg); } 70% { opacity: 1; } to { opacity: 1; transform: none; } }
        @keyframes ancEntraDer { from { opacity: 0; transform: translateX(50px) rotate(6deg); } 70% { opacity: 1; } to { opacity: 1; transform: none; } }
        @keyframes ancEntraIzqAncha { from { opacity: 0; transform: translateX(-50px) rotate(-3deg); } 70% { opacity: 1; } to { opacity: 1; transform: none; } }
        @keyframes ancEntraDerAncha { from { opacity: 0; transform: translateX(50px) rotate(3deg); } 70% { opacity: 1; } to { opacity: 1; transform: none; } }
        /* 🔧 Ronda 284: sin transición mientras espera su turno — las filas de Códigos tienen una transición propia y se alcanzaban
           a ver un instante antes de desaparecer para entrar. */
        .anc-entra-izq, .anc-entra-der { opacity: 0; transition: none !important; }
        .anc-entra-izq { transform-origin: bottom left; }
        .anc-entra-der { transform-origin: bottom right; }
        .anc-entra-izq.anc-entra-activa { animation: ancEntraIzq 0.55s cubic-bezier(.2,.8,.25,1.1) both; }
        .anc-entra-der.anc-entra-activa { animation: ancEntraDer 0.55s cubic-bezier(.2,.8,.25,1.1) both; }
        .anc-entra-izq.anc-entra-ancha.anc-entra-activa { animation-name: ancEntraIzqAncha; }
        .anc-entra-der.anc-entra-ancha.anc-entra-activa { animation-name: ancEntraDerAncha; }
        @media (prefers-reduced-motion: reduce) { .anc-entra-izq, .anc-entra-der { animation: none !important; opacity: 1 !important; } }

        /* 🔄 Ronda 284 (a pedido: "absolutamente TODAS las ventanas, sin excepción"): todas las ventanas de la tienda se abren
           GIRANDO, igual que las del panel — las de la tienda y el carrito (planes, combos, avisos, novedades), las del checkout,
           Mis cuentas, Detalle del pedido y Códigos (incluida la de "Pedir código"), la de calificar, el chat con soporte, el
           asistente virtual y el visor de imágenes. Cada una se sigue abriendo y cerrando como siempre; solo cambia la entrada.
           🔄 Ronda 285 (a pedido): también el carrito de arriba y el menú del perfil (el de invitado también).
           Con "reducir movimiento" activado en el celular, solo aparecen suave (sin girar). */
        /* ⚡ Ronda 304 (R5-I01): mientras la ventana gira, sin difuminado (igual que en el panel desde la ronda 288): difuminar una caja
           que gira en 3D es lo que más traba un celular sencillo. Al terminar el giro, el difuminado vuelve solo. Se ve igual. */
        @keyframes ancVentanaGira { from { opacity: 0; transform: perspective(1200px) rotateY(-90deg); backdrop-filter: none; -webkit-backdrop-filter: none; } 40% { opacity: 1; backdrop-filter: none; -webkit-backdrop-filter: none; } to { opacity: 1; transform: perspective(1200px) rotateY(0deg); backdrop-filter: none; -webkit-backdrop-filter: none; } }
        /* ⚡ Ronda 304 (R5-I01): con una ventana abierta (Ver planes, Arma tu combo, las del checkout, Soporte, Códigos, Calificar,
           el visor de fotos), el fondo animado y el logo y las letras de la barra se quedan quietos, como ya pasa en el panel. Antes
           el celular volvía a difuminar toda la pantalla en cada cuadro porque detrás todo se seguía moviendo. Al cerrar la ventana,
           todo sigue moviéndose. (La clase la pone el vigilante de nav_client_bottom.php.) */
        .fondo-animado.anc-pausa > span, .particulas-fondo.anc-pausa > span,
        html.anc-ventana-abierta .client-logo-icono img, html.anc-ventana-abierta .client-logo-icono::after,
        html.anc-ventana-abierta .client-logo-texto span { animation-play-state: paused !important; }
        /* ⚡ Ronda 304 (R5-I04): los logos que giran y los botones que laten, cuando están FUERA de la pantalla (Soporte, Códigos,
           Detalle del pedido), se quedan quietos; los que se ven se mueven igual que siempre (ver nav_client_bottom.php). */
        .logo-giro.anc-fuera, .anc-fuera .logo-giro, .cp-btn.anc-fuera { animation-play-state: paused !important; }
        @keyframes ancVentanaAparece { from { opacity: 0; } to { opacity: 1; } }
        .modal-overlay .modal-content, .cod-hoja-ov .cod-hoja, .cal-overlay .cal-card, .chat-sop-overlay .chat-sop-panel,
        .visor-overlay .visor-contenedor, .chatbot-window.active,
        .client-cart-panel.active, .client-profile-menu.active { animation: ancVentanaGira 0.3s ease-out !important; }
        @media (prefers-reduced-motion: reduce) {
            .modal-overlay .modal-content, .cod-hoja-ov .cod-hoja, .cal-overlay .cal-card, .chat-sop-overlay .chat-sop-panel,
            .visor-overlay .visor-contenedor, .chatbot-window.active,
            .client-cart-panel.active, .client-profile-menu.active { animation: ancVentanaAparece 0.2s ease !important; }
        }
        /* 🔄 Ronda 310 (a pedido: "cuando se cierra debe pasar lo mismo, solo que gira del otro lado… tanto en el portal de clientes
           como en el panel"): TODAS las ventanas de la tienda también se CIERRAN girando, hacia el lado contrario de donde abrieron
           (abren desde -90°, cierran hacia +90°), y el fondo oscuro o difuminado se desvanece. Una sola regla para todas: cuando el
           código de cada ventana la esconde (style.display = 'none', o le quita su clase: "abierta", "flex-show", "activo",
           "active"), el navegador la deja visible 0,26 s más mientras gira y después la esconde. No cambia cómo se abren ni cómo
           se cierran, ni lo que el código lee de ellas. Mientras gira no se puede tocar. En navegadores viejos se cierra de golpe,
           como antes; con "reducir movimiento" también. */
        @keyframes ancVentanaCierra { from { opacity: 1; transform: perspective(1200px) rotateY(0deg); backdrop-filter: none; -webkit-backdrop-filter: none; } 55% { opacity: 1; } to { opacity: 0; transform: perspective(1200px) rotateY(90deg); backdrop-filter: none; -webkit-backdrop-filter: none; } }
        .modal-overlay[style*="display: none"], .modal-overlay[style*="display:none"],
        .cal-overlay[style*="display: none"], .cal-overlay[style*="display:none"],
        .visor-overlay[style*="display: none"], .visor-overlay[style*="display:none"],
        .cod-hoja-ov:not(.abierta), #modalAlertaCod:not(.flex-show), .chat-sop-overlay:not(.activo), .client-cart-overlay:not(.active) {
            opacity: 0; pointer-events: none;
            transition: opacity 0.26s ease-in, display 0.26s allow-discrete;
        }
        .modal-overlay[style*="display: none"] .modal-content, .modal-overlay[style*="display:none"] .modal-content,
        .cal-overlay[style*="display: none"] .cal-card, .cal-overlay[style*="display:none"] .cal-card,
        .visor-overlay[style*="display: none"] .visor-contenedor, .visor-overlay[style*="display:none"] .visor-contenedor,
        .cod-hoja-ov:not(.abierta) .cod-hoja, #modalAlertaCod:not(.flex-show) .modal-content, .chat-sop-overlay:not(.activo) .chat-sop-panel {
            animation: ancVentanaCierra 0.26s ease-in forwards !important;
        }
        /* El carrito y el menú del perfil son la tarjeta misma (sin fondo propio): giran y se esconden al quitarles "active". */
        .client-cart-panel:not(.active), .client-profile-menu:not(.active) {
            pointer-events: none;
            transition: display 0.26s allow-discrete;
            animation: ancVentanaCierra 0.26s ease-in forwards !important;
        }
        /* El asistente (robot) se esconde solo 0,3 s después de quitarle "active"; el giro de salida espera un instante para no
           verse nunca cuando se está ABRIENDO (ahí "active" llega 10 ms después de mostrarlo). */
        .chatbot-window:not(.active) { animation: ancVentanaCierra 0.26s ease-in 0.02s forwards !important; pointer-events: none; } /* (Verificación final 310, I-06) mientras se cierra no recibe toques */
        /* (Verificación final 310, I-03) El avisito "Soporte te respondió" del chat también entra y sale girando, como las demás. */
        .chat-sop-toast.activo { animation: ancVentanaGira 0.3s ease-out !important; }
        .chat-sop-toast:not(.activo) { pointer-events: none; transition: display 0.26s allow-discrete; animation: ancVentanaCierra 0.26s ease-in forwards !important; }
        /* (Verificación final 310, I-05) Los botones del visor de fotos (X, +, −) tampoco reciben toques mientras se cierra. */
        .visor-overlay[style*="display: none"] .visor-btn, .visor-overlay[style*="display:none"] .visor-btn,
        .visor-overlay[style*="display: none"] .visor-close, .visor-overlay[style*="display:none"] .visor-close { pointer-events: none !important; }
        @media (prefers-reduced-motion: reduce) {
            .modal-overlay, .cal-overlay, .visor-overlay, .cod-hoja-ov, #modalAlertaCod, .chat-sop-overlay, .client-cart-overlay,
            .client-cart-panel, .client-profile-menu, .chat-sop-toast { transition: none !important; }
            .client-cart-panel:not(.active), .client-profile-menu:not(.active), .chatbot-window:not(.active), .chat-sop-toast:not(.activo) { animation: none !important; }
            .chat-sop-toast.activo { animation: ancVentanaAparece 0.2s ease !important; }
        }
        /* 🔄 Ronda 288 (a pedido: "las tarjetas de los login deben girar también"): la tarjeta de Iniciar sesión, Registrarse y
           Recuperar contraseña entra girando al abrir la página. ("backwards": al terminar no se queda con nada del giro.) */
        .login-wrap > .box { animation: ancVentanaGira 0.45s ease-out backwards; }
        @media (prefers-reduced-motion: reduce) { .login-wrap > .box { animation: ancVentanaAparece 0.3s ease backwards; } }
        /* 🔄 Ronda 329 (a pedido): al tocar "Regístrate", "¿Olvidaste tu contraseña?", "Inicia sesión" o "Volver a Iniciar Sesión",
           la tarjeta sale girando (hacia +90°, el mismo giro de cierre de las ventanas) y la página siguiente la recibe entrando
           por el lado contrario (desde -90°, la regla de arriba). La clase la pone nav_client_bottom.php. */
        .login-wrap > .box.anc-tarjeta-se-va { animation: ancVentanaCierra 0.26s ease-in forwards !important; pointer-events: none; }
        @media (prefers-reduced-motion: reduce) { .login-wrap > .box.anc-tarjeta-se-va { animation: none !important; } }
        /* 🔄 Ronda 334 (a pedido: "que esas páginas del cliente tengan la misma animación del logo de la barra de arriba y del pie de
           página"): el logo de Iniciar sesión, Registrarse y Recuperar contraseña da el MISMO giro con la onda (logoBarraGiro /
           logoBarraOnda, de arriba). La onda va en verde porque la tarjeta es clara (la de la barra es blanca sobre verde). Con
           "reducir movimiento", quieto (igual que la barra). */
        .cli-logo-ingreso { position: relative; width: 72px; height: 72px; margin: 0 auto 16px auto; display: flex; align-items: center; justify-content: center; }
        .cli-logo-ingreso::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(27,94,32,0.6); opacity: 0; pointer-events: none; animation: logoBarraOnda 4s ease-out infinite; }
        .cli-logo-ingreso img { width: 100%; height: 100%; object-fit: contain; margin: 0; animation: logoBarraGiro 4s ease-in-out infinite; }
        @media (prefers-reduced-motion: reduce) { .cli-logo-ingreso::after, .cli-logo-ingreso img { animation: none !important; } }
        /* 🖱️ Ronda 289 (a pedido): TODAS las barras de desplazamiento de la tienda como la de la ventana "Arma tu combo": delgadas,
           verde suave y sin fondo (también la de la página). Las que estaban escondidas a propósito siguen escondidas. */
        * { scrollbar-width: thin; scrollbar-color: rgba(27,94,32,0.35) transparent; }
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(27,94,32,0.35); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(27,94,32,0.55); }

        /* 📰🎬 Ronda 322: Tutoriales y Blog en la barra de arriba (ver Ronda 324 aquí abajo). */
        /* 🧭 Ronda 324 (a pedido): Tutoriales y Blog salen en todas las pantallas de computador (antes se escondían por debajo
           de 1360 px y un invitado no tenía cómo llegar). Para que quepan: hasta 1360 px los botones van más juntos y esos dos
           solo con ícono; hasta 1100 px TODOS solo con ícono (antes, en ~800 px, el texto se partía y "Registrarse" se cortaba).
           El nombre sale al pasar el mouse (title). */
        @media (min-width: 769px) and (max-width: 1360px) {
            .client-nav-link { padding: 8px 10px; }
            .client-nav-link-ancha .client-nav-texto { display: none; }
        }
        @media (min-width: 769px) and (max-width: 1100px) {
            .client-nav-link { padding: 8px 12px; font-size: 15px; }
            .client-nav-link .client-nav-texto { display: none; }
            .client-profile-nombre { max-width: 90px; }
        }
        @media (max-width: 768px) { .client-profile-nombre { max-width: 110px; } } /* en el celular, con el carrito, tampoco se sale */