@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
    color-scheme: light dark;
    --primary: #ba4d25;
    --primary-hover: #d3692d;
    --primary-dark: #f0a980;
    --bg-light: rgb(235, 235, 235);
    --bg-light-white: #fff;
    --bg-dark: #27272a;
    --bg-dark-black: #18181b;
    --text-light: #27272a;
    --text-secondary-light: #404044;
    --input-bg-light: rgb(235, 235, 235);
    --input-bg-dark: #404044;
    --text-dark: rgb(235, 235, 235);
    --text-secondary-dark: rgb(175, 175, 175);
    --success-light: #519465;
    --success-dark: #1c5f30;
    --spacing-1: 20px;
    --spacing-2: 10px;
    --radius-1: 16px;
    --radius-2: 10px;
    --radius-3: 7px;
    --color-50: #fcf5ee;
    --color-100: #f6e4cf;
    --color-200: #ecc69b;
    --color-800: #7f2c21;
    --color-900: #69251e;
    --color-950: #3b110d;
    --neutral-950: #0e0e11;
}

button {
    border-style: none;
    padding: 7px 15px;
    border-radius: var(--radius-2);
}

input[type="text"] {
    border-style: none;
}

body {
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    background-color: light-dark(var(--bg-light-white), var(--bg-dark-black));
}

.ficha {
    background-color: light-dark(var(--bg-light), var(--bg-dark));
    padding: var(--spacing-1);
    width: 700px;
    margin: 3rem auto;
    border-radius: var(--radius-1);

    h2 {
        color: light-dark(var(--primary), var(--primary-dark))
    }
}

.btn-primary {
    background-color: var(--primary);
    color: var(--bg-light);

    &:hover,
    &:active {
        background-color: var(--primary-hover);
        cursor: pointer;
    }
}

.mb-1 {
    margin-bottom: var(--spacing-1);
}

.mb-2 {
    margin-bottom: var(--spacing-2);
}

h1 {
    display: flex;
    gap: 5px;
    justify-content: center;
    color: light-dark(var(--text-secondary-light), var(--text-dark));

    svg {
        height: 40px;
        color: var(--primary);
    }
}

.inicio-container {
    margin: auto;
    padding: 1rem;

    header {
        border-bottom: 1px solid light-dark(var(--text-secondary-light), var(--text-secondary-dark));
        padding: 1rem 0 0.5rem 0;
        margin-bottom: 1rem;
        text-align: center;

        small {
            color: light-dark(var(--text-secondary-light), var(--text-secondary-dark));
            text-align: center;
        }
    }
}

section.busqueda {
    .busqueda-principal {
        width: 100%;
        border-radius: var(--radius-1);
        padding: 10px 15px 10px 45px;
        border: 2px solid light-dark(var(--input-bg-light), var(--input-bg-dark));
        background-color: light-dark(var(--input-bg-light), var(--input-bg-dark));
        color: light-dark(var(--text-light), var(--text-dark));

        &:focus {
            outline: none;
            border: 2px solid var(--primary);
        }

    }
}

.busqueda-principal:focus+svg {
    transform: scaleX(-1);
    color: light-dark(var(--primary-hover), var(--primary-dark));
    top: 25%;
}

.contenedor-busqueda-principal {
    position: relative;

    svg {
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        left: 15px;
        color: light-dark(var(--primary), var(--text-dark));
        transition: 400ms;
    }
}

.busqueda-filtros {
    display: flex;
    gap: var(--spacing-2);
    justify-content: center;
    flex-wrap: wrap;
}

.btn-ver-filtro {
    display: flex;
    gap: 3px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 50px;
    color: var(--text-dark);
    background-color: var(--primary);
    cursor: pointer;
    position: relative;
    white-space: nowrap;

    svg {
        height: 20px;
    }

    &:hover,
    &:active {
        background-color: var(--primary-hover);
    }
}

.contenedor-filtro {
    background-color: light-dark(var(--input-bg-light), var(--input-bg-dark));
    border-radius: var(--radius-2);
    padding: var(--spacing-2);
    display: none;
    z-index: 5;
    position: absolute;
    left: 50%;
    top: calc(100% + var(--spacing-2));
    transform: translateX(-50%);
}


#contenedor-categoria,
#contenedor-paises {
    display: flex;
    flex-direction: column;
    gap: 5px;

    .cont-checkbox {
        color: light-dark(var(--text-light), var(--text-dark));
        border-radius: var(--radius-3);

        input[type="checkbox"] {
            display: none;
        }

        label {
            cursor: pointer;
            width: 100%;
            height: auto;
            padding: 5px 10px;
            display: inline-block;
        }

        &:has(input[type="checkbox"]:checked) {
            background-color: light-dark(var(--success-light), var(--success-dark));
            color: var(--text-dark);
        }

        &:hover {
            background-color: light-dark(var(--bg-light-white), var(--bg-dark));
        }
    }
}

.filtro-ingredientes {
    background-color: light-dark(var(--input-bg-light), var(--bg-dark));
    width: 100%;
    height: 200px;
    padding: var(--spacing-2);
    border-radius: var(--radius-1);
    display: none;

    h3 {
        text-align: center;
    }
}

.filtro-show {
    display: block;
}

#contenedor-tiempo {
    width: 200px;

    input[type="range"] {
        width: 100%;
        display: block;
    }
}

@media (width < 700px) {
    .inicio-container {
        width: 100%;
        padding: 1rem;
    }
}

@media (width > 700px) {
    .inicio-container {
        width: 700px;
    }
}

.resultados-busqueda {
    color: light-dark(var(--text-light), var(--text-dark));
}