/* Variables
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@import '../UGeneral/constants.css';



/* Página: Selección inicial
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.page--initialSelection {
    width: var(--width--mainPage); min-height: 100vh;
    margin: 0 auto -20px; /* Temporal */
    display: flex; flex-direction: column; flex-wrap: wrap;
    background-color: var(--colorInterface--background);
}
.page--initialSelection[nodisplayed] {
    display: none;
}

    /* Cabecera
    -------------------------------------------------- */
    .page--initialSelection .initialSelection--header{
        width: 100%;
        padding: 10px var(--padding--insideElements);
        display: grid; grid-template-columns: auto auto 300px; grid-column-gap: 60px;
    }

        .page--initialSelection .initialSelection--header .header--headerOption{
            height: 70px;
            padding: var(--padding--insideElements);
            border: solid 1px var(--colorElements--action); border-radius: var(--borderRadius--elements);
            display: flex; flex-direction: column;
            background-color: white;
            
            cursor: pointer;
        }

            .page--initialSelection .header--headerOption .headerOption--title{
                height: 25px;
                margin: 0 0 auto;

                font-size: var(--textSize--subtitle);
                text-align: left;
                font-weight: bold;
            }
            .page--initialSelection .header--headerOption .headerOption--value{
                width: 100%; height: 25px;
                padding: 0;
                margin: auto 0 0;

                cursor: pointer;
            }

        .page--initialSelection .initialSelection--header .header--headerOption:hover{
            background-color: var(--colorElements--actionStrong);
            border-color: var(--colorElements--actionStrong); 
        }

            .page--initialSelection .initialSelection--header .header--headerOption:hover span,
            .page--initialSelection .initialSelection--header .header--headerOption:hover input{
                color: white;
            }

    /* Cuerpo
    -------------------------------------------------- */
    .page--initialSelection .initialSelection--body {
        width: 600px; min-height: 300px;
        padding: var(--padding--insideElements);
        border-radius: var(--borderRadius--interface);
        margin: var(--padding--insideInterfaces) auto auto;
        display: flex; flex-direction:column;
        background-color: white;
        box-shadow: -1px 1px 4px 1px var(--colorShadow--color);
    }

        .page--initialSelection .body--title {
            margin: 0 0 var(--padding--insideInterfaces);

            font-size: var(--textSize--title);
            text-align: center;
            font-weight: bold;
        }
        .page--initialSelection .body--content {
            padding: 0;
        }

            .page--initialSelection .body--content .content--subtitle {
                margin: 0 0 var(--padding--insideSubtitle);

                font-size: var(--textSize--subtitle);
                font-weight: bold;
            }
            .page--initialSelection .body--content .content--text {
                margin: 0;
            }
            .page--initialSelection .body--content .content-radioButtonsDiv {
                padding: 0 var(--padding--insideElements);
            }
            .page--initialSelection .body--content .common--radio {
                font-weight: bold;
            }

        .page--initialSelection .body--footer {
            margin: auto 0 0;
        }