/* 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; border-radius:18px; background: linear-gradient(180deg, var(--accent-0) 0%, var(--accent-2) 55%, var(--accent-3) 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset, 0 10px 30px rgba(var(--accent-2-rgb),.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; } .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-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. */ html.is-mobile-device .install-promo{ /* relative (y no static): la X va posicionada dentro del cartel, y necesita que el cartel sea su referencia. Con static se iba a la esquina de la página. Y hay que anular top/left: en la versión de escritorio el cartel es "fixed" con top:78px y left:16px, y al pasar a relative esos valores dejan de ubicarlo y pasan a CORRERLO 78px abajo y 16px a la derecha. */ position:relative; top:auto; left:auto; right:auto; bottom:auto; width:auto; margin:0 0 10px; 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; } /* ============ 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; } /* ============ 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. */ .install-promo{ position:fixed; top:78px; left:16px; z-index:54; width:min(260px, calc(100vw - 32px)); display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px 14px 12px; border-radius:16px; background:linear-gradient(160deg, rgba(var(--accent-3-rgb),.28) 0%, rgba(var(--bg-deep-rgb),.96) 100%); 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); } } .install-promo-gift{ font-size:22px; line-height:1; } .install-promo-text{ color:var(--accent-1); font-size:13px; line-height:1.4; padding-right:16px; } .install-promo-text b{ color:var(--accent-2); font-weight:800; } .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:var(--ink); font-family:'Baloo 2', sans-serif; font-weight:800; font-size:12.5px; letter-spacing:.3px; transition: transform .15s ease; } .install-promo-btn:hover{ transform:translateY(-1px); } .install-promo-btn:disabled{ opacity:.6; cursor:default; transform: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; } /* 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); } .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); } .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; } /* 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 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; } /* 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; } /* Borrar conversación (lista lateral) */ .thread-delete-btn{ position:absolute; right:8px; top:50%; transform:translateY(-50%); background:rgba(255,107,107,.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:#ff6b6b; } .thread-item:hover .thread-delete-btn{ opacity:1; background:rgba(255,107,107,.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; } .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:flex-start; } .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; } .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 .tname{ font-weight:700; font-size:16px; color:#fff; } .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{ 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; } .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; } .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; }