/* ========================================
Esto de abajo trabaja los estilos , y los colores de mi pagina , tambien mejoras para mejor visualizacion.
======================================== */
:root {
--primary: #0d9f4f;
--primary-dark: #0a7f3f;
--primary-light: #e8f7ee;
--secondary: #1a1a1a;
--accent: #dc2626;
--accent-light: #fee2e2;
--success: #10b981;
--success-light: #d1fae5;
--warning: #f59e0b;
--warning-light: #fef3c7;
--error: #ef4444;
--error-light: #fee2e2;
--info: #3b82f6;
--info-light: #dbeafe;
--white: #ffffff;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
--font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
--transition-fast: 150ms ease;
--transition-normal: 250ms ease;
--transition-slow: 350ms ease;
--verde: #00a86b;
--verde-light: #00c97f;
--negro-medium: #2d3748;
--card: #1f2937;
--border: #374151;
--muted: #9ca3af;
--gris-300: #d1d5db;
--blanco: #ffffff;
}
*, *::before, *::after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
html {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
touch-action: manipulation;
}
body {
font-family: var(--font-family);
font-size: 16px;
line-height: 1.5;
color: var(--gray-900);
background-color: var(--secondary);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
padding: 0;
overflow-x: hidden;
position: relative;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
-webkit-user-select: text;
user-select: text;
}
p, span, label, .nav-label, .section-text {
-webkit-user-select: text;
user-select: text;
}
img {
max-width: 100%;
height: auto;
display: block;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
button, a, input, select, textarea {
min-height: 48px;
font-size: 16px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
button, a {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
input, select, textarea {
-webkit-tap-highlight-color: transparent;
border-radius: 0;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea {
font-size: 16px;
}
a {
text-decoration: none;
color: inherit;
-webkit-tap-highlight-color: transparent;
}
.social-btn,
.nav-item,
.footer-links a,
.nav-link {
margin: 8px 0;
min-height: 48px;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
}
@supports not (-webkit-transform: translateX(0)) {
.nav-item {
transform: none !important;
-webkit-transform: none !important;
opacity: 1 !important;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.nav::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none;
}
.nav,
body {
scrollbar-width: none;
-ms-overflow-style: none;
}
.hero-admin {
display: none;
}
.hero-admin.active {
display: block;
}
/* ========================================
Esto de abajo trabaja la navegacion de mi pagina principal (Inicio,Analisis,Quiniela,Resultados,Ayuda)
======================================== */
@keyframes spin-ball {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@-webkit-keyframes spin-ball {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
.floating-nav {
position: fixed;
bottom: 38px;
right: 24px;
z-index: 1000;
}
.nav-toggle {
width: 60px;
height: 60px;
background: transparent;
border: none;
border-radius: var(--radius-full);
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
box-shadow: none;
transition: transform var(--transition-fast);
-webkit-transition: transform var(--transition-fast);
z-index: 2;
position: relative;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.nav-toggle:active {
transform: scale(0.95);
-webkit-transform: scale(0.95);
}
.nav-toggle-icon {
font-size: 60px;
line-height: 1;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
animation: spin-ball 6s linear infinite;
-webkit-animation: spin-ball 6s linear infinite;
}
.floating-nav.open .nav-toggle-icon {
animation-play-state: paused;
-webkit-animation-play-state: paused;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.nav-items {
position: absolute;
bottom: 95px;
right: 0;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
gap: var(--spacing-sm);
opacity: 0;
visibility: hidden;
transform: translateY(20px);
-webkit-transform: translateY(20px);
transition: all var(--transition-normal);
-webkit-transition: all var(--transition-normal);
}
.floating-nav.open .nav-items {
opacity: 1;
visibility: visible;
transform: translateY(0);
-webkit-transform: translateY(0);
}
.nav-item {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
gap: var(--spacing-md);
padding: var(--spacing-md) var(--spacing-lg);
min-height: 56px;
min-width: 180px;
background: var(--secondary);
border: 1px solid var(--gray-700);
border-radius: var(--radius-full);
white-space: nowrap;
transition: all var(--transition-fast);
-webkit-transition: all var(--transition-fast);
transform: translateX(100px);
-webkit-transform: translateX(100px);
opacity: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.floating-nav.open .nav-item {
transform: translateX(0);
-webkit-transform: translateX(0);
opacity: 1;
}
.floating-nav.open .nav-item:nth-child(1) { 
transition-delay: 50ms;
-webkit-transition-delay: 50ms;
}
.floating-nav.open .nav-item:nth-child(2) { 
transition-delay: 100ms;
-webkit-transition-delay: 100ms;
}
.floating-nav.open .nav-item:nth-child(3) { 
transition-delay: 150ms;
-webkit-transition-delay: 150ms;
}
.floating-nav.open .nav-item:nth-child(4) { 
transition-delay: 200ms;
-webkit-transition-delay: 200ms;
}
.floating-nav.open .nav-item:nth-child(5) { 
transition-delay: 250ms;
-webkit-transition-delay: 250ms;
}
.nav-item:active {
background: var(--gray-800);
border-color: var(--accent);
transform: scale(0.97);
-webkit-transform: scale(0.97);
}
.nav-item.active {
background: linear-gradient(135deg, var(--accent) 0%, #b91c1c 100%);
background: -webkit-linear-gradient(135deg, var(--accent) 0%, #b91c1c 100%);
border-color: var(--accent);
}
.nav-icon {
font-size: 1.5rem;
line-height: 1;
order: 2;
}
.nav-label {
font-size: 1rem;
font-weight: 600;
color: var(--white);
order: 1;
text-align: left;
flex: 1;
}
/* ========================================
Esto de abajo trabaja la navegacion de mi pagina subfunciones (En Analisis y Resultados)
======================================== */
.tab-container {
display: flex;
display: -webkit-flex;
gap: 0;
padding: 0;
background: transparent;
justify-content: center;
-webkit-justify-content: center;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}
.tab-btn {
flex: 1;
-webkit-flex: 1;
max-width: none;   
padding: 0.75rem 1rem;
background: transparent;
color: #ffffff;
border: none;
border-bottom: 3px solid transparent;
font-size: 0.875rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-webkit-tap-highlight-color: transparent;
}
.tab-btn.active {
color: #FFD700;
border-bottom: 3px solid #FFD700;
}
.tab-btn:active {
transform: scale(0.95);
-webkit-transform: scale(0.95);
}
.tab-content {
display: none;
padding: 0;
background: #006847;
}
.tab-content.active {
display: block;
}

/* ========================================
Esto de abajo trabaja en la palabra Quinielas "El Wero" y el Participa Ya
======================================== */
.admin-header {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 100;
background: var(--secondary);
padding: 0.5rem 0.85rem;
box-shadow: none;
margin-bottom: 0;
}
.header-content {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
max-width: 100%;
margin: 0 auto;
gap: 0.75rem;
}
.header-brand {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
gap: 0.4rem;
}
.brand-name {
font-weight: 800;
font-size: 0.875rem;
color: var(--white);
white-space: nowrap;
}
.brand-ball {
font-size: 1.1rem;
line-height: 1;
animation: bounce 2s ease-in-out infinite;
-webkit-animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
0%,100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
@-webkit-keyframes bounce {
0%,100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
}
.header-user {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
gap: 0.4rem;
}
.user-name {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
background: -webkit-linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--white);
font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 0.8rem;
font-weight: 700;
padding: 0.4rem 0.85rem;
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--transition-fast);
-webkit-transition: all var(--transition-fast);
box-shadow: 0 2px 8px rgba(13, 159, 79, 0.3);
white-space: nowrap;
display: inline-block;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-tap-highlight-color: transparent;
}
.user-name:hover {
transform: translateY(-2px);
-webkit-transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(13, 159, 79, 0.4);
}
.user-name:active {
transform: translateY(0);
-webkit-transform: translateY(0);
}
/* ========================================
Esto de abajo trabaja en el inicio el escrito de Inicio y disque balon con imagen de logo
======================================== */
.hero-admin {
background: #006847;
padding: 0.5rem 0.85rem;
position: relative;
overflow: hidden;
margin-top: 0;
border-top: none;
}
.hero-admin .hero-content {
position: relative;
z-index: 1;
max-width: 100%;
margin: 0 auto;
}
.hero-admin .hero-badge {
display: inline-flex;
display: -webkit-inline-flex;
align-items: center;
-webkit-align-items: center;
gap: 0.2rem;
background: #dc2626;
color: var(--white);
padding: 0.15rem 0.4rem;
border-radius: var(--radius-full);
font-size: 0.55rem;
font-weight: 600;
margin-bottom: 0.4rem;
}
.hero-admin .hero-badge span {
color: var(--white);
}
.hero-title {
font-size: 1rem;
font-weight: 900;
color: var(--white);
margin-bottom: 0.2rem;
line-height: 1.2;
}
.hero-subtitle {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 0.6rem;
}
.hero-stats {
display: flex;
display: -webkit-flex;
gap: 1rem;
}
.hero-stat {
text-align: center;
}
.hero-stat__number {
display: block;
font-size: 1.15rem;
font-weight: 800;
line-height: 1;
}
.hero-stat__number--red {
color: #CE1126;
}
.hero-stat__number--green {
color: var(--white);
}
.hero-stat__label {
font-size: 0.55rem;
color: rgba(255, 255, 255, 0.8);
margin-top: 0.2rem;
}
.hero-stat__number--red + .hero-stat__label {
color: rgba(255, 255, 255, 0.8);
}
.hero-decoration {
position: absolute;
right: 7.5px;
top: calc(105% - 2px);
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
opacity: 1;
pointer-events: none;
z-index: 1;
}
.decoration-ball {
width: 140px;
height: 140px;
color: #CE1126;
opacity: 1;
animation: rotate 30s linear infinite;
-webkit-animation: rotate 30s linear infinite;
}
.decoration-ball circle {
stroke: #CE1126 !important;
opacity: 1 !important;
}
.hero-decoration .hero-profile-img {
position: absolute;
top: calc(50% - 75px);
right: 45px;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
border: 2.5px solid var(--white);
object-fit: cover;
-o-object-fit: cover;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
z-index: 2;
opacity: 1;
}
@keyframes rotate {
from {
transform: translateY(-50%) rotate(0deg);
}
to {
transform: translateY(-50%) rotate(360deg);
}
}
@-webkit-keyframes rotate {
from {
-webkit-transform: translateY(-50%) rotate(0deg);
transform: translateY(-50%) rotate(0deg);
}
to {
-webkit-transform: translateY(-50%) rotate(360deg);
transform: translateY(-50%) rotate(360deg);
}
}
/* ========================================
Esto de abajo trabaja en el inicio de la pagina numero 1 de inicio.
======================================== */
.main-content {
width: 100%;
}
.page {
display: none;
}
.page.active {
display: block;
}
.hero {
position: relative;
min-height: calc(50vh - 20px);
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: flex-start;
-webkit-justify-content: flex-start;
align-items: center;
-webkit-align-items: center;
padding: var(--spacing-md) var(--spacing-md);
text-align: center;
overflow: hidden;
background: var(--white);
}
.hero-bg {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 30% 20%, rgba(13, 159, 79, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(206, 17, 38, 0.08) 0%, transparent 50%);
background: -webkit-radial-gradient(ellipse at 30% 20%, rgba(13, 159, 79, 0.08) 0%, transparent 50%), -webkit-radial-gradient(ellipse at 70% 80%, rgba(206, 17, 38, 0.08) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}
.hero .hero-content {
position: relative;
z-index: 1;
max-width: 480px;
width: 100%;
}
.hero .hero-badge {
display: inline-block;
padding: 0.4rem 1rem;
background: var(--primary);
border: 1px solid var(--primary-dark);
border-radius: var(--radius-full);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--white);
margin-bottom: var(--spacing-lg);
-webkit-tap-highlight-color: transparent;
}
.hero-logo {
width: 150px;
height: auto;
margin: 0 auto var(--spacing-md) auto;
display: block;
}
.hero-text {
font-size: 0.95rem;
color: var(--gray-700);
line-height: 1.65;
margin-bottom: var(--spacing-xl);
}
.hero-metrics {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-2xl);
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.metric {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
align-items: center;
-webkit-align-items: center;
gap: 0.25rem;
min-width: 75px;
}
.metric-icon {
font-size: 1.4rem;
}
.metric-value {
font-family: var(--font-family);
font-size: 1.4rem;
font-weight: 800;
color: var(--gray-900);
line-height: 1;
}
.metric-label {
font-size: 0.75rem;
color: var(--gray-600);
}
#pageInicio .hero {
padding-top: 25px;
}
/* ========================================
Esto de abajo trabaja con la pagina de inicio (2) de mi pagina
======================================== */
.section {
padding: var(--spacing-lg) var(--spacing-md);
max-width: 600px;
margin: 0 auto;
background: var(--secondary);
}
.section-title {
font-family: var(--font-family);
font-size: 1.5rem;
font-weight: 800;
margin-bottom: var(--spacing-lg);
text-align: center;
color: var(--white);
}
.steps-container {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
gap: var(--spacing-md);
}
.step-card {
position: relative;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
text-align: center;
transition: transform var(--transition-fast), border-color var(--transition-fast);
-webkit-transition: transform var(--transition-fast), border-color var(--transition-fast);
-webkit-tap-highlight-color: transparent;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.step-card:active {
transform: scale(0.98);
-webkit-transform: scale(0.98);
border-color: var(--primary);
}
.step-number {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
width: 28px;
height: 28px;
background: var(--primary);
border-radius: var(--radius-full);
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
font-family: var(--font-family);
font-size: 0.875rem;
font-weight: 700;
color: var(--white);
box-shadow: 0 2px 6px rgba(13, 159, 79, 0.4);
}
.step-icon {
font-size: 2rem;
margin-bottom: var(--spacing-sm);
}
.step-card h4 {
font-family: var(--font-family);
font-size: 1.125rem;
font-weight: 700;
margin-bottom: var(--spacing-xs);
color: var(--white);
}
.step-card p {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
}
/* ========================================
Esto de abajo trabaja con la pagina de inicio (3) de mi pagina
======================================== */
.section-dark {
background: var(--white);
max-width: none;
padding: var(--spacing-2xl) var(--spacing-md);
}
.section-badge {
display: block;
width: fit-content;
padding: var(--spacing-xs) var(--spacing-md);
background: var(--primary);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
margin-bottom: var(--spacing-md);
margin-left: auto;
margin-right: auto;
color: var(--white);
}
.section-dark .section-title {
font-family: var(--font-family);
font-size: 1.75rem;
font-weight: 800;
margin-bottom: var(--spacing-md);
text-align: center;
color: var(--gray-900);
}
.section-subtitle {
font-size: 1.125rem;
color: var(--gray-700);
text-align: center;
margin-bottom: var(--spacing-sm);
}
.section-text {
font-size: 1rem;
color: var(--gray-600);
text-align: center;
margin-bottom: var(--spacing-lg);
line-height: 1.6;
}
.social-buttons {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
gap: var(--spacing-md);
max-width: 400px;
margin: 0 auto;
}
.social-btn {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
gap: var(--spacing-sm);
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--radius-lg);
font-weight: 600;
font-size: 0.9375rem;
text-decoration: none;
transition: transform var(--transition-fast), background var(--transition-fast);
-webkit-transition: transform var(--transition-fast), background var(--transition-fast);
-webkit-tap-highlight-color: transparent;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.social-btn svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.social-btn.facebook {
background: #1877f2;
color: var(--white);
}
.social-btn.facebook:active {
background: #166fe5;
transform: scale(0.98);
-webkit-transform: scale(0.98);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.social-btn.whatsapp,
.social-btn.whatsapp-group {
background: #25d366;
color: var(--white);
}
.social-btn.whatsapp:active,
.social-btn.whatsapp-group:active {
background: #20bd5a;
transform: scale(0.98);
-webkit-transform: scale(0.98);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* ========================================
Esto de abajo trabaja con la pagina de inicio (4) de mi pagina
======================================== */
.section-cta {
padding: var(--spacing-2xl) var(--spacing-md);
max-width: 600px;
margin: 0 auto;
background: var(--secondary);
text-align: center;
}
.section-cta .section-title {
font-family: var(--font-family);
font-size: 1.75rem;
font-weight: 800;
margin-bottom: var(--spacing-sm);
color: var(--white);
}
.section-cta .section-text {
font-size: 1rem;
color: var(--gray-400);
margin-bottom: var(--spacing-xl);
line-height: 1.6;
}
.btn-primary {
display: inline-flex;
display: -webkit-inline-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
background: -webkit-linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--white);
font-family: var(--font-family);
font-size: 0.9375rem;
font-weight: 700;
padding: var(--spacing-md) var(--spacing-xl);
border: none;
border-radius: var(--radius-lg);
cursor: pointer;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
-webkit-transition: transform var(--transition-fast), box-shadow var(--transition-fast);
-webkit-tap-highlight-color: transparent;
box-shadow: 0 4px 12px rgba(13, 159, 79, 0.3);
}
.btn-large {
padding: var(--spacing-lg) var(--spacing-2xl);
font-size: 1rem;
}
.btn-primary:active {
transform: scale(0.98);
-webkit-transform: scale(0.98);
box-shadow: 0 2px 8px rgba(13, 159, 79, 0.4);
}
/* ========================================
Esto de abajo trabaja con el final de mi pagina .
======================================== */
.section-cta {
text-align: center;
padding: var(--spacing-2xl) var(--spacing-md);
background: var(--secondary);
}
.section-cta .section-title {
font-family: var(--font-family);
font-size: 1.75rem;
font-weight: 800;
margin-bottom: var(--spacing-md);
text-align: center;
color: var(--white);
}
.section-cta .section-text {
font-size: 1rem;
color: var(--gray-400);
text-align: center;
margin-bottom: var(--spacing-lg);
line-height: 1.6;
}
.btn-primary {
display: inline-flex;
display: -webkit-inline-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
gap: var(--spacing-sm);
padding: var(--spacing-md) var(--spacing-xl);
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
background: -webkit-linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--white);
border: none;
border-radius: var(--radius-lg);
font-family: var(--font-family);
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
-webkit-transition: transform var(--transition-fast), box-shadow var(--transition-fast);
-webkit-tap-highlight-color: transparent;
box-shadow: 0 4px 12px rgba(13, 159, 79, 0.3);
}
.btn-primary:active {
transform: scale(0.97);
-webkit-transform: scale(0.97);
box-shadow: 0 2px 8px rgba(13, 159, 79, 0.4);
}
.btn-large {
padding: var(--spacing-lg) var(--spacing-2xl);
font-size: 1.125rem;
}
.footer {
padding: var(--spacing-xl) var(--spacing-md);
border-top: 1px solid var(--gray-700);
text-align: center;
background: var(--secondary);
}
.footer-brand {
font-family: var(--font-family);
font-size: 0.875rem;
color: var(--gray-400);
margin-bottom: var(--spacing-md);
}
.footer-links {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
gap: var(--spacing-md);
}
.footer-links a {
font-size: 0.875rem;
color: var(--gray-400);
text-decoration: none;
transition: color var(--transition-fast);
-webkit-transition: color var(--transition-fast);
}
.footer-links a:active {
color: var(--primary);
}
/* ========================================
Esto de abajo trabaja con la pagina de horarios y los porcentajes
======================================== */
.match-card .match-vs {
font-family: var(--font-family);
font-size: 1.2rem;
font-weight: 700;
color: var(--gray-900);
padding: 0 var(--spacing-sm);
color: #FFD700; 
}
.matches-list {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: #006847;
}
.match-card {
background: var(--white);
border: 1px solid var(--gray-300);
border-radius: var(--radius-lg);
padding: var(--spacing-md);
}
.match-league {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-sm);
font-size: 0.75rem;
color: var(--gray-900);
justify-content: center;
-webkit-justify-content: center;
text-align: center;
}
.match-league img {
width: 16px;
height: 16px;
}
.match-teams {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
margin-bottom: var(--spacing-sm);
}
.match-team {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
align-items: center;
-webkit-align-items: center;
gap: var(--spacing-xs);
flex: 1;
-webkit-flex: 1;
}
.match-team img.team-logo,
.match-team .team-logo {
width: 48px;
height: 48px;
object-fit: contain;
-o-object-fit: contain;
background: transparent;
border-radius: var(--radius-md);
padding: 0;
display: block;
}
.match-team span {
font-size: 0.8125rem;
font-weight: 600;
text-align: center;
max-width: 90px;
line-height: 1.2;
color: var(--gray-900);
}
.match-info {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
gap: var(--spacing-lg);
padding-top: var(--spacing-sm);
border-top: 1px solid var(--gray-300);
font-size: 0.75rem;
color: var(--gray-900);
}
.match-info span {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
gap: var(--spacing-xs);
}
.match-info img {
width: 20px;
height: 20px;
object-fit: contain;
-o-object-fit: contain;
vertical-align: middle;
}
#pageAnalisis {
padding: 0;
background: #006847;
min-height: 100vh;
}
#pageAnalisis .tab-container {
justify-content: center;
-webkit-justify-content: center;
}
.match-percentages {
display: flex;
display: -webkit-flex;
justify-content: space-around;
-webkit-justify-content: space-around;
margin-top: var(--spacing-md);
padding-top: var(--spacing-md);
border-top: 1px solid var(--gray-300);
}
.percentage-item {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
align-items: center;
-webkit-align-items: center;
gap: var(--spacing-xs);
}
.percentage-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--gray-900);
}
.percentage-bar {
width: 60px;
height: 6px;
background: var(--gray-300);
border-radius: var(--radius-full);
overflow: hidden;
}
.percentage-fill {
height: 100%;
border-radius: var(--radius-full);
transition: width 1s ease;
-webkit-transition: width 1s ease;
}
.percentage-fill.local {
background: var(--primary);
}
.percentage-fill.empate {
background: var(--gray-600);
}
.percentage-fill.visita {
background: var(--accent);
}
.percentage-value {
font-family: var(--font-family);
font-size: 0.875rem;
font-weight: 700;
color: var(--gray-900);
}
#hero-analisis {
border-bottom: 0.5px solid var(--white);
}
/* ========================================
Esto de abajo trabaja con la pagina Quiniela
======================================== */
.quiniela-form {
padding: 0;
margin-top: 0;
border-top: 0.5px solid white;
}
.input-group {
margin-bottom: 0;
}
.input-group label {
color: #000000;
}
.input-group input {
background: white;
color: #000000;
}
.input-group input:focus {
outline: none;
}
.input-group input::placeholder {
color: rgba(0, 0, 0, 0.5);
}
.btn-save {
padding: 8px 18px;
background: var(--verde);
color: white;
border: none;
border-radius: 0;
font-family: var(--font-family);
font-size: 0.875rem;
font-weight: 700;
white-space: nowrap;
min-height: 44px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
touch-action: manipulation;
}
.btn-reglamento {
padding: 8px 12px;
background: #CE1126;
color: white;
border: none;
border-radius: 0;
font-size: 0.875rem;
min-height: 44px;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
touch-action: manipulation;
}
.quiniela-matches {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
gap: 0;
margin: 0;
margin-bottom: 0;
background: #ffffff;
border: 1px solid var(--border);
border-bottom: none;
border-radius: 0;
padding: 8px 12px 4px 12px;
}
.quiniela-match {
background: transparent;
border: none;
padding: 3px 0;
margin-bottom: 0;
}
.quiniela-match-row {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
gap: 5px;
}
.quiniela-team-inline {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
gap: 3px;
flex: 1;
-webkit-flex: 1;
min-width: 0;
}
.quiniela-team-inline:first-of-type {
justify-content: flex-start;
-webkit-justify-content: flex-start;
}
.quiniela-team-inline:last-of-type {
justify-content: flex-end;
-webkit-justify-content: flex-end;
}
.team-logo-small {
width: 32px;
height: 32px;
object-fit: contain;
-o-object-fit: contain;
background: transparent;
border-radius: 0;
padding: 0;
flex-shrink: 0;
-webkit-flex-shrink: 0;
}
.quiniela-team-inline span {
font-size: 0.75rem;
font-weight: 600;
line-height: 1.2;
color: #000000;
}
.quiniela-btn {
width: 40px;
height: 40px;
min-width: 40px;
max-width: 40px;
min-height: 40px;
max-height: 40px;
padding: 0;
background: transparent;
border: 1px solid #000000;
border-radius: var(--radius-sm);
font-family: var(--font-family);
font-size: 0.8125rem;
font-weight: 700;
color: #000000;
flex-shrink: 0;
-webkit-flex-shrink: 0;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transition: all 150ms ease;
-webkit-transition: all 150ms ease;
box-sizing: border-box;
-webkit-box-sizing: border-box;
overflow: hidden;
touch-action: manipulation;
}
.quiniela-btn:active {
transform: scale(0.95);
-webkit-transform: scale(0.95);
}
.quiniela-btn.selected {
background: #006847 !important;
color: white !important;
border-color: #006847 !important;
}
#pageQuiniela {
padding-top: 0px;
background: #000000;
}
.quiniela-actions {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
gap: 6px;
padding: 8px 12px 12px 12px;
background: #006847;
border: none;
border-top: 3px solid #000000;
border-bottom: 3px solid #000000;
border-radius: 0;
margin: 0;
}
.action-btn {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
gap: 2px;
padding: 8px 6px;
background: transparent;
border: none;
border-radius: var(--radius-sm);
color: var(--blanco);
font-size: 0.6875rem;
font-weight: 600;
flex: 1;
-webkit-flex: 1;
min-width: 0;
min-height: 44px;
white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transition: all 150ms ease;
-webkit-transition: all 150ms ease;
touch-action: manipulation;
}
.action-btn:active {
transform: scale(0.95);
-webkit-transform: scale(0.95);
opacity: 0.7;
}
.action-btn.btn-delete {
flex: 0.8;
-webkit-flex: 0.8;
}
.action-icon {
font-size: 0.875rem;
}
.action-value {
font-size: 0.9375rem !important;
font-weight: 700 !important;
color: var(--blanco) !important;
}
.quiniela-help-banner {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
gap: var(--spacing-sm);
padding: var(--spacing-lg);
margin: 0;
width: 100%;
min-height: 80px;
background: #006847;
border: none;
border-radius: 0;
box-shadow: 0 4px 12px rgba(0, 168, 107, 0.15);
-webkit-box-shadow: 0 4px 12px rgba(0, 168, 107, 0.15);
transition: all var(--transition-normal);
-webkit-transition: all var(--transition-normal);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
touch-action: manipulation;
}
.quiniela-help-banner:active {
transform: scale(0.98);
-webkit-transform: scale(0.98);
box-shadow: 0 2px 8px rgba(0, 168, 107, 0.2);
-webkit-box-shadow: 0 2px 8px rgba(0, 168, 107, 0.2);
}
.help-question {
font-size: 0.9375rem;
font-weight: 600;
color: var(--blanco);
line-height: 1.4;
text-align: center;
}
.btn-help-icon {
font-size: 2rem;
margin-top: var(--spacing-xs);
}
.action-btn .action-label,
.action-btn .action-value,
.btn-clear,
.btn-random,
.btn-save,
.btn-send {
font-size: 0.875rem !important;
font-weight: 600 !important;
}
/* ========================================
Esto de abajo trabaja en la seccion de Jugadas de mis quinielas
======================================== */
.jugada-card .quiniela-pick {
min-width: 30px;
height: 30px;
border-radius: 6px;
border: 1px solid #000000;
background: #ffffff;
color: #111827;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 800;
}
.quiniela-pick.correct {
background: #065f46;
color: #ffffff;
border-color: #065f46;
}
.quiniela-pick.incorrect {
background: #991b1b;
color: #fef2f2;
border-color: #991b1b;
}
#pageResultados {
padding-top: 0px;
background: #ffffff;
min-height: auto;
}
#pageResultados .page-title {
margin-bottom: -5px;
color: #111827;
}
#pageResultados .page-subtitle {
margin-bottom: -15px;
color: #6b7280;
}
#pageResultados .tab-container {
display: flex;
gap: 0;
margin: 0;
padding: 0;
width: 100%;
justify-content: space-between;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
background: #006847;
}
#pageResultados .tab-btn {
flex: 1;
max-width: none;
padding: 0.75rem 0.25rem;
background: transparent;
color: #ffffff;
border: none;
border-bottom: 3px solid transparent;
font-size: 0.75rem;
font-weight: 700;
}
#pageResultados .tab-btn.active {
color: #FFD700;
border-bottom: 3px solid #FFD700;
}
#pageResultados .tab-btn:first-child {
flex: 0;
-webkit-flex: 0;
padding-right: 12px;
}
.my-quinielas-list {
padding: 14px;
background: #f9fafb;
}
.jugada-card {
background: #ffffff;
padding: 14px;
border-radius: 14px;
margin-bottom: 14px;
border: 2px solid;
max-width: 580px;
width: 100%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
}
.jugada-card.jugando {
border-color: #059669;
background: linear-gradient(135deg, #d1fae5 0%, #ffffff 100%);
background: -webkit-linear-gradient(135deg, #d1fae5 0%, #ffffff 100%);
box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}
.jugada-card.no-jugando {
border-color: #dc2626;
background: linear-gradient(135deg, #fee2e2 0%, #ffffff 100%);
background: -webkit-linear-gradient(135deg, #fee2e2 0%, #ffffff 100%);
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}
.jugada-card:active {
transform: scale(0.98);
-webkit-transform: scale(0.98);
}
.jugada-header {
display: flex;
display: -webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
align-items: flex-start;
-webkit-align-items: flex-start;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid #e5e7eb;
}
.jugada-header.jugando {
background: #ecfdf5;
border-radius: 10px;
padding: 8px 10px;
margin: -6px -6px 8px -6px;
}
.jugada-header.no-jugando {
background: #fef2f2;
border-radius: 10px;
padding: 8px 10px;
margin: -6px -6px 8px -6px;
}
.jugada-info {
flex: 1;
-webkit-flex: 1;
}
.jugada-status {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
align-items: flex-end;
-webkit-align-items: flex-end;
gap: 3px;
}
.status-badge {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: 18px;
font-size: 0.65rem;
font-weight: 700;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.status-badge.jugando {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
background: -webkit-linear-gradient(135deg, #059669 0%, #047857 100%);
color: white;
}
.status-badge.no-jugando {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
background: -webkit-linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
color: white;
}
.jugada-name {
font-size: 0.85rem;
color: #111827;
font-weight: 700;
margin-bottom: 2px;
line-height: 1.2;
}
.jugada-vendedor {
font-size: 0.7rem;
color: #6b7280;
font-weight: 500;
margin-bottom: 1px;
line-height: 1.2;
}
.jugada-folio {
font-size: 0.7rem;
color: #6b7280;
font-weight: 500;
margin-bottom: 1px;
line-height: 1.2;
}
.jugada-jornada {
font-size: 0.7rem;
color: #6b7280;
font-weight: 500;
line-height: 1.2;
}
.jugada-date {
font-size: 0.7rem;
color: #6b7280;
font-weight: 500;
margin-top: 1px;
line-height: 1.2;
}
.jugada-card .quiniela-row {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 1px;
padding: 1px 3px;
background: transparent;
}
.jugada-card .quiniela-team {
display: flex;
align-items: center;
gap: 5px;
flex: 1;
}
.jugada-card .quiniela-team img {
width: 20px;
height: 20px;
object-fit: contain;
flex-shrink: 0;
}
.jugada-card .quiniela-team span {
font-size: 0.75rem;
font-weight: 700;
color: #111827;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-puntos {
border: none;
padding: 10px 14px;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 800;
width: 100%;
margin-top: 6px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
letter-spacing: 0.5px;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
cursor: default;
}
.jugada-card.jugando .btn-puntos {
background: linear-gradient(135deg, #006847 0%, #004d35 100%);
background: -webkit-linear-gradient(135deg, #006847 0%, #004d35 100%);
color: white;
}
.jugada-card.no-jugando .btn-puntos {
background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
background: -webkit-linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
color: #fef2f2;
}
.btn-puntos:active {
transform: scale(0.97);
-webkit-transform: scale(0.97);
}
.empty-state {
text-align: center;
padding: 60px 20px;
background: white;
border-radius: 16px;
margin: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.empty-icon {
font-size: 4rem;
display: block;
margin-bottom: 16px;
opacity: 0.6;
}
.empty-state p {
color: #6b7280;
margin-bottom: 20px;
font-size: 0.95rem;
}
.empty-state .btn-primary {
background: linear-gradient(135deg, #006847 0%, #004d35 100%);
background: -webkit-linear-gradient(135deg, #006847 0%, #004d35 100%);
color: white;
padding: 12px 24px;
border-radius: 10px;
border: none;
font-weight: 700;
font-size: 0.9rem;
box-shadow: 0 4px 12px rgba(0, 104, 71, 0.3);
}
/* ========================================
Esto de abajo trabaja en la lista oficial
======================================== */
.match-header .match-vs {
font-size: 0.48rem; 
opacity: 0.85;
color: #FFD700;
}
.table-container {
background: #000000;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
border: 1px solid #C8102E;
margin-bottom: 1rem;
width: 100%;
max-width: 100%;
}
#pageResultados,
#pageResultados .content-inner {
padding-left: 0;
padding-right: 0;
background: #000000;
}
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #FFD700 #000000;
background: #000000;
}
.table-wrapper::-webkit-scrollbar {
height: 4px;
}
.table-wrapper::-webkit-scrollbar-track {
background: #000000;
}
.table-wrapper::-webkit-scrollbar-thumb {
background: #FFD700;
border-radius: 2px;
}
.results-table {
width: 100%;
min-width: 100%;
border-collapse: collapse;
font-size: 0.5rem;
text-align: center;
background: #000000;
}
.results-table thead {
background: linear-gradient(135deg, #006847 0%, #C8102E 100%);
background: -webkit-linear-gradient(135deg, #006847 0%, #C8102E 100%);
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 10;
}
.results-table th {
padding: 0.18rem 0.01rem;
font-size: 0.44rem;
font-weight: 700;
letter-spacing: 0;
color: #ffffff;
text-align: center;
border-bottom: 2px solid #FFD700;
line-height: 1.05;
}
.results-table td {
padding: 0.14rem 0.01rem;
border-bottom: 1px solid rgba(200, 16, 46, 0.2);
font-size: 0.5rem;
}
.results-table tbody tr {
transition: background 0.2s ease;
-webkit-transition: background 0.2s ease;
background: #000000;
}
.results-table tbody tr:hover {
background: rgba(255, 215, 0, 0.08);
}
.results-table tbody tr:nth-child(even) {
background: rgba(0, 104, 71, 0.05);
}
.results-table tbody tr:nth-child(even):hover {
background: rgba(255, 215, 0, 0.08);
}
.match-header {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
align-items: center;
-webkit-align-items: center;
gap: 0;
line-height: 0.9;
}
.match-logo {
width: 16px;
height: 16px;
object-fit: contain;
-o-object-fit: contain;
}
.col-position {
width: 28px;
min-width: 28px;
max-width: 28px;
}
.col-name {
min-width: 72px;
max-width: 86px;
}
.col-vendor {
min-width: 62px;
max-width: 76px;
}
.col-match {
width: 18px;
min-width: 18px;
max-width: 18px;
}
.col-points {
width: 26px;
min-width: 26px;
max-width: 26px;
}
.results-table td.col-name,
.results-table td.col-vendor {
text-align: center;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.results-table td.col-name {
font-size: 0.5rem;
color: #ffffff;
}
.results-table td.col-vendor {
font-size: 0.48rem;
color: #c9d1d9;
}
.results-table td.col-folio {
color: #ffffff;
}
.result-cell {
width: 12px;
height: 12px;
border-radius: 2px;
display: inline-flex;
display: -webkit-inline-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
font-weight: 700;
font-size: 0.44rem;
margin: auto;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.result-cell.correct {
background: linear-gradient(135deg, #006847 0%, #00AB66 100%);
background: -webkit-linear-gradient(135deg, #006847 0%, #00AB66 100%);
color: #ffffff;
}
.result-cell.incorrect {
background: linear-gradient(135deg, #9D0A0E 0%, #C8102E 100%);
background: -webkit-linear-gradient(135deg, #9D0A0E 0%, #C8102E 100%);
color: #ffffff;
border: 1px solid #8B0000;
}
.result-cell.pending {
background: #2d2d2d;
color: #888888;
border: 1px solid #444444;
}
.points-cell {
font-weight: 800;
font-size: 0.58rem;
padding: 0.08rem 0.16rem;
border-radius: 4px;
display: inline-block;
min-width: 20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.points-gold {
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
background: -webkit-linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
color: #000000;
border: 2px solid #FFD700;
animation: pulse-gold 2s infinite;
-webkit-animation: pulse-gold 2s infinite;
}
.points-silver {
background: linear-gradient(135deg, #E8E8E8 0%, #C0C0C0 100%);
background: -webkit-linear-gradient(135deg, #E8E8E8 0%, #C0C0C0 100%);
color: #000000;
border: 2px solid #A8A8A8;
}
.points-normal {
background: rgba(0, 104, 71, 0.2);
color: #ffffff;
border: 1px solid rgba(200, 16, 46, 0.3);
}
@keyframes pulse-gold {
0%, 100% {
box-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
-webkit-box-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}
50% {
box-shadow: 0 0 12px rgba(255, 215, 0, 1);
-webkit-box-shadow: 0 0 12px rgba(255, 215, 0, 1);
}
}
@-webkit-keyframes pulse-gold {
0%, 100% {
box-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
-webkit-box-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}
50% {
box-shadow: 0 0 12px rgba(255, 215, 0, 1);
-webkit-box-shadow: 0 0 12px rgba(255, 215, 0, 1);
}
}
@media (max-width: 600px) {
.table-container {
width: 100%;
max-width: 100%;
}
.results-table {
width: 100%;
min-width: 100%;
font-size: 0.48rem;
}
.results-table th {
font-size: 0.42rem;
padding: 0.16rem 0.005rem;
}
.results-table td {
font-size: 0.48rem;
padding: 0.14rem 0.005rem;
}
.match-logo {
width: 14px;
height: 14px;
}
.match-vs {
font-size: 0.48rem;
}
.col-name {
min-width: 68px;
max-width: 82px;
}
.col-vendor {
min-width: 60px;
max-width: 74px;
}
.col-match {
width: 16px;
min-width: 16px;
max-width: 16px;
}
.col-position {
width: 28px;
min-width: 28px;
max-width: 28px;
}
.col-points {
width: 26px;
min-width: 26px;
max-width: 26px;
}
.result-cell {
width: 11px;
height: 11px;
font-size: 0.42rem;
}
.points-cell {
font-size: 0.55rem;
min-width: 18px;
}
}
.results-table th,
.results-table td {
text-align: center;
}
.results-table td.col-name,
.results-table td.col-vendor {
text-align: center;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.results-table td.col-folio {
text-align: center;
color: #ffffff;
}
.col-folio {
width: 32px;
min-width: 32px;
max-width: 32px;
}
/* ========================================
Esto de abajo trabaja en los primeros y segundos lugares de mis quinielas
======================================== */
.special-page {
padding: 2rem 1rem;
text-align: center;
background: #006847;
}
.special-header {
margin-bottom: 1.5rem;
}
.winner-count {
font-size: 5rem;
font-weight: 800;
margin: 1.5rem 0 1rem 0;
display: block;
}
.gold-theme .winner-count {
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
}
.silver-theme .winner-count {
background: linear-gradient(135deg, #E8E8E8 0%, #A8A8A8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 30px rgba(192, 192, 192, 0.5);
}
.winner-label {
font-size: 1.3rem;
text-transform: none;
letter-spacing: 1px;
font-weight: 700;
display: block;
margin-top: 0.5rem;
}
.gold-theme .winner-label {
color: #FFD700;
text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}
.silver-theme .winner-label {
color: #C0C0C0;
text-shadow: 0 0 15px rgba(192, 192, 192, 0.3);
}
.medal-container {
margin: 1.5rem auto 1.5rem auto;
display: flex;
justify-content: center;
animation: medalFloat 3s ease-in-out infinite;
}
.medal-sticker {
font-size: 120px;
display: block;
text-align: center;
line-height: 1;
}
.gold-theme .medal-sticker {
filter: drop-shadow(0 8px 20px rgba(255, 215, 0, 0.7));
}
.silver-theme .medal-sticker {
filter: drop-shadow(0 8px 20px rgba(192, 192, 192, 0.6));
}
@keyframes medalFloat {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
}
@-webkit-keyframes medalFloat {
0%, 100% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
50% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
.special-title-yellow {
font-size: 1.6rem;
margin-bottom: 0;
padding-bottom: 1rem;
color: #FFD700;
text-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
font-family: var(--font-family);
font-weight: 800;
text-align: center;
line-height: 1.3;
border-bottom: 2px solid rgba(255, 215, 0, 0.3);
}
.special-title-silver {
font-size: 1.6rem;
margin-bottom: 0;
padding-bottom: 1rem;
color: #E8E8E8;
text-shadow: 0 0 25px rgba(192, 192, 192, 0.5);
font-family: var(--font-family);
font-weight: 800;
text-align: center;
line-height: 1.3;
border-bottom: 2px solid rgba(192, 192, 192, 0.3);
}
/* ========================================
Esto de abajo trabaja en el verificador de mi quiniela
======================================== */
#tabVerificar .main {
padding: 1rem;
background: #006847;
min-height: auto; 
}
.search-container {
width: 100%;
padding: 0;
margin: 0 0 1.5rem 0;
}
.search-box {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
}
.search-input {
flex: 1;
padding: 0.75rem 1rem;
border-radius: 10px;
border: 2px solid #ffffff;
background: #ffffff;
color: #000000;
font-size: 16px;
font-weight: 600;
min-height: 48px;
min-width: 0;
}
.search-input:focus {
outline: none;
border-color: #FFD700;
box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3);
}
.search-input::placeholder {
color: #6b7280;
font-weight: 500;
}
.search-btn {
padding: 0.75rem 1.5rem;
border-radius: 10px;
border: none;
background: #FFD700;
color: #000000;
font-weight: 700;
font-size: 0.875rem;
min-height: 48px;
white-space: nowrap;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}
.search-btn:active {
transform: scale(0.98);
box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}
.search-results {
width: 100%;
padding: 0;
}
.no-results {
text-align: center;
padding: 3rem 1rem;
color: #ffffff;
}
.no-results-icon {
font-size: 5rem;
margin-bottom: 1rem;
display: block;
opacity: 0.8;
}
.no-results p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
font-weight: 600;
}
.verify-card {
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: 12px;
padding: 1rem;
margin-bottom: 1rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.verify-card.first-place {
border-color: #FFD700;
border-width: 3px;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}
.verify-card.second-place {
border-color: #C0C0C0;
border-width: 3px;
box-shadow: 0 0 20px rgba(192, 192, 192, 0.5);
}
.verify-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid #f3f4f6;
}
.verify-header h4 {
font-size: 0.9rem;
font-weight: 800;
margin: 0 0 0.25rem 0;
color: #111827;
}
.verify-header p {
font-size: 0.7rem;
color: #6b7280;
margin: 0;
font-weight: 600;
}
.verify-points {
background: #006847;
padding: 0.5rem 1rem;
border-radius: 8px;
}
.verify-points span {
font-size: 1rem;
font-weight: 800;
color: #ffffff;
}
.verify-predictions {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 0.75rem;
justify-content: center;
}
.verify-item {
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
background: #f9fafb;
border-radius: 6px;
text-align: center;
border: 2px solid #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.verify-item.correct {
border-color: #006847;
background: #006847;
}
.verify-item.incorrect {
border-color: #dc2626;
background: #dc2626;
}
.match-label {
display: none;
}
.match-result {
display: block;
font-size: 0.65rem;
font-weight: 800;
color: #111827;
}
.verify-item.correct .match-result {
color: #ffffff;
}
.verify-item.incorrect .match-result {
color: #ffffff;
}
.verify-folio {
text-align: center;
font-size: 0.75rem;
color: #6b7280;
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 2px solid #f3f4f6;
font-weight: 600;
}
/* ========================================
Esto de abajo trabaja en el simulador de resultados
======================================== */
#tabSimulador {
padding-left: 0 !important;
padding-right: 0 !important;
background: #006847;
}
#tabSimulador .main {
padding-top: 1rem !important;
padding-bottom: 2rem !important;
padding-left: 0 !important;
padding-right: 0 !important;
background: #006847;
}
.teams-header {
text-align: center;
padding: 0 1rem;
margin-bottom: 0.25rem; 
}
.teams-header .section-title {
font-size: 1.3rem;
margin-bottom: 0.15rem; 
color: #FFD700; 
font-weight: 800;
text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}
.teams-header .text-center {
font-size: 0.75rem;
color: #FFD700; 
font-weight: 700;
margin-bottom: 0.5rem;
}
.simulation-shell {
padding: 0 1rem;
margin-bottom: 1rem;
}
.simulation-container {
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.simulation-grid {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
gap: 0;
border: 2px solid #000000;
border-radius: 8px;
overflow: hidden;
}
.sim-match-card {
background: #ffffff;
border: none;
border-bottom: 1px solid #e5e7eb;
border-radius: 0;
padding: 8px;
}
.sim-match-card:last-child {
border-bottom: none;
}
.sim-match-row {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
gap: 4px;
}
.sim-result-btn {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
border: 1px solid #000000;
border-radius: 6px;
background: transparent;
color: #000000;
font-weight: 700;
font-size: 0.8rem;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
flex-shrink: 0;
padding: 0;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
}
.sim-result-btn.selected {
background: #006847;
border-color: #006847;
color: #ffffff;
font-weight: 800;
}
.sim-result-btn:active {
transform: scale(0.95);
-webkit-transform: scale(0.95);
}
.sim-team-inline {
flex: 1;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
gap: 6px;
min-width: 0;
}
.sim-team-inline img {
width: 20px;
height: 20px;
object-fit: contain;
-o-object-fit: contain;
flex-shrink: 0;
}
.sim-team-inline span {
font-size: 0.75rem;
font-weight: 600;
color: #000000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sim-team-inline.right {
justify-content: flex-end;
-webkit-justify-content: flex-end;
}
.sim-team-inline.right span {
text-align: right;
}
.simulation-actions {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
margin-top: 1rem;
}
.sim-btn {
padding: 1rem 2rem; 
border-radius: 10px; 
border: none;
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); 
background: -webkit-linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
color: #000000; 
font-weight: 800; 
font-size: 0.95rem; 
min-height: 52px; 
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4); 
}
.sim-btn:active {
background: linear-gradient(135deg, #FFA500 0%, #FF8C00 100%); 
background: -webkit-linear-gradient(135deg, #FFA500 0%, #FF8C00 100%);
transform: scale(0.98);
-webkit-transform: scale(0.98);
box-shadow: 0 2px 8px rgba(255, 215, 0, 0.5);
}
.sim-btn-secondary {
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); 
background: -webkit-linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
color: #000000;
}
.sim-btn-secondary:active {
background: linear-gradient(135deg, #FFA500 0%, #FF8C00 100%);
background: -webkit-linear-gradient(135deg, #FFA500 0%, #FF8C00 100%);
}
.summary-cards {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
gap: 0.5rem; 
padding: 0 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.summary-card {
background: #1a1a1a;
border: 1px solid #333333;
border-radius: 8px;
padding: 0.4rem 0.6rem; 
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
align-items: center;
-webkit-align-items: center;
gap: 0.2rem; 
min-width: 75px; 
}
.summary-card.gold {
border-color: #FFD700;
background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, #1a1a1a 100%);
background: -webkit-linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, #1a1a1a 100%);
}
.summary-card.silver {
border-color: #C0C0C0;
background: linear-gradient(135deg, rgba(192, 192, 192, 0.1) 0%, #1a1a1a 100%);
background: -webkit-linear-gradient(135deg, rgba(192, 192, 192, 0.1) 0%, #1a1a1a 100%);
}
.summary-card.total {
border-color: #006847;
background: linear-gradient(135deg, rgba(0, 168, 107, 0.1) 0%, #1a1a1a 100%);
background: -webkit-linear-gradient(135deg, rgba(0, 168, 107, 0.1) 0%, #1a1a1a 100%);
}
.summary-icon {
font-size: 1.1rem;
}
.summary-label {
font-size: 0.6rem; 
color: #9ca3af;
text-transform: none;
font-weight: 600;
}
.summary-count {
font-size: 1.1rem;
font-weight: 700;
color: #ffffff;
}
#tabSimulador .section-title {
text-align: center;
font-size: 1.2rem;
margin-bottom: 1rem;
padding: 0 1rem;
color: #ffffff;
}
#tabSimulador .table-container {
background: #000000; 
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); 
-webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
border: 1px solid #C8102E;
margin: 0 0 1rem 0;
width: 100%;
}
#tabSimulador .table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #FFD700 #000000; 
width: 100%;
background: #000000; 
}
@media (max-width: 480px) {
.summary-cards {
gap: 0.5rem;
}
.summary-card {
min-width: 70px; 
padding: 0.35rem 0.5rem; 
}
.summary-icon {
font-size: 0.95rem; 
}
.summary-label {
font-size: 0.55rem; 
}
.summary-count {
font-size: 1rem; 
}
.sim-btn {
font-size: 0.875rem;
padding: 0.9rem 1.75rem;
}
.sim-result-btn {
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
font-size: 0.7rem;
}
.sim-team-inline span {
font-size: 0.7rem;
}
.sim-team-inline img {
width: 18px;
height: 18px;
}
.sim-match-card {
padding: 6px;
}
}
/* ========================================
Esto de abajo trabaja en el guardado de quinielas (Alerta navegacion privada)
======================================== */
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* ========================================
Esto de abajo trabaja en la ayuda de mi pagina
======================================== */
.page {
display: none;
}
.page.active {
display: block;
}
.help-hero {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
padding: var(--spacing-2xl) var(--spacing-lg);
position: relative;
overflow: hidden;
}
.help-hero-content {
max-width: 100%;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 2;
}
.help-hero-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-full);
color: var(--white);
font-size: 0.875rem;
font-weight: 500;
margin-bottom: var(--spacing-lg);
}
.help-hero-title {
font-size: 2rem;
font-weight: 800;
color: var(--white);
margin-bottom: var(--spacing-sm);
}
.help-hero-subtitle {
font-size: 1rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 400;
}
.help-section-header {
text-align: center;
margin-bottom: var(--spacing-xl);
}
.help-section-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: var(--spacing-xs);
}
.help-section-subtitle {
font-size: 0.9375rem;
color: var(--gray-500);
}
.quick-help {
padding: var(--spacing-2xl) var(--spacing-lg);
background: var(--white);
}
.help-cards {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
max-width: 100%;
margin: 0 auto;
}
.help-card {
background: var(--gray-50);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
cursor: pointer;
transition: all var(--transition-normal);
border: 1px solid var(--gray-200);
position: relative;
overflow: hidden;
}
.help-card:active {
transform: scale(0.98);
}
.help-card.active {
background: var(--white);
border-color: var(--primary);
box-shadow: var(--shadow-lg);
}
.help-card-icon {
width: 48px;
height: 48px;
background: var(--primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
margin-bottom: var(--spacing-md);
transition: all var(--transition-normal);
}
.help-card.active .help-card-icon {
background: var(--primary-light);
transform: scale(1.05);
}
.help-card-title {
font-size: 1rem;
font-weight: 600;
color: var(--gray-900);
margin-bottom: var(--spacing-xs);
}
.help-card-preview {
font-size: 0.875rem;
color: var(--gray-500);
transition: opacity var(--transition-normal);
}
.help-card.active .help-card-preview {
opacity: 0;
height: 0;
margin: 0;
}
.help-card-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.help-card.active .help-card-content {
max-height: 500px;
padding-top: var(--spacing-md);
}
.help-card-content p {
font-size: 0.9375rem;
color: var(--gray-600);
margin-bottom: var(--spacing-md);
}
.help-card-content ul {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.help-card-content li {
font-size: 0.875rem;
color: var(--gray-600);
padding-left: var(--spacing-lg);
position: relative;
}
.help-card-content li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 6px;
height: 6px;
background: var(--primary);
border-radius: 50%;
}
.help-card-arrow {
position: absolute;
right: var(--spacing-lg);
top: var(--spacing-lg);
color: var(--gray-400);
transition: transform var(--transition-normal);
}
.help-card.active .help-card-arrow {
transform: rotate(180deg);
color: var(--primary);
}
.help-deposits {
padding: var(--spacing-2xl) var(--spacing-lg);
background: linear-gradient(180deg, var(--gray-50) 0%, var(--gray-100) 100%);
}
.help-deposits-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
background: var(--primary);
color: var(--white);
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
margin-bottom: var(--spacing-md);
letter-spacing: 0.5px;
}
.help-deposit-cards {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
max-width: 100%;
margin: 0 auto;
}
.help-deposit-card {
background: var(--white);
border-radius: var(--radius-xl);
padding: var(--spacing-lg);
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
transition: transform var(--transition-normal);
}
.help-deposit-card:active {
transform: scale(0.98);
}
.help-deposit-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.help-deposit-card--bbva::before {
background: #004481;
}
.help-deposit-card--banorte::before {
background: #ed1c24;
}
.help-deposit-card--oxxo::before {
background: #ffd100;
}
.help-deposit-card--mercadopago::before {
background: #009ee3;
}
.help-deposit-card--azteca::before {
background: #00923f;
}
.help-deposit-card--santander::before {
background: #EC0000;
}
.help-deposit-card--bancoppel::before {
background: #ff6600;
}
.help-deposit-card--spin::before {
background: #6f42c1;
}

.help-bank-logo--mercadopago {
color: #009ee3;
font-size: 1.1rem;
}
.help-bank-logo--azteca {
color: #00923f;
}
.help-bank-logo--santander {
color: #EC0000;
}
.help-bank-logo--bancoppel {
color: #ff6600;
}
.help-bank-logo--spin {
color: #ffffff;
background: #6f42c1;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-sm);
font-size: 0.95rem;
}
.help-deposit-card__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-lg);
}
.help-deposit-card__logo {
display: flex;
align-items: center;
}
.help-bank-logo {
font-weight: 800;
font-size: 1.25rem;
letter-spacing: -0.5px;
}
.help-bank-logo--bbva {
color: #004481;
}
.help-bank-logo--banorte {
color: #ed1c24;
}
.help-bank-logo--oxxo {
color: var(--gray-900);
background: #ffd100;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-sm);
}
.help-deposit-card__security {
width: 28px;
height: 28px;
background: var(--gray-100);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
}
.help-deposit-card__body {
margin-bottom: var(--spacing-lg);
}
.help-deposit-card__label {
font-size: 0.75rem;
color: var(--gray-500);
letter-spacing: 0.5px;
margin-bottom: var(--spacing-xs);
}
.help-deposit-card__number {
font-size: 1.25rem;
font-weight: 600;
color: var(--gray-900);
letter-spacing: 2px;
margin-bottom: var(--spacing-md);
font-family: "Courier New", monospace;
}
.help-deposit-card__clabe {
font-size: 1rem;
font-weight: 500;
color: var(--gray-700);
letter-spacing: 1px;
font-family: "Courier New", monospace;
}
.help-deposit-card__sublabel {
font-size: 0.8125rem;
color: var(--gray-500);
margin-top: var(--spacing-sm);
}
.help-deposit-card__footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--spacing-md);
border-top: 1px solid var(--gray-200);
}
.help-deposit-card__name {
font-size: 0.875rem;
color: var(--gray-600);
font-weight: 500;
}
.help-deposit-card__copy {
display: flex;
align-items: center;
gap: var(--spacing-sm);
background: var(--primary);
color: var(--white);
border: none;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-md);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
font-family: inherit;
min-height: 44px;
}
.help-deposit-card__copy:active {
background: var(--primary-dark);
transform: scale(0.95);
}
.help-deposit-tip {
display: flex;
gap: var(--spacing-md);
background: var(--white);
padding: var(--spacing-md);
border-radius: var(--radius-md);
margin-top: var(--spacing-xl);
max-width: 100%;
border-left: 3px solid var(--primary);
}
.help-deposit-tip svg {
flex-shrink: 0;
color: var(--primary);
}
.help-deposit-tip p {
font-size: 0.875rem;
color: var(--gray-600);
line-height: 1.5;
}
.help-steps {
padding: var(--spacing-2xl) var(--spacing-lg);
background: var(--white);
}
.help-steps-container {
max-width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0;
}
.help-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
padding-bottom: var(--spacing-xl);
}
.help-step__number {
width: 32px;
height: 32px;
background: var(--primary);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
font-weight: 700;
margin-bottom: var(--spacing-md);
position: relative;
z-index: 2;
}
.help-step__icon {
width: 64px;
height: 64px;
background: var(--gray-100);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
margin-bottom: var(--spacing-md);
}
.help-step__icon--trophy {
background: var(--accent);
color: var(--white);
}
.help-step--final .help-step__number {
background: var(--accent);
}
.help-step__title {
font-size: 1.125rem;
font-weight: 600;
color: var(--gray-900);
margin-bottom: var(--spacing-xs);
}
.help-step__description {
font-size: 0.875rem;
color: var(--gray-500);
max-width: 250px;
}
.help-step__line {
position: absolute;
bottom: 0;
left: 50%;
width: 2px;
height: var(--spacing-xl);
background: linear-gradient(180deg, var(--primary) 0%, var(--gray-200) 100%);
transform: translateX(-50%);
}
.help-step--final .help-step__line,
.help-step:last-child .help-step__line {
display: none;
}
.help-contact {
padding: var(--spacing-3xl) var(--spacing-lg);
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
}
.help-contact-content {
max-width: 100%;
margin: 0 auto;
text-align: center;
}
.help-contact-icon {
width: 80px;
height: 80px;
background: #25d366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
margin: 0 auto var(--spacing-lg);
transform: translateY(10px); 
}
.help-contact-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--white);
margin-bottom: var(--spacing-xs);
}
.help-contact-subtitle {
font-size: 1rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: var(--spacing-xl);
}
.help-whatsapp-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-md);
background: #25d366;
color: var(--white);
text-decoration: none;
padding: var(--spacing-md) var(--spacing-2xl);
border-radius: var(--radius-full);
font-size: 1.125rem;
font-weight: 600;
transition: all var(--transition-fast);
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
min-height: 48px;
}
.help-whatsapp-button:active {
transform: scale(0.95);
background: #1fb855;
}
.help-faq {
padding: var(--spacing-2xl) var(--spacing-lg);
background: var(--gray-50);
}
.help-faq-list {
max-width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.help-faq-item {
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--gray-200);
}
.help-faq-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-lg);
background: none;
border: none;
cursor: pointer;
text-align: left;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
color: var(--gray-900);
transition: background var(--transition-fast);
min-height: 48px;
}
.help-faq-question:active {
background: var(--gray-50);
}
.help-faq-icon {
flex-shrink: 0;
color: var(--gray-400);
transition: transform var(--transition-normal), color var(--transition-normal);
}
.help-faq-item.active .help-faq-icon {
transform: rotate(45deg);
color: var(--primary);
}
.help-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.help-faq-item.active .help-faq-answer {
max-height: 300px;
}
.help-faq-answer p {
padding: 0 var(--spacing-lg) var(--spacing-lg);
font-size: 0.9375rem;
color: var(--gray-600);
line-height: 1.7;
}
.help-toast {
position: fixed;
bottom: var(--spacing-xl);
left: 50%;
transform: translateX(-50%) translateY(100px);
background: var(--gray-900);
color: var(--white);
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--radius-full);
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-size: 0.875rem;
font-weight: 500;
box-shadow: var(--shadow-xl);
z-index: 1000;
opacity: 0;
transition: all var(--transition-normal);
}
.help-toast.show {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.help-toast svg {
color: #25d366;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
}
}
#hero-ayuda {
margin-bottom: 0;
padding-bottom: 0.5rem;
}
#pageAyuda {
padding-top: 0;
}
.quick-help {
padding-top: 0.5rem;
margin-top: 0;
}
.help-section-header {
padding-top: 0;
margin-top: 0;
margin-bottom: 1rem;
}
.help-section-title {
margin-top: 0;
padding-top: 0;
}
.help-contact-icon {
width: 70px;
height: 70px;
}
.help-whatsapp-button {
font-size: 1rem;
}
.help-whatsapp-button svg {
order: 2;
}
.help-whatsapp-button span {
order: 1;
}
.help-contact-icon {
width: 60px;
height: 60px;
margin-bottom: var(--spacing-md);
}
/* ========================================
Esto de abajo trabaja en la seccion de administrador
======================================== */
.admin-root{
background:#fff;
color:#1f2937;
min-height:100vh;
padding-top:0;
padding-bottom:100px;
}
.admin-hero{
background:#006847;
padding:0.5rem 0.85rem;
position:relative;
overflow:hidden;
margin-top:0;
border-top:none;
}
.admin-hero .hero-content{
position:relative;
z-index:1;
max-width:100%;
margin:0 auto;
}
.admin-hero .hero-title{
font-size:1rem;
font-weight:900;
color:#fff;
margin-bottom:0.2rem;
line-height:1.2;
text-align:center;
}
.admin-hero .hero-subtitle{
font-size:0.7rem;
color:rgba(255,255,255,0.85);
margin-bottom:0.6rem;
text-align:center;
}
.hero-vendor{
font-size:0.7rem;
color:rgba(255,255,255,0.95);
text-align:center;
font-weight:600;
margin-top:0;
}
#admin-kpis{
margin-top:5px;
padding:0 1rem;
margin-bottom:0;
}
.admin-kpis .section-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:0;
}
.admin-kpis .section-title{
font-size:1.05rem;
font-weight:700;
color:#111827;
}
.admin-alerts{
padding:1rem;
display:flex;
flex-direction:column;
gap:0.5rem;
margin:-30px auto 0;
}
.admin-alerts .alert{
display:flex;
align-items:center;
gap:0.5rem;
padding:0.5rem 1rem;
border-radius:0.75rem;
background:#f9fafb;
border-left:4px solid #d1d5db;
box-shadow:0 1px 3px rgba(0,0,0,0.1);
cursor:pointer;
transition:all 0.2s ease;
}
.admin-alerts .alert:hover{
transform:translateX(2px);
box-shadow:0 2px 6px rgba(0,0,0,0.15);
}
.admin-alerts .alert--danger{
border-color:#ef4444;
background:#fef2f2;
}
.admin-alerts .alert--danger .alert__icon{
color:#ef4444;
}
.admin-alerts .alert--success{
background:#f0fdf4;
border-left:4px solid #22c55e;
}
.admin-alerts .alert--success .alert__icon{
color:#22c55e;
}
.admin-alerts .alert--info{
background:#eff6ff;
border-left:4px solid #3b82f6;
}
.admin-alerts .alert--info .alert__icon{
color:#3b82f6;
}
.admin-alerts .alert--neutral{
background:#f9fafb;
border-left:4px solid #6b7280;
}
.admin-alerts .alert--neutral .alert__icon{
color:#6b7280;
}
.admin-alerts .alert__icon{
color:inherit;
flex-shrink:0;
}
.admin-alerts .alert__content{
flex:1;
}
.admin-alerts .alert__title{
font-size:0.85rem;
font-weight:600;
color:#111827;
margin:0;
}
.admin-alerts .alert__title span{
font-weight:800;
}
.admin-alerts .alert__text{
font-size:0.72rem;
color:#6b7280;
margin:2px 0 0;
}
.admin-alerts .alert__action{
width:32px;
height:32px;
border:none;
border-radius:0.25rem;
background:#fff;
color:#6b7280;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
margin-left:auto;
transition:all 0.2s ease;
box-shadow:0 1px 2px rgba(0,0,0,0.05);
flex-shrink:0;
}
.admin-alerts .alert__action:hover{
background:#f3f4f6;
color:#111827;
}
.admin-current-week{
padding:0 1rem;
margin-top:-40px;
margin-bottom:1.5rem;
}
.admin-current-week .section-header{
display:flex;
align-items:center;
justify-content:center;
margin-bottom:-1rem;
margin-top:30px;
}
.admin-current-week .section-title{
font-size:1.05rem;
font-weight:700;
color:#111827;
}
.admin-current-week .section-badge{
font-size:0.65rem;
font-weight:600;
letter-spacing:0.05em;
padding:0.15rem 0.5rem;
border-radius:9999px;
background:#fee2e2;
color:#dc2626;
}
.admin-current-week .week-card{
background:#fff;
border-radius:1rem;
padding:1.5rem 1.25rem 1.25rem;
border:1px solid #e5e7eb;
box-shadow:0 1px 3px rgba(0,0,0,0.1);
}
.admin-current-week .week-card__header{
display:flex;
align-items:center;
gap:1rem;
margin-bottom:1.25rem;
margin-top:-15px;
}
.admin-current-week .week-card__jornada{
width:56px;
height:56px;
border-radius:0.75rem;
background:#22c55e;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:#fff;
}
.admin-current-week .week-card__number{
font-size:1.4rem;
font-weight:900;
}
.admin-current-week .week-card__range{
font-size:0.95rem;
font-weight:600;
color:#111827;
}
.admin-current-week .week-card__status{
font-size:0.85rem;
color:#f59e0b;
font-weight:500;
}
.admin-current-week .progress-bar{
height:6px;
background:#e5e7eb;
border-radius:9999px;
overflow:hidden;
margin-bottom:0.25rem;
}
.admin-current-week .progress-bar__fill{
height:100%;
width:var(--progress);
background:linear-gradient(90deg,#22c55e,#16a34a);
}
.admin-current-week .progress-labels{
display:flex;
justify-content:space-between;
font-size:0.6rem;
color:#6b7280;
}
.admin-filters{
padding:0;
margin-bottom:1rem;
background:#f9fafb;
border-bottom:1px solid #e5e7eb;
}
.admin-filters .filters-bar{
width:100%;
padding:0;
background:transparent;
}
.admin-filters .filter-buttons{
display:flex;
gap:0;
width:100%;
}
.filter-emoji{
display:inline-block;
margin-left:4px;
font-size:0.85rem;
}
.filter-btn{
display:flex;
align-items:center;
justify-content:center;
gap:4px;
padding:12px 8px;
border:none;
background:transparent;
color:#6b7280;
font-size:0.7rem;
font-weight:600;
cursor:pointer;
transition:all 0.2s ease;
flex:1;
border-bottom:3px solid transparent;
}
.filter-btn:hover{
background:#fff;
color:#f59e0b;
}
.filter-btn.active{
background:#fff;
color:#f59e0b;
border-bottom:3px solid #f59e0b;
}
.filter-btn.active .filter-emoji{
filter:none;
}
.admin-quinielas-list{
padding:0;
margin-bottom:2rem;
margin-top:0.5rem;
}
.admin-quinielas-list .section-header{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
margin-bottom:1rem;
padding:0 1rem;
}
.admin-quinielas-list .section-title{
font-size:1.05rem;
font-weight:700;
color:#111827;
margin:0;
}
.admin-quinielas-list .section-count{
color:#f59e0b;
font-weight:600;
font-size:0.9rem;
}
.table-container{
width:100%;
overflow-x:auto;
padding:0;
margin-bottom:0;
-webkit-overflow-scrolling:touch;
background:#000000;
border-radius:8px;
box-shadow:0 2px 12px rgba(0,0,0,0.5);
border:1px solid #C8102E;
}
.results-table{
width:100%;
border-collapse:collapse;
background:#000000;
border-radius:0.5rem 0.5rem 0 0;
table-layout:fixed;
border:none;
}
.results-table thead{
background:linear-gradient(135deg,#006847 0%,#C8102E 100%);
border-bottom:2px solid #FFD700;
position:sticky;
top:0;
z-index:10;
}
.results-table th{
padding:6px 2px;
text-align:center;
font-size:0.55rem;
font-weight:700;
color:#ffffff;
white-space:nowrap;
border-bottom:2px solid #FFD700;
}
.results-table th.col-name{
width:18%;
text-align:left;
padding-left:4px;
}
.results-table th.col-match{
width:6.2%;
font-size:0.5rem;
}
.results-table th.col-checkbox{
width:6%;
}
.results-table tbody tr{
border-bottom:1px solid rgba(200,16,46,0.2);
transition:background 0.2s ease;
background:#000000;
}
.results-table tbody tr:hover{
background:rgba(255,215,0,0.08);
}
.results-table tbody tr:nth-child(even){
background:rgba(0,104,71,0.05);
}
.results-table tbody tr:nth-child(even):hover{
background:rgba(255,215,0,0.08);
}
.results-table tbody tr.selected{
background:rgba(255,215,0,0.15);
border-right:3px solid #FFD700;
}
.results-table td{
padding:6px 2px;
font-size:0.62rem;
color:#ffffff;
text-align:center;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.results-table td.col-name{
font-weight:600;
color:#ffffff;
text-align:left;
padding-left:4px;
}
.results-table td.col-match{
font-size:0.65rem;
font-weight:700;
color:#ffffff;
}
.table-checkbox{
width:18px;
height:18px;
border:2px solid #FFD700;
border-radius:0.25rem;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all 0.2s ease;
font-size:0.75rem;
user-select:none;
background:#2d2d2d;
color:transparent;
}
.table-checkbox:hover{
border-color:#FFD700;
background:#444444;
}
.results-table tbody tr.selected .table-checkbox{
background:linear-gradient(135deg,#FFD700 0%,#FFA500 100%);
border-color:#FFD700;
color:#000000;
font-weight:900;
}
.admin-actions{
display:flex;
gap:0.75rem;
padding:1rem;
background:#000000;
border:1px solid #C8102E;
border-top:none;
border-radius:0 0 0.5rem 0.5rem;
margin-bottom:2rem;
}
.admin-actions__btn{
flex:1;
padding:0.85rem;
border:none;
border-radius:0.5rem;
font-size:0.8rem;
font-weight:700;
cursor:pointer;
transition:all 0.2s ease;
display:flex;
align-items:center;
justify-content:center;
gap:0.5rem;
letter-spacing:0.5px;
}
.admin-actions__btn--reject{
background:#ef4444;
color:#fff;
}
.admin-actions__btn--reject:hover{
background:#dc2626;
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(239,68,68,0.5);
}
.admin-actions__btn--accept{
background:#22c55e;
color:#fff;
}
.admin-actions__btn--accept:hover{
background:#16a34a;
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(34,197,94,0.5);
}
.admin-toast{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%) translateY(100px);
display:flex;
align-items:center;
gap:0.5rem;
padding:0.5rem 1.25rem;
background:#fff;
color:#111827;
border-radius:9999px;
opacity:0;
pointer-events:none;
transition:all 0.25s ease;
z-index:1000;
box-shadow:0 4px 12px rgba(0,0,0,0.2);
border:1px solid #e5e7eb;
}
.admin-toast.show{
opacity:1;
transform:translateX(-50%) translateY(0);
pointer-events:auto;
}
.admin-toast .toast__icon{
width:22px;
height:22px;
border-radius:9999px;
background:#22c55e;
display:flex;
align-items:center;
justify-content:center;
}
.admin-toast .toast__message{
font-size:0.85rem;
font-weight:600;
color:#111827;
}
#pendientesTableBody tr.empty-row {
background: transparent !important;
}
#pendientesTableBody tr.empty-row td {
background: transparent !important;
}
#pendientesTableBody tr {
background: transparent;
}
.btn-confirmar,
.btn-rechazar {
font-size: 0.4rem;
padding: 2px 4px;
border-radius: 3px;
border: none;
cursor: pointer;
font-weight: 600;
transition: all 0.2s ease;
white-space: nowrap;
min-height: 18px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.btn-confirmar {
background: linear-gradient(135deg, #16a34a 0%, #059669 100%);
color: #ffffff;
}
.btn-confirmar:active {
transform: scale(0.95);
background: #059669;
}
.btn-rechazar {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
color: #ffffff;
}
.btn-rechazar:active {
transform: scale(0.95);
background: #b91c1c;
}
.col-actions {
display: flex;
gap: 3px;
justify-content: center;
align-items: center;
padding: 2px;
}
@media (max-width: 480px) {
.btn-confirmar,
.btn-rechazar {
font-size: 0.38rem;
padding: 1px 3px;
min-height: 16px;
}
}
/* ========================================
Esto de abajo trabaja en ocultar/mostrar 
======================================== */
.modal-overlay {
display: none !important;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
z-index: 10000;
align-items: center;
justify-content: center;
}
.modal-overlay.show {
display: flex !important;
}
.modal-box {
background: white;
border-radius: 12px;
padding: 30px;
max-width: 400px;
text-align: center;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.modal-icon {
margin-bottom: 20px;
}
.checkmark {
width: 80px;
height: 80px;
margin: 0 auto;
}
.checkmark-circle {
stroke: #4caf50;
stroke-width: 2;
fill: none;
animation: checkmarkCircle 0.6s ease-out;
}
.checkmark-check {
stroke: #4caf50;
stroke-width: 3;
stroke-linecap: round;
animation: checkmarkCheck 0.5s ease-out 0.3s both;
}
@keyframes checkmarkCircle {
0% {
stroke-dasharray: 0 157;
}
100% {
stroke-dasharray: 157 157;
}
}
@keyframes checkmarkCheck {
0% {
stroke-dasharray: 0 50;
}
100% {
stroke-dasharray: 50 50;
}
}
.modal-icon-rechazar {
margin-bottom: 20px;
}
.xmark {
width: 80px;
height: 80px;
margin: 0 auto;
}
.xmark-circle {
stroke: #f44336;
stroke-width: 2;
fill: none;
animation: xmarkCircle 0.6s ease-out;
}
.xmark-cross {
stroke: #f44336;
stroke-width: 3;
stroke-linecap: round;
animation: xmarkCross 0.5s ease-out 0.3s both;
}
@keyframes xmarkCircle {
0% {
stroke-dasharray: 0 157;
}
100% {
stroke-dasharray: 157 157;
}
}
@keyframes xmarkCross {
0% {
stroke-dasharray: 0 50;
opacity: 0;
}
100% {
stroke-dasharray: 50 50;
opacity: 1;
}
}
.modal-title {
font-size: 22px;
font-weight: 600;
margin-bottom: 10px;
color: #202124;
}
.modal-message {
font-size: 14px;
color: #5f6368;
margin-bottom: 24px;
}
.modal-actions {
display: flex;
gap: 10px;
justify-content: center;
}
.btn-modal {
padding: 10px 24px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.btn-cancelar {
background: #e8eaed;
color: #202124;
}
.btn-cancelar:hover {
background: #dadce0;
}
.btn-confirmar-modal {
background: #34a853;
color: white;
}
.btn-confirmar-modal:hover {
background: #2d8e43;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(52,168,83,0.3);
}
.btn-confirmar-modal:active {
transform: translateY(0);
}
.btn-rechazar-modal {
background: #f44336;
color: white;
}
.btn-rechazar-modal:hover {
background: #d32f2f;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(244,67,54,0.3);
}
.btn-rechazar-modal:active {
transform: translateY(0);
}
.btn-cancelar-rojo {
background: #e8eaed;
color: #202124;
}
.btn-cancelar-rojo:hover {
background: #dadce0;
}
/* ========================================
Esto de abajo trabaja en los modales para Whats app 
======================================== */
.modal-whatsapp {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
}
.modal-success {
background: white;
border-radius: 24px;
padding: 40px 30px;
max-width: 400px;
animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.whatsapp-animation {
position: relative;
margin: 0 auto 24px;
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.whatsapp-logo {
width: 100px;
height: 100px;
animation: bounceIn 0.8s ease;
}
.whatsapp-logo svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 8px 16px rgba(37, 211, 102, 0.3));
}
.rocket {
position: absolute;
top: -10px;
right: -10px;
font-size: 40px;
animation: rocketFly 1s ease-in-out infinite;
}
.modal-title-success {
font-size: 28px;
font-weight: 800;
color: #128C7E;
margin-bottom: 20px;
animation: fadeInUp 0.6s ease 0.3s both;
}
.success-details {
display: flex;
gap: 16px;
margin-bottom: 24px;
animation: fadeInUp 0.6s ease 0.4s both;
}
.success-badge {
flex: 1;
background: linear-gradient(135deg, #25D366, #128C7E);
padding: 16px;
border-radius: 16px;
text-align: center;
color: white;
}
.success-number {
display: block;
font-size: 32px;
font-weight: 900;
line-height: 1;
}
.success-label {
display: block;
font-size: 13px;
margin-top: 6px;
opacity: 0.9;
}
.price-box {
flex: 1;
background: #f8f9fa;
padding: 16px;
border-radius: 16px;
text-align: center;
}
.price-amount {
font-size: 32px;
font-weight: 900;
color: #128C7E;
line-height: 1;
}
.price-label {
font-size: 13px;
color: #666;
margin-top: 6px;
}
.modal-message-success {
font-size: 15px;
color: #666;
margin-bottom: 24px;
animation: fadeInUp 0.6s ease 0.5s both;
}
.modal-actions-full {
display: flex;
flex-direction: column;
gap: 12px;
animation: fadeInUp 0.6s ease 0.6s both;
}
.btn-whatsapp {
width: 100%;
padding: 16px;
background: linear-gradient(135deg, #25D366, #128C7E);
color: white;
border: none;
border-radius: 12px;
font-size: 17px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s;
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}
.btn-whatsapp:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.btn-whatsapp:active {
transform: translateY(0);
}
.btn-cerrar-modal {
width: 100%;
padding: 14px;
background: #f1f3f4;
color: #5f6368;
border: none;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-cerrar-modal:hover {
background: #e8eaed;
}
@keyframes popIn {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes bounceIn {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes rocketFly {
0%, 100% {
transform: translateY(0) rotate(-45deg);
}
50% {
transform: translateY(-10px) rotate(-45deg);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}