/* CSS para Aula de Formación Online - HispalDrone */
/* GENERALES */
*, *::before, *::after {
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f0f0f0;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFD700; /* Amarillo principal */
    padding: 10px 20px;
    color: #333;
	position: fixed;
        top: 0;
        width: 100%;
        padding: 10px 20px;
        box-shadow: 0 4px 2px -2px gray;
        z-index: 1000;
        transition: all 0.3s ease;
}
h1 {
    font-size: 1.5em;
    margin: 0;
}
h2 {
    font-size: 1.5em;

}
button {
    font-family: inherit;
} 

	.header.small {
        padding: 5px 20px;
    }
    .header .logo {
        display: flex;
        align-items: center;
    }
    .header .logo img {
        height: 40px;
        margin-right: 10px;
    }
    .header .menu {
        display: flex;
        align-items: center;
    }
    .header .menu-item {
        margin-left: 20px;
        position: relative;
    }
    .header .menu-item a {
        text-decoration: none;
        color: black;
        font-weight: bold;
    }
	/* Dropdown Menu without Box Styling */
    .dropdown-content {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: max-content;
        background-color: transparent; /* Cambia el fondo a transparente */
        z-index: 1;
    }
    .dropdown-content ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .dropdown-content li {
        padding: 10px 0;
        cursor: pointer;
    }
    .dropdown-content a {
        color: black;
        text-decoration: none;
        display: block;
    }
	.button-text {
		background-color: #d3d8d0; /* Mismo color que la cabecera */
		border-radius: 10px; /* Bordes redondeados */
		padding: 5px 10px; /* Espaciado interno */
		text-align: center;
		transition: background-color 0.3s ease;
		display: inline-block;
	}
	.button-text:hover {
		background-color: #d3d8d0; /* Color al pasar el mouse */
	}
	
    .menu-item:hover .dropdown-content {
        display: block;
    }
    .menu-item:hover .dropdown-content ul {
        background-color: #FFD700; /* Mismo color que la cabecera */
        padding: 5px 10px; /* Alinea los elementos del menú */
        border-radius: 0;
    }
	/* Responsive Menu */
    .mobile-menu {
        display: none;
    }
    .mobile-menu-icon {
        display: none;
        font-size: 30px;
        cursor: pointer;
    }
	.mobile-menu a {
        color: black;
        text-decoration: none;
        display: block;
    }
@media (max-width: 768px) {
        .header .logo h2{
			font-size: 0.7em;
		}
		.header .logo .persona {
			font-size: 0.6em;
		}
		.mobile-menu-icon {
            display: block;
        }
        .header .menu {
            display: none;
        }
        .mobile-menu {
            display: none;
            flex-direction: column;
            position: fixed;
            top: 60px;
            width: 100%;
            background-color: #FFD700;
            z-index: 999;
            transition: all 0.3s ease;
        }
        .mobile-menu.open {
            display: flex;
        }
        .mobile-menu-item {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
            cursor: pointer;
        }
        .mobile-menu-item ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: none;
        }
        .mobile-menu-item.open > ul {
            display: block;
        }
        .mobile-menu-item ul li {
            padding: 10px;
            text-align: left;
        }
        .mobile-menu-subitem {
            cursor: pointer;
            padding-left: 15px;
        }
        .mobile-menu-subitem ul {
            display: none;
        }
        .mobile-menu-subitem.open > ul {
            display: block;
        }
    }

/* Estilos específicos para la página de login */
.login-container {
    width: 800%;
    max-width: 400px;
    margin: 100px auto;
    padding: 20px;
    background-color: #ecf0f1; /* Fondo gris claro */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h2 {
    text-align: center;
    color: #2c3e50; /* Gris oscuro */
}


.container {
	margin-top: 50px;
	background-color: #f0f0f0;
}
.responsive-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
	justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}
/* Centrar los grupos */
.main-group {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar horizontalmente los elementos dentro */
    justify-content: center; /* Centrar verticalmente los elementos dentro */
    gap: 10px;
    flex: 1;
    min-width: 300px; /* Tamaño mínimo */
    max-width: 400px; /* Control del tamaño máximo */
}

.responsive-container .document-group {
    flex: 1; /* Cada uno toma la misma cantidad de espacio */
}

/* Estilo para pantallas pequeñas */
@media (max-width: 768px) {
    .responsive-container {
        flex-direction: column; /* Cambiar la dirección a columnas */
    }
}
.btnnav {
    background-color: #FFD700;
    color: #000;
    border: none;
    padding: 0 20px; /* Ajuste de padding horizontal */
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    line-height: 1.5; /* Define la altura de línea, ajustándola al texto */
    height: auto; /* Altura automática */
    display: inline-block; /* Permite que el botón se ajuste al contenido */
}
/* Ajustes de Responsividad */
@media (max-width: 768px) {
	.btnnav {
	font-size: 0.7em;
	line-height: 1;
	}
}
table.tablaavisos {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
}

table.tablaavisos th, table.tablaavisos td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    color: #000;
}

table.tablaavisos th {
    background-color: #2c3e50;
    color: #fff;
}


main {
    flex-grow: 1;
    padding: 20px;
    background-color: #fcfcfc;
    height: calc(100vh - 60px); /* Altura completa menos la del header */
    overflow-y: auto;
}

footer {
    text-align: center;
    background-color: #FFD700; /* Amarillo principal */
    padding: 1px 2px; /* Reducir el padding */
    position: fixed;
    bottom: 0;
    left: 0; /* Asegúrate de alinearlo con el borde izquierdo */
    width: 100vw; /* Usa viewport width para asegurarte de que el ancho sea de la pantalla */
    color: #333;
    font-size: 0.9rem; /* Usa rem para mejor respuesta en pantallas pequeñas */
    line-height: 0.1; /* Reducir la altura de línea */
    margin: 0; /* Sin margen adicional */
    box-sizing: border-box; /* Asegura que padding y borde no sumen altura */
    overflow-x: hidden; /* Evita desbordamiento horizontal */
}

@media (max-width: 768px) {
    footer {
        font-size: 0.7rem; /* Cambia a rem para mejor escalado */
        line-height: 1.2; /* Ajusta la altura de línea para que no se vea aplastado */
    }
}


/* FORMULARIOS */
.form-group {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
}

.form-group label {
    width: 100%;
    font-weight: bold;
    margin-bottom: 5px;
}

.form-group {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
}

.form-group label {
    width: 100%;
    font-weight: bold;
    margin-bottom: 5px;
}

.form-group input {
    padding: 8px;
    width: calc(50% - 10px);
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="date"] {
    width: calc(100% - 20px);
    margin-bottom: 15px;
}

.form-group .warning {
    background-color: #fffcdd;
    color: #333;
    padding: 10px;
    border-radius: 4px;
    border-left: 4px solid #ffcc00;
    margin-bottom: 20px;


}

.form-group button {
    background-color: #FFD700;
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

.form-group button:hover {
    background-color: #f1c40f;
}

.hidden {
    display: none;
}



/* Estilo para la sección de contenido */
.contenido {
    background-color: #fcfcfc;
    padding: 20px;
    border: 1px solid #ccc;
    margin: 20px auto;
    width: 90%;
    max-width: 1080px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.contenido .contenido-centrado h2 {
    font-size: 1.5em;
    margin-bottom: 20px;
    color: #333;

}
.contenido .contenido-centrado h3 {
    font-size: 1.2em;
    margin-bottom: 20px;
    color: #333;

}
.contenido-centrado {
    display: flex;          /* Flexbox para alineación */
    justify-content: center; /* Centrar horizontalmente */
    gap: 10px;               /* Espacio entre botones, ajusta según necesites */
    margin: 0 auto;          /* Centrar en contenedor */
	
}
@media (max-width: 768px) {
	.contenido .contenido-centrado h2 {
		font-size: 1.2em !important;
		margin-bottom: 10px;
		line-height: 1;
	}
	.contenido .contenido-centrado h3 {
		font-size: 0.8em !important;
		margin-bottom: 10px;
		line-height: 1;
	}
}

	/* Estilos para la tabla */
.student-table {
    width: 90%; /* Ocupa el 90% del contenedor */
    border-collapse: collapse; /* Quita los espacios entre celdas */
    margin: auto; /* Centra la tabla dentro del contenedor */
}
.problemas-table {
    width: 90%; /* Ocupa el 90% del contenedor */
    border-collapse: collapse; /* Quita los espacios entre celdas */
    margin: auto; /* Centra la tabla dentro del contenedor */
}

/* Estilos para la cabecera */
.student-table thead {
    background-color: #ffeb3b; /* Fondo amarillo */
    color: #333; /* Color de texto para contraste */
}

/* Estilos para las filas alternas */
.student-table tbody tr:nth-child(odd) {
    background-color: #f2f2f2; /* Gris claro */
}

.student-table tbody tr:nth-child(even) {
    background-color: #e0e0e0; /* Gris un poco más oscuro */
}

/* Ancho de columnas */
.student-table th, .student-table td {
    padding: 10px; /* Espaciado interior */
    text-align: left; /* Alineación del texto a la izquierda */
}

.student-table th:nth-child(1),
.student-table td:nth-child(1) {
    width: 40%; /* Columna Alumno */
}

.student-table th:nth-child(2),
.student-table td:nth-child(2) {
    width: 10%; /* Columna DNI */
}

.student-table th:nth-child(3),
.student-table td:nth-child(3) {
    width: 5%; /* Columna Aula */
}

.student-table th:nth-child(4),
.student-table td:nth-child(4) {
    width: 5%; /* Columna Practicas */
}

.student-table th:nth-child(5),
.student-table td:nth-child(5) {
    width: 5%; /* Columna Acciones */
}

.student-table th:nth-child(6),
.student-table td:nth-child(6) {
    width: 5%; /* Columna Acciones */
}
.student-table th:nth-child(6),
.student-table td:nth-child(6) {
    width: 5%; /* Columna Acciones */
}
.student-table th:nth-child(7),
.student-table td:nth-child(7) {
    width: 5%; /* Columna Acciones */
}
.student-table th:nth-child(8),
.student-table td:nth-child(8) {
    width: 10%; /* Columna Acciones */
}



/* Opcional: Borde en celdas para mejor visibilidad */
.student-table th, .student-table td {
    border: 1px solid #ccc; /* Borde ligero */
}

@media (max-width: 768px) {
        .student-table th, .student-table td {
            font-size: 8px; /* Tamaño de texto reducido para móviles */
            padding: 6px; /* Reduce el padding para que se vea mejor en móviles */
        }
        .student-table {
            width: 100%; /* Asegura que ocupe todo el ancho en pantallas pequeñas */
        }
		.problemas-table th, .problemas-table td {
            font-size: 8px; /* Tamaño de texto reducido para móviles */
            padding: 6px; /* Reduce el padding para que se vea mejor en móviles */
        }
		.problemas-table {
            width: 100%; /* Asegura que ocupe todo el ancho en pantallas pequeñas */
        }
    }


#test-inicio {
    padding: 20px;
    background-color: #f0f8ff; /* Fondo claro */
    border-radius: 8px;
}

.iniciar-test, .resultados-test {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #ffffff; /* Fondo blanco para separar las secciones */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.iniciar-test h2, .resultados-test h2 {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: #353535; /* Gris */
}

.test-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.test-item h3 {
    margin: 0;
    font-size: 1.2em;
    color: #333;
}

.iniciar-btn {
    background-color: #FFD700; /* Azul */
    color: #000;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;

}

.iniciar-btn:hover {
    background-color: #f1c40f; /* Amarillo oscuro en hover */
}

.tabla-resultados {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px 0;
}

.tabla-resultados th, .tabla-resultados td {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.tabla-resultados th {
    background-color: #ffe86f; /* Azul oscuro */
    color: black;
    font-weight: bold;
}

.tabla-resultados .fila-alterna {
    background-color: #f9f9f9; /* Color de fondo alterno para filas */
}

.aprobado {
    color: green; /* Verde para aprobado */
    font-weight: bold;
}

.suspendido {
    color: red; /* Rojo para suspendido */
    font-weight: bold;
}

.resultado-btn {
    background-color: #FFD700; /* Azul */
    color: #000;
    border: none;
    padding: 5px 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.resultado-btn:hover {
    background-color: #f1c40f; /* Azul oscuro en hover */
}

.indicadorSEL {
    background-color: #d0ebff; /* Azul claro */
    color: #004085; /* Azul oscuro para el texto */
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
    margin-left: 10px;
    border: 1px solid #b8daff; /* Borde para mejorar visibilidad */
}
.indicadorOK {
    background-color: #9ffe5d; /* Verde claro */
    color: #004085; /* Azul oscuro para el texto */
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
    margin-left: 10px;
    border: 1px solid #b8daff; /* Borde para mejorar visibilidad */
}

}

/* Ajustes de Responsividad */
@media (max-width: 768px) {
    .container {
        flex-direction: column;


    }

    .sidebar {
        width: 100%;
        height: auto;


    }

    main {
        height: auto;


    }

    .perfil {
        width: 100%;


    }
} 


.preguntas-test h2 {
    font-size: 1.5em;
    margin-bottom: 20px;
    color: #353535; /* Gris */
}

.pregunta {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f0f8ff; /* Fondo claro */
    border-radius: 8px;
    border: 1px solid #ccc;
}

.pregunta h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #333;
}

.opciones label {
    display: block;
    margin-bottom: 10px;
    font-size: 1em;
    color: #333;
}

.opciones input[type="radio"] {
    margin-right: 10px;
}

.navegacion-test {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.navegacion-test button {
    background-color: #FFD700; /* Amarillo principal */
    color: #333;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.navegacion-test button:hover {
    background-color: #f1c40f; /* Amarillo oscuro en hover */
}

.btn-enviar {
    background-color: #28a745; /* Verde para enviar el test */
    color: #fff;
}

.btn-enviar:hover {
    background-color: #218838; /* Verde oscuro en hover */
}

.nuevo-capitulo {
    background-color: #f9f9f9;
    padding: 20px;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    max-width: 1080px;
}

.seleccion-curso-tema {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.seleccion-curso-tema label {
    font-weight: bold;
    margin-bottom: 5px;
}

.seleccion-curso-tema select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 1em;
}

.editor-capitulo {
    margin-top: 20px;
}

.editor-capitulo h3 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 10px;
}



#contenido-capitulo {
    width: 100%;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1em;
    background-color: #fefefe;
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.05);
}

#contenido-capitulo:focus {
    outline: none;
    border-color: #66afe9;
    box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
}

						#galeria {
							display: flex;
							flex-direction: column;
							align-items: center;
							font-family: Arial, sans-serif;
						}
						#imageContainer {
							position: relative;
							display: inline-block;
							max-width: 80%;
							margin-bottom: 10px
						}
						.control-left, .control-right {
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							/*background-color: rgba(0, 0, 0, 0.5);*/
							background-color: #FFC700 !important;
							color: white;
							border: none;
							padding: 10px;
							cursor: pointer;
							font-size: 20px;
							border-radius: 50%;
							width: 40px;
							height: 90px;
						}

						.control-left {
							left: -70px; /* Ajusta la distancia según lo necesites */
						}

						.control-right {
							right: -70px; /* Ajusta la distancia según lo necesites */
						}

						.control-left:disabled, .control-right:disabled {
							background-color: #aaa;
							cursor: not-allowed;
						}

						
						#galleryImg {
							width: 100%;
							height: auto;
							border: 2px solid #ddd;
							border-radius: 8px;
						}
						
						/* Estilo para la imagen superpuesta */
						#overlayImg {
							position: absolute;
							top: 4px; /* Hispal - 20 Blue */
							left: 5px; /* Hispal - 50 Blue */
							width: 15%; /* Hispal - 15 Blue *//* Ajusta el tamaño de la imagen superpuesta */
							height: auto;
							max-width: 60px;
							z-index: 1;
							border-radius: 5px;
						}
						#overlayImg2 {
							position: absolute;
							bottom: 10px; /* 10 Hispal - 11 Blue */
							right: 4px; /* 4 Hispal - 5 Blue */
							/* width: 75px; /* Ajusta el tamaño de la imagen superpuesta  - 60 para Hispal - 75 para blue*/
							/* height: auto; */
							width: 8%; /* 8 Hispal - 10 Blue *//* Ajusta el tamaño de la imagen superpuesta */
							height: auto;
							max-width: 76px;
							
							z-index: 1;
							border-radius: 5px;
						}

						#controls {
							display: flex;
							justify-content: space-between;
							width: 100px;
							margin-top: 10px;
						}

						.btn {
							cursor: pointer;
							padding: 5px 10px;
							background-color: #007bff;
							color: white;
							border: none;
							border-radius: 5px;
							font-size: 14px;
						}

						.btn:disabled {
							background-color: #aaa;
							cursor: not-allowed;
						}

						#imageNumber {
							margin-top: 5px;
						}
						
						/* Ajustes para pantallas pequeñas */
						@media (max-width: 600px) {
							#overlayImg {
								width: 7%; /* 7 Hispal - 7 Blue */ /* Ajuste mayor para dispositivos pequeños */
								max-width: 40px; /* Tamaño máximo en pantallas pequeñas */
								top: 9px; /* 9 Hispal - 10 Blue */
								left: 19px; /* 19 Hispal - 17 Blue */
							}
							
							
						}
						/* Ajustes para pantallas de tabletas */
						@media (min-width: 601px) and (max-width: 899px) {
							#overlayImg {
								width: 7%; /* 7 Hispal - 7 Blue */
								max-width: 45px;
								top: 11px; /* 11 Hispal - 12 Blue */
								left: 28px; /* 28 Hispal - 21 Blue */
							
						}
						/* Ajustes para pantallas grandes (900px y más) */
						@media (min-width: 900px) and (max-width: 1280px){
							#overlayImg {
								width: 7%; /* 7 Hispal - 8 Blue */
								max-width: 60px;
								top: 12px; /* 12 Hispal - 12 Blue */
								left: 35px; /* 30 Hispal - 25 Blue */
							}
							
						}
						
						
						/* Ajustes para pantallas pequeñas */
						@media (max-width: 600px) {
							#overlayImg2 {
								width: 8%; /* 8 Hispal - 10 Blue */ /* Ajuste mayor para dispositivos pequeños */
								max-width: 40px; /* Tamaño máximo en pantallas pequeñas */
								bottom: 7px; /* 7 Hispal - 8 Blue */
								right: 2px; /* 2 Hispal - 3 Blue */
							}
						}
						/* Ajustes para pantallas de tabletas */
						@media (min-width: 601px) and (max-width: 899px) {
							#overlayImg2 {
								width: 8%; /* 8 Hispal - 10 Blue */
								max-width: 45px;
								bottom: 7px; /* 7 Hispal - 8 Blue */
								right: 3px; /* 3 Hispal - 4 Blue */
							}
						}
						/* Ajustes para pantallas grandes (900px y más) */
						@media (min-width: 900px) and (max-width: 1280px){
							#overlayImg2 {
								width: 8%; /* 8 Hispal - 10 Blue */
								max-width: 60px;
								bottom: 8px; /* 8 Hispal - 10 Blue */
								right: 4px; /* 4 Hispal - 5 Blue */
							}
						}


/* Estilo para navegadores basados en Webkit */
::-webkit-scrollbar {
    width: 6px; /* Cambia el ancho de la barra vertical */
    height: 6px; /* Cambia el alto de la barra horizontal */
}

::-webkit-scrollbar-thumb {
    background: #ffcc00; /* Color de la parte desplazable */
    border-radius: 10px; /* Borde redondeado para la parte desplazable */
}

::-webkit-scrollbar-thumb:hover {
    background: #ffdd33; /* Color cuando se pasa el mouse sobre la parte desplazable */
}

::-webkit-scrollbar-track {
    background: #f0f0f0; /* Color del fondo del riel de desplazamiento */
}
.debug-outlines * {
    outline: 2px dashed red !important; /* Se aplica a todos los elementos con !important para asegurar que sea visible */
}






















/*        ESTILOS ANTERIORES         */
/*