<div class="main-page">
            <div class="middle-content">
                <div class="body-content">
                <div class="title-content"><h1>Token de seguridad</h1></div>
                    <div class="box-content">
                        <div class="title-box-content"><h2>Información</h2><a class="back-to-account" href="my-account">Regresar a mi cuenta</a><a class="back-to-account-responsive" href="my-account">Regresar</a></div>
                        <div class="body-box-content justified">
                            <br>
                            <p>El <span>Token de seguridad</span> es un código de 6 dígitos (sensible a mayúsculas y minúsculas), que añade seguridad a ciertas opciones en tu panel de cuenta en la página web.</p>
                            <p>El mismo será solicitado para acciones importantes de la cuenta.</p>
                            <br>
                            <p>Para obtenerlo, es necesario solicitarlo haciendo click en el botón debajo.</p>
                            <p>Al hacer click, un mensaje será enviado al correo de la cuenta conteniendo el Token de Seguridad.</p>
                            <br>
                            <p><span class="red-info2">Es importante que conserves el Token de seguridad en un lugar seguro y no lo compartas con otros usuarios.</span></p>
                            <br>
                            <fieldset>
                            <legend>NOTA</legend>
                                <div class="separate2">
                                    <p>Puedes solicitar un nuevo Token de seguridad una vez cada 7 días.</p>
                                </div>
                            </fieldset>
                            <div class="centered">
                                <br>
                                <br>
                                {% load django_vite %}
                                <!-- Isla React (Vite): solicitud del token de seguridad.
                                     POST a la propia vista (JSON), actualiza la fecha. -->
                                <div id="security-token-app"
                                     data-csrf="{{ csrf_token }}"
                                     data-url="{% url 'security_token' %}"
                                     data-token-date="{{ token_date }}"></div>
                                {% vite_asset 'src/entries/security_token.tsx' %}
                                <br>
                                <p><a href="recover">He olvidado el Token de seguridad</a></p>
                                <br>
                            </div>
                        </div>
                    </div>
                    <script>
                        $("select").change(function(){
                            $(this).css("color", $(this).children("option:selected").css("color")); 
                        });
                    </script>
                </div>
            </div>
        </div>