:root {
    --background: rgb(255, 255, 255);
    --contentBackground: rgb(255, 255, 255);
    --orderbackground: rgb(255, 255, 255);
    --hovercolor:rgb(236, 236, 236);
    --activecolor:rgb(218, 218, 218);
    --buttoncolor: #ffffff;
    --textcolor: #3d3d3d;
    --informationcolor: #d4d4d4;
    --bordercolor:rgb(218, 218, 218);
    --hcolor: #000000;
    --headercolor: #000000;
    --borderradius: 10px;
}
.darker-theme {
    --background: rgb(34, 51, 77);
    --contentBackground: rgb(48, 65, 90);
    --orderbackground: rgb(48, 65, 90);
    --hovercolor:rgb(36, 53, 79);
    --activecolor:rgb(24, 41, 67);
    --buttoncolor: rgb(24, 41, 67);
    --informationcolor: #ffffff;
    --headercolor: rgb(14, 24, 43);
    --bordercolor:rgb(30, 43, 66);
    --textcolor: #ffffff;
    --hcolor: #ffffff;
}
body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--background);

    position: absolute;
}
header {
    background-color: var(--headercolor);
    height: 7%;
    width: 100vw;
}
header span {
    color: white;
    user-select: none;
    font-size: 20px;
}
main {
    height: 93%;
    width: 100vw;
    display: flex;
}
span {
    color: var(--textcolor);
}

.mainframe {
    width: 100vw;
    margin-top: 1%;
    margin-bottom: 1%;
    display: flex;
}
.barcontent {
    background-color: var(--contentBackground);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.247);
    width: 12%;
    height: 100%;
    border-top-right-radius:  var(--borderradius);
    border-bottom-right-radius: var(--borderradius);
    user-select: none;
}
.content {
    margin-right: 1%;
    margin-left: 1%;
    width: 100%;
    height: 100%;
    border-radius: var(--borderradius);
    background-color: var(--contentBackground);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.247);
    user-select: none;
}
.titlecontainer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12%;
    height: 100%;
}
.pestaincontainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.pestains {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 10%;
}
.pestain {
    margin-top: 2%;
    padding-left: 5%;
    height: 5%;
    display: flex;
    align-items: center;
}
.pestain span {
    color: var(--textcolor);
    margin-left: 2%;
}
.pestain:hover {
    background-color: var(--hovercolor);
    cursor: pointer;
}
.pestain:active {
    background-color: var(--activecolor)
}
.framecontent {
    padding-top: 1%;
    padding-left: 1%;
    width: 99%;
    height: 98%;
}
h1 {
    margin: 0;
}
.sectors {
    width: 99%;
    height: 93%;
    display: flex;
}
.resume {
    width: 20%;
    height: 95%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.activity {
    width: 80%;
    height: 95%;
    overflow-y:scroll;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.247);
    border-radius: var(--borderradius);
}
.resume span {
    color: var(--textcolor);
    margin-top: 3%;
}
.order {
    background-color: var(--orderbackground);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.247);
    border-radius: var(--borderradius);
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 1%;
    display: flex;
}
.timedata {
    display: flex;
    flex-direction: column;
    padding-top: 1%;
}
.orders {
    margin-top: 1%;
    display: flex;
    flex-direction: column;
    padding-bottom: 1%;
}
.methods {
    margin-left: auto;
    margin-right: 1%;
    padding-top: 1%;
}
.info {
    height: auto;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 1%;
    display: flex;
}
button:hover {
    cursor: pointer;
}
button {
    background-color: var(--buttoncolor);
    color: var(--textcolor);

}
.resumeinfo {
    display: flex;
    flex-direction: column;
}

.ordersmethod {
    display: flex;
    flex-direction: column;
}
.ordersmethod button {
    margin-right: 5%;
    margin-top: 5%;
}
.titlescontainer {
    display: flex;
}
.currentorderstitle {
    margin-left: 12%;
}
.framepestain {
    height: auto;
    width: 100%;
}
.daypestaininfo {
    display: flex;
}

a {
    text-decoration: none;
    color: var(--textcolor);
}

.weekpestain {
    margin-left: 2%;
    margin-bottom: 2%;
    margin-right: 2%;
    border-color: var(--bordercolor);
    border-style: solid;
    border-radius: var(--borderradius);

    padding: 1%;
}
.daypestain {
    margin-left: 3%;
    margin-top: 1%;

    border-color: var(--bordercolor);
    border-style: solid;
    border-radius: var(--borderradius);
    background-color: var(--background);

    padding: 1%;
}
.info_day {
    margin-left: 1%;
}
.infotext {
    color: #d4d4d4;
}
.dayactivity {
    margin-left: 2%;
    margin-top: 0.5%;
}
.weekgainscontainer {
    display: flex;
    flex-direction:column;
}
.titleweek {
    margin-bottom:0;
    color: var(--textcolor)
}
.weekcontainer {
    height: 100%;
}
#weekpayedtext {
    margin-left: 2%;
}
#addorder {
    padding-top: 3%;
    padding-bottom: 3%;
    border: none;
    border-radius: var(--borderradius);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.349);

    transition: ease 0.3s;
}
#addorder:hover {
    background-color: #ffffff;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.349);
    cursor: pointer;
}
.filters {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 2;
    margin-left: 3%;

    display: none;
}
.options {
    display: flex;
    margin-left: 2%;
    margin-top: 1%;
    margin-bottom: 1%;
}
footer {
    display: flex;
    justify-content: center;
}
footer span {
    color: var(--informationcolor);
    font-size: 80%;
}
.toggleview:hover {
    cursor: pointer;

}

.editinputs {
    margin-top: 1%;
    display: flex;
    flex-direction: column;
    padding-bottom: 1%;

    display: none;
}
.finaleditzone {
    display: flex;
    justify-content:flex-end;
}
#refreshbutton {
    margin-left: .2%;
    margin-top: .5%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
}
h1 {
    color: var(--hcolor);
}

/* Media Queries para dispositivos móviles */
@media (max-width: 768px) {
    header {
        height: 10%; /* Aumentar el tamaño del header en móviles */
    }

    .mainframe {
        flex-direction: column; /* Cambiar a columna para mejor visualización */
    }

    .barcontent {
        width: 100%; /* Ocupar el ancho completo en móviles */
        height: auto; /* Ajustar la altura automáticamente */
    }

    .content {
        margin: 1%;
        width: calc(100% - 2%); /* Ajustar el ancho con márgenes */
        height: auto; /* Ajustar la altura automáticamente */
    }

    .sectors {
        flex-direction: column; /* Cambiar a columna para mejor visualización */
    }

    .pestaincontainer {
        margin-top: 5%; /* Ajustar el margen superior */
    }

    .pestain {
        padding-left: 2%; /* Reducir el padding para móviles */
    }

    .weekpestain, .daypestain {
        margin: 1%; /* Ajustar márgenes para mejor visualización */
    }

    .currentorderstitle {
        margin-left: 5%; /* Ajustar el margen izquierdo */
    }

    .resume {
        width: 100%; /* Ocupar el ancho completo */
        height: auto; /* Ajustar la altura automáticamente */
    }

    .activity {
        width: 100%; /* Ocupar el ancho completo */
        height: auto; /* Ajustar la altura automáticamente */
    }
}