/* ---- base.css ---- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* iPhone con la PWA INSTALADA (viewport-fit=cover): la franja del home
   indicator (abajo) y el rebote del scroll los pinta iOS con el fondo del
   documento raíz (<html>), no con el del <body>. Sin esto, <html> queda
   blanco por defecto → "línea blanca" abajo con la app instalada. */
html {
    background: #0a0015;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Evita el "auto-boost" de texto del navegador. No bloquea el ajuste de
       accesibilidad del SO, pero sí el inflado automático de Chrome. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: linear-gradient(135deg, #0a0015 0%, #1a0033 50%, #0a0015 100%);
    background-attachment: fixed;
    color: #ffffff;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.btn {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.btn-primary {
    background: linear-gradient(135deg, #d4af37 0%, #00cc6a 100%);
    color: #000;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 255, 136, 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, #9d4edd 0%, #6603a8 100%);
    color: #fff;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(157, 78, 221, 0.4);
}

.hidden {
    display: none !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 136, 0.5);
    border-radius: 3px;
}

/* Toast */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    color: #000;
    padding: 15px 20px;
    border-radius: 10px;
    font-weight: bold;
    z-index: 26000;
    animation: slideIn 0.3s ease;
}

.toast.error {
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
    color: #fff;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Botón "Entra YA y enviá tu comprobante de carga" — versión llamativa del
   submit del login que aplica solo cuando el visitante llegó por un link
   de publicista (publisherwelcome.js setea .publisher-cta sobre el botón). */
.publisher-cta {
    background: linear-gradient(135deg, #d4af37 0%, #ff8c00 60%, #ff4500 100%) !important;
    color: #000 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    letter-spacing: 0.3px;
    box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.55);
    animation: publisher-cta-pulse 1.6s infinite ease-in-out;
    text-transform: none !important;
}
.publisher-cta:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 6px 20px rgba(255, 140, 0, 0.45);
}
@keyframes publisher-cta-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.65); }
    70%  { box-shadow: 0 0 0 14px rgba(255, 140, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 140, 0, 0); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---- login.css ---- */
/* Login Screen */
/* min-height (no height fija): si el contenido es más alto que la pantalla,
   el recuadro crece y la página scrollea en vez de cortarse abajo. */
.login-screen {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    overflow-y: auto;
}

.login-box {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid #d4af37;
    border-radius: 18px;
    padding: 13px 14px;
    width: 100%;
    max-width: 400px;
    margin: auto;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.login-logo {
    font-size: 4em;
    margin-bottom: 20px;
}

.login-box h1 {
    color: #d4af37;
    font-size: 1.8em;
    margin-bottom: 10px;
}

.login-box p {
    color: #b0b0b0;
    margin-bottom: 30px;
}

.input-group {
    margin-bottom: 11px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    color: #d4af37;
    font-weight: 600;
}

.input-group input {
    width: 100%;
    padding: 10px 13px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    font-size: 16px;
    transition: all 0.3s ease;
}

.input-group input:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.error-message {
    color: #ff4444;
    margin-top: 15px;
    padding: 10px;
    background: rgba(255, 68, 68, 0.1);
    border-radius: 8px;
    display: none;
}

.error-message.show {
    display: block;
}

/* Prevenir zoom en inputs en iOS */
@supports (-webkit-touch-callout: none) {
    input, textarea, select {
        font-size: 16px !important;
    }
}

/* ---- header.css ---- */
/* Header - Estructura con 3 columnas */
.header {
    background: linear-gradient(135deg, #d4af37 0%, #ffd700 50%, #d4af37 100%);
    background-size: 200% 200%;
    animation: golden-shimmer 3s ease 1;
    color: #000;
    padding: 12px 15px;
    padding-top: max(12px, env(safe-area-inset-top, 12px));
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 10px rgba(212, 175, 55, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    min-height: 80px;
}


.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    overflow: visible;
}

@keyframes golden-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}


/* Reembolsos en el centro */
.refund-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 9px;
    font-weight: bold;
    transition: all 0.3s ease;
    min-width: 70px;
}

.refund-label-short {
    display: none;
}

.refund-label-full {
    display: block;
    text-align: center;
}

/* #349: el reembolso diario vuelve (2026-10-17) */
.refund-btn.daily {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    color: #000;
}
/* (antes: .refund-btn.daily eliminado (2026-08-07): el reembolso diario se sacó
   del producto — quedan semanal y mensual. */

.refund-btn.weekly {
    background: linear-gradient(135deg, #9d4edd 0%, #6603a8 100%);
    color: #fff;
}

.refund-btn.monthly {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    color: #fff;
}

.refund-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.refund-amount {
    font-size: 12px;
    font-weight: bold;
    margin-top: 2px;
}

.refund-timer {
    font-size: 8px;
    margin-top: 1px;
}



.header-right .user-name {
    font-size: 11px;
    padding: 4px 8px;
    max-width: 150px;
    overflow: visible;
    white-space: nowrap;
    color: #d4af37;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

.header-right .notification-btn {
    font-size: 11px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    border: none;
    border-radius: 20px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    align-items: center;
    gap: 5px;
}

.header-right .notification-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}

.header-right .notification-btn.active {
    background: linear-gradient(135deg, #00cc6a 0%, #00ff88 100%);
    color: #000;
    cursor: pointer;
}

.header-right .notification-btn.blocked {
    background: linear-gradient(135deg, #555 0%, #333 100%);
    color: #ccc;
    cursor: pointer;
}

/* Modo compacto: solo el emoji (cuando el usuario ya vio el texto al menos una vez).
   Mantiene el color verde/gris según el estado pero ocupa mucho menos espacio
   para no tapar el resto del menú. */
.header-right .notification-btn.compact {
    font-size: 16px;
    padding: 4px 8px;
    line-height: 1;
    min-width: 32px;
    text-align: center;
    gap: 0;
}
.header-right .notification-btn.compact.active {
    box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.5) inset;
}
.header-right .notification-btn.compact.blocked {
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.5) inset;
}

/* Botón de instalación APP */
.app-install-btn {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 50%, #00ff88 100%);
    background-size: 200% 200%;
    animation: app-btn-pulse 2s ease infinite, app-btn-shine 3s ease infinite;
    color: #000;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 900;
    font-size: 11px;
    border: 2px solid #00ff88;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.6), 0 4px 10px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    white-space: nowrap;
}

@keyframes app-btn-pulse {
    0%, 100% { 
        box-shadow: 0 0 15px rgba(0, 255, 136, 0.6), 0 4px 10px rgba(0, 0, 0, 0.3);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 25px rgba(0, 255, 136, 0.9), 0 6px 15px rgba(0, 0, 0, 0.4);
        transform: scale(1.02);
    }
}

@keyframes app-btn-shine {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.app-install-btn:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 255, 136, 1), 0 8px 20px rgba(0, 0, 0, 0.5);
    border-color: #fff;
}

.app-install-btn:active {
    transform: scale(0.98);
}

.app-install-btn.show {
    display: flex !important;
    animation: app-btn-appear 0.5s ease;
}

@keyframes app-btn-appear {
    from { 
        opacity: 0; 
        transform: scale(0.8) translateY(-10px);
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0);
    }
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(0, 255, 136, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); }
}

.user-name {
    background: rgba(0, 0, 0, 0.3);
    color: #000;
    padding: 5px 10px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 11px;
}

.logout-btn {
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 10px;
    cursor: pointer;
    font-weight: 700;
}

.settings-btn {
    background: rgba(0, 0, 0, 0.3);
    border: none;
    padding: 5px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}


/* Botón Instalar App */
.install-btn {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    color: #000;
    padding: 6px 12px;
    border-radius: 15px;
    font-weight: bold;
    font-size: 10px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
    animation: install-pulse 2s ease infinite;
}

@keyframes install-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 255, 136, 0.5); }
    50% { box-shadow: 0 0 20px rgba(0, 255, 136, 0.8); }
}

.install-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(0, 255, 136, 0.9);
}

.install-btn.hidden {
    display: none !important;
}

/* NOTIS: oculto por defecto; solo visible en modo standalone */
#notificationBtn {
    display: none !important;
}

@media (display-mode: standalone) {
    #notificationBtn {
        display: inline-flex !important;
    }
}

/* Dentro de la app instalada nunca mostrar el botón de instalar */
@media (display-mode: standalone) {
    #appInstallBtn,
    #installBtn,
    .pwa-install-btn {
        display: none !important;
    }
}


@media (max-width: 768px) {
    .mobile-menu-btn { display: flex; align-items: center; justify-content: center; font-size: 22px; padding: 8px 12px; }
    /* Hide everything in header-right except plataforma button and hamburger */
    .header-right > *:not(#plataformaBtn):not(.mobile-menu-btn) { display: none !important; }
    /* Show plataforma button prominently on mobile */
    #plataformaBtn { display: inline-flex !important; font-size: 12px; padding: 8px 14px; font-weight: 900; }
    /* Hide user-action-btns (settings/referral/logout) on mobile */
    .header-left .user-action-btns { display: none; }
    /* Hide individual refund buttons on mobile, show unified one instead */
    .header-center .refund-btn:not(.unified-refund-btn) { display: none !important; }
    .header-center .unified-refund-btn { display: flex !important; font-size: 11px; padding: 7px 10px; font-weight: 700; align-items: center; justify-content: center; background: linear-gradient(135deg, #c0392b, #e74c3c); color: #fff; border-radius: 10px; border: none; cursor: pointer; }
    /* Make header a single row on mobile: fire | plataforma | refunds | hamburger */
    .header {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 6px;
        padding: 8px 8px;
        min-height: 60px;
    }
    .header-left { flex-shrink: 0; }
    .header-center { flex: 1; display: flex; justify-content: center; gap: 4px; overflow: hidden; }
    .header-right { flex-shrink: 0; display: flex; align-items: center; gap: 4px; margin-left: auto; }
}


/* ---- chat.css ---- */
/* Chat Screen */
.chat-screen {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* Chat Section */
.chat-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-container {
    flex: 1;
    /* Piso de altura: aunque el dashboard esté todo desplegado en un celular
       bajito, el chat SIEMPRE queda visible (el panel del home cede y scrollea
       adentro — ver #homePanel en index.html). */
    min-height: 170px;
    /* Fondo estilo WhatsApp: el patrón de garabatos, en mosaico.
       La imagen viene casi blanca; el `background-color` beige + `multiply` la
       tiñe al tono de WhatsApp sin necesitar una segunda imagen. Así el mismo
       archivo sirve aunque después se quiera cambiar el tono. */
    background-color: #efeae2;
    background-image: url('/img/chat-bg-light.webp');
    background-repeat: repeat;
    background-size: 380px auto;
    background-blend-mode: multiply;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
}

.chat-messages {
    flex: 1;
    padding: 12px 9px 14px 9px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scroll-behavior: smooth;
}

.message-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    width: 100%;
}

.message-wrapper.sent {
    justify-content: flex-end;
}

.message-wrapper.received {
    justify-content: flex-start;
}

.message {
    max-width: 78%;
    min-width: 90px;
    padding: 7px 10px 20px 10px;  /* espacio abajo-derecha para la hora */
    border-radius: 8px;
    position: relative;
    word-wrap: break-word;
    box-sizing: border-box;
    width: fit-content;
    font-size: 14.5px;
    line-height: 1.4;
    box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
}

.message > div {
    min-width: 60px;
    /* Reserva a la derecha de la última línea para que el texto no se meta
       debajo de la hora. */
    padding-right: 42px;
}

/* Mensajes DEL AGENTE (los que recibe el cliente) → blancos, a la izquierda.
   ⚠️ El nombre de la clase engaña: `usuario` = lo que ve el usuario, no lo que
   escribe. Lo que escribe el cliente es `.agente` (ver chat.js:57). */
.message.usuario {
    background: #ffffff;
    color: #111b21;
    align-self: flex-start;
    margin-right: auto;
    border-top-left-radius: 0;   /* la "colita" del lado del que habla */
}

/* Mensajes PROPIOS del cliente → verde claro, a la derecha. */
.message.agente {
    background: #d9fdd3;
    color: #111b21;
    align-self: flex-end;
    margin-left: auto;
    border-top-right-radius: 0;
}

.message img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.message img:hover {
    transform: scale(1.05);
}

/* Links clickeables en el chat */
.chat-link {
    color: #027eb5;
    text-decoration: underline;
    word-break: break-all;
}

.chat-link:hover {
    color: #81d4fa;
    text-decoration: none;
}

.message.agente .chat-link {
    color: #b3e5fc;
}

.message.agente .chat-link:hover {
    color: #e1f5fe;
}

/* Lightbox para imágenes */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 10px;
    cursor: default;
}

.lightbox-close {
    position: absolute;
    top: max(20px, env(safe-area-inset-top, 20px));
    right: 30px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
    background: none;
    border: none;
    z-index: 10001;
}

.lightbox-close:hover {
    color: #ff4444;
}

/* La hora va ANCLADA abajo a la derecha DENTRO de la burbuja, como WhatsApp
   (por eso .message tiene padding-bottom extra). */
.message-time {
    position: absolute;
    right: 9px;
    bottom: 4px;
    font-size: 11px;
    color: #667781;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* Tildes de los mensajes PROPIOS del cliente, como WhatsApp: ✓✓ gris = enviado,
   ✓✓ celestes = un admin abrió el chat y los leyó. El celeste es el MISMO tono
   que usa WhatsApp para el "leído" (#53bdeb). El flip en vivo lo hace socket.js
   (evento messages_read_by_admin). */
.msg-ticks {
    display: inline-flex;
    align-items: center;
    color: #8696a0;
}

.msg-ticks svg { display: block; }

.msg-ticks.msg-read { color: #53bdeb; }

.copy-btn {
    background: rgba(0, 0, 0, 0.08);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.message-wrapper:hover .copy-btn {
    opacity: 1;
}

.copy-btn:hover {
    background: rgba(0, 0, 0, 0.18);
    transform: scale(1.1);
}

/* Chat Input — réplica de la barra de WhatsApp (foto de referencia del owner):
   fondo beige, input pill blanco, íconos de trazo fino SIN fondo. */
.chat-input-container {
    flex: 0 0 auto;
    padding: 7px 8px;
    padding-bottom: max(7px, env(safe-area-inset-bottom, 7px));
    border-top: none;
    background: #f0ebe3;   /* beige de la barra de WhatsApp mobile */
    z-index: 999;
}

.chat-input {
    display: flex;
    /* Con letra del sistema muy grande, los botones ocupan de más y el cuadro
       de escribir queda aplastado. flex-wrap permite que el textarea baje a su
       propia línea (ancho completo) en lugar de quedar diminuto. */
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.action-btn {
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.deposit-btn {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    color: #000;
}

.deposit-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

.withdraw-btn {
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
    color: #fff;
}

.withdraw-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
}

/* Íconos de la barra al estilo WhatsApp: trazo fino, SIN fondo ni círculo.
   (Los usan #cbuChatBtn y #attachBtn — el color va por `currentColor` del SVG.) */
.wa-icon-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 46px;
    padding: 0;
    background: none;
    border: none;
    color: #1b1b1b;          /* casi negro, como los íconos de la foto */
    cursor: pointer;
    display: flex;
    flex-direction: column;  /* deja poner una mini-etiqueta bajo el ícono (CBU) */
    align-items: center;
    justify-content: center;
    gap: 1px;
    transition: transform 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.wa-icon-btn:hover { color: #000; }
.wa-icon-btn:active { transform: scale(0.88); }

/* Mini-etiqueta bajo el ícono ("CBU"): para que se sepa qué es el botón. */
.wa-btn-label {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.4px;
    line-height: 1;
}

/* Botón de modo claro/oscuro: en la cabecera del chat, a la vista (es el que
   empuja el bloque de botones al borde derecho con margin-left:auto). */
.theme-topbar-btn {
    margin-left: auto;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.theme-topbar-btn:active { transform: scale(0.92); }

/* Campanita de notificaciones en la cabecera (movida del menú ☰, 2026-08-05).
   Estados: .active = notificaciones andando (verde), .blocked = bloqueadas (rojo). */
.notif-topbar-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 7px;
}
.notif-topbar-btn:active { transform: scale(0.92); }
.notif-topbar-btn.active { background: rgba(0, 255, 136, 0.22); box-shadow: 0 0 8px rgba(0, 255, 136, 0.45); }
.notif-topbar-btn.blocked { background: rgba(255, 80, 80, 0.25); }

/* Botón Fueguito (racha diaria): en la CABECERA del chat, a la derecha —
   fuera de la barra de escribir para que esa quede 100% WhatsApp. */
.fire-topbar-btn {
    margin-left: 7px;        /* el empuje a la derecha lo hace .theme-topbar-btn */
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
}

.fire-topbar-btn:active { transform: scale(0.92); }

/* Badge con el número de racha, en la esquina del botón. */
.fire-streak-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #fff;
    color: #ff4500;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.withdraw-row-btn {
    display: block;
    width: auto;
    margin: 7px 8px;
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 2px 9px rgba(255, 68, 68, 0.4);
}

.withdraw-row-btn:active {
    transform: scale(0.99);
}

#messageInput {
    flex: 1;
    /* Piso de ancho usable: si no entra (letra grande), .chat-input lo baja a
       su propia línea en vez de dejarlo diminuto. Con letra normal no se nota. */
    min-width: 90px;
    padding: 11px 16px;
    border: none;
    border-radius: 22px;
    background: #ffffff;
    color: #111b21;
    font-size: 15px;
    resize: none;
    min-height: 44px;
    max-height: 100px;
    font-family: inherit;
    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
#messageInput::placeholder { color: #8696a0; }

#messageInput:focus {
    outline: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

/* Botón de enviar: círculo verde WhatsApp. */
.send-btn {
    background: #00a884;
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.send-btn:hover { background: #017561; }
.send-btn:active { transform: scale(0.95); }

.chat-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    margin: 8px 0;
}

.chat-date-separator span {
    background: #ffffff;
    color: #54656f;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 13px;
    border-radius: 7px;
    text-transform: capitalize;
    letter-spacing: 0.2px;
    border: none;
    box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
}

/* ============================================================
   CABECERA DEL CHAT (estilo WhatsApp)
   ============================================================ */
.chat-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 13px;
    background: #075e54;          /* verde WhatsApp */
    color: #fff;
}

.chat-topbar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: #0b7d6e;
    flex-shrink: 0;
}

.chat-topbar-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;               /* deja que el nombre se recorte en vez de empujar */
}

.chat-topbar-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-topbar-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    opacity: 0.9;
}

/* Puntito verde de "en línea". Es decorativo (no es un estado real de conexión
   del agente): el soporte atiende 24/7, así que se muestra fijo. */
.chat-topbar-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #25d366;
    display: inline-block;
    flex-shrink: 0;
}

/* ============================================================
   MODO OSCURO (se activa con .wa-dark en <body>; ver ui.js)
   ============================================================
   Sólo afecta al CHAT. El menú/dashboard queda igual en los dos modos. */
body.wa-dark .chat-container {
    /* La imagen oscura ya viene con el tono correcto: no se tiñe (blend normal),
       si no `multiply` la dejaría negra del todo y se perderían los garabatos. */
    background-color: #0b141a;
    background-image: url('/img/chat-bg-dark.webp');
    background-repeat: repeat;
    background-size: 380px auto;
    background-blend-mode: normal;
}

body.wa-dark .chat-topbar { background: #1f2c33; }

body.wa-dark .message.usuario {          /* mensajes del agente */
    background: #202c33;
    color: #e9edef;
}

body.wa-dark .message.agente {           /* mensajes propios */
    background: #005c4b;
    color: #e9edef;
}

body.wa-dark .message-time { color: #8696a0; }

body.wa-dark .chat-date-separator span {
    background: #182229;
    color: #8696a0;
}

body.wa-dark .chat-input-container { background: #1f2c33; }

body.wa-dark #messageInput {
    background: #2a3942;
    color: #e9edef;
}
body.wa-dark #messageInput::placeholder { color: #8696a0; }

/* Íconos de la barra en oscuro: gris claro sobre la barra, como WhatsApp dark. */
body.wa-dark .wa-icon-btn { color: #aebac1; }
body.wa-dark .wa-icon-btn:hover { color: #e9edef; }

body.wa-dark .fire-topbar-btn { background: rgba(255, 255, 255, 0.08); }

body.wa-dark .chat-link { color: #53bdeb; }

body.wa-dark .copy-btn { background: rgba(255,255,255,0.12); }
body.wa-dark .copy-btn:hover { background: rgba(255,255,255,0.22); }

body.wa-dark #typingIndicator { color: #8696a0 !important; }

/* ============================================================
   INTERRUPTOR del modo oscuro (Configuración)
   ============================================================ */
.wa-switch { position: relative; display: inline-block; flex-shrink: 0; cursor: pointer; }
.wa-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.wa-switch-track {
    display: block;
    width: 46px;
    height: 26px;
    background: rgba(255,255,255,0.18);
    border-radius: 13px;
    transition: background 0.2s ease;
}

.wa-switch-thumb {
    display: block;
    width: 20px;
    height: 20px;
    margin: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

.wa-switch input:checked + .wa-switch-track { background: #00a884; }
.wa-switch input:checked + .wa-switch-track .wa-switch-thumb { transform: translateX(20px); }
/* Foco visible por teclado (accesibilidad): sin esto el switch es inalcanzable
   para quien no usa mouse. */
.wa-switch input:focus-visible + .wa-switch-track { outline: 2px solid #d4af37; outline-offset: 2px; }

/* ── Multi-plataforma (2026-10-16): botones "¿dónde querés jugar?" y link externo ── */
.plat-choice {
    margin: 8px 0 4px;
    padding-right: 0;
}
.plat-choice .plat-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.plat-btn {
    display: inline-block;
    flex: 1 1 120px;
    min-width: 110px;
    padding: 11px 14px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #0f8a2f, #1fb954);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    transition: transform .08s ease, opacity .15s ease;
}
.plat-btn:active { transform: scale(0.97); }
.plat-btn:disabled { opacity: .55; cursor: default; }
.plat-btn.plat-loading { opacity: .7; animation: platPulse 1s ease-in-out infinite; }
.plat-btn.plat-link { background: linear-gradient(135deg, #7b1fa2, #b04ae0); }
.plat-choice.plat-done {
    font-weight: 700;
    color: #0f8a2f;
    font-size: 13.5px;
}
@keyframes platPulse { 0%,100% { opacity: .7; } 50% { opacity: 1; } }

/* ── HOME 2.0 (#220): soporte arriba, carga automática al frente ─────────── */
/* Barra de soporte (la vieja cabecera del chat, ahora arriba del home). */
.support-bar { cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.25); }
.support-bar .chat-topbar-info { cursor: pointer; }
.support-unread {
    display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 6px;
    border-radius: 10px; background: #ff3b30; color: #fff; font-size: 11px;
    font-weight: 900; text-align: center; vertical-align: middle; line-height: 16px;
}
.support-open-btn {
    margin-left: auto; flex: 0 0 auto; background: rgba(255,255,255,0.14); color: #fff;
    border: 1px solid rgba(255,255,255,0.35); border-radius: 9px; padding: 6px 10px;
    font-size: 11.5px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.support-open-btn:active { transform: scale(.97); }
/* Panel de soporte: el chat de siempre, a pantalla completa. */
.support-panel {
    position: fixed; inset: 0; z-index: 9500;
    display: flex; flex-direction: column;
    background: #efeae2;
}
.support-panel.hidden { display: none; }
.support-panel .chat-container { flex: 1; min-height: 0; }
.support-panel .chat-input-container { flex: 0 0 auto; }
.support-head {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; padding-top: max(9px, env(safe-area-inset-top, 9px));
    background: #075e54; color: #fff;
}
.support-back {
    background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.35);
    border-radius: 9px; padding: 6px 10px; font-size: 13px; font-weight: 800; cursor: pointer;
}
.support-head-title { display: flex; flex-direction: column; min-width: 0; font-weight: 800; font-size: 15px; line-height: 1.15; }
.support-head-sub { font-size: 11px; font-weight: 500; opacity: .85; }
body.wa-dark .support-panel { background: #0b141a; }
body.wa-dark .support-head { background: #1f2c34; }
/* Tarjetas del home. */
.home-card {
    background: linear-gradient(135deg, #1a0033, #0a0015);
    border: 1.5px solid #d4af37; border-radius: 13px; padding: 11px 12px;
    color: #fff; box-shadow: 0 3px 12px rgba(212,175,55,.25);
}
.home-card-title { color: #ffd700; font-weight: 900; font-size: 13.5px; letter-spacing: .4px; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.home-card-sub { color: #b8b8b8; font-size: 11.5px; line-height: 1.35; margin: 0 0 9px; }
.al-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.al-field { background: rgba(255,255,255,0.05); border: 1px solid rgba(212,175,55,0.3); border-radius: 9px; padding: 7px 9px; min-width: 0; }
.al-field.wide { grid-column: 1 / -1; }
.al-label { display: block; color: #9a9a9a; font-size: 10px; font-weight: 700; letter-spacing: .4px; margin-bottom: 2px; }
.al-value { display: flex; align-items: center; gap: 6px; min-width: 0; }
.al-value span { flex: 1; min-width: 0; font-weight: 800; font-size: 13px; overflow-wrap: anywhere; }
.al-value .mono { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3px; }
.al-value .gold { color: #ffd700; } .al-value .green { color: #00ff88; } .al-value .blue { color: #8ab4ff; }
.al-copy, .al-eye {
    flex: 0 0 auto; background: rgba(212,175,55,0.15); color: #ffd700; border: 1px solid #d4af37;
    border-radius: 7px; padding: 4px 8px; font-size: 11px; font-weight: 800; cursor: pointer;
}
.al-eye { padding: 3px 7px; font-size: 13px; }
.al-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.al-btn {
    flex: 1 1 140px; border: 0; border-radius: 10px; padding: 11px 10px;
    font-weight: 900; font-size: 13px; cursor: pointer; color: #fff; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.al-btn.receipt { background: linear-gradient(135deg, #0f8a2f, #1fb954); }
.al-btn.capture { background: linear-gradient(135deg, #d4af37, #ffd700); color: #1a0033; }
.al-btn:active { transform: scale(.98); }
.al-btn:disabled { opacity: .6; }
.al-hint { color: #ffd700; font-size: 11px; font-weight: 700; margin-top: 7px; line-height: 1.35; }
.al-manual { display: flex; gap: 6px; margin-top: 6px; }
.al-manual input { flex: 1; min-width: 0; padding: 7px 9px; border-radius: 8px; border: 1px solid #d4af37; background: #1a0033; color: #fff; font-size: 13px; }
.al-manual button { flex: 0 0 auto; background: #d4af37; color: #1a0033; border: 0; border-radius: 8px; padding: 7px 10px; font-weight: 800; cursor: pointer; }
/* Plataformas: dónde jugar después de cargar. */
.plat-play-row { display: flex; flex-wrap: wrap; gap: 8px; }
.plat-play-btn {
    flex: 1 1 130px; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: linear-gradient(135deg, #6a0dad, #9b30ff); color: #fff; border: 0; border-radius: 11px;
    padding: 11px 10px; cursor: pointer; box-shadow: 0 3px 10px rgba(106,13,173,.4);
}
.plat-play-btn.is-default { background: linear-gradient(135deg, #0f4c00, #1a8200); box-shadow: 0 3px 10px rgba(26,130,0,.4); }
.plat-play-btn:active { transform: scale(.98); }
.plat-play-name { font-weight: 900; font-size: 15px; }
.plat-play-sub { font-size: 10.5px; opacity: .9; font-weight: 600; }
.plat-balance { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 9px; background: linear-gradient(135deg,#0f4c00,#1a8200); border: 1px solid #00ff88; border-radius: 11px; padding: 6px 12px; }
/* Cómo funciona. */
.hiw-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hiw-toggle { background: none; border: 1px solid #d4af37; color: #ffd700; border-radius: 8px; padding: 4px 9px; font-size: 11px; font-weight: 800; cursor: pointer; }
.hiw-body { color: #e0e0e0; font-size: 12px; line-height: 1.45; }
.hiw-body p { margin: 6px 0; }
.hiw-step { display: flex; gap: 8px; align-items: flex-start; margin: 5px 0; }
.hiw-step b.n { flex: 0 0 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: #d4af37; color: #1a0033; border-radius: 50%; font-size: 12px; }
.hiw-ladder { display: block; color: #cfcfcf; font-size: 11.5px; margin-top: 3px; }

/* ── #221: home más limpia — cómo funciona plegado arriba, barra inferior referidos/instalar ── */
.hiw-card { padding: 8px 12px; cursor: pointer; }
.hiw-card .home-card-title { font-size: 12.5px; }
.hiw-sub { font-weight: 600; font-size: 10px; color: #cfcfcf; letter-spacing: 0; }
.hiw-card .hiw-body { cursor: auto; margin-top: 8px; }
.home-bottom-bar {
    display: flex; gap: 8px; margin: 0 8px 8px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.hb-btn {
    flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0;
    border: 0; border-radius: 12px; padding: 11px 12px; cursor: pointer; color: #fff; text-align: left;
    box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
.hb-btn:active { transform: scale(.98); }
.hb-ref { background: linear-gradient(135deg, #6a0dad, #9b30ff); border: 1px solid #c9a0ff; }
.hb-install { background: linear-gradient(135deg, #0f8a2f, #1fb954); border: 1px solid #7dffb0; }
.hb-icon { font-size: 24px; line-height: 1; flex: 0 0 auto; }
.hb-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.hb-text b { font-size: 13.5px; font-weight: 900; letter-spacing: .4px; }
.hb-text small { font-size: 9.5px; opacity: .9; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ══════════════════════════════════════════════════════════════════════════
   #222 — ESTILO PREMIUM (owner: "nivel Casino de Buenos Aires, elegante,
   profesional, nada infantil, botones con terminación fina").
   Paleta: negro azulado + dorado champagne. Tipografía de títulos serif.
   Estas reglas van DESPUÉS de las anteriores a propósito: las pisan.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --pr-bg: #0b0d14;
    --pr-card: linear-gradient(160deg, #141826 0%, #0c0f1a 100%);
    --pr-gold: #d6b25e;
    --pr-gold-soft: rgba(214,178,94,.45);
    --pr-gold-grad: linear-gradient(135deg, #b8902e 0%, #e9cf7a 50%, #b8902e 100%);
    --pr-text: #f1ead6;
    --pr-muted: #9aa0b2;
    --pr-serif: Georgia, 'Times New Roman', 'DejaVu Serif', serif;
}
.chat-screen { background: var(--pr-bg); }
/* Cabecera: fila de círculos */
.header.header-toolbar.tb-circles {
    justify-content: space-around; gap: 2px; padding: 8px 6px;
    padding-top: max(8px, env(safe-area-inset-top, 8px));
    background: linear-gradient(180deg, #11141f, #0b0d14) !important; border-bottom: 1px solid var(--pr-gold-soft) !important;
    box-shadow: none !important;
}
.tb-circle {
    display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 52px;
    background: none; border: 0; padding: 0; color: var(--pr-gold); text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: rgba(214,178,94,.2);
}
.tb-circle-ico {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 30% 30%, #1d2334, #0f1220); border: 1px solid var(--pr-gold-soft);
    box-shadow: 0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
    transition: transform .08s ease, border-color .15s ease;
}
.tb-circle:active .tb-circle-ico { transform: scale(.94); border-color: var(--pr-gold); }
.tb-circle-lbl { font-size: 9.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: #cdbf95; }
/* Barra de soporte */
.support-bar, .support-bar.chat-topbar {
    background: linear-gradient(180deg, #121626, #0e111c) !important; color: var(--pr-text) !important;
    border-bottom: 1px solid var(--pr-gold-soft); padding: 8px 12px; gap: 10px;
}
.support-bar .chat-topbar-avatar { border: 1px solid var(--pr-gold-soft); background: #0b0d14; width: 36px; height: 36px; }
.support-bar .chat-topbar-name { font-family: var(--pr-serif); font-size: 15px; letter-spacing: .5px; color: var(--pr-text); }
.support-bar .chat-topbar-status { color: #9fd6a8; font-size: 11px; }
.support-open-btn { background: var(--pr-gold-grad); color: #1a1407; border: 0; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; font-size: 10.5px; padding: 7px 11px; border-radius: 999px; }
.support-head { background: #121626; border-bottom: 1px solid var(--pr-gold-soft); }
.support-back { background: none; border: 1px solid var(--pr-gold-soft); color: var(--pr-gold); border-radius: 999px; }
/* Tarjetas */
.home-dash { gap: 8px; margin-top: 8px; }
.home-card {
    background: var(--pr-card); border: 1px solid var(--pr-gold-soft); border-radius: 14px;
    padding: 11px 13px; box-shadow: 0 6px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03); color: var(--pr-text);
}
.home-card-title {
    font-family: var(--pr-serif); font-size: 15px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--pr-gold); margin: 0 0 7px; display: flex; align-items: center; gap: 8px;
}
.hc-tag { font-family: system-ui, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 1px; color: #1a1407; background: var(--pr-gold-grad); border-radius: 999px; padding: 2px 8px; }
.home-card-sub { color: var(--pr-muted); font-size: 11px; line-height: 1.35; margin: 0 0 8px; }
/* Carga compacta */
.al-line { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.al-k { flex: 0 0 auto; color: var(--pr-muted); font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; min-width: 42px; }
.al-v { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; color: var(--pr-text); }
.al-v.gold { color: var(--pr-gold); }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .4px; }
.al-copy, .al-eye {
    flex: 0 0 auto; background: none; color: var(--pr-gold); border: 1px solid var(--pr-gold-soft); border-radius: 999px;
    padding: 4px 10px; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; cursor: pointer;
}
.al-copy:active, .al-eye:active { background: rgba(214,178,94,.15); }
.al-meta { color: var(--pr-muted); font-size: 10.5px; padding: 5px 0 6px; }
.al-dot { margin: 0 6px; opacity: .6; }
.al-access { display: flex; flex-wrap: wrap; gap: 6px; }
.al-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 12px; }
.al-chip .al-k { min-width: 0; }
.al-chip .mono { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-chip-link .mono { max-width: 130px; }
.al-manual { margin-top: 6px; }
.al-manual input { border-color: var(--pr-gold-soft); background: #0b0d14; }
.al-manual button { background: var(--pr-gold-grad); color: #1a1407; }
.al-actions { gap: 8px; margin-top: 10px; }
.al-btn {
    flex: 1 1 140px; border-radius: 999px; padding: 11px 12px; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.al-btn.receipt { background: var(--pr-gold-grad); color: #1a1407; border: 0; }
.al-btn.capture { background: transparent; color: var(--pr-gold); border: 1px solid var(--pr-gold); }
/* Reembolsos + usuario: la fila dorada pasa a oscuro con borde fino */
.dash-top {
    background: var(--pr-card) !important; border: 1px solid var(--pr-gold-soft) !important; box-shadow: 0 6px 18px rgba(0,0,0,.4) !important;
    border-radius: 14px !important; padding: 6px !important; gap: 6px !important;
}
.dash-top .dash-refunds { background: transparent !important; border: 0 !important; }
.dash-top .dash-refunds-title { color: var(--pr-gold) !important; font-family: var(--pr-serif); letter-spacing: 1.2px; font-weight: 600; }
.dash-top .refund-btn { background: #141826 !important; border: 1px solid var(--pr-gold-soft) !important; border-radius: 10px !important; color: var(--pr-text) !important; box-shadow: none !important; }
.dash-top .refund-btn .refund-amount { color: var(--pr-gold) !important; }
.dash-top .dash-user, .dash-top .dash-roulette { background: #141826 !important; border: 1px solid var(--pr-gold-soft) !important; }
.dash-top .dash-user-avatar, .dash-top .dash-roulette-avatar { background: var(--pr-gold-grad) !important; color: #1a1407; }
.dash-top .dash-user-label, .dash-top .dash-roulette-label { color: var(--pr-gold) !important; }
/* Plataformas */
.plat-play-btn {
    background: #141826; border: 1px solid var(--pr-gold-soft); color: var(--pr-text); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.35);
    padding: 12px 10px;
}
.plat-play-btn.is-default { background: linear-gradient(160deg, #1b2033, #11141f); border-color: var(--pr-gold); }
.plat-play-name { font-family: var(--pr-serif); font-size: 16px; letter-spacing: .8px; color: var(--pr-gold); }
.plat-play-sub { color: var(--pr-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .6px; }
.plat-balance { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 5px 12px; margin-top: 8px; }
.plat-balance .dash-balance-label { color: var(--pr-muted) !important; letter-spacing: .8px; }
.plat-balance .dash-balance-amount { color: var(--pr-gold) !important; font-family: var(--pr-serif); font-size: 17px; }
/* Retirar + barra inferior */
.withdraw-row-btn {
    background: linear-gradient(135deg, #5a1020, #8a1a2c) !important; border: 1px solid rgba(214,178,94,.5) !important; border-radius: 999px !important;
    letter-spacing: 1px !important; text-transform: uppercase; font-size: 12px !important; font-weight: 700 !important; box-shadow: 0 4px 12px rgba(0,0,0,.4) !important;
}
.home-bottom-bar { gap: 8px; margin: 0 8px 8px; }
.hb-btn { background: #141826; border: 1px solid var(--pr-gold-soft); border-radius: 12px; padding: 10px 12px; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.hb-ref, .hb-install { background: #141826; border-color: var(--pr-gold-soft); }
.hb-install { border-color: var(--pr-gold); }
.hb-text b { font-family: var(--pr-serif); font-size: 14px; letter-spacing: .8px; color: var(--pr-gold); font-weight: 600; }
.hb-text small { color: var(--pr-muted); font-size: 9.5px; letter-spacing: .3px; }
/* Barra superior DENTRO del casino: volver + elegir plataforma */
.casino-topbar { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 7px 10px; background: #0b0d14; border-bottom: 1px solid var(--pr-gold-soft); }
.casino-topbar-row { display: flex; align-items: center; gap: 10px; }
.casino-back { background: var(--pr-gold-grad); color: #1a1407; border: 0; border-radius: 999px; padding: 7px 12px; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.casino-topbar-title { font-family: var(--pr-serif); color: var(--pr-gold); font-size: 12.5px; letter-spacing: .8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.casino-plat-tabs { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.casino-plat-tab { flex: 1 0 auto; background: #141826; color: var(--pr-text); border: 1px solid var(--pr-gold-soft); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; letter-spacing: .5px; cursor: pointer; }
.casino-plat-tab.active { background: var(--pr-gold-grad); color: #1a1407; border-color: transparent; }
.casino-plat-tab small { font-size: 9px; opacity: .8; text-transform: uppercase; margin-left: 3px; }

/* #222: el chat es soporte/info — el CBU vive en la tarjeta de carga del home. */
.support-panel .cbu-chat-btn { display: none !important; }
.support-load-btn { margin-left: auto; background: var(--pr-gold-grad); color: #1a1407; border: 0; border-radius: 999px; padding: 7px 13px; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.support-head-title { flex: 1; min-width: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   #223 — TEMA "DIAMANTE / FUTURISTA" (owner: "parece un word; quiero algo
   profesional, diamantado, futurista, buena definición tipo NIKE.com / 1win").
   Pisa al bloque premium serif de arriba: tipografía geométrica pesada
   (Montserrat, fallback system-ui), vidrio esmerilado, acentos cian/violeta,
   cortes diamantados en las esquinas, brillos sutiles. Va al FINAL a propósito.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --dx-font: 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --dx-bg: #06070d;
    --dx-glass: linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 60%, rgba(0,229,255,.04) 100%);
    --dx-border: rgba(255,255,255,.10);
    --dx-border-hi: rgba(0,229,255,.55);
    --dx-cyan: #00e5ff;
    --dx-violet: #7c4dff;
    --dx-accent: linear-gradient(135deg, #00e5ff 0%, #4f8cff 55%, #7c4dff 100%);
    --dx-money: #ffd166;
    --dx-text: #f4f6fb;
    --dx-muted: #8f98ad;
    --dx-cut: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    --dx-cut-sm: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    /* re-mapeo del tema anterior para lo que todavía lee --pr-* */
    --pr-gold: var(--dx-cyan);
    --pr-gold-soft: var(--dx-border);
    --pr-gold-grad: var(--dx-accent);
    --pr-text: var(--dx-text);
    --pr-muted: var(--dx-muted);
    --pr-serif: var(--dx-font);
    --pr-card: var(--dx-glass);
}
.chat-screen {
    font-family: var(--dx-font);
    background:
        radial-gradient(900px 500px at 85% -10%, rgba(124,77,255,.28), transparent 60%),
        radial-gradient(700px 420px at -10% 30%, rgba(0,229,255,.18), transparent 60%),
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 100% 36px,
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 36px 100%,
        var(--dx-bg) !important;
}
.chat-screen button, .chat-screen input, .chat-screen a { font-family: var(--dx-font); }
/* Cabecera */
.header.header-toolbar.tb-circles {
    background: rgba(6,7,13,.75) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--dx-border) !important;
}
.tb-circle { color: var(--dx-text); }
.tb-circle-ico {
    background: var(--dx-glass); border: 1px solid var(--dx-border); color: var(--dx-cyan);
    box-shadow: 0 0 0 1px rgba(0,229,255,.08), 0 8px 20px rgba(0,0,0,.45);
}
.tb-circle:active .tb-circle-ico { border-color: var(--dx-border-hi); box-shadow: 0 0 18px rgba(0,229,255,.35); }
.tb-circle-lbl { color: var(--dx-muted); font-weight: 700; letter-spacing: .9px; font-size: 9px; }
/* Barra de soporte */
.support-bar, .support-bar.chat-topbar {
    background: rgba(255,255,255,.04) !important; border-bottom: 1px solid var(--dx-border); backdrop-filter: blur(10px);
}
.support-bar .chat-topbar-avatar { border: 1px solid var(--dx-border-hi); background: #0a0c16; box-shadow: 0 0 14px rgba(0,229,255,.25); }
.support-bar .chat-topbar-name { font-family: var(--dx-font); font-weight: 800; font-size: 14px; letter-spacing: .3px; text-transform: uppercase; color: var(--dx-text); }
.support-bar .chat-topbar-status { color: var(--dx-muted); font-size: 10.5px; }
.support-bar .chat-topbar-dot { background: var(--dx-cyan); box-shadow: 0 0 8px var(--dx-cyan); }
.support-open-btn, .support-load-btn, .casino-back {
    background: var(--dx-accent); color: #06070d; border: 0; border-radius: 10px; clip-path: var(--dx-cut-sm);
    font-weight: 800; letter-spacing: .8px; text-transform: uppercase; font-size: 10.5px; padding: 9px 13px;
    box-shadow: 0 6px 18px rgba(0,229,255,.25);
}
.support-head { background: rgba(6,7,13,.92); border-bottom: 1px solid var(--dx-border); }
.support-back { border: 1px solid var(--dx-border); color: var(--dx-text); border-radius: 10px; background: rgba(255,255,255,.05); }
/* Tarjetas de vidrio con corte diamantado */
.home-card {
    background: var(--dx-glass); border: 1px solid var(--dx-border); border-radius: 0; clip-path: var(--dx-cut);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 12px 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.45); position: relative;
}
.home-card::before {
    content: ''; position: absolute; left: 0; top: 0; width: 46px; height: 2px;
    background: var(--dx-accent); box-shadow: 0 0 12px rgba(0,229,255,.6);
}
.home-card-title {
    font-family: var(--dx-font); font-size: 13px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--dx-text); margin: 2px 0 8px;
}
.hc-tag { background: var(--dx-accent); color: #06070d; font-size: 8.5px; letter-spacing: 1.2px; border-radius: 4px; clip-path: none; padding: 3px 8px; }
.home-card-sub { color: var(--dx-muted); font-size: 11px; }
/* Carga */
.al-line { border-bottom: 1px solid var(--dx-border); padding: 8px 0; }
.al-k { color: var(--dx-muted); font-size: 9px; letter-spacing: 1.4px; }
.al-v { font-size: 15px; font-weight: 800; color: var(--dx-text); }
.al-v.gold { color: var(--dx-money); text-shadow: 0 0 14px rgba(255,209,102,.25); }
.al-copy, .al-eye {
    border: 1px solid var(--dx-border); color: var(--dx-cyan); border-radius: 6px; clip-path: none;
    background: rgba(0,229,255,.06); font-size: 9.5px; letter-spacing: 1px; padding: 5px 10px;
}
.al-copy:active, .al-eye:active { background: rgba(0,229,255,.18); }
.al-meta { color: var(--dx-muted); font-size: 10.5px; }
.al-chip { background: rgba(255,255,255,.04); border: 1px solid var(--dx-border); border-radius: 8px; }
.al-btn { border-radius: 10px; clip-path: var(--dx-cut-sm); font-size: 11.5px; letter-spacing: 1px; font-weight: 800; padding: 12px 12px; }
.al-btn.receipt { background: var(--dx-accent); color: #06070d; box-shadow: 0 8px 22px rgba(0,229,255,.28); }
.al-btn.capture { background: rgba(255,255,255,.05); color: var(--dx-text); border: 1px solid var(--dx-border-hi); }
/* Reembolsos + usuario */
.dash-top {
    background: var(--dx-glass) !important; border: 1px solid var(--dx-border) !important; border-radius: 0 !important;
    clip-path: var(--dx-cut); backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
}
.dash-top .dash-refunds-title { font-family: var(--dx-font) !important; color: var(--dx-text) !important; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.dash-top .refund-btn { background: rgba(255,255,255,.04) !important; border: 1px solid var(--dx-border) !important; border-radius: 8px !important; }
.dash-top .refund-btn .refund-amount { color: var(--dx-money) !important; font-weight: 800; }
.dash-top .dash-user, .dash-top .dash-roulette { background: rgba(255,255,255,.04) !important; border: 1px solid var(--dx-border) !important; border-radius: 8px !important; }
.dash-top .dash-user-avatar, .dash-top .dash-roulette-avatar { background: var(--dx-accent) !important; color: #06070d; }
.dash-top .dash-user-label, .dash-top .dash-roulette-label { color: var(--dx-cyan) !important; letter-spacing: 1px; }
/* Plataformas */
.plat-play-btn {
    background: rgba(255,255,255,.04); border: 1px solid var(--dx-border); border-radius: 0; clip-path: var(--dx-cut-sm);
    padding: 13px 10px; position: relative; overflow: hidden;
}
.plat-play-btn::after { content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--dx-accent); opacity: .7; }
.plat-play-btn.is-default { background: linear-gradient(160deg, rgba(0,229,255,.12), rgba(124,77,255,.10)); border-color: var(--dx-border-hi); box-shadow: 0 0 22px rgba(0,229,255,.18); }
.plat-play-name { font-family: var(--dx-font); font-weight: 800; font-size: 15px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dx-text); }
.plat-play-sub { color: var(--dx-muted); font-size: 9px; letter-spacing: 1px; }
.plat-balance { background: rgba(255,255,255,.04); border: 1px solid var(--dx-border); border-radius: 8px; }
.plat-balance .dash-balance-label { color: var(--dx-muted) !important; letter-spacing: 1.2px; }
.plat-balance .dash-balance-amount { color: var(--dx-money) !important; font-family: var(--dx-font); font-weight: 800; font-size: 17px; }
/* Retirar + barra inferior */
.withdraw-row-btn {
    background: linear-gradient(135deg, #ff3d71, #c81d5c) !important; border: 0 !important; border-radius: 10px !important; clip-path: var(--dx-cut-sm);
    letter-spacing: 1.2px !important; font-weight: 800 !important; box-shadow: 0 8px 22px rgba(255,61,113,.3) !important;
}
.hb-btn, .hb-ref, .hb-install { background: rgba(255,255,255,.04); border: 1px solid var(--dx-border); border-radius: 0; clip-path: var(--dx-cut-sm); backdrop-filter: blur(12px); }
.hb-install { border-color: var(--dx-border-hi); background: linear-gradient(160deg, rgba(0,229,255,.10), rgba(124,77,255,.08)); }
.hb-text b { font-family: var(--dx-font); font-weight: 800; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dx-text); }
.hb-text small { color: var(--dx-muted); }
/* Barra dentro del casino */
.casino-topbar { background: rgba(6,7,13,.92); border-bottom: 1px solid var(--dx-border); backdrop-filter: blur(12px); }
.casino-topbar-title { font-family: var(--dx-font); color: var(--dx-text); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: 11px; }
.casino-plat-tab { background: rgba(255,255,255,.05); color: var(--dx-text); border: 1px solid var(--dx-border); border-radius: 8px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; font-size: 11px; }
.casino-plat-tab.active { background: var(--dx-accent); color: #06070d; border-color: transparent; box-shadow: 0 0 16px rgba(0,229,255,.35); }
/* Botones de plataforma del chat (¿dónde querés jugar?) */
.plat-btn { background: var(--dx-accent); color: #06070d; border-radius: 10px; clip-path: var(--dx-cut-sm); font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.plat-btn.plat-link { background: linear-gradient(135deg, #7c4dff, #b388ff); }
/* #224: la barra de soporte no se corta en pantallas angostas */
.support-bar .chat-topbar-info { flex: 1 1 auto; min-width: 0; }
.support-bar .chat-topbar-name, .support-bar .chat-topbar-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.support-bar .chat-topbar-status { font-size: 10px; }
.support-bar .support-open-btn { margin-left: 4px; padding: 8px 11px; }

/* ══════════════════════════════════════════════════════════════════════════
   #225 — ROJO DE MARKETING + TODO ARRIBA AL MÍNIMO + MODALES EN EL FORMATO NUEVO
   (owner: "el azul apaga; rojo fuerte", "achicá todo lo de arriba al máximo",
   "reembolsos la mitad de grosor", "las infos con el formato nuevo").
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --dx-cyan: #ff2d55;
    --dx-violet: #ff6b6b;
    --dx-accent: linear-gradient(135deg, #ff1744 0%, #ff3d5a 55%, #ff6b6b 100%);
    --dx-border-hi: rgba(255,45,85,.6);
    --dx-glass: linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 60%, rgba(255,45,85,.05) 100%);
    --pr-gold: var(--dx-cyan); --pr-gold-grad: var(--dx-accent);
}
.chat-screen {
    background:
        radial-gradient(900px 500px at 85% -10%, rgba(255,23,68,.26), transparent 60%),
        radial-gradient(700px 420px at -10% 30%, rgba(255,107,107,.12), transparent 60%),
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 100% 36px,
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 36px 100%,
        var(--dx-bg) !important;
}
.tb-circle-ico { box-shadow: 0 0 0 1px rgba(255,45,85,.08), 0 8px 20px rgba(0,0,0,.45); }
.tb-circle:active .tb-circle-ico { box-shadow: 0 0 18px rgba(255,45,85,.35); }
.support-bar .chat-topbar-avatar { box-shadow: 0 0 14px rgba(255,45,85,.25); }
.support-bar .chat-topbar-dot { background: #2ee66b; box-shadow: 0 0 8px #2ee66b; }
.support-open-btn, .support-load-btn, .casino-back, .al-btn.receipt, .plat-btn { box-shadow: 0 6px 18px rgba(255,23,68,.28); }
.home-card::before { box-shadow: 0 0 12px rgba(255,45,85,.6); }
.al-copy, .al-eye { background: rgba(255,45,85,.08); }
.al-copy:active, .al-eye:active { background: rgba(255,45,85,.2); }
.plat-play-btn.is-default { background: linear-gradient(160deg, rgba(255,23,68,.14), rgba(255,107,107,.08)); box-shadow: 0 0 22px rgba(255,23,68,.18); }
.hb-install { background: linear-gradient(160deg, rgba(255,23,68,.12), rgba(255,107,107,.08)); }
.casino-plat-tab.active { box-shadow: 0 0 16px rgba(255,23,68,.35); }
.withdraw-row-btn { background: linear-gradient(135deg, #2b2f3f, #1a1d2a) !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: 0 6px 16px rgba(0,0,0,.35) !important; }

/* ── Arriba al MÍNIMO ── */
.header.header-toolbar.tb-circles { padding: 5px 6px; padding-top: max(5px, env(safe-area-inset-top, 5px)); gap: 0; }
.tb-circle { gap: 2px; min-width: 46px; }
.tb-circle-ico { width: 32px; height: 32px; }
.tb-circle-ico svg { width: 15px; height: 15px; }
.tb-circle-lbl { font-size: 8px; letter-spacing: .6px; }
.support-bar, .support-bar.chat-topbar { padding: 5px 10px; gap: 8px; }
.support-bar .chat-topbar-avatar { width: 28px; height: 28px; }
.support-bar .chat-topbar-name { font-size: 12px; }
.support-bar .chat-topbar-status { font-size: 9px; }
.support-bar .theme-topbar-btn, .support-bar .notif-topbar-btn, .support-bar .fire-topbar-btn { transform: scale(.85); margin: 0 -2px; }
.support-bar .support-open-btn { padding: 6px 9px; font-size: 9.5px; }
.home-dash { gap: 6px; margin-top: 6px; }
/* Reembolsos + usuario: la MITAD de alto — una sola línea por botón, sin título. */
.dash-top { padding: 4px !important; gap: 4px !important; }
.dash-top .dash-refunds { padding: 0 !important; }
.dash-top .dash-refunds-title { display: none !important; }
.dash-top .dash-refunds-row { gap: 4px; }
.dash-top .dash-refunds-row .refund-btn { padding: 4px 6px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 6px; min-height: 30px; }
.dash-top .dash-refunds-row .refund-label-full { font-size: 8.5px !important; line-height: 1 !important; text-transform: uppercase; letter-spacing: .8px; color: var(--dx-muted); }
.dash-top .dash-refunds-row .refund-amount { font-size: 12px !important; }
.dash-top .dash-refunds-row .refund-timer { display: none !important; }
.dash-top .refund-tier { top: -5px; right: -3px; font-size: 7.5px; padding: 1px 4px; }
.dash-top .dash-user { flex: 0 0 auto !important; flex-direction: row !important; gap: 6px !important; padding: 3px 8px !important; }
.dash-top .dash-user-avatar { width: 20px !important; height: 20px !important; font-size: 11px !important; }
.dash-top .dash-user-label { display: none !important; }
.dash-top .dash-user-name { font-size: 10px !important; max-width: 70px; }
#rouletteHomeCard { display: none !important; }
.home-card { padding: 9px 12px; }
.home-card-title { font-size: 11.5px; margin: 1px 0 6px; letter-spacing: 1.4px; }
.al-line { padding: 6px 0; }
.al-v { font-size: 14px; }
.al-meta { font-size: 10px; padding: 4px 0 5px; }
.al-chip { font-size: 11px; padding: 3px 6px 3px 9px; }
.al-actions { margin-top: 8px; gap: 6px; }
.al-btn { padding: 10px 10px; font-size: 11px; }
.home-card-sub { font-size: 10.5px; margin-bottom: 6px; }
.plat-play-btn { padding: 10px 8px; }
.plat-play-name { font-size: 14px; }
.plat-balance { margin-top: 6px; padding: 4px 10px; }
.plat-balance .dash-balance-amount { font-size: 15px; }
.withdraw-row-btn { margin: 5px 8px !important; padding: 8px 12px !important; font-size: 11px !important; }
.home-bottom-bar { margin: 0 8px 4px; gap: 6px; }
.hb-btn { padding: 8px 10px; }
.hb-text b { font-size: 12px; }
.hb-text small { font-size: 9px; }
/* Plataforma FIJA */
.plat-play-row { gap: 6px; }
.plat-play-wrap { flex: 1 1 130px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.plat-play-wrap .plat-play-btn { flex: 1 1 auto; width: 100%; }
.plat-fix { align-self: center; font-size: 9.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--dx-muted); border: 1px solid var(--dx-border); border-radius: 999px; padding: 3px 9px; cursor: pointer; }
.plat-fix.on { color: #06070d; background: var(--dx-accent); border-color: transparent; }
.plat-play-wrap.is-pref .plat-play-btn { border-color: var(--dx-border-hi); box-shadow: 0 0 18px rgba(255,23,68,.25); }
/* Botón "¿Cómo funciona?" separado abajo */
.home-how-btn {
    display: flex; flex-direction: column; align-items: center; gap: 1px; width: calc(100% - 16px); margin: 0 8px 8px;
    background: rgba(255,255,255,.03); border: 1px dashed var(--dx-border); border-radius: 10px; padding: 7px 10px; cursor: pointer;
    color: var(--dx-text); font: 800 11px var(--dx-font); letter-spacing: .8px; text-transform: uppercase;
}
.home-how-btn span { font-weight: 600; font-size: 9px; color: var(--dx-muted); text-transform: none; letter-spacing: .2px; }

/* ── Modales con el formato nuevo (info del servicio, reembolsos, perfil, retiro, etc.) ── */
.modal { background: rgba(6,7,13,.86); backdrop-filter: blur(8px); }
.modal-content {
    font-family: var(--dx-font); background: linear-gradient(160deg, #11131d 0%, #0a0c14 100%); border: 1px solid var(--dx-border-hi); border-radius: 16px;
    box-shadow: 0 0 0 1px rgba(255,45,85,.08), 0 24px 60px rgba(0,0,0,.6);
}
.modal-header h2, .modal-content h2, .modal-content h3 { font-family: var(--dx-font); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--dx-text); }
.modal-header p { color: var(--dx-muted); }
.modal-content .btn, .modal-content .btn-primary, .modal-content button.btn-primary {
    background: var(--dx-accent); color: #06070d; border: 0; border-radius: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; box-shadow: 0 6px 18px rgba(255,23,68,.28);
}
.modal-content .btn-secondary, .modal-content button.btn-secondary { background: rgba(255,255,255,.05); color: var(--dx-text); border: 1px solid var(--dx-border); border-radius: 10px; }
.modal-content input, .modal-content select, .modal-content textarea { background: rgba(255,255,255,.04) !important; border: 1px solid var(--dx-border) !important; color: var(--dx-text) !important; border-radius: 10px !important; font-family: var(--dx-font); }
.info-card, .refund-details, .fire-details { background: rgba(255,255,255,.04) !important; border: 1px solid var(--dx-border) !important; border-radius: 12px !important; }
.info-card-title { color: var(--dx-text) !important; font-weight: 800; letter-spacing: .6px; }
.info-card-desc { color: var(--dx-muted) !important; }
.info-card-icon { filter: saturate(.8); }

/* #226: el link de la app en su propia línea, completo (no se corta) */
.al-chip-link { flex: 1 0 100%; }
.al-chip-link .mono { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; font-size: 11.5px; }

/* ══ #227: carga en 2 pasos (claridad) + RETIRAR bien visible ══ */
.al-step { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--dx-border); }
.al-step:last-of-type { border-bottom: 0; }
.al-n { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--dx-accent); color: #06070d; font-weight: 900; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 12px rgba(255,23,68,.35); margin-top: 1px; }
.al-step-body { flex: 1; min-width: 0; }
.al-step-t { font-weight: 800; font-size: 12.5px; letter-spacing: .3px; color: var(--dx-text); margin-bottom: 5px; }
.al-cbu { display: flex; align-items: center; gap: 8px; }
.al-cbu .mono { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.al-step .al-btn.receipt { width: 100%; flex: none; padding: 12px; font-size: 12px; }
.al-step .al-meta { padding: 4px 0 0; }
.al-access-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--dx-border); }
.al-access-head span { color: var(--dx-muted); font-size: 9.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.al-link-btn { background: none; border: 1px solid var(--dx-border); color: var(--dx-text); border-radius: 6px; padding: 4px 9px; font: 800 9.5px var(--dx-font); letter-spacing: .8px; text-transform: uppercase; cursor: pointer; }
.al-access { margin-top: 6px; }
/* Retirar mi premio: verde dinero, grande y con brillo (owner: "lo veo escondido") */
.withdraw-row-btn {
    background: linear-gradient(135deg, #00c853 0%, #00e676 55%, #69f0ae 100%) !important; color: #052e16 !important;
    border: 0 !important; border-radius: 12px !important; clip-path: var(--dx-cut-sm);
    margin: 6px 8px !important; padding: 13px 14px !important; font-size: 13px !important; font-weight: 900 !important; letter-spacing: 1.4px !important;
    box-shadow: 0 0 0 1px rgba(0,230,118,.35), 0 10px 26px rgba(0,230,118,.35) !important;
    animation: wdGlow 2.6s ease-in-out infinite;
}
@keyframes wdGlow { 0%,100% { box-shadow: 0 0 0 1px rgba(0,230,118,.35), 0 10px 26px rgba(0,230,118,.30); } 50% { box-shadow: 0 0 0 1px rgba(0,230,118,.6), 0 10px 34px rgba(0,230,118,.55); } }

/* ══ #228: "Cobrá tu reembolso acá" remarcado (verde como Retirar), ruleta del home visible, info modal ══ */
.dash-top .dash-refunds-title { display: block !important; font-size: 9.5px !important; margin: 0 0 4px !important; color: #69f0ae !important; letter-spacing: 1.4px; text-transform: uppercase; }
.dash-top .dash-refunds-row .refund-btn {
    background: linear-gradient(135deg, #00c853 0%, #00e676 55%, #69f0ae 100%) !important; color: #052e16 !important; border: 0 !important;
    box-shadow: 0 0 0 1px rgba(0,230,118,.35), 0 6px 16px rgba(0,230,118,.28) !important; min-height: 34px;
}
.dash-top .dash-refunds-row .refund-label-full { color: #0b3d1d !important; font-weight: 900 !important; }
.dash-top .dash-refunds-row .refund-amount { color: #052e16 !important; font-weight: 900 !important; }
.dash-top .dash-refunds-row .refund-btn:disabled { filter: grayscale(.35) brightness(.85); }
.dash-top .refund-tier { background: #06070d; color: #69f0ae; border-color: rgba(0,230,118,.6); }
/* Ruleta diaria en el home (vuelve, #228): roulette.js la muestra solo si el cliente es elegible */
#rouletteHomeCard { display: flex !important; flex: 0 0 auto !important; }
#rouletteHomeCard[style*="display: none"] { display: none !important; }
.dash-top .dash-roulette { background: linear-gradient(160deg, rgba(255,23,68,.18), rgba(255,107,107,.08)) !important; border: 1px solid var(--dx-border-hi) !important; border-radius: 8px !important; padding: 3px 8px !important; flex-direction: row !important; gap: 6px !important; }
.dash-top .dash-roulette-avatar { width: 20px !important; height: 20px !important; font-size: 11px !important; }
.dash-top .dash-roulette-label { display: none !important; }
.dash-top .dash-roulette-sub { font-size: 9.5px !important; max-width: none !important; }
/* Info del servicio: tarjetas anchas, badge NOVEDAD, puntos */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.info-card-wide { grid-column: 1 / -1; }
.info-card-new { border-color: var(--dx-border-hi) !important; box-shadow: 0 0 22px rgba(255,23,68,.18); }
.info-badge { display: inline-block; margin-left: 6px; background: var(--dx-accent); color: #06070d; font-size: 9px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 4px; padding: 2px 7px; vertical-align: middle; }
.info-point { padding: 6px 0; border-bottom: 1px dashed var(--dx-border); line-height: 1.45; }
.info-point:last-child { border-bottom: 0; }
.info-card-desc b { color: var(--dx-text); }

/* ══ #229: burbuja flotante de soporte (reemplaza la fila) + campana/fueguito como círculos ══ */
.tb-circle-plain { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; min-width: 0; margin-top: 0;
    background: var(--dx-glass) !important; border: 1px solid var(--dx-border) !important; color: var(--dx-cyan); font-size: 15px; padding: 0 !important; position: relative; box-shadow: 0 8px 20px rgba(0,0,0,.45); transform: none !important; }
.tb-circle-plain .fire-streak-badge { position: absolute; top: -4px; right: -4px; }
.support-bubble {
    position: fixed; right: 12px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 9000;
    display: flex; align-items: center; gap: 0; touch-action: none; user-select: none; -webkit-user-select: none;
    filter: drop-shadow(0 10px 24px rgba(255,23,68,.35));
}
.sb-main {
    display: flex; align-items: center; gap: 9px; border: 0; cursor: pointer; color: #fff; text-align: left;
    background: var(--dx-accent); border-radius: 999px; padding: 7px 14px 7px 7px; position: relative;
    box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; animation: sbPulse 2.4s ease-in-out infinite;
}
@keyframes sbPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,45,85,.45); } 50% { box-shadow: 0 0 0 10px rgba(255,45,85,0); } }
.sb-avatar { position: relative; flex: 0 0 auto; width: 40px; height: 40px; }
.sb-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #06070d; border: 2px solid rgba(255,255,255,.7); display: block; }
.sb-dot { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #2ee66b; border: 2px solid #ff2d55; box-shadow: 0 0 8px #2ee66b; }
.sb-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.sb-text b { font: 800 13px var(--dx-font); letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; }
.sb-text small { font: 600 10px var(--dx-font); opacity: .9; white-space: nowrap; }
.sb-main .support-unread { position: absolute; top: -6px; left: 30px; margin: 0; }
.sb-min { flex: 0 0 auto; width: 26px; height: 26px; margin-left: -8px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: #0b0d14; color: #fff; font: 900 15px/1 var(--dx-font); cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.support-bubble.minimized .sb-text { display: none; }
.support-bubble.minimized .sb-main { padding: 5px; }
.support-bubble.minimized .sb-avatar { width: 46px; height: 46px; }
.support-bubble.minimized .sb-avatar img { width: 46px; height: 46px; }
.support-bubble.minimized .sb-main .support-unread { left: 36px; }
body.support-open .support-bubble { visibility: hidden; }
.support-head .theme-topbar-btn { margin-left: auto; margin-right: 6px; }
.support-head .support-load-btn { margin-left: 0; }

/* ══ #230: elegir plataforma ARRIBA del CBU — tarjeta seleccionable ══ */
.plat-play-btn { position: relative; padding: 12px 10px 28px; }
.plat-check { position: absolute; top: 7px; right: 9px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--dx-border); font-size: 11px; font-weight: 900; color: #06070d; display: inline-flex; align-items: center; justify-content: center; }
.plat-play-btn.is-pref .plat-check { background: #2ee66b; border-color: #2ee66b; box-shadow: 0 0 10px rgba(46,230,107,.6); }
.plat-play-btn.is-pref { border-color: var(--dx-border-hi); background: linear-gradient(160deg, rgba(255,23,68,.16), rgba(255,107,107,.08)); box-shadow: 0 0 22px rgba(255,23,68,.25); }
.plat-enter { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); font: 800 9.5px var(--dx-font); letter-spacing: .8px; text-transform: uppercase; color: var(--dx-text); border: 1px solid var(--dx-border); border-radius: 999px; padding: 3px 9px; background: rgba(0,0,0,.25); }
.plat-fix { display: none; }

/* ══ #231: fueguito RESUMIDO — racha + reclamar + premios, nada más ══ */
.fire-compact .fire-info-row:not(.fire-streak-row) { display: none !important; }   /* "Último reclamo" */
.fire-compact .fire-progress-container { display: none !important; }               /* barra 0/10 */
.fire-compact #fireActivityCondition { display: none !important; }                 /* condición larga */
.fire-compact { padding: 10px 12px !important; }
.fire-streak-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 12px; background: var(--dx-glass); border: 1px solid var(--dx-border); margin-bottom: 8px; }
.fire-streak-row span:first-child { font: 800 10px var(--dx-font); letter-spacing: 1.4px; text-transform: uppercase; color: var(--dx-muted); }
.fire-streak-row #fireStreakModal { font-size: 28px !important; color: var(--dx-money) !important; font-family: var(--dx-font); }
.fire-streak-row #fireStreakModal::after { content: ' días'; font-size: 11px; color: var(--dx-muted); font-weight: 700; }
.fire-prizes-title { color: var(--dx-text) !important; font: 800 10px var(--dx-font) !important; letter-spacing: 1.4px; text-transform: uppercase; margin: 6px 0 4px !important; }
#fireMilestonesMenu > div { padding: 6px 10px !important; margin: 3px 0 !important; border-radius: 9px !important; background: rgba(255,255,255,.04) !important; border: 1px solid var(--dx-border); font-size: 12px; }
#fireCondition { font-size: 11.5px !important; margin: 8px 0 !important; }
#fireModal .modal-actions { flex-direction: column; gap: 6px; }
#fireModal #claimFireBtn { background: var(--dx-accent) !important; color: #06070d !important; font-weight: 900; padding: 13px; font-size: 13px; letter-spacing: .8px; }
#fireModal #closeFireModal { padding: 8px; font-size: 11px; }
.fire-compact-head h2 { font-size: 16px !important; }
.fire-compact-head p { font-size: 11.5px !important; }

/* ══ #233: "Guardá tu acceso a la app" plegable debajo de reembolsos ══ */
.access-card { padding: 0 !important; overflow: hidden; }
.access-card::before { display: none; }
.access-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: none; border: 0; padding: 9px 12px; cursor: pointer; color: var(--dx-text); text-align: left; }
.access-title { font: 800 11px var(--dx-font); letter-spacing: 1px; text-transform: uppercase; display: flex; flex-direction: column; gap: 1px; }
.access-title small { font: 600 9px var(--dx-font); letter-spacing: .2px; text-transform: none; color: var(--dx-muted); }
.access-chevron { color: var(--dx-cyan); font-size: 11px; font-weight: 900; }
#accessBody { padding: 0 12px 10px; }
.access-capture { width: 100%; margin-top: 8px; }
#accessBody .al-meta { padding: 5px 0 0; }

/* ══ #235: pruebas de plataforma dentro del soporte ══ */
.support-tests { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 12px; background: rgba(6,7,13,.92); border-bottom: 1px solid var(--dx-border); }
.support-tests:empty { display: none; }
.st-label { font: 800 9.5px var(--dx-font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--dx-muted); margin-right: 2px; }
.st-btn { background: var(--dx-accent); color: #06070d; border: 0; border-radius: 999px; padding: 6px 12px; font: 800 11px var(--dx-font); letter-spacing: .6px; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 12px rgba(255,23,68,.25); }
.st-note { font: 600 9px var(--dx-font); color: var(--dx-muted); margin-left: auto; }

/* #236: el casino embebido cubre la burbuja de soporte (z 99999 > 9000): nada que hacer; nota de pruebas */
.st-note { opacity: .8; }

/* ══ #237: info del servicio en UNA hoja — reseñas plegadas arriba, VIP detallado abajo ══ */
#infoModal .modal-content { max-width: 560px; text-align: left; }
.info-reviews-wrap { border: 1px solid var(--dx-border); border-radius: 12px; overflow: hidden; margin: 0 0 10px; background: rgba(255,255,255,.03); }
.info-reviews-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: none; border: 0; padding: 9px 12px; cursor: pointer; color: var(--dx-text); font: 800 11px var(--dx-font); letter-spacing: 1px; text-transform: uppercase; text-align: left; }
.info-reviews-chevron { color: var(--dx-cyan); font-weight: 900; }
#infoReviewsBody { padding: 0 10px 10px; }
.info-vip { margin-top: 12px; padding: 12px; border: 1px solid var(--dx-border-hi); border-radius: 12px; background: var(--dx-glass); }
.info-vip:empty { display: none; }
.info-vip-head { font: 800 12px var(--dx-font); letter-spacing: 1.4px; text-transform: uppercase; color: var(--dx-text); margin-bottom: 6px; }
.info-vip-p { margin: 0 0 8px; color: var(--dx-muted); font-size: 12px; line-height: 1.45; }
.info-vip-p b, .info-vip-mine b { color: var(--dx-text); }
.info-vip-mine { margin: 0 0 8px; padding: 7px 10px; border-radius: 8px; background: rgba(255,45,85,.08); border: 1px solid var(--dx-border-hi); font-size: 12px; color: var(--dx-text); }
.vip-row { display: grid; grid-template-columns: 1.3fr 1.1fr .8fr .8fr; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 8px; font-size: 11.5px; }
.vip-row:nth-child(even) { background: rgba(255,255,255,.03); }
.vip-row.is-cur { background: rgba(255,45,85,.12); outline: 1px solid var(--dx-border-hi); }
.vip-row-h { font: 800 9px var(--dx-font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--dx-muted); background: none !important; padding-bottom: 2px; }
.vip-name { font-weight: 800; }
.vip-th { color: var(--dx-muted); }
.vip-bonus { color: var(--dx-money); font-weight: 800; font-variant-numeric: tabular-nums; }
.vip-rake { color: #69f0ae; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 420px) { .vip-row { grid-template-columns: 1.2fr 1fr .8fr .7fr; font-size: 10.5px; gap: 4px; padding: 5px 6px; } }

/* ══ #238: fila Cargar aquí (adjuntar) + Retirar mi premio (rojo) ══ */
.home-actions-row { display: flex; gap: 6px; margin: 6px 8px; }
.home-actions-row .withdraw-row-btn { flex: 1; margin: 0 !important; }
.load-row-btn {
    flex: 1.15; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; color: #052e16;
    background: linear-gradient(135deg, #00c853 0%, #00e676 55%, #69f0ae 100%); border-radius: 12px; clip-path: var(--dx-cut-sm);
    padding: 10px 10px; box-shadow: 0 0 0 1px rgba(0,230,118,.35), 0 10px 26px rgba(0,230,118,.3); animation: wdGlow 2.6s ease-in-out infinite;
}
.load-row-btn:active { transform: scale(.98); }
.lr-text { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.lr-text b { font: 900 13px var(--dx-font); letter-spacing: 1px; text-transform: uppercase; }
.lr-text small { font: 700 9px var(--dx-font); letter-spacing: .3px; opacity: .85; }
/* Retirar: ROJO (el owner lo quiere así; el verde pasa a "Cargar aquí") */
.withdraw-row-btn {
    background: linear-gradient(135deg, #ff1744 0%, #ff3d5a 55%, #ff6b6b 100%) !important; color: #fff !important;
    box-shadow: 0 0 0 1px rgba(255,23,68,.35), 0 10px 26px rgba(255,23,68,.32) !important; animation: none !important;
    padding: 10px 10px !important; font-size: 12px !important;
}

/* ══ #239: referidos — "cómo funciona" plegado, el resto en una pantalla ══ */
.ref-how-wrap { border: 1px solid var(--dx-border); border-radius: 12px; overflow: hidden; margin: 0 0 12px; background: rgba(255,255,255,.03); }
.ref-how-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: none; border: 0; padding: 9px 12px; cursor: pointer; color: var(--dx-text); font: 800 11px var(--dx-font); letter-spacing: 1px; text-transform: uppercase; text-align: left; }
.ref-how-chevron { color: var(--dx-cyan); font-weight: 900; }
#refHowBody { padding: 0 10px 4px; }
#refHowBody > div { margin-bottom: 10px !important; }
#referralModal .modal-header h2 { font-size: 16px; }
#referralModal .modal-header p { font-size: 12px; }

/* ══ #240: cobro de referidos desde la app ══ */
.ref-claim { border: 1px solid var(--dx-border-hi); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; background: linear-gradient(160deg, rgba(255,23,68,.12), rgba(255,107,107,.05)); }
.ref-claim-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ref-claim-text { display: flex; flex-direction: column; }
.ref-claim-k { font: 800 9.5px var(--dx-font); letter-spacing: 1.4px; text-transform: uppercase; color: var(--dx-muted); }
.ref-claim-v { font: 900 24px var(--dx-font); color: var(--dx-money); font-variant-numeric: tabular-nums; }
.ref-claim-btn { background: var(--dx-accent); color: #06070d; border: 0; border-radius: 10px; clip-path: var(--dx-cut-sm); padding: 11px 14px; font: 900 11.5px var(--dx-font); letter-spacing: .8px; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 18px rgba(255,23,68,.28); }
.ref-claim-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.ref-claim-note { margin-top: 6px; color: var(--dx-muted); font-size: 11px; line-height: 1.4; }

/* ══ #241/#242: aviso de clave inicial + tarjetas de plataforma más chicas con logo (Ganamos violeta) ══ */
.al-pw-hint { margin-top: 7px; padding: 7px 10px; border-radius: 8px; background: rgba(255,179,0,.1); border: 1px solid rgba(255,179,0,.5); color: #ffe9a8; font-size: 11px; line-height: 1.4; }
.al-pw-hint b { color: #fff; }
.plat-play-btn { padding: 8px 8px 24px; gap: 1px; }
.plat-logo { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; background: #06070d; margin-bottom: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.plat-play-name { font-size: 13px; }
.plat-play-sub { font-size: 8.5px; }
.plat-enter { bottom: 5px; padding: 2px 8px; font-size: 9px; }
.plat-play-btn.plat-ganamos { background: linear-gradient(160deg, #3b1670 0%, #5b21b6 55%, #7c3aed 100%); border-color: rgba(177,77,255,.6); }
.plat-play-btn.plat-ganamos.is-pref { box-shadow: 0 0 22px rgba(177,77,255,.4); }
.plat-play-btn.plat-ganamos .plat-play-name { color: #fff; }
.plat-play-btn.plat-ganamos .plat-play-sub { color: #e3d2ff; }
.plat-play-btn.plat-girox .plat-logo { background: #fff; }

/* ══ #243: burbuja de soporte compacta (foto + "Soporte en vivo") y círculo en la cabecera ══ */
.support-bubble.compact .sb-main { flex-direction: column; gap: 3px; padding: 4px 4px 5px; border-radius: 16px; }
.support-bubble.compact .sb-avatar { width: 46px; height: 46px; }
.support-bubble.compact .sb-avatar img { width: 46px; height: 46px; }
.support-bubble.compact .sb-cap { font: 800 8.5px var(--dx-font); letter-spacing: .6px; text-transform: uppercase; color: #fff; white-space: nowrap; }
.support-bubble.compact .sb-main .support-unread { top: -4px; left: auto; right: -4px; }
.support-bubble.compact .sb-min { width: 22px; height: 22px; font-size: 12px; margin-left: -6px; align-self: flex-start; }
.tb-support img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.tb-support { border-color: var(--dx-border-hi) !important; }
.tb-support .support-unread { position: absolute; top: -5px; right: -5px; margin: 0; min-width: 16px; font-size: 9.5px; line-height: 14px; padding: 0 4px; }

/* ══ #244: fila de reembolsos sin recortes + modal de reembolso simple (estilo cambio de clave) ══ */
.dash-top { clip-path: none !important; overflow: visible !important; padding: 7px 8px !important; margin-top: 4px; }
.dash-top .dash-refunds, .dash-top .dash-refunds-row, .dash-top .dash-refunds-row .refund-btn { overflow: visible !important; }
.dash-top .dash-refunds-row { padding-top: 4px; }
.dash-top .refund-tier { top: -8px; right: -4px; }
.refund-simple .modal-content { background: #ffffff !important; border: none !important; border-radius: 14px !important; box-shadow: 0 12px 40px rgba(0,0,0,.4) !important; color: #111b21; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; padding: 22px 20px; }
.refund-simple .modal-header { margin-bottom: 12px; }
.refund-simple .modal-header h2 { color: #111b21 !important; font: 800 18px system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; margin: 0 0 4px; }
.refund-simple .modal-header p { color: #667781 !important; font-size: 13px; margin: 0; }
.refund-simple .rs-close { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: #8696a0; font-size: 20px; cursor: pointer; }
.refund-simple .rs-body { background: none !important; border: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 8px; }
.refund-simple .rs-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #f0f2f5; border-radius: 10px; padding: 10px 12px; color: #54656f; font-size: 13px; }
.refund-simple .rs-line b { color: #111b21; font-size: 15px; font-variant-numeric: tabular-nums; }
.refund-simple .rs-main { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #e7fbf3; border: 1px solid #b9ecd8; border-radius: 12px; padding: 12px 14px; color: #0b6b4f; font-size: 13px; font-weight: 700; }
.refund-simple .rs-main b { color: #00a884; font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.refund-simple #refundAvailabilityInfo { background: #fff8e1 !important; border: 1px solid #ffe08a !important; border-radius: 10px; padding: 9px 12px !important; color: #6b5300 !important; font-size: 12.5px; line-height: 1.4; margin: 0 !important; }
.refund-simple #refundAvailabilityInfo * { color: inherit !important; }
.refund-simple #refundExtraInfo { color: #667781 !important; font-size: 12px; text-align: left !important; line-height: 1.4; margin: 0 !important; }
.refund-simple #refundExtraInfo:empty { display: none; }
.refund-simple .refund-timer-modal { color: #667781; font-size: 12px; margin-top: 6px; }
.refund-simple .refund-timer-modal:empty { display: none; }
.refund-simple .modal-actions { flex-direction: column; gap: 8px; margin-top: 14px; }
.refund-simple .btn-primary { background: #00a884 !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 13px !important; font: 800 14px system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; clip-path: none; }
.refund-simple .btn-primary:disabled { background: #cfd8dc !important; color: #607d8b !important; }
.refund-simple .btn-secondary { background: #f0f2f5 !important; color: #54656f !important; border: 0 !important; border-radius: 999px !important; padding: 10px !important; font-size: 13px; }

/* ══ #245: "Probá las plataformas" mejor presentado + modo prueba sin la carga rápida ══ */
.support-tests { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 12px; }
.st-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.st-note { margin-left: 0; }
.st-row { display: flex; gap: 8px; }
.st-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 10px; border-radius: 12px; clip-path: var(--dx-cut-sm); background: rgba(255,255,255,.05); color: var(--dx-text); border: 1px solid var(--dx-border); box-shadow: none; font-size: 12px; }
.st-btn.st-ganamos { background: linear-gradient(160deg, #3b1670, #5b21b6); border-color: rgba(177,77,255,.6); color: #fff; }
.st-btn.st-girox { background: linear-gradient(160deg, rgba(255,23,68,.18), rgba(255,107,107,.08)); border-color: var(--dx-border-hi); }
.st-logo { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; background: #fff; }
/* Modo prueba: sin burbuja ni cajón de "Carga rápida" dentro del casino */
#casinoOverlay.casino-test #casinoSupportBubble, #casinoOverlay.casino-test #casinoChatDrawer { display: none !important; }

/* ══ #246: burbuja con ícono de chat y la X adentro del círculo ══ */
.support-bubble.compact { position: fixed; }
.support-bubble.compact .sb-avatar { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(6,7,13,.35); border: 2px solid rgba(255,255,255,.75); color: #fff; }
.support-bubble.compact .sb-ico { display: block; }
.support-bubble.compact .sb-min { position: absolute; top: -2px; right: -2px; width: 20px; height: 20px; margin: 0; font-size: 11px; line-height: 1; border-radius: 50%; background: #fff; color: #ff1744; border: 2px solid #ff1744; box-shadow: 0 2px 6px rgba(0,0,0,.45); z-index: 2; }
.support-bubble.compact .sb-main .support-unread { top: auto; bottom: -4px; right: -4px; }

/* ══ #247: sin paso 2 en la tarjeta; el botón Cargar aquí lo explica ══ */
.al-step-only { border-bottom: 0 !important; padding-bottom: 2px; }
.lr-auto { color: #0b3d1d; opacity: .85; }
.load-row-btn { padding: 8px 10px; }

/* ══ #248: Retirar en dos líneas como Cargar aquí ══ */
.withdraw-row-btn .lr-text { align-items: flex-start; }
.withdraw-row-btn .lr-text b { font-size: 12.5px; }
.withdraw-row-btn .lr-text small { color: rgba(255,255,255,.9); opacity: 1; }
.withdraw-row-btn .lr-auto { color: #ffd6dc; }
.home-actions-row .withdraw-row-btn { display: flex; align-items: center; justify-content: center; text-align: left; }

/* ══ #250: VIP plegado debajo de reseñas ══ */
.info-vip-inner { margin: 0 0 10px; border: 0; background: none; padding: 0 10px 4px; }
.info-vip-inner:empty::after { content: 'Entrá a jugar y acá vas a ver tu nivel y la escalera completa.'; display: block; color: var(--dx-muted); font-size: 12px; padding: 4px 0 8px; }

/* ══ #251: fila de acciones a la MITAD de alto — "Retirar premio" en una línea ══ */
.home-actions-row { margin: 4px 8px; gap: 6px; }
.home-actions-row .withdraw-row-btn, .load-row-btn { min-height: 38px; padding: 6px 10px !important; animation: none !important; }
.home-actions-row .withdraw-row-btn { font-size: 12px !important; letter-spacing: 1px !important; justify-content: center; }
.load-row-btn svg { width: 16px; height: 16px; }
.lr-text { line-height: 1; gap: 2px; }
.lr-text b { font-size: 12px; }
.lr-text small { font-size: 8.5px; }

/* ══ #252: círculo "Soporte aquí" arriba (ícono de chat, sin logo) ══ */
.tb-support .tb-circle-ico { position: relative; background: var(--dx-accent) !important; color: #06070d; border-color: transparent !important; }
.tb-support .tb-circle-lbl { color: var(--dx-cyan); }
.tb-support .support-unread { position: absolute; top: -5px; right: -5px; margin: 0; min-width: 16px; font-size: 9.5px; line-height: 14px; padding: 0 4px; }

/* ══ #253: tarjeta de nivel VIP con barra de progreso ══ */
.vip-card { padding: 8px 12px 10px !important; }
.vip-card::before { display: none; }
.vip-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--dx-text); text-align: left; }
.vip-head-l { display: flex; flex-direction: column; min-width: 0; }
.vip-head-lvl { font: 800 12px var(--dx-font); letter-spacing: .6px; text-transform: uppercase; }
.vip-head-next { font: 600 9.5px var(--dx-font); color: var(--dx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vip-head-r { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.vip-pct { font: 900 13px var(--dx-font); color: var(--dx-money); font-variant-numeric: tabular-nums; }
.vip-chevron { color: var(--dx-cyan); font-size: 11px; font-weight: 900; }
.vip-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--dx-border); overflow: hidden; margin-top: 7px; }
.vip-bar-fill { height: 100%; border-radius: 999px; background: var(--dx-accent); box-shadow: 0 0 10px rgba(255,45,85,.5); transition: width .6s ease; }
#vipCardBody { margin-top: 8px; }
.vip-body-p { margin: 0 0 6px; color: var(--dx-muted); font-size: 11px; line-height: 1.4; }
.vip-body-p b { color: var(--dx-text); }
.vip-lvl { display: grid; grid-template-columns: 18px 1.3fr 1fr 1.2fr; gap: 6px; align-items: center; padding: 5px 6px; border-radius: 8px; font-size: 11px; opacity: .55; }
.vip-lvl.on { opacity: 1; background: rgba(46,230,107,.06); }
.vip-lvl.next { opacity: 1; outline: 1px solid var(--dx-border-hi); background: rgba(255,45,85,.07); }
.vip-lvl-st { font-size: 11px; }
.vip-lvl.on .vip-lvl-st { color: #2ee66b; font-weight: 900; }
.vip-lvl-name { font-weight: 800; }
.vip-lvl-th { color: var(--dx-muted); }
.vip-lvl-win { color: var(--dx-money); font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }

/* ══ #254: Info del servicio — título chico, app+notis en una línea arriba, ruleta plegada ══ */
.info-head-sm { margin-bottom: 8px; }
.info-head-sm h2 { font-size: 13px !important; letter-spacing: 1.2px; }
.info-diag-top { margin: 0 0 10px; }
.info-diag-top > div { margin-top: 0 !important; border-top: 0 !important; padding-top: 0 !important; }
.info-diag-top h3 { display: none !important; }
.info-diag-top > div > div { flex-direction: row !important; flex-wrap: wrap; gap: 6px !important; }
.info-diag-top > div > div > * { flex: 1 1 140px; min-width: 0; font-size: 11px !important; padding: 6px 8px !important; }
.info-diag-top > div > div + div { font-size: 10.5px !important; margin-top: 5px !important; }
.info-roulette { padding: 0 10px 10px; }
.info-roulette p { margin: 0 0 8px; color: var(--dx-muted); font-size: 12px; line-height: 1.45; }
.info-roulette p b { color: var(--dx-text); }
.info-roulette-btn { width: 100%; background: var(--dx-accent); color: #06070d; border: 0; border-radius: 10px; clip-path: var(--dx-cut-sm); padding: 11px; font: 900 12px var(--dx-font); letter-spacing: .8px; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 18px rgba(255,23,68,.28); }

/* ══ #255: "Recomendado" en Girox ══ */
.plat-reco { position: absolute; top: 6px; left: 8px; font: 900 8px var(--dx-font); letter-spacing: .9px; text-transform: uppercase; color: #fff; background: var(--dx-accent); border-radius: 4px; padding: 2px 6px; box-shadow: 0 2px 8px rgba(255,23,68,.4); }

/* ══ #256: escalera VIP sin plata — nivel + % ══ */
.vip-lvl-3 { grid-template-columns: 18px 1.5fr 1fr; }
.vip-lvl-name small { font: 700 8.5px var(--dx-font); letter-spacing: .8px; text-transform: uppercase; color: var(--dx-cyan); margin-left: 4px; }
.vip-row-2 { grid-template-columns: 1.5fr 1fr; }

/* ══ #257: cartel de nuevo nivel + reclamo del bono ══ */
.vip-claim { border-color: #ffd166 !important; box-shadow: 0 0 26px rgba(255,209,102,.25) !important; padding: 10px 12px !important; }
.vip-claim::before { background: linear-gradient(90deg, #ffd166, #ff2d55); }
.vc-item + .vc-item { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--dx-border); }
.vc-title { font: 800 13px var(--dx-font); color: var(--dx-text); }
.vc-amt { color: var(--dx-muted); font-size: 12px; margin: 3px 0 7px; }
.vc-amt b { color: var(--dx-money); font-size: 15px; }
.vc-plats { display: flex; gap: 6px; margin-bottom: 7px; }
.vc-plat { flex: 1; background: rgba(255,255,255,.05); color: var(--dx-text); border: 1px solid var(--dx-border); border-radius: 8px; padding: 7px; font: 800 11px var(--dx-font); letter-spacing: .5px; text-transform: uppercase; cursor: pointer; }
.vc-plat.on { background: var(--dx-accent); color: #06070d; border-color: transparent; }
.vc-btn { width: 100%; background: linear-gradient(135deg, #ffd166, #ffb300); color: #1a1407; border: 0; border-radius: 10px; clip-path: var(--dx-cut-sm); padding: 11px; font: 900 12px var(--dx-font); letter-spacing: .8px; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 18px rgba(255,209,102,.3); }
.vc-btn:disabled { opacity: .6; }

/* ══ #258: TODO en una pantalla — compactar sin perder estética; saldo arriba ══ */
.balance-strip { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 8px 0; padding: 5px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--dx-border); }
.balance-strip .dash-balance-label { color: var(--dx-muted) !important; font: 800 9px var(--dx-font); letter-spacing: 1.4px; text-transform: uppercase; }
.balance-strip .dash-balance-amount { color: var(--dx-money) !important; font: 900 15px var(--dx-font); font-variant-numeric: tabular-nums; }
.home-dash { gap: 5px; margin-top: 5px; }
.home-card { padding: 7px 10px; }
.home-card-title { font-size: 10.5px; margin: 0 0 4px; letter-spacing: 1.2px; }
.home-card-sub { font-size: 10px; margin-bottom: 5px; line-height: 1.3; }
/* reembolsos */
.dash-top { padding: 5px 8px !important; }
.dash-top .dash-refunds-title { font-size: 9px !important; margin-bottom: 2px !important; }
.dash-top .dash-refunds-row .refund-btn { min-height: 28px; padding: 3px 6px !important; }
/* guardá tu acceso: una línea */
.access-head { padding: 6px 10px; }
.access-title { flex-direction: row; align-items: baseline; gap: 6px; font-size: 10.5px; }
.access-title small { font-size: 8.5px; }
/* nivel VIP: una línea + barra fina */
.vip-card { padding: 6px 10px 7px !important; }
.vip-head-lvl { font-size: 11px; }
.vip-head-next { font-size: 9px; }
.vip-pct { font-size: 12px; }
.vip-bar { height: 5px; margin-top: 5px; }
/* plataformas: tarjetas bajas */
.plat-play-row { gap: 6px; }
.plat-play-btn { padding: 6px 8px 22px; }
.plat-logo { width: 24px; height: 24px; margin-bottom: 1px; }
.plat-play-name { font-size: 12px; }
.plat-play-sub { display: none; }
.plat-enter { bottom: 4px; }
.plat-reco { top: 4px; left: 6px; font-size: 7.5px; }
.plat-check { width: 16px; height: 16px; top: 5px; right: 7px; font-size: 10px; }
/* carga */
.al-step { padding: 4px 0; }
.al-step-t { font-size: 12px; margin-bottom: 3px; }
.al-cbu .mono { font-size: 15px; }
.al-meta { font-size: 9.5px; }
.home-actions-row { margin: 4px 8px 3px; }
.home-bottom-bar { margin: 0 8px 3px; }
.hb-btn { padding: 6px 10px; }
.home-how-btn { padding: 5px 10px; margin-bottom: 4px; }

/* ══ #261: carga rápida dentro del casino en formato CARGA, descartable ══ */
.cq-x { position: absolute; top: -6px; left: -6px; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #ff1744; border: 2px solid #ff1744; font: 900 11px/1 system-ui, sans-serif; cursor: pointer; z-index: 7; }
.casino-quick-btn { margin-left: auto; background: var(--dx-accent); color: #06070d; border: 0; border-radius: 999px; padding: 6px 11px; font: 900 10.5px var(--dx-font); letter-spacing: .6px; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.casino-load { position: absolute; z-index: 8; right: 12px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); width: min(360px, calc(100vw - 24px)); background: #0b0d14; border: 1px solid var(--dx-border-hi); border-radius: 14px; padding: 10px 12px; box-shadow: 0 14px 44px rgba(0,0,0,.6); color: var(--dx-text); font-family: var(--dx-font); }
.cl-head { display: flex; align-items: center; justify-content: space-between; font: 800 11px var(--dx-font); letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 6px; }
.cl-close { background: none; border: 1px solid var(--dx-border); color: var(--dx-text); border-radius: 50%; width: 24px; height: 24px; cursor: pointer; }
.cl-step { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-bottom: 1px solid var(--dx-border); }
.cl-step > b { flex: 0 0 20px; height: 20px; border-radius: 50%; background: var(--dx-accent); color: #06070d; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.cl-step > div { flex: 1; min-width: 0; }
.cl-t { font-weight: 800; font-size: 12px; margin-bottom: 3px; }
.cl-cbu { display: flex; align-items: center; gap: 8px; }
.cl-cbu .mono { flex: 1; font-weight: 800; font-size: 14px; color: var(--dx-money); overflow-wrap: anywhere; }
.cl-copy { background: rgba(255,45,85,.08); color: var(--dx-cyan); border: 1px solid var(--dx-border); border-radius: 6px; padding: 4px 9px; font: 800 9.5px var(--dx-font); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.cl-meta { color: var(--dx-muted); font-size: 10px; margin-top: 3px; }
.cl-meta a { color: var(--dx-cyan); font-weight: 700; }
.cl-plats { display: flex; gap: 6px; }
.cl-plat { flex: 1; background: rgba(255,255,255,.05); color: var(--dx-text); border: 1px solid var(--dx-border); border-radius: 8px; padding: 6px; font: 800 11px var(--dx-font); text-transform: uppercase; cursor: pointer; }
.cl-plat.on { background: var(--dx-accent); color: #06070d; border-color: transparent; }
.cl-btn { width: 100%; margin-top: 8px; background: linear-gradient(135deg, #00c853, #69f0ae); color: #052e16; border: 0; border-radius: 10px; clip-path: var(--dx-cut-sm); padding: 11px; font: 900 11.5px var(--dx-font); letter-spacing: .8px; text-transform: uppercase; cursor: pointer; }

/* ══ #262: saldo + Instalar app arriba; Referidos + ¿Cómo funciona? abajo en una línea ══ */
.balance-strip { justify-content: space-between; gap: 8px; padding: 4px 6px 4px 12px; }
.bs-balance { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bs-install { position: relative; display: flex; align-items: center; gap: 8px; background: linear-gradient(160deg, rgba(255,23,68,.14), rgba(255,107,107,.06)); border: 1px solid var(--dx-border-hi); border-radius: 10px; padding: 4px 10px; cursor: pointer; color: var(--dx-text); text-align: left; }
.bs-install:disabled { opacity: .55; cursor: default; }
.bs-install-t { display: flex; flex-direction: column; line-height: 1.05; }
.bs-install-t b { font: 900 11px var(--dx-font); letter-spacing: .6px; text-transform: uppercase; }
.bs-install-t small { font: 600 8.5px var(--dx-font); color: var(--dx-muted); }
.bs-imp { font: 900 8px var(--dx-font); letter-spacing: 1px; text-transform: uppercase; color: #fff; background: var(--dx-accent); border-radius: 4px; padding: 2px 6px; box-shadow: 0 2px 8px rgba(255,23,68,.4); animation: bsImp 2s ease-in-out infinite; }
@keyframes bsImp { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.hb-how { border-style: dashed; }

/* ══ #263: franja del saldo a la MITAD de alto ══ */
.balance-strip { padding: 2px 5px 2px 10px; margin: 3px 8px 0; border-radius: 8px; }
.balance-strip .dash-balance-label { font-size: 8px; letter-spacing: 1px; }
.balance-strip .dash-balance-amount { font-size: 12.5px; }
.bs-install { padding: 2px 8px; gap: 6px; border-radius: 8px; }
.bs-install-t b { font-size: 9.5px; }
.bs-install-t small { font-size: 7.5px; }
.bs-imp { font-size: 7px; padding: 1px 5px; }

/* ══ #264: cabecera de círculos apenas más baja (mismo tamaño de todo) ══ */
.header.header-toolbar.tb-circles { padding: 3px 6px 2px; padding-top: max(3px, env(safe-area-inset-top, 3px)); }
.tb-circle { gap: 1px; }
.tb-circle-ico { width: 30px; height: 30px; }
.tb-circle-plain { width: 30px; height: 30px; }
.tb-circle-lbl { font-size: 7.5px; line-height: 1; }
.balance-strip { margin-top: 2px; }

/* ══ #265: círculos un poco más chicos ══ */
.tb-circle-ico, .tb-circle-plain { width: 26px; height: 26px; }
.tb-circle-ico svg { width: 13px; height: 13px; }
.tb-circle-plain { font-size: 13px; }
.tb-support img { width: 22px; height: 22px; }
.tb-circle-lbl { font-size: 7px; }
.tb-circle { min-width: 42px; }

/* ══ #266: CHAT PRINCIPAL + MENÚ DESLIZANTE HACIA ARRIBA (owner 2026-10-17) ══
   body.home-mini (default): el home completo (#homeFull) queda plegado arriba, el chat
   (#supportPanel) se muestra INLINE ocupando la pantalla con la cabecera estilo WhatsApp
   (#waHead). "Ver todo" saca la clase: vuelve el home de siempre y el chat a la burbuja. */
.service-banner {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  margin: 4px 8px 4px; padding: 8px 10px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, rgba(255,23,68,.2), rgba(10,12,22,.92));
  border: 1px solid rgba(255,23,68,.55); color: #f4f6fb;
  box-shadow: 0 6px 18px rgba(255,23,68,.18); -webkit-tap-highlight-color: rgba(255,23,68,.25); touch-action: manipulation;
}
.service-banner:active { transform: scale(.995); }
.svb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.svb-text b { font-size: 11.5px; letter-spacing: .8px; text-transform: uppercase; color: #ff6b6b; line-height: 1.1; }
.svb-msg { font-size: 11px; line-height: 1.3; color: #dfe4ef; }
.svb-msg em { font-style: normal; color: #2ee66b; font-weight: 900; }
.svb-cta {
  flex: 0 0 auto; background: linear-gradient(135deg, #ff1744, #ff6b6b); color: #06070d;
  border-radius: 999px; padding: 7px 11px; font-size: 10.5px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; box-shadow: 0 6px 18px rgba(255,23,68,.3);
}
/* Desplegado: el cartel se achica a una línea-manija (todo sigue entrando en una pantalla). */
body:not(.home-mini) .service-banner { padding: 3px 10px; margin: 3px 8px 2px; }
body:not(.home-mini) .svb-msg { display: none; }
body:not(.home-mini) .svb-cta { padding: 4px 9px; font-size: 9.5px; }
/* El home completo, plegable hacia arriba. */
#homeFull { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; overflow: hidden; max-height: 100vh; transition: max-height .35s ease, opacity .25s ease; }
body.home-mini #homeFull { max-height: 0; opacity: 0; pointer-events: none; }
/* El chat, inline y a pantalla (ya no overlay) mientras el home está plegado. */
body.home-mini .support-panel { position: static; inset: auto; z-index: auto; flex: 1 1 auto; min-height: 0; display: flex; margin: 0 6px; border-radius: 14px 14px 0 0; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-bottom: 0; }
body.home-mini .support-panel.hidden { display: flex; }
body.home-mini .support-head, body.home-mini #supportTests { display: none !important; }
body.home-mini .support-panel .cbu-chat-btn { display: flex !important; }
body.home-mini #supportBubble, body.home-mini #headerSupportBtn { display: none !important; }
/* Cabecera estilo WhatsApp (sólo en modo chat principal). */
.wa-head { display: none; padding-top: 7px; padding-bottom: 7px; }
body.home-mini .wa-head { display: flex; }
.wa-head .chat-topbar-info { flex: 1 1 auto; cursor: pointer; }
.wa-head .chat-topbar-name { font-size: 16px; font-weight: 800; }
.wa-head .chat-topbar-status { font-size: 12px; }
.wa-head-btn { position: relative; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wa-head-btn:active { transform: scale(.95); }
.wa-head-fire .fire-streak-badge { top: -4px; right: -4px; }

/* ══ #267: PANTALLA DE ENTRADA — plataforma abierta adentro + Carga manual / automática ══ */
.entry-view { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; gap: 6px; margin: 4px 6px 0; }
body.home-play .entry-view { display: flex; }
body.home-play #homeFull { max-height: 0; opacity: 0; pointer-events: none; }
body.home-play .service-banner { display: none; }
body.home-play #supportPanel { display: none !important; }
body.home-play #supportBubble, body.home-play #headerSupportBtn { display: none !important; }
.ev-tabs { display: flex; gap: 6px; flex: 0 0 auto; padding-top: 6px; }
.ev-tab {
  position: relative; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 6px; border-radius: 11px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  color: #f4f6fb; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; cursor: pointer;
  -webkit-tap-highlight-color: rgba(255,255,255,.15); touch-action: manipulation;
}
.ev-tab img { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; background: #0a0c16; }
.ev-tab.active { background: linear-gradient(135deg, #ff1744, #ff6b6b); color: #06070d; border-color: transparent; box-shadow: 0 6px 18px rgba(255,23,68,.3); }
.ev-tab.plat-ganamos.active { background: linear-gradient(135deg, #6a0dad, #9b30ff); color: #fff; box-shadow: 0 6px 18px rgba(106,13,173,.35); }
.ev-reco { position: absolute; top: -7px; right: 6px; font-size: 8px; font-weight: 900; letter-spacing: .3px; background: #ff1744; color: #fff; border-radius: 999px; padding: 1px 6px; text-transform: uppercase; }
.ev-tab.active .ev-reco { background: #06070d; color: #ff6b6b; }
.ev-frame-wrap { flex: 1 1 auto; min-height: 0; position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: #0d0d1a; }
#entryFrame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #0d0d1a; }
.ev-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; color: #ff6b6b; font-weight: 800; background: #0d0d1a; }
.ev-status[hidden] { display: none !important; }
.ev-st-open { background: linear-gradient(135deg, #ff1744, #ff6b6b); color: #06070d; border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; font-size: 11px; cursor: pointer; }
.ev-loads { display: flex; gap: 6px; flex: 0 0 auto; padding-bottom: 4px; }
.ev-load { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 6px; border-radius: 12px; border: 0; cursor: pointer; line-height: 1.15; -webkit-tap-highlight-color: rgba(255,255,255,.15); touch-action: manipulation; }
.ev-load b { font-size: 12.5px; font-weight: 900; }
.ev-load small { font-size: 9.5px; font-weight: 600; opacity: .9; }
.ev-load.manual { background: linear-gradient(135deg, #128c4a, #25d366); color: #06120a; box-shadow: 0 6px 18px rgba(37,211,102,.25); }
.ev-load.auto { background: linear-gradient(135deg, #ff1744, #ff6b6b); color: #06070d; box-shadow: 0 6px 18px rgba(255,23,68,.3); }
.ev-load .support-unread { position: absolute; top: -6px; right: -4px; }
.ev-load:active, .ev-tab:active { transform: scale(.98); }
/* Chip "Plataformas" del cartel (vuelve a la pantalla de entrada desde el chat / la app completa). */
.svb-plat { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 6px 9px; font-size: 10px; font-weight: 800; color: #f4f6fb; white-space: nowrap; cursor: pointer; }
body:not(.home-mini) .svb-plat { padding: 3px 8px; font-size: 9.5px; }

/* ══ #268: BARRA DE ARRIBA — Inicio (destacado) · Carga automática · Carga manual · Info · Perfil ══ */
.header.topnav { display: flex; align-items: stretch; justify-content: space-between; gap: 4px !important; padding: 4px 6px 4px !important; padding-top: max(4px, env(safe-area-inset-top, 4px)) !important; }
.tn-btn {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 4px 2px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--dx-text, #f4f6fb);
  font-weight: 800; font-size: 8.5px; text-transform: uppercase; letter-spacing: .3px; line-height: 1.05; text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: rgba(255,255,255,.15); touch-action: manipulation;
}
.tn-ico { position: relative; font-size: 16px; line-height: 1; }
.tn-ico .support-unread { position: absolute; top: -7px; right: -11px; }
.tn-lbl { display: block; }
.tn-btn.active { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
.tn-home { flex: 1.6 1 0; background: linear-gradient(135deg, #ff1744, #ff6b6b); color: #06070d; border-color: transparent; box-shadow: 0 6px 18px rgba(255,23,68,.3); }
.tn-home .tn-ico { font-size: 20px; }
.tn-home .tn-lbl { font-size: 11px; letter-spacing: .8px; }
.tn-home.active { box-shadow: 0 0 0 2px rgba(255,107,107,.65), 0 6px 18px rgba(255,23,68,.4); }
.tn-btn:active { transform: scale(.97); }
/* Modal Perfil (formato simple, blanco). */
.profile-modal .pf-main { background: #f0f2f5; border-radius: 12px; padding: 8px 12px; margin: 6px 0 12px; }
.profile-modal .pf-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #e3e6ea; }
.profile-modal .pf-row:last-of-type { border-bottom: 0; }
.profile-modal .pf-k { font-size: 10.5px; color: #667781; text-transform: uppercase; letter-spacing: .5px; min-width: 76px; font-weight: 700; }
.profile-modal .pf-v { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; color: #111b21; word-break: break-all; }
.profile-modal .pf-copy { flex: 0 0 auto; border: 1px solid #cfd4da; background: #fff; border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 800; color: #111b21; cursor: pointer; }
.profile-modal .pf-hint { font-size: 11px; color: #667781; padding-top: 6px; line-height: 1.35; }
.profile-modal .pf-actions { display: flex; flex-direction: column; gap: 6px; }
.profile-modal .pf-act { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; text-align: left; background: #fff; border: 1px solid #e3e6ea; border-radius: 12px; padding: 8px 11px; color: #111b21; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; position: relative; }
.profile-modal .pf-act > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.profile-modal .pf-act small { font-size: 11px; color: #667781; font-weight: 500; line-height: 1.25; }
.profile-modal .pf-act .support-unread { position: static; margin-left: auto; }
.profile-modal .pf-wrap { cursor: default; }
.profile-modal .pf-wrap > span { cursor: pointer; }
.profile-modal .pf-act .pf-ico-btn { position: relative !important; flex: 0 0 auto; width: 36px !important; height: 36px !important; min-width: 0 !important; border-radius: 50% !important; border: 0 !important; background: #f0f2f5 !important; color: #111b21; font-size: 18px !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; cursor: pointer; box-shadow: none !important; }
.profile-modal .pf-act .pf-ico-btn.active { background: #d9fdd3 !important; }
.profile-modal .pf-act .fire-streak-badge { top: -4px; right: -4px; }
/* La "carga rápida" de la pantalla de entrada ya no tiene botones abajo (#268). */
.ev-loads { display: none !important; }

/* ══ #269: INICIO al centro, separado y RETRO (arcade) · servicios en el Inicio · carga automática sencilla ══ */
.header.topnav { align-items: center; }
.tn-sep { flex: 0 0 1px; align-self: stretch; margin: 4px 3px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.35), transparent); }
.tn-home.tn-retro {
  flex: 0 0 auto; min-width: 84px; padding: 5px 10px 6px; margin: 0 2px; border-radius: 8px;
  background: linear-gradient(180deg, #ff5f6d 0%, #ff1744 55%, #b80024 100%);
  border: 2px solid #ffd166; box-shadow: 0 0 0 2px #06070d, 0 0 0 3px #ff6b6b, inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.35), 0 6px 18px rgba(255,23,68,.45);
  color: #fff8e7; text-shadow: 1px 1px 0 #7a0016;
}
.tn-home.tn-retro .tn-ico { font-size: 18px; filter: drop-shadow(1px 1px 0 #7a0016); }
.tn-home.tn-retro .tn-lbl { font-family: 'Press Start 2P', 'Montserrat', monospace; font-size: 8.5px; letter-spacing: 1px; margin-top: 2px; }
.tn-home.tn-retro.active { box-shadow: 0 0 0 2px #06070d, 0 0 0 3px #ffd166, 0 0 16px rgba(255,209,102,.6), inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.35); animation: tn-retro-glow 1.6s ease-in-out infinite; }
@keyframes tn-retro-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { .tn-home.tn-retro.active { animation: none; } }
/* Servicios arriba de la plataforma (Inicio). */
.ev-services { display: flex; gap: 5px; flex: 0 0 auto; padding-top: 6px; }
.ev-svc { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #f4f6fb; cursor: pointer; line-height: 1.15; text-align: center; -webkit-tap-highlight-color: rgba(255,255,255,.15); touch-action: manipulation; }
.ev-svc b { font-size: 11px; font-weight: 900; white-space: nowrap; }
.ev-svc small { font-size: 8.5px; font-weight: 600; color: #c9d1e3; }
.ev-svc.svc-refund { border-color: rgba(46,230,107,.5); box-shadow: inset 0 0 0 1px rgba(46,230,107,.15); }
.ev-svc.svc-refund b { color: #2ee66b; }
.ev-svc.svc-roulette { border-color: rgba(255,209,102,.5); }
.ev-svc.svc-roulette b { color: #ffd166; }
.ev-svc.svc-ref { border-color: rgba(0,229,255,.45); }
.ev-svc.svc-ref b { color: #4de1ff; }
.ev-svc:active { transform: scale(.98); }
.ev-tabs { padding-top: 0; }
/* Carga automática SENCILLA (modo full): sólo saldo, plataforma, CBU y Cargar/Retirar. */
body.home-full .service-banner, body.home-full .dash-top, body.home-full #accessCard, body.home-full #vipCard, body.home-full .home-bottom-bar { display: none !important; }
body.home-full .home-dash { margin-bottom: 0; }
body.home-full #autoLoadCard { margin-top: 4px; }

/* ══ #270: INICIO moderno/futurista (mundo de las apuestas) · reseñas tipo Google al pie del Inicio · Perfil con datos protagonistas ══ */
.tn-home.tn-retro {
  flex: 0 0 auto; min-width: 88px; padding: 6px 12px 7px; margin: 0 2px; border-radius: 10px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #1b1f33 0%, #0b0d16 60%, #14091a 100%);
  border: 1px solid rgba(0,229,255,.55);
  box-shadow: 0 0 0 1px rgba(255,23,68,.35), 0 0 18px rgba(0,229,255,.25), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(255,23,68,.35);
  color: #f4f6fb; text-shadow: none; animation: none;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.tn-home.tn-retro::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%); transform: translateX(-120%); animation: tn-sheen 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes tn-sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.tn-home.tn-retro .tn-ico { font-size: 0; filter: none; color: #4de1ff; display: inline-flex; }
.tn-home.tn-retro .tn-ico svg { width: 18px; height: 18px; filter: drop-shadow(0 0 6px rgba(0,229,255,.7)); }
.tn-home.tn-retro .tn-lbl { font-family: 'Montserrat', system-ui, sans-serif; font-size: 10px; font-weight: 900; letter-spacing: 2.2px; margin-top: 2px; background: linear-gradient(90deg, #4de1ff, #ffffff 50%, #ff6b6b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tn-home.tn-retro.active { animation: none; border-color: rgba(255,107,107,.8); box-shadow: 0 0 0 1px rgba(255,23,68,.6), 0 0 22px rgba(255,23,68,.4), 0 0 10px rgba(0,229,255,.35), inset 0 1px 0 rgba(255,255,255,.14); }
.tn-home.tn-retro.active .tn-ico { color: #ff6b6b; }
.tn-home.tn-retro.active .tn-ico svg { filter: drop-shadow(0 0 7px rgba(255,23,68,.8)); }
@media (prefers-reduced-motion: reduce) { .tn-home.tn-retro::before { animation: none; } }
.tn-sep { background: linear-gradient(180deg, transparent, rgba(0,229,255,.45), transparent); }
/* Reseñas tipo Google (slider). */
.ev-reviews { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; padding: 2px 0 4px; }
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.rv-g { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #c9d1e3; }
.rv-avg { font-size: 12px; font-weight: 900; color: #fff; display: inline-flex; align-items: center; gap: 4px; }
.rv-avg small { font-weight: 600; color: #9aa3b8; }
.rv-track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 2px 4px; }
.rv-track::-webkit-scrollbar { display: none; }
.rv-card { flex: 0 0 76%; max-width: 290px; scroll-snap-align: start; background: #fff; color: #202124; border: 1px solid #dadce0; border-radius: 12px; padding: 9px 11px; box-shadow: 0 1px 3px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 5px; text-align: left; font-family: Roboto, 'Montserrat', system-ui, sans-serif; }
.rv-top { display: flex; align-items: center; gap: 8px; }
.rv-avatar { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.rv-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rv-who b { font-size: 12.5px; font-weight: 700; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-stars { font-size: 12px; letter-spacing: 1px; color: #dadce0; line-height: 1; }
.rv-stars .on { color: #fbbc04; }
.rv-text { font-size: 12px; line-height: 1.4; color: #3c4043; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rv-add { align-items: center; justify-content: center; text-align: center; flex-basis: 46%; background: #f8f9fa; border-style: dashed; cursor: pointer; gap: 2px; }
.rv-add-star { font-size: 22px; color: #fbbc04; line-height: 1; }
.rv-add b { font-size: 12.5px; color: #1a73e8; }
.rv-add small { font-size: 10.5px; color: #5f6368; }
/* Perfil: datos protagonistas + captura. */
.profile-modal .pf-main-big { padding: 10px 12px 12px; }
.profile-modal .pf-main-big .pf-k { min-width: 92px; }
.profile-modal .pf-main-big .pf-v { font-size: 17px; font-weight: 800; }
.profile-modal .pf-main-big .pf-link { font-size: 12.5px; font-weight: 700; color: #1a73e8; }
.profile-modal .pf-capture { width: 100%; margin-top: 10px; background: linear-gradient(135deg, #ff1744, #ff6b6b); color: #06070d; border: 0; border-radius: 999px; padding: 11px 14px; font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; cursor: pointer; box-shadow: 0 6px 18px rgba(255,23,68,.3); }
.profile-modal .pf-capture:disabled { opacity: .7; }

/* ══ #271: alias+titular en la carga, plataformas sin "Entrar", cartel del chat corto, FUEGUITO DIARIO entre Cargar y Retirar ══ */
.al-alias-row { margin-top: 4px; }
.al-alias-k { font-size: 10px; font-weight: 700; color: #9aa3b8; text-transform: uppercase; letter-spacing: .5px; margin-right: 6px; white-space: nowrap; }
.al-meta-2 b { color: #f4f6fb; font-weight: 800; }
.plat-play-btn .plat-play-sub { bottom: 6px; }
.home-actions-row { align-items: stretch; }
.fire-home-card {
  flex: 1.25 1 0; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 6px 9px; margin: 0; border-radius: 12px; cursor: pointer; text-align: left;
  background: linear-gradient(135deg, #3a1200 0%, #1a0a00 55%, #0d0d1a 100%);
  border: 1px solid rgba(255,140,0,.55); color: #ffe7c2;
  box-shadow: 0 0 0 1px rgba(255,69,0,.25), 0 6px 18px rgba(255,100,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-tap-highlight-color: rgba(255,140,0,.25); touch-action: manipulation;
}
.fire-home-card .fh-flame { font-size: 22px; line-height: 1; filter: drop-shadow(0 0 8px rgba(255,120,0,.8)); flex: 0 0 auto; }
.fire-home-card .fh-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; line-height: 1.1; }
.fire-home-card .fh-text b { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; color: #ffb347; white-space: nowrap; }
.fire-home-card .fh-text small { font-size: 9px; font-weight: 600; color: #e6c9a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fire-home-card .fh-streak { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; line-height: 1; padding: 3px 7px; border-radius: 9px; background: rgba(255,140,0,.15); border: 1px solid rgba(255,140,0,.4); }
.fire-home-card .fh-streak b { font-size: 15px; font-weight: 900; color: #fff; }
.fire-home-card .fh-streak small { font-size: 8px; font-weight: 700; color: #ffb347; text-transform: uppercase; }
.fire-home-card.can-claim { border-color: #ffb347; box-shadow: 0 0 0 1px rgba(255,179,71,.5), 0 0 22px rgba(255,120,0,.45); animation: fh-pulse 1.4s ease-in-out infinite; }
.fire-home-card.can-claim .fh-flame { animation: fh-flame 1s ease-in-out infinite; }
@keyframes fh-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes fh-flame { 0%, 100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.15) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .fire-home-card.can-claim, .fire-home-card.can-claim .fh-flame { animation: none; } }
.fire-home-card:active { transform: scale(.98); }

/* ══ #272: toda la barra con el estilo del Inicio (vidrio, corte diamantado, íconos SVG cian) · Fueguito arriba ══ */
.tn-btn:not(.tn-home) {
  position: relative; overflow: hidden; padding: 5px 3px 6px; border-radius: 9px;
  background: linear-gradient(160deg, rgba(27,31,51,.9) 0%, rgba(11,13,22,.95) 100%);
  border: 1px solid rgba(0,229,255,.22); color: #dfe6f5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 4px 12px rgba(0,0,0,.35);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.tn-btn:not(.tn-home) .tn-ico { font-size: 0; display: inline-flex; color: #4de1ff; }
.tn-btn:not(.tn-home) .tn-ico svg { width: 17px; height: 17px; filter: drop-shadow(0 0 5px rgba(0,229,255,.55)); }
.tn-btn:not(.tn-home) .tn-lbl { font-size: 8px; letter-spacing: .5px; color: #dfe6f5; }
.tn-btn:not(.tn-home).active { background: linear-gradient(160deg, rgba(50,18,30,.95) 0%, rgba(14,9,20,.98) 100%); border-color: rgba(255,107,107,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 14px rgba(255,23,68,.35); }
.tn-btn:not(.tn-home).active .tn-ico { color: #ff6b6b; }
.tn-btn:not(.tn-home).active .tn-ico svg { filter: drop-shadow(0 0 6px rgba(255,23,68,.8)); }
.tn-btn:not(.tn-home).active .tn-lbl { color: #fff; }
.tn-ico .support-unread { top: -6px; right: -12px; }
/* Fueguito diario arriba de la carga automática, a todo el ancho. */
.fire-home-top { margin: 4px 8px 0; width: calc(100% - 16px); flex: 0 0 auto; padding: 7px 11px; }
.fire-home-top .fh-text b { font-size: 12px; }
.fire-home-top .fh-text small { font-size: 10px; }
.fire-home-top .fh-flame { font-size: 24px; }

/* ══ #273: reseñas más disimuladas (sin blanco), "Dejá tu opinión" primero · sin aviso de verificar teléfono ══ */
#verifyPhoneBanner { display: none !important; }
.ev-reviews { padding: 0 0 2px; gap: 3px; }
.rv-g { font-size: 9.5px; color: #8f98ad; }
.rv-avg { font-size: 11px; color: #c9d1e3; }
.rv-avg small { color: #7f879a; }
.rv-track { gap: 6px; padding: 1px 2px 3px; }
.rv-card { flex: 0 0 64%; max-width: 240px; background: rgba(255,255,255,.055); color: #dfe4ef; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 7px 9px; box-shadow: none; gap: 4px; font-family: 'Montserrat', system-ui, sans-serif; }
.rv-avatar { width: 24px; height: 24px; font-size: 11px; opacity: .85; }
.rv-who b { font-size: 11px; color: #dfe4ef; }
.rv-stars { font-size: 10.5px; color: rgba(255,255,255,.18); }
.rv-stars .on { color: #e2b23a; }
.rv-text { font-size: 10.5px; color: #b9c2d6; -webkit-line-clamp: 2; }
.rv-add { flex-basis: 40%; background: rgba(0,229,255,.05); border: 1px dashed rgba(0,229,255,.35); gap: 1px; }
.rv-add-star { font-size: 16px; color: #e2b23a; }
.rv-add b { font-size: 11px; color: #4de1ff; }
.rv-add small { font-size: 9px; color: #8f98ad; }

/* ══ #274: modal PERFIL en el estilo oscuro de la app (chau blanco) ══ */
.modal.profile-modal .modal-content { background: linear-gradient(160deg, #151a2e 0%, #0b0d16 70%) !important; border: 1px solid rgba(0,229,255,.25) !important; box-shadow: 0 14px 40px rgba(0,0,0,.6), 0 0 24px rgba(0,229,255,.08) !important; color: #f4f6fb; font-family: 'Montserrat', system-ui, sans-serif; }
.modal.profile-modal .modal-header h2 { color: #fff !important; font: 900 16px 'Montserrat', system-ui, sans-serif !important; letter-spacing: .6px !important; text-transform: uppercase !important; }
.modal.profile-modal .modal-header p { color: #8f98ad !important; }
.modal.profile-modal .rs-close { color: #8f98ad; }
.profile-modal .pf-main, .profile-modal .pf-main-big { background: rgba(255,255,255,.05); border: 1px solid rgba(0,229,255,.2); }
.profile-modal .pf-row { border-bottom-color: rgba(255,255,255,.08); }
.profile-modal .pf-k { color: #8f98ad; }
.profile-modal .pf-v, .profile-modal .pf-main-big .pf-v { color: #fff; }
.profile-modal .pf-main-big .pf-link { color: #4de1ff; }
.profile-modal .pf-copy { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #f4f6fb; }
.profile-modal .pf-hint { color: #9aa3b8; }
.profile-modal .pf-act { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #f4f6fb; }
.profile-modal .pf-act small { color: #9aa3b8; }
.profile-modal .pf-act .pf-ico-btn { background: rgba(255,255,255,.1) !important; color: #fff; }
.profile-modal .pf-act .pf-ico-btn.active { background: rgba(46,230,107,.25) !important; }
.profile-modal .pf-capture { box-shadow: 0 6px 18px rgba(255,23,68,.35); }

/* ══ #275: cartel "JUGAR AHORA" al acreditarse la carga + botones test chiquitos ══ */
.play-now-card { position: fixed; inset: 0; z-index: 9700; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.play-now-card.show { opacity: 1; pointer-events: auto; }
.pn-sheet { width: 100%; max-width: 480px; box-sizing: border-box; padding: 16px 18px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0; background: linear-gradient(160deg, #151a2e 0%, #0b0d16 70%); border: 1px solid rgba(0,229,255,.3); border-bottom: 0; box-shadow: 0 -12px 40px rgba(0,0,0,.6), 0 0 30px rgba(255,23,68,.15); color: #f4f6fb; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translateY(16px); transition: transform .25s ease; }
.play-now-card.show .pn-sheet { transform: translateY(0); }
.pn-test { font-size: 9.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #06070d; background: #ffd166; border-radius: 999px; padding: 3px 9px; }
.pn-ico { font-size: 34px; line-height: 1; filter: drop-shadow(0 0 10px rgba(46,230,107,.6)); }
.pn-title { font-size: 17px; font-weight: 900; letter-spacing: .3px; color: #2ee66b; }
.pn-sub { font-size: 12px; color: #c9d1e3; line-height: 1.35; max-width: 34ch; }
.pn-btn { width: 100%; margin-top: 6px; background: linear-gradient(135deg, #ff1744, #ff6b6b); color: #06070d; border: 0; border-radius: 999px; padding: 13px 16px; font-weight: 900; font-size: 14px; text-transform: uppercase; letter-spacing: .8px; cursor: pointer; box-shadow: 0 8px 22px rgba(255,23,68,.4); }
.pn-btn:active { transform: scale(.98); }
.pn-later { background: none; border: 0; color: #8f98ad; font-size: 12px; font-weight: 700; padding: 6px 10px; cursor: pointer; }
.test-mini-row { display: none; justify-content: center; margin: 0 8px 2px; }
.test-mini { background: none; border: 1px dashed rgba(255,255,255,.22); color: #7f879a; border-radius: 999px; padding: 2px 9px; font-size: 9.5px; font-weight: 700; cursor: pointer; }
body.home-full .test-mini-row:not(.test-mini-manual) { display: flex; }
body.home-mini .test-mini-manual { display: flex; }
.plat-play-now { background: linear-gradient(135deg, #ff1744, #ff6b6b) !important; color: #06070d !important; border: 0 !important; }

/* ══ #276: nota ilustrativa en el Inicio ══ */
.ev-note { flex: 0 0 auto; font-size: 9.5px; line-height: 1.3; color: #8f98ad; text-align: center; padding: 0 6px; margin-top: -2px; }
.ev-note b { color: #c9d1e3; font-weight: 800; }

/* ══ #277: Inicio en modo LOGO (sin cargar la web) + "Ver página" desde el 2º ingreso + texto explicativo más grande con links ══ */
.ev-note-big { font-size: 12px; line-height: 1.4; color: #c9d1e3; padding: 2px 8px; margin-top: 0; }
.ev-note-big a { color: #4de1ff; font-weight: 800; text-decoration: none; border-bottom: 1px solid rgba(77,225,255,.45); white-space: nowrap; }
.ev-note-big a:active { opacity: .8; }
.ev-logo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; background: radial-gradient(ellipse at 50% 35%, rgba(0,229,255,.12), transparent 60%), linear-gradient(160deg, #151a2e 0%, #0b0d16 70%); }
.ev-logo img { width: min(46vw, 170px); height: min(46vw, 170px); object-fit: contain; border-radius: 22px; background: #0a0c16; padding: 10px; box-sizing: border-box; border: 1px solid rgba(0,229,255,.3); box-shadow: 0 0 36px rgba(0,229,255,.18), 0 14px 30px rgba(0,0,0,.5); }
.ev-logo-name { font-size: 20px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: #fff; margin-top: 4px; }
.ev-logo-sub { font-size: 11px; color: #8f98ad; font-weight: 600; }
.ev-view-site { margin-top: 6px; background: rgba(255,255,255,.07); color: #f4f6fb; border: 1px solid rgba(0,229,255,.45); border-radius: 999px; padding: 8px 16px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; cursor: pointer; }
.ev-view-site:active { transform: scale(.97); }
.ev-test-row { display: flex; margin-top: 8px; }
.plat-ganamos.active ~ * {}

/* ══ #278: sin modo logo (vuelven las páginas embebidas al entrar) ══ */
.ev-logo { display: none !important; }

/* ══ #280: carrusel de opiniones — desliza solo y a mano ══ */
.rv-track { scroll-behavior: smooth; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }

/* ══ #282: "Cargá acá" CENTRADA + paso 2 (adjuntar la foto abajo) ══ */
#autoLoadCard { text-align: center; }
#autoLoadCard .home-card-title { justify-content: center; }
#autoLoadCard .al-step-c { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 0; border-bottom: 0; }
#autoLoadCard .al-step-h { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
#autoLoadCard .al-step-h .al-n { margin-top: 0; }
#autoLoadCard .al-step-h .al-step-t { margin-bottom: 0; font-size: 13px; }
#autoLoadCard .al-step-body { width: 100%; }
#autoLoadCard .al-cbu { justify-content: center; }
#autoLoadCard .al-cbu .mono { flex: 0 1 auto; font-size: 14px; letter-spacing: .4px; white-space: nowrap; }
#autoLoadCard .al-alias-row { margin-top: 5px; }
#autoLoadCard .al-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 6px; text-align: center; }
#autoLoadCard .al-step-2 { border-top: 1px dashed var(--dx-border); margin-top: 2px; padding-top: 9px; }
#autoLoadCard .al-step-2 .al-n { background: var(--dx-money, #2ee59d); box-shadow: 0 0 12px rgba(46,229,157,.35); }
#autoLoadCard .al-step-2 .al-step-t { color: var(--dx-money, #2ee59d); }
#autoLoadCard .al-step-sub { font-size: 11px; line-height: 1.35; color: #c9d0e0; max-width: 34ch; margin: 0 auto; }
#autoLoadCard .al-step-sub b { color: #f4f6fb; }
@media (max-width: 360px) { #autoLoadCard .al-cbu .mono { font-size: 12.5px; letter-spacing: .2px; } }

/* ══ #283: CARGA GRATIS por instalar la app (primera carga): hoja de oferta + botón grande pendiente ══ */
.ig-sheet { border-color: rgba(46,230,107,.45); box-shadow: 0 -12px 40px rgba(0,0,0,.6), 0 0 30px rgba(46,230,107,.18); }
.ig-title { color: #ffd166; }
.ig-amount { font: 900 30px var(--dx-font); letter-spacing: .5px; color: #2ee66b; text-shadow: 0 0 18px rgba(46,230,107,.45); line-height: 1.1; }
.ig-btn-main { background: linear-gradient(135deg, #2ee66b, #00c853); box-shadow: 0 8px 22px rgba(46,230,107,.35); }
.ig-btn-later { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: #f4f6fb; border-radius: 999px; padding: 11px 14px; font: 800 12px var(--dx-font); letter-spacing: .4px; cursor: pointer; }
.ig-btn-later:active { transform: scale(.98); }
.ig-note { font-size: 10.5px; color: #8f98ad; }
.ig-bar { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 9400; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 0; border-radius: 16px; background: linear-gradient(135deg, #ffb300, #ff6d00); color: #06070d; text-align: left; cursor: pointer; box-shadow: 0 10px 30px rgba(255,109,0,.45), inset 0 0 0 1px rgba(255,255,255,.18); animation: igPulse 2.4s ease-in-out infinite; max-width: 560px; margin: 0 auto; }
.ig-bar:active { transform: scale(.985); }
.ig-bar-k { flex: 0 0 auto; font: 900 9px var(--dx-font); letter-spacing: 1.2px; background: #06070d; color: #ffd166; border-radius: 999px; padding: 4px 8px; }
.ig-bar-t { flex: 1; min-width: 0; font: 900 12.5px/1.2 var(--dx-font); text-transform: uppercase; letter-spacing: .4px; }
.ig-bar-amt { flex: 0 0 auto; font: 900 16px var(--dx-font); font-variant-numeric: tabular-nums; }
@keyframes igPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .ig-bar { animation: none; } }
/* En el chat (carga manual) el botón va arriba de la barra de escribir; el contenido deja lugar abajo. */
body.home-mini .ig-bar { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
body.ig-pending #homeFull, body.ig-pending #entryView { padding-bottom: 76px; }
body.ig-pending.home-mini #chatMessages { padding-bottom: 84px; }
body.ig-pending #loginScreen:not(.hidden) ~ .ig-bar { display: none !important; }

/* ══ #284: pasos 1 y 2 de "Cargá acá" en RECUADROS, compactos (sin scroll en la carga automática) ══ */
#autoLoadCard { padding: 7px 8px 6px; }
#autoLoadCard .home-card-title { margin: 0 0 5px; }
#autoLoadCard .al-step-c { border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.04); padding: 6px 8px 7px; margin: 0; gap: 3px; }
#autoLoadCard .al-step-c + .al-step-c { margin-top: 6px; }
#autoLoadCard .al-step-2 { border-top: 1px solid rgba(46,230,107,.45); border-color: rgba(46,230,107,.45); background: rgba(46,230,107,.06); padding-top: 6px; }
#autoLoadCard .al-step-h { gap: 6px; }
#autoLoadCard .al-step-h .al-n { flex-basis: 20px; width: 20px; height: 20px; font-size: 11px; }
#autoLoadCard .al-step-h .al-step-t { font-size: 12px; }
#autoLoadCard .al-cbu { gap: 6px; }
#autoLoadCard .al-cbu .mono { font-size: 13px; letter-spacing: .3px; }
#autoLoadCard .al-copy { padding: 4px 9px; font-size: 10px; }
#autoLoadCard .al-alias-row { margin-top: 3px; }
#autoLoadCard .al-alias-k { font-size: 9px; }
#autoLoadCard .al-meta { font-size: 9.5px; padding: 2px 0 0; }
#autoLoadCard .al-step-sub { font-size: 10.5px; line-height: 1.3; max-width: 40ch; }
@media (max-width: 360px) { #autoLoadCard .al-cbu .mono { font-size: 12px; } }

/* ══ #286: "Recomendado" debajo del nombre Girox (en flujo, ya no flota arriba a la izquierda) ══ */
.plat-play-btn .plat-reco { position: static; top: auto; left: auto; margin-top: 3px; font-size: 8px; letter-spacing: .9px; }

/* ══ #288 (owner): sin globo flotante de soporte. El chat se abre desde "Carga manual" en la barra de arriba.
   Se oculta por CSS (no se borra del DOM): #chatTopbarAvatar vive adentro y chat.js/home.js lo siguen usando. ══ */
#supportBubble { display: none !important; }

/* ══ #289 (owner): "Información del servicio" con el estilo de la barra de arriba — vidrio oscuro, cortes
   diamantados, cian/rojo, Montserrat. Cada bloque conserva su recuadro; el TEXTO manda (grande y claro).
   Va con !important porque modals.css (carga después) pinta el modal viejo: borde dorado, grilla 3 col, 8,5 px. ══ */
#infoModal .modal-content {
  background: linear-gradient(160deg, #0f1322 0%, #07080f 70%) !important; border: 1px solid rgba(0,229,255,.35) !important; border-radius: 18px !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 0 40px rgba(0,229,255,.12), 0 24px 60px rgba(0,0,0,.7) !important; padding: 16px 14px 18px !important; color: #f4f6fb;
}
#infoModal .info-head-sm { margin: 2px 0 12px; text-align: center; }
#infoModal .info-head-sm h2 { font: 900 15px var(--dx-font) !important; letter-spacing: 2px !important; color: #fff !important; text-shadow: 0 0 14px rgba(0,229,255,.55); }
#infoModal .info-head-sm h2::after { content: ''; display: block; width: 60px; height: 2px; margin: 8px auto 0; background: linear-gradient(90deg, transparent, var(--dx-cyan), transparent); }
#infoModal .modal-content > button[onclick] { color: #c9d1e3 !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 50% !important; width: 32px; height: 32px; font-size: 16px !important; display: flex; align-items: center; justify-content: center; }
/* Estado de la app (apptest.js _row) */
.at-row { display: flex; align-items: center; gap: 10px; background: var(--dx-glass); border: 1px solid var(--dx-border); clip-path: var(--dx-cut-sm); padding: 11px 12px; box-sizing: border-box; }
.at-row.at-ok { border-color: rgba(46,230,107,.5); }
.at-row.at-bad { border-color: rgba(255,23,68,.55); }
.at-ico { font-size: 18px; line-height: 1; }
.at-lbl { flex: 1; min-width: 0; font: 800 13px var(--dx-font); color: #fff; }
.at-st { font: 900 12px var(--dx-font); letter-spacing: .8px; color: #2ee66b; }
.at-st.at-x { color: #ff5c7a; font-size: 16px; line-height: 1; }
.at-help { width: 100%; margin-top: 6px; background: linear-gradient(135deg, #ff1744, #ff6b6b); color: #06070d; border: 0; clip-path: var(--dx-cut-sm); padding: 10px 12px; font: 900 11.5px var(--dx-font); letter-spacing: .8px; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 18px rgba(255,23,68,.3); }
#infoModal .info-diag-top { margin: 0 0 10px; }
#infoModal .info-diag-top > div > div { flex-direction: column !important; gap: 8px !important; }
#infoModal .info-diag-top > div > div > * { flex: 1 1 100% !important; font-size: 13px !important; padding: 11px 12px !important; }
#infoModal .info-diag-top > div > div > .at-help { padding: 10px 12px !important; font-size: 11.5px !important; margin-top: -2px; }
#infoModal .info-diag-top > div > div + div { font-size: 12px !important; margin-top: 8px !important; color: #2ee66b !important; }
/* Plegables: opiniones · ruleta */
#infoModal .info-reviews-wrap { background: var(--dx-glass); border: 1px solid var(--dx-border); border-radius: 0; clip-path: var(--dx-cut-sm); margin: 0 0 8px; }
#infoModal .info-reviews-head { padding: 12px 14px; font: 900 12.5px var(--dx-font); letter-spacing: 1.4px; text-transform: uppercase; color: #fff; }
#infoModal .info-reviews-chevron { color: var(--dx-cyan); }
#infoModal .info-roulette p { font-size: 13px; color: #d6dbe8; line-height: 1.5; }
#infoModal .info-roulette p b { color: #fff; }
#infoModal .info-roulette-btn { background: linear-gradient(135deg, #ff1744, #ff6b6b); color: #06070d; font: 900 12px var(--dx-font); letter-spacing: .8px; text-transform: uppercase; }
/* Tarjetas: todas a lo ancho, ícono como medalla a la izquierda, texto grande */
#infoModal .info-grid { display: flex !important; flex-direction: column; gap: 8px !important; margin-top: 2px !important; }
#infoModal .info-card { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left !important; background: var(--dx-glass) !important; border: 1px solid var(--dx-border) !important; border-radius: 0 !important; clip-path: var(--dx-cut-sm); padding: 12px 14px 13px !important; transform: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important; position: relative; }
#infoModal .info-card::before { content: ''; position: absolute; left: 0; top: 0; width: 38px; height: 2px; background: var(--dx-cyan); box-shadow: 0 0 12px rgba(0,229,255,.6); }
#infoModal .info-card-icon { grid-row: 1 / span 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 24px !important; margin: 0 !important; background: rgba(0,229,255,.08); border: 1px solid rgba(0,229,255,.3); border-radius: 50%; filter: none !important; }
#infoModal .info-card-title { font: 900 13.5px var(--dx-font) !important; letter-spacing: 1px; text-transform: uppercase; color: #fff !important; margin: 0 0 4px !important; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
#infoModal .info-card-desc { font-size: 13px !important; line-height: 1.5 !important; color: #d6dbe8 !important; }
#infoModal .info-card-desc b { color: #fff; }
#infoModal .info-card-new { border-color: rgba(255,23,68,.55) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 24px rgba(255,23,68,.18) !important; }
#infoModal .info-card-new::before { background: #ff1744; box-shadow: 0 0 12px rgba(255,23,68,.6); }
#infoModal .info-card-new .info-card-icon { background: rgba(255,23,68,.1); border-color: rgba(255,23,68,.4); }
#infoModal .info-badge { background: linear-gradient(135deg, #ff1744, #ff6b6b); color: #06070d; margin-left: 0; font-size: 9px; padding: 3px 7px; border-radius: 4px; }
#infoModal .info-point { padding: 7px 0; border-bottom: 1px dashed rgba(255,255,255,.14); font-size: 13px; line-height: 1.5; }
#infoModal .info-point:last-child { border-bottom: 0; padding-bottom: 0; }
#infoModal .modal-actions { margin-top: 14px !important; }
#infoModal #closeInfoModal { background: linear-gradient(135deg, #ff1744, #ff6b6b) !important; color: #06070d !important; clip-path: var(--dx-cut-sm); border-radius: 0 !important; padding: 13px !important; font: 900 13px var(--dx-font) !important; letter-spacing: 1px !important; text-transform: uppercase; box-shadow: 0 8px 22px rgba(255,23,68,.35) !important; }
@media (max-width: 600px) {
  #infoModal .modal-content { padding: 14px 12px 16px !important; border-radius: 16px !important; }
  #infoModal .info-card { padding: 11px 12px 12px !important; }
  #infoModal .info-card-desc, #infoModal .info-point { font-size: 12.5px !important; }
}

/* ══ #291: Info sin opiniones ni ruleta (viven en el Inicio) ══ */
#infoReviewsWrap, #infoRouletteWrap { display: none !important; }
/* ══ #291: nivel VIP al lado del saldo (app instalada) + botoncito test ══ */
.bs-vip { position: relative; display: flex; align-items: center; gap: 8px; background: linear-gradient(160deg, rgba(0,229,255,.12), rgba(124,77,255,.08)); border: 1px solid rgba(0,229,255,.35); border-radius: 10px; padding: 3px 9px; color: var(--dx-text); cursor: pointer; min-width: 0; flex: 1 1 auto; max-width: 240px; }
.bs-vip-t { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; flex: 1 1 auto; text-align: left; }
.bs-vip-t b { font: 900 11px var(--dx-font); letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-vip-t small { font: 700 8.5px var(--dx-font); color: var(--dx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-vip-bar { flex: 0 0 54px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.bs-vip-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #00e5ff, #7c4dff); transition: width .4s ease; }
.bs-vip-pct { font: 900 11px var(--dx-font); color: var(--dx-cyan); font-variant-numeric: tabular-nums; }
.test-mini-bs { display: none; padding: 1px 6px; font-size: 8.5px; flex: 0 0 auto; }
body.home-full .test-mini-bs { display: inline-block; }
@media (max-width: 420px) { .bs-vip { padding: 2px 7px; gap: 6px; } .bs-vip-t b { font-size: 9.5px; } .bs-vip-t small { font-size: 7.5px; } .bs-vip-bar { flex-basis: 40px; } .bs-vip-pct { font-size: 10px; } }
/* ══ #291: Fueguito diario resumido con barra de niveles + regla de cargas ══ */
.fire-home-card { flex-direction: column; align-items: stretch; gap: 5px; }
.fire-home-card .fh-row { display: flex; align-items: center; gap: 8px; }
.fire-home-card .fh-track { position: relative; display: block; height: 6px; margin: 10px 14px 16px 6px; border-radius: 999px; background: rgba(255,255,255,.1); }
.fire-home-card .fh-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, #ff6d00, #ffb347); box-shadow: 0 0 10px rgba(255,140,0,.6); transition: width .5s ease; }
.fire-home-card .fh-dots { position: absolute; inset: 0; }
.fire-home-card .fh-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; line-height: 1; }
.fire-home-card .fh-dot i { display: block; width: 12px; height: 12px; border-radius: 50%; background: #1b1d2a; border: 2px solid rgba(255,255,255,.35); box-sizing: border-box; }
.fire-home-card .fh-dot.on i { background: #ffb347; border-color: #fff; box-shadow: 0 0 8px rgba(255,179,71,.8); }
.fire-home-card .fh-dot.next i { border-color: #ffb347; box-shadow: 0 0 8px rgba(255,140,0,.5); }
.fire-home-card .fh-dot b { position: absolute; top: -13px; font: 900 8px var(--dx-font); color: #e6c9a8; white-space: nowrap; }
.fire-home-card .fh-dot small { position: absolute; top: 9px; font: 800 8px var(--dx-font); color: #ffb347; white-space: nowrap; }
.fire-home-card .fh-rule { display: block; font: 600 8.5px/1.3 var(--dx-font); color: #e6c9a8; text-align: center; white-space: normal; }

/* ══ #292: escalera VIP — plata que desbloquea cada nivel ══ */
#vipCard .vip-lvl-win { font-size: 10px; white-space: nowrap; }

/* ══ #294: un solo cartel (Jugar ahora + extra por instalar), barra pendiente de punta a punta, fueguito como estaba,
   premios del fueguito plegables, modal de niveles VIP ══ */
.pn-gift { width: 100%; box-sizing: border-box; margin-top: 4px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(160deg, rgba(46,230,107,.12), rgba(0,229,255,.05)); border: 1px solid rgba(46,230,107,.45); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pn-gift-t { font: 900 12.5px var(--dx-font); letter-spacing: .6px; text-transform: uppercase; color: #ffd166; }
.pn-gift-amt { font: 900 26px var(--dx-font); color: #2ee66b; text-shadow: 0 0 16px rgba(46,230,107,.45); line-height: 1.1; }
.pn-gift-sub { font-size: 11px; line-height: 1.35; color: #d6dbe8; max-width: 36ch; }
.pn-gift-btn { width: 100%; margin-top: 4px; background: linear-gradient(135deg, #2ee66b, #00c853); color: #06070d; border: 0; border-radius: 999px; padding: 11px 14px; font: 900 12.5px var(--dx-font); letter-spacing: .6px; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 22px rgba(46,230,107,.35); }
.pn-gift-btn:disabled { opacity: .7; }
.ig-bar { left: 0; right: 0; bottom: 0; max-width: none; margin: 0; border-radius: 16px 16px 0 0; padding: 11px 14px; padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px)); justify-content: center; animation: none; box-shadow: 0 -8px 30px rgba(255,109,0,.4), inset 0 1px 0 rgba(255,255,255,.25); }
.ig-bar-in { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 560px; }
.ig-bar-t { flex: 0 1 auto; text-align: center; }
.ig-bar-k { font-size: 8.5px; letter-spacing: 1.4px; text-transform: uppercase; }
body.home-mini .ig-bar { bottom: 62px; padding-bottom: 11px; }
#fireHomeCard { flex-direction: row; align-items: center; gap: 8px; }
.fire-ms-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--dx-border); border-radius: 10px; padding: 8px 10px; color: var(--dx-text); cursor: pointer; margin-bottom: 6px; }
.fire-ms-sum { flex: 1; text-align: left; font: 700 10.5px var(--dx-font); color: #ffb347; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fire-ms-chev { font: 800 10px var(--dx-font); color: var(--dx-cyan); white-space: nowrap; }
#vipLevelsModal .vl-intro { font-size: 12.5px; line-height: 1.45; color: #c9d1e3; margin: 0 0 8px; }
#vipLevelsModal .vl-intro b { color: #fff; }
#vipLevelsModal .vl-mine { font-size: 12.5px; color: #f4f6fb; background: rgba(0,229,255,.08); border: 1px solid rgba(0,229,255,.3); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
#vipLevelsModal .vl-mine small { color: #8f98ad; }
#vipLevelsModal .vl-list { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
#vipLevelsModal .vl-row { display: grid; grid-template-columns: 18px 1.2fr 1fr .9fr; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.03); font-size: 11.5px; opacity: .6; }
#vipLevelsModal .vl-row.on { opacity: 1; background: rgba(46,230,107,.08); }
#vipLevelsModal .vl-row.next { opacity: 1; border: 1px solid rgba(0,229,255,.4); }
#vipLevelsModal .vl-name { font-weight: 800; }
#vipLevelsModal .vl-name small { color: var(--dx-cyan); font-weight: 700; }
#vipLevelsModal .vl-gift { color: var(--dx-money); font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#vipLevelsModal .vl-rake { color: #c9d1e3; text-align: right; white-space: nowrap; }
#vipLevelsModal .vl-empty { color: #ff9d76; font-size: 12px; }

/* ══ #296: los botones "test" sólo para el usuario de prueba (body.is-tester, lo pone home.js) ══ */
.test-mini-row, .test-mini-bs { display: none !important; }
body.is-tester.home-full .test-mini-row:not(.test-mini-manual) { display: flex !important; }
body.is-tester.home-mini .test-mini-manual { display: flex !important; }
body.is-tester.home-full .test-mini-bs { display: inline-block !important; }

/* ══ #298: aviso premium del Inicio + "Próximamente" para plataformas sin API ══ */
.ev-hero { flex: 0 0 auto; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 2px 6px 4px; padding: 8px 12px 9px; border-radius: 12px; text-align: center;
  background: linear-gradient(160deg, rgba(255,209,102,.14) 0%, rgba(255,23,68,.10) 55%, rgba(0,229,255,.08) 100%); border: 1px solid rgba(255,209,102,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 22px rgba(255,209,102,.12); }
.ev-hero::after { content: ''; position: absolute; top: -40%; left: -30%; width: 40%; height: 180%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent); transform: skewX(-18deg); animation: evShine 5s ease-in-out infinite; pointer-events: none; }
@keyframes evShine { 0%, 60% { left: -40%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .ev-hero::after { animation: none; } }
.ev-hero-k { font: 900 9px var(--dx-font); letter-spacing: 2px; text-transform: uppercase; color: #ffd166; text-shadow: 0 0 10px rgba(255,209,102,.5); }
.ev-hero-t { font: 700 12.5px/1.3 var(--dx-font); color: #e6e9f2; }
.ev-hero-t b { color: #fff; font-weight: 900; }
.ev-note-line { font-size: 9.5px; color: #8f98ad; padding: 0 6px; margin: 0; }
.ev-note-line a { color: #c9d1e3; font-weight: 800; text-decoration: none; }
.ev-tab.soon { opacity: .8; } /* #300: se puede tocar (abre su página) */
.ev-tab.soon .ev-soon { margin-left: 4px; font: 900 7.5px var(--dx-font); letter-spacing: .8px; text-transform: uppercase; color: #06070d; background: #ffd166; border-radius: 4px; padding: 1px 5px; }
.plat-play-wrap.soon .plat-play-btn { opacity: .5; cursor: not-allowed; filter: saturate(.6); }

/* ══ #299: carga mínima + toques de casino (íconos discretos y patrón de palos muy tenue) ══ */
.al-min { font: 700 9.5px var(--dx-font); color: var(--dx-money); letter-spacing: .2px; white-space: nowrap; }
.hc-ico { vertical-align: -2px; color: var(--dx-cyan); opacity: .9; margin-right: 2px; filter: drop-shadow(0 0 4px rgba(0,229,255,.45)); }
#autoLoadCard .hc-ico { color: var(--dx-money); filter: drop-shadow(0 0 4px rgba(255,209,102,.45)); }
.ev-hero-k .hc-ico { color: #ffd166; filter: none; vertical-align: -2px; }
.balance-strip .dash-balance-label .hc-ico { width: 11px; height: 11px; vertical-align: -1px; }
.chat-screen::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='%23ffffff'><path d='M30 14c-3 4-7 6.5-7 10.2 0 2.4 1.8 3.8 3.8 3.8 1.1 0 2.1-.4 2.7-1.1-.2 1.9-1 3.4-2.5 4.6h6c-1.5-1.2-2.3-2.7-2.5-4.6.6.7 1.6 1.1 2.7 1.1 2 0 3.8-1.4 3.8-3.8C37 20.5 33 18 30 14z'/><path d='M90 72c-1.8 0-3.3 1-4 2.4-.7-1.4-2.2-2.4-4-2.4-2.5 0-4.5 2-4.5 4.5 0 4.6 8.5 9.5 8.5 9.5s8.5-4.9 8.5-9.5c0-2.5-2-4.5-4.5-4.5z'/><path d='M30 70l6 8-6 8-6-8z'/><circle cx='86' cy='22' r='4'/><circle cx='94' cy='30' r='4'/><circle cx='78' cy='30' r='4'/><path d='M85 30h2v8h-2z'/></svg>"); background-size: 120px 120px; }
.chat-screen > * { position: relative; z-index: 1; }

/* ══ #302: aclaración de carga mínima bien visible ══ */
.al-minline { display: inline-block; margin: 6px auto 0; padding: 4px 10px; border-radius: 999px; background: rgba(255,209,102,.1); border: 1px solid rgba(255,209,102,.45); color: #f4f6fb; font: 700 11px var(--dx-font); letter-spacing: .3px; }
.al-minline b { color: var(--dx-money); font-weight: 900; }

/* ══ #303: tarjetas Girox/Ganamos más chicas en la carga automática (sin scroll) + saldo apilado ══ */
#platformsCard { padding: 6px 8px 7px !important; }
#platformsCard .home-card-sub { font-size: 9.5px !important; line-height: 1.25 !important; margin-bottom: 4px !important; }
#platformsCard .plat-play-row { gap: 5px !important; }
#platformsCard .plat-play-btn { padding: 5px 6px 6px !important; gap: 0 !important; min-height: 0 !important; }
#platformsCard .plat-logo { width: 20px !important; height: 20px !important; margin: 0 !important; }
#platformsCard .plat-play-name { font-size: 11.5px !important; letter-spacing: .8px !important; }
#platformsCard .plat-play-sub { font-size: 8px !important; letter-spacing: .5px !important; }
#platformsCard .plat-reco { font-size: 7px !important; padding: 1px 5px !important; margin-top: 1px !important; }
#platformsCard .plat-check { top: 4px !important; right: 6px !important; width: 15px !important; height: 15px !important; font-size: 9px !important; }
.bs-balance { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; line-height: 1.05; }
.balance-strip .dash-balance-label { font-size: 8.5px !important; }
.balance-strip .dash-balance-amount { font-size: 14px !important; }

/* ══ #304: perfil de usuario con avatar (recuadro diferenciado) + selector de íconos ══ */
.profile-modal .pf-userbox { --pf-ring: #00e5ff; display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(160deg, rgba(0,229,255,.10), rgba(124,77,255,.08)); border: 1px solid rgba(0,229,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.profile-modal .pf-avatar { position: relative; flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--pf-ring); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(0,0,0,.4)); font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 14px rgba(0,229,255,.3); padding: 0; }
.profile-modal .pf-avatar:active { transform: scale(.96); }
.profile-modal .pf-avatar-edit { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #ff1744, #ff6b6b); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; border: 2px solid #0b0d16; }
.profile-modal .pf-userinfo { min-width: 0; }
.profile-modal .pf-username { font: 900 17px var(--dx-font); color: #fff; letter-spacing: .3px; word-break: break-all; }
.profile-modal .pf-userlvl { font: 800 11.5px var(--dx-font); color: #c9d1e3; margin-top: 2px; }
.profile-modal .pf-userhint { font: 600 9.5px var(--dx-font); color: #8f98ad; margin-top: 2px; }
#avatarModal .vl-intro { font-size: 12.5px; line-height: 1.45; color: #c9d1e3; margin: 0 0 8px; }
#avatarModal .vl-intro b { color: #fff; }
#avatarModal .av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; max-height: 52vh; overflow-y: auto; }
#avatarModal .av-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); color: #c9d1e3; cursor: pointer; }
#avatarModal .av-opt .av-e { font-size: 26px; line-height: 1; }
#avatarModal .av-opt small { font: 700 9px var(--dx-font); text-transform: uppercase; letter-spacing: .4px; text-align: center; }
#avatarModal .av-opt[style*="--av-c"] { border-color: var(--av-c); }
#avatarModal .av-opt.sel { border-color: var(--dx-cyan); box-shadow: 0 0 12px rgba(0,229,255,.4); background: rgba(0,229,255,.08); }
#avatarModal .av-opt.locked { opacity: .4; cursor: not-allowed; filter: grayscale(.6); }

/* ══ #305: cabecera del chat — asistente ══ */
.wa-head .wa-assist { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(37,211,102,.45); flex: 0 0 auto; }
.wa-head .wa-assist svg { width: 40px; height: 40px; display: block; }

/* ══ #307: carga mínima también en el cartel del chat manual ══ */
.svb-min { display: block; width: 100%; text-align: center; margin-top: 4px; font: 700 10px var(--dx-font); color: #e6e9f2; }
.svb-min b { color: var(--dx-money); }

/* ══ #309: versión visible en Perfil ══ */
.profile-modal .pf-build { font: 700 8.5px var(--dx-font); color: #5d6577; margin-top: 3px; letter-spacing: .4px; }

/* ══ #312: carrusel de fotos ilustrativas de Girox en el Inicio ══ */
.ev-frame-wrap { position: relative; }
.ev-slides { position: absolute; inset: 0; display: flex; flex-direction: column; background: radial-gradient(120% 80% at 50% 0%, rgba(0,229,255,.08), transparent 60%), #06070d; border-radius: inherit; overflow: hidden; }
.ev-slides-track { flex: 1 1 auto; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ev-slides-track::-webkit-scrollbar { display: none; }
.ev-slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; padding: 6px 8px 2px; box-sizing: border-box; }
.ev-slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); }
.ev-slides-dots { flex: 0 0 auto; display: flex; justify-content: center; gap: 5px; padding: 4px 0 2px; }
.ev-slides-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.22); transition: all .25s; }
.ev-slides-dots i.on { width: 16px; border-radius: 999px; background: var(--dx-cyan); box-shadow: 0 0 8px rgba(0,229,255,.6); }
.ev-slides-cap { flex: 0 0 auto; text-align: center; font: 700 9.5px var(--dx-font); letter-spacing: .6px; text-transform: uppercase; color: #8f98ad; padding: 0 0 6px; }

/* ══ #314: fotos del carrusel a todo el ancho, con recuadro y fondo desenfocado ══ */
.ev-slide { position: relative; padding: 8px 8px 4px; background-size: cover; background-position: center; align-items: flex-start; }
.ev-slide::before { content: ''; position: absolute; inset: 0; background: rgba(6,7,13,.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.ev-slide img { position: relative; width: 100%; max-width: 100%; height: 100%; max-height: 100%; object-fit: cover; object-position: top center; border-radius: 14px; border: 1px solid rgba(0,229,255,.35); box-shadow: 0 12px 34px rgba(0,0,0,.6), 0 0 24px rgba(0,229,255,.12); }

/* ══ #315: botón grande "PARA CARGAR AHORA MISMO · APRETÁ AQUÍ" debajo de las fotos ══ */
.ev-cta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 6px 8px 4px; padding: 11px 14px 12px; border-radius: 16px; border: 1px solid rgba(255,209,102,.6); background: linear-gradient(135deg, #ff1744 0%, #ff6b6b 60%, #ff8a65 100%); color: #06070d; cursor: pointer; box-shadow: 0 10px 28px rgba(255,23,68,.45), inset 0 1px 0 rgba(255,255,255,.35); animation: evCta 2.2s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.ev-cta:active { transform: scale(.98); }
.ev-cta-t { font: 900 12px var(--dx-font); letter-spacing: 1.6px; text-transform: uppercase; opacity: .9; }
.ev-cta-b { font: 900 18px var(--dx-font); letter-spacing: 1.2px; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,.3); }
@keyframes evCta { 0%, 100% { box-shadow: 0 10px 28px rgba(255,23,68,.45), inset 0 1px 0 rgba(255,255,255,.35); } 50% { box-shadow: 0 10px 34px rgba(255,23,68,.7), 0 0 0 3px rgba(255,209,102,.25), inset 0 1px 0 rgba(255,255,255,.35); } }
@media (prefers-reduced-motion: reduce) { .ev-cta { animation: none; } }

/* ══ #317 (owner): "Opiniones de jugadores" con más vida y remarcado, en el estilo de la app (vidrio, cian/dorado) ══ */
#entryReviews.ev-reviews { position: relative; margin: 4px 6px 6px; padding: 8px 8px 8px; border-radius: 14px; background: var(--dx-glass); border: 1px solid rgba(0,229,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 24px rgba(0,229,255,.08); overflow: hidden; }
#entryReviews.ev-reviews::before { content: ''; position: absolute; left: 0; top: 0; width: 46px; height: 2px; background: var(--dx-cyan); box-shadow: 0 0 12px rgba(0,229,255,.6); }
#entryReviews .rv-head { padding: 0 2px 4px; }
#entryReviews .rv-g { font: 900 11px var(--dx-font); letter-spacing: 1.6px; color: #fff; text-shadow: 0 0 10px rgba(0,229,255,.35); }
#entryReviews .rv-g::before { content: '★ '; color: #ffd166; text-shadow: 0 0 8px rgba(255,209,102,.7); }
#entryReviews .rv-avg { font: 900 12px var(--dx-font); color: #06070d; background: linear-gradient(135deg, #ffd166, #ffb347); border-radius: 999px; padding: 3px 9px; box-shadow: 0 4px 14px rgba(255,179,71,.35); }
#entryReviews .rv-avg .rv-stars { color: rgba(6,7,13,.25); font-size: 11px; }
#entryReviews .rv-avg .rv-stars .on { color: #06070d; }
#entryReviews .rv-avg small { color: rgba(6,7,13,.7); font-weight: 800; }
#entryReviews .rv-card { position: relative; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 8px 10px 9px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
#entryReviews .rv-card:not(.rv-add)::after { content: '”'; position: absolute; right: 8px; top: -2px; font: 900 30px Georgia, serif; color: rgba(0,229,255,.22); line-height: 1; }
#entryReviews .rv-avatar { width: 28px; height: 28px; font-size: 12px; opacity: 1; box-shadow: 0 0 0 2px rgba(0,229,255,.45), 0 0 10px rgba(0,229,255,.35); }
#entryReviews .rv-who b { font: 800 11.5px var(--dx-font); color: #fff; }
#entryReviews .rv-stars { font-size: 11px; color: rgba(255,255,255,.16); }
#entryReviews .rv-stars .on { color: #ffd166; text-shadow: 0 0 6px rgba(255,209,102,.6); }
#entryReviews .rv-text { font-size: 11px; line-height: 1.4; color: #e1e6f0; }
#entryReviews .rv-add { background: linear-gradient(135deg, rgba(255,23,68,.22), rgba(255,107,107,.1)); border: 1px dashed rgba(255,107,107,.6); }
#entryReviews .rv-add-star { color: #ffd166; text-shadow: 0 0 10px rgba(255,209,102,.7); font-size: 24px; }
#entryReviews .rv-add b { color: #fff; font: 900 12px var(--dx-font); letter-spacing: .4px; text-transform: uppercase; }
#entryReviews .rv-add small { color: #e1e6f0; }

/* ══ #318: recuadro fino tipo pantalla de teléfono para las fotos del Inicio ══ */
.ev-slide { padding: 8px 10px 4px; }
.ev-slide img { border-radius: 18px; border: 3px solid #161a27; box-shadow: 0 0 0 1px rgba(0,229,255,.45), 0 0 22px rgba(0,229,255,.18), 0 14px 36px rgba(0,0,0,.65); background: #000; }

/* ══ #319: que se note que son FOTOS (no se juega desde acá) ══ */
.ev-slide img { pointer-events: none; user-select: none; -webkit-user-select: none; }
.ev-slide-tag { position: absolute; left: 18px; top: 16px; z-index: 2; font: 900 9px var(--dx-font); letter-spacing: 1px; text-transform: uppercase; color: #06070d; background: linear-gradient(135deg, #ffd166, #ffb347); border-radius: 999px; padding: 4px 9px; box-shadow: 0 4px 14px rgba(0,0,0,.45); pointer-events: none; }
.ev-slides-cap { font-size: 9.5px; text-transform: none; letter-spacing: .2px; color: #c9d1e3; padding: 0 10px 7px; line-height: 1.3; }

/* ══ #320: botón de cargar en UNA línea, más bajo (no tapa las fotos) ══ */
.ev-cta { flex-direction: row; margin: 4px 8px 3px; padding: 8px 12px; border-radius: 12px; }
.ev-cta-b { font-size: 12px; letter-spacing: .9px; line-height: 1.15; }

/* ══ #322: fotos COMPLETAS (recuadro con altura propia, foto entera) + botón chiquito sobre el final de la foto ══ */
.entry-view { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.entry-view::-webkit-scrollbar { display: none; }
.ev-frame-wrap { flex: 0 0 auto; min-height: min(64vh, 560px); height: min(64vh, 560px); }
.ev-slide { align-items: center; padding: 8px 10px 36px; }
.ev-slide img { height: 100%; max-height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: center; }
.ev-slides-dots { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 3; padding: 0; }
.ev-slides-cap { position: absolute; left: 0; right: 0; bottom: 4px; z-index: 3; padding: 0 10px; font-size: 9px; }
.ev-cta { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 4; margin: 0; padding: 6px 12px; border-radius: 999px; animation: none; box-shadow: 0 6px 18px rgba(255,23,68,.45), inset 0 1px 0 rgba(255,255,255,.3); white-space: nowrap; max-width: calc(100% - 24px); }
.ev-cta:active { transform: translateX(-50%) scale(.97); }
.ev-cta-b { font-size: 10.5px; letter-spacing: .6px; text-transform: none; text-shadow: none; }

/* ══ #323: botón "Ver completas / Achicar" del recuadro de fotos ══ */
.ev-expand { position: absolute; right: 10px; top: 10px; z-index: 5; background: rgba(6,7,13,.72); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 5px 10px; font: 800 10px var(--dx-font); letter-spacing: .5px; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ev-frame-wrap.is-expanded { position: fixed; inset: 0; z-index: 9600; height: auto; min-height: 0; border-radius: 0; border: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); background: #0a0f1f; }
.ev-frame-wrap.is-expanded .ev-slide { padding: 46px 8px 64px; }
.ev-frame-wrap.is-expanded .ev-slide img { border-radius: 14px; }
.ev-frame-wrap.is-expanded .ev-expand { top: calc(10px + env(safe-area-inset-top, 0px)); font-size: 12px; padding: 8px 14px; background: linear-gradient(135deg, #ff1744, #ff6b6b); color: #06070d; border: 0; }
.ev-frame-wrap.is-expanded .ev-slide-tag { top: calc(14px + env(safe-area-inset-top, 0px)); }
.ev-frame-wrap.is-expanded .ev-cta { bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
.ev-frame-wrap.is-expanded .ev-slides-dots { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.ev-frame-wrap.is-expanded .ev-slides-cap { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
body.ev-expanded { overflow: hidden; }

/* ══ #324: link de la plataforma en la leyenda del carrusel ══ */
.ev-slides-cap .ev-plat-link { color: var(--dx-cyan); font-weight: 900; text-decoration: underline; text-underline-offset: 2px; letter-spacing: .3px; }
.ev-slides-cap { font-size: 10.5px; color: #e1e6f0; }


/* ══ #328: botón "Link plataforma" abajo de todo en carga auto y carga manual (abre el casino para jugar) ══ */
.plat-link-btn { display: none; align-items: center; justify-content: center; gap: 8px; margin: 4px 8px 8px; padding: 9px 12px; width: calc(100% - 16px); border-radius: 12px; border: 1px solid rgba(0,229,255,.4); background: linear-gradient(160deg, rgba(0,229,255,.12), rgba(124,77,255,.10)); color: #f4f6fb; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.plat-link-btn:active { transform: scale(.985); }
.plat-link-btn .plb-k { font: 900 10px var(--dx-font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--dx-cyan); white-space: nowrap; }
.plat-link-btn .plb-t { font: 700 11px var(--dx-font); color: #e1e6f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.home-full .plat-link-full { display: flex; }
body.home-mini .plat-link-manual { display: flex; }

/* ══ #330: "LINK CASINO AQUÍ · www.1girox.com" como botón en el carrusel ══ */
.ev-slides-cap { padding: 0 10px 6px; }
.ev-link-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(0,229,255,.55); background: linear-gradient(160deg, rgba(0,229,255,.16), rgba(124,77,255,.12)); color: #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); max-width: 100%; }
.ev-link-btn:active { transform: scale(.97); }
.ev-link-btn b { font: 900 10.5px var(--dx-font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--dx-cyan); white-space: nowrap; }
.ev-link-btn span { font: 700 10.5px var(--dx-font); color: #e1e6f0; white-space: nowrap; }

/* ══ #333 (owner, Samsung A56): la carga automática OCUPA toda la pantalla en cualquier teléfono. Antes el bloque
   medía lo justo y en pantallas altas quedaba un vacío abajo; ahora crece y reparte el espacio entre las tarjetas,
   y en pantallas altas sube un poco el tamaño de letra/botones. En pantallas bajas sigue la compactación de siempre. ══ */
body.home-full #homeFull { flex: 1 1 auto; max-height: none; }
body.home-full #homePanel { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; max-height: none !important; overflow: visible; }
body.home-full .home-dash { flex: 1 1 auto; justify-content: space-evenly; }
@media (min-height: 780px) {
  body.home-full .home-dash { gap: 8px; }
  body.home-full .home-card { padding: 11px 12px !important; }
  body.home-full .home-card-title { font-size: 12.5px !important; }
  body.home-full .balance-strip { padding: 6px 10px 6px 14px !important; }
  body.home-full .balance-strip .dash-balance-amount { font-size: 17px !important; }
  body.home-full .fire-home-card .fh-text b { font-size: 12.5px; }
  body.home-full .fire-home-card .fh-text small { font-size: 10px; }
  body.home-full .fire-home-card .fh-streak b { font-size: 17px; }
  body.home-full #platformsCard .plat-play-btn { padding: 9px 8px 10px !important; }
  body.home-full #platformsCard .plat-logo { width: 26px !important; height: 26px !important; }
  body.home-full #platformsCard .plat-play-name { font-size: 13px !important; }
  body.home-full #platformsCard .plat-play-sub { font-size: 9px !important; }
  body.home-full #autoLoadCard .al-step-c { padding: 9px 10px 10px; gap: 5px; }
  body.home-full #autoLoadCard .al-step-h .al-step-t { font-size: 14px; }
  body.home-full #autoLoadCard .al-cbu .mono { font-size: 15.5px; }
  body.home-full #autoLoadCard .al-copy { padding: 6px 11px; font-size: 11px; }
  body.home-full #autoLoadCard .al-meta { font-size: 10.5px; }
  body.home-full #autoLoadCard .al-step-sub { font-size: 12px; max-width: 44ch; }
  body.home-full .al-minline { font-size: 12px; }
  body.home-full .home-actions-row { margin: 6px 8px; gap: 8px; }
  body.home-full .load-row-btn, body.home-full .home-actions-row .withdraw-row-btn { min-height: 50px; padding: 8px 12px !important; }
  body.home-full .lr-text b { font-size: 14px; }
  body.home-full .lr-text small { font-size: 10px; }
  body.home-full .withdraw-row-btn .lr-text b { font-size: 13.5px; }
  body.home-full .plat-link-btn { padding: 11px 12px; }
  body.home-full .plat-link-btn .plb-t { font-size: 12px; }
}
@media (min-height: 900px) {
  body.home-full .home-card { padding: 13px 14px !important; }
  body.home-full #autoLoadCard .al-cbu .mono { font-size: 17px; }
  body.home-full #autoLoadCard .al-step-h .al-step-t { font-size: 15px; }
  body.home-full .lr-text b { font-size: 15px; }
}

/* ══ #334 (owner): ajuste y centrado por modelo de teléfono — Inicio, Carga auto y Carga manual.
   Anchos: ≤360 (iPhone SE/mini, Android chico) · 361–430 (estándar) · ≥431 (iPhone Plus/Max, Android grande)
   · ≥600 (tablet/PC: la app se centra como un teléfono). Alturas: ≤700 (bajos) · ≥780/≥900 (#333). Safe areas iPhone. ══ */

/* — Teléfonos CHICOS (≤360 px de ancho) — */
@media (max-width: 360px) {
  .tn-btn { font-size: 7.5px; padding: 3px 1px; letter-spacing: .2px; }
  .tn-home .tn-lbl { font-size: 10px; letter-spacing: .6px; }
  .ev-hero { margin: 2px 4px 3px; padding: 7px 9px 8px; }
  .ev-hero-k { font-size: 8px; letter-spacing: 1.4px; }
  .ev-hero-t { font-size: 11px; }
  .ev-services { gap: 4px; }
  .ev-svc { padding: 5px 3px; }
  .ev-svc b { font-size: 10px; }
  .ev-svc small { font-size: 7.5px; }
  .ev-tab { font-size: 11px; padding: 6px 8px; }
  .ev-frame-wrap { height: min(60vh, 500px); min-height: min(60vh, 500px); }
  .ev-slide-tag { font-size: 8px; padding: 3px 7px; left: 14px; top: 14px; }
  .ev-cta-b { font-size: 9.5px; }
  .ev-link-btn b, .ev-link-btn span { font-size: 9.5px; }
  #entryReviews .rv-card { flex: 0 0 80%; }
  #serviceBanner .svb-cta { font-size: 11px; padding: 8px 12px; }
  body.home-full .balance-strip .dash-balance-amount { font-size: 13px !important; }
  #autoLoadCard .al-cbu .mono { font-size: 12px !important; letter-spacing: .1px !important; }
  #autoLoadCard .al-step-h .al-step-t { font-size: 11.5px !important; }
  .lr-text b { font-size: 11.5px !important; }
  .withdraw-row-btn .lr-text b { font-size: 11px !important; }
  .plat-link-btn .plb-k { font-size: 9px; }
  .plat-link-btn .plb-t { font-size: 10px; }
}
/* — Teléfonos GRANDES (≥431 px de ancho: iPhone Plus/Max, Android grande) — */
@media (min-width: 431px) {
  .tn-btn { font-size: 9px; }
  .tn-home .tn-lbl { font-size: 12px; }
  .ev-hero-t { font-size: 13.5px; }
  .ev-svc b { font-size: 12px; }
  .ev-svc small { font-size: 9.5px; }
  .ev-tab { font-size: 13px; }
  #entryReviews .rv-card { flex: 0 0 58%; max-width: 280px; }
  #entryReviews .rv-text { font-size: 11.5px; }
}
/* — Tablet / PC: la app se ve centrada como un teléfono (no estirada) — */
@media (min-width: 600px) {
  body { background: #06070d; }
  .chat-screen { max-width: 520px; margin: 0 auto; border-left: 1px solid rgba(255,255,255,.07); border-right: 1px solid rgba(255,255,255,.07); }
  .chat-screen::before { left: 50%; width: 520px; transform: translateX(-50%); }
  .ig-bar { left: 50%; right: auto; width: 520px; transform: translateX(-50%); }
  .ig-bar:active { transform: translateX(-50%) scale(.985); }
  .play-now-card .pn-sheet { max-width: 520px; }
  .ev-frame-wrap.is-expanded { left: 50%; right: auto; width: 520px; transform: translateX(-50%); }
}
/* — Pantallas BAJAS (≤700 px de alto) — */
@media (max-height: 700px) {
  .ev-hero { padding: 6px 10px 7px; }
  .ev-hero-k { font-size: 8.5px; }
  .ev-frame-wrap { height: min(54vh, 460px); min-height: min(54vh, 460px); }
  #entryReviews .rv-text { -webkit-line-clamp: 2; }
}
/* — Centrado fino y safe areas (iPhone con notch / barra de gestos) — */
.entry-view { align-items: stretch; }
.ev-hero, .ev-services, .ev-tabs, .ev-frame-wrap, #entryReviews.ev-reviews { margin-left: 6px; margin-right: 6px; }
body.home-full #homeFull { padding-bottom: env(safe-area-inset-bottom, 0px); }
body.home-mini .chat-input-container { padding-bottom: max(7px, env(safe-area-inset-bottom, 7px)); }
body.home-mini .ig-bar { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
.balance-strip, .fire-home-card, .home-dash, .home-actions-row, .plat-link-btn, .test-mini-row { margin-left: 8px; margin-right: 8px; }
.plat-link-btn { width: auto; }

/* ══ #335: los puntos del carrusel ya no quedan detrás de "LINK CASINO AQUÍ" (van arriba del botón rojo) y la franja
   inferior tiene fondo propio para que nada se transparente ══ */
.ev-slide { padding-bottom: 78px; }
.ev-slides-dots { bottom: 74px; }
.ev-cta { bottom: 42px; }
.ev-slides-cap { bottom: 0; padding: 6px 10px 8px; background: linear-gradient(180deg, rgba(6,7,13,0) 0%, rgba(6,7,13,.9) 35%, rgba(6,7,13,.97) 100%); }
.ev-frame-wrap.is-expanded .ev-slides-dots { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.ev-frame-wrap.is-expanded .ev-cta { bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }

/* ══ #336: sin el botón de link en el Inicio → la franja inferior vuelve a ser chica ══ */
.ev-slide { padding-bottom: 58px; }
.ev-slides-dots { bottom: 48px; }
.ev-cta { bottom: 22px; }
.ev-slides-cap { padding: 4px 10px 5px; font-size: 9px; color: #8f98ad; text-transform: uppercase; letter-spacing: .6px; }

/* ══ #337 (owner): el recuadro de fotos vuelve a tomar EXACTAMENTE el espacio que sobra (como antes de #322): el Inicio
   entra completo sin deslizar y las opiniones quedan a la vista. Las fotos se achican a ese alto (contain). ══ */
.ev-frame-wrap { flex: 1 1 auto !important; height: auto !important; min-height: 150px !important; }
.entry-view { overflow-y: hidden; }
@media (max-height: 640px) { .entry-view { overflow-y: auto; } }

/* ══ #338 (owner): el botón rojo y los puntos van ENCIMA de la foto (no reservan lugar); sin leyenda abajo ══ */
.ev-slide { padding: 8px 10px 10px; }
.ev-slides-dots { bottom: 6px; }
.ev-cta { bottom: 18px; }
.ev-frame-wrap.is-expanded .ev-slides-dots { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.ev-frame-wrap.is-expanded .ev-cta { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }

/* ══ #339 (owner, captura): en carga auto los botones de abajo se encimaban con el paso 2 cuando el contenido no
   entra. El panel de tarjetas ahora scrollea ADENTRO (los botones Adjuntar/Retirar quedan siempre abajo, sin pisar
   nada); cuando sobra lugar, sigue repartiendo el espacio (#333). ══ */
body.home-full #homePanel { overflow-y: auto !important; overflow-x: hidden; min-height: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
body.home-full #homePanel::-webkit-scrollbar { display: none; }
body.home-full .home-dash { min-height: 0; flex: 1 0 auto; }
body.home-full .home-actions-row, body.home-full .test-mini-row, body.home-full .plat-link-btn { flex: 0 0 auto; position: relative; z-index: 2; }

/* ══ #340: regla del fueguito a la vista en la tarjeta del home ══ */
#fireHomeCard { flex-wrap: wrap; row-gap: 4px; }
#fireHomeCard .fh-rule { flex: 1 1 100%; display: block; font: 600 9px/1.3 var(--dx-font); color: #e6c9a8; text-align: center; white-space: normal; margin-top: 1px; }
#fireHomeCard .fh-rule b { color: #ffb347; font-weight: 900; }
@media (min-height: 780px) { body.home-full #fireHomeCard .fh-rule { font-size: 10px; } }

/* ══ #342: sin parpadeo del login cuando ya hay sesión guardada (html.has-session lo pone un script antes de pintar) ══ */
html.has-session #loginScreen { display: none !important; }
html.has-session body { background: #06070d; }

/* ══ #344: el detalle del fueguito SE VE — la condición estaba oculta por .fire-compact; el resumen del plegable no se corta ══ */
.fire-compact #fireActivityCondition { display: block !important; margin: 8px 0 4px !important; font-size: 11.5px !important; line-height: 1.45 !important; }
.fire-ms-toggle { flex-wrap: wrap; row-gap: 2px; }
.fire-ms-sum { white-space: normal; overflow: visible; text-overflow: clip; flex: 1 1 100%; text-align: left; font-size: 10px; }
.fire-ms-chev { margin-left: auto; }
#fireMilestonesWrap { margin-top: 4px; }

/* ══ #348: regla del fueguito arriba del modal ══ */
.fire-rule-top { margin: 6px 0 0 !important; padding: 6px 10px; border-radius: 10px; background: rgba(255,140,0,.1); border: 1px solid rgba(255,140,0,.4); color: #e6c9a8 !important; font: 700 11px/1.4 var(--dx-font) !important; text-align: center; }
.fire-rule-top b { color: #ffb347; }

/* ══ #349: NOVEDAD en el Inicio (reembolso diario) ══ */
.ev-hero-new { display: inline-block; margin-top: 4px; padding: 4px 10px; border-radius: 999px; background: linear-gradient(135deg, #00c46a, #00ff88); color: #052e16; font: 900 10.5px/1.3 var(--dx-font); letter-spacing: .3px; text-transform: uppercase; box-shadow: 0 2px 10px rgba(0,255,136,.35); }
.ev-hero-new b { color: #052e16; }
.ev-hero-new[hidden] { display: none; }

/* ══ #352 (owner): pase automático sin puntitos ni etiqueta; el botón "Para cargar ahora mismo" va donde estaban los puntos ══ */
.ev-slides-dots, .ev-slide-tag { display: none !important; }
.ev-slide { padding: 8px 10px 8px !important; }
.ev-cta { bottom: 8px !important; }
.ev-frame-wrap.is-expanded .ev-cta { bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; }

/* ══ #353 (owner): "Próximamente" visible debajo de Ganamos sin tocar (tarjeta de plataformas y pestaña del Inicio) ══ */
.plat-soon-badge { display: block !important; margin-top: 3px; font: 900 8.5px/1.2 var(--dx-font); letter-spacing: .8px; text-transform: uppercase; color: #06070d; background: linear-gradient(135deg, #ffd166, #ffb347); border-radius: 999px; padding: 3px 8px; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; box-shadow: 0 2px 8px rgba(255,209,102,.35); }
.plat-play-wrap.soon .plat-play-btn { opacity: .85 !important; filter: none !important; }
.plat-play-wrap.soon .plat-play-name { opacity: .7; }
.ev-tab.soon { flex-wrap: wrap; justify-content: center; row-gap: 2px; opacity: 1; }
.ev-tab.soon .ev-soon { display: block; flex: 1 1 100%; margin: 0; text-align: center; font-size: 8px; padding: 2px 6px; width: max-content; margin-left: auto; margin-right: auto; }

/* ══ #354 (owner): la regla del fueguito en UNA línea ══ */
.fh-rule { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; font-size: 10px !important; letter-spacing: 0 !important; text-align: center; display: block; }
@media (max-width: 360px) { .fh-rule { font-size: 9px !important; } }

/* ══ #355 (owner): fotos más grandes en el mismo recuadro — menos relleno alrededor y hero más compacto ══ */
.ev-slide { padding: 3px 4px 3px !important; }
.ev-slide img { border-width: 2px !important; border-radius: 14px !important; }
.ev-hero { padding: 5px 10px 6px !important; gap: 1px !important; margin: 2px 6px 3px !important; }
.ev-hero-t { font-size: 11.5px !important; }
.ev-hero-new { margin-top: 2px !important; padding: 2px 8px !important; font-size: 9.5px !important; }

/* ══ #356 (owner): tarjeta del fueguito más baja — que el home completo entre sin deslizar ══ */
#fireHomeCard { padding: 5px 9px 4px !important; min-height: 0 !important; row-gap: 1px !important; gap: 6px !important; margin-top: 3px !important; margin-bottom: 3px !important; border-radius: 12px !important; }
#fireHomeCard .fh-flame { font-size: 18px !important; line-height: 1 !important; }
#fireHomeCard .fh-text b { font-size: 11.5px !important; line-height: 1.1 !important; }
#fireHomeCard .fh-text small { font-size: 9px !important; line-height: 1.15 !important; }
#fireHomeCard .fh-streak { padding: 2px 7px !important; }
#fireHomeCard .fh-streak b { font-size: 14px !important; line-height: 1 !important; }
#fireHomeCard .fh-streak small { font-size: 7.5px !important; }
#fireHomeCard .fh-rule { font-size: 8.5px !important; margin-top: 0 !important; line-height: 1.2 !important; }

/* ══ #360 (owner): "Dejá tu opinión" fija y chica a la izquierda; las reseñas deslizan al lado ══ */
#entryReviews .rv-row { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
#entryReviews .rv-add-fixed { flex: 0 0 64px !important; max-width: 64px !important; min-width: 64px; padding: 6px 4px !important; border-radius: 12px !important; gap: 3px !important; scroll-snap-align: none; }
#entryReviews .rv-add-fixed .rv-add-star { font-size: 20px !important; }
#entryReviews .rv-add-fixed b { font-size: 8.5px !important; line-height: 1.15; letter-spacing: .2px !important; }
#entryReviews .rv-row .rv-track { flex: 1 1 auto; min-width: 0; }
#entryReviews .rv-row .rv-track .rv-card { flex: 0 0 72%; max-width: 250px; }
@media (min-width: 420px) { #entryReviews .rv-row .rv-track .rv-card { flex: 0 0 60%; } }

/* ══ #361 (owner): HISTORIAS — anillo en la barra de arriba + visor a pantalla completa ══ */
.tn-stories .st-ring { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #0d1020; border: 2px solid rgba(255,255,255,.22); box-sizing: border-box; }
.tn-stories .st-core { font-size: 9px; color: #8f98ad; margin-left: 1px; }
.tn-stories.has-active .st-ring { border-color: transparent; background: linear-gradient(#0d1020, #0d1020) padding-box, linear-gradient(135deg, #ffd166, #ff1744, #9b30ff) border-box; }
.tn-stories.has-active .st-core { color: #fff; }
.tn-stories.has-new .st-ring { box-shadow: 0 0 12px rgba(255,23,68,.55); animation: stPulse 1.6s ease-in-out infinite; }
@keyframes stPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .tn-stories.has-new .st-ring { animation: none; } }
.tn-stories .st-badge { position: absolute; top: -6px; right: -8px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: #ff1744; color: #fff; font: 900 9px/15px var(--dx-font); text-align: center; box-shadow: 0 0 0 2px #06070d; }
.story-viewer { position: fixed; inset: 0; z-index: 30000; background: #000; display: none; flex-direction: column; color: #fff; font-family: var(--dx-font); }
.story-viewer.open { display: flex; }
body.story-open { overflow: hidden; }
.st-bars { position: absolute; top: calc(6px + env(safe-area-inset-top, 0px)); left: 8px; right: 8px; display: flex; gap: 4px; z-index: 5; }
.st-bars i { flex: 1 1 0; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; display: block; }
.st-bars i b { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; }
.st-bars i.done b { width: 100%; }
.st-head { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px; display: flex; align-items: center; gap: 8px; z-index: 5; }
.st-logo img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #ffd166; background: #000; display: block; }
.st-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.st-who b { font-size: 12.5px; letter-spacing: .4px; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.st-who small { font-size: 10px; color: rgba(255,255,255,.75); }
.st-close { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.3); color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 15px; cursor: pointer; }
.st-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.st-media .st-blur { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(22px) brightness(.5); }
.st-media img { position: relative; max-width: 100%; max-height: 100%; object-fit: contain; }
.st-media video { position: relative; max-width: 100%; max-height: 100%; object-fit: contain; background: #000; }
.st-media .st-textonly { position: relative; padding: 28px; font: 900 26px/1.25 var(--dx-font); text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.st-tap { position: absolute; inset: 0; z-index: 4; touch-action: manipulation; }
.st-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, transparent, rgba(0,0,0,.75)); display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.st-caption { font: 700 14px/1.35 var(--dx-font); text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.st-link { pointer-events: auto; background: linear-gradient(135deg, #ff1744, #ff6b6b); color: #06070d; font: 900 12px var(--dx-font); text-transform: uppercase; letter-spacing: .6px; padding: 10px 18px; border-radius: 999px; text-decoration: none; box-shadow: 0 6px 18px rgba(255,23,68,.4); }

/* ══ #362 (owner): Telegram (izquierda) e Historias (derecha) con color; "Historias" más chico para que entre entero ══ */
.tn-telegram { background: linear-gradient(135deg, #229ed9, #1b7fb3) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 4px 14px rgba(34,158,217,.35); }
.tn-telegram .tn-lbl { color: #fff !important; }
.tn-stories { background: linear-gradient(135deg, #9b30ff, #ff1744) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 4px 14px rgba(155,48,255,.35); }
.tn-stories .st-ring { background: #1a0a2e; border-color: rgba(255,255,255,.55); }
.tn-stories.has-active .st-ring { background: linear-gradient(#1a0a2e, #1a0a2e) padding-box, linear-gradient(135deg, #ffd166, #fff) border-box; }
.tn-btn:not(.tn-home).tn-stories .tn-lbl, .tn-btn:not(.tn-home).tn-telegram .tn-lbl { font-size: 6.8px !important; letter-spacing: .2px !important; color: #fff !important; white-space: nowrap; }
@media (min-width: 400px) { .tn-btn:not(.tn-home).tn-stories .tn-lbl, .tn-btn:not(.tn-home).tn-telegram .tn-lbl { font-size: 7.5px !important; } }

/* ══ #363 (owner): 7 botones arriba — letras más chicas y sin cortes (entran enteras en cada recuadro) ══ */
.header.topnav { gap: 2px !important; padding-left: 4px !important; padding-right: 4px !important; }
.header.topnav .tn-btn { padding: 4px 1px !important; min-width: 0; overflow: hidden; }
.header.topnav .tn-btn:not(.tn-home) .tn-lbl { font-size: 7px !important; letter-spacing: 0 !important; line-height: 1.05 !important; word-break: keep-all; overflow-wrap: normal; hyphens: none; }
.header.topnav .tn-btn:not(.tn-home) .tn-ico { font-size: 15px; }
.header.topnav .tn-btn:not(.tn-home) .tn-ico svg { width: 16px; height: 16px; }
.header.topnav .tn-home { flex: 1.25 1 0 !important; }
.header.topnav .tn-home.tn-retro .tn-lbl { font-size: 8.5px !important; letter-spacing: 1.2px !important; }
.header.topnav .tn-sep { margin: 4px 0 !important; }
@media (max-width: 370px) {
  .header.topnav .tn-btn:not(.tn-home) .tn-lbl { font-size: 6.3px !important; }
  .header.topnav .tn-home.tn-retro .tn-lbl { font-size: 7.5px !important; letter-spacing: .8px !important; }
  .header.topnav .tn-btn:not(.tn-home) .tn-ico svg { width: 15px; height: 15px; }
}
@media (min-width: 430px) { .header.topnav .tn-btn:not(.tn-home) .tn-lbl { font-size: 7.8px !important; } }

/* ══ #364 (owner): tarjeta CBU en el chat (como la gemela) ══ */
.cbu-card { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.cbu-box { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.cbu-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.cbu-row span { color: #9aa3b8; font-weight: 700; font-size: 12px; }
.cbu-row b { font-weight: 900; font-size: 14px; letter-spacing: .3px; word-break: break-all; text-align: right; }
.cbu-actions { display: flex; flex-direction: column; gap: 7px; }
.cbu-copy { border: 2px solid #1fb954; background: transparent; color: #1fb954; font-weight: 900; font-size: 14px; padding: 10px; border-radius: 12px; cursor: pointer; }
.cbu-send { border: 0; background: linear-gradient(135deg, #0f8a2f, #1fb954); color: #fff; font-weight: 900; font-size: 14px; padding: 12px; border-radius: 12px; cursor: pointer; box-shadow: 0 3px 10px rgba(31,185,84,.35); }
.cbu-send:active, .cbu-copy:active { transform: scale(.98); }
.message.admin .cbu-copy, .message.system .cbu-copy { color: #0f8a2f; border-color: #0f8a2f; }

/* ══ #366 (owner): MENÚ FÁCIL — "para la gente que se pierde con tantos botones" ══ */
body.home-easy #homeFull { max-height: 0; opacity: 0; pointer-events: none; }
body.home-easy .service-banner { display: none; }
body.home-easy #supportPanel { display: none !important; }
body.home-easy #supportBubble, body.home-easy #headerSupportBtn { display: none !important; }
.easy-view { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; gap: 8px; margin: 6px 8px 0; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.home-easy .easy-view { display: flex; }
.ez-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.ez-hello { display: flex; flex-direction: column; min-width: 0; }
.ez-hello span { font: 900 15px var(--dx-font); color: #f4f6fb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ez-hello small { font: 600 10.5px var(--dx-font); color: #aeb7cc; }
.ez-bal { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.ez-bal small { font: 700 9px var(--dx-font); color: #8f99b0; letter-spacing: .6px; text-transform: uppercase; }
.ez-bal b { font: 900 17px var(--dx-font); color: #00ff88; font-variant-numeric: tabular-nums; }
.ez-main { flex: 1 1 0; min-height: 74px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(255,209,102,.6); background: linear-gradient(135deg, #ff1744 0%, #ff6b6b 60%, #ff8a65 100%); color: #06070d; cursor: pointer; text-align: left; box-shadow: 0 10px 28px rgba(255,23,68,.4), inset 0 1px 0 rgba(255,255,255,.35); animation: evCta 2.2s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.ez-main:active { transform: scale(.985); }
.ez-main-ico { font-size: 30px; line-height: 1; flex: 0 0 auto; }
.ez-main-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ez-main-txt b { font: 900 20px var(--dx-font); letter-spacing: 1.2px; text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.ez-main-txt small { font: 700 11px var(--dx-font); opacity: .85; line-height: 1.2; }
.ez-main-arrow { font: 900 30px var(--dx-font); opacity: .75; flex: 0 0 auto; }
.ez-grid { flex: 3 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(84px, 1fr); gap: 8px; }
.ez-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10px 8px; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #f4f6fb; cursor: pointer; text-align: center; line-height: 1.15; -webkit-tap-highlight-color: rgba(255,255,255,.12); touch-action: manipulation; min-width: 0; }
.ez-btn:active { transform: scale(.97); }
.ez-btn .ez-ico { font-size: 26px; line-height: 1; }
.ez-btn b { font: 900 14px var(--dx-font); letter-spacing: .3px; }
.ez-btn small { font: 600 10px var(--dx-font); color: #c9d1e3; line-height: 1.2; }
.ez-btn.ez-refund { border-color: rgba(46,230,107,.55); box-shadow: inset 0 0 0 1px rgba(46,230,107,.15); }
.ez-btn.ez-refund b { color: #2ee66b; }
.ez-btn.ez-roulette { border-color: rgba(255,209,102,.55); }
.ez-btn.ez-roulette b { color: #ffd166; }
.ez-btn.ez-ref { border-color: rgba(0,229,255,.5); }
.ez-btn.ez-ref b { color: #00e5ff; }
.ez-btn.ez-play { border-color: rgba(255,107,107,.6); background: linear-gradient(160deg, rgba(255,23,68,.18), rgba(255,255,255,.04)); }
.ez-btn.ez-play b { color: #ff8a8a; }
.ez-badge { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); white-space: nowrap; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; padding: 2px 8px; border-radius: 999px; background: #2ee66b; color: #06270f; font: 900 9px var(--dx-font); box-shadow: 0 3px 10px rgba(46,230,107,.45); animation: evCta 1.6s ease-in-out infinite; }
.ez-chat { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(37,211,102,.45); background: rgba(37,211,102,.08); color: #f4f6fb; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.ez-chat:active { transform: scale(.985); }
.ez-chat .ez-ico { font-size: 22px; line-height: 1; }
.ez-chat-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ez-chat-txt b { font: 900 13px var(--dx-font); color: #25d366; }
.ez-chat-txt small { font: 600 10px var(--dx-font); color: #c9d1e3; }
.ev-easy-link { flex: 0 0 auto; align-self: center; border: 0; background: transparent; color: #8f99b0; font: 700 10.5px var(--dx-font); padding: 4px 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ev-easy-link b { color: #c9d1e3; text-decoration: underline; text-underline-offset: 2px; }
/* #367: dentro del fácil, el paso al completo es un botón visible (no un link finito) */
.ez-switch { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 5px; row-gap: 1px; padding: 9px 12px; border-radius: 14px; border: 1px solid rgba(0,229,255,.45); background: rgba(0,229,255,.07); color: #f4f6fb; font: 700 12px var(--dx-font); cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: center; }
.ez-switch:active { transform: scale(.985); }
.ez-switch b { color: #00e5ff; font-weight: 900; }
.ez-switch small { flex: 1 0 100%; font: 600 9.5px var(--dx-font); color: #aeb7cc; }
.ev-easy-link { font-size: 9.5px; padding: 2px 6px; margin-top: -2px; }
@media (max-height: 640px) {
  .ez-main { min-height: 60px; padding: 9px 12px; }
  .ez-main-txt b { font-size: 17px; }
  .ez-grid { grid-auto-rows: minmax(70px, 1fr); gap: 6px; }
  .ez-btn .ez-ico { font-size: 22px; }
  .ez-btn b { font-size: 12.5px; }
  .ez-btn small { font-size: 9.2px; }
}
/* selector al entrar: ¿menú fácil o completo? */
.menu-chooser { display: none; position: fixed; inset: 0; z-index: 30000; align-items: center; justify-content: center; padding: 16px; background: rgba(4,6,14,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.menu-chooser.open { display: flex; }
.mc-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 16px; border-radius: 20px; background: linear-gradient(170deg, #121a2e, #0a0e1a); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 60px rgba(0,0,0,.6); text-align: center; }
.mc-kicker { font: 900 10px var(--dx-font); letter-spacing: 2px; color: #ffd166; }
.mc-card h2 { margin: 0; font: 900 21px var(--dx-font); color: #f4f6fb; text-wrap: balance; }
.mc-sub { margin: 0 0 4px; font: 600 11.5px var(--dx-font); color: #aeb7cc; line-height: 1.35; }
.mc-sub b { color: #f4f6fb; }
.mc-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: #f4f6fb; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.mc-opt:active { transform: scale(.985); }
.mc-ico { font-size: 30px; line-height: 1; flex: 0 0 auto; }
.mc-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; padding-right: 4px; }
.mc-txt b { font: 900 15px var(--dx-font); letter-spacing: .6px; }
.mc-txt small { font: 600 11px var(--dx-font); color: #c9d1e3; line-height: 1.3; }
.mc-opt.mc-easy { border-color: rgba(46,230,107,.6); background: linear-gradient(160deg, rgba(46,230,107,.16), rgba(255,255,255,.04)); box-shadow: 0 8px 24px rgba(46,230,107,.18); }
.mc-opt.mc-easy b { color: #2ee66b; }
.mc-opt.mc-full { border-color: rgba(0,229,255,.45); }
.mc-opt.mc-full b { color: #00e5ff; }
.mc-tag { position: absolute; top: -9px; right: 12px; padding: 2px 9px; border-radius: 999px; background: #2ee66b; color: #06270f; font: 900 9px var(--dx-font); letter-spacing: .5px; text-transform: uppercase; }
.mc-tag.mc-tag-dim { background: rgba(255,255,255,.14); color: #c9d1e3; }

/* ══ #369: INFO DEL SERVICIO en un solo mensaje (burbuja), sin tarjetas ══ */
.info-msg { position: relative; margin: 8px 0 4px; padding: 12px 14px 10px; border-radius: 16px 16px 16px 4px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 8px 24px rgba(0,0,0,.25); color: var(--dx-muted); font: 500 12.5px/1.5 var(--dx-font); }
.info-msg .im-sec { margin: 0 0 11px; padding: 0 0 10px; border-bottom: 1px dashed var(--dx-border); }
.info-msg .im-sec:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.info-msg .im-sec > b:first-child { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 900; letter-spacing: .3px; color: var(--dx-text); }
.info-msg b { color: var(--dx-text); }
.info-msg .im-line { display: block; margin-top: 4px; }
.info-msg .im-link { border: 0; background: transparent; padding: 0; color: #00e5ff; font: 800 12.5px var(--dx-font); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ---- modals.css ---- */
/* Modal de información */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.info-card {
    background: linear-gradient(135deg, rgba(0,255,136,0.1) 0%, rgba(0,204,106,0.1) 100%);
    border: 1px solid #00ff88;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 255, 136, 0.2);
}

.info-card-icon {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.info-card-title {
    color: #00ff88;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
}

.info-card-desc {
    color: #b0b0b0;
    font-size: 12px;
    line-height: 1.4;
}

/* MODAL INFO - RESPONSIVE PARA MÓVILES */
#infoModal .modal-content {
    max-height: 90dvh;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
}

/* Modals */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
}

.modal-content {
    background: linear-gradient(135deg, #1a0033 0%, #0a0015 100%);
    border: 2px solid #d4af37;
    border-radius: 20px;
    padding: 25px;
    padding-bottom: max(25px, env(safe-area-inset-bottom));
    width: 90%;
    max-width: 400px;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    animation: modalSlide 0.3s ease;
}

@keyframes modalSlide {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-header {
    text-align: center;
    margin-bottom: 20px;
}

.modal-header h2 {
    color: #d4af37;
    margin-bottom: 10px;
}

.modal-header p {
    color: #b0b0b0;
    font-size: 14px;
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.modal-actions .btn {
    flex: 1;
}

.refund-details, .fire-details {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

.refund-info-row, .fire-info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.refund-info-row:last-child, .fire-info-row:last-child {
    border-bottom: none;
}

.refund-info-row.highlight {
    background: rgba(212, 175, 55, 0.1);
    margin: 10px -15px -15px -15px;
    padding: 15px;
    border-radius: 0 0 12px 12px;
}

.refund-info-row.highlight span:last-child {
    color: #00ff88;
    font-weight: bold;
    font-size: 18px;
}

.fire-info-row.highlight span:last-child {
    color: #ff4500;
    font-weight: bold;
    font-size: 18px;
}

/* Tarjetas de la encuesta de plan de notificaciones */
.notif-plan-card {
    display: block;
    width: 100%;
    text-align: left;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 13px 15px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
    color: #fff;
    position: relative;
    font-family: inherit;
}

.notif-plan-card:hover:not(:disabled) {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
}

.notif-plan-card:disabled {
    opacity: 0.5;
    cursor: default;
}

.notif-plan-card .plan-name {
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notif-plan-card .plan-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.notif-plan-card .plan-detail {
    font-size: 12px;
    color: #ddd;
    margin-top: 6px;
}

.notif-plan-card .plan-desc {
    font-size: 11px;
    color: #9a9a9a;
    margin-top: 2px;
}

.notif-plan-card.plan-suave { border-color: rgba(0, 255, 136, 0.5); }
.notif-plan-card.plan-normal { border-color: #ffd700; background: rgba(212, 175, 55, 0.1); }
.notif-plan-card.plan-activo { border-color: rgba(255, 107, 107, 0.55); }
.notif-plan-card.plan-reembolsos { border-color: rgba(0, 168, 255, 0.55); }

.notif-plan-badge {
    position: absolute;
    top: -10px;
    right: 14px;
    background: linear-gradient(135deg, #d4af37, #ffd700);
    color: #000;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 10px;
}

/* Settings modal responsive */
@media (max-width: 600px) {
    #infoModal .modal-content {
        width: 96%;
        max-width: 96%;
        margin: 4px;
        padding: 16px 14px 18px;
        max-height: 92dvh;
        max-height: 92vh;
        border-radius: 14px;
    }

    #infoModal .info-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    #infoModal .info-card {
        padding: 8px 4px;
        border-radius: 9px;
    }

    #infoModal .info-card-icon {
        font-size: 1.5em;
        margin-bottom: 3px;
    }

    #infoModal .info-card-title {
        font-size: 9.5px;
        margin-bottom: 3px;
    }

    #infoModal .info-card-desc {
        font-size: 8.5px;
        line-height: 1.3;
    }

    /* Botón X siempre visible aunque el scroll no esté arriba */
    #infoModal .modal-content > button[onclick] {
        position: sticky;
        top: 4px;
        float: right;
        margin-bottom: -30px;
        background: rgba(10,0,21,0.85) !important;
        border-radius: 50% !important;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px !important;
        z-index: 20;
    }
}

@media (max-width: 380px) {
    #infoModal .info-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---- responsive.css ---- */
/* Responsive - Pantallas grandes (desktops) */
@media (min-width: 1441px) {
    .chat-container {
        /* Sin max-width ni margen: el chat tiene que ocupar el mismo ancho que la
           barra de escribir y quedar pegado a ella. Con margen se veía el fondo
           de la página metiéndose entre medio. */
        margin: 0;
    }

    .message {
        max-width: 55%;
        padding: 9px 12px 20px 12px;
        font-size: 15px;
    }
}

/* Grandes monitores (1440px+) */
@media (min-width: 1440px) {
    .login-box {
        max-width: 450px;
        padding: 50px;
    }
    .chat-screen {
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* Responsive - Pantallas medianas (Mac, Windows laptops) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .header {
        padding: 10px 15px;
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
        min-height: 75px;
    }

    .chat-section {
        margin-top: 120px;
    }

    .message {
        max-width: 65%;
        padding: 8px 11px 20px 11px;
        font-size: 14px;
    }
}

/* Mac (1280px - 1440px) */
@media (min-width: 1024px) and (max-width: 1440px) {
    .login-box {
        max-width: 420px;
    }
}

/* Responsive - Tablets */
@media (max-width: 1024px) {
    .header {
        padding: 10px;
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
        min-height: 70px;
    }

    .fire-btn {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .refund-btn {
        padding: 5px 8px;
        min-width: 65px;
        font-size: 9px;
    }

    .chat-section {
        margin-top: 115px;
    }
}

/* Tablets en portrait (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .header-center {
        gap: 6px;
    }
    .refund-btn {
        font-size: 9px !important;
        padding: 6px 8px !important;
    }
    .chat-messages {
        min-height: 300px;
    }
}

/* Responsive - Tablets en landscape */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .chat-section {
        margin-top: 110px;
    }

    .message {
        max-width: 60%;
    }
}

/* Responsive - app-install-btn en tablet */
@media (max-width: 768px) {
    .app-install-btn {
        padding: 4px 8px;
        font-size: 9px;
    }
}

/* Responsive - Móviles */
@media (max-width: 768px) {
    .login-box {
        padding: 30px 20px;
        margin: 10px;
    }

    .login-logo {
        font-size: 3em;
    }

    .login-box h1 {
        font-size: 1.5em;
    }

    /* header layout now handled by header.css flex row */

    .fire-section {
        margin-right: 5px;
    }

    .fire-btn {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .fire-streak {
        font-size: 9px;
    }

    .refunds-section {
        gap: 3px;
        position: static;
        transform: none;
        margin: 0 5px;
        flex-shrink: 1;
        min-width: 0;
    }

    .refund-btn {
        padding: 4px 6px;
        min-width: 0;
        font-size: 9px;
        border-radius: 8px;
        flex-shrink: 1;
    }

    .refund-label-full {
        display: none;
    }

    .refund-label-short {
        display: block;
        font-size: 14px;
    }

    .refund-amount {
        font-size: 10px;
    }

    .refund-timer {
        font-size: 8px;
    }

    .platform-section {
        padding: 3px 6px;
        margin-right: 5px;
    }

    .platform-label {
        font-size: 6px;
    }

    .jugaygana-btn {
        font-size: 9px;
        padding: 3px 6px;
    }

    .plataforma-btn {
        font-size: 9px;
        padding: 3px 8px;
    }

    .user-section {
        gap: 4px;
    }

    .support-btn {
        padding: 4px 8px;
        font-size: 9px;
    }

    .user-name {
        font-size: 9px;
        padding: 3px 6px;
    }

    .logout-btn, .settings-btn {
        padding: 3px 6px;
        font-size: 12px;
    }

    .promo-banner {
        top: 60px;
        height: 35px;
    }

    .promo-item {
        font-size: 12px;
        padding: 0 15px;
    }

    .chat-section {
        margin-top: 100px;
        margin-bottom: 114px;
    }

    .chat-container {
        margin: 0;
        border-radius: 0;
    }

    .message {
        max-width: 85%;
        padding: 7px 10px 20px 10px;
        font-size: 14px;
    }

    .chat-input-container {
        padding: 6px 9px;
    }

    .action-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    #messageInput {
        padding: 10px 14px;
        font-size: 16px;
    }

    .send-btn {
        width: 42px;
        height: 42px;
        padding: 0;
    }

    .modal-content {
        width: 95%;
        padding: 20px;
        margin: 10px;
    }

    .modal-header h2 {
        font-size: 1.3em;
    }

    .refund-info-row {
        font-size: 13px;
    }
}

/* Responsive - Móviles pequeños */
@media (max-width: 480px) {
    /* header layout handled by header.css flex row */

    .fire-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .refunds-section {
        gap: 2px;
    }

    .refund-btn {
        padding: 4px 5px;
        min-width: 0;
        font-size: 8px;
    }

    .refund-label-short {
        font-size: 13px;
    }

    .refund-amount {
        font-size: 10px;
    }

    .platform-section {
        font-size: 7px;
        padding: 2px 4px;
    }

    .support-btn {
        font-size: 8px;
        padding: 3px 6px;
    }

    .plataforma-btn {
        font-size: 8px;
        padding: 3px 6px;
    }

    .user-name {
        font-size: 8px;
        padding: 2px 5px;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .info-btn {
        font-size: 10px;
        padding: 4px 7px;
    }

    .app-install-btn {
        font-size: 8px !important;
        padding: 3px 6px !important;
    }

    .logout-btn, .settings-btn {
        padding: 3px 5px;
        font-size: 11px;
    }

    .promo-banner {
        top: 60px;
        height: 30px;
    }

    .promo-item {
        font-size: 10px;
    }

    .chat-section {
        margin-top: 95px;
    }

    .message {
        max-width: 90%;
        padding: 6px 9px 19px 9px;
        font-size: 13px;
    }

    .chat-input {
        padding: 8px;
        gap: 6px;
    }

    .chat-input textarea {
        font-size: 14px;
    }

    #messageInput {
        font-size: 14px !important;
    }
}

/* Responsive - Móviles pequeños (iPhone SE, etc) */
@media (max-width: 375px) {
    /* header layout handled by header.css flex row */

    .fire-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .refund-btn {
        padding: 5px 6px;
        min-width: 54px;
        font-size: 7px;
    }

    .refund-amount {
        font-size: 9px;
    }

    .promo-banner {
        top: 60px;
        height: 28px;
    }

    .chat-section {
        margin-top: 92px;
        margin-bottom: 109px;
    }

    .message {
        max-width: 92%;
        padding: 6px 9px 19px 9px;
        font-size: 13px;
    }

    .action-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .send-btn {
        width: 38px;
        height: 38px;
        padding: 0;
    }
}

/* Responsive - Vista notebook - aún más compacto */
@media (max-height: 800px) {
    .chat-input-container {
        padding: 6px 12px;
    }

    .chat-input {
        gap: 6px;
    }

    .action-btn {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    #messageInput {
        padding: 8px 12px;
        min-height: 38px;
        font-size: 14px;
    }

    .send-btn {
        width: 40px;
        height: 40px;
        padding: 0;
    }
}

/* Responsive - Modo landscape en móviles */
@media (max-height: 500px) and (orientation: landscape) {
    .header {
        min-height: auto;
        padding: 4px 8px;
        padding-top: calc(4px + env(safe-area-inset-top, 0px));
        flex-direction: row;
        flex-wrap: nowrap;
        row-gap: 0;
    }

    .header-right {
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 4px;
        overflow: visible;
    }

    .promo-banner {
        display: none;
    }

    .chat-section {
        margin-top: 54px;
        margin-bottom: 104px;
    }

    .fire-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .refund-btn {
        padding: 3px 5px;
        min-width: 48px;
        font-size: 7px;
    }

    .refund-amount {
        font-size: 8px;
    }

    .header-center {
        gap: 3px;
    }

    .plataforma-btn, .support-btn, .user-name, .info-btn {
        font-size: 8px;
        padding: 2px 5px;
    }

    .logout-btn, .settings-btn {
        padding: 2px 4px;
        font-size: 10px;
    }

    .app-install-btn {
        font-size: 7px !important;
        padding: 2px 5px !important;
    }

    .chat-messages {
        min-height: 150px;
    }
}

/* Modo oscuro del sistema */
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg, #0a0015 0%, #1a0033 50%, #0a0015 100%);
    }
}

/* Alto contraste */
@media (prefers-contrast: high) {
    .message {
        border: 1px solid currentColor;
    }

    .btn {
        border: 2px solid currentColor;
    }
}

/* ================================================
   PWA STANDALONE (instalada): ajuste para safe area
   Compensa el crecimiento del header en iPhone/iPad
   cuando la app está instalada y el notch/isla
   dinámica añade espacio al safe-area-inset-top.
   ================================================ */
@media (display-mode: standalone) {
    /* banner de promociones: se ancla justo debajo del header real */
    .promo-banner {
        top: calc(80px + env(safe-area-inset-top, 0px));
    }
    /* sección de chat: margen superior incluye la safe area */
    .chat-section {
        margin-top: calc(125px + env(safe-area-inset-top, 0px));
    }
}

@media (display-mode: standalone) and (max-width: 1024px) {
    .promo-banner {
        top: calc(70px + env(safe-area-inset-top, 0px));
    }
    .chat-section {
        margin-top: calc(115px + env(safe-area-inset-top, 0px));
    }
}

@media (display-mode: standalone) and (max-width: 768px) {
    .chat-section {
        margin-top: calc(100px + env(safe-area-inset-top, 0px));
    }
}

@media (display-mode: standalone) and (max-width: 480px) {
    .promo-banner {
        top: calc(60px + env(safe-area-inset-top, 0px));
    }
    .chat-section {
        margin-top: calc(95px + env(safe-area-inset-top, 0px));
    }
}

@media (display-mode: standalone) and (max-width: 375px) {
    .chat-section {
        margin-top: calc(92px + env(safe-area-inset-top, 0px));
    }
}

/* ================================================
   COMPACTACIÓN POR ALTURA (2026-08-03)
   La página NUNCA scrollea (body overflow:hidden): en pantallas bajas
   (celulares chicos, notebooks) se achican las medidas del dashboard para
   que entre todo; si aún así no entra, #homePanel scrollea ADENTRO y el
   chat conserva su piso (min-height en .chat-container). Nada se recorta.
   ================================================ */
@media (max-height: 760px) {
    .home-dash { margin: 6px auto 3px; gap: 7px; }
    .dash-top { padding: 6px; gap: 6px; }
    .dash-user, #rouletteHomeCard { flex: 0 0 76px; }
    .dash-user { padding: 6px 4px; gap: 2px; }
    .dash-user-avatar { width: 26px; height: 26px; font-size: 15px; }
    .dash-refunds { padding: 5px 6px 6px; }
    .dash-refunds-title { font-size: 10px; margin-bottom: 4px; }
    .dash-play-btn { padding: 7px 9px; font-size: 11px; }
    .dash-balance { padding: 5px 10px; }
    .dash-balance-amount { font-size: 13px; }
    .dash-tg-btn { padding: 6px 9px; }
    .dash-tg-emoji { font-size: 17px; }
    #homePanelToggle { padding: 4px 10px; margin-top: 2px; font-size: 10px; }
    .chat-topbar { padding: 6px 11px; gap: 9px; }
    .chat-topbar-avatar { width: 34px; height: 34px; }
    .chat-topbar-name { font-size: 14.5px; }
    .theme-topbar-btn { width: 34px; height: 34px; font-size: 15px; }
    .fire-topbar-btn { width: 37px; height: 37px; font-size: 18px; }
}

@media (max-height: 640px) {
    .chat-container { min-height: 140px; }
    .home-dash { gap: 5px; margin-top: 4px; }
    .dash-refunds-row .refund-label-full { font-size: 8.5px; }
    .dash-user-cta { font-size: 6px; }
    .chat-input-container { padding-top: 5px; }
    .wa-icon-btn { height: 42px; }
    #messageInput { min-height: 40px; padding: 9px 14px; }
    .send-btn { width: 40px; height: 40px; }
}

/* ---- pin.css ---- */
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   #370 (owner 2026-10-17): TEMA "PINTEREST" — "más aesthetic y profesional, no tanto color, que no te
   pierdas". Fondo blanco, grises neutros, UN acento rojo (#e60023), tipografía sans limpia, botones
   píldora, tarjetas de bordes redondeados y sin brillos/neón/degradés. Se carga ÚLTIMA y re-pinta
   todo (login, barra, Inicio, Menú fácil, carga automática, Info, Perfil, cambio de clave, modales).
   ⚠️ NO toca la CARGA MANUAL (#supportPanel: .chat-container, .message, .wa-head, .chat-input-container,
   .cbu-*): el owner quiere que siga pareciendo WhatsApp. Los selectores [style*=…] re-mapean los colores
   inline del HTML viejo y EXCLUYEN #supportPanel, #rouletteModal y el visor de historias.
   Para volver al tema anterior alcanza con quitar el <link> de pin.css en index.html.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* #643 (owner): margen inferior seguro. Lo que informa el teléfono (barra de gestos iPhone / Android borde a borde); si Android ocupa
     toda la pantalla y no informa nada (html.android-edge, lo detecta index.html), se reservan 24px para que sus botones no tapen la barra. */
  --sab: env(safe-area-inset-bottom, 0px);
  --p-bg: #ffffff;
  --p-surface: #f1f1f1;
  --p-surface-2: #e9e9e9;
  --p-text: #111111;
  --p-muted: #767676;
  --p-border: #e2e2e2;
  --p-red: #e60023;
  --p-red-dark: #ad081b;
  --p-red-soft: #ffe9ec;
  --p-green: #0a7a3e;
  --p-green-soft: #e8f5ee;
  --p-shadow: 0 2px 18px rgba(0, 0, 0, .08);
  --p-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* #392: tokens que antes eran colores fijos (hacen posible el modo nocturno) */
  --p-card: #fff; --p-hover: #fafafa; --p-nav: #5f5f5f; --p-border-hi: #cfcfcf; --p-placeholder: #9a9a9a; --p-text-2: #333;
  --p-inv: #fff; --p-green-line: #bfe3cf;
  /* re-mapeo de las variables del tema anterior: todo lo que las lee queda neutro */
  --dx-font: var(--p-font);
  --dx-bg: var(--p-bg);
  --dx-glass: var(--p-surface);
  --dx-border: var(--p-border);
  --dx-border-hi: var(--p-border-hi);
  --dx-cyan: var(--p-text);
  --dx-violet: var(--p-muted);
  --dx-accent: var(--p-red);
  --dx-money: var(--p-green);
  --dx-text: var(--p-text);
  --dx-muted: var(--p-muted);
  --dx-cut: none;
  --dx-cut-sm: none;
  --pr-gold: var(--p-text);
  --pr-gold-soft: var(--p-border);
  --pr-gold-grad: var(--p-red);
  --pr-text: var(--p-text);
  --pr-muted: var(--p-muted);
  --pr-serif: var(--p-font);
  --pr-card: var(--p-surface);
}

/* ── Base ─────────────────────────────────────────────────────────────────────────────────── */
html, body, html.has-session body { background: var(--p-bg) !important; color: var(--p-text); }
body { font-family: var(--p-font); }
::-webkit-scrollbar-track { background: var(--p-surface); }
::-webkit-scrollbar-thumb { background: var(--p-border-hi); }
.chat-screen { background: var(--p-bg) !important; font-family: var(--p-font); }
.chat-screen::before { display: none !important; }
.toast { background: var(--p-text) !important; color: var(--p-inv) !important; border-radius: 16px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); font-weight: 700; }
.toast.error { background: var(--p-red) !important; color: #fff !important; }
.btn { border-radius: 999px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.btn-primary { background: var(--p-red) !important; color: #fff !important; box-shadow: none !important; }
.btn-primary:hover { background: var(--p-red-dark) !important; transform: none; box-shadow: none !important; }
.btn-secondary { background: var(--p-surface) !important; color: var(--p-text) !important; box-shadow: none !important; }
.btn-secondary:hover { background: var(--p-surface-2) !important; transform: none; box-shadow: none !important; }
.publisher-cta { background: var(--p-red) !important; color: #fff !important; animation: none !important; box-shadow: none !important; }

/* ── Login ────────────────────────────────────────────────────────────────────────────────── */
.login-screen { background: var(--p-bg); }
.login-box { background: var(--p-card); border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 24px; padding: 18px 16px 14px; max-width: 390px; }
.login-box h1 { color: var(--p-text); }
.login-box p { color: var(--p-muted); font-weight: 600; }
.login-box img { border: 0 !important; border-radius: 16px !important; }
.login-box #helpTelegramBtn, .login-box #loginReviewsBtn, .login-box #loginGiftsBtn { background: var(--p-surface) !important; border: 0 !important; color: var(--p-text) !important; border-radius: 16px !important; box-shadow: none !important; }
.login-box #loginClaimsTicker { background: var(--p-surface) !important; border: 0 !important; border-radius: 999px !important; }
.login-box #loginClaimsTicker > span:first-child { color: var(--p-red) !important; }
.login-box #loginClaimsTicker > span:first-child span { background: var(--p-red) !important; box-shadow: none !important; animation: none !important; }
.login-box #loginClaimsText { color: var(--p-text) !important; }
.input-group label { color: var(--p-text); font-weight: 700; font-size: 13px; }
.input-group input, .input-group select, .modal-content input, .modal-content select, .modal-content textarea, #loginPhonePrefix {
  background: var(--p-surface) !important; border: 2px solid transparent !important; color: var(--p-text) !important; border-radius: 16px !important; box-shadow: none !important; font-family: var(--p-font);
}
.input-group input::placeholder, .modal-content input::placeholder, .modal-content textarea::placeholder { color: var(--p-placeholder); }
.input-group input:focus, .modal-content input:focus, .modal-content select:focus, .modal-content textarea:focus { border-color: var(--p-text) !important; background: var(--p-card) !important; box-shadow: none !important; outline: none; }
.error-message { color: #b3261e; background: #fdecea; border-radius: 12px; }

/* ── Barra de arriba ──────────────────────────────────────────────────────────────────────── */
.header.header-toolbar.tb-circles.topnav { background: var(--p-card) !important; border-bottom: 1px solid var(--p-border) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.header .tn-btn, .header .tn-btn:not(.tn-home) { background: transparent !important; border: 1px solid transparent !important; color: var(--p-nav) !important; box-shadow: none !important; clip-path: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 14px !important; text-shadow: none !important; }
.header .tn-btn:not(.tn-home) .tn-ico, .header .tn-btn:not(.tn-home) .tn-lbl { color: var(--p-nav) !important; filter: none !important; }
.header .tn-btn:not(.tn-home).active { background: var(--p-surface) !important; border-color: transparent !important; }
.header .tn-btn:not(.tn-home).active .tn-ico, .header .tn-btn:not(.tn-home).active .tn-lbl { color: var(--p-text) !important; }
.header .tn-sep { background: var(--p-border) !important; }
.header .tn-home.tn-retro { background: var(--p-red) !important; border: 0 !important; box-shadow: none !important; text-shadow: none !important; border-radius: 999px !important; color: #fff !important; animation: none !important; min-width: 88px; padding: 7px 14px 8px; }
.header .tn-home.tn-retro::before { display: none !important; }
.header .tn-home.tn-retro .tn-ico, .header .tn-home.tn-retro.active .tn-ico { color: #fff !important; filter: none !important; }
.header .tn-home.tn-retro .tn-ico svg, .header .tn-home.tn-retro.active .tn-ico svg { filter: none !important; }
.header .tn-home.tn-retro .tn-lbl { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: #fff !important; letter-spacing: 1px !important; font-family: var(--p-font) !important; }
.header .tn-home.tn-retro.active { box-shadow: 0 0 0 3px var(--p-red-soft) !important; animation: none !important; border: 0 !important; }
.header .tn-telegram, .header .tn-stories { background: transparent !important; color: var(--p-nav) !important; box-shadow: none !important; border-color: transparent !important; }
.header .tn-telegram .tn-lbl, .header .tn-stories .tn-lbl, .header .tn-btn:not(.tn-home).tn-stories .tn-lbl, .header .tn-btn:not(.tn-home).tn-telegram .tn-lbl { color: var(--p-nav) !important; }
.header .tn-telegram .tn-ico svg circle { fill: #229ed9; } /* #371: logo real de Telegram (círculo azul, avión blanco) */
.header .tn-telegram .tn-ico svg path { fill: #fff; }
.header .tn-stories .st-ring { background: var(--p-card) !important; border: 2px solid var(--p-border-hi) !important; }
.header .tn-stories.has-active .st-ring { border-color: var(--p-red) !important; background: var(--p-card) !important; }
.header .tn-stories .st-core { color: var(--p-text) !important; }
.header .tn-stories .st-badge { background: var(--p-red) !important; color: #fff !important; box-shadow: none !important; border-color: var(--p-card) !important; }
.header .support-unread { background: var(--p-red) !important; color: #fff !important; box-shadow: none !important; }

/* ── Inicio (menú completo) ───────────────────────────────────────────────────────────────── */
.entry-view { gap: 8px; margin: 6px 10px 0; }
.ev-hero { background: var(--p-surface) !important; border: 0 !important; box-shadow: none !important; border-radius: 18px !important; color: var(--p-text); }
.ev-hero::after { display: none !important; }
.ev-hero-k { color: var(--p-muted) !important; letter-spacing: 1.4px; }
.ev-hero-k .hc-ico { color: var(--p-red) !important; }
.ev-hero-t, .ev-hero-t b { color: var(--p-text) !important; }
.ev-hero-new { background: var(--p-red) !important; color: #fff !important; box-shadow: none !important; }
.ev-hero-new b { color: #fff !important; }
.ev-services { gap: 8px; }
.ev-svc { background: var(--p-card) !important; border: 1px solid var(--p-border) !important; box-shadow: none !important; color: var(--p-text) !important; border-radius: 16px !important; }
.ev-svc b, .ev-svc.svc-refund b, .ev-svc.svc-roulette b, .ev-svc.svc-ref b { color: var(--p-text) !important; }
.ev-svc small { color: var(--p-muted) !important; }
.ev-tab { background: var(--p-surface) !important; border: 0 !important; color: var(--p-text) !important; border-radius: 999px !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; }
.ev-tab img { background: var(--p-card) !important; }
.ev-tab.active, .ev-tab.plat-ganamos.active { background: var(--p-text) !important; color: var(--p-inv) !important; box-shadow: none !important; }
.ev-reco { background: var(--p-red) !important; color: #fff !important; }
.ev-tab.active .ev-reco { background: var(--p-card) !important; color: var(--p-red) !important; }
.ev-tab.soon .ev-soon, .plat-soon-badge { background: var(--p-surface-2) !important; color: var(--p-muted) !important; border: 0 !important; box-shadow: none !important; }
.ev-frame-wrap { border: 0 !important; background: var(--p-surface) !important; border-radius: 20px !important; box-shadow: none !important; }
.ev-slides { background: var(--p-surface) !important; }
.ev-slide::before { display: none !important; }
.ev-slide img { border: 0 !important; box-shadow: none !important; }
.ev-cta { background: var(--p-red) !important; color: #fff !important; border: 0 !important; box-shadow: 0 6px 18px rgba(230, 0, 35, .28) !important; animation: none !important; border-radius: 999px !important; }
.ev-cta-b, .ev-cta-t { text-shadow: none !important; color: #fff !important; text-transform: none !important; letter-spacing: 0 !important; font-family: var(--p-font) !important; }
.ev-status { background: var(--p-surface) !important; color: var(--p-text) !important; }
.ev-st-open { background: var(--p-red) !important; color: #fff !important; text-transform: none !important; letter-spacing: 0 !important; }
.ev-note, .ev-note-big, .ev-note-line { color: var(--p-muted) !important; }
.ev-note b, .ev-note-big a, .ev-note-line a { color: var(--p-red) !important; border-bottom-color: transparent !important; }
.ev-expand, .ev-view-site, .ev-link-btn, .plat-link-btn { background: var(--p-surface) !important; color: var(--p-text) !important; border: 0 !important; box-shadow: none !important; }
.ev-link-btn b, .ev-link-btn span, .plat-link-btn .plb-k, .plat-link-btn .plb-t { color: var(--p-text) !important; }
.ev-easy-link { color: var(--p-muted) !important; }
.ev-easy-link b { color: var(--p-text) !important; }
/* reseñas (Inicio) */
#entryReviews.ev-reviews { background: var(--p-card) !important; border: 1px solid var(--p-border) !important; box-shadow: none !important; border-radius: 18px !important; }
#entryReviews.ev-reviews::before { display: none !important; }
#entryReviews .rv-g, #entryReviews .rv-g::before, .rv-g { color: var(--p-muted) !important; }
#entryReviews .rv-avg, .rv-avg { background: var(--p-surface) !important; color: var(--p-text) !important; border: 0 !important; box-shadow: none !important; }
#entryReviews .rv-avg small, .rv-avg small { color: var(--p-muted) !important; }
#entryReviews .rv-card, .rv-card { background: var(--p-surface) !important; border: 0 !important; box-shadow: none !important; color: var(--p-text) !important; font-family: var(--p-font) !important; }
#entryReviews .rv-card:not(.rv-add)::after { color: #d0d0d0 !important; }
#entryReviews .rv-who b, .rv-who b { color: var(--p-text) !important; }
#entryReviews .rv-text, .rv-text { color: var(--p-text-2) !important; }
#entryReviews .rv-stars, .rv-stars, #entryReviews .rv-avg .rv-stars { color: #d9d9d9 !important; }
#entryReviews .rv-stars .on, .rv-stars .on, #entryReviews .rv-avg .rv-stars .on { color: var(--p-red) !important; }
#entryReviews .rv-avatar, .rv-avatar { background: var(--p-text) !important; color: var(--p-inv) !important; border: 0 !important; }
#entryReviews .rv-add, .rv-add { background: var(--p-card) !important; border: 1px dashed var(--p-border-hi) !important; }
#entryReviews .rv-add b, .rv-add b { color: var(--p-text) !important; }
#entryReviews .rv-add small, .rv-add small { color: var(--p-muted) !important; }
#entryReviews .rv-add-star, .rv-add-star { color: var(--p-red) !important; }

/* ── Menú fácil + selector ────────────────────────────────────────────────────────────────── */
.easy-view { margin: 8px 12px 0; gap: 10px; }
.ez-top { background: var(--p-surface) !important; border: 0 !important; border-radius: 18px !important; }
.ez-hello span { color: var(--p-text) !important; }
.ez-hello small, .ez-bal small { color: var(--p-muted) !important; }
.ez-bal b { color: var(--p-green) !important; }
.ez-main { background: var(--p-red) !important; color: #fff !important; border: 0 !important; box-shadow: 0 6px 18px rgba(230, 0, 35, .25) !important; animation: none !important; border-radius: 22px !important; }
.ez-main-txt b { color: #fff !important; text-shadow: none !important; letter-spacing: .4px !important; }
.ez-main-txt small, .ez-main-arrow { color: #fff !important; opacity: .9 !important; }
.ez-btn { background: var(--p-surface) !important; border: 0 !important; color: var(--p-text) !important; box-shadow: none !important; border-radius: 20px !important; }
.ez-btn b, .ez-btn.ez-refund b, .ez-btn.ez-roulette b, .ez-btn.ez-ref b, .ez-btn.ez-play b { color: var(--p-text) !important; }
.ez-btn small { color: var(--p-muted) !important; }
.ez-btn.ez-play { background: var(--p-surface) !important; }
.ez-badge { background: var(--p-red) !important; color: #fff !important; box-shadow: none !important; animation: none !important; }
.ez-chat { background: var(--p-surface) !important; border: 0 !important; color: var(--p-text) !important; border-radius: 18px !important; }
.ez-chat-txt b { color: var(--p-text) !important; }
.ez-chat-txt small { color: var(--p-muted) !important; }
.ez-switch { background: var(--p-card) !important; border: 1px solid var(--p-border) !important; color: var(--p-text) !important; border-radius: 999px !important; }
.ez-switch b { color: var(--p-text) !important; }
.ez-switch small { color: var(--p-muted) !important; }
.menu-chooser { background: rgba(0, 0, 0, .5) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.mc-card { background: var(--p-card) !important; border: 0 !important; box-shadow: 0 16px 48px rgba(0, 0, 0, .2) !important; border-radius: 28px !important; }
.mc-kicker { color: var(--p-red) !important; }
.mc-card h2 { color: var(--p-text) !important; font-family: var(--p-font) !important; }
.mc-sub { color: var(--p-muted) !important; }
.mc-sub b { color: var(--p-text) !important; }
.mc-opt, .mc-opt.mc-easy, .mc-opt.mc-full { background: var(--p-surface) !important; border: 2px solid transparent !important; box-shadow: none !important; color: var(--p-text) !important; border-radius: 20px !important; }
.mc-opt.mc-easy { border-color: var(--p-text) !important; }
.mc-opt.mc-easy b, .mc-opt.mc-full b { color: var(--p-text) !important; }
.mc-txt small { color: var(--p-muted) !important; }
.mc-tag { background: var(--p-red) !important; color: #fff !important; }
.mc-tag.mc-tag-dim { background: var(--p-surface-2) !important; color: var(--p-text) !important; }

/* ── Carga automática / home completo ────────────────────────────────────────────────────── */
#homeFull, #homePanel { background: transparent; }
.home-card { background: var(--p-card) !important; border: 1px solid var(--p-border) !important; box-shadow: none !important; border-radius: 18px !important; color: var(--p-text) !important; }
.home-card::before { display: none !important; }
.home-card-title { color: var(--p-text) !important; font-family: var(--p-font) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 800 !important; font-size: 14px !important; }
.home-card-sub { color: var(--p-muted) !important; }
.hc-ico, #autoLoadCard .hc-ico { color: var(--p-muted) !important; }
.hc-tag { background: var(--p-red) !important; color: #fff !important; clip-path: none !important; border-radius: 999px !important; }
.balance-strip { background: var(--p-surface) !important; border: 0 !important; border-radius: 14px !important; }
.balance-strip .dash-balance-label { color: var(--p-muted) !important; }
.balance-strip .dash-balance-amount { color: var(--p-green) !important; }
.bs-install { background: var(--p-surface) !important; border: 0 !important; box-shadow: none !important; color: var(--p-text) !important; }
.bs-install-t small { color: var(--p-muted) !important; }
.bs-imp { background: var(--p-red) !important; color: #fff !important; box-shadow: none !important; }
.bs-vip { background: var(--p-surface) !important; border: 0 !important; color: var(--p-text) !important; }
.bs-vip-t small, .bs-vip-pct { color: var(--p-muted) !important; }
.bs-vip-bar { background: var(--p-border) !important; }
.bs-vip-bar i { background: var(--p-text) !important; }
.al-line, .al-step, .al-access-head { border-color: var(--p-border) !important; }
.al-k, .al-label, .al-meta, .al-meta-2, .al-hint, .al-minline, .al-min, .al-alias-k, .al-access-head span, .al-step-sub, #autoLoadCard .al-step-sub { color: var(--p-muted) !important; }
.al-v, .al-value, .al-cbu .mono, .al-step-t, .al-chip .mono, .al-v.gold, .al-value .gold, .al-value .green, .al-value .blue, .mono.gold, .al-minline b, .al-meta-2 b, #autoLoadCard .al-step-sub b, #autoLoadCard .al-step-2 .al-step-t { color: var(--p-text) !important; }
.al-copy, .al-eye { background: var(--p-surface) !important; color: var(--p-text) !important; border: 0 !important; border-radius: 999px !important; }
.al-copy:active, .al-eye:active { background: var(--p-surface-2) !important; }
.al-chip, .al-field { background: var(--p-surface) !important; border: 0 !important; }
.al-n, #autoLoadCard .al-step-2 .al-n { background: var(--p-text) !important; color: var(--p-inv) !important; box-shadow: none !important; }
#autoLoadCard .al-step-c, #autoLoadCard .al-step-2 { background: var(--p-surface) !important; border: 0 !important; border-radius: 16px !important; }
.al-btn { clip-path: none !important; border-radius: 999px !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; }
.al-btn.receipt { background: var(--p-red) !important; color: #fff !important; border: 0 !important; }
.al-btn.capture, .al-link-btn { background: var(--p-surface) !important; color: var(--p-text) !important; border: 0 !important; }
.al-manual input { background: var(--p-surface) !important; border: 0 !important; color: var(--p-text) !important; }
.al-manual button { background: var(--p-text) !important; color: var(--p-inv) !important; }
.al-pw-hint { background: var(--p-surface) !important; border: 0 !important; color: var(--p-text) !important; }
.al-pw-hint b { color: var(--p-text) !important; }
.access-head, .access-title { color: var(--p-text) !important; background: transparent !important; }
.access-title small, .access-chevron { color: var(--p-muted) !important; }
.load-row-btn { background: var(--p-red) !important; color: #fff !important; clip-path: none !important; border-radius: 999px !important; box-shadow: none !important; animation: none !important; }
.load-row-btn .lr-text small, .load-row-btn .lr-auto, .withdraw-row-btn .lr-auto { color: inherit !important; opacity: .85; }
.withdraw-row-btn { background: var(--p-surface) !important; color: var(--p-text) !important; border: 0 !important; box-shadow: none !important; border-radius: 999px !important; clip-path: none !important; }
.withdraw-row-btn .lr-text small { color: var(--p-muted) !important; }
.hb-btn, .hb-ref, .hb-install, .hb-how { background: var(--p-surface) !important; border: 0 !important; clip-path: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 16px !important; box-shadow: none !important; color: var(--p-text) !important; }
.hb-text b { color: var(--p-text) !important; }
.hb-text small { color: var(--p-muted) !important; }
.home-how-btn, .hiw-toggle { background: var(--p-surface) !important; color: var(--p-text) !important; border: 0 !important; border-radius: 999px !important; }
.home-how-btn span { color: var(--p-text) !important; }
.hiw-body, .hiw-ladder, .hiw-sub { color: var(--p-text-2) !important; }
.hiw-step b.n { background: var(--p-text) !important; color: var(--p-inv) !important; }
.dash-top { background: transparent !important; }
.dash-top .dash-refunds-title { color: var(--p-muted) !important; }
.dash-top .refund-btn, .dash-top .dash-refunds-row .refund-btn { background: var(--p-surface) !important; border: 0 !important; color: var(--p-text) !important; box-shadow: none !important; border-radius: 12px !important; }
.dash-top .dash-refunds-row .refund-label-full { color: var(--p-muted) !important; }
.dash-top .refund-btn .refund-amount, .dash-top .dash-refunds-row .refund-amount { color: var(--p-text) !important; }
.dash-top .dash-refunds-row .refund-btn:disabled { filter: none !important; opacity: .55; }
.dash-top .refund-tier { background: var(--p-text) !important; color: var(--p-inv) !important; border-color: var(--p-text) !important; }
.dash-top .dash-user, .dash-top .dash-roulette { background: var(--p-surface) !important; border: 0 !important; box-shadow: none !important; }
.dash-top .dash-user-avatar, .dash-top .dash-roulette-avatar { background: var(--p-text) !important; color: var(--p-inv) !important; }
.dash-top .dash-user-label, .dash-top .dash-roulette-label, .dash-top .dash-user-name, .dash-top .dash-roulette-sub { color: var(--p-text) !important; }
.refund-btn.daily, .refund-btn.weekly, .refund-btn.monthly, .unified-refund-btn { background: var(--p-surface) !important; color: var(--p-text) !important; }
.fire-home-card { background: var(--p-surface) !important; border: 0 !important; box-shadow: none !important; color: var(--p-text) !important; border-radius: 18px !important; }
.fire-home-card .fh-flame { filter: none !important; }
.fire-home-card .fh-text b { color: var(--p-text) !important; }
.fire-home-card .fh-text small, .fire-home-card .fh-rule, #fireHomeCard .fh-rule { color: var(--p-muted) !important; }
#fireHomeCard .fh-rule b { color: var(--p-text) !important; }
.fire-home-card .fh-streak { background: var(--p-card) !important; border: 0 !important; }
.fire-home-card .fh-streak b { color: var(--p-text) !important; }
.fire-home-card .fh-streak small { color: var(--p-muted) !important; }
.fire-home-card .fh-track { background: var(--p-border) !important; }
.fire-home-card .fh-fill { background: var(--p-red) !important; box-shadow: none !important; }
.fire-home-card .fh-dot i { background: var(--p-card) !important; border-color: var(--p-border-hi) !important; }
.fire-home-card .fh-dot.on i { background: var(--p-red) !important; border-color: var(--p-red) !important; box-shadow: none !important; }
.fire-home-card .fh-dot.next i { background: var(--p-card) !important; border-color: var(--p-text) !important; }
.fire-home-card .fh-dot b, .fire-home-card .fh-dot small { color: var(--p-muted) !important; }
.fire-home-card.can-claim { background: var(--p-red-soft) !important; }
.plat-play-btn, .plat-play-btn.is-default, .plat-play-btn.plat-ganamos { background: var(--p-surface) !important; border: 2px solid transparent !important; box-shadow: none !important; color: var(--p-text) !important; border-radius: 18px !important; }
.plat-play-btn::after { display: none !important; }
.plat-play-btn.is-pref, .plat-play-wrap.is-pref .plat-play-btn, .plat-play-btn.plat-ganamos.is-pref { background: var(--p-card) !important; border-color: var(--p-text) !important; box-shadow: none !important; }
.plat-logo, .plat-play-btn.plat-girox .plat-logo { background: var(--p-card) !important; border: 0 !important; box-shadow: none !important; }
.plat-play-name, .plat-play-btn.plat-ganamos .plat-play-name { color: var(--p-text) !important; }
.plat-play-sub, .plat-play-btn.plat-ganamos .plat-play-sub { color: var(--p-muted) !important; }
.plat-reco { background: var(--p-red) !important; color: #fff !important; }
.plat-check { background: var(--p-card) !important; border-color: var(--p-border-hi) !important; color: var(--p-text) !important; }
.plat-play-btn.is-pref .plat-check { background: var(--p-text) !important; border-color: var(--p-text) !important; color: var(--p-inv) !important; box-shadow: none !important; }
.plat-enter { background: var(--p-text) !important; color: var(--p-inv) !important; border: 0 !important; }
.plat-fix { background: var(--p-surface) !important; color: var(--p-text) !important; border: 0 !important; }
.plat-fix.on { background: var(--p-text) !important; color: var(--p-inv) !important; }
.plat-balance { background: var(--p-surface) !important; border: 0 !important; }
.plat-balance .dash-balance-label { color: var(--p-muted) !important; }
.plat-balance .dash-balance-amount { color: var(--p-green) !important; }
.service-banner { background: var(--p-surface) !important; border: 0 !important; box-shadow: none !important; color: var(--p-text) !important; }
.svb-text b, .svb-msg, .svb-min, .svb-min b { color: var(--p-text) !important; }
.svb-msg em { color: var(--p-red) !important; }
.svb-cta, .svb-plat { background: var(--p-red) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; }
.vip-card, #vipCard { background: var(--p-card) !important; }
.vip-head { background: var(--p-surface) !important; border: 0 !important; color: var(--p-text) !important; }
.vip-head-next, .vip-pct, .vip-chevron { color: var(--p-muted) !important; }
.vip-bar { background: var(--p-border) !important; }
.vip-bar-fill { background: var(--p-red) !important; box-shadow: none !important; }
.vip-body-p { color: var(--p-text-2) !important; }
.vip-body-p b { color: var(--p-text) !important; }
.vip-lvl { background: var(--p-card) !important; }
.vip-lvl.on { background: var(--p-red-soft) !important; }
.vip-lvl.next { background: var(--p-surface) !important; }
.vip-lvl.on .vip-lvl-st, .vip-lvl-th, .vip-lvl-win, .vip-lvl-name small { color: var(--p-muted) !important; }
.vip-claim { background: var(--p-surface) !important; border: 0 !important; }
.vip-claim::before { display: none !important; }
.vc-title { color: var(--p-text) !important; }
.vc-amt { color: var(--p-muted) !important; }
.vc-amt b { color: var(--p-green) !important; }
.vc-plat { background: var(--p-card) !important; border: 1px solid var(--p-border) !important; color: var(--p-text) !important; }
.vc-plat.on { background: var(--p-text) !important; color: var(--p-inv) !important; border-color: var(--p-text) !important; }
.vc-btn { background: var(--p-red) !important; color: #fff !important; clip-path: none !important; border-radius: 999px !important; box-shadow: none !important; }
.ig-bar { background: var(--p-text) !important; color: var(--p-inv) !important; border: 0 !important; box-shadow: 0 -4px 20px rgba(0, 0, 0, .12) !important; }
.ig-bar-k { background: var(--p-red) !important; color: #fff !important; }
.ig-sheet { background: var(--p-card) !important; border: 0 !important; box-shadow: 0 -12px 40px rgba(0, 0, 0, .18) !important; color: var(--p-text) !important; }
.ig-title { color: var(--p-text) !important; }
.ig-amount { color: var(--p-red) !important; }
.ig-btn-main { background: var(--p-red) !important; color: #fff !important; box-shadow: none !important; }
.ig-btn-later { background: var(--p-surface) !important; color: var(--p-text) !important; border: 0 !important; }
.ig-note { color: var(--p-muted) !important; }
.play-now-card, .pn-sheet { background: var(--p-card) !important; border: 0 !important; box-shadow: 0 -12px 40px rgba(0, 0, 0, .18) !important; color: var(--p-text) !important; }
.pn-title { color: var(--p-text) !important; }
.pn-sub { color: var(--p-muted) !important; }
.pn-btn, .pn-gift-btn, .plat-play-now { background: var(--p-red) !important; color: #fff !important; box-shadow: none !important; border: 0 !important; }
.pn-later, .pn-test { background: var(--p-surface) !important; color: var(--p-text) !important; border: 0 !important; }
.pn-gift { background: var(--p-surface) !important; border: 0 !important; }
.pn-gift-t, .pn-gift-sub { color: var(--p-muted) !important; }
.pn-gift-amt { color: var(--p-text) !important; }
.casino-topbar { background: var(--p-card) !important; border-bottom: 1px solid var(--p-border) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.casino-topbar-title { color: var(--p-text) !important; }
.casino-back { background: var(--p-surface) !important; color: var(--p-text) !important; text-transform: none !important; letter-spacing: 0 !important; }
.casino-plat-tab { background: var(--p-surface) !important; color: var(--p-text) !important; border: 0 !important; text-transform: none !important; letter-spacing: 0 !important; }
.casino-plat-tab.active { background: var(--p-text) !important; color: var(--p-inv) !important; box-shadow: none !important; }
.casino-quick-btn { background: var(--p-red) !important; color: #fff !important; text-transform: none !important; letter-spacing: 0 !important; }
.casino-load { background: var(--p-card) !important; border: 1px solid var(--p-border) !important; color: var(--p-text) !important; box-shadow: 0 14px 44px rgba(0, 0, 0, .18) !important; }
.cl-step { background: var(--p-surface) !important; }
.cl-step > b { background: var(--p-text) !important; color: var(--p-inv) !important; }
.cl-cbu .mono { color: var(--p-text) !important; }
.cl-copy, .cl-plat { background: var(--p-card) !important; color: var(--p-text) !important; border: 1px solid var(--p-border) !important; }
.cl-plat.on { background: var(--p-text) !important; color: var(--p-inv) !important; }
.cl-btn { background: var(--p-red) !important; color: #fff !important; border: 0 !important; }
.cl-meta, .cl-meta a { color: var(--p-muted) !important; }
.cl-close, .cq-x { background: var(--p-surface) !important; color: var(--p-text) !important; border: 0 !important; }
.at-row { background: var(--p-surface) !important; color: var(--p-text) !important; border: 0 !important; }
.at-row.at-ok { background: var(--p-green-soft) !important; }
.at-row.at-bad { background: var(--p-red-soft) !important; }
.at-lbl, .at-st { color: var(--p-text) !important; }
.at-st.at-x { color: var(--p-red) !important; }
.at-help { background: var(--p-text) !important; color: var(--p-inv) !important; border: 0 !important; box-shadow: none !important; }

/* ── Modales (genérico) ───────────────────────────────────────────────────────────────────── */
.modal { background: rgba(0, 0, 0, .55) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.modal-content { background: var(--p-card) !important; border: 0 !important; border-radius: 24px !important; box-shadow: 0 16px 48px rgba(0, 0, 0, .18) !important; color: var(--p-text) !important; font-family: var(--p-font) !important; }
.modal-header h2, .modal-content h2, .modal-content h3 { color: var(--p-text) !important; text-transform: none !important; letter-spacing: -.2px !important; font-weight: 800 !important; font-family: var(--p-font) !important; }
.modal-header p { color: var(--p-muted) !important; }
.modal-content .btn, .modal-content .btn-primary, .modal-content button.btn-primary { background: var(--p-red) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; font-weight: 700 !important; }
.modal-content .btn-secondary, .modal-content button.btn-secondary { background: var(--p-surface) !important; color: var(--p-text) !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; }
.modal-content > button[onclick][style*="position: absolute"], .rs-close, .refund-simple .rs-close, .modal.profile-modal .rs-close { color: var(--p-muted) !important; }
.refund-details, .fire-details, .info-card { background: var(--p-surface) !important; border: 0 !important; border-radius: 16px !important; }
.refund-info-row, .fire-info-row { border-color: var(--p-border) !important; color: var(--p-text); }
.refund-info-row.highlight { background: var(--p-green-soft) !important; }
.refund-info-row.highlight span:last-child { color: var(--p-green) !important; }
.fire-info-row.highlight span:last-child { color: var(--p-red) !important; }
.notif-plan-card, .notif-plan-card.plan-suave, .notif-plan-card.plan-normal, .notif-plan-card.plan-activo, .notif-plan-card.plan-reembolsos { background: var(--p-surface) !important; border: 2px solid transparent !important; color: var(--p-text) !important; border-radius: 18px !important; }
.notif-plan-card.plan-normal { border-color: var(--p-text) !important; }
.notif-plan-card .plan-detail { color: var(--p-text-2) !important; }
.notif-plan-card .plan-desc { color: var(--p-muted) !important; }
.notif-plan-badge { background: var(--p-red) !important; color: #fff !important; }
.wa-switch-track { background: var(--p-border-hi) !important; border: 0 !important; }
.wa-switch input:checked + .wa-switch-track { background: var(--p-red) !important; }
.wa-switch-thumb { background: var(--p-card) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .25) !important; }
/* Perfil */
.modal.profile-modal .modal-content { background: var(--p-card) !important; border: 0 !important; box-shadow: 0 16px 48px rgba(0, 0, 0, .18) !important; color: var(--p-text) !important; font-family: var(--p-font) !important; }
.modal.profile-modal .modal-header h2 { color: var(--p-text) !important; font: 800 18px var(--p-font) !important; text-transform: none !important; letter-spacing: -.2px !important; }
.modal.profile-modal .modal-header p { color: var(--p-muted) !important; }
.profile-modal .pf-userbox { background: var(--p-surface) !important; border: 0 !important; box-shadow: none !important; border-radius: 18px !important; }
.profile-modal .pf-avatar { background: var(--p-card) !important; border: 0 !important; box-shadow: none !important; }
.profile-modal .pf-avatar-edit { background: var(--p-red) !important; color: #fff !important; border: 2px solid var(--p-card) !important; }
.profile-modal .pf-username { color: var(--p-text) !important; }
.profile-modal .pf-userlvl, .profile-modal .pf-userhint { color: var(--p-muted) !important; }
.profile-modal .pf-build { color: var(--p-placeholder) !important; }
.profile-modal .pf-main, .profile-modal .pf-main-big { background: var(--p-surface) !important; border: 0 !important; border-radius: 18px !important; }
.profile-modal .pf-row { border-bottom-color: var(--p-border) !important; }
.profile-modal .pf-k { color: var(--p-muted) !important; }
.profile-modal .pf-v, .profile-modal .pf-main-big .pf-v, .profile-modal .pf-main-big .pf-link { color: var(--p-text) !important; }
.profile-modal .pf-copy { background: var(--p-card) !important; border: 1px solid var(--p-border-hi) !important; color: var(--p-text) !important; }
.profile-modal .pf-hint { color: var(--p-muted) !important; }
.profile-modal .pf-capture { background: var(--p-text) !important; color: var(--p-inv) !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; }
.profile-modal .pf-act { background: var(--p-surface) !important; border: 0 !important; color: var(--p-text) !important; border-radius: 16px !important; }
.profile-modal .pf-act small { color: var(--p-muted) !important; }
.profile-modal .pf-act .pf-ico-btn { background: var(--p-card) !important; color: var(--p-text) !important; }
.profile-modal .pf-act .pf-ico-btn.active { background: var(--p-green-soft) !important; }
/* Reembolso simple (ya era blanco): botón rojo */
.refund-simple .modal-content { font-family: var(--p-font) !important; border-radius: 24px !important; }
.refund-simple .btn-primary { background: var(--p-red) !important; color: #fff !important; border-radius: 999px !important; box-shadow: none !important; }
.refund-simple .btn-primary:disabled { background: var(--p-border-hi) !important; color: #fff !important; }
.refund-simple .btn-secondary { background: var(--p-surface) !important; color: var(--p-text) !important; border: 0 !important; border-radius: 999px !important; }
.refund-simple .rs-line { background: var(--p-surface) !important; }
.refund-simple #refundAvailabilityInfo { background: var(--p-surface) !important; border: 0 !important; color: var(--p-text) !important; }
/* Info del servicio */
#infoModal .info-head-sm h2::after { background: var(--p-red) !important; }
#infoModal .modal-content > button[onclick] { background: var(--p-surface) !important; color: var(--p-text) !important; }
.info-reviews-wrap, #infoModal .info-reviews-wrap { background: var(--p-surface) !important; border: 0 !important; border-radius: 16px !important; }
.info-reviews-head, #infoModal .info-reviews-head { background: transparent !important; color: var(--p-text) !important; }
.info-reviews-chevron, #infoModal .info-reviews-chevron { color: var(--p-muted) !important; }
.info-msg { background: var(--p-surface) !important; border: 0 !important; box-shadow: none !important; color: var(--p-text-2) !important; border-radius: 20px 20px 20px 6px !important; }
.info-msg .im-sec { border-bottom-color: var(--p-border) !important; }
.info-msg b, .info-msg .im-sec > b:first-child { color: var(--p-text) !important; }
.info-msg .im-link { color: var(--p-red) !important; }
.info-badge, #infoModal .info-badge { background: var(--p-red) !important; color: #fff !important; }
#infoModal #closeInfoModal { background: var(--p-red) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; border-radius: 999px !important; }
.info-vip, .info-vip-inner, .info-vip-mine { background: var(--p-surface) !important; border: 0 !important; color: var(--p-text) !important; }
.info-vip-head, .info-vip-p, .info-vip-p b, .info-vip-mine b { color: var(--p-text) !important; }
.vip-row, .vip-row:nth-child(even) { background: var(--p-card) !important; }
.vip-row.is-cur { background: var(--p-red-soft) !important; }
.vip-row-h { background: var(--p-surface) !important; color: var(--p-muted) !important; }
.vip-th { color: var(--p-muted) !important; }
.vip-bonus, .vip-rake { color: var(--p-text) !important; }
/* Niveles VIP / avatar */
#vipLevelsModal .vl-intro, #avatarModal .vl-intro { color: var(--p-text-2) !important; }
#vipLevelsModal .vl-intro b, #avatarModal .vl-intro b { color: var(--p-text) !important; }
#vipLevelsModal .vl-mine { background: var(--p-surface) !important; border: 0 !important; color: var(--p-text) !important; }
#vipLevelsModal .vl-mine small, #vipLevelsModal .vl-name small, #vipLevelsModal .vl-rake, #vipLevelsModal .vl-empty { color: var(--p-muted) !important; }
#vipLevelsModal .vl-row { background: var(--p-card) !important; border-bottom: 1px solid var(--p-border) !important; }
#vipLevelsModal .vl-row.on { background: var(--p-red-soft) !important; }
#vipLevelsModal .vl-row.next { background: var(--p-surface) !important; }
#vipLevelsModal .vl-gift { color: var(--p-green) !important; }
#avatarModal .av-opt { background: var(--p-surface) !important; border: 2px solid transparent !important; color: var(--p-text) !important; }
#avatarModal .av-opt.sel { background: var(--p-card) !important; border-color: var(--p-text) !important; box-shadow: none !important; }
/* Fueguito */
.fire-rule-top { background: var(--p-surface) !important; border: 0 !important; color: var(--p-text) !important; }
.fire-rule-top b { color: var(--p-red) !important; }
.fire-streak-row { background: var(--p-surface) !important; border: 0 !important; }
.fire-streak-row span:first-child, .fire-prizes-title { color: var(--p-text) !important; }
.fire-streak-row #fireStreakModal { color: var(--p-red) !important; }
#fireMilestonesMenu > div { background: var(--p-surface) !important; border: 0 !important; }
.fire-ms-toggle { background: var(--p-surface) !important; color: var(--p-text) !important; border: 0 !important; }
.fire-ms-sum, .fire-ms-chev { color: var(--p-muted) !important; }
#fireModal #claimFireBtn { background: var(--p-red) !important; color: #fff !important; }
/* Referidos */
.ref-how-wrap { background: var(--p-surface) !important; border: 0 !important; }
.ref-how-head { background: transparent !important; color: var(--p-text) !important; }
.ref-how-chevron { color: var(--p-muted) !important; }
.ref-claim { background: var(--p-surface) !important; border: 0 !important; }
.ref-claim-k, .ref-claim-note { color: var(--p-muted) !important; }
.ref-claim-v { color: var(--p-text) !important; }
.ref-claim-btn { background: var(--p-red) !important; color: #fff !important; clip-path: none !important; border-radius: 999px !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; }
/* Historias: la etiqueta "Historias" del visor sigue oscura (pantalla completa, a propósito). */

/* ── Colores INLINE del HTML viejo (dorados, grises, verdes) → neutros ────────────────────── */
/* Alcance POSITIVO (login, Inicio, Menú fácil, home completo, barra, modales): así no toca el chat de Carga manual
   (#supportPanel), la ruleta (#rouletteModal, HTML armado por JS) ni el visor de historias. */
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#d4af37"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color: #d4af37"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#ffd700"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color: #ffd700"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#ffcc66"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color: #e6c9a8"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#d9b8ff"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#53bdeb"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#3aa0e0"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color: #6a0dad"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#fff"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color: #fff"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#eee"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#ddd"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#d8d8d8"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#1a0033"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color: #1a0033"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#000"] { color: var(--p-text) !important; }
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#888"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color: #888"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#aaa"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#999"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#b0b0b0"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color: #b0b0b0"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#a0a0a0"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color: #667781"] { color: var(--p-muted) !important; }
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#00ff88"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color: #00ff88"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#25d366"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#052e16"] { color: var(--p-green) !important; }
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color: #ff6b6b"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color: #ff4500"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#ff6666"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="color:#f7931e"] { color: var(--p-red) !important; }
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="background: rgba(0,0,0,0.4)"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="background:rgba(0,0,0,0.4)"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="background:rgba(0,0,0,0.3)"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="background:rgba(255,255,255,0.05)"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="background:rgba(255,255,255,0.04)"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="background:rgba(212,175,55,0.2)"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="background:rgba(212,175,55,0.1"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="background:rgba(106,13,173,0.18)"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="background:rgba(0,136,204,0.12)"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="background:linear-gradient(135deg,rgba(0,255,136,0.10)"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="background:linear-gradient(135deg,rgba(157,78,221,0.16)"] { background: var(--p-surface) !important; }
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="background:linear-gradient(135deg,#d4af37,#ffd700)"] { background: var(--p-red) !important; color: #fff !important; }
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="border:1px solid rgba(212,175,55"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="border: 1px solid rgba(212,175,55"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="border:1px solid rgba(255,255,255,0.1"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="border:1px solid rgba(0,255,136,0.55)"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="border:1px solid #d4af37"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="border:2px solid #d4af37"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="border:1px solid rgba(157,78,221"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="border:1px solid rgba(255,204,0,0.25)"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="border:1px solid rgba(247,147,30,0.2)"],
:is(#loginScreen, #entryView, #easyView, #menuChooser, #homeFull, #playNowCard, .header.topnav, .modal:not(#rouletteModal)) [style*="border-color:rgba(0,136,204,0.5)"] { border-color: var(--p-border) !important; }
/* los botones rojos/negros de este tema mantienen el texto blanco aunque tengan color inline */
.btn-primary, .modal-content .btn-primary, .ez-main, .ev-cta, .load-row-btn, .al-btn.receipt, .ref-claim-btn, .vc-btn, .pn-btn, .ig-btn-main, #infoModal #closeInfoModal, .mc-tag, .ez-badge, .ev-hero-new, .hc-tag, .plat-reco, .bs-imp, .ig-bar, .at-help, .profile-modal .pf-capture, .header .tn-home.tn-retro { color: #fff !important; }

/* ── #372: RULETA DIARIA con el estilo nuevo (HTML en js/roulette.js, clases rl-*) ─────────── */
#rouletteModal, .rl-overlay { background: rgba(0, 0, 0, .55) !important; }
.rl-overlay { position: fixed; inset: 0; z-index: 99998; display: flex; align-items: flex-start; justify-content: center; padding: 14px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.rl-card { position: relative; width: 100%; max-width: 480px; margin: 14px auto; background: var(--p-card); border-radius: 28px; padding: 22px 18px 18px; color: var(--p-text); font-family: var(--p-font); box-shadow: 0 16px 48px rgba(0, 0, 0, .18); display: flex; flex-direction: column; gap: 12px; }
.rl-card.rl-loading { text-align: center; color: var(--p-muted); font-weight: 700; padding: 34px; }
.rl-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--p-surface); color: var(--p-text); font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rl-head { text-align: center; padding-right: 36px; padding-left: 36px; }
.rl-kicker { font: 800 10.5px var(--p-font); letter-spacing: 1.6px; text-transform: uppercase; color: var(--p-red); }
.rl-title { margin: 2px 0 2px; font: 800 24px/1.15 var(--p-font); letter-spacing: -.3px; color: var(--p-text); text-align: center; }
.rl-sub { margin: 0; font: 500 13px/1.4 var(--p-font); color: var(--p-muted); text-align: center; }
.rl-sub b { color: var(--p-text); }
.rl-pending { background: var(--p-surface); border-radius: 16px; padding: 10px 14px; font: 600 12.5px/1.4 var(--p-font); color: var(--p-text); text-align: center; }
.rl-pending b { color: var(--p-red); }
.rl-hero, .rl-result { background: var(--p-surface); border-radius: 22px; padding: 24px 16px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rl-result.win { background: var(--p-green-soft); }
.rl-result.warn { background: var(--p-red-soft); }
.rl-emoji { font-size: 64px; line-height: 1; }
.rl-emoji-swing { animation: rlSwing 2s ease-in-out infinite; }
.rl-emoji-spin { animation: rlSpin .5s linear infinite; }
@keyframes rlSwing { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes rlSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rl-emoji-swing, .rl-emoji-spin { animation: none; } }
.rl-hero-t, .rl-res-k { font: 800 17px var(--p-font); color: var(--p-text); }
.rl-result.win .rl-res-k { color: var(--p-green); text-transform: uppercase; letter-spacing: 1.2px; font-size: 13px; }
.rl-result.warn .rl-res-k { color: var(--p-red); text-transform: uppercase; letter-spacing: 1.2px; font-size: 13px; }
.rl-result.lose .rl-res-k { color: var(--p-muted); }
.rl-hero-s { font: 500 13px/1.45 var(--p-font); color: var(--p-muted); max-width: 300px; }
.rl-hero-s b { color: var(--p-text); }
.rl-res-big { font: 900 36px/1.1 var(--p-font); color: var(--p-text); letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.rl-res-note { margin-top: 6px; background: var(--p-card); border-radius: 14px; padding: 9px 12px; font: 600 12.5px/1.4 var(--p-font); color: var(--p-text); }
.rl-tx { font: 500 10px ui-monospace, Menlo, monospace; color: var(--p-placeholder); margin-top: 4px; }
.rl-err { color: var(--p-red); font-weight: 700; padding: 16px; }
.rl-spin { margin-top: 10px; min-width: 200px; background: var(--p-red); color: #fff; border: 0; border-radius: 999px; padding: 15px 36px; font: 800 17px var(--p-font); letter-spacing: .3px; cursor: pointer; box-shadow: 0 6px 18px rgba(230, 0, 35, .28); -webkit-tap-highlight-color: transparent; }
.rl-spin:active { transform: scale(.98); }
.rl-spin.rl-cta { width: 100%; min-width: 0; font-size: 15px; }
.rl-close { width: 100%; background: var(--p-surface); color: var(--p-text); border: 0; border-radius: 999px; padding: 13px; font: 700 14px var(--p-font); cursor: pointer; }
.rl-sec-t { font: 800 10.5px var(--p-font); letter-spacing: 1.4px; text-transform: uppercase; color: var(--p-muted); }
.rl-prizes { display: flex; flex-direction: column; gap: 6px; }
.rl-prize-list { display: flex; flex-direction: column; gap: 5px; }
.rl-prize { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--p-card); border: 1px solid var(--p-border); border-radius: 14px; }
.rl-prize-n { font: 700 12.5px var(--p-font); color: var(--p-text); white-space: nowrap; }
.rl-prize-v { flex: 1; font: 500 11px var(--p-font); color: var(--p-muted); text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-prize-p { font: 800 11.5px var(--p-font); color: var(--p-text); background: var(--p-surface); border-radius: 999px; padding: 3px 9px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rl-winners { background: var(--p-surface); border-radius: 18px; padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.rl-win-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rl-live { display: inline-flex; align-items: center; gap: 5px; font: 800 9.5px var(--p-font); letter-spacing: 1px; color: var(--p-red); }
.rl-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--p-red); animation: rlPulse 1.4s ease-in-out infinite; }
@keyframes rlPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.rl-win-list { max-height: 240px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.rl-win-empty { text-align: center; color: var(--p-muted); font: 500 11.5px var(--p-font); padding: 10px 6px; }
.rl-win-foot { text-align: center; font: 500 10px/1.35 var(--p-font); color: var(--p-placeholder); padding-top: 6px; border-top: 1px dashed #d6d6d6; }
#rouletteModalWinnersList .winner-row { display: flex !important; align-items: center !important; gap: 8px !important; padding: 7px 4px !important; border-bottom: 1px solid #e4e4e4 !important; background: transparent !important; border-radius: 0 !important; margin: 0 !important; }
#rouletteModalWinnersList .winner-row.is-me { background: var(--p-card) !important; border-radius: 10px !important; padding: 7px 8px !important; }
#rouletteModalWinnersList .winner-user { color: var(--p-text) !important; font: 600 12px var(--p-font) !important; flex: 1 !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rouletteModalWinnersList .winner-row.is-me .winner-user { color: var(--p-red) !important; font-weight: 800 !important; }
#rouletteModalWinnersList .winner-prize { color: var(--p-green) !important; font: 800 12.5px var(--p-font) !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
#rouletteModalWinnersList .winner-time { color: var(--p-muted) !important; font: 500 10.5px var(--p-font) !important; white-space: nowrap; }
.rl-community { background: var(--p-surface); border-radius: 18px; padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.rl-community p { margin: 0; font: 500 12.5px/1.45 var(--p-font); color: var(--p-text); }
.rl-link { display: flex; align-items: center; gap: 9px; background: var(--p-text); color: var(--p-inv); text-decoration: none; padding: 11px 14px; border-radius: 999px; font: 700 13px var(--p-font); }
.rl-link span { flex: 1; } .rl-link i { font-style: normal; opacity: .7; }
.rl-link.rl-link-2 { background: var(--p-card); color: var(--p-text); border: 1px solid var(--p-border); }
.rl-needs { text-align: center; align-items: center; }
.rl-needs .rl-sub { max-width: 340px; }
.rl-steps { width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.rl-step { display: flex; align-items: center; gap: 12px; background: var(--p-surface); border-radius: 16px; padding: 10px 12px; }
.rl-step-n { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--p-red); color: #fff; font: 800 14px var(--p-font); display: inline-flex; align-items: center; justify-content: center; }
.rl-step.done .rl-step-n { background: var(--p-green); }
.rl-step-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rl-step-t b { font: 700 13.5px var(--p-font); color: var(--p-text); }
.rl-step-t small { font: 500 11px var(--p-font); color: var(--p-muted); }

/* ── #372: aviso "promoción hasta diciembre" de los reembolsos (texto /sys_refund_promo, lo pinta home.js) ── */
.refund-promo { display: block; font: 600 10.5px/1.35 var(--p-font); color: var(--p-muted); }
.refund-promo::before { content: "●"; color: var(--p-red); font-size: 7px; vertical-align: 2px; margin-right: 5px; }
.refund-promo[hidden] { display: none !important; }
.ez-btn .refund-promo { font-size: 9px; margin-top: 2px; }
.info-msg .refund-promo { margin-top: 6px; font-size: 11.5px; color: var(--p-text) !important; }
.rs-promo { text-align: center; margin-top: 8px; }
.dash-promo { margin: 2px 2px 0; }

/* ── #373: SOPORTE (ex Carga manual) — el chat con el estilo de la página + presentación de Martín ──────── */
body.home-mini .support-panel, body.wa-dark.home-mini .support-panel { background: var(--p-card) !important; border: 1px solid var(--p-border) !important; border-bottom: 0 !important; border-radius: 22px 22px 0 0 !important; margin: 0 8px !important; }
.support-panel, body.wa-dark .support-panel { background: var(--p-card) !important; }
.chat-topbar, .wa-head, body.wa-dark .chat-topbar, .support-head, body.wa-dark .support-head { background: var(--p-card) !important; color: var(--p-text) !important; border-bottom: 1px solid var(--p-border) !important; box-shadow: none !important; }
.wa-head .chat-topbar-name, .chat-topbar-name, .support-head-title { color: var(--p-text) !important; }
.wa-head .chat-topbar-status, .chat-topbar-status, .support-head-sub { color: var(--p-muted) !important; }
.chat-topbar-dot { background: var(--p-green) !important; box-shadow: none !important; }
.chat-topbar-avatar, .wa-head .wa-assist { background: var(--p-card) !important; border: 0 !important; box-shadow: none !important; overflow: hidden; border-radius: 50% !important; }
.wa-head .wa-assist svg { width: 100% !important; height: 100% !important; }
.wa-head-btn, .support-back, .support-load-btn, .theme-topbar-btn { background: var(--p-surface) !important; color: var(--p-text) !important; border: 0 !important; box-shadow: none !important; }
.chat-container, body.wa-dark .chat-container { background: var(--p-card) !important; background-image: none !important; }
.message, body.wa-dark .message { box-shadow: none !important; font-family: var(--p-font); }
.message.usuario, body.wa-dark .message.usuario, .message.admin, .message.system { background: var(--p-surface) !important; color: var(--p-text) !important; border-radius: 18px 18px 18px 6px !important; }
.message.agente, body.wa-dark .message.agente { background: var(--p-red) !important; color: #fff !important; border-radius: 18px 18px 6px 18px !important; }
.message-time, body.wa-dark .message-time, .msg-ticks { color: var(--p-placeholder) !important; }
.message.agente .message-time, .message.agente .msg-ticks, .message.agente .msg-ticks.msg-read { color: rgba(255, 255, 255, .85) !important; }
.message.agente .chat-link, .message.agente a { color: #fff !important; text-decoration: underline; }
.chat-link, body.wa-dark .chat-link { color: var(--p-red) !important; }
.message img { border-radius: 14px !important; }
.chat-date-separator span, body.wa-dark .chat-date-separator span { background: var(--p-surface) !important; color: var(--p-muted) !important; box-shadow: none !important; border: 0 !important; }
.chat-input-container, body.wa-dark .chat-input-container, body.home-mini .chat-input-container { background: var(--p-card) !important; border-top: 1px solid var(--p-border) !important; box-shadow: none !important; }
#messageInput, body.wa-dark #messageInput { background: var(--p-surface) !important; color: var(--p-text) !important; border: 0 !important; border-radius: 22px !important; box-shadow: none !important; font-family: var(--p-font); }
#messageInput::placeholder, body.wa-dark #messageInput::placeholder { color: var(--p-placeholder) !important; }
.wa-icon-btn, body.wa-dark .wa-icon-btn, .action-btn { color: var(--p-nav) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.send-btn, body.wa-dark .send-btn { background: var(--p-red) !important; color: #fff !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important; }
.copy-btn, body.wa-dark .copy-btn { background: var(--p-card) !important; color: var(--p-text) !important; border: 1px solid var(--p-border) !important; border-radius: 999px !important; }
#typingIndicator, body.wa-dark #typingIndicator { color: var(--p-muted) !important; }
.plat-btn, .deposit-btn, .withdraw-btn { background: var(--p-text) !important; color: var(--p-inv) !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; }
.plat-btn.plat-link { background: var(--p-surface) !important; color: var(--p-text) !important; }
.cbu-box { background: var(--p-card) !important; border: 1px solid var(--p-border) !important; }
.cbu-row span { color: var(--p-muted) !important; }
.cbu-row b { color: var(--p-text) !important; }
.cbu-copy, .message.admin .cbu-copy, .message.system .cbu-copy { color: var(--p-text) !important; border-color: var(--p-border-hi) !important; background: var(--p-card) !important; }
.cbu-send { background: var(--p-red) !important; color: #fff !important; box-shadow: none !important; }
body.home-mini .support-panel .cbu-chat-btn { display: none !important; } /* #373: ya no hay "carga manual" por chat */
.support-unread { background: var(--p-red) !important; color: #fff !important; }
/* Presentación de Martín (estilo Stake) */
.sp-intro { display: none; gap: 12px; align-items: flex-start; margin: 10px 10px 0; padding: 14px 14px 12px; background: var(--p-surface); border-radius: 22px; cursor: default; flex: 0 0 auto; }
body.home-mini .sp-intro { display: flex; }
.sp-avatar { position: relative; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; overflow: visible; }
.sp-avatar svg { width: 52px; height: 52px; border-radius: 50%; display: block; }
.sp-dot { position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: var(--p-green); border: 2px solid var(--p-card); }
.sp-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.sp-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 800 14.5px var(--p-font); color: var(--p-text); }
.sp-name span { color: var(--p-muted); font-weight: 600; }
.sp-name .sp-online { font: 700 10px var(--p-font); color: var(--p-green); background: var(--p-card); border-radius: 999px; padding: 2px 8px; font-style: normal; }
.sp-msg { font: 500 13.5px/1.45 var(--p-font); color: var(--p-text); }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chips button { border: 1px solid var(--p-border); background: var(--p-card); color: var(--p-text); border-radius: 999px; padding: 7px 12px; font: 700 12px var(--p-font); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sp-chips button:active { background: var(--p-surface-2); }
.sp-sla { align-self: flex-start; font: 800 11px var(--p-font); color: var(--p-red); background: var(--p-card); border-radius: 999px; padding: 5px 10px; }
/* después del primer mensaje queda compacta (tocar el nombre la vuelve a abrir) */
body.sp-sent .sp-intro:not(.sp-open) { padding: 9px 12px; gap: 10px; align-items: center; cursor: pointer; }
body.sp-sent .sp-intro:not(.sp-open) .sp-msg, body.sp-sent .sp-intro:not(.sp-open) .sp-chips { display: none; }
body.sp-sent .sp-intro:not(.sp-open) .sp-avatar, body.sp-sent .sp-intro:not(.sp-open) .sp-avatar svg { flex-basis: 36px; width: 36px; height: 36px; }
body.sp-sent .sp-intro:not(.sp-open) .sp-body { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
body.sp-sent .sp-intro:not(.sp-open) .sp-sla { padding: 3px 8px; font-size: 10px; }
@media (max-height: 640px) { .sp-msg { font-size: 12.5px; } .sp-intro { padding: 11px 12px 10px; } }
/* #374: ruleta — premio mayor destacado y estado bloqueado */
.rl-top { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 9px 14px; border-radius: 999px; background: var(--p-red-soft); color: var(--p-text); font: 700 12px var(--p-font); }
.rl-top b { font: 900 16px var(--p-font); color: var(--p-red); letter-spacing: -.2px; }
.rl-top-k { color: var(--p-text); }
.rl-top-odd { color: var(--p-muted); font-weight: 600; }
.rl-hero.rl-locked { background: var(--p-surface); }
.rl-hero.rl-locked .rl-emoji { font-size: 54px; }
.rl-min { color: inherit; font-weight: 800; }
/* #375 (owner): SOPORTE es sólo soporte — sin cartel "Recomendable / Ir a carga automática", sin botones extra */
body.home-mini .service-banner, body.home-mini .test-mini-manual, body.home-mini #supportTests, body.home-mini .plat-link-manual, body.home-mini .ig-bar { display: none !important; }
body.home-mini #waThemeBtn, body.home-mini .wa-head-fire { display: none !important; }
body.home-mini .wa-head .chat-topbar-info { cursor: default; }
/* #376: estado de la carga automática (chat + franja) */
.dep-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 11px; border-radius: 999px; font: 800 11.5px var(--p-font); background: var(--p-card); color: var(--p-text); border: 1px solid var(--p-border); }
.dep-pill.dep-wait { color: #8a5a00; background: #fff6e0; border-color: #ffe0a3; }
.dep-pill.dep-dup, .dep-pill.dep-rej { color: var(--p-red); background: var(--p-red-soft); border-color: #ffc2cb; }
.message.agente .dep-pill { background: var(--p-card); }
.dep-pending-strip { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 9px 12px; border-radius: 14px; background: #fff6e0; border: 1px solid #ffe0a3; color: #5a3d00; }
.dep-pending-strip[hidden] { display: none !important; }
.dep-pending-strip .dps-ico { font-size: 20px; line-height: 1; }
.dep-pending-strip .dps-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dep-pending-strip b { font: 800 13px var(--p-font); color: #5a3d00; }
.dep-pending-strip small { font: 600 11px var(--p-font); color: #8a5a00; }
.easy-view .dep-pending-strip { flex: 0 0 auto; margin: 0; }
/* #377: firma de la persona de Soporte en las respuestas */
.msg-who { font: 800 10.5px var(--p-font); color: var(--p-red); margin-bottom: 2px; letter-spacing: .2px; }
/* #379: retiro: pago automático + mínimo */
.wd-auto { margin: 4px 0 0 !important; font: 600 12px var(--p-font) !important; color: var(--p-muted) !important; }
.wd-auto b { color: var(--p-text); }

/* #380 (owner): las plataformas del Inicio como cuadrados iguales (grilla de N columnas, misma altura) */
.ev-tabs { display: grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px !important; padding-top: 0 !important; }
.ev-tab, .ev-tab.soon { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; height: 86px; padding: 8px 6px !important; border-radius: 18px !important; font: 800 11.5px var(--p-font) !important; text-transform: none !important; letter-spacing: 0 !important; position: relative; opacity: 1 !important; min-width: 0; }
.ev-tab img { width: 30px !important; height: 30px !important; border-radius: 9px !important; flex: 0 0 auto; }
.ev-tab .ev-reco { position: absolute !important; top: 6px !important; right: 6px !important; font-size: 7.5px !important; padding: 2px 6px !important; }
.ev-tab.soon .ev-soon, .ev-tab .ev-soon { position: static !important; display: inline-block !important; flex: 0 0 auto !important; margin: 0 !important; width: auto !important; font: 800 8px var(--p-font) !important; letter-spacing: .4px !important; text-transform: uppercase; padding: 2px 7px !important; border-radius: 999px !important; }

/* ── #381: PANTALLA DE INGRESO ─────────────────────────────────────────────────────────────── */
.login-screen { align-items: flex-start; padding: 0; }
.login-box.lg { max-width: 440px; padding: 14px 16px 22px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.lg-head { display: flex; align-items: center; gap: 10px; }
.lg-logo { width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto; }
.lg-brand { display: flex; flex-direction: column; line-height: 1.1; flex: 1 1 auto; min-width: 0; }
.lg-brand b { font: 900 17px var(--p-font); letter-spacing: 1.2px; color: var(--p-text); }
.lg-brand small { font: 600 10.5px var(--p-font); color: var(--p-muted); letter-spacing: .3px; }
.lg-tg { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; background: var(--p-surface) !important; border: 0 !important; color: var(--p-text) !important; border-radius: 999px !important; padding: 8px 12px !important; font: 700 12px var(--p-font) !important; cursor: pointer; box-shadow: none !important; }
.lg-chip-red { background: var(--p-red); color: #fff; }
.lg-ticker-t { flex: 1; min-width: 0; font: 600 11.5px var(--p-font); color: var(--p-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-form { background: var(--p-surface); border-radius: 22px; padding: 14px 14px 6px; margin-top: 2px; }
.lg-form .input-group { margin-bottom: 10px; }
.lg-form .input-group input { background: var(--p-card) !important; }
.lg-form .btn-primary { margin-bottom: 6px; padding: 14px; font-size: 15px; }
.lg-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lg-alt-q { font: 700 13px var(--p-font); color: var(--p-text); flex: 1 0 100%; }
.lg-register { flex: 1 1 auto; margin: 0 !important; padding: 13px !important; font-size: 14px !important; }
.lg-link { border: 0; background: transparent; color: var(--p-muted); font: 700 12px var(--p-font); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 6px 4px; }
.lg-alt-note { flex: 1 0 100%; font: 500 10.5px var(--p-font); color: var(--p-placeholder); }
.lg-sec { margin-top: 6px; }
.lg-reviews { margin: 0 !important; }
.lg-foot { margin: 4px 0 0; text-align: center; font: 600 10px var(--p-font); color: var(--p-placeholder); }

/* #383 (owner): las plataformas de la carga automática en una sola fila de cuadrados iguales (como el Inicio) */
.plat-play-row { display: grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px !important; }
.plat-play-wrap { min-width: 0 !important; flex: none !important; }
.plat-play-btn { height: 96px; padding: 8px 6px 24px !important; min-width: 0; }
.plat-play-btn .plat-logo { width: 28px !important; height: 28px !important; }
.plat-play-name { font-size: 11.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* #385: "Retirar premio" con título + bajada (mínimo y pago automático) */
.withdraw-row-btn { display: flex !important; align-items: center; justify-content: center; text-align: left; }
.withdraw-row-btn .lr-text b { font: 800 13px var(--p-font) !important; color: var(--p-text) !important; }
.withdraw-row-btn .lr-text small { font: 600 10px var(--p-font) !important; color: var(--p-muted) !important; }

/* ── #392 (owner 2026-10-18): MODO NOCTURNO de la app. html[data-theme="dark"] (localStorage 'vip_theme'; se alterna
   desde Perfil y desde el botón 🌙/☀️ de la barra de arriba). Sólo cambian los tokens; la Carga manual (#supportPanel),
   la ruleta y las historias no dependen de pin.css y siguen igual. ── */
html[data-theme="dark"] {
  --p-bg: #121212; --p-surface: #1e1e1e; --p-surface-2: #2a2a2a; --p-text: #f2f2f2; --p-muted: #a3a3a3; --p-border: #2e2e2e;
  --p-red: #ff3b4e; --p-red-dark: #d1192d; --p-red-soft: #3a1218; --p-green: #5fd38d; --p-green-soft: #10291a; --p-green-line: #1e4a30;
  --p-shadow: 0 2px 18px rgba(0, 0, 0, .5);
  --p-card: #181818; --p-hover: #232323; --p-nav: #bdbdbd; --p-border-hi: #3a3a3a; --p-placeholder: #7a7a7a; --p-text-2: #d6d6d6; --p-inv: #111;
  color-scheme: dark;
}
html[data-theme="dark"] .error-message { color: #ff8a9a; background: #3a1218; }
html[data-theme="dark"] .toast { box-shadow: 0 6px 24px rgba(0, 0, 0, .6); }
.header .tn-theme .tn-ico { font-size: 17px; line-height: 1; }
/* ── #391: "Retirar premio" en VERDE sobrio (misma familia que el resto), bajada corta y legible ── */
.withdraw-row-btn { background: var(--p-green-soft) !important; color: var(--p-green) !important; border: 1px solid var(--p-green-line) !important; }
.withdraw-row-btn .lr-text b { color: var(--p-green) !important; font: 800 13px var(--p-font) !important; letter-spacing: .2px !important; text-transform: none !important; }
.withdraw-row-btn .lr-text small { color: var(--p-green) !important; opacity: .85; font: 600 10.5px var(--p-font) !important; letter-spacing: 0 !important; text-transform: none !important; }
/* ── #393: Perfil — código de referido debajo del nombre ── */
.profile-modal .pf-usercode { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; font: 600 11.5px var(--p-font); color: var(--p-muted); }
.profile-modal .pf-usercode b { font: 800 12.5px var(--p-font); letter-spacing: 1.5px; color: var(--p-text); background: var(--p-surface); padding: 2px 8px; border-radius: 8px; }
.profile-modal .pf-usercode .pf-copy { padding: 2px 8px; font-size: 10.5px; }
/* ── #394: Info — cada sección es una TARJETA propia (franja de color distinta) y el título va RECUADRADO ── */
.info-msg { background: transparent !important; padding: 0 !important; border-radius: 0 !important; margin: 8px 0 0 !important; }
.info-msg .im-sec { display: block; background: var(--p-card) !important; border: 1px solid var(--p-border) !important; border-left: 5px solid var(--im-acc, var(--p-red)) !important; border-radius: 14px !important; padding: 12px 14px !important; margin: 0 0 10px !important; color: var(--p-text-2) !important; font-size: 12.5px; line-height: 1.5; }
.info-msg .im-sec:last-child { margin-bottom: 0 !important; }
.info-msg .im-sec > b:first-child { display: inline-flex !important; align-items: center; gap: 6px; background: var(--p-surface) !important; border: 1px solid var(--p-border) !important; border-radius: 10px; padding: 5px 10px; margin: 0 0 8px !important; font: 800 13px var(--p-font) !important; color: var(--p-text) !important; letter-spacing: 0 !important; }
.info-msg .im-sec:nth-of-type(1) { --im-acc: #e60023; } .info-msg .im-sec:nth-of-type(2) { --im-acc: #16a34a; } .info-msg .im-sec:nth-of-type(3) { --im-acc: #0ea5e9; }
.info-msg .im-sec:nth-of-type(4) { --im-acc: #9333ea; } .info-msg .im-sec:nth-of-type(5) { --im-acc: #f97316; } .info-msg .im-sec:nth-of-type(6) { --im-acc: #d4af37; }

/* ── #399: en NOCTURNO, todo lo que tiene fondo --p-text (blanco ahí) lleva texto --p-inv (y sus hijos) ── */
html[data-theme="dark"] #autoLoadCard .al-step-2 .al-n, html[data-theme="dark"] #entryReviews .rv-avatar, html[data-theme="dark"] .al-manual button, html[data-theme="dark"] .al-n, html[data-theme="dark"] .at-help, html[data-theme="dark"] .bs-vip-bar i, html[data-theme="dark"] .casino-plat-tab.active, html[data-theme="dark"] .cl-plat.on, html[data-theme="dark"] .cl-step > b, html[data-theme="dark"] .dash-top .dash-roulette-avatar, html[data-theme="dark"] .dash-top .dash-user-avatar, html[data-theme="dark"] .dash-top .refund-tier, html[data-theme="dark"] .deposit-btn, html[data-theme="dark"] .ev-tab.active, html[data-theme="dark"] .ev-tab.plat-ganamos.active, html[data-theme="dark"] .hiw-step b.n, html[data-theme="dark"] .ig-bar, html[data-theme="dark"] .plat-btn, html[data-theme="dark"] .plat-enter, html[data-theme="dark"] .plat-fix.on, html[data-theme="dark"] .plat-play-btn.is-pref .plat-check, html[data-theme="dark"] .profile-modal .pf-capture, html[data-theme="dark"] .rl-link, html[data-theme="dark"] .rv-avatar, html[data-theme="dark"] .toast, html[data-theme="dark"] .vc-plat.on, html[data-theme="dark"] .withdraw-btn { color: var(--p-inv) !important; }
html[data-theme="dark"] #autoLoadCard .al-step-2 .al-n *, html[data-theme="dark"] #entryReviews .rv-avatar *, html[data-theme="dark"] .al-manual button *, html[data-theme="dark"] .al-n *, html[data-theme="dark"] .at-help *, html[data-theme="dark"] .bs-vip-bar i *, html[data-theme="dark"] .casino-plat-tab.active *, html[data-theme="dark"] .cl-plat.on *, html[data-theme="dark"] .cl-step > b *, html[data-theme="dark"] .dash-top .dash-roulette-avatar *, html[data-theme="dark"] .dash-top .dash-user-avatar *, html[data-theme="dark"] .dash-top .refund-tier *, html[data-theme="dark"] .deposit-btn *, html[data-theme="dark"] .ev-tab.active *, html[data-theme="dark"] .ev-tab.plat-ganamos.active *, html[data-theme="dark"] .hiw-step b.n *, html[data-theme="dark"] .ig-bar *, html[data-theme="dark"] .plat-btn *, html[data-theme="dark"] .plat-enter *, html[data-theme="dark"] .plat-fix.on *, html[data-theme="dark"] .plat-play-btn.is-pref .plat-check *, html[data-theme="dark"] .profile-modal .pf-capture *, html[data-theme="dark"] .rl-link *, html[data-theme="dark"] .rv-avatar *, html[data-theme="dark"] .toast *, html[data-theme="dark"] .vc-plat.on *, html[data-theme="dark"] .withdraw-btn * { color: var(--p-inv) !important; }
html[data-theme="dark"] .ev-tab.active .ev-reco, html[data-theme="dark"] .ev-tab.active .ev-reco * { color: var(--p-red) !important; }
/* estilos inline blancos del HTML viejo → tarjeta en nocturno */
html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: #fff"], html[data-theme="dark"] [style*="background:#ffffff"], html[data-theme="dark"] [style*="background:white"], html[data-theme="dark"] [style*="background:#f0f2f5"], html[data-theme="dark"] [style*="background:#f1f1f1"], html[data-theme="dark"] [style*="background:#f8f9fa"] { background: var(--p-card) !important; }
html[data-theme="dark"] [style*="color:#111"], html[data-theme="dark"] [style*="color: #111"], html[data-theme="dark"] [style*="color:#000"], html[data-theme="dark"] [style*="color:#222"], html[data-theme="dark"] [style*="color:#333"], html[data-theme="dark"] [style*="color:#444"] { color: var(--p-text) !important; }
html[data-theme="dark"] .modal-content, html[data-theme="dark"] .refund-simple .modal-content { background: var(--p-card) !important; color: var(--p-text) !important; }
/* ── #399: Perfil — interruptor de modo nocturno ARRIBA de todo ── */
.profile-modal .pf-theme-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--p-surface); border-radius: 14px; padding: 9px 12px; margin: 0 0 10px; }
.profile-modal .pf-theme-k { display: flex; flex-direction: column; font: 600 11px var(--p-font); color: var(--p-muted); }
.profile-modal .pf-theme-k b { font: 800 13px var(--p-font); color: var(--p-text); }
.profile-modal .pf-theme-btn { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 7px 14px; background: var(--p-text); color: var(--p-inv); font: 800 12px var(--p-font); cursor: pointer; }
html[data-theme="dark"] .profile-modal .pf-theme-btn { background: var(--p-red); color: #fff; }
/* ── #399: Perfil — usuario / contraseña / página en UNA fila cada uno, letra más chica; botones apilados (Copiar arriba, Ocultar abajo) ── */
.profile-modal .pf-main-big .pf-row { gap: 6px !important; padding: 6px 0 !important; }
.profile-modal .pf-main-big .pf-k { min-width: 74px !important; font-size: 9.5px !important; letter-spacing: .3px !important; }
.profile-modal .pf-main-big .pf-v { font-size: 14px !important; font-weight: 700 !important; letter-spacing: .2px; }
.profile-modal .pf-main-big .pf-link { font-size: 11px !important; font-weight: 700 !important; }
.profile-modal .pf-btns { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; align-items: stretch; }
.profile-modal .pf-btns .pf-copy, .profile-modal .pf-main-big .pf-copy { font-size: 10.5px !important; padding: 3px 9px !important; text-align: center; }
/* ── #400: títulos de "Comprobante aquí" / "Retirar premio" en minúscula (sin mayúsculas forzadas) y en UNA fila ── */
.home-actions-row .lr-text { min-width: 0; }
.home-actions-row .lr-text b, .load-row-btn .lr-text b, .withdraw-row-btn .lr-text b { text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px !important; }
.home-actions-row .lr-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#autoLoadCard .al-step-3 .al-step-t { color: var(--p-text) !important; }
/* ── #401 (owner): una vez que el cliente habló con Soporte, la burbuja de presentación se va del todo ── */
body.sp-sent .sp-intro, body.sp-sent #supportIntro { display: none !important; } /* #612: en home-mini se vuelve a mostrar arriba (ver abajo) */
/* ── #402 (owner): con la barra fija "PENDIENTE · Instalá la app" (body.ig-pending) el contenido deja lugar abajo para que no
   tape "Comprobante aquí" / "Retirar premio" ── */
body.ig-pending #homeFull, body.ig-pending #easyView, body.ig-pending #entryView, body.ig-pending .chat-screen > .home-actions-row:last-child { padding-bottom: calc(84px + var(--sab, 0px)) !important; }
body.ig-pending .home-actions-row { scroll-margin-bottom: 90px; }
/* ── #403 (owner): "Telegram" e "Historias" se cortaban en la barra → etiquetas un poco más chicas y sin recorte ── */
.header .tn-btn:not(.tn-home) { overflow: visible !important; min-width: 0; }
.header .tn-btn:not(.tn-home) .tn-lbl { font-size: 7.5px !important; letter-spacing: .2px !important; white-space: nowrap; overflow: visible; }
.header .tn-telegram .tn-lbl, .header .tn-stories .tn-lbl, .header .tn-btn:not(.tn-home).tn-telegram .tn-lbl, .header .tn-btn:not(.tn-home).tn-stories .tn-lbl { font-size: 6.8px !important; letter-spacing: 0 !important; }
/* ── #404 (owner): Perfil más COMPACTO ("achicá un poco todo así queda más centralizado") ── */
.pf-compact .modal-content { padding: 14px 14px 12px !important; }
.pf-compact .modal-header { margin-bottom: 8px !important; }
.pf-compact .modal-header h2 { font-size: 18px !important; }
.pf-compact .modal-header p { font-size: 11.5px !important; margin: 2px 0 0 !important; }
.pf-compact .pf-actions { gap: 5px !important; margin: 0 0 8px !important; }
.pf-compact .pf-actions-top { margin: 0 0 8px !important; }
.pf-compact .pf-act { padding: 8px 11px !important; min-height: 0 !important; font-size: 12.5px !important; border-radius: 12px !important; gap: 8px !important; }
.pf-compact .pf-act small { font-size: 10.5px !important; }
.pf-compact .pf-act .pf-ico-btn { width: 30px !important; height: 30px !important; font-size: 15px !important; }
.pf-compact .pf-theme-row { padding: 7px 11px; margin: 0 0 6px; border-radius: 12px; }
.pf-compact .pf-theme-k b { font-size: 12.5px; }
.pf-compact .pf-theme-btn { padding: 6px 12px; font-size: 11.5px; }
.pf-compact .pf-userbox { padding: 9px 11px !important; margin: 0 0 8px !important; gap: 10px !important; border-radius: 14px !important; }
.pf-compact .pf-avatar { width: 54px !important; height: 54px !important; }
.pf-compact .pf-username { font-size: 16px !important; }
.pf-compact .pf-userlvl { font-size: 11px !important; }
.pf-compact .pf-userhint { font-size: 9.5px !important; }
.pf-compact .pf-main-big { padding: 6px 11px 10px !important; margin: 0 0 8px !important; border-radius: 14px !important; }
.pf-compact .pf-main-big .pf-row { padding: 5px 0 !important; }
.pf-compact .pf-main-big .pf-v { font-size: 13px !important; }
.pf-compact .pf-hint { font-size: 10.5px !important; }
.pf-compact .pf-capture { padding: 9px 12px !important; font-size: 12px !important; margin-top: 6px !important; }
/* ── #406 (owner): "Página de la app" — el link va RECTO debajo del título, en una sola línea (no se parte) ── */
.profile-modal .pf-row.pf-row-link { flex-wrap: wrap !important; row-gap: 3px !important; }
.profile-modal .pf-row.pf-row-link .pf-k { order: 1; min-width: 0 !important; flex: 1 1 auto; }
.profile-modal .pf-row.pf-row-link .pf-copy { order: 2; margin-left: auto; }
.profile-modal .pf-row.pf-row-link .pf-link { order: 3; flex: 1 1 100% !important; width: 100%; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; word-break: normal !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0 !important; }
/* ── #409 (owner): los dos botones a MITAD y MITAD, dentro del ancho de las tarjetas de pasos, sin desbordar ── */
.home-actions-row, body.home-full .home-actions-row { display: flex !important; gap: 8px !important; margin: 6px 12px !important; width: auto !important; max-width: 100%; box-sizing: border-box; }
.home-actions-row > .load-row-btn, .home-actions-row > .withdraw-row-btn, body.home-full .home-actions-row .withdraw-row-btn, body.home-full .load-row-btn { flex: 1 1 0 !important; width: 50% !important; max-width: 50% !important; min-width: 0 !important; margin: 0 !important; overflow: hidden !important; box-sizing: border-box; padding: 9px 12px !important; }
.home-actions-row .lr-text { min-width: 0 !important; overflow: hidden; flex: 1 1 auto; }
.home-actions-row .lr-text b { font-size: 12px !important; }
.home-actions-row .lr-text small { font-size: 9.5px !important; }
.home-actions-row .load-row-btn svg { flex: 0 0 auto; width: 16px; height: 16px; }
/* ── #412: "Cerrar sesión" en Perfil sólo para el usuario de prueba ── */
.profile-modal .pf-logout { display: none !important; }
body.is-tester .profile-modal .pf-logout, body.can-logout .profile-modal .pf-logout { display: flex !important; color: var(--p-red) !important; } /* #437 */
body.is-tester .profile-modal .pf-logout small, body.can-logout .profile-modal .pf-logout small { color: var(--p-muted) !important; }
/* ── #414: pantalla de ingreso = REGISTRO primero; "Ya tengo cuenta" despliega el login ── */
.lg-reg-main { display: flex !important; flex-direction: column; align-items: center; gap: 2px; padding: 13px 14px !important; font-size: 16px !important; margin: 0 !important; }
.lg-reg-main small { font: 600 11px var(--p-font); opacity: .92; text-transform: none; letter-spacing: 0; }
.lg-alt .lg-link { font: 700 12px var(--p-font); color: var(--p-text); background: var(--p-surface); border: 0; border-radius: 999px; padding: 8px 12px; cursor: pointer; }
/* ── #414: ticker sobrio ── */
.lg-ticker-t { display: flex !important; align-items: baseline; gap: 6px; transition: opacity .25s; }
.lg-tk-n { font: 800 12px var(--p-font); color: var(--p-text); letter-spacing: .3px; }
.lg-tk-v { font: 500 11px var(--p-font); color: var(--p-muted); }
.lg-tk-a { font: 800 12.5px var(--p-font); color: var(--p-green); }
.lg-tk-k { font: 600 10.5px var(--p-font); color: var(--p-muted); background: var(--p-card); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
/* ── #414: SOPORTE PARA VISITANTES (burbuja + panel) ── */
.gs-av { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: block; background: var(--p-red-soft); }
.gs-av svg { width: 100%; height: 100%; display: block; }
.gs-bubble { position: fixed; right: 14px; bottom: calc(14px + var(--sab, 0px)); z-index: 9500; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--p-border); background: var(--p-card); color: var(--p-text); border-radius: 999px; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); cursor: pointer; font-family: var(--p-font); }
.gs-bubble.hide, html.has-session .gs-bubble { display: none !important; }
.gs-bubble-t { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.gs-bubble-t b { font: 800 13.5px var(--p-font); } .gs-bubble-t small { font: 600 10.5px var(--p-font); color: var(--p-muted); }
.gs-panel { position: fixed; right: 12px; bottom: calc(12px + var(--sab, 0px)); left: 12px; margin-left: auto; width: min(380px, calc(100% - 24px)); max-height: min(78vh, 620px); z-index: 9600; display: none; flex-direction: column; background: var(--p-card); border: 1px solid var(--p-border); border-radius: 22px; box-shadow: 0 14px 44px rgba(0, 0, 0, .24); overflow: hidden; font-family: var(--p-font); }
.gs-panel.open { display: flex; }
.gs-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px; border-bottom: 1px solid var(--p-border); }
.gs-head-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.gs-head-t b { font: 800 14.5px var(--p-font); color: var(--p-text); } .gs-head-t small { font: 600 11px var(--p-font); color: var(--p-muted); display: flex; align-items: center; gap: 4px; }
.gs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--p-green); display: inline-block; }
.gs-x { border: 0; background: var(--p-surface); color: var(--p-text); width: 32px; height: 32px; border-radius: 50%; font-size: 14px; cursor: pointer; }
.gs-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; overflow-y: auto; }
.gs-form label { display: flex; flex-direction: column; gap: 4px; font: 700 11.5px var(--p-font); color: var(--p-muted); }
.gs-form input, .gs-form textarea { background: var(--p-surface) !important; border: 2px solid transparent !important; border-radius: 12px !important; padding: 10px 12px !important; font: 500 14px var(--p-font) !important; color: var(--p-text) !important; }
.gs-form input:focus, .gs-form textarea:focus { border-color: var(--p-text) !important; outline: none; }
.gs-err { color: var(--p-red); font: 600 11.5px var(--p-font); min-height: 14px; }
.gs-send-main { border: 0; background: var(--p-red); color: #fff; border-radius: 999px; padding: 12px; font: 800 14px var(--p-font); cursor: pointer; }
.gs-chat { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.gs-messages { flex: 1; min-height: 180px; max-height: 46vh; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--p-bg); }
.gs-intro { margin-bottom: 2px; }
.gs-msg { max-width: 86%; padding: 9px 12px; border-radius: 16px; font: 500 13.5px/1.4 var(--p-font); display: flex; flex-direction: column; gap: 2px; }
.gs-theirs { align-self: flex-start; background: var(--p-surface); color: var(--p-text); border-bottom-left-radius: 6px; }
.gs-mine { align-self: flex-end; background: var(--p-red); color: #fff; border-bottom-right-radius: 6px; }
.gs-who { font: 700 10px var(--p-font); color: var(--p-muted); }
.gs-time { font: 500 9.5px var(--p-font); opacity: .75; align-self: flex-end; }
.gs-closed { align-self: center; font: 600 11px var(--p-font); color: var(--p-muted); background: var(--p-surface); border-radius: 999px; padding: 4px 10px; }
.gs-status { font: 600 10.5px var(--p-font); color: var(--p-muted); padding: 4px 12px 0; }
.gs-input { display: flex; gap: 6px; padding: 8px 10px 6px; }
.gs-input input { flex: 1; min-width: 0; background: var(--p-surface) !important; border: 0 !important; border-radius: 999px !important; padding: 10px 14px !important; font: 500 14px var(--p-font) !important; color: var(--p-text) !important; }
.gs-input button { flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--p-red); color: #fff; font-size: 16px; cursor: pointer; }
.gs-reset { border: 0; background: transparent; color: var(--p-muted); font: 600 11px var(--p-font); padding: 4px 12px 10px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; align-self: center; }
/* ── #415 (owner): INGRESO EN UNA SOLA PANTALLA, estilo registro de app (Pinterest): sin deslizar, explicación resumida ── */
.login-screen:has(.lg-app) { min-height: 100dvh; display: flex; align-items: center !important; justify-content: center; padding: 10px 0 !important; }
.login-box.lg-app { gap: 8px !important; padding: 12px 16px 12px !important; max-width: 420px; }
.lg-app .lg-logo { width: 42px; height: 42px; border-radius: 12px; }
.lg-app .lg-brand b { font-size: 16px; } .lg-app .lg-brand small { font-size: 10px; }
.lg-app .lg-form { padding: 12px 12px 8px; border-radius: 20px; }
.lg-app .lg-reg-main { padding: 14px !important; font-size: 17px !important; }
.lg-app .lg-sec, .lg-app #loginReviewsBtn { display: none !important; }   /* "Lo que te damos" y el slider: fuera de la pantalla única */
.lg-app .lg-alt { gap: 6px; } .lg-app .lg-alt .lg-link { padding: 7px 11px; font-size: 11.5px; } .lg-app .lg-alt-note { font-size: 10px; }
.lg-trust { display: flex; align-items: center; gap: 6px; font: 600 12px var(--p-font); color: var(--p-muted); padding: 2px 2px 0; }
.lg-trust b { color: var(--p-text); font-weight: 800; }
.lg-stars { color: #f5a623; letter-spacing: 1px; font-size: 13px; } .lg-stars i { color: var(--p-border); font-style: normal; }
.lg-app .lg-foot { margin: 0; }
@media (max-height: 620px) { .lg-app .lg-alt-note { display: none; } }
/* ── #416: ingreso — tira de HISTORIAS y una reseña corta que rota (sin chips ni ticker) ── */
.lg-stories-t { font: 800 10.5px var(--p-font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--p-muted); }
.lg-stories-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; }
.lg-stories-row::-webkit-scrollbar { display: none; }
.lg-story-ring { width: 54px; height: 54px; border-radius: 50%; padding: 2px; background: linear-gradient(135deg, var(--p-red), #ff8a9a); display: flex; align-items: center; justify-content: center; }
.lg-story-ring img, .lg-story-ring i { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--p-card); display: flex; align-items: center; justify-content: center; font: 800 14px var(--p-font); font-style: normal; color: #fff; background: var(--bg, #06070d); }
.lg-quote-t { font: 500 12.5px/1.4 var(--p-font); color: var(--p-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lg-quote-n { font: 700 10.5px var(--p-font); color: var(--p-muted); }
/* ── #417: ingreso — anillo de HISTORIAS arriba a la derecha (Instagram), reseñas deslizándose, registro como estaba ── */
.lg-ring { position: relative; flex: 0 0 auto; width: 44px; height: 44px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.lg-ring-av { display: flex; width: 44px; height: 44px; border-radius: 50%; padding: 2.5px; background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); }
.lg-ring.has-new .lg-ring-av { animation: lgRingPulse 2.2s ease-in-out infinite; }
.lg-ring-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--p-card); background: var(--p-card); }
.lg-ring-n { position: absolute; right: -3px; bottom: -3px; min-width: 17px; height: 17px; border-radius: 999px; background: var(--p-red); color: #fff; font: 800 10px/17px var(--p-font); text-align: center; padding: 0 4px; border: 2px solid var(--p-card); }
@keyframes lgRingPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(238, 42, 123, .35); } 50% { box-shadow: 0 0 0 6px rgba(238, 42, 123, 0); } }
.lg-app .lg-sec-reviews { display: block !important; margin-top: 2px; }
.lg-app .lg-sec-reviews .ev-reviews { margin: 0 !important; }
.lg-app .lg-alt { margin-top: 2px; }
.lg-app .lg-register { padding: 11px !important; font-size: 13.5px !important; }
.login-screen:has(.lg-app) { align-items: flex-start !important; }          /* centrado por margin:auto de .login-box: no recorta arriba */
.login-box.lg-app { margin: auto !important; }
/* ── #419 (owner): ingreso — todo lo de arriba más chico, reseñas con el comentario visible, Soporte abajo en la punta ── */
.login-box.lg-app { gap: 6px !important; padding: 10px 14px 10px !important; }
.lg-app .lg-head { gap: 8px; }
.lg-app .lg-logo { width: 34px; height: 34px; border-radius: 10px; }
.lg-app .lg-brand b { font-size: 14px; letter-spacing: 1px; } .lg-app .lg-brand small { font-size: 9.5px; }
.lg-app .lg-tg { padding: 6px 10px !important; font-size: 11.5px !important; }
.lg-app .lg-ring, .lg-app .lg-ring-av { width: 36px; height: 36px; } .lg-app .lg-ring-n { min-width: 15px; height: 15px; font-size: 9px; line-height: 15px; }
.lg-app .lg-form { padding: 10px 10px 6px; border-radius: 18px; }
.lg-app .lg-form .input-group { margin-bottom: 7px; }
.lg-app .lg-form .input-group label { font-size: 12px; }
.lg-app .lg-form .input-group input { padding: 10px 12px !important; font-size: 14px !important; }
.lg-app .lg-form .btn-primary { padding: 11px !important; font-size: 14px !important; margin-bottom: 4px !important; }
.lg-app .lg-alt { gap: 5px; } .lg-app .lg-alt-q { font-size: 12px; flex: 1 0 100%; }
.lg-app .lg-register { padding: 9px !important; font-size: 12.5px !important; }
.lg-app .lg-alt .lg-link { padding: 6px 10px; font-size: 11px; }
.lg-app .lg-alt-note { display: none; }
.lg-app .lg-trust { font-size: 11px; padding: 0 2px; }
/* reseñas: tarjeta clara con el COMENTARIO visible (3 líneas) */
.lg-app #loginReviews { background: transparent !important; border: 0 !important; padding: 0 !important; }
.lg-app #loginReviews .rv-head { padding: 0 2px; } .lg-app #loginReviews .rv-g { font: 800 10.5px var(--p-font); letter-spacing: 1px; text-transform: uppercase; color: var(--p-muted); }
.lg-app #loginReviews .rv-card { flex: 0 0 72%; max-width: 260px; background: var(--p-surface) !important; color: var(--p-text) !important; border-radius: 14px !important; padding: 8px 10px !important; display: flex; flex-direction: column; gap: 4px; }
.lg-app #loginReviews .rv-who b { color: var(--p-text) !important; font-size: 12px; }
.lg-app #loginReviews .rv-text { color: var(--p-text) !important; font: 500 12px/1.4 var(--p-font) !important; -webkit-line-clamp: 3; min-height: 2.8em; }
.lg-app .lg-foot { font-size: 9.5px; }
/* Soporte: más abajo, en la punta derecha, compacto (sólo avatar + "Soporte") */
.gs-bubble { right: 10px; bottom: calc(10px + var(--sab, 0px)); padding: 5px 12px 5px 5px; gap: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .16); }
.gs-bubble .gs-av { flex-basis: 36px; width: 36px; height: 36px; }
.gs-bubble-t b { font-size: 12px; } .gs-bubble-t small { display: none; }
@media (max-height: 700px) { .lg-app #loginReviews .rv-text { -webkit-line-clamp: 2; min-height: 0; } }
/* ── #420 (owner): botón de ingreso "Iniciar sesión", más chico y sin el estilo llamativo de publicista ── */
.lg-app .lg-form .btn-primary.lg-login-btn, .lg-app .lg-form .btn-primary.publisher-cta { padding: 9px 12px !important; font-size: 13px !important; font-weight: 700 !important; width: auto !important; min-width: 56%; margin: 2px auto 4px !important; display: block; animation: none !important; box-shadow: none !important; }
/* ── #421: ENTRADA RÁPIDA (registro desactivado desde el panel) ── */
.lg-quick { display: none; flex-direction: column; gap: 7px; }
body.reg-quick .lg-quick { display: flex; }
body.reg-quick:not(.reg-quick-login) #loginForm, body.reg-quick:not(.reg-quick-login) .lg-alt .lg-alt-q, body.reg-quick:not(.reg-quick-login) .lg-alt .lg-register { display: none !important; }
body.reg-quick.reg-quick-login .lg-quick { display: none; }
.lg-quick-l { font: 700 12px var(--p-font); color: var(--p-text); }
.lg-quick input { background: var(--p-card) !important; border: 2px solid transparent !important; border-radius: 14px !important; padding: 12px 14px !important; font: 600 16px var(--p-font) !important; color: var(--p-text) !important; }
.lg-quick input:focus { border-color: var(--p-text) !important; outline: none; }
.lg-quick-btn { padding: 13px !important; font-size: 16px !important; margin: 0 !important; }
.lg-quick-n { font: 500 11px var(--p-font); color: var(--p-muted); text-align: center; }
/* ── #423: ingreso — fila de plataformas (logo + nombre; "Próximamente" las que no tienen API) ── */
.lg-plats-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }
.lg-plat-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--p-surface); border-radius: 999px; padding: 4px 9px 4px 5px; font-family: var(--p-font); }
.lg-plat-pill img, .lg-plat-pill i { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: var(--p-card); font-style: normal; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.lg-plat-pill b { font: 800 11.5px var(--p-font); color: var(--p-text); }
.lg-plat-pill small { font: 700 9px var(--p-font); color: var(--p-muted); background: var(--p-card); border-radius: 999px; padding: 1px 6px; letter-spacing: .2px; }
.lg-plat-pill.soon { opacity: .85; } .lg-plat-pill.soon b { color: var(--p-muted); }
/* ── #424: ingreso — tarjetas de beneficios estilo Pinterest con íconos de línea ── */
/* ── #425 (owner): la ENTRADA CON NOMBRE es la forma de registro → fuera "¿Primera vez acá? / Crear mi cuenta" (registro con SMS) ── */
.lg-app .lg-alt .lg-alt-q, .lg-app .lg-alt .lg-register { display: none !important; }
body.reg-quick .lg-quick-alt { display: inline-block; }
/* ── #426: "¡Te registraste con éxito!" — usuario + clave y Entrar ── */
.lg-quick-done { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 4px 0 2px; }
.lg-done-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--p-green-soft); color: var(--p-green); display: flex; align-items: center; justify-content: center; }
.lg-done-ico svg { width: 24px; height: 24px; }
.lg-done-t { font: 800 17px var(--p-font); color: var(--p-text); }
.lg-done-s { font: 500 11.5px/1.35 var(--p-font); color: var(--p-muted); }
.lg-cred { width: 100%; display: flex; align-items: center; gap: 8px; background: var(--p-card); border-radius: 12px; padding: 8px 10px; text-align: left; }
.lg-cred span { font: 700 10px var(--p-font); letter-spacing: .8px; text-transform: uppercase; color: var(--p-muted); min-width: 56px; }
.lg-cred b { flex: 1; min-width: 0; font: 800 15px ui-monospace, Menlo, Consolas, monospace; color: var(--p-text); letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; }
.lg-done-n { font: 500 10.5px var(--p-font); color: var(--p-muted); }
.lg-quick-done .lg-quick-btn { width: 100%; margin-top: 2px !important; }
/* ── #427 (owner): la pantalla inicial es SOLO "Completá tu nombre para registrarte": sin Olvidé mi contraseña, sin link Soporte,
   sin "Ya tengo cuenta" (los clientes con sesión guardada entran directo). ── */
.lg-app .lg-alt { display: none !important; }
body.reg-quick #loginForm { display: none !important; }
/* ── #428: recuadro "Elegí dónde jugar" debajo de Registrarse · sin línea de estrellas · opiniones a la vista ── */
.lg-play-box { background: var(--p-card); border: 1.5px solid var(--p-border); border-radius: 18px; padding: 10px 12px 11px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 0 rgba(0, 0, 0, .02); }
.lg-play-h { display: flex; align-items: center; gap: 9px; }
.lg-play-h b { display: block; font: 800 13.5px var(--p-font); color: var(--p-text); } .lg-play-h small { font: 500 10.5px var(--p-font); color: var(--p-muted); }
.lg-play-box .lg-plats-row { gap: 6px; }
.lg-play-box .lg-plat-pill { background: var(--p-surface); border: 1px solid var(--p-border); padding: 5px 10px 5px 5px; }
.lg-play-box .lg-plat-pill img, .lg-play-box .lg-plat-pill i { width: 22px; height: 22px; }
.lg-play-box .lg-plat-pill b { font-size: 12px; }
.lg-app .lg-trust { display: none !important; }
.lg-app .lg-sec-reviews { margin-top: 2px; }
.lg-app #loginReviews .rv-head .rv-g { font-size: 11px; }
.lg-app #loginReviews .rv-card { flex: 0 0 68%; max-width: 240px; }
/* ── #429 (owner): todo más chico para que las OPINIONES entren en la pantalla principal ── */
.login-box.lg-app { gap: 5px !important; padding: 8px 12px 8px !important; }
.lg-app .lg-logo { width: 30px; height: 30px; } .lg-app .lg-brand b { font-size: 13px; } .lg-app .lg-brand small { font-size: 9px; }
.lg-app .lg-ring, .lg-app .lg-ring-av { width: 32px; height: 32px; } .lg-app .lg-tg { padding: 5px 9px !important; font-size: 11px !important; }
/* beneficios: UNA fila de 3, sin bajadas */
/* registro */
.lg-app .lg-form { padding: 8px 9px 7px; border-radius: 16px; }
.lg-quick { gap: 5px; } .lg-quick-l { font-size: 11.5px; }
.lg-quick input { padding: 9px 12px !important; font-size: 14px !important; border-radius: 12px !important; }
.lg-app .lg-quick-btn { padding: 10px !important; font-size: 14.5px !important; }
.lg-quick-n { display: none; }
/* elegí dónde jugar: una línea */
.lg-play-box { padding: 7px 9px 8px; gap: 5px; border-radius: 14px; }
.lg-play-h { gap: 7px; }
.lg-play-h b { font-size: 12px; } .lg-play-h small { display: none; }
.lg-play-box .lg-plats-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 5px; } .lg-play-box .lg-plats-row::-webkit-scrollbar { display: none; }
.lg-play-box .lg-plat-pill { flex: 0 0 auto; padding: 3px 8px 3px 4px; }
.lg-play-box .lg-plat-pill img, .lg-play-box .lg-plat-pill i { width: 18px; height: 18px; } .lg-play-box .lg-plat-pill b { font-size: 11px; } .lg-play-box .lg-plat-pill small { font-size: 8.5px; padding: 1px 5px; }
/* opiniones: compactas */
.lg-app #loginReviews .rv-head { padding: 0 1px; } .lg-app #loginReviews .rv-g { font-size: 10px; }
.lg-app #loginReviews .rv-card { flex: 0 0 62%; max-width: 220px; padding: 6px 9px !important; gap: 3px; }
.lg-app #loginReviews .rv-text { -webkit-line-clamp: 2; min-height: 0; font-size: 11.5px !important; }
.lg-app #loginReviews .rv-who b { font-size: 11px; }
.lg-app .lg-foot { font-size: 9px; }
/* ── #430 (owner): el inicio ocupa EXACTAMENTE una pantalla de teléfono (sin scroll); las opiniones toman el alto que sobra.
   Sin burbuja de Soporte en el inicio. ── */
.login-screen:has(.lg-app) { height: 100dvh; min-height: 0 !important; overflow: hidden !important; padding: 0 !important; align-items: stretch !important; }
.login-box.lg-app { height: 100dvh; max-height: 100dvh; margin: 0 auto !important; display: flex !important; flex-direction: column; gap: 4px !important; overflow: hidden; padding: calc(6px + env(safe-area-inset-top, 0px)) 12px calc(6px + var(--sab, 0px)) !important; box-sizing: border-box; border-radius: 0 !important; }
.lg-app > * { flex: 0 0 auto; }
.lg-quick input { padding: 8px 12px !important; font-size: 14px !important; } .lg-app .lg-quick-btn { padding: 9px !important; font-size: 14px !important; }
.lg-play-box { padding: 6px 9px 7px; }
.lg-app .lg-sec-reviews { flex: 1 1 auto !important; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.lg-app #loginReviews { flex: 1 1 auto; min-height: 0; display: flex !important; flex-direction: column; gap: 3px; }
.lg-app #loginReviews .rv-row { flex: 1 1 auto; min-height: 0; display: flex; }
.lg-app #loginReviews .rv-track { flex: 1 1 auto; min-height: 0; align-items: stretch; padding-bottom: 2px; }
.lg-app #loginReviews .rv-card { height: auto; max-height: 100%; overflow: hidden; }
.lg-app #loginReviews .rv-text { -webkit-line-clamp: 3; }
.lg-app .lg-foot { display: none !important; }
.gs-bubble { display: none !important; }   /* #430: sin Soporte en el inicio (la columna Visitantes del panel sigue para los hilos existentes) */
@media (max-height: 560px) { .lg-app .lg-sec-reviews { display: none !important; } }
/* ── #431 (owner): más aire entre bloques (la sección de opiniones absorbe la diferencia; sigue en una pantalla) ── */
.login-box.lg-app { gap: 10px !important; }
.lg-quick { gap: 7px; } .lg-play-box { gap: 7px; }
.lg-app #loginReviews { gap: 5px; }
@media (max-height: 700px) { .login-box.lg-app { gap: 7px !important; } }
/* ── #432 (owner): beneficios con el texto completo, en TRES filas finas (ícono + texto) ── */
/* ── #433: "CARGAS Y PAGOS LAS 24 HS SIN LÍMITES" bajo el título ── */
/* ── #434: fila prioritaria "Carga automática y atención personalizada" ── */
/* ── #436 (owner): la parte superior baja un poco (misma separación arriba que abajo) ── */
.login-box.lg-app { padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important; padding-bottom: calc(12px + var(--sab, 0px)) !important; }
.lg-app .lg-head { margin-top: 2px; }
/* ── #438/#439 (owner): Info → el título recuadrado en su propia línea (separa "Girox"); sólo las plataformas en negrita ── */
.info-msg #infoCardTwoPlats > b:first-child { display: inline-flex !important; margin-bottom: 8px !important; }
.info-msg #infoCardTwoPlatsDesc { display: block; font-weight: 500 !important; color: var(--p-text-2) !important; }
.info-msg #infoCardTwoPlatsDesc b { font-weight: 800 !important; color: var(--p-text) !important; }
/* ── #440 (owner): íconos de LÍNEA (estilo Pinterest) en Info y en las acciones de Perfil, en vez de emojis ── */
.im-ico { display: inline-flex; width: 18px; height: 18px; color: var(--p-red); margin-right: 6px; flex: 0 0 auto; }
.im-ico svg { width: 18px; height: 18px; }
.pi { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; background: var(--p-card); color: var(--p-red); flex: 0 0 auto; margin-right: 2px; }
.pi svg { width: 17px; height: 17px; }
.pf-compact .pf-act .pi { width: 28px; height: 28px; }
.pf-logout .pi { color: var(--p-red); }
.pf-theme-k b { display: inline-flex; align-items: center; gap: 6px; }
.pi.pi-sm { width: 22px; height: 22px; border-radius: 7px; background: var(--p-card); margin: 0; }
.pi.pi-sm svg { width: 13px; height: 13px; }
html[data-theme="dark"] .pi, html[data-theme="dark"] .pi.pi-sm { background: var(--p-surface-2); }
/* ── #441 (owner): INICIO (post-login) con íconos de línea en vez de emojis: entrada, menú fácil, selector de menú, Instalar app ── */
.li { display: inline-flex; width: 15px; height: 15px; vertical-align: -2px; margin-right: 5px; color: var(--p-red); flex: 0 0 auto; }
.li svg { width: 100%; height: 100%; }
.li-w, .ev-cta .li { color: #fff; }
.ez-ico, .ez-main-ico, .mc-ico { display: inline-flex !important; align-items: center; justify-content: center; }
.ez-btn .ez-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--p-card); color: var(--p-red); }
.ez-btn .ez-ico svg { width: 22px; height: 22px; }
.ez-main .ez-main-ico { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .18); color: #fff; }
.ez-main .ez-main-ico svg { width: 24px; height: 24px; }
.ez-chat .ez-ico { width: 36px; height: 36px; border-radius: 11px; background: var(--p-card); color: var(--p-red); }
.ez-chat .ez-ico svg { width: 20px; height: 20px; }
.ez-switch .li { color: var(--p-text); }
.mc-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--p-surface); color: var(--p-red); }
.mc-ico svg { width: 22px; height: 22px; }
.bs-install .li { color: var(--p-red); }
html[data-theme="dark"] .ez-btn .ez-ico, html[data-theme="dark"] .ez-chat .ez-ico, html[data-theme="dark"] .mc-ico { background: var(--p-surface-2); }
/* ── #442: alerta "banco con fallas" en el modal de retiro ── */
.wd-bank-alert { background: var(--p-amber-soft); color: var(--p-amber); border: 1px solid var(--p-amber-line); border-radius: 14px; padding: 10px 12px; font: 600 12.5px/1.4 var(--p-font); margin: 0 0 10px; }
/* ── #445 (owner): íconos con más "vivencia": trazo 2.4, relleno suave del mismo color (duotono) y caja rojo claro ── */
.li svg, .im-ico svg, .pi svg, .ez-ico svg, .ez-main-ico svg, .mc-ico svg, .lg-done-ico svg { stroke-width: 2.4; }
.li svg path, .li svg circle, .li svg rect, .im-ico svg path, .im-ico svg circle, .im-ico svg rect, .pi svg path, .pi svg circle, .pi svg rect, .ez-ico svg path, .ez-ico svg circle, .ez-ico svg rect, .mc-ico svg path, .mc-ico svg circle, .mc-ico svg rect { fill: currentColor; fill-opacity: .14; }
.ez-main-ico svg path { fill: #fff; fill-opacity: .22; }
.pi, .ez-btn .ez-ico, .ez-chat .ez-ico, .mc-ico { background: var(--p-red-soft) !important; color: var(--p-red); box-shadow: inset 0 0 0 1px rgba(230, 0, 35, .10); }
.im-ico { width: 20px; height: 20px; } .im-ico svg { width: 20px; height: 20px; }
.li { width: 16px; height: 16px; }
.pi svg { width: 18px; height: 18px; }
.ez-btn .ez-ico svg { width: 24px; height: 24px; } .mc-ico svg { width: 24px; height: 24px; }
.ez-switch .li svg path, .ez-switch .li svg circle { fill-opacity: .1; }
html[data-theme="dark"] .lg-fi, html[data-theme="dark"] .pi, html[data-theme="dark"] .ez-btn .ez-ico, html[data-theme="dark"] .ez-chat .ez-ico, html[data-theme="dark"] .mc-ico { background: #3a1218 !important; box-shadow: none; }
/* ── #446 (owner): selector de reembolsos — los tres botones rojos con letra blanca ── */
#unifiedRefundModal .ur-btn { background: var(--p-red) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; font-weight: 800 !important; display: flex !important; align-items: center; justify-content: center; gap: 6px; }
#unifiedRefundModal .ur-btn * { color: #fff !important; }
#unifiedRefundModal .ur-btn .li svg path, #unifiedRefundModal .ur-btn .li svg rect { fill: #fff; fill-opacity: .18; }
#unifiedRefundModal .ur-btn:hover { background: var(--p-red-dark) !important; }
/* ── #448: Menú fácil — avatar + nombre desplegable ── */
.ez-hello-btn { border: 0 !important; background: transparent !important; display: flex !important; align-items: center; gap: 9px; text-align: left; padding: 0 !important; cursor: pointer; min-width: 0; flex: 1 1 auto; font-family: var(--p-font); }
.ez-av { width: 38px; height: 38px; border-radius: 50%; background: var(--p-card); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex: 0 0 auto; box-shadow: 0 0 0 2px var(--p-red-soft); }
.ez-hello-t { display: flex; flex-direction: column; min-width: 0; }
.ez-hello-t span { font: 900 15px var(--p-font); color: var(--p-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ez-hello-t small { font: 600 11px var(--p-font); color: var(--p-muted) !important; }
.ez-chev { color: var(--p-muted); font: 800 9px var(--p-font); letter-spacing: .6px; text-transform: uppercase; border: 1px solid var(--p-border); border-radius: 999px; padding: 2px 7px; margin-left: 2px; } /* #481: "menú" chiquito en vez de la flecha */
.ez-hello-btn[aria-expanded="true"] .ez-chev { background: var(--p-red); color: #fff; border-color: var(--p-red); }
.ez-more { background: var(--p-card); border: 1px solid var(--p-border); border-radius: 14px; padding: 8px 12px; margin: -2px 0 8px; display: flex; flex-direction: column; gap: 6px; }
.ez-more[hidden] { display: none; }
.ez-more-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 12px var(--p-font); color: var(--p-muted); }
.ez-more-row b { font: 800 13px var(--p-font); color: var(--p-text); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ez-more-actions { display: flex; gap: 6px; margin-top: 2px; }
.ez-more-actions button { flex: 1; border: 0; background: var(--p-surface); color: var(--p-text); border-radius: 999px; padding: 8px 10px; font: 800 12px var(--p-font); cursor: pointer; }
/* ── #449 (owner): fuera el "GIROX · LA APP QUE PAGA" de la entrada; recuadro más chico ── */
.ev-hero .ev-hero-k { display: none !important; }
.ev-hero { padding: 7px 12px !important; gap: 0 !important; }
.ev-hero-t { font-size: 12.5px !important; line-height: 1.3 !important; }
/* ── #450 (owner): modal "Tu opinión" con el estilo de la app ── */
.rvm-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 26000; display: flex; align-items: center; justify-content: center; padding: 14px; }
.rvm-card { background: var(--p-card); border: 1px solid var(--p-border); border-radius: 22px; padding: 18px 16px 14px; max-width: 400px; width: 100%; color: var(--p-text); box-sizing: border-box; box-shadow: 0 14px 44px rgba(0, 0, 0, .25); font-family: var(--p-font); }
.rvm-t { margin: 0 0 4px; text-align: center; font: 800 18px var(--p-font); color: var(--p-text) !important; }
.rvm-s { margin: 0 0 12px; text-align: center; font: 500 12.5px/1.4 var(--p-font); color: var(--p-muted); }
.rvm-stars { display: flex; justify-content: center; gap: 6px; margin: 0 0 12px; }
.rvm-star { font-size: 36px; line-height: 1; color: var(--p-border); cursor: pointer; transition: transform .12s, color .12s; }
.rvm-star.on { color: var(--p-red); }
.rvm-star:active { transform: scale(1.15); }
.rvm-ta { width: 100%; box-sizing: border-box; min-height: 84px; resize: vertical; background: var(--p-surface) !important; border: 2px solid transparent !important; border-radius: 14px !important; padding: 10px 12px !important; font: 500 14px var(--p-font) !important; color: var(--p-text) !important; }
.rvm-ta:focus { border-color: var(--p-text) !important; outline: none; }
.rvm-msg { font: 600 12px var(--p-font); text-align: center; min-height: 16px; margin: 8px 0; color: var(--p-muted); }
.rvm-send { width: 100%; border: 0; background: var(--p-red); color: #fff; border-radius: 999px; padding: 13px; font: 800 14.5px var(--p-font); cursor: pointer; }
.rvm-send:disabled { opacity: .6; }
.rvm-close { width: 100%; margin-top: 8px; border: 0; background: var(--p-surface); color: var(--p-text); border-radius: 999px; padding: 10px; font: 700 12.5px var(--p-font); cursor: pointer; }
/* ── #456 (owner): arriba sólo el nombre (sin logo) ── */
/* ── #458 (owner): "Promoción válida hasta diciembre…" NO en el Inicio (antes de abrir); sólo adentro de los modales ── */
.refund-promo { display: none !important; }
.modal .refund-promo, #unifiedRefundModal .refund-promo, #infoModal .refund-promo { display: block !important; }
.modal .refund-promo[hidden], #unifiedRefundModal .refund-promo[hidden], #infoModal .refund-promo[hidden] { display: none !important; }
/* ── #465: condiciones (Referidos / VIP) estilo 1win + detalle de niveles ── */
.cond-wrap { background: var(--p-surface); border-radius: 16px; margin: 0 0 12px; overflow: hidden; }
.cond-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: transparent; padding: 11px 14px; font: 800 13px var(--p-font); color: var(--p-text); cursor: pointer; text-align: left; }
.cond-chev { color: var(--p-muted); font-size: 11px; }
.cond-body { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.cond-sec { background: var(--p-card); border-radius: 12px; padding: 9px 12px; border-left: 4px solid var(--p-red); }
.cond-sec > b { display: block; font: 800 12.5px var(--p-font); color: var(--p-text); margin-bottom: 3px; }
.cond-sec p { margin: 0; font: 500 12.5px/1.5 var(--p-font); color: var(--p-text-2); } .cond-sec p b { color: var(--p-text); }
.cond-sec.cond-black { border-left-color: #111; background: #1a1a1a; } .cond-sec.cond-black > b, .cond-sec.cond-black p, .cond-sec.cond-black p b { color: #fff; }
.cond-note { font: 600 11px/1.45 var(--p-font); color: var(--p-muted); padding: 2px 2px 0; }
#vipLevelsModal .vl-cols { display: grid; grid-template-columns: 1.3fr 1fr .9fr .9fr; gap: 6px; padding: 4px 10px; font: 800 9.5px var(--p-font); letter-spacing: .6px; text-transform: uppercase; color: var(--p-muted); }
#vipLevelsModal .vl-row { display: grid !important; grid-template-columns: 1.3fr 1fr .9fr .9fr; gap: 6px; align-items: center; padding: 8px 10px !important; }
#vipLevelsModal .vl-row .vl-st { display: none; }
#vipLevelsModal .vl-row .vl-name { font: 800 12.5px var(--p-font); } #vipLevelsModal .vl-row .vl-name small { font-weight: 700; color: var(--p-red); }
#vipLevelsModal .vl-th { font: 700 11px var(--p-font); color: var(--p-text-2); white-space: nowrap; }
#vipLevelsModal .vl-gift { font: 700 11px var(--p-font); color: var(--p-green); white-space: nowrap; }
#vipLevelsModal .vl-rake { font: 700 11px var(--p-font); color: var(--p-text); display: flex; flex-direction: column; }
#vipLevelsModal .vl-black { font: 700 9.5px var(--p-font); color: var(--p-muted); white-space: normal; }
#vipLevelsModal .vl-black-note { margin-top: 10px; background: #1a1a1a; color: #fff; border-radius: 12px; padding: 9px 12px; font: 600 12px/1.45 var(--p-font); } #vipLevelsModal .vl-black-note b { color: #fff; }
html[data-theme="dark"] .cond-sec.cond-black, html[data-theme="dark"] #vipLevelsModal .vl-black-note { background: #2a2a2a; }
/* ── #470: selector "Elegí dónde jugar" del Menú fácil ── */
.ep-list { display: flex; flex-direction: column; gap: 8px; }
.ep-item { display: flex; align-items: center; gap: 12px; width: 100%; border: 1px solid var(--p-border); background: var(--p-card); border-radius: 16px; padding: 10px 12px; cursor: pointer; text-align: left; font-family: var(--p-font); color: var(--p-text); }
.ep-item img, .ep-item i { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--p-surface); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 20px; flex: 0 0 auto; }
.ep-item span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ep-item b { font: 800 14px var(--p-font); } .ep-item small { font: 600 11px var(--p-font); color: var(--p-muted); }
.ep-item em { font: 800 16px var(--p-font); color: var(--p-red); font-style: normal; }
.ep-item.soon { opacity: .7; } .ep-item.soon em { font-size: 11px; background: var(--p-surface); border-radius: 999px; padding: 3px 9px; color: var(--p-muted); }
/* ── #472: novedad en Referidos ── */
.ref-news { margin: 8px 0 0; background: var(--p-red-soft); color: var(--p-text); border-radius: 12px; padding: 8px 12px; font: 600 12px/1.4 var(--p-font); text-align: left; }
.ref-news > b:first-child { display: inline-block; background: var(--p-red); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 10px; letter-spacing: .8px; margin-right: 6px; }
/* ── #479 (owner): fondo del saludo con íconos de juego/cargas (dados, fichas, cartas, rayo), sutil y sin tapar el nombre ── */
.ez-top { position: relative; overflow: hidden; }
.ez-top::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09; background-repeat: no-repeat;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e60023' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='4'/><circle cx='8' cy='8' r='1.2' fill='%23e60023'/><circle cx='16' cy='8' r='1.2' fill='%23e60023'/><circle cx='12' cy='12' r='1.2' fill='%23e60023'/><circle cx='8' cy='16' r='1.2' fill='%23e60023'/><circle cx='16' cy='16' r='1.2' fill='%23e60023'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e60023' stroke-width='1.8'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='4.5'/><path d='M12 3v4M12 17v4M3 12h4M17 12h4'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e60023' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='2.5' width='12' height='17' rx='2'/><path d='M11 6.5c-1.2-1.3-3.4-.4-3 1.4.3 1.4 2.2 2.4 3 3.3.8-.9 2.7-1.9 3-3.3.4-1.8-1.8-2.7-3-1.4z' fill='%23e60023' stroke='none'/><path d='M17 6l2.2 1 .3 12.6-9 2.4'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e60023' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2L4.5 13.5H11l-1 8.5 8.5-11.5H12z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e60023' stroke-width='1.8' stroke-linecap='round'><circle cx='12' cy='12' r='8.5'/><path d='M9 8.5h4.5a2 2 0 0 1 0 4H9m0 0h5a2 2 0 0 1 0 4H9M11 6.5v11'/></svg>");
  background-size: 34px 34px, 30px 30px, 30px 30px, 26px 26px, 30px 30px;
  background-position: right 14px top 6px, right 58px bottom 6px, left 14px bottom 4px, right 108px top 10px, left 60px top 6px; }
.ez-top > * { position: relative; z-index: 1; }
html[data-theme="dark"] .ez-top::before { opacity: .14; }
/* ── #480/#481: MENÚ OPCIÓN 2 — #bottomNav = header idéntico al superior, al final de la columna (debajo del chat en Soporte) ── */
#bottomNav.bottom-nav { order: 99; position: sticky; bottom: 0; top: auto; z-index: 60; border-top: 1px solid var(--p-border) !important; border-bottom: 0 !important; padding-top: 4px !important; padding-bottom: max(6px, env(safe-area-inset-bottom, 6px)) !important; justify-content: center; }
#bottomNav .tn-btn { flex: 1 1 0; }
#bottomNav .tn-home.tn-retro { flex: 1.6 1 0; }
/* #482: con la opción 2 NO se oculta nada de lo que hoy se muestra: sólo se mueven los 3 botones de la barra. */
/* ── #485 (owner): el Inicio completo entra entero con la línea "pasar al menú fácil" visible: todo apenas más chico y, si aun así
   no entra, se puede deslizar (antes overflow hidden la escondía). ── */
.entry-view { gap: 5px !important; margin: 4px 10px 0 !important; overflow-y: auto !important; padding-bottom: 6px; }
.ev-hero { padding: 7px 10px !important; }
.ev-hero-t { font-size: 12px !important; line-height: 1.3 !important; }
.ev-hero-new { padding: 5px 10px !important; font-size: 10px !important; }
.ev-svc { padding: 5px 4px !important; }
.ev-svc small { font-size: 9.5px !important; }
.ev-frame-wrap { min-height: 130px !important; }
#entryReviews.ev-reviews { padding: 4px 8px 6px !important; gap: 3px !important; }
.ev-easy-link { padding: 2px 8px !important; }
/* ── #488: cartel BONO DE PRIMERA CARGA ── */
.fd-modal .fd-card { max-width: 360px !important; text-align: center; padding: 22px 20px 16px !important; }
.fd-logo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 6px; box-shadow: 0 6px 18px rgba(230,0,35,.18); }
.fd-brand { font: 900 13px var(--p-font); letter-spacing: 2px; color: var(--p-red); }
.fd-kicker { font: 800 11px var(--p-font); letter-spacing: 1.6px; color: var(--p-muted); margin-top: 10px; }
.fd-big { display: flex; flex-direction: column; align-items: center; margin: 4px 0 10px; }
.fd-big b { font: 900 56px/1 var(--p-font); color: var(--p-red); letter-spacing: -1px; }
.fd-big small { font: 700 13px var(--p-font); color: var(--p-text); margin-top: 4px; }
.fd-app { display: flex; align-items: center; gap: 10px; background: var(--p-red-soft); border-radius: 14px; padding: 10px 12px; text-align: left; font: 600 13px/1.35 var(--p-font); color: var(--p-text); }
.fd-app i { font-style: normal; font-size: 22px; } .fd-app b { color: var(--p-red); font-size: 18px; }
.fd-txt { font: 600 12px/1.45 var(--p-font); color: var(--p-muted); margin: 10px 0 12px; }
.fd-btn { width: 100%; }
.fd-later { border: 0; background: transparent; color: var(--p-muted); font: 700 12px var(--p-font); padding: 10px; cursor: pointer; }
/* ── #489 (owner): Top juegos — tarjetas individuales grandes con "N jugando" ── */
.ev-frame-wrap.games { height: auto !important; min-height: 0 !important; flex: 0 0 auto !important; background: #0d0d1a !important; display: flex; flex-direction: column; }
.ev-frame-wrap.games .ev-slides { position: static !important; inset: auto !important; } /* el carril da la altura (antes era absoluto dentro del recuadro) */
.ev-frame-wrap.games .ev-cta { bottom: 12px; }
.ev-games-h { display: flex; align-items: center; justify-content: space-between; color: #fff; font: 900 15px var(--p-font); padding: 10px 12px 2px; }
.ev-games-h small { font: 700 11px var(--p-font); color: #9aa0b2; display: inline-flex; align-items: center; gap: 6px; }
.ev-games-h i, .ev-game .gp i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.22); display: inline-block; }
.ev-slides-track.games { position: static; flex: 0 0 auto; flex-direction: row; gap: 10px; padding: 8px 10px 56px; scroll-snap-type: x mandatory; overflow-x: auto; }
.ev-game { flex: 0 0 36%; max-width: 160px; /* #494: un poco más chicas */ scroll-snap-align: start; border-radius: 16px; overflow: hidden; background: #161622; display: flex; flex-direction: column; box-shadow: 0 8px 22px rgba(0,0,0,.45); }
/* #491: la foto COMPLETA (contain) en una caja de proporción fija: ninguna tarjeta se corta aunque las fotos tengan alturas distintas */
.ev-game img { width: 100%; aspect-ratio: 300 / 330; height: auto; object-fit: contain; display: block; background: #161622; }
.ev-frame-wrap.games .ev-slides, .ev-frame-wrap.games .ev-slides-track { overflow-y: visible !important; height: auto !important; min-height: 0 !important; max-height: none !important; }
.ev-game .gp { display: flex; align-items: center; gap: 6px; padding: 6px 8px 7px; color: #fff; font: 700 11px var(--p-font); background: #161622; }
.ev-game .gp b { color: #fff; }
@media (min-width: 480px) { .ev-game { flex-basis: 24%; } }
/* #493 (owner): se revirtieron #490 y #492 (negro por defecto, pastilla +X% y íconos emoji): el menú fácil queda como antes. */
/* ── #495: parpadeo del número de "jugando" cuando cambia ── */
@keyframes gpTick { 0% { color: #22c55e; transform: scale(1.25); } 100% { color: #fff; transform: scale(1); } }
.ev-game .gp b { display: inline-block; } .ev-game .gp b.tick { animation: gpTick .6s ease-out; }
/* ── #496 (owner): GANAMOS con fondo VIOLETA en el Inicio y donde aparezca (pestaña, tarjeta del home completo, selector del menú fácil, botones del chat) ── */
:root { --p-purple: #6d28d9; --p-purple-2: #8b5cf6; }
.ev-tab.plat-ganamos, .ev-tab.plat-ganamos.soon, .ev-tab.plat-ganamos.active { background: linear-gradient(135deg, var(--p-purple), var(--p-purple-2)) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(109,40,217,.28) !important; }
.ev-tab.plat-ganamos *, .ev-tab.plat-ganamos.active * { color: #fff !important; }
.ev-tab.plat-ganamos img { background: #fff !important; }
.ev-tab.plat-ganamos .ev-soon, .ev-tab.plat-ganamos .plat-soon-badge { background: rgba(255,255,255,.22) !important; color: #fff !important; }
.plat-play-btn.plat-ganamos, .plat-play-btn.plat-ganamos.is-pref, .plat-play-btn.plat-ganamos.soon { background: linear-gradient(160deg, var(--p-purple), var(--p-purple-2)) !important; border-color: transparent !important; }
.plat-play-btn.plat-ganamos .plat-play-name, .plat-play-btn.plat-ganamos .plat-play-sub { color: #fff !important; }
.ep-item.ep-ganamos, .ep-item.ep-ganamos.soon { background: linear-gradient(135deg, var(--p-purple), var(--p-purple-2)) !important; border-color: transparent !important; color: #fff !important; opacity: 1 !important; }
.ep-item.ep-ganamos b, .ep-item.ep-ganamos small, .ep-item.ep-ganamos em { color: #fff !important; }
.ep-item.ep-ganamos.soon em { background: rgba(255,255,255,.22) !important; }
.plat-btn[data-plat="ganamos"] { background: linear-gradient(135deg, var(--p-purple), var(--p-purple-2)) !important; color: #fff !important; border-color: transparent !important; }
/* ── #497: selector de reembolsos prolijo (tarjetas con título, % como detalle, estado y RECLAMAR directo) ── */
.ur-list { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 8px; }
.ur-card { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 18px; padding: 12px 12px 10px; text-align: left; }
.ur-head { display: flex; align-items: center; gap: 10px; }
.ur-head .li { width: 38px; height: 38px; border-radius: 12px; background: var(--p-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ur-head .li svg { width: 20px; height: 20px; }
.ur-head b { display: block; font: 900 15px var(--p-font); color: var(--p-text); }
.ur-head small { display: block; font: 600 12px var(--p-font); color: var(--p-muted); margin-top: 1px; }
.ur-head small em { font-style: normal; font-weight: 900; color: var(--p-red); }
.ur-state { margin: 8px 0 0; font: 600 12.5px var(--p-font); color: var(--p-muted); }
.ur-card.ok .ur-state { color: var(--p-green); } .ur-card.ok .ur-state b { color: var(--p-green); }
.ur-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.ur-claim { flex: 1 1 auto; padding: 10px 12px !important; font-size: 13px !important; }
.ur-detail { margin-left: auto; border: 0; background: transparent; color: var(--p-text); font: 800 12px var(--p-font); padding: 8px 4px; cursor: pointer; }
/* ── #498 (owner): JUGAYGANA con fondo NEGRO donde aparezca (misma lógica que Ganamos violeta) ── */
.ev-tab.plat-jugaygana, .ev-tab.plat-jugaygana.soon, .ev-tab.plat-jugaygana.active { background: linear-gradient(135deg, #000, #262626) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(0,0,0,.3) !important; }
.ev-tab.plat-jugaygana *, .ev-tab.plat-jugaygana.active * { color: #fff !important; }
.ev-tab.plat-jugaygana img { background: #fff !important; }
.ev-tab.plat-jugaygana .ev-soon, .ev-tab.plat-jugaygana .plat-soon-badge { background: rgba(255,255,255,.2) !important; color: #fff !important; }
.plat-play-btn.plat-jugaygana, .plat-play-btn.plat-jugaygana.is-pref, .plat-play-btn.plat-jugaygana.soon { background: linear-gradient(160deg, #000, #262626) !important; border-color: transparent !important; }
.plat-play-btn.plat-jugaygana .plat-play-name, .plat-play-btn.plat-jugaygana .plat-play-sub { color: #fff !important; }
.ep-item.ep-jugaygana, .ep-item.ep-jugaygana.soon { background: linear-gradient(135deg, #000, #262626) !important; border-color: transparent !important; color: #fff !important; opacity: 1 !important; }
.ep-item.ep-jugaygana b, .ep-item.ep-jugaygana small, .ep-item.ep-jugaygana em { color: #fff !important; }
.ep-item.ep-jugaygana.soon em { background: rgba(255,255,255,.2) !important; }
.plat-btn[data-plat="jugaygana"] { background: linear-gradient(135deg, #000, #262626) !important; color: #fff !important; border-color: transparent !important; }
html[data-theme="dark"] .ev-tab.plat-jugaygana, html[data-theme="dark"] .plat-play-btn.plat-jugaygana, html[data-theme="dark"] .ep-item.ep-jugaygana { border: 1px solid rgba(255,255,255,.22) !important; }
/* ── #504: estrategia — banner de segunda carga y misiones ── */
.ez-btn.ez-missions { grid-column: 1 / -1; align-items: flex-start !important; text-align: left; padding-bottom: 12px !important; }
.ez-btn.ez-missions .ez-ico { color: var(--p-red); }
.ez-mis-bars { display: flex; gap: 6px; width: 100%; margin-top: 8px; }
.ez-mis-bars i { flex: 1; height: 6px; border-radius: 999px; background: var(--p-border); position: relative; overflow: hidden; }
.ez-mis-bars i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: var(--p-red); border-radius: 999px; }
.ez-mis-bars i.ok::after { background: var(--p-green); width: 100%; }
.ms-list { display: flex; flex-direction: column; gap: 10px; }
.ms-item { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 16px; padding: 12px; text-align: left; }
.ms-item.done { border-color: var(--p-green); }
.ms-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .ms-row b { font: 900 14px var(--p-font); color: var(--p-text); }
.ms-prize { font: 900 12px var(--p-font); color: var(--p-red); white-space: nowrap; } .ms-item.done .ms-prize { color: var(--p-green); }
.ms-track { height: 8px; border-radius: 999px; background: var(--p-border); margin: 8px 0 6px; overflow: hidden; } .ms-track i { display: block; height: 100%; background: var(--p-red); border-radius: 999px; transition: width .4s; } .ms-item.done .ms-track i { background: var(--p-green); }
.ms-item small { font: 600 11.5px var(--p-font); color: var(--p-muted); }
.ms-card { cursor: pointer; } .ms-card-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .ms-card-h b { font: 900 15px var(--p-font); color: var(--p-text); } .ms-card-h small { color: var(--p-muted); font-weight: 700; }
#missionsCardList { display: flex; flex-direction: column; gap: 8px; }
/* ── #508: tarjeta de misiones plegable en el home completo (chica, no tapa la carga) ── */
.ms-card { cursor: default; padding: 8px 12px !important; }
.ms-card .ms-card-h { width: 100%; border: 0; background: transparent; display: flex; align-items: center; gap: 8px; padding: 4px 0; margin: 0; cursor: pointer; color: var(--p-text); font-family: var(--p-font); }
.ms-card .ms-card-h b { font: 900 13.5px var(--p-font); } .ms-card .ms-card-h small { margin-left: auto; font: 700 11px var(--p-font); color: var(--p-muted); }
.ms-card .ms-chev { font-style: normal; color: var(--p-muted); transition: transform .2s; } .ms-card .ms-card-h[aria-expanded="true"] .ms-chev { transform: rotate(180deg); }
#missionsCardBody { padding: 6px 0 4px; } #missionsCardList { cursor: pointer; }
.ms-note { display: block; margin-top: 6px; font: 600 11px var(--p-font); color: var(--p-muted); }
/* ── #509 (owner): el menú fácil se encimaba al sumar Misiones (la grilla tenía alto fijo). Ahora cada cosa es un recuadro con su
   alto natural y la pantalla se desliza si hace falta; el saludo es compacto para que entre todo. ── */
.easy-view { overflow-y: auto !important; gap: 8px !important; }
.ez-top { padding: 6px 10px !important; gap: 8px !important; }
.ez-top .ez-av, .ez-top #easyAvatar { width: 30px !important; height: 30px !important; font-size: 15px !important; }
.ez-hello-t span { font-size: 13.5px !important; } .ez-hello-t small { font-size: 10.5px !important; }
.ez-bal small { font-size: 9.5px !important; } .ez-bal b { font-size: 15px !important; }
.ez-main { flex: 0 0 auto !important; min-height: 0 !important; padding: 11px 14px !important; }
.ez-main-txt b { font-size: 16px !important; } .ez-main-txt small { font-size: 11px !important; }
.ez-grid { flex: 0 0 auto !important; grid-auto-rows: auto !important; gap: 8px !important; }
.ez-btn { min-height: 86px !important; padding: 10px 8px !important; }
.ez-btn.ez-missions { min-height: 0 !important; padding: 10px 12px 12px !important; flex-direction: column; align-items: flex-start !important; }
.ez-btn.ez-missions > b { margin-top: 4px; }
.ez-chat, .ez-switch { flex: 0 0 auto !important; }
/* ── #510: Misiones como recuadro normal (media columna), al lado de Reembolso ── */
.ez-btn.ez-missions { grid-column: auto !important; align-items: center !important; text-align: center !important; padding: 10px 8px 12px !important; }
.ez-btn.ez-missions > b { margin-top: 0; }
.ez-mis-bars { margin-top: 6px; }
/* ── #511 (owner): "Pronto" sutil en todos lados (pestañas del Inicio, tarjetas de plataformas, ingreso, selector del menú fácil) ── */
.ev-tab.soon .ev-soon, .ev-tab .ev-soon, .plat-soon-badge, .ep-item.soon em { background: transparent !important; color: var(--p-muted) !important; border: 1px solid var(--p-border) !important; font: 700 8px/1.2 var(--p-font) !important; letter-spacing: .4px !important; text-transform: uppercase !important; padding: 2px 7px !important; border-radius: 999px !important; box-shadow: none !important; opacity: .85; }
.ev-tab.plat-ganamos .ev-soon, .ev-tab.plat-jugaygana .ev-soon, .plat-play-btn.plat-ganamos .plat-soon-badge, .plat-play-btn.plat-jugaygana .plat-soon-badge, .ep-item.ep-ganamos.soon em, .ep-item.ep-jugaygana.soon em { color: rgba(255,255,255,.85) !important; border-color: rgba(255,255,255,.35) !important; }
/* ── #512: MENÚ BÁSICO ── */
.basic-view { display: none; flex-direction: column; gap: 10px; margin: 8px 12px 0; padding-bottom: calc(10px + var(--sab, 0px)); overflow-y: auto; }
body.home-basic .basic-view { display: flex; }
body.home-basic #easyView { display: none !important; }
.bv-top { display: flex; align-items: center; justify-content: space-between; background: var(--p-surface); border-radius: 16px; padding: 10px 14px; font: 800 14px var(--p-font); color: var(--p-text); }
.bv-top b { font-size: 18px; color: var(--p-green); }
.bv-btn { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; border-radius: 22px; padding: 22px 18px; text-align: left; cursor: pointer; font-family: var(--p-font); min-height: 96px; }
.bv-btn .li { width: 48px; height: 48px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.18); flex: 0 0 auto; } .bv-btn .li svg { width: 26px; height: 26px; }
.bv-btn span { flex: 1; display: flex; flex-direction: column; } .bv-btn b { font: 900 22px/1.1 var(--p-font); letter-spacing: .5px; } .bv-btn small { font: 600 12px var(--p-font); opacity: .85; margin-top: 3px; }
.bv-btn em { font-style: normal; font: 900 24px var(--p-font); opacity: .8; }
.bv-load { background: var(--p-red); color: #fff; box-shadow: 0 8px 22px rgba(230,0,35,.28); }
.bv-wd { background: var(--p-green); color: #fff; box-shadow: 0 8px 22px rgba(10,122,62,.25); }
.bv-plats-h { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; } .bv-plats-h b { font: 900 14px var(--p-font); color: var(--p-text); } .bv-plats-h small { color: var(--p-muted); font-weight: 600; }
.bv-plats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bv-chip { border: 2px solid var(--p-border); background: var(--p-card); color: var(--p-text); border-radius: 16px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; font-family: var(--p-font); }
.bv-chip img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #fff; }
.bv-chip b { font: 800 12.5px var(--p-font); } .bv-chip small { font: 700 9.5px var(--p-font); color: var(--p-muted); text-transform: uppercase; letter-spacing: .4px; }
.bv-chip.on { border-color: var(--p-red); box-shadow: 0 0 0 3px rgba(230,0,35,.12); } .bv-chip.on small { color: var(--p-red); }
.bv-chip.soon { opacity: .75; }
.bv-chip.plat-ganamos { background: linear-gradient(135deg, var(--p-purple), var(--p-purple-2)); color: #fff; border-color: transparent; } .bv-chip.plat-ganamos small { color: rgba(255,255,255,.85); }
.bv-chip.plat-jugaygana { background: linear-gradient(135deg, #000, #262626); color: #fff; border-color: transparent; } .bv-chip.plat-jugaygana small { color: rgba(255,255,255,.85); }
.bv-play { border: 1px solid var(--p-border); background: var(--p-card); color: var(--p-text); border-radius: 999px; padding: 12px; font: 800 13px var(--p-font); cursor: pointer; }
.bv-switch { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .bv-switch small { color: var(--p-muted); font-weight: 700; width: 100%; text-align: center; }
.bv-switch button { border: 1px solid var(--p-border); background: transparent; color: var(--p-text); border-radius: 999px; padding: 8px 14px; font: 800 12px var(--p-font); cursor: pointer; }
.mc-opt.mc-basic { border-color: var(--p-red) !important; } .mc-opt.mc-basic b { color: var(--p-red) !important; }
/* ── #514: nivel de misiones ── */
.ms-level { display: flex; flex-direction: column; gap: 3px; background: var(--p-red-soft); border-radius: 14px; padding: 10px 12px; margin-bottom: 4px; text-align: left; }
.ms-level b { font: 900 14px var(--p-font); color: var(--p-red); } .ms-level small { font: 600 11.5px/1.35 var(--p-font); color: var(--p-text); }
/* ── #516: básico — paneles de Cargar / Retirar y selector de otro menú con más lugar ── */
.bv-btn .bv-chev { transition: transform .2s; } .bv-btn[aria-expanded="true"] .bv-chev { transform: rotate(180deg); }
.bv-btn[aria-expanded="true"] { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.bv-panel { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 0 0 20px 20px; margin-top: -8px; padding: 14px 12px 12px; }
.bv-steps { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 8px; } .bv-steps li { font: 600 12.5px/1.45 var(--p-font); color: var(--p-text); }
.bv-cbu { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--p-card); border: 1px solid var(--p-border); border-radius: 12px; padding: 8px 10px; margin-top: 6px; }
.bv-cbu small { display: block; font: 700 9.5px var(--p-font); color: var(--p-muted); text-transform: uppercase; letter-spacing: .4px; } .bv-cbu b { font: 800 13px var(--p-font); color: var(--p-text); word-break: break-all; }
.bv-copy { border: 0; background: var(--p-red); color: #fff; border-radius: 999px; padding: 7px 12px; font: 800 11px var(--p-font); cursor: pointer; flex: 0 0 auto; }
.bv-tit { display: block; margin-top: 5px; color: var(--p-muted); font-weight: 600; }
.bv-action { width: 100%; border: 0; border-radius: 999px; padding: 14px; background: var(--p-red); color: #fff; font: 900 14px var(--p-font); cursor: pointer; box-shadow: 0 6px 16px rgba(230,0,35,.25); }
.bv-action-wd { background: var(--p-green); box-shadow: 0 6px 16px rgba(10,122,62,.22); }
.bv-switch2 { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--p-border); display: flex; flex-direction: column; gap: 8px; }
.bv-switch2-h { font: 800 12px var(--p-font); color: var(--p-muted); text-transform: uppercase; letter-spacing: 1px; text-align: center; }
.bv-sw { width: 100%; text-align: left; border: 1px solid var(--p-border); background: var(--p-card); color: var(--p-text); border-radius: 16px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; font-family: var(--p-font); }
.bv-sw b { font: 900 14px var(--p-font); } .bv-sw small { font: 600 11.5px/1.35 var(--p-font); color: var(--p-muted); }
/* ── #517 (owner): básico más compacto — Cargar/Retirar más chicos y "¿Querés ver más?" más junto, para que entre todo en una pantalla ── */
.basic-view { gap: 8px !important; margin: 6px 12px 0 !important; }
.bv-top { padding: 7px 12px; font-size: 13px; } .bv-top b { font-size: 16px; }
.bv-btn { padding: 13px 14px !important; min-height: 64px !important; border-radius: 18px !important; gap: 12px !important; }
.bv-btn .li { width: 38px !important; height: 38px !important; border-radius: 12px !important; } .bv-btn .li svg { width: 20px !important; height: 20px !important; }
.bv-btn b { font-size: 17px !important; } .bv-btn small { font-size: 11px !important; margin-top: 1px !important; } .bv-btn em { font-size: 18px !important; }
.bv-plats-h { margin-top: 2px; } .bv-plats-h b { font-size: 13px; }
.bv-chip { padding: 8px 6px; gap: 4px; } .bv-chip img { width: 28px; height: 28px; } .bv-chip b { font-size: 12px; }
.bv-play { padding: 10px; font-size: 12.5px; }
.bv-switch2 { margin-top: 8px; padding-top: 8px; gap: 6px; flex-direction: row; flex-wrap: wrap; }
.bv-switch2-h { width: 100%; font-size: 10.5px; }
.bv-sw { flex: 1 1 0; min-width: 0; padding: 9px 10px; border-radius: 14px; gap: 2px; }
.bv-sw b { font-size: 12.5px; } .bv-sw small { font-size: 10.5px; line-height: 1.3; }
/* ── #518: misiones en Info ── */
.im-sec.im-missions { border: 1px solid var(--p-red) !important; }
.im-sec.im-missions > b { color: var(--p-red) !important; }
/* ── #519: el tipo de menú se elige desde INICIO (arriba); los pases de abajo se van ── */
.ez-switch, .ev-easy-link, .bv-switch2 { display: none !important; }
.menu-chooser .mc-sub { font-weight: 600; }
/* ── #520: "Cambiar menú" arriba del Inicio ── */
.change-menu { display: none; align-items: center; gap: 6px; margin: 6px 12px 0; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--p-border); background: var(--p-card); color: var(--p-text); font: 800 12px var(--p-font); cursor: pointer; align-self: flex-start; }
.change-menu .li { width: 16px; height: 16px; display: inline-flex; color: var(--p-red); } .change-menu .li svg { width: 16px; height: 16px; }
.change-menu span { color: var(--p-muted); font-weight: 700; } .change-menu em { font-style: normal; color: var(--p-muted); }
body.home-easy .change-menu, body.home-basic .change-menu, body.home-play .change-menu, body.home-full .change-menu { display: inline-flex; }
body.home-mini .change-menu, body.mc-open .change-menu { display: none !important; }
/* ── #522 (owner): modo nocturno más "Pinterest": menos color, más aire y separación clara entre recuadros ── */
html[data-theme="dark"] { --p-bg: #0e0e0e; --p-card: #1a1a1a; --p-surface: #161616; --p-surface-2: #242424; --p-border: #2a2a2a; --p-red: #f0344a; --p-red-soft: #2a1418; }
html[data-theme="dark"] .easy-view, html[data-theme="dark"] .basic-view { gap: 12px !important; }
html[data-theme="dark"] .ez-top, html[data-theme="dark"] .ez-btn, html[data-theme="dark"] .ez-more, html[data-theme="dark"] .bv-top, html[data-theme="dark"] .bv-panel, html[data-theme="dark"] .home-card, html[data-theme="dark"] .change-menu { border: 1px solid var(--p-border) !important; background: var(--p-card) !important; }
html[data-theme="dark"] .ez-top::before { opacity: .05; }                       /* íconos de fondo casi imperceptibles */
html[data-theme="dark"] .ez-chev { background: transparent; color: var(--p-muted); border-color: var(--p-border); }
html[data-theme="dark"] .ez-hello-btn[aria-expanded="true"] .ez-chev { background: transparent; color: var(--p-text); border-color: var(--p-text); }
html[data-theme="dark"] .ez-main { background: var(--p-red) !important; box-shadow: none !important; }
html[data-theme="dark"] .ez-btn .ez-ico { background: var(--p-surface-2) !important; }
html[data-theme="dark"] .ez-badge { background: var(--p-red) !important; }
html[data-theme="dark"] .ez-more-actions button { background: var(--p-surface-2) !important; border: 1px solid var(--p-border) !important; }
html[data-theme="dark"] .ev-tab, html[data-theme="dark"] .ev-svc, html[data-theme="dark"] .ev-hero, html[data-theme="dark"] #entryReviews.ev-reviews { border: 1px solid var(--p-border) !important; background: var(--p-card) !important; }
html[data-theme="dark"] .bv-load { background: var(--p-red) !important; box-shadow: none !important; } html[data-theme="dark"] .bv-wd { background: #1f7a4a !important; box-shadow: none !important; }
html[data-theme="dark"] .bv-chip, html[data-theme="dark"] .bv-play, html[data-theme="dark"] .bv-sw { background: var(--p-card) !important; border-color: var(--p-border) !important; }
html[data-theme="dark"] .ms-item, html[data-theme="dark"] .ur-card, html[data-theme="dark"] .ep-item { background: var(--p-card) !important; border-color: var(--p-border) !important; }
html[data-theme="dark"] .chat-screen { background: var(--p-bg) !important; }
/* ── #523 (owner): Inicio completo — NOVEDAD en una sola fila sin el titular; las 3 plataformas con logo y nombre en línea;
   "Recomendado" y "Pronto" como recuadros chicos del estilo de la página; Girox legible en nocturno ── */
.ev-hero { padding: 6px 8px !important; }
.ev-hero-k { display: none !important; }
.ev-hero-new { display: block !important; width: 100%; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; font: 800 clamp(9px, 2.8vw, 11px) var(--p-font) !important; letter-spacing: .3px; padding: 7px 10px !important; }
.ev-tab, .ev-tab.soon { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 60px !important; padding: 12px 10px 10px !important; border-radius: 18px !important; border: 1px solid var(--p-border) !important; position: relative; }
.ev-tab img { width: 32px !important; height: 32px !important; border-radius: 50% !important; object-fit: cover !important; }
.ev-tab .ev-name { font: 900 14px var(--p-font); white-space: nowrap; }
.ev-tab .ev-reco, .ev-tab .ev-soon { position: absolute !important; top: -8px !important; right: 10px !important; margin: 0 !important; font: 800 8px/1.2 var(--p-font) !important; letter-spacing: .5px !important; text-transform: uppercase !important; padding: 3px 8px !important; border-radius: 8px !important; box-shadow: none !important; }
.ev-tab .ev-reco { background: var(--p-card) !important; color: var(--p-red) !important; border: 1px solid var(--p-red) !important; opacity: 1 !important; }
.ev-tab .ev-soon { background: var(--p-card) !important; color: var(--p-muted) !important; border: 1px solid var(--p-border) !important; }
.ev-tab.plat-ganamos .ev-soon, .ev-tab.plat-jugaygana .ev-soon { background: rgba(0,0,0,.35) !important; color: #fff !important; border-color: rgba(255,255,255,.35) !important; }
.ev-tab.active { border-color: var(--p-text) !important; }
html[data-theme="dark"] .ev-tab.active, html[data-theme="dark"] .ev-tab.active .ev-name { color: var(--p-text) !important; }
html[data-theme="dark"] .ev-tab.active { background: var(--p-card) !important; border-color: #f2f2f2 !important; }
html[data-theme="dark"] .ev-tab .ev-reco { background: var(--p-card) !important; }
.ev-tab.plat-ganamos .ev-name, .ev-tab.plat-jugaygana .ev-name { color: #fff !important; }
/* ── #524: accesos rápidos del básico + 4 servicios en la fila del Inicio completo ── */
.bv-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 2px; }
.bv-quick button { border: 1px solid var(--p-border); background: var(--p-card); color: var(--p-text); border-radius: 14px; padding: 8px 2px; display: flex; flex-direction: column; align-items: center; gap: 3px; font: 800 9.5px var(--p-font); cursor: pointer; min-width: 0; }
.bv-quick button i { font-style: normal; font-size: 18px; line-height: 1; }
.ev-services { display: flex; gap: 6px; }
.ev-svc { flex: 1 1 0; min-width: 0; padding: 8px 4px !important; }
.ev-svc b { font-size: 11.5px !important; } .ev-svc small { font-size: 9.5px !important; line-height: 1.25 !important; }
.ev-svc.svc-missions b { color: var(--p-text) !important; } .ev-svc.svc-missions small { color: var(--p-muted) !important; }
/* ── #525 (owner): novedad en una sola línea recta, letra un poco más chica ── */
.ev-hero-new { font: 800 clamp(8.5px, 2.5vw, 10px) var(--p-font) !important; letter-spacing: .2px !important; padding: 6px 10px !important; white-space: nowrap !important; text-overflow: clip !important; }
.ev-hero-new b { font-weight: 900; }
/* ── #526 (owner): la fila de servicios del Inicio completo entra bien: tarjetas un poco más altas, ícono dentro del círculo,
   título y detalle legibles, y una flechita que indica que se puede abrir ── */
.ev-services { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ev-svc, .ev-svc.svc-refund, .ev-svc.svc-roulette, .ev-svc.svc-ref, .ev-svc.svc-missions { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 3px !important; padding: 9px 4px 6px !important; min-height: 96px !important; border-radius: 16px !important; min-width: 0; position: relative; }
.ev-svc b { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 5px !important; font: 900 10.5px/1.1 var(--p-font) !important; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ev-svc b .li { width: 32px !important; height: 32px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--p-red-soft) !important; color: var(--p-red) !important; flex: 0 0 auto; margin: 0 !important; }
.ev-svc b .li svg { width: 17px !important; height: 17px !important; display: block; }
.ev-svc small { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 9px/1.2 var(--p-font) !important; text-align: center; max-width: 100%; margin: 0 !important; }
.ev-svc small b, .ev-svc small .rl-min { display: inline !important; font-size: 9px !important; }
.ev-svc::after { content: "▾"; position: absolute; right: 6px; bottom: 3px; font: 800 10px var(--p-font); color: var(--p-muted); }
/* ── #527 (owner): fotos de Top juegos más chicas · fila de servicios un poco más arriba · las 3 plataformas con logo arriba y texto abajo · botón de cargar más arriba ── */
.ev-game { flex: 0 0 30% !important; max-width: 132px !important; }
.ev-game .gp { padding: 5px 7px 6px !important; font-size: 10.5px !important; }
.ev-games-h { padding: 8px 12px 0 !important; font-size: 14px !important; }
.entry-view { gap: 4px !important; }
.ev-hero { margin-bottom: 0 !important; padding: 4px 8px !important; }
.ev-services { margin-top: 0 !important; }
.ev-tab, .ev-tab.soon, .ev-tab.active, .ev-tab.plat-ganamos, .ev-tab.plat-jugaygana { flex-direction: column !important; gap: 5px !important; padding: 12px 8px 10px !important; min-height: 84px !important; }
.ev-tab img { width: 34px !important; height: 34px !important; }
.ev-tab .ev-name { font-size: 13.5px !important; }
.ev-tab .ev-reco { top: -8px !important; right: auto !important; left: 50% !important; transform: translateX(-50%); }
.ev-tab .ev-soon { top: auto !important; bottom: -8px !important; right: auto !important; left: 50% !important; transform: translateX(-50%); }
.ev-frame-wrap.games .ev-cta { bottom: 26px !important; }
.ev-slides-track.games { padding-bottom: 70px !important; }
/* ── #528 (owner): "Ver más" en los accesos del básico · opiniones pegadas al botón de cargar · fueguito resumido junto a "Cambiar menú" ·
   misiones del home completo en una línea · plataformas más chicas y juntas ── */
.bv-quick button small { font: 700 8.5px var(--p-font); color: var(--p-red); margin-top: 1px; }
.ev-frame-wrap.games { margin-bottom: 0 !important; }
.ev-slides-track.games { padding-bottom: 54px !important; }
.ev-frame-wrap.games .ev-cta { bottom: 10px !important; }
#entryReviews.ev-reviews { margin-top: 2px !important; }
.top-row { display: flex; align-items: center; gap: 8px; margin: 6px 12px 0; }
.top-row .change-menu { margin: 0 !important; flex: 0 0 auto; }
.fire-mini { display: none; flex: 1 1 auto; min-width: 0; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid #f59e0b; background: linear-gradient(90deg, rgba(245,158,11,.14), rgba(245,158,11,.04)); color: var(--p-text); font-family: var(--p-font); cursor: pointer; }
body.home-full .fire-mini:not([hidden]) { display: inline-flex; }
.fire-mini .fm-flame { font-size: 18px; line-height: 1; } .fire-mini .fm-txt { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.fire-mini .fm-txt b { font: 900 12px var(--p-font); color: #d97706; } .fire-mini .fm-txt small { font: 600 10px var(--p-font); color: var(--p-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fire-mini .fm-streak { margin-left: auto; font: 900 12px var(--p-font); color: #d97706; background: rgba(245,158,11,.15); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
body.home-full #fireHomeCard { display: none !important; }
.ms-card .ms-card-h.ms-oneline { white-space: nowrap; overflow: hidden; }
.ms-card .ms-card-h.ms-oneline b { flex: 0 0 auto; } .ms-card .ms-card-h.ms-oneline small { margin-left: 6px !important; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ms-card .ms-chev { font: 700 10px var(--p-font) !important; color: var(--p-red) !important; flex: 0 0 auto; transform: none !important; }
.ev-tabs { gap: 6px !important; }
.ev-tab, .ev-tab.soon, .ev-tab.active, .ev-tab.plat-ganamos, .ev-tab.plat-jugaygana { min-height: 70px !important; padding: 10px 6px 8px !important; gap: 4px !important; }
.ev-tab img { width: 28px !important; height: 28px !important; }
.ev-tab .ev-name { font-size: 12.5px !important; }
.plat-play-btn { height: 82px !important; padding: 6px 6px 20px !important; }
/* ── #529 REFERIDOS 2.0 (réplica): card del home, popup y modal. Mantienen su estética violeta/dorada en los dos temas (el modal y el popup se fuerzan a tarjeta oscura: sus textos son claros). ── */
                .dash-ref { background:linear-gradient(135deg,#1a0033,#2d0052); border:1.5px solid #d4af37; border-radius:13px; padding:9px 11px; color:#fff; box-shadow:0 3px 12px rgba(212,175,55,.35); }
                .dash-ref-head { display:flex; align-items:center; gap:8px; }
                .dash-ref-title { font-size:12.5px; font-weight:900; color:#ffd700; letter-spacing:.5px; flex:1; }
                .dash-ref-cta { font-size:9px; font-weight:900; color:#1a0033; background:linear-gradient(135deg,#d4af37,#ffd700); border-radius:999px; padding:4px 8px; border:none; cursor:pointer; white-space:nowrap; }
                .dash-ref-bar { position:relative; height:9px; background:rgba(255,255,255,.12); border-radius:999px; margin:9px 0 6px; overflow:hidden; }
                .dash-ref-fill { height:100%; background:linear-gradient(90deg,#d4af37,#ffd700); border-radius:999px; transition:width .5s ease; }
                .dash-ref-steps { display:flex; justify-content:space-between; gap:4px; }
                .dash-ref-step { flex:1; text-align:center; font-size:9px; color:#bbb; line-height:1.25; }
                .dash-ref-step b { display:block; font-size:16px; line-height:1; }
                .dash-ref-step.on { color:#00ff88; }
                .dash-ref-invite { width:100%; margin-top:8px; background:linear-gradient(135deg,#ffd700,#f7931e); color:#000; border:none; border-radius:10px; padding:9px; font-weight:900; font-size:12px; cursor:pointer; letter-spacing:.4px; }
                /* Popup promocional */
                .ref-promo { background:linear-gradient(180deg,#2d0052 0%,#1a0033 70%,#0a001a 100%); border:2.5px solid #ffd700; border-radius:18px; padding:20px 16px 16px; color:#fff; max-width:420px; width:100%; margin:18px auto; position:relative; text-align:center; box-shadow:0 0 40px rgba(255,215,0,.35); overflow:hidden; }
                .ref-promo-btn { width:100%; background:linear-gradient(135deg,#ffd700,#f7931e); color:#000; border:none; border-radius:12px; padding:14px; font-weight:900; font-size:15px; cursor:pointer; letter-spacing:.6px; box-shadow:0 4px 16px rgba(255,215,0,.45); }
                .ref-promo-link { width:100%; margin-top:8px; background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:12px; padding:11px; font-weight:800; font-size:12.5px; cursor:pointer; }
                .ref-promo-x { position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.55); border:1px solid #ffd700; color:#ffd700; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; }

#referralModal .modal-content, #referralPromoModal .ref-promo { background: #14062b !important; color: #fff !important; border: 1px solid rgba(255,215,0,.35) !important; }
#referralModal .modal-header h2, #referralModal .modal-header p { color: #fff !important; }
#referralModal .ref-news { background: rgba(230,0,35,.18); color: #fff; }
#referralModal .ref-table { width: 100%; border-collapse: collapse; font-size: 11.5px; } #referralModal .ref-table th { color: #aaa; font-weight: 700; text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.12); } #referralModal .ref-table td { padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,.06); color: #ddd; }
.ref-pill { display: inline-block; border-radius: 999px; padding: 2px 7px; font-size: 10px; font-weight: 800; }
.ref-modal-tile { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 3px; } .ref-modal-tile .v { font-size: 18px; font-weight: 900; } .ref-modal-tile .l { font-size: 10.5px; color: #bbb; line-height: 1.3; }
body.home-easy #referralHomeCard, body.home-basic #referralHomeCard { display: none !important; }
/* ── #530 PANTALLA DE REGISTRO (idea de la landing del owner): fondo BLANCO siempre (tokens claros forzados aunque el tema sea nocturno). ── */
#loginScreen { --p-bg: #ffffff; --p-surface: #f3f3f3; --p-surface-2: #e9e9e9; --p-text: #111111; --p-muted: #6f6f6f; --p-border: #e2e2e2; --p-card: #fff; --p-placeholder: #9a9a9a; --p-text-2: #333; --p-red: #e60023; --p-red-soft: #ffe9ec; background: #fff !important; color: #111; }
#loginScreen .login-box.lg { background: #fff; }
.lg-quick-l { text-align: center; font-size: 14px !important; }
.lg-quick input { text-align: center; font-size: 17px !important; }
.lg-quick-btn { background: linear-gradient(135deg, #2ce06e, #0f9a4b) !important; color: #05230f !important; font-weight: 900 !important; letter-spacing: .4px; border: 0 !important; }
.lg-trustrow { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; font: 600 12px var(--p-font); color: var(--p-muted); }
.lg-trustrow span { display: inline-flex; align-items: center; gap: 5px; } .lg-trustrow i { width: 5px; height: 5px; border-radius: 50%; background: #25d366; }
.lg-play-box { background: var(--p-surface); border-radius: 18px; padding: 10px 12px 12px; }
.lg-play-h { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-bottom: 8px; text-align: center; }
.lg-play-h b { font: 800 13px var(--p-font); color: var(--p-text); } .lg-play-h small { font: 500 10.5px var(--p-font); color: var(--p-muted); }
.lg-plats-tiles { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lg-plats-tiles .lg-plat-pill { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: var(--p-card); border: 1px solid var(--p-border); border-radius: 14px; padding: 10px 6px 8px; position: relative; }
.lg-plats-tiles .lg-plat-pill img, .lg-plats-tiles .lg-plat-pill i { width: 40px; height: 40px; border-radius: 12px; font-size: 22px; }
.lg-plats-tiles .lg-plat-pill b { font: 800 11.5px var(--p-font); text-align: center; }
.lg-plats-tiles .lg-plat-pill small { position: absolute; top: 6px; right: 6px; padding: 1px 5px; font-size: 8px; }
.lg-plats-tiles .lg-plat-pill.soon img { filter: grayscale(.4); opacity: .8; }
.lg-sys { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.lg-sy { display: inline-flex; align-items: center; gap: 5px; background: var(--p-surface); border-radius: 999px; padding: 5px 10px 5px 6px; font: 700 11px var(--p-font); color: var(--p-text); }
.lg-sy i { width: 20px; height: 20px; border-radius: 50%; background: var(--p-red-soft); color: var(--p-red); display: inline-flex; align-items: center; justify-content: center; } .lg-sy i svg { width: 12px; height: 12px; }
.lg-sy b { color: var(--p-green); font-weight: 900; }
.lg-pop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 3000; }
.lg-pop.on { display: flex; }
.lg-pop-box { width: 100%; max-width: 340px; background: #fff; border: 1px solid #f3d6a4; border-radius: 20px; padding: 22px 18px; text-align: center; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.lg-pop-box b { font: 900 19px var(--p-font); color: #111; } .lg-pop-box p { margin: 0 0 6px; font: 500 13.5px/1.45 var(--p-font); color: #6f6f6f; }
.lg-pop-later { border: 0; background: none; font: 700 12.5px var(--p-font); color: #6f6f6f; text-decoration: underline; cursor: pointer; padding: 6px; }
.lg-quick-ref { text-align: center; font: 700 11.5px var(--p-font); color: #8a6100; background: #fff7e6; border: 1px solid #f3d6a4; border-radius: 999px; padding: 6px 10px; } .lg-quick-ref b { color: #111; letter-spacing: 1px; }
/* #534: barra de progreso del registro automático */
.lg-quick-loading { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px 10px; background: var(--p-surface); border-radius: 22px; }
.lg-quick-loading b { font: 800 15px var(--p-font); color: var(--p-text); } .lg-quick-loading small { font: 500 11px/1.35 var(--p-font); color: var(--p-muted); }
.lg-bar { width: 100%; max-width: 280px; height: 10px; border-radius: 999px; background: var(--p-card); overflow: hidden; }
.lg-bar i { display: block; height: 100%; width: 35%; border-radius: 999px; background: linear-gradient(135deg, #2ce06e, #0f9a4b); animation: lgBar 1.6s ease-in-out infinite; }
.lg-quick-loading.is-in .lg-bar i { width: 92%; animation: none; transition: width .8s ease; }
@keyframes lgBar { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
/* ── #536 fueguito minimizado, banner recordatorio y REFERIDOS en estilo Pinterest ── */
.fire-mini .fm-txt small { display: none !important; } .fire-mini .fm-txt b { white-space: nowrap; }
.fire-mini .fm-more { font: 700 10.5px var(--p-font); color: var(--p-muted); font-style: normal; white-space: nowrap; }
.dash-ref { background: var(--p-card) !important; border: 1px solid var(--p-border) !important; color: var(--p-text) !important; box-shadow: var(--p-shadow) !important; border-radius: 16px !important; }
.dash-ref-title { color: var(--p-text) !important; } .dash-ref-cta { background: var(--p-red) !important; color: #fff !important; }
.dash-ref-bar { background: var(--p-surface-2) !important; } .dash-ref-fill { background: var(--p-red) !important; }
.dash-ref-step { color: var(--p-muted) !important; } .dash-ref-step.on { color: var(--p-green) !important; }
.dash-ref-invite { background: var(--p-red) !important; color: #fff !important; border-radius: 999px !important; }
#referralModal .modal-content, #referralPromoModal .ref-promo { background: var(--p-card) !important; color: var(--p-text) !important; border: 1px solid var(--p-border) !important; box-shadow: var(--p-shadow) !important; }
#referralModal .modal-header h2, #referralModal .modal-header p { color: var(--p-text) !important; }
#referralModal .ref-hi { color: var(--p-red); } #referralModal .ref-ok { color: var(--p-green); }
#referralModal .ref-news { background: var(--p-red-soft); color: var(--p-text); }
#referralModal .ref-table th { color: var(--p-muted); border-bottom: 1px solid var(--p-border); } #referralModal .ref-table td { color: var(--p-text); border-bottom: 1px solid var(--p-border); }
.ref-modal-tile { background: var(--p-surface) !important; border: 1px solid var(--p-border) !important; } .ref-modal-tile .l { color: var(--p-muted) !important; }
.ref-promo { max-width: 400px !important; width: calc(100% - 24px); margin: 18px auto !important; padding: 26px 18px 18px !important; border-radius: 22px !important; text-align: center; position: relative; }
.ref-promo-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--p-surface); color: var(--p-text); font-size: 16px; cursor: pointer; }
.ref-promo-ico { font-size: 56px; line-height: 1; }
.ref-promo-h { margin: 8px 0 4px; font: 900 22px var(--p-font); color: var(--p-text); }
.ref-promo-p { margin: 0 0 10px; font: 500 13.5px/1.45 var(--p-font); color: var(--p-muted); } .ref-promo-p b { color: var(--p-red); font-size: 18px; }
.ref-promo-extra { font: 700 11.5px/1.4 var(--p-font); color: var(--p-green); margin: 0 0 10px; }
.ref-promo-btn { width: 100%; border: 0; border-radius: 999px; padding: 14px; font: 900 15px var(--p-font); background: var(--p-red); color: #fff; cursor: pointer; box-shadow: none; }
.ref-promo-link { width: 100%; margin-top: 8px; border: 0; border-radius: 999px; padding: 11px; font: 800 12.5px var(--p-font); background: var(--p-surface); color: var(--p-text); cursor: pointer; }
/* ── #538 modo "Iniciar sesión" (Config entryLogin) + acomodo del bloque de confianza/plataformas/servicios fuera del formulario ── */
.lg-trustrow { margin-top: 2px; } .lg-sys { padding: 0 2px; }
.lg-login-h { display: none; margin: 2px 0 8px; text-align: center; font: 900 20px var(--p-font); color: var(--p-text); }
.lg-login-links { display: none; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.lg-login-links .lg-link { font: 700 12px var(--p-font); color: var(--p-text); background: var(--p-card); border: 0; border-radius: 999px; padding: 8px 12px; cursor: pointer; }
body.entry-login .lg-quick, body.entry-login #quickLoading, body.entry-login #quickDone { display: none !important; }
body.entry-login #loginForm { display: block !important; }
body.entry-login .lg-login-h, body.entry-login .lg-login-links { display: flex; }
body.entry-login .lg-login-h { display: block; }
body.entry-login .lg-form { padding-top: 16px; }
/* #540 (owner): en el registro de la app NO va el bono de bienvenida (la gente ya se registra ahí); queda sólo en la landing. */
/* #541 registro desde el inicio: celular + SMS, botón Registrarse */
.lg-phone { display: flex; align-items: center; gap: 6px; background: var(--p-card); border-radius: 14px; padding: 0 0 0 12px; border: 2px solid transparent; }
.lg-phone:focus-within { border-color: var(--p-text); } .lg-phone span { font: 800 15px var(--p-font); color: var(--p-muted); }
.lg-phone input { flex: 1; min-width: 0; background: transparent !important; border: 0 !important; padding: 12px 10px !important; font: 700 16px var(--p-font) !important; color: var(--p-text); text-align: left; outline: none; }
.lg-quick-otp { border: 0; border-radius: 999px; padding: 10px 14px; font: 800 13px var(--p-font); background: var(--p-text); color: var(--p-inv); cursor: pointer; }
.lg-quick-otp:disabled { opacity: .55; cursor: default; }
#quickOtpStep { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } #quickOtpStep input { text-align: center; letter-spacing: 6px; font-size: 20px !important; }
#quickSmsBox { display: flex; flex-direction: column; gap: 7px; margin: 2px 0; }
.lg-login-links .lg-register-btn { flex: 1 0 100%; padding: 13px !important; font-size: 15px !important; }
/* ── #542 pantalla de ingreso COMPACTA (entra en una pantalla) + registro en pantalla interna ── */
.login-box.lg-app { gap: 7px !important; padding: 8px 14px 10px !important; }
.lg-head { gap: 8px; } .lg-logo { width: 38px; height: 38px; border-radius: 11px; } .lg-brand b { font-size: 15px; } .lg-brand small { font-size: 9.5px; }
.lg-ring, .lg-ring-av { width: 38px; height: 38px; }
.lg-form { padding: 10px 12px 8px; border-radius: 18px; }
.lg-form .input-group { margin-bottom: 7px; } .lg-form .input-group label { font-size: 11.5px; margin-bottom: 3px; }
.lg-form .input-group input { padding: 10px 12px !important; font-size: 14px !important; }
.lg-form .btn-primary { padding: 11px !important; font-size: 14px !important; margin-bottom: 4px; }
.lg-login-h { display: block; margin: 0 0 6px; font-size: 16px; text-align: center; }
.lg-login-links { display: flex; margin-top: 2px; gap: 6px; }
.lg-login-links .lg-register-btn { padding: 11px !important; font-size: 14px !important; }
.lg-login-links .lg-link { padding: 7px 10px; font-size: 11.5px; }
body.reg-quick .lg-form:not(.lg-form-reg), body.reg-quick .lg-login-h, body.reg-quick .lg-login-links { display: none !important; } /* #543: el form de la pantalla de registro NO se esconde */
.lg-trustrow { gap: 8px; font-size: 10.5px; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; margin-top: 0; }
.lg-play-box { padding: 7px 10px 9px; border-radius: 16px; } .lg-play-h { margin-bottom: 6px; } .lg-play-h b { font-size: 12px; } .lg-play-h small { font-size: 9.5px; }
.lg-plats-tiles { gap: 6px; } .lg-plats-tiles .lg-plat-pill { padding: 7px 4px 6px; border-radius: 12px; gap: 4px; }
.lg-plats-tiles .lg-plat-pill img, .lg-plats-tiles .lg-plat-pill i { width: 32px; height: 32px; border-radius: 10px; } .lg-plats-tiles .lg-plat-pill b { font-size: 10.5px; }
.lg-sys { gap: 4px; } .lg-sy { padding: 4px 8px 4px 5px; font-size: 10px; gap: 4px; } .lg-sy i { width: 17px; height: 17px; } .lg-sy i svg { width: 10px; height: 10px; }
.lg-foot { font-size: 9px; margin: 0; }
@media (max-height: 760px) { .lg-app .lg-sec-reviews { display: none !important; } }
@media (max-height: 640px) { .lg-sys .lg-sy:nth-child(n+7) { display: none; } }
.lg-regscreen { position: fixed; inset: 0; z-index: 2600; background: #fff; overflow-y: auto; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px calc(16px + var(--sab, 0px)); display: flex; flex-direction: column; gap: 10px; --p-bg: #fff; --p-surface: #f3f3f3; --p-card: #fff; --p-text: #111; --p-muted: #6f6f6f; --p-border: #e2e2e2; }
.lg-regscreen[hidden] { display: none !important; }
.lg-reg-head { display: flex; align-items: center; gap: 10px; max-width: 420px; width: 100%; margin: 0 auto; }
.lg-reg-back { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--p-surface); color: var(--p-text); font: 900 24px/1 var(--p-font); cursor: pointer; flex: 0 0 auto; }
.lg-logo-sm { width: 36px; height: 36px; border-radius: 10px; }
.lg-form-reg { max-width: 420px; width: 100%; margin: 0 auto; }
.lg-form-reg .lg-quick-l { font-size: 15px !important; }
.lg-reg-login { align-self: center; background: transparent !important; text-decoration: underline; }
/* #543 limpieza del ingreso */
.lg-regscreen .lg-form-reg { display: block !important; }
/* ── #548 pantalla de registro "premium" estilo Pinterest (blanca, tarjeta con sombra, píldoras rojas, pasos) ── */
#quickSmsBox[hidden], #quickOtpStep[hidden], #quickNextBtn[hidden], #quickEntryBtn[hidden], #regSteps[hidden] { display: none !important; }
.lg-regscreen { gap: 12px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.lg-reg-head .lg-brand b { font-size: 19px; letter-spacing: .3px; } .lg-reg-head .lg-brand small { font-size: 10.5px; }
.lg-reg-back { box-shadow: var(--p-shadow); background: #fff; }
.lg-steps { display: flex; gap: 6px; max-width: 420px; width: 100%; margin: 0 auto; }
.lg-steps span { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 800 11px var(--p-font); color: var(--p-placeholder); background: var(--p-surface); border-radius: 999px; padding: 7px 6px; }
.lg-steps span i { width: 18px; height: 18px; border-radius: 50%; background: var(--p-surface-2); color: var(--p-muted); font: 900 10px/18px var(--p-font); text-align: center; font-style: normal; }
.lg-regscreen[data-step="1"] .lg-steps span[data-s="1"], .lg-regscreen[data-step="2"] .lg-steps span[data-s="2"], .lg-regscreen[data-step="3"] .lg-steps span[data-s="3"] { background: var(--p-red); color: #fff; }
.lg-regscreen[data-step="1"] .lg-steps span[data-s="1"] i, .lg-regscreen[data-step="2"] .lg-steps span[data-s="2"] i, .lg-regscreen[data-step="3"] .lg-steps span[data-s="3"] i { background: #fff; color: var(--p-red); }
.lg-regscreen[data-step="2"] .lg-steps span[data-s="1"], .lg-regscreen[data-step="3"] .lg-steps span[data-s="1"], .lg-regscreen[data-step="3"] .lg-steps span[data-s="2"] { color: var(--p-text); }
.lg-regscreen[data-step="2"] .lg-steps span[data-s="1"] i, .lg-regscreen[data-step="3"] .lg-steps span[data-s="1"] i, .lg-regscreen[data-step="3"] .lg-steps span[data-s="2"] i { background: var(--p-green); color: #fff; }
.lg-form-reg { background: #fff !important; border-radius: 24px !important; padding: 18px 16px 16px !important; box-shadow: var(--p-shadow); border: 1px solid var(--p-border); }
.lg-form-reg .lg-quick { gap: 9px; }
.lg-form-reg .lg-quick-l { font-size: 15px !important; font-weight: 900 !important; text-align: center; }
.lg-form-reg .lg-quick input, .lg-form-reg .lg-phone { background: var(--p-surface) !important; border-radius: 16px !important; }
.lg-form-reg .lg-quick input { padding: 14px 14px !important; font-size: 17px !important; font-weight: 700; }
.lg-form-reg .lg-quick input:focus, .lg-form-reg .lg-phone:focus-within { border-color: var(--p-red) !important; box-shadow: 0 0 0 3px rgba(230,0,35,.12); }
.lg-form-reg .lg-phone { padding-left: 14px; } .lg-form-reg .lg-phone span { color: var(--p-text); }
.lg-form-reg .lg-phone input { padding: 13px 12px !important; font-size: 17px !important; }
.lg-form-reg .lg-quick-btn { background: var(--p-red) !important; color: #fff !important; border-radius: 999px !important; padding: 14px !important; font: 900 15px var(--p-font) !important; letter-spacing: .4px; box-shadow: 0 6px 18px rgba(230,0,35,.25); }
.lg-form-reg .lg-quick-btn:disabled { opacity: .7; box-shadow: none; }
.lg-form-reg .lg-quick-otp { border-radius: 999px; padding: 12px 14px; font-size: 13.5px; background: var(--p-text); color: #fff; }
.lg-form-reg #quickSmsBox { gap: 8px; margin: 4px 0 2px; padding-top: 10px; border-top: 1px dashed var(--p-border); }
.lg-form-reg #quickSmsBox .lg-quick-l { font-size: 14px !important; }
.lg-form-reg #quickOtpStep input { letter-spacing: 8px; font-size: 24px !important; font-weight: 900; }
.lg-form-reg #quickOtpStep input::placeholder { letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--p-placeholder); }
.lg-form-reg .lg-quick-n { font-size: 11.5px; }
.lg-form-reg .lg-quick-loading { background: #fff; }
.lg-reg-trust { margin: 0; text-align: center; font: 700 11px var(--p-font); color: var(--p-muted); }
.lg-reg-login { font-size: 12.5px; color: var(--p-text); }
/* #559 botón "Dejar preseleccionado para el ingreso" (al lado de Cambiar menú) · #560 fueguito mini sólo "Racha" */
.top-row { flex-wrap: wrap; }
.menu-pin { display: inline-flex; align-items: center; gap: 5px; flex: 0 1 auto; min-width: 0; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--p-border); background: var(--p-card); color: var(--p-muted); font: 700 11px var(--p-font); cursor: pointer; }
.menu-pin .li { width: 14px; height: 14px; display: inline-flex; color: var(--p-muted); } .menu-pin .li svg { width: 14px; height: 14px; }
.menu-pin span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-pin.on { background: var(--p-green-soft); border-color: var(--p-green-line); color: var(--p-green); } .menu-pin.on .li { color: var(--p-green); }
.fire-mini { flex: 0 0 auto; gap: 6px; padding: 6px 9px; } .fire-mini .fm-txt b { font-size: 11.5px; } .fire-mini .fm-more { display: none; }
/* #561 (owner): con el MENÚ 2 (barra abajo) la hoja "Jugar ahora" y demás hojas inferiores suben por encima de la barra: no se tapa el texto */
body.menu2 .play-now-card { padding-bottom: calc(84px + var(--sab, 0px)); z-index: 9700; }
body.menu2 .play-now-card .pn-sheet { border-radius: 22px 22px 18px 18px; }
body.menu2 #homeFull, body.menu2 #easyView, body.menu2 #basicView, body.menu2 #entryView { padding-bottom: 12px; }
/* ── #563 (owner): fila Cambiar menú · Fijar · Racha en UNA línea; "Elegí dónde jugar" primero; carga acreditada como burbuja
   temporal (no tapa nada); botón negro "lo instalo después" arriba de Cambiar menú ── */
.top-row { flex-wrap: nowrap !important; gap: 6px; }
.menu-pin { flex: 0 0 auto; padding: 7px 9px; } .menu-pin span { overflow: visible; }
.ev-play-first { margin: 6px 12px 0; padding: 8px 10px 9px; border-radius: 16px; background: var(--p-surface); border: 1px solid var(--p-border); }
.ev-play-k { display: block; font: 900 13px var(--p-font); color: var(--p-text); margin-bottom: 6px; }
.ev-play-first .ev-tabs { margin: 0 !important; }
#installGiftBar.ig-bar { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; margin: 8px 12px 0; width: auto; z-index: auto; background: #111 !important; color: #fff !important; border-radius: 14px; box-shadow: var(--p-shadow); }
#installGiftBar .ig-bar-k { background: var(--p-red); color: #fff; } #installGiftBar .ig-bar-t { color: #fff; } #installGiftBar .ig-bar-amt { color: #ffd166; }
.play-now-card { inset: auto 10px auto 10px !important; top: calc(62px + env(safe-area-inset-top, 0px)) !important; bottom: auto !important; background: transparent !important; backdrop-filter: none !important; align-items: flex-start !important; padding: 0 !important; pointer-events: none !important; }
.play-now-card.show .pn-sheet { pointer-events: auto; }
.play-now-card .pn-sheet { border-radius: 18px !important; box-shadow: 0 14px 40px rgba(0,0,0,.28) !important; padding: 12px 14px !important; border: 1px solid var(--p-border) !important; }
body.menu2 .play-now-card { padding-bottom: 0 !important; }
/* #564: cartel de primera carga más chico */
/* #565 (owner): MENÚ 2 — la barra inferior va FIJA y el contenido deja lugar: no tapa nada */
body.menu2 #bottomNav.bottom-nav { position: fixed !important; left: 0; right: 0; bottom: 0; top: auto; order: 99; }
/* (#575: los rellenos por contenedor se reemplazaron por acortar la pantalla entera; ver abajo) */
/* #567 (owner): MENÚ 2 — el relleno va en los contenedores que SCROLLEAN (no en #chatScreen): nada queda debajo de la barra fija */
/* (#575: ídem) */
body.menu2 #bottomNav.bottom-nav { box-shadow: 0 -6px 20px rgba(0,0,0,.08); }
/* #568 (owner): en Carga auto la fila "Comprobante aquí · Retirar premio" va FIJA al tope de abajo, pegada arriba del menú (Inicio) */
/* #571 (owner): la fila sólo tapa SU línea (sin fondo ni sombra), va pegada al menú, y el relleno va en #homePanel (el que scrollea
   en Carga auto): así los 3 pasos de "Cargá acá" se ven completos deslizando, nada queda tapado ni hay huecos blancos. */
body.home-full .home-actions-row { position: fixed; left: 8px; right: 8px; bottom: calc(6px + var(--sab, 0px)); z-index: 58; margin: 0 !important; background: var(--p-card); padding: 5px; border-radius: 18px; box-shadow: 0 4px 18px rgba(0,0,0,.12); border: 1px solid var(--p-border); } /* #572: fondo SOLO en ese recuadro */
body.home-full.menu2 .home-actions-row { bottom: calc(66px + var(--sab, 0px)); }
body.home-full .entry-view, body.home-full #homeFull { padding-bottom: 0 !important; }
body.home-full #homePanel { padding-bottom: calc(78px + var(--sab, 0px)) !important; }
body.home-full.menu2 #homePanel { padding-bottom: calc(78px + var(--sab, 0px)) !important; }
body.home-full .test-mini-row { margin-bottom: 2px; }
/* #569: "Fijar" adentro del selector de menú; la fila de arriba queda Cambiar menú · Racha */
.mc-pin { width: 100%; margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 12px; border-radius: 999px; border: 1px solid var(--p-border); background: var(--p-surface); color: var(--p-text); font: 800 12px var(--p-font); cursor: pointer; }
.mc-pin .li { width: 15px; height: 15px; display: inline-flex; color: var(--p-red); } .mc-pin .li svg { width: 15px; height: 15px; }
.mc-pin.on { background: var(--p-green-soft); border-color: var(--p-green-line); color: var(--p-green); } .mc-pin.on .li { color: var(--p-green); }
.change-menu span { display: none; }
/* #574 (owner): sin barra de desplazamiento visible en los menús (el contenido se desliza igual) */
.basic-view, .easy-view, .entry-view, #homePanel, #homeFull { scrollbar-width: none !important; -ms-overflow-style: none; }
.basic-view::-webkit-scrollbar, .easy-view::-webkit-scrollbar, .entry-view::-webkit-scrollbar, #homePanel::-webkit-scrollbar, #homeFull::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* ── #575 (owner): MENÚ 2 — la barra inferior es fija y la PANTALLA ENTERA termina arriba de ella (altura 100dvh − 76 px). Sin rellenos
   por contenedor: ningún bloque blanco tapa el contenido, en ningún menú. ── */
body.menu2 .chat-screen, body.menu2 #chatScreen { height: calc(100dvh - 60px - var(--sab, 0px)) !important; max-height: calc(100dvh - 60px - var(--sab, 0px)) !important; min-height: 0 !important; overflow: hidden; }
body.menu2 #bottomNav.bottom-nav { height: calc(60px + var(--sab, 0px)); /* #637: más baja (antes 76px) */ padding-bottom: var(--sab, 0px); box-sizing: border-box; background: var(--p-card); }
/* #576 (owner): en el recuadro "Elegí dónde jugar" las etiquetas RECOMENDADO / PRONTO van ADENTRO de cada tile, centradas (se habían corrido) */
.ev-play-first, .ev-play-first .ev-tabs { overflow: visible; }
.ev-play-first .ev-tab, .ev-play-first .ev-tab.soon, .ev-play-first .ev-tab.active { position: relative !important; padding: 18px 6px 20px !important; min-height: 96px !important; }
.ev-play-first .ev-tab .ev-reco { position: absolute !important; top: 5px !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translateX(-50%); white-space: nowrap; }
.ev-play-first .ev-tab .ev-soon { position: absolute !important; bottom: 5px !important; top: auto !important; left: 50% !important; right: auto !important; transform: translateX(-50%); white-space: nowrap; }
/* #578 menú básico: nivel VIP (con progreso) y fueguito, cada uno en una línea debajo del usuario */
/* #579 (owner): en modo nocturno el botón "Pendiente · Instalá la app y cargá tu extra" va en un color llamativo (en negro se perdía) */
html[data-theme="dark"] #installGiftBar.ig-bar { background: linear-gradient(135deg, #ffb300, #ff6f00) !important; color: #111 !important; box-shadow: 0 8px 24px rgba(255,140,0,.35); }
html[data-theme="dark"] #installGiftBar .ig-bar-k { background: #111; color: #ffd166; } html[data-theme="dark"] #installGiftBar .ig-bar-t { color: #111; } html[data-theme="dark"] #installGiftBar .ig-bar-amt { color: #111; }
/* #580: el recomendado del selector es el BÁSICO */
.mc-opt.mc-easy { border-color: transparent !important; } .mc-opt.mc-basic { border-color: var(--p-text) !important; }
/* #581: canje del link de acceso: la pantalla de registro NO se ve; cartel "Entrando a tu cuenta…" */
.access-splash { display: none; }
html.access-pending #loginScreen { display: none !important; }
html.access-pending .access-splash { display: flex; position: fixed; inset: 0; z-index: 4000; background: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.access-splash img { width: 72px; height: 72px; border-radius: 20px; } .access-splash b { font: 900 16px var(--p-font); color: #111; } .access-splash .lg-bar { max-width: 220px; }
/* #584: la fila de accesos del básico queda con 4 (sin Niveles VIP) */
.bv-quick { grid-template-columns: repeat(4, 1fr) !important; }
/* #587 (owner): la foto abarca TODA la pantalla (sin marco) y el texto va abajo de todo */
/* #595 (owner): pantalla limpia al entrar: sin la card "Invitá a tus amigos" en el inicio (Referidos sigue en su botón) */
#referralHomeCard { display: none !important; }
/* #598: panel "Carga rápida" del casino, chico y simple */
.casino-load { padding: 10px 12px 12px !important; width: min(320px, calc(100vw - 24px)) !important; }
.cl-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--p-border); }
.cl-row small { flex: 0 0 48px; font: 800 9.5px var(--p-font); letter-spacing: .8px; text-transform: uppercase; color: var(--p-muted); }
.cl-row b { flex: 1; min-width: 0; font: 700 12px var(--p-font); color: var(--p-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-row .cl-copy { flex: 0 0 auto; border-radius: 999px; padding: 4px 9px; font: 800 10.5px var(--p-font); }
.casino-load .cl-btn { width: 100%; margin-top: 10px; border-radius: 999px !important; padding: 12px !important; font: 900 13px var(--p-font) !important; }
/* #599 (owner): botones prediseñados del soporte, siempre a la vista arriba de la caja de escribir (estilo Stake) */
.sp-quickbar { display: none; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px 10px; background: var(--p-card); border-top: 1px solid var(--p-border); }
.sp-quickbar::-webkit-scrollbar { display: none; }
body.home-mini .sp-quickbar { display: flex; }
.sp-quickbar button { flex: 0 0 auto; border: 1px solid var(--p-border); background: var(--p-surface); color: var(--p-text); border-radius: 999px; padding: 7px 12px; font: 800 12px var(--p-font); cursor: pointer; white-space: nowrap; }
.sp-quickbar button:active { background: var(--p-surface-2); }
body.home-mini .sp-intro .sp-chips { display: none; } /* los botones viven en la barra de abajo */
/* #600 (owner): menú intermedio sin hueco abajo: la grilla de servicios crece y llena la pantalla hasta la barra */
.easy-view { flex: 1 1 auto !important; min-height: 0; }
.easy-view .ez-grid { flex: 1 1 auto; min-height: 0; grid-auto-rows: minmax(104px, 1fr); align-content: stretch; }
.easy-view .ez-btn { height: 100%; min-height: 104px; }
/* ── #602 (owner): SOPORTE DE PROBLEMAS — sin charla abierta se ve SOLO el selector (nombre, "¿Con qué tenés problema?" y 4 botones);
   al elegir, aparece la charla (mensajes + caja + barra de temas). Cerrada desde el panel ⇒ vuelve el selector. ── */
body.home-mini:not(.sp-sent) #chatMessages, body.home-mini:not(.sp-sent) .chat-input-container, body.home-mini:not(.sp-sent) .sp-quickbar { display: none !important; }
body.home-mini:not(.sp-sent) .sp-intro { margin: 12px; padding: 18px 16px !important; }
.sp-ask { font: 900 15px var(--p-font); color: var(--p-text); margin: 10px 0 8px; }
.sp-topics { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-topics button { padding: 12px 10px !important; font: 800 13px var(--p-font) !important; border-radius: 14px !important; background: var(--p-surface) !important; border: 1px solid var(--p-border) !important; text-align: center; }
body.sp-sent .sp-ask { display: none; }
/* #603 (owner): con la charla abierta es SOLO chat a pantalla completa (sin la barra de temas); "Chat cerrado" en el selector */
body.home-mini.sp-sent .sp-quickbar { display: none !important; }
body.home-mini.sp-sent #chatMessages { flex: 1 1 auto; }
.sp-closed { display: inline-block; font: 800 11.5px var(--p-font); color: var(--p-muted); background: var(--p-surface); border-radius: 999px; padding: 5px 10px; margin: 6px 0 2px; }
/* #605 (owner): menú básico cortado abajo: la vista es la que scrollea (ocupa el alto libre) y nada queda recortado */
.basic-view { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; padding-bottom: 14px; }
/* #604: con el chat cerrado se ve el aviso del agente arriba del selector */
body.home-mini:not(.sp-sent) #chatMessages { display: flex !important; flex: 0 0 auto; max-height: 40vh; }
body.home-mini:not(.sp-sent) #chatMessages:empty { display: none !important; }
/* #608 (owner): el aviso de primera carga va debajo de la barra, en los 3 menús (no en Soporte) */
/* #610 (owner): la FRANJA BLANCA que tapaba el final del básico/intermedio: con el regalo de instalar pendiente (`body.ig-pending`)
   el home completo plegado (#homeFull, alto 0) seguía reservando 84 px de padding para una barra que ya no va abajo (desde #563 está
   arriba). Nada plegado reserva lugar. */
body.ig-pending #homeFull, body.ig-pending #easyView, body.ig-pending #entryView, body.ig-pending .chat-screen > .home-actions-row:last-child { padding-bottom: 12px !important; }
body.home-easy #homeFull, body.home-basic #homeFull, body.home-play #homeFull, body.home-mini #homeFull { padding: 0 !important; margin: 0 !important; border: 0 !important; }
/* #612 (owner): con la charla abierta, la PRESENTACIÓN queda ARRIBA del chat, prolija y compacta ("Bienvenido al soporte, mi nombre es
   {nombre}…"); abajo sólo los mensajes y la caja. Sin la pregunta ni los botones de tema. */
body.home-mini.sp-sent #supportIntro { display: flex !important; margin: 8px 10px 0 !important; padding: 11px 12px 10px !important; border: 1px solid var(--p-border); }
body.home-mini.sp-sent #supportIntro .sp-ask, body.home-mini.sp-sent #supportIntro .sp-topics, body.home-mini.sp-sent #supportIntro #spClosed, body.home-mini.sp-sent #supportIntro .sp-sla { display: none !important; }
body.home-mini.sp-sent #supportIntro .sp-msg { font-size: 13px; line-height: 1.4; }
body.home-mini.sp-sent #chatMessages { flex: 1 1 auto !important; min-height: 0; }
/* #613 (owner): chat cerrado = selector + aviso FIJADO "Chat cerrado · fecha" debajo de las opciones (el historial no se ve hasta
   abrir de nuevo; al abrir, vuelve completo con sus separadores de fecha). */
body.home-mini:not(.sp-sent) #chatMessages { display: none !important; }
.sp-closed { display: block; width: 100%; text-align: center; margin: 10px 0 0 !important; padding: 9px 12px !important; border-radius: 12px !important; font: 800 12.5px var(--p-font) !important; color: var(--p-muted); background: var(--p-card); border: 1px dashed var(--p-border); }
.sp-closed[hidden] { display: none !important; }
/* ── #615 (owner): HISTORIAS tipo INSTAGRAM — un solo bloque (las capas #452…#607 se eliminaron). Marco 9:16 centrado (en el
   celular ocupa toda la pantalla; en pantallas anchas queda centrado con fondo negro), la FOTO COMPLETA sin recortes (contain) sobre
   el color de la historia (blanco = se ve de borde a borde), barras de progreso y marca arriba sobre un degradé, y abajo SÓLO el
   botón si la historia tiene link. Sin pie ni sello: el texto va dentro de la imagen y nada lo tapa. ── */
.story-viewer { background: #000 !important; --st-l: max(0px, calc(50% - 100dvh * 9 / 32)); }
.story-viewer .st-media { position: absolute !important; top: 0 !important; bottom: 0 !important; left: var(--st-l) !important; right: var(--st-l) !important; padding: 0 !important; margin: 0 !important; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.story-viewer .st-media img, .story-viewer .st-media video { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; object-position: center !important; border-radius: 0 !important; box-shadow: none !important; }
.story-viewer .st-media .st-blur { display: none !important; }
.story-viewer .st-media .st-textonly { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 60px 26px; font: 900 26px/1.3 var(--p-font); color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.story-viewer::before { content: ""; position: absolute; top: 0; left: var(--st-l); right: var(--st-l); height: 120px; background: linear-gradient(180deg, rgba(0,0,0,.62), transparent); z-index: 3; pointer-events: none; }
.story-viewer .st-bars { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)) !important; left: calc(var(--st-l) + 10px) !important; right: calc(var(--st-l) + 10px) !important; display: flex; gap: 4px !important; z-index: 6; }
.story-viewer .st-bars i { flex: 1 1 0; height: 3px !important; border-radius: 999px !important; background: rgba(255,255,255,.35) !important; overflow: hidden; display: block; }
.story-viewer .st-bars i b { display: block; height: 100%; width: 0; background: #fff !important; border-radius: 999px; }
.story-viewer .st-bars i.done b { width: 100%; }
.story-viewer .st-head { position: absolute !important; top: calc(22px + env(safe-area-inset-top, 0px)) !important; left: calc(var(--st-l) + 12px) !important; right: calc(var(--st-l) + 12px) !important; bottom: auto !important; padding: 0 !important; margin: 0; background: transparent !important; display: flex !important; align-items: center; justify-content: space-between !important; gap: 10px; z-index: 6; }
.story-viewer .st-head .st-logo { display: flex !important; flex: 0 0 auto; }
.story-viewer .st-head .st-logo img { width: 32px !important; height: 32px !important; border-radius: 50% !important; border: 2px solid #fff !important; background: #000; display: block; }
.story-viewer .st-head .st-who { display: flex !important; flex-direction: row; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.story-viewer .st-head .st-brand { font: 900 13.5px var(--p-font); letter-spacing: 1.2px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.story-viewer .st-head .st-brand-sub, .story-viewer .st-head .st-title-hidden { display: none !important; }
.story-viewer .st-head #storyWhen { font: 600 11.5px var(--p-font); color: rgba(255,255,255,.8); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.story-viewer .st-close { width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.35) !important; color: #fff !important; border: 0 !important; font-size: 18px; line-height: 34px; text-align: center; padding: 0; cursor: pointer; backdrop-filter: blur(4px); flex: 0 0 auto; }
.story-viewer .st-tap { position: absolute; inset: 0 !important; z-index: 4; }
.story-viewer .st-foot { position: absolute !important; left: var(--st-l) !important; right: var(--st-l) !important; bottom: 0 !important; top: auto !important; height: auto !important; min-height: 0 !important; padding: 10px 16px calc(16px + var(--sab, 0px)) !important; margin: 0; background: transparent !important; border: 0 !important; display: flex !important; flex-direction: column; align-items: center; gap: 8px; z-index: 5; pointer-events: none; }
.story-viewer .st-foot::before, .story-viewer .st-foot::after { display: none !important; }
.story-viewer .st-foot .st-brand-foot, .story-viewer .st-foot .st-caption { display: none !important; }
.story-viewer .st-link { pointer-events: auto; display: inline-block; width: calc(100% - 24px); max-width: 360px; text-align: center; background: var(--p-red) !important; color: #fff !important; border-radius: 999px !important; padding: 13px 18px !important; font: 900 14px var(--p-font) !important; letter-spacing: .2px; text-decoration: none !important; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
/* ── #618 (owner): BARRA "Instalar app" abajo de todo (reemplaza al botón verde flotante y a la mini-barra nativa de Chrome, que
   tapaba el menú inferior). Con la barra visible (body.has-install-bar) el menú inferior y la pantalla SUBEN 64 px: nada se tapa. ── */
.pwa-install-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500; height: calc(64px + var(--sab, 0px)); padding: 0 12px var(--sab, 0px) 14px; box-sizing: border-box; display: none; align-items: center; gap: 12px; background: #1c1c1e; color: #fff; font-family: var(--p-font); box-shadow: 0 -6px 20px rgba(0,0,0,.25); }
.pwa-install-bar img { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto; }
.pwa-install-bar .pib-t { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.pwa-install-bar .pib-t b { font: 800 14px var(--p-font); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwa-install-bar .pib-t small { font: 600 11.5px var(--p-font); color: rgba(255,255,255,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwa-install-bar .pib-go { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 10px 18px; background: var(--p-red); color: #fff; font: 900 13.5px var(--p-font); cursor: pointer; }
.pwa-install-bar .pib-x { flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 15px; cursor: pointer; }
body.has-install-bar.menu2 #bottomNav.bottom-nav { bottom: calc(64px + var(--sab, 0px)) !important; }
body.has-install-bar.menu2 .chat-screen, body.has-install-bar.menu2 #chatScreen { height: calc(100dvh - 60px - 64px - var(--sab, 0px)) !important; max-height: calc(100dvh - 60px - 64px - var(--sab, 0px)) !important; }
body.has-install-bar.home-full.menu2 .home-actions-row { bottom: calc(66px + 64px + var(--sab, 0px)); }
body.has-install-bar:not(.menu2) .chat-screen, body.has-install-bar:not(.menu2) #chatScreen { height: calc(100dvh - 64px - var(--sab, 0px)) !important; max-height: calc(100dvh - 64px - var(--sab, 0px)) !important; }
body.has-install-bar .play-now-card, body.has-install-bar .support-bubble, body.has-install-bar #casinoSupportBubble { margin-bottom: 64px; }
/* ── #619 (owner): los carteles de instalar / "Un paso más" (notificaciones) con el MISMO estilo de la app (antes violeta/dorado/naranja) ── */
.ios-install-modal { background: rgba(0, 0, 0, .5) !important; padding: 16px !important; }
.ios-install-content { background: var(--p-card) !important; color: var(--p-text) !important; border: 1px solid var(--p-border) !important; border-radius: 22px !important; padding: 22px 18px 18px !important; max-width: 380px !important; width: 100%; box-shadow: 0 16px 48px rgba(0, 0, 0, .28); font-family: var(--p-font); }
.ios-install-content h3 { color: var(--p-text) !important; font: 900 19px var(--p-font) !important; margin: 0 0 12px !important; text-shadow: none !important; }
.ios-install-content p { color: var(--p-text); font: 500 13.5px/1.45 var(--p-font); }
.ios-install-content .ios-note { color: var(--p-muted) !important; font: 600 13px/1.4 var(--p-font); margin: 0 0 10px; }
.ios-install-content .ios-note strong { color: var(--p-text); }
.ios-install-content ol { color: var(--p-text) !important; margin: 12px 0 !important; padding-left: 20px !important; line-height: 1.5 !important; }
.ios-install-content li { margin-bottom: 8px !important; font: 500 13.5px/1.45 var(--p-font); }
.ios-install-content li strong { color: var(--p-text); }
.ios-install-content .ios-notif-note { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 16px; padding: 12px 14px; margin-top: 14px; text-align: left; }
.ios-install-content .ios-notif-note .t { margin: 0; color: var(--p-red); font: 900 13.5px var(--p-font); }
.ios-install-content .ios-notif-note p:not(.t) { margin: 8px 0 0; color: var(--p-text); font: 500 13px/1.45 var(--p-font); }
.ios-install-content .ios-notif-note u { text-decoration-color: var(--p-red); }
.ios-install-content .btn, .ios-install-content .btn-primary { display: block; width: 100%; margin-top: 16px !important; background: var(--p-red) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 13px 16px !important; font: 900 14px var(--p-font) !important; box-shadow: none !important; cursor: pointer; }
.ios-install-content a { color: var(--p-red); }
/* #620/#621 (owner): botón PLATAFORMA en el CENTRO de la barra superior, con el logo de la plataforma elegida */
.header .tn-plat { flex: 1.3 1 0; }
.header .tn-plat .tn-ico { display: inline-flex; align-items: center; justify-content: center; }
.header .tn-plat .tn-ico img { width: 24px; height: 24px; border-radius: 8px; object-fit: cover; display: block; background: #000; border: 1.5px solid var(--p-red); box-shadow: 0 2px 8px rgba(230, 0, 35, .25); }
.header .tn-plat .tn-ico img[hidden] { display: none; }
.header .tn-btn:not(.tn-home).tn-plat .tn-lbl { font-weight: 900 !important; letter-spacing: .5px !important; color: var(--p-text) !important; }


/* ===== #622 (owner 2026-10-20): INFO MINIMIZADO — textos cortos y tarjetas apretadas para que TODO entre en una pantalla ===== */
#infoModal .modal-content { padding: 14px 14px 12px !important; }
#infoModal .info-head-sm { margin: 0 0 6px !important; }
#infoModal .info-head-sm h2 { font-size: 13px !important; }
#infoModal .info-head-sm h2::after { margin-top: 4px !important; }
#infoModal .info-reviews-head { padding: 7px 10px !important; font-size: 12px !important; }
.info-msg.im-compact { margin: 6px 0 0 !important; }
.info-msg.im-compact .im-sec { padding: 7px 10px 8px !important; margin: 0 0 6px !important; font-size: 11.5px !important; line-height: 1.35 !important; border-radius: 12px !important; border-left-width: 4px !important; }
.info-msg.im-compact .im-sec > b:first-child { padding: 3px 8px !important; margin: 0 6px 3px 0 !important; font-size: 12px !important; border-radius: 8px !important; gap: 4px !important; }
.info-msg.im-compact .im-ico, .info-msg.im-compact .im-ico svg { width: 15px !important; height: 15px !important; }
.info-msg.im-compact .im-ico { margin-right: 3px !important; }
.info-msg.im-compact .im-line { margin-top: 2px !important; }
.info-msg.im-compact .im-link { font-size: 11.5px !important; padding: 0 !important; }
.info-msg.im-compact .refund-promo { margin-top: 3px !important; font-size: 11px !important; }
.info-msg.im-compact .info-badge { font-size: 9px !important; padding: 1px 6px !important; }
#infoModal #closeInfoModal { padding: 9px 14px !important; font-size: 13px !important; }
/* ===== #624 (owner 2026-10-20): los 4 accesos del menú básico (debajo de "Entrar a jugar") CENTRADOS. Además se sacaron 4 restos de
   comentario que dejó #615 (líneas sueltas con un cierre de comentario sin apertura) y que anulaban la regla siguiente: .top-row (#559), .bv-quick 4 columnas
   (#584) y #referralHomeCard oculto (#595). ===== */
.bv-quick { grid-template-columns: repeat(4, 1fr) !important; justify-items: stretch; }
.bv-quick button { text-align: center; justify-content: center; }
/* ===== #626 (owner 2026-10-20): aviso de PRIMERA CARGA resumido junto a cada "Adjuntar comprobante" (la franja de arriba #608 se fue) ===== */
.fd-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 0 0 8px; padding: 8px 12px; border-radius: 12px; background: var(--p-red-soft); border: 1px solid rgba(230, 0, 35, .14); color: var(--p-text); font: 600 12px/1.35 var(--p-font); }
.fd-note b { font-weight: 900; color: var(--p-red); } .fd-note .fd-pct-app { font-weight: 900; color: var(--p-red); }
.fd-note small { flex: 1 0 100%; font: 600 10.5px var(--p-font); color: var(--p-muted); }
.fd-note .fd-app[hidden], .fd-note[hidden] { display: none !important; }
#bvLoadPanel .fd-note { margin: 6px 0 8px; }
.casino-load .fd-note { margin: 6px 0 8px; font-size: 11.5px; }
html[data-theme="dark"] .fd-note { background: #3a1218; border-color: #5a1a24; }
.home-actions-row { flex-wrap: wrap !important; } .home-actions-row .fd-note { flex: 1 0 100% !important; margin: 0 0 2px !important; padding: 6px 10px; }
/* ===== #627 (owner 2026-10-20): BÁSICO más sencillo — una línea 👤 nombre · saldo · 🔥 racha; nivel VIP en píldora junto a "Cambiar menú" ===== */
.bv-top { gap: 8px; padding: 8px 10px 8px 12px !important; }
.bv-top .bv-user { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; font: 800 13px var(--p-font); color: var(--p-text); }
.bv-top .bv-user i { font-style: normal; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--p-red-soft); color: var(--p-red); flex: 0 0 auto; }
.bv-top .bv-user span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-top > b { flex: 0 0 auto; font-size: 16px !important; }
.bv-fire { flex: 0 0 auto; border: 1px solid #f59e0b; background: rgba(245,158,11,.12); color: #d97706; border-radius: 999px; padding: 4px 9px; font: 900 11.5px var(--p-font); cursor: pointer; white-space: nowrap; }
.bv-fire span { font-size: 12.5px; }
html[data-theme="dark"] .bv-fire { background: rgba(245,158,11,.16); color: #fbbf24; }
.vip-mini { display: none; flex: 1 1 auto; min-width: 0; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--p-border); background: var(--p-card); color: var(--p-text); cursor: pointer; font-family: var(--p-font); }
body.home-basic .vip-mini:not([hidden]) { display: inline-flex; }
.vip-mini .vm-ico { font-size: 15px; line-height: 1; flex: 0 0 auto; }
.vip-mini > b { font: 900 11.5px var(--p-font); color: var(--p-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vip-mini .vm-bar { flex: 1 1 40px; min-width: 28px; max-width: 70px; height: 6px; border-radius: 999px; background: var(--p-surface-2); overflow: hidden; } .vip-mini .vm-bar i { display: block; height: 100%; background: var(--p-red); border-radius: 999px; transition: width .4s; }
.vip-mini > em { font: 800 10.5px var(--p-font); color: var(--p-muted); font-style: normal; white-space: nowrap; flex: 0 0 auto; }
/* #628 (owner): saldo pegado al nombre (izquierda); fueguito a la derecha con etiqueta roja "Novedad" */
.bv-top { justify-content: flex-start !important; }
.bv-top .bv-user { flex: 0 1 auto; max-width: 48%; }
.bv-top > b { margin-left: 2px; }
.bv-fire { margin-left: auto; position: relative; display: inline-flex; align-items: center; gap: 4px; font-weight: 800; padding: 5px 9px 4px; }
.bv-fire b { font-weight: 900; font-size: 12.5px; }
.bv-fire .bv-new { position: absolute; top: -7px; right: 6px; background: var(--p-red); color: #fff; font: 900 7.5px/1 var(--p-font); letter-spacing: .4px; text-transform: uppercase; padding: 2px 5px; border-radius: 999px; }
.bv-top { margin-top: 4px; overflow: visible; }
/* ===== #635 (owner): menús deshabilitados desde el panel no se ofrecen; nivel VIP también en la completa ===== */
body.no-menu-basic .mc-opt.mc-basic, body.no-menu-easy .mc-opt.mc-easy, body.no-menu-full .mc-opt.mc-full { display: none !important; }
body.no-menu-easy .ev-easy-link, body.no-menu-easy .bv-sw[onclick*="'easy'"], body.no-menu-full .ez-switch, body.no-menu-full .bv-sw[onclick*="'full'"] { display: none !important; }
body.no-menu-easy.no-menu-full .bv-switch2 { display: none !important; }
body.menus-one .change-menu, body.menus-one .menu-pin { display: none !important; }
body.home-full .vip-mini:not([hidden]) { display: inline-flex; }
/* ===== #636 (owner 2026-10-20): CARGA AUTOMÁTICA (completo) LIMPIA — sin nivel, fueguito ni misiones; sólo 👤 usuario · saldo y los pasos.
   "Cambiar menú" sólo en el Inicio. El COMPLETO es el recomendado del selector. ===== */
body.home-full .top-row { display: none !important; }
body.home-full #fireHomeCard, body.home-full #missionsCard, body.home-full #vipCard, body.home-full .fire-mini, body.home-full #rouletteHomeCard { display: none !important; }
.balance-strip #homeInstallAppBtn, .balance-strip #homeVipStrip { display: none !important; }
.balance-strip { gap: 10px; }
.balance-strip .bs-user { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; font: 800 13px var(--p-font); color: var(--p-text); }
.balance-strip .bs-user i { font-style: normal; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--p-red-soft); color: var(--p-red); flex: 0 0 auto; }
.balance-strip .bs-user b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balance-strip .bs-balance { flex: 0 0 auto; margin-left: auto; }
.mc-opt.mc-full { border-color: var(--p-red) !important; } .mc-opt.mc-full b { color: var(--p-red) !important; }
.mc-opt.mc-basic, .mc-opt.mc-easy { border-color: transparent !important; } .mc-opt.mc-basic b { color: var(--p-text) !important; }
/* ===== #637 (owner 2026-10-20): línea de estado (nivel + fueguito) arriba de todo del Inicio; barra inferior más baja ===== */
.status-row { display: flex; gap: 6px; margin: 6px 12px 0; }
.status-row[hidden] { display: none !important; }
.status-row .vip-mini, .status-row .fire-mini { display: inline-flex !important; flex: 1 1 0; min-width: 0; border-radius: 10px !important; padding: 6px 10px; justify-content: flex-start; }
.status-row .fire-mini .fm-more { display: none; }
.status-row .vip-mini[hidden], .status-row .fire-mini[hidden] { display: none !important; }
body.menu2 #bottomNav.bottom-nav { padding-top: 2px !important; }
body.menu2 #bottomNav .tn-btn { padding-top: 2px !important; padding-bottom: 2px !important; }
body.menu2 #bottomNav .tn-btn:not(.tn-home) .tn-ico svg { width: 20px; height: 20px; }
body.menu2 #bottomNav .tn-home.tn-retro { padding: 6px 10px !important; min-height: 0 !important; }
/* ===== #638 (owner 2026-10-20): (1) sin parpadeo del menú 1 al recargar con el menú 2: antes de que home.js arme la barra inferior,
   los botones que van abajo no se muestran arriba. (2) Notch / Dynamic Island: la barra superior baja lo que mida el área segura;
   si el teléfono no la informa pero es un iPhone con notch en modo app (html.ios-notch), se bajan 44px. ===== */
html.menu2-pre:not(.menu2-done) .header.topnav:not(.bottom-nav) #navAuto, html.menu2-pre:not(.menu2-done) .header.topnav:not(.bottom-nav) #navInicio, html.menu2-pre:not(.menu2-done) .header.topnav:not(.bottom-nav) #navPerfil { display: none !important; }
.header.header-toolbar.tb-circles.topnav:not(.bottom-nav) { padding-top: max(4px, env(safe-area-inset-top, 0px)) !important; }
html.ios-notch .header.header-toolbar.tb-circles.topnav:not(.bottom-nav) { padding-top: max(44px, env(safe-area-inset-top, 0px)) !important; }
html.ios-notch #casinoTopBar { padding-top: max(44px, env(safe-area-inset-top, 0px)) !important; }
#casinoTopBar { padding-top: max(7px, env(safe-area-inset-top, 0px)) !important; }
/* ===== #639 (owner 2026-10-20): "Copiar" bien diferenciado (botón rojo) en Carga auto / básico / carga rápida; Cambiar menú centrado arriba
   del Inicio; carga pendiente arriba de todo; cartel de pendiente/bono debajo sin tapar ===== */
.al-copy, .bv-copy, .cl-copy, .pf-copy { background: var(--p-red) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; font: 900 10.5px var(--p-font) !important; letter-spacing: .3px; padding: 6px 12px !important; text-transform: uppercase; box-shadow: 0 3px 10px rgba(230, 0, 35, .25) !important; white-space: nowrap; flex: 0 0 auto; }
.al-copy:active, .bv-copy:active, .cl-copy:active, .pf-copy:active { background: #b8001c !important; }
.al-copy::before, .bv-copy::before, .cl-copy::before, .pf-copy::before { content: "⧉ "; font-weight: 900; }
body.home-play .top-row { justify-content: center; }
body.home-easy #depPendingTop, body.home-full #depPendingTop, body.home-mini #depPendingTop { display: none !important; }
#depPendingTop { margin: 8px 12px 0; }
/* ===== #641 (owner 2026-10-20): CARGÁ AHORA grande arriba del Inicio · Info resumido con "Ver más" ===== */
.ev-cta.ev-cta-top { display: none; position: static !important; transform: none !important; left: auto !important; bottom: auto !important; margin: 8px 12px 0 !important; padding: 13px 16px !important; border-radius: 16px !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; width: auto; animation: none !important; }
body.home-play .ev-cta.ev-cta-top { display: flex !important; }
.ev-cta.ev-cta-top .ev-cta-b { font: 900 18px var(--p-font) !important; letter-spacing: 1.2px !important; text-shadow: none !important; }
.ev-cta.ev-cta-top .ev-cta-t { font: 700 10.5px var(--p-font) !important; letter-spacing: 0 !important; text-transform: none !important; opacity: .9; }
.info-msg .im-sec { position: relative; max-height: 56px; overflow: hidden; transition: max-height .2s; }
.info-msg .im-sec.open { max-height: none; }
.info-msg .im-sec:not(.open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(180deg, transparent, var(--p-card)); pointer-events: none; }
.im-more { display: block; margin: -4px 0 8px auto; background: none; border: 0; color: var(--p-red); font: 800 11.5px var(--p-font); padding: 2px 6px; cursor: pointer; }
.info-msg .im-sec { margin-bottom: 2px !important; }
html.android-edge { --sab: max(24px, env(safe-area-inset-bottom, 0px)); }
/* ===== #644 (owner 2026-10-20): barra inferior = CAMBIAR MENÚ · Inicio · Perfil (Carga auto sale; Cambiar menú sale del Inicio y del
   básico cuando hay barra inferior); la franja segura de abajo es parte de la barra (fondo, botones arriba); "Retirar premio" más verde ===== */
.tn-menu { display: none !important; }
.bottom-nav #navMenu { display: flex !important; flex-direction: column; align-items: center; justify-content: center; }
body.menu2 #navAuto { display: none !important; }
body.menu2 .top-row .change-menu { display: none !important; }
body.menu2.home-play .top-row { display: none !important; }
body.menu2 #bottomNav.bottom-nav { background: var(--p-surface) !important; align-items: flex-start !important; }
.withdraw-row-btn { background: #c6ecd6 !important; border-color: #7fcf9f !important; }
html[data-theme="dark"] .withdraw-row-btn { background: #164a2c !important; border-color: #2e7a4c !important; }
html[data-theme="dark"] .withdraw-row-btn .lr-text b { color: #8be3ad !important; }
/* ===== #645 (owner 2026-10-20): PERFIL — sin "Cambiar menú" ni fueguito; Notificaciones con botón ACTIVAR siempre apretable;
   Verificación de teléfono con estado (Verificado ✓) y explicación paso a paso adentro del modal ===== */
#pfFireRow { display: none !important; }
#pfNotifRow #notificationBtn { display: inline-flex !important; width: 30px; height: 30px; min-width: 0; padding: 0; border-radius: 50%; background: var(--p-surface) !important; border: 1px solid var(--p-border) !important; color: var(--p-text) !important; font-size: 15px; margin-right: 6px; box-shadow: none !important; }
#pfNotifRow .pf-theme-btn, #pfPhoneRow .pf-theme-btn { white-space: nowrap; }
#pfPhoneBtn.ok { background: var(--p-green) !important; color: #fff !important; }
.vp-box { background: var(--p-surface); border-radius: 14px; padding: 10px 12px; margin: 0 0 12px; color: var(--p-text); text-align: left; }
.vp-box > b { display: block; font: 900 12.5px var(--p-font); margin-bottom: 6px; color: var(--p-red); }
.vp-box ol { margin: 0; padding-left: 18px; font: 600 12px/1.45 var(--p-font); color: var(--p-text); }
.vp-box ol li { margin: 0 0 4px; }
.vp-box small { display: block; margin-top: 6px; font: 600 10.5px var(--p-font); color: var(--p-muted); }
/* ===== #646 (owner 2026-10-20): verificación de teléfono arriba del Perfil como IMPORTANTE; historias sin el logo arriba (sólo PICA ROJA) ===== */
.profile-modal .pf-theme-row.pf-important { border: 1.5px solid var(--p-red); background: var(--p-red-soft); }
.profile-modal .pf-theme-row.pf-important .pf-theme-btn { background: var(--p-red); color: #fff; }
.pf-imp { display: inline-block; margin-left: 6px; background: var(--p-red); color: #fff; font: 900 8.5px/1 var(--p-font); letter-spacing: .4px; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; font-style: normal; vertical-align: middle; }
.pf-imp[hidden] { display: none !important; }
.story-viewer .st-head .st-logo { display: none !important; }
/* #647: prefijo fijo +54 9 en la verificación */
.vp-prefix { flex: 0 0 auto; display: inline-flex; align-items: center; height: 42px; padding: 0 12px; border-radius: 10px; background: var(--p-surface); color: var(--p-text); font: 900 15px var(--p-font); border: 1px solid var(--p-border); }
/* #648: ayudante "¿cuál es mi número?" en la verificación */
.vp-help { margin: 6px 0 10px; }
.vp-help-btn { width: 100%; text-align: left; background: none; border: 0; padding: 4px 0; color: var(--p-red); font: 800 12px var(--p-font); cursor: pointer; }
#vpHelpBody { background: var(--p-surface); border-radius: 12px; padding: 10px; margin-top: 6px; }
#vpArea { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--p-border); background: var(--p-card); color: var(--p-text); font: 700 13px var(--p-font); }
.vp-help-hint { margin-top: 8px; font: 600 12px/1.4 var(--p-font); color: var(--p-text); } .vp-help-hint:empty { display: none; }
/* ===== #651 (owner 2026-10-20): Referidos — botón de lo acumulado (se desbloquea solo el 1°); el cartel de compartir ya va con los tokens ===== */
.ref-acc-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; margin: 0 0 12px; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--p-red); color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(230, 0, 35, .25); font-family: var(--p-font); }
.ref-acc-btn .ra-k { font: 800 12px var(--p-font); opacity: .92; }
.ref-acc-btn .ra-v { font: 900 30px/1.1 var(--p-font); letter-spacing: -.5px; }
.ref-acc-btn .ra-s { font: 700 10.5px var(--p-font); opacity: .9; text-align: center; }
/* #655: mantener apretado = pausa (sin selección ni callout de iOS) */
.story-viewer, .story-viewer .st-tap, .story-viewer .st-media img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.story-viewer .st-tap { touch-action: none !important; }
/* #656: explicación del SMS prolija (pasos separados, formato visual) */
.vp-box > b { font-size: 13px; margin-bottom: 8px; }
.vp-fmt { display: flex; align-items: stretch; gap: 6px; margin: 0 0 10px; }
.vp-fmt > span { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 7px 4px; border-radius: 10px; background: var(--p-card); border: 1px solid var(--p-border); font: 800 11.5px var(--p-font); color: var(--p-text); text-align: center; }
.vp-fmt > span small { font: 600 9.5px var(--p-font); color: var(--p-muted); }
.vp-fmt > .vp-fmt-k { flex: 0 0 auto; padding: 7px 12px; background: var(--p-red); border-color: var(--p-red); color: #fff; font-size: 14px; }
.vp-step { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 7px; font: 500 12.5px/1.4 var(--p-font); color: var(--p-text); }
.vp-step i { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--p-red); color: #fff; font: 900 12px/22px var(--p-font); text-align: center; font-style: normal; }
.vp-step b { font-weight: 800; }
/* #659: niveles VIP — Ver menos / Cerrar en dos recuadros */
.vl-actions { display: flex; gap: 8px; } .vl-actions .btn { flex: 1 1 0; }
#vipLevelsList.vl-less .vl-row:not(.on):not(.next) { display: none !important; }

/* ── #661 (owner): los modales que viven adentro de #chatScreen (Niveles VIP, Info, Perfil…) en MENÚ 2 quedaban tapados por la barra
   inferior fija (la pantalla termina 60px + franja segura arriba del borde): el fondo del modal se centra en el área que queda y la
   tarjeta nunca pasa de ahí, así el Cerrar / Ver menos siempre se ve. Con barra de instalar la app son 64px más. */
body.menu2 #chatScreen .modal { box-sizing: border-box !important; padding-bottom: calc(60px + var(--sab, 0px)) !important; }
body.menu2 #chatScreen .modal .modal-content { max-height: calc(100dvh - 60px - var(--sab, 0px) - 24px) !important; }
body.has-install-bar.menu2 #chatScreen .modal { padding-bottom: calc(124px + var(--sab, 0px)) !important; }
body.has-install-bar.menu2 #chatScreen .modal .modal-content { max-height: calc(100dvh - 124px - var(--sab, 0px) - 24px) !important; }
#vipLevelsModal .modal-content { max-width: 420px !important; }
#vipLevelsModal .rs-close { position: absolute; top: 12px; right: 12px; background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; z-index: 10; padding: 4px; }
#vipLevelsModal .vl-actions { margin-top: 12px; }

/* ── #663 (owner): Niveles VIP como Reembolsos — tarjetas; abre plegado con sólo el nivel actual; "Ver más ›" despliega ── */
#vipLevelsModal .vl-cols { display: none !important; }
#vipLevelsModal .vl-list { max-height: none !important; overflow: visible !important; gap: 10px !important; padding: 6px 0 2px; }
#vipLevelsModal .vl-card { display: block !important; opacity: 1 !important; padding: 12px 12px 10px !important; border-radius: 18px !important; background: var(--p-surface) !important; border: 1px solid var(--p-border) !important; }
#vipLevelsModal .vl-card.cur { border-color: var(--p-red) !important; background: var(--p-red-soft) !important; }
#vipLevelsModal .vl-card.on:not(.cur) { background: var(--p-green-soft) !important; }
#vipLevelsModal .vl-card .ur-head b { font: 900 15px var(--p-font); color: var(--p-text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#vipLevelsModal .vl-card .ur-head small { font: 600 12px var(--p-font); color: var(--p-muted); }
#vipLevelsModal .vl-card .ur-state { font: 600 12.5px var(--p-font); color: var(--p-text-2, var(--p-text)); margin-top: 8px; }
#vipLevelsModal .vl-card .ur-state b { color: var(--p-text); }
#vipLevelsModal .vl-li { font-size: 19px; }
.vl-badge { display: inline-block; font: 800 10px var(--p-font); letter-spacing: .3px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--p-card); color: var(--p-muted); border: 1px solid var(--p-border); }
.vl-badge.cur { background: var(--p-red); color: #fff; border-color: var(--p-red); }
.vl-badge.ok { background: var(--p-green-soft); color: var(--p-green); border-color: transparent; }
.vl-badge.nx { background: var(--p-card); color: var(--p-text); }
#vipLevelsList.vl-less .vl-card:not(.keep) { display: none !important; }
#vipLevelsList.vl-less ~ .vl-black-note { display: none !important; }
#vipLevelsModal .vl-more { margin: 8px auto 0; display: block; }

/* ── #664 (owner): INFO con el estilo de la página (Pinterest): tarjetas con ícono en recuadro de color, textos legibles (13px) y
   "Ver más ›" como pastilla recuadrada adentro de la tarjeta (abajo a la derecha). Reemplaza el look compacto de #641. ── */
#infoModal .modal-content { padding: 14px 14px 12px !important; }
.info-msg.im-compact { margin: 8px 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.info-msg.im-compact .im-sec { position: relative; background: var(--p-surface) !important; border: 1px solid var(--p-border) !important; border-left-width: 1px !important; border-radius: 18px !important; padding: 12px 14px 40px !important; margin: 0 0 10px !important; font: 500 13px/1.5 var(--p-font) !important; color: var(--p-text-2, var(--p-text)) !important; max-height: 138px; overflow: hidden; }
.info-msg.im-compact .im-sec.open { max-height: none; }
.info-msg.im-compact .im-sec:not(.open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: linear-gradient(180deg, transparent, var(--p-surface)); pointer-events: none; }
.info-msg.im-compact .im-sec > b:first-child { display: flex !important; align-items: center; gap: 10px !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 8px !important; font: 900 15px/1.2 var(--p-font) !important; color: var(--p-text) !important; }
.info-msg.im-compact .im-sec > b:first-child .im-ico { width: 36px !important; height: 36px !important; margin: 0 !important; border-radius: 12px; background: var(--im-acc, var(--p-red)); color: #fff !important; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.info-msg.im-compact .im-sec > b:first-child .im-ico svg { width: 20px !important; height: 20px !important; }
.info-msg.im-compact .im-sec > b:first-child .im-ico svg path, .info-msg.im-compact .im-sec > b:first-child .im-ico svg circle, .info-msg.im-compact .im-sec > b:first-child .im-ico svg rect { fill: rgba(255,255,255,.18); }
.info-msg.im-compact .im-sec b { color: var(--p-text) !important; }
.info-msg.im-compact .im-sec .info-badge { font-size: 10px !important; padding: 2px 8px !important; }
.info-msg.im-compact .im-line { margin-top: 4px !important; }
.info-msg.im-compact .im-link { font: 800 13px var(--p-font) !important; color: var(--p-red) !important; text-decoration: none !important; }
.info-msg.im-compact .im-sec.im-missions { border-color: var(--p-border) !important; }
.info-msg.im-compact .im-sec.im-missions > b { color: var(--p-text) !important; }
.info-msg.im-compact .im-sec:nth-of-type(7) { --im-acc: #e60023; } .info-msg.im-compact .im-sec:nth-of-type(8) { --im-acc: #0ea5e9; }
.info-msg.im-compact .im-more { position: relative; z-index: 2; margin: -32px 12px 12px auto !important; padding: 6px 12px !important; background: var(--p-card) !important; border: 1px solid var(--p-border) !important; border-radius: 999px; color: var(--p-red) !important; font: 800 12px var(--p-font) !important; box-shadow: 0 2px 8px rgba(0,0,0,.08); }