/* Manza's Bot — capa global (2026-10-09): fondo por hora del día + barra de navegación nueva, en todas las páginas.
   Lo carga manza-global.js. Todo va con prefijo mg- / .fondo-global para no chocar con el CSS de cada página. */
:root{ --mg-fg:#f6efe4; --mg-muted:#d8c9b8; --mg-amber:#ffb347; --mg-ember:#ff6a3d; --mg-vidrio:rgba(26,16,14,.46); --mg-borde:rgba(255,230,190,.16); }
/* la hora del día retiñe los acentos del sitio (mismos tokens HSL que ya usan las páginas) */
:root[data-hora="amanecer"]{ --gold-2:22 100% 80%; --gold:340 78% 72%; --apple-2:346 88% 68%; --apple:338 68% 54%; --leaf:150 36% 48%; --wv-a:#ffd2b8; --wv-b:#ff7eb0; --mg-amber:#ff9ec4; --mg-ember:#ff6e9c; }
:root[data-hora="dia"]{ --gold-2:46 100% 62%; --gold:38 95% 55%; --apple-2:8 82% 56%; --apple:4 70% 46%; --leaf:122 46% 42%; --wv-a:#ffd34a; --wv-b:#ff5a4d; --mg-amber:#ffb347; --mg-ember:#ff6a3d; }
:root[data-hora="noche"]{ --gold-2:197 100% 80%; --gold:204 92% 66%; --apple-2:212 92% 68%; --apple:222 78% 56%; --leaf:188 45% 46%; --wv-a:#c4ecff; --wv-b:#4aa8ff; --mg-amber:#8fd6ff; --mg-ember:#4aa8ff; }

/* ---- fondo ---- */
.fondo-global{position:fixed;inset:0;z-index:-20;background:#0c0707;filter:brightness(.26) saturate(.95) blur(7px);transform:scale(1.04);transition:filter 1.6s ease;overflow:hidden;pointer-events:none}
.fondo-global .fg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s ease}
:root[data-hora="amanecer"] .fg-amanecer,:root[data-hora="dia"] .fg-dia,:root[data-hora="noche"] .fg-noche{opacity:1}
:root[data-hora="amanecer"] .fondo-global{filter:brightness(.24) saturate(.95) blur(7px)}
:root[data-hora="dia"] .fondo-global{filter:brightness(.27) saturate(.95) blur(7px)}
:root[data-hora="noche"] .fondo-global{filter:brightness(.3) saturate(.95) blur(7px)}
.glow-global{position:fixed;inset:0;z-index:-19;pointer-events:none;background:radial-gradient(900px 560px at 18% 8%,hsl(var(--apple)/.22),transparent 62%),radial-gradient(820px 500px at 84% 4%,hsl(var(--gold)/.18),transparent 60%),radial-gradient(1100px 700px at 50% 100%,hsl(var(--leaf)/.14),transparent 62%)}
/* el video de humo y el resplandor viejos tapaban el fondo nuevo */
html[data-hora] .fixed-video,html[data-hora] body>.glow{display:none!important}

/* ---- barra de navegación ---- */
html.mg-nav-on .nav-float{visibility:hidden;pointer-events:none}
.mg-nav{position:fixed;top:16px;left:50%;translate:-50% 0;width:min(1240px,calc(100% - 232px));z-index:60;display:flex;align-items:center;gap:16px;padding:10px 14px;border-radius:999px;background:var(--mg-vidrio);border:1px solid var(--mg-borde);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);font-family:'Inter',system-ui,sans-serif;transition:background-color .3s ease;animation:mgNavCae .9s cubic-bezier(.23,1,.32,1) both}
.mg-nav.scrolled{background:rgba(22,13,11,.78)}
@keyframes mgNavCae{from{opacity:0;translate:-50% -24px}to{opacity:1;translate:-50% 0}}
.mg-nav,.mg-nav *{box-sizing:border-box}
.mg-nav .marca{display:flex;align-items:center;gap:10px;font:700 17px 'Poppins',system-ui,sans-serif;color:var(--mg-fg);text-decoration:none;white-space:nowrap}
.mg-nav .marca img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));transition:transform .32s cubic-bezier(.23,1,.32,1)}
.mg-nav .marca:hover img{transform:scale(1.1) rotate(-5deg)}
.mg-nav .enlaces{position:relative;list-style:none;margin:0 auto;padding:0;display:flex;gap:4px;align-items:center}
.mg-nav .enlaces a,.mg-nav .nv-util{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;border:0;background:none;color:var(--mg-muted);font:500 15px 'Inter',system-ui,sans-serif;cursor:pointer;text-decoration:none;transition:color .2s ease,transform .16s ease}
.mg-nav .enlaces a:hover,.mg-nav .nv-util:hover{color:var(--mg-fg)}
.mg-nav .enlaces a[aria-current],.mg-nav .nv-util[aria-current]{color:var(--mg-amber)}
.mg-nav .enlaces a:active,.mg-nav .nv-util:active{transform:scale(.96)}
.mg-nav .pildora{position:absolute;left:0;top:50%;height:calc(100% - 4px);width:100px;translate:var(--px,0px) -50%;scale:calc(var(--pw,60) / 100) 1;transform-origin:0 50%;border-radius:999px;background:rgba(255,255,255,.09);transition:translate .5s cubic-bezier(.32,.72,0,1),scale .5s cubic-bezier(.32,.72,0,1),opacity .25s ease;z-index:0;pointer-events:none;opacity:0}
.mg-nav .pildora.on{opacity:1}
.mg-nav .nav-drop{position:relative}
.mg-nav .nav-drop-menu{position:absolute;top:calc(100% + 14px);left:50%;min-width:230px;padding:8px;border-radius:18px;background:rgba(22,13,11,.88);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border:1px solid var(--mg-borde);box-shadow:0 20px 50px rgba(0,0,0,.45);opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-6px) scale(.97);transform-origin:50% 0;transition:opacity .18s ease,transform .22s cubic-bezier(.23,1,.32,1);z-index:70}
.mg-nav .nav-drop.open .nav-drop-menu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1)}
.mg-nav .nav-drop .caret-drop{font-size:11px;transition:transform .25s ease}
.mg-nav .nav-drop.open .caret-drop{transform:rotate(180deg)}
.mg-nav .nav-drop-menu a{display:flex;align-items:center;width:100%;padding:11px 14px;border-radius:12px;font-size:14px;white-space:nowrap;color:var(--mg-muted);text-decoration:none}
.mg-nav .nav-drop-menu a:hover{background:rgba(255,255,255,.09);color:var(--mg-fg)}
.mg-nav .nav-drop-menu .cs-a-label{display:inline-flex;align-items:center;gap:10px}
.mg-nav .nav-drop-menu svg{width:17px;height:17px;flex:none}
.mg-nav .nav-der{display:flex;align-items:center;gap:10px;margin-left:auto}
.mg-nav .enlaces ~ .nav-der{margin-left:0}
.mg-nav .btn-nav,.mg-nav #navRightSlot .btn,.mg-nav #navRightSlot .user-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--mg-borde);background:rgba(255,255,255,.07);color:var(--mg-fg);font:600 14px 'Inter',system-ui,sans-serif;cursor:pointer;box-shadow:none;text-decoration:none;transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .2s ease}
.mg-nav #navRightSlot .btn{padding:11px 18px}
@media (hover:hover){.mg-nav .btn-nav:hover,.mg-nav #navRightSlot .btn:hover,.mg-nav #navRightSlot .user-btn:hover{background:rgba(255,255,255,.14)}}
.mg-nav .btn-nav:active,.mg-nav #navRightSlot .btn:active,.mg-nav #navRightSlot .user-btn:active{transform:scale(.97)}
.mg-nav .btn-nav svg{width:18px;height:18px}
.mg-nav #navRightSlot,.mg-nav #navRightSlot #navRight{display:flex;align-items:center}
.mg-nav #navRightSlot .user-wrap{position:relative}
.mg-nav #navRightSlot .user-btn img{width:26px;height:26px;border-radius:50%;object-fit:cover}
/* el menú del usuario se abre pegado al borde derecho de la barra, sin salirse */
.mg-nav #navRightSlot .user-menu{right:-6px;max-width:calc(100vw - 32px)}
.mg-nav .nv-ctx{display:none;align-items:center}
.mg-nav.ctx-on .enlaces{display:none}
.mg-nav.ctx-on .nv-ctx{display:flex;margin:0 auto}
.mg-nav .nv-ctx a{color:var(--mg-muted);text-decoration:none;font:500 15px 'Inter',system-ui,sans-serif;padding:10px 16px;border-radius:999px}
.mg-nav .nv-ctx a:hover{color:var(--mg-fg);background:rgba(255,255,255,.09)}
.mg-nav .nv-burger{display:none}
.mg-nav .mg-hora svg{display:none}
:root[data-hora="amanecer"] .mg-hora .ic-amanecer,:root[data-hora="dia"] .mg-hora .ic-dia,:root[data-hora="noche"] .mg-hora .ic-noche{display:block}
.mg-nav #navBtnPlantillas{flex:none}
@media (max-width:1100px){.mg-nav .marca span{display:none}}
@media (max-width:860px){
  .mg-nav .enlaces{display:none}
  .mg-nav{padding:8px 10px;gap:10px;width:calc(100% - 20px);top:10px}
  .mg-nav .nv-burger{display:inline-grid;place-items:center;width:40px;height:40px;padding:0}
  .mg-nav .nav-der{margin-left:auto}
}
@media (max-width:420px){.mg-nav #navRightSlot .user-btn{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media (pointer:coarse){.mg-nav .btn-nav,.mg-nav #navRightSlot .btn,.mg-nav #navRightSlot .user-btn{min-height:44px}}
html[data-motion="reduced"] .mg-nav{animation:none}
html[data-motion="reduced"] .fondo-global,html[data-motion="reduced"] .fondo-global .fg,html[data-motion="reduced"] .mg-nav .pildora{transition:none}

/* arriba a la derecha el sitio ya tiene campana y sonido: la barra les deja lugar, y las banderas sobran (el botón EN/ES hace lo mismo) */
html.mg-nav-on .lang-switch{display:none!important}
html.en-landing .mg-nav{width:min(1240px,calc(100% - 156px))}
html.en-landing .mg-nav .mg-hora{display:none}
@media (max-width:1100px){.mg-nav,html.en-landing .mg-nav{width:calc(100% - 150px);left:16px;translate:none}@keyframes mgNavCae{from{opacity:0;translate:0 -24px}to{opacity:1;translate:0 0}}}
@media (max-width:860px){.mg-nav,html.en-landing .mg-nav{width:calc(100% - 112px);left:10px}}

/* botón de la hora en las páginas sin barra (tickets, perfil, ranking...) */
.mg-hora-flota{position:fixed;right:18px;bottom:18px;z-index:61;width:44px;height:44px;padding:0;display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--mg-borde);background:rgba(22,13,11,.55);color:var(--mg-fg);cursor:pointer;-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .2s ease}
.mg-hora-flota:active{transform:scale(.95)}
@media (hover:hover){.mg-hora-flota:hover{background:rgba(255,255,255,.14)}}
.mg-hora-flota svg{width:20px;height:20px;display:none}
:root[data-hora="amanecer"] .mg-hora-flota .ic-amanecer,:root[data-hora="dia"] .mg-hora-flota .ic-dia,:root[data-hora="noche"] .mg-hora-flota .ic-noche{display:block}

/* ================= CELULAR (≤860px): barra mínima + hoja de menú tipo app ================= */
.mg-hoja{position:fixed;inset:0;z-index:200;pointer-events:none}
.mg-hoja[hidden]{display:none}
.mg-hoja-fondo{position:absolute;inset:0;background:rgba(6,4,4,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease}
.mg-hoja-panel{position:absolute;top:0;left:0;bottom:0;width:min(86vw,360px);display:flex;flex-direction:column;background:rgba(20,13,12,.92);-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);border-right:1px solid var(--mg-borde);box-shadow:20px 0 60px rgba(0,0,0,.5);transform:translateX(-102%);transition:transform .34s cubic-bezier(.32,.72,0,1);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);font-family:'Inter',system-ui,sans-serif;color:var(--mg-fg)}
.mg-hoja.abierta{pointer-events:auto}
.mg-hoja.abierta .mg-hoja-fondo{opacity:1}
.mg-hoja.abierta .mg-hoja-panel{transform:none}
.mg-hoja-cab{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px 18px}
.mg-hoja-cab .marca{display:flex;align-items:center;gap:10px;font:700 17px 'Poppins',system-ui,sans-serif;color:var(--mg-fg);text-decoration:none}
.mg-hoja-cab .marca img{width:38px;height:38px;object-fit:contain}
.mg-hoja-x{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--mg-borde);background:rgba(255,255,255,.07);color:var(--mg-fg);cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.mg-hoja-x:active{transform:scale(.94)}
.mg-hoja-x svg{width:20px;height:20px}
.mg-hoja-cuerpo{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 12px 24px;display:flex;flex-direction:column;gap:14px}
.mg-lista,.mg-umenu,.mg-sub{display:flex;flex-direction:column;gap:2px}
.mg-sub[hidden]{display:none}
.mg-sub{margin:0 0 4px 14px;padding-left:10px;border-left:1px solid var(--mg-borde)}
.mg-fila{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:50px;padding:12px 14px;border:0;border-radius:14px;background:none;color:var(--mg-fg);font:600 16px 'Inter',system-ui,sans-serif;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .18s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.mg-fila:active{background:rgba(255,255,255,.1);transform:scale(.98)}
.mg-fila-sub{min-height:46px;font-weight:500;font-size:15px;color:var(--mg-muted)}
.mg-fila .caret-drop{font-size:12px;color:var(--mg-muted);transition:transform .25s ease}
.mg-fila[aria-expanded="true"] .caret-drop{transform:rotate(180deg)}
.mg-ext{color:var(--mg-muted)}
.mg-umenu .mg-fila{font-weight:500;font-size:15px;color:var(--mg-muted)}
.mg-umenu .mg-fila.danger{color:#ff8a80}
.mg-umenu hr{border:0;border-top:1px solid var(--mg-borde);margin:6px 8px}
.mg-umenu svg{width:18px;height:18px;flex:none}
.mg-umenu .cs-a-label{display:inline-flex;align-items:center;gap:10px}
.mg-grupo{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--mg-borde)}
.mg-grupo-t{padding:0 8px;font:600 12px 'Inter',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--mg-muted)}
.mg-seg{display:flex;gap:6px;padding:4px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--mg-borde)}
.mg-seg button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;padding:8px 6px;border:0;border-radius:12px;background:none;color:var(--mg-muted);font:600 13px 'Inter',system-ui,sans-serif;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.mg-seg button svg{width:22px;height:22px}
.mg-seg button.on{background:rgba(255,255,255,.14);color:var(--mg-amber)}
.mg-seg button:active{transform:scale(.96)}
.mg-seg-2 button{min-height:46px;flex-direction:row}
.mg-user{display:flex;align-items:center;gap:12px;padding:8px 14px;font:700 16px 'Inter',system-ui,sans-serif}
.mg-user img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.mg-entrar{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border:0;border-radius:16px;background:linear-gradient(135deg,#ffd66b,#ff9a3d);color:#2a1408;font:700 16px 'Inter',system-ui,sans-serif;cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.mg-entrar:active{transform:scale(.97)}
html.mg-hoja-on{overflow:hidden}
@media (min-width:861px){.mg-hoja{display:none!important}}
@media (prefers-reduced-motion:reduce){.mg-hoja-panel,.mg-hoja-fondo{transition:none}}
html[data-motion="reduced"] .mg-hoja-panel,html[data-motion="reduced"] .mg-hoja-fondo{transition:none}

@media (max-width:860px){
  html,body{overflow-x:clip}
  /* la campana y el sonido pasan a la hoja del menú */
  html.mg-nav-on .lang-switch-wrap{display:none!important}
  .mg-nav,html.en-landing .mg-nav{top:max(10px,env(safe-area-inset-top,0px));left:12px;right:12px;width:auto;translate:none;padding:6px 8px;gap:8px;animation:none}
  .mg-nav .enlaces,.mg-nav .nv-ctx,.mg-nav .mg-hora,.mg-nav #idiomaInicio{display:none!important}
  .mg-nav .marca{margin-right:auto}
  .mg-nav .marca span{display:inline;font-size:16px}
  .mg-nav .marca img{width:34px;height:34px}
  .mg-nav .nav-der{margin-left:auto;gap:8px}
  .mg-nav .nv-burger{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%}
  .mg-nav .nv-burger svg{width:22px;height:22px}
  .mg-nav #navRightSlot .btn{padding:0 16px;min-height:44px;font-size:14px}
  .mg-nav #navRightSlot .btn .arrow{display:none}
  .mg-nav #navRightSlot .user-btn{padding:0;width:44px;height:44px;justify-content:center;border-radius:50%}
  .mg-nav #navRightSlot .user-btn .caret{display:none}
  .mg-nav #navRightSlot .user-btn img{width:36px;height:36px}
  .mg-nav #navRightSlot .user-btn{font-size:0}
  .mg-nav #navBtnPlantillas{display:none!important}
  .hora-fija{display:none}
  .mg-hora-flota{width:48px;height:48px}
}
@media (max-width:360px){.mg-nav .marca span{display:none}}

/* menú del usuario: mismo estilo en todas las páginas */
.mg-nav #navRightSlot .user-menu{width:250px;padding:10px;background:rgba(22,13,11,.92);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border:1px solid var(--mg-borde);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.mg-nav #navRightSlot .user-menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;font:500 14px 'Inter',system-ui,sans-serif;color:var(--mg-muted);text-decoration:none;transition:background-color .18s ease,color .18s ease}
.mg-nav #navRightSlot .user-menu a:hover{background:rgba(255,255,255,.09);color:var(--mg-fg)}
.mg-nav #navRightSlot .user-menu a.danger{color:#ff8a80}
.mg-nav #navRightSlot .user-menu .cs-a-label{display:inline-flex;align-items:center;gap:10px}
.mg-nav #navRightSlot .user-menu svg{width:17px;height:17px;flex:none}
.mg-nav #navRightSlot .user-menu hr{border:0;border-top:1px solid var(--mg-borde);margin:6px 8px}
.mg-nav #navRightSlot .user-menu-label{padding:10px 12px 4px;font:600 11px 'Inter',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--mg-muted)}