*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
}


body{
    background-image: url(../images/redes.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

main{

    width: 100%;
    padding: 20px;
    margin: auto;
    margin-top: 10%;
}
header{
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}	

video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;    /* Ajusta el video para cubrir toda el área sin deformarse */
    z-index: -1;          /* Mantiene el video en el fondo */
    pointer-events: none; /* Evita que el video interfiera con eventos del usuario */
    autoplay: true;       /* Reproduce automáticamente */
    muted: true;          /* Silencia el video para permitir autoplay */
    playsinline: true;    /* Evita que el video se reproduzca en pantalla completa en móviles */
}

/* Contenedor del logo INDEX */
.logo_pagina {
    position: absolute;   /* Hace que el logo no se mueva */
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center;    /* Centrado vertical */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra el logo en la pantalla */
    z-index: 1;             /* Mantiene el logo por encima del video */
}

/* Logo de escritorio: visible solo en pantallas grandes */
.logo_desk {
    display: block;
    width: 300px;  /* Ajusta el tamaño del logo de escritorio */
    height: auto;  /* Mantiene la proporción del logo */
}

/* Logo móvil: visible solo en pantallas pequeñas */
.logo_mobile {
    display: none;  /* Ocultamos el logo móvil por defecto */
    width: 150px;   /* Ajusta el tamaño del logo móvil */
    height: auto;
}

/* Mostrar el logo móvil solo en dispositivos pequeños (móviles) */
@media (max-width: 768px) {
    .logo_desk {
        display: none; /* Ocultamos el logo de escritorio en móviles */
    }

    .logo_mobile {
        display: block; /* Mostramos el logo móvil en pantallas pequeñas */
    }
}


/* Contenedor del logo SignIn */
.logo_in {
    position: absolute;   /* Hace que el logo no se mueva */
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center;    /* Centrado vertical */
    top: 50%;
    left: 50%;
    transform: none; /* Centra el logo en la pantalla */
    z-index: 1;             /* Mantiene el logo por encima del video */
}

/* Logo de escritorio: visible solo en pantallas grandes */
.logo_indesk {
    display: block;
    width: 300px;  /* Ajusta el tamaño del logo de escritorio */
    height: auto;  /* Mantiene la proporción del logo */
}

/* Logo móvil: visible solo en pantallas pequeñas */
.logo_inmobile {
    display: none;  /* Ocultamos el logo móvil por defecto */
    width: 150px;   /* Ajusta el tamaño del logo móvil */
    height: auto;
}

/* Mostrar el logo móvil solo en dispositivos pequeños (móviles) */
@media (max-width: 768px) {
    .logo_indesk {
        display: none; /* Ocultamos el logo de escritorio en móviles */
    }

    .logo_inmobile {
        display: block; /* Mostramos el logo móvil en pantallas pequeñas */
    }
}

.contenedor__todo{
    width: 100%;
    max-width: 800px;
    margin: auto;
    position: relative;
}

.caja__trasera{
    width: 100%;
    padding: 10px 10px;
    display: flex;
    justify-content: right;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(0px);
    background-color: rgba(11, 49, 69, 0.5);
	border-radius: 5px;
  

}

.caja__trasera div{
    margin: 10px 40px;
    color: white;
    transition: all 100ms;
    display: flex;
    flex-direction: column;  /* Asegura que los elementos estén apilados verticalmente */
    align-items: center;     /* Centra los elementos horizontalmente */
    justify-content: center; /* Centra los elementos verticalmente */
    position: relative;
}

.imagen-indesk {
    width: 50%;             /* La imagen cubrirá el 50% del ancho */
    height: 100%;           /* La imagen se ajustará al 100% de la altura del contenedor */
    object-fit: cover;       /* Hace que la imagen cubra el espacio del contenedor sin distorsionarse */
    float: right;           /* Alinea la imagen a la derecha */
    
}

.caja__trasera div p,
.caja__trasera button{
    margin-top: 30px;
}

.caja__trasera div h3{
    font-weight: 300;
    font-size: 26px;
}

.caja__trasera div p{
    font-size: 16px;
    font-weight: 300;
}




/*Formularios*/

.contenedor__login-register{
    display: flex;
    align-items: right;
    width: 100%;
    max-width: 380px;
    position: relative;
    top: -5px;
    left: 25%;

    /*La transicion va despues del codigo JS*/
    transition: left 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

.contenedor__login-register form{
    width: 100%;
    padding: 10px 10px;
    background: white;
    position: absolute;
    border-radius: 5px;
}

.contenedor__login-register form h2{
    font-size: 20px;
    text-align: center;
    margin-bottom: 5px;
    color: #565656;
}

.contenedor__login-register form input{
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border: none;
    background: #F2F2F2;
    font-size: 16px;
    outline: none;
}

.contenedor__login-register form button{
    padding: 10px 40px;
    margin-top: 20px;
    border: none;
    font-size: 14px;
    background: #0080ff;
    font-weight: 600;
    cursor: pointer;
    color: white;
    outline: none;
    float: right; /* Esto mueve el botón a la derecha */
 
	
}

.formulario__login{
    opacity: 1;
    display: block;
}
.formulario__register{
    display: none;
}

.pie_pagina h1{
    font-weight: 600;
    font-size: 40px;
	color: white;
	text-align: left;
	position: relative;	
    padding: 0px 0px;
	margin-top: 45px;
	
}
.pie_pagina h2{
    font-weight: 300;
    font-size: 16px;
	color: white;
    text-align: left;
	position: relative;	
    padding: 5px 0px;
}
.pie_pagina h3{
    font-weight: 300;
    font-size:14px;
	color: white;
	text-align: left;
	position: relative;	
    padding: 0px 0px;      
	font-style: italic;
}
.pie_pagina h4{
    font-weight: 100;
    font-size: 10px;
	color: white;
	text-align: right;
	position: relative;	
    padding: 0px 0px;

}


@media screen and (max-width: 850px){

    main{
        margin-top: 50px;
    }

    .caja__trasera{
        max-width: 380px;
        height: 230px;
        flex-direction: column;
        margin: auto;
       
    }

    .caja__trasera div{
        margin: 0px;
        position: absolute;
    }


    /*Formularios*/

    .contenedor__login-register{
        top: -100px;
        left: 0px;
        margin: auto;
    }

    .contenedor__login-register form{
        position: relative;
    }
}





.fondo-seccion
{
    background-color: #ddd;/* Cambia #eaeaea al color que desees */
}

.complete-input {
    padding: 8px;
    border: 0px solid rgb(255, 115, 0); /* Borde rojo */
    background-color:  #ddd;/* Fondo rojo claro */
    color: #333; /* Texto en blanco */
    border-radius: 3px; /* Bordes redondeados */
}

/* Estilo para el texto de la etiqueta */
.label-text {
    font-size: 13px; /* Tamaño de letra para la etiqueta */   
    color: #000; /* Color de texto rojo */
     
}

.filtros-input {
    padding: 8px;
    border: 1px solid #999; /* Borde rojo */
    background-color:  #333;/* Fondo rojo claro */
    color: #333; /* Texto en blanco */
    border-radius: 0px; /* Bordes redondeados */
}

/* Estilo para el texto de la etiqueta */
.label-text1 {
    font-size: 12px; /* Tamaño de letra para la etiqueta */   
    color:rgb(255, 115, 0); /* Color de texto rojo */
}


.filtros2-input {
    padding: 8px;
    border: 1px solid #999; /* Borde rojo */
    background-color:  #333;/* Fondo rojo claro */
    color: #333; /* Texto en blanco */
    border-radius: 0px; /* Bordes redondeados */
}

/* Estilo para el texto de la etiqueta */
.label-text2 {
    font-size: 12px; /* Tamaño de letra para la etiqueta */   
    color:rgb(0, 190, 16); /* Color de texto rojo */
}

.filtros3-input {
    padding: 8px;
    border: 1px solid #999; /* Borde rojo */
    background-color:  #333;/* Fondo rojo claro */
    color: #333; /* Texto en blanco */
    border-radius: 0px; /* Bordes redondeados */
}

/* Estilo para el texto de la etiqueta */
.label-text3 {
    font-size: 12px; /* Tamaño de letra para la etiqueta */   
    color:rgb(190, 171, 0); /* Color de texto rojo */
}

.form-group input[readonly] {
    background-color: #333;
    color: red;
    border: 0px solid rgb(255, 115, 0); /* Borde rojo */
    font-size: 12px; /* Tamaño de letra para la etiqueta */
}

.form-group select[readonly] {
    background-color: #333;
    color: red;
    border: 0px solid rgb(255, 115, 0); /* Borde rojo */
    font-size: 12px; /* Tamaño de letra para la etiqueta */
}
.form-group textarea[readonly] {
    background-color: #333;
    color: red;
    border: 0px solid rgb(255, 115, 0); /* Borde rojo */
    font-size: 12px; /* Tamaño de letra para la etiqueta */
}

.form-group textarea{
    font-size: 12px; /* Tamaño de letra para la etiqueta */   
    color:rgb(0, 190, 16); /* Color de texto rojo */
    padding: 8px;
    border: 1px solid #999; /* Borde rojo */
    background-color:  #333;/* Fondo rojo claro */
    border-radius: 0px; /* Bordes redondeados */
}

#results {
    list-style: none;
    padding: 0;
}

#results li {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
}

#pagination {
    margin-top: 20px;
}

.advanced-button {
    padding: 7px 20px;
    background-color: rgba(49, 100, 167, 0.85);
    color: #fff; /* Texto en blanco */
    border: 1px solid rgba(49, 100, 167, 0.85);
    border-radius: 5px; /* Bordes redondeados */
    font-size: 14px; /* Tamaño de letra */
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    

}

.advanced-button:hover {
    background-color:rgb(134, 133, 132);  /* Color de fondo más oscuro al pasar el ratón */
    color: #fff; /* Texto en blanco */
    border-color:rgb(134, 133, 132);
    text-decoration: none; 
}

.advanced-buttonfirst {
    padding: 7px 20px;
    background-color: rgba(238, 176, 6, 0.85);
    color: #fff; /* Texto en blanco */
    border: 1px rgba(238, 176, 6, 0.85);
    border-radius: 5px; /* Bordes redondeados */
    font-size: 12px; /* Tamaño de letra */
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    position: relative; /* O cualquier otra posición válida */
    z-index: 20;
}

.advanced-buttonfirst:hover {
    background-color: rgb(134, 133, 132); /* Color de fondo más oscuro al pasar el ratón */
    color: #fff; /* Texto en blanco */
    border-color:rgb(134, 133, 132);
    text-decoration: none; 
    z-index: 20;
}

.advanced-buttonsecond {
    padding: 7px 20px;
    background-color: rgb(0, 190, 16, 0.85);
    color: #fff; /* Texto en blanco */
    border: 1px solid  rgb(0, 190, 16, 0.85);
    border-radius: 5px; /* Bordes redondeados */
    font-size: 11px; /* Tamaño de letra */
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    position: relative; /* O cualquier otra posición válida */
    z-index: 20;
}

.advanced-buttonsecond:hover {
    background-color: rgb(134, 133, 132); /* Color de fondo más oscuro al pasar el ratón */
    color: #fff; /* Texto en blanco */
    border-color:rgb(134, 133, 132);
    text-decoration: none; 
    z-index: 20;
}