/* ---------- Estilo general del cuerpo de la página ---------- */
body {
    background-color: #000;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    z-index: 0;
}

/* Estilo para el contenedor de partículas y el lienzo de respaldo */
#particles-js, #fallback-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.95); /* Fondo oscuro para contraste */
    z-index: -10; /* Detrás de todos los elementos */
}

/* ---------- Estilo del contenedor del formulario ---------- */
.FORMULARIO-CONTENEDOR {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
    width: 90%;
    max-width: 350px;
}

/* ---------- Estilo del contenedor interno del formulario ---------- */
.CONTENEDOR-FORMULARIO {
    background-color: #000;
    padding: 20px;
    border-radius: 15px;
    position: relative;
}

.CONTENEDOR-FORMULARIO::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(45deg, blue, red);
    animation: BORDE-INFINITO 0.5s infinite linear;
    border-radius: 15px;
    z-index: -1;
}

/* ---------- Estilo del formulario ---------- */
.FORMULARIO {
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---------- Estilo del título del formulario ---------- */
.FORM-TITULO {
    color: #FFEB3B;
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 0 0 15px blue, 0 0 30px red, 0 0 45px blue;
    animation: ESCRITURA 1s infinite;
    font-size: 36px; /* Tamaño original */
}

/* ---------- Estilo del subtítulo del formulario ---------- */
.FORM-SUBTITULO {
    color: #00FFCC;
    text-align: center;
    margin-bottom: 20px;
    font-size: 32px;
    text-transform: uppercase;
}

/* ---------- Estilo del contenedor de la contraseña ---------- */
.FORM-CONTENEDOR-CONTRASEÑA {
    position: relative;
    width: 100%;
    height: 48px;
    margin-bottom: 15px;
}

/* ---------- Estilo de los campos de entrada ---------- */
.FORM-INPUT {
    width: 100%;
    padding: 12px 40px 12px 12px;
    margin-bottom: 15px;
    border: none;
    background-color: #111;
    color: #FFF;
    border-radius: 5px;
    font-size: 18px;
    box-sizing: border-box;
    height: 48px;
    text-transform: uppercase;
    text-align: center;
}

.FORM-INPUT:focus {
    outline: none;
    box-shadow: 0 0 10px blue, 0 0 20px red;
}

/* ---------- Estilo del ícono de contraseña ---------- */
.FORM-MONITO {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #00FFCC;
    cursor: pointer;
    line-height: 1;
}

.FORM-MONITO:hover {
    text-shadow: 0 0 10px blue, 0 0 20px red;
}

/* ---------- Estilo del botón del formulario ---------- */
.FORM-BOTON {
    padding: 10px 20px;
    background: linear-gradient(45deg, #000, #111);
    color: #FFF;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-size: 20px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    display: block;
    margin: 0 auto;
    width: auto;
    box-shadow: 0 0 15px blue, 0 0 30px red;
}

.FORM-BOTON::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(45deg, blue, red);
    animation: BORDE-INFINITO 0.5s infinite linear;
    border-radius: 15px;
    z-index: -1;
}

.FORM-BOTON::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: linear-gradient(45deg, #000, #111);
    border-radius: 13px;
    z-index: -1;
}

.FORM-BOTON:hover {
    transform: scale(1.05);
}

/* ---------- Estilo del texto del formulario ---------- */
.FORM-TEXTO {
    color: #FFF;
    text-align: center;
    margin: 5px 0;
    font-size: 20px;
}

/* ---------- Estilo de los enlaces del formulario ---------- */
.FORM-ENLACE {
    color: #00FFCC;
    text-decoration: none;
    position: relative;
    transition: color 0.3s;
}

.FORM-ENLACE::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, blue, red);
    animation: SUBRAYADO 1s infinite alternate;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

.FORM-ENLACE:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.FORM-ENLACE:hover {
    color: #FFEB3B;
    text-shadow: 0 0 10px blue, 0 0 20px red;
}

/* ---------- Animaciones ---------- */
@keyframes BORDE-INFINITO {
    0% { background: linear-gradient(45deg, blue, red); }
    50% { background: linear-gradient(45deg, red, blue); }
    100% { background: linear-gradient(45deg, blue, red); }
}

@keyframes SUBRAYADO {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes ESCRITURA {
    0% { opacity: 0; clip-path: inset(0 100% 0 0); }
    10% { opacity: 1; clip-path: inset(0 87.5% 0 0); }
    20% { clip-path: inset(0 75% 0 0); }
    30% { clip-path: inset(0 62.5% 0 0); }
    40% { clip-path: inset(0 50% 0 0); }
    50% { clip-path: inset(0 37.5% 0 0); }
    60% { clip-path: inset(0 25% 0 0); }
    70% { clip-path: inset(0 12.5% 0 0); }
    80% { clip-path: inset(0 0 0 0); }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

/* ---------- Responsive para tablets ---------- */
@media (max-width: 768px) {
    .FORM-TITULO { font-size: 32px; }
    .FORM-SUBTITULO { font-size: 24px; }
}

/* ---------- Responsive para móviles pequeños ---------- */
@media (max-width: 480px) {
    .FORM-TITULO { font-size: 28px; }
    .FORM-SUBTITULO { font-size: 22px; }
}