﻿.div-principal-ayuda {
    margin-top: 70px;
    display: flex;
    flex-direction: row;
    width: 100vw;
    background-color: #f6e7c9;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 550px;
    max-height: 550px;
}

    /* IZQUIERDA */

    .div-principal-ayuda .div-izquierda, .div-principal-ayuda .div-derecha {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
        height: 100%;
    }

    .div-izquierda {
        justify-content: flex-start !important;
    }

    .div-principal-ayuda .div-derecha {
        align-items: flex-start;
    }

    .div-principal-ayuda .div-izquierda .div-titulo {
        width: 100%;
        height: 20%;
        padding: 40px 0 0 2rem;
    }

.div-principal-ayuda .div-izquierda .div-descargas {
    width: 100%;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 1.5rem;
}

.div-principal-ayuda .div-descargas-2 {
    display: none;
    width: 50%;
    height: 70%;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.div-principal-ayuda .div-izquierda .div-descargas .btn-descargar {
    border-radius: 25px;
    border: none !important;
    width: 80%;
    height: 60px;
    max-width: 100%;
    background-color: #e59523;
    color: #f8f8f8;
    text-align: left;
    padding: 0 0 0 2rem;
    font-family: "Barlow", serif;
    font-weight: 600;
    font-size: 1.5vw;
}

.div-principal-ayuda .div-descargas-2 .btn-descargar {
    border-radius: 25px;
    border: none !important;
    width: 100%;
    height: 60px;
    max-width: 100%;
    background-color: #e59523;
    color: #f8f8f8;
    text-align: left;
    padding: 0 0 0 2rem;
    font-family: "Barlow", serif;
    font-weight: 600;
    font-size: 2vw;
}

.div-descargas-2 .div-redes {
    width: 100%;
    justify-content: space-around;
    display: flex;
    margin: 2rem;
}

.div-descargas-2 .div-redes a img {
    width: 40px !important;
    height: 40px !important;
}

    .div-principal-ayuda .div-izquierda .div-descargas .btn-descargar:focus,
    .div-principal-ayuda .div-izquierda .div-descargas .btn-descargar:active {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

            .div-principal-ayuda .div-izquierda .div-redes img {
                width: 50px;
                height: 50px;
            }

    .div-principal-ayuda .div-izquierda .div-titulo h1 {
        font-family: "Barlow", serif;
        font-weight: 700 !important;
        font-size: 45px !important;
        text-transform: uppercase;
        color: #333 !important;
        margin: 0;
    }

    /* DERECHA */

    .div-principal-ayuda .div-derecha .div-derecha-2 {
        height: 80%;
        width: 500px;
        padding: 1.5rem;
        background-color: #f8f8f8;
        border-radius: 15px;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        flex-direction: column;
        gap: 5px;
    }

        .div-principal-ayuda .div-derecha .div-derecha-2 .div-subtitulo {
            height: 10%;
            width: 100%;
        }

            .div-principal-ayuda .div-derecha .div-derecha-2 .div-subtitulo h4 {
                font-family: "Barlow", serif;
                font-weight: 600 !important;
                font-size: 30px !important;
                color: #333 !important;
                margin: 0;
                width: 100%;
            }

        .div-principal-ayuda .div-derecha .div-derecha-2 .div-asunto,
        .div-principal-ayuda .div-derecha .div-derecha-2 .div-btn {
            height: 20%;
        }

        .div-principal-ayuda .div-derecha .div-derecha-2 .div-mensaje {
            height: 50%;
        }

        .div-principal-ayuda .div-derecha .div-derecha-2 .div-mensaje,
        .div-principal-ayuda .div-derecha .div-derecha-2 .div-asunto,
        .div-principal-ayuda .div-derecha .div-derecha-2 .div-btn {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            align-items: center;
            /*gap: 5px;*/
        }

            .div-principal-ayuda .div-derecha .div-derecha-2 .div-asunto .div-label {
                height: fit-content;
                width: 100%;
                display: flex;
                justify-content: flex-start;
                align-content: center;
                align-items: center;
                gap: 5px;
                position: relative;
            }

                .div-principal-ayuda .div-derecha .div-derecha-2 .div-asunto .div-label img {
                    height: 16px;
                    width: 16px;
                }

                .div-principal-ayuda .div-derecha .div-derecha-2 .div-asunto .div-label label {
                    font-family: "Barlow", serif;
                    font-weight: 600 !important;
                    font-size: 18px !important;
                    color: #333 !important;
                    margin: 0;
                }

            .div-principal-ayuda .div-derecha .div-derecha-2 .div-asunto .div-campo {
                height: 50%;
                width: 100%;
                display: flex;
                justify-content: center;
                align-content: center;
                align-items: center;
            }

                .div-principal-ayuda .div-derecha .div-derecha-2 .div-asunto .div-campo .desplegable {
                    font-family: "Montserrat", serif;
                    font-weight: 400 !important;
                    font-size: 15px;
                    color: #333;
                    background-color: transparent;
                    border: 1px solid #907962;
                    border-radius: 20px;
                    width: 100%;
                    max-width: 100%;
                    height: 100%;
                    text-align: left;
                    cursor: pointer;
                    appearance: none;
                    padding: 0 1rem;
                }

                    .div-principal-ayuda .div-derecha .div-derecha-2 .div-asunto .div-campo .desplegable option {
                        color: #333;
                        font-weight: 400 !important;
                        font-size: 18px !important;
                    }

            .div-principal-ayuda .div-derecha .div-derecha-2 .div-mensaje .div-label {
                width: 100%;
                height: fit-content;
                display: flex;
                gap: 5px;
                justify-content: flex-start;
                align-content: center;
                align-items: center;
                position: relative;
            }

                .div-principal-ayuda .div-derecha .div-derecha-2 .div-mensaje .div-label img {
                    width: 16px;
                    height: 16px;
                }

                .div-principal-ayuda .div-derecha .div-derecha-2 .div-mensaje .div-label label {
                    /*width: 100%;*/
                    height: 100%;
                    font-family: "Barlow", serif;
                    font-weight: 600 !important;
                    font-size: 18px !important;
                    color: #333 !important;
                    margin: 0;
                }

            .div-principal-ayuda .div-derecha .div-derecha-2 .div-mensaje .div-campo {
                height: 80.3%;
                width: 100%;
                display: flex;
                justify-content: center;
                align-content: center;
                align-items: center;
            }

                .div-principal-ayuda .div-derecha .div-derecha-2 .div-mensaje .div-campo input {
                    width: 100%;
                    height: 100%;
                    max-width: 100%;
                    resize: none;
                    border: 1px solid #907962;
                    border-radius: 20px;
                    font-family: "Montserrat", serif;
                    font-weight: 400 !important;
                    font-size: 15px;
                    padding: 0.3rem 1rem;
                    background-color: transparent;
                }

                .div-principal-ayuda .div-derecha .div-derecha-2 .div-mensaje .div-campo textarea {
                    width: 100%;
                    height: 100%;
                    max-width: 100%;
                    resize: none;
                    border: 1px solid #907962;
                    border-radius: 20px;
                    font-family: "Montserrat", serif;
                    font-weight: 400 !important;
                    font-size: 15px;
                    padding: 0.3rem 1rem;
                    background-color: transparent;
                }

                    .div-principal-ayuda .div-derecha .div-derecha-2 .div-asunto .div-campo .desplegable:focus-visible,
                    .div-principal-ayuda .div-derecha .div-derecha-2 .div-mensaje .div-campo textarea:focus-visible,
                    .div-principal-ayuda .div-derecha .div-derecha-2 .div-mensaje .div-campo input:focus-visible {
                        outline: none !important;
                    }

                    .div-principal-ayuda .div-derecha .div-derecha-2 .div-asunto .div-campo .desplegable::placeholder,
                    .div-principal-ayuda .div-derecha .div-derecha-2 .div-mensaje .div-campo textarea:visited, 
                    .div-principal-ayuda .div-derecha .div-derecha-2 .div-mensaje .div-campo input:visited {
                        text-decoration: #f8f8f8 !important;
                        color: #333 !important;
                    }

        .div-principal-ayuda .div-derecha .div-derecha-2 .div-btn {
            flex-direction: row;
            gap: 5px;
        }

            .div-principal-ayuda .div-derecha .div-derecha-2 .div-btn .btn-enviar {
                width: 100%;
                height: 76px;
                border-radius: 15px;
                background-color: #e59523;
                color: #f8f8f8;
                border: 2px solid #e59523;
                font-family: "Barlow", serif;
                font-weight: 600 !important;
                font-size: 22px !important;
                text-shadow: none;
                margin-top: -2px;
            }

                .div-principal-ayuda .div-derecha .div-derecha-2 .div-btn .btn-enviar:hover {
                    background-color: #f8f8f8;
                    color: #e59523;
                    border: 2px solid #e59523;
                }

            .div-principal-ayuda .div-derecha .div-derecha-2 .div-btn .btn-cancelar {
                width: 180px;
                height: 50px;
                border-radius: 15px;
                background-color: #f8f8f8;
                color: #e59523;
                border: 2px solid #e59523;
                font-family: "Barlow", serif;
                font-weight: 600 !important;
                font-size: 22px !important;
            }

                .div-principal-ayuda .div-derecha .div-derecha-2 .div-btn .btn-enviar:focus,
                .div-principal-ayuda .div-derecha .div-derecha-2 .div-btn .btn-cancelar:focus {
                    outline: none !important;
                    box-shadow: none !important;
                }

                .div-principal-ayuda .div-derecha .div-derecha-2 .div-btn .btn-cancelar:hover {
                    background-color: #e59523;
                    color: #f8f8f8;
                    border: none;
                }

.g-recaptcha {
    cursor: pointer !important;
}

    .g-recaptcha div {
        max-height: 100%;
    }

.link-publicacion-reportada {
    display: block;
    width: 100%;
    padding-left: 0.5rem;
    text-decoration: none;
    color: #333;
    font-family: "Montserrat", serif;
    font-weight: 400 !important;
}

    .link-publicacion-reportada:hover {
        color: #333 !important;
    }

.div-label img {
    cursor: help;
}

.div-label img:hover + .aclaracion {
    display: block;
}

.aclaracion {
    display: none;
    width: max-content;
    position: absolute;
    left: 25px;
    top: 0;
    background-color: #907962;
    color: #f8f8f8;
    padding: 1.5rem;
    border-radius: 6px;
    box-shadow: 0px 0px 5px #3336;
    font-family: "Montserrat", serif;
    font-weight: 600;
    font-style: normal;
    z-index: 100;
    height: fit-content;
    white-space: normal;
    word-wrap: break-word;
    max-width: 300px;
    font-size: 14px;
    text-align: left;
    text-transform: none !important;
    left: 20px;
    top: 0px;
}

@media (min-width: 769px) and (max-width: 1269px) {
    .div-principal-ayuda {
        margin-top: 100px;
    }
}

@media (max-width: 1100px) {
    .div-principal-ayuda {
        flex-direction: column;
        height: fit-content;
        max-height: fit-content;
    }

    .div-titulo {
        width: 100% !important;
    }

    .div-izquierda {
        margin-bottom: 20px;
    }

    .div-derecha {
        align-items: center !important;
        width: 500px;
        margin-bottom: 20px;
    }

    .div-derecha-2 {
        width: 100% !important;
    }

    .div-mensaje textarea {
        height: 200px !important;
    }

    .div-descargas {
        display: none !important;
    }

    .div-descargas-2 {
        display: flex !important;
    }
}

@media (max-width: 850px) {
    .div-principal-ayuda {
        min-width: 350px;
    }

    .div-derecha-2, .div-descargas-2 {
        min-width: 350px;
    }

    .div-btn {
        flex-direction: column !important;
        gap: 10px !important;
    }

        .div-btn .btn-enviar {
            width: 100% !important;
            height: fit-content !important;
            margin-top: auto !important;
            max-width: 100% !important;
        }
}

@media (max-width: 768px) {
    .div-descargas-2 .btn-descargar {
        font-size: 14px !important;
    }

    .aclaracion.visible {
        display: block !important;
        width: fit-content !important;
    }

    .div-label img:hover + .aclaracion {
        display: block;
        width: fit-content !important;
    }
}
