@import url("/css/fonts/fonts.css");
@import url("/css/global/global.css");
@import url("/css/components/header.css");
@import url("/css/components/footer.css");
@import url("/css/components/cards.css");
@import url("/css/components/formulario.css");
@import url("/css/components/input_cantidad.css");
@import url("/css/components/acordeon.css");
@import url("/css/components/toast.css");

.linea {
    width: 3.125rem;
    align-self: center;
    height: .3125rem;
    border-radius: .625rem;
}

.item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 3.5rem 0;
}

.item>.item__info {
    display: flex;
    flex-direction: column;
    flex-basis: calc(80% / 2);
    gap: 1.5rem;
}

.item__info--highlight {
    font-style: italic;
    font-weight: 500;
}

.slider-product {
    max-width: 74.375rem;
    width: 100%;
    max-height: 31.25rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: .9375rem;
}

.slider-product img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item>form {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 3rem 1.5rem 3rem;
    flex-basis: calc(80% / 2);
    height: fit-content;
    background-color: aliceblue;
    max-width: none;
    border-radius: .9375rem;
    box-shadow: 0 0 .4375rem #04445f6b;
    -webkit-box-shadow: 0 0 .4375rem #04445f6b;
    -moz-box-shadow: 0 0 .4375rem #04445f6b;
}

form h2 {
    align-self: center;
}

form>button.btn__principal {
    text-transform: unset;
}

.item>.item__info,
.item>form {
    flex-grow: 0;
    flex-shrink: 0;
}

.opciones {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    gap: 1.25rem;
    position: relative;
}


form label {
    margin: 1rem 0 0 0;
}


.radio-cuadrado {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    border: .125rem solid #02293a;
    border-radius: .5rem;
    cursor: pointer;
    position: relative;
    margin: 0;
}

.radio-cuadrado:checked+label {
    color: #fff;
}

.radio-cuadrado:checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - .25rem);
    height: calc(100% - .2906rem);
    background-color: #043449;
    border-radius: .3125rem;
}

.check {
    display: flex;
    align-items: center;
    gap: .4375rem;
}

.check label {
    margin: 0;
    user-select: none;
    cursor: pointer;
}

.check input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: .125rem solid #02293a;
    border-radius: .3125rem;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.check input[type="checkbox"]:checked {
    background-color: #043449;
    border-color: #043449;
}

.check input[type="checkbox"]:checked::before {
    content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: .875rem;
    color: white;
}

form input,
form textarea {
    max-width: none;
    min-width: unset;
}

form input:hover,
form input:focus,
.focused {
    outline: none;
    border-color: #02293a;
    box-shadow: 0 .1875rem .4375rem rgba(36, 142, 255, 0.5);
    -webkit-box-shadow: 0 .1875rem .4375rem rgba(36, 142, 255, 0.5);
    -moz-box-shadow: 0 .1875rem .4375rem rgba(36, 142, 255, 0.5);
    transform: scale(1.015);
}

.textarea-errors {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.num-caracteres{
    text-align: end;
    font-size: .875rem;
    color: #333333cd;
    min-width: 5rem;
}

div.drop-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9375rem;
    border: .125rem dashed #02293a;
    padding: 1.25rem;
    text-align: center;
    width: 100%;
    border-radius: .625rem;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

div.drop-area p {
    margin: 0;
    font-size: .875rem;
    user-select: none;
}

div.drop-area.drag {
    border-color: green;
    box-shadow: 0 0 .4375rem rgba(36, 255, 65, 0.5);
    -webkit-box-shadow: 0 0 .4375rem rgba(36, 255, 65, 0.5);
    -moz-box-shadow: 0 0 .4375rem rgba(36, 255, 65, 0.5);
    transform: scale(1.015);
}

div.drop-area:hover {
    box-shadow: 0 0 .4375rem rgba(36, 142, 255, 0.37);
    -webkit-box-shadow: 0 0 .4375rem rgba(36, 142, 255, 0.37);
    -moz-box-shadow: 0 0 .4375rem rgba(36, 142, 255, 0.37);
    transform: scale(1.015);
}

.drop-area__button-fillup {
    display: inline-block;
    padding: .625rem;
    width: auto;
    font-family: 'Raleway';
    text-transform: capitalize;
    overflow: hidden;
    color: #02293a;
    text-decoration: none;
    border: .125rem solid #02293a;
    border-radius: .4375rem;
    cursor: pointer;
    background-position: 0 -100%;
    background-repeat: repeat-x;
    transition: background-position 0.8s ease;
}

.drop-area__button-fillup:hover,
.drop-area__button-fillup:focus,
.drop-area__button-fillup:focus-visible {
    background-position: 100% 50%;
    border-color: #02293a;
    color: white;
    box-shadow: 0 0 .4375rem rgba(36, 142, 255, 0.37);
    -webkit-box-shadow: 0 0 .4375rem rgba(36, 142, 255, 0.37);
    -moz-box-shadow: 0 0 .4375rem rgba(36, 142, 255, 0.37);
}

.liquidbg {
    background-image: url("/img/fillButton.svg");
}

input[type="file"],
div.drop-area p:not(p:first-of-type),
div.drop-area>ul {
    display: none;
}

div.drop-area>ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

div.drop-area>ul>li {
    display: flex;
    align-items: center;
    gap: .125rem;
    font-size: .875rem;
    color: #333;
}

.btnDelete {
    background: transparent url("/img/equis.svg") no-repeat center center;
    background-size: .6875rem;
    border: none;
    width: .6875rem;
    height: .6875rem;
    padding: 0;
}

.btnDelete:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 .3125rem rgba(255, 36, 36, 0.555));
}

.grid-guia {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    width: 100%;
}

.grid-guia>.grid-guia__item {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: aliceblue;
    border: #d7ecff .1563rem solid;
    border-radius: .625rem;
    box-shadow: 0 0 .4375rem rgba(36, 142, 255, 0.452);
    -webkit-box-shadow: 0 0 .4375rem rgba(36, 142, 255, 0.452);
    -moz-box-shadow: 0 0 .4375rem rgba(36, 142, 255, 0.452);
}

/* Carrusel */

.slider-product .splide__arrow {
    background: #fff;
    padding: .3125rem;
}

/* Media Queries */

@media screen and (min-width: 85.4375rem) {}

@media screen and (min-width: 64.0625rem) and (max-width: 85.375rem) {
    .grid-guia {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (min-width: 48rem) and (max-width: 64rem) {
    .item>.item__info {
        flex-basis: 85%;
    }

    .item>form {
        flex-basis: 85%;
        margin-top: 2rem;
    }

    .grid-guia {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 30.0625rem) and (max-width: 47.9375rem) {
    .item>.item__info {
        flex-basis: 90%;
    }

    .item>form {
        flex-basis: 90%;
        max-width: none;
        padding: 1rem 2rem 2rem 2rem;
        margin-top: 2rem;
    }

    .grid-guia {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 30rem) {
    .item>.item__info {
        flex-basis: 95%;
    }

    .item>form {
        flex-basis: 95%;
        max-width: none;
        padding: 1rem;
        margin-top: 2rem;
    }

    form h2 {
        font-size: 1.2rem;
    }

    .grid-guia {
        grid-template-columns: 1fr;
    }

    form label {
        margin: 1rem 0 0 0;
        font-size: 1rem;
    }
}