/* comun.css — lo que estaba repetido dentro de cada pagina (19-8-2026)
   ------------------------------------------------------------------
   Estos dos bloques viajaban dentro del HTML de 1.043 paginas: 5,4 MB de
   exactamente el mismo CSS. Aqui se bajan UNA vez y quedan cacheados un ano
   (asi lo dice el .htaccess para los .css), mientras que el HTML se sirve con
   no-cache y por tanto se rebajaba entero en cada visita.

   El <link> a este fichero va en el sitio exacto donde estaban los <style>,
   justo antes de </head>, para que el orden de la cascada no cambie.

   Si se toca algo de aqui, subir el ?v= del <link> en las paginas Y la
   version de sw.js, o los que ya tengan el fichero viejo no veran el cambio. */

/* ---------- botonera de redes del pie ---------- */
.ms-redes{margin:22px 0 6px;text-align:center;line-height:1}.ms-redes .ms-redes-txt{display:block;font-size:13px;color:#a9b4d6;margin-bottom:11px;letter-spacing:.6px;font-weight:600}footer .ms-redes a,.ms-redes a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin:0 7px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#a9b4d6;text-decoration:none;box-sizing:border-box;transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease,color .25s ease}.ms-redes a svg{width:20px;height:20px;fill:currentColor;display:block}footer .ms-redes a:hover,footer .ms-redes a:focus-visible{transform:translateY(-3px);color:#fff}footer .ms-redes a.ms-ig:hover,footer .ms-redes a.ms-ig:focus-visible{background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888);border-color:transparent;box-shadow:0 6px 18px rgba(220,39,67,.45)}footer .ms-redes a.ms-tt:hover,footer .ms-redes a.ms-tt:focus-visible{background:#010101;border-color:#25f4ee;box-shadow:0 6px 18px rgba(37,244,238,.35)}.ms-footer-brand .ms-redes{text-align:left;margin:16px 0 0}.ms-footer-brand .ms-redes a{margin:0 12px 0 0}body.tema-claro .ms-redes .ms-redes-txt{color:#475569}body.tema-claro footer .ms-redes a{border-color:rgba(0,0,0,.14);background:rgba(0,0,0,.05);color:#475569}@media(max-width:480px){footer .ms-redes a,.ms-redes a{width:38px;height:38px}.ms-redes a svg{width:18px;height:18px}}

/* ---------- bloque de donacion en bitcoin ---------- */
.ms-btc{margin:20px auto 2px;max-width:520px;text-align:center;line-height:1.5}
.ms-btc-abre{display:inline-flex;align-items:center;gap:9px;padding:9px 17px 9px 12px;border-radius:999px;cursor:pointer;
 font:600 13.5px/1 inherit;color:#f9c56a;background:linear-gradient(180deg,rgba(247,147,26,.16),rgba(247,147,26,.07));
 border:1px solid rgba(247,147,26,.42);box-shadow:0 2px 12px rgba(247,147,26,.10);
 transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease}
.ms-btc-abre:hover,.ms-btc-abre:focus-visible{transform:translateY(-2px);color:#ffd79a;border-color:rgba(247,147,26,.8);
 background:linear-gradient(180deg,rgba(247,147,26,.26),rgba(247,147,26,.12));box-shadow:0 8px 22px rgba(247,147,26,.28)}
.ms-btc-abre:focus-visible{outline:2px solid #f7931a;outline-offset:3px}
.ms-btc-moneda{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;
 background:radial-gradient(circle at 34% 26%,#ffb95e,#f7931a 62%,#c9720c);box-shadow:0 1px 4px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.5);flex:none}
.ms-btc-b{width:16px;height:16px;fill:#fff;display:block}
.ms-btc-flecha{font-size:10px;opacity:.8;transition:transform .25s ease}
.ms-btc.abierto .ms-btc-flecha{transform:rotate(180deg)}
.ms-btc-panel{margin-top:13px;padding:17px 16px 14px;border-radius:16px;text-align:center;
 background:linear-gradient(180deg,rgba(247,147,26,.10),rgba(15,23,42,.28));
 border:1px solid rgba(247,147,26,.30);box-shadow:0 12px 30px rgba(0,0,0,.34);animation:msBtcEntra .3s ease}
@keyframes msBtcEntra{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.ms-btc-lema{margin:0 0 13px;font-size:13px;color:#cbd5e1}
.ms-btc-qr{display:block;width:150px;height:150px;margin:0 auto 13px;padding:8px;border-radius:12px;background:#fff;
 box-shadow:0 4px 14px rgba(0,0,0,.35)}
.ms-btc-fila{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:stretch}
.ms-btc-dir{flex:1 1 250px;min-width:0;padding:9px 11px;border-radius:10px;font:600 12.5px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 color:#f1f5f9;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.16);word-break:break-all;user-select:all;-webkit-user-select:all}
.ms-btc-copia{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border:none;border-radius:10px;cursor:pointer;
 font:700 13px/1 inherit;color:#3b1d00;background:linear-gradient(180deg,#fdb44b,#f7931a);box-shadow:0 3px 10px rgba(247,147,26,.35);
 transition:transform .18s ease,filter .18s ease,background .18s ease}
.ms-btc-copia:hover{transform:translateY(-1px);filter:brightness(1.07)}
.ms-btc-copia:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ms-btc-copia.hecho{background:linear-gradient(180deg,#4ade80,#22c55e);color:#052e14;box-shadow:0 3px 10px rgba(34,197,94,.4)}
.ms-btc-copia svg{width:14px;height:14px;fill:currentColor;display:block}
.ms-btc-copia.hecho .ms-btc-i-copiar{display:none}
.ms-btc-i-ok{display:none}.ms-btc-copia.hecho .ms-btc-i-ok{display:block}
.ms-btc-red{margin:11px 0 0;font-size:11.5px;color:#94a3b8;letter-spacing:.2px}
body.tema-claro .ms-btc-abre{color:#a45a06;background:linear-gradient(180deg,rgba(247,147,26,.16),rgba(247,147,26,.06));border-color:rgba(247,147,26,.5)}
body.tema-claro .ms-btc-abre:hover{color:#7c4204}
body.tema-claro .ms-btc-panel{background:linear-gradient(180deg,rgba(247,147,26,.12),rgba(0,0,0,.03));border-color:rgba(247,147,26,.35);box-shadow:0 10px 26px rgba(0,0,0,.13)}
body.tema-claro .ms-btc-lema{color:#475569}
body.tema-claro .ms-btc-dir{color:#0f172a;background:rgba(255,255,255,.85);border-color:rgba(0,0,0,.16)}
body.tema-claro .ms-btc-red{color:#64748b}
@media(max-width:420px){.ms-btc-dir{font-size:11.5px}.ms-btc-qr{width:130px;height:130px}}
@media(prefers-reduced-motion:reduce){.ms-btc-abre,.ms-btc-copia,.ms-btc-flecha{transition:none}.ms-btc-panel{animation:none}}

/* ===== Selector de idioma dentro del menú hamburguesa (21-8-2026) =====
   Problema: en el móvil el desplegable de idiomas se abre al FINAL de la
   lista del menú, que es una caja con altura tope y desplazamiento propio.
   Las banderas nuevas caían justo debajo del borde del recorte y la última
   (日本語) se veía partida por la mitad; pulsarla era una lotería.

   El arreglo de verdad está en js/tema.js (altura real de la pantalla) y en
   js/idiomas.js (acercar la lista al abrirla). Aquí solo va el aire: un
   margen de desplazamiento para que scrollIntoView no deje la fila pegada al
   borde, y un hueco al final del desplegable.

   Se escriben con "ul." delante a propósito: así ganan en la cascada a las
   reglas equivalentes de style.css, css/juego.css y css/juegos.css sin
   depender del orden en que cargue cada página. */
@media(max-width:768px){
  ul.nav-links li.selector-idioma,
  ul.mn-links li.selector-idioma{scroll-margin-bottom:20px}
  ul.nav-links li.selector-idioma>.selector-idioma__menu,
  ul.mn-links li.selector-idioma>.selector-idioma__menu{padding:0 0 10px;scroll-margin-bottom:20px}
  ul.nav-links li.selector-idioma .selector-idioma__menu li:last-child,
  ul.mn-links li.selector-idioma .selector-idioma__menu li:last-child{scroll-margin-bottom:20px}
}