@import url('https://fonts.googleapis.com/css2?family=Allura&family=Goldman:wght@400;700&display=swap');

/** ------------------------------------------------------------- **/
/** ----------------------- LOGIC COLORES ----------------------- **/
/** ------------------------------------------------------------- **/

:root {
    --fondoPrincipal: #00060f;
    --textoPrincipal: #fff;
    --fondoCards: #081018;
    --colorBorde: #353941;
    --textoSecundario: #696a73;
    --textoSecundario2: #c4c8ce;
    --erroColor: #EF4444;

    /* COLORES VERDES */

    --textoPrincipalColor: #A3E635;
    --hoverVerde: #84CC16;
    --fondoCerrarSesionPC: #192412;
    --hoverNavPC: #0e1717;
}

html.tema-verde{
    --textoPrincipalColor: #A3E635;
    --hoverColor: #84CC16;
    --fondoCerrarSesionPC: #192412;
    --hoverNavPC: #0e1717;
}

html.tema-azul{
    --textoPrincipalColor: #3B82F6;
    --hoverColor: #2563EB;
    --fondoCerrarSesionPC: #111c2e;
    --hoverNavPC: #0d1726;
}

html.tema-rosa{
    --textoPrincipalColor: #ff5094;
    --hoverColor: #e13f80;
    --fondoCerrarSesionPC: #2a1320;
    --hoverNavPC: #1b1016;
}

html.tema-azul #next-match {
    background-image: url('../multimedia/fondo-next-macth-azul.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

html.tema-rosa #next-match {
    background-image: url('../multimedia/fondo-next-macth-rosa.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


html.tema-azul #head-perfil {
    background-image: url('../multimedia/Fondo-Card2-azul.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

html.tema-rosa #head-perfil {
    background-image: url('../multimedia/Fondo-Card2-rosa.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

html.tema-azul #head-fixture {
    background-image: url('../multimedia/Fondo-Card1-azul.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

html.tema-rosa #head-fixture {
    background-image: url('../multimedia/Fondo-Card1-rosa.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

html.tema-azul #head-predicciones {
    background-image: url('../multimedia/Fondo-Card3-azul.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

html.tema-rosa #head-predicciones {
    background-image: url('../multimedia/Fondo-Card3-rosa.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

html.tema-azul #head-ranking{
    background-image: url('../multimedia/Fondo-Card4-azul.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; 
}

html.tema-rosa #head-ranking{
    background-image: url('../multimedia/Fondo-Card4-rosa.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

html.tema-rosa .container-acesso > .cards > .c1 {
    background: url('../multimedia/Fondo-Card1-rosa.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

html.tema-rosa .container-acesso > .cards > .c2 {
    background: url('../multimedia/Fondo-Card2-rosa.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

html.tema-azul .container-acesso > .cards > .c1 {
    background: url('../multimedia/Fondo-Card1-azul.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

html.tema-azul .container-acesso > .cards > .c2 {
    background: url('../multimedia/Fondo-Card2-azul.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

html.tema-rosa .container-acesso > .cards > .c3 {
    background: url('../multimedia/Fondo-Card3-rosa.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

html.tema-rosa .container-acesso > .cards > .c4 {
    background: url('../multimedia/Fondo-Card4-rosa.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

html.tema-azul .container-acesso > .cards > .c3 {
    background: url('../multimedia/Fondo-Card3-azul.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

html.tema-azul .container-acesso > .cards > .c4 {
    background: url('../multimedia/Fondo-Card4-azul.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/** ------------------------------------------------------- **/
/** ----------------------- ESTILOS ----------------------- **/
/** ------------------------------------------------------- **/


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    background-color: var(--fondoPrincipal);
    width: 100%;
    height: 100vh;
    color: var(--textoPrincipal);
    overflow-x: hidden;
    font-family: "Goldman", sans-serif;
}

.header-left .st0 {
    color: var(--textoPrincipalColor);
    fill: var(--textoPrincipalColor);
}

/** ------------------------------------------------------ **/
/** ----------------------- MOBILE ----------------------- **/
/** ------------------------------------------------------ **/

@media (max-width: 1000px) {

    /** --------------------------------------------------- **/
    /** ----------------------- NAV ----------------------- **/
    /** --------------------------------------------------- **/

    nav {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 60px;
        max-height: 100px;
        background-color: var(--fondoCards);
        border-top: 1px var(--textoPrincipalColor) solid;
        z-index: 99;
    }

    nav ul {
        display: flex;
        list-style: none;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        position: relative;
        width: 100%;
        height: 100%;
    }

    nav .selected {
        color: var(--textoPrincipalColor);
        border-bottom: 1px var(--textoPrincipalColor) solid;
    }

    nav ul li:hover,
    nav ul li a:hover {
        color: var(--hoverVerde);
        border-bottom: 1px solid var(--hoverVerde);
    }

    nav ul li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    nav ul li p {
        font-size: 11px;
        text-transform: uppercase;
    }

    nav ul li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--textoSecundario2);
        margin: 0;
        padding: 0;
    }

    nav ul li svg {
        width: 20px;
        height: 20px;
    }

    nav #listMenu {
        position: absolute;
        bottom: 70px;
        right: 0;
        display: none;
        align-items: center;
        justify-content: center;
        gap: 50px;
        background-color: var(--fondoCards);
        border: 1px solid var(--textoPrincipalColor);
        border-radius: 10px;
        padding: 10px;
        min-width: 140px;
        z-index: 10000;
    }

    /** ------------------------------------------------------ **/
    /** ----------------------- HEADER ----------------------- **/
    /** ------------------------------------------------------ **/

    header {
        width: 100%;
        max-height: 100px;
        display: flex;
        padding: 10px;
        justify-content: space-between;
        align-items: center;
    }

    .header-left {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .header-left svg {
        width: 50px;
        height: 50px;
    }

    .header-left img {
        width: 50px;
        height: 50px;
    }

    .header-left span {
        width: 1px;
        height: 50px;
        margin: 0 5px 0 5px;
        background-color: var(--textoPrincipalColor);
        border-radius: 200px;
    }

    .header-left h1 {
        font-size: 20px;
    }

    .header-right {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header-right p {
        font-size: 11px;
        margin: 5px 0;
    }

    .header-right p span {
        color: var(--textoPrincipalColor);
    }

    .header-right .btns {
        margin-left: 10px;
        display: flex;
        gap: 5px;
    }

    .header-right .btns p {
        display: none;
    }

    .header-right .btns a {
        padding: 5px;
        border: 2px var(--textoSecundario2) solid;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }

    .header-right .btns a svg {
        color: var(--textoSecundario2);
    }

    .header-right .cerrar-sesion {
        color: var(--textoSecundario2);
        border-color: var(--textoSecundario2);
    }

    /** --------------------------------------------------------- **/
    /** ----------------------- CONTENIDO ----------------------- **/
    /** --------------------------------------------------------- **/

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        margin-bottom: 70px;
    }
}

/** -------------------------------------------------- **/
/** ----------------------- PC ----------------------- **/
/** -------------------------------------------------- **/

@media (min-width: 1000px) {

    /** --------------------------------------------------- **/
    /** ----------------------- NAV ----------------------- **/
    /** --------------------------------------------------- **/

    nav {
        width: 250px;
        min-width: 250px;
        margin: 10px;
        padding: 20px;
        background-color: var(--fondoCards);
        border: 1px solid var(--colorBorde);
        border-radius: 10px;
        position: relative;
        box-sizing: border-box;
        min-height: 500px;
        max-height: 800px;
    }

    nav ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 0;
        margin: 0;
    }

    nav ul li a {
        display: flex;
        color: var(--textoSecundario2);
        gap: 5px;
        text-decoration: none;
        align-items: center;
        padding: 5px;
    }

    nav ul li a:hover {
        background-color: var(--hoverNavPC);
        color: var(--textoPrincipalColor);
        border-left: 1px solid var(--textoPrincipalColor);
        border-radius: 0px 10px 10px 0px;
    }

    nav .selected {
        background-color: var(--hoverNavPC);
        color: var(--textoPrincipalColor);
        border-left: 1px solid var(--textoPrincipalColor);
        border-radius: 0px 10px 10px 0px;
    }

    nav #listMenu {
        display: flex;
        flex-direction: column;
    }

    nav .info {
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        padding: 20px;
        background-color: var(--fondoCards);
        border: 1px solid var(--colorBorde);
        border-radius: 20px;
        margin: 20px;
        background: url('../multimedia/fondo-info.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        box-sizing: border-box;
    }

    nav .info h1 {
        font-size: 16px;
        color: var(--textoPrincipalColor);
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    nav .info p {
        font-size: 12px;
        margin: 0;
    }

    /** ------------------------------------------------------ **/
    /** ----------------------- HEADER ----------------------- **/
    /** ------------------------------------------------------ **/

    header {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        max-height: 100px;
        box-sizing: border-box;
    }

    header .header-left {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        height: 80px;
    }

    .header-left svg {
        width: 80px;
        height: 80px;
    }

    .header-left .st0 {
        color: var(--textoPrincipalColor);
        fill: var(--textoPrincipalColor);
    }


    header .header-left img {
        width: 80px;
        height: 80px;
    }

    header .header-left span {
        width: 1px;
        height: 100%;
        background-color: var(--textoPrincipalColor);
    }

    header .header-right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
    }

    header .header-right .btns {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .header-right .btns a {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        gap: 10px;
        padding: 10px;
        border: 1px solid;
    }

    .header-right p span {
        color: var(--textoPrincipalColor);
    }

    .header-right .btns a p {
        font-size: 16px;
        font-weight: 300;
        color: var(--textoPrincipal);
    }

    .header-right .cerrar-sesion svg {
        color: var(--textoPrincipal);
        width: 20px;
    }

    .header-right .cerrar-sesion {
        color: var(--textoPrincipalColor);
        background-color: var(--fondoCerrarSesionPC);
        border-radius: 15px;
    }

    /** --------------------------------------------------------- **/
    /** ----------------------- CONTENIDO ----------------------- **/
    /** --------------------------------------------------------- **/

    .responsive-pc {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
    }
}