@font-face {
    font-family: "Inter";
    src: url("./assets/fonts/inter.ttf");
}

/* Resets */

* {
    /* "Test" when the thing does not do the thing */
    /* outline: 1px solid black; */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: all;
    transition-duration: 200ms;
}

button {
    background: none;
    border: none;
    font-size: inherit;
    cursor: pointer;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Styles */

html {
    font-family: Inter;
    /* variables */
    /* colors */
    --clr-100: #ffffff;
    --clr-0: #f5f7fa;
    --clr-05: #aaaaaa;
    --clr-1: #e5e5e5;
    --clr-2: #edf1f7;
    --clr-3: #2d60ff;
    --clr-4: #718ebf;
    --clr-5: #fe5c73;
    --clr-6: #343c6a;
    --clr-7: #42b540;
    --clr-8: #53e130c9;
    --clr-holiday: #ff8000;
    --clr-judicial: #65c0c0;
    /* sizes */
    --text-sm: 1.125rem;
    --text-lg: 1.375rem;
    --text-xl: 1.75rem;

    scroll-behavior: smooth;
}

html.dark {
    --clr-100: #fefee6; /* Blanco cálido ligeramente más oscuro */
    --clr-0: #f5f3e2; /* Gris cálido con más profundidad */
    --clr-05: #aba88f; /* Gris con un tono más oscuro */
    --clr-1: #e4dccf; /* Gris claro cálido un poco más oscuro */
    --clr-2: #e8e3d5; /* Gris pastel con más cuerpo */
    --clr-3: #515dd4; /* Azul ligeramente cálido y más oscuro */
    --clr-4: #818d9a; /* Azul grisáceo cálido con más intensidad */
    --clr-5: #e07e6d; /* Rojo coral con un toque más oscuro */
    --clr-6: #484c5b; /* Azul oscuro cálido con mayor profundidad */
    --clr-7: #68b83d; /* Verde cálido un poco más apagado */
    --clr-8: #75cc58; /* Verde cálido más oscuro */
    --clr-holiday: #e6a000; /* Naranja más cálido y oscuro */
    --clr-judicial: #79ac7b; /* Verde azulado cálido con mayor profundidad */
}

html.dark #idNightMode {
    opacity: 0.7;
}

html.dark #idNightMode:hover {
    opacity: 1;
}

html #idNightMode:hover {
    opacity: 0.7;
}

#homeSvg {
    fill: var(--clr-3);
}

#idAsideMenu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all;
    transition-duration: 200ms;
}

.helpBtn {
    color: white;
    font-weight: 500;
    background-color: var(--clr-3);
    padding: 0.75rem;
    margin: 0.2rem;
    border-radius: 1rem;
    width: 100%;
}

.helpBtn:hover {
    opacity: 0.75;
}

#idCompartir {
    display: none;
    filter: grayscale(0.6);
}

#helpBtns {
    margin-bottom: 3rem;
}

body {
    display: flex;
    background-color: var(--clr-0);
}

main {
    width: 100%;
}

h1,
h2 {
    display: flex;
    align-items: center;
    text-align: center;

    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--clr-6);
}
select {
    cursor: pointer;
}
h2 {
    font-size: var(--text-lg);
}

/* ------------- Main panel ------------- */

/* Aside navigation */
aside.main_panel {
    padding-top: 3rem;
    padding-left: 2.6rem;
    padding-right: 3.6rem;
    min-width: 18rem;
    min-height: 100vh;
    background-color: var(--clr-100);
    border-right: 3px solid var(--clr-2);
}

aside.main_panel nav ul {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

aside.main_panel nav ul li {
    display: flex;
    align-items: center;
    font-size: var(--text-sm);
}

aside.main_panel nav ul li a {
    display: flex;
    gap: 1.625rem;
    color: var(--clr-3);
    padding: 0.2rem;
}

aside.main_panel nav ul li.disabled a {
    filter: grayscale(100);
    opacity: 0.4;
}

#slider_test {
    width: 10rem;
    height: 10rem;
    background-color: red;
    color: black;
}

.development,
.development * {
    cursor: not-allowed;
}

aside.main_panel nav ul li .current_page_decoration {
    position: absolute;
    left: 0;
    width: 0.6rem;
    height: 4rem;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    background-color: var(--clr-3);
}

/*-- Header Panel --*/
header.main_panel {
    display: flex;
    justify-content: space-between;
    padding-block: 2rem;
    padding-inline: 2.5rem;
    background-color: var(--clr-100);
    border-bottom: 2px solid var(--clr-2);
}

header.main_panel .header_icons {
    display: flex;
    gap: 0.875rem;
    fill: var(--clr-4);
}

header.main_panel .header_icons button {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 3.125rem;
    width: 3.125rem;
    padding: 0.5rem;

    border-radius: 50%;
    background-color: var(--clr-1);
}

#idCloseMenuBtn {
    display: none;
}

#idOpenMenuBtn {
    display: none;
}

/* On development feature message */
.development_message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    position: fixed;
    z-index: 120;
    bottom: 0;
    min-width: 10rem;

    left: 50%;
    transform: translateX(-50%);

    margin-bottom: 1rem;
    background-color: var(--clr-0);
    padding-block: 1rem;
    border-radius: 1.5rem;
    box-shadow: 0 4px 10px #0000001a;

    animation: fade-out 4s forwards;
}

.development_message img {
    animation: spining 2s linear infinite;
}

/* Main content */
#idCurrentPage {
    display: flex;
    flex-wrap: wrap;
    gap: 1.875rem;
    padding: 1.812rem 2.5rem;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.card_content {
    position: relative;
    background-color: var(--clr-100);
    min-width: 32rem;
    padding: 1.5rem;
    border-radius: 1.5rem;
}

.card_content label {
    color: var(--clr-4);
}

.card button {
    color: white;
    font-weight: 500;
    background-color: var(--clr-3);
    padding: 0.75rem;
    margin-top: 1rem;
    border-radius: 1rem;
}

.card button:hover {
    opacity: 0.75;
}

.termDisabled {
    opacity: 0.35;
    pointer-events: none;
}

.play_green {
    animation: play-green 900ms ease-in-out 120ms forwards;
}

.withResult {
    font-weight: 600;
    text-decoration: underline;
}

/* Mobile ajusts */
/* 63.9375 == 1023px / desktop starts at 1024px */
@media (max-width: 63.9375rem) {
    .mt {
        margin-top: 2rem;
    }

    header.main_panel h1 {
        display: none;
    }

    aside.main_panel[data-state="0"] {
        display: none !important;
    }

    aside.main_panel {
        position: absolute;
        z-index: 100;
        min-height: 100dvh;

        padding-top: 8rem;
    }

    #idCurrentPage {
        flex-direction: column;
        align-items: center;
        padding: 1.812rem 0;
        gap: 0;
    }

    #idCompartir {
        display: block;
    }

    #idHeaderSettingsBtn {
        display: none;
    }

    #idOpenMenuBtn {
        display: block;
        transform: scale(1.4);
    }

    #idCloseMenuBtn {
        display: block;
        position: absolute;
        z-index: 110;
        top: 0;
        left: 0;

        margin-left: 2.7rem;
        margin-top: 1.9rem;
        transform: scale(1.4);
    }

    .current_page .card h2 {
        justify-content: center;
    }

    .card_content {
        min-width: 20.8rem;
        max-width: 20.8rem;
        padding: 1.2rem;
    }

    header.main_panel .header_icons button {
        padding: 0.65rem;
        transform: scale(0.9);
    }

    header.main_panel {
        padding-block: 0.8rem;
    }

    #idAsideMenu {
        position: fixed;
    }
}

/*--- Animations ---*/
@keyframes fade-out {
    0% {
        opacity: 5%;
    }

    25% {
        opacity: 100%;
    }

    100% {
        opacity: 0%;
    }
}

@keyframes spining {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

@keyframes play-green {
    50% {
        color: var(--clr-3);
        transform: scale(1.02);
    }

    100% {
        color: inherit;
    }
}