/* ==========================
FUENTES BINGOFLASH
========================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Baloo+2:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700&family=Montserrat:wght@800;900&display=swap');

/* ==========================
ESTILOS GENERALES
========================== */

body{
font-family:'Manrope', sans-serif;
color:#E0E0E0;
}

/* ==========================
TITULOS
========================== */

h1,
h2,
.titulo-principal{

```
font-family:'Fredoka', sans-serif;
font-weight:700;
color:#FFD100;

text-shadow:
0 3px 0 #B87C00,
0 6px 12px rgba(0,0,0,.35);
```

}

h3,
h4,
h5,
h6,
.subtitulo{

```
font-family:'Baloo 2', cursive;
font-weight:700;
color:#E0E0E0;
```

}

/* ==========================
TEXTO NORMAL
========================== */

p,
span,
small,
.texto-form{

```
color:#E0E0E0;
```

}

/* ==========================
NUMEROS IMPORTANTES
========================== */

.numero-premium,
.saldo,
.balance,
.jackpot,
.premio,
.monto{

```
font-family:'Montserrat', sans-serif;
font-weight:900;
color:#FFD100;

text-shadow:
0 2px 0 #B87C00,
0 0 15px rgba(255,209,0,.35);
```

}

/* ==========================
LABELS
========================== */

label{

```
font-family:'Baloo 2', cursive;
font-weight:600;
color:#FFFFFF;
```

}

/* ==========================
FORMULARIOS
========================== */

.form-control,
.form-select,
textarea{

```
background-color:#0A2235;
border:1.5px solid #FFD100;
border-radius:8px;
color:#E0E0E0;
padding:10px 15px;
transition:all .3s ease;
```

}

.form-control::placeholder,
textarea::placeholder{

```
color:#B0B0B0;
```

}

.form-select option{

```
background:#0A2235;
color:#E0E0E0;
```

}

.form-control:hover,
.form-select:hover,
textarea:hover{

```
border-color:#ffe66b;

box-shadow:
0 0 10px rgba(255,209,0,.25);
```

}

.form-control:focus,
.form-select:focus,
textarea:focus{

```
outline:none;

border:2px solid #FFD100;

box-shadow:
0 0 15px rgba(255,209,0,.5);
```

}

/* ==========================
BOTONES
========================== */

.btn,
button,
.btn-enviar{

```
border-radius:12px;

background:
linear-gradient(
45deg,
#FFD100,
#FFE45C
);

color:#000;

font-family:'Baloo 2', cursive;

font-weight:700;

padding:12px 25px;

border:none;

box-shadow:
0 4px 12px rgba(0,0,0,.25);

transition:all .3s ease;

position:relative;

overflow:hidden;
```

}

.btn:hover,
button:hover,
.btn-enviar:hover{

transform:scale(1.05);

background:
linear-gradient(
45deg,
#FFB800,
#FFD100
);

box-shadow:
0 6px 16px rgba(0,0,0,.35);

}

/* Destello Flash */

.btn::after,
button::after,
.btn-enviar::after{

content:'✨';

position:absolute;

right:15px;

top:50%;

transform:
translateY(-50%)
scale(0);

opacity:0;

transition:.4s;

}

.btn:hover::after,
button:hover::after,
.btn-enviar:hover::after{

transform:
translateY(-50%)
scale(1);

opacity:1;

}

/* ==========================
TARJETAS
========================== */

.card,
.card-box{

border-radius:20px;

background:
rgba(10,20,35,.82);

backdrop-filter:
blur(12px);

box-shadow:
0 10px 30px rgba(0,0,0,.35);

}

/* ==========================
MODALES LOGIN
========================== */

.modal-content{

background:
rgba(0,0,0,.55);

backdrop-filter:
blur(12px);

border-radius:20px;

border:
1px solid rgba(255,209,0,.25);

box-shadow:
0 10px 30px rgba(0,0,0,.35);

}

/* ==========================
ANIMACIONES
========================== */

.card,
.card-box,
.modal-content{

animation:
aparecerPremium .5s ease;

}

@keyframes aparecerPremium{

from{

    opacity:0;

    transform:
    translateY(20px);
}

to{

    opacity:1;

    transform:
    translateY(0);
}

}

/* ==========================
TABLAS
========================== */

table{

font-family:'Manrope', sans-serif;

}

/* ==========================
LOGOS
========================== */

.logo-bingoflash{

transition:.4s;

}

.logo-bingoflash:hover{

transform:
scale(1.08)
rotate(-2deg);

}

/* ==========================
EFECTOS EXTRA
========================== */

.glow-gold{

box-shadow:
0 0 20px rgba(255,209,0,.35);

}

/* ==========================
SCROLL PERSONALIZADO
========================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{
    
background:#081724;

}

::-webkit-scrollbar-thumb{

background:#FFD100;
border-radius:20px;


}

::-webkit-scrollbar-thumb:hover{


background:#FFB800;


}
/* ===================================
   ADMIN BINGOFLASH
=================================== */

.admin-card{

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,209,0,.25);

    border-radius:20px;

    padding:25px;

    box-shadow:
    0 8px 30px rgba(0,0,0,.35);

    animation:adminFade .5s ease;

}

@keyframes adminFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* TABLAS ADMIN */

.table{

    color:#fff;

    border-radius:15px;

    overflow:hidden;

}

.table thead{

    background:#FFD100;

    color:#000;

    font-family:'Baloo 2', cursive;

}

.table tbody tr{

    background:rgba(255,255,255,.04);

}

.table tbody tr:hover{

    background:rgba(255,209,0,.08);

}

/* TITULOS ADMIN */

.admin-title{

    color:#FFD100;

    text-shadow:
    0 3px 0 #B87C00,
    0 6px 12px rgba(0,0,0,.35);

}

/* MENU ADMIN */

.admin-menu a{

    display:block;

    margin-bottom:12px;

}