/* Estilos para la ventana de carga */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Estilo adicional para botones */
.btn-outline-dark {
    border: 1px solid #000;
    color: #000;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.btn-outline-dark:hover {
    background-color: #000;
    color: #fff;
}

/*Estilo para sidebar menu */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
display: flex;
min-height: 100vh;
}

/* 🔹 Asegurar que el sidebar ocupe toda la altura */
.sidebar {
    width: 150px;
    background-color: #333;
    color: #fff;
    transition: all 0.3s;
    overflow-x: hidden;
    position: fixed;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    justify-content: space-between; /* 🔹 Asegura que el botón cierre sesión esté abajo */
}

.sidebar.hidden {
width: 80px;
}

/* 🔹 Botón de menú */
.toggle-btn {
    font-size: 24px;
    cursor: pointer;
    color: #fff;
    background-color: transparent;
    border: none;
    padding: 15px;
    display: flex;
    align-items: center;
}

.menu-icon {
font-size: 20px;
margin-right: 10px;
}

.menu-text {
    font-size: 14.5px;
    transition: opacity 0.3s, visibility 0.3s;
    }

.menu-text-toggle {
font-size: 18px;
transition: opacity 0.3s, visibility 0.3s;
}

/* 🔹 Ocultar el texto al colapsar el sidebar */
.sidebar.hidden .menu-text {
    opacity: 0;
    visibility: hidden;
    font-size: 14px; /* 🔽 Más pequeño cuando está colapsado */
}

.sidebar.hidden .menu-text-toggle {
    opacity: 0;
    visibility: hidden;
    font-size: 14px; /* 🔽 Más pequeño cuando está colapsado */
}

/* 🔹 Menú */
.menu {
    flex-grow: 1; /* 🔹 Asegura que los elementos ocupen el espacio disponible */
}

.menu-item {
display: flex;
align-items: center;
padding: 15px; /* Igual al padding del botón de menú */
cursor: pointer;
transition: background 0.3s;
color: #fff;
text-decoration: none;
}

.menu-item:hover {
background-color: #575757;
}

.menu-item i {
color: #fff;
}

.no-underline {
text-decoration: none;
}

.content {
margin-left: 150px;
padding: 20px;
flex-grow: 1;
transition: margin-left 0.3s;
width: 100;
overflow-x: hidden;
}

.sidebar.hidden + .content {
margin-left: 80px;
}

/* Estilos para la tabla de resultados */
.table-hover tbody tr:hover {
    background-color: #f0f0f0; /* Color de fondo al pasar el mouse */
}

.table-condensed th, .table-condensed td {
    padding: 10px; /* Ajustar el espaciado de las celdas */
}

.table {
    width: 90%; /* Reduce el ancho de la tabla */
    margin: auto; /* Centra la tabla */
    font-size: 0.9rem; /* Reduce el tamaño de fuente de la tabla */
}

.table th {
    background-color: #333; /* Fondo para los encabezados */
    color: #fff; /* Color del texto en los encabezados */
    text-align: center;
}

.table-responsive thead.sticky-top th {
    background-color: #212529; /* igual a .table-dark */
    color: #fff;
}

.table td {
    text-align: center; /* Centra horizontalmente los valores */
    vertical-align: middle; /* Centra verticalmente los valores */
    white-space: nowrap; /* Evita que el contenido salte de línea */
    overflow: hidden; /* Maneja contenido largo */
    text-overflow: ellipsis; /* Agrega puntos suspensivos si el texto es demasiado largo */
}

.table td:last-child {
    min-width: 120px; /* Ajusta según el diseño */
    white-space: nowrap; /* Evita saltos de línea en la columna */
}

/*--- Estilo adicional para el botón de descarga ---*/
#archivoCSV {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #28a745; /* Verde para indicar éxito */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

#archivoCSV:hover {
    background-color: #218838; /* Color más oscuro al pasar el mouse */
    transform: scale(1.05); /* Pequeña ampliación al pasar el mouse */
}

/* Estilo para los botones en la columna Acciones */
td .d-flex {
    display: inline-flex !important; /* Asegura que el contenedor use flexbox */
    gap: 0.5rem; /* Espaciado uniforme entre los botones */
    align-items: center; /* Centra los elementos verticalmente */
    flex-wrap: nowrap; /* Asegura que los botones no se apilen */
}

td .d-flex > button,
td .d-flex {
    display: inline-flex !important; /* Asegura que los enlaces y botones respeten flexbox */
    align-items: center; /* Centra íconos verticalmente */
    padding: 0; /* Limpia espacio adicional */
    margin: 0; /* Elimina márgenes */
    background: transparent; /* Sin fondo */
    border: none; /* Sin bordes */
    text-decoration: none; /* Elimina subrayados en enlaces */
}

.bi {
    font-size: 1rem;
    vertical-align: middle;
    margin-right: 0.5rem;
}

/* 🔹 Botón de Cerrar Sesión en la parte inferior */
.logout-btn {
    display: flex;
    align-items: center;
    padding: 15px;
    color: white;
    background-color: #dc3545; /* 🔹 Color rojo de Bootstrap */
    text-decoration: none;
    font-size: 12px; /* 🔹 Reducción del tamaño de la fuente */
    transition: background-color 0.3s;
}

.logout-btn i {
    font-size: 18px; /* 🔹 Tamaño del ícono alineado con los demás */
    margin-right: 10px;
}

.logout-btn:hover {
    background-color: #c82333;
}

/* Estilos para el stepper */
.stepper {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding-left: 0;
}

.step {
    flex: 1;
    text-align: center;
    position: relative;
}

.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15px;
    right: -50%;
    width: 100%;
    height: 2px;
    background-color: #dee2e6;
    z-index: 0;
}

.step-circle {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    background-color: #dee2e6;
    margin: 0 auto 5px;
    color: #000;
    z-index: 1;
}

.step.active .step-circle {
    background-color: #0d6efd;
    color: #fff;
}

.step.completed .step-circle {
    background-color: #198754;
    color: #fff;
}

.step.completed::after {
    background-color: #198754;
}