/* Fondo del modal */
.cfg-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Contenido del modal */
.cfg-modal-content {
    background-color: #fff;
    padding: 20px;
    width: 70%; /* Aumentar el ancho del modal */
    margin: 10% auto;
    border-radius: 10px;
    position: relative;
    max-height: 80vh; /* Evitar desbordamientos verticales */
    overflow-y: auto; /* Permitir desplazamiento solo si es necesario */
}

/* Botón de cierre */
.cfg-close {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 20px;
    cursor: pointer;
}

.cfg-title {
    color: darkblue;
}

.cfg-tab-button {
    color: darkblue;
}

.cfg-footer {
    display: flex;
    justify-content: center;
    padding: 10px;
}

.cfg-save-btn {
    background-color: darkblue;
    color: white;
    border: none;
    padding: 10px 20px;
    margin-top: 10px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.cfg-save-btn:hover {
    background-color: #2980b9;
}

/* Pestañas */
.cfg-tabs {
    display: flex;
    border-bottom: 2px solid #ddd;
    margin-bottom: 10px;
}

.cfg-tab-button {
    background: none;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

.cfg-active {
    border-bottom: 2px solid blue;
    font-weight: bold;
}

/* Contenido de pestañas */
.cfg-tab-content {
    display: block;
}

.cfg-hidden {
    display: none;
}

/* Diseño de Grid para 3 columnas */
.cfg-checkbox-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 columnas de igual tamaño */
    gap: 20px; /* Espacio entre las columnas */
    margin-top: 20px;
}

/* Cada columna tiene un margen abajo */
.cfg-checkbox-group .cfg-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Estilo de los checkboxes */
.cfg-column-checkbox {
    margin-right: 10px;
}

/* Estilo del título de las columnas */
.cfg-tab-content h3 {
    font-size: 20px;
    color: #2c3e50;
    margin-bottom: 10px;
}

/* Estilo cuando el botón está deshabilitado */
.cfg-save-btn:disabled {
    background-color: #555; /* Fondo gris oscuro */
    color: #ccc; /* Texto gris claro */
    cursor: not-allowed; /* Cambia el puntero a una cruz */
}

/* Estilo cuando el botón está habilitado */
.cfg-save-btn {
    background-color: darkblue; /* Fondo verde */
    color: white; /* Texto blanco */
    cursor: pointer; /* Puntero normal */
}