/*------------------------------- Dashboard -------------------------------*/
/*#region*/

main {
    display: grid;
    align-items: center;
}





.dashboard-title-container {
        display: flex;
        margin-top: 2rem;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .dashboard-title-container > div {
        border-radius: 1rem;
        flex-basis: 240px;
    }

@media (max-width: 900px) {
    .dashboard-title-container > div {
        flex-basis: calc(50% - 2rem);
    }
    .dashboard-title-container > div:last-child {
        margin-top: 2rem;
        flex: 100%;
    }
}

@media (max-width: 550px) {
    .dashboard-title-container > div {
        flex-basis: 100%;
    }

    .dashboard-title-container > .div-2 {
        margin-top: 3rem;
        margin-bottom: 2rem;
    }
}








    .dashboard-title-container .div-1 h3 {
        text-align: center;
        color: var(--blanco);
        background-color: rgb(122, 138, 226);
        margin-bottom: 1rem;
    }

    .semaforos-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .semaforo-item {
        position: relative;
    }

    .semaforos-container span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.5rem;
        font-weight: 700;
    }

@media (max-width: 900px) {
    .semaforo-item {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .semaforo-item img {
        max-width: 120px;
    }
}










.dashboard-title-container .div-2 {
    display: grid;
    grid-template-rows: auto 1fr 1fr;
}

.dashboard-title-container .div-2 h3 {
    text-align: center;
    color: var(--blanco);
    background-color: rgb(122, 138, 226);
    margin-bottom: 1rem;
}

.dashboard-title-container .div-2 .datepicker-container {
    display: grid;
    align-items: center;
    position: relative;
}

.fecha-data-container {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    background-color: rgb(122, 138, 226);
    color: var(--blanco);
}

.fecha-data-container span {
    padding: 1rem 1rem;
}

.fecha-data-container span:nth-child(even) {
    background-color: var(--blanco);
    color: #444;
}


@media (max-width: 900px) {
    .dashboard-title-container .div-1 h3,
    .dashboard-title-container .div-2 h3 {
        padding: 5px 0;
    }
}









.linea-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}

    .linea-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 0.5rem;
        padding: 0 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .linea-container .div-1 { grid-area: 1 / 1 / 2 / 2; }
    .linea-container .div-2 { grid-area: 1 / 2 / 2 / 3; }
    .linea-container .div-3 { grid-area: 2 / 1 / 3 / 2; }
    .linea-container .div-4 { grid-area: 2 / 2 / 3 / 3; }
    .linea-container .div-5 { grid-area: 3 / 1 / 4 / 3; }

    .linea-container .turnos-container {
        justify-content: flex-start;
        align-items: stretch;
        padding: 0 0 0 5px;
    }

    .linea-container .turnos-container span:first-child {
        padding-right: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .linea-container .turnos-container .background-morado {
        background-color: rgb(122, 138, 226);
        color: var(--blanco);
        flex: 1;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .linea-container .div-2 {
        display: grid;
        grid-template-rows: auto;
    }

@media (max-width: 900px) {
    .linea-container > div {
        padding: 0.5rem 5px;
    }

    .linea-container .turnos-container span:first-child {
        flex: 1;
        justify-content: flex-start;
    }

    .linea-container .turnos-container .background-morado {
        flex: 0;
        padding: 5px 3rem;
    }
}






    



.dashboard-data-container {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /*grid-template-rows: repeat(3, 1fr);*/
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    margin-bottom: 2rem;
}

    .dashboard-data-container > div {
        background-color: #F2F2F2;
        border-radius: 1rem;
    }
    
    .dashboard-data-container .div-1 { grid-area: 2 / 2 / 4 / 4; display: grid; grid-template-rows: auto 1fr; }
    .dashboard-data-container .div-2 { grid-area: 1 / 1 / 2 / 2; }
    .dashboard-data-container .div-3 { grid-area: 1 / 2 / 2 / 3; }
    .dashboard-data-container .div-4 { grid-area: 1 / 3 / 2 / 4; }
    .dashboard-data-container .div-5 { grid-area: 1 / 4 / 2 / 5; }
    .dashboard-data-container .div-6 { grid-area: 2 / 1 / 4 / 2; display: grid; grid-template-rows: auto 1fr; }
    .dashboard-data-container .div-7 { grid-area: 2 / 4 / 3 / 5; }
    .dashboard-data-container .div-8 { grid-area: 3 / 4 / 4 / 5; }

    .dashboard-data-container .div-green {
        background-image: url('../../imagenes/ehub/background-green.png');
        background-position: center;
        background-repeat: no-repeat;
        color: var(--blanco);
    }

    .dashboard-data-container .div-red {
        background-image: url('../../imagenes/ehub/background-red.png');
        background-position: center;
        background-repeat: no-repeat;
        color: var(--blanco);
    }

    .dashboard-data-container .div-green span,
    .dashboard-data-container .div-red span {
        color: var(--blanco) !important;
    }

    .dashboard-data-container .data {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin-bottom: 5px;
    }

    .dashboard-data-container .div-7 .data,
    .dashboard-data-container .div-8 .data {
        grid-template-columns: 1fr;
    }

    .dashboard-data-container p {
        margin: 5px 10px;
        color: var(--blanco);
    }

    .dashboard-data-container .div-1 p {
        color: #717271
    }

    .dashboard-data-container span {
        color: #717271;
    }

    .dashboard-data-container .item {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
        justify-items: center;
        color: var(--blanco);
    }

    .dashboard-data-container img {
        width: 40px;
    }



    .div-1 .data {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 1rem;
    }

    .div-1 .item-1 { grid-area: 1 / 1 / 2 / 3; }
    .div-1 .item-2 { grid-area: 1 / 3 / 2 / 5; }
    .div-1 .item-3 { grid-area: 1 / 5 / 2 / 7; }
    .div-1 .item-4 { grid-area: 2 / 1 / 3 / 4; }
    .div-1 .item-5 { grid-area: 2 / 4 / 3 / 7; }

    .div-1 .item {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        align-items: center;
    }

    .div-1 .item h5 {
        font-size: 2rem;
        font-weight: 400;
        color: #717271;
    }

    .div-1 .item span {
        font-size: 3rem;
        font-weight: 700;
    }








@media (max-width: 1150px) {
    
    main {
        padding: 0;
    }

    .dashboard-data-container {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-data-container .div-2 { grid-area: 1 / 1 / 2 / 2; }
    .dashboard-data-container .div-3 { grid-area: 1 / 2 / 2 / 3; }
    .dashboard-data-container .div-4 { grid-area: 2 / 1 / 3 / 2; }
    .dashboard-data-container .div-5 { grid-area: 2 / 2 / 3 / 3; }
    .dashboard-data-container .div-1 { grid-area: 3 / 1 / 4 / 3; }
    .dashboard-data-container .div-6 { grid-area: 4 / 1 / 6 / 2; }
    .dashboard-data-container .div-7 { grid-area: 4 / 2 / 5 / 3; }
    .dashboard-data-container .div-8 { grid-area: 5 / 2 / 6 / 3; }

}

@media (max-width: 600px) {
    .dashboard-data-container {
        grid-template-columns: 1fr;
    }

    .dashboard-data-container .div-2 { grid-area: 1 / 1 / 2 / 2; }
    .dashboard-data-container .div-3 { grid-area: 2 / 1 / 3 / 2; }
    .dashboard-data-container .div-4 { grid-area: 3 / 1 / 4 / 2; }
    .dashboard-data-container .div-5 { grid-area: 4 / 1 / 5 / 2; }
    .dashboard-data-container .div-1 { grid-area: 5 / 1 / 6 / 2; }
    .dashboard-data-container .div-6 { grid-area: 6 / 1 / 7 / 2; }
    .dashboard-data-container .div-7 { grid-area: 7 / 1 / 8 / 2; }
    .dashboard-data-container .div-8 { grid-area: 8 / 1 / 9 / 2; }



    .div-1 .data {
        grid-template-columns: repeat(2, 1fr);
    }
        
        .div-1 .item-1 { grid-area: 1 / 1 / 2 / 2; }
        .div-1 .item-2 { grid-area: 1 / 2 / 2 / 3; }
        .div-1 .item-3 { grid-area: 2 / 1 / 3 / 2; }
        .div-1 .item-4 { grid-area: 2 / 2 / 3 / 3; }
        .div-1 .item-5 { grid-area: 3 / 1 / 4 / 3; }
}

@media (max-width: 480px) {
    .div-1 .data {
        grid-template-columns: 1fr;
    }

    .div-1 .item {
        grid-area: auto;
    }
}

/*#endregion*/