/* =========================================================================
   MEGAFIRE — GAME LAUNCHER  (rediseno total, child de appyn)
   SIN NINGUN recurso externo (ni fuentes, ni CDNs) — el host/LiteSpeed/CF
   cuelga con externos. Iconos = SVG data-uri + dot CSS. Fuente = system stack.
   Storefront oscuro estilo Steam/Epic + acento neon. Cambia la paleta en :root.
   Escrito para ganarle al <style> dinamico del padre (html + !important).
   Cards: markup propio .gl-card (override en template-parts/loop/app*.php).
   ========================================================================= */

:root {
    --ap-bg:        #08090e;
    --ap-bg-2:      #0c0e15;
    --ap-surface:   #12141d;
    --ap-surface-2: #1a1d29;
    --ap-border:    #212533;
    --ap-border-2:  #2d3346;
    --ap-text:      #f2f4f9;
    --ap-muted:     #8b93a7;
    --ap-faint:     #5c6479;
    --ap-accent:    #7c5cff;
    --ap-accent-2:  #22d3ee;
    --ap-pink:      #ff4d8d;
    --ap-green:     #2fe08a;
    --ap-star:      #ffc53d;
    --ap-grad:      linear-gradient(115deg,#7c5cff 0%,#22d3ee 100%);
    --ap-grad-soft: linear-gradient(115deg,rgba(124,92,255,.16),rgba(34,211,238,.16));
    --ap-radius:    14px;
    --ap-radius-lg: 20px;
    --ap-glow:      0 0 0 1px rgba(124,92,255,.5), 0 22px 44px -16px rgba(124,92,255,.5);
    --ap-font:      system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

/* ---------------- CANVAS ---------------- */
html body, html .wrapper-page, html .wrapper-inside { background: var(--ap-bg) !important; color: var(--ap-text) !important; }
html .wrapper-inside {
    background:
        radial-gradient(1100px 500px at 82% -10%, rgba(34,211,238,.09), transparent 60%),
        radial-gradient(1100px 520px at 10% -8%, rgba(124,92,255,.13), transparent 60%),
        var(--ap-bg) !important;
    background-attachment: fixed !important;
}
body,p { color: var(--ap-text); font-family: var(--ap-font); }
a { color: var(--ap-text); text-decoration: none; }
a:hover { color: var(--ap-accent-2); }
::selection { background: rgba(124,92,255,.4); color:#fff; }
h1,h2,h3,h4,h5,.title,.title-section { font-family: var(--ap-font) !important; color: var(--ap-text) !important; letter-spacing:-.01em; }
html .container { max-width: 1320px !important; }

/* ---------------- HEADER (slim sticky) ---------------- */
html #header, html body.fixed #header {
    background: rgba(8,9,14,.72) !important;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: none !important;
    box-shadow: none !important;
}
/* toggle dia/noche del tema (#button_light_dark): float:right cae tras el menu,
   con icono FA roto + track sin estilar = el "rayado" feo del header.
   El child es dark-only -> se oculta (un modo claro rompe todo el diseno). */
html #button_light_dark { display:none !important; }
html #header nav a { color: var(--ap-muted) !important; font-weight:500; }
html #header nav a:hover { color: var(--ap-text) !important; }
html #header nav .menu>li>a::before { content:none !important; display:none !important; width:0 !important; height:0 !important; }
html #header nav a { border:none !important; box-shadow:none !important; }
html #header nav ul li.current-menu-item a {
    background: var(--ap-grad) !important; color:#07080c !important; border-radius:999px; padding:6px 18px; font-weight:700;
}
/* caret ▾ de submenus dibujado con CSS (el FA del padre esta roto -> era ▢).
   position:static + right:auto para que quede INLINE tras el texto, no absoluto. */
html #header nav .menu>li.menu-item-has-children>a::after {
    content:"" !important; position:static !important; right:auto !important; top:auto !important;
    display:inline-block !important; width:0 !important; height:0 !important; margin-left:7px; vertical-align:middle;
    border-left:4px solid transparent !important; border-right:4px solid transparent !important; border-top:5px solid currentColor !important;
    font:inherit !important; transform:none !important;
}
html #header nav .menu .sub-menu li.menu-item-has-children>a::after {
    border-top:none !important; border-left:5px solid currentColor !important; border-top:4px solid transparent !important; border-bottom:4px solid transparent !important;
}
/* MENU: centrar verticalmente los items (estaban pegados ARRIBA del header por el
   layout float del padre) -> flexbox centrado. Y matar el ::before que dejaba
   lineas raras bajo los items (el estado activo ya lo marca el pill 'Inicio').
   SOLO DESKTOP (min-width:901px): el padre oculta "#header nav ul" por completo
   en movil (<=900px) y usa un panel off-canvas separado (#menu-mobile) que se
   desliza con body.toggle-nav. Poner estos display:flex !important SIN media
   query pisaba ese "display:none" del padre y forzaba el menu de escritorio
   -entero, sin wrap- visible en el celular: como no cabe, quedaba
   desbordado fuera de la pantalla (el header se veia "cortado" justo
   despues del logo, sin nada mas visible). */
@media (min-width:901px) {
    html #header .container { align-items:center !important; }
    html #header nav { display:flex !important; align-items:center !important; height:100% !important; float:none !important; }
    html #header nav .menu { display:flex !important; align-items:center !important; float:none !important; margin:0 !important; height:auto !important; }
    html #header nav ul.menu > li { float:none !important; display:flex !important; align-items:center !important; margin-right:2px !important; }
    html #header nav .menu > li > a { line-height:1.2 !important; height:auto !important; display:inline-flex !important; align-items:center !important; }
    html #header nav .menu > li > a::before { display:none !important; }
}
/* LINEA por el MEDIO de los items del menu: ya se probo text-decoration y el
   ::before del padre sin exito -> opcion nuclear, se matan TODOS los
   mecanismos posibles de linea (borde, outline, box-shadow, decoracion de
   texto) sobre nav/ul/li/a de una sola vez, sin depender de adivinar cual
   era. El ::after se deja aparte porque ahi esta dibujada la flechita del
   submenu con bordes (no tocar o desaparece). */
html #header, html #header nav, html #header nav ul, html #header nav li, html #header nav ul li a,
html #subheader, html #subheader .subcontainer, html #subheader .social, html #subheader .social li, html #subheader .social li a {
    text-decoration: none !important; text-decoration-line: none !important;
    border: none !important; outline: none !important; box-shadow: none !important;
}
html #header nav ul li a::before { content:none !important; display:none !important; border:none !important; box-shadow:none !important; }
html #subheader .social li a { display:inline-flex !important; align-items:center !important; justify-content:center !important; }
html #header nav .menu>li>.sub-menu {
    background: var(--ap-surface) !important; border:1px solid var(--ap-border) !important;
    border-radius:14px !important; box-shadow:0 20px 50px rgba(0,0,0,.6) !important; overflow:hidden;
    top:100% !important; bottom:auto !important; left:0 !important; right:auto !important; margin-top:10px !important;
}
/* el align-items:center que le puse al <li> (para centrar el texto del link)
   tiene un efecto secundario: como .sub-menu es position:absolute y es hijo
   directo de ese <li> ahora flex, el navegador tambien intenta centrarlo
   verticalmente dentro del <li> en vez de dejarlo colgar debajo -> por eso
   aparecia "muy arriba", pisando el propio menu. top:100% lo fuerza a
   colgar siempre justo debajo del link, sin importar el align-items. */
/* triangulito apuntador arriba del desplegable: usa el icono FA roto (\f0d8)
   -> solo se veia la rayita teal de su border-bottom, pegada al desplegable.
   Se mata del todo (el box-shadow + border-radius ya le dan buena pinta al
   desplegable sin necesitar la flechita). */
html #header nav .menu>li.menu-item-has-children>.sub-menu::before {
    content:none !important; display:none !important; border:none !important; border-bottom:none !important;
}
html #header nav .menu .sub-menu li a { color: var(--ap-muted) !important; }
html #header nav .menu .sub-menu li a:hover { background: var(--ap-surface-2) !important; color: var(--ap-text) !important; }
html #menu-mobile { background: var(--ap-surface) !important; border-right:1px solid var(--ap-border); }
html #menu-mobile ul li a { color: var(--ap-muted) !important; }

/* --- boton hamburguesa (abre el menu movil) ---
   usa <i class="fa fa-bars"> -> con FA caido el boton existe (42x48px,
   clickeable) pero no dibuja nada, por eso el header se veia "cortado"
   justo despues del logo en celular. Se dibujan las 3 barras con CSS puro. */
html #header nav .menu-open { position:relative !important; }
html #header nav .menu-open i { font-size:0 !important; }
html #header nav .menu-open i::before {
    content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:22px; height:2px; background:#fff; border-radius:2px;
    box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff;
}
/* cinturon de seguridad: garantiza el comportamiento movil del padre (menu de
   escritorio oculto, hamburguesa visible) por si algun otro plugin/tema
   vuelve a forzar el display del <ul class="menu"> mas adelante. */
@media (max-width:900px) {
    html #header nav .menu { display:none !important; }
    html #header nav .menu-open { display:flex !important; align-items:center !important; justify-content:center !important; }
}
/* flechita de los submenus dentro del panel movil (#menu-mobile), tambien
   con <i class="fa fa-chevron-down/up"> roto sin FA -> se dibuja con CSS. */
html #menu-mobile .menu-item-has-children > i { font-size:0 !important; position:relative !important; width:14px; display:inline-block; }
html #menu-mobile .menu-item-has-children > i::before {
    content:""; position:absolute; left:2px; top:50%; width:7px; height:7px;
    border-right:2px solid var(--ap-muted); border-bottom:2px solid var(--ap-muted);
    transform:translateY(-65%) rotate(45deg); transition:transform .2s;
}
html #menu-mobile .menu-item-has-children > i.fa-chevron-up::before { transform:translateY(-35%) rotate(-135deg); }

/* ---------------- HERO (home = #subheader + .imgbg + .subcontainer) ---------------- */
html #subheader:not(.np) {
    position: relative; overflow: hidden;
    min-height: 460px; display:flex; align-items:center;
    border-bottom: 1px solid var(--ap-border) !important;
    background: var(--ap-bg-2) !important;
}
html #subheader .imgbg { position:absolute !important; inset:0 !important; z-index:0; }
/* NO tocar el sizing del padre: el hero tiene ANIMACION de paneo (@keyframes
   subheaderimg) con width:auto;height:100%;translateX. Si lo piso con object-fit
   se mata el movimiento Y aparece el gap negro. Solo subo la opacidad (padre=.3). */
html #subheader .imgbg img, html #subheader .imgbg .bi_ll {
    opacity: .5 !important; filter: saturate(1.08);
}
/* scrim cinematografico (liviano para que se lea la imagen completa) */
html #subheader:not(.np)::before {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
        linear-gradient(180deg, rgba(8,9,14,.18) 0%, rgba(8,9,14,.30) 45%, rgba(8,9,14,.72) 82%, var(--ap-bg) 100%),
        radial-gradient(120% 90% at 50% 125%, rgba(124,92,255,.22), transparent 60%);
}
html #subheader .subcontainer {
    position: relative; z-index:2; max-width: 860px; width:100%; min-width:0; margin:0 auto; text-align:center; padding: 40px 20px; box-sizing:border-box;
}
/* el min-width:0 de arriba es la parte critica: #subheader es flex (regla
   de mas arriba) y por defecto un hijo de flex no se encoge mas alla del
   ancho de su contenido sin partir -> en celular el h1 se negaba a hacer
   wrap y se desbordaba del viewport (texto cortado en el borde). */
html #subheader .subcontainer h1, html #subheader .subcontainer h2 {
    white-space: normal !important; overflow-wrap: break-word; word-break: break-word; max-width: 100%;
}
html #subheader .subcontainer h1 {
    font-weight:800 !important; font-size: clamp(30px,4.4vw,52px) !important; line-height:1.03 !important; margin:0 0 10px;
    background: linear-gradient(120deg,#fff 28%, #d5ccff 60%, #92ecf8);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    text-shadow: 0 2px 40px rgba(124,92,255,.25);
}
html #subheader .subcontainer h2 {
    font-weight:400 !important; font-size: clamp(14px,1.5vw,17px) !important; color:#c4c9d6 !important;
    max-width:640px; margin:0 auto 26px; line-height:1.5;
}
/* buscador hero = pill glass grande.
   OJO: el padre le pone "width:600px" FIJO (no %) -> en celular se salia
   del contenedor porque yo solo pisaba max-width, nunca el width real. */
html #searchBox { width:100% !important; max-width:660px !important; margin:0 auto !important; box-sizing:border-box; }
html #searchBox form {
    display:flex; align-items:center; gap:6px; background: rgba(18,20,29,.9) !important;
    border:1px solid var(--ap-border-2) !important; border-radius:999px !important;
    box-shadow: 0 14px 44px rgba(0,0,0,.55), inset 0 0 0 1px rgba(124,92,255,.06) !important;
    padding:6px 6px 6px 20px !important; overflow:hidden;
}
html #searchBox form input[type=text], html #searchBox form .sb_search {
    flex:1; min-width:0; background:transparent !important; color:var(--ap-text) !important; border:none !important; font-size:15px !important; height:44px !important;
    /* el padre le pone padding:0 110px 0 20px (pensado para superponer el
       boton adentro con float+margin negativo, un truco viejo). Con
       flexbox el boton ya es un hermano aparte -> ese hueco de 110px a la
       derecha quedaba desperdiciado y hacia ver el input "largo"/raro,
       sobre todo en celular donde ese espacio pesa mas. */
    padding:0 8px 0 0 !important; width:auto !important; float:none !important; margin-right:0 !important; box-sizing:border-box !important;
}
html #searchBox form input::placeholder { color: var(--ap-muted) !important; }
html #searchBox form button, html #searchBox form .sb_submit {
    flex:none; width:46px; height:46px; border-radius:999px !important; border:none !important;
    background: var(--ap-grad) !important; color:#07080c !important;
    box-shadow:0 6px 18px rgba(124,92,255,.45) !important; font-size:0;
    display:flex !important; align-items:center; justify-content:center;
}
/* lupa SVG embebida (sin FA) */
html #searchBox form button i, html #searchBox form .sb_submit i { display:none !important; }
html #searchBox form button::after, html #searchBox form .sb_submit::after {
    content:""; width:19px; height:19px; display:block;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307080c' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
}
html #searchBox form button:hover { filter:brightness(1.1); }
html #searchBox ul { background: var(--ap-surface) !important; border:1px solid var(--ap-border) !important; border-radius:14px !important; margin-top:6px; }
html #searchBox ul:empty { display:none !important; border:none !important; background:none !important; } /* la raya = ul vacio del autocomplete */
html #searchBox ul li a { color: var(--ap-muted) !important; }
html #searchBox ul li a:hover { background: var(--ap-surface-2) !important; color:var(--ap-text) !important; }
/* input limpio, sin bordes/lineas por defecto del browser */
html #searchBox form input[type=text], html #searchBox form .sb_search {
    box-shadow:none !important; outline:none !important; -webkit-appearance:none !important; appearance:none !important;
    border-bottom:none !important; text-decoration:none !important;
}
/* social del hero -> chips glass */
html #subheader .social { margin-top:22px !important; }
html #subheader .social li a {
    background: rgba(255,255,255,.06) !important; border:1px solid var(--ap-border-2) !important; color:var(--ap-text) !important;
}
html #subheader .social li a:hover { background: var(--ap-grad) !important; color:#07080c !important; }
/* logos sociales en SVG embebido (FA roto -> eran cajitas). El <i> se oculta. */
html #subheader .social li a { position:relative !important; }
html #subheader .social li a i { display:none !important; }
html #subheader .social li a::after {
    content:""; position:absolute; inset:0; margin:auto; width:17px; height:17px;
    background-position:center; background-repeat:no-repeat; background-size:contain;
}
html #subheader .social li a.facebook::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E"); }
html #subheader .social li a.twitter::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E"); }
html #subheader .social li a.instagram::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.332.014 7.052.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z'/%3E%3C/svg%3E"); }
html #subheader .social li a.youtube::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12z'/%3E%3C/svg%3E"); }
html #subheader .social li a.pinterest::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345c-.091.378-.293 1.194-.333 1.361-.052.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z'/%3E%3C/svg%3E"); }
html #subheader .social li a.telegram::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z'/%3E%3C/svg%3E"); }
html #subheader .social li a:hover::after { filter: brightness(0) invert(0.08); }

/* ---------------- FEATURED (#featured_posts .fp_box) — art tiles ---------------- */
html #featured_posts {
    display:grid !important; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)) !important;
    gap:16px !important; margin: 22px auto !important; max-width:1320px; padding:0 12px;
}
html #featured_posts .fp_box { margin:0 !important; }
html #featured_posts .fp_box a {
    display:block; position:relative; height:150px; border-radius: var(--ap-radius) !important;
    background-size:cover !important; background-position:center !important; overflow:hidden;
    border:1px solid var(--ap-border) !important; box-shadow:none !important;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
html #featured_posts .fp_box a:hover { transform: translateY(-4px); border-color:var(--ap-border-2) !important; box-shadow: var(--ap-glow) !important; }
html #featured_posts .fpb_a { position:absolute; inset:0; display:flex; align-items:flex-end; padding:12px;
    background: linear-gradient(180deg, transparent 40%, rgba(8,9,14,.9)); }
html #featured_posts .fpb_a img { width:44px !important; height:44px; border-radius:10px; margin-right:10px; }
html #featured_posts .fpb_title { color:#fff !important; font-weight:700 !important; font-size:14px; text-shadow:0 1px 6px rgba(0,0,0,.8); }

/* ---------------- CATBAR (pills) ---------------- */
html .catbar { margin: 20px auto !important; max-width:1320px; padding:0 12px; }
html .catbar ul { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:0; }
html .catbar li a {
    display:inline-flex; align-items:center; gap:8px; background: var(--ap-surface) !important;
    border:1px solid var(--ap-border) !important; border-radius:999px; padding:9px 18px; color:var(--ap-muted) !important;
    font-weight:600; transition: all .18s;
}
html .catbar li a:hover { border-color: transparent !important; background: var(--ap-grad) !important; color:#07080c !important; transform: translateY(-2px); }
html .catbar li a .icop { color: inherit; }

/* ---------------- SECTIONS ---------------- */
html .section { margin: 42px auto !important; max-width:1320px; padding:0 12px; }
/* titulo de seccion: el tema fuerza center con inline !important (no se puede vencer)
   -> centro TODO y pongo el subrayado centrado (nada de barra huerfana a la izq) */
html .section .title-section {
    position:relative; text-align:center !important; width:100% !important; display:block !important;
    color:var(--ap-text) !important; font-weight:800 !important; text-transform:uppercase; letter-spacing:.05em;
    font-size: clamp(16px,2vw,22px) !important; padding:0 0 18px !important; margin:0 0 24px !important;
    border-bottom:1px solid var(--ap-border) !important;
}
html .section .title-section::before { content:none !important; display:none !important; }
html .section .title-section::after {
    content:"" !important; position:absolute; left:50% !important; transform:translateX(-50%);
    bottom:-1px; width:120px; height:3px; background:var(--ap-grad); border-radius:2px; top:auto !important; right:auto !important;
}

/* ---------------- GRID (.baps) -> poster grid responsive ---------------- */
/* el .baps del padre es FLEX -> lo fuerzo a GRID de columnas IGUALES y neutralizo
   cualquier tamano heredado en los hijos (por eso la 1a columna salia 2x de ancha) */
html .section .baps {
    display:grid !important; grid-template-columns: repeat(auto-fill,minmax(158px,1fr)) !important;
    gap:18px !important; padding:0 !important; align-items:start !important;
}
html .section .baps > * {
    min-width:0 !important; max-width:none !important; width:auto !important;
    margin:0 !important; float:none !important; flex:none !important;
}
@media (min-width:1100px){ html .section .baps[data-cols="6"]{ grid-template-columns: repeat(6,1fr) !important; } }

/* ---------------- CARD POSTER (.gl-card) ---------------- */
html .gl-card { position:relative; }
html .gl-card__link {
    display:flex; flex-direction:column; height:100%;
    background: var(--ap-surface) !important; border:1px solid var(--ap-border) !important;
    border-radius: var(--ap-radius) !important; overflow:hidden; color:var(--ap-text) !important;
    transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s, box-shadow .22s;
}
html .gl-card__link:hover { transform: translateY(-6px); border-color: var(--ap-border-2) !important; box-shadow: var(--ap-glow) !important; }
/* barra de acento arriba en hover */
html .gl-card__link::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ap-grad); transform:scaleX(0); transform-origin:left; transition:transform .25s; z-index:3; }
html .gl-card__link:hover::before { transform:scaleX(1); }

/* caja de arte: MISMO tamano (3/4) para poster e icono -> grid parejo */
html .gl-card__art { position:relative; margin:0 !important; aspect-ratio: 3/4; overflow:hidden; background: var(--ap-bg-2); }
/* neutralizamos el wrapper .bloque-imagen.w75 del padre (float + 75x75 fijo) */
html .gl-card__art .bloque-imagen {
    position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
    float:none !important; margin:0 !important; display:block !important;
}

/* POSTER (PC/MAC): box-art llena la caja */
html .gl-card--poster .gl-card__art .bloque-imagen img {
    width:100% !important; height:100% !important; object-fit:cover !important; display:block;
    border-radius:0 !important; transition: transform .35s ease;
}
html .gl-card--poster .gl-card__link:hover .gl-card__art img { transform: scale(1.06); }

/* ICON (APK/MOD): caja 1/1 (menos vacio que 3/4) con el icono GRANDE + spotlight */
html .gl-card--icon .gl-card__art {
    aspect-ratio: 1/1;
    background:
        radial-gradient(70% 60% at 50% 44%, rgba(124,92,255,.16), transparent 72%),
        radial-gradient(130% 110% at 50% 30%, var(--ap-surface-2), var(--ap-bg-2) 80%);
    display:flex; align-items:center; justify-content:center;
}
html .gl-card--icon .gl-card__art .bloque-imagen {
    position:static !important; inset:auto !important; width:auto !important; height:auto !important;
    display:flex !important; align-items:center; justify-content:center;
}
html .gl-card--icon .gl-card__art .bloque-imagen img {
    width:66% !important; height:auto !important; max-height:66% !important; object-fit:contain !important;
    border-radius:23% !important; box-shadow: 0 18px 40px rgba(0,0,0,.6); transition: transform .3s ease;
}
html .gl-card--icon .gl-card__link:hover .gl-card__art img { transform: translateY(-3px) scale(1.04); }

/* ribbon de estado (new/update) dentro del arte -> badge esquina */
html .gl-card__art .bloque-status {
    position:absolute !important; top:8px !important; left:8px !important; right:auto !important;
    width:auto !important; margin:0 !important; transform:none !important; z-index:4;
    border-radius:8px !important; font-size:9px !important; padding:3px 8px !important;
}
html .gl-card__scrim { position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(8,9,14,.55)); pointer-events:none; }
html .gl-card__cta {
    position:absolute; left:50%; bottom:14px; transform: translate(-50%,12px);
    display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:999px;
    background: var(--ap-grad); color:#07080c; font-weight:700; font-size:12px; white-space:nowrap;
    box-shadow:0 8px 20px rgba(124,92,255,.5); opacity:0; transition: opacity .22s, transform .22s; pointer-events:none;
}
html .gl-card__link:hover .gl-card__cta { opacity:1; transform: translate(-50%,0); }
/* icono descarga SVG embebido (sin FA) */
html .gl-card__cta i { display:none !important; }
html .gl-card__cta::before {
    content:""; width:13px; height:13px; display:inline-block; flex:none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307080c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E") center/contain no-repeat;
}

html .gl-card__body { padding:12px 13px 14px; display:flex; flex-direction:column; gap:7px; flex:1; }
html .gl-card__title { font-size:14px !important; font-weight:700 !important; line-height:1.25; margin:0 !important;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--ap-text) !important; }
html .gl-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:12px; color:var(--ap-muted) !important; margin-top:auto; }
html .gl-card__meta .version { display:inline-flex; align-items:center; gap:4px; color:var(--ap-muted) !important; }
html .gl-card__meta .developer { color:var(--ap-faint) !important; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html .gl-card__rating .box-rating { padding:0 !important; }

/* chip PC/APK/MOD (px_post_mod, inline styles del padre -> !important) */
html .b-type { background:transparent !important; padding:0 !important; margin:0 !important; border-radius:6px !important; display:inline-flex !important; }
html .b-type > span { background: var(--ap-surface-2) !important; color:var(--ap-text) !important; border:1px solid var(--ap-border-2) !important;
    border-radius:6px !important; padding:1px 7px !important; font-weight:700 !important; font-size:10px !important; letter-spacing:.05em; }
/* puntito del chip dibujado con CSS (sin depender de Font Awesome).
   currentColor = el color inline del padre (verde APK / azul PC / MOD). */
html .b-type .fa-circle {
    display:inline-block !important; width:8px; height:8px; border-radius:50%;
    background: currentColor !important; font-size:0 !important; line-height:0;
    box-shadow: 0 0 5px currentColor;
}

/* rating stars */
html .box-rating .rating, html .rating .fa-star, html .box-rating .fas { color: var(--ap-star) !important; }

/* ---------------- CARRUSEL (mq / #slidehome .px-carousel) ---------------- */
/* carrusel: mostrar el card COMPLETO (el padre lo recorta con height:100%) */
/* carrusel: SOLO destrabo la altura para que se vea el body del card.
   NO toco el ancho/margin del item (el padre ya lo hace bien: 33.333% = 3 cards;
   pisarlo lo volvia gigante al pelear con el JS del carrusel). */
html #slidehome .px-carousel-wrapper { height:auto !important; overflow:hidden !important; -webkit-mask-image:none !important; mask-image:none !important; }
html #slidehome .px-carousel-container { height:auto !important; }
html #slidehome .px-carousel-item { vertical-align:top !important; }
html #slidehome .px-carousel-item .gl-card__link { width:100% !important; }
/* cap de altura del arte en el carrusel: el item es ~33% del ancho TOTAL = card
   enorme; sin cap el arte se hace gigante. Lo dejo en tamano razonable. */
html #slidehome .gl-card__art { aspect-ratio:auto !important; height:220px !important; }
html #slidehome .gl-card--icon .gl-card__art .bloque-imagen img { max-height:58% !important; width:auto !important; max-width:56% !important; }
html #slidehome .gl-card--poster .gl-card__art .bloque-imagen img { width:100% !important; height:100% !important; }

/* menu: catch-all para matar cualquier borde/linea (defensivo, ademas del border
   del header ya removido y el toggle oculto) */
html #header nav ul, html #header nav .menu, html #header nav ul li, html #header .container { border:none !important; box-shadow:none !important; }
/* flechas prev/next: el padre las hace height:100% (caja alta = los "slivers").
   Las forzo a circulo 40px chico centrado vertical + chevron SVG (FA roto). */
html #slidehome .px-carousel-nav .px-prev, html #slidehome .px-carousel-nav .px-next {
    position:absolute !important; top:50% !important; transform:translateY(-50%) !important;
    width:40px !important; height:40px !important; padding:0 !important;
    background: rgba(20,22,31,.9) !important; border:1px solid var(--ap-border-2) !important;
    border-radius:999px !important; z-index:9 !important; box-shadow:0 6px 16px rgba(0,0,0,.5) !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
}
html #slidehome .px-carousel-nav .px-prev { left:-4px !important; right:auto !important; }
html #slidehome .px-carousel-nav .px-next { right:-4px !important; left:auto !important; }
html #slidehome .px-carousel-nav .px-prev:hover, html #slidehome .px-carousel-nav .px-next:hover { background: var(--ap-grad) !important; }
html #slidehome .px-carousel-nav .px-prev i, html #slidehome .px-carousel-nav .px-next i { display:none !important; }
html #slidehome .px-carousel-nav .px-prev::after, html #slidehome .px-carousel-nav .px-next::after {
    content:""; width:11px; height:11px; background-position:center; background-repeat:no-repeat; background-size:contain;
}
html #slidehome .px-carousel-nav .px-prev::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E"); }
html #slidehome .px-carousel-nav .px-next::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E"); }

/* ---------------- SIDEBAR (rank list) ---------------- */
html #sidebar .widget, html .widget {
    background: var(--ap-surface) !important; border:1px solid var(--ap-border) !important; border-radius: var(--ap-radius) !important;
    box-shadow:none !important; overflow:hidden;
}
html .widget .widget-title, html .widget_block h2 {
    color:var(--ap-text) !important; background:transparent !important; border-bottom:1px solid var(--ap-border) !important;
    font-weight:800 !important; text-transform:uppercase; letter-spacing:.05em;
}
html #sidebar .widget ul li { border-color: var(--ap-border) !important; }
html #sidebar .widget ul li:hover { background: var(--ap-surface-2) !important; }
/* el "flash blanco" al arrastrar el mouse sobre las tarjetas del sidebar
   (Ultimas Publicaciones, etc) es este relleno hover del padre -> crece de
   0 a 100% de ancho con background:#f3f5f9 (gris casi blanco), pensado
   para fondo claro. Se pasa a un tono oscuro del tema. */
html .widget .widget-content ul li a:hover::before { background: var(--ap-surface-2) !important; }
html #sidebar .bghover { background: linear-gradient(180deg,transparent,rgba(124,92,255,.22)) !important; }
html #sidebar .bav.wb .title, html #sidebar .widget a { color:var(--ap-text) !important; }
html #sidebar .widget a:hover { color:var(--ap-accent-2) !important; }
html #sidebar .version, html #sidebar .developer, html #sidebar .app-date { color:var(--ap-muted) !important; }

/* ---------------- BLOG CARDS ---------------- */
html .bloque-blog {
    background: var(--ap-surface) !important; border:1px solid var(--ap-border) !important; border-radius: var(--ap-radius) !important;
    box-shadow:none !important; overflow:hidden; position:relative; transition: transform .2s, border-color .2s, box-shadow .2s;
}
html .bloque-blog::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ap-grad); transform:scaleX(0); transform-origin:left; transition:transform .25s; z-index:2; }
html .bloque-blog:hover { transform: translateY(-6px); border-color:var(--ap-border-2) !important; box-shadow: var(--ap-glow) !important; }
html .bloque-blog:hover::before { transform:scaleX(1); }
html .bloque-blog a.title { color:var(--ap-text) !important; font-weight:700 !important; }
html .bloque-blog .excerpt, html .bloque-blog .date { color:var(--ap-muted) !important; }

/* ---------------- CTA "VER MAS" ---------------- */
html .section a.more, html p a.more {
    display:inline-block; background: var(--ap-grad) !important; color:#07080c !important; border:none !important;
    border-radius:999px !important; padding:13px 40px !important; font-weight:700 !important; letter-spacing:.06em; text-transform:uppercase;
    box-shadow:0 12px 30px -8px rgba(124,92,255,.55) !important; transition: filter .18s, transform .18s !important;
}
html .section a.more:hover, html p a.more:hover { filter:brightness(1.08); transform: translateY(-2px); opacity:1 !important; }
html .buttond:not(.danv) { background: var(--ap-grad) !important; color:#07080c !important; border:none !important; border-radius:10px !important; font-weight:700 !important; }

/* paginador */
html .pagination a, html .pagination .page-numbers { background: var(--ap-surface) !important; border:1px solid var(--ap-border) !important; color:var(--ap-muted) !important; border-radius:8px !important; }
html .pagination .page-numbers.current, html .pagination a:hover { background: var(--ap-grad) !important; color:#07080c !important; }

/* ---------------- FOOTER ---------------- */
html #footer { background: var(--ap-bg-2) !important; border-top:1px solid var(--ap-border) !important; color:var(--ap-muted) !important; position:relative; }
html #footer::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ap-grad); opacity:.85; }
html #footer a { color:var(--ap-muted) !important; }
html #footer a:hover { color:var(--ap-accent-2) !important; }
html #footer .widget-title, html #footer .widget .widget-title { color:var(--ap-text) !important; }

/* ---------------- SUBHEADER single (barra .np) ---------------- */
/* El buscador se veia descentrado en los posts (single.php, NO home) porque
   el padre pinta #subheader.np como flex-row: [#searchBox][.social], y
   "#subheader.np #searchBox{width:100%}" (2 IDs, specificity 0,2,0) le gana
   al "html #searchBox{max-width:660px;margin:0 auto}" del child (0,1,1) ->
   el buscador se estira para "compartir fila" con los iconos sociales, que
   quedan pegados a la derecha, empujando el buscador visualmente a la izq.
   Fix: apilar en columna y centrar cada bloque por separado (mismo patron
   visual que el hero de home). */
html #subheader.np {
    background: var(--ap-surface) !important; border-bottom:1px solid var(--ap-border) !important; box-shadow:none !important;
    display:flex !important; flex-direction:column !important; align-items:center !important;
}
html #subheader.np #searchBox {
    display:block !important; width:100% !important; max-width:660px !important; margin:0 auto !important;
}
html #subheader.np .social { margin:18px 0 0 !important; }
html #subheader.np .social li:first-child { margin-left:0 !important; }

/* ---------------- SINGLE APP (vista de un post: box de datos, descripcion,
   versiones, comentarios, etc). El padre las pinta con background:#fff fijo
   (style.css linea ~1531 ".app-p .box,.app-s .box{background:#fff}") y el
   child nunca cubria esta plantilla -> quedaba blanca sobre el resto oscuro. */
html .app-s .box {
    background: var(--ap-surface) !important;
    border: 1px solid var(--ap-border) !important;
    border-radius: var(--ap-radius) !important;
    box-shadow: none !important;
}
html .box .box-title { color: var(--ap-text) !important; }
html .box .box-title::before { border-bottom-color: var(--ap-border) !important; }
html .box .box-title::after { background: var(--ap-grad) !important; }
html .app-p .box h1.box-title { color: var(--ap-text) !important; }

/* cabecera del app: breadcrumbs, version, categorias, descripcion corta */
html #breadcrumbs, html #breadcrumbs a { color: var(--ap-muted) !important; }
html #breadcrumbs a:hover { color: var(--ap-text) !important; }
html .app-spe .version { color: var(--ap-muted) !important; }
html .app-s .s2 .descripcion { color: var(--ap-muted) !important; }
html .app-s .s2 .meta-cats a {
    background: var(--ap-grad-soft) !important; color: var(--ap-accent-2) !important;
}

/* ficha de datos: Desarrollador / Lanzamiento / Version / Tamaño / etc */
html .app-s .da-s { color: var(--ap-text) !important; }
html .app-s .da-s b { color: var(--ap-muted) !important; font-weight:600; }
html .app-s .da-s a { color: var(--ap-accent-2) !important; }
/* en movil (<=500px) el padre pone una linea divisoria blanca entre cada
   fila de datos (Desarrollador/Lanzamiento/Version/etc) y un separador
   vertical tambien blanco -> eran las franjas blancas que se veian en los
   posts en el celular. */
html .app-s .box-data-app::before { background: var(--ap-border) !important; }
html .app-s .da-s { border-bottom: 2px solid var(--ap-border) !important; }
/* el padre pone background:#f2f2f2 (gris claro) para TODA la caja de datos
   en movil, no solo el separador -> era la franja blanca/gris fea que se
   ve al abrir un post en celular. Fondo con un poco del acento del tema en
   vez de plano oscuro, como pediste. */
html .app-s .box-data-app {
    background: linear-gradient(160deg, rgba(124,92,255,.14), rgba(34,211,238,.08)), var(--ap-surface-2) !important;
    border: 1px solid var(--ap-border) !important; border-radius: var(--ap-radius) !important;
}
/* ESCRITORIO: el padre solo pone texto plano en columnas de 33% sin ningun
   fondo (".data-app" es flex simple). Se le da a cada dato su propia
   "tarjeta" -> mismo look prolijo que ya quedo en movil, en vez del texto
   suelto de antes. Escrito SOLO para desktop para no tocar el look que ya
   quedo bien en el .box-data-app de movil. */
@media (min-width:901px) {
    html .app-s .data-app { display:flex !important; flex-wrap:wrap !important; gap:10px !important; row-gap:10px !important; }
    html .app-s .da-s {
        border-bottom: none !important;
        background: linear-gradient(160deg, rgba(124,92,255,.10), rgba(34,211,238,.06)), var(--ap-surface-2) !important;
        border: 1px solid var(--ap-border) !important; border-radius: 10px !important;
        padding: 10px 14px !important; box-sizing: border-box !important;
        width: calc(33.333% - 7px) !important; margin-right:0 !important; margin-top:0 !important;
    }
}

/* botones Descargar / Telegram / Youtube / Ultima version */
html .buttond {
    background: var(--ap-grad) !important; color:#07080c !important; font-weight:700 !important;
}
html .buttond i { background: rgba(0,0,0,.15) !important; }
html .buttond.danv { background:#f94040 !important; color:#fff !important; }
html .buttond.t { background: var(--ap-surface-2) !important; color: var(--ap-text) !important; border:1px solid var(--ap-border) !important; }
html .buttond.yt { background:#ff3b3b !important; color:#fff !important; }
html .buttond:hover { filter:brightness(1.08); }

/* reportar + texto del cuerpo de la descripcion larga */
html .link-report { color: var(--ap-muted) !important; }
html .link-report:hover { color: var(--ap-accent-2) !important; }
html .app-s .entry, html .app-s .entry p, html .app-s .entry li { color: var(--ap-muted) !important; }
html .app-s .entry a { color: var(--ap-accent-2) !important; }
html .app-s .entry strong, html .app-s .entry b { color: var(--ap-text) !important; }

/* tabla de "Versiones" dentro del box */
html #versiones table, html #versiones table th, html #versiones table td {
    color: var(--ap-muted) !important; border-color: var(--ap-border) !important;
}
html #versiones table th { color: var(--ap-text) !important; }

/* difuminado blanco al final de la descripcion truncada ("Leer mas") ---
   el padre usa linear-gradient(to bottom, transparent 0, #fff 100%) para
   tapar el texto cortado, pensado para fondo blanco -> por eso se veia una
   franja blanca encima del texto oscuro. Se cambia el color final del
   degradado a la superficie oscura de la caja (var(--ap-surface): #12141d). */
html .app-s .entry.limit::before {
    background: linear-gradient(to bottom, rgba(18,20,29,0) 0, var(--ap-surface) 100%) !important;
}
html .app-s .readmore { color: var(--ap-accent-2) !important; }

/* ---------------- ICONOS SIN FONT AWESOME ----------------
   El padre carga fa-6.4.2 via loadFont() (XHR asincronico). Cuando esa
   peticion no llega a tiempo o se bloquea, TODOS los <i class="fa ..."> del
   sitio quedan vacios (tofu invisible) -> por eso Descargar/Telegram/
   Youtube/compartir/flechas de carrusel/lightbox se ven sin icono.
   Se dibujan de forma self-contained (SVG data-uri o CSS), igual que ya
   hacia el header con los iconos sociales, para no depender de FA. */

/* --- botones .buttond (Descargar, Telegram, Youtube, Ultima version, Regresar) ---
   IMPORTANTE: la regla de respaldo de abajo usa varios :not() -> su
   especificidad (0,6,1) es MAYOR que la de ".buttond.downloadAPK i" (0,2,1),
   asi que sin !important le ganaba y tapaba el icono de Descargar/Enlaces.
   Por eso cada background-image aqui lleva !important.
   OJO 2: el padre posiciona el icono con "position:absolute; left:0; top:0;
   height:100%; width:33px; display:flex" (un pozo a todo lo alto, pegado a
   la izquierda del boton). Forzar antes width:16px/height:16px/
   display:inline-block rompia ese layout -> el icono quedaba flotando en la
   esquina superior (el "descuadre" de las capturas). Ahora solo se
   reemplaza el glifo por la imagen, sin tocar tamaño/posicion del padre. */
html .buttond i { font-size:0 !important; background-repeat:no-repeat !important; background-position:center !important; background-size:17px 17px !important; }
html .buttond i::before { content:none !important; }
html .buttond.downloadAPK i, html .dapk_b i, html #list-downloadlinks li a.dapk_b i {
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12'/><path d='M7 10l5 5 5-5'/><path d='M4 20h16'/></svg>") !important;
}
html .buttond.danv i {
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 11a8 8 0 1 0-2.3 5.6'/><path d='M20 5v6h-6'/></svg>") !important;
}
html .buttond.t i, html #dl-telegram i {
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><path fill='%23ffffff' d='M107 175l-4 55c6 0 8-2 12-5l28-27 58 43c11 6 18 3 21-10l38-178c4-16-6-22-17-18L14 100c-16 6-15 15-3 19l50 15 116-73c5-4 10-2 6 2z'/></svg>") !important;
}
html .buttond.yt i {
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M23 12s0-3.6-.5-5.3c-.3-1-1-1.8-2-2C18.9 4.2 12 4.2 12 4.2s-6.9 0-8.5.5c-1 .2-1.7 1-2 2C1 8.4 1 12 1 12s0 3.6.5 5.3c.3 1 1 1.7 2 2 1.6.5 8.5.5 8.5.5s6.9 0 8.5-.5c1-.3 1.7-1 2-2 .5-1.7.5-5.3.5-5.3zM9.8 15.5v-7l6 3.5-6 3.5z'/></svg>") !important;
}
html .buttond:not(.downloadAPK):not(.danv):not(.t):not(.yt):not(.dapk_b) i {
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M15 5l-7 7 7 7'/></svg>") !important;
}

/* --- iconito de "Reportar" --- */
html .link-report i, html .link-report::before { font-size:0 !important; }
html .link-report { display:inline-flex !important; align-items:center; gap:5px; }
html .link-report::after {
    content:""; width:13px; height:13px; display:inline-block; background-repeat:no-repeat; background-size:contain;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b0c3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='13'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
}

/* --- compartir (Facebook / Twitter / Pinterest / Telegram / Whatsapp) ---
   ahora con su color de marca fijo (no solo en hover) y su icono real. */
html .botones_sociales a { background: var(--ap-surface-2) !important; color:#fff !important; border:1px solid var(--ap-border); }
html .botones_sociales li i { font-size:0 !important; width:18px; height:18px; display:inline-block; background-repeat:no-repeat; background-position:center; background-size:contain; }
html .botones_sociales .facebook { background:#1877f2 !important; }
html .botones_sociales .facebook i { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12z'/></svg>"); }
html .botones_sociales .twitter { background:#000000 !important; }
html .botones_sociales .twitter i { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M18.9 2H22l-7.6 8.7L23 22h-6.9l-5.4-6.8L4.4 22H1.3l8.2-9.3L1 2h7l4.9 6.3L18.9 2zM17.6 20h1.9L6.5 4H4.5l13.1 16z'/></svg>"); }
html .botones_sociales .pinterest { background:#e60023 !important; }
html .botones_sociales .pinterest i { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M12 2a10 10 0 0 0-3.6 19.3c0-.8 0-1.8.2-2.7l1.4-6s-.3-.7-.3-1.7c0-1.6.9-2.8 2.1-2.8 1 0 1.5.7 1.5 1.6 0 1-.6 2.4-1 3.8-.2 1 .5 1.8 1.5 1.8 1.8 0 3.1-2.3 3.1-5 0-2.1-1.5-3.7-4.2-3.7-3 0-4.9 2.2-4.9 4.7 0 .9.3 1.5.7 2 .2.2.2.3.1.5l-.3 1c0 .2-.2.3-.4.2-1.2-.5-1.8-1.9-1.8-3.4 0-2.6 2.2-5.6 6.5-5.6 3.5 0 5.8 2.5 5.8 5.2 0 3.6-2 6.3-4.9 6.3-1 0-1.9-.5-2.2-1.2l-.6 2.4c-.2.9-.7 1.8-1.1 2.5A10 10 0 1 0 12 2z'/></svg>"); }
html .botones_sociales .telegram { background:#229ed9 !important; }
html .botones_sociales .telegram i { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><path fill='%23ffffff' d='M107 175l-4 55c6 0 8-2 12-5l28-27 58 43c11 6 18 3 21-10l38-178c4-16-6-22-17-18L14 100c-16 6-15 15-3 19l50 15 116-73c5-4 10-2 6 2z'/></svg>"); }
html .botones_sociales .whatsapp { background:#25d366 !important; }
html .botones_sociales .whatsapp i { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.4A10 10 0 1 0 12 2zm5.8 14.2c-.2.7-1.4 1.3-2 1.4-.5.1-1.2.1-1.9-.1-.4-.1-1-.3-1.7-.6-3-1.3-4.9-4.3-5-4.5-.2-.2-1.2-1.6-1.2-3s.8-2.1 1-2.4c.3-.3.6-.3.8-.3h.6c.2 0 .4 0 .6.5l.9 2c.1.2.1.4 0 .6l-.4.6c-.1.2-.3.4-.1.7.2.4.9 1.5 1.9 2.4 1.3 1.1 2.3 1.5 2.7 1.7.3.1.5.1.6-.1l.9-1c.2-.3.4-.2.7-.1l1.9.9c.2.1.4.2.5.3.1.2.1.9-.1 1.5z'/></svg>"); }

/* --- flechas del carrusel de screenshots (#slideimages) y de apps (#slidehome) --- */
html .px-carousel-nav .px-prev, html .px-carousel-nav .px-next {
    background: var(--ap-surface-2) !important; border-radius:50%; width:32px; height:32px !important; top:50% !important; transform:translateY(-50%);
    display:flex !important; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.4);
}
html #slideimages .px-prev, html #slideimages .px-next {
    background: var(--ap-grad) !important; border:none !important; width:45px !important; height:45px !important;
}
html .px-carousel-nav .px-prev i, html .px-carousel-nav .px-next i { font-size:0 !important; width:11px; height:11px; background:none !important; border:none !important; }
html .px-carousel-nav .px-prev i::before, html .px-carousel-nav .px-next i::before {
    content:""; display:block; width:9px; height:9px; border-right:2.5px solid #fff; border-bottom:2.5px solid #fff;
}
html .px-carousel-nav .px-prev i::before { transform:rotate(135deg); margin-left:2px; }
html .px-carousel-nav .px-next i::before { transform:rotate(-45deg); margin-right:2px; }

/* --- lightbox de imagenes (#imageBox): flechas antes/despues y boton cerrar --- */
html .imageBox .bn { font-size:0 !important; width:40px; height:40px; background:rgba(0,0,0,.55); border-radius:50%; display:flex; align-items:center; justify-content:center; text-shadow:none; }
html .imageBox .bn::before { content:""; display:block; width:11px; height:11px; border-right:3px solid #fff; border-bottom:3px solid #fff; transform:rotate(-45deg); margin-left:-3px; }
html .imageBox .bn.before::before { transform:rotate(135deg); margin-left:3px; }
html .imageBox .bn.disabled::before { border-color:rgba(255,255,255,.3); }
html .imageBox .close { font-size:0 !important; }
html .imageBox .close::before { content:"\2715"; font-size:20px; font-family:Arial,Helvetica,sans-serif; color:#fff; display:block; }

/* ---------------- CAJA "ENLACES DE DESCARGA" / instrucciones ----------------
   La caja de pasos ("Seleccione un servidor...", contraseña, etc.) viene del
   campo de opciones apps_info_download_apk/zip (px_info_install -> clase
   .bx-info-install.entry) con markup/estilos propios del admin, por eso
   quedaba blanca aunque el resto de .box ya estaba oscuro. */
html .bx-info-install { background: var(--ap-surface-2) !important; border:1px solid var(--ap-border) !important; border-radius: var(--ap-radius) !important; padding:16px 20px !important; }
html .bx-info-install, html .bx-info-install p, html .bx-info-install li, html .bx-info-install span { color: var(--ap-muted) !important; background:transparent !important; }
html .bx-info-install a { color: var(--ap-accent-2) !important; }
html .bx-info-install b, html .bx-info-install strong { color: var(--ap-text) !important; }
/* por si el admin metio un bloque de Gutenberg con fondo propio dentro */
html .bx-info-install [style*="background"] { background:transparent !important; }

/* ---------------- SCROLLBAR ----------------
   revertido a scrollbar nativo del sistema, sin tocar (la "linea" que se
   reportaba era otra cosa: el ::before subrayado del menu, ver mas abajo). */