/* LLOG Móvil — todo vive dentro de #llogm; solo se muestra bajo el breakpoint (regla inline desde PHP) */
:root{
	--llogm-rojo:#D8232A;
	--llogm-negro:#111114;
	--llogm-tinta:#2A2A2E;
	--llogm-gris:#6B6B72;
	--llogm-linea:#E6E6E9;
	--llogm-papel:#FFFFFF;
	--llogm-head:56px;
	--llogm-bar:70px;
	--llogm-pill:70px;
	--llogm-gris-barra:#ECECEF;
	--llogm-hueco:#FFFFFF;
	--llogm-ico:#111114;
	--llogm-activo:#D8232A;
	--llogm-activo-ico:#FFFFFF;
	--llogm-pepe:#2A2A2E;
	--llogm-pepe-aro:#D8232A;
	--llogm-head-bg:#FFFFFF;
	--llogm-head-ico:#111114;
	--llogm-radio:20px;
	--llogm-disco:46px;
	--llogm-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
}
.llogm{display:none;font-family:var(--llogm-font);color:var(--llogm-tinta);-webkit-font-smoothing:antialiased}
.llogm *,.llogm *::before,.llogm *::after{box-sizing:border-box}
.llogm [hidden]{display:none!important}
.llogm svg{width:24px;height:24px;display:block}

/* Botón icono */
.llogm-ib{appearance:none;border:0;background:transparent;color:var(--llogm-negro);width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:0;cursor:pointer}
.llogm-ib:active{background:rgba(0,0,0,.06)}
.llogm-ib:focus-visible,.llogm-tab:focus-visible{outline:2px solid var(--llogm-rojo);outline-offset:2px}

/* Encabezado */
.llogm-head{position:fixed;top:0;left:0;right:0;z-index:9990;height:calc(var(--llogm-head) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);background:var(--llogm-head-bg);border-bottom:1px solid var(--llogm-linea);display:flex;align-items:center;justify-content:space-between;padding-left:6px;padding-right:6px}
.llogm-head .llogm-ib,.llogm-head .llogm-logo{color:var(--llogm-head-ico)}
.llogm-logo{display:flex;align-items:center;text-decoration:none;color:var(--llogm-negro);font-weight:800;font-size:20px;letter-spacing:-.01em;max-width:55%;padding-left:10px;margin-right:auto}
.llogm-head-der{display:flex;align-items:center;gap:2px}
.llogm-head.con-atras .llogm-logo{padding-left:2px}
.llogm-atras{margin-right:2px}
a.llogm-ib{text-decoration:none}
.llogm-logo img{max-height:30px;width:auto;display:block}
.admin-bar .llogm-head{top:32px}
@media (max-width:782px){.admin-bar .llogm-head{top:46px}}

/* Barra inferior: gris de borde a borde, hueco circular con hombros suaves alrededor del disco activo */
.llogm-bar{position:fixed;left:0;right:0;bottom:0;z-index:9990;height:calc(var(--llogm-pill) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(var(--llogm-n,4),1fr);align-items:stretch;border-radius:var(--llogm-radio) var(--llogm-radio) 0 0;overflow:hidden;background:var(--llogm-hueco)}
.llogm svg.llogm-bar-fondo{position:absolute;inset:0;width:100%;height:100%;display:block}
.llogm-bar-fondo path{fill:var(--llogm-gris-barra)}
.llogm-tab{appearance:none;border:0;background:transparent;text-decoration:none;color:var(--llogm-ico);display:flex;align-items:center;justify-content:center;padding:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;z-index:1;height:var(--llogm-pill)}
.llogm-tab-ico{display:block;transition:opacity .15s,transform .15s}
.llogm-tab:active .llogm-tab-ico{transform:scale(.9)}
.llogm-tab.es-actual .llogm-tab-ico{opacity:0}
.llogm-tab.apagada{opacity:.3;pointer-events:none}
.llogm-svg-custom{width:24px;height:24px;fill:currentColor;stroke:currentColor}
.llogm-svg-custom *{fill:currentColor!important;stroke:currentColor!important}
.llogm-img-custom{width:24px;height:24px;display:block;object-fit:contain}
.llogm-pp{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;letter-spacing:.02em;width:100%;height:100%}
.llogm-pepe .llogm-tab-ico{width:30px;height:30px;border-radius:50%;background:var(--llogm-pepe);color:#fff;overflow:hidden}
.llogm-pepe .llogm-tab-ico img{width:100%;height:100%;object-fit:cover;display:block}
.llogm-burbuja{position:absolute;top:calc((var(--llogm-pill) - var(--llogm-disco)) / 2);left:0;width:var(--llogm-disco);height:var(--llogm-disco);margin-left:calc(var(--llogm-disco) / -2);border-radius:50%;background:var(--llogm-activo);color:var(--llogm-activo-ico);display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:2;transform:translateX(var(--llogm-px,0px));scale:1;transition:scale .2s,background .2s,box-shadow .2s}
.llogm-bar.sin-activa .llogm-burbuja{scale:0}
.llogm-burbuja svg{width:24px;height:24px}
.llogm-burbuja img{width:100%;height:100%;object-fit:cover;display:block}
.llogm-burbuja.pepe{background:var(--llogm-pepe);box-shadow:inset 0 0 0 3px var(--llogm-pepe-aro)}

/* Fondo y paneles */
.llogm-fondo{position:fixed;inset:0;z-index:9985;background:rgba(17,17,20,.45);opacity:0;transition:opacity .2s}
.llogm-fondo.visible{opacity:1}
.llogm-panel{position:fixed;z-index:9996;background:var(--llogm-papel);color:var(--llogm-tinta)}
.llogm-panel-top{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 6px 0 16px;border-bottom:1px solid var(--llogm-linea);font-size:17px}
.llogm-panel-cuerpo{overflow:auto;-webkit-overflow-scrolling:touch;height:calc(100% - 56px)}

/* Menú lateral */
.llogm-menu{top:0;bottom:0;left:0;width:min(84vw,340px);transform:translateX(-102%);transition:transform .24s cubic-bezier(.2,.8,.2,1);padding-top:env(safe-area-inset-top);box-shadow:8px 0 30px rgba(0,0,0,.18)}
.llogm-menu.abierto{transform:none}
.llogm-lista,.llogm-lista ul{list-style:none;margin:0;padding:0}
.llogm-lista>li>a{display:block;padding:15px 18px;font-size:17px;font-weight:600;color:var(--llogm-negro);text-decoration:none;border-bottom:1px solid var(--llogm-linea)}
.llogm-lista ul{background:#FAFAFB}
.llogm-lista ul li a{display:block;padding:11px 18px 11px 32px;font-size:15px;color:var(--llogm-tinta);text-decoration:none;border-bottom:1px solid var(--llogm-linea)}
.llogm-lista li.current-menu-item>a{color:var(--llogm-rojo)}
.llogm-vacio{padding:18px;color:var(--llogm-gris);font-size:14px}
.llogm-menu-pie{padding:14px 18px 24px;display:flex;flex-direction:column;gap:12px}
.llogm-menu-pie a{display:flex;align-items:center;gap:10px;color:var(--llogm-negro);text-decoration:none;font-weight:600}
.llogm-menu-pie a:last-child{color:var(--llogm-gris);font-weight:500}
.llogm-menu-pie svg{width:20px;height:20px}

/* Búsqueda: reemplaza el encabezado */
.llogm-buscar{top:0;left:0;right:0;height:calc(var(--llogm-head) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--llogm-linea);transform:translateY(-102%);transition:transform .2s}
.llogm-buscar.abierto{transform:none}
.admin-bar .llogm-buscar{top:32px}
@media (max-width:782px){.admin-bar .llogm-buscar{top:46px}}
.llogm-form{display:flex;align-items:center;height:var(--llogm-head);padding:0 6px 0 12px;gap:2px}
.llogm-form input[type=search]{flex:1;min-width:0;height:40px;border:0;border-radius:10px;background:#F2F2F4;padding:0 14px;font:inherit;font-size:16px;color:var(--llogm-negro);outline:none}
.llogm-form input[type=search]:focus{box-shadow:inset 0 0 0 2px var(--llogm-rojo)}

/* Hoja de Pepe: pantalla completa, tapa la barra; el chat recibe toda la altura */
.llogm-hoja{position:fixed;left:0;right:0;top:0;bottom:calc(var(--llogm-pill) + env(safe-area-inset-bottom));z-index:9989;background:var(--llogm-papel);transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
.llogm-hoja.abierto{transform:none}
.llogm-hoja-top{flex:none;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;border-bottom:1px solid var(--llogm-linea);background:var(--llogm-head-bg);color:var(--llogm-head-ico)}
.llogm-hoja-top .llogm-ib{color:var(--llogm-head-ico)}
.llogm-hoja-titulo{font-size:16px;font-weight:700;letter-spacing:-.01em}
.llogm-hoja-cuerpo{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.llogm-hoja-cuerpo>*{min-height:100%}
.admin-bar .llogm-hoja{top:46px}

/* Sin desplazamiento del fondo cuando hay panel abierto */
body.llogm-bloqueo{overflow:hidden!important;touch-action:none}

/* App instalada: sin barra de navegador, damos un poco más de aire arriba */
@media (display-mode:standalone){.llogm-head{padding-top:max(env(safe-area-inset-top),6px)}}

@media (prefers-reduced-motion:reduce){.llogm-menu,.llogm-buscar,.llogm-hoja,.llogm-fondo,.llogm-bar,.llogm-burbuja{transition:none}}

/* Promociones [llogm_promos] — se ven en cualquier ancho; en escritorio simplemente son tarjetas más anchas */
.llogm-promos{margin:0 0 8px;font-family:var(--llogm-font)}
.llogm-promos-pista{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 16px 6px;margin:0 -16px;outline:none}
.llogm-promos-pista::-webkit-scrollbar{display:none}
.llogm-promo{flex:0 0 min(84%,340px);scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-end;min-height:150px;border-radius:16px;overflow:hidden;background:var(--llogm-negro);color:#fff;text-decoration:none;position:relative;-webkit-tap-highlight-color:transparent}
.llogm-promo:last-child{margin-right:16px}
.llogm-promo-img{position:absolute;inset:0;background:#2a2a2e center/cover no-repeat}
.llogm-promo.con-imagen .llogm-promo-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,20,0) 30%,rgba(17,17,20,.86) 100%)}
.llogm-promo-cuerpo{position:relative;padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px}
.llogm-promo-badge{align-self:flex-start;background:var(--llogm-rojo);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 8px;border-radius:6px;margin-bottom:4px}
.llogm-promo-titulo{font-size:18px;font-weight:800;line-height:1.15;letter-spacing:-.01em}
.llogm-promo-texto{font-size:13px;line-height:1.35;color:rgba(255,255,255,.82)}
a.llogm-promo:active{transform:scale(.985)}
.llogm-promos-puntos{display:flex;justify-content:center;gap:6px;margin-top:8px}
.llogm-promos-puntos i{width:6px;height:6px;border-radius:50%;background:#D5D5DA;transition:background .2s,width .2s}
.llogm-promos-puntos i.on{background:var(--llogm-rojo);width:16px;border-radius:3px}
.llogm-promos-pista:focus-visible{box-shadow:0 0 0 2px var(--llogm-rojo)}

/* Indicador de carga: velo gris + círculo girando */
.llogm-carga{position:fixed;inset:0;z-index:10000;background:rgba(17,17,20,.28);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .18s}
.llogm-carga.activa{opacity:1;pointer-events:auto}
.llogm-carga-aro{width:44px;height:44px;border-radius:50%;border:4px solid rgba(255,255,255,.35);border-top-color:#fff;animation:llogm-giro .8s linear infinite;box-shadow:0 4px 18px rgba(0,0,0,.25)}
@keyframes llogm-giro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.llogm-carga-aro{animation-duration:2s}}

/* [llogm_saludo] */
.llogm-saludo{padding:20px 16px 0;font-family:var(--llogm-font)}
.llogm-saludo h1{margin:0;font-size:24px;font-weight:800;line-height:1.15;letter-spacing:-.015em;color:var(--llogm-negro)}
.llogm-saludo p{margin:6px 0 0;font-size:14px;color:var(--llogm-gris)}
.llogm-saludo p b,.llogm-saludo p strong{color:var(--llogm-negro);font-weight:600}
