/* La paleta vive en css/theme.css (generado por: npm run brand) */ *{box-sizing:border-box; margin:0; padding:0;} /* El rebote elástico del celular (arrastrar más allá del límite de la página) deja ver lo que hay DETRÁS de lo que pintamos. Dos arreglos: 1) el fondo de también queda oscuro (antes solo lo tenía, así que el rebote mostraba blanco liso). 2) overscroll-behavior:none corta el rebote en la página entera, y "contain" en la lista de mensajes del chat evita que su propio rebote se "pase" a la página de atrás (que es como se veía el fondo con el JUGAR amarillo tapado al arrastrar de más adentro del chat). */ html{ background:var(--bg-deep, #0a0a0a); overscroll-behavior:none; } body{ font-family:'Inter', sans-serif; /* 100vh en celular mide la pantalla SIN la barra del navegador, así que siempre queda más alto que lo que se ve y aparece un scroll hacia una zona vacía. 100dvh mide lo visible de verdad. La línea de 100vh queda como respaldo para navegadores viejos que no entienden dvh. */ min-height:100vh; min-height:100dvh; color:#fff; overscroll-behavior:none; } /* En celular, queda SIEMPRE fijo (no solo mientras el chat está abierto). El porqué: cuando el teclado abre, iOS mueve la página sola para que el campo de texto quede a la vista — y arrastra con ella a TODO lo que es position:fixed (el chat, la barra JUGAR), aunque el CSS les diga que no se muevan. Confirmado con datos reales de un iPhone: el chat medía 311px más arriba de lo que el CSS pedía, calzando exacto con cuánto había corrido la página. La única forma de que iOS no tenga nada para mover es que la página no tenga nada para scrollear — por eso acá ya no alternamos "bloqueado/desbloqueado" al abrir y cerrar el chat (eso tenía además OTRO problema: alternarlo muchas veces es un caso conocido donde el navegador empieza a tratar mal a los fixed de adentro). Total, el diseño de celular ya está pensado para entrar sin scroll en una pantalla, así que no hace falta que la landing pueda scrollear nunca. */ html.is-mobile-device body{ position:fixed; inset:0; width:100%; height:100%; overflow:hidden; } /* ============ LANDING ============ */ body.landing{ background: radial-gradient(120% 100% at 50% 0%, var(--bg-light) 0%, var(--bg-mid) 45%, var(--bg-deep) 100%); overflow-x:hidden; position:relative; } .hero{ max-width:520px; margin:0 auto; padding:44px 24px 120px; text-align:center; position:relative; z-index:1; } .crown{ font-size:44px; display:block; margin-bottom:8px; animation: floaty 3.2s ease-in-out infinite; } @keyframes floaty{ 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-6px) rotate(2deg);} } /* Logo de la marca en la portada. Se muestra la imagen tal cual (ya trae su propio fondo negro, que se funde con el de la página). */ .brand-logo{ display:block; width:min(300px, 78%); height:auto; margin:0 auto 10px; filter: drop-shadow(0 0 34px rgba(var(--accent-2-rgb),.28)); } .brand{ font-family:'Baloo 2', sans-serif; font-weight:800; font-size:56px; letter-spacing:1px; background: linear-gradient(180deg, var(--accent-1) 0%, var(--accent-2) 55%, var(--accent-3) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 0 40px rgba(var(--accent-2-rgb),.35); margin-bottom:18px; } .tagline{ color:var(--muted); font-size:16px; line-height:1.5; max-width:340px; margin:0 auto 28px; } .btn-play{ display:flex; align-items:center; justify-content:center; gap:12px; width:100%; padding:22px; border:none; /* Único botón con degradé "al costado" (violeta -> rosa/magenta) — el resto de los botones del sitio usa el degradé parejo de --accent-* (ver .ios-help-ok etc.); este es un capricho de marca solo para JUGAR, con colores fijos en vez de tokens para no afectar nada más. */ border-radius:18px; background: linear-gradient(115deg, #7e2ed5 0%, #b83fa8 55%, #e0356f 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset, 0 10px 30px rgba(184,63,168,.35); color:var(--ink); font-family:'Baloo 2', sans-serif; font-weight:700; font-size:26px; cursor:pointer; transition: transform .15s ease, box-shadow .15s ease; margin-bottom:26px; } .btn-play:hover{ transform:translateY(-2px); } .btn-play svg{ width:20px; height:20px; } .ask{ font-family:'Baloo 2', sans-serif; font-weight:600; letter-spacing:.5px; color:var(--accent-1); font-size:14px; margin-bottom:12px; } .row{ display:flex; gap:14px; margin-bottom:26px; } .pill{ flex:1; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); border-radius:16px; padding:22px 12px; cursor:pointer; transition: background .15s ease, transform .15s ease; } .pill:hover{ background: rgba(255,255,255,.1); transform:translateY(-2px); } .pill .ic{ font-size:24px; display:block; margin-bottom:8px; } .pill .lb{ font-family:'Baloo 2', sans-serif; font-weight:700; font-size:15px; letter-spacing:.3px; } .pill-acento{ background:rgba(var(--accent-2-rgb),.08); border:1.5px solid var(--accent-1); } .pill-acento:hover{ background:rgba(var(--accent-2-rgb),.18); } .pill-acento .ic, .pill-acento .lb{ color:#fff; } #premiosPill{ position:relative; overflow:visible; } .pill-nuevo-tag{ position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:#0a120a; border:1px solid #39ff6a; color:#39ff6a; font-family:'Baloo 2', sans-serif; font-weight:800; font-size:9.5px; letter-spacing:.08em; padding:2px 9px; border-radius:20px; white-space:nowrap; text-shadow:0 0 4px #39ff6a, 0 0 9px #39ff6a; box-shadow:0 0 6px rgba(57,255,106,.65), 0 0 16px rgba(57,255,106,.35); pointer-events:none; } .pill-notif-dot{ position:absolute; top:8px; right:10px; width:11px; height:11px; border-radius:50%; background:#ff3b3b; box-shadow:0 0 0 2px var(--bg-deep), 0 0 7px rgba(255,59,59,.75); animation: pillNotifPulse 1.4s ease-in-out infinite; } @keyframes pillNotifPulse{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.2); } } @media (prefers-reduced-motion: reduce){ .pill-nuevo-tag, .pill-notif-dot, .sorteo-countdown-sorteando{ animation:none; } } .foot{ color:var(--muted); font-size:13px; opacity:.8; } /* ============ REGISTRO (landing de publicidad) ============ */ .signup-wrap{ min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; } .signup-card{ width:100%; max-width:400px; text-align:center; background: rgba(var(--bg-mid-rgb),.72); border:1px solid rgba(var(--accent-2-rgb),.25); border-radius:22px; padding:36px 28px; box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 25px 70px rgba(0,0,0,.5), 0 0 40px rgba(var(--accent-2-rgb),.18); backdrop-filter: blur(6px); } .signup-avatar{ width:76px; height:76px; margin:0 auto 18px; border-radius:20px; background: linear-gradient(160deg, rgba(var(--accent-1-rgb),.18), rgba(var(--accent-3-rgb),.3)); border:1px solid rgba(var(--accent-2-rgb),.3); display:flex; align-items:center; justify-content:center; font-size:38px; } .signup-avatar img{ width:56px; height:56px; border-radius:14px; object-fit:cover; } .signup-title{ font-family:'Baloo 2', sans-serif; font-weight:800; font-size:24px; color:#fff; margin-bottom:6px; } .signup-title span{ background: linear-gradient(180deg, var(--accent-1), var(--accent-3)); -webkit-background-clip:text; background-clip:text; color:transparent; } .signup-sub{ color:var(--muted); font-size:13.5px; margin-bottom:22px; } .bonus-banner{ background: linear-gradient(135deg, rgba(var(--accent-3-rgb),.4), rgba(var(--accent-2-rgb),.15)); border:1px solid rgba(var(--accent-2-rgb),.35); border-radius:14px; padding:14px 16px; margin-bottom:20px; font-family:'Baloo 2', sans-serif; font-weight:700; font-size:13.5px; color:var(--accent-0); line-height:1.4; } .bonus-banner span{ display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:12px; color:var(--muted); margin-top:4px; } .signup-error{ color:#ff8a8a; font-size:12.5px; min-height:16px; margin-bottom:4px; } .signup-input{ width:100%; padding:14px 16px; border-radius:12px; margin-bottom:16px; border:1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color:#fff; font-size:16px; } .signup-input::placeholder{ color:var(--muted); } .signup-input:focus{ outline:none; border-color:var(--accent-2); } .field-label{ display:block; text-align:left; font-size:12.5px; color:var(--muted); margin:-4px 0 6px; font-weight:600; } .password-field{ position:relative; } .password-field input{ padding-right:46px; } .password-toggle{ position:absolute; right:4px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; padding:6px 10px; color:var(--muted); display:flex; align-items:center; justify-content:center; } .password-toggle:hover{ color:#fff; } .password-toggle svg{ width:20px; height:20px; } .login-card .password-toggle{ width:auto; padding:6px 10px; margin-bottom:0; border-radius:0; background:none; color:#999; position:absolute; right:4px; top:50%; transform:translateY(-50%); } .login-card .password-toggle:hover{ color:#333; background:none; } .login-card .field-label{ color:#777; } .signup-btn{ width:100%; padding:16px; border:none; border-radius:14px; cursor:pointer; background: linear-gradient(180deg, var(--accent-0) 0%, var(--accent-2) 55%, var(--accent-3) 100%); color:var(--ink); font-family:'Baloo 2', sans-serif; font-weight:700; font-size:15px; letter-spacing:.3px; box-shadow: 0 10px 28px rgba(var(--accent-2-rgb),.35); margin-bottom:16px; transition: transform .15s ease; } .signup-btn:hover{ transform:translateY(-1px); } .signup-btn:disabled{ opacity:.6; cursor:wait; transform:none; } .signup-trust{ color:var(--muted); font-size:11.5px; } .login-link{ margin-top:16px; font-size:12px; } .login-link a{ color:var(--accent-2); text-decoration:underline; } /* ============ PREGUNTAS FRECUENTES ============ */ .faq-wrap{ min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; } .faq-card{ width:100%; max-width:560px; text-align:center; background: rgba(var(--bg-mid-rgb),.72); border:1px solid rgba(var(--accent-2-rgb),.25); border-radius:22px; padding:36px 28px; box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 25px 70px rgba(0,0,0,.5), 0 0 40px rgba(var(--accent-2-rgb),.18); backdrop-filter: blur(6px); } .faq-list{ text-align:left; margin:22px 0 6px; display:flex; flex-direction:column; gap:8px; } .faq-item{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:12px; overflow:hidden; } .faq-question{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; background:none; border:none; padding:14px 16px; cursor:pointer; text-align:left; color:#fff; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:14px; } .faq-chevron{ transition:transform .2s ease; color:var(--muted); flex-shrink:0; } .faq-item.open .faq-chevron{ transform:rotate(180deg); } .faq-answer{ max-height:0; overflow:hidden; transition:max-height .25s ease, padding .25s ease; padding:0 16px; } .faq-item.open .faq-answer{ max-height:300px; padding:0 16px 14px; } .faq-answer p{ color:var(--muted); font-size:13px; line-height:1.55; } .faq-support{ margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); text-align:center; } .faq-support-title{ color:#fff; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:14.5px; margin-bottom:6px; } .faq-support-sub{ color:var(--muted); font-size:12.5px; line-height:1.5; margin-bottom:14px; } /* Burbujita de WhatsApp flotante: el ícono solo, sin ningún texto al lado, se pierde de vista — por eso el cartelito con la explicación pegado. */ .whatsapp-fab-wrap{ position:fixed; bottom:24px; right:24px; z-index:50; display:flex; align-items:center; gap:10px; text-decoration:none; } .whatsapp-tag{ background:#fff; font-family:'Inter',sans-serif; position:relative; padding:10px 14px; border-radius:16px; max-width:200px; text-align:right; display:flex; flex-direction:column; gap:2px; box-shadow:0 6px 20px rgba(0,0,0,.3); animation: waTagIn .4s ease .5s both; } .whatsapp-tag-main{ color:#075e54; font-weight:700; font-size:12px; line-height:1.3; } .whatsapp-tag-sub{ color:#667781; font-weight:500; font-size:10px; line-height:1.3; } .whatsapp-tag::after{ content:""; position:absolute; top:50%; right:-6px; margin-top:-6px; border-width:6px 0 6px 6px; border-style:solid; border-color:transparent transparent transparent #fff; } .whatsapp-fab{ width:58px; height:58px; border-radius:50%; flex-shrink:0; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(37,211,102,.45); transition:transform .15s ease; } .whatsapp-fab-wrap:hover .whatsapp-fab{ transform:scale(1.06); } .whatsapp-fab svg{ width:30px; height:30px; } @keyframes waTagIn{ from{ opacity:0; transform:translateX(10px); } to{ opacity:1; transform:translateX(0); } } /* En celular angosto, el cartelito + el ícono no entran cómodos al lado del otro — el cartelito pasa a acomodarse arriba del ícono en vez de al costado. */ @media (max-width:420px){ .whatsapp-fab-wrap{ flex-direction:column; align-items:flex-end; gap:8px; } .whatsapp-tag{ max-width:160px; } .whatsapp-tag::after{ top:auto; bottom:-6px; right:20px; margin-top:0; border-width:6px 6px 0 6px; border-color:#fff transparent transparent transparent; } } /* ============ LOGOUT (cliente) ============ */ .client-logout-btn{ position:fixed; top:16px; left:16px; z-index:55; display:flex; align-items:center; gap:6px; background:rgba(var(--bg-deep-rgb),.55); color:var(--muted); border:1px solid rgba(255,255,255,.15); border-radius:30px; padding:8px 14px; cursor:pointer; font-family:'Inter', sans-serif; font-size:13px; font-weight:600; backdrop-filter:blur(4px); transition: background .15s ease, color .15s ease; } .client-logout-btn:hover{ background:rgba(255,255,255,.12); color:#fff; } .client-logout-btn svg{ width:18px; height:18px; flex-shrink:0; } .my-username-chip{ position:fixed; top:16px; right:16px; z-index:55; display:flex; align-items:center; gap:6px; background:rgba(var(--bg-deep-rgb),.55); color:var(--accent-1); border:1px solid rgba(var(--accent-2-rgb),.35); border-radius:30px; padding:8px 14px; font-family:'Inter', sans-serif; font-size:13px; font-weight:600; backdrop-filter:blur(4px); } .my-username-chip b{ color:var(--accent-2); } /* ============ AJUSTE PARA CELULARES ============ En un celular el diseño de escritorio obligaba a scrollear ~340px para llegar al final. Acá se comprimen los espacios (que estaban pensados para una pantalla grande) para que entre todo de una, sin subir y bajar. Solo achicamos separaciones y el logo: no se saca ninguna función. */ html.is-mobile-device .hero{ padding:16px 18px 16px; } html.is-mobile-device .brand-logo{ width:min(176px, 50%); margin-bottom:6px; } html.is-mobile-device .tagline{ font-size:13.5px; line-height:1.4; margin-bottom:16px; max-width:290px; } html.is-mobile-device .btn-play{ padding:16px; font-size:22px; margin-bottom:14px; border-radius:14px; } html.is-mobile-device .ask{ font-size:12.5px; margin-bottom:10px; } html.is-mobile-device .row{ gap:10px; margin-bottom:12px; } html.is-mobile-device .pill{ padding:14px 8px; border-radius:13px; } html.is-mobile-device .pill .ic{ font-size:20px; margin-bottom:4px; } html.is-mobile-device .pill .lb{ font-size:13.5px; } html.is-mobile-device .canje-card{ padding:12px 12px; margin-bottom:12px; border-radius:14px; } /* --- Con el cartel de bonus a la vista todo se aprieta un poco más, para que la barra termine ARRIBA de la burbuja del chat y no haya que esconderla. Al cerrar el cartel, estas reglas dejan de aplicar y el diseño vuelve a respirar, ocupando el lugar que quedó libre. --- */ html.is-mobile-device.promo-a-la-vista .hero{ padding:10px 18px 12px; } html.is-mobile-device.promo-a-la-vista .brand-logo{ width:min(140px, 40%); margin-bottom:4px; } html.is-mobile-device.promo-a-la-vista .tagline{ font-size:12.5px; margin-bottom:10px; max-width:270px; } html.is-mobile-device.promo-a-la-vista .btn-play{ padding:12px; font-size:20px; margin-bottom:11px; } html.is-mobile-device.promo-a-la-vista .ask{ font-size:12px; margin-bottom:7px; } html.is-mobile-device.promo-a-la-vista .row{ margin-bottom:11px; } html.is-mobile-device.promo-a-la-vista .pill{ padding:11px 8px; } html.is-mobile-device.promo-a-la-vista .pill .ic{ font-size:18px; margin-bottom:3px; } html.is-mobile-device.promo-a-la-vista .canje-card{ padding:10px; margin-bottom:10px; } html.is-mobile-device.promo-a-la-vista .canje-tit{ margin-bottom:6px; } html.is-mobile-device.promo-a-la-vista .canje-form input{ padding:9px 10px; } html.is-mobile-device.promo-a-la-vista .canje-form button{ padding:9px 13px; } html.is-mobile-device .canje-tit{ font-size:13px; margin-bottom:8px; } html.is-mobile-device .canje-form input{ padding:10px 12px; } html.is-mobile-device .canje-form button{ padding:10px 14px; } html.is-mobile-device .foot{ font-size:11.5px; } /* En celular esta píldora sobra: los botones CARGAR y RETIRAR ya están a la vista en la misma pantalla, y encima obligaba a dejar 120px libres abajo para que no tapara el "+18". */ html.is-mobile-device .cta-pill{ display:none; } /* En celular la promo pasa a ser una barra baja pegada abajo. Arriba tapaba el logo, porque al compactar el diseño el contenido subió. Abajo no tapa nada, y sigue lejos del botón Salir (que era el motivo de no ponerla ahí). El hueco de la derecha es para la burbuja del chat. */ /* En celular la promo deja de flotar y se ubica en el contenido, justo debajo del canje de códigos. Antes estaba arriba y tapaba el logo. */ /* El wrapper (.promo-stack) es el que decide fixed-vs-relative, top/left y el espaciado ENTRE los carteles apilados; acá solo queda lo que cambia dentro de cada cartel individual (se acuesta, se achica). */ html.is-mobile-device .promo-stack{ position:relative; top:auto; left:auto; right:auto; bottom:auto; width:auto; z-index:auto; gap:8px; margin:0 0 10px; } html.is-mobile-device .install-promo{ width:auto; margin:0; flex-direction:row; align-items:center; gap:8px; padding:9px 28px 9px 11px; border-radius:12px; animation:none; /* ya no entra desde arriba: ahora es parte de la página */ } /* La burbuja del chat ya no hace falta esconderla: al compactar un poco más el contenido cuando el cartel está a la vista, la barra termina justo arriba de la burbuja y conviven sin pisarse. */ /* El "juego responsable · +18" pasa al pie de la pantalla: es un aviso legal, su lugar natural es abajo del todo, y así no queda un hueco en el medio. */ html.is-mobile-device .foot{ position:fixed; left:0; right:0; bottom:10px; z-index:2; pointer-events:none; } html.is-mobile-device .install-promo-gift{ font-size:17px; flex-shrink:0; } html.is-mobile-device .install-promo-text{ flex:1; min-width:0; font-size:10.5px; line-height:1.25; padding-right:0; /* Como máximo dos renglones: si el texto se parte en cuatro, la barra crece y termina tapando el canje de códigos y el aviso de +18. */ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } html.is-mobile-device .install-promo-btn{ width:auto; flex-shrink:0; padding:8px 11px; font-size:10.5px; border-radius:9px; letter-spacing:0; } html.is-mobile-device .install-promo-close{ top:4px; right:6px; font-size:13px; padding:3px 5px; line-height:1; } /* .hero tiene position:relative + z-index:1 (más arriba en este archivo), así que crea su PROPIO contexto de apilamiento — un hijo position:fixed con z-index alto queda atrapado adentro de ese contexto (compite como si fuera z-index:1 contra el chat, que tiene z-index:60, y pierde). Subir acá el z-index de .hero por encima del chat es lo que deja que sus hijos fixed (los avisos de abajo) se vean realmente por encima. */ html.is-mobile-device.chat-abierto .hero{ z-index:76; } /* Con el chat abierto en celular, la landing (y con ella cualquier bonus/notificación activo: agregar a inicio, bienvenida, premio semanal) queda con visibility:hidden detrás del chat. Para ese caso puntual, los tres dejan de vivir adentro de la landing y pasan a flotar arriba de todo, como notificaciones desplegadas — así el jugador los sigue viendo con el chat abierto y puede canjear sin tener que cerrarlo. El "top" por defecto es 54px; js/client.js (reposicionarNotifsSobreChat) lo ajusta de verdad según la altura real de la barra del chat, y corre para abajo a los que estén más abajo en la fila si hay varios a la vez, para que no se pisen entre sí. */ html.is-mobile-device.chat-abierto #installPromo, html.is-mobile-device.chat-abierto #bienvenidaPromo, html.is-mobile-device.chat-abierto #premioAlerta{ visibility:visible; position:fixed; top:54px; left:8px; right:8px; z-index:75; width:auto; margin:0; box-shadow:0 10px 30px rgba(0,0,0,.5); animation: bienvenidaNotifDrop .35s ease; } @keyframes bienvenidaNotifDrop{ from{ transform:translateY(-16px); opacity:0; } to{ transform:translateY(0); opacity:1; } } @media (prefers-reduced-motion: reduce){ html.is-mobile-device.chat-abierto #installPromo, html.is-mobile-device.chat-abierto #bienvenidaPromo, html.is-mobile-device.chat-abierto #premioAlerta{ animation:none; } } /* ============ CANJEAR CÓDIGO (cliente) ============ */ .canje-card{ background:rgba(255,255,255,.05); border:1px solid rgba(var(--accent-2-rgb),.3); border-radius:16px; padding:16px 14px; margin-bottom:18px; } .canje-tit{ font-family:'Baloo 2', sans-serif; font-weight:700; font-size:14px; color:var(--accent-1); margin-bottom:10px; letter-spacing:.2px; } .canje-form{ display:flex; gap:8px; } .canje-form input{ flex:1; min-width:0; padding:12px 14px; border-radius:11px; border:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.25); color:#fff; font-size:16px; font-weight:700; letter-spacing:1.5px; text-align:center; text-transform:uppercase; -webkit-appearance:none; } .canje-form input::placeholder{ color:var(--muted); font-weight:500; letter-spacing:.5px; font-size:13px; } .canje-form input:focus{ outline:none; border-color:var(--accent-2); } .canje-form button{ flex-shrink:0; padding:12px 18px; border:none; border-radius:11px; cursor:pointer; background:linear-gradient(180deg, var(--accent-0) 0%, var(--accent-2) 55%, var(--accent-3) 100%); color:var(--ink); font-family:'Baloo 2', sans-serif; font-weight:800; font-size:13px; } .canje-form button:disabled{ opacity:.6; cursor:wait; } .canje-msg{ margin-top:10px; font-size:12.5px; line-height:1.45; border-radius:9px; padding:9px 11px; text-align:left; } .canje-msg.ok{ background:rgba(14,155,98,.18); border:1px solid rgba(14,155,98,.5); color:#a7f3d0; } .canje-msg.error{ background:rgba(255,107,107,.12); border:1px solid rgba(255,107,107,.4); color:#ffb4b4; } /* ============ CANJES EN EL PANEL DE ADMIN ============ */ .msg.msg-canje{ border-left:3px solid var(--accent-2); } .canje-box{ margin-top:8px; padding-top:8px; border-top:1px dashed rgba(0,0,0,.15); display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .canje-pend{ font-size:11.5px; font-weight:700; color:#b26a00; } .canje-ok{ font-size:11.5px; font-weight:700; color:var(--green); } .canje-btn{ padding:6px 12px; border:none; border-radius:14px; cursor:pointer; background:var(--green); color:#fff; font-size:11.5px; font-weight:700; } .canje-btn:hover{ background:var(--green-dark); } .canje-btn:disabled{ opacity:.6; cursor:wait; } /* ============ MODAL DE BONUS (admin) ============ */ .bonus-lbl{ display:block; text-align:left; font-size:12.5px; font-weight:600; color:var(--wa-text); margin:12px 0 5px; } .bonus-lbl small{ font-weight:400; color:#667781; } .bonus-fechas{ display:flex; gap:8px; } .bonus-fechas input{ flex:1; min-width:0; } .bonus-check{ display:flex; align-items:flex-start; gap:9px; margin:14px 0 10px; font-size:12.5px; color:var(--wa-text); text-align:left; cursor:pointer; } .bonus-check input{ margin-top:2px; flex-shrink:0; width:16px; height:16px; } .bonus-check small{ display:block; color:#667781; font-size:11.5px; margin-top:2px; } .bonus-alcance{ background:#f0f2f5; border-radius:9px; padding:9px 11px; font-size:12px; color:#667781; margin-bottom:8px; text-align:left; } .bonus-sep{ margin-top:20px; padding-top:14px; border-top:1px solid #e2e2e2; font-size:12.5px; font-weight:700; color:var(--wa-text); text-align:left; margin-bottom:8px; } .codigo-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #f0f2f5; text-align:left; } .codigo-info{ flex:1; min-width:0; } .codigo-nom{ font-family:'Baloo 2', sans-serif; font-weight:700; font-size:13.5px; color:var(--wa-text); } .codigo-sub{ font-size:11.5px; color:#667781; margin-top:1px; } .codigo-off{ display:inline-block; font-family:'Inter',sans-serif; font-size:10px; font-weight:600; background:#ffe0e0; color:#c0392b; border-radius:8px; padding:1px 7px; margin-left:4px; vertical-align:1px; } .codigo-vig{ display:inline-block; font-family:'Inter',sans-serif; font-size:10px; font-weight:600; background:#e8f5e9; color:#1b7a43; border-radius:8px; padding:1px 7px; margin-left:4px; vertical-align:1px; } .codigo-delete-btn{ flex-shrink:0; width:30px; height:30px; border:none; border-radius:50%; background:rgba(255,107,107,.14); color:#ff6b6b; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:background .15s; } .codigo-delete-btn:hover{ background:rgba(255,107,107,.28); } .codigo-delete-btn:disabled{ opacity:.5; cursor:wait; } /* Editar (sorteos): mismo tamaño/forma que borrar, pero neutro — no es una acción destructiva, no tiene que verse roja. */ .sorteo-editar-btn{ background:rgba(0,0,0,.06); color:#667781; } .sorteo-editar-btn:hover{ background:rgba(0,0,0,.12); } /* Estado de cada sorteo en la lista del admin. */ .sorteo-badge{ display:inline-block; font-family:'Inter',sans-serif; font-size:10px; font-weight:600; background:#eef0f3; color:#667781; border-radius:8px; padding:1px 7px; margin-left:4px; vertical-align:1px; } .sorteo-badge-activo{ background:#fff1e0; color:#c2660a; } .sorteo-badge-ok{ background:#e8f5e9; color:#1b7a43; } .sorteo-badge-off{ background:#ffe0e0; color:#c0392b; } /* ============ PROMO "AGREGÁ LA APP A TU INICIO" ============ Va arriba a la izquierda, DEBAJO del botón Salir y bien separada (el botón Salir termina cerca de los 51px, así que arrancamos en 78px) para que nadie cierre sesión sin querer al ir a tocar la promo. */ /* El wrapper es "fixed" y ubica el conjunto; cada cartel adentro es un ítem de flex normal, así que apilan solos y sin huecos sea cual sea la combinación que esté visible (una, otra, las dos, o ninguna). */ .promo-stack{ position:fixed; top:78px; left:16px; z-index:54; width:min(260px, calc(100vw - 32px)); display:flex; flex-direction:column; gap:12px; } .install-promo{ position:relative; width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px 14px 12px; border-radius:16px; background:rgba(var(--bg-deep-rgb),.8); border:1.5px solid var(--accent-2); box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 22px rgba(var(--accent-2-rgb),.28); animation: promoIn .35s ease-out; } @keyframes promoIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } } /* Más vida: el regalito se hamaca y el botón respira con un brillo — para que el cartel llame más la atención sin volverse molesto. */ @keyframes giftWiggle{ 0%, 8%, 100%{ transform:rotate(0deg); } 2%{ transform:rotate(-14deg); } 4%{ transform:rotate(11deg); } 6%{ transform:rotate(-6deg); } } .install-promo-gift{ font-size:22px; line-height:1; display:inline-block; transform-origin:50% 70%; animation:giftWiggle 2.6s ease-in-out infinite; } .install-promo-text{ color:#fff; font-size:13px; line-height:1.4; padding-right:16px; } .install-promo-text b{ color:var(--accent-2); font-weight:800; } @keyframes btnPulse{ 0%, 100%{ box-shadow:0 0 0 0 rgba(var(--accent-2-rgb),.55); transform:scale(1); } 50%{ box-shadow:0 0 0 9px rgba(var(--accent-2-rgb),0); transform:scale(1.035); } } .install-promo-btn{ width:100%; padding:11px 10px; border:none; border-radius:11px; cursor:pointer; background:linear-gradient(180deg, var(--accent-0) 0%, var(--accent-2) 55%, var(--accent-3) 100%); color:#fff; font-family:'Baloo 2', sans-serif; font-weight:800; font-size:12.5px; letter-spacing:.3px; transition: transform .15s ease; animation: btnPulse 2.2s ease-in-out infinite; } .install-promo-btn:hover{ animation-play-state:paused; transform:translateY(-1px); } .install-promo-btn:disabled{ opacity:.6; cursor:default; transform:none; animation:none; } .install-promo-close{ position:absolute; top:6px; right:8px; background:none; border:none; color:var(--muted); font-size:14px; cursor:pointer; padding:4px 6px; line-height:1; opacity:.7; } .install-promo-close:hover{ opacity:1; color:#fff; } @media (prefers-reduced-motion: reduce){ .install-promo-gift, .install-promo-btn{ animation:none; } } /* Instrucciones para iPhone */ .ios-help-overlay{ position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(3px); } .ios-help-card{ position:relative; width:100%; max-width:340px; text-align:center; background:linear-gradient(160deg, #1e1a12 0%, #0b0a08 100%); border:1.5px solid var(--accent-2); border-radius:20px; padding:26px 22px 22px; box-shadow:0 20px 60px rgba(0,0,0,.6); max-height:90vh; overflow-y:auto; } .ios-help-img{ width:100%; display:block; border-radius:14px; margin-bottom:16px; } .ios-help-close{ position:absolute; top:10px; right:12px; background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer; padding:4px 6px; line-height:1; } .ios-help-icon{ font-size:36px; margin-bottom:6px; } .ios-help-card h3{ font-family:'Baloo 2', sans-serif; color:var(--accent-1); font-size:21px; margin-bottom:6px; } .ios-help-sub{ color:var(--muted); font-size:13.5px; margin-bottom:16px; } .ios-help-steps{ list-style:none; text-align:left; display:flex; flex-direction:column; gap:12px; margin-bottom:18px; } .ios-help-steps li{ color:#fff; font-size:13.5px; line-height:1.5; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } .ios-step-n{ flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--accent-2); color:var(--ink); font-weight:800; font-size:12px; display:inline-flex; align-items:center; justify-content:center; } .ios-share-ic{ width:15px; height:15px; vertical-align:-2px; color:var(--accent-1); } .ios-help-warn{ background:rgba(var(--accent-2-rgb),.12); border:1px solid rgba(var(--accent-2-rgb),.4); color:var(--accent-1); font-size:12.5px; line-height:1.45; border-radius:10px; padding:10px 12px; margin-bottom:16px; text-align:left; } .ios-help-ok{ width:100%; padding:13px; border:none; border-radius:12px; cursor:pointer; background:linear-gradient(180deg, var(--accent-0) 0%, var(--accent-2) 55%, var(--accent-3) 100%); color:var(--ink); font-family:'Baloo 2', sans-serif; font-weight:800; font-size:15px; } /* Diagnóstico: discreto, solo lo toca quien tiene problemas */ .ios-help-diag{ width:100%; margin-top:10px; background:none; border:none; cursor:pointer; color:var(--muted); font-size:12px; text-decoration:underline; padding:4px; } .ios-help-diag:hover{ color:#fff; } .ref-code-box{ font-family:'Baloo 2', sans-serif; font-weight:800; font-size:26px; letter-spacing:3px; color:var(--accent-1); background:rgba(255,255,255,.06); border:1.5px dashed rgba(var(--accent-2-rgb),.5); border-radius:12px; padding:14px 10px; margin-bottom:16px; } .ref-progress{ margin-top:10px; font-size:12px; color:var(--muted); } .premios-reset-cuenta{ font-size:12px; font-variant-numeric:tabular-nums; color:var(--muted); text-align:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:7px 10px; margin-bottom:12px; } .xp-bar-wrap{ margin:14px 0 16px; text-align:left; } .xp-bar-label{ display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; color:var(--muted); margin-bottom:6px; } .xp-bar-label span:last-child{ font-weight:700; color:var(--accent-1); font-variant-numeric:tabular-nums; } .premios-barra{ position:relative; width:100%; height:18px; background:rgba(255,255,255,.08); border-radius:10px; overflow:hidden; } .premios-barra-fill{ height:100%; background:linear-gradient(90deg, var(--accent-1), var(--accent-2)); border-radius:10px; transition:width .3s ease; } .premios-barra-pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); font-variant-numeric:tabular-nums; pointer-events:none; } .premios-lista{ display:grid; grid-template-columns:1fr 1fr; gap:8px; text-align:left; } .premio-tier{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:8px 10px; font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px; } .premio-tier.ganado{ color:var(--accent-1); border-color:rgba(var(--accent-2-rgb),.4); background:rgba(var(--accent-2-rgb),.08); } .premio-alerta{ display:flex; align-items:center; gap:10px; background:rgba(var(--bg-deep-rgb),.8); border:1px solid rgba(var(--accent-2-rgb),.4); border-radius:14px; padding:12px 14px; margin-bottom:16px; } .premio-alerta-icono{ font-size:26px; } .premio-alerta-texto{ flex:1; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:13.5px; color:#fff; } .premio-alerta-btn{ padding:9px 16px; border:none; border-radius:20px; cursor:pointer; background:linear-gradient(180deg, var(--accent-0) 0%, var(--accent-2) 55%, var(--accent-3) 100%); color:var(--ink); font-family:'Baloo 2',sans-serif; font-weight:800; font-size:12.5px; white-space:nowrap; } .premios-reclamo-bloque{ margin-top:14px; text-align:left; background:rgba(var(--accent-2-rgb),.12); border:1px solid rgba(var(--accent-2-rgb),.4); border-radius:14px; padding:14px; } .premios-reclamo-tit{ font-family:'Baloo 2',sans-serif; font-weight:800; font-size:14px; color:var(--accent-1); margin-bottom:10px; } .premios-reclamo-aviso{ font-size:11.5px; color:#e0a33c; margin-top:8px; line-height:1.4; } .premio-ganado-fila{ font-size:13px; color:#fff; background:rgba(255,255,255,.06); border-radius:10px; padding:9px 10px; margin-bottom:6px; } .premio-ganado-fila:last-child{ margin-bottom:0; } /* Sorteos activos */ .sorteos-vacio{ color:var(--muted); font-size:13px; padding:10px 4px; text-align:left; } .sorteo-card{ text-align:left; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:14px; margin-bottom:12px; } .sorteo-card:last-child{ margin-bottom:0; } .sorteo-img{ width:100%; max-height:380px; object-fit:contain; background:rgba(0,0,0,.25); border-radius:10px; margin-bottom:10px; display:block; } .sorteo-tit{ font-family:'Baloo 2', sans-serif; font-weight:800; font-size:15px; color:var(--accent-1); margin-bottom:6px; } .sorteo-countdown{ font-variant-numeric:tabular-nums; font-weight:800; font-size:15px; color:#fff; background:rgba(var(--accent-2-rgb),.15); border:1px solid rgba(var(--accent-2-rgb),.4); border-radius:10px; padding:8px 10px; margin-bottom:8px; text-align:center; } .sorteo-countdown-sorteando{ font-size:13px; animation:sorteoSorteandoPulso 1.4s ease-in-out infinite; } @keyframes sorteoSorteandoPulso{ 0%,100%{ opacity:1; } 50%{ opacity:.6; } } .sorteo-ganador-box{ font-family:'Baloo 2', sans-serif; font-weight:800; font-size:14.5px; color:var(--ink); text-align:center; background:linear-gradient(180deg, var(--accent-0) 0%, var(--accent-2) 100%); border-radius:10px; padding:12px 10px; } .sorteo-ganador-box-vacio{ font-family:inherit; font-weight:600; font-size:12.5px; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); } .sorteo-tickets{ font-size:12.5px; color:var(--muted); margin-bottom:10px; } .sorteo-tickets b{ color:var(--accent-1); } .sorteo-participar{ display:flex; flex-direction:column; gap:8px; } .sorteo-participar-row{ display:flex; align-items:center; gap:8px; } .sorteo-stepper{ display:flex; align-items:center; gap:0; background:rgba(255,255,255,.06); border-radius:10px; overflow:hidden; } .sorteo-step-btn{ width:32px; height:34px; border:none; background:none; color:var(--accent-1); font-size:18px; font-weight:800; cursor:pointer; } .sorteo-step-btn:hover{ background:rgba(255,255,255,.08); } .sorteo-cant{ width:44px; height:34px; border:none; background:none; color:#fff; text-align:center; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; -moz-appearance:textfield; } .sorteo-cant::-webkit-outer-spin-button, .sorteo-cant::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .sorteo-todos-btn{ flex:1; height:34px; padding:0 10px; border:1px solid rgba(255,255,255,.15); border-radius:10px; cursor:pointer; background:rgba(255,255,255,.06); color:var(--accent-1); font-weight:700; font-size:12px; } .sorteo-todos-btn:hover{ background:rgba(255,255,255,.12); } .sorteo-participar-btn{ width:100%; padding:10px; border:none; border-radius:10px; cursor:pointer; background:linear-gradient(180deg, var(--accent-0) 0%, var(--accent-2) 55%, var(--accent-3) 100%); color:var(--ink); font-family:'Baloo 2', sans-serif; font-weight:800; font-size:12.5px; } .sorteo-participar-btn:disabled{ opacity:.6; cursor:default; } .sorteo-msg{ font-size:12px; margin-top:8px; color:var(--muted); } .sorteo-msg-ok{ color:var(--ink); font-weight:800; font-size:13px; text-align:center; background:linear-gradient(180deg, var(--accent-0) 0%, var(--accent-2) 100%); border-radius:10px; padding:10px 12px; } .sorteo-msg-error{ color:#d33; font-weight:700; } .plan-b{ margin-top:12px; text-align:left; background:rgba(var(--accent-3-rgb),.18); border:1px solid rgba(var(--accent-2-rgb),.35); border-radius:12px; padding:14px 14px 12px; } .plan-b-tit{ color:var(--accent-1); font-size:13px; font-weight:600; margin-bottom:12px; } .plan-b .ios-help-steps{ margin-bottom:0; } .install-diag{ margin-top:10px; text-align:left; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:10px 12px; font-family:ui-monospace, Consolas, monospace; font-size:11px; line-height:1.6; color:var(--muted); } .install-diag b{ color:var(--accent-1); font-weight:600; } /* ============ CHAT WIDGET (cliente) ============ */ .chat-launcher{ position:fixed; bottom:24px; right:24px; width:60px; height:60px; border-radius:50%; background: linear-gradient(180deg, var(--wa-accent-green) 0%, var(--wa-teal-green) 100%); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 8px 24px rgba(var(--accent-2-rgb),.45); z-index:50; border:none; transition: transform .15s ease; } .chat-launcher:hover{ transform:scale(1.06); } .chat-launcher svg{ width:28px; height:28px; } .chat-badge{ position:absolute; top:-4px; right:-4px; background:#ff4757; color:#fff; font-size:11px; font-weight:800; min-width:20px; height:20px; padding:0 4px; border-radius:10px; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg-deep); } .cta-pill{ position:fixed; bottom:96px; right:16px; z-index:49; background:#0b1f18; color:var(--wa-accent-green); border:1.5px solid var(--wa-accent-green); padding:10px 18px; border-radius:30px; font-family:'Baloo 2', sans-serif; font-weight:800; font-size:12px; letter-spacing:.3px; cursor:pointer; white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.4); animation: ctaBounce 2.2s ease-in-out infinite; } @keyframes ctaBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } } .chat-widget{ position:fixed; bottom:24px; right:24px; width:340px; max-width:calc(100vw - 32px); height:520px; max-height:calc(100vh - 48px); background:var(--wa-bg); border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.45); display:flex; flex-direction:column; overflow:hidden; z-index:60; transform:translateY(20px) scale(.97); opacity:0; pointer-events:none; transition: transform .2s ease, opacity .2s ease; } .chat-widget.open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; } /* En celular el chat pasa a ocupar toda la pantalla, y dejamos una barra fija de JUGAR arriba (más z-index que el chat) para que nunca quede tapada. */ .mobile-play-bar{ display:none; position:fixed; top:0; left:0; right:0; height:48px; z-index:70; align-items:center; justify-content:center; background: linear-gradient(180deg, var(--accent-0) 0%, var(--accent-2) 55%, var(--accent-3) 100%); box-shadow:0 4px 16px rgba(0,0,0,.3); } .mobile-play-bar button{ display:flex; align-items:center; justify-content:center; gap:8px; background:none; border:none; width:100%; height:100%; color:var(--ink); font-family:'Baloo 2', sans-serif; font-weight:800; font-size:15px; cursor:pointer; } .mobile-play-bar svg{ width:18px; height:18px; } /* Aviso "ya tenés el juego abierto" — para cuando el navegador no trae la pestaña al frente solo, así el botón JUGAR no parece que no hace nada. */ .play-notice{ position:fixed; bottom:90px; left:50%; z-index:80; transform:translateX(-50%) translateY(8px); max-width:calc(100vw - 32px); text-align:center; background:var(--bg-deep); color:#fff; border:1px solid rgba(var(--accent-2-rgb),.4); padding:12px 20px; border-radius:30px; font-size:13px; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.45); opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease; } .play-notice.show{ opacity:1; transform:translateX(-50%) translateY(0); } /* Se activa solo por JS cuando el dispositivo es celular/tablet de verdad (clase "is-mobile-device" en , ver index.html) — no por el ancho de la ventana, para que una PC de escritorio nunca la dispare. */ html.is-mobile-device .chat-widget{ /* top Y bottom en 0 (no una altura calculada a mano): que el propio navegador arme el alto solo. Antes calculábamos el alto por JavaScript (leyendo visualViewport), pero en iPhone ese cálculo no daba abasto con cómo iOS mueve la página al abrir el teclado — el chat terminaba empujado hacia arriba, con un hueco vacío abajo. Ancladando por los dos extremos en vez de por altura, es el propio navegador el que lo resuelve al re-acomodar la pantalla (funciona así en Android desde siempre, y es la forma pensada para que funcione en iPhone también). */ top:0; left:0; right:0; bottom:0; width:auto; height:auto; max-width:none; max-height:none; border-radius:0; } html.is-mobile-device .chat-widget.open ~ .mobile-play-bar{ display:flex; } /* Blindaje: pase lo que pase con la posición del chat (se vio un hueco real en Android que dejaba ver la landing detrás), mientras el chat está abierto en celular la landing queda invisible por las dudas. No depende de que el chat cubra bien la pantalla — así nunca hay nada real que se pueda "asomar". La clase la pone/saca JS en openChat()/closeChat(). */ html.is-mobile-device.chat-abierto .hero, html.is-mobile-device.chat-abierto .chat-launcher, html.is-mobile-device.chat-abierto .client-logout-btn, html.is-mobile-device.chat-abierto .my-username-chip{ visibility:hidden; } html.is-mobile-device .chat-widget.open{ /* Solo cambia el top (para dejar lugar a la barra JUGAR arriba); bottom sigue en 0 heredado de la regla de arriba, así que el alto lo termina de resolver el navegador solo. */ top:48px; } .chat-head{ background: linear-gradient(90deg, var(--wa-dark-green), var(--wa-teal-green)); padding:14px 16px; display:flex; align-items:center; gap:10px; color:#fff; } .chat-avatar{ width:36px; height:36px; border-radius:50%; background:var(--bg-deep); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; overflow:hidden; } .chat-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; } .chat-head-info{ flex:1; } .chat-head-title{ font-family:'Baloo 2', sans-serif; font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:6px;} .dot{ width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 2px rgba(74,222,128,.3); } .chat-head-sub{ font-size:11px; opacity:.85; } .chat-close{ background:none; border:none; color:#fff; font-size:18px; cursor:pointer; opacity:.85; padding:4px; } /* Tip único (ver TIP_CERRAR_CHAT_KEY en client.js): explica que la ✕ de arriba minimiza/cierra el chat sin perder la conversación. Vive adentro de .chat-widget (que ya es su propio contenedor position:fixed), así que funciona igual en el chat flotante de desktop y en el de pantalla completa de celular sin necesitar ningún cálculo de posición aparte. Sale hacia la IZQUIERDA de la ✕ (con la flecha apuntando a la derecha), pegado arriba — no crece hacia abajo, porque ahí es donde reposicionarNotifsSobreChat() ubica los otros carteles flotantes (bienvenida/premio/instalar), y se pisaban entre sí. */ .chat-tip-cerrar{ position:absolute; top:12px; right:48px; z-index:65; max-width:190px; background:rgba(40,40,40,.97); color:#f2f2f2; border-radius:12px; padding:10px 26px 10px 12px; box-shadow:0 10px 30px rgba(0,0,0,.5); font-size:12.5px; line-height:1.4; animation: chatTipIn .3s ease; } .chat-tip-cerrar-arrow{ position:absolute; top:16px; right:-7px; width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:7px solid rgba(40,40,40,.97); } .chat-tip-cerrar-close{ position:absolute; top:5px; right:5px; background:none; border:none; color:#f2f2f2; opacity:.7; font-size:12px; cursor:pointer; padding:4px; } .chat-tip-cerrar-close:hover{ opacity:1; } @keyframes chatTipIn{ from{ opacity:0; transform:translateX(6px); } to{ opacity:1; transform:translateX(0); } } @media (prefers-reduced-motion: reduce){ .chat-tip-cerrar{ animation:none; } } /* min-height:0 es imprescindible: sin eso, un hijo flex NO se achica por debajo de su contenido. Con una conversación larga la lista se negaba a encoger y empujaba los botones y la casilla de escribir fuera del recuadro (que recorta lo que sobra), así que la casilla desaparecía. */ .chat-body{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:14px; display:flex; flex-direction:column; gap:8px; background:var(--wa-bg); color:var(--wa-text); } /* Puntito de carga mientras esperamos la primera respuesta de Firestore. Reemplaza al viejo mensaje de bienvenida falso, que se quedaba pegado arriba de la conversación real cuando esta llegaba un instante después. */ .chat-loading{ display:flex; gap:5px; align-self:flex-start; padding:10px 4px; } .chat-loading span{ width:7px; height:7px; border-radius:50%; background:var(--wa-time); opacity:.5; animation:chatLoadingBounce 1.1s ease-in-out infinite; } .chat-loading span:nth-child(2){ animation-delay:.15s; } .chat-loading span:nth-child(3){ animation-delay:.3s; } @keyframes chatLoadingBounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-5px); opacity:1; } } @media (prefers-reduced-motion: reduce){ .chat-loading span{ animation:none; opacity:.7; } } .info-card{ background:#fff; border-radius:12px; padding:14px; box-shadow:0 2px 8px rgba(0,0,0,.06); font-size:12.5px; color:var(--wa-text); } .info-card p{ font-weight:600; color:var(--wa-text); margin-bottom:10px; } .info-row{ display:flex; justify-content:space-between; padding:4px 0; color:#555; } .info-row b{ color:var(--wa-text); } .msg{ max-width:80%; padding:8px 12px; border-radius:8px; font-size:13.5px; line-height:1.4; color:var(--wa-text); box-shadow:0 1px 1px rgba(0,0,0,.08); overflow-wrap:break-word; word-break:break-word; } .msg.in{ background:var(--wa-in); align-self:flex-start; border-top-left-radius:0; } .msg.out{ background:var(--wa-out); align-self:flex-end; border-top-right-radius:0; } .msg a{ color:var(--wa-teal-green); text-decoration:underline; word-break:break-all; } .msg a:visited{ color:var(--wa-teal-green); } .msg img{ max-width:100%; max-height:280px; border-radius:8px; margin-top:6px; display:block; cursor:pointer; } .file-card{ display:flex; align-items:center; gap:8px; background:#f0f2f5; border-radius:8px; padding:8px 10px; margin-top:6px; text-decoration:none; } .file-ic{ font-size:20px; } .file-name{ font-size:12px; color:var(--wa-text); word-break:break-all; } /* CBU (m.cbu) que manda "Datos Carga", con botón para copiar solo el número — chat de cliente y de admin. */ .cbu-row{ display:flex; align-items:center; gap:8px; background:#f0f2f5; border-radius:8px; padding:8px 10px; margin-top:6px; } .cbu-number{ font-size:13px; font-weight:700; color:var(--wa-text); word-break:break-all; flex:1; min-width:0; } .cbu-copy-btn{ flex-shrink:0; padding:6px 12px; border:none; border-radius:14px; cursor:pointer; background:var(--wa-teal-green); color:#fff; font-size:11.5px; font-weight:700; white-space:nowrap; } .cbu-copy-btn:hover{ opacity:.9; } /* Cita del mensaje al que se está respondiendo — solo panel admin */ .msg-reply-quote{ display:flex; gap:8px; background:rgba(0,0,0,.05); border-radius:6px; padding:5px 8px; margin-bottom:5px; } .msg-reply-quote::before{ content:""; width:3px; border-radius:2px; background:var(--wa-teal-green); flex-shrink:0; } .msg-reply-quote-sender{ font-weight:700; font-size:12px; color:var(--wa-teal-green); } .msg-reply-quote-text{ font-size:12px; color:var(--wa-time); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } /* Galería de imagen (lightbox) — chat de cliente y de admin */ .lightbox-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:300; padding:48px; animation: fadeIn .15s ease; } .lightbox-img{ max-width:100%; max-height:100%; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5); } .lightbox-close{ position:fixed; top:16px; right:16px; z-index:301; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: background .15s ease; } .lightbox-close:hover{ background:rgba(255,255,255,.28); } /* Acciones de mensaje (editar/borrar) — solo en el panel admin */ .msg{ position:relative; } .msg-actions{ position:absolute; top:-10px; right:8px; display:none; gap:4px; } .msg:hover .msg-actions{ display:flex; } .msg-action-btn{ background:#fff; border:1px solid #ddd; border-radius:50%; width:22px; height:22px; font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.15); padding:0; } .msg-action-btn:hover{ background:#f0f2f5; } .edit-input{ width:100%; padding:6px 8px; border-radius:6px; border:1px solid #ccc; font-size:12.5px; margin-bottom:6px; } textarea.edit-input{ font-family:inherit; resize:none; height:72px; overflow-y:auto; } .edit-save-btn, .edit-cancel-btn{ font-size:11px; padding:4px 10px; border-radius:6px; border:none; margin-right:6px; cursor:pointer; } .edit-save-btn{ background:var(--wa-teal-green); color:#fff; } .edit-cancel-btn{ background:#ddd; color:var(--wa-text); } .ref-toggle{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--wa-text); margin-bottom:12px; cursor:pointer; } .ref-toggle input{ width:16px; height:16px; } .ref-cfg-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:6px; } .ref-cfg-grid .edit-input{ margin-bottom:0; } .pc-ajustes-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 18px; } .pc-ajustes-grid .edit-input{ margin-bottom:0; } /* Modal "Confirmar carga": monto con steppers ± y chips de montos rápidos */ .carga-monto-row{ display:flex; align-items:center; gap:8px; margin-bottom:10px; } .carga-stepper{ flex:0 0 auto; width:32px; height:32px; border-radius:50%; border:1px solid #ddd; background:#f0f2f5; color:#333; font-size:16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; padding:0; } .carga-stepper:hover{ background:#e2e2e2; } .carga-monto-field-wrap{ flex:1; min-width:0; background:#f7f7f7; border:1px solid #ddd; border-radius:8px; padding:0 10px; height:44px; display:flex; align-items:center; } .carga-monto-field{ width:100%; border:0; background:transparent; outline:0; text-align:center; font-size:19px; font-weight:800; color:var(--wa-teal-green); font-variant-numeric:tabular-nums; font-family:inherit; } .carga-chips{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-bottom:4px; } .carga-chip{ border:1px solid #ddd; background:#f7f7f7; color:var(--wa-text); border-radius:7px; padding:7px 2px; font-size:12px; font-weight:700; cursor:pointer; font-variant-numeric:tabular-nums; } .carga-chip:hover{ border-color:var(--wa-teal-green); } .admin-monto-toast{ background:#e9f7f0; color:#0e7a4d; border:1px solid #b7e6cf; font-size:12.5px; font-weight:600; padding:8px 20px; text-align:center; animation: fadeIn .15s ease; } .premio-rango-box{ border:1px solid #e2e2e2; border-radius:10px; padding:10px 12px; margin-bottom:10px; background:#fafafa; } .premio-rango-tit{ font-family:'Baloo 2',sans-serif; font-weight:700; font-size:13px; color:var(--wa-text); margin-bottom:8px; } .pc-umbral-input{ width:76px; display:inline-block; margin:0 2px; text-align:center; } .premio-opcion-row{ display:grid; grid-template-columns:112px 68px 1fr; gap:6px; margin-bottom:6px; } .premio-opcion-row:last-child{ margin-bottom:0; } .premio-opcion-row select, .premio-opcion-row input{ margin-bottom:0; font-size:11.5px; } .stats-bloque{ margin-bottom:16px; text-align:left; } .stats-tit{ font-family:'Baloo 2',sans-serif; font-weight:700; font-size:13px; color:var(--wa-text); margin-bottom:8px; } .stats-fila{ font-size:12.5px; color:#555; padding:5px 0; border-bottom:1px solid #f0f2f5; } .stats-fila:last-child{ border-bottom:none; } .stats-vacio{ font-size:12.5px; color:#8696a0; } .stats-rangos{ display:grid; grid-template-columns:1fr 1fr; gap:6px; } .stats-rango-item{ background:#f0f2f5; border-radius:8px; padding:6px 10px; font-size:12px; color:#555; } /* Borrar conversación (lista lateral) — gris a propósito, no rojo: al lado convive el puntito de "no leído" (.unread-dot, sí rojo), y si el basurero también es rojo se compiten entre sí y ese aviso pierde protagonismo. */ .thread-delete-btn{ position:absolute; right:8px; top:50%; transform:translateY(-50%); background:rgba(122,114,102,.14); border:none; border-radius:50%; width:26px; height:26px; display:flex; align-items:center; justify-content:center; opacity:.7; transition:opacity .15s, background .15s; cursor:pointer; font-size:14px; color:#7a7266; } .thread-item:hover .thread-delete-btn{ opacity:1; background:rgba(122,114,102,.25); } .admin-chat-head{ display:flex; align-items:center; justify-content:space-between; } .delete-thread-btn{ background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:12px; padding:6px 12px; border-radius:8px; cursor:pointer; } .delete-thread-btn:hover{ background:rgba(255,255,255,.25); } /* Modal de confirmación (borrar chat / mensaje) */ .modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:200; animation: fadeIn .15s ease; } @keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } } .modal-card{ position:relative; background:#fff; color:var(--wa-text); border-radius:12px; padding:22px 24px; width:100%; max-width:340px; max-height:90vh; overflow-y:auto; box-shadow:0 20px 50px rgba(0,0,0,.35); animation: popIn .15s ease; } .modal-card-close{ position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%; border:none; background:#f0f2f5; color:#667781; font-size:14px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; } .modal-card-close:hover{ background:#e2e2e2; color:#333; } /* Reserva el lugar de la X para que un título más largo nunca corra el riesgo de quedar por debajo del botón. */ .modal-card:has(.modal-card-close) h3{ padding-right:30px; } @keyframes popIn{ from{ transform:scale(.92); opacity:0; } to{ transform:scale(1); opacity:1; } } .modal-card h3{ font-family:'Baloo 2', sans-serif; font-size:17px; margin-bottom:10px; } .modal-card p{ font-size:13.5px; color:#444; line-height:1.5; margin-bottom:20px; } .modal-actions{ display:flex; justify-content:flex-end; gap:10px; } .modal-btn{ border:none; padding:9px 18px; border-radius:8px; font-weight:700; font-size:13px; cursor:pointer; font-family:'Inter', sans-serif; } .modal-btn.cancel{ background:#eee; color:var(--wa-text); } .modal-btn.cancel:hover{ background:#e2e2e2; } .modal-btn.danger{ background:#e64848; color:#fff; } .modal-btn.danger:hover{ background:#d33a3a; } .msg .time{ display:block; font-size:10.5px; color:var(--wa-time); margin-top:3px; text-align:right; } .ticks{ color:#8696a0; font-size:12px; margin-left:2px; } .ticks.read{ color:#53bdeb; } .edited-tag{ font-size:10px; color:var(--wa-time); font-style:italic; } .premio-cliente-estado{ margin-top:4px; } .quick-actions{ display:flex; flex-shrink:0; gap:8px; padding:10px 14px; background:#f0f2f5; } .qa-btn{ flex:1; padding:10px 6px; border-radius:20px; border:none; font-family:'Baloo 2', sans-serif; font-weight:700; font-size:12px; cursor:pointer; } .qa-btn.green{ background:var(--wa-teal-green); color:#fff; } .qa-btn.outline{ background:#fff; border:1px solid #ccc; color:var(--wa-text); } .qa-btn:disabled{ opacity:.45; cursor:not-allowed; } .chat-input{ display:flex; flex-shrink:0; align-items:center; gap:8px; padding:10px 12px; background:#f0f2f5; border-top:1px solid #e2e2e2; } .chat-input input[type=text], .chat-input input[type=search]{ flex:1; border:1px solid #ddd; border-radius:20px; padding:10px 14px; font-size:16px; outline:none; color:var(--wa-text); -webkit-appearance:none; appearance:none; } .chat-input input[type=text]:focus, .chat-input input[type=search]:focus{ border-color:var(--wa-teal-green); } .send-btn, .attach-btn{ width:36px; height:36px; border-radius:50%; border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .send-btn{ background:var(--wa-teal-green); } .attach-btn{ background:#6b5220; } .cooldown-notice{ background:#fff3cd; color:#7a5c00; font-size:11.5px; text-align:center; padding:6px 10px; } .send-btn:disabled, .attach-btn input:disabled{ opacity:.4; cursor:not-allowed; } .attach-btn.uploading{ pointer-events:none; animation:attach-pulse 1s ease-in-out infinite; } @keyframes attach-pulse{ 0%,100%{ opacity:.6; } 50%{ opacity:.25; } } /* ============ ADMIN ============ */ body.admin-body{ background: var(--bg-deep); } .login-wrap{ min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; } .login-card{ background:#fff; color:var(--ink); border-radius:18px; padding:36px 30px; width:100%; max-width:360px; box-shadow:0 20px 60px rgba(0,0,0,.4); } .login-card h1{ font-family:'Baloo 2',sans-serif; font-size:24px; margin-bottom:6px; text-align:center; } .login-card p.sub{ text-align:center; color:#777; font-size:13px; margin-bottom:24px; } .login-card input{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid #ccc; font-size:14px; margin-bottom:12px; } .login-card button{ width:100%; padding:13px; border:none; border-radius:10px; background:var(--green-dark); color:#fff; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:15px; cursor:pointer; } .login-error{ color:#d33; font-size:12.5px; margin-bottom:10px; min-height:16px; } .admin-wrap{ display:flex; height:100vh; overflow:hidden; } .admin-sidebar{ width:340px; background:var(--bg-deep); border-right:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; height:100vh; position:sticky; top:0; } .admin-sidebar-head{ padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; align-items:center; } .admin-sidebar-head h2{ font-family:'Baloo 2',sans-serif; font-size:18px; background:linear-gradient(180deg,var(--accent-1),var(--accent-3)); -webkit-background-clip:text; background-clip:text; color:transparent; } .admin-sidebar-head span{ font-size:11.5px; color:var(--muted); } .logout-btn{ background:none; border:1px solid rgba(255,255,255,.2); color:var(--muted); font-size:11px; padding:5px 10px; border-radius:8px; cursor:pointer; } /* Marca: logo chiquito (el mismo ícono que ya genera "npm run brand" por cliente) en vez del emoji de corona — más prolijo para mostrar el panel. */ .admin-brand{ display:flex; align-items:center; gap:9px; } .admin-brand-logo{ width:26px; height:26px; border-radius:7px; object-fit:cover; flex-shrink:0; } .admin-head-actions{ display:flex; align-items:center; gap:6px; } /* Menú "☰": agrupa las herramientas (bonus/stats/premios/ajustes) en un desplegable en vez de cuatro botones sueltos — más prolijo y escala mejor si en el futuro se suma alguna herramienta más. */ .admin-menu-wrap{ position:relative; } .admin-menu-btn{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); border-radius:9px; color:var(--muted); cursor:pointer; padding:0; transition:background .15s, color .15s; } .admin-menu-btn svg{ width:18px; height:18px; } .admin-menu-btn:hover, .admin-menu-btn[aria-expanded="true"]{ background:rgba(255,255,255,.12); color:#fff; } .admin-menu-dropdown{ position:absolute; top:calc(100% + 8px); right:0; z-index:40; display:grid; grid-template-columns:repeat(2, 1fr); gap:6px; width:168px; padding:10px; background:#1c1c1c; border:1px solid rgba(255,255,255,.1); border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.5); opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none; transition:opacity .15s ease, transform .15s ease; } .admin-menu-dropdown.open{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; } .admin-menu-item{ display:flex; flex-direction:column; align-items:center; gap:5px; background:none; border:none; color:var(--muted); cursor:pointer; padding:10px 4px; border-radius:10px; transition:background .15s, color .15s; } .admin-menu-item svg{ width:20px; height:20px; } .admin-menu-item span{ font-size:10.5px; font-weight:600; } .admin-menu-item:hover{ background:rgba(255,255,255,.08); color:#fff; } @media (prefers-reduced-motion: reduce){ .admin-menu-dropdown{ transition:none; } } .thread-search-wrap{ padding:12px 14px 0; } .thread-search-input{ width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#fff; font-size:13px; padding:9px 12px; border-radius:20px; font-family:'Inter',sans-serif; outline:none; transition:border-color .15s, background .15s; } .thread-search-input::placeholder{ color:var(--muted); } .thread-search-input:focus{ background:rgba(255,255,255,.09); border-color:rgba(var(--accent-2-rgb),.5); } .thread-filter{ display:flex; gap:8px; padding:12px 14px 4px; } .thread-filter-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:var(--muted); font-size:12px; font-weight:600; padding:8px 10px; border-radius:20px; cursor:pointer; font-family:'Inter',sans-serif; transition: background .15s, color .15s, border-color .15s; } .thread-filter-btn:hover{ background:rgba(255,255,255,.09); } .thread-filter-btn.active{ background:rgba(var(--accent-2-rgb),.15); border-color:rgba(var(--accent-2-rgb),.5); color:var(--accent-1); } .thread-filter-badge{ background:#ff4757; color:#fff; font-size:10px; font-weight:800; min-width:16px; height:16px; padding:0 4px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; } .thread-list{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:8px; } .thread-item{ padding:12px 40px 12px 14px; border-radius:10px; cursor:pointer; margin-bottom:4px; transition:background .15s; position:relative; } .thread-item:hover{ background:rgba(255,255,255,.06); } .thread-item.active{ background:rgba(255,255,255,.1); border:1px solid rgba(var(--accent-2-rgb),.35); } /* El usuario es el dato que el admin usa para reconocer al jugador de un vistazo: grande y bien visible. El mensaje, un escalón más grande que antes para leerlo más cómodo. */ .thread-item-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; } .thread-item .tname{ font-weight:700; font-size:16px; color:#fff; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .thread-time{ font-size:11px; color:var(--muted); flex-shrink:0; white-space:nowrap; } .thread-item .tprev{ font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; } .unread-dot{ position:absolute; right:38px; top:14px; width:9px; height:9px; border-radius:50%; background:#ff4757; } .empty-threads{ padding:24px 16px; color:var(--muted); font-size:12.5px; text-align:center; } .admin-main{ flex:1; min-height:0; display:flex; flex-direction:column; background:var(--wa-bg); color:var(--wa-text); height:100vh; } .admin-chat-head{ display:flex; align-items:center; gap:10px; background: linear-gradient(90deg, var(--wa-dark-green), var(--wa-teal-green)); padding:16px 22px; color:#fff; } .admin-chat-head h3{ font-family:'Baloo 2',sans-serif; font-size:16px; } .admin-chat-sub{ font-size:11.5px; opacity:.85; margin-top:2px; } .admin-chat-head-info{ flex:1; min-width:0; } .admin-chat-head-actions{ display:flex; gap:8px; flex-shrink:0; } .admin-back-btn{ display:none; flex:0 0 auto; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; border:none; background:rgba(255,255,255,.15); color:#fff; font-size:19px; line-height:1; cursor:pointer; } .admin-back-btn:hover{ background:rgba(255,255,255,.25); } .ref-banner{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; background:#fff3cd; color:#7a5c00; padding:9px 20px; font-size:12.5px; font-weight:600; border-bottom:1px solid #f0dca0; } .ref-banner button{ padding:6px 14px; border:none; border-radius:14px; cursor:pointer; background:var(--wa-teal-green); color:#fff; font-size:12px; font-weight:700; white-space:nowrap; } .admin-empty-state{ flex:1; display:flex; align-items:center; justify-content:center; color:#667781; font-size:14px; flex-direction:column; gap:10px; background:var(--wa-bg); } .admin-messages{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:20px; display:flex; flex-direction:column; gap:8px; background:var(--wa-bg); } .admin-quick{ display:flex; gap:8px; padding:10px 20px; background:#f0f2f5; flex-wrap:wrap; } .admin-input{ display:flex; align-items:center; gap:10px; padding:14px 20px; background:#f0f2f5; border-top:1px solid #e2e2e2; } .admin-input input[type=text]{ flex:1; padding:11px 16px; border-radius:20px; border:1px solid #ddd; font-size:13.5px; outline:none; color:var(--wa-text); } .admin-input button{ padding:0 20px; border:none; border-radius:20px; background:var(--wa-teal-green); color:#fff; font-weight:700; cursor:pointer; font-family:'Baloo 2',sans-serif; } /* Barra de "respondiendo a..." que aparece arriba del input mientras hay una respuesta elegida (ver iniciarRespuesta()/cancelarRespuesta() en admin.js) — mismo mecanismo visual que WhatsApp antes de mandar. */ .admin-reply-preview{ display:flex; align-items:center; gap:8px; padding:8px 20px; background:#e9ebef; border-top:1px solid #e2e2e2; } .admin-reply-preview-bar{ width:3px; align-self:stretch; border-radius:2px; background:var(--wa-teal-green); flex-shrink:0; } .admin-reply-preview-body{ flex:1; min-width:0; } .admin-reply-preview-sender{ font-weight:700; font-size:12.5px; color:var(--wa-teal-green); } .admin-reply-preview-text{ font-size:12.5px; color:#667781; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .admin-reply-preview-close{ background:none; border:none; cursor:pointer; font-size:14px; color:#667781; padding:4px; flex-shrink:0; border-radius:50%; } .admin-reply-preview-close:hover{ background:rgba(0,0,0,.06); } .player-info-list{ margin-bottom:6px; } /* Info del jugador: el usuario de la plataforma es lo importante acá (lo que el admin realmente necesita para operar), así que va grande arriba. Nombre y teléfono quedan como dato de referencia, chico y discreto. */ .player-username-hero{ text-align:center; background:#f0f2f5; border-radius:12px; padding:14px 12px; margin-bottom:10px; } .player-username-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:#667781; margin-bottom:4px; } .player-username-big{ font-family:'Baloo 2',sans-serif; font-weight:800; font-size:24px; color:var(--wa-text); line-height:1.2; word-break:break-word; } .player-username-pass{ font-size:11.5px; color:#667781; margin-top:8px; } .player-bonus-badge{ background:linear-gradient(135deg, rgba(var(--accent-2-rgb),.18), rgba(var(--accent-2-rgb),.06)); border:1px solid rgba(var(--accent-2-rgb),.4); border-radius:10px; padding:9px 12px; margin-bottom:10px; text-align:center; font-size:12.5px; font-weight:700; color:#7a5c00; } .player-bonus-badge.confirmado{ background:rgba(14,155,98,.12); border-color:rgba(14,155,98,.4); } .player-info-mini{ text-align:center; font-size:11.5px; color:#8696a0; } .player-cargas-semana{ text-align:center; font-size:12px; font-weight:700; color:var(--wa-text); background:#f0f2f5; border-radius:10px; padding:7px 10px; margin-bottom:8px; } /* ============================================================ PANEL DE ADMIN EN CELULAR ------------------------------------------------------------ La lista de conversaciones y el chat abierto no entran lado a lado en una pantalla chica, así que en vez de achicar todo pasan a ocupar el ancho completo por turnos — se ve la lista, tocás un chat y pasás a verlo entero (con un botón "←" para volver), igual que cualquier app de chat en el celular. ============================================================ */ @media (max-width:860px){ /* height:100vh en celular queda MÁS ALTO que lo que se ve de verdad (Safari/Chrome cuentan la barra de direcciones aunque esté tapando pantalla), y eso es justo lo que dejaba a la página entera arrastrarse con el dedo, perdiendo el encabezado y el cuadro de escribir de vista. position:fixed + inset:0 ancla el panel al alto REAL visible, así no queda nada para hacer scroll salvo los mensajes de adentro. */ .admin-wrap{ position:fixed; inset:0; height:auto; } .admin-main{ height:auto; } .admin-sidebar{ width:100%; position:static; } .admin-wrap.chat-open .admin-sidebar{ display:none; } .admin-wrap:not(.chat-open) .admin-main{ display:none; } /* Cabecera de la lista: si "Cincinnati" + los 5 botones no entran en una sola línea, que pasen a la de abajo en vez de desbordar la pantalla. */ .admin-sidebar-head{ flex-wrap:wrap; gap:10px; padding:16px 14px; } .admin-sidebar-head h2{ font-size:16px; } .thread-item{ padding:14px 40px 14px 14px; } /* Cabecera del chat: aparece el botón de volver, y "Info jugador" / "Crear usuario" quedan solo con el ícono para no empujar el nombre. */ .admin-chat-head{ padding:12px 14px; gap:8px; } .admin-back-btn{ display:flex; } .admin-chat-head-actions .btn-label{ display:none; } .delete-thread-btn{ padding:8px 10px; font-size:14px; } /* Los botones de editar/borrar mensaje dependían de ":hover", que no existe al tocar con el dedo — quedan siempre visibles. */ .msg-actions{ display:flex; } .admin-quick{ padding:8px 12px; } .qa-btn{ padding:10px 8px; font-size:12.5px; } /* 16px en el campo de texto: por debajo de eso, Safari en iPhone hace zoom solo al tocar el campo — un clásico dolor de cabeza mobile. */ .admin-input{ padding:10px 12px; } .admin-input input[type=text]{ font-size:16px; padding:12px 16px; } .modal-overlay{ padding:16px; } .modal-card{ padding:20px 18px; } /* Mismo motivo del zoom automático, para el login del admin. */ .login-card input{ font-size:16px; } }