/* ============================================================
   TEMA STUDIO — los colores salen del set del video: negro azulado,
   neon naranja y azul electrico, y las bolas blancas.

   Se carga DESPUES de css.php y solo pisa colores, sombras y bordes:
   el armado de la pantalla (todo en vh) queda igual, asi las dos
   versiones se ven identicas de estructura y solo cambia la piel.
   ============================================================ */

:root{
    /* la paleta del set */
    --set-negro:    #05070F;   /* el fondo del estudio */
    --set-hondo:    #0A1230;   /* el azul del panel del fondo */
    --set-naranja:  #FF9F1C;   /* el neon de las gradas y las tarimas */
    --set-ambar:    #FFD37A;   /* el naranja claro, para los brillos */
    --set-azul:     #2E9BFF;   /* el neon azul de las paredes */

    /* las mismas variables de css.php, repintadas: con esto solo ya
       cambian los textos, las tarjetas, los bordes y las sombras */
    --azul:        #E7EFFF;                    /* ahora es el color del texto */
    --azul-suave:  rgba(90, 150, 255, .30);    /* bordes */
    --azul-tenue:  rgba(0, 0, 0, .55);         /* sombras */
    --tarjeta:     rgba(10, 20, 48, .68);      /* el vidrio de las tarjetas */
    --oro:         #FFB020;
}

/* el fondo: el negro azulado del estudio, con el resplandor naranja de las
   luces de la tarima abajo al centro */
body{
    color: var(--azul);
    background: #05070F;
    background:
        radial-gradient(120vh 80vh at 50% 108%, rgba(255,140,0,.22) 0%, transparent 62%),
        radial-gradient(110vh 85vh at 12% 6%,  rgba(46,155,255,.16) 0%, transparent 60%),
        radial-gradient(110vh 85vh at 88% 8%,  rgba(46,155,255,.13) 0%, transparent 60%),
        linear-gradient(165deg, #070C1E 0%, #060917 50%, #04060E 100%);
    background-attachment: fixed;
}

/* los puntitos del fondo eran pastel sobre claro: sobre el negro alcanzan
   apenas insinuados, si no ensucian la pantalla */
.bg-anim{ opacity: .10; }

/* ---------------------- titulos ---------------------- */

/* sin la sombra blanca, que sobre el fondo oscuro era un halo */
#drawings, #timetxt, #titlec{
    color: #FFFFFF;
    text-shadow:
        0 0 calc(1.4 * var(--u)) rgba(46,155,255,.45),
        0 calc(.25 * var(--u)) 0 rgba(0,0,0,.6);
}

/* el del centro va igual que PROXIMAS LOTERIAS: letras con el degrade de los
   neones y las lineas naranjas a los costados. Las dos reglas estan mas abajo,
   en el bloque del aviso, para no repetirlas */
#titlec{ text-shadow: none; }

/* ---------------------- tarjetas ---------------------- */

/* vidrio oscuro con un filo claro arriba, como el canto iluminado de las
   gradas del set */
.results, #loteria-bottom, #proximas{
    background:
        linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent calc(1 * var(--u))),
        var(--tarjeta);
    border-color: rgba(90, 150, 255, .28);
    box-shadow:
        0 calc(.6 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.45),
        inset 0 0 calc(3 * var(--u)) rgba(46,155,255,.06);
}

/* el panel del centro venia blanco: sobre el fondo oscuro tiene que ser el
   mismo vidrio que las tarjetas de los costados */
#resultados{
    background:
        linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent calc(1 * var(--u))),
        var(--tarjeta);
    border-color: rgba(90, 150, 255, .28);
    box-shadow:
        0 calc(.6 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.45),
        inset 0 0 calc(3 * var(--u)) rgba(46,155,255,.06);
}

/* la tabla de pagos venia en azul claro sobre blanco: sobre el fondo oscuro es
   el mismo vidrio de las tarjetas, con un filo tenue arriba */
.pago{
    background:
        linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent calc(1 * var(--u))),
        rgba(10, 20, 48, .55);
    border-color: rgba(90, 150, 255, .28);
    box-shadow:
        0 calc(.2 * var(--u)) calc(.6 * var(--u)) rgba(0,0,0,.45),
        inset 0 0 calc(2 * var(--u)) rgba(46,155,255,.06);
}

/* el numero del pago toma el ambar de los neones: es lo que tiene que saltar
   del bloque */
.pago-val{
    color: var(--set-ambar);
    text-shadow: 0 calc(.2 * var(--u)) calc(.6 * var(--u)) rgba(0,0,0,.6);
}
.pago-nom{ opacity: .75; }

/* los numeros de sorteo van en azul oscuro, que sobre el fondo del set no se
   ve: aca van en blanco, con el resplandor de los neones */
.rec-num{
    color: #E7EFFF;
    text-shadow: 0 0 calc(1.2 * var(--u)) rgba(46,155,255,.35);
}
.rec-ultimo .rec-num{ color: #FFFFFF; }

/* ---------------------- fila de loteria ---------------------- */

/* los logos van limpios, sin chapa blanca detras: solo el borde redondeado con
   el naranja del set, el mismo de los filos de las tarimas */
.loteria img{
    background: none;
    padding: 0;
    border-radius: calc(1 * var(--u));
    border: calc(.2 * var(--u)) solid rgba(255, 159, 28, .55);
    box-shadow: 0 calc(.2 * var(--u)) calc(.8 * var(--u)) rgba(0,0,0,.5);
}

/* las bolas quedan blancas, como las del sorteo, pero apoyadas en oscuro */
.bola{
    border-color: rgba(255,255,255,.22);
    box-shadow:
        0 calc(.35 * var(--u)) calc(.9 * var(--u)) rgba(0,0,0,.55),
        inset 0 calc(-.4 * var(--u)) calc(.8 * var(--u)) rgba(20,32,74,.25);
}

/* la del sorteo de hoy: el mismo ambar de los neones del set */
.yellow{
    background: radial-gradient(circle at 50% 25%, #FFE08A, #F0A400) !important;
    color: #3A2400 !important;
    box-shadow:
        0 0 calc(1.4 * var(--u)) rgba(255,160,0,.55),
        0 calc(.35 * var(--u)) calc(.9 * var(--u)) rgba(0,0,0,.5) !important;
}

.horario{
    color: var(--set-ambar);
    text-shadow: 0 calc(.2 * var(--u)) rgba(0,0,0,.7);
}

/* ---------------------- el video del studio ---------------------- */

/* el marco toma el naranja del set y un resplandor, asi el video no queda
   como un recorte pegado sino como parte de la pantalla */
#studio{
    background: var(--set-negro);
    border-color: rgba(255,159,28,.45);
    box-shadow:
        0 0 calc(2.4 * var(--u)) rgba(255,140,0,.22),
        0 calc(.6 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.55);
}

/* ---------------------- proximas loterias ---------------------- */

/* el titulo del aviso: letras con el degrade de los neones y las lineas de
   los costados en naranja, como los filos de las tarimas */
#next{
    font-size: calc(4.2 * var(--u));
    text-shadow: none;
}
#next::before,   #next::after,
#titlec::before, #titlec::after{
    height: calc(.25 * var(--u));
    background: linear-gradient(90deg, transparent, rgba(255,159,28,.85));
    box-shadow: 0 0 calc(.8 * var(--u)) rgba(255,140,0,.5);
}
#next span, #titlec span{
    background: linear-gradient(180deg, #FFE8B0 0%, #FFB020 55%, #FF8A00 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    /* el degrade tapa el text-shadow, asi que el brillo va por fuera */
    filter: drop-shadow(0 0 calc(1.2 * var(--u)) rgba(255,140,0,.45));
}

/* la cinta: fondo mas hondo que las tarjetas y un filo naranja arriba y abajo,
   como la banda de luz que recorre el set */
#proximas{
    background:
        linear-gradient(180deg, rgba(255,159,28,.10) 0%, transparent calc(2 * var(--u))),
        rgba(6, 12, 30, .78);
    border-color: rgba(255,159,28,.28);
    box-shadow:
        inset 0 calc(.25 * var(--u)) 0 rgba(255,159,28,.35),
        inset 0 calc(-.25 * var(--u)) 0 rgba(255,159,28,.20),
        0 calc(.6 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.5);
}

/* el nombre en blanco y la hora en ambar: se leen de un vistazo desde lejos */
.marquee .lot{ color: #FFFFFF; }
.marquee .lot-hora{
    color: var(--set-ambar);
    text-shadow: 0 0 calc(1 * var(--u)) rgba(255,140,0,.45);
}
.marquee .lot::after{
    color: var(--set-naranja);
    opacity: .55;
}

/* ---------------------- la firma ---------------------- */

/* la firma cierra la columna igual que el aviso la abre: las mismas lineas en
   naranja de tarima y las letras con el mismo degrade de neon */
#mispantallas{
    opacity: 1;
    margin-top: auto;
    /* sobre negro el apoyo blanco sobra: ensucia el dorado */
    text-shadow: none;
}
#mispantallas::before,
#mispantallas::after{
    height: calc(.25 * var(--u));
    background: linear-gradient(90deg, transparent, rgba(255,159,28,.85));
    box-shadow: 0 0 calc(.8 * var(--u)) rgba(255,140,0,.5);
}
/* el degrade se pinta en el span de afuera y se recorta contra las letras, por
   eso las dos partes de adentro van en transparente: lo que se ve es el fondo */
#mispantallas > span{
    background: linear-gradient(180deg, #FFE8B0 0%, #FFB020 55%, #FF8A00 100%);
    -webkit-background-clip: text;
            background-clip: text;
    filter: drop-shadow(0 0 calc(1.2 * var(--u)) rgba(255,140,0,.45));
}
#mispantallas .mp-nom,
#mispantallas .mp-tld{ color: transparent; opacity: 1; }