:root {
    --rojo: #d32f2f;
    --rojo-hover: #b71c1c;
    --azul: #1565c0;
    --azul-hover: #0d47a1;
    --texto: #333;
    --borde: #ced4da;
}

body {
    background-color: #f8f9fa;
    font-family: 'Segoe UI', sans-serif;
    color: var(--texto);
    
}

/* Título */
.section-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    border-left: 8px solid var(--rojo);
    padding-left: 12px;
    color: var(--rojo);
}

/* Inputs, selects, textareas uniformes */
input[type="text"],
input[type="date"],
input[type="time"],
select,
textarea {
    border: 1px solid var(--borde) !important;
    border-radius: 0.375rem !important;
    font-size: 16px;
    padding: 10px 12px;
    height: auto !important;
    box-sizing: border-box;
}

/* Botones */
button,
.btn {
    font-size: 16px;
    padding: 10px 18px;
    border-radius: 0.375rem;
    transition: background-color 0.3s;
}

.btn-primary {
    background-color: var(--azul);
    border-color: var(--azul);
}

.btn-primary:hover {
    background-color: var(--azul-hover);
    border-color: var(--azul-hover);
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-danger {
    background-color: var(--rojo);
    border-color: var(--rojo);
}

.btn-danger:hover {
    background-color: var(--rojo-hover);
    border-color: var(--rojo-hover);
}

/* Espaciado entre grupos dinámicos */
.dynamic-group .form-select,
.dynamic-group .form-control {
    margin-bottom: 0;
}

/* Responsive fix */
@media (max-width: 768px) {
    .dynamic-group > div {
        margin-bottom: 10px;
    }

    .dynamic-group .btn {
        width: 100%;
    }
}
.header {
            background-color: #fff;
            padding: 20px 0;
            border-bottom: 1px solid #ccc;
            text-align: center;
            position: sticky; /* Esto hace que el header sea pegajoso */
            top: 0; /* Mantiene el header en la parte superior */
            z-index: 1000; /* Asegura que el header esté por encima de otros elementos */
        }

        .header .top {
            display: flex;
            justify-content: space-between; /* Distribuye los elementos de manera adecuada */
            align-items: center;
            gap: 15px;
        }

        .header img {
            width: 50px;
            height: 50px;
        }

        .header .line {
            font-size: 30px;
            color: #ccc;
        }

        .header .title-group {
            text-align: left;
        }

        .header .title {
            font-size: 20px;
            color: black;
            font-weight: bold;
        }

        .header .subtitle {
            font-size: 16px;
            color: #333;
        }

        .header .admin-link a {
            color: #0056AC;
            font-size: 16px;
            text-decoration: none;
            font-weight: bold;
        }

        .header .admin-link a:hover {
            color: #004494;
        }

        hr {
            border: 0;
            border-top: 1px solid #ccc;
            margin: 0;
        }
		.footer {
			text-align: center;
			background-color: #26292e;
			color: white;
			padding: 15px;
			font-size: 16px;
			margin-top: 40px; /* Deja el margen superior como estaba */
			margin-bottom: 30px; /* Agrega un margen inferior para que se aleje más del contenido */
			position: relative;
		}

		.footer::before {
			content: "";
			position: absolute;
			top: -27px; /* Distancia de la línea desde el borde superior del footer */
			left: 0;
			width: 100%;
			height: 50px; /* Altura de la textura */
			background-image: url('../img/imagen.png'); /* Ruta de la imagen de textura */
			background-repeat: repeat-x; /* Hace que la textura se repita horizontalmente */
			opacity: 0.9; /* Control de opacidad para suavizar el efecto */
			z-index: 1; /* Asegura que la textura esté por encima del contenido del footer */
		}

		.header .top {
			display: flex;
			justify-content: space-between; /* Esto asegura que los elementos se distribuyan correctamente */
			align-items: center;
			width: 100%;
			max-width: 1200px; /* Ajusta el ancho máximo según sea necesario */
			margin: 0 auto; /* Centra el contenedor */
			padding: 0 20px; /* Añade un poco de padding para espaciado */
		}

		.header .left-group {
			display: flex;
			align-items: center;
			gap: 15px; /* Espaciado entre los elementos del lado izquierdo */
		}

		.header img {
			width: 50px;
			height: 50px;
		}

		.header .line {
			font-size: 30px;
			color: #ccc;
		}

		.header .title-group {
			text-align: left;
		}

		.header .title {
			font-size: 20px;
			color: black;
			font-weight: bold;
		}

		.header .subtitle {
			font-size: 16px;
			color: #333;
		}

		.header .admin-link {
			margin-left: auto; /* Esto mueve el enlace "Administrar" a la derecha */
			font-size: 16px;
		}

		.header .admin-link a {
			text-decoration: none;
			color: #0056AC;
		}

		.header .admin-link a:hover {
			color: #004494;
		}

		.header .admin-link {
			margin-left: auto; /* Esto mueve el enlace "Administrar" a la derecha */
		}

		.header .admin-link a {
			display: inline-block;
			padding: 12px 20px;
			background-color: #0056AC;
			color: white;
			text-decoration: none;
			border-radius: 6px;
			font-size: 16px;
			text-align: center;
		}

		.header .admin-link a:hover {
			background-color: #004494;  /* Color de fondo cuando el mouse pasa por encima */
			color: #ffffff; /* Color de texto en el hover */
		}
		.footer .subtitulo {
			font-size: 14px;
			margin-top: 10px;
			color: #a5a5a5; /* Color más claro para el subtítulo */
		}

		.footer .subtitulo a {
			color: #a5a5a5; /* Color del enlace */
			text-decoration: none;
		}

		.footer .subtitulo a:hover {
			color: #fff; /* Cambia el color al pasar el mouse */
		}
		/* Estilo por defecto para todos los botones */
		.button {
			padding: 10px 20px;
			background-color: #007bff; /* Azul por defecto */
			color: white;
			text-decoration: none;
			border-radius: 5px;
			margin: 5px;
		}

		/* Estilo específico para el enlace "Salir" */
		.admin-link a[href="logout.php"] {
			background-color: #dc3545; /* Rojo para el botón "Salir" */
		}

		.button:hover {
			opacity: 0.8;
		}
		.tabla-usuarios {
		  width: 100%;
		  border-collapse: separate;
		  border-spacing: 0;
		  border-radius: 10px;
		  overflow: hidden;
		  box-shadow: 0 0 10px rgba(0,0,0,0.1);
		  margin-top: 20px;
		}

		.tabla-usuarios th,
		.tabla-usuarios td {
		  padding: 10px 15px;
		  text-align: left;
		}

		.tabla-usuarios th {
		  background-color: #003366; /* azul oscuro */
		  color: white;
		}

		.tabla-usuarios tr:nth-child(even) {
		  background-color: #f2f2f2; /* gris claro */
		}

		.tabla-usuarios tr:hover {
		  background-color: #e0e7ff; /* azul claro al pasar */
		}


		/* Botón Agregar usuario */
		.boton-agregar {
		  background-color: white;
		  color: #0056b3; /* azul fuerte */
		  border: 2px solid #0056b3;
		  padding: 8px 16px;
		  border-radius: 6px;
		  font-weight: bold;
		  transition: 0.3s;
		  display: inline-flex;
		  align-items: center;
		  gap: 5px;
		}

		.boton-agregar:hover {
		  background-color: #0056b3;
		  color: white;
		}

		/* Botones Editar y Eliminar */
		.boton-editar, .boton-eliminar {
		  background-color: transparent;
		  color: #0056b3;
		  border: 2px solid #0056b3;
		  padding: 5px 12px;
		  border-radius: 6px;
		  font-weight: bold;
		  transition: 0.3s;
		}

		.boton-editar:hover, .boton-eliminar:hover {
		  background-color: #0056b3;
		  color: white;
		}

		/* Título del modal */
		.modal-header {
		  background-color: #0056b3;
		  color: white;
		  border-bottom: none;
}
		.paginacion {
			margin-top: 20px;
			text-align: center;
		}

		.pagina {
			display: inline-block;
			padding: 8px 14px;
			margin: 0 3px;
			border-radius: 6px;
			background-color: #ddd;
			color: #004080;
			text-decoration: none;
			font-weight: bold;
			transition: background-color 0.3s;
		}

		.pagina:hover {
			background-color: #bbb;
		}

		.pagina.activa {
			background-color: #004080;
			color: white;
		}