/* ============ Sistema de temáticas ============ */

/* --- Logo temático más grande (tiene márgenes decorativos) --- */
body.theme-logo-wide .brand-logo{width:305px;height:104px;transform:translateX(4px)}
body.theme-logo-wide .loader-logo{height:300px}
body.theme-logo-wide .loader-logo img{width:500px}
body.theme-logo-wide .footer-logo{width:min(300px,72vw);height:auto}
body.theme-logo-wide .admin-logo img{width:170px;height:70px}
body.theme-logo-wide .login-card .admin-logo{height:160px}
body.theme-logo-wide .login-card .admin-logo img{width:340px;height:160px}
body.theme-logo-wide .menu-logo{width:190px!important;height:auto!important}
body.theme-logo-wide .maintenance-logo{width:min(380px,80vw);height:auto}
@media(max-width:800px){
  body.theme-logo-wide .brand-logo{width:225px;height:80px;transform:translateX(2px)}
  body.theme-logo-wide .loader-logo{height:225px}
  body.theme-logo-wide .loader-logo img{width:360px}
  body.theme-logo-wide .footer-logo{width:min(250px,66vw)}
  body.theme-logo-wide .admin-logo img{width:150px;height:62px}
  body.theme-logo-wide .login-card .admin-logo{height:130px}
  body.theme-logo-wide .login-card .admin-logo img{width:280px;height:130px}
}

/* --- Acentos de color por temática --- */
body.theme-halloween .topline{background:linear-gradient(90deg,#160423,#3d0f56);color:#fff}
body.theme-halloween .header{background:linear-gradient(115deg,#1a0630,#46207a);color:#f3e8ff}
body.theme-halloween .head-actions,body.theme-halloween .head-actions a{color:#f3e8ff}
body.theme-halloween .icon-button{color:#f3e8ff}
body.theme-halloween .cart-count{background:#ffa62b;color:#2b0b45}
body.theme-halloween .menu-toggle{color:#f3e8ff;background:rgba(255,255,255,.14)}
body.theme-halloween .menu-toggle:hover{background:rgba(255,255,255,.3)}
body.theme-halloween .menu-drawer{background:linear-gradient(180deg,#1c0733,#2c0f4d);color:#f3e8ff}
body.theme-halloween .menu-drawer a{color:#f3e8ff!important}
body.theme-halloween .menu-drawer .menu-close{color:#f3e8ff}
body.theme-halloween .footer{background:#1d0b2e;color:#e9dcff}
body.theme-halloween .footer .footer-text,body.theme-halloween .footer .contact-list li,body.theme-halloween .footer .contact-list a{color:#c9b3e6}
body.theme-halloween .footer .contact-title{color:#ffa62b}
body.theme-halloween .footer .social a{background:#2d1445;color:#ffa62b}
body.theme-halloween .footer .copyright{border-color:#3c2060;color:#8f76b8}
body.theme-mode-dark .cart-drawer{background:linear-gradient(180deg,#1d0b2e,#2c0f4d);color:#f3e8ff;box-shadow:-15px 0 45px rgba(0,0,0,.55)}
body.theme-mode-dark .drawer-head{border-bottom:1px solid rgba(255,255,255,.14)}
body.theme-mode-dark .drawer-head h2{color:#ffa62b}
body.theme-mode-dark .drawer-head .close{background:#ffa62b;color:#2b0b45;box-shadow:0 4px 12px rgba(255,166,43,.35)}
body.theme-mode-dark .drawer-head .close:hover{box-shadow:0 6px 16px rgba(255,166,43,.55)}
body.theme-mode-dark .cart-items .empty{color:#c9b3e6}
body.theme-mode-dark .cart-item{border-bottom:1px solid rgba(255,255,255,.14)}
body.theme-mode-dark .cart-item img{border-color:rgba(255,255,255,.2)}
body.theme-mode-dark .cart-item strong,body.theme-mode-dark .cart-item-info .cart-item-price{color:#f3e8ff}
body.theme-mode-dark .cart-item-info .cart-item-subtotal{color:#ffa62b}
body.theme-mode-dark .cart-item .remove{color:#c9b3e6}
body.theme-mode-dark .cart-item .remove:hover{background:#2d1445;color:#ffa62b}
body.theme-mode-dark .cart-qty{border-color:rgba(255,255,255,.2)}
body.theme-mode-dark .cart-qty button{background:#2d1445;color:#f3e8ff}
body.theme-mode-dark .cart-qty button:hover{background:#3d2060}
body.theme-mode-dark .cart-qty span{color:#f3e8ff}
body.theme-mode-dark .cart-trust{background:#2d1445;color:#c9b3e6;border-top:1px solid rgba(255,255,255,.14)}
body.theme-mode-dark .drawer-total{border-top:1px solid rgba(255,255,255,.14);color:#f3e8ff}
body.theme-mode-dark .cart-drawer .primary{background:#ffa62b;color:#2b0b45;box-shadow:0 7px 0 #8e4b0f}
body.theme-mode-dark .cart-drawer .primary:hover{box-shadow:0 5px 0 #8e4b0f}
body.theme-mode-dark .cart-drawer .primary:disabled{background:#3d2060;color:#8f76b8;cursor:not-allowed;box-shadow:none}
body.theme-halloween{background:#fdf9ff}
body.theme-navidad .topline{background:linear-gradient(90deg,#7a0b0b,#14532d);color:#fff}
body.theme-navidad .header{background:linear-gradient(115deg,#8f1010,#17603a);color:#fff}
body.theme-navidad .head-actions,body.theme-navidad .head-actions a{color:#fff}
body.theme-navidad .icon-button{color:#fff}
body.theme-navidad .cart-count{background:#ffd76a;color:#5b1400}
body.theme-navidad .menu-toggle{color:#fff;background:rgba(255,255,255,.16)}
body.theme-navidad .footer{background:#f3e4d0}
body.theme-mayo25 .topline{background:linear-gradient(90deg,#75aadb,#fff,#75aadb);color:#12406e}
body.theme-mayo25 .header{background:linear-gradient(115deg,#3d7bb8,#75aadb);color:#fff}
body.theme-mayo25 .head-actions,body.theme-mayo25 .head-actions a{color:#fff}
body.theme-mayo25 .icon-button{color:#fff}
body.theme-mayo25 .menu-toggle{color:#fff;background:rgba(255,255,255,.2)}
body.theme-reyes .topline{background:linear-gradient(90deg,#241243,#5b2c8f);color:#fff}
body.theme-reyes .header{background:linear-gradient(115deg,#2c1a4d,#6b3fa0);color:#f3ecff}
body.theme-reyes .head-actions,body.theme-reyes .head-actions a{color:#f3ecff}
body.theme-reyes .icon-button{color:#f3ecff}
body.theme-reyes .cart-count{background:#ffd76a;color:#3a1c00}
body.theme-reyes .menu-toggle{color:#f3ecff;background:rgba(255,255,255,.14)}
body.theme-anonuevo .topline{background:linear-gradient(90deg,#04041f,#23235e);color:#fff}
body.theme-anonuevo .header{background:linear-gradient(115deg,#101033,#3a3a8f);color:#f0f0ff}
body.theme-anonuevo .head-actions,body.theme-anonuevo .head-actions a{color:#f0f0ff}
body.theme-anonuevo .icon-button{color:#f0f0ff}
body.theme-anonuevo .cart-count{background:#ffe28a;color:#23234a}
body.theme-anonuevo .menu-toggle{color:#f0f0ff;background:rgba(255,255,255,.14)}
body.theme-anonuevo .footer{background:#e8e8f5}

/* --- Banner temático (barra fina) --- */
.theme-banner{position:relative;height:44px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,var(--tb-c1,#1b0526),var(--tb-c2,#5b1a7a),var(--tb-c1,#1b0526));background-size:200% 100%;animation:tb-slide 14s linear infinite;width:100%;max-width:none;margin:0;border-radius:0;border-top:1px solid #000;border-bottom:1px solid #000;box-shadow:none}
.theme-banner.has-bg{background:var(--tb-c1,#1b0526) var(--tb-img) center/cover no-repeat}
.theme-banner.has-bg::before{content:'';position:absolute;inset:0;background:rgba(10,0,20,.18)}
.theme-banner-text{position:relative;z-index:1;font-size:clamp(20px,4.5vw,28px);line-height:1;color:var(--tb-color,#ffa62b);text-shadow:0 2px 10px rgba(0,0,0,.55);white-space:nowrap;padding:0 14px;overflow:hidden;text-overflow:ellipsis}
.theme-banner-img{position:relative;z-index:1;height:34px;width:auto;max-width:92vw;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
@keyframes tb-slide{from{background-position:0% 0}to{background-position:200% 0}}
@media(max-width:800px){.theme-banner{height:38px}.theme-banner-text{font-size:clamp(18px,5vw,24px)}.theme-banner-img{height:28px}}

/* Modo oscuro: lo claro pasa a oscuro y viceversa */
body.theme-mode-dark{background:#0a0318}
body.theme-mode-dark .page{filter:invert(1)}
body.theme-mode-dark .page img,body.theme-mode-dark .page svg,body.theme-mode-dark .page video{filter:invert(1)}

/* Logo temático centrado en la página (corrige el desfase de la grilla auto|1fr|auto) */
@media(min-width:801px){
body.theme-on .head-main{grid-template-columns:1fr auto 1fr}
body.theme-on .head-main .menu-toggle{justify-self:start}
body.theme-on .head-main .weather-widget{justify-self:start}
body.theme-on .head-main .brand{justify-self:center}
body.theme-on .head-main .head-actions{justify-self:end}
}

/* Fuentes temáticas animadas */
.tfont-creepster{font-family:'Creepster',cursive;animation:tfont-swing 3.4s ease-in-out infinite}
.tfont-nosifer{font-family:'Nosifer',cursive;animation:tfont-pulse 2.6s ease-in-out infinite}
.tfont-eater{font-family:'Eater',cursive;animation:tfont-flicker 3s linear infinite}
.tfont-butcherman{font-family:'Butcherman',cursive;animation:tfont-shake .5s ease-in-out infinite}
.tfont-mountains{font-family:'Mountains of Christmas',cursive;animation:tfont-glow 3s ease-in-out infinite}
.tfont-monoton{font-family:'Monoton',cursive;animation:tfont-neon 1.6s ease-in-out infinite alternate}
.tfont-rubikglitch{font-family:'Rubik Glitch',system-ui;animation:tfont-flicker 2.2s linear infinite}
.tfont-pirata{font-family:'Pirata One',cursive;animation:tfont-swing 4s ease-in-out infinite}
.tfont-emilyscandy{font-family:'Emilys Candy',cursive;animation:tfont-bounce 2.8s ease-in-out infinite}
.tfont-mystery{font-family:'Mystery Quest',cursive;animation:tfont-glow 3.6s ease-in-out infinite}
@keyframes tfont-swing{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@keyframes tfont-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.045);opacity:.92}}
@keyframes tfont-flicker{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.55}94%{opacity:1}96%{opacity:.7}97%{opacity:1}}
@keyframes tfont-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.5px)}75%{transform:translateX(1.5px)}}
@keyframes tfont-glow{0%,100%{text-shadow:0 0 8px rgba(255,220,120,.35),0 2px 10px rgba(0,0,0,.55)}50%{text-shadow:0 0 22px rgba(255,220,120,.85),0 2px 10px rgba(0,0,0,.55)}}
@keyframes tfont-neon{from{text-shadow:0 0 6px currentColor,0 0 18px currentColor}to{text-shadow:0 0 14px currentColor,0 0 38px currentColor}}
@keyframes tfont-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* --- Contenedor de efectos --- */
#theme-fx{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
body.theme-on .topline,body.theme-on .theme-banner,body.theme-on .page,body.theme-on .map-section,body.theme-on .footer{position:relative;z-index:1}
body.theme-on .loader{z-index:200}
body.theme-halloween .topline{display:none}
body.theme-halloween .header{position:fixed;top:0;left:0;right:0;z-index:100}
body.theme-halloween .theme-banner{margin-top:91px}
.fx{position:fixed;display:inline-block;user-select:none;will-change:transform,opacity;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}

/* Vuelo horizontal (murciélagos, trineo) */
.fx-fly{animation:fx-fly var(--dur,14s) linear var(--delay,0s) infinite}
@keyframes fx-fly{
  0%{transform:translate(-12vw,var(--y,20vh)) rotate(-6deg);opacity:0}
  6%{opacity:1}
  25%{transform:translate(20vw,calc(var(--y,20vh) - 7vh)) rotate(5deg)}
  50%{transform:translate(52vw,calc(var(--y,20vh) + 4vh)) rotate(-5deg)}
  75%{transform:translate(80vw,calc(var(--y,20vh) - 5vh)) rotate(4deg)}
  94%{opacity:1}
  100%{transform:translate(112vw,calc(var(--y,20vh) + 2vh)) rotate(-6deg);opacity:0}
}
.fx-fly-back{animation-name:fx-fly-back}
@keyframes fx-fly-back{
  0%{transform:translate(112vw,var(--y,30vh)) scaleX(-1) rotate(-6deg);opacity:0}
  6%{opacity:1}
  25%{transform:translate(80vw,calc(var(--y,30vh) + 5vh)) scaleX(-1) rotate(5deg)}
  50%{transform:translate(48vw,calc(var(--y,30vh) - 5vh)) scaleX(-1) rotate(-5deg)}
  75%{transform:translate(20vw,calc(var(--y,30vh) + 6vh)) scaleX(-1) rotate(4deg)}
  94%{opacity:1}
  100%{transform:translate(-12vw,var(--y,30vh)) scaleX(-1) rotate(-6deg);opacity:0}
}

/* Caída (nieve, confeti, cintas, regalos, estrellas) */
.fx-fall{top:-8vh;animation:fx-fall var(--dur,10s) linear var(--delay,0s) infinite}
@keyframes fx-fall{
  0%{transform:translate(0,0) rotate(0deg);opacity:0}
  8%{opacity:var(--op,1)}
  50%{transform:translate(var(--sway,4vw),55vh) rotate(190deg)}
  92%{opacity:var(--op,1)}
  100%{transform:translate(calc(var(--sway,4vw) * -1),112vh) rotate(360deg);opacity:0}
}

/* Ascenso flotante (fantasmas, calabazas, burbujas, coronas, banderas) */
.fx-rise{bottom:-14vh;animation:fx-rise var(--dur,16s) ease-in-out var(--delay,0s) infinite}
@keyframes fx-rise{
  0%{transform:translate(0,0) rotate(-4deg);opacity:0}
  10%{opacity:var(--op,.92)}
  35%{transform:translate(var(--sway,5vw),-35vh) rotate(4deg)}
  60%{transform:translate(calc(var(--sway,5vw) * -1),-60vh) rotate(-4deg)}
  85%{transform:translate(var(--sway,5vw),-85vh) rotate(3deg);opacity:var(--op,.92)}
  100%{transform:translate(0,-112vh) rotate(-4deg);opacity:0}
}

/* Destellos */
.fx-twinkle{animation:fx-twinkle var(--dur,2.4s) ease-in-out var(--delay,0s) infinite}
@keyframes fx-twinkle{0%,100%{transform:scale(.4) rotate(0deg);opacity:.15}50%{transform:scale(1.15) rotate(25deg);opacity:1}}

/* Telarañas en las esquinas */
.fx-web{position:fixed;z-index:31;pointer-events:none;font-size:64px;opacity:.8;filter:grayscale(.35) drop-shadow(0 2px 5px rgba(0,0,0,.3))}
.fx-web-tl{top:0;left:0}
.fx-web-tr{top:0;right:0;transform:scaleX(-1)}
.fx-web-bl{bottom:0;left:0;transform:scaleY(-1)}
.fx-web-br{bottom:0;right:0;transform:scale(-1)}
.fx-spider{position:fixed;top:0;left:var(--x,70%);z-index:31;pointer-events:none;display:flex;flex-direction:column;align-items:center;width:30px;animation:fx-spider var(--dur,10s) ease-in-out var(--delay,0s) infinite}
.fx-spider::before{content:'';width:1.5px;flex:1 1 auto;background:linear-gradient(#777,#444)}
.fx-spider span{font-size:22px}
@keyframes fx-spider{0%,100%{height:5vh}45%,55%{height:34vh}}

/* Niebla */
.fx-fog{position:fixed;left:-25vw;right:-25vw;bottom:0;height:26vh;z-index:30;pointer-events:none;background:radial-gradient(ellipse at 50% 100%,rgba(190,170,220,.35),transparent 70%);filter:blur(12px);animation:fx-fog 18s ease-in-out infinite alternate}
.fx-fog.f2{height:20vh;animation-duration:26s;animation-delay:-8s;background:radial-gradient(ellipse at 60% 100%,rgba(120,90,160,.3),transparent 70%)}
@keyframes fx-fog{from{transform:translateX(-6vw) scaleY(1)}to{transform:translateX(6vw) scaleY(1.15)}}

/* Luces navideñas */
.fx-light{position:fixed;top:calc(var(--top,0px));left:var(--x);width:9px;height:13px;border-radius:50% 50% 45% 45%;z-index:31;pointer-events:none;background:var(--c,#ff4747);box-shadow:0 0 12px 3px var(--c,#ff4747);animation:fx-light var(--dur,1.4s) ease-in-out var(--delay,0s) infinite}
@keyframes fx-light{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.8)}}

/* Burbujas de champagne (circulitos CSS) */
.fx-bubble{position:fixed;bottom:-6vh;left:var(--x);width:var(--s,10px);height:var(--s,10px);border-radius:50%;z-index:30;pointer-events:none;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(255,230,150,.35) 60%,rgba(255,220,120,.12));border:1px solid rgba(255,240,190,.5);animation:fx-bubble var(--dur,7s) linear var(--delay,0s) infinite}
@keyframes fx-bubble{
  0%{transform:translate(0,0);opacity:0}
  12%{opacity:.9}
  50%{transform:translate(var(--sway,3vw),-55vh)}
  100%{transform:translate(calc(var(--sway,3vw) * -.6),-108vh);opacity:0}
}

/* Confeti (rectangulitos CSS) */
.fx-confetto{position:fixed;top:-4vh;left:var(--x);width:9px;height:15px;z-index:30;pointer-events:none;background:var(--c,#ffcf3f);border-radius:2px;animation:fx-confetto var(--dur,8s) linear var(--delay,0s) infinite}
@keyframes fx-confetto{
  0%{transform:translate(0,0) rotate(0deg) rotateY(0deg);opacity:0}
  8%{opacity:1}
  50%{transform:translate(var(--sway,5vw),55vh) rotate(200deg) rotateY(360deg)}
  100%{transform:translate(calc(var(--sway,5vw) * -1),112vh) rotate(420deg) rotateY(720deg);opacity:0}
}

/* Cintas 25 de mayo */
.fx-ribbon{position:fixed;top:-6vh;left:var(--x);width:7px;height:26px;z-index:30;pointer-events:none;background:linear-gradient(180deg,#75aadb 0 40%,#fff 40% 60%,#75aadb 60% 100%);border-radius:3px;animation:fx-ribbon var(--dur,9s) ease-in-out var(--delay,0s) infinite}
@keyframes fx-ribbon{
  0%{transform:translate(0,0) rotate(-25deg);opacity:0}
  10%{opacity:.95}
  50%{transform:translate(var(--sway,6vw),55vh) rotate(25deg)}
  100%{transform:translate(calc(var(--sway,6vw) * -1),112vh) rotate(-25deg);opacity:0}
}

/* Sol de Mayo girando en la esquina */
.fx-sun{position:fixed;z-index:30;pointer-events:none;font-size:56px;animation:fx-sun 22s linear infinite;opacity:.85;filter:drop-shadow(0 0 14px rgba(246,181,0,.65))}
@keyframes fx-sun{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Copos de nieve CSS */
.fx-flake{position:fixed;top:-4vh;left:var(--x);width:var(--s,7px);height:var(--s,7px);border-radius:50%;z-index:30;pointer-events:none;background:#fff;opacity:.9;box-shadow:0 0 6px rgba(255,255,255,.8);animation:fx-flake var(--dur,11s) linear var(--delay,0s) infinite}
@keyframes fx-flake{
  0%{transform:translate(0,0)}
  50%{transform:translate(var(--sway,4vw),55vh)}
  100%{transform:translate(calc(var(--sway,4vw) * -.5),110vh)}
}

/* Canvas de fuegos artificiales */
.fx-fireworks{position:fixed;inset:0;width:100%;height:100%;z-index:29;pointer-events:none}

/* --- Loader temático --- */
.loader{overflow:hidden}
.loader-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.loader-fx .fx{position:absolute}
.loader-box{position:relative;z-index:2}
.loader-theme-halloween{background:radial-gradient(circle at 50% 32%,#43155f,#14041f 72%)}
.loader-theme-halloween .progress-track{background:rgba(255,255,255,.14)}
.loader-theme-halloween .progress-bar{background:linear-gradient(90deg,#ff7518,#ffb347);box-shadow:0 0 12px rgba(255,140,20,.8)}
.loader-theme-halloween .loader-percent{color:#ffa62b}
.loader-theme-halloween .loader-logo{filter:drop-shadow(0 0 30px rgba(255,117,24,.55))}
.loader-theme-navidad{background:radial-gradient(circle at 50% 32%,#7a1010,#0c2b1a 75%)}
.loader-theme-navidad .progress-bar{background:linear-gradient(90deg,#e04040,#3fbf72);box-shadow:0 0 12px rgba(255,80,80,.7)}
.loader-theme-mayo25{background:radial-gradient(circle at 50% 32%,#6aa6d8,#173c63 75%)}
.loader-theme-mayo25 .progress-bar{background:linear-gradient(90deg,#f6b500,#75aadb);box-shadow:0 0 12px rgba(246,181,0,.7)}
.loader-theme-reyes{background:radial-gradient(circle at 50% 32%,#4b2a86,#160b33 75%)}
.loader-theme-reyes .progress-bar{background:linear-gradient(90deg,#ffd76a,#a06ce8);box-shadow:0 0 12px rgba(255,215,106,.7)}
.loader-theme-anonuevo{background:radial-gradient(circle at 50% 32%,#2b2b6e,#060620 75%)}
.loader-theme-anonuevo .progress-bar{background:linear-gradient(90deg,#ffe28a,#8ab4ff);box-shadow:0 0 12px rgba(255,226,138,.7)}

@media(prefers-reduced-motion:reduce){
  #theme-fx,.loader-fx,.fx-fog,.fx-web,.fx-spider,.fx-light,.fx-sun{display:none!important}
  .theme-banner,.theme-banner-text{animation:none!important}
}