/* THEME.CSS ============================================================================ Este es el archivo principal para cambiar la marca visual a mano. En produccion tambien podes pisar estos valores desde .env con THEME_*. Cambios tipicos para otra empresa: - Cambiar logo. - Cambiar fondo de afuera. - Cambiar fondo de la pantalla. - Cambiar colores de texto. - Cambiar color del monto. - Cambiar botones. - Cambiar fuente. Ejemplo de logo local: --brand-logo-url: "/imagen/logo.png"; Ejemplo de logo externo: --brand-logo-url: "https://miempresa.com/logo.png"; Ejemplo de fuente externa por CSS: --font-css-url: "https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap"; --font-family: "Fredoka"; Nota: Para fuentes, solo necesitas la URL CSS y el nombre de familia. */ :root, .theme-neverland { /* ========================================================================= 1. LOGO ------------------------------------------------------------------------- Este logo aparece arriba de todo en la barra superior. --brand-logo-url: Cambia la imagen del logo. Puede ser una ruta local o una URL completa. Local: "/imagen/logo.png" Externa: "https://miempresa.com/logo.png" --brand-logo-size: Cambia el alto visual del logo. Ejemplos: 82px 96px clamp(74px, 12vw, 94px) */ --brand-logo-url: "/imagen/logo.png"; --brand-logo-size: clamp(74px, 12vw, 94px); /* ========================================================================= 2. FUENTE ------------------------------------------------------------------------- Cambia la personalidad de toda la app. --font-css-url: URL de la hoja CSS de la fuente web. Este es el metodo recomendado porque suele venir directo de Google Fonts, Adobe Fonts, Bunny Fonts o el proveedor que uses. Ejemplo: "https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap" --font-family: Nombre exacto de la familia que trae esa URL. Ejemplos: "Fredoka" "Poppins" Esta variable es necesaria porque la URL carga la fuente, pero la app necesita saber que nombre aplicar en font-family. No hace falta configurar archivo, formato ni peso por separado. Eso ya viene resuelto dentro de la URL CSS de la fuente. */ --font-css-url: "https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap"; --font-family: "Fredoka"; /* Cambia toda la tipografia de la app. El primer nombre debe coincidir con --font-family. */ --app-font: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI Rounded", "Segoe UI", system-ui, sans-serif; /* Fuente opcional para pantallas de resultado. Si queres que success/failure se vean mas amigables, cambia esta variable. */ --result-font: var(--app-font); /* ========================================================================= 3. FONDOS ------------------------------------------------------------------------- --outer-bg: Fondo externo. Es lo que se ve afuera de la pantalla mobile cuando se abre en tablet, desktop o el navegador. --screen-bg: Fondo interno de la app. Es el fondo principal de las pantallas. --topbar-bg: Fondo de la barra superior donde aparece el logo. --topbar-border: ESTE es el borde/linea debajo de la barra del logo. Si queres que no se vea, dejalo transparente: --topbar-border: transparent; Si queres una linea visible, usa un gris suave: --topbar-border: #d0d7df; */ --outer-bg: #000000; --screen-bg: #00000062; --topbar-bg: #3f3f3f3b; --topbar-border: #3f3f3f00; /* ========================================================================= 4. TEXTOS ------------------------------------------------------------------------- --text: textos principales. --title: titulos importantes. --muted: textos secundarios o ayudas. --amount-text: color del monto/precio protagonista. --result-title: Color de titulos en pantallas de resultado: Procesando pago, pago exitoso, pago rechazado, falta confirmar pago. --result-message: Color de textos secundarios en pantallas de resultado: Preparando tu juego, intenta nuevamente, mensajes debajo del titulo. --processing-note-text: Color del texto dentro de la tarjetita de "Esto puede tardar unos segundos." en la pantalla Procesando pago. */ --text: hsl(0, 0%, 94%); --title: #b30000; --muted: #dddddd; --amount-text: #3ba752; --result-title: var(--text); --result-message: var(--muted); --processing-note-text: #1f1f1f; /* ========================================================================= 4.1 IMAGEN PRINCIPAL DEL JUEGO ------------------------------------------------------------------------- --game-image-border: Borde fino alrededor de la foto del juego/maquina. Para ocultarlo: --game-image-border: transparent; Para dejarlo blanco: --game-image-border: #ffffff; */ --game-image-border: #1b1b1b; /* ========================================================================= 5. BOTON PRINCIPAL ------------------------------------------------------------------------- Se usa para acciones fuertes: - PAGAR Y JUGAR - Cerrar en pago correcto - Reintentar en pago rechazado */ --button-primary-bg: #f1f1f1; --button-primary-text: #000000; --button-primary-hover-bg: #b10e0e; --button-primary-shadow: rgba(0, 0, 0, 0.22); /* ========================================================================= 6. BOTON SECUNDARIO ------------------------------------------------------------------------- Se usa para acciones menos importantes. Si no queres botones secundarios coloreados, dejalos suaves. */ --button-secondary-bg: #eef4fb; --button-secondary-text: #162033; --button-secondary-hover-bg: #2261b3; --button-secondary-shadow: rgba(0, 0, 0, 0.12); /* ========================================================================= 7. ESTADOS Y ACENTOS ------------------------------------------------------------------------- Colores para comunicar estados. --success: Color positivo. Cambia el verde de pagos aprobados, checks, loader, detalles correctos y sombras positivas. --on-success: Color del texto o icono cuando va arriba de un fondo success. Normalmente conviene dejarlo blanco. --primary: Color fuerte de marca o alerta. Se usa en errores, cancelaciones, alertas y detalles destacados. --on-primary: Color del texto o icono cuando va arriba de un fondo primary. Normalmente conviene dejarlo blanco si primary es oscuro o intenso. --focus-ring: Aro visual cuando un boton o input esta seleccionado. Conviene usar el color de marca con transparencia. Ejemplo: rgba(18, 168, 74, 0.18) */ --success: #12a84a; --on-success: #ffffff; --primary: #f2053a; --on-primary: #ffffff; --focus-ring: rgba(18, 168, 74, 0.18); /* ========================================================================= 8. TARJETAS, BORDES Y SOMBRAS ------------------------------------------------------------------------- Superficies generales. --surface: Fondo de cajas, tarjetas o paneles internos. --soft-surface: Fondo suave para notas, ayudas, fondos secundarios y botones secundarios. --input-bg: Fondo de campos de formulario. --border: Borde normal de tarjetas, inputs, separadores y cajas. --border-strong: Borde mas visible para elementos que necesitan mas presencia. --shadow: Sombra general de paneles y tarjetas. Mas opacidad = mas profundidad. Menos opacidad = diseno mas plano. --processing-note-bg: Fondo de la tarjetita de "Esto puede tardar unos segundos.". --processing-note-border: Borde de esa tarjetita. Si no queres borde, usa transparent. */ --surface: #ffffff; --soft-surface: #edf7ff; --processing-note-bg: #a5a5a5; --processing-note-border: transparent; --input-bg: #ffffff; --border: #ffffff; --border-strong: #b7ccdd; --shadow: rgba(22, 32, 51, 0.16); /* --title-glow: Brillo sutil usado por titulos antiguos. Casi siempre puede quedar igual. Si queres adaptarlo a otra marca, usa el color de --primary con alpha. */ --title-glow: rgba(0, 119, 200, 0.15); /* ========================================================================= 9. VARIABLES INTERNAS MINIMAS ------------------------------------------------------------------------- Zona de compatibilidad interna. En general NO hace falta tocar esto para cambiar una marca. Estas variables conectan partes viejas del CSS con la configuracion simple de arriba. --card-bg: Fondo de tarjetas antiguas. Lo dejamos conectado a --screen-bg. --card-border: Borde de tarjetas antiguas. Lo dejamos conectado a --border. --card-shine: Brillo animado de algunos estados/celebraciones. Si no queres brillo, bajale la opacidad. --payment-success-shadow: Sombra verde usada cuando una opcion de pago esta aprobada o seleccionada. --celebration-shadow: Sombra usada en animaciones de festejo. */ --card-bg: var(--screen-bg); --card-border: var(--border); --card-shine: rgba(255, 255, 255, 0.7); --payment-success-shadow: rgba(36, 197, 95, 0.22); --celebration-shadow: rgba(18, 168, 74, 0.24); }