.cuestionario {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
}



/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
    position: relative;
    font-size: 12px;
    margin: 4px 8px 2px 8px;
}

td {
    /* Behave  like a "row" */
    border: none;
    position: relative;
    padding-left: 5%;
    text-align: justify;
    font-size: 12px;
}
.autoevaluacionHeaders {
    text-align: center;
}

.autoevaluacionPrimeraColumna {
    width:52%;
    padding-left:0 !important;
    text-align:left;
}

.autoevaluacionOtrasColumnas {
    width: 12%;
    padding-left: 0 !important;
    text-align: center;
}
/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
/*@media screen and (max-width: 600px) and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    table {
        width: 100%;
    }

    thead {
        display: none;
    }

    tr:nth-of-type(2n) {
        background-color: inherit;
    }

    tr td:first-child {
        background: #f0f0f0;
        font-weight: bold;
        text-align: justify;
        font-size: 12px;
    }

    tbody td {
        display: block;
        text-align: center;
    }

        tbody td:before {
            content: attr(data-th);
            display: block;
            text-align: justify;
            font-size: 12px;
            margin: 4px 7px 8px 4px;
        }

    td:nth-of-type(1):before {
        content: " ";
    }

    td:nth-of-type(2):before {
        content: "NUNCA";
        margin-top: 20px;
        text-align: center;
    }

    td:nth-of-type(3):before {
        content: "ALGUNAS VECES";
        text-align: center;
    }

    td:nth-of-type(4):before {
        content: "LA MAYORÍA DE LAS VECES";
        text-align: center;
    }

    td:nth-of-type(5):before {
        content: "CASI SIEMPRE";
        text-align: center;
    }
    .boton_personalizado:before {
        color: #7DAC09;

    }
}
*/
.boton_personalizado {
    text-decoration: none;
    padding: 10px;
    font-weight: 600;
    font-size: 15px;
    color: #7DAC09;
    background-color: #fff;
    border-radius: 6px;
    border: 2px solid #7DAC09;
    width: 100%;
}


.radio {
    display: grid;
    grid-template-columns: -webkit-min-content auto;
    grid-template-columns: min-content auto;
    grid-gap: 0.5em;
    font-size: 1.25rem;
    color: #7DAC09;
    padding-left: 45%;
}

    .radio:focus-within .radio__label {
        transform: scale(1.05);
        opacity: 1;
    }

.radio__label {
    line-height: 1;
    transition: 180ms all ease-in-out;
    opacity: 0.8;
}

.radio__input {
    display: flex;
}

    .radio__input input {
        opacity: 0;
        width: 0;
        height: 0;
    }

        .radio__input input:focus + .radio__control {
            box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em currentColor;
        }

.radio-gradient input:checked + .radio__control {
    background: radial-gradient(currentcolor 20%, rgba(255, 0, 0, 0) 51%);
}

.radio-before .radio__control {
    display: grid;
    place-items: center;
    top: 25%;
}

.radio-before input + .radio__control::before {
    content: "";
    width: 0.2em;
    height: 0.2em;
    box-shadow: inset 0.5em 0.5em currentColor;
    border-radius: 20%;
    transition: 180ms transform ease-in-out;
    transform: scale(0);
}

.radio-before input:checked + .radio__control::before {
    transform: scale(1);
}

.radio__control {
    display: block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 0.1em solid currentColor;
    transform: translateY(-0.05em);
}

radio:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 25%;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-size: 10px;
}