body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
}



/* Estilos generales para el contenido y la tabla */
.contenido {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    margin: 20px;
}

#tablaEmpresas {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

#tablaEmpresas th, #tablaEmpresas td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ccc;
}

#tablaEmpresas th {
    background-color: #007BFF;
    color: white;
    border-bottom: 3px solid #0056b3;
}

#tablaEmpresas tr:last-child td {
    border-bottom: none;
}

#tablaEmpresas tr:hover {
    background-color: #f8f9fa;
}

/* Estilos para botones dentro de la tabla */
button {
    padding: 5px 15px;
    border: none;
    border-radius: 4px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #7c8f9b;
}

/* Espaciado y alineación de botones para acciones */
#tablaEmpresas td:last-child {
    text-align: right;
}

/* Estilos adicionales para responsividad y visibilidad */
@media (max-width: 768px) {
    #tablaEmpresas, #tablaEmpresas th, #tablaEmpresas td {
        padding: 8px;
    }

    #tablaEmpresas th, #tablaEmpresas td {
        font-size: 14px;
    }
}


#respuesta {
	padding: 10px;
	margin-top: 10px;
	border-radius: 2px;
	display: none;
}
div#respuesta.display-block {
	display: block;
}





.table thead th {
    position: sticky;
    top: 0;
    background-color: #4f5052; /* Fondo blanco para que el borde sea visible */
    z-index: 100; /* Asegura que esté encima del contenido */
    box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.1); /* Sombra en lugar del borde */
    color: #ffffff; /* Cambia el color del texto a un gris oscuro */
    font-weight: bold; /* Asegura que el texto sea negrita */
}

/* Estilo para resaltar celdas al pasar el cursor */
.table tbody tr:hover td {
    background-color: #feffb8; /* Color de fondo cuando el cursor está sobre una fila */
    transition: background-color 0.3s ease; /* Transición suave */
}

.table th:nth-child(1) {
    width: 10%; /* Columna 1 (ID) con un 10% del ancho total */
}

.table th:nth-child(2) {
    width: 60%; /* Columna 2 (Nombre) con un 60% del ancho total */
}

.table th:nth-child(3) {
    width: 30%; /* Columna 3 (Acciones) con un 30% del ancho total */
}




/* Ajuste adicional para el espacio entre el input y el botón */
.d-flex .form-control {
    width: auto;
    flex-grow: 1; /* Ajusta el tamaño del input según el espacio disponible */
}

.me-2 {
    margin-right: 0.5rem; /* Espaciado entre el input y el botón */
}




.column-container {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}
.column {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}
.column h4 {
    margin-bottom: 20px;
}
.column button {
    margin-bottom: 15px;
}
.selected {
    background-color: #e1e9ec !important;  /* Cambia este color según tus necesidades */
    /*color: #62718d !important;
    font-weight: bold !important;*/
}

.selected-sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: #e0f7fa;  /* Color de fondo pegajoso */
    z-index: 1000;  /* Asegúrate de que esté encima de otros elementos */
    padding: 10px;
    border-bottom: 2px solid #006064;  /* Un borde para resaltarlo */
}

#campamentosList {
    max-height: 400px;  /* Asegúrate de que haya espacio para hacer scroll */
    overflow-y: auto;   /* Permitir scroll vertical */
}

#modulosList {
    max-height: 400px;  /* Asegúrate de que haya espacio para hacer scroll */
    overflow-y: auto;   /* Permitir scroll vertical */
}

#habitacionesList {
    max-height: 400px;  /* Asegúrate de que haya espacio suficiente para hacer scroll */
    overflow-y: auto;   /* Permitir scroll vertical */
}


.header-with-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-with-button h4 {
    margin-right: 10px;
}

.btn-link {
    color: #38b882 !important;; /* Color del ícono */
    font-size: 1.5rem !important;; /* Tamaño del ícono */
}

.btn-link:hover {
    color: #5ce20e !important;; /* Color del ícono al pasar el mouse */
    text-decoration: none !important;; /* Evitar subrayado */
}



/* Estilos para la tabla moderna */
.table-responsive {
    max-height: 400px;
    overflow-y: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: center; /* Centrar el contenido por defecto */
}

thead th {
    position: sticky;
    top: 0;
    background-color: #f1f1f1;
    z-index: 2;
    font-weight: bold;
    vertical-align: middle;
}

tbody td {
    padding: 10px;
    vertical-align: middle; /* Asegurar que el contenido esté centrado verticalmente */
}

thead th, tbody td {
    border: 1px solid #dee2e6;
}

/* Centrar los contenidos de estas columnas */
thead th:nth-child(2),
thead th:nth-child(3),
thead th:nth-child(4),
thead th:nth-child(5),
thead th:nth-child(6),
tbody td:nth-child(2),
tbody td:nth-child(3),
tbody td:nth-child(4),
tbody td:nth-child(5),
tbody td:nth-child(6) {
    text-align: center;
}

/* Estilo del encabezado de la tabla */
.card-header {
    background-color: #007bff;
    color: white;
    padding: 15px;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
}

/* Ajustes para la tabla dentro de la card */
.card {
    border-radius: 8px;
}

.card-body {
    padding: 0;
    border-radius: 8px;
}

.table-bordered {
    border: 1px solid #dee2e6;
}

/* Mejor apariencia para la acción de botones */
.btn-primary {
    background-color: #007bff;
    border: none;
    padding: 5px 10px;
    font-size: 14px;
}

#alertIcon {
    margin-right: 5px; /* Espacio entre el ícono y el número de alertas */
}

.badge {
    background-color: red; /* Solo un ejemplo de color de fondo para el contador */
}

.active-link {
    color: white !important;
    border-bottom: 2px solid white; /* Ajusta el grosor y el estilo del borde según tus necesidades */
}

.navbar-nav .dropdown-menu {
    text-align: left;  /* Centrar el texto de los submenús */
}

.nav-link {
    color: #555;  /* Color del texto para todos los enlaces */
}

.nav-link2 {
    color: #555;  /* Color del texto para todos los enlaces */
}



.bi {
    font-size: 1.25rem; /* Ajustar el tamaño del ícono */
    vertical-align: -0.125em;
}

.badge {
    margin-left: 5px;
}

/* Ajusta el ancho mínimo de los submenús */
.navbar-nav .dropdown-menu {
    min-width: 200px; /* Ajusta este valor según sea necesario */
}

/* Opcional: Haz que el ancho del submenú se ajuste al contenido más largo */
.navbar-nav .dropdown-menu {
    width: auto;
    white-space: nowrap; /* Asegura que los textos no se partan */
}

/* Mejora la apariencia del texto dentro de los submenús */
.navbar-nav .dropdown-menu a {
    clear: both;
    color: #333; /* Cambia el color del texto según tu diseño */
    padding: 10px; /* Añade más relleno si es necesario */
}

/* Asegúrate de que los submenús no se expandan más allá de la pantalla */
.navbar-nav .dropdown-menu {
    overflow: hidden; /* Opcional: oculta cualquier contenido que exceda el ancho del menú */
}
@media (max-width: 768px) {
    .navbar-nav .dropdown-menu {
        min-width: 100%; /* Ocupa todo el ancho en dispositivos móviles */
        width: auto;
    }
}


/* Estilo base para el menú */
#menu a {
    color: white;  /* Texto blanco */
    background-color: black;  /* Fondo negro */
    padding: 10px;  /* Añadir un poco de padding para mejorar la apariencia */
    display: block; /* Hace que el enlace llene el espacio del <li> */
}

/* Estilo cuando se apunta con el cursor */
#menu a:hover, #menu a:focus {
    color: black;  /* Texto negro */
    background-color: white;  /* Fondo blanco */
}

/* Ajustes adicionales para dropdowns, si es necesario */
#menu .dropdown-menu {
    background-color: black;  /* Fondo negro para los submenús */
}

#menu .dropdown-menu a {
    color: white;  /* Texto blanco para los submenús */
}

#menu .dropdown-menu a:hover {
    color: black;  /* Texto negro al apuntar */
    background-color: white;  /* Fondo blanco al apuntar */
}

#subMenuAlertas .dropdown-header:hover {
    background-color: rgba(255, 62, 48, 0.479); /* Fondo blanco al pasar el mouse */
    color: black; /* Cambia el color del texto a negro para mejorar la legibilidad */
}

        /* Estilo adicional para hover */
        .nav-link:hover, .dropdown-item:hover {
            /*background-color: rgb(218, 218, 218) !important; /* Fondo blanco al pasar el ratón 
            color: rgb(255, 255, 255) !important;  Texto negro al pasar el ratón */
        }
        #mainContent { margin-top: 70px; } /* Añade relleno para evitar que el contenido se oculte detrás del navbar */


        /* Estilo para el menú principal y submenú */
.navbar-nav .dropdown-menu {
    background-color: rgb(83, 80, 80);
    color: white;  /* Texto blanco */
    border: none;  /* Eliminar el borde por defecto */
}

/* Estilo para los enlaces del submenú */
.navbar-nav .dropdown-menu .dropdown-item {
    color: white;  /* Texto blanco */
}

/* Al pasar el mouse por los enlaces del submenú */
.navbar-nav .dropdown-menu .dropdown-item:hover, 
.navbar-nav .dropdown-menu .dropdown-item:focus {
    background-color: white;  /* Fondo blanco al hacer hover */
    color: black;  /* Texto negro al hacer hover */
}

.nav-link:hover{
    color: rgb(255, 255, 255)!important;
}
table.dataTable {
    width: 100% !important;
}

table.dataTable th, table.dataTable td {
    white-space: nowrap;
}



table.dataTable th, table.dataTable td {
    white-space: nowrap;  /* Evitar que el texto se divida en varias líneas */
    overflow: hidden;
    text-overflow: ellipsis;  /* Mostrar '...' si el texto es demasiado largo */
}

.modal-header {
    background-color: #f8f9fa;
    border-bottom: none;
    padding: 10px 15px;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-body {
    padding: 15px;
}

.modal-footer {
    padding: 10px 15px;
    border-top: none;
}

.modal-content {
    border-radius: 8px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
}

/* Cambiar el tamaño de la letra en el cuerpo de la tabla DataTables */
.dataTables_wrapper .dataTables_paginate, 
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTable tbody {
    font-size: 12px; /* Ajusta el tamaño a tu preferencia */
}

/* Ajustar la fuente y padding para una apariencia más pequeña */
#detalleHabitacionModal .table {
    font-size: 12px;  /* Reducir tamaño de la fuente */
    line-height: 1.2; /* Reducir altura de las líneas */
}

#detalleHabitacionModal .table th, 
#detalleHabitacionModal .table td {
    padding: 4px 8px;  /* Reducir el padding dentro de las celdas */
    vertical-align: middle;  /* Centrar verticalmente el contenido */
}

/* Reducir el tamaño de los botones e íconos */
#detalleHabitacionModal .btn-sm {
    font-size: 10px;  /* Tamaño de fuente más pequeño para los botones */
    padding: 0;  /* Quitar padding en los botones */
    margin: 0 4px;  /* Espacio reducido entre los íconos */
    line-height: 1;  /* Reducir el espacio dentro del botón */
}

#detalleHabitacionModal .btn-icon {
    font-size: 14px;  /* Reducir el tamaño de los íconos */
    padding: 0;  /* Quitar padding extra */
}

#detalleHabitacionModal .btn-icon i {
    vertical-align: middle;  /* Alinear el ícono verticalmente */
}

#detalleHabitacionModal .btn-icon:hover {
    color: #007bff;  /* Cambiar color del ícono al pasar el mouse */
}

/* Asegurar que los íconos estén alineados en una sola línea */
#detalleHabitacionModal .table td .icon-container {
    display: inline-flex;
    align-items: center;
}


.bg-orange {
    background-color: orange !important;
}

.bg-violeta {
    background-color: rgb(119, 0, 255) !important;
}

.agregar{
    background-color: rgb(0, 117, 153) !important;
}


button:hover {
    background-color: #7c8f9b;
}


.exportarExcelBtn {
    background-color: transparent; /* Fondo transparente */
    color: black; /* Ícono en negro */
    border: none;  /* Sin borde para un look más limpio */
}

.exportarExcelBtn:hover {
    background-color: #258545;
    color: white !important; /* Ícono en blanco */
}

/* Asegurarse de que el ícono dentro del botón también cambia de color */
.exportarExcelBtn i {
    color: inherit; /* El ícono hereda el color del botón */
}



.buscarBtn {
    background-color: transparent; /* Fondo transparente */
    color: black; /* Ícono en negro */
    border: none;  /* Sin borde para un look más limpio */
}

.buscarBtn:hover {
    background-color: #496de4;
    color: white !important; /* Ícono en blanco */
}

/* Asegurarse de que el ícono dentro del botón también cambia de color */
.buscarBtn i {
    color: inherit; /* El ícono hereda el color del botón */
}



/* Estado normal del botón #nuevaEmpresaBtn */
#nuevaEmpresaBtn {
    background-color: transparent; /* Fondo transparente */
    color: black; /* Ícono en negro */
    border: none;  /* Sin borde para mantener el diseño limpio */
}

/* Estado hover del botón #nuevaEmpresaBtn */
#nuevaEmpresaBtn:hover {
    background-color: #4380a3; /* Fondo verde, ajusta este valor según tu paleta de colores */
    color: white; /* Ícono en blanco */
}

/* Asegurarse de que el ícono dentro del botón también cambie de color */
#nuevaEmpresaBtn i {
    color: inherit; /* El ícono hereda el color del botón */
}






/* Centrar el contenedor en la pantalla */
#loginContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f2f2f2; /* Color de fondo suave */
}

/* Estilos para el formulario de inicio de sesión */
#loginForm {
    width: 300px; /* Ajustar el tamaño del formulario */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    background-color: #ffffff;
    text-align: center;
}

/* Estilo de la cabecera principal */
#loginForm h1 {
    font-size: 1.8em;
    color: #007bff;
    margin-bottom: 0.5em;
}

/* Estilos para el encabezado de inicio de sesión */
#loginForm h2 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 1em;
}

/* Estilo de los campos de entrada */
#loginForm .form-control {
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 10px;
}

/* Botón estilizado */
#loginForm .btn {
    width: 100%;
    background-color: #000000;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 4px;
    font-size: 1em;
    transition: background-color 0.3s;
}

#loginForm .btn:hover {
    background-color: #46a146;
    color:#fafafa;
}

/* Mensaje de error */
#loginMessage {
    color: #e74c3c; /* Rojo suave */
    font-size: 0.9em;
    margin-top: 10px;
}


/* Estilo para el título principal */
#pageTitle {
    text-align: center;
    color: #363738;
    margin-top: 20px;
    margin-bottom: 20px; /* Espacio superior */
    font-weight: bold;
}



/* Alinear el ícono de usuario */
.navbar-nav .nav-link i {
    font-size: 1.2em;
    color: #ffffff;
}

/* Estilo del menú desplegable */
.dropdown-menu {
    min-width: 150px;
    text-align: center;
}

#userNameDisplay {
    font-weight: bold;
    color: #333;
}

.dropdown-item-text{
    color:white !important;
    font-size: 0.8em;
    text-align: left;
}

#logoATA{
    width: 42px;
    height: 40px;
    margin-right: 20px;
}

#logoATALoguin{
    width: 60px;
    height: 55px;
}


#separadorLoguin{
    border: 1px solid #918b8b;
    width: 100%;
    margin:auto;
    margin-bottom: 5px;
}