*{box-sizing:border-box}
body{margin:0;padding:0;background:#060d20;font-family:"Google Sans",sans-serif}
p{margin:0;padding:0}
.page{width:100%;max-width:520px;margin:auto}
.header{margin:0;padding:0}
.img_top_header{display:block;width:100%}

.premios,.date-logo-price,.estados,.flex{
display:flex;justify-content:center;align-items:center
}

.date-logo-price{width:100%}
.s33,.s33p{
width:100%;max-width:33%;height:100%;text-align:center;color:#fff;
font-weight:bold;font-style:italic;font-size:25px
}
.s33p{border:1px solid #fff;border-radius:25px}
.s50{width:100%;max-width:50%}
.flex{flex-wrap:nowrap}

.flex-vertical{
display:flex;flex-direction:column;flex-wrap:nowrap;
justify-content:center;align-items:center
}

.boton-captura{
width:100%;height:30px;padding:0;border:0;background:transparent;
color:#fff;font-size:20px;font-weight:bold;cursor:pointer
}
.boton-captura:disabled{opacity:.6;cursor:wait}

.big-text-lottery{
width:100%;margin:auto;border:3px solid #060d20;color:#ffb500;
text-align:center;font-size:16px;font-style:italic
}

.titulo-premio{font-size:10px}
.texto-premio{font-size:18px;font-style:normal}
.p2p{color:#000}

.text-price{font:bold 12px "Google Sans",Roboto,Arial,sans-serif}
.text-price-value{color:red;font:20px "Google Sans",Roboto,Arial,sans-serif}

.estados{width:100%}
.et,.et2{
width:100%;padding:5px;border-radius:25px;text-align:center;font-size:14px
}
.et{max-width:32.33%;margin:1%}
.et2{max-width:32.33%;margin:3px auto}

.amarillo{background:#ffe000}
.azul{background:#002aff}
.rojo{background:#dc281e}
.disponible{background:#fff;color:#060d20}
.ocupado{background:yellow;color:#060d20}
.pagado{background:red;color:#fff}
.promo{background:#27ff00;color:#000}

.carton{
width:500px;height:500px;margin:auto;
display:flex;flex-wrap:wrap
}

.numero{
width:9.5%;height:9.5%;margin:.25%;
background:#fff;color:#060d20;
display:flex;flex-direction:column;
justify-content:center;align-items:center;
font-weight:bold
}

.numero.disponible{background:#fff;color:#060d20}
.numero.ocupado{background:yellow;color:#060d20}
.numero.pagado{background:red;color:#fff}
.numero.promo{background:#27ff00;color:#000}

.numero-text{font-size:18px}
.nombre-text{font-size:0}

.nombre-text-pagado,
.nombre-text-ocupado,
.nombre-text-promo{
font-size:8px;text-align:center
}

.numero-text-pagado,
.numero-text-ocupado,
.numero-text-promo{
font-size:8px;text-align:center
}

.nombre-text-disponible{font-size:0}
.text-date{font-size:11px}

.info_button{align-content:center;text-align:center}
.text_blue_neon,.text_white{
margin:0;padding:0;font-weight:bold
}
.text_blue_neon{color:aqua}
.text_white{color:#fff}

.skeleton{position:relative}

.skeleton-numero{
width:9.5%;height:9.5%;margin:.25%;
border-radius:6px;background:#e9e9e9;
position:relative;overflow:hidden
}

.skeleton-numero::after{
content:"";position:absolute;inset:0;
background:linear-gradient(
90deg,transparent 0%,rgba(255,255,255,.95) 50%,transparent 100%
);
transform:translateX(-100%);
animation:skeleton-loading 1.2s linear infinite
}

@keyframes skeleton-loading{
to{transform:translateX(100%)}
}

@media(max-width:768px){
.page{margin:0;padding:0}
.carton{width:300px;height:300px}

.numero,.skeleton-numero{
width:12%;height:12%
}

.numero-text{font-size:18px}
.nombre-text{font-size:10px}

.nombre-text-pagado,
.nombre-text-ocupado,
.nombre-text-promo{
font-size:8px
}

.numero-text-pagado,
.numero-text-ocupado,
.numero-text-promo{
font-size:6px
}

.text-date{font-size:10px;font-weight:normal}
}

@media(max-width:480px){
.carton{width:100%;height:350px}

.numero,.skeleton-numero{
width:9.5%;height:9.5%;margin:.25%
}

.numero-text{font-size:14px}
.nombre-text{font-size:0}

.nombre-text-pagado,
.nombre-text-ocupado,
.nombre-text-promo{
font-size:6px
}

.numero-text-pagado{font-size:8px}
.numero-text-ocupado,
.numero-text-promo{
font-size:6px
}

.text-date{font-size:10px}
}