@import url("comun.css");

h2,h1{
  text-align: center;
}

/* Estilos generales para todas las tablas */
.tablaUsuarios, .tablaCursos, .tablaContenido, .tablaInscripciones {
    width: 80%;
    border-collapse: collapse; 
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
    margin-top: 30px;
}

/* Estilos para las celdas de encabezado */
.tablaUsuarios th, .tablaCursos th, .tablaContenido th, .tablaInscripciones th {
    background-color: var(--color-azulOscuro);
    color: white;
    text-align: left;
    font-weight: bold; 
    font-size: 16px;
    padding: 12px;       
}

/* Estilos para las celdas de datos */
.tablaUsuarios td, .tablaCursos td, .tablaContenido td, .tablaInscripciones td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

/* Estilos para las filas al pasar el ratón */
.tablaUsuarios tbody tr:hover, .tablaCursos tbody tr:hover, .tablaContenido tbody tr:hover, .tablaInscripciones tbody tr:hover {
    background-color: var(--color-azulClaro); 
    color: white;   
}

.tablaUsuarios tbody tr:hover, .tablaCursos tbody tr:hover, .tablaContenido tbody tr:hover {
    background-color: var(--color-azulClaro); 
    color: white;   
}

.tablaUsuarios tbody tr:nth-child(even):hover {
    background-color: var(--color-azulClaro); 
    color: white;    
}

/* Estilos para las filas pares */
.tablaUsuarios tbody tr:nth-child(even) {
    background-color: #f2f2f2; 
}

/* Estilos para los botones de acción */
.tablaUsuarios .accion.modificar, .tablaCursos .accion.modificar, .tablaContenido .accion.modificar, .tablaInscripciones .accion.modificar {
    margin-right: 10px; 
}

/* Estilos para el contenedor de la tabla */
.contenedor-tabla, .contenedor-tabla2 {
    display: flex;
    justify-content: center; 
    align-items: center; 
    height: auto; 
    margin-bottom: 20px; 
}

/* Estilos para el ancho de las tablas */
#tablaContenido, #tablaUsuarios, #tablaCursos, #tablaInscripciones {
    width: 90%;
}

.icono-modificar {
    margin-right: 25px; 
    color:green;
}

.icono-eliminar {
    margin-left: 25px; 
    color: red;
}

.accion-columna
{
    color: red;
}

.accion-columna {
    text-align: center;
    position: relative; 
}

.centrar-vertical {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.accion-columna .eliminar {
    margin: 0 30px; 
}
 /*******************Secciones index Admin*******************************/
 .contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh;
    padding: 20px; /* Añade relleno para evitar que se superponga con el menú */
}

.secciones {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.seccion {
    text-align: center;
    width: 300px;
    margin: 20px;
    padding: 10px;
    border: 5px solid var(--color-azulMuyOscuro);
    border-radius: 8px;
    transition: transform 0.3s ease;
    background-color: var(--color-azulOscuro);
}

.seccion:hover {
    transform: translateY(-5px);
}

.seccion img {
    width: 100%; /* Ajusta el ancho al 100% del contenedor .seccion */
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

.seccion h2 {
    margin-top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: white;
}

/***************Estilos responsivos*************************************/
@media (max-width: 1024px) {
    .seccion {
        width: 45%; 
    }
}
@media (max-width: 1155px) {
    .seccion {
        width: 30%; 
        max-width: 300px; 
    }
}
@media (min-width: 769px) and (max-width: 1159px) {
    .secciones {
        flex-wrap: wrap; 
        justify-content: center; 
    }

    .seccion {
        width: calc(25% - 20px); 
        max-width: 300px; 
        margin: 10px; 
    }
}



@media (max-width: 768px) {
    .contenedor {
        height: auto; 
    }

    .seccion {
        width: 100%; 
        margin: 10px 0; 
    }

    .secciones {
        justify-content: center; 
    }
}

/**************Botón Agregar Usuario****************************************************************************/
.agregar-contacto {
    text-align: center;
    margin-top: 40px;
}

.agregar-contacto a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #739FD9;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

a.seccion {
    text-decoration: none;   
}

/*******Estilos para el formulario de crear usuario**************************************/
.title {
    font-size: 30px; 
    color: var(--color-azulOscuro); 
    margin-bottom: 40px; 
    text-align: center; 
    letter-spacing: 2px; 
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, #7485C0, #021126); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 8px;
    
  }
  
.registro-div {
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}
  

.inputContainer {
    position: relative;
    height: 45px;
    width: 90%;
    margin-bottom: 40px;
 }
  
.input {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    border: 1px solid #DADCE0;
    border-radius: 10px;
    font-size: 16px;
    padding: 0 20px;
    outline: none;
    background: none;
    z-index: 1;
    
  }

  #editarDescripcion{
    height: 60px;
    margin-top: 10px;
  }
  
  .label {
    position: absolute;
    left: 15px;
    padding: 0 4px;
    color: #DADCE0;
    font-size: 16px;
    transition: top 0.3s, font-size 0.3s, color 0.3s; 
    z-index: 0;
}

::placeholder {
    color: transparent;
}
  
.botonEnviar, .botonRegistro {
    display: block;
    margin: 30px auto 0; 
    padding: 15px 30px;
    border: none;
    background-color: var(--color-azulOscuro);
    color: white;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    width: fit-content;
}
  
.botonEnviar:hover, .botonRegistro:hover {
    background-color: var(--color-azulMuyOscuro);
    transform: translateY(-2px);
}

.input:focus + .label {
    top: -7px;
    left: 3px;
    z-index: 10;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-azulOscuro);
    
}
  
.input:not(:placeholder-shown)+ .label {
    top: -16px;
    left: 3px;
    z-index: 10;
    font-size: 14px;
    font-weight: 600;
    
}
  
.input:focus {
    border: 2px solid var(--color-azulOscuro);
    background-color: #E6E6EE;
}
  
/* Estilos para el encabezado del formulario */
.encabezado-formulario {
    display: flex;
    align-items: center; 
    margin-bottom: 20px;
}
  
.imagen-perfil img {
    width: 170px; 
    height: 170px; 
    border-radius: 50%; 
    object-fit: cover; 
}

#formularioEdicionContenido {
    background-color: white;
    width: 400px;
    height: 600px;
    border-radius: 8px;
    padding: 20px 40px;
    box-shadow: 0 10px 25px rgba(92, 99, 105, .2);
}

#formularioEdicion {
    background-color: white;
    border-radius: 8px;
    padding: 20px 40px;
    width: 380px;
    box-shadow: 0 10px 25px rgba(92, 99, 105, .2);
}

.formUsuario{
    height: 700px;
    width: 400px;
}

.formCurso{
    height: 550px;
    width: 360px;
}

#formularioEdicion2 {
    background-color: white;
    width: 350px;
    height: 480px;
    border-radius: 8px;
    padding: 20px 40px;
    box-shadow: 0 10px 25px rgba(92, 99, 105, .2);
} 

#registroContenido{
    background-color: white;
    width: 350px;
    height: 480px;
    border-radius: 8px;
    padding: 20px 40px;
    box-shadow: 0 10px 25px rgba(92, 99, 105, .2);
}
  /* Estilos para el formulario de registro */

  .title2 {
    font-size: 30px; 
    color: var(--color-azulMuyOscuro); 
    margin-bottom: 20px; 
    text-align: center; 
    letter-spacing: 2px; 
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center; 
    margin-right: 36px;
    background: linear-gradient(to right, #7485C0, #021126); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}

.title2 img {
    width: 100px;   
}

 #registro {
    width: 380px;
    height: 455px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 15px; 
    background: linear-gradient(to right, #7485C0, #E7E7EE);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5); 
    transition: box-shadow 0.3s ease-in-out; 
} 
#registroUsuario {
    width: 400px;
    height: 580px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
#registroCurso {
    width: 400px;
    height: 450px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
#registro2 {
    width: 390px;
    height: 550px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 15px; 
    background: linear-gradient(to right, #7485C0, #E7E7EE);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5); 
    transition: box-shadow 0.3s ease-in-out; 
}

#mostrarRegistro {
    color: var(--color-azulMuyOscuro); 
    font-size: large;
    text-decoration: none; 
    font-weight: bold; 
    transition: color 0.3s; 
}

#mostrarRegistro:hover {
    font-size: 1.3em; 
}