/* ============================================================
   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);
}

/* ---------------------- 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. Las promos van en la
   misma caja que iba el video, asi que llevan el mismo marco */
#studio, #promos{
    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; }